/* The client portal, in the Good Morning Advisory brand (PLAN item 40; the pack, v1.3 now). Every colour is one of the pack's
   tokens (brand/tokens.css, loaded before this file; brand/fonts.css loads the two faces): no hex here. Light only:
   no prefers-color-scheme block. Lucky red is the one accent (buttons, links, focus, a label's square), never a tint
   or a band; a notice is a white panel with an ink mark, and only an error's mark is red. */
:root { --page: var(--gm-bg); --panel: var(--gm-surface); --field: var(--gm-paper); --ink: var(--gm-fg);
        --muted: var(--gm-fg-muted); --hair: var(--gm-mist); --field-edge: var(--gm-slate-muted);
        --accent: var(--gm-accent); --accent-hover: var(--gm-accent-hover); --on-accent: var(--gm-on-accent);
        --shadow: rgba(15, 24, 48, 0.12); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* a rule that sets display never shows what a page hid */
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.6 var(--gm-font-text); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible
  { outline: 3px solid var(--accent); outline-offset: 2px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--field); padding: 8px 12px; z-index: 30; }
.top { background: var(--page); border-bottom: 1px solid var(--hair); }
.top .in { max-width: 1120px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center;
           justify-content: space-between; gap: 8px 24px; }
/* The wordmark (the pack's file, never retyped); on a narrow phone the tile, as the guide asks below 24 px */
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { display: block; }
.brand .wm { height: 30px; width: auto; margin-left: -4px; }
.brand .tl { height: 28px; width: 28px; margin: 0 2px; display: none; }   /* half its side clear around it */
@media (max-width: 560px) { .brand .wm { display: none; } .brand .tl { display: block; } }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
nav a { padding: 10px 14px; border-radius: var(--gm-radius-pill); text-decoration: none; color: var(--ink); }
nav a:hover { color: var(--accent-hover); }
nav a[aria-current="page"] { background: var(--panel); font-weight: 600; }
nav form { margin: 0; }
button { font: inherit; cursor: pointer; }
.quiet { background: var(--field); border: 1px solid var(--field-edge); border-radius: var(--gm-radius-pill);
         padding: 9px 16px; color: var(--ink); min-height: 44px; text-decoration: none; }
.quiet:hover { color: var(--ink); border-color: var(--ink); }
.banner { margin: 0; padding: 8px 16px; text-align: center; background: var(--panel); font-size: 14px; }
main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--panel); border-radius: var(--gm-radius-card); padding: 24px; }
.narrow { max-width: 560px; width: 100%; margin: 0 auto; }
/* Headings are the display face, which has one weight: tokens.css sets 400, and nothing here makes one bold */
h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; }
h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
h3 { font-size: 17px; line-height: 1.3; }
:lang(th) h1, :lang(th) h2, :lang(th) h3 { line-height: 1.4; }
.lead { margin: 0 0 16px; color: var(--muted); }
/* A card's label, as the guide's section label: small caps with the red square in front */
.tag { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted);
       letter-spacing: var(--gm-tracking-label); text-transform: uppercase; margin-bottom: 10px; }
.tag::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: none; }
:lang(th) .tag { letter-spacing: 0; }
/* The page's one main action. As wide as its words on a wide card (red is for small things, never a band); the full
   width of a narrow card or a phone */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 240px;
          padding: 12px 28px; border: 0; border-radius: var(--gm-radius-pill); background: var(--accent);
          color: var(--on-accent); font-weight: 600; text-decoration: none; margin: 8px 0; }
.button:hover { background: var(--accent-hover); color: var(--on-accent); }
.narrow .button { display: flex; width: 100%; }
@media (max-width: 480px) { .button { display: flex; width: 100%; min-width: 0; } }
.note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); padding: 10px 8px;
     border-bottom: 1px solid var(--field-edge); }
