/* ===================================================================
   THE CONSOLE — the blend (Sami, 2026-09-18: "remake the pages but blend
   them, dont just slap them together. dark theme and a light theme").
   Built to clients/_console/dir-m (card C1). Its point of view:
   "Two partners at one table — everything is somebody's move, and the
   colour says whose."

   From C: the type (Bricolage), the owner colours (Sami orange, Jerry blue,
   together = both), the stripe on every card, the whose-move switch, the
   floating bar, the paper. From A: the sidebar, the whose-move counters as
   big tiles, two working columns on a computer, the night.

   ⛔ ONE STYLESHEET, TWO TOKEN SETS. The phone and the computer are the same
   parts laid out twice; light and dark are the same parts with the tokens
   swapped. A second copy of a component for one theme is the defect.
   ⛔ COLOUR MARKS WHOSE A THING IS, NEVER ITS STATE. The two owner hues are
   the only chroma; state colours (live, sold out, new) live inside tags.

   Operate — the Seal Ops screens, reused as they are — reads the older token
   NAMES (--panel, --dim, …). They are aliased onto the blend below, so those
   screens re-light with the theme instead of being redrawn. ⚠ The aliases
   resolve on <html>, the same element that carries data-theme; move the
   attribute anywhere else and they freeze on the light values.
   =================================================================== */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/bricolage-grotesque.woff2) format("woff2")}   /* SIL OFL 1.1 — fonts/OFL.txt */

:root,[data-theme="light"]{
  --bg:#fbf8f3; --side:#f5f0e8; --card:#ffffff; --soft:#f3eee6; --hair:#e7e0d4; --hair-2:#d6cdbd;
  --ink:#1c1a17; --ink-2:#5d574e; --on-ink:#ffffff;
  --sami:#c2410c; --sami-soft:#fdeee6; --jerry:#2f55d4; --jerry-soft:#e9eefc; --on-jerry:#ffffff; --on-sami:#ffffff;
  /* ⛔ A TEXT-ON-TINT VARIANT, MEASURED, NOT A COPIED HEX. --sami is 5.18:1 on
     white but 4.46–4.57 on every soft ground this app has, so an attribution
     line in it fails 4.5 the moment it sits inside a tinted row — which the
     walk caught at 4.46. --sami-deep clears 4.85 on the worst of them (card
     5.63 · soft 4.87 · sami-soft 4.97 · jerry-soft 4.85 · live-soft 4.94).
     --jerry needs none: its worst ground is 5.37. The pair exists so a future
     tint is checked against ONE token instead of every byline. */
  --sami-deep:#b83e0b; --jerry-deep:var(--jerry);
  /* The meeting's stage — the blend's dark "one thing at a time" card. Its ink
     values are the approved mockup's; the BORDER was raised from #4b463e to
     clear 3:1 against the stage (1.86 → 3.06), because a control whose only
     boundary is a 1.9:1 line is not identifiable (WCAG 1.4.11). */
  --stage:var(--ink); --stage-ink:#ffffff; --stage-2:#cfc8bb; --stage-line:#6d665a;
  --live:#17613a; --live-soft:#e4f4ea; --live-ink:#ffffff;
  --warn:#7a4b00; --warn-soft:#fff1d6; --off-ink:#ffffff;
  --bad-bg:#fdecea; --bad-line:#efb4ad; --bad-ink:#9b1c12;
  --dock:rgba(28,26,23,.94); --dock-ink:#c9c2b8; --dock-on:#ffffff;
  --scrim:rgba(28,26,23,.42);
  --lift:0 1px 2px rgba(28,26,23,.05),0 6px 20px rgba(28,26,23,.05); --edge:transparent;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0e1113; --side:#0b0e10; --card:#171b1e; --soft:#1f2529; --hair:#2c343a; --hair-2:#3b454c;
  --ink:#eef3f5; --ink-2:#95a3ac; --on-ink:#0e1113;
  --sami:#ff8a66; --sami-soft:#3a1a10; --jerry:#7aa2ff; --jerry-soft:#16213d; --on-jerry:#0b1330; --on-sami:#2a1206;
  /* On the dark field both hues clear 6.2:1 on every ground, so the deep
     variants ARE the hues — an explicit per-mode decision, not an omission. */
  --sami-deep:var(--sami); --jerry-deep:var(--jerry);
  --stage:var(--soft); --stage-ink:#eef3f5; --stage-2:#b4c0c7; --stage-line:#60707c;
  --live:#3fd68c; --live-soft:#12251b; --live-ink:#04150c;
  --warn:#ffb020; --warn-soft:#231a08; --off-ink:#2a1c00;
  --bad-bg:#2a1416; --bad-line:#6d2b2f; --bad-ink:#ffb3b3;
  --dock:rgba(23,27,30,.94); --dock-ink:#a9b6be; --dock-on:#ffffff;
  --scrim:rgba(0,0,0,.62);
  --lift:none; --edge:#2c343a;
  color-scheme:dark;
}
/* The Operate screens' names, aliased — never given values of their own. */
:root{
  --panel:var(--card); --raise:var(--soft); --line:var(--hair); --line-hi:var(--hair-2);
  --text:var(--ink); --dim:var(--ink-2);
  --faint:var(--ink-2);            /* was #66747d at 3.93:1 — under the floor (lane 104.1, absorbed here) */
  --off:var(--warn); --brand:var(--ink); --brand-ink:var(--on-ink);
  --font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --side-w:248px;
}

html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--font);font-optical-sizing:auto;-webkit-text-size-adjust:100%}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Clients — the picture is an authenticated still, never the live page.
   Only the logo overlaps the band; the name and address start below it. */
#sitelist.ccgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;background:none;
  box-shadow:none;border:0;border-radius:0;overflow:visible}
.cc{position:relative;min-width:0;background:var(--card);border-radius:18px;
  box-shadow:var(--lift);border:1px solid var(--edge)}
.cc-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;
  font:inherit;color:var(--ink);border-radius:18px;cursor:pointer;line-height:1.4}
.cc-open:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cc-shot{display:block;position:relative;height:196px;overflow:hidden;background:var(--soft);
  border-bottom:1px solid var(--hair);border-radius:17px 17px 0 0}
.cc-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cc-cap{position:absolute;top:10px;left:10px;background:var(--card);color:var(--ink-2);
  border-radius:99px;padding:5px 10px;font-size:12.5px;font-weight:650}
.cc-noshot{display:flex;align-items:center;justify-content:center;height:100%;padding:24px;
  box-sizing:border-box;color:var(--ink-2);font-size:14px;text-align:center}
