/* portal.css: the StayBooked client portal, P2 15/08/2026 (P3 micro fixes the same night).
   The design is D1's mockup (_mockups\client-portal\one\css\one.css), ported: paper ground,
   coloured subject tiles with a mark and a number, a four-stage plan strip, chips with a hard
   under-edge, Instrument Serif display over Karla body, warm two-step shadow, reveal on scroll.
   Measured bar: 05-Assets\looks-bank\client-portal.md v2 (Google Business Profile landing,
   Headspace, Monzo). Text on orange is ALWAYS ink. Orange as text on paper uses the darker cut. */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-italic.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/karla-300.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/karla-400.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/karla-600.woff2') format('woff2'); }

:root {
  --paper: #f9f4f2;
  --paper-2: #fffdfb;
  --ink: #1f1b18;
  --ink-2: #5b544e;
  --ink-3: #8a827b;
  --orange: #ff6200;
  --orange-hover: #ff7418;
  --orange-text: #d94f00;
  --on-orange: #1f1b18;
  /* subject tints: one small warm palette, each subject its own */
  --t-services: #ffe3d1;   --t-services-deep: #d94f00;
  --t-photos:   #ffefb8;   --t-photos-deep:   #9a6b00;
  --t-details:  #dcefdd;   --t-details-deep:  #2f7a3d;
  --t-qbcc:     #dbe8fa;   --t-qbcc-deep:     #2b5fa8;
  --t-google:   #d6efee;   --t-google-deep:   #1f7d78;
  --t-website:  #f6dfe6;   --t-website-deep:  #b23c5e;
  --t-bookings: #e7e2f8;   --t-bookings-deep: #5b48a8;
  --t-number:   #ffe3d1;   --t-number-deep:   #c24a00;
  --t-invoicing:#dcefe9;   --t-invoicing-deep:#22796a;
  --t-reviews:  #f8e8c2;   --t-reviews-deep:  #9a6a10;
  --t-questions:#fbe0d0;   --t-questions-deep:#b8480a;
  --craft-shadow-hue: 70, 50, 30;
  --craft-line-hue: 120, 95, 65;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Karla', system-ui, sans-serif;
  --r-sm: 12px; --r-md: 18px; --r-tile: 24px; --r-pill: 999px; --r-circle: 50%;
  --shadow-soft: 0 14px 40px -24px rgba(var(--craft-shadow-hue), 0.28);
  --shadow-lift: 0 24px 60px -28px rgba(var(--craft-shadow-hue), 0.35);
  --line: rgba(var(--craft-line-hue), 0.16);
  --line-strong: rgba(var(--craft-line-hue), 0.28);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 120px;
  --section-pad: clamp(72px, 10.5vw, 120px);
  --gutter: clamp(16px, 4vw, 90px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 0.8s; --dur-hover: 0.3s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  min-height: 100dvh;
}
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color 0.2s var(--ease); }
a:hover { color: var(--orange-hover); }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
[hidden] { display: none !important; }
strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) var(--s-9); }

/* ── type ─────────────────────────────────────────────────────────────────── */
h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 7.5vw, 5.5rem); font-weight: 400; line-height: 1.03; letter-spacing: -0.015em; }
h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.6vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; }
h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.625rem, 2.2vw, 2rem); line-height: 1.12; letter-spacing: -0.005em; }
.lead { font-size: 1.0625rem; font-weight: 300; line-height: 1.8; max-width: 500px; color: var(--ink-2); }
.eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink-2); }
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.7; flex-shrink: 0; }
.accent { font-style: italic; color: var(--orange-text); }

