/* ══════════════════════════════════════════════════════════════════════════
   my neighbourhood — the product's surface.
   Three layers, in the order they were decided:
     1. the structure of direction D (two rhythms), authored at device pixels
     2. the corrective pass — a class reads as different paper from an
        occasion; the schedule stacks above the title when width demands it
     3. the visual rebuild — colour lives inside the artwork, the card around
        it stays light; Nunito for headings, Nunito Sans for reading, Kalam
        for the greeting alone. No grain, no distressing, one radius.
   Type floor: 12.5px for tracked labels, 14px for any fact, 15.5px body,
   multiplied by --tx when the resident enlarges text.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* structure */
  --cream:#FAF0E3; --paper:#F6DEBC; --soft:#FFF9F0; --white:#FFFDF9;
  --forest:#1B4335; --forest-2:#2C5A48; --ink:#121311; --muted:#5C5D5A;
  --ember:#CE5910; --ember-text:#9B3F0B; --ochre:#C88A0A; --ochre-text:#775300;
  --plum:#66437C; --sand:#D4B28D; --line:#E4CDAC; --error:#9F2D2D; --myred:#C8380D;
  --tx:1;
  --f-lab:calc(12.5px * var(--tx)); --f-sm:calc(14px * var(--tx));
  --f-md:calc(15.5px * var(--tx)); --f-lg:calc(17px * var(--tx));
  --f-ttl:calc(20px * var(--tx)); --f-big:calc(26px * var(--tx));
  /* the rebuild overrides what it replaces */
  --ivory:#FAF5EC; --card:#FFFFFF; --edge:#EFE7DA;
  --ink:#26262C; --ink-2:#4A4A53; --muted:#6B6B73;
  --tang:#B84214; --tang-b:#FF8A4C; --forest:#2E7A52; --plum:#6B5BA8;
  --display:'Nunito',ui-rounded,system-ui,sans-serif;
  --sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Nunito',ui-rounded,system-ui,sans-serif;
  --hand:'Kalam','Segoe Print',cursive;
  --r:20px;
  --shadow:0 1px 2px rgba(47,47,54,.05),0 10px 24px -14px rgba(47,47,54,.42);
  --shadow-h:0 2px 4px rgba(47,47,54,.07),0 14px 30px -14px rgba(47,47,54,.5);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ivory);color:var(--ink);
  font:400 var(--f-md)/1.5 var(--sans);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}

/* On a phone the product IS the viewport. On a desk it sits in a column of
   the same width, because every size on screen was measured at 390px. */
.phone{position:fixed;inset:0;margin:0 auto;width:100%;max-width:430px;
  background:var(--ivory);display:flex;flex-direction:column;overflow:hidden;
  font:400 var(--f-md)/1.5 var(--sans);color:var(--ink)}
@media(min-width:640px){
  body{background:#F1EADC}
  .phone{inset:auto;position:relative;height:100dvh;max-width:412px;
    border-left:1px solid var(--edge);border-right:1px solid var(--edge)}
}

/* ── layer 1 · structure ────────────────────────────────────────────── */
.phone *{box-sizing:border-box}
.phone button{font-family:inherit}
.phone :focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* app header */
.ph-top{flex:0 0 auto;padding:14px 16px 10px;border-bottom:1px solid var(--line);background:var(--cream)}
.ph-top .row{display:flex;align-items:center;gap:10px}
.loc{flex:1;min-width:0;background:none;border:none;padding:4px 2px;text-align:left;cursor:pointer;min-height:40px}
.loc b{display:block;font:600 var(--f-lg)/1.25 var(--sans);color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc span{display:block;font:400 var(--f-lab)/1.35 var(--sans);color:var(--muted)}
.loc b::after{content:' ▾';font-size:.8em;color:var(--muted)}
.hbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;
  background:var(--soft);border:1px solid var(--sand);border-radius:999px;font:600 var(--f-sm)/1.2 var(--sans);
  color:var(--forest);cursor:pointer}
.hbtn:hover{border-color:var(--forest)}
.hbtn svg{flex:0 0 auto}

/* back row on inner screens */
.ph-back{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);
  background:var(--cream)}
.backb{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 12px 6px 8px;background:none;border:none;
  font:600 var(--f-sm)/1.3 var(--sans);color:var(--forest);cursor:pointer;border-radius:8px}
.backb:hover{background:var(--soft)}
.ph-back .ttl{font:600 var(--f-sm)/1.3 var(--sans);color:var(--muted);margin-left:auto;padding-right:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}

/* the one scrolling canvas */
.ph-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:0 16px;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.ph-body{scroll-behavior:auto}}
.ph-body::-webkit-scrollbar{width:0}
.pad{height:16px}

/* section heads */
.sec{display:flex;align-items:baseline;gap:10px;margin:14px 0 9px}
.sec h2{font:400 var(--f-big)/1.15 var(--serif);margin:0;letter-spacing:-.2px;color:var(--ink);flex:1;min-width:0}
.sec .all{flex:0 0 auto;background:none;border:none;padding:8px 2px;font:600 var(--f-sm)/1.3 var(--sans);
  color:var(--forest);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:40px}