.cc-bd{display:block;padding:14px 16px 16px}
.cc-who{display:flex;gap:12px;align-items:flex-start;margin-top:-40px;position:relative}
.cc-logo{width:60px;height:60px;box-sizing:border-box;border-radius:50%;flex:none;
  background:var(--card);border:3px solid var(--card);box-shadow:var(--lift);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.cc-logo img{display:block;width:100%;height:100%;object-fit:cover}
.cc-logo.word{color:var(--ink);font-size:21px;font-weight:800;line-height:1;letter-spacing:-.02em}
.cc-logo i{font-style:normal}
.cc-nm{display:block;min-width:0;flex:1;padding-top:40px}
.cc-name{font-size:19px;font-weight:760;line-height:1.2}
.cc-tag{display:inline-block;background:var(--warn-soft);color:var(--warn);border-radius:99px;
  padding:3px 7px;font-size:11px;font-weight:750;vertical-align:2px}
.cc-tag.live{background:var(--live-soft);color:var(--live)}
.cc-tag.plain{background:var(--soft);color:var(--ink-2)}
.cc-url{display:block;margin-top:2px;font-size:14px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.cc-t{display:block;min-width:0;background:var(--soft);border-radius:12px;padding:9px 10px;overflow-wrap:break-word}
.cc-t b{display:block;font-size:22px;font-weight:780;line-height:1.1;font-variant-numeric:tabular-nums}
.cc-t b.w{font-size:14px;line-height:1.25;font-weight:700;padding-top:3px;overflow-wrap:normal}
.cc-t span{display:block;margin-top:3px;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.cc-why{display:block;font-size:12.5px;color:var(--ink-2);margin-top:8px}
.cc-go{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:12px;
  background:var(--ink);color:var(--card);border-radius:12px;font-size:15px;font-weight:750}
.cc-live{position:absolute;right:10px;top:142px;display:flex;align-items:center;min-height:44px;
  box-sizing:border-box;padding:8px 12px;background:var(--card);color:var(--ink);border-radius:99px;
  font-size:13px;font-weight:700;text-decoration:none}
.cc-live:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (min-width:1000px){#sitelist.ccgrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

/* ── the pair: S and J, the app's mark and each person's avatar ── */
.pair{display:inline-flex;flex:none}
.pair i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;
        font-weight:780;font-size:15px;color:#fff;border:2px solid var(--bg)}
.pair i+i{margin-left:-9px}
.pair .s{background:#c2410c} .pair .j{background:#2f55d4}
.pair.big i{width:64px;height:64px;font-size:28px;border-width:3px}
.pair.big i+i{margin-left:-16px}

.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:var(--card);
         display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0;flex:none}
.iconbtn svg{width:20px;height:20px}
.iconbtn:focus-visible,.account:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ── the header (shared by every screen) ── */
header{padding:max(16px,env(safe-area-inset-top,16px)) 16px 8px;border-bottom:0;background:var(--bg)}
.htop{align-items:flex-start;min-height:0}
h1{font-size:32px;line-height:1.08;font-weight:780;letter-spacing:-.02em}
.hsub{font-size:15px;color:var(--ink-2);margin:0}
.subrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:5px}
.back{color:var(--ink-2);font-weight:650;font-size:16px;min-height:44px;padding:0 14px 0 0;margin:0 0 2px}
.hright{gap:6px;padding-top:2px;flex:0 0 auto}
.who{display:flex;align-items:center;gap:6px}
.account{width:44px;height:44px;border:2px solid var(--bg);font-size:17px;font-weight:780}
.account.owner{background:#c2410c;border-color:var(--bg);color:#fff}
.account.operator{background:#2f55d4;border-color:var(--bg);color:#fff}
.pill{background:var(--soft);border-color:var(--hair);color:var(--ink-2);font-size:13px;padding:6px 11px}
.pill .d{background:var(--live)}
.pill.dirty{color:var(--off-ink);background:var(--warn);border-color:var(--warn)}
.pill.dirty .d{background:var(--off-ink)}

/* ── the Clients tabs, as pills: the list's (Orders · Clients · Asks · History), or on a
   client her own (Numbers · Menu · Orders · History — card C2) ── */
.optabs{display:none;gap:6px;padding:4px 16px 10px;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
.optabs::-webkit-scrollbar{height:0}
.tabnote{display:none;margin:0;padding:4px 16px 12px;font-size:15px;line-height:1.4;color:var(--ink-2)}
body[data-place="clients"]:not([data-view="team"]) .tabnote:not([hidden]){display:block}
body[data-place="clients"]:not([data-view="team"]) .optabs{display:flex}
.optabs button{flex:0 0 auto;min-height:44px;padding:0 18px;border-radius:99px;border:0;background:var(--soft);
               color:var(--ink-2);font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.optabs button[aria-current="page"]{background:var(--ink);color:var(--on-ink)}
.optabs button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* A client's four tabs fit a 375 px phone whole (18 px sides clipped "History" at the edge). */
@media (max-width:999px){.optabs button{padding:0 14px}}

/* ── the floating bar (phone). IN FLOW at the foot of the frame, not fixed over
   the content: the toast and the publish bar anchor above it, and a bar that
   floats over the list would hide its last row. ── */
.bar{display:flex;align-items:center;gap:2px;margin:6px 12px calc(10px + env(safe-area-inset-bottom,0px));
     padding:6px;background:var(--dock);border:1px solid var(--edge);border-radius:26px;
     box-shadow:0 10px 30px rgba(0,0,0,.22)}
.bar a{flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
       gap:2px;text-decoration:none;color:var(--dock-ink);font-size:12px;font-weight:650;border-radius:20px}
.bar a[aria-current="page"]{color:var(--dock-on);background:rgba(255,255,255,.14)}
.bar a:focus-visible{outline:3px solid var(--dock-on);outline-offset:-3px}
.pubbar{margin:0 12px;border:1px solid var(--hair);border-radius:18px;box-shadow:var(--lift)}
.pubbtn{background:var(--ink);color:var(--on-ink);border-radius:99px}
.pubbtn[disabled]{background:var(--soft);color:var(--ink-2)}

.side{display:none}
/* Signed out, there is no sidebar: nothing to navigate, and no name to show. */
body:has(#authscreen:not([hidden])) .side{display:none!important}
body:has(#authscreen:not([hidden])) .frame{left:0}

/* ── console screens ── */
.cz{padding:0 16px 28px}
.cz h2{font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--ink-2);margin:26px 0 10px;
       display:flex;align-items:center;gap:8px}
.cz h2 .n{background:var(--soft);color:var(--ink);border-radius:99px;padding:0 8px;font-size:13px}
.cz h2.sami{color:var(--sami)} .cz h2.jerry{color:var(--jerry)}
.meta{font-size:14.5px;color:var(--ink-2);margin:8px 2px 0}

.whose{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:var(--soft);padding:5px;
       border-radius:18px;margin:8px 0 2px}
.whose button{border:1px solid transparent;background:transparent;border-radius:14px;min-height:62px;cursor:pointer;
              display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
              color:var(--ink-2);font:inherit;font-weight:650;font-size:14px;padding:6px;text-align:center}
.whose b{font-size:24px;line-height:1.05;font-weight:780;color:var(--ink)}
.whose .j b{color:var(--jerry)} .whose .s b{color:var(--sami)}
.whose button[aria-pressed="true"]{background:var(--card);box-shadow:var(--lift);border-color:var(--edge);color:var(--ink)}
.whose button:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}

.card{position:relative;background:var(--card);border-radius:16px;padding:14px 16px 14px 21px;margin:0 0 10px;
      box-shadow:var(--lift);border:1px solid var(--edge);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--hair-2)}
.card.jerry::before{background:var(--jerry)} .card.sami::before{background:var(--sami)}
.card.both::before{background:linear-gradient(var(--sami) 50%,var(--jerry) 50%)}
.card h3{margin:0;font-size:17px;line-height:1.28;font-weight:680}
.card .st{font-size:14px;font-weight:650;margin-top:3px;color:var(--ink-2)}
.card.jerry .st{color:var(--jerry)} .card.sami .st{color:var(--sami)}
.card p{margin:5px 0 0;color:var(--ink-2);font-size:15px}
.card .kind{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ink-2);background:var(--soft);
            border-radius:99px;padding:1px 9px;margin:0 0 6px}

.panel{background:var(--card);border-radius:16px;padding:16px;margin:0 0 12px;box-shadow:var(--lift);border:1px solid var(--edge)}
.panel h4{margin:0 0 6px;font-size:14.5px;font-weight:700;color:var(--ink-2)}
.panel p{margin:4px 0 0;color:var(--ink-2);font-size:15px}
.panel .big{font-size:20px;font-weight:760;margin:0;color:var(--ink)}
.panel.warn{background:var(--warn-soft);color:var(--ink)}
.panel.warn p{color:var(--ink)}
.more{display:inline-flex;align-items:center;min-height:44px;font:inherit;font-weight:650;color:var(--ink);background:none;
      border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair-2)}
.cbtn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:99px;
      border:1.5px solid var(--hair-2);background:transparent;color:var(--ink);font:inherit;font-weight:680;font-size:15.5px;
      cursor:pointer;text-decoration:none;margin-top:10px}
.cbtn.ink{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.cbtn:focus-visible,.more:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.built{background:var(--card);border-radius:16px;box-shadow:var(--lift);border:1px solid var(--edge);margin:0 0 12px}
.built summary{min-height:52px;display:flex;align-items:center;gap:8px;padding:0 16px;font-weight:700;cursor:pointer;
               color:var(--ink);list-style:none}
.built summary::-webkit-details-marker{display:none}
.built summary::after{content:"›";margin-left:auto;color:var(--ink-2);font-size:20px;transition:transform .15s ease}
.built[open] summary::after{transform:rotate(90deg)}
.built summary .n{background:var(--soft);border-radius:99px;padding:0 8px;font-size:13px}
.built summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:16px}
.built ul{list-style:none;margin:0;padding:0 16px 8px}
.built li{padding:10px 0;border-top:1px solid var(--hair);font-size:15px}
.built li b{display:block;font-weight:650} .built li span{color:var(--ink-2);font-size:14px}
@media(prefers-reduced-motion:reduce){.built summary::after{transition:none}}

/* ── Operate, re-lit: today's rows sit on cards, today's labels speak in the blend ── */
.seclabel{font-size:14.5px;letter-spacing:.01em;text-transform:none;color:var(--ink-2);font-weight:700;margin:22px 18px 9px}
#sitelist,#menulist,#orderlist,#loglist,.teamlist{background:var(--card);border-radius:16px;margin:0 16px;
  box-shadow:var(--lift);border:1px solid var(--edge);overflow:hidden}
#sitelist:empty,#menulist:empty,#orderlist:empty,#loglist:empty{display:none}
#sitelist>:last-child,#menulist>:last-child,#orderlist>:last-child,#loglist>:last-child,.teamlist>:last-child{border-bottom:0}
#v-sites #sitelist,#v-orders #ordersgate:empty+.filters{margin-top:4px}
.teamlist{margin-top:4px}
.today{margin:4px 16px 0;border-radius:16px;border:1px solid var(--hair);box-shadow:var(--lift)}
.today.set{border-color:var(--warn)}
.todaytag{font-size:14.5px;letter-spacing:.01em;text-transform:none;font-weight:700;color:var(--ink-2)}
#punchrow{background:var(--card);border-radius:16px;margin:0 16px;width:calc(100% - 32px);border:1px solid var(--edge);box-shadow:var(--lift)}
.av{border-radius:12px;background:var(--soft);border-color:var(--hair)}
.note{font-size:13.5px;color:var(--ink-2)}
.empty{color:var(--ink-2)} .empty h3{color:var(--ink)}
.filters button{border-radius:99px;border:0;background:var(--soft);color:var(--ink-2);font-size:14.5px}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.chip.st-new{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.chip.held{background:var(--hair-2);color:var(--ink)}
.chip.st-seen{background:var(--hair-2);color:var(--ink)}
.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.bad b{color:var(--bad-ink)}
.btn.danger,.smallbtn.danger{color:var(--bad-ink)}
.fileout{background:var(--bg);color:var(--ink-2)}
.scrim{background:var(--scrim)}
.toast{background:var(--card);border-color:var(--hair-2);box-shadow:0 12px 34px rgba(0,0,0,.25)}
.toast button{background:var(--ink);color:var(--on-ink);border-radius:99px}
.authscreen{background:var(--bg)}
.authscreen .pair{margin-bottom:18px}
.authaction{border-radius:99px;border-color:var(--hair-2);color:var(--ink)}
.authaction.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.authmsg{color:var(--warn)!important}

/* ── a client's Numbers (card C2). ⛔ COLOUR MARKS WHOSE, NEVER STATE: the bars are ink,
   in both themes — the two owner hues stay for Sami and Jerry. ── */
.numnote{margin:10px 0 12px;padding:12px 14px;border-radius:14px;background:var(--warn-soft);color:var(--ink);
         font-size:15px;border:1px solid var(--edge)}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:2px 9px;border-radius:99px;margin-right:4px;
     background:var(--card);color:var(--warn);border:1px solid var(--warn)}
.hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hero b{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hero span{color:var(--ink-2);font-size:15px}
.panel .meta b{color:var(--ink)}
.chartwrap{position:relative;margin:14px 0 0;border-radius:10px}
.chartwrap:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.daychart{display:block;overflow:visible}
.daychart .grid{stroke:var(--hair);stroke-width:1}
.daychart .axis{stroke:var(--ink);stroke-width:1}
.daychart .tick{fill:var(--ink-2);font-size:11px;font-variant-numeric:tabular-nums}
.daychart .peak{fill:var(--ink);font-size:12px;font-weight:700}
.daychart .hit{fill:transparent}
.daychart .day.on .hit{fill:var(--soft)}
.daychart .col{fill:var(--ink)}
.numtip{position:absolute;top:-6px;left:50%;transform:translate(-50%,-100%);background:var(--ink);color:var(--on-ink);
        font-size:13px;font-weight:650;padding:5px 11px;border-radius:99px;white-space:nowrap;pointer-events:none;opacity:0}
.numtip.on{opacity:1}
.tv{margin-top:8px}
.tv summary{min-height:44px;display:flex;align-items:center;font-weight:680;cursor:pointer;color:var(--ink)}
.tv summary{list-style:none;gap:8px}
.tv summary::-webkit-details-marker{display:none}
.tv summary::after{content:"›";color:var(--ink-2);font-size:20px;transition:transform .15s ease}
.tv[open] summary::after{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.tv summary::after{transition:none}}
.tv summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
.tv table{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.tv th{color:var(--ink-2);font-weight:650}
.tv td,.tv th{text-align:left;padding:7px 0;border-bottom:1px solid var(--hair)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat b{display:block;font-size:30px;font-weight:780;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--ink-2)}
.hb{list-style:none;margin:6px 0 0;padding:0}
.hb li{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:10px;align-items:center;padding:6px 0;font-size:15px;color:var(--ink)}
.hb-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-track{display:flex;align-items:center;gap:8px;min-width:0}
.hb-bar{height:12px;border-radius:0 6px 6px 0;background:var(--ink);flex:none;max-width:calc(100% - 34px)}
.hb-track b{font-variant-numeric:tabular-nums}
.kvl{list-style:none;margin:0;padding:0}
.kvl li{display:flex;justify-content:space-between;gap:10px;font-size:15px;color:var(--ink)}
.kvl .nc{color:var(--ink-2)}

/* ── the computer: same parts, laid out for work ── */
@media (min-width:1000px){
  .bar{display:none}
  .side{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--side);
        border-right:1px solid var(--hair);padding:22px 16px;z-index:5}
  .side .brand{display:flex;align-items:center;gap:10px;font-weight:780;font-size:18px;padding:0 6px 22px}
  .side nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:99px;
              text-decoration:none;color:var(--ink-2);font-weight:650;margin-bottom:2px;border:1px solid transparent}
  .side nav a[aria-current="page"]{background:var(--card);color:var(--ink);box-shadow:var(--lift);border-color:var(--edge)}
  .side nav a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .side .foot{margin-top:auto;border-top:1px solid var(--hair);padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;
              gap:8px 10px;font-size:14px;color:var(--ink-2)}
  .side .foot .whoname{flex:1 0 100%;padding:0 4px}

  .frame{left:var(--side-w)}
  header{padding:30px 40px 18px;border-bottom:1px solid var(--hair);margin-bottom:6px}
  h1{font-size:42px}
  .optabs{padding:14px 40px 4px}
  .tabnote{padding:14px 40px 4px}
  .view{max-width:1288px;padding-left:24px;padding-right:24px}
  .cz{padding:0 16px 60px}
  #v-sites,#v-menu,#v-orders,#v-log,#v-team,#v-asks{max-width:808px}

  .whose{gap:10px;padding:0;background:transparent;margin:22px 0 4px}
  .whose button{min-height:104px;align-items:flex-start;justify-content:flex-end;padding:14px 18px;font-size:15px;
                background:var(--soft);border-radius:16px;text-align:left}
  .whose b{font-size:40px}
  .whose button[aria-pressed="true"]{background:var(--card)}
  .whose button.j[aria-pressed="true"]{border-color:var(--jerry);box-shadow:inset 0 0 0 1px var(--jerry),var(--lift)}
  .whose button.s[aria-pressed="true"]{border-color:var(--sami);box-shadow:inset 0 0 0 1px var(--sami),var(--lift)}
  .cols{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;align-items:start;margin-top:18px}
  .cols>*{min-width:0}
  .cols>section>h2:first-child{margin-top:0}

  .pubbar{max-width:760px;margin:0 auto 14px;width:calc(100% - 80px)}
  .sheet{left:calc(50% - 290px);right:auto;width:580px;max-width:100%}
  .toast{left:calc(50% - 260px);right:auto;width:520px}
}

/* ===================================================================
   C3 · DECIDE AND MEETING. The parts are the blend's (clients/_console/
   dir-m), rebuilt on this sheet's tokens so the shipped screens are the
   picture Sami approved.

   ⛔ COLOUR SAYS WHOSE, and the one place it says WHAT is the settled
   answer — a deliberate, named deviation from the blend's own lever,
   because blue meaning "I picked this" and green meaning "we both did"
   is the single distinction this screen exists to make. Variant B (the
   green living only in the tag) is one rule away: see [data-settled].
   =================================================================== */
.qlist { margin-top: 2px; }
.dq { background: var(--card); border-radius: 16px; padding: 16px; margin: 0 0 12px;
      box-shadow: var(--lift); border: 1px solid var(--edge); }
.dq h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.qtop { display: flex; gap: 10px; align-items: flex-start; }
.qn { font-variant-numeric: tabular-nums; font-weight: 780; font-size: 15px; color: var(--ink-2);
      background: var(--soft); border-radius: 8px; padding: 2px 8px; flex: none; margin-top: 1px; }
.why { color: var(--ink-2); font-size: 14.5px; margin: 8px 0 0; line-height: 1.4; }
.opts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.opt { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
       min-height: 44px; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--hair);
       background: var(--card); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.35;
       font-weight: 600; cursor: pointer; }
.opt[disabled] { cursor: default; }
.opt .mk { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--hair-2);
           flex: none; margin-top: 1px; display: grid; place-items: center; }