/* ── the gate (logged out: logo, one field, one line; names no client) ─────── */
.gate { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6); padding: var(--s-5); text-align: center; }
.gate-logo { width: 220px; height: auto; }
#gate-form { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: 360px; }
.gate-label { font-size: 0.9375rem; color: var(--ink-2); text-align: left; }
.gate-help { font-size: 0.875rem; color: var(--ink-3); text-align: left; margin-top: -6px; line-height: 1.5; }
#gate-phone { width: 100%; min-height: 54px; padding: 12px 16px; background: var(--paper-2); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); font-size: 1.125rem; letter-spacing: 0.02em; }
#gate-phone:focus { outline: none; border-color: var(--orange-text); box-shadow: 0 0 0 4px var(--t-services); }
#gate-phone::placeholder { color: var(--ink-3); }
.btn-primary { min-height: 54px; padding: 12px 22px; background: var(--orange); color: var(--on-orange); border: none; border-radius: var(--r-pill); font-weight: 600; font-size: 1.0625rem; cursor: pointer; box-shadow: 0 3px 0 0 #b84600; transition: background-color var(--dur-hover) var(--ease), transform 0.12s var(--ease), box-shadow 0.12s var(--ease); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 0 #b84600; }
.gate-note { color: var(--ink-2); font-size: 0.9375rem; max-width: 360px; min-height: 1.5em; line-height: 1.55; }
.noscript-line { max-width: 360px; margin: 0 auto; padding: var(--s-6) var(--s-5); text-align: center; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }

/* ── top bar ──────────────────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding: var(--s-5) 0; }
.lockup { width: 150px; height: auto; flex-shrink: 0; }
.ben-pill { display: inline-flex; align-items: center; gap: var(--s-3); padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: var(--shadow-soft); transition: box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.ben-pill:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.ben-pill-text { display: flex; flex-direction: column; line-height: 1.2; }
.ben-pill-text strong { font-size: 0.9375rem; }
.ben-pill-text span { font-size: 0.8125rem; color: var(--ink-3); }
@media (max-width: 559px) { .ben-pill-text { display: none; } .ben-pill { padding: 4px; } }
.avatar { position: relative; width: 40px; height: 40px; border-radius: var(--r-circle); flex-shrink: 0; background: var(--orange); color: var(--on-orange); font-family: var(--font-display); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.6rem; }

/* admin-only: the view toggle. Wraps under the lockup below 400px, so 320 never scrolls sideways. */
.view-toggle { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: var(--shadow-soft); flex-shrink: 0; }
.view-toggle .vt { min-height: 44px; padding: 6px 14px; border: none; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.view-toggle .vt.on { background: var(--orange); color: var(--on-orange); }
@media (max-width: 399px) { .view-toggle { width: 100%; justify-content: stretch; } .view-toggle .vt { flex: 1; text-align: center; padding: 6px 8px; } }
.viewing-as { margin: 0 0 var(--s-4); padding: 10px 16px; border-radius: var(--r-md); background: var(--orange); color: var(--on-orange); font-weight: 600; font-size: 0.9375rem; text-align: center; }

/* ── the first thing after the invite: the contact-number card, above the hero (P3) ── */
.first-thing { margin: var(--s-2) 0 var(--s-3); }
.first-thing .tile-band { padding-top: var(--s-5); }
@media (min-width: 1024px) { .first-thing { max-width: 640px; } }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.top { display: grid; gap: var(--s-6); padding: var(--s-6) 0 var(--s-7); align-items: end; grid-template-areas: "hero" "plan" "ben"; }
.hero-left { grid-area: hero; }
.plan { grid-area: plan; }
.ben-card { grid-area: ben; }
.hero-left .eyebrow { margin-bottom: var(--s-4); }
.progress-line { margin-top: var(--s-5); font-size: 1.125rem; color: var(--ink-2); }
.progress-line strong { color: var(--ink); font-weight: 600; }
.hero-left .lead { margin-top: var(--s-4); }
.ben-card { background: var(--paper-2); border-radius: var(--r-md); box-shadow: var(--shadow-soft); padding: var(--s-5); transition: box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.ben-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.ben-card-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.ben-card-head div { display: flex; flex-direction: column; line-height: 1.25; }
.ben-card-head span { font-size: 0.875rem; color: var(--ink-3); }

.done-list { list-style: none; display: flex; flex-direction: column; }
.done-list li { display: flex; align-items: center; gap: var(--s-3); padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.done-list li:first-child { border-top: 0; }
.done-list li > span:nth-child(2) { flex: 1; }
.done-list time, .done-list em { font-style: normal; font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 559px) { .done-list em { white-space: normal; text-align: right; max-width: 38%; line-height: 1.3; } }
.dot { width: 22px; height: 22px; border-radius: var(--r-circle); flex-shrink: 0; border: 1.5px solid var(--line-strong); position: relative; transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
li.done .dot { background: var(--orange); border-color: var(--orange); }
li.done .dot::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 10px; border: solid var(--on-orange); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
li.inprogress .dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--orange); }
/* admin: the state is a button that cycles waiting -> in progress -> done */
.done-list button.task-state { border: 1.5px solid var(--line-strong); background: var(--paper-2); border-radius: var(--r-pill); min-height: 44px; padding: 6px 12px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.done-list button.task-state:hover { border-color: var(--orange-text); color: var(--orange-text); }

/* ── the plan strip ───────────────────────────────────────────────────────── */
.plan { padding: 0; }
.plan-strip { list-style: none; display: grid; gap: var(--s-4); position: relative; }
.stage { position: relative; background: var(--paper-2); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 44px 1fr; gap: 6px var(--s-4); align-items: start; transition: box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.stage:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.stage-num { width: 44px; height: 44px; border-radius: var(--r-circle); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-2); border: 1.5px solid var(--line-strong); grid-row: span 3; transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.stage.here .stage-num { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }
.stage.past .stage-num { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }
.stage-name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.stage-line { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.you-are-here { display: inline-flex; align-self: start; justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--orange-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.stage.here { outline: 2px solid var(--orange); outline-offset: 0; }
.stage.s-1 { background: var(--t-services); }
.stage.s-2 { background: var(--t-website); }
.stage.s-3 { background: var(--t-bookings); }
.stage.s-4 { background: var(--t-details); }
.stage.s-2 .stage-num { border-color: var(--t-website-deep); color: var(--t-website-deep); }
.stage.s-3 .stage-num { border-color: var(--t-bookings-deep); color: var(--t-bookings-deep); }
.stage.s-4 .stage-num { border-color: var(--t-details-deep); color: var(--t-details-deep); }
.stage.here .stage-num { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }

/* ── groups ───────────────────────────────────────────────────────────────── */
.group { padding-block: var(--section-pad); border-top: 1px solid var(--line); }
.group-head { margin-bottom: var(--s-7); }
.group-head .eyebrow { margin-bottom: var(--s-4); }
.group-head .lead { margin-top: var(--s-4); }
.tiles { display: grid; gap: var(--s-5); align-items: start; }
.tiles.now { display: block; }
.tiles.now .tile { break-inside: avoid; margin-bottom: var(--s-5); }

/* ── the subject tile: a flat coloured band with the mark, then a body ────── */
.tile { background: var(--paper-2); border-radius: var(--r-tile); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.tile-band { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--tint); display: block; width: 100%; text-align: left; border: 0; cursor: pointer; }
.tile-band:focus-visible { outline-offset: -4px; }
.tile-band h3 { margin-top: var(--s-4); }
.tile-band .why { margin-top: 6px; font-size: 1.0625rem; color: var(--ink); }
.tile-band .why-now { margin-top: var(--s-3); font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.tile-band .why-now strong { color: var(--deep); }
.mark { width: 48px; height: 48px; border-radius: var(--r-circle); background: var(--paper-2); color: var(--deep); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: transform var(--dur-hover) var(--ease); }
.tile:hover .mark { transform: rotate(-6deg) scale(1.05); }
.mark svg { width: 24px; height: 24px; fill: currentColor; }
.mark svg[stroke] { fill: none; }
.tile-num { position: absolute; top: var(--s-5); right: var(--s-5); font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--deep); opacity: 0.55; }
.tile-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.state { align-self: flex-start; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; padding: 5px 12px; border-radius: var(--r-pill); background: var(--tint); color: var(--deep); margin-bottom: var(--s-2); }
.state.calm { background: var(--t-details); color: var(--t-details-deep); }
.item-q { font-weight: 600; margin-top: var(--s-3); }
.item-q:first-child, .state + .item-q { margin-top: 0; }
.item-optional { margin-left: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.item-help { font-size: 0.9375rem; color: var(--ink-2); margin-top: -6px; line-height: 1.5; }
.item { display: flex; flex-direction: column; gap: var(--s-3); }
.item + .item { margin-top: var(--s-2); }

/* collapsed tile: band only, with a "tap to open" cue; body hidden */
.tile.closed .tile-body { display: none; }
.tile.closed .tile-band::after { content: "Tap to open"; position: absolute; right: var(--s-5); bottom: var(--s-4); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); opacity: 0.85; }
.tile.closed .tile-band { padding-bottom: var(--s-7); }
.tile .tile-band .open-cue { position: absolute; right: var(--s-5); bottom: var(--s-4); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); opacity: 0.6; }
.tile.closed .tile-band .open-cue { display: none; }

.t-services  { --tint: var(--t-services);  --deep: var(--t-services-deep); }
.t-photos    { --tint: var(--t-photos);    --deep: var(--t-photos-deep); }
.t-details   { --tint: var(--t-details);   --deep: var(--t-details-deep); }
.t-qbcc      { --tint: var(--t-qbcc);      --deep: var(--t-qbcc-deep); }
.t-google    { --tint: var(--t-google);    --deep: var(--t-google-deep); }
.t-website   { --tint: var(--t-website);   --deep: var(--t-website-deep); }
.t-bookings  { --tint: var(--t-bookings);  --deep: var(--t-bookings-deep); }
.t-number    { --tint: var(--t-number);    --deep: var(--t-number-deep); }
.t-invoicing { --tint: var(--t-invoicing); --deep: var(--t-invoicing-deep); }
.t-reviews   { --tint: var(--t-reviews);   --deep: var(--t-reviews-deep); }
.t-questions { --tint: var(--t-questions); --deep: var(--t-questions-deep); }

/* ── chips: physical. Hard under-edge (Headspace 0 2px 0 0), press sinks it. ─ */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-2); }
.chip { min-height: 46px; padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer; background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--line-strong); box-shadow: 0 3px 0 0 var(--line-strong); font-size: 0.9375rem; font-weight: 400; line-height: 1.2; text-align: left; transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), transform 0.12s var(--ease), box-shadow 0.12s var(--ease); }
.chip:hover { border-color: var(--deep, var(--orange-text)); color: var(--deep, var(--orange-text)); }
.chip:active, .chip[aria-pressed="true"] { transform: translateY(3px); box-shadow: 0 0 0 0 var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--tint, var(--t-services)); border-color: var(--deep, var(--orange-text)); color: var(--deep, var(--orange-text)); font-weight: 600; }
.chip.link { display: inline-flex; align-items: center; text-decoration: none; margin-top: var(--s-3); border-color: var(--deep); color: var(--deep); box-shadow: 0 3px 0 0 var(--deep); font-weight: 600; }
.chip.link:hover { background: var(--tint); }
.chips .chip.link, .chips .chip.wide { margin-top: 0; }
.chip.wide { align-self: flex-start; margin-top: var(--s-3); background: var(--orange); border-color: var(--orange); color: var(--on-orange); font-weight: 600; box-shadow: 0 3px 0 0 #b84600; }
.chip.wide:hover { background: var(--orange-hover); color: var(--on-orange); }
.chip.wide[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.text-input { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--paper-2); border: 1.5px solid var(--line-strong); font-size: 1.0625rem; transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
textarea.text-input { min-height: 96px; resize: vertical; line-height: 1.5; }
.text-input:focus { border-color: var(--deep, var(--orange-text)); box-shadow: 0 0 0 4px var(--tint, var(--t-services)); outline: none; }
.text-input::placeholder { color: var(--ink-3); }
.card-quiet { padding: 12px 16px; border-radius: var(--r-sm); background: var(--paper); font-size: 0.9375rem; color: var(--ink-2); line-height: 1.6; }
.card-quiet .cq-title { font-weight: 600; color: var(--ink); }
.upload-tile { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease); }
.upload-tile:hover { border-color: var(--deep); color: var(--deep); background: var(--tint); }
.upload-tile.busy { opacity: 0.7; pointer-events: none; }
.upload-tile svg { width: 22px; height: 22px; }
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.thumb-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--paper); }
.consent-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--ink-2); cursor: pointer; line-height: 1.5; }
.consent-row input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--orange); flex-shrink: 0; }
.consent-row.on { color: var(--ink); }
.status-line { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; margin-top: var(--s-2); }
.tick { width: 18px; height: 18px; border-radius: 50%; background: var(--tint, var(--t-details)); flex-shrink: 0; position: relative; margin-top: 3px; }
.tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--deep, var(--t-details-deep)); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ── steps: exact steps, with the link, numbered ──────────────────────────── */
.steps { margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--paper); }
.steps-title { font-weight: 600; margin-bottom: var(--s-3); line-height: 1.45; }
.steps ol { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.steps li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
.step-n { width: 26px; height: 26px; border-radius: var(--r-circle); background: var(--tint); color: var(--deep); font-weight: 600; font-size: 0.8125rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: background-color var(--dur-hover) var(--ease); }
.steps li:hover .step-n { background: var(--deep); color: #fff; }
.steps .chips { margin-top: var(--s-3); }
.steps li a { padding: 2px 0; }

/* ── Ben's lane inside a tile ─────────────────────────────────────────────── */
.ben-lane { margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--paper); }
.ben-lane-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); }
.ben-lane-head .avatar { width: 30px; height: 30px; font-size: 1rem; }
.ben-lane-head strong { font-size: 0.9375rem; }
.ben-lane .with { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; margin-bottom: var(--s-2); }
.ben-lane .done-list li { font-size: 0.9rem; }