.seclead{font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted);margin:-3px 0 10px}

/* ── the invitation card ── */
.inv{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--sand);
  border-radius:12px;padding:0;margin:0 0 10px;cursor:pointer;overflow:hidden;position:relative}
.inv:hover{border-color:var(--forest)}
.inv .in{display:flex;gap:12px;padding:12px 13px}
/* the date chip: time lives in a rail, so size never has to carry it */
.when-chip{flex:0 0 auto;width:calc(58px * var(--tx));text-align:center;padding-top:2px}
.when-chip .d{font:600 var(--f-lab)/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ember-text)}
.when-chip .t{font:600 var(--f-lg)/1.25 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;margin-top:1px}
.when-chip .x{font:400 var(--f-lab)/1.3 var(--sans);color:var(--muted)}
/* the rhythm line: a class is identified by its rhythm, not by a date */
.rhythm{flex:0 0 auto;width:calc(58px * var(--tx));padding-top:3px}
.rhythm .days{font:600 var(--f-lab)/1.35 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--forest)}
.rhythm .t{font:600 var(--f-sm)/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.inv .meat{flex:1;min-width:0}
.inv h3{font:400 var(--f-ttl)/1.22 var(--serif);margin:0 0 3px;color:var(--ink);text-wrap:balance}
.inv .fact{font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted);margin:0}
.inv .fact b{color:var(--ink);font-weight:600}
.inv .who{font:400 var(--f-sm)/1.45 var(--sans);color:var(--ochre-text);margin:2px 0 0}
.inv .host{font:400 var(--f-sm)/1.4 var(--hand);color:var(--muted);margin:5px 0 0}
.inv .state{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 9px;border-radius:999px;
  font:600 var(--f-lab)/1.35 var(--sans);border:1px solid}