.opt .mk::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
/* ⛔ "MY PICK" IS THE VIEWER'S OWN HUE, NEVER A FIXED ONE. The mockup was drawn
   signed in as Jerry, so blue could stand for "mine"; in the product either
   partner is the viewer, and a fixed blue showed Sami his own answer in his
   partner's colour — which is the one thing this palette is supposed to say. */
.qlist { --me: var(--jerry); --me-soft: var(--jerry-soft); }
[data-me="owner"] .qlist { --me: var(--sami); --me-soft: var(--sami-soft); }
.opt[aria-pressed="true"] { border-color: var(--me, var(--jerry)); background: var(--me-soft, var(--jerry-soft)); }
.opt[aria-pressed="true"] .mk { border-color: var(--me, var(--jerry)); }
.opt[aria-pressed="true"] .mk::after { background: var(--me, var(--jerry)); }
.opt .byline { display: block; font-weight: 700; font-size: 13px; margin-top: 4px; }
.opt .byline.s { color: var(--sami-deep, var(--sami)); }
.opt .byline.j { color: var(--jerry-deep, var(--jerry)); }
.dq.settled .opt[aria-pressed="true"] { border-color: var(--live); background: var(--live-soft); }
.dq.settled .opt[aria-pressed="true"] .mk { border-color: var(--live); }
.dq.settled .opt[aria-pressed="true"] .mk::after { background: var(--live); }
.dq.settled .opt[aria-pressed="false"] { opacity: .62; }
/* Variant B, one attribute on <html>: the agreed answer goes ink and the green
   lives only in its label. Nothing else on the screen changes. */
[data-settled="tag"] .dq.settled .opt[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); }
[data-settled="tag"] .dq.settled .opt[aria-pressed="true"] .mk { border-color: var(--ink); }
[data-settled="tag"] .dq.settled .opt[aria-pressed="true"] .mk::after { background: var(--ink); }
.tag.set { background: var(--live-soft); color: var(--live); border-color: transparent; }
.tag.split { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.wait { background: var(--soft); color: var(--ink-2); border-color: transparent; }
.verdict { margin: 12px 0 0; font-size: 14.5px; font-weight: 650; color: var(--ink-2); }
.verdict.split { color: var(--warn); }
.verdict.set { color: var(--live); }
.verdict .cbtn { margin-top: 10px; }
.meter { display: flex; gap: 3px; margin: 10px 0 4px; }
.meter i { flex: 1; height: 10px; border-radius: 99px; background: var(--hair); }
.meter i.on { background: var(--ink); }
.qfail { margin-top: 10px; }

/* ---- v2 card 1: the 14 as a list you tap into, and "Both of us" ----------
   Ported from clients/_console/dir-v2 onto this sheet's tokens. Text on a solid
   partner colour is --on-sami / --on-jerry, never a literal white: white on the
   dark theme's orange is 2.31:1.
   ⛔ .dots IS ALSO THE PUNCH CARD's CLASS (ops/index.html, whose <style> loads
   before this sheet), so every dots rule here is scoped under .qrow. */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--soft); padding: 4px;
       border-radius: 16px; margin: 12px 0 6px; max-width: 520px; }
.seg button { min-height: 48px; border-radius: 12px; border: 1px solid transparent; background: transparent;
              font: inherit; font-weight: 680; color: var(--ink-2); cursor: pointer; line-height: 1.15; padding: 4px 8px; }
.seg button small { display: block; font-size: 12px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--lift); border-color: var(--edge); }
.together-note { margin: 8px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--soft);
                 font-size: 14.5px; color: var(--ink); max-width: 760px; }
.qrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%;
        text-align: left; background: var(--card); border: 1px solid var(--edge); box-shadow: var(--lift);
        border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; color: var(--ink);
        font: inherit; min-height: 60px; }
.qrow .qt { font-weight: 680; font-size: 15.5px; line-height: 1.3; }
.qrow .qs { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.qrow .dots { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.qrow .dots i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
                font-size: 11px; font-weight: 800; border: 1.5px solid var(--hair-2); color: var(--ink-2); background: transparent; }
.qrow .dots i.s.on { background: var(--sami); border-color: var(--sami); color: var(--on-sami); }
.qrow .dots i.j.on { background: var(--jerry); border-color: var(--jerry); color: var(--on-jerry); }
.qopen { margin: -2px 0 12px; }
.qopen .dq.q { margin-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.qopen .dq.q > .why:first-child { margin-top: 0; }
.qrow[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0;
                              box-shadow: none; border-color: var(--hair-2); }
.optA { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.optA .opt { cursor: default; }
.pks { display: flex; gap: 6px; align-items: center; }
.pk { width: 48px; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--hair-2); background: var(--card);
      font: inherit; font-weight: 800; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); font-size: 15px; }
.pk[disabled] { cursor: default; }
.pk.s[aria-pressed="true"] { background: var(--sami); border-color: var(--sami); color: var(--on-sami); }
.pk.j[aria-pressed="true"] { background: var(--jerry); border-color: var(--jerry); color: var(--on-jerry); }
.byline.proxy { display: inline; font-weight: 600; color: var(--ink-2); }

/* the meeting */
.lot { list-style: none; margin: 0; padding: 0; }
.lot li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center;
          padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15.5px; }
.lot li:first-child { border-top: 0; }
.lot li.now { font-weight: 700; }
.lot i { font-style: normal; color: var(--ink-2); font-weight: 700; }
.lot .rolls { font-size: 13px; font-weight: 700; color: var(--warn); white-space: nowrap; }
.lot .who { display: block; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.addrow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.addrow input { flex: 1 1 180px; min-width: 0; min-height: 46px; padding: 0 14px; font: inherit;
                font-size: 15.5px; color: var(--ink); background: var(--card);
                border: 1.5px solid var(--hair-2); border-radius: 12px; }
.addrow input::placeholder { color: var(--ink-2); }
.addrow .cbtn { flex: none; margin: 0; }
@media (min-width: 1000px) {
  .qlist, .meter { max-width: 760px; }
  .dq { padding: 20px 22px; }
  .opts { gap: 7px; }
}

/* the meeting's stage card — one thing at a time, which is what the screen promises */
.mm { background: var(--stage); color: var(--stage-ink); border: 1px solid var(--stage-line);
      border-radius: 22px; padding: 18px; margin-top: 14px; }
.mm .row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px;
            font-size: 14px; color: var(--stage-2); }
