/* Hearth — warm, calm, and pleasant to open at the end of a long day.
   Solid warm surfaces rather than translucent glass on black: glass looks
   cheap over a dark ground, layered warm tones look considered. */

:root{
  /* ground */
  --bg:#141110;
  --bg-2:#1A1514;

  /* surfaces, each a real colour rather than white at low opacity */
  --surface:#211B19;
  --surface-2:#292220;
  --surface-3:#332A27;

  /* ink */
  --ink:#F8F2E9;
  --muted:rgba(248,242,233,.64);
  --faint:rgba(248,242,233,.40);
  --hint:rgba(248,242,233,.26);
  --line:rgba(248,242,233,.09);
  --line-2:rgba(248,242,233,.16);

  /* accents */
  --amber:#F0A94C;
  --amber-soft:rgba(240,169,76,.14);
  --clay:#E07A5F;
  --sage:#8FAE88;
  --sage-soft:rgba(143,174,136,.16);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Fraunces',Georgia,serif;

  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --shadow:0 2px 8px -4px rgba(0,0,0,.6);
  --shadow-lift:0 14px 34px -16px rgba(0,0,0,.85);

  /* What the keyboard is covering, set from app.js. */
  --kb:0px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tab-h:calc(62px + var(--safe-b));
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;letter-spacing:-.003em;
  background:
    radial-gradient(130% 60% at 15% -5%, #2A1E16 0%, transparent 62%),
    radial-gradient(110% 50% at 95% 8%, #241A1C 0%, transparent 58%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit}
[hidden]{display:none!important}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  border-radius:var(--r-sm);padding:12px 20px;font-weight:600;font-size:15px;
  letter-spacing:-.005em;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),filter .16s ease,background .16s ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  color:#241608;
  background:linear-gradient(135deg,#F6B863,var(--amber) 52%,#E28F4A);
  box-shadow:0 4px 14px -6px rgba(240,169,76,.65),
             inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:active{filter:brightness(.96)}
.btn-primary[disabled]{opacity:.4;box-shadow:none}
.btn-ghost{background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow)}
.btn-ghost:active{background:var(--surface-3)}
.btn-sm{padding:10px 16px;font-size:13.5px;border-radius:11px}
.btn-xs{padding:8px 14px;font-size:12.5px;border-radius:10px;font-weight:600}
.btn-block{display:block;width:100%;text-align:center}
.btn-danger{color:#F0937A;background:rgba(224,122,95,.13)}

.icon-btn{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:background .18s ease,color .18s ease,transform .18s ease;
}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:active{transform:scale(.9);background:var(--surface-2);color:var(--ink)}

/* ── who am I ────────────────────────────────────────────────── */





.who-list button{
  padding:20px;border-radius:var(--r-lg);background:var(--surface);
  font-size:17px;font-weight:600;text-align:left;box-shadow:var(--shadow);
  border:1px solid var(--line);transition:border-color .18s ease,transform .18s ease;
}
.who-list button:active{transform:scale(.985);border-color:var(--amber)}

/* ── shell ───────────────────────────────────────────────────── */
.app{position:relative;height:calc(100% - var(--kb));display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;transition:height .16s ease}
@media (min-width:560px){
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}
.topbar{
  /* Sits over the content rather than beside it: a translucent bar with a blur
     behind it, so what scrolls past visibly goes *under* something solid. */
  position:relative;z-index:5;
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:calc(var(--safe-t) + 12px) 14px 8px;
  background:rgba(20,17,16,.76);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
}
/* and a short fade below it, so the edge is never a hard line */
.topbar::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:20px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,17,16,.76), rgba(20,17,16,0));
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:19px;font-weight:600;letter-spacing:-.01em}
.brandmark{
  width:26px;height:26px;border-radius:8px;display:block;
  box-shadow:0 2px 10px -3px rgba(0,0,0,.7);
}
.topbar-right{display:flex;align-items:center;gap:2px;flex:0 0 auto}