.st-open{color:var(--forest);border-color:rgba(27,67,53,.4);background:rgba(27,67,53,.06)}
.st-few{color:var(--ember-text);border-color:rgba(206,89,16,.45);background:rgba(206,89,16,.07)}
.st-full{color:var(--muted);border-color:var(--sand);background:var(--soft)}
.st-mine{color:var(--myred);border-color:rgba(200,56,13,.45);background:rgba(200,56,13,.07)}
.st-paused{color:var(--plum);border-color:rgba(102,67,124,.4);background:rgba(102,67,124,.06)}
.inv.mine{border-color:var(--myred);border-width:1.5px}
.inv .photo{height:calc(74px * var(--tx));background:var(--sand) center/cover;display:flex;align-items:flex-end;
  padding:8px 12px;font:600 var(--f-lab)/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#3A2A18}
.inv.lead h3{font-size:calc(23px * var(--tx))}

/* small utility rows (Also nearby, Explore, search results) */
.urow{display:flex;width:100%;text-align:left;gap:11px;align-items:center;background:var(--soft);
  border:1px solid var(--sand);border-radius:10px;padding:11px 13px;margin:0 0 8px;cursor:pointer;min-height:44px}
.urow:hover{border-color:var(--forest)}
.urow .dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.k-food{background:var(--forest)}.k-ride{background:var(--ember)}.k-thing{background:var(--ochre)}.k-help{background:var(--plum)}
.urow .txt{flex:1;min-width:0}
.urow .txt b{display:block;font:600 var(--f-md)/1.35 var(--sans);color:var(--ink)}
.urow .txt span{display:block;font:400 var(--f-sm)/1.4 var(--sans);color:var(--muted)}
.urow .kind{flex:0 0 auto;font:600 var(--f-lab)/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.urow .chev{flex:0 0 auto;color:var(--muted);font-size:var(--f-lg)}

/* the honest end of a finite surface */
.endline{margin:18px 0 6px;padding:14px 4px 0;border-top:1px solid var(--line);
  font:400 var(--f-sm)/1.5 var(--sans);color:var(--muted);text-align:center}
.endline b{display:block;font:400 var(--f-lg)/1.35 var(--serif);color:var(--ink);margin-bottom:3px}

/* filters / chips */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.chip{background:var(--soft);border:1px solid var(--sand);border-radius:999px;padding:8px 13px;
  font:600 var(--f-sm)/1.25 var(--sans);color:var(--forest);cursor:pointer;min-height:40px}
.chip[aria-pressed=true]{background:var(--forest);color:var(--soft);border-color:var(--forest)}
.chip:hover{border-color:var(--forest)}

/* detail screen */
.det{padding-bottom:10px}
.det .kindline{font:600 var(--f-lab)/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ember-text);margin:16px 0 6px}
.det h1{font:400 calc(29px * var(--tx))/1.14 var(--serif);margin:0 0 10px;letter-spacing:-.3px;text-wrap:balance;max-width:none}
.det .photo{height:calc(132px * var(--tx));margin:0 -16px 14px;background:var(--sand);display:flex;align-items:flex-end;
  padding:10px 16px;font:600 var(--f-lab)/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#3A2A18}
.facts{margin:0 0 14px;padding:0;list-style:none;border-top:1px solid var(--line)}
.facts li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.facts .k{flex:0 0 calc(92px * var(--tx));font:600 var(--f-lab)/1.5 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding-top:1px}
.facts .v{flex:1;min-width:0;font:400 var(--f-md)/1.45 var(--sans);color:var(--ink)}
.facts .v small{display:block;font:400 var(--f-sm)/1.4 var(--sans);color:var(--muted);margin-top:1px}
.facts .v .warn{color:var(--ember-text);font-weight:600}
.words{font:400 var(--f-md)/1.6 var(--sans);color:var(--ink);margin:0 0 14px}
.hostline{display:flex;gap:11px;align-items:center;background:var(--soft);border:1px solid var(--sand);
  border-radius:10px;padding:11px 13px;margin:0 0 14px}
.hostline .av{flex:0 0 auto;width:calc(38px * var(--tx));height:calc(38px * var(--tx));border-radius:50%;
  background:var(--forest);color:var(--paper);display:flex;align-items:center;justify-content:center;
  font:400 var(--f-lg)/1 var(--serif)}
.hostline .n{flex:1;min-width:0}
.hostline .n b{display:block;font:600 var(--f-md)/1.35 var(--sans)}
.hostline .n span{display:block;font:400 var(--f-sm)/1.4 var(--sans);color:var(--muted)}
.hostline .ask{flex:0 0 auto;background:none;border:1px solid var(--sand);border-radius:999px;padding:8px 12px;
  font:600 var(--f-sm)/1.2 var(--sans);color:var(--forest);cursor:pointer;min-height:40px}

/* who is coming — counts and proximity, never a roll call */
.going{background:var(--soft);border:1px solid var(--sand);border-radius:10px;padding:12px 13px;margin:0 0 14px}
.going b{font:600 var(--f-md)/1.35 var(--sans);display:block}
.going span{font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted)}

/* actions */
.actions{display:flex;flex-direction:column;gap:9px;margin:4px 0 0}
.btn{display:block;width:100%;border:none;border-radius:12px;padding:14px 16px;min-height:50px;
  font:600 var(--f-lg)/1.3 var(--sans);text-align:center;cursor:pointer}
.btn-go{background:var(--forest);color:var(--soft)}
.btn-go:hover{background:var(--forest-2)}
.btn-2{background:none;border:1.5px solid var(--forest);color:var(--forest)}
.btn-2:hover{background:var(--soft)}
.btn-q{background:none;border:none;color:var(--forest);text-decoration:underline;text-underline-offset:3px;
  font:600 var(--f-md)/1.35 var(--sans);min-height:44px}
.btn-warn{background:none;border:1.5px solid var(--error);color:var(--error)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.actnote{font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted);text-align:center;margin:8px 0 0}

/* the review sheet — a named consequence, then one confirm */
.sheet-h{font:400 calc(24px * var(--tx))/1.2 var(--serif);margin:16px 0 4px;text-wrap:balance}
.sheet-sub{font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted);margin:0 0 14px}
.pick{margin:0 0 14px}
.pick .lab{font:600 var(--f-lab)/1.4 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  display:block;margin:0 0 6px}
.opt{display:flex;width:100%;text-align:left;gap:10px;align-items:center;background:var(--soft);
  border:1px solid var(--sand);border-radius:10px;padding:11px 13px;margin:0 0 7px;cursor:pointer;min-height:46px;
  font:400 var(--f-md)/1.35 var(--sans);color:var(--ink)}
.opt[aria-pressed=true]{border-color:var(--forest);border-width:1.5px;background:var(--white)}
.opt .tick{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--sand);display:flex;
  align-items:center;justify-content:center;font-size:12px;color:transparent}
.opt[aria-pressed=true] .tick{border-color:var(--forest);background:var(--forest);color:var(--paper)}
.opt .sub{display:block;font:400 var(--f-sm)/1.35 var(--sans);color:var(--muted)}
.field{width:100%;border:1.5px solid var(--sand);border-radius:10px;background:var(--white);padding:12px 13px;
  font:400 var(--f-md)/1.4 var(--sans);color:var(--ink);min-height:48px}
.field::placeholder{color:#8C8B86}
.field:focus{border-color:var(--forest);outline:none}
.conseq{background:var(--paper);border:1px solid var(--sand);border-left:3px solid var(--ember);border-radius:0 10px 10px 0;
  padding:12px 14px;margin:0 0 14px;font:400 var(--f-md)/1.5 var(--sans)}
.conseq b{font-weight:600}

/* receipt */
.receipt{background:var(--white);border:1px solid var(--sand);border-radius:14px;padding:18px 16px;margin:16px 0 14px;
  position:relative;overflow:hidden}
.receipt .corner{position:absolute;top:0;right:0;width:0;height:0;border-top:26px solid var(--myred);border-left:26px solid transparent}
.receipt .ok{font:600 var(--f-lab)/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--forest);margin:0 0 6px}
.receipt h2{font:400 calc(24px * var(--tx))/1.2 var(--serif);margin:0 0 10px;text-wrap:balance}
.receipt .facts{margin-bottom:0}
.receipt .facts li:last-child{border-bottom:none}