.mm .who2 { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
            border: 1.5px solid var(--stage-line); border-radius: 99px; padding: 3px 8px;
            color: var(--stage-2); white-space: nowrap; }
.mm h3 { font-size: 26px; line-height: 1.2; font-weight: 720; margin: 14px 0 6px; letter-spacing: -.01em; }
.mm p { color: var(--stage-2); margin: 0; font-size: 15px; }
.mm .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.mm .acts button { min-height: 52px; border-radius: 14px; border: 1.5px solid var(--stage-line);
                   background: transparent; color: var(--stage-ink); font: inherit; font-weight: 680;
                   font-size: 15.5px; cursor: pointer; }
.mm .acts .go { grid-column: 1 / -1; background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); }

/* ---- v2 card 2 · Meeting: more than a date ---- */
.mm .setmeet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mm .setmeet .sl { display: block; font-size: 13px; font-weight: 700; color: var(--stage-2); margin: 0 0 5px; }
.mm .inp { width: 100%; min-height: 46px; padding: 0 12px; font: inherit; font-size: 16px; border-radius: 12px;
           background: transparent; color: var(--stage-ink); border: 1.5px solid var(--stage-line); box-sizing: border-box; }
.mm .go-set { grid-column: 1 / -1; min-height: 52px; border-radius: 14px; border: 0; background: var(--stage-ink);
              color: var(--stage); font: inherit; font-weight: 720; cursor: pointer; }
.mm .notebox { margin-top: 14px; border-top: 1px solid var(--stage-line); padding-top: 12px; }
.mm .notebox label { color: var(--stage-2); font-size: 13.5px; font-weight: 700; display: block; margin-bottom: 6px; }
.mm .notebox textarea.inp { min-height: 64px; padding: 10px 12px; resize: vertical; }
.mm .notebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mm .notebar p { font-size: 13.5px; }
.mm .nsave { flex: none; min-height: 44px; min-width: 88px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--stage-ink);
             background: transparent; color: var(--stage-ink); font: inherit; font-weight: 700; cursor: pointer; }
.mm button:focus-visible, .mm .inp:focus-visible { outline: 3px solid var(--stage-ink); outline-offset: 2px; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.quick a, .quick button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 72px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--hair-2); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 720; font-size: 15.5px; text-decoration: none; cursor: pointer; text-align: left; line-height: 1.2; }
.quick small { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.quick .pro { border-color: var(--me, var(--jerry)); }
[data-me="owner"] .quick { --me: var(--sami); }
.quick .pro::before { content: "+"; font-size: 22px; line-height: 1; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.quick a:focus-visible, .quick button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.suggest { list-style: none; margin: 0; padding: 0; }
.suggest li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0;
              border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink); }
.suggest li:first-child { border-top: 0; }
.suggest .cbtn { margin: 0; min-height: 44px; padding: 0 16px; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { padding: 10px 0; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.notes li:first-child { border-top: 0; }
.notes .by { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; color: var(--ink-2); }
.notes .by.s { color: var(--sami-deep); } .notes .by.j { color: var(--jerry-deep); }


/* the potential client's sheet — its own classes: `.sheet` and `.field` belong to the panel (ops/index.html) */
.pscrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); }
.psheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-height: 92vh; overflow-y: auto; box-sizing: border-box;
          background: var(--card); color: var(--ink); border-radius: 22px 22px 0 0; padding: 20px 18px 24px; box-shadow: var(--lift); }
.psheet .kicker { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.psheet h3 { margin: 4px 0 0; font-size: 22px; font-weight: 760; }
.psheet .pnote, .psheet .phint { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }
.pfield { margin-top: 14px; }
.pfield label, .pfield .lbl { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pfield .opt-l { font-weight: 600; color: var(--ink-2); }
.pfield .inp { width: 100%; min-height: 46px; padding: 0 12px; font: inherit; font-size: 16px; border-radius: 12px; box-sizing: border-box;
               background: var(--panel); color: var(--ink); border: 1.5px solid var(--hair-2); }
.pfield textarea.inp { padding: 10px 12px; min-height: 64px; resize: vertical; }
.pfield .inp:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.perr { margin: 6px 0 0; color: var(--bad-ink); font-weight: 700; font-size: 14px; }
.chipsel { display: flex; flex-wrap: wrap; gap: 8px; }
.chipsel button { min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--hair-2); background: var(--card);
                  color: var(--ink); font: inherit; font-weight: 650; font-size: 14.5px; cursor: pointer; }
.chipsel button[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.chipsel button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pacts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
.pacts .cbtn { margin: 0; width: 100%; }
.pacts .pri { flex-direction: column; min-height: 56px; background: var(--ink); color: var(--card); border-color: var(--ink); }
.pacts .pri small { font-weight: 600; font-size: 12.5px; opacity: .85; }
@media (min-width: 1000px) {
  .psheet { left: auto; top: 0; width: 440px; max-height: none; border-radius: 0; padding: 26px; }
}

/* Pipeline: a lead's file */
.file { background: var(--card); border-radius: 16px; padding: 16px 16px 16px 21px; box-shadow: var(--lift); border: 1px solid var(--edge);
        margin: 0 0 10px; position: relative; overflow: hidden; }
.file::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--sami) 50%, var(--jerry) 50%); }
.file h3 { margin: 0; font-size: 18px; font-weight: 760; color: var(--ink); overflow-wrap: anywhere; }
.file .tag { vertical-align: 2px; }
.file dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 15px; }
.file dt { color: var(--ink-2); font-weight: 650; }
.file dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.file .fby { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* v2 Home: cards are doors; the item dialog owns its selectors. */
.card.tap { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
            box-sizing: border-box; min-height: 44px; }
.card.tap .ct { display: block; margin: 0; font-size: 17px; line-height: 1.28; font-weight: 680; overflow-wrap: anywhere; }
.card.tap .st { display: block; }
.card.tap .cp { display: block; margin: 5px 0 0; color: var(--ink-2); font-size: 15px; overflow-wrap: anywhere; }
.card.tap .mv { display: inline-block; margin-top: 8px; padding: 5px 9px; border-radius: 10px;
                background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1.35; }
.card.tap:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bcards { padding: 8px 12px 2px; }
.bcards .card { box-shadow: none; }
.donehere { margin-top: 26px; }
.iscrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); }
.isheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-height: 92vh; overflow-y: auto; box-sizing: border-box;
          background: var(--card); color: var(--ink); border-radius: 22px 22px 0 0; padding: 20px 18px 24px; box-shadow: var(--lift); }
.isheet .kicker { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.isheet h3 { margin: 4px 0 0; font-size: 22px; font-weight: 760; overflow-wrap: anywhere; }
.isheet .istate { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 650; }
.isheet .inext { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; overflow-wrap: anywhere; }
.imoved { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--ink); font-size: 14px; }
.ifield { margin-top: 18px; }
.ifield label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ifield textarea { width: 100%; min-height: 80px; box-sizing: border-box; padding: 10px 12px; resize: vertical;
                   font: inherit; font-size: 16px; border-radius: 12px; border: 1.5px solid var(--hair-2); background: var(--card); color: var(--ink); }
.ifield textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.iacts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
.iacts .cbtn { width: 100%; min-height: 52px; box-sizing: border-box; margin: 0; padding: 10px 14px; font: inherit;
              font-size: 15.5px; font-weight: 680; flex-direction: column; line-height: 1.3; text-align: center; white-space: normal; }
.iacts .pri { background: var(--ink); color: var(--card); border-color: var(--ink); }
.iacts small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; }
.iacts .quiet { border-color: transparent; }
.iacts .cbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media(min-width:1000px) {
  .isheet { left: auto; top: 0; width: 440px; max-height: none; border-radius: 0; padding: 26px; }
}

/* Pipeline C4 — their file. These names belong to seeds, not the panel. */
.seedsection { margin: 18px 0 28px; }
.seedintro, .seedwhere, .seednext { color: var(--ink-2); line-height: 1.5; }
.seedintro { margin: 8px 0 18px; max-width: 65ch; }
.seedlist { display: grid; gap: 16px; }
.pc2, .pickhero { min-width: 0; overflow: hidden; border: 1px solid var(--edge);
  border-radius: 18px; background: var(--card); box-shadow: var(--lift); }
.pc2 .th, .pickhero .th, .tile .th { display: grid; place-items: center; aspect-ratio: 16 / 10;
  min-width: 0; background: var(--soft); color: var(--ink-2); overflow: hidden; }