/* ── faces ───────────────────────────────────────────────────── */
.av{
  display:grid;place-items:center;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--surface-2);color:var(--ink);font-weight:700;line-height:1;
  letter-spacing:.01em;position:relative;
}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av-sm{width:30px;height:30px;font-size:12px}
.av-md{width:38px;height:38px;font-size:14.5px}
.av-lg{width:64px;height:64px;font-size:23px}
.av-xl{width:96px;height:96px;font-size:33px}
.av-warm{background:linear-gradient(145deg,#3A2A20,#8B5E3C);color:#FFE9D2}
.av-cool{background:linear-gradient(145deg,#2A2A38,#6B5F8B);color:#EDE7FF}

.me-btn{padding:4px;border-radius:50%;transition:transform .18s ease}
.me-btn:active{transform:scale(.9)}
.me-btn .av{box-shadow:0 0 0 1.5px var(--line-2)}

/* The chat header: who you are talking to, and whether they are looking. */
.peer{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align:left;
  padding:0;transition:opacity .18s ease}
.peer:active{opacity:.6}
.peer .av{box-shadow:0 0 0 2px rgba(240,169,76,.22)}
.peer-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.peer-name{font-family:var(--display);font-size:17.5px;font-weight:600;
  letter-spacing:-.015em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.peer-sub{font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:5px}
.peer-sub.is-live{color:var(--sage)}
.peer-sub.is-live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--sage);
  box-shadow:0 0 7px var(--sage);
}

.view{display:none;flex:1;min-height:0}
.view.is-active{display:flex;flex-direction:column;animation:viewIn .26s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px}
.pad{height:44px}

/* ── headings ────────────────────────────────────────────────── */
.hero{padding:10px 0 20px}
.hero-title{margin:0 0 5px;font-family:var(--display);font-size:30px;
  font-weight:600;letter-spacing:-.022em;line-height:1.15}
.hero-sub{margin:0;color:var(--muted);font-size:14.5px}
.section{margin-bottom:30px}
.section-row{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:13px}
.section-row .section-title{margin:0}
.section-title{margin:0 0 13px;font-size:11px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint)}
.section-note{margin:-6px 0 12px;font-size:13px;color:var(--faint)}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}

/* ── week ────────────────────────────────────────────────────── */
.weekhead{display:flex;align-items:center;gap:10px;padding:8px 0 16px}
.weekhead-mid{flex:1;text-align:center}
.wnav{
  width:40px;height:40px;border-radius:13px;background:var(--surface-2);
  color:var(--muted);font-size:20px;line-height:1;flex:0 0 auto;
  transition:background .18s ease,color .18s ease;
}
.wnav:active{background:var(--surface-3);color:var(--ink)}

.days{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:28px}
.day{
  background:var(--surface);border-radius:var(--r-lg);padding:4px 6px 6px;
  box-shadow:var(--shadow);border:1px solid transparent;
  transition:border-color .2s ease;
}
.day.is-today{
  border-color:rgba(240,169,76,.34);
  background:linear-gradient(180deg,rgba(240,169,76,.07),transparent 42%),var(--surface);
}
.day-head{display:flex;align-items:baseline;justify-content:space-between;
  padding:11px 12px 8px}
.day-name{font-weight:700;font-size:15px;letter-spacing:-.01em}
.day.is-today .day-name{color:var(--amber)}
.day-date{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.slots{display:grid;gap:3px}
.slot{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;
  border-radius:14px;text-align:left;width:100%;min-width:0;
  transition:background .16s ease;
}
.slot:active{background:var(--surface-2)}
.slot-when{
  margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--hint);flex:0 0 auto;white-space:nowrap;
  /* a min, not a fixed width — "déjeuner" and "colazione" are longer than "lunch" */
  min-width:58px;
}
/* Two lines, then stop. It was one line with an ellipsis, which worked while
   this was a direct flex child — as a span inside the text column it is inline,
   and `text-overflow` does nothing to an inline box, so a long name simply
   wrapped as far as it liked. "Peppersoup meat with rice or egusi soup" does
   not deserve to be cut at "Peppersoup meat wi…" either. */
.slot-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-width:0;font-size:14.5px;line-height:1.32;overflow:hidden;
}
.slot-empty{color:var(--hint)}
.kindtag{
  flex:0 0 auto;white-space:nowrap;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;flex:0 0 auto;
}
.kind-cook{background:var(--sage-soft);color:#A8C7A0}
.kind-out{background:var(--amber-soft);color:var(--amber)}
.kind-order{background:rgba(224,122,95,.18);color:#F0937A}
.kind-leftovers{background:var(--surface-3);color:var(--faint)}

/* ── requests ────────────────────────────────────────────────── */
.reqstrip{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:10px 0 6px}
.req{
  background:linear-gradient(140deg,rgba(240,169,76,.13),rgba(224,122,95,.08));
  border:1px solid rgba(240,169,76,.3);
  border-radius:var(--r-lg);padding:15px 16px;box-shadow:var(--shadow);
}
.req-text{font-size:14.5px;margin-bottom:12px;line-height:1.5}
.req-actions{display:flex;gap:8px}

/* ── lists ───────────────────────────────────────────────────── */
.list{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.item{
  display:flex;align-items:center;gap:13px;padding:14px;
  border-radius:var(--r-md);background:var(--surface);
  min-width:0;overflow:hidden;box-shadow:var(--shadow);
  transition:background .16s ease;
}
.item:active{background:var(--surface-2)}
.item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.item-title{font-size:14.5px;font-weight:600;min-width:0;letter-spacing:-.006em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-sub{
  font-size:12.5px;color:var(--faint);min-width:0;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;
}
.item.is-done .item-title{text-decoration:line-through;color:var(--faint)}
.item.is-done .item-sub{opacity:.6}

.icon-x{
  width:32px;height:32px;border-radius:50%;color:var(--hint);flex:0 0 auto;
  display:grid;place-items:center;transition:background .16s ease,color .16s ease;
}
.icon-x svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.icon-x:active{background:var(--surface-3);color:var(--clay)}

.tick{
  width:26px;height:26px;border-radius:9px;border:1.8px solid var(--line-2);
  flex:0 0 auto;display:grid;place-items:center;color:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.tick svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tick:active{transform:scale(.88)}
.tick.on{background:var(--sage);border-color:var(--sage);color:#16140F}

/* ── inputs ──────────────────────────────────────────────────── */
.addrow{display:flex;gap:8px;margin-bottom:14px}
.field{
  flex:1;min-width:0;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid transparent;outline:none;
  font-size:15px;transition:border-color .18s ease,background .18s ease;
}
.field::placeholder{color:var(--hint)}
.field:focus{border-color:rgba(240,169,76,.5);background:var(--surface-2)}
.field-qty{flex:0 0 72px;text-align:center}
.sheet-panel .field{width:100%;display:block}
.sheet-panel .chiprow{margin-bottom:4px}

/* ── alert ───────────────────────────────────────────────────── */
.alert{
  background:linear-gradient(140deg,rgba(224,122,95,.15),rgba(224,122,95,.06));
  border:1px solid rgba(224,122,95,.3);
  border-radius:var(--r-lg);padding:16px;margin-bottom:26px;
  font-size:14px;line-height:1.55;box-shadow:var(--shadow);
}
.alert strong{display:block;margin-bottom:7px;font-size:14.5px}

/* ── cards ───────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px}
.card{background:var(--surface);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--shadow)}
.card-title{font-weight:700;font-size:16px;margin-bottom:4px;letter-spacing:-.012em}
.card-meta{font-size:12.5px;color:var(--amber);margin-bottom:8px;font-weight:500}
.card-why{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.card-addr{font-size:12.5px;color:var(--faint);margin-bottom:12px;line-height:1.45}
.card-links{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.card-link{
  font-size:12.5px;font-weight:600;color:var(--amber);text-decoration:none;
  padding:7px 13px;border-radius:999px;background:var(--amber-soft);
  transition:background .16s ease;
}
.card-link:active{background:rgba(240,169,76,.24)}
.card-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── balance ─────────────────────────────────────────────────── */
.balance{display:flex;gap:10px;margin-bottom:22px;align-items:center}
.bal{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:13px 18px;border-radius:var(--r-md);background:var(--surface);min-width:88px}
/* A way back from a mis-tap, small enough not to look like part of the tally. */
.undo-btn{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface);opacity:.5;transition:opacity .18s ease,transform .16s ease;
}
.undo-btn:active{transform:scale(.9)}
.undo-btn:hover{opacity:1}
.undo-btn svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.undo-btn[disabled]{opacity:.25}
.bal-n{font-family:var(--display);font-size:27px;font-weight:600;
  line-height:1;color:var(--amber)}
.bal-who{font-size:11.5px;color:var(--faint);margin-top:5px;font-weight:500}

/* ── chips ───────────────────────────────────────────────────── */
.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  margin-bottom:16px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:10px 16px;border-radius:999px;font-size:13.5px;
  font-weight:500;background:var(--surface-2);color:var(--muted);
  white-space:nowrap;transition:background .18s ease,color .18s ease,transform .16s ease;
}
.chip:active{transform:scale(.96)}
.chip.is-on{
  color:#241608;font-weight:600;
  background:linear-gradient(135deg,#F6B863,var(--amber));
  box-shadow:0 3px 12px -6px rgba(240,169,76,.7);
}

/* ── empty states ────────────────────────────────────────────── */
.empty{
  text-align:center;padding:34px 22px;color:var(--faint);
  background:var(--surface);border-radius:var(--r-lg);
  border:1px dashed var(--line-2);
}
.empty-ico{width:34px;height:34px;margin:0 auto 12px;color:var(--hint);
  display:block;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.empty-main{font-size:14.5px;color:var(--muted);margin-bottom:4px;font-weight:500}
.empty-sub{font-size:12.5px;color:var(--hint)}

/* ── tabbar ──────────────────────────────────────────────────── */
.tabbar{
  flex:0 0 auto;display:flex;height:var(--tab-h);padding-bottom:var(--safe-b);
  background:rgba(20,17,16,.94);border-top:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
}
.tab{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;
  font-size:10px;font-weight:500;letter-spacing:.01em;
  color:var(--hint);transition:color .22s ease;
}
/* One line, always. A wrapped label is what makes a bar look unfinished. */
.tab > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The pill holds the icon, and the count beside it when there is one. It used
   to hang the count off the pill's top-right — but a pill's corner curves away,
   so the badge floated half over the icon and half over nothing, and looked
   like it was falling off. Inside, in a row, it reads as one object. */
.tab-pill{display:flex;align-items:center;justify-content:center;gap:5px;
  min-width:44px;height:26px;padding:0 9px;border-radius:999px;
  transition:background .24s cubic-bezier(.2,.8,.3,1)}
.tab-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tab.is-active{font-weight:600}
.tab.is-active{color:var(--amber)}
.tab.is-active .tab-pill{background:var(--amber-soft)}

/* ── sheet ───────────────────────────────────────────────────── */
.sheet{
  /* Above the full-screen pages: a sheet opened from Family or a game was
     landing behind it, so it looked as though the button had done nothing. */
  position:fixed;inset:0;bottom:var(--kb);z-index:300;display:flex;align-items:flex-end;
  background:rgba(10,8,7,.6);backdrop-filter:blur(8px);
  animation:fade .22s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-panel{
  width:100%;max-width:520px;margin:0 auto;background:var(--bg-2);
  border-top-left-radius:26px;border-top-right-radius:26px;
  border-top:1px solid var(--line-2);
  padding:10px 20px calc(22px + var(--safe-b));
  max-height:88vh;overflow-y:auto;box-shadow:0 -20px 60px -20px rgba(0,0,0,.9);
  animation:up .34s cubic-bezier(.2,.9,.25,1) both;
}
/* A short rise rather than a full screen's worth: with fill-mode both, a
   keyframe starting at 100% leaves the panel entirely off-screen if the
   animation never runs — which is indistinguishable from a dead button. */
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* The bar is 4px, which nobody can catch with a thumb. The padding around it
   stays invisible but counts for touching, so the target is 44px tall. */
.sheet-grab{
  width:40px;height:4px;border-radius:99px;background:var(--line-2);
  box-sizing:content-box;padding:20px 30px;margin:-14px auto 2px;
  background-clip:content-box;touch-action:none;cursor:grab;
}
.sheet-title{margin:0 0 18px;font-family:var(--display);font-size:22px;
  font-weight:600;letter-spacing:-.015em}
.sheet-label{display:block;margin:16px 0 8px;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.sheet-actions{display:grid;gap:10px;margin-top:22px}
textarea.field{resize:vertical;min-height:130px;line-height:1.55}

/* ── overlays ────────────────────────────────────────────────── */
.working{
  position:fixed;inset:0;z-index:320;display:grid;place-content:center;
  justify-items:center;gap:16px;background:rgba(20,17,16,.94);
  backdrop-filter:blur(10px);
}
.orb{display:flex;gap:9px}
.orb span{width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,#F6B863,var(--amber));
  animation:bounce 1.3s cubic-bezier(.4,0,.6,1) infinite}
.orb span:nth-child(2){animation-delay:.15s}
.orb span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,72%,100%{transform:translateY(0);opacity:.4}
  36%{transform:translateY(-13px);opacity:1}}
.working-text{margin:0;font-family:var(--display);font-size:19px;font-weight:600}

/* A line of confirmation. The grey pill said nothing about which kind of news
   it was carrying — the same shape whether something worked or failed. The
   mark and the colour do that now, before the sentence is read. */
.toast{
  --tone:var(--sage); --tone-soft:rgba(143,174,136,.18);
  position:fixed;left:50%;bottom:calc(var(--tab-h) + 20px);
  z-index:340;max-width:min(92vw,420px);
  display:flex;align-items:center;gap:11px;padding:12px 18px 12px 13px;
  border-radius:16px;font-size:13.5px;font-weight:500;line-height:1.35;
  background:rgba(41,34,32,.94);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  box-shadow:
    0 20px 42px -20px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(248,242,233,.08),
    inset 0 0 0 1px rgba(248,242,233,.06);
  transform:translate(-50%,14px) scale(.97);opacity:0;
  transition:transform .3s cubic-bezier(.16,1.08,.3,1),opacity .2s ease;
}
.toast.in{transform:translate(-50%,0) scale(1);opacity:1}
.toast.bad{--tone:var(--clay); --tone-soft:rgba(224,122,95,.20)}
.toast.info{--tone:var(--amber); --tone-soft:rgba(240,169,76,.18)}
.toast-mark{
  flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--tone-soft);color:var(--tone);
}
.toast-mark svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.toast-text{min-width:0}
@media (prefers-reduced-motion:reduce){
  .toast{transition:opacity .18s ease;transform:translate(-50%,0)}
}

.updatebar{
  position:fixed;left:14px;right:14px;bottom:calc(var(--tab-h) + 14px);z-index:75;
  max-width:492px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:13px 13px 13px 17px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--line-2);
  box-shadow:var(--shadow-lift);
}
.updatebar-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.updatebar-text strong{font-size:14.5px}
.updatebar-text span{font-size:12.5px;color:var(--faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.updatebar-btn{flex:0 0 auto;padding:10px 18px;font-size:14px}
.updatebar-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;color:var(--hint)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── illustrated banners ─────────────────────────────────────── */
.banner{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  margin:6px 0 22px;aspect-ratio:16/7;box-shadow:var(--shadow);
}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(20,17,16,.94) 4%, rgba(20,17,16,.74) 40%,
    rgba(20,17,16,.18) 72%, transparent 92%);
}
.banner-text{
  position:relative;z-index:2;height:100%;padding:20px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
}
.banner-title{margin:0;font-family:var(--display);font-size:27px;font-weight:600;
  letter-spacing:-.022em;line-height:1.1}
.banner-sub{margin:0;font-size:13.5px;color:var(--muted);max-width:22ch;line-height:1.45}

/* ── art thumbs on rows ──────────────────────────────────────── */
.thumb{
  width:42px;height:42px;border-radius:13px;flex:0 0 auto;object-fit:cover;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);
}
.empty-art{width:86px;height:86px;border-radius:20px;object-fit:cover;
  margin:0 auto 14px;display:block;opacity:.85}

/* Smaller thumb for the tighter meal rows. */
.thumb-sm{width:34px;height:34px;border-radius:11px}
.thumb-empty{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.slot-when{min-width:52px}

/* ── missing-ingredient chips ────────────────────────────────── */
.misschips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 12px}
.misschip{
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(224,122,95,.16);color:#F0A88F;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.misschip::before{content:'+ ';opacity:.7}
.misschip:active{transform:scale(.95)}
.misschip.is-on{background:var(--sage-soft);color:#A8C7A0}
.misschip.is-on::before{content:'✓ '}
.alert .addrow{margin-bottom:0}

/* ── five tabs need a little less room each ──────────────────── */
.tabbar .tab{font-size:10px}
/* Seven, now that Home is one of them. Slightly tighter letters and a hair less
   gap, so nothing wraps on a small phone. */
@media (max-width:400px){
  .tabbar .tab{font-size:9px;letter-spacing:-.01em}
  .tab-pill{min-width:40px;padding:0 8px}
}
.tab-pill{width:44px}

/* ── trips ───────────────────────────────────────────────────── */
.trip{
  background:var(--surface);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--shadow);display:block;
}
.trip-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.trip-where{flex:1;min-width:0}
.trip-name{font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.015em;line-height:1.2}
.trip-country{font-size:12.5px;color:var(--faint);margin-top:2px}
.trip-cost{text-align:right;flex:0 0 auto}
.trip-cost-n{font-family:var(--display);font-size:19px;font-weight:600;color:var(--amber)}
.trip-cost-l{font-size:10.5px;color:var(--hint);margin-top:1px}
.trip-why{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.trip-facts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.fact{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--surface-2);color:var(--muted)}
.fact-when{background:var(--sage-soft);color:#A8C7A0}
.trip-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.trip-detail{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.trip-group{margin-bottom:16px}
.trip-group:last-child{margin-bottom:0}
.trip-group-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.trip-group-h img{width:26px;height:26px;border-radius:8px;object-fit:cover}
.trip-group-h span{font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.place{padding:11px 0;border-bottom:1px solid var(--line)}
.place:last-child{border-bottom:0;padding-bottom:0}
.place-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.place-name{font-size:14px;font-weight:600;min-width:0}
.place-price{font-size:12px;color:var(--amber);flex:0 0 auto}
.place-why{font-size:12.5px;color:var(--faint);line-height:1.45;margin-top:3px}
.place-addr{font-size:12px;color:var(--hint);margin-top:4px}
.status-tag{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px}
.status-booked{background:var(--sage-soft);color:#A8C7A0}
.status-shortlisted{background:var(--amber-soft);color:var(--amber)}

/* ── segmented control ───────────────────────────────────────── */
.segmented{
  display:flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:999px;
  background:var(--surface);box-shadow:var(--shadow);
}
.segmented button{
  flex:1;padding:10px 0;border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--muted);transition:color .2s ease,background .2s ease;
}
.segmented button.is-on{
  color:#241608;background:linear-gradient(135deg,#F6B863,var(--amber));
  box-shadow:0 3px 12px -6px rgba(240,169,76,.7);
}

/* ── memories ────────────────────────────────────────────────── */
.trip.is-been{background:linear-gradient(160deg,var(--surface-2),var(--surface))}
.trip-stars{color:var(--amber);font-size:14px;letter-spacing:2px;margin-top:6px}
.trip-note{font-size:13px;color:var(--muted);line-height:1.5;margin-top:8px;
  padding-left:11px;border-left:2px solid var(--line-2);font-style:italic}

/* ── weekly plan review ──────────────────────────────────────── */
.balance-note{
  font-size:13.5px;color:var(--muted);line-height:1.55;
  background:var(--sage-soft);border-radius:var(--r-md);padding:13px 15px;margin-bottom:18px;
}
.planrow{
  display:flex;align-items:flex-start;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);
}
.planrow:last-of-type{border-bottom:0}
.planrow.is-out{opacity:.4}
.planrow.is-out .plan-title{text-decoration:line-through}
.plan-day{
  width:38px;flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);padding-top:4px;
}
.plan-main{flex:1;min-width:0}
.plan-title{font-size:14.5px;font-weight:600;letter-spacing:-.006em}
.plan-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ptag{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--faint);
}
.ptag-veg{background:var(--sage-soft);color:#A8C7A0}
.ptag-fish{background:rgba(120,160,200,.18);color:#9BC0DE}
.ptag-quick{background:var(--amber-soft);color:var(--amber)}
.ptag-cuisine{background:rgba(224,122,95,.16);color:#F0A88F}
.plan-acts{display:flex;gap:6px;flex:0 0 auto;padding-top:2px}
.plan-btn{
  padding:6px 10px;border-radius:9px;font-size:11.5px;font-weight:600;
  background:var(--surface-2);color:var(--muted);
}
.plan-btn:active{background:var(--surface-3)}
.plan-btn.on{background:var(--sage);color:#16140F}
.alt-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.alt-row:last-child{border-bottom:0}

/* ── six tabs ────────────────────────────────────────────────── */
.tabbar .tab{font-size:9.5px}
.tab-pill{min-width:38px;padding:0 7px}
/* The count on a tab. Sits in the row with the icon rather than hanging off a
   curved corner, and is lit like a physical thing: a highlight along the top,
   a shadow under it, and the colour of the bar around it. */
.badge{
  flex:0 0 auto;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;
  font-size:10px;font-weight:800;letter-spacing:-.02em;line-height:1;
  color:#2A0F06;
  background:linear-gradient(160deg,#F3A88B 0%,var(--clay) 52%,#C85E44 100%);
  box-shadow:
    0 2px 5px -1px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
/* An active tab's pill is already amber; the count changes to sit on it. */
.tab.is-active .badge{
  color:#2A1606;
  background:linear-gradient(160deg,#FFF1DC 0%,#F6D3A4 55%,#E3AE6E 100%);
  box-shadow:0 2px 5px -1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7);
}

/* ── chat ────────────────────────────────────────────────────── */
/* A backdrop rather than a picture: dimmed almost to texture so a bubble is
   never fighting a heart for attention. */
.love-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.love-bg::before{
  content:'';position:absolute;inset:-6%;
  background:url('art/bg-love-c.jpg') center/cover no-repeat;
  opacity:.15;filter:saturate(.75) blur(.4px);
  /* eases in under the header rather than starting on a hard line */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 100%);
}
.love-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(85% 45% at 50% 12%, rgba(240,169,76,.045), transparent 72%),
    linear-gradient(to bottom, transparent 0%, rgba(20,17,16,.30) 30%,
                    rgba(20,17,16,.58) 74%, rgba(20,17,16,.92) 100%);
}
.chatview{display:none;position:relative}
.chatview.is-active{display:flex;flex-direction:column;min-height:0}
.chat-scroll{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 16px 6px;display:flex;flex-direction:column}
/* pushes a short conversation to the bottom without clipping a long one */
.chat-list{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-bottom:6px}
.msg{max-width:82%;display:flex;flex-direction:column;gap:3px}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg.theirs{align-self:flex-start}
.msg + .msg{margin-top:3px}
.msg.first-of-run{margin-top:12px}
.bubble{
  padding:10px 14px;border-radius:19px;font-size:15px;line-height:1.42;
  word-break:break-word;white-space:pre-wrap;
}
.mine .bubble{
  background:linear-gradient(135deg,#F0AE58,var(--amber));color:#241608;
  border-bottom-right-radius:7px;
}
.theirs .bubble{background:var(--surface-2);border-bottom-left-radius:7px}
.msg-meta{font-size:10.5px;color:var(--hint);padding:0 6px}
.msg-about{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);padding:3px 9px;border-radius:999px;
  align-self:flex-start;
}
.mine .msg-about{align-self:flex-end}
.daysep{
  align-self:center;font-size:11px;font-weight:600;color:var(--hint);
  background:var(--surface);padding:5px 13px;border-radius:999px;margin:16px 0 6px;
}
.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;
  gap:16px;text-align:center;padding:30px 24px;max-width:290px}
.chat-empty img{width:150px;border-radius:20px;opacity:.9;
  box-shadow:0 20px 44px -24px rgba(0,0,0,.95)}
.chat-empty p{margin:0;color:var(--faint);font-size:14px;line-height:1.5}

/* One pill holds the field and the button, the way a phone chat does. The bar
   itself has no line — messages fade under it instead. */
.composer-bar{
  position:relative;z-index:1;flex:0 0 auto;padding:8px 14px 12px;background:var(--bg);
}
.composer-bar::before{
  content:'';position:absolute;left:0;right:0;top:-26px;height:26px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,17,16,0),var(--bg));
}
.composer-shell{
  display:flex;align-items:flex-end;gap:6px;
  padding:5px 5px 5px 6px;border-radius:24px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset, 0 6px 20px -14px rgba(0,0,0,.9);
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.composer-shell:focus-within{
  background:var(--surface-2);border-color:rgba(240,169,76,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 0 0 3px rgba(240,169,76,.09);
}
.chat-input{
  flex:1;min-width:0;max-height:132px;
  padding:9px 4px 9px 10px;border:0;background:none;outline:none;resize:none;
  color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.42;
  letter-spacing:-.005em;
}
.chat-input::placeholder{color:var(--hint)}

/* Dormant until there is something to send — no bright button begging to be hit. */
.send-btn{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface-3);color:var(--faint);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), background .2s ease, color .2s ease;
}
.send-btn svg{width:17px;height:17px;fill:currentColor;transform:translateX(.5px)}
.send-btn.is-ready{
  background:linear-gradient(140deg,#F7BE6D,var(--amber));color:#2A1A08;
  box-shadow:0 4px 14px -6px rgba(240,169,76,.75);
}
.send-btn:active{transform:scale(.9)}
.send-btn[disabled]{opacity:.5}

/* What this message is pinned to, shown as a tag that hangs off the pill. */
.chat-about{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 6px 7px;padding:7px 8px 7px 13px;border-radius:14px;
  font-size:12px;font-weight:600;color:var(--amber);
  background:var(--amber-soft);border:1px solid rgba(240,169,76,.18);
}
.chat-about-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-about-x{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(240,169,76,.14);
}
.chat-about-x svg{width:11px;height:11px;fill:none;stroke:var(--amber);stroke-width:2.4;
  stroke-linecap:round}

.livedot{
  width:7px;height:7px;border-radius:50%;background:var(--sage);
  box-shadow:0 0 8px var(--sage);flex:0 0 auto;
}
.livedot.off{background:var(--hint);box-shadow:none}
.tab:focus{outline:none}

/* ── picking a face ──────────────────────────────────────────── */
.who-row{
  display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;
  border-radius:var(--r-md);background:var(--surface);text-align:left;
  transition:background .18s ease,transform .18s ease;
}
.who-row:active{transform:scale(.985);background:var(--surface-2)}
.who-row.is-on{box-shadow:0 0 0 1.5px rgba(240,169,76,.4) inset}
.who-name{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.015em}
.who-sheet{display:flex;flex-direction:column;gap:10px}
.me-hero{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 20px}
.me-name{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.018em}

/* ── typing ──────────────────────────────────────────────────── */
.peer-sub.is-typing{color:var(--amber)}
.typing-bubble{display:flex;align-items:center;gap:4px;padding:13px 15px}
.typing-bubble .dot{
  width:6px;height:6px;border-radius:50%;background:var(--faint);
  animation:typedot 1.25s ease-in-out infinite;
}
.typing-bubble .dot:nth-child(2){animation-delay:.18s}
.typing-bubble .dot:nth-child(3){animation-delay:.36s}
@keyframes typedot{
  0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .typing-bubble .dot{animation:none;opacity:.6}
}
.peer-sub.is-typing::before{display:none}
.sub-dots{display:inline-flex;align-items:flex-end;gap:2.5px;margin-left:1px;
  padding-bottom:1px}
.sub-dots i{width:3.5px;height:3.5px;border-radius:50%;background:var(--amber);
  animation:typedot 1.25s ease-in-out infinite}
.sub-dots i:nth-child(2){animation-delay:.18s}
.sub-dots i:nth-child(3){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.sub-dots i{animation:none;opacity:.7}}

/* ── media, links, emoji ─────────────────────────────────────── */
.pill-btn{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  color:var(--faint);transition:color .18s ease,background .18s ease,transform .18s ease;
}
.pill-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pill-btn:active{transform:scale(.9)}
.pill-btn.is-on{color:var(--amber);background:var(--amber-soft)}

/* a picture is the message — no bubble around it */
.msg-media{display:grid;gap:3px;border-radius:19px;overflow:hidden;max-width:270px}
.msg-media.pair{grid-template-columns:1fr 1fr}
.msg-media.many{grid-template-columns:1fr 1fr}
.mine .msg-media{border-bottom-right-radius:7px}
.theirs .msg-media{border-bottom-left-radius:7px}
.shot{
  position:relative;display:block;width:100%;background:var(--surface-2);
  overflow:hidden;line-height:0;
}
.shot img,.shot video{width:100%;height:100%;object-fit:cover;display:block}
/* The box has to have a size before the picture arrives, or a lazy image sits
   at zero height and never scrolls into view to trigger its own load. */
.msg-media.one .shot{aspect-ratio:4/3;max-height:340px}
.msg-media.one .shot img,.msg-media.one .shot video{
  width:100%;height:100%;object-fit:contain;background:#0C0A09}
.msg-media:not(.one) .shot{aspect-ratio:1}
.shot-more{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(12,10,9,.62);color:#fff;font-size:22px;font-weight:700;
}
.play-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,10,9,.55);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22);
}
.play-badge svg{width:19px;height:19px;fill:#fff;margin-left:2px}
.clip-len{
  position:absolute;right:7px;bottom:6px;padding:2px 7px;border-radius:999px;
  background:rgba(12,10,9,.7);color:#fff;font-size:11px;font-weight:600;
}
.msg-media + .bubble{margin-top:3px}

/* what is on its way up */
.uploads{display:flex;gap:8px;margin:0 6px 9px;overflow-x:auto;padding-bottom:2px}
.up-chip{
  position:relative;width:56px;height:56px;border-radius:13px;overflow:hidden;
  flex:0 0 auto;background:var(--surface-2);
}
.up-chip img,.up-chip video{width:100%;height:100%;object-fit:cover}
.up-chip .up-veil{position:absolute;inset:0;background:rgba(12,10,9,.55);
  display:grid;place-items:center}
.up-chip .up-x{
  position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(12,10,9,.78);display:grid;place-items:center;
}
.up-chip .up-x svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.spinner{
  width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* links */
.bubble a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.mine .bubble a{text-decoration-color:rgba(36,22,8,.45)}
.link-card{
  display:block;max-width:270px;margin-top:3px;border-radius:16px;overflow:hidden;
  background:var(--surface-2);text-decoration:none;color:inherit;
}
.mine .link-card{background:rgba(36,22,8,.14)}
.link-card img{width:100%;max-height:140px;object-fit:cover;display:block}
.link-body{padding:9px 12px 11px}
.link-site{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);margin-bottom:3px}
.mine .link-site{color:#6B4412}
.link-title{font-size:13.5px;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-desc{font-size:12px;line-height:1.4;opacity:.62;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* emoji drawer */
.emoji-panel{
  /* opens upward, over the conversation — the field it belongs to stays put */
  margin-bottom:9px;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);overflow:hidden;
  animation:drawer .2s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes drawer{
  from{opacity:0;transform:translateY(14px) scaleY(.94);transform-origin:bottom}
  to{opacity:1;transform:none}
}
.emoji-tabs{display:flex;gap:2px;padding:7px 8px 0;overflow-x:auto}
.emoji-tabs button{
  flex:0 0 auto;padding:6px 11px;border-radius:10px;font-size:16px;line-height:1;
  opacity:.62;transition:opacity .16s ease,background .16s ease;
}
.emoji-tabs button.is-on{opacity:1;background:var(--amber-soft)}
.emoji-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:1px;padding:6px 6px 9px;
  /* a fixed height, so switching tabs does not make the drawer jump */
  height:216px;overflow-y:auto;align-content:start;
}
.emoji-grid button{
  aspect-ratio:1;font-size:23px;line-height:1;border-radius:10px;
  transition:background .13s ease,transform .13s ease;
}
.emoji-grid button:active{transform:scale(1.25);background:var(--surface-2)}

/* full-screen viewer */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(8,6,5,.97);
  display:grid;place-items:center;animation:fadein .18s ease both;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lightbox-body{max-width:100%;max-height:100%;display:grid;place-items:center;padding:12px}
.lightbox-body img,.lightbox-body video{max-width:100%;max-height:92vh;border-radius:10px;display:block}
.lightbox-x{
  position:absolute;top:calc(var(--safe-t) + 12px);right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
}
.lightbox-x svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}

/* the ⋮ menu */
.menu-list{display:flex;flex-direction:column;gap:2px}
.menu-row{
  display:flex;align-items:center;gap:13px;width:100%;padding:14px 12px;
  border-radius:13px;text-align:left;font-size:15px;
  transition:background .16s ease;
}
.menu-row:active{background:var(--surface-2)}
.menu-row svg{width:19px;height:19px;fill:none;stroke:var(--amber);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.menu-sub{display:block;font-size:12px;color:var(--faint);margin-top:2px}

/* ── drawer modes, stickers, gifs ────────────────────────────── */
.drawer-modes{display:flex;gap:6px;padding:9px 10px 4px}
.drawer-modes .mode{
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--faint);background:var(--surface-2);transition:all .16s ease;
}
.drawer-modes .mode.is-on{color:#2A1A08;background:var(--amber)}
.gif-search{
  width:calc(100% - 20px);margin:7px 10px 0;padding:9px 13px;border-radius:12px;
  background:var(--surface-2);border:1px solid transparent;outline:none;
  color:var(--ink);font-size:14px;font-family:var(--sans);
}
.gif-search:focus{border-color:rgba(240,169,76,.4)}
.sticker-grid{
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  grid-auto-rows:84px;gap:5px;padding:8px;align-content:start;
}
.sticker-grid button{height:84px;border-radius:14px;padding:5px;
  display:grid;place-items:center;transition:background .14s,transform .14s}
.sticker-grid button:active{transform:scale(.9);background:var(--surface-2)}
.sticker-grid img{width:100%;height:100%;object-fit:contain}
/* Explicit rows, not aspect-ratio: a ratio is resolved after the grid has
   already sized its tracks, so with images that have not loaded yet the rows
   come out 19px tall and every GIF sits on the one above it. */
.gif-grid{
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  grid-auto-rows:112px;gap:6px;padding:8px;height:258px;align-content:start;
}
.gif-grid button{
  height:112px;border-radius:12px;overflow:hidden;background:var(--surface-2);
  display:block;padding:0;transition:transform .14s ease;
}
.gif-grid button:active{transform:scale(.95)}
.gif-grid img{width:100%;height:100%;object-fit:cover;display:block}
.grid-note{grid-column:1/-1;padding:26px 14px;text-align:center;color:var(--hint);font-size:13px}

/* a sticker is not a bubble */
.msg-sticker{width:132px;height:132px;display:block}
.msg-sticker img{width:100%;height:100%;object-fit:contain}

/* ── voice notes ─────────────────────────────────────────────── */
.rec-bar{
  display:flex;align-items:center;gap:10px;padding:6px 6px 6px 4px;
  border-radius:24px;background:var(--surface-2);
  border:1px solid rgba(224,122,95,.3);
}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--clay);
  animation:pulse 1.1s ease-in-out infinite;flex:0 0 auto}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.rec-time{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
.rec-wave{flex:1;min-width:0;height:26px;display:flex;align-items:center;gap:2px;
  overflow:hidden;justify-content:flex-end}
.rec-wave i{width:3px;border-radius:2px;background:var(--clay);opacity:.85;flex:0 0 auto}

.voice{
  display:flex;align-items:center;gap:11px;padding:9px 14px 9px 10px;
  border-radius:19px;min-width:190px;
}
.mine .voice{background:linear-gradient(135deg,#F0AE58,var(--amber));color:#241608;
  border-bottom-right-radius:7px}
.theirs .voice{background:var(--surface-2);border-bottom-left-radius:7px}
.voice-play{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(0,0,0,.16);
}
.theirs .voice-play{background:var(--amber-soft)}
.voice-play svg{width:15px;height:15px;fill:currentColor}
.theirs .voice-play svg{fill:var(--amber)}
.voice-bars{flex:1;min-width:0;height:24px;display:flex;align-items:center;gap:2px}
.voice-bars i{flex:1;border-radius:2px;background:currentColor;opacity:.32;
  transition:opacity .12s linear}
.voice-bars i.on{opacity:.95}
.voice-len{font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.7;flex:0 0 auto}

/* ── the way in ──────────────────────────────────────────────── */
.gate{
  position:fixed;inset:0;bottom:var(--kb);z-index:150;display:flex;flex-direction:column;
  /* Centred by the margins rather than by justify-content: when the keyboard
     leaves too little room, centring clips the top of the form and no amount
     of scrolling brings it back. */
  justify-content:flex-start;padding:0 26px calc(30px + var(--safe-b));
  background:var(--bg);overflow-y:auto;transition:bottom .16s ease;
}
.gate-art{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url('art/bg-love-b.jpg') center/cover no-repeat;
  opacity:.62;
}
.gate::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  /* Dark where the words are, clear at the edges — so the two hearts still
     read at the bottom instead of being painted over. */
  background:linear-gradient(to bottom,
    rgba(20,17,16,.30) 0%, rgba(20,17,16,.90) 26%, rgba(20,17,16,.90) 62%,
    rgba(20,17,16,.55) 84%, rgba(20,17,16,.25) 100%);
}
.gate-step{
  position:relative;z-index:1;width:100%;max-width:360px;margin:auto;
  animation:gateIn .42s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes gateIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.gate-mark{
  width:74px;height:74px;border-radius:22px;display:block;margin:0 auto 20px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(248,242,233,.07);
}
.gate-title{
  margin:0;text-align:center;font-family:var(--display);font-size:40px;
  font-weight:600;letter-spacing:-.03em;line-height:1.05;
}
.gate-title.sm{font-size:27px;letter-spacing:-.022em;text-align:left;margin-bottom:6px}
.gate-sub{
  margin:9px 0 0;text-align:center;color:var(--muted);font-size:15px;line-height:1.5;
}
.gate-title.sm + .gate-sub{text-align:left;margin:0 0 22px;font-size:14.5px}
.gate-sub span{color:var(--ink);font-weight:600}
.gate-actions{display:flex;flex-direction:column;gap:10px;margin-top:36px}
.gate-foot{
  margin:26px 0 0;text-align:center;color:var(--hint);font-size:12.5px;
}
.gate-label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin:18px 0 7px;
}
.gate-step .field,
.play-body .field{width:100%}
.gate-step .btn-primary{margin-top:26px}
.gate-step .btn-ghost{margin-top:8px}
.gate-error{
  margin:14px 0 0;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.45;
  background:rgba(224,122,95,.14);color:#F0A88F;
}
.gate-back{
  position:absolute;top:-46px;left:-6px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);
}
.gate-back svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* With the keyboard up there is barely half a screen left, so the sign-in page
   gives up its ornaments rather than squeezing everything: the mark goes, the
   heading comes down to a line, and the spacing tightens. It reads as a form
   that made room, not one that got squashed. */
body.kb-open .gate-mark{display:none}
body.kb-open .gate-title{font-size:23px;margin-bottom:2px}
body.kb-open .gate-title.sm{font-size:21px}
body.kb-open .gate-sub{font-size:13px;margin-bottom:14px}
body.kb-open .gate-label{margin:12px 0 6px}
body.kb-open .gate-step .btn-primary{margin-top:16px}
body.kb-open .gate-foot{display:none}

/* While you are typing, the row of tabs is a strip of screen doing nothing —
   you are writing, not navigating. It comes back when the keyboard goes. */
body.kb-open .tabbar{display:none}

.pin{
  width:100%;margin-top:10px;padding:18px 14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);outline:none;
  color:var(--ink);font-family:var(--sans);font-size:30px;font-weight:700;
  letter-spacing:.42em;text-align:center;text-indent:.42em;
  font-variant-numeric:tabular-nums;
}
.pin:focus{border-color:rgba(240,169,76,.48);background:var(--surface-2)}
.pin::placeholder{color:var(--hint);letter-spacing:.3em}

/* still used by the ⋮ menu */
.who-list{display:flex;flex-direction:column;gap:10px}
.invite-code{
  margin:20px 0 4px;padding:20px;border-radius:16px;text-align:center;
  background:var(--surface-2);font-size:34px;font-weight:800;letter-spacing:.28em;
  text-indent:.28em;color:var(--amber);
}
.gate-langs{display:flex;justify-content:center;gap:7px;margin-top:30px}
.gate-lang{
  padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--faint);background:rgba(248,242,233,.05);
  border:1px solid transparent;transition:all .18s ease;
}
.gate-lang.is-on{color:var(--amber);background:var(--amber-soft);
  border-color:rgba(240,169,76,.26)}

/* ── a family, not a pair ────────────────────────────────────── */
.av-xs{width:26px;height:26px;font-size:10.5px}
.av-stack{display:flex;align-items:center;flex-direction:row-reverse;margin-right:9px}
.av-stack .av{
  margin-left:-8px;box-shadow:0 0 0 2px var(--bg);
  transition:box-shadow .2s ease;
}
.av-stack .av:last-child{margin-left:0}
.av-stack .av.is-here{box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--sage)}
.av-more{background:var(--surface-3);color:var(--muted);font-weight:700}

/* ── the shelf, and the table you play on ────────────────────── */
.play{
  position:fixed;inset:0;z-index:170;display:flex;flex-direction:column;
  background:var(--bg);animation:gateIn .3s cubic-bezier(.2,.8,.3,1) both;
}
.play::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('art/bg-love-c.jpg') center/cover no-repeat;opacity:.1;
}
.play::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,17,16,.6), rgba(20,17,16,.94));
}
.play-top{
  position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 12px) 14px 10px;
  width:100%;max-width:520px;margin:0 auto;
}
.play-title{
  flex:1;min-width:0;text-align:center;font-family:var(--display);font-size:18px;
  font-weight:600;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.play-body{
  position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;
  padding:4px 18px calc(26px + var(--safe-b));
  width:100%;max-width:520px;margin:0 auto;
}

/* the three doors */
.door-grid{display:grid;grid-template-columns:1fr;gap:11px}
.door{
  display:flex;align-items:center;gap:15px;width:100%;padding:17px 16px;
  border-radius:var(--r-lg);background:var(--surface);text-align:left;
  box-shadow:var(--shadow);transition:transform .18s ease,background .18s ease;
}
.door:active{transform:scale(.985);background:var(--surface-2)}
.door-ico{
  width:46px;height:46px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;
}
.door-ico svg{width:23px;height:23px;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.door-ico.games{background:rgba(240,169,76,.15)} .door-ico.games svg{stroke:var(--amber)}
.door-ico.growth{background:rgba(143,174,136,.16)} .door-ico.growth svg{stroke:var(--sage)}
.door-ico.learn{background:rgba(224,122,95,.15)} .door-ico.learn svg{stroke:var(--clay)}
.door-text{flex:1;min-width:0}
.door-name{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.018em}
.door-sub{font-size:12.5px;color:var(--faint);margin-top:2px}
.door-go{width:17px;height:17px;fill:none;stroke:var(--hint);stroke-width:2;flex:0 0 auto}

/* categories and cards */
.cat-row{display:flex;gap:7px;overflow-x:auto;padding:6px 0 14px;margin:0 -2px}
.cat{
  flex:0 0 auto;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--faint);background:var(--surface);transition:all .18s ease;
}
.cat.is-on{color:#2A1A08;background:var(--amber)}









.soon{opacity:.5}

/* memory */
.mem-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:2px 0 14px;font-size:13.5px;color:var(--muted)}
.mem-bar b{font-family:var(--sans);font-size:19px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mem-grid{display:grid;gap:8px}
.mem-cell{
  aspect-ratio:1;border-radius:15px;background:var(--surface-2);position:relative;
  display:grid;place-items:center;transition:transform .22s cubic-bezier(.2,.8,.3,1),
    background .22s ease,opacity .3s ease;
  transform-style:preserve-3d;
}
.mem-cell img{width:72%;height:72%;object-fit:contain;opacity:0;transition:opacity .12s ease .09s}
.mem-cell.up{background:var(--surface-3);transform:rotateY(180deg) scale(1.02)}
.mem-cell.up img{opacity:1;transform:rotateY(180deg)}
.mem-cell.done{opacity:.32;background:rgba(143,174,136,.18)}
.mem-cell.done img{opacity:1;transform:rotateY(180deg)}
.mem-back{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:15px;
  background:linear-gradient(140deg,#2B2320,#211B19);transition:opacity .12s ease;
}
.mem-back::after{content:'';width:16px;height:16px;border-radius:50%;
  background:rgba(240,169,76,.22)}
.mem-cell.up .mem-back,.mem-cell.done .mem-back{opacity:0}

/* a live round */
.round-prompt{
  font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.022em;
  line-height:1.25;margin:18px 0 22px;text-align:center;
}
.round-opts{display:flex;flex-direction:column;gap:10px}
.round-opt{
  position:relative;width:100%;padding:17px 16px;border-radius:var(--r-lg);
  background:var(--surface);text-align:left;font-size:15.5px;line-height:1.35;
  transition:transform .16s ease,background .18s ease,box-shadow .18s ease;
}
.round-opt:active{transform:scale(.985)}
.round-opt.mine{box-shadow:0 0 0 1.5px var(--amber) inset;background:var(--amber-soft)}
.round-opt.right{box-shadow:0 0 0 1.5px var(--sage) inset;background:var(--sage-soft)}
.round-who{display:flex;gap:-6px;position:absolute;right:12px;top:50%;
  transform:translateY(-50%);flex-direction:row-reverse}
.round-who .av{margin-left:-7px;box-shadow:0 0 0 2px var(--surface)}
.round-foot{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.round-wait{text-align:center;color:var(--faint);font-size:13px;margin-top:16px}

.board{margin-top:26px}
.board-row{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
  background:var(--surface);margin-bottom:7px;
}
.board-rank{width:22px;font-weight:800;color:var(--hint);font-size:13px}
.board-name{flex:1;min-width:0;font-size:14.5px}
.board-score{font-weight:700;font-variant-numeric:tabular-nums;color:var(--amber)}
.board-row:first-child .board-rank{color:var(--amber)}
.gate-mark.sm{width:52px;height:52px;border-radius:17px;margin:0 0 18px}

/* ── the family ──────────────────────────────────────────────── */
.sheet-rule{height:1px;background:var(--line);margin:12px 0 4px}
.fam-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.fam-row{
  display:flex;align-items:center;gap:13px;padding:12px 13px;
  border-radius:var(--r-md);background:var(--surface);
}
.fam-text{flex:1;min-width:0}
.fam-name{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;
  letter-spacing:-.01em}
.fam-sub{font-size:12px;color:var(--faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam-tag{
  padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--amber-soft);color:var(--amber);
}
.fam-tag.pale{background:var(--surface-3);color:var(--faint)}
.fam-act{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface-2);
}
.fam-act svg{width:14px;height:14px;fill:none;stroke:var(--faint);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fam-code{
  font-size:19px;font-weight:800;letter-spacing:.22em;color:var(--amber);
  text-indent:.22em;flex:0 0 auto;
}

/* ── the shelf ───────────────────────────────────────────────── */
.shelf-lead{margin:2px 0 14px;color:var(--faint);font-size:13.5px;line-height:1.5}
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.game-card{
  position:relative;border-radius:22px;overflow:hidden;text-align:left;
  display:flex;flex-direction:column;background:#191413;
  box-shadow:0 14px 30px -22px rgba(0,0,0,.95);
  transition:transform .2s cubic-bezier(.2,.8,.3,1);
}
.game-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.09);
}
.game-card:active{transform:scale(.965)}
/* Never shrink the picture to make room for a longer subtitle — the grid makes
   rows equal height, and a flex child will give up its space silently. */
.game-art{
  position:relative;aspect-ratio:1.18;overflow:hidden;background:#12100E;
  flex:0 0 auto;width:100%;
}
.game-art img{width:100%;height:100%;object-fit:cover;display:block}
.game-fade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(18,16,14,0) 42%, rgba(18,16,14,.9) 100%);
}
.game-body{padding:2px 13px 15px;position:relative;margin-top:-16px;flex:1 1 auto}
.game-name{font-size:14.5px;font-weight:600;letter-spacing:-.012em;line-height:1.25}
.game-sub{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.4}
.game-tag{
  position:absolute;top:9px;right:9px;padding:3px 8px;border-radius:999px;
  font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(12,10,9,.55);color:rgba(248,242,233,.92);backdrop-filter:blur(6px);
}

/* ── choosing how hard ───────────────────────────────────────── */
.lvl-hero{
  position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1.9;
  margin:2px 0 4px;background:#12100E;
  box-shadow:0 16px 36px -26px rgba(0,0,0,.95), inset 0 0 0 1px rgba(248,242,233,.08);
}
.lvl-hero img{width:100%;height:100%;object-fit:cover;display:block}
.lvl-hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(18,16,14,.96) 4%, rgba(18,16,14,.35) 48%,
             rgba(18,16,14,.1) 100%);
}
.lvl-hero-cap{position:absolute;left:17px;right:17px;bottom:15px}
.lvl-hero-title{font-family:var(--display);font-size:27px;font-weight:600;
  letter-spacing:-.024em;line-height:1.1}