/* ── questions from Ben ───────────────────────────────────────────────────── */
.q-list { display: flex; flex-direction: column; gap: var(--s-4); }
.q-card { padding: var(--s-4); border-radius: var(--r-md); background: var(--paper); }
.q-card .q-text { font-weight: 600; line-height: 1.45; }
.q-card .q-meta { font-size: 0.8125rem; color: var(--ink-3); margin-top: 2px; }
.q-card .chips, .q-card .q-answer { margin-top: var(--s-3); }
.q-answer { display: flex; gap: var(--s-2); align-items: stretch; }
.q-answer .text-input { flex: 1; min-height: 46px; }
.q-answer .btn-small { min-height: 46px; padding: 8px 16px; border-radius: var(--r-pill); border: none; background: var(--orange); color: var(--on-orange); font-weight: 600; cursor: pointer; box-shadow: 0 3px 0 0 #b84600; white-space: nowrap; }
.q-answer .btn-small:active { transform: translateY(3px); box-shadow: none; }
.answered { margin-top: var(--s-2); }
.answered summary { cursor: pointer; font-size: 0.9375rem; color: var(--ink-2); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.answered summary::-webkit-details-marker { display: none; }
.answered summary::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s var(--ease); }
.answered[open] summary::before { transform: rotate(45deg); }
.answered ul { list-style: none; margin-top: var(--s-2); display: flex; flex-direction: column; gap: 10px; }
.answered li { padding: 10px 14px; border-radius: var(--r-sm); background: var(--paper); font-size: 0.9375rem; line-height: 1.5; }
.answered li .q-meta { font-size: 0.8125rem; color: var(--ink-3); }
.answered li .a-text { color: var(--ink); }
.answered li .a-text strong { color: var(--deep); }
.q-add { margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); border: 1.5px dashed var(--line-strong); display: flex; flex-direction: column; gap: var(--s-2); }
.q-add .q-add-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.q-add .row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.q-add .text-input { flex: 1 1 200px; min-height: 46px; }
.q-add .btn-small { min-height: 46px; padding: 8px 18px; border-radius: var(--r-pill); border: none; background: var(--orange); color: var(--on-orange); font-weight: 600; cursor: pointer; box-shadow: 0 3px 0 0 #b84600; }
.q-add .hint { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.5; }

/* ── stage 2 tile with the photo slot ─────────────────────────────────────── */
.wide-tile .tile-body { gap: var(--s-4); }
.photo-slot { position: relative; aspect-ratio: 16 / 7; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.06)), repeating-linear-gradient(100deg, #d9b48c 0 64px, #cfa77e 64px 66px, #e0bd96 66px 130px, #c69d76 130px 132px); box-shadow: inset 0 0 0 1px rgba(31,27,24,0.06); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot .slot-line { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.8125rem; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(31,27,24,0.7); color: #fff; white-space: nowrap; }

/* ── stage 3: tiles that open on tap (compact band, then the body) ────────── */
.stage-4 { margin-top: var(--s-6); display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--r-md); background: var(--paper-2); box-shadow: var(--shadow-soft); transition: box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.stage-4:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.stage-4 strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.stage-4 p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; margin-top: 4px; }
.later-line { margin-top: var(--s-3); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--deep); }