td, th[scope="row"] { padding: 12px 8px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.num { text-align: right; }
/* Figures: the text face with its tabular figures, so a column of amounts lines up (the name is the old rule's) */
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.empty { color: var(--muted); margin: 0; }
.list { margin: 0; padding-left: 20px; }
.big { font-size: 30px; font-weight: 600; margin: 4px 0 12px; }
.facts { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 10px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.foot { max-width: 1120px; margin: 0 auto; padding: 0 16px 24px; font-size: 12px; color: var(--muted); }

h3.case { margin: 1.25rem 0 0.5rem; }

/* P4.4: the scenario page */
/* A notice: a white panel with an ink mark in front, a tick when it went well and an exclamation mark otherwise.
   Only an error's mark (role="alert") is red. No tint: the guide has no green, no amber and no pale red. */
.notice { position: relative; margin: 0; padding: 12px 16px 12px 46px; border-radius: 12px; background: var(--field);
          border: 1px solid var(--hair); }
.notice::before { content: "!"; content: "!" / ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px;
                  border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
                  line-height: 1; background: var(--ink); color: var(--gm-paper); }
.notice.ok::before { content: "✓"; content: "✓" / ""; font-size: 12px; }
.notice[role="alert"]::before { background: var(--accent); }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice p { margin: 0; }
.modes { margin: 0 0 12px; }
.dials { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.dial { display: grid; grid-template-columns: minmax(10rem, 16rem) 9rem 1fr; gap: 6px 16px; align-items: center; }
.dial input { font: inherit; min-height: 44px; padding: 8px 10px; border: 1px solid var(--field-edge);
              border-radius: 10px; width: 100%; background: var(--field); color: var(--ink); }
.dial .fixed { padding: 8px 0; }
.pct-box { display: flex; align-items: center; gap: 6px; }       /* a ratio's box is in per cent (review of item 24) */
.pct-box input { flex: 1; min-width: 0; }
.pct-sign { color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.go { background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--gm-radius-pill);
      padding: 10px 18px; min-height: 44px; font-weight: 600; }
.go:hover:not(:disabled) { background: var(--accent-hover); }
.chart { margin: 16px 0 0; }
.chart figcaption { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.chart svg { width: 100%; max-width: 480px; height: auto; }
.chart .lbl { font-size: 12px; fill: var(--muted); }
.bar.base { fill: var(--hair); }          /* the plan in mist, the first run in ink, the second in the accent */
.bar.a { fill: var(--ink); }
.bar.b { fill: var(--accent); }
/* A negative amount is the bar's outline in its own colour: a faded fill would make the red a pink */
.bar.neg { fill: none; stroke-width: 2; }
.bar.base.neg { stroke: var(--field-edge); }
.bar.a.neg { stroke: var(--ink); }
.bar.b.neg { stroke: var(--accent); }
.save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.save input { font: inherit; min-height: 44px; padding: 8px 10px; border: 1px solid var(--field-edge);
              border-radius: 10px; background: var(--field); color: var(--ink); }
.list form.inline { display: inline; }
@media (max-width: 640px) { .dial { grid-template-columns: 1fr; } }

/* P4.5: the assistant */
.answer { white-space: pre-wrap; margin: 8px 0; }

/* Row 105: the conversation first */
.thread { display: flex; flex-direction: column; gap: 18px; }
.turn { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--hair); padding-bottom: 16px; }
.turn:last-child { border-bottom: 0; padding-bottom: 0; }
.who { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.you { margin: 0; align-self: flex-end; max-width: 85%; background: var(--field); border-radius: 16px;
       padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bot { max-width: 100%; }
.peer { margin: 0; align-self: flex-start; max-width: 85%; background: var(--field); border-radius: 16px;
        padding: 10px 14px; }   /* another member's post in a room (PLAN item 75) */
.bot .answer { margin: 0 0 8px; }
.sources summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.proposal { background: var(--field); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px;
            margin-top: 8px; }
.proposal p { margin: 0 0 8px; }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.thread > #latest { margin-top: -18px; }   /* the newest turn's mark takes no room of its own */
.suggest form.inline { display: inline; margin: 0; }
.chip { border: 1px solid var(--field-edge); background: var(--field); color: var(--ink);
        border-radius: var(--gm-radius-pill); padding: 8px 14px; min-height: 40px; }
.chip:hover { border-color: var(--ink); }
.actions form.inline { display: inline; }

/* Row 111, slice 5: the streamed page. The server writes each step, the checked text and the final reply into .flow;
   only the newest shows, so no script is needed. */
.flow > :not(:last-child) { display: none; }
.step { margin: 0; color: var(--muted); font-size: 14px; }
.step::after { content: " …"; animation: gm-pulse 1.2s ease-in-out infinite; }
@keyframes gm-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .step::after { animation: none; } }

/* Row 111, slice 7: every figure in an answer was checked against the files */
.fig { white-space: nowrap; }
.fig::after { content: "✓"; color: var(--ink); font-size: 0.75em; font-weight: 600; margin-left: 2px; vertical-align: super;
              line-height: 0; }
.legend { margin: 0 0 6px; font-size: 13px; color: var(--muted); }

/* Row 111, slice 7: the conversation in one readable column, as the apps keep it; more room on a phone */
.talk, .thread { width: 100%; max-width: 820px; margin-inline: auto; }
@media (max-width: 480px) {
  main { padding: 16px 12px 40px; gap: 14px; }
  .card { padding: 16px; border-radius: 18px; }
  h1 { font-size: 24px; }
  .you { max-width: 92%; }
}

/* Item 22: the conversation as ChatGPT and Claude keep it. The page is one window-high column: the thread scrolls
   inside it and the box stays under it, in view. portal.js keeps the view on the newest message. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.chat { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.chat > * { flex: none; }
body.chat main { flex: 1; min-height: 0; width: 100%; max-width: none; padding: 0; gap: 0; }
body.chat .foot { display: none; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; display: flex;
            flex-direction: column; gap: 20px; padding: 24px 16px; }
.scroller.is-empty > .talk { margin-top: auto; margin-bottom: auto; }   /* the first visit: one greeting, centred */
.thread.no-turns { display: none; }                       /* its card comes with the first turn */
.talk .empty { margin: 12px 0 0; }
.composer { flex: none; border-top: 1px solid var(--hair); background: var(--page); padding: 10px 16px 12px; }
.composer > * { width: 100%; max-width: 820px; margin-inline: auto; }
.notices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.notices:empty { display: none; }
.composer .suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px;
                     -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
                     mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); }   /* more to the right */
.composer .suggest .muted, .composer .chip { flex: none; white-space: nowrap; }
.composer form.ask { margin-block: 0; }
.box { display: flex; align-items: flex-end; gap: 8px; background: var(--field); border: 1px solid var(--field-edge);
       border-radius: 24px; padding: 6px 6px 6px 16px; }
.box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.box textarea { flex: 1; min-width: 0; border: 0; padding: 9px 0; background: transparent; color: var(--ink);
                font: inherit; line-height: 1.5; resize: none; min-height: calc(1.5em + 18px); max-height: 40vh; }
.box textarea:focus { outline: none; }
.box .go { flex: none; }
.box .go:disabled { background: var(--gm-slate-muted); cursor: default; }      /* not a faded red: that is a pink */
.composer .note { margin: 6px auto 0; text-align: center; font-size: 12px; line-height: 1.4; }
@media (max-width: 480px) {
  .scroller { padding: 12px 12px 16px; gap: 14px; }
  .composer { padding: 8px 12px 10px; }
}
/* A phone's keyboard open (typing in a page the keyboard made short): the thread keeps the room. A phone on its side,
   not typing, keeps its menu (review of e524250) */
@media (max-height: 520px) and (max-width: 900px) {
  body.chat:has(#q:focus) .top, body.chat:has(#q:focus) .banner, body.chat:has(#q:focus) .composer .suggest {
    display: none; }
}
.scroller:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Row 116, e: the answer's Markdown subset (hub/portal/markdown.py) */
.answer.md { white-space: normal; }
.answer.md p { margin: 0 0 8px; }
.answer.md ul, .answer.md ol { margin: 0 0 8px; padding-left: 22px; }
.answer.md .scroll { margin: 4px 0 10px; }
.answer.md table { width: auto; min-width: 60%; font-size: 15px; }
.answer.md th, .answer.md td { padding: 6px 10px; }
.answer.md .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Online consent (row 120): the terms, the notice and the record of what was accepted */
.terms h2, .record h2 { font-size: 17px; margin: 22px 0 8px; }
.terms-text { line-height: 1.6; max-width: 72ch; }
.terms-text p { margin: 0 0 10px; }
.accept { margin: 18px 0; display: grid; gap: 8px; justify-items: start; }
.accept button { font-size: 16px; font-weight: 600; min-height: 48px; padding: 12px 28px; border: 0;
                 border-radius: var(--gm-radius-pill); background: var(--accent); color: var(--on-accent); }
.accept button:hover { background: var(--accent-hover); }
.accepted { border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 18px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.hash { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }  /* a
   record's fingerprint, to compare letter by letter */
@media print {
  header, nav, .lang, .print-hint, footer { display: none !important; }
  .card { box-shadow: none; border: 0; }
  .accepted { break-inside: avoid-page; }
}

/* PLAN item 23 (row 135 A): the welcome page the welcome email opens, before the person has an account. In the brand
   since item 40: a light page, the display face for its greeting, Cards with red icon circles, no palette of its own
   and no sun */
body.welcome .foot { display: none; }              /* the help line names the firm */
.wl-hero { padding: 24px 0 8px; }
.wl-text { max-width: 40rem; display: grid; gap: 16px; }
.wl-eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600;
              letter-spacing: var(--gm-tracking-label); text-transform: uppercase; color: var(--muted); }
.wl-eyebrow::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--accent); flex: none; }
:lang(th) .wl-eyebrow { letter-spacing: 0; }
.wl-for { margin: 0; justify-self: start; font-size: 13px; font-weight: 600; background: var(--panel);
          border-radius: var(--gm-radius-pill); padding: 6px 14px; overflow-wrap: anywhere; }