/* My */
.attn{background:var(--paper);border:1px solid var(--sand);border-left:3px solid var(--ember);
  border-radius:0 12px 12px 0;padding:13px 14px;margin:0 0 9px;cursor:pointer;width:100%;text-align:left}
.attn .lab{font:600 var(--f-lab)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ember-text);margin:0 0 4px}
.attn b{display:block;font:600 var(--f-md)/1.35 var(--sans);margin-bottom:2px}
.attn span{display:block;font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted)}
.commit{display:flex;width:100%;text-align:left;gap:12px;background:var(--soft);border:1px solid var(--sand);
  border-radius:10px;padding:12px 13px;margin:0 0 8px;cursor:pointer;min-height:56px}
.commit .when{flex:0 0 calc(72px * var(--tx))}
.commit .when b{display:block;font:600 var(--f-sm)/1.3 var(--sans);color:var(--ember-text);text-transform:uppercase;letter-spacing:.05em}
.commit .when span{display:block;font:600 var(--f-md)/1.3 var(--sans);font-variant-numeric:tabular-nums}
.commit .m{flex:1;min-width:0}
.commit .m b{display:block;font:600 var(--f-md)/1.35 var(--sans)}
.commit .m span{display:block;font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted)}
.commit .m .tag{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;border:1px solid;
  font:600 var(--f-lab)/1.4 var(--sans)}
.tag-conf{color:var(--forest);border-color:rgba(27,67,53,.4);background:rgba(27,67,53,.06)}
.tag-wait{color:var(--ochre-text);border-color:rgba(200,138,10,.5);background:rgba(200,138,10,.08)}
.tag-pay{color:var(--ember-text);border-color:rgba(206,89,16,.45);background:rgba(206,89,16,.07)}
.tag-canc{color:var(--error);border-color:rgba(159,45,45,.4);background:rgba(159,45,45,.05)}
.myhead{display:flex;align-items:center;gap:12px;padding:16px 0 12px}
.myhead .av{width:calc(46px * var(--tx));height:calc(46px * var(--tx));border-radius:50%;background:var(--forest);
  color:var(--paper);display:flex;align-items:center;justify-content:center;font:400 calc(21px * var(--tx))/1 var(--serif)}
.myhead .n b{display:block;font:600 var(--f-lg)/1.3 var(--sans)}
.myhead .n span{display:block;font:400 var(--f-sm)/1.4 var(--sans);color:var(--muted)}
.subhead{font:600 var(--f-lab)/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin:18px 0 8px}
.empty{background:var(--soft);border:1px dashed var(--sand);border-radius:10px;padding:14px;margin:0 0 8px;
  font:400 var(--f-sm)/1.5 var(--sans);color:var(--muted);text-align:center}

/* post */
.steps{display:flex;gap:5px;margin:14px 0 10px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--sand)}
.steps i.on{background:var(--forest)}
.q{font:400 calc(23px * var(--tx))/1.25 var(--serif);margin:6px 0 4px;text-wrap:balance}
.qsub{font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted);margin:0 0 14px}
.previewwrap{border:1px dashed var(--sand);border-radius:14px;padding:12px;background:var(--soft);margin:0 0 14px}
.previewwrap .lab{font:600 var(--f-lab)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;text-align:center}
.previewwrap .inv{margin-bottom:0;cursor:default}

/* bottom bar — place, you, contribute. Not category navigation. */
.ph-bar{flex:0 0 auto;display:flex;align-items:stretch;gap:2px;padding:6px 10px 10px;border-top:1px solid var(--line);
  background:var(--cream)}
.tab{flex:1;background:none;border:none;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;border-radius:10px;min-height:52px;color:var(--muted);font:600 var(--f-lab)/1.3 var(--sans)}
.tab:hover{background:var(--soft)}
.tab[aria-current=page]{color:var(--forest)}
.tab .ic{height:calc(23px * var(--tx));display:flex;align-items:center}
.tab .my-mark{width:calc(30px * var(--tx));height:calc(23px * var(--tx));background:url(../icons/my-mark.png) center/contain no-repeat}
.tab .badge{position:absolute;margin:-3px 0 0 20px;width:8px;height:8px;border-radius:50%;background:var(--ember)}
.toast{position:absolute;left:14px;right:14px;bottom:78px;background:var(--forest);color:var(--soft);
  border-radius:12px;padding:12px 14px;font:400 var(--f-sm)/1.45 var(--sans);display:flex;gap:12px;align-items:center;
  box-shadow:0 8px 22px rgba(27,67,53,.22);z-index:5}