.pc2 .th img, .pickhero .th img, .tile .th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.seedcopy { padding: 18px; min-width: 0; overflow-wrap: anywhere; }
.seedcopy h3 { margin: 0; font-size: 22px; }
.seedcopy h2 { margin: 8px 0; }
.seedwhere { margin: 5px 0 12px; }
.star { display: block; color: var(--ink); font-size: 13px; font-weight: 750; }
.seedactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.seedactions .cbtn { flex: 1 1 auto; }
.pickhero { margin-top: 8px; }
.pickhero .star { margin: 0 0 12px; }
.seednext { margin: 18px 0 28px; overflow-wrap: anywhere; }
.seedround { margin-top: 28px; }
.rhead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; font-size: 18px; margin: 0 0 12px; }
.rhead span { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.grid2t { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { display: block; min-width: 0; color: var(--ink); text-decoration: none;
  background: var(--card); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.tile.cur { border: 2px solid var(--ink); }
.tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.seedlabel { padding: 12px; overflow-wrap: anywhere; font-weight: 650; }
.seedlabel .star { margin-top: 6px; font-size: 12px; }
@media (max-width: 649.98px) {
  .pc2 { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
  .pc2 .th { position: relative; aspect-ratio: auto; align-self: stretch; }
  .pc2 .th img { position: absolute; inset: 0; }
  .pc2 .th span { padding: 12px; font-size: 14px; text-align: center; }
  .pc2 .seedcopy { align-self: start; padding: 12px 14px; }
  .pc2 .seedcopy h3 { font-size: 17.5px; line-height: 1.2; }
  .pc2 .seedwhere { margin: 4px 0 6px; font-size: 14px; line-height: 1.35; }
  .pc2 .star { margin: 6px 0; }
  .pc2 .seedactions { margin-top: 8px; gap: 6px; }
  .pc2 .seedactions .cbtn { min-height: 44px; margin-top: 0; padding: 0 10px; font-size: 13px; }
}
@media (min-width: 650px) {
  .seedlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pickhero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .pickhero .seedcopy { align-self: center; padding: 26px; }
}
@media (min-width: 1000px) {
  .grid2t { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Pipeline talk: private notes and per-person page likes. */
.pc2 { position: relative; }
.pc2 h3 a { color: inherit; text-decoration: none; }
.pc2 h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc2 h3 a:focus-visible { outline: none; }
.pc2 h3 a:focus-visible::after { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 18px; }
.pc2 .seedactions { position: relative; z-index: 2; pointer-events: none; }
.pc2 .seedactions > * { pointer-events: auto; }
.talk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.hearts { display: inline-flex; align-items: center; gap: 4px; }
.hearts b, .tstat b { color: var(--bad-ink); }
.sj { display: inline-flex; gap: 3px; }
.sj i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; border: 1.5px solid var(--hair-2); color: var(--ink-2); }
.sj i.s { background: var(--sami); border-color: var(--sami); color: var(--on-sami); }
.sj i.j { background: var(--jerry); border-color: var(--jerry); color: var(--on-jerry); }
.likerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.likerow > span { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.heart { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--hair-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.heart b { font-size: 17px; color: var(--ink-2); }
.heart[aria-pressed="true"] { border-color: var(--bad-ink); }
.heart[aria-pressed="true"] b { color: var(--bad-ink); }
.pickhero .th { position: relative; }
.pickhero a.th { text-decoration: none; }
.pickhero .th .open { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 750; background: var(--dock); color: var(--dock-on); }
.pickedby { margin: 4px 0 0; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.seedtalk { margin: 22px 0 6px; }
.seedtalk .notes .by span, .psheet .notes .by span { font-weight: 600; color: var(--ink-2); }
.notes .by.mine { display: flex; align-items: center; gap: 8px; }
.notes .by > .who { display: block; }
.notes .by.mine > .who { flex: 1; min-width: 0; }
.seedtalk .notes .by.mine > .who, .psheet .notes .by.mine > .who { color: inherit; font-weight: inherit; }
.nact { min-height: 44px; min-width: 44px; margin: -13px 0; padding: 0 2px 0 10px; border: 0; background: transparent;
        font: inherit; font-size: 13.5px; font-weight: 750; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nact.del { color: var(--bad-ink); }
.notes li.editing textarea { width: 100%; box-sizing: border-box; margin-top: 6px; min-height: 88px; padding: 10px 12px; font: inherit; font-size: 16px;
        border-radius: 12px; border: 1.5px solid var(--ink-2); background: var(--card); color: var(--ink); resize: vertical; }
.ebar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ebar .sp { flex: 1; }
.ebar .nact.del { padding-left: 0; margin: 0; flex: none; }
.ebar .cbtn { flex: none; min-width: 84px; margin: 0; box-sizing: border-box; }
.nact:focus-visible, .notes li.editing textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.notes .seederror { color: var(--bad-ink); }
.about { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: var(--soft); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.seedtalk .about, #seedsheet .about { display: table; }
.tbox { margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 12px; }
.tbox label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.tbox textarea { width: 100%; min-height: 64px; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 16px; border-radius: 12px; border: 1.5px solid var(--hair-2); background: var(--card); color: var(--ink); resize: vertical; }
.tbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.tbar p { margin: 0; font-size: 13px; color: var(--ink-2); }
.tbar .cbtn { flex: none; min-width: 88px; min-height: 44px; margin: 0; }
.tstat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); min-height: 20px; }
.psheet .th { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; margin: 14px 0 0; background: var(--soft); display: grid; place-items: center; }
.psheet .th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.sacts .full { grid-column: 1/-1; }
.sacts .cbtn, .sacts .heart { width: 100%; justify-content: center; min-height: 48px; margin: 0; box-sizing: border-box; padding: 8px 10px; white-space: normal; }
.psheet h4 { margin: 18px 0 4px; font-size: 14px; font-weight: 750; color: var(--ink-2); }
#seedsheet .psheet { max-height: 92dvh; padding-bottom: max(24px, env(safe-area-inset-bottom)); overflow-wrap: anywhere; overscroll-behavior: contain; }
body > .toast { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 82; }
#seedsheet .sacts > * { min-width: 0; }
.seederror { color: var(--bad-ink); font-size: 14px; font-weight: 650; }
.heart:focus-visible, .tbox textarea:focus-visible, #seedsheet .cbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pickhero a.th:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
@media (min-width: 1000px) {
  #seedsheet .psheet { max-height: 100dvh; }
  body > .toast { left: auto; right: 12px; width: 416px; }
}

/* Deal: the file card, three tabs, and the paper/signing overlays. */

.d-card{background:var(--card);border-radius:20px;box-shadow:var(--lift);border:1px solid var(--edge);overflow:hidden}

.d-deal{border-top:5px solid var(--sami)}
.d-deal .in{padding:16px 18px 18px}
.d-deal .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.d-kicker{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0}
.d-rows{margin:6px 0 14px;padding:0;list-style:none}
.d-rows li{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--hair);font-size:16px;line-height:1.35}
.d-rows li:first-child{border-top:0}
.d-rows .l{color:var(--ink-2)}
.d-rows .v{font-weight:600}
.d-warnword{color:var(--warn);font-weight:700}


.d-seg{display:flex;gap:6px;padding:14px 16px 4px;position:sticky;top:0;background:var(--bg);z-index:5}
.d-seg button{flex:1;min-height:44px;border-radius:999px;border:0;background:var(--soft);font-weight:700;font-size:15px;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:6px}
.d-seg button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.d-seg .num{font-size:12px;background:var(--sami);color:var(--on-sami);border-radius:999px;padding:0 6px;line-height:18px}
.d-panel{padding:6px 16px 24px}
.d-hint{color:var(--ink-2);font-size:15px;line-height:1.45;margin:6px 0 14px}
.d-h3{font-size:18px;font-weight:800;margin:20px 0 10px}


.d-plans{display:grid;gap:10px}
.d-plan{display:block;position:relative;background:var(--card);border:2px solid var(--hair);border-radius:18px;padding:14px 16px 14px 50px;cursor:pointer;box-shadow:var(--lift)}
.d-plan input{position:absolute;opacity:0;pointer-events:none}
.d-plan .dot{position:absolute;left:16px;top:17px;width:22px;height:22px;border-radius:50%;border:2px solid var(--hair-2)}
.d-plan:has(input:checked){border-color:var(--ink)}
.d-plan:has(input:checked) .dot{border:7px solid var(--ink)}
.d-plan:has(input:focus-visible){outline:3px solid var(--jerry);outline-offset:2px}
.d-plan .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.d-plan .nm{font-weight:800;font-size:18px}
.d-plan .pr{font-weight:800;font-size:18px}
.d-plan .pr small{font-weight:600;color:var(--ink-2);font-size:14px}
.d-plan ul{margin:6px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.45;color:var(--ink-2)}
.d-plan ul li::before{content:"· "}
.d-plan .lead{font-size:14px;color:var(--ink-2);margin-top:4px}
.d-add{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:2px solid var(--hair);border-radius:16px;padding:12px 14px;cursor:pointer;margin-top:8px}
.d-add input{position:absolute;opacity:0;pointer-events:none}
.d-add .box{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--hair-2);margin-top:1px;display:grid;place-items:center;font-size:15px;font-weight:900;color:transparent}
.d-add:has(input:checked){border-color:var(--ink);background:var(--soft)}
.d-add:has(input:checked) .box{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.d-add:has(input:focus-visible){outline:3px solid var(--jerry);outline-offset:2px}
.d-add:has(input:disabled){cursor:default}
.d-add .tx{flex:1;min-width:0}
.d-add .add-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:800;font-size:16px}
.d-add .sm{display:block;color:var(--ink-2);font-size:14px;line-height:1.35;margin-top:2px;font-weight:400}
.d-add .add-row>span:last-child{white-space:nowrap}
.d-add .add-row small{font-weight:600;color:var(--ink-2)}
.d-plan .inner{margin-top:10px;padding-top:4px;border-top:1px solid var(--hair)}
.d-plan .inner .d-kicker{font-size:12px}
.d-plan .inner .d-add{margin-top:8px;box-shadow:none}
.d-plan .was{display:block;font-size:13px;font-weight:600;color:var(--ink-2);text-align:right}
.d-tally{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:16px;margin-top:10px;padding:10px 2px 0;border-top:1px dashed var(--hair-2)}
.d-tag{display:inline-block;font-size:12.5px;font-weight:700;border-radius:6px;padding:1px 7px;margin-left:4px;vertical-align:1px}
.d-tag.no{background:var(--warn-soft);color:var(--warn)}
.d-tag.na{background:var(--soft);color:var(--ink-2)}
.d-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d-chip{display:block;position:relative;background:var(--card);border:2px solid var(--hair);border-radius:16px;padding:12px 14px;cursor:pointer;min-height:64px}
.d-chip input{position:absolute;opacity:0;pointer-events:none}
.d-chip:has(input:checked){border-color:var(--ink);background:var(--soft)}
.d-chip:has(input:focus-visible){outline:3px solid var(--jerry);outline-offset:2px}
.d-chip b{display:block;font-size:17px}
.d-chip span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.3}
.d-field{margin-top:10px}
.d-field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.d-field input,.d-field textarea{width:100%;font-size:16px;border:1.5px solid var(--hair-2);border-radius:12px;padding:12px;background:var(--card)}
.d-field textarea{min-height:96px;resize:vertical;line-height:1.4}
.d-lock{display:flex;gap:12px;align-items:flex-start;background:var(--live-soft);color:var(--ink);border-radius:16px;padding:12px 14px;margin-top:14px;font-size:15px;line-height:1.4}
.d-lock b{color:var(--live)}
.d-say{background:var(--stage);color:var(--stage-ink);border-radius:20px;padding:18px;margin-top:18px}
.d-say .d-kicker{color:var(--stage-2)}
.d-say p{font-size:18px;line-height:1.45;margin:8px 0 0}
.d-due{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-top:14px;font-size:16px}
.d-due .big{font-size:22px;font-weight:800}
.d-due .l{color:var(--ink-2)}


.d-have{background:var(--card);border-radius:18px;box-shadow:var(--lift);border:1px solid var(--edge)}
.d-have summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px;padding:0 16px;cursor:pointer;font-weight:700;font-size:16px}
.d-have summary::-webkit-details-marker{display:none}
.d-have summary .ok{color:var(--live)}
.d-have summary .chev{transition:transform .15s}
.d-have[open] summary .chev{transform:rotate(180deg)}
.d-have ul{list-style:none;margin:0;padding:0 16px 8px}
.d-have li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--hair)}
.d-have .lab{font-size:13px;color:var(--ink-2);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.d-have .val{font-weight:600;font-size:16px;grid-column:1}
.d-have .src{font-size:13.5px;color:var(--ink-2);grid-column:1}
.d-have .wrong{grid-column:2;grid-row:1 / span 3;align-self:center;min-height:44px;padding:0 12px;border-radius:999px;border:1.5px solid var(--hair-2);background:transparent;font-size:14px;font-weight:700;color:var(--ink-2)}
.d-qs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.d-q{background:var(--card);border-radius:18px;box-shadow:var(--lift);border:1px solid var(--edge);border-left:5px solid var(--hair-2)}
.d-q.done{border-left-color:var(--live)}
.d-q > button{display:grid;grid-template-columns:34px 1fr;gap:10px;width:100%;text-align:left;background:none;border:0;padding:14px 14px 12px;min-height:56px}
.d-q .no{width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-weight:800;font-size:15px}
.d-q.done .no{background:var(--live);color:var(--card)}
.d-q .tx{font-size:16px;line-height:1.4;font-weight:600}
.d-q .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:13px;color:var(--ink-2)}
.d-q .lands{background:var(--soft);border-radius:6px;padding:1px 7px;font-weight:700}
.d-q .ans{margin-top:8px;font-size:16px;color:var(--ink);background:var(--live-soft);border-radius:10px;padding:8px 10px;font-weight:500}
.d-q .ans small{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.d-q .edit{padding:0 14px 14px 58px}
.d-q .edit textarea{width:100%;min-height:72px;font-size:16px;border:1.5px solid var(--hair-2);border-radius:12px;padding:10px;background:var(--bg);line-height:1.4}
.d-editrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.d-q.check .tx::before{content:"Check: ";color:var(--warn)}
.d-progress{display:flex;align-items:center;gap:10px;margin:4px 0 12px;font-size:15px;color:var(--ink-2)}
.d-bar{flex:1;height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.d-bar i{display:block;height:100%;background:var(--live);border-radius:99px;width:0;transition:width .25s}
.d-sent{font-size:14px;color:var(--ink-2);margin:-4px 0 12px}


.d-block{background:var(--warn-soft);color:var(--ink);border-radius:18px;padding:14px 16px;margin-top:4px}
.d-block b.t{display:block;color:var(--warn);font-size:16px;margin-bottom:6px}
.d-block ol{margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.d-block li{margin:2px 0}
.d-filled{list-style:none;margin:0;padding:0;background:var(--card);border-radius:18px;box-shadow:var(--lift);border:1px solid var(--edge)}
.d-filled li{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:12px 16px;border-top:1px solid var(--hair);font-size:15.5px;line-height:1.35}
.d-filled li:first-child{border-top:0}
.d-filled .l{color:var(--ink-2)}
.d-filled .v{font-weight:600}
.d-small{font-size:14px;color:var(--ink-2);line-height:1.45;margin:14px 0 0}
.d-ready{background:var(--live-soft);border-radius:18px;padding:14px 16px;margin-top:4px;font-size:15px;line-height:1.45}
.d-ready b.t{display:block;color:var(--live);font-size:16px;margin-bottom:4px}
.d-okword{color:var(--live);font-weight:700}
.d-lockline{display:flex;gap:10px;align-items:flex-start;background:var(--soft);border-radius:14px;padding:12px 14px;margin:4px 0 14px;font-size:15px;line-height:1.4}


.d-signcard{margin-top:16px}
.d-signcard .in{padding:16px 18px 18px}
.d-signcard p.d{margin:6px 0 14px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.d-signcard .why{font-size:14.5px;color:var(--warn);font-weight:700;margin:10px 0 0;line-height:1.4}
.d-signedcard{border-top:5px solid var(--live)}
.d-signedcard .d-rows li{grid-template-columns:96px 1fr}
.d-signedcard img{display:block;height:42px;max-width:100%;margin-top:6px;background:var(--card);border-radius:6px;padding:2px 6px}

.d-signwrap{position:fixed;inset:0;z-index:78;display:none;flex-direction:column;background:var(--bg);color:var(--ink)}
.d-signwrap.open{display:flex}
.d-signwrap .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--hair)}
.d-signwrap .ph b{font-size:17px}
.d-signscroll{flex:1;overflow-y:auto;padding:18px 16px 24px}
.d-signscroll .d-step{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0}
.d-signscroll h2{font-size:27px;line-height:1.1;margin:6px 0 6px;font-weight:800;letter-spacing:-.01em}
.d-signscroll .d-h3{margin-top:22px}
.d-sum{list-style:none;margin:12px 0 10px;padding:0;background:var(--card);border-radius:18px;border:1px solid var(--edge);box-shadow:var(--lift)}
.d-sum li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:11px 16px;border-top:1px solid var(--hair);font-size:15.5px;line-height:1.35}
.d-sum li:first-child{border-top:0}
.d-sum .l{color:var(--ink-2)}
.d-sum .v{font-weight:600}
.d-chips.four{grid-template-columns:1fr 1fr}
.d-chips.four .d-chip{min-height:52px;display:flex;align-items:center}
.d-padbox{position:relative;margin-top:2px;background:var(--card);border:1.5px solid var(--hair-2);border-radius:16px;overflow:hidden}
.d-padbox canvas{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
.d-padbox .base{position:absolute;left:18px;right:18px;bottom:40px;border-top:1.5px solid var(--hair-2);pointer-events:none}
.d-padbox .x{position:absolute;left:20px;bottom:44px;color:var(--ink-2);font-weight:800;font-size:18px;pointer-events:none}
.d-padbox .tip{position:absolute;left:0;right:0;top:38px;text-align:center;color:var(--ink-2);font-size:16px;pointer-events:none}
.d-padrow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.d-linkbtn{background:none;border:0;padding:0 2px;min-height:44px;color:var(--ink-2);font-weight:700;text-decoration:underline;text-underline-offset:3px;font-size:15px}
.d-agree{display:flex;gap:12px;align-items:flex-start;min-height:44px;margin-top:18px;font-size:15.5px;line-height:1.4;cursor:pointer}
.d-agree input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--ink)}
.d-signedby{display:flex;align-items:center;gap:12px;background:var(--live-soft);border-radius:14px;padding:10px 12px;margin:14px 0 0;font-size:15px;line-height:1.35}
.d-signedby img{height:40px;background:var(--card);border-radius:8px;padding:2px 6px;flex:none;max-width:45%}
.d-signwrap .pf{padding:8px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--hair)}
.d-missing{font-size:14px;color:var(--ink-2);text-align:center;margin:2px 0 8px;line-height:1.35}
.d-paper.signed::after{content:none}
.d-paper .signedline{font-size:12.5px;font-weight:700;color:var(--live);border:1.5px solid var(--live);border-radius:6px;padding:6px 8px;margin:0 0 14px;background:var(--live-soft)}
.d-paper .sig img{display:block;height:44px;max-width:100%;margin:2px 0}
.d-paper .sig .sigwho{display:block;font-size:12px;color:var(--ink-2)}


.d-foot-stick{position:sticky;bottom:0;z-index:7;background:linear-gradient(to bottom,transparent,var(--bg) 16px)}
.d-actions{display:flex;gap:8px;padding:12px 16px 8px}


.d-unmatched{margin-top:10px;font-size:14.5px;color:var(--ink-2)}


.d-paperwrap{position:fixed;inset:0;z-index:79;display:none;flex-direction:column;background:var(--side);color:var(--ink)}
.d-paperwrap.open{display:flex}
.d-paperwrap .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--hair)}
.d-paperwrap .ph b{font-size:17px}
.d-paperscroll{flex:1;overflow-y:auto;padding:16px}
.d-paper{position:relative;background:var(--card);color:var(--ink);border-radius:6px;box-shadow:var(--lift);padding:26px 22px;font-size:14px;line-height:1.5;overflow:hidden}
.d-paper::after{content:"DRAFT";position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-size:96px;font-weight:800;color:color-mix(in srgb, var(--sami) 10%, transparent);pointer-events:none;letter-spacing:.06em}
.d-paper h3{font-size:19px;line-height:1.25;margin:0 0 4px}
.d-paper h4{font-size:15px;margin:18px 0 6px}
.d-paper .draftline{font-size:12.5px;font-weight:700;color:var(--bad-ink);border:1.5px solid var(--bad-line);border-radius:6px;padding:6px 8px;margin:0 0 14px;background:var(--bad-bg)}
.d-paper .readyline{font-size:12.5px;font-weight:700;color:var(--live);border:1.5px solid var(--live);border-radius:6px;padding:6px 8px;margin:0 0 14px;background:var(--live-soft)}
.d-paper table{width:100%;border-collapse:collapse;margin:6px 0}
.d-paper td{border:1px solid var(--hair-2);padding:7px 8px;vertical-align:top}
.d-paper td:first-child{font-weight:700;width:38%}
.d-paper .fill{font-weight:700;color:var(--ink);background:var(--warn-soft);padding:0 3px;border-radius:3px}
.d-paper .gap{color:var(--warn)}
.d-paper .omit{font-style:italic;color:var(--ink-2);border-left:3px solid var(--hair-2);padding-left:8px;margin:12px 0}
.d-paper ul{padding-left:18px;margin:4px 0}
.d-paper .sig{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;font-size:13px}
.d-paper .sig div{border-top:1px solid var(--ink);padding-top:4px}
.d-paper .pagebreak{border-top:2px dashed var(--hair-2);margin:22px -22px 18px;text-align:center;font-size:11px;color:var(--ink-2)}
.d-paperwrap .pf{display:flex;gap:8px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--hair)}