.wl-hero h1 { margin: 0; font-size: clamp(36px, 6vw, 56px); line-height: 1.08; overflow-wrap: anywhere; }
.wl-signin { margin: 0; font-size: 15px; }
.wl-lead { margin: 0; font-size: clamp(17px, 2vw, 20px); max-width: 36ch; color: var(--muted); }
.wl-accept { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.wl-button { display: inline-flex; gap: 10px; align-items: center; background: var(--accent); color: var(--on-accent);
             font-weight: 600; font-size: 17px; padding: 14px 26px; border-radius: var(--gm-radius-pill);
             text-decoration: none; min-height: 48px; }
.wl-button:hover { background: var(--accent-hover); color: var(--on-accent); }
.wl-minutes { color: var(--muted); font-size: 15px; }
.wl-ignore { margin: 0; font-size: 15px; background: var(--panel); border-radius: 16px; padding: 12px 16px;
             max-width: 44ch; }
.wl-block h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 18px; }
.wl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none;
            counter-reset: wl; }
.wl-steps li:not([hidden]) { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 16px;
                             background: var(--field); counter-increment: wl; }
.wl-steps li::before { content: counter(wl); font-size: 14px; font-weight: 600; width: 32px; height: 32px;
                       border-radius: 50%; display: grid; place-items: center; background: var(--accent);
                       color: var(--on-accent); }