.lvl-hero-sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}

.lvl-list{display:flex;flex-direction:column;gap:9px}
.lvl{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:15px 15px;
  border-radius:var(--r-lg);background:var(--surface);text-align:left;overflow:hidden;
  transition:transform .18s ease,background .18s ease;
}
.lvl::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
}
.lvl-1::before{background:var(--sage)}
.lvl-2::before{background:var(--amber)}
.lvl-3::before{background:#E08A3C}
.lvl-4::before{background:var(--clay)}
.lvl:active{transform:scale(.985);background:var(--surface-2)}
.lvl-dots{display:flex;gap:4px;width:42px;flex:0 0 auto;padding-left:3px}
.lvl-dots i{width:7px;height:7px;border-radius:50%;background:rgba(248,242,233,.13)}
.lvl-1 .lvl-dots i.on{background:var(--sage)}
.lvl-2 .lvl-dots i.on{background:var(--amber)}
.lvl-3 .lvl-dots i.on{background:#E08A3C}
.lvl-4 .lvl-dots i.on{background:var(--clay)}
.lvl-text{flex:1;min-width:0}
.lvl-name{display:block;font-family:var(--display);font-size:17px;font-weight:600;
  letter-spacing:-.015em}
.lvl-sub{display:block;font-size:12.5px;color:var(--faint);margin-top:2px}
.lvl-go{width:16px;height:16px;fill:none;stroke:var(--hint);stroke-width:2;flex:0 0 auto}

/* the shelf slides too */
.game-grid.from-right{animation:slideFromRight .24s cubic-bezier(.2,.8,.3,1) both}
.game-grid.from-left{animation:slideFromLeft .24s cubic-bezier(.2,.8,.3,1) both}
.game-grid.nudge-l{animation:nudgeL .22s ease}
.game-grid.nudge-r{animation:nudgeR .22s ease}

/* ── a board ─────────────────────────────────────────────────── */
.bg-note{text-align:center;font-size:14px;color:var(--muted);
  min-height:20px;margin:2px 0 12px}
.bg-note.warn{color:var(--clay);font-weight:600}
/* A board with a frame around it, the way one sits on a table. */
.board-frame{
  position:relative;padding:11px;border-radius:20px;
  background:linear-gradient(150deg,#5A4332,#3A2A20 55%,#4A3628);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,225,190,.18), inset 0 -2px 5px rgba(0,0,0,.55);
}
.bg-board{
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  aspect-ratio:1;width:100%;
  border-radius:9px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 3px 9px rgba(0,0,0,.45);
}
/* Deep green against pale sage: both a cream and a walnut piece read on it. */
/* A grid track's automatic minimum is its content, so a 320px piece image would
   otherwise force 320px squares. */
.bg-sq{
  position:relative;display:grid;place-items:center;overflow:hidden;
  min-width:0;min-height:0;transition:box-shadow .16s ease;
}
.bg-sq.light{background:linear-gradient(160deg,#8E9B83,#7A8770)}
.bg-sq.dark{background:linear-gradient(160deg,#3E4E3A,#33412F)}
.bg-sq.last{box-shadow:inset 0 0 0 100px rgba(240,169,76,.30)}
.bg-sq.sel{box-shadow:inset 0 0 0 100px rgba(240,169,76,.46)}
.bg-sq.hint{box-shadow:inset 0 0 0 3px #F0A94C, inset 0 0 0 100px rgba(240,169,76,.16)}
.pc{
  width:88%;height:88%;object-fit:contain;position:relative;z-index:1;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));
}
.pc.in-check{animation:checkPulse .9s ease-in-out infinite}
@keyframes checkPulse{
  0%,100%{filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
  50%{filter:drop-shadow(0 0 9px #E05A3A) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
}
.dot{
  position:absolute;width:26%;height:26%;border-radius:50%;
  background:rgba(20,26,18,.42);pointer-events:none;z-index:2;
}
.bg-sq.light .dot{background:rgba(30,40,26,.34)}
.dot.take{width:86%;height:86%;background:none;
  box-shadow:inset 0 0 0 4px rgba(224,90,58,.68)}
.man{
  width:78%;height:78%;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 4px 7px -2px rgba(0,0,0,.65), inset 0 -3px 6px rgba(0,0,0,.28),
    inset 0 3px 5px rgba(255,255,255,.22);
}
.man.white{background:radial-gradient(circle at 34% 28%,#FFFAF0,#CDB99E)}
.man.black{background:radial-gradient(circle at 34% 28%,#7A5238,#2A1C14)}
.crown{font-size:clamp(12px,4vw,19px);color:rgba(70,45,25,.6)}
.man.black .crown{color:rgba(255,220,170,.85)}

/* what the gentle level says */
.teach{
  margin-top:14px;padding:15px 16px 13px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:inset 0 0 0 1px rgba(240,169,76,.18);
  animation:gateIn .25s ease both;
}
.teach-load{color:var(--faint);font-size:13.5px}
.teach-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.teach-head .pc{width:40px;height:40px;flex:0 0 auto}
.teach-words{min-width:0}
.teach-move{font-size:15px;font-weight:600;letter-spacing:-.01em}
.teach-term{
  display:inline-block;margin-top:4px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--amber-soft);color:var(--amber);
}
.teach-line{margin:0 0 7px;font-size:14.5px;line-height:1.5}
.teach-why{margin:0 0 7px;font-size:13px;line-height:1.55;color:var(--muted)}
.teach .btn{margin-top:6px}

.bg-bar{margin-top:16px}
.bg-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.promo-row{display:flex;gap:10px;justify-content:center;padding:8px 0 4px}
.promo{
  width:62px;height:62px;border-radius:18px;background:var(--surface-2);
  font-size:32px;color:var(--ink);
}

/* ── balloons ────────────────────────────────────────────────── */
.bal-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:2px 0 10px}
.bal-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
.bal-stat b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.bal-stat-l{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--hint)}
.bal-lives{font-size:17px;color:var(--clay);letter-spacing:2px;transition:transform .15s}
.bal-lives.hit{transform:scale(1.35)}
.bal-field{
  position:relative;width:100%;height:min(62vh,460px);border-radius:20px;
  overflow:hidden;background:linear-gradient(180deg,#1B2430,#141110);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.06);
}
.balloon{
  position:absolute;bottom:-70px;width:52px;height:64px;border-radius:50% 50% 46% 46%;
  display:grid;place-items:center;font-size:18px;font-weight:800;color:#2A1A08;
  will-change:transform;box-shadow:inset -6px -8px 14px rgba(0,0,0,.2);
}
.balloon::after{
  content:'';position:absolute;bottom:-8px;width:2px;height:10px;
  background:rgba(248,242,233,.3);
}
/* Named for the balloon, not just for being a colour. They used to be .c1–.c5,
   and .c4 is the four-in-a-row board — a seven-by-six grid — so every balloon
   that happened to get the fourth colour turned into a grid and dropped its
   number into the top-left cell. Three and eight, every game. */
.balloon.bal-c1{background:radial-gradient(circle at 34% 28%,#FBD9A0,#F0A94C)}
.balloon.bal-c2{background:radial-gradient(circle at 34% 28%,#F6B3A0,#E07A5F)}
.balloon.bal-c3{background:radial-gradient(circle at 34% 28%,#C3D9BC,#8FAE88)}
.balloon.bal-c4{background:radial-gradient(circle at 34% 28%,#C9BEE6,#8F7FC0)}
.balloon.bal-c5{background:radial-gradient(circle at 34% 28%,#A8CEDC,#6FA3B8)}
.balloon.pop{transform:scale(1.5);opacity:0;transition:transform .17s,opacity .17s}
.balloon.wrong{animation:shake .3s}
@keyframes shake{0%,100%{margin-left:0}25%{margin-left:-7px}75%{margin-left:7px}}
.bal-over{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:26px;text-align:center;
  background:rgba(20,17,16,.82);backdrop-filter:blur(8px);
}
.bal-over-title{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.bal-over-sub{margin:0;color:var(--faint);font-size:13.5px;line-height:1.5;max-width:250px}

/* ── lights and tiles ────────────────────────────────────────── */
.lights{display:grid;gap:9px;width:100%;max-width:330px;margin:0 auto}
/* Named "lamp", not "light" — the chess board has light squares, and a shared
   class name put rounded corners on half the board. */
.lamp{
  aspect-ratio:1;border-radius:16px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.05);
  transition:background .18s ease,box-shadow .18s ease,transform .14s ease;
}
.lamp:active{transform:scale(.93)}
.lamp.on{
  background:radial-gradient(circle at 34% 28%,#FBD9A0,#F0A94C);
  box-shadow:0 0 20px -4px rgba(240,169,76,.6);
}
.slide{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  width:100%;max-width:330px;margin:0 auto}
.tile{
  aspect-ratio:1;border-radius:15px;display:grid;place-items:center;
  background:var(--surface-2);font-size:22px;font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background .16s ease,transform .12s ease;
}
.tile:active{transform:scale(.95)}
.tile.home{background:rgba(143,174,136,.2);color:#C7DCC0}
.tile.gap{background:none;box-shadow:inset 0 0 0 1px rgba(248,242,233,.05)}

/* ── moving between tabs ─────────────────────────────────────── */
.view.is-active.from-right{animation:slideFromRight .26s cubic-bezier(.2,.8,.3,1) both}
.view.is-active.from-left{animation:slideFromLeft .26s cubic-bezier(.2,.8,.3,1) both}
@keyframes slideFromRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideFromLeft{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.view.nudge-l{animation:nudgeL .22s ease}
.view.nudge-r{animation:nudgeR .22s ease}
@keyframes nudgeL{50%{transform:translateX(-13px)}100%{transform:none}}
@keyframes nudgeR{50%{transform:translateX(13px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .view.is-active.from-right,.view.is-active.from-left,
  .view.nudge-l,.view.nudge-r{animation:none}
}

/* ── snake ───────────────────────────────────────────────────── */
.snake-wrap{
  position:relative;width:100%;height:min(58vh,440px);border-radius:20px;
  overflow:hidden;display:grid;place-items:center;background:#151A1D;
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.07), 0 16px 36px -26px rgba(0,0,0,.9);
}
/* The box takes the gesture too, not only the drawn square inside it. */
.snake-wrap{touch-action:none}
.snake-canvas{display:block;touch-action:none}
.snake-canvas.shake{animation:shake .3s}
.dpad{
  display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,52px);
  gap:7px;justify-content:center;margin-top:16px;
}
.dpad-btn{
  border-radius:15px;background:var(--surface);display:grid;place-items:center;
  transition:background .14s ease,transform .12s ease;
}
.dpad-btn:active{transform:scale(.93);background:var(--surface-2)}
.dpad-btn svg{width:21px;height:21px;fill:none;stroke:var(--muted);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dpad-btn.up{grid-column:2;grid-row:1}
.dpad-btn.left{grid-column:1;grid-row:2}
.dpad-btn.down{grid-column:2;grid-row:2}
.dpad-btn.right{grid-column:3;grid-row:2}





/* ── why a notification did not arrive ───────────────────────── */
.note-card{
  padding:15px 16px;border-radius:var(--r-lg);background:var(--surface);margin-bottom:11px;
}
.note-card.good{box-shadow:inset 0 0 0 1px rgba(143,174,136,.3)}
.note-card.bad{box-shadow:inset 0 0 0 1px rgba(224,122,95,.36)}
.note-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.note-sub{font-size:13px;color:var(--faint);line-height:1.5;margin-bottom:10px}
.note-card .btn{margin-top:4px}
.note-line{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px}
.note-line + .note-line{border-top:1px solid var(--line)}
.note-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--hint)}
.note-line.ok .note-dot{background:var(--sage);box-shadow:0 0 7px var(--sage)}
.note-line.no .note-dot{background:var(--clay)}
.note-detail{margin-left:auto;font-size:12px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.note-line .btn{margin-left:8px;flex:0 0 auto}

/* ── sudoku ──────────────────────────────────────────────────── */
.sud-frame{
  padding:8px;border-radius:16px;
  background:linear-gradient(150deg,#3A2E26,#2A211C);
  box-shadow:0 16px 38px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,225,190,.12);
}
.sud{
  position:relative;display:grid;
  grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);
  aspect-ratio:1;border-radius:9px;overflow:hidden;
  background:rgba(248,242,233,.07);gap:1px;
}
/* The three-by-three blocks, drawn over the grid — a shadow on the edge cells
   was too faint to read at a phone's size. */
.sud::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    repeating-linear-gradient(to right,
      rgba(248,242,233,.34) 0 2px, transparent 2px 33.3334%),
    repeating-linear-gradient(to bottom,
      rgba(248,242,233,.34) 0 2px, transparent 2px 33.3334%);
}
.sud-cell{
  position:relative;display:grid;place-items:center;background:#221B18;
  min-width:0;min-height:0;transition:background .14s ease;
}
.sud-cell.peer{background:#2B2320}
.sud-cell.same{background:rgba(240,169,76,.14)}
.sud-cell.sel{background:rgba(240,169,76,.30)}
.sud-n{font-size:clamp(15px,4.6vw,22px);font-weight:600;color:var(--amber);
  font-variant-numeric:tabular-nums}
.sud-cell.given .sud-n{color:var(--ink);font-weight:700}
.sud-cell.wrong .sud-n{color:var(--clay)}
.sud-marks{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;
  place-items:center}
.sud-marks i{font-size:clamp(7px,2.1vw,10px);font-style:normal;color:var(--hint);
  line-height:1}
.sud-pad{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:14px}
.sud-key{
  aspect-ratio:1;border-radius:14px;background:var(--surface);font-size:20px;font-weight:600;
  display:grid;place-items:center;transition:background .14s,transform .12s;
}
.sud-key:active{transform:scale(.93);background:var(--surface-2)}
.sud-key.wide{grid-column:span 2;aspect-ratio:auto;font-size:13.5px;font-weight:600}
.sud-key.is-on{background:var(--amber);color:#2A1A08}
.sud-key svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2.2;
  stroke-linecap:round}

/* ── 2048 ────────────────────────────────────────────────────── */
.t2048-frame{
  position:relative;padding:9px;border-radius:18px;background:#2A211C;
  box-shadow:0 16px 38px -26px rgba(0,0,0,.95);touch-action:none;
}
.t2048{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
  gap:9px;aspect-ratio:1}
.t2048-cell{
  border-radius:13px;background:rgba(248,242,233,.05);display:grid;place-items:center;
  min-width:0;min-height:0;font-weight:800;font-size:clamp(17px,6.4vw,30px);
  font-variant-numeric:tabular-nums;color:#2A1A08;
  transition:background .12s ease,transform .12s ease;
}
.t2048-cell.v2{background:#D9CBB6} .t2048-cell.v4{background:#D6BE97}
.t2048-cell.v8{background:#F0B064;color:#2A1A08} .t2048-cell.v16{background:#EC9A4E}
.t2048-cell.v32{background:#E7823E} .t2048-cell.v64{background:#E06A34;color:#FFF6EA}
.t2048-cell.v128{background:#D9A441;color:#2A1A08;font-size:clamp(15px,5.4vw,25px)}
.t2048-cell.v256{background:#D79B2E;font-size:clamp(15px,5.4vw,25px)}
.t2048-cell.v512{background:#D4901B;font-size:clamp(15px,5.4vw,25px)}
.t2048-cell.v1024{background:#8FAE88;color:#14180F;font-size:clamp(13px,4.6vw,21px)}
.t2048-cell.v2048{background:#6E9A66;color:#FFF6EA;font-size:clamp(13px,4.6vw,21px);
  box-shadow:0 0 24px -4px rgba(143,174,136,.8)}
.t2048-cell.v4096{background:#3E4E3A;color:#FFF6EA;font-size:clamp(12px,4.2vw,19px)}

/* ── four in a row ───────────────────────────────────────────── */
.c4-frame{
  padding:11px;border-radius:20px;
  background:linear-gradient(150deg,#35414B,#222B33);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(200,225,255,.12);
}
.c4{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);
  gap:7px;aspect-ratio:7/6}
.c4-hole{
  border-radius:50%;background:#171D22;min-width:0;min-height:0;
  display:grid;place-items:center;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
}
.c4-disc{
  width:88%;height:88%;border-radius:50%;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.3), inset 0 3px 5px rgba(255,255,255,.28),
    0 2px 4px rgba(0,0,0,.4);
}
.c4-disc.mine{background:radial-gradient(circle at 34% 28%,#FBD9A0,#E09A3C)}
.c4-disc.theirs{background:radial-gradient(circle at 34% 28%,#F0A093,#C25543)}
.c4-disc.drop{animation:c4drop .26s cubic-bezier(.3,1.4,.5,1) both}
@keyframes c4drop{from{transform:translateY(-260%)}to{transform:none}}
.c4-disc.won{box-shadow:0 0 0 3px var(--ink), 0 0 18px -2px rgba(255,255,255,.6)}

/* ── playing each other ──────────────────────────────────────── */
.vs-cta{margin-bottom:6px}
.vs-list{margin-bottom:18px}
.vs-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;
  border-radius:var(--r-md);background:var(--surface);text-align:left;margin-bottom:8px;
  transition:transform .16s ease,background .16s ease;
}
.vs-row:active{transform:scale(.985);background:var(--surface-2)}
.vs-row.mine{box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.4)}
.vs-text{flex:1;min-width:0}
.vs-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.vs-sub{font-size:12px;color:var(--faint);margin-top:2px}
.vs-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 9px var(--amber);flex:0 0 auto}
.vs-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin:2px 0 12px}
.vs-seat{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--faint);
  padding:6px 11px;border-radius:999px;transition:all .2s ease}
.vs-seat.on{color:var(--ink);background:var(--amber-soft);
  box-shadow:inset 0 0 0 1px rgba(240,169,76,.3)}
.vs-v{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.bg-note.quiet{color:var(--faint)}

/* ── inviting from the conversation ──────────────────────────── */
.chat-games{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:6px}
.chat-game{
  border-radius:16px;overflow:hidden;background:#191413;position:relative;
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.08);
  transition:transform .16s ease;
}
.chat-game:active{transform:scale(.95)}
.chat-game img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.chat-game-name{
  position:absolute;left:0;right:0;bottom:0;padding:16px 7px 7px;
  font-size:11.5px;font-weight:600;line-height:1.2;
  background:linear-gradient(to top, rgba(18,16,14,.94), transparent);
}

/* ── answering one line ──────────────────────────────────────── */
.msg{position:relative}
.msg.will-reply::before{
  content:'';position:absolute;left:-34px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--amber-soft);
  box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.5);
}
.msg.flash .bubble,.msg.flash .quote{animation:flashBubble 1.1s ease}
@keyframes flashBubble{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px rgba(240,169,76,.45)}}
.quote{
  display:flex;flex-direction:column;gap:1px;max-width:100%;
  padding:7px 11px;margin-bottom:3px;border-radius:13px;
  background:rgba(248,242,233,.06);border-left:3px solid var(--amber);
  font-size:12.5px;line-height:1.35;cursor:pointer;
}
.mine .quote{background:rgba(36,22,8,.16);border-left-color:rgba(36,22,8,.4)}
.quote-who{font-weight:700;color:var(--amber)}
.mine .quote-who{color:#6B4412}
.quote-text{opacity:.72;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.menu-row.danger svg{stroke:var(--clay)}
.menu-row.danger{color:var(--clay)}
.toast.over-page{bottom:calc(26px + var(--safe-b))}

/* ── Learn ───────────────────────────────────────────────────────
   Big type, one thing per screen, and a microphone that is clearly
   the point of the page. */
.btn-big{padding:17px 20px;font-size:16.5px;border-radius:var(--r-md)}
.btn-text{display:block;width:100%;margin-top:16px;padding:10px;
  text-align:center;font-size:13.5px;color:var(--faint)}
.btn-text:active{color:var(--ink)}
.btn-text.ready{color:var(--amber);font-weight:600}
.learn-wait{padding:30px 4px;color:var(--faint);text-align:center}
.learn-note{margin:18px 2px 0;font-size:12.5px;line-height:1.6;color:var(--hint)}
.learn-sep{margin:26px 2px 12px;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint)}

.learn-doors{display:grid;gap:12px}
.learn-door{
  display:grid;grid-template-columns:76px 1fr;align-items:center;gap:14px;
  padding:10px 16px 10px 10px;border-radius:var(--r-lg);text-align:left;
  background:var(--surface);box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),background .16s ease;
}
.learn-door:active{transform:scale(.985);background:var(--surface-2)}
.learn-door img{width:76px;height:76px;border-radius:15px;object-fit:cover;display:block}
.learn-door-name{font-family:var(--display);font-size:17.5px;font-weight:600;
  letter-spacing:-.015em}
.learn-door-sub{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--faint)}

.course-card{
  display:grid;grid-template-columns:60px 1fr 20px;align-items:center;gap:13px;
  width:100%;padding:10px 12px 10px 10px;margin-bottom:10px;
  border-radius:var(--r-lg);text-align:left;
  background:var(--surface);box-shadow:var(--shadow);
}
.course-card:active{background:var(--surface-2)}
.course-card img{width:60px;height:60px;border-radius:14px;object-fit:cover;display:block}
.course-head{display:flex;align-items:center;gap:8px;min-width:0}
.course-name{flex:1;min-width:0;font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-sub{margin-top:2px;font-size:12px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-bar{height:4px;margin-top:9px;border-radius:99px;background:var(--surface-3);
  overflow:hidden}
.course-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#F6B863,var(--amber))}
/* The name takes whatever room is left; the streak takes what it needs. It had
   no flex rule, so a long course title squeezed the pill until the number wrapped
   inside it — which is what a run of eleven days looked like next to
   "Communication and public speaking". */
.streak{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;
  padding:3px 9px 3px 6px;white-space:nowrap;
  border-radius:999px;background:var(--amber-soft);color:var(--amber);
  font-size:12px;font-weight:700}
.streak .flame{font-size:11px}

.learn-hero{position:relative;margin-bottom:18px;border-radius:var(--r-lg);overflow:hidden}
.learn-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.learn-hero.small img{aspect-ratio:21/9}
.learn-hero-line{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.015em;
  background:linear-gradient(180deg,transparent,rgba(20,17,16,.9));
}
.hero-streak{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;background:rgba(20,17,16,.72);
  color:var(--amber);font-size:12.5px;font-weight:700;backdrop-filter:blur(6px)}

.stat-row{display:flex;gap:8px;margin-bottom:16px}
.stat{flex:1;min-width:0;padding:12px 6px;border-radius:var(--r-md);text-align:center;
  background:var(--surface)}
.stat-n{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.stat-l{margin-top:2px;font-size:10.5px;letter-spacing:.06em;color:var(--faint)}

.week-card{padding:17px;margin-bottom:18px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--surface-2),var(--surface))}
.week-kicker{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber)}
.week-theme{margin-top:5px;font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.02em}
.week-goal{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.week-up{margin-top:16px;padding:12px 15px;border-radius:var(--r-md);
  background:var(--amber-soft);color:var(--amber);font-size:13.5px;font-weight:600}

.word-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.word-chip{padding:7px 13px;border-radius:999px;background:var(--surface-3);
  font-size:13.5px;font-weight:500}
.word-chip:active{transform:scale(.95)}
.word-chip.warn{background:rgba(224,122,95,.16);color:#F0937A;font-weight:600}

.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip-row.big .chip{font-size:15px;padding:12px 18px}
.chip.wrong{background:rgba(224,122,95,.16);color:#F0937A;opacity:.7}
.chip-row.locked .chip{pointer-events:none}
.setup-q{margin:22px 0 2px;font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:-.015em}
.setup-hint{margin:4px 0 8px;font-size:12.5px;line-height:1.5;color:var(--faint)}
.field-time{width:100%;display:block;color-scheme:dark}

.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.lang-tile{padding:20px 12px;border-radius:var(--r-lg);text-align:center;
  background:var(--surface);box-shadow:var(--shadow)}
.lang-tile:active{transform:scale(.97);background:var(--surface-2)}
.lang-flag{font-size:34px;line-height:1}
.lang-name{margin-top:9px;font-family:var(--display);font-size:16px;font-weight:600}
.lang-native{margin-top:1px;font-size:12px;color:var(--faint)}

/* ── a lesson ────────────────────────────────────────────────── */
.step-bar{display:flex;gap:4px;margin-bottom:22px}
.step-bar i{flex:1;height:4px;border-radius:99px;background:var(--surface-3);
  transition:background .3s ease}
.step-bar i.done{background:var(--sage)}
.step-bar i.here{background:var(--amber)}

.lsn{padding-bottom:20px}
.lsn-kicker{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:10px}
.lsn-target{font-family:var(--display);font-size:28px;line-height:1.28;font-weight:600;
  letter-spacing:-.025em}
.lsn-q{font-family:var(--display);font-size:21px;line-height:1.35;font-weight:600;
  letter-spacing:-.02em}
.lsn-en{margin-top:9px;font-size:15px;color:var(--muted)}
.lsn-body{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
.lsn-tip{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;
  border-radius:var(--r-sm);background:var(--amber-soft);color:var(--amber);
  font-size:12.5px;font-weight:600}
.tip-dot{font-size:14px}

.hear-row{display:flex;gap:9px;margin-top:18px}
.hear-row .btn{flex:1;padding:11px 12px;font-size:14px}
.hear-row .btn.busy{color:var(--amber)}

.mic-stage{position:relative;display:grid;place-items:center;height:104px;margin-top:12px}
.mic-ring{position:absolute;width:84px;height:84px;border-radius:50%;
  background:var(--amber-soft);transition:transform .09s linear}
.mic-btn{position:relative;width:84px;height:84px;border-radius:50%;display:grid;
  place-items:center;color:#241608;
  background:linear-gradient(135deg,#F6B863,var(--amber) 52%,#E28F4A);
  box-shadow:0 10px 26px -12px rgba(240,169,76,.9),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s cubic-bezier(.2,.8,.3,1)}
.mic-btn svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mic-btn:active{transform:scale(.94)}
.mic-btn.live{background:linear-gradient(135deg,#EE8F73,var(--clay));color:#2A1512}
.mic-hint{text-align:center;font-size:13px;color:var(--faint);min-height:20px}

.ear-stage{display:grid;place-items:center;height:120px}
.ear-btn{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  color:var(--amber);background:var(--surface-2);box-shadow:var(--shadow)}
.ear-btn svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ear-btn.live{background:var(--amber-soft);transform:scale(1.06)}

.opt-list{display:grid;gap:9px;margin-top:20px}
.opt{padding:15px 17px;border-radius:var(--r-md);text-align:left;font-size:15.5px;
  background:var(--surface);box-shadow:var(--shadow);
  transition:background .18s ease,transform .16s ease,box-shadow .18s ease}
.opt:active{transform:scale(.985)}
.opt.right{background:var(--sage-soft);
  box-shadow:inset 0 0 0 1.5px rgba(143,174,136,.5);font-weight:600}
.opt.wrong{background:rgba(224,122,95,.14);
  box-shadow:inset 0 0 0 1.5px rgba(224,122,95,.45);opacity:.85}
.opt-list.locked .opt{pointer-events:none}

.gap-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px}
.hole{display:inline-block;min-width:80px;padding:0 6px;border-bottom:2px dashed var(--line-2);
  color:var(--hint)}
.hole.filled{padding:0;border-bottom-color:var(--amber);color:var(--amber)}

.build-line{display:flex;flex-wrap:wrap;gap:7px;min-height:64px;margin-top:18px;padding:12px;
  border-radius:var(--r-md);background:var(--surface);
  border:1px dashed var(--line-2);align-content:flex-start}
.build-ghost{color:var(--hint);font-size:14px}
.build-tray{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.word{padding:9px 14px;border-radius:11px;background:var(--surface-2);font-size:15px;
  box-shadow:var(--shadow)}
.word:active{transform:scale(.95)}
.build-line .word{background:var(--surface-3)}

.fb{margin-top:20px;padding:15px 17px;border-radius:var(--r-md)}
.fb.good{background:var(--sage-soft)}
.fb.bad{background:rgba(224,122,95,.13)}
.fb-head{font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.fb.good .fb-head{color:var(--sage)}
.fb.bad .fb-head{color:#F0937A}
.fb-why{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

.say-result{margin-top:6px}
.said{display:flex;align-items:center;gap:15px;padding:15px;border-radius:var(--r-md)}
.said.good{background:var(--sage-soft)}
.said.bad{background:rgba(224,122,95,.13)}
.said.bad .ring-fill{stroke:#F0937A}
.said-text{flex:1;min-width:0}
.said-verdict{font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.said-heard{margin-top:4px;font-size:13.5px;color:var(--muted);font-style:italic}
.said-note{margin:12px 2px 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.said-acts{display:grid;gap:9px;margin-top:16px}

.ring{position:relative;flex:0 0 auto;width:58px;height:58px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring-track{stroke:rgba(248,242,233,.12)}
.ring-fill{stroke:var(--amber)}
.ring-n{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em}

.finish{display:grid;justify-items:center;gap:16px;padding:14px 0 24px;text-align:center}
.finish .ring{width:108px;height:108px}
.finish .ring circle{stroke-width:3.4}
.finish .ring-n{font-size:32px}
.finish-line{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em}
.finish .stat-row{width:100%;margin:0}

/* ── talking ─────────────────────────────────────────────────── */
/* No reserved height: with one line of conversation on screen, a floor of
   180px is just a hole between what was said and the button to answer it. */
.talk-thread{display:grid;align-content:start;gap:11px;margin-bottom:6px}
.bub{max-width:88%;padding:12px 15px;border-radius:18px;font-size:15.5px;line-height:1.45}
.bub.them{justify-self:start;border-bottom-left-radius:7px;background:var(--surface-2)}
.bub.me{justify-self:end;border-bottom-right-radius:7px;
  background:linear-gradient(135deg,#F6B863,var(--amber));color:#241608}
.bub-tools{display:flex;align-items:center;gap:7px;margin-top:9px}
.bub-tool{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:var(--amber);background:rgba(240,169,76,.13)}
.bub-tool.wide{width:auto;padding:0 11px;border-radius:999px;font-size:11.5px;font-weight:700}
.bub-tool svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.bub-en{margin-top:9px;font-size:13px;color:var(--faint)}
.bub-fix{margin-top:8px;padding-top:8px;border-top:1px solid rgba(36,22,8,.22);
  font-size:13px;color:rgba(36,22,8,.8)}
.fix-tag{font-weight:700;margin-right:5px;text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px}
.talk-out{padding-bottom:12px}
.talk-out .btn-text{margin-top:8px}

/* ── the streak, as seven dots ────────────────────────────────── */
.streak-strip{padding:15px 17px 13px;margin-bottom:16px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(240,169,76,.13),var(--surface))}
.strip-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.strip-flame{display:flex;align-items:baseline;gap:5px}
.strip-flame .flame{font-size:15px}
.strip-n{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.03em;
  color:var(--amber)}
.strip-unit{font-size:12.5px;color:var(--faint)}
.strip-say{flex:1;min-width:0;text-align:right;font-size:12.5px;font-weight:600;
  color:var(--amber)}
.strip-say.good{color:var(--sage)}
.strip-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:13px}
.strip-day{display:grid;justify-items:center;gap:5px;font-size:10.5px;color:var(--faint)}
.strip-day i{width:22px;height:22px;border-radius:50%;display:block;
  background:rgba(248,242,233,.05)}
.strip-day i.lit{background:linear-gradient(135deg,#F6B863,var(--amber));
  box-shadow:0 3px 10px -5px rgba(240,169,76,.9)}
.strip-day i.now{background:transparent;box-shadow:inset 0 0 0 2px var(--amber)}
.strip-day i.missed{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.finish .streak-strip{width:100%;text-align:left;margin:0}
.course-sub.open{color:var(--amber);font-weight:600}

/* ── the ladders ─────────────────────────────────────────────── */
.lad-head{padding:14px 16px;margin:16px 0 18px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(240,169,76,.12),var(--surface))}
.lad-count{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em;
  color:var(--amber)}
.lad-word{margin-top:1px;font-size:12.5px;color:var(--faint)}
.lad-head .course-bar{margin-top:11px}

.lad-stage{margin-bottom:22px;transition:opacity .2s ease}
.lad-stage.shut{opacity:.45}
.lad-stage-head{display:flex;align-items:baseline;gap:10px}
.lad-stage-name{flex:1;min-width:0;font-family:var(--display);font-size:17px;
  font-weight:600;letter-spacing:-.02em}
.lad-stage-n{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--amber)}
.lad-stage-sub{margin:2px 0 11px;font-size:12.5px;color:var(--faint)}

.rung{
  display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:12px;
  width:100%;padding:11px 13px;margin-bottom:7px;border-radius:var(--r-md);
  text-align:left;background:var(--surface);box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),background .16s ease;
}
.rung:active{transform:scale(.985)}
.rung-pip{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;background:var(--surface-3);color:var(--faint)}
.rung-pip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rung-name{display:block;font-size:15px;font-weight:600}
.rung-sub{display:block;margin-top:1px;font-size:12px;color:var(--faint)}
.rung .lvl-go{width:18px;height:18px;fill:none;stroke:var(--hint);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.rung.done .rung-pip{background:var(--sage-soft);color:var(--sage)}
.rung.open{background:linear-gradient(140deg,rgba(240,169,76,.16),var(--surface-2));
  box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.42)}
.rung.open .rung-pip{background:linear-gradient(135deg,#F6B863,var(--amber));color:#241608}
.rung.shut{background:transparent;box-shadow:inset 0 0 0 1px var(--line);opacity:.6}
.rung.shut .rung-pip{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.rung.boss .rung-name{color:var(--amber)}
.rung.boss.shut .rung-name{color:inherit}
.rung.boss::after{content:'';position:absolute}

/* ── a series ────────────────────────────────────────────────── */
.series{display:flex;align-items:baseline;gap:9px;flex:0 0 100%;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line);justify-content:center}
.series-n{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;
  color:var(--amber)}
.series-w{font-size:11.5px;color:var(--faint)}

/* ── home ────────────────────────────────────────────────────────
   The first screen. Everything on it is either happening today or waiting on
   you, and every row is a way into the page that owns it. */
.home{padding-top:6px}
.hm-hello{margin-bottom:18px}
.hm-text{flex:1;min-width:0}
.hm-name{margin:0;font-family:var(--display);font-size:26px;font-weight:600;
  letter-spacing:-.028em;line-height:1.1}
.hm-day{margin:4px 0 0;font-size:13px;color:var(--faint);text-transform:capitalize}
/* The week, as seven marks. Cooked, planned, eaten out, missed, or nothing —
   readable in half a second, and the same data as a sentence about it. */
.hm-strip{display:block;width:100%;
  padding:12px 12px 10px;margin-bottom:18px;border-radius:18px;
  background:var(--surface);box-shadow:inset 0 0 0 1px rgba(248,242,233,.055);
  transition:background .16s ease}
.hm-strip:active{background:var(--surface-2)}
.hm-strip-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%}
.hm-mark{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.hm-mark i{display:block;width:100%;height:7px;border-radius:99px;background:var(--surface-3)}
.hm-mark b{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--hint)}
.hm-mark[data-state="planned"] i{background:var(--amber)}
.hm-mark[data-state="cooked"] i{background:var(--sage)}
.hm-mark[data-state="out"] i{background:var(--clay);opacity:.8}
.hm-mark[data-state="missed"] i{background:rgba(224,122,95,.35)}
.hm-mark.gone i{opacity:.45}
.hm-mark.now b{color:var(--amber)}
.hm-mark.now i{box-shadow:0 0 0 2px rgba(240,169,76,.28)}

.hm-tonight-do{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--amber)}

/* Tonight, because it is what people open the app to find out. */
.hm-tonight{display:block;width:100%;text-align:left;margin-bottom:22px;
  border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 20px 44px -30px rgba(0,0,0,.95);
  transition:transform .16s ease}
.hm-tonight:active{transform:scale(.99)}
.hm-tonight-art{position:relative;aspect-ratio:16/9}
.hm-tonight-art img{width:100%;height:100%;object-fit:cover;display:block}
.hm-tonight-fade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,16,.1) 30%,rgba(20,17,16,.92))}
.hm-tonight-words{position:absolute;left:0;right:0;bottom:0;padding:16px 17px 15px;
  display:flex;flex-direction:column;gap:3px}
.hm-tonight-cap{font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber)}
.hm-tonight-title{font-family:var(--display);font-size:21px;font-weight:600;
  letter-spacing:-.022em;line-height:1.16;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-tonight-who{display:flex;align-items:center;gap:7px;margin-top:5px;
  font-size:12.5px;color:var(--muted)}
.hm-tonight-who .av{width:20px;height:20px;font-size:9px}

.hm-cap{margin:0 0 10px 3px;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.hm-wait{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.hm-w{display:grid;grid-template-columns:38px 1fr 15px;align-items:center;gap:12px;
  width:100%;padding:12px 14px;border-radius:17px;text-align:left;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055);
  transition:transform .14s ease,background .16s ease}
.hm-w:active{transform:scale(.99);background:var(--surface-2)}
.hm-w-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:13px}
.hm-w-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hm-w-ico.amber{background:var(--amber-soft);color:var(--amber)}
.hm-w-ico.sage{background:var(--sage-soft);color:var(--sage)}
.hm-w-ico.clay{background:rgba(224,122,95,.16);color:var(--clay)}
.hm-w-text{min-width:0;display:block}
.hm-w-line{display:block;font-size:14.5px;font-weight:550;letter-spacing:-.008em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-w-where{display:block;margin-top:2px;font-size:11.5px;color:var(--faint)}
.hm-go{width:15px;height:15px;fill:none;stroke:var(--hint);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* An empty list is worth saying out loud rather than leaving a gap. */
.hm-clear{display:flex;align-items:center;gap:10px;margin-bottom:22px;
  padding:15px 16px;border-radius:17px;
  background:var(--sage-soft);color:var(--sage);font-size:14px;font-weight:550}
.hm-clear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

.hm-strips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hm-run{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:var(--amber-soft);color:var(--amber);font-size:12.5px;font-weight:600}
.hm-run-t{color:var(--muted);font-weight:500;max-width:16ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-pot{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;
  background:var(--surface-2);font-size:12.5px;font-weight:600}
.hm-pot-t{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-pot-bar{width:52px;height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.hm-pot-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#F6B863,var(--amber))}
.hm-pot-n{color:var(--amber)}

.hm-week{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:14px 16px;margin-bottom:20px;border-radius:17px;text-align:left;
  background:var(--surface);box-shadow:inset 0 0 0 1px rgba(248,242,233,.055);
  font-size:14px}
.hm-week.warn{box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.3)}
.hm-week.warn .hm-week-t{color:var(--amber)}

.hm-doors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hm-door{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:15px 6px 13px;border-radius:17px;background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055);
  font-size:11.5px;font-weight:600;color:var(--muted);
  transition:transform .14s ease,background .16s ease}
.hm-door:active{transform:scale(.96);background:var(--surface-2)}
.hm-door svg{width:21px;height:21px;fill:none;stroke:var(--amber);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hm-door span{text-align:center;line-height:1.25}

/* While the one request is in the air. */
.hm-skel{display:flex;flex-direction:column;gap:12px;padding-top:10px}
.hm-skel-row{height:64px;border-radius:18px;
  background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:shimmer 1.5s linear infinite}
.hm-skel-row:first-child{height:128px}
@keyframes shimmer{from{background-position:140% 0}to{background-position:-40% 0}}

/* ── growth ──────────────────────────────────────────────────────
   Habits are five weeks of days rather than a number, because the gaps are
   the information. The first attempt drew them as a wall of identical amber
   blocks, which is a heatmap of nothing: same size, same colour, no sense of
   when. These are small, round, and they brighten as they approach today. */
.hab, .pot{
  position:relative;overflow:hidden;
  padding:17px 18px 15px;margin-bottom:13px;border-radius:22px;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(240,169,76,.07),transparent 58%),
    var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055),0 16px 34px -30px rgba(0,0,0,.9);
}
.hab-head, .pot-head{display:flex;align-items:flex-start;gap:12px}
.hab-text, .pot-text{flex:1;min-width:0}
.hab-title, .pot-title{font-family:var(--display);font-size:18px;font-weight:600;
  letter-spacing:-.02em;line-height:1.2}
.hab-sub, .pot-why{margin-top:3px;font-size:12.5px;color:var(--faint);line-height:1.4}

/* The run, as a thing worth looking at rather than a tag. */
.hab-streak{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;padding:7px 10px;border-radius:15px;
  background:linear-gradient(150deg,rgba(246,184,99,.22),rgba(240,169,76,.1));
  box-shadow:inset 0 0 0 1px rgba(240,169,76,.3);
}
.hab-streak-n{font-family:var(--display);font-size:21px;font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--amber)}
.hab-streak-w{margin-top:2px;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(240,169,76,.66)}

.hab-week{display:flex;align-items:center;gap:11px;margin-top:14px;
  font-size:11.5px;font-weight:600;color:var(--faint);white-space:nowrap}
.hab-bar{flex:1;height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.hab-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#F6B863,var(--amber));transition:width .4s ease}

.hab-grid{margin:14px 0 15px;max-width:236px}
.hab-letters,.hab-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.hab-letters{margin-bottom:7px}
.hab-letters span{font-size:9px;font-weight:700;letter-spacing:.04em;text-align:center;
  color:var(--hint);text-transform:uppercase}
.hab-dot{
  display:block;aspect-ratio:1;border-radius:50%;
  background:var(--surface-3);
  transition:background .25s ease,box-shadow .25s ease;
}
.hab-dot.on{background:linear-gradient(150deg,#F6B863,var(--amber))}
.hab-dot.now{box-shadow:0 0 0 2px rgba(248,242,233,.22)}
.hab-dot.on.now{box-shadow:0 0 0 2px rgba(240,169,76,.5)}

.hab-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hab-tick{
  display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:999px;
  background:var(--surface-3);color:var(--muted);font-size:13.5px;font-weight:600;
  transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .25s ease;
}
.hab-tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.7;
  stroke-linecap:round;stroke-linejoin:round}
.hab-tick.on{background:linear-gradient(140deg,#F6B863,var(--amber));color:#241608;
  box-shadow:0 10px 24px -12px rgba(240,169,76,.7)}
.hab-tick:active{transform:scale(.96)}
.hab-yday{padding:11px 10px;border-radius:999px;background:transparent;
  color:var(--faint);font-size:12.5px}
.hab-yday:active{color:var(--ink)}
.hab-edit{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--surface-3);color:var(--faint)}
.hab-edit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

.pot-saved{font-family:var(--display);font-size:22px;font-weight:600;
  letter-spacing:-.025em;color:var(--amber);white-space:nowrap}
.pot-bar{height:7px;margin:14px 0 9px;border-radius:99px;background:var(--surface-3);
  overflow:hidden}
.pot-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#F6B863,var(--amber));transition:width .45s ease}
.pot-foot{display:flex;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--faint);margin-bottom:12px}
.pot-when{white-space:nowrap;color:var(--hint)}
.pot-who{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.pot-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 4px;
  border-radius:999px;background:var(--surface-3);font-size:12px;font-weight:600}
.pot-chip .av{width:20px;height:20px;font-size:9px}

/* ── the week, answered for ───────────────────────────────────── */
.slot-mid{min-width:0;display:block;flex:1}
.slot-who{display:flex;align-items:center;gap:6px;margin-top:4px;
  font-size:11.5px;color:var(--faint)}
.slot-who .av{width:18px;height:18px;font-size:9px}
.slot-why{display:block;margin-top:3px;font-size:11.5px;color:var(--clay);opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cooked-tag{
  flex:0 0 auto;padding:3px 9px;border-radius:999px;white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.cooked-tag.done{background:var(--sage-soft);color:var(--sage)}
.cooked-tag.missed{background:rgba(224,122,95,.15);color:var(--clay)}
/* An unanswered meal asks, rather than telling. */
.cooked-ask{
  flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;background:var(--surface-3);color:var(--faint);
  transition:background .15s ease,color .15s ease,transform .12s ease;
}
.cooked-ask svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.cooked-ask:active{transform:scale(.92);background:var(--sage);color:#1B2418}

/* ── next week, offered ───────────────────────────────────────── */
.wk-note{
  padding:15px 16px;margin-bottom:18px;border-radius:18px;
  background:radial-gradient(120% 100% at 0% 0%,rgba(240,169,76,.12),transparent 60%),
    var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055);
}
.wk-read{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.wk-balance{margin:8px 0 0;font-family:var(--display);font-size:15.5px;
  font-weight:600;letter-spacing:-.012em;line-height:1.4}
.wk-day{margin-bottom:14px;border-radius:18px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.05)}
.wk-day .day-head{padding:11px 15px 9px}
.wk-row{
  position:relative;display:grid;grid-template-columns:24px 1fr auto;
  align-items:center;gap:12px;width:100%;padding:11px 15px 12px;text-align:left;
  opacity:.42;transition:opacity .16s ease,background .16s ease;
}
.wk-row.on{opacity:1}
.wk-row + .wk-row::before{content:'';position:absolute;left:51px;right:0;top:0;
  height:1px;background:var(--line)}
.wk-row:active{background:var(--surface-2)}
.wk-tick{
  display:grid;place-items:center;width:24px;height:24px;border-radius:8px;
  background:var(--surface-3);color:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(248,242,233,.12);
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.wk-tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.wk-row.on .wk-tick{background:var(--amber);color:#241608;box-shadow:none}
.wk-text{min-width:0;display:block}
.wk-when{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.wk-title{display:block;margin-top:2px;font-family:var(--display);font-size:16px;
  font-weight:600;letter-spacing:-.015em;line-height:1.25}
.wk-why{display:block;margin-top:3px;font-size:12px;color:var(--faint);line-height:1.4}
.wk-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.wk-tag{padding:2px 7px;border-radius:999px;background:var(--surface-3);
  color:var(--faint);font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase}
.wk-mins{font-size:11.5px;color:var(--hint);white-space:nowrap}

/* ── what the kitchen has not got ─────────────────────────────── */
.gap-count{margin:0 0 10px 2px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber)}
.gap-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.gap{
  display:grid;grid-template-columns:44px 1fr 30px;align-items:center;gap:13px;
  width:100%;padding:11px 13px;border-radius:16px;text-align:left;
  background:var(--surface);
  /* Lit until somebody deals with it — that is the whole job of this screen. */
  box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.34),0 10px 22px -20px rgba(0,0,0,.9);
  transition:box-shadow .2s ease,opacity .2s ease,transform .12s ease;
}
.gap:active{transform:scale(.985)}
.gap-ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--amber-soft);color:var(--amber);
  transition:background .2s ease,color .2s ease;
}
.gap-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.gap-text{min-width:0;display:block}
.gap-name{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  text-transform:capitalize}
.gap-for{display:block;margin-top:2px;font-size:11.5px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gap-add{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--surface-3);color:var(--muted);
}
.gap-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* Dealt with: the light goes out. */
.gap.added{box-shadow:inset 0 0 0 1px var(--line);opacity:.5}
.gap.added .gap-ico{background:var(--sage-soft);color:var(--sage)}
.gap.added .gap-add{background:var(--sage-soft);color:var(--sage)}

/* Something somebody else added while you were not looking. */
.item.is-new{box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.3)}
.item-new{
  display:inline-block;margin-top:3px;padding:2px 7px;border-radius:999px;
  background:var(--amber);color:#241608;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}

/* The Sunday message: a thing to open, not a line to read. */
.msg-plan{
  display:grid;grid-template-columns:38px 1fr 15px;align-items:center;gap:12px;
  width:100%;max-width:300px;padding:12px 13px;margin-bottom:4px;
  border-radius:16px;text-align:left;
  background:radial-gradient(120% 100% at 0% 0%,rgba(240,169,76,.16),transparent 62%),
    var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(240,169,76,.22);
}
.msg-plan:active{transform:scale(.985)}
.msg-plan-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--amber-soft);color:var(--amber)}
.msg-plan-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.msg-plan-text{min-width:0;display:block}
.msg-plan-title{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.msg-plan-sub{display:block;margin-top:2px;font-size:12px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-plan-go{width:15px;height:15px;fill:none;stroke:var(--hint);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── in-app alerts ───────────────────────────────────────────── */
/* Above everything: sheet 300, working 320, toast 340. An alert that a modal
   could hide would be no alert at all.

   Glass rather than a flat panel, because it is standing over your work rather
   than replacing it, and you should be able to tell. The colour it borrows —
   amber for a message, clay for a call, sage for a game — is the only thing
   that changes between them, so the shape stays learnable while the glance
   tells you what kind of thing arrived before you have read a word. */
.heads{
  position:fixed;left:0;right:0;top:0;z-index:400;
  padding:calc(var(--safe-t) + 8px) 10px 0;
  pointer-events:none;
}
.heads-card{
  --accent:var(--amber);
  --accent-soft:rgba(240,169,76,.18);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:42px 1fr 16px;align-items:center;
  column-gap:13px;
  width:100%;max-width:520px;margin:0 auto;padding:13px 15px 17px;
  border-radius:20px;text-align:left;pointer-events:auto;
  background:rgba(33,27,25,.82);
  /* Glass. On a WebView without it the flat ground above still reads properly. */
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:
    0 24px 48px -20px rgba(0,0,0,.92),
    0 2px 10px -4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(248,242,233,.10),
    inset 0 0 0 1px rgba(248,242,233,.055);
  transform:translateY(calc(-100% - var(--safe-t) - 24px)) scale(.97);
  opacity:0;
  /* A touch of overshoot on the way in: it lands rather than stops. */
  transition:transform .42s cubic-bezier(.16,1.08,.3,1),opacity .22s ease;
}
.heads.in .heads-card{transform:translateY(0) scale(1);opacity:1}
.heads-card:active{transform:translateY(0) scale(.985)}

/* The accent, as light coming off the face rather than a stripe drawn on. */
.heads-glow{
  position:absolute;left:-10px;top:-30px;width:150px;height:120px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-soft),transparent 72%);
}
.heads-card[data-tone="call"]{--accent:var(--clay);--accent-soft:rgba(224,122,95,.20)}
.heads-card[data-tone="game"]{--accent:var(--sage);--accent-soft:rgba(143,174,136,.20)}

.heads-face{position:relative;width:42px;height:42px}
.heads-ico{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  /* A hairline ring picks the face up off the glass. */
  box-shadow:inset 0 0 0 1.5px rgba(248,242,233,.12);
}
.heads-ico .av{width:42px;height:42px;font-size:15px}
.heads-ico.mark{background:var(--accent-soft);color:var(--accent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
.heads-ico.mark svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* What kind of thing it is, on the corner of the face. */
.heads-badge{
  position:absolute;right:-2px;bottom:-2px;
  display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:#241C19;
  box-shadow:0 0 0 2.5px rgba(33,27,25,.92);
}
.heads-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.heads-text{min-width:0}
.heads-head{display:flex;align-items:baseline;gap:8px;min-width:0}
.heads-title{
  flex:1 1 auto;min-width:0;
  font-size:14.5px;font-weight:650;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* One word for the kind, in its colour — read at a glance, ignored otherwise. */
.heads-kind{
  flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);opacity:.92;
}
.heads-kind:empty{display:none}
.heads-body{
  display:-webkit-box;margin-top:2px;
  font-size:13.5px;line-height:1.35;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;
}

/* It opens something, so it should look like it does. */
.heads-go{
  display:grid;place-items:center;width:16px;height:16px;
  color:var(--hint);
}
.heads-go svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* How long it has left, drawn rather than guessed at. */
.heads-time{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(248,242,233,.05);
}
.heads-time i{
  display:block;width:100%;height:100%;transform-origin:left center;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 55%,transparent),var(--accent));
}

.heads-grip{
  position:absolute;left:50%;bottom:8px;width:28px;height:3px;margin-left:-14px;
  border-radius:99px;background:rgba(248,242,233,.13);
}

/* A second one landing while the first is still up swaps its words instead of
   sliding the whole card away and back — the movement is what is distracting,
   not the card. */
@keyframes heads-swap{
  0%{opacity:1;transform:translateY(0)}
  40%{opacity:0;transform:translateY(-5px)}
  41%{opacity:0;transform:translateY(5px)}
  100%{opacity:1;transform:translateY(0)}
}
.heads-card.swap .heads-face,
.heads-card.swap .heads-text{animation:heads-swap .34s ease both}

@media (prefers-reduced-motion:reduce){
  .heads-card{transition:opacity .2s ease;transform:none;opacity:0}
  .heads.in .heads-card{transform:none;opacity:1}
  .heads-card:active{transform:none}
  .heads-card.swap .heads-face,.heads-card.swap .heads-text{animation:none}
  .heads-time i{transition:none!important}
}

/* ── settings ────────────────────────────────────────────────────
   Grouped cards rather than one long list. The point of the shape is that a
   caption tells you what a group is about, and every row carries its current
   value on the right — so the page can be read without tapping anything, which
   is what people mostly come to settings to do. */
.set-hero{
  display:grid;grid-template-columns:64px 1fr 16px;align-items:center;gap:14px;
  width:100%;text-align:left;padding:16px 16px 17px;margin-bottom:22px;
  border-radius:22px;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(240,169,76,.13),transparent 62%),
    var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.06),0 14px 30px -24px rgba(0,0,0,.9);
  transition:transform .14s ease;
}
.set-hero:active{transform:scale(.99)}
.set-hero-text{min-width:0;display:block}
.set-hero-name{
  display:block;font-family:var(--display);font-size:21px;font-weight:600;
  letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.set-hero-sub{display:block;margin-top:2px;font-size:13px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-hero-fam{display:block;margin-top:7px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--amber);opacity:.9}

.set-cap{
  margin:0 0 9px 15px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
.set-card{
  border-radius:18px;overflow:hidden;margin-bottom:22px;background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055),0 10px 24px -22px rgba(0,0,0,.9);
}
.set-card:last-of-type{margin-bottom:14px}
/* Four columns, always — the value column stays even when it is empty, or the
   chevron drops onto a line of its own the moment a row has something to show. */
.set-row{
  position:relative;display:grid;grid-template-columns:34px 1fr auto 15px;
  align-items:center;gap:13px;width:100%;padding:13px 15px;text-align:left;
  transition:background .14s ease;
}
/* The divider starts where the words start, not at the edge — it separates the
   rows without drawing a line through the icons. */
.set-row + .set-row::before{
  content:'';position:absolute;left:62px;right:0;top:0;height:1px;
  background:var(--line);
}
.set-row:active{background:var(--surface-2)}
.set-row[disabled]{opacity:.55}
.set-ico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--surface-3);color:var(--muted);
}
.set-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.set-ico.amber{background:var(--amber-soft);color:var(--amber)}
.set-ico.sage{background:var(--sage-soft);color:var(--sage)}
.set-ico.clay{background:rgba(224,122,95,.16);color:var(--clay)}
.set-text{min-width:0;display:block}
.set-label{display:block;font-size:15px;font-weight:550;letter-spacing:-.008em}
.set-hint{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--faint)}
.set-val{
  justify-self:end;max-width:42vw;font-size:13.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.set-go{width:15px;height:15px;fill:none;stroke:var(--hint);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.set-val:empty{display:none}

.set-row.danger .set-ico{background:rgba(224,122,95,.15);color:var(--clay)}
.set-row.danger .set-label{color:var(--clay)}

/* The picker sheet reuses the row, with a tick instead of a chevron. */
.set-card-pick{margin:14px 0 0}
.set-row.pick{grid-template-columns:1fr 20px;gap:10px}
.set-row.pick .set-tick{width:19px;height:19px;fill:none;stroke:var(--amber);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;
  transition:opacity .15s ease}
.set-row.pick.is-on .set-tick{opacity:1}
.set-row.pick.is-on .set-label{color:var(--amber)}
.set-row.pick + .set-row.pick::before{left:0}

.set-foot{
  margin:6px 0 10px;text-align:center;font-size:11.5px;color:var(--hint);
  letter-spacing:.02em;
}

/* ── the chime switch ────────────────────────────────────────── */
.sound-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.sw{
  flex:0 0 auto;width:50px;height:30px;border-radius:999px;padding:3px;
  background:var(--surface-3);transition:background .2s ease;
}
.sw i{
  display:block;width:24px;height:24px;border-radius:50%;background:var(--faint);
  transition:transform .22s cubic-bezier(.2,.9,.3,1),background .2s ease;
}
.sw.on{background:linear-gradient(135deg,#F6B863,var(--amber))}
.sw.on i{transform:translateX(20px);background:#241608}
.sound-label{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--muted)}

/* ── lesson diagrams ─────────────────────────────────────────── */
.dia{margin-top:16px}
.dia.coords{
  display:grid;grid-template-columns:18px 1fr;grid-template-rows:1fr 18px auto;
  grid-template-areas:'ranks stage' '. files' 'cap cap';
  gap:2px;align-items:stretch;
}
/* The rank gutter has to be as tall as the board or the numbers bunch up in
   the middle instead of standing beside their own rank. */
.dia-ranks{height:100%}
.dia-stage{grid-area:stage;position:relative}
.dia-board{
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  aspect-ratio:1;width:100%;position:relative;
  border-radius:9px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 3px 9px rgba(0,0,0,.45);
}
.dia-sq{position:relative;display:grid;place-items:center;min-width:0;min-height:0}
.dia-sq.light{background:linear-gradient(160deg,#8E9B83,#7A8770)}
.dia-sq.dark{background:linear-gradient(160deg,#3E4E3A,#33412F)}
.dia-sq.mark{box-shadow:inset 0 0 0 3px var(--amber), inset 0 0 0 100px rgba(240,169,76,.22)}
.dia-sq img{width:100%;height:100%;object-fit:contain;display:block;
  min-width:0;min-height:0;pointer-events:none}
.dia-name{
  position:absolute;z-index:2;left:50%;bottom:3px;transform:translateX(-50%);
  padding:1px 5px;border-radius:5px;font-size:9.5px;font-weight:800;
  letter-spacing:.03em;background:var(--amber);color:#241608;
  box-shadow:0 1px 4px rgba(0,0,0,.55);
}
.dia-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dia-arrows line{stroke:#F0A94C;stroke-width:2.2;stroke-linecap:round;opacity:.95}
.dia-arrows path{fill:#F0A94C}
.dia-fly{position:absolute;z-index:3;object-fit:contain;pointer-events:none;
  transition:transform .44s cubic-bezier(.3,.9,.35,1)}
.dia-files{grid-area:files;display:grid;grid-template-columns:repeat(8,1fr);
  text-align:center;font-size:10.5px;font-weight:700;color:var(--faint)}
.dia-ranks{grid-area:ranks;display:grid;grid-template-rows:repeat(8,1fr);
  align-items:center;justify-items:center;font-size:10.5px;font-weight:700;
  color:var(--faint)}
.dia-cap{grid-area:cap;margin:11px 0 0;font-size:13.5px;line-height:1.55;
  color:var(--muted)}
.dia-step{margin:12px 2px 0;min-height:20px;font-size:13.5px;font-weight:600;
  color:var(--amber)}

/* ── lesson pictures ─────────────────────────────────────────── */
.les-art{margin:14px 0 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.les-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── setting the board out yourself ──────────────────────────── */
.dia.arr .dia-sq{cursor:pointer}
.dia-sq.fixed{opacity:.96}
.dia-sq.open{box-shadow:inset 0 0 0 2px rgba(240,169,76,.55)}
.dia-sq.wrong{box-shadow:inset 0 0 0 3px #E07A5F, inset 0 0 0 100px rgba(224,122,95,.26)}
.arr-tray{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;min-height:54px;
  padding:9px;border-radius:var(--r-md);background:var(--surface);
  border:1px dashed var(--line-2);align-content:flex-start}
.arr-piece{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);transition:transform .16s ease,box-shadow .16s ease}
.arr-piece:active{transform:scale(.94)}
.arr-piece.held{box-shadow:inset 0 0 0 2px var(--amber);background:var(--amber-soft)}
.arr-piece img{width:100%;height:100%;object-fit:contain;min-width:0;min-height:0}
.arr-piece .man{width:70%;height:70%}
.arr-empty{align-self:center;padding:0 8px;font-size:12.5px;color:var(--faint)}
.arr-note{margin:11px 2px 0;min-height:20px;font-size:13.5px;font-weight:600;
  color:var(--faint)}
.arr-note.bad{color:#F0937A}

/* the step bar doubles as a way back */
.step-bar i.back{cursor:pointer}
.step-bar i.back:active{background:var(--amber)}

/* four in a row, as a diagram */
.dia-c4{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:7px;
  border-radius:12px;background:linear-gradient(160deg,#2B3A46,#22303A)}
.dia-hole{aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.42);
  display:grid;place-items:center;min-width:0}
.dia-hole.mark{box-shadow:inset 0 0 0 2px var(--amber)}
.dia-disc{width:86%;height:86%;border-radius:50%}
.dia-disc.mine{background:linear-gradient(150deg,#F6B863,#E28F4A)}
.dia-disc.theirs{background:linear-gradient(150deg,#7C8B96,#5C6A74)}

/* a game waiting on you, said on the door itself */
.door.waiting{box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.45)}
.door.waiting .door-sub{color:var(--amber);font-weight:600}
.door-pip{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  background:linear-gradient(135deg,#F6B863,var(--amber));color:#241608;
}

/* ── calls ───────────────────────────────────────────────────── */
.call-btn{color:var(--muted)}
.call-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Above the in-app alert: a call is the one thing that outranks everything. */
.call{position:fixed;inset:0;z-index:500;background:var(--bg);
  display:grid;grid-template-rows:1fr auto}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#0C0A09;opacity:0;transition:opacity .3s ease}
.call.video .call-remote{opacity:1}
.call-local{position:absolute;right:14px;width:108px;height:150px;
  top:calc(var(--safe-t) + 14px);
  border-radius:16px;object-fit:cover;background:#161211;z-index:2;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9),inset 0 0 0 1px rgba(248,242,233,.1)}
.call:not(.video) .call-local{display:none}

.call-sheet{grid-row:1 / -1;position:relative;z-index:3;
  display:grid;align-content:space-between;justify-items:center;
  padding:calc(var(--safe-t) + 56px) 20px calc(var(--safe-b) + 40px)}
.call-who{display:grid;justify-items:center;gap:12px;text-align:center}
.call.video .call-who{
  align-self:start;padding:10px 16px;border-radius:20px;
  background:rgba(20,17,16,.6);backdrop-filter:blur(8px)}
.call.video .call-who .av{display:none}
.av-xl{width:104px;height:104px;font-size:34px}
.call-name{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.call-state{font-size:14px;color:var(--faint);letter-spacing:.02em}
.call.video .call-name{font-size:18px}

.call-acts{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.call-key{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),background .18s ease}
.call-key:active{transform:scale(.92)}
.call-key svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.call-key.on{background:var(--ink);color:#1A1514}
.call-key.take{background:linear-gradient(150deg,#9ec293,var(--sage));color:#14210F}
.call-key.drop{background:linear-gradient(150deg,#EE8F73,var(--clay));color:#2A1512}
.call-key.drop svg{transform:rotate(135deg)}

/* ── conversations ───────────────────────────────────────────── */
.thread-list{flex:1;min-height:0;overflow-y:auto;padding:4px 0 18px}
/* Flat rows separated by a hairline, the way every messaging app settled on —
   cards with their own shadow make a list of six look like a list of sixty. */
.thread-row{
  display:grid;grid-template-columns:50px 1fr auto;align-items:center;
  column-gap:13px;width:100%;padding:11px 18px;text-align:left;
  background:none;box-shadow:none;border-radius:0;
  transition:background .16s ease;
}
.thread-row + .thread-row{box-shadow:inset 0 1px 0 var(--line)}
.thread-row:active{background:var(--surface)}
.thread-row .av{width:50px;height:50px;font-size:18px}
.thread-house{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber-soft);color:var(--amber)}
.thread-house svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.thread-text{min-width:0}
.thread-top{display:flex;align-items:baseline;gap:8px}
.thread-name{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-when{flex:0 0 auto;font-size:12px;font-weight:500;color:var(--hint)}
.thread-last{margin-top:3px;font-size:14px;line-height:1.35;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-row.unread .thread-name{font-weight:700}
.thread-row.unread .thread-last{color:var(--muted);font-weight:500}
.thread-row.unread .thread-when{color:var(--amber);font-weight:600}
.thread-pip{min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;
  background:var(--amber);color:#241608}

/* a message you are reading in your own language */
/* Under a translated message: hear it, or see what was actually written. */
.bub-under{display:flex;align-items:center;gap:7px;align-self:flex-start;margin-top:5px}
.msg.mine .bub-under{align-self:flex-end;flex-direction:row-reverse}
.bub-under .said-play{width:26px;height:26px}
.bub-under .said-play svg{width:12px;height:12px}
.bub-orig{padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--surface-2);color:var(--faint)}
.bubble.is-orig{opacity:.85;font-style:italic}
.said-again{display:flex;align-items:center;gap:10px;margin-top:6px;padding:9px 12px;
  border-radius:14px;background:var(--surface-2);max-width:88%}
.said-play{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;
  place-items:center;background:var(--amber-soft);color:var(--amber)}
.said-play svg{width:14px;height:14px;fill:currentColor;stroke:none}
.said-play.busy{background:var(--amber);color:#241608}
.said-words{font-size:14px;line-height:1.4;color:var(--muted)}
/* The code, set like a little pressed tile rather than a grey label. */
.tongue-tag{
  flex:0 0 auto;width:38px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;letter-spacing:.05em;
  background:linear-gradient(160deg,var(--surface-3),var(--surface-2));
  color:var(--faint);
  box-shadow:inset 0 1px 0 rgba(248,242,233,.06),inset 0 0 0 1px rgba(248,242,233,.05);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.set-row.tongue{grid-template-columns:38px 1fr 20px;gap:13px}
.set-row.tongue.is-on .tongue-tag{
  background:linear-gradient(160deg,#F6B863,var(--amber));color:#241608;
  box-shadow:0 6px 14px -8px rgba(240,169,76,.8);
}
.set-card-pick.tongues{max-height:none}

.tongue-tick{width:18px;height:18px;fill:none;stroke:var(--amber);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.chat-back{margin-right:-4px;color:var(--muted)}
.chat-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* what they are saying, as they say it */
.call-caption{
  position:absolute;left:14px;right:14px;bottom:calc(var(--safe-b) + 150px);z-index:4;
  padding:14px 16px;border-radius:18px;text-align:center;
  font-size:17px;line-height:1.4;
  background:rgba(20,17,16,.82);backdrop-filter:blur(10px);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.9),inset 0 0 0 1px rgba(240,169,76,.2);
}

/* a call, written into the conversation */
.call-log{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:16px;
  background:var(--surface-2);font-size:14px;color:var(--muted)}
.call-log svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.call-log.missed{color:#F0937A}
.call-log.missed svg{transform:rotate(135deg)}
.call-log b{font-weight:600;color:var(--ink)}
.lang-note{margin-top:5px;font-size:10px;line-height:1.3;color:var(--hint)}

/* ── letters an English keyboard has not got ──────────────────────
   Small to look at, large to hit. The chip is 30px because a row of big grey
   squares above the message box looks like a mistake; the thing your thumb
   actually lands on is 44px, spread around it and invisible. Shrinking the
   target and shrinking the button are not the same decision. */
/* Wrapped, not scrolled. The press is taken on pointerdown so the keyboard
   never drops — which means a sideways drag on a scrolling row would insert a
   letter instead of scrolling it. Ewe has thirteen of these; two short rows
   are easier to hit than one you have to drag. */
.extra-keys{
  display:flex;flex-wrap:wrap;gap:9px;
  padding:9px 4px 3px;
}
.extra-key{
  position:relative;flex:0 0 auto;
  width:31px;height:31px;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--surface-3),var(--surface-2));
  color:var(--ink);
  box-shadow:0 1px 0 rgba(248,242,233,.07) inset,
             0 2px 5px -3px rgba(0,0,0,.7),
             0 0 0 1px rgba(248,242,233,.05);
  transition:transform .13s cubic-bezier(.2,.9,.3,1),
             background .18s ease,box-shadow .18s ease;
  animation:xkey-in .3s cubic-bezier(.16,1.1,.3,1) both;
  -webkit-tap-highlight-color:transparent;
}
/* The part your thumb hits, which is nearly half again as wide as the key. */
.extra-key::before{
  content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:14px;
}
.extra-glyph{
  font-size:16px;line-height:1;font-weight:550;
  /* ɛ and ɔ sit low in most faces; nudged so they look centred rather than
     measured as centred. */
  transform:translateY(-.5px);
  pointer-events:none;
}
.extra-key:active{transform:translateY(1px) scale(.94)}

/* The flash on a press — proof the letter went in, since the row itself does
   not move and the caret is somewhere you are not looking. */
@keyframes xkey-hit{
  0%  {transform:scale(.9);  background:var(--amber);color:#241608}
  55% {transform:scale(1.14);background:var(--amber);color:#241608}
  100%{transform:scale(1)}
}
.extra-key.hit{animation:xkey-hit .3s cubic-bezier(.2,.9,.3,1)}

@keyframes xkey-in{
  from{opacity:0;transform:translateY(6px) scale(.8)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .extra-key{animation:none}
  .extra-key.hit{animation:none;background:var(--amber);color:#241608}
}
.sheet-panel{touch-action:pan-y}

/* a button that is fetching says so, rather than looking dead */
.said-play.waiting{background:var(--amber-soft)}
.said-play.waiting svg{opacity:0}
.said-play.waiting::after{
  content:'';position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(240,169,76,.3);border-top-color:var(--amber);
  animation:spin .7s linear infinite;
}
.said-play{position:relative}
@keyframes spin{to{transform:rotate(360deg)}}

/* A way out of the gate for somebody who has arrived without an account. */
.gate-about{
  display:block;margin-top:18px;text-align:center;
  color:var(--faint);font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;
}
.gate-about:active{color:var(--ink)}

/* ── Stack, Bricks, Racer, Jam ───────────────────────────────────
   The arcade four. Each is a canvas in a box that takes the gesture itself,
   because a finger that lands on the frame was still aiming at the game. */
.twr-wrap,.brk-wrap,.rcr-wrap{
  position:relative;width:100%;height:min(62vh,470px);border-radius:20px;
  overflow:hidden;display:grid;place-items:center;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.07), 0 16px 36px -26px rgba(0,0,0,.9);
}
.twr-wrap{background:linear-gradient(180deg,#1A1512,#0E0B0A)}
.brk-wrap{background:#141A1E}
.rcr-wrap{background:#101418}
.twr-canvas,.brk-canvas,.rcr-canvas{display:block;touch-action:none}
.twr-canvas.shake,.brk-canvas.shake,.rcr-canvas.shake{animation:shake .3s}
/* A dead-centre drop is worth a flash of acknowledgement. */
.twr-canvas.twr-true{animation:twr-true .22s ease-out}
@keyframes twr-true{
  0%{filter:brightness(1)}40%{filter:brightness(1.35)}100%{filter:brightness(1)}
}

/* ── Jam ─────────────────────────────────────────────────────────
   Elements on a grid rather than a drawn picture: a car you can actually pick
   up is easier to get right than one you have to hit-test. */
.jam-board{
  position:relative;width:100%;max-width:420px;margin:14px auto 0;aspect-ratio:1;
  border-radius:18px;background:#14100E;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.08), 0 16px 36px -26px rgba(0,0,0,.9);
}
.jam-grid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);
}
.jam-grid i{box-shadow:inset 0 0 0 1px rgba(248,242,233,.045)}
/* The way out. */
.jam-door{
  position:absolute;right:-3px;width:6px;height:calc(100% / 6);
  background:linear-gradient(180deg,var(--amber-2,#F8CE8A),var(--amber,#F0A94C));
  border-radius:3px;box-shadow:0 0 14px rgba(240,169,76,.7);
}
.jam-car{
  position:absolute;padding:3px;box-sizing:border-box;touch-action:none;cursor:grab;
  transition:transform .12s ease-out;
}
.jam-car::after{
  content:'';position:absolute;inset:3px;border-radius:7px;
  background:linear-gradient(160deg,#6E6156,#4A4038);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 10px -4px rgba(0,0,0,.8);
}
.jam-car.mine::after{
  background:linear-gradient(160deg,#F8CE8A,#E0913A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -4px rgba(240,169,76,.5);
}
.jam-car.held{z-index:3;transition:none;cursor:grabbing}
.jam-car.held::after{filter:brightness(1.12)}
.jam-car.out::after{animation:jam-out .5s ease-in forwards}
@keyframes jam-out{to{transform:translateX(60%);opacity:0}}

/* ── Growth: bills, numbers, between us ──────────────────────────
   Three cards in the same hand as the habit card above them: what it is on the
   left, the number that matters on the right, and the action underneath where
   a thumb already is. */
.bil,.num,.iou{
  margin-top:12px;padding:16px 18px;border-radius:18px;background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055);
}
.bil.soon{box-shadow:inset 0 0 0 1px rgba(240,169,76,.32)}
.bil.late{box-shadow:inset 0 0 0 1px rgba(224,122,95,.5)}
.bil-top,.num-top{display:flex;align-items:flex-start;gap:14px}
.bil-text,.num-text{flex:1;min-width:0}
.bil-title,.num-title,.iou-title{
  font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.02em;
}
.bil-sub,.num-sub,.iou-sub{margin-top:3px;font-size:12.5px;color:var(--faint);line-height:1.4}
.bil-amt,.iou-amt{
  flex:0 0 auto;font-family:var(--display);font-size:19px;font-weight:600;color:var(--amber);
}
.bil-when{margin-top:10px;font-size:13px;color:var(--muted)}
.bil-due.bad{color:var(--clay,#E07A5F);font-weight:600}
.bil-acts{display:flex;gap:8px;margin-top:13px}
.bil-last{margin-top:10px;font-size:12px;color:var(--hint)}

/* The reading now, big, because it is the only thing most people open this
   screen to see. */
.num-now{flex:0 0 auto;display:flex;align-items:baseline;gap:4px}
.num-now b{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em}
.num-unit{font-size:13px;color:var(--faint)}
.num-change{margin-top:8px;font-size:13px;color:var(--muted)}
.num-change.good{color:var(--sage,#8FAE88)}
.num-change.bad{color:var(--clay,#E07A5F)}
.num-hint{margin:10px 0 0;font-size:12.5px;color:var(--hint)}
.num-spark{margin-top:12px;height:34px;color:var(--amber)}
.num-spark svg{width:100%;height:100%;display:block;overflow:visible}
.num-ends{display:flex;justify-content:space-between;margin-top:4px;
  font-size:11px;color:var(--hint)}

.iou{display:flex;align-items:center;gap:12px}
.iou-text{flex:1;min-width:0}
.iou-net{
  margin-top:12px;padding:14px 18px;border-radius:18px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.05);
}
.iou-net-row{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:5px 0;font-size:14px}
.iou-net-row b{font-family:var(--display);font-size:17px;font-weight:600}
.iou-net-row.good b{color:var(--sage,#8FAE88)}
.iou-net-row.bad b{color:var(--clay,#E07A5F)}

/* ── the recipe, and being shown how ─────────────────────────────── */
.rcp-dish{margin:0 0 4px;font-family:var(--display);font-size:26px;font-weight:600;
  letter-spacing:-.03em;line-height:1.1}
.rcp-cap{margin:22px 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber)}
.rcp-list{border-radius:18px;background:var(--surface);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055)}
.rcp-item{display:flex;align-items:center;gap:13px;padding:11px 15px;
  font-size:15.5px;border-bottom:1px solid rgba(248,242,233,.05)}
.rcp-item:last-child{border-bottom:0}
/* The kitchen's own icon treatment, so the same onion looks the same here. */
.rcp-ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--amber-soft,rgba(240,169,76,.13));color:var(--amber,#F0A94C);
  box-shadow:inset 0 0 0 1px rgba(240,169,76,.2);
}
.rcp-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.rcp-what{flex:1;min-width:0;font-weight:600;letter-spacing:-.01em}
.rcp-qty{flex:0 0 auto;color:var(--faint);font-size:13.5px;font-variant-numeric:tabular-nums}

/* The finished dish, at the top. */
.rcp-cover{position:relative;margin:14px 0 0;border-radius:20px;overflow:hidden;
  aspect-ratio:16/10;background:#14100E;opacity:0;transform:scale(.99);
  transition:opacity .6s ease,transform .6s var(--ease,cubic-bezier(.16,1,.3,1));
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.07),0 18px 40px -28px rgba(0,0,0,.9)}
.rcp-cover.in{opacity:1;transform:none}
.rcp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rcp-cover-fade{position:absolute;inset:auto 0 0;height:45%;
  background:linear-gradient(180deg,transparent,rgba(11,9,8,.5))}

/* Three facts, as pills you read in one glance. */
.rcp-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rcp-fact{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:var(--surface);font-size:13px;color:var(--muted);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.06)}
.rcp-fact svg{width:15px;height:15px;fill:none;stroke:var(--amber,#F0A94C);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Nothing written yet: an offer, not a form. */
.rcp-empty{text-align:center;padding:6px 0 0}
.rcp-empty-art{width:100%;max-width:260px;margin:10px auto 20px;border-radius:22px;
  display:block;box-shadow:0 22px 44px -30px rgba(0,0,0,.95)}
.rcp-empty-lead{margin:0;font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.02em}
.rcp-empty-sub{margin:8px auto 22px;max-width:30em;font-size:14px;line-height:1.55;
  color:var(--faint)}
.rcp-method{margin:0;font-size:15px;line-height:1.65;color:var(--muted);white-space:pre-wrap}

/* The picture for the step you are on. It pushes in slowly while you read, so
   the screen is alive without anything actually moving under your hands. */
.stp-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;
  overflow:hidden;background:#14100E;
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.07)}
.stp-art{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);
  transition:opacity .6s ease}
.stp-art.in{opacity:1;animation:stp-push 14s ease-out forwards}
@keyframes stp-push{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.stp-wait{position:absolute;inset:0;display:grid;place-items:center;
  font-size:13px;color:var(--hint)}
.stp-bar{height:3px;margin-top:14px;border-radius:2px;background:rgba(248,242,233,.08);
  overflow:hidden}
.stp-bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--amber-2,#F8CE8A),var(--amber,#F0A94C));
  transition:width .4s cubic-bezier(.2,.7,.3,1)}
.stp-count{margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber)}
.stp-do{margin:8px 0 0;font-family:var(--display);font-size:24px;font-weight:600;
  letter-spacing:-.025em;line-height:1.22}
.stp-why{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.stp-timer{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;
  border-radius:16px;background:var(--surface);font-size:14px;color:var(--muted);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.055)}
.stp-clock{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink)}
.stp-acts{display:flex;gap:10px;margin-top:18px}
.stp-acts .btn{flex:1}
.stp-say{margin-top:10px}

/* ── where a meal has got to ─────────────────────────────────────
   One mark in the corner of the row, in four states. Colour carries the
   meaning and the icon repeats it, because a green dot and a red dot are the
   same dot to a good number of people. */
.mealmark{
  flex:0 0 auto;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  border:0;cursor:pointer;background:rgba(248,242,233,.06);color:var(--faint);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.08);
  transition:transform .16s ease,background .2s ease,color .2s ease;
}
.mealmark:active{transform:scale(.93)}
.mealmark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.mealmark.done{background:rgba(143,174,136,.16);color:var(--sage,#8FAE88);
  box-shadow:inset 0 0 0 1px rgba(143,174,136,.35)}
.mealmark.doing{background:var(--amber-soft,rgba(240,169,76,.14));color:var(--amber,#F0A94C);
  box-shadow:inset 0 0 0 1px rgba(240,169,76,.38)}
/* Cooking now is the only one that moves: it is the only one still happening. */
.mealmark.doing svg{animation:mark-steam 2.4s ease-in-out infinite}
@keyframes mark-steam{0%,100%{opacity:.75}50%{opacity:1}}
.mealmark.cant{background:rgba(224,122,95,.14);color:var(--clay,#E07A5F);
  box-shadow:inset 0 0 0 1px rgba(224,122,95,.32)}

/* Saying which one it is. */
.mark-pick{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.mark-opt{
  flex:1 1 46%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 12px;border-radius:16px;border:0;cursor:pointer;font:inherit;
  font-size:14px;font-weight:600;background:var(--surface-2);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(248,242,233,.08);
  transition:transform .16s ease,box-shadow .2s ease;
}
.mark-opt:active{transform:scale(.98)}
.mark-opt svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.mark-opt.done.is-on{box-shadow:inset 0 0 0 1.5px rgba(143,174,136,.6)}
.mark-opt.doing.is-on{box-shadow:inset 0 0 0 1.5px rgba(240,169,76,.6)}
.mark-opt.cant.is-on{box-shadow:inset 0 0 0 1.5px rgba(224,122,95,.6)}
.mark-opt.done svg{color:var(--sage,#8FAE88)}
.mark-opt.doing svg{color:var(--amber,#F0A94C)}
.mark-opt.cant svg{color:var(--clay,#E07A5F)}

/* A settled turn shows the one name and stops pretending to be a choice. */
.chiprow.locked .chip{opacity:.9}
.chiprow.locked .chip.is-on{box-shadow:inset 0 0 0 1px rgba(240,169,76,.4)}

/* "What does that even look like?" */
.rcp-look{
  flex:0 0 auto;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  border:0;cursor:pointer;background:rgba(248,242,233,.05);color:var(--faint);
  transition:color .2s ease,background .2s ease;
}
.rcp-look:hover{color:var(--amber,#F0A94C);background:var(--amber-soft,rgba(240,169,76,.13))}
.rcp-look svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ── block, report, terms ── */
.rpt-reasons{display:flex;flex-wrap:wrap;gap:8px}
.rpt-note{min-height:84px}
.rpt-block{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;color:var(--ink)}
.rpt-block input{width:20px;height:20px;margin:0;accent-color:var(--clay)}
.terms-links{margin-top:14px}
.terms-links a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.fam-act.is-blocked svg{stroke:var(--clay)}