/* Acumano client portal — styles from the approved client prototype (Client-On-Bording/prototype/styles.css),
   with the prototype-only controls removed. Colours: Acumano palette guide. Type: DM Sans + Space Grotesk. */
/* Acumano client dashboard — clickable PROTOTYPE (no backend, sample data only).
   Concept: a proof sheet. Each post is a proof the owner signs off, platform by
   platform; unconfirmed claims are highlighted in the caption with margin notes. */
:root {
  /* Acumano colour guide (ACUMANO-COLOUR-PALETTE-GUIDE.md): the INTERFACE colours.
     A client's own Visual identity colours are used only in their post images. */
  --paper: #F7F4EF;        /* warm paper — page background */
  --soft: #EFEBE3;         /* soft paper — quiet panels */
  --sheet: #FFFFFF;        /* white — forms and high-clarity cards */
  --ink: #141A18;          /* near-black ink — body and headings */
  --slate: #5A6560;        /* muted ink — supporting copy */
  --line: #DDD7CC;         /* decorative rule — dividers only */
  --line-strong: #847D72;  /* strong field border — inputs, essential outlines */
  --primary: #1F5F4A;      /* forest teal — buttons, links, selected navigation */
  --primary-dark: #17493A; /* deep forest — hover / pressed */
  --primary-wash: #E2EDE7;
  --amber: #C8752F;        /* warm amber — graphics only, never normal text */
  --amber-text: #A85A1E;   /* deep amber — small amber labels */
  --highlight: #F4DEC6;    /* amber tint behind a flagged word (text stays ink) */
  --highlight-edge: #C8752F;
  --signoff: #1F5F4A;      /* success — always with a label */
  --signoff-wash: #E2EDE7;
  --alert: #A03024;        /* error — always with a label */
  --alert-wash: #F6E4E0;
  --caution: #7A5A12;      /* notice — always with a label */
  --caution-wash: #F5ECD6;
  --focus: #17493A;
  --radius-sheet: 14px;
  --radius-control: 9px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); min-height: 100vh; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--primary); text-underline-offset: .18em; }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- frame */