.wl-steps strong, .wl-card strong, .wl-record strong { font-family: var(--gm-font-display); font-weight: 400;
                                                       font-size: 19px; line-height: 1.25; }
.wl-steps span, .wl-card span { color: var(--muted); font-size: 15px; }
.wl-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wl-card { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 16px; background: var(--field); }
.wl-card .gm-icon-circle { width: 44px; height: 44px; color: var(--on-accent); }
.wl-card .gm-icon-circle svg { width: 22px; height: 22px; }
/* "Your official figures live here": a Card with the red stroke at its side (no tint block) */
.wl-record { display: grid; gap: 4px; padding: 18px 20px 18px 22px; border-radius: 6px var(--gm-radius-card)
             var(--gm-radius-card) 6px; background: var(--panel); border-left: 4px solid var(--accent); }
.wl-record span { font-size: 15px; color: var(--muted); }
.wl-help { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin: 0; color: var(--muted);
           font-size: 15px; }
.wl-help strong { color: var(--ink); }
@media (max-width: 900px) { .wl-cards { grid-template-columns: repeat(2, 1fr); } .wl-steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .wl-cards { grid-template-columns: 1fr; } .wl-hero { padding: 8px 0 0; } }

/* Row 136 B, gap 8: where a figure comes from, one quiet link per row */
.quiet-link { color: var(--muted); font-size: 14px; }
.quiet-link:hover { color: var(--accent-hover); }