/* ── admin: internal flags ────────────────────────────────────────────────── */
.flags-panel { margin: var(--s-4) 0 0; padding: var(--s-4); border-radius: var(--r-md); border: 1.5px dashed rgba(217, 79, 0, 0.5); background: var(--paper-2); }
.flags-panel h3 { font-family: var(--font-body); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-text); font-weight: 600; }
.flags-panel ul { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.flags-panel li { color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; padding-left: 14px; position: relative; }
.flags-panel li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.flags-panel .paid-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--ink-2); flex-wrap: wrap; }
.flags-panel .paid-row button { min-height: 44px; padding: 4px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper-2); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }

.foot { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-7); font-size: 0.875rem; color: var(--ink-3); border-top: 1px solid var(--line); margin-top: var(--s-6); }

.saved-tick { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 0.875rem; box-shadow: var(--shadow-lift); opacity: 0; transition: opacity 0.3s var(--ease); z-index: 10; pointer-events: none; }
.saved-tick.show { opacity: 1; }

/* ── layout ladder ────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
  .stage { padding: var(--s-4) var(--s-4); gap: 4px var(--s-3); grid-template-columns: 40px 1fr; }
  .stage-num { width: 40px; height: 40px; font-size: 1.25rem; }
  .stage-name { font-size: 1.3125rem; }
  .stage-line { font-size: 0.875rem; }
}
@media (min-width: 720px) {
  .plan-strip { grid-template-columns: repeat(2, 1fr); }
  .tiles.now { columns: 2; column-gap: var(--s-5); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles.later { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .top { grid-template-columns: 7fr 5fr; grid-template-areas: "hero ben" "plan plan"; gap: var(--s-7) var(--s-8); padding: var(--s-6) 0 var(--s-8); }
  .plan-strip { grid-template-columns: repeat(4, 1fr); }
  .plan-strip::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 1px; background: var(--line-strong); z-index: 0; }
  .stage { z-index: 1; }
  .tiles.now { column-gap: var(--s-6); }
  .tiles.now .tile { margin-bottom: var(--s-6); }
  .tiles.later { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .lockup { width: 170px; }
}

/* ── motion: reveal system, hiding gated on html.js ───────────────────────── */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: 0.1s; }
.js .reveal-d2 { transition-delay: 0.2s; }
.js .reveal-d3 { transition-delay: 0.3s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.js .first .hero-0 { animation: fadeUp 1s var(--ease) 0s both; }
.js .first .hero-1 { animation: fadeUp 1s var(--ease) 0.15s both; }
.js .first .hero-2 { animation: fadeUp 1s var(--ease) 0.30s both; }
.js .first .hero-3 { animation: fadeUp 1s var(--ease) 0.45s both; }
.js .first .hero-4 { animation: fadeUp 1s var(--ease) 0.60s both; }
.js .first .hero-3b { animation: fadeUp 1s var(--ease) 0.5s both; }
.js .first .hero-5 { animation: fadeUp 1s var(--ease) 0.75s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .first .hero-0, .js .first .hero-1, .js .first .hero-2, .js .first .hero-3, .js .first .hero-3b, .js .first .hero-4, .js .first .hero-5 { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ── P4 (15/08 night): the walkthrough build, in the same language. Nothing above is restyled;
   the additions reuse the tokens, the tile band, the chips, the dashed box and the ben-card. ── */
:root { --t-messages: #e3eef8; --t-messages-deep: #2a5d8f; }
.t-messages { --tint: var(--t-messages); --deep: var(--t-messages-deep); }

/* top bar: Ben's menu (My clients · view toggle · who · sign out) */
.lockup-link { display: inline-flex; flex-shrink: 0; }
.admin-nav { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }
.nav-link { font-size: 0.9375rem; font-weight: 600; text-decoration: none; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: var(--shadow-soft); color: var(--ink); }
.nav-link:hover { color: var(--orange-text); }
.who { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: var(--shadow-soft); font-size: 0.875rem; color: var(--ink-2); min-height: 44px; }
.who-text { font-weight: 600; color: var(--ink); }
.avatar.sm { width: 32px; height: 32px; font-size: 1rem; }
.link-btn { background: none; border: none; padding: 6px 4px; min-height: 32px; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--orange-hover); }
@media (max-width: 559px) { .who-text { display: none; } .nav-link { padding: 8px 12px; font-size: 0.875rem; } }
.foot { flex-wrap: wrap; }
.foot-right { margin-left: auto; text-align: right; }
@media (max-width: 559px) { .foot-right { margin-left: 0; width: 100%; text-align: left; } }
.btn-small { min-height: 46px; padding: 8px 18px; border-radius: var(--r-pill); border: none; background: var(--orange); color: var(--on-orange); font-weight: 600; cursor: pointer; box-shadow: 0 3px 0 0 #b84600; white-space: nowrap; }
.btn-small:active { transform: translateY(3px); box-shadow: none; }
.btn-small.danger { background: var(--paper-2); color: var(--ink-2); border: 1.5px solid var(--line-strong); box-shadow: 0 3px 0 0 var(--line-strong); }
.row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.row .text-input { flex: 1 1 200px; min-height: 46px; }
.hint { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.5; }
.saved-tick.warn { background: #7a2e00; }

/* Ben's desk: folded parts, each a ben-card */
.desk { margin-top: var(--s-6); }
.desk-head { margin-bottom: var(--s-4); }
.desk-head h2 { margin-top: 6px; }
.desk-grid { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) { .desk-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.desk-part { background: var(--paper-2); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.desk-part summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); min-height: 60px; }
.desk-part summary::-webkit-details-marker { display: none; }
.desk-part summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s var(--ease); flex-shrink: 0; }
.desk-part[open] summary::after { transform: rotate(-135deg); }
.desk-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.desk-title strong { font-size: 1rem; }
.desk-title span { font-size: 0.8125rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-body { padding: 0 var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.desk-body .item-q { margin-top: 0; }
.desk-body textarea.text-input { min-height: 72px; }
.feed { list-style: none; display: flex; flex-direction: column; }
.feed li { display: flex; gap: var(--s-3); padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.9rem; line-height: 1.45; }
.feed li:first-child { border-top: 0; }
.feed time { flex-shrink: 0; width: 92px; color: var(--ink-3); font-size: 0.8125rem; }
.notes { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.notes li { position: relative; padding: 10px 40px 10px 14px; border-radius: var(--r-sm); background: var(--paper); font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; }
.notes li .task-x, .flags li .task-x { position: absolute; right: 8px; top: 8px; }
.flags { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.flags li { position: relative; color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; padding: 6px 40px 6px 14px; border-radius: var(--r-sm); border: 1.5px dashed rgba(217, 79, 0, 0.5); }
.paid-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--ink-2); flex-wrap: wrap; }
.paid-row button { min-height: 44px; padding: 4px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper-2); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.task-right { display: inline-flex; align-items: center; gap: 4px; }
.task-x { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper-2); color: var(--ink-3); font-size: 1rem; line-height: 1; cursor: pointer; }
.task-x:hover { color: var(--orange-text); border-color: var(--orange-text); }
.task-add { margin-top: var(--s-2); }
.task-add .text-input { min-height: 44px; font-size: 0.9375rem; }

/* questions: Ben's edit row */
.q-admin { margin-top: var(--s-3); }
.q-admin .chip { min-height: 40px; padding: 6px 12px; font-size: 0.8125rem; }
.q-editbox { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }

/* the calm box: a thread */
.thread { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 92%; padding: 10px 14px; border-radius: var(--r-md); background: var(--paper); font-size: 0.9375rem; line-height: 1.5; }
.msg.from-ben { align-self: flex-end; background: var(--tint, var(--t-messages)); }
.msg-meta { font-size: 0.75rem; color: var(--ink-3); margin-bottom: 2px; }
.msg-text { white-space: pre-wrap; }
#messages textarea.text-input { min-height: 46px; }

/* photos: thumbnails with actions, upload progress and failures */
.thumb { position: relative; margin: 0; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--paper); display: block; }
.thumb.pick img { outline: 3px solid var(--orange); outline-offset: -3px; }
.thumb.hid img { opacity: 0.4; }
.thumb figcaption { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; gap: 4px; justify-content: flex-end; }
.thumb-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(31,27,24,0.72); color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.thumb-btn.on { background: var(--orange); color: var(--on-orange); }
.thumb-btn.del { margin-right: auto; }
.upload-fail { font-size: 0.875rem; color: #7a2e00; line-height: 1.5; }
.preview-card { padding: var(--s-4); border-radius: var(--r-md); background: var(--tint); }
.preview-card .item-q { margin-top: 0; }
.preview-card .chips { margin-top: var(--s-2); }

/* steps: Done that per step */
.steps li { align-items: center; }
.step-text { flex: 1; }
.step-done { min-height: 36px; padding: 4px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper-2); font-size: 0.75rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.steps li.done .step-text { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.steps li.done .step-n { background: var(--deep); color: #fff; }
.step-done[aria-pressed="true"] { background: var(--tint); border-color: var(--deep); color: var(--deep); }
@media (max-width: 419px) { .steps li { flex-wrap: wrap; } .step-done { margin-left: 38px; } }

/* home: my clients */
.home-top { grid-template-areas: "hero"; grid-template-columns: 1fr; padding-bottom: var(--s-6); }
.client-list { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .client-list { grid-template-columns: repeat(2, 1fr); } }
.client-card { background: var(--paper-2); border-radius: var(--r-tile); box-shadow: var(--shadow-soft); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); transition: box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.client-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.client-main { display: flex; gap: var(--s-4); align-items: flex-start; text-decoration: none; color: inherit; }
.client-main .stage-num { background: var(--orange); color: var(--on-orange); border-color: var(--orange); flex-shrink: 0; }
.client-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.client-text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; line-height: 1.1; }
.client-text span { font-size: 0.9rem; color: var(--ink-2); line-height: 1.4; }
.client-new { color: var(--orange-text) !important; }
.client-actions .chip { text-decoration: none; }

/* add a client */
.new-form .ben-card { display: flex; flex-direction: column; gap: var(--s-3); max-width: 720px; }
.new-form .ben-card:hover { transform: none; box-shadow: var(--shadow-soft); }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.slug-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slug-prefix { font-size: 0.9375rem; color: var(--ink-3); }
.slug-row .text-input { flex: 1 1 160px; }
.new-done .ben-card { max-width: 720px; }
.new-done .ben-card:hover { transform: none; }

/* the summary page */
.summary { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .summary { grid-template-columns: repeat(2, 1fr); align-items: start; } .summary .sum-block:has(.sum-photos) { grid-column: 1 / -1; } }
.sum-block { background: var(--paper-2); border-radius: var(--r-md); box-shadow: var(--shadow-soft); padding: var(--s-5); }
.sum-block h3 { margin-bottom: var(--s-3); }
.sum-list { list-style: none; display: flex; flex-direction: column; }
.sum-list li { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: var(--s-3); padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.5; }
.sum-list li:first-child { border-top: 0; }
.sum-label { color: var(--ink-2); }
.sum-val { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 419px) { .sum-list li { grid-template-columns: 1fr; gap: 2px; } }
.sum-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.sum-photo { margin: 0; }
.sum-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--paper); }
.sum-photo.pick img { outline: 3px solid var(--orange); outline-offset: -3px; }
.sum-photo.hid img { opacity: 0.4; }
.sum-photo figcaption { font-size: 0.75rem; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }
.sum-photo figcaption .link-btn { font-size: 0.75rem; padding: 2px; min-height: 0; }

/* P4 narrow-width: flex children must be allowed to shrink below their content, or the desk's
   two-input rows and the readonly invite-link field push the page sideways at 320/390. */
input, textarea, select { max-width: 100%; }
.row { min-width: 0; }
.row .text-input, .q-add .text-input, .q-answer .text-input, .slug-row .text-input { flex: 1 1 140px; min-width: 0; }
.desk-part, .desk-body, .desk-title, .sum-block, .ben-card, .client-text, .tile-body, .tile, .group { min-width: 0; }
.desk-grid, .client-list, .summary, .tiles, .plan-strip { min-width: 0; }
.q-answer { flex-wrap: wrap; }
.thread { min-width: 0; }
.msg { max-width: 100%; word-break: break-word; }

/* ── P6 (16/08): the chat widget, Your quoting, sign out, the dead-invite page, PDF tiles. Same
   language: paper, the tile tints, the pill chips with the hard under-edge, warm shadows. ──────── */
:root { --t-quoting: #fde6cf; --t-quoting-deep: #b0500a; --t-chat: #e3eef8; --t-chat-deep: #2a5d8f; }
.t-quoting { --tint: var(--t-quoting); --deep: var(--t-quoting-deep); }

/* sign out: a real button on every screen, both roles; "everywhere" beside it in the footer */
.btn-signout { min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper-2); color: var(--ink); font-size: 0.9375rem; font-weight: 600; cursor: pointer; box-shadow: 0 3px 0 0 var(--line-strong); white-space: nowrap; transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), transform 0.12s var(--ease), box-shadow 0.12s var(--ease); }
.btn-signout:hover { border-color: var(--orange-text); color: var(--orange-text); }
.btn-signout:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--line-strong); }
.btn-signout.quiet { font-weight: 400; color: var(--ink-2); }
.client-nav { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }
.foot-actions { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; width: 100%; margin-top: var(--s-2); }
@media (min-width: 720px) { .foot-actions { width: auto; margin-top: 0; margin-left: var(--s-3); } }
@media (max-width: 559px) { .foot-right { width: 100%; } }

/* the invite marker */
.invite-mark { font-size: 0.875rem; color: var(--ink-2); }
.invite-mark strong { color: var(--ink); }
.unread-pill { color: var(--orange-text); }
.chip.has-unread { border-color: var(--orange-text); color: var(--orange-text); font-weight: 600; }

/* the dead-invite page: names nobody */
.dead-invite { min-height: 80dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-6) var(--s-4); text-align: center; }
.dead-invite h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
.dead-invite .lead { max-width: 420px; text-align: center; }
.dead-invite .chips { justify-content: center; }
.dead-invite .chips .chip { text-decoration: none; }