.dealscreen input[type="text"],.dealscreen textarea,.dealsign input[type="text"],.dealsheet textarea{font-size:16px}

.dealcard{margin:22px 0}
.dealcard .cbtn{width:100%;box-sizing:border-box}
.dealscreen{display:flex;flex-direction:column;min-height:calc(100dvh - 190px);min-width:0}
.dealscreen .back{display:inline-flex;align-items:center;align-self:flex-start;min-width:44px;text-decoration:none}
.dealscreen .d-seg{padding-left:0;padding-right:0}
.dealscreen .d-panel{padding-left:0;padding-right:0;flex:1}
.dealscreen .d-foot-stick{margin-top:auto;flex:none;background:var(--bg)}
.dealscreen .d-actions{padding:10px 0 8px}
.dealscreen .d-actions .cbtn{flex:1;margin:0;min-width:0;padding:10px 12px;line-height:1.3}
.dealscreen button,.dealpaper button,.dealsign button,.dealsheet button{min-width:44px;min-height:44px;font-family:inherit}
.dealscreen .dealdelete{border:0;border-radius:0;background:none;color:var(--bad-ink);padding:10px 0;min-height:48px;text-align:left}
.dealscreen input,.dealscreen textarea,.dealsign input,.dealsheet textarea{font-size:16px;color:var(--ink);box-sizing:border-box}
.dealscreen .d-q > button{color:var(--ink);border-radius:16px}
.dealscreen .d-q.done .no{color:var(--live-ink)}
.dealscreen .d-q .edit label{display:block;font-size:15px;color:var(--ink-2);margin:0 0 6px}
.dealscreen .d-q .edit textarea{display:block}
.dealscreen .d-signcard .cbtn{width:100%;box-sizing:border-box}
.dealscreen button:disabled,.dealpaper button:disabled,.dealsign button:disabled,.dealsheet button:disabled{opacity:1;background:var(--soft);color:var(--ink-2);border-color:var(--hair);cursor:default}
.dealscreen .d-plan:has(input:disabled),.dealscreen .d-chip:has(input:disabled){cursor:default}
.dealscreen .d-q > button:disabled{background:var(--soft);color:var(--ink-2)}
.dealscreen .d-seg .num{background:var(--sami);color:var(--on-sami)}
.dealsign,.dealpaper,.dealsheet{height:100dvh;box-sizing:border-box;isolation:isolate}
.dealsheet{z-index:80}
.dealpaper .ph,.dealsign .ph,.dealsheet .ph,.dealpaper .pf,.dealsign .pf,.dealsheet .pf{flex:none}
.dealpaper .ph .cbtn,.dealsign .ph .cbtn,.dealsheet .ph .cbtn{margin:0}
.dealpaper .pf .cbtn,.dealsign .pf .cbtn,.dealsheet .pf .cbtn{width:100%;box-sizing:border-box;margin:0;white-space:normal;padding:10px 16px}
.dealsign .pf{display:block}
.dealpaper .d-paperscroll,.dealsheet .d-paperscroll,.dealsign .d-signscroll{min-height:0;overscroll-behavior:contain;scroll-padding:12px;overflow-x:hidden}
.dealpaper .d-paper,.dealsign .d-signscroll > *,.dealsheet .d-paperscroll > *{max-width:760px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.dealpaper .d-paper{overflow-wrap:anywhere}
.dealpaper .d-paper h1{font-size:26px;line-height:1.2;margin:12px 0}
.dealpaper .d-paper h2{font-size:21px;line-height:1.25;margin:20px 0 8px}
.dealpaper .d-paper h3{font-size:18px;margin:18px 0 8px}
.dealpaper .d-paper h4{font-size:16px}
.dealpaper .d-paper table{table-layout:fixed}
.dealpaper .d-paper td{overflow-wrap:anywhere}
.dealpaper .d-paper hr{border:0;border-top:1px solid var(--hair-2);margin:20px 0}
.dealpaper .d-paper .sig img{object-fit:contain;object-position:left;max-width:100%;height:auto;max-height:100px}
.dealsign .d-signedby [data-signature]{display:block;width:42%;flex:none;background:var(--on-ink);border-radius:8px}
.dealsign .d-signedby img{display:block;max-width:100%;height:auto;max-height:60px;object-fit:contain}
.dealsign .d-padrow .cbtn{margin:0;padding:4px 2px;border:0;border-radius:0;white-space:normal}
.dealsign .d-agree{padding-bottom:8px;min-height:52px;box-sizing:border-box}
.dealsign .d-padbox{color:var(--ink)}
.dealsign .d-field input{color:var(--ink);min-height:48px}
.dealsign .d-padbox .tip{color:var(--ink-2)}
.dealsign .d-signedby{background:var(--soft)}
.dealsheet .dealmessage{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--card);border-radius:16px;padding:16px;line-height:1.5}
.dealsheet .d-unmatched p{white-space:pre-wrap;overflow-wrap:anywhere}
.deal-route #toast{color:var(--ink);background:var(--card)}
body > #toast{color:var(--ink);background:var(--card)}
.dealscreen *, .dealpaper *, .dealsign *, .dealsheet *{box-sizing:border-box}
.dealscreen .v,.dealscreen .tx,.dealscreen .ans,.dealsign .v{overflow-wrap:anywhere;min-width:0}
@media(min-width:1000px){
  .dealscreen{min-height:calc(100dvh - 150px)}
  .dealscreen .d-plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dealscreen .d-plan{padding-left:42px;padding-right:12px}
  .dealscreen .d-plan .dot{left:12px}
  .dealscreen .d-actions{max-width:760px;width:100%;margin:auto}
}
@media print{
  html,body{height:auto!important;overflow:visible!important;position:static!important}
  body > *{display:none!important}
  body > .dealpaper{display:block!important;position:static!important;height:auto!important;overflow:visible!important;background:var(--card)}
  .dealpaper .ph,.dealpaper .pf{display:none!important}
  .dealpaper .d-paperscroll{display:block;overflow:visible;padding:0}
  .dealpaper .d-paper{box-shadow:none;border:0;max-width:none;padding:0;overflow:visible}
  .dealpaper .d-paper::after{display:none}
}