/* Row 136 B, gap 6: back to the newest words while the reader is above them. It is the composer's own first row, so
   the reading area gives way to it and it never covers a word of an answer (the demo's review, 8 Oct) */
.composer > .more-below { display: block; width: auto; max-width: none; margin: 0 auto 8px; min-height: 36px;
                          padding: 6px 14px; border-radius: var(--gm-radius-pill); border: 1px solid var(--field-edge);
                          background: var(--field); color: var(--ink); box-shadow: 0 2px 10px var(--shadow); font-size: 14px;
                          white-space: nowrap; }

/* Row 136 B, gaps 11 and 12: the run's changes in words, the changed rows marked, and one card per figure on a phone */
.changes { margin: 0 0 14px; padding-left: 20px; }
.changes li { margin: 2px 0; }
table.cmp tr.changed .fig-name { font-weight: 600; }
table.cmp .delta { color: var(--muted); }
table.cmp td.num { white-space: nowrap; }       /* an amount on one line; a change's per cent wraps below it if tight */
table.cmp td.delta { white-space: normal; }
table.cmp .delta .amt, table.cmp .delta .pc { white-space: nowrap; }
table.cmp .per { display: none; }
@media (max-width: 640px) {
  table.cmp, table.cmp tbody { display: block; }
  table.cmp thead { display: none; }
  table.cmp tr { display: block; border-bottom: 1px solid var(--hair); padding: 8px 0; }
  table.cmp td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 1px 0; font-size: 14px;
                 line-height: 1.4; }
  table.cmp td::before { content: attr(data-label); color: var(--muted); }
  table.cmp td.fig-name { display: block; padding-bottom: 2px; font-size: 15px; }
  table.cmp td.period { display: none; }
  table.cmp .per { display: inline; }
  table.cmp td.fig-name::before { content: none; }
}

/* Row 136 B, gap 7: Overview's key figures as tiles, then each case's series with the years across; on a phone the
   year table scrolls sideways under its figure names */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tile { background: var(--field); border-radius: 16px; padding: 14px 16px; }
.tile p { margin: 0; }
.tile-name { font-size: 14px; color: var(--muted); margin-bottom: 6px !important; }
.tile-case { font-size: 13px; margin-top: 6px !important; }
.tile-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.tile-value { font-size: 19px; color: var(--ink); }
.tile .quiet-link { font-size: 13px; }
table.years { font-size: 14px; }
table.years th[scope="row"], table.years thead th:first-child { position: sticky; left: 0; z-index: 1;
                                                                 background: var(--panel); }
table.years th[scope="row"] { font-weight: 500; color: var(--ink); font-size: 14px; min-width: 7em; }
table.years td { white-space: nowrap; }
.fig-link { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--field-edge);
            text-underline-offset: 3px; }
.fig-link:hover, .fig-link:focus-visible { color: var(--accent); text-decoration: underline; }

/* Row 136 B, gap 1: a phone gets one compact bar: the brand, the language and a menu; a desk keeps its row of links */
/* The header's own .bar only: a chart's bars carry the same class, and a bare `.bar { display: none }` hid them on a
   desk (found by item 40's screenshots; it had been so since 8 Oct) */
