/* Lexicon base: reset and layout. Colours and fonts come from the shelf's look file. */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
textarea{font:inherit;color:inherit;background:none;border:0;resize:none;outline:none;width:100%;display:block}
:focus-visible{outline:2px solid var(--accent,currentColor);outline-offset:2px}
/* Deck n → its colours; tab height steps 0–4; decks 6–10 get a notched tab. */
.k1{--k:var(--h1);--kt:var(--t1);--kd:var(--d1);--s:0}  .k6{--k:var(--h6);--kt:var(--t6);--kd:var(--d6);--s:0;--notch:1}
.k2{--k:var(--h2);--kt:var(--t2);--kd:var(--d2);--s:1}  .k7{--k:var(--h7);--kt:var(--t7);--kd:var(--d7);--s:1;--notch:1}
.k3{--k:var(--h3);--kt:var(--t3);--kd:var(--d3);--s:2}  .k8{--k:var(--h8);--kt:var(--t8);--kd:var(--d8);--s:2;--notch:1}
.k4{--k:var(--h4);--kt:var(--t4);--kd:var(--d4);--s:3}  .k9{--k:var(--h9);--kt:var(--t9);--kd:var(--d9);--s:3;--notch:1}
.k5{--k:var(--h5);--kt:var(--t5);--kd:var(--d5);--s:4}  .k10{--k:var(--h10);--kt:var(--t10);--kd:var(--d10);--s:4;--notch:1}
body{background:var(--ground);color:var(--ink);font-family:var(--body-font)}

/* Text follows the iPhone's text size setting: every font size is N × --u. On a phone or iPad,
   -apple-system-body carries the setting (17px at the default size); elsewhere --u is 1px. */
:root{--u:1px}
@media (pointer:coarse){@supports (font:-apple-system-body){html{font:-apple-system-body}:root{--u:calc(1rem / 17)}}}

/* Header: the deck's name; on Work its code too (00 // …). */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
.top{display:flex;align-items:baseline;gap:10px;padding:calc(env(safe-area-inset-top) + 18px) max(16px,var(--sr)) 14px max(16px,var(--sl));border-bottom:1px solid var(--hair);margin-bottom:16px}
.top h1{font-family:var(--term-font);font-weight:600;font-size:calc(26 * var(--u));line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.code{font-family:var(--label-font);font-weight:600;font-size:calc(12 * var(--u));line-height:1.33;letter-spacing:.08em;color:var(--h1)}
:root[data-shelf="mine"] .code{display:none}
:root[data-shelf="work"] .top h1{font-size:calc(20 * var(--u));line-height:1.3;letter-spacing:-.02em}

/* The wall: 2 columns on phone, 3–4 on iPad, 5–6 on Mac. */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 max(16px,var(--sr)) calc(env(safe-area-inset-bottom) + 120px) max(16px,var(--sl))}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-left:max(32px,var(--sl));padding-right:max(32px,var(--sr))}.top{padding-left:max(32px,var(--sl));padding-right:max(32px,var(--sr))}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1300px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1600px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

.empty{padding:48px 16px;text-align:center;font-family:var(--body-font);font-size:calc(15 * var(--u));line-height:1.4;color:var(--mute)}

/* Add: always bottom right, 56pt. */
.fab{position:fixed;right:calc(var(--sr) + 24px);bottom:calc(env(safe-area-inset-bottom) + 32px);width:56px;height:56px;border-radius:28px;
  background:var(--fab);color:var(--fab-ink);display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.4);z-index:4}
:root[data-shelf="work"] .fab{border-radius:14px;box-shadow:none}

/* First open: the offer. */
.offer{margin:24px 16px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--card);max-width:520px}
.offer h2{font-family:var(--term-font);font-weight:600;font-size:calc(24 * var(--u));line-height:1.25;color:var(--ink);margin-bottom:8px;text-wrap:balance}
.offer p{font-family:var(--body-font);font-size:calc(15 * var(--u));line-height:1.47;color:var(--ink2)}
.offer-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.btn{min-height:44px;padding:0 18px;border-radius:22px;border:1.5px solid var(--line);font-family:var(--body-font);font-weight:700;font-size:calc(15 * var(--u));color:var(--ink)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
:root[data-shelf="work"] .btn{border-radius:10px;font-family:var(--label-font);font-weight:600;font-size:calc(13 * var(--u));letter-spacing:.08em;text-transform:uppercase}
.error{margin-top:12px;font-family:var(--body-font);font-size:calc(14 * var(--u));line-height:1.43;color:var(--h4)}
.error:empty{display:none}

/* Undo: a quiet bar beside the add button. */
.toast{position:fixed;left:calc(var(--sl) + 16px);right:calc(var(--sr) + 96px);bottom:calc(env(safe-area-inset-bottom) + 36px);z-index:20;display:flex;align-items:center;gap:12px;
  min-height:48px;padding:0 6px 0 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-family:var(--body-font);font-size:calc(15 * var(--u));
  box-shadow:0 8px 20px -8px rgba(0,0,0,.45);max-width:420px}
.toast span{flex:1}
.toast-btn{min-height:44px;padding:0 14px;font-family:var(--body-font);font-weight:700;font-size:calc(15 * var(--u));color:var(--paper);text-decoration:underline;text-underline-offset:3px}
:root[data-shelf="work"] .toast{border-radius:8px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}
:root[data-shelf="work"] .toast-btn{font-family:var(--label-font);font-weight:600;font-size:calc(13 * var(--u));letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--on-accent);background:var(--accent);border-radius:6px;min-height:44px;margin:2px 0}

/* A save that failed: a calm line at the top, above everything. */
.notice{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:calc(var(--sl) + 16px);right:calc(var(--sr) + 16px);z-index:30;padding:12px 16px;
  border-radius:12px;background:var(--card);color:var(--ink);border:1.5px solid var(--h4);font-family:var(--body-font);font-size:calc(15 * var(--u));line-height:1.4;max-width:560px}