.stage { min-height: 100vh; display: flex; justify-content: center; }
.app { width: 100%; container-type: inline-size; container-name: app; background: var(--paper); min-height: 100vh; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .55rem 1.05rem; border-radius: var(--radius-control); border: 1.5px solid var(--primary); background: var(--primary); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.quiet:hover { border-color: var(--primary); background: #fff; color: var(--primary-dark); }
.btn.signoff { background: var(--signoff); border-color: var(--signoff); }
.btn.signoff:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.danger { background: var(--alert); border-color: var(--alert); }
.btn.link { background: none; border: 0; color: var(--primary); text-decoration: underline; min-height: 0; padding: 0; font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { background: #E7E2D9; border-color: #E7E2D9; color: #625D55; cursor: not-allowed; }
.btn.small { min-height: 36px; padding: .35rem .75rem; font-size: .9375rem; }
.btn.wide { width: 100%; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.rail { border-right: 1px solid var(--line); padding: 22px 18px; display: flex; flex-direction: column; gap: 22px; background: var(--paper); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brandmark { display: flex; align-items: center; }
.brandmark img { display: block; height: 46px; width: auto; margin: -9px 0 -9px -12px; } /* the logo file has its own margins */
.topbar .brandmark img { height: 40px; margin: -8px 0 -8px -10px; }
.brandmark svg { flex: none; }
.business { padding: 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
.business b { display: block; font-size: .98rem; }
.business span { color: var(--slate); font-size: .875rem; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.nav a:hover { background: var(--soft); }
.nav a[aria-current="page"] { background: var(--primary); color: #fff; }
.nav .group { margin: 14px .7rem 4px; font-size: .875rem; color: var(--slate); font-weight: 600; }
.nav .tick { font-size: .875rem; color: var(--signoff); font-weight: 700; }
.nav a[aria-current="page"] .tick { color: #CDE6DA; }
.nav .todo { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--line-strong); }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
/* The account section (sidebar and phone menu), then the seller as a quieter footer. */
.account { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
.acct-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acct-label { font-size: .8125rem; color: var(--slate); }
.acct-email { font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.acct-out { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.acct-out .btn { width: 100%; }
.seller-foot { margin: 0; padding: 0 2px; font-size: .78rem; line-height: 1.4; color: var(--slate); }
.seller-foot .nw { white-space: nowrap; }
.mobile-nav .account { margin-top: 12px; }
.mobile-nav .acct-out .btn { min-height: 44px; }
.mobile-nav .seller-foot { margin-top: 14px; }
.main { padding: 34px clamp(18px, 4vw, 52px) 80px; min-width: 0; }
.topbar { display: none; }
.content { max-width: 1080px; }
.content.wide { max-width: 1340px; }

h1 { font-family: var(--font-heading); font-size: 1.75rem; line-height: 1.2; letter-spacing: -.012em; margin: 0 0 .45rem; font-weight: 600; }
h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 .5rem; font-weight: 650; }
h3 { font-size: 1.0625rem; line-height: 1.3; margin: 0 0 .3rem; font-weight: 600; }
p { margin: .5rem 0; }
.lead { color: var(--slate); font-size: 1.0625rem; max-width: 62ch; margin: 0 0 1.5rem; }
.muted { color: var(--slate); }
.small { font-size: .9rem; }

/* ---------------------------------------------------------------- sheets */
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 22px 24px; }
.stack > * + * { margin-top: 18px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }

.notice { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); }
.notice.ok { background: var(--signoff-wash); border-color: #A9C9BA; }
.notice.warn { background: var(--caution-wash); border-color: #DCC88F; color: #5E4510; }
.notice.error { background: var(--alert-wash); border-color: #E3BDB5; color: #7E241B; }
.notice p { margin: .2rem 0; }

/* ---------------------------------------------------------------- forms */
label.field, .field { display: block; }
.field > .label { display: flex; align-items: center; gap: .35rem; font-weight: 600; margin-bottom: .35rem; }
.field .req { color: var(--alert); }
.field .opt { color: var(--slate); font-weight: 400; }
.input, textarea.input, select.input { width: 100%; min-height: 46px; padding: .62rem .8rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-control); background: #fff; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.45; }
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px #CFE3DA; }
.hint { color: var(--slate); font-size: .875rem; margin-top: .3rem; }
.help { position: relative; display: inline-flex; }
.help button { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--slate); font-size: .72rem; font-weight: 700; padding: 0; cursor: pointer; line-height: 1; }
.help .tip { display: none; position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: 280px; background: var(--ink); color: #fff; font-size: .84rem; font-weight: 400; line-height: 1.4; padding: .5rem .65rem; border-radius: 8px; z-index: 20; }
.help .tip i { display: block; color: #D2CCC1; font-style: normal; margin-top: .2rem; }
.help:hover .tip, .help button:focus-visible + .tip, .help button[aria-expanded="true"] + .tip { display: block; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.fields .span { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- invitation + sign-in */
.solo { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.solo .sheet { width: min(460px, 100%); padding: 30px 30px; }
.mail { width: min(620px, 100%); }
.remember { margin-top: 12px; }
.check-line { display: flex; align-items: center; gap: .6rem; font-weight: 700; cursor: pointer; min-height: 44px; }
.check-line input { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); flex: none; }
.remember .hint { margin: 0 0 0 calc(22px + .6rem); }
.mail-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; font-size: .92rem; color: var(--slate); display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; }
.mail-head b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- home */
.ask { padding: 30px 30px 26px; }
.ask > label { display: block; font-size: 1.5rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.25; margin-bottom: 12px; }
.ask > textarea { width: 100%; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font-size: 1.125rem; padding: .3rem 0 .6rem; resize: none; min-height: 3.2em; line-height: 1.35; }
.ask > textarea:focus { outline: none; border-bottom-color: var(--primary); }
.ask .cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-top: 18px; }
.cost { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: .92rem; background: var(--soft); }
.cost .tot { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.cost .r { text-align: right; }
.cost .foot { grid-column: 1 / -1; color: var(--slate); font-size: .84rem; }

.setup-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.setup-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.setup-list li:first-child { border-top: 0; }
.setup-list .n { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-weight: 700; color: var(--slate); }
.setup-list li.done .n { background: var(--signoff); border-color: var(--signoff); color: #fff; }
.setup-list li.next .n { border-color: var(--primary); color: var(--primary); }
.setup-list .why { color: var(--slate); font-size: .9rem; }
.setup-list .need { font-size: .875rem; font-weight: 700; color: var(--slate); margin: 0 0 .15rem; }
.status { font-size: .875rem; font-weight: 700; white-space: nowrap; }
.status.ok { color: var(--signoff); }
.status.wait { color: var(--caution); }
.status.bad { color: var(--alert); }

.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.recent li:first-child { border-top: 0; }
.recent .thumb { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; }
.recent .thumb svg { width: 100%; height: 100%; display: block; }
.recent .t { font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .875rem; font-weight: 600; border: 1px solid var(--line); background: #fff; white-space: nowrap; }
.pill.ok { background: var(--signoff-wash); border-color: #A9C9BA; color: var(--signoff); }
.pill.wait { background: var(--caution-wash); border-color: #DCC88F; color: var(--caution); }
.pill.info { background: #fff; border-color: var(--primary); color: var(--primary-dark); }
.pill.bad { background: var(--alert-wash); border-color: #E3BDB5; color: var(--alert); }

/* ---------------------------------------------------------------- preparing */
.steps { list-style: none; margin: 18px 0 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); }
.steps li.done .dot { background: var(--signoff); border-color: var(--signoff); }
.steps li.now .dot { border-color: var(--primary); border-top-color: transparent; animation: spin .9s linear infinite; }
.steps li.failed .dot { background: var(--alert); border-color: var(--alert); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- review: the proof sheet */
.proofs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.proof { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-sheet); overflow: hidden; }
.proof-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.proof-head h2 { margin: 0; font-size: 1.125rem; display: flex; align-items: center; gap: .5rem; }
.proof-head .v { color: var(--slate); font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.glyph { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 700; flex: none; }
.glyph.fb { background: #1877F2; }
.glyph.ig { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.proof-body { padding: 16px 18px 6px; }
.preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.preview-top { display: flex; align-items: center; gap: .55rem; padding: 10px 12px; font-size: .9rem; }
.preview-top .av { width: 30px; height: 30px; border-radius: 50%; background: #1F5FA8; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .72rem; }
.preview-top small { display: block; color: var(--slate); font-size: .78rem; }
.preview-img { aspect-ratio: 1 / 1; background: #EFEBE3; position: relative; }
.preview-img svg { width: 100%; height: 100%; display: block; }
.preview-img.missing { display: grid; place-items: center; text-align: center; padding: 24px; color: var(--slate); background: repeating-linear-gradient(135deg, #F3EFE8 0 12px, #EAE5DC 12px 24px); }
.preview-text { padding: 12px 12px 14px; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-text .cta { display: block; margin-top: .6rem; font-weight: 700; }
.preview-text .tags { display: block; margin-top: .4rem; color: #2457C5; }
mark.flag { background: var(--highlight); border-bottom: 2px solid var(--highlight-edge); padding: 0 .1em; border-radius: 2px; color: inherit; }
mark.flag sup { font-size: .68em; font-weight: 700; margin-left: .1em; }

/* Margin notes: the proofreader's marks for this caption. */
.notes { margin: 14px 0 4px; border-left: 3px solid var(--highlight-edge); padding: 2px 0 2px 14px; }
.notes.clear { border-left-color: #A9C9BA; }
.notes h3 { font-size: .95rem; }
.notes ol, .notes ul { margin: .3rem 0 .3rem; padding-left: 1.2rem; font-size: .9rem; }
.notes li { margin: .3rem 0; }
.notes .src { font-weight: 700; }
.notes .check { font-size: .9rem; margin: .25rem 0; }

.tools { padding: 4px 18px 6px; }
.tool { border-top: 1px solid var(--line); }
.tool > summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.tool > summary .kind { margin-left: auto; }
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary::after { content: "+"; color: var(--slate); font-weight: 400; }
.tool[open] > summary::after { content: "−"; }
.tool .free { color: var(--signoff); font-weight: 700; font-size: .875rem; }
.tool .priced { color: var(--amber-text); font-weight: 700; font-size: .84rem; }
.tool-body { padding: 0 0 14px; }
.choices { display: grid; gap: 8px; margin: 8px 0 12px; }
.choice { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--soft); }
.choice input { margin-top: .25rem; accent-color: var(--primary); }
.choice small { display: block; color: var(--slate); }

.signoff-box { margin: 6px 18px 18px; padding: 16px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.signoff-box .to { margin: 0 0 10px; font-size: .92rem; }
.signoff-box .own { font-size: .88rem; margin: 10px 0 0; color: var(--slate); }
.signoff-box .why { font-size: .9rem; margin: 8px 0 0; color: var(--slate); }
.result { margin: 6px 18px 18px; padding: 14px 16px; border-radius: 12px; }
.result.ok { background: var(--signoff-wash); border: 1px solid #A9C9BA; }
.result.unknown { background: var(--caution-wash); border: 1px solid #DCC88F; color: #5E4510; }
.result.refused { background: var(--alert-wash); border: 1px solid #E3BDB5; color: #7E241B; }
.result h3 { margin-bottom: .2rem; }

.publishing { position: fixed; inset: 0; background: rgba(20, 26, 24, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.publishing .sheet { width: min(420px, 100%); }

/* ---------------------------------------------------------------- setup screens */
.marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mark { position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; }
.mark.pref { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.mark .art { aspect-ratio: 5 / 3; border-radius: 8px; background: repeating-conic-gradient(#F1EDE6 0% 25%, #fff 0% 50%) 50% / 16px 16px; display: grid; place-items: center; margin-bottom: 10px; }
.mark .bin { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.95); color: var(--alert); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mark .bin svg { width: 14px; height: 14px; }
.mark .name { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mark label { display: flex; gap: .5rem; align-items: center; margin-top: 8px; font-size: .92rem; }
.swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.swatch { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 8px 8px; background: #fff; }
.swatch i { width: 34px; height: 34px; border-radius: 8px; display: block; border: 1px solid rgba(0,0,0,.08); }
.budget-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.meter { height: 10px; border-radius: 999px; background: #E7E2D9; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--primary); }
.connect-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.connect-card:first-of-type { border-top: 0; }
.connect-card .status:not(.ok):not(.bad) { color: var(--slate); }
.connect-actions-wrap { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 16px; }
.how-connect h2 { font-size: 1.125rem; margin-bottom: .3rem; }
.how-connect ol { margin: .3rem 0 .5rem; padding-left: 1.3rem; }
.how-connect li { margin: .3rem 0; }
.connect-actions { margin-top: 14px; }
.connect-note { margin: 0; }
.confirm h3 { margin-bottom: .3rem; }
.confirm .row { margin-top: 10px; }
.proto-line { margin: 16px 0 0; }
.summary dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 18px; margin: 0; }
.summary dt { color: var(--slate); }
.summary dd { margin: 0; }

/* ---------------------------------------------------------------- chips (Business Brain lists, as in Ops) */
.chips { border: 1.5px solid var(--line-strong); border-radius: var(--radius-control); background: #fff; padding: 10px; }
.chips:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px #CFE3DA; }
.chip-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list.static { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 2px; padding: .2rem .25rem .2rem .7rem; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: .94rem; max-width: 100%; }
.chip-list.static .chip { padding-right: .7rem; }
.chip > span { overflow-wrap: anywhere; }
.chip.editing { padding: .25rem; border-radius: 10px; gap: 6px; flex: 1 1 100%; background: var(--soft); }
.chip.editing .chip-input { min-height: 36px; padding: .35rem .6rem; flex: 1; min-width: 0; }
.chip-btn { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--slate); cursor: pointer; font-size: .82rem; line-height: 1; padding: 0; }
.chip-btn:hover { background: #DDD7CC; color: var(--ink); }
.chip-empty { margin: 0 0 8px; color: var(--slate); font-size: .9rem; }
.chip-add { display: flex; gap: 8px; }
.chip-add .input { min-height: 42px; border-color: var(--line); }
.chips .hint:empty { display: none; }

/* ---------------------------------------------------------------- logos and colours */
.mark label.field { display: block; margin-top: 4px; }
.mark .field .label.small { font-size: .875rem; margin-bottom: .2rem; }
.mark .input { min-height: 40px; padding: .45rem .6rem; }
.mark .input[aria-invalid="true"] { border-color: var(--alert); }
.radio-line { display: flex; gap: .5rem; align-items: center; margin-top: 10px; font-weight: 700; font-size: .92rem; }
.radio-line input { accent-color: var(--primary); width: 18px; height: 18px; }
.logo-status { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-height: 24px; }
.add-tile { border-style: dashed; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; min-height: 240px; cursor: pointer; font: inherit; color: var(--ink); }
.limit-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--soft); }
.colour-rows { display: grid; gap: 10px; }
.colour-row { display: grid; grid-template-columns: 150px 46px minmax(0, 150px) auto; justify-content: start; gap: 10px; align-items: center; }
.colour-name { font-weight: 700; }
.colour-row input[type="color"] { width: 46px; height: 42px; border: 1.5px solid var(--line-strong); border-radius: 8px; padding: 3px; background: #fff; cursor: pointer; }
.colour-row .hex { min-height: 42px; text-transform: uppercase; }
.colour-row .hex::placeholder { text-transform: none; }
.colour-row .hex[aria-invalid="true"] { border-color: var(--alert); background: var(--alert-wash); }
.colour-name .opt { color: var(--slate); font-weight: 400; font-size: .875rem; }
.colour-more { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 12px; }
.colour-more .btn[disabled] { background: none; border: 0; color: #7A746A; text-decoration: none; cursor: not-allowed; }
[data-colour-msg]:empty { display: none; }
.save-bar { margin-top: 18px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 16px 20px; }
.save-status:empty { display: none; }
.save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-top: 12px; }
.save-row .save-note { margin: 0; }

/* ---------------------------------------------------------------- your plan */
.proto-note { display: inline-block; border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: .3rem .6rem; color: var(--slate); margin: -8px 0 18px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.plan.current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan.requested { border-color: var(--caution); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.plan h2 { margin: 0; }
.plan .price { margin: 6px 0 0; color: var(--slate); }
.plan .price b { font-size: 1.75rem; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan .sets { margin: 6px 0 0; }
.plan .sets b { font-size: 1.15rem; }
.plan .usage, .plan .request-sent, .plan > .btn { margin-top: auto; padding-top: 14px; }
.plan > .btn { margin-top: auto; }
.request-sent { border-top: 1px solid var(--line); }
.request-sent dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0; }
.request-sent dt { color: var(--slate); }
.request-sent dd { margin: 0; font-weight: 700; }

/* ---------------------------------------------------------------- home: a short overview */
.home-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.home-head h1 { margin: 0; }
.btn.create { min-height: 48px; padding: .65rem 1.4rem; font-size: 1rem; }
.overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.stat { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 18px 22px; }
.stat h2 { font-size: 1rem; color: var(--slate); margin: 0; }
.stat-big { margin: .2rem 0 .1rem; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-big span { font-size: 1rem; font-weight: 600; color: var(--slate); letter-spacing: 0; }
.stat.none, .ubox.none { border-color: #DCC88F; background: var(--caution-wash); }
.stat.none .muted, .ubox.none { color: #5E4510; }
.stat p { margin-bottom: 0; }
.sets { list-style: none; margin: 10px 0 0; padding: 0; }
.sets li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 16rem auto; gap: 8px 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.sets .thumb { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; }
.sets .thumb svg, .sets .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sets .t { font-weight: 700; }
.set-status { display: grid; gap: 4px; }
.ps { display: grid; grid-template-columns: 5.6rem auto; align-items: center; justify-content: start; gap: 8px; font-size: .9rem; }
.ps .plat { color: var(--slate); font-weight: 600; }

/* ---------------------------------------------------------------- New post: the two plan boxes */
.usage-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
/* A matched pair: same padding, label, value size and supporting text, and equal heights. */
.usage-boxes { align-items: stretch; }
.ubox { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--soft); }
.ubox p { margin: 0; }
.ubox-h { font-weight: 600; color: var(--slate); font-size: .875rem; line-height: 1.3; }
.ubox-big { font-size: 1.25rem; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ubox-big span { font: inherit; color: inherit; }
.ubox .small { font-size: .9rem; line-height: 1.4; }
.prepare-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 16px; }
.prepare-row p { margin: 0; }

/* ---------------------------------------------------------------- waiting states: the Acumano mascot (decorative; the text says what is happening) */
.mascot { display: block; flex: none; width: 240px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #EEE8DE; border: 1px solid var(--line); }
.mascot video, .mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mascot.small { width: 96px; border-radius: 10px; }
.mascot.wide { width: 100%; aspect-ratio: 16 / 7; margin-bottom: 14px; }
.waiting { display: flex; gap: 26px; align-items: flex-start; }
.waiting-text { flex: 1; min-width: 0; }
.waiting .now { margin: 0; font-size: 1.125rem; font-weight: 650; }
.waiting .steps { margin-top: 8px; }
.waiting-inline { display: flex; gap: 14px; align-items: center; }
.waiting-inline p { margin: 0; }
.plan .waiting-inline { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.waiting-inline.connecting { align-items: flex-start; }
.waiting-inline[hidden] { display: none; }
.waiting-inline.connecting .btn { margin-top: 8px; }

/* ---------------------------------------------------------------- feed previews (approximations of each platform's feed post) */
.feed-wrap { position: relative; }
.feed-badge { display: inline-block; margin-bottom: 8px; padding: .15rem .55rem; border-radius: 999px; border: 1.5px dashed var(--line-strong); background: var(--sheet); font-size: .8rem; font-weight: 700; color: var(--slate); }
.feed { margin: 0; background: #fff; border: 1px solid #DADDE1; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #050505; max-width: 500px; }
.feed .av { width: 40px; height: 40px; border-radius: 50%; background: #1F5FA8; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.feed .dots { margin-left: auto; color: #65676B; display: flex; }
.feed-img { aspect-ratio: 1 / 1; background: #F0F2F5; }
.feed-img svg, .feed-img img { width: 100%; height: 100%; display: block; }
.feed-img img { object-fit: cover; }
.feed-img.missing { display: grid; place-items: center; text-align: center; padding: 24px; color: #555; background: repeating-linear-gradient(135deg, #F3EFE8 0 12px, #EAE5DC 12px 24px); font-family: inherit; }
.see-more { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #65676B; cursor: pointer; }
.see-more:hover { text-decoration: underline; }
.feed-note { margin: 8px 0 0; font-size: .875rem; color: var(--slate); }
/* Facebook: Page, time and audience; the text ABOVE the image; Like / Comment / Share below */
.feed.fb { border-radius: 8px; }
.fb-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.fb-head b { display: block; font-size: 15px; font-weight: 600; }
.fb-head small { display: flex; align-items: center; gap: 4px; color: #65676B; font-size: 13px; }
.fb-text { padding: 8px 16px 12px; font-size: 15px; line-height: 1.34; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-tag { color: #385898; font-weight: 600; }
.fb-actions { display: flex; justify-content: space-around; border-top: 1px solid #CED0D4; margin: 0 16px; padding: 6px 0; color: #65676B; font-size: 15px; font-weight: 600; }
.fb-actions span { display: flex; align-items: center; gap: 6px; }
/* Instagram: account above the square image; actions; then the username and caption, shortened with "more" */
.feed.ig { border-radius: 4px; }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; }
.ig-head b { font-weight: 600; }
.feed .av.ring { width: 34px; height: 34px; padding: 2px; background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.feed .av.ring span { width: 100%; height: 100%; border-radius: 50%; background: #1F5FA8; border: 2px solid #fff; display: grid; place-items: center; font-size: .66rem; }
.ig-actions { display: flex; justify-content: space-between; padding: 8px 10px 4px; color: #262626; }
.ig-actions span { display: flex; gap: 14px; }
.ig-text { padding: 2px 12px 4px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-text > b { font-weight: 600; }
.ig-tag { color: #00376B; }
.see-more.ig { color: #737373; font-weight: 400; }
.ig-time { padding: 2px 12px 12px; color: #737373; font-size: 11px; letter-spacing: .02em; }

/* ---------------------------------------------------------------- setup pages: form in the centre, progress guide on the right */
.with-guide { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; align-items: start; }
.setup-main { min-width: 0; }
.setup-guide { position: sticky; top: 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 18px 18px 20px; }
.setup-guide h2 { font-size: 1.125rem; margin: 0 0 6px; }
.sg-steps { list-style: none; margin: 0; padding: 0; }
.sg-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.sg-steps li:first-child { border-top: 0; }
.sg-steps a { font-weight: 650; color: var(--ink); text-decoration: none; }
.sg-steps a:hover { text-decoration: underline; color: var(--primary-dark); }
.sg-steps li.here a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; }
.sg-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: .78rem; font-weight: 700; margin-top: 1px; }
.sg-steps li.done .sg-mark { background: var(--signoff); border-color: var(--signoff); color: #fff; }
.sg-steps li.optional .sg-mark { border-style: dashed; }
.sg-steps li.wait .sg-mark { border-color: var(--caution); }
.sg-status { display: block; font-size: .9rem; font-weight: 600; }
.sg-steps li.done .sg-status { color: var(--signoff); }
.sg-steps li.todo .sg-status { color: var(--ink); }
.sg-steps li.wait .sg-status { color: var(--caution); }
.sg-steps li.optional .sg-status { color: var(--slate); }
.sg-need { display: block; font-size: .875rem; color: var(--slate); }
.sg-steps a.sg-need { display: inline-block; margin-top: 2px; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.sg-steps li.here a.sg-need { text-decoration-thickness: 1px; }
.sg-next { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.sg-next p { margin: 0 0 10px; }
.sg-next p:last-child { margin-bottom: 0; }
.sg-next .btn + p { margin-top: 10px; }
.sg-next-h { font-weight: 700; font-size: .92rem; color: var(--slate); margin-bottom: 4px !important; }
.with-guide .plans { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Your plan beside the tracker: the three package cards stay side by side, a little tighter. */
@container app (min-width: 1181px) {
  .with-guide .pkg-grid { gap: 12px; }
  .with-guide .pkg { padding: 18px 16px; }
}
#packages { scroll-margin-top: 24px; }
@container app (max-width: 760px) { #packages { scroll-margin-top: 80px; } }   /* clear the sticky phone top bar */
/* Not enough room beside the form: the guide moves below it, full width. */
@container app (max-width: 1180px) {
  .with-guide { grid-template-columns: 1fr; gap: 22px; }
  .setup-guide { position: static; }
}

/* ---------------------------------------------------------------- required marks */
.req-note { display: inline-block; margin-left: .4rem; font-size: .875rem; font-weight: 600; color: var(--slate); letter-spacing: 0; vertical-align: middle; }
.colour-name .req { color: var(--alert); margin-left: .15rem; }

/* ---------------------------------------------------------------- Help: the client's requests (not a help-desk dashboard) */
.help-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.tickets { list-style: none; margin: 4px 0 0; padding: 0; }
.tickets li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 13px 10px; margin: 0 -10px; border-top: 1px solid var(--line); border-radius: 10px; }
.tickets li:first-child { border-top: 0; }
.tickets li.new { background: var(--primary-wash); border-top-color: transparent; }
.tickets li.new + li { border-top-color: transparent; }
.ticket-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); min-width: 0; }
.ticket-link .t { font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.ticket-link:hover .t { color: var(--primary-dark); text-decoration-color: currentColor; }
.ticket-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-explain { color: var(--slate); margin: 8px 0 18px; }
.conversation { max-width: 760px; }
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.thread .msg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }
.thread .msg.team { background: #fff; border-left: 3px solid var(--primary); }
.thread .msg p { margin: .35rem 0 0; }
.thread .who { font-size: .9375rem; }
.thread .event { font-size: .9rem; color: var(--slate); text-align: center; padding: 2px 0; }
.reply { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.resolved-box { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.resolved-box p { margin: 0; }
.proto-sim { margin-top: 22px; max-width: 760px; border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 12px 14px; background: transparent; }
.proto-sim p { margin: 0 0 8px; }

/* ---------------------------------------------------------------- toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 10px; font-size: .94rem; z-index: 60; max-width: min(560px, calc(100vw - 32px)); }

/* ---------------------------------------------------------------- narrow (phone) */
@container app (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 30; }
  .topbar .menu { border: 1px solid var(--line-strong); background: #fff; border-radius: 9px; padding: .4rem .7rem; font-weight: 700; cursor: pointer; }
  .mobile-nav { padding: 8px 16px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
  .mobile-nav .nav a { padding: .6rem .5rem; }
  .main { padding: 20px 16px 96px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  .ask > label { font-size: 1.3rem; }
  .sheet { padding: 18px 16px; }
  .ask { padding: 22px 16px 20px; }
  .ask .cta-row { grid-template-columns: 1fr; }
  .split, .proofs, .fields, .help-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .home-head .btn.create { width: 100%; }
  .overview { gap: 10px; }
  .usage-boxes { grid-template-columns: 1fr; gap: 10px; }
  .ubox { padding: 12px 14px; }
  .ubox-big { font-size: 1.125rem; }
  .stat { padding: 12px 14px; }
  .stat h2 { font-size: .9rem; }
  .stat-big { font-size: 1.75rem; }
  .stat-big span { font-size: .95rem; }
  .stat .small { font-size: .875rem; }
  .sets li { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .set-main { grid-column: 2 / -1; }
  .set-status { grid-column: 1 / 3; }
  .sets li > .btn { grid-column: 3; justify-self: end; align-self: end; }
  .prepare-row { flex-direction: column; align-items: stretch; }
  .prepare-row .btn { width: 100%; }
  .waiting { flex-direction: column; gap: 16px; }
  .waiting > .mascot { width: 100%; max-width: 300px; }
  .summary dl { grid-template-columns: 1fr; gap: 2px; }
  .summary dd { margin-bottom: 10px; }
  .proof-body, .tools { padding-left: 14px; padding-right: 14px; }
  .signoff-box, .result { margin-left: 14px; margin-right: 14px; }
  .help .tip { max-width: min(280px, 78cqw); }
  .colour-row { grid-template-columns: 46px minmax(0, 1fr) auto; justify-content: stretch; }
  .colour-name { grid-column: 1 / -1; }
  .save-bar { padding: 16px; }
  .save-row { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .save-btn { width: 100%; }
  .with-guide { gap: 28px; }
}
@container app (min-width: 761px) { .mobile-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .steps li.now .dot { animation: none; border-top-color: var(--ink); }
  .mascot video { display: none; } /* fallback; the page renders the still image for reduced motion */
}

/* ---------------------------------------------------------------- client portal additions (stage 1) */
.later { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 12px 14px; background: var(--soft); color: var(--ink); }
.later p { margin: .2rem 0; }
.btn[disabled].as-later { background: #E7E2D9; }
.field-error { color: var(--alert); font-size: .9rem; margin: .3rem 0 0; }
.form-errors { margin-bottom: 16px; }
.input[aria-invalid="true"] { border-color: var(--alert); }
.logo-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.mark .art { overflow: hidden; }
.dev-outbox { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
.dev-outbox article { margin-bottom: 18px; }
.inline-form { display: inline; }

/* ---------------------------------------------------------------- stage 1 corrections */
/* Sign-in and Create your password: the logo centred above the heading. */
.solo .brandmark { justify-content: center; }
.solo .brandmark img { margin: -9px auto; }
/* Remember me: the checkbox and a small ! help that opens on hover, keyboard focus or tap. */
.remember { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.remember .check-line { min-height: 44px; }
.help-alert button { border-color: var(--caution); color: var(--caution); font-weight: 700; }
/* Opens BELOW the icon, so it never covers the password field. */
.remember .help .tip { left: auto; right: -10px; bottom: auto; top: calc(100% + 8px); max-width: min(280px, 80vw); }
/* Password: an eye button inside the field. */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 52px; }
.pw-input::-ms-reveal, .pw-input::-ms-clear { display: none; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--slate); display: grid; place-items: center; cursor: pointer; padding: 0; }
.pw-eye:hover { color: var(--ink); background: var(--soft); }
.pw-eye .eye-shut { display: none; }
.pw-eye[aria-pressed="true"] .eye-open { display: none; }
.pw-eye[aria-pressed="true"] .eye-shut { display: block; }
.field > label.label { display: flex; font-weight: 600; margin-bottom: .35rem; }
/* Visual identity: one compact unsaved line; a compact removal confirmation inside the card. */
.unsaved { margin: 0; font-size: .9375rem; color: #5E4510; background: var(--caution-wash); border: 1px solid #DCC88F; border-radius: 8px; padding: 8px 12px; }
.confirm-compact { margin-top: 10px; padding: 10px 12px; border: 1px solid #E3BDB5; background: var(--alert-wash); border-radius: 10px; font-size: .9rem; }
.confirm-compact p { margin: 0 0 8px; color: #7E241B; }
.confirm-compact .row { gap: 8px; }
.card-note { margin: 10px 0 0; font-size: .875rem; color: #5E4510; background: var(--caution-wash); border: 1px solid #DCC88F; border-radius: 8px; padding: 8px 10px; }
.confirm-compact .btn.small { min-height: 34px; padding: .25rem .7rem; font-size: .875rem; }
.confirm-compact .row { flex-wrap: nowrap; }

/* Stage 2: request forms say "Sending…" while on their way, and why they weren't sent. */
.form-status { margin: 8px 0 0; }
.form-status:empty { display: none; }
.form-status.error { color: #7E241B; font-weight: 600; }
.plan form { margin: 0; }

/* Live request updates: a message that just arrived is briefly marked; a paused connection says so. */
.thread .live-new { animation: live-arrive 1.6s ease-out 1; }
@keyframes live-arrive { from { box-shadow: 0 0 0 3px var(--accent-wash, #E6F0EA); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .thread .live-new { animation: none; } }
.live-note { margin: 10px 0 0; }

/* ================================================================ Stage 3 (approved preview components) */
/* ---------------------------------------------------------------- 1. preparing: mascot with an instant still */
.mascot.layered { position: relative; }
.mascot.layered img, .mascot.layered video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mascot.layered video { opacity: 0; transition: opacity .35s ease; }
.mascot.layered.is-playing video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mascot.layered video { display: none; } }
.prep-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: center; }
.prep-card .mascot { width: 100%; }
.prep-now { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; }
.prep-sub { margin: 0; color: var(--slate); }
.prep-steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: s; }
.prep-steps li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 1rem; }
.prep-steps li:first-child { border-top: 0; }
.prep-steps .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); }
.prep-steps li.done .dot { background: var(--signoff) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 8.5l2.5 2.5L12 5.5" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 14px no-repeat; border-color: var(--signoff); }
.prep-steps li.now { font-weight: 650; }
.prep-steps li.now .dot { border-color: var(--primary); border-top-color: transparent; animation: spin .9s linear infinite; }
.prep-steps li.todo { color: var(--slate); }
.prep-steps .st { font-size: .875rem; color: var(--slate); font-weight: 500; }
.prep-foot { margin: 16px 0 0; font-size: .9rem; color: var(--slate); }
@media (prefers-reduced-motion: reduce) { .prep-steps li.now .dot { animation: none; border-top-color: var(--primary); } }

/* ---------------------------------------------------------------- review: checks, warnings, publish box */
.info-panel { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); font-size: .9rem; }
.info-panel p { margin: 0; }
.info-panel p + p, .info-panel ul { margin-top: .45rem; }
.info-panel ul { padding-left: 1.1rem; margin-bottom: 0; }
.checks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; padding: .2rem .65rem .2rem .45rem; border-radius: 999px; background: var(--signoff-wash); color: var(--signoff); font-size: .85rem; font-weight: 650; }
.chk::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--signoff) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 8.5l2.5 2.5L12 5.5" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 11px no-repeat; }
.attention { margin: 12px 0 0; padding: 11px 14px; border-radius: 10px; background: var(--caution-wash); border: 1px solid #DCC88F; font-size: .92rem; }
.attention b { color: var(--caution); }
.attention p { margin: 0; }
.attention p + p { margin-top: .3rem; }
.publish-box { margin: 14px 18px 16px; padding: 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.publish-box .btn { width: 100%; }
.publish-box .why { margin: 8px 0 0; font-size: .9rem; color: var(--slate); text-align: center; }

/* ---------------------------------------------------------------- 2. edit caption */
.tool > summary .sum-hint { font-weight: 400; color: var(--slate); font-size: .9rem; }
.editor label { display: block; font-weight: 650; margin-bottom: 6px; }
.editor textarea { width: 100%; min-height: 220px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-control); background: #fff; line-height: 1.55; resize: vertical; }
.editor textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.editor .meter-line { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: .85rem; color: var(--slate); }
.editor .cta-preview { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-strong); font-size: .9rem; color: var(--slate); }
.editor .cta-preview b { color: var(--ink); }
.editor .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.editor .fine { font-size: .85rem; color: var(--slate); margin: 10px 0 0; }
.saved-note { display: flex; gap: 10px; align-items: center; margin: 0 18px 4px; padding: 10px 14px; border-radius: 10px; background: var(--signoff-wash); color: var(--signoff); font-weight: 600; font-size: .92rem; }

/* ---------------------------------------------------------------- 4. ask for changes */
.ask { display: grid; gap: 12px; }
.ask-intro { margin: 0; font-size: .95rem; }
.opt-list { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.opt-list legend { font-weight: 650; margin-bottom: 6px; padding: 0; }
.ask-opt { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 11px; cursor: pointer; background: #fff; }
.ask-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-wash); }
.ask-opt:has(input:disabled) { cursor: not-allowed; color: var(--slate); background: var(--paper); }
.ask-opt input { margin-top: .2rem; accent-color: var(--primary); }
.ask-opt small { display: block; color: var(--slate); font-size: .85rem; }
.ask-opt .cr { font-weight: 700; font-size: .875rem; color: var(--primary-dark); white-space: nowrap; }
.ask-opt:has(input:disabled) .cr { color: var(--slate); }
.ask textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-control); background: #fff; resize: vertical; }
.ask .lbl { display: block; font-weight: 650; margin-bottom: 6px; }
.balance { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.balance .orb { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--primary); color: var(--primary-dark); font: 700 1.25rem/1 var(--font-heading); }
.balance p { margin: 0; }
.balance .bal-main { font-weight: 650; }
.balance .bal-after { color: var(--slate); font-size: .9rem; margin-top: .2rem; }
.balance .bal-after b { color: var(--ink); }
.ask .reassure { margin: 0; font-size: .875rem; color: var(--slate); }
.ask .go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ask .go .btn { min-width: 0; }
.ask .go .alt { font-size: .9rem; color: var(--slate); }
.ask-state { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.ask-state p { margin: 0; }
.ask-state .mascot { width: 92px; }
.ask-state.bad { background: var(--alert-wash); border-color: #E3BDB5; grid-template-columns: 1fr; }
.ask-state.good { background: var(--signoff-wash); border-color: #A9C9BA; grid-template-columns: 1fr; }
.ask-state.empty { grid-template-columns: 1fr; background: var(--soft); }

/* ---------------------------------------------------------------- "What was checked": one plain text control */
.text-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 4px 2px; background: none; border: 0; color: var(--primary); font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.text-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.text-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.text-toggle:hover { color: var(--primary-dark); }
.text-toggle + .info-panel { margin-top: 8px; }
.info-panel .pv-about { color: var(--slate); font-size: .875rem; border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .6rem; }
.proof-body > .feed-badge { margin-bottom: 10px; }
.proof-body > .attention { margin-top: 12px; }

/* ---------------------------------------------------------------- your plan: calm */
.usage-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding: 16px 0; margin: 0 0 22px; border-radius: var(--radius-sheet); background: var(--sheet); border: 1px solid var(--line); }
.usage-strip p { margin: 0; }
.us-col { padding: 0 22px; min-width: 0; }
.us-credits { border-left: 1px solid var(--line); position: relative; }
.credits-help { position: static; }
.us-h { font-size: .85rem; font-weight: 650; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.us-v { margin-top: 2px !important; }
.usage-strip .meter { margin-top: 8px; height: 6px; width: min(100%, 300px); }
.credits-help .tip { bottom: auto; top: calc(100% + 10px); left: 22px; right: auto; width: auto; max-width: 340px; color: #fff; font-weight: 400; }
.pkg-caption { margin: 0 0 10px; font-size: .92rem; color: var(--slate); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pkg { background: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--radius-sheet); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pkg.current { border-color: var(--primary); }
.pkg p { margin: 0; }
.pkg-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pkg-sets { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; }
.pkg-sets b { font-size: 1.8rem; margin-right: 4px; }
.pkg-credits { color: var(--ink); }
.pkg-credits b { font-weight: 700; }
.pkg-price { font-size: .95rem; color: var(--slate); margin-top: 6px !important; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.pkg-price b { font-family: var(--font-heading); font-size: 1.2rem; color: var(--ink); }
.pkg .btn { margin-top: auto; }
.pkg-price { margin-bottom: 12px !important; }
.pkg-here { margin-top: auto !important; min-height: 44px; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--primary-wash); font-size: .95rem; color: var(--primary-dark); font-weight: 600; }

@container app (max-width: 760px) {
  .prep-card { grid-template-columns: 1fr; gap: 14px; }
  .prep-card .mascot { max-width: 100%; aspect-ratio: 16 / 9; }
  .pkg-grid, .usage-strip { grid-template-columns: 1fr; }
  .usage-strip { padding: 14px 0; row-gap: 0; }
  .us-col { padding: 0 16px; }
  .us-credits { border-left: 0; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
  .credits-help .tip { left: 16px; right: 16px; max-width: none; }
  .pkg { padding: 14px 16px; }
  .publish-box { margin-left: 14px; margin-right: 14px; }
  .saved-note { margin-left: 14px; margin-right: 14px; }
  .tool > summary { flex-wrap: wrap; row-gap: 2px; }
  .tool > summary .sum-hint { order: 3; flex-basis: 100%; }
}
.fb-actions span, .ig-actions span { display: inline-flex; align-items: center; gap: 6px; }

/* Stage 3 additions beyond the preview: the requested-plan note, a version thumbnail image, compare images. */
.pkg-form { margin-top: auto; }
.ask-state .mascot.layered { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------- Stage 3 corrections (approved 2026-10-05): named packages */
.pkg.named { gap: 10px; }
.pkg-name { margin: 0; color: var(--ink); font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.pkg-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pkg-facts li { font-size: 1rem; }
.pkg-facts b { font-weight: 700; margin-right: 3px; }
.pkg.named .pkg-price { margin: 2px 0 10px !important; }
.pkg.requested { border-color: #DCC88F; }
.pkg-req { margin-top: auto; padding: 10px 12px; border-radius: var(--radius-control); background: var(--caution-wash); font-size: .9rem; }
.pkg-req p { margin: 0 0 4px; }

/* ---------------------------------------------------------------- versions: compact picker, viewing vs selected for publishing */
.vp { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.vp-label { font-size: .85rem; font-weight: 650; color: var(--slate); }
.vp-list { display: flex; gap: 10px; }
/* 34 px circles; the ::before extends the tap area to 44 px without growing the look. */
.vp-btn { position: relative; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--sheet);
  color: var(--ink); font: 650 .92rem/1 var(--font-heading); cursor: pointer; display: grid; place-items: center; text-decoration: none; box-sizing: border-box; }
.vp-btn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.vp-btn:hover { border-color: var(--primary); }
.vp-btn[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.vp-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vp-btn .vp-tick { position: absolute; top: -4px; right: -5px; }
.vp-tick { display: inline-block; width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sheet);
  background: var(--signoff) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 8.5l2.5 2.5L12 5.5" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 11px no-repeat; }

/* The preview badge row: "Viewing Version N" and, when it isn't the selected one, "Use this version". */
.vrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; min-height: 36px; }
.proof-body .vrow > .feed-badge { margin-bottom: 0; }
.vview { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: .92rem; }
.vview > b { white-space: nowrap; }
.vview .btn.small { min-height: 36px; padding: 0 14px; }
.vtoast { font-size: .88rem; font-weight: 600; color: var(--signoff); animation: vt-in .2s ease-out; }
@keyframes vt-in { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .vtoast { animation: none; } }
.tools-off { margin: 12px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: .9rem; color: var(--slate); }
.tools-off .btn.link { padding: 0; min-height: 0; font-size: inherit; vertical-align: baseline; }

@container app (max-width: 760px) {
  .pkg.named { gap: 8px; }
}

.vuse { display: inline; margin: 0; }

/* ---------------------------------------------------------------- Home, Recent post sets: quiet status labels (approved 2026-10-05) */
/* Scoped to this list; every other pill is unchanged. Smaller, borderless, a paler tint and a 6 px status dot;
   the words keep full contrast (the dot adds colour; the text never relies on it). */
.sets.quiet .set-status { gap: 6px; }
.sets.quiet .ps { grid-template-columns: 4.8rem auto; gap: 6px; font-size: .84rem; }
.sets.quiet .ps .plat { font-weight: 500; color: var(--slate); }

.sets.quiet .set-status .pill {
  gap: 6px; padding: 2px 9px 2px 8px; border: 0; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.35; letter-spacing: .005em;
  background: #F8F1E1; color: #6B4F10;          /* waiting: a paler amber wash; text darker than --caution for contrast at the smaller size */
}
.sets.quiet .set-status .pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: #C8952F;
}
/* Approved, not published: the same quiet shape in teal, so differing platforms read apart at a glance. */
.sets.quiet .set-status .pill.is-approved { background: #E9F1EC; color: #1F5F4A; }
.sets.quiet .set-status .pill.is-approved::before { background: #2E7D62; }
/* Preparing: neutral, nothing to act on yet. */
.sets.quiet .set-status .pill.is-preparing { background: #EFEBE3; color: #4F5954; }
.sets.quiet .set-status .pill.is-preparing::before { background: #8C948F; }

/* ---------------------------------------------------------------- Stage 4 (approved 2026-10-05): Connections and publishing */
.publish-box .pb-to { margin: 0 0 10px; font-size: .92rem; text-align: center; }
.publish-box > a.btn { width: 100%; }
.publish-box.confirming { background: var(--sheet); border: 1.5px solid var(--primary); display: grid; gap: 10px; }
.publish-box[hidden], .publish-box.confirming[hidden] { display: none; }
.publish-box.confirming h3 { margin: 0; font-size: 1.05rem; }
.publish-box.confirming p { margin: 0; }
.publish-box.confirming .row { display: flex; gap: 10px; flex-wrap: wrap; }
.publish-box.confirming .row .btn { width: auto; flex: 1 1 auto; }
.cf-what { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.cf-what img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; display: block; }
.cf-v { font-weight: 650; font-size: .92rem; }
.cf-cap { font-size: .9rem; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publishing .sheet { display: grid; gap: 10px; }
.publishing .mascot { width: 100%; aspect-ratio: 16 / 9; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: spin .9s linear infinite; flex: none; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-top-color: var(--primary); } }
.conn-help { margin-top: 14px; }

/* ---------------------------------------------------------------- migration 74: self-service upgrades */
.upgrade-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.upgrade-grid > * { min-width: 0; }
.compare-table, .quote-lines { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.compare-table th, .compare-table td { text-align: left; padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { border-top: 0; font-size: .8125rem; color: var(--slate); background: var(--soft); }
.compare-table tbody th { font-weight: 500; color: var(--slate); }
.quote-lines td { padding: 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
.quote-lines td.num { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.quote-lines tr.total td { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--ink); }
.sheet.quote { border-color: var(--primary); }
.confirm-upgrade { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.confirm-upgrade .check-line { font-weight: 600; align-items: flex-start; }
.pkg .btn[aria-disabled="true"] { pointer-events: none; }
@container app (max-width: 900px) { .upgrade-grid { grid-template-columns: 1fr; } }
@container app (max-width: 760px) {
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .compare-table th, .compare-table td { border: 0; padding: 2px 0; }
  .compare-table td:nth-of-type(1)::before { content: "Now: "; color: var(--slate); font-size: .8125rem; font-weight: 600; }
  .compare-table td:nth-of-type(2)::before { content: "After: "; color: var(--slate); font-size: .8125rem; font-weight: 600; }
}

/* Migration 80: staff support editors and the post-language confirmation. */
.mark.removing{opacity:.62;border-style:dashed}
.mark.removing .art{filter:grayscale(1)}
.change-list{margin:.2rem 0 0;padding-left:1.1rem;font-size:.9rem;line-height:1.45}
.change-list li{margin:.15rem 0}
.confirm-language .row{gap:8px;margin-top:10px;flex-wrap:wrap}
.confirm-language form{margin:0}
details.typed summary{cursor:pointer}

/* ================================================================ Help as a live conversation (migration 81) */
/* The unread badge (nav), "new" marks in lists, messages being sent, and the short notices. */
.nav a .count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--alert); color: #fff; font-size: .8rem; font-weight: 700; display: inline-grid; place-items: center; margin-left: auto; }
.nav a[aria-current="page"] .count { background: #fff; color: var(--alert); }
.menu .count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--alert); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; margin-left: 6px; vertical-align: .05em; }
.nav a .count[hidden], .count[hidden] { display: none; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); margin-right: 7px; vertical-align: .12em; }
.ticket-pills { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lrow.is-unread .t { font-weight: 700; }
.new-pill { margin-left: 6px; vertical-align: .1em; }
.thread .msg.pending { opacity: .72; border-style: dashed; }
.thread .msg.pending.failed { opacity: 1; border-color: var(--alert); border-style: solid; background: #FBEDEA; }
.thread .msg.pending.failed [data-state] { color: var(--alert); font-weight: 700; }
.live-notices { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.live-notice { background: #fff; color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(20, 26, 24, .14); }
.live-notice p { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.live-notice-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .live-notices { left: 16px; right: 16px; bottom: 12px; width: auto; } }

/* ================================================================ One Help conversation per client (migration 82) */
.convo-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.convo-head h2 { margin: 0; }
.thread-box { max-height: min(62vh, 680px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 2px 0; }
.thread .sep { display: flex; align-items: center; gap: 10px; color: var(--slate); font-size: .82rem; font-weight: 600; margin: 4px 0; list-style: none; }
.thread .sep::before, .thread .sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.thread .sep.topic span { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; color: var(--ink); max-width: 78%; text-align: center; overflow-wrap: anywhere; }
.composer { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.composer-row { margin-top: 8px; gap: 12px; align-items: center; }
.convo-list .lrow { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) 110px minmax(0, 1fr); }
.convo-prev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--slate); font-size: .9rem; font-weight: 400; overflow-wrap: anywhere; }
.convo-prev b { color: var(--ink); font-weight: 600; }
.unread-n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--alert); color: #fff; font-size: .8rem; font-weight: 700; display: inline-grid; place-items: center; }
.section-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 24px 0 10px; }
.section-h:first-child { margin-top: 4px; }
.section-h h2 { margin: 0; font-size: 1.15rem; }
.kind-note { font-size: .875rem; color: var(--slate); margin: -4px 0 12px; max-width: 75ch; }
.small-empty { padding: 16px 18px; }
.small-empty p { margin: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plain-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .thread-box { max-height: 58vh; } .thread .sep.topic span { max-width: 88%; } }

/* ================================================================ Help: separate subject chats (migration 83) */
/* Desktop: the chat list beside the chosen chat. Phone: the list first, then the chosen chat with “← All chats”. */
.chats { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; min-height: 520px; }
.chat-list { border-right: 1px solid var(--line); background: #FBFAF7; display: flex; flex-direction: column; min-width: 0; }
.chat-list .new { padding: 14px; border-bottom: 1px solid var(--line); }
.chat-list .new .btn { width: 100%; justify-content: center; text-align: center; }
.chat-list .new .btn[aria-current="true"] { box-shadow: 0 0 0 3px var(--primary-wash); }
.chat-list > div[data-live-frag] { overflow-y: auto; max-height: min(66vh, 720px); }
.chat-items { list-style: none; margin: 0; padding: 0; }
.chat-items li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.chat-items li a:hover { background: #F6F3EC; }
.chat-items li a[aria-current="true"] { background: var(--primary-wash); box-shadow: inset 3px 0 0 var(--primary); }
.chat-items .subj { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-items .when { font-size: .78rem; color: var(--slate); white-space: nowrap; }
.chat-items .prev { grid-column: 1 / -1; font-size: .85rem; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-items .meta { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.chat-items .unread-n { min-width: 20px; height: 20px; font-size: .72rem; padding: 0 6px; }
.chat-list .group-h { margin: 0; padding: 10px 14px 4px; font-size: .8rem; font-weight: 700; color: var(--slate); }
.chat-none { padding: 14px; margin: 0; }
.pill.mini-pill { font-size: .72rem; padding: 1px 8px; }
.chat-pane { display: flex; flex-direction: column; min-width: 0; }
.chat-head { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat-head h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.chat-head-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.chat-body.thread-box { padding: 14px 18px; flex: 1; max-height: min(56vh, 600px); }
.chat-reply, .chat-actions { border-top: 1px solid var(--line); padding: 12px 18px 14px; }
.chat-actions .chat-reply, .chat-actions .reply { border-top: 0; padding: 0; margin: 0; }
.chat-new { border-top: 0; }
.chat-pane > .live-note { padding: 0 18px 12px; }
.chats .back { display: none; font-size: .9rem; margin-bottom: 6px; }
.ops-sum { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin: 2px 0 12px; }
.state-sub { display: block; margin-top: 3px; }
@media (max-width: 760px) {
  .chats { grid-template-columns: 1fr; min-height: 0; }
  .chats.show-list .chat-pane { display: none; }
  .chats.show-chat .chat-list { display: none; }
  .chat-list > div[data-live-frag] { max-height: none; }
  .chats .back { display: inline-block; }
  .chat-body.thread-box { max-height: 56vh; }
}