.top .bar { display: none; align-items: center; gap: 8px; }
.menu { position: relative; }
.menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--panel); border-color: var(--ink); }
.menu nav { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; flex-direction: column; flex-wrap: nowrap;
            align-items: stretch; gap: 2px; min-width: 220px; padding: 6px; background: var(--field);
            border: 1px solid var(--hair); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow); }
.menu nav a, .menu nav button { display: block; width: 100%; text-align: left; padding: 11px 14px; border: 0;
                                border-radius: 10px; background: none; color: var(--ink); min-height: 44px; }
.menu nav a:hover { color: var(--accent-hover); }
.menu nav form { margin: 2px 0 0; padding-top: 2px; border-top: 1px solid var(--hair); }
/* The desk's row needs the wordmark (241 px), its links (about 780 px in English and Thai) and the gaps: about
   1,070 px (measured 11 Oct). Under 1,080 the compact bar takes over, so the header is never two rows */
@media (max-width: 1080px) {
  .top .in { flex-wrap: nowrap; padding: 8px 12px; gap: 8px; }
  .top nav.wide { display: none; }
  .top .bar { display: flex; min-width: 0; }
  .top .bar .quiet { padding: 8px 10px; }
  .menu, .menu > summary { min-width: 0; }
  .menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* a long name gives way first */
}

/* Row 136 B, gap 13: a document opens as its text, under its pages or sheets */
.back { margin: 0 0 8px; font-size: 14px; }
.doc-title { overflow-wrap: anywhere; }
.doc-note { margin: 0; font-size: 14px; }
.doc-reader .doc-group { margin: 24px 0 8px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 17px; }
.doc-reader .doc-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-where { margin: 12px 0 2px; font-size: 13px; color: var(--muted); }
.doc-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
.doc-nav { display: flex; justify-content: space-between; margin: 20px 0 0; }
.list.docs a { overflow-wrap: anywhere; }

/* The team's preview (PLAN item 26): the banner says whose view this is, and Feedback opens below it; each answer has
   its own Feedback (row 144). No script: a details element with a short form. */
.banner.team { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
               background: var(--panel); }
.banner.team .saved { font-weight: 600; color: var(--ink); }
.feedback summary { display: inline-block; cursor: pointer; font-size: 14px; color: var(--ink); padding: 4px 12px;
                    border: 1px solid var(--field-edge); border-radius: var(--gm-radius-pill); background: var(--field);
                    list-style: none; }
.feedback summary::-webkit-details-marker { display: none; }
.feedback form { display: flex; flex-direction: column; gap: 6px; margin: 8px auto 4px; max-width: 560px;
                 text-align: left; }
.feedback label { font-size: 14px; color: var(--muted); }
.feedback textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--field-edge);
                     border-radius: 10px; background: var(--field); color: var(--ink); resize: vertical; }
.feedback button { align-self: flex-start; background: var(--accent); color: var(--on-accent); border: 0;
                   border-radius: var(--gm-radius-pill); padding: 8px 16px; min-height: 40px; font-weight: 600; }
.feedback button:hover { background: var(--accent-hover); }
.banner.team .feedback[open] { flex-basis: 100%; }
.bot > .feedback { margin-top: 8px; }

/* Gap 4 (PLAN item 27): Copy and "this looks wrong" under an answer; Stop while one streams */
.turn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; }
.turn-tools .quiet { padding: 4px 10px; min-height: 32px; font-size: 14px; }
.box .stop { flex: none; min-height: 44px; padding: 10px 16px; border-radius: var(--gm-radius-pill);
  border: 1px solid var(--field-edge); background: var(--field); color: var(--ink); cursor: pointer; }
.stop-live { margin: 4px 0 8px; }
.stop-live .quiet { padding: 4px 10px; min-height: 32px; font-size: 14px; }
.turn.live:has(.flow .done) .stop-live { display: none; }

/* P4.7: the person's conversations above the thread: a new one, the list (newest first) and a find */
.convs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 14px; box-sizing: border-box;
         width: 100%; max-width: 852px; margin: 10px auto 0; padding: 0 16px; }   /* the thread's column and gutter */