/* 157.7 — the start card, the start sheet, the full-screen pad and their copy. */
.dealstart{margin:22px 0}
.dealstart .d-hint{font-size:16px;margin:8px 0 16px}
.dealstart .cbtn{width:100%;box-sizing:border-box}
.pfield .d-tick{display:flex;gap:12px;align-items:flex-start;min-height:44px;margin:0;padding-top:10px;font-size:16px;font-weight:700;line-height:1.35;cursor:pointer}
.pfield .d-tick[hidden]{display:none}
.pfield .d-tick input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--ink)}
.psheet .d-tickhint{margin:0;padding-left:36px}
.pfield .d-subtick{margin-left:36px}
.pacts .pri[data-sub]::after{content:attr(data-sub);font-weight:600;font-size:12.5px;opacity:.85}
.dealstartsheet .pacts{position:sticky;bottom:0;z-index:1;background:var(--card);padding:10px 0 2px;box-shadow:0 -12px 12px -12px var(--hair-2)}
.dealsign .d-padbox{display:block;width:100%;height:170px;padding:0;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.dealsign .d-padbox:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.d-padbox img{position:absolute;left:44px;right:18px;top:44px;bottom:34px;width:calc(100% - 62px);height:calc(100% - 78px);object-fit:contain;object-position:left bottom;pointer-events:none}
.d-padbox.inked .tip{top:10px;left:auto;right:16px;font-size:15px;font-weight:700}
.dealsign .d-padrow{justify-content:flex-start}
.dealpad{position:fixed;inset:0;z-index:90;overflow:hidden;background:var(--card);color:var(--ink);touch-action:none;overscroll-behavior:contain}
.dealpad .padstage{position:absolute;left:0;top:0;width:100vw;height:100vh;transform-origin:0 0;background:var(--card);touch-action:none}
.dealpad canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.dealpad .padline{position:absolute;left:56px;right:56px;bottom:28%;border-top:2px solid var(--hair-2);pointer-events:none}
.dealpad .padx{position:absolute;left:28px;bottom:calc(28% + 4px);font-size:20px;font-weight:800;color:var(--ink-2);pointer-events:none}
.dealpad .padwho{position:absolute;left:140px;right:140px;top:12px;margin:0;text-align:center;line-height:1.3;pointer-events:none}
.dealpad .padwho b{display:block;font-size:18px;font-weight:800;outline:none;overflow-wrap:anywhere}
.dealpad .padwho span{display:block;font-size:15px;color:var(--ink-2)}
.dealpad .padtip{position:absolute;left:0;right:0;top:40%;margin:0;text-align:center;font-size:18px;color:var(--ink-2);pointer-events:none}
.dealpad.inked .padtip{display:none}
.dealpad button{position:absolute;margin:0;min-height:44px;min-width:44px;font-family:inherit}
.dealpad .padback{left:12px;top:10px;border:0;background:none;padding:0 10px;font-size:16px;font-weight:700;color:var(--ink-2)}
.dealpad .padclear,.dealpad .paddone{bottom:16px;min-width:120px;min-height:52px}
.dealpad .padclear{left:16px}
.dealpad .paddone{right:16px}
.dealpad button:disabled{background:var(--soft);color:var(--ink-2);border-color:var(--hair);cursor:default}
.dealcopy{margin-bottom:12px}
.dealcopy .d-linkbtn{margin-top:4px;color:var(--ink)}

/* The setup amount is always typed, with the currency outside the field. */
.dealamount{display:flex;align-items:center;gap:8px}
.dealsetup input{font-size:16px;min-width:0;min-height:48px;flex:1}

/* ── the prices (card 162): Home's "What it costs" card and the Prices page ── */
.pz-card{margin:12px 0 14px}
.pz-card .d-h3{margin:0 0 8px}
.pz-sum{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--hair);border-radius:18px;box-shadow:var(--lift);padding:4px 16px 0}
.pz-sum:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pz-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;padding:10px 0;border-top:1px solid var(--hair)}
.pz-row:first-child{border-top:0}
.pz-row b{font-size:17px;font-weight:800}
.pz-p{font-size:17px;font-weight:800;text-align:right}
.pz-p small{font-weight:600;color:var(--ink-2);font-size:13px}
.pz-row .d-tag,.pz-ok{grid-column:1/-1;justify-self:start;margin:0}
.pz-ok{font-size:13.5px;color:var(--ink-2)}
.pz-more{display:block;border-top:1px solid var(--hair);padding:13px 0 14px;font-weight:750;color:var(--jerry)}
.pz-sub{color:var(--ink-2);font-size:15px;line-height:1.45;margin:14px 0 4px}
.pz-plan{padding-left:16px;cursor:default}
.pz-plan .lead b{color:var(--ink);font-weight:750}
.pz-plan ul li.pz-no{color:var(--ink-2)}
.pz-none{background:var(--soft);box-shadow:none}
.pz-terms{list-style:none;margin:0;padding:0;background:var(--card);border:2px solid var(--hair);border-radius:18px;box-shadow:var(--lift)}
.pz-terms li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:12px 16px;border-top:1px solid var(--hair);font-size:15px;line-height:1.45}
.pz-terms li:first-child{border-top:0}
.pz-terms b{font-weight:800}
.pz-terms span{color:var(--ink-2)}
.pz-foot{font-size:14px;color:var(--ink-2);margin:14px 0 24px;line-height:1.5}
.pz-foot .d-tag{margin:0 4px 0 0}