.toast b{flex:1;font-weight:400}
.toast button{flex:0 0 auto;background:none;border:1px solid rgba(250,240,227,.5);color:var(--soft);border-radius:999px;
  padding:7px 12px;font:600 var(--f-sm)/1.2 var(--sans);cursor:pointer;min-height:38px}

@media(prefers-reduced-motion:no-preference){
  .fade{animation:fade .22s ease}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}
.dayline{font:400 var(--f-sm)/1.4 var(--sans);color:var(--muted);margin:2px 0 8px}
.subsplit{font:600 var(--f-lab)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}

/* ── layer 2 · the corrective pass ──────────────────────────────────── */
/* ── corrective pass, 2026-09-19 ───────────────────────────────────────────
   1. the two rhythms are told apart by surface, not by position alone
   2. the time rail stacks above the title when width or text size demands it
   3. no exhaustiveness claims; "see all" carries the rest
   ───────────────────────────────────────────────────────────────────────── */

/* a class reads as a different kind of paper from an occasion */
.inv.cls{background:var(--soft);border-color:var(--line)}
.inv.cls::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--forest)}
.inv.cls .in{padding-left:15px}
.inv.cls h3{color:var(--forest)}
.inv.occ h3{color:var(--ink)}
.inv.lead.occ{border-color:var(--sand)}

/* a compact card for the tail of a section */
.inv.mini .in{padding:10px 13px}
.inv.mini h3{font-size:calc(17.5px * var(--tx));margin-bottom:2px}
.inv.mini .who,.inv.mini .host{display:none}
.inv.mini .state{margin-top:4px}
.inv.mini.cls .in{padding-left:15px}

/* narrow or enlarged: the schedule goes above the title instead of beside it */
.stacked .inv .in{flex-direction:column;gap:5px}
.stacked .when-chip,.stacked .rhythm{width:auto;display:flex;gap:9px;align-items:baseline;text-align:left;padding-top:0}
.stacked .when-chip .d,.stacked .rhythm .days{white-space:nowrap}
.stacked .when-chip .t,.stacked .rhythm .t{font-size:var(--f-md)}
.stacked .when-chip .x{margin-left:auto}

/* the two ways out of a partial overview */
.seeall{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px}
.seeall button{background:var(--soft);border:1px solid var(--sand);border-radius:10px;padding:12px 14px;min-height:46px;
  font:600 var(--f-md)/1.35 var(--sans);color:var(--forest);cursor:pointer;text-align:left;display:flex;align-items:center}
.seeall button:hover{border-color:var(--forest)}
.seeall button .c{margin-left:auto;color:var(--muted);font-weight:400}

/* section heading count, so the overview never has to claim completeness */
.sec .n{flex:0 0 auto;font:400 var(--f-sm)/1.3 var(--sans);color:var(--muted)}

/* the society picker is a real control */
.pickrow{display:flex;width:100%;text-align:left;gap:10px;align-items:center;background:var(--soft);
  border:1px solid var(--sand);border-radius:10px;padding:12px 13px;margin:0 0 8px;cursor:pointer;min-height:48px;
  font:400 var(--f-md)/1.35 var(--sans);color:var(--ink)}
.pickrow[aria-pressed=true]{border-color:var(--forest);border-width:1.5px;background:var(--white)}
.pickrow .tick{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--sand);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
.pickrow[aria-pressed=true] .tick{border-color:var(--forest);background:var(--forest);color:var(--paper)}
.pickrow .c{margin-left:auto;font:400 var(--f-sm)/1.3 var(--sans);color:var(--muted)}

/* a changed booking says what changed, on the row itself */
.commit.moved{border-color:var(--ember);border-left-width:3px}
.commit.dead{opacity:.72}
.commit .was{display:block;font:400 var(--f-sm)/1.4 var(--sans);color:var(--ember-text)}
.commit .was s{color:var(--muted)}

/* utility detail */
.uhead{font:400 calc(25px * var(--tx))/1.2 var(--serif);margin:14px 0 8px;text-wrap:balance}
.evid{margin:0 0 14px;padding:0;list-style:none}
.evid li{padding:9px 0;border-bottom:1px solid var(--line);font:400 var(--f-md)/1.45 var(--sans)}
.evid li span{display:block;font:400 var(--f-sm)/1.4 var(--sans);color:var(--muted)}

/* search stays reachable while browsing */
.ph-back .hbtn{margin-left:8px;padding:8px 10px}
.ph-back .ttl{margin-left:auto}

/* ── layer 3 · the visual rebuild ───────────────────────────────────── */
body{background:var(--ivory);color:var(--ink);font-family:var(--sans)}
.phone{background:var(--ivory);border-color:var(--edge);font-family:var(--sans);color:var(--ink)}
.ph-top,.ph-back,.ph-bar{background:var(--ivory);border-color:var(--edge)}
.loc b{font:700 var(--f-lg)/1.25 var(--display);color:var(--ink)}
.loc span,.hd span{color:var(--muted)}
.hbtn{background:var(--card);border-color:var(--edge);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(47,47,54,.05)}
.backb{color:var(--ink);font-weight:700}
.ph-back .ttl{color:var(--muted);font-weight:600}
.tab{color:var(--muted);font-weight:700}
.tab[aria-current=page]{color:var(--ink)}