.convs details { flex: 1 1 260px; }
.convs summary { cursor: pointer; color: var(--accent); }
.conv-find { display: flex; gap: 8px; margin: 8px 0; }
.conv-find input { flex: 1; min-width: 0; font: inherit; padding: 6px 12px; border: 1px solid var(--field-edge);
  border-radius: var(--gm-radius-pill); background: var(--field); color: var(--ink); }
.conv-list { list-style: none; margin: 4px 0 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.conv-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0;
                border-bottom: 1px solid var(--hair); }
.conv-list li a { min-width: 0; overflow-wrap: anywhere; }
.conv-list li .muted { flex: none; white-space: nowrap; }
@media (max-width: 480px) { .convs { padding: 0 12px; margin-top: 8px; } }
.conv-list li[aria-current="page"] a { font-weight: 600; }

/* P4.7: the preferences page */
.prefs fieldset { border: 1px solid var(--field-edge); border-radius: 16px; padding: 12px 16px; margin: 0 0 14px; }
.prefs legend { padding: 0 6px; font-weight: 600; }
.prefs label { display: block; padding: 6px 0; }

/* The demo's entry (PLAN item 47): one field, one box, one button */
.try label { display: block; font-weight: 600; margin: 0 0 6px; }
.try input[type="email"] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--field-edge);
                           border-radius: 10px; background: var(--field); color: var(--ink); min-height: 44px; }
.try .tick { font-weight: 400; margin: 14px 0 16px; }
.try + h2 { margin-top: 28px; font-size: 16px; }

/* Motion: "gm wakes up", on the sign-in page only (guide §8; decision log row 189 A, PokoBlue, 12 Oct 2026). Once per
   page load the header's wordmark unfolds from its left edge to its end, in the pack's --gm-dur-wake with its
   --gm-ease-out; then nothing moves. The website's unfold starts at the lockup's tile. This header shows the wordmark,
   which has no tile: so no tile layer and no settling in, and one mask layer 214% of the wordmark wide. It is solid
   for the wordmark's own width and soft over the next 14% of it (163 of wordmark-on-light.svg's 1,165 units: the
   website's edge, 12% of its lockup), and it moves from 100% (nothing shows, so no faint first letters at the start)
   to 0 (all of it shows). Recompute the 214 and the 114 if logo.py changes the wordmark. It starts when the
   website's does, three quarters into --gm-dur-slow: the picture has that long to arrive, so the name is not met
   half unfolded on a slow line (the fresh review of fe0986f). No script; every rule of the motion is inside
   no-preference, so with reduced motion nothing moves and the wordmark simply stands there.
   On a phone that page's header shows the wordmark too, where every other page shows the tile: most people sign in on
   a phone, the tile never moves where it stands alone, and this header has no menu beside it (the chief of staff,
   12 Oct: which form of the logo fits a header is layout). It is 30 px tall wherever it has the room, and gives way
   to a language link beside it on the narrowest phones: about 26 px at 320 px wide beside the longer of the two,
   above the wordmark's 24 px minimum. (Its widest is its link's width and 4 px: the picture's own margin is -4px.) */
@media (max-width: 560px) {
  body.signin .brand { flex: 0 1 auto; min-width: 0; }
  body.signin .brand .wm { display: block; width: 241px; max-width: calc(100% + 4px); height: auto; }
  body.signin .brand .tl { display: none; }
  body.signin .top .bar { flex: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body.signin .brand .wm {
    -webkit-mask-image: linear-gradient(to right, black calc(100% / 2.14), transparent calc(114% / 2.14));
            mask-image: linear-gradient(to right, black calc(100% / 2.14), transparent calc(114% / 2.14));
    -webkit-mask-size: 214% 100%; mask-size: 214% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    animation: gm-unfold var(--gm-dur-wake) var(--gm-ease-out) calc(var(--gm-dur-slow) * 0.75) both;
  }
}
@keyframes gm-unfold {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;   mask-position: 0 0; }
}