/* ---- 3 · Day / Where: STACKED, at every width (row 104.44, Sami 2026-10-04).
   Side by side, iOS Safari draws a filled date box wider than its column and
   will not shrink it, so Day ran into Where on his iPhone while every engine
   here drew a gap. Stacked, each box has the whole row and nothing beside it. ---- */
.mm .setmeet { grid-template-columns: minmax(0, 1fr); }
.mm .setmeet > div { min-width: 0; }
.mm .setmeet .inp, .addrow.meetrow input, .pm-when .inp { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.addrow.meetrow input { flex: 1 1 100%; }
/* Day and Time: HALF the row, and the browser's own date-box styling OFF (row 104.45,
   Sami 2026-10-04: "its outside of the card, make it half its size"). iOS Safari sizes
   a native date box itself and ignores the width it is given — the cause of both the
   overlap and the overrun — so appearance:none is what makes the 50% stick. The id
   selectors outrank the shared width rules above on purpose. */
#meetdate, #mp-date, #mp-time { -webkit-appearance: none; appearance: none; width: 50%; max-width: 50%; }
.addrow.meetrow #meetdate { flex: 0 0 50%; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* ---- 1 · Pick the logo ---- */
.lg-strip { display: flex; gap: 6px; margin: 10px 0 2px; overflow: hidden; }
.lg-strip img { width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--hair); flex: none; }
.lg-card .why { margin: 8px 0 12px; color: var(--ink-2); font-size: 14.5px; }
#decidebody .lg-h { color: var(--ink); text-transform: none; font-size: 24px; font-weight: 780; margin: 6px 0 4px; letter-spacing: -.01em; }
.lg-lhead .meta { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; }
.lg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 250px; }
@media (min-width: 640px) { .lg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lg-tile { position: relative; padding: 0; border: 2px solid var(--hair); border-radius: 16px; background: var(--card);
             overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.lg-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-tile.on { border-color: var(--me, var(--jerry)); box-shadow: 0 0 0 2px var(--me, var(--jerry)); }
[data-me="owner"] .lg-tile.on, [data-me="owner"] .lg-slot.full { --me: var(--sami); }
.lg-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.lg-rank { position: absolute; top: 8px; left: 8px; min-width: 44px; padding: 4px 10px; border-radius: 99px;
             background: var(--me, var(--jerry)); color: var(--on-jerry); font-weight: 800; font-size: 14px; text-align: center; }
[data-me="owner"] .lg-rank { background: var(--sami); color: var(--on-sami); }
.lg-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 30;
            display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--card);
            border-top: 1px solid var(--hair); box-shadow: 0 -6px 20px rgba(0,0,0,.06); flex-wrap: wrap; box-sizing: border-box; }
@media (min-width: 1000px) { .lg-bar { left: 240px; bottom: 0; } }
.lg-slots { display: flex; gap: 6px; flex: none; }
.lg-slot { position: relative; width: 48px; height: 48px; border-radius: 10px; border: 2px dashed var(--hair-2);
             display: grid; place-items: center; overflow: hidden; }
.lg-slot.full { border: 2px solid var(--me, var(--jerry)); }
.lg-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-slot b { position: relative; font-size: 11px; font-weight: 800; color: var(--ink-2); }
.lg-slot.full b { align-self: end; background: var(--card); padding: 0 4px; border-radius: 6px 6px 0 0; color: var(--ink); }
.lg-save { flex: 1 1 auto; min-height: 50px; }
.lg-save:disabled { cursor: default; background: var(--soft); color: var(--ink-2); border-color: var(--hair-2); }
.lg-results { display: grid; gap: 12px; }
@media (min-width: 760px) { .lg-results { grid-template-columns: 1fr 1fr; } }
.lg-pick ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.lg-pick li { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; border: 1.5px solid transparent; }
.lg-pick li img { width: 76px; height: 76px; border-radius: 10px; border: 1px solid var(--hair); flex: none; }
.lg-pick li span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--ink); }
.lg-pick li.both { border-color: var(--live-ink); background: var(--live-soft); }
.lg-pick li small { font-size: 12.5px; color: var(--ink-2); }
.lg-pick li em { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--live-ink); }

/* ---- 2 · Meet with a prospect ---- */
.quick .pm-wide { grid-column: 1 / -1; }
.pm-when { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pm-when > div { min-width: 0; }
.pm-when > div + div { margin-top: 14px; }
.pm-up ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.pm-up li { display: flex; flex-direction: column; gap: 1px; padding-top: 10px; border-top: 1px solid var(--hair); }
.pm-up li:first-child { border-top: 0; padding-top: 0; }
.pm-up li b { font-size: 16px; color: var(--ink); }
.pm-up li span { font-size: 15px; color: var(--ink); }
.pm-up li small { font-size: 13px; color: var(--ink-2); }


.lg-card, .pm-up { margin-top: 12px; }
.lg-back { display: inline-flex; align-items: center; min-width: 44px; }
.lg-change { margin-top: 12px; }
.lg-bar .cbtn { margin: 0; min-width: 44px; white-space: normal; padding: 8px 12px; }
.lg-save { flex-basis: 110px; }
.lg-error { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--bad-ink); }
/* The global live-ink is text ON a solid live fill. On this soft fill,
   scope the ink to the existing readable live token in both themes. */
.lg-pick { --live-ink: var(--live); min-width: 0; overflow-wrap: anywhere; }

/* Card pick — both faces share a neutral desk in either console theme. */
:root { --cp-paper: rgb(244,239,230); --cp-room: rgb(20,18,16); }
.cp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 2px; }
.cp-thumb { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.cp-thumb b { color: var(--ink); font-weight: 750; }
.cp-desk { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; border-radius: 12px; background: var(--cp-paper); }
.cp-desk img { display: block; width: 100%; height: auto; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.12); }
.cp-card .why { margin: 10px 0 12px; }
.cp-card .cbtn, .cp-change { min-width: 44px; }
.cp-back { display: inline-flex; align-items: center; min-width: 44px; }
#decidebody .cp-h { color: var(--ink); text-transform: none; font-size: 24px; font-weight: 780; margin: 6px 0 4px; letter-spacing: -.01em; }
.cp-head .meta { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.cp-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
@media (min-width: 760px) {
  .cp-pair { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cp-opt { min-width: 0; background: var(--card); border: 2px solid var(--hair); border-radius: 16px; padding: 14px; }
.cp-opt.mine { border-color: var(--me, var(--jerry)); box-shadow: 0 0 0 2px var(--me, var(--jerry)); }
[data-me="owner"] .cp-opt.mine { --me: var(--sami); }
.cp-opt h4 { margin: 0; font-size: 17px; font-weight: 750; color: var(--ink); }
.cp-opt p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.cp-opt .cp-desk { margin: 10px 0 12px; padding: 14px; }
.cp-opt .cbtn { width: 100%; min-width: 44px; box-sizing: border-box; }
.cp-opt .cbtn:disabled { opacity: 1; cursor: default; background: var(--soft); color: var(--ink-2); border-color: var(--hair-2); }
.cp-tag { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 750;
  background: var(--soft); color: var(--ink); }
.cp-tag.both { background: var(--live-soft); color: var(--live); }
.cp-change { margin-top: 12px; }
.cp-error { color: var(--bad-ink); font-size: 14px; }
button.cp-desk { position: relative; width: 100%; min-width: 44px; min-height: 44px; box-sizing: border-box; border: 0; font: inherit; cursor: zoom-in; }
button.cp-desk:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cp-zoom { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center;
  background: rgba(20,18,16,.72); color: var(--cp-paper); font-size: 14px; line-height: 1; }
.cp-pair .cp-desk { padding: 8px; gap: 5px; }

html.cp-open, html.cp-open body, html.cp-open #main { overflow: hidden; }
#cp-view { position: fixed; inset: 0; z-index: 300; box-sizing: border-box; background: var(--cp-room); color: var(--cp-paper);
  display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); }
.cp-vbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none; }
.cp-vname { flex: 1 1 auto; min-width: 0; text-align: center; font: 700 16px/1.25 system-ui, sans-serif; overflow-wrap: anywhere; }
.cp-vname [data-card-count] { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; opacity: .7; }
.cp-vtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; flex: none; min-width: 0; padding: 0 16px 16px; }
.cp-vtabs button, .cp-vbar button { font: 700 14px/1.2 system-ui, sans-serif; color: inherit; background: transparent;
  border: 1px solid rgba(244,239,230,.35); border-radius: 99px; min-width: 44px; min-height: 44px; box-sizing: border-box;
  padding: 6px 8px; cursor: pointer; }
.cp-vtabs button { flex: none; width: 44px; }
.cp-vtabs button[aria-pressed="true"] { background: var(--cp-paper); color: var(--cp-room); border-color: var(--cp-paper); }
.cp-vbar button { flex: none; width: 44px; padding: 0; font-size: 22px; }
.cp-vbar .cp-vx { font-size: 18px; }
.cp-vtabs button:focus-visible, .cp-vbar button:focus-visible { outline: 3px solid var(--cp-paper); outline-offset: 2px; }
/* A phone stacks landscape faces; a wide room fits both below the bar. */
.cp-vfaces { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 6px 16px 24px; }
.cp-vfaces figure { margin: 0; flex: none; width: min(100%, 460px); }
.cp-vfaces img { display: block; width: 100%; height: auto; aspect-ratio: 3.5 / 2; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.cp-vfaces figcaption { margin-top: 8px; text-align: center; font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
@media (min-width: 760px) and (min-aspect-ratio: 4/5) {
  .cp-vfaces { flex-direction: row; justify-content: center; align-items: center; overflow: hidden; }
  .cp-vfaces figure { width: calc((100% - 18px) / 2); height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; min-width: 0; min-height: 0; }
  .cp-vfaces img { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 20px); flex: none; }
}
.pm-up li a { display: flex; flex-direction: column; gap: 1px; min-height: 44px; justify-content: center; color: var(--ink); text-decoration: none; }
.pm-up li a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pm-up, .pm-file { overflow-wrap: anywhere; }
.pm-file { color: var(--ink); }
#mp-choices button { max-width: 100%; overflow-wrap: anywhere; }

.pm-cancel { display: flex; width: fit-content; max-width: 100%; min-width: 44px; box-sizing: border-box; white-space: normal; }