/* the greeting: spacious, with the day in hand and a small street scene */
.around{display:flex;align-items:center;gap:12px;padding:15px 0 4px}
.around .txt{flex:1;min-width:0}
.around h1{font:800 calc(29px * var(--tx))/1.04 var(--display);letter-spacing:-.7px;margin:0;color:var(--ink)}
.around .day{display:block;font:400 calc(19px * var(--tx))/1.35 var(--hand);color:var(--tang);margin:2px 0 0}
.around .cnt{display:none}
.around .vignette{flex:0 0 auto;width:calc(72px * var(--tx));height:calc(60px * var(--tx));
  border-radius:16px;overflow:hidden;background:#F2ECE0}

/* ── the card: white, precise, with the scene doing the colour ── */

.poster{display:block;width:100%;text-align:left;cursor:pointer;background:var(--card);
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);
  padding:0;margin:0 0 12px;overflow:hidden;position:relative;transition:box-shadow .16s ease,transform .16s ease}
.poster:hover{box-shadow:var(--shadow-h);transform:translateY(-1px)}
.poster .scene{display:block;background:var(--tint,#EFEAE0);height:calc(100px * var(--tx));position:relative;overflow:hidden}
.poster .scene svg{display:block;width:100%;height:100%}
.poster .scene.photo{height:calc(104px * var(--tx))}
.poster .scene .tagline{position:absolute;left:12px;bottom:10px;color:#fff;font:600 var(--f-lab)/1.3 var(--sans);
  letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.poster .pbody{display:block;padding:12px 15px 13px}
.poster .when{display:block;font:700 var(--f-sm)/1.35 var(--sans);letter-spacing:.005em;
  color:var(--tang);margin:0 0 5px}
.poster h3{font:800 calc(21px * var(--tx))/1.16 var(--display);letter-spacing:-.4px;color:var(--ink);
  margin:0 0 6px;text-wrap:balance}
.poster .pf{font:400 var(--f-sm)/1.42 var(--sans);color:var(--muted);margin:0}
.poster .pf.who{color:var(--ink-2);font-weight:600}
.poster .pfoot{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap}
.poster .host{margin-left:auto;display:flex;align-items:center;gap:7px;font:600 var(--f-sm)/1.3 var(--sans);color:var(--muted)}
.poster .host i{flex:0 0 auto;width:calc(26px * var(--tx));height:calc(26px * var(--tx));border-radius:50%;
  background:var(--avatar,#6B5BA8);color:#fff;font:700 calc(12.5px * var(--tx))/calc(26px * var(--tx)) var(--sans);
  text-align:center;font-style:normal}
.poster.mine{border-color:#F0B9A6;box-shadow:0 1px 2px rgba(200,56,13,.10),0 10px 24px -14px rgba(200,56,13,.45)}
.poster .dog{position:absolute;top:0;right:0;z-index:2;width:0;height:0;
  border-top:24px solid var(--myred);border-left:24px solid transparent}
/* the compact card: the scene becomes a square tile beside the words */
.poster.mini{display:flex;align-items:stretch}
.poster.mini .scene{flex:0 0 calc(100px * var(--tx));width:calc(100px * var(--tx));height:auto}
.poster.mini .pbody{flex:1;min-width:0;padding:12px 14px 13px}
.poster.mini h3{font-size:calc(18px * var(--tx));margin-bottom:5px}
.poster.mini .pf.who{display:none}
.poster.mini .pfoot{margin-top:8px}
.poster.mini .host i{display:none}

/* state, in words, on a light chip */
.poster .state,.state{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font:700 var(--f-lab)/1.4 var(--sans);border:1px solid}
.st-open,.poster .state{color:var(--forest);background:#E9F4EE;border-color:#CCE5D7}
.poster .state.hot{color:var(--tang);background:#FDEEE5;border-color:#F7D6C4}
.poster .state.full{color:var(--muted);background:#F3F1ED;border-color:#E4E0D8}
.poster .state.mine{color:var(--myred);background:#FDEBE5;border-color:#F4CDBE}

/* sections and the rest of the furniture */
.sec{margin:20px 0 10px;align-items:baseline}
.sec h2{font:800 calc(21px * var(--tx))/1.2 var(--display);letter-spacing:-.35px;color:var(--ink)}
.sec .n{color:var(--muted);font-weight:600}
.sec .all{color:var(--tang);font-weight:700;text-decoration:none}
.seclead{color:var(--muted)}
.chips{gap:8px}
.chip{background:var(--card);border-color:var(--edge);color:var(--ink-2);font-weight:700;border-radius:999px;
  box-shadow:0 1px 2px rgba(47,47,54,.04)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.seeall button{background:var(--card);border-color:var(--edge);color:var(--ink);font-weight:700;border-radius:14px;
  box-shadow:0 1px 2px rgba(47,47,54,.04)}
.seeall button .c{color:var(--muted);font-weight:600}
.urow{background:var(--card);border-color:var(--edge);border-radius:16px;box-shadow:0 1px 2px rgba(47,47,54,.04);gap:12px}
.urow .txt b{font-weight:700;color:var(--ink)}
.urow .dot{width:calc(38px * var(--tx));height:calc(38px * var(--tx));border-radius:12px;overflow:hidden;background:#EFEAE0}
.urow .dot svg{display:block;width:100%;height:100%}
.urow .kind{color:var(--muted);font-weight:700}
.empty{background:var(--card);border-color:var(--edge);border-radius:16px;border-style:solid;color:var(--muted)}
.subhead,.subsplit{color:var(--muted);font-weight:700}

/* detail: the scene opens with the activity */
.dethead{margin:0 -16px 14px;padding:0;background:none;border:none}
.dethead .scene{display:block;height:calc(164px * var(--tx));background:var(--tint,#EFEAE0);position:relative;overflow:hidden}
.dethead .scene svg{display:block;width:100%;height:100%}
.dethead .dtitle{padding:16px 16px 0}
.dethead .when{display:block;font:700 var(--f-sm)/1.35 var(--sans);letter-spacing:.005em;
  color:var(--tang);margin:0 0 7px}
.dethead h1{font:800 calc(30px * var(--tx))/1.1 var(--display);letter-spacing:-.7px;color:var(--ink);margin:0;text-wrap:balance}
.dethead .sub{font:400 var(--f-md)/1.45 var(--sans);color:var(--muted);margin:8px 0 0}
.dethead .dog{position:absolute;top:0;right:0;z-index:2;width:0;height:0;
  border-top:26px solid var(--myred);border-left:26px solid transparent}
.det h1{font:800 calc(28px * var(--tx))/1.12 var(--display);letter-spacing:-.6px;color:var(--ink)}
.kindline{color:var(--tang);font-weight:700}
.facts{border-color:var(--edge)}
.facts li{border-color:var(--edge)}
.facts .k{color:var(--muted);font-weight:700}
.facts .v{color:var(--ink)}
.words{color:var(--ink-2)}
.hostline,.going{background:var(--card);border-color:var(--edge);border-radius:16px;box-shadow:0 1px 2px rgba(47,47,54,.04)}
.hostline .av{background:var(--plum);color:#fff;font:700 calc(16px * var(--tx))/1 var(--sans)}
.hostline .n b{font-weight:700}
.hostline .ask{border-color:var(--edge);color:var(--ink);font-weight:700;background:var(--card)}
.going b{font-weight:700}

/* actions */
.btn{border-radius:16px;font-family:var(--sans);font-weight:700}
.btn-go{background:var(--ink);color:#fff}
.btn-go:hover{background:#3A3A42}
.btn-2{border:1.5px solid var(--edge);background:var(--card);color:var(--ink)}
.btn-2:hover{border-color:var(--ink)}
.btn-q{color:var(--tang);font-weight:700}
.conseq{background:#FDF3EA;border:1px solid #F3DECB;border-left:3px solid var(--tang-b);border-radius:0 14px 14px 0;color:var(--ink)}
.receipt{background:var(--card);border-color:var(--edge);border-radius:20px;box-shadow:var(--shadow)}
.receipt h2{font:800 calc(24px * var(--tx))/1.18 var(--display);letter-spacing:-.4px;color:var(--ink)}
.receipt .ok{color:var(--forest);font-weight:700}
.sheet-h,.q,.qbig{font-family:var(--display);font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.field,.opt{background:var(--card);border-color:var(--edge);border-radius:14px;font-family:var(--sans)}
.opt[aria-pressed=true]{border-color:var(--ink);border-width:1.5px}
.opt .tick{border-color:var(--edge)}
.opt[aria-pressed=true] .tick{background:var(--ink);border-color:var(--ink)}
.pick .lab{color:var(--muted);font-weight:700}
.pickrow{background:var(--card);border-color:var(--edge);border-radius:14px}
.pickrow[aria-pressed=true]{border-color:var(--ink)}
.pickrow[aria-pressed=true] .tick{background:var(--ink);border-color:var(--ink)}
.attn{background:var(--card);border:1px solid var(--edge);border-left:3px solid var(--tang-b);border-radius:0 16px 16px 0;
  box-shadow:0 1px 2px rgba(47,47,54,.04)}
.attn .lab{color:var(--tang);font-weight:700}
.attn b{font-weight:700;color:var(--ink)}
.commit{background:var(--card);border:1px solid var(--edge);border-left:4px solid var(--mark,#E4E0D8);
  border-radius:0 16px 16px 0;box-shadow:0 1px 2px rgba(47,47,54,.04)}
.commit .when b{color:var(--tang);font-weight:700}
.commit .m b{font-weight:700;color:var(--ink)}
.tag{font-weight:700;border-radius:999px}
.tag-conf{color:var(--forest);border-color:#CCE5D7;background:#E9F4EE}
.tag-wait{color:#8A5B12;border-color:#EEDCB8;background:#FBF1DF}
.tag-pay{color:var(--tang);border-color:#F7D6C4;background:#FDEEE5}
.tag-canc{color:#A33A3A;border-color:#EFCACA;background:#FBECEC}
.myhead .av{background:var(--plum);color:#fff;font:700 calc(20px * var(--tx))/1 var(--sans)}
.myhead .n b{font-weight:700}
.previewwrap{background:var(--card);border-color:var(--edge);border-style:dashed;border-radius:20px}
.previewwrap .poster{margin-bottom:0;cursor:default}
.steps i.on{background:var(--ink)}
.toast{background:var(--ink);border-radius:16px}
@media(prefers-reduced-motion:reduce){.poster{transition:none}}

/* ── layer 4 · the live product ─────────────────────────────────────────────
   What a prototype never needed: a way in, a way to say who you are, an
   honest state while the road is loading, and an honest state when a request
   fails. Nothing here invents content. ─────────────────────────────────── */

/* the notch and the home bar are real on a phone */
.ph-top{padding-top:calc(14px + env(safe-area-inset-top))}
.ph-back{padding-top:calc(10px + env(safe-area-inset-top))}
.ph-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.gate .ph-top,.gate .ph-back{padding-top:calc(14px + env(safe-area-inset-top))}
.ph-body{padding-bottom:env(safe-area-inset-bottom)}
.toast{bottom:calc(78px + env(safe-area-inset-bottom))}

/* the way in */
.gatewrap{display:flex;flex-direction:column;justify-content:center;min-height:100%;padding:24px 4px 40px}
.gatemark{display:block;width:74px;height:auto;margin:0 0 20px}
.gatewrap h1{font:800 calc(30px * var(--tx))/1.08 var(--display);letter-spacing:-.7px;
  color:var(--ink);margin:0 0 8px;text-wrap:balance}
.gatewrap .lede{font:400 var(--f-md)/1.55 var(--sans);color:var(--muted);margin:0 0 22px;max-width:30ch}
.gatewrap .four{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.gatewrap .four span{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--edge);border-radius:999px;padding:6px 12px 6px 7px;
  font:700 var(--f-sm)/1.3 var(--sans);color:var(--ink-2)}
.gatewrap .four i{width:24px;height:24px;border-radius:8px;overflow:hidden;display:block;flex:0 0 auto}
.gatewrap .four i svg{display:block;width:100%;height:100%}
.gatewrap form{margin:0}
.gatewrap .field{margin-bottom:10px}
.gatenote{font:400 var(--f-sm)/1.5 var(--sans);color:var(--muted);margin:12px 0 0}
.gateerr{font:600 var(--f-sm)/1.5 var(--sans);color:#A33A3A;background:#FBECEC;border:1px solid #EFCACA;
  border-radius:12px;padding:10px 12px;margin:0 0 12px}
.gateok{font:600 var(--f-sm)/1.5 var(--sans);color:var(--forest);background:#E9F4EE;border:1px solid #CCE5D7;
  border-radius:12px;padding:10px 12px;margin:0 0 12px}

/* waiting for the road, honestly */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:100%;color:var(--muted);font:400 var(--f-md)/1.5 var(--sans)}
.spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--edge);border-top-color:var(--tang);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* the board before anybody has posted anything */
.first{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 18px;margin:4px 0 12px}
.first .scene{display:block;height:calc(120px * var(--tx));margin:-20px -18px 16px;background:#EFEAE0;overflow:hidden}
.first .scene svg{display:block;width:100%;height:100%}
.first h3{font:800 calc(22px * var(--tx))/1.18 var(--display);letter-spacing:-.4px;margin:0 0 8px;color:var(--ink)}
.first p{font:400 var(--f-md)/1.55 var(--sans);color:var(--muted);margin:0 0 14px}
.first .btn{margin:0}

/* a failure says what failed */
.rowerr{background:#FBECEC;border:1px solid #EFCACA;border-radius:12px;padding:10px 12px;margin:0 0 10px;
  font:600 var(--f-sm)/1.5 var(--sans);color:#A33A3A}
.offline{background:var(--ink);color:#fff;text-align:center;padding:7px 12px;
  font:700 var(--f-lab)/1.4 var(--sans);letter-spacing:.04em}

/* the busy state of a button that is talking to the road */
.btn.busy{opacity:.62;pointer-events:none}

/* sign out, and the small print of a real account */
.acctrow{display:flex;gap:10px;align-items:center;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--edge)}
.acctrow span{flex:1;min-width:0;font:400 var(--f-sm)/1.45 var(--sans);color:var(--muted)}