/* PDF tiles where a thumbnail would be */
.pdf-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--paper); color: var(--deep, var(--t-quoting-deep)); text-decoration: none; padding: 8px; text-align: center; border: 1.5px solid var(--line); }
.pdf-tile svg { width: 28px; height: 28px; }
.pdf-tile span { font-size: 0.75rem; font-weight: 600; line-height: 1.25; word-break: break-all; color: var(--ink); }
.pdf-tile small { font-size: 0.6875rem; color: var(--ink-3); }
/* P7 (PR6 B18): on a PDF tile the buttons sit UNDER the tile, in flow, so the delete button never lands on the "PDF · n KB" caption */
.thumb.is-pdf figcaption { position: static; justify-content: flex-end; margin-top: 4px; }

/* the chat bubble: bottom right, orange, the mark; a count badge when the other side has written */
#chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; }
.chat-bubble { position: relative; width: 60px; height: 60px; border-radius: var(--r-circle); border: none; background: var(--orange); color: var(--on-orange); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 0 0 #b84600, var(--shadow-lift); transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background-color var(--dur-hover) var(--ease); }
.chat-bubble svg { width: 28px; height: 28px; }
.chat-bubble:hover { background: var(--orange-hover); }
.chat-bubble:active { transform: translateY(3px); box-shadow: 0 1px 0 0 #b84600, var(--shadow-soft); }
.chat-bubble.has-unread { animation: chatNudge 1.2s var(--ease) 1; }
@keyframes chatNudge { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--paper); }
body.chat-open .chat-bubble { display: none; }
.saved-tick { bottom: 92px; }

/* the panel: a card bottom-right on desktop, a full-screen sheet on a phone */
.chat-panel { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px)); background: var(--paper-2); border-radius: var(--r-tile); box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); display: flex; flex-direction: column; overflow: hidden; z-index: 41; }
.js .chat-panel:not([hidden]) { animation: fadeUp 0.35s var(--ease) both; }
.chat-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); background: var(--t-chat); border-bottom: 1px solid var(--line); }
.chat-head-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.chat-head-text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; }
.chat-head-text span { font-size: 0.8125rem; color: var(--ink-2); }
.chat-close { width: 44px; height: 44px; border-radius: var(--r-circle); border: none; background: var(--paper-2); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-soft); flex-shrink: 0; }
.chat-close svg { width: 20px; height: 20px; }
.chat-thread { flex: 1; overflow-y: auto; padding: var(--s-4); background: var(--paper); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.chat-empty { text-align: center; padding: var(--s-6) var(--s-4); }
.chat-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.chat-day { align-self: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 0; }
.chat-msg { max-width: 88%; display: flex; flex-direction: column; gap: 3px; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble-text { padding: 10px 14px; border-radius: var(--r-md); background: var(--paper-2); font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-soft); }
.chat-msg.mine .chat-bubble-text { background: var(--orange); color: var(--on-orange); box-shadow: 0 2px 0 0 #b84600; }
.chat-answer-tag { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(31,27,24,0.12); margin-right: 4px; }
.chat-meta { font-size: 0.75rem; color: var(--ink-3); padding: 0 4px; }
.chat-msg.q-item { max-width: 96%; }
.chat-q-card { padding: var(--s-4); border-radius: var(--r-md); background: var(--t-questions); border: 1.5px solid rgba(184, 72, 10, 0.25); display: flex; flex-direction: column; gap: var(--s-2); }
.chat-msg.mine .chat-q-card { background: var(--paper-2); border-color: var(--line-strong); }
.chat-q-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-questions-deep); }
.chat-msg.mine .chat-q-label { color: var(--ink-3); }
.chat-q-text { font-weight: 600; line-height: 1.45; }
.chat-q-state { font-size: 0.9375rem; color: var(--ink-2); }
.chat-q-chips .chip { --tint: var(--t-questions); --deep: var(--t-questions-deep); }
.chat-q-admin .chip { min-height: 40px; padding: 6px 12px; font-size: 0.8125rem; }
.chat-q-answer .text-input { min-height: 44px; }
.chat-compose { padding: var(--s-3) var(--s-4) var(--s-4); background: var(--paper-2); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.chat-send { align-items: flex-end; }
.chat-send textarea.text-input { min-height: 46px; max-height: 140px; resize: none; line-height: 1.4; }
.chat-tools { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.chat-qbox { display: flex; flex-direction: column; gap: var(--s-2); }
.chat-qbox .hint { flex-basis: 100%; }
@media (max-width: 719px) {
  .chat-panel { right: 0; bottom: 0; left: 0; top: 0; width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; }
  .chat-head { padding-top: max(var(--s-4), env(safe-area-inset-top)); }
  .chat-compose { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
  body.chat-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .chat-bubble.has-unread { animation: none; } .js .chat-panel:not([hidden]) { animation: none; } }