/*
 * TITLE: app.css — the mn-brief.com design system
 * SHORT DESCRIPTION: every style of the site (strict CSP: no inline style anywhere). Tablet first, responsive
 *                    (phone 375 px, tablet 768 px, PC), calm colours, large type, cards, big 44 px buttons, sticky
 *                    letter tabs, status chips, red banner, folded blocks, draft box, range bar, legend, login,
 *                    settings, history and to-do forms and tables. System font stack only (no external fonts).
 *                    2026-09-15: the folded "New since the morning brief" block (details.fold.new-since, ul.newmail).
 *                    2026-09-15: the SORT folder picker under a card (.sortpick and its parts).
 *                    2026-09-15 (Bernard's remarks, DECISIONS 18): the status line under the title (.runline), the calm
 *                    "Arrived since Claude's last reading" block, the folded technical notes, the folder line and SORT
 *                    line of a private card, the two lists of "Answered today", the files of a draft (.draft-att) and
 *                    the folder admin page /sorter (.foldertree, .fo-*). Same dark palette variables.
 *                    2026-09-15 (round-4 review fixes #10, #14): the note line of "Read the full mail" (.fm-note: Gmail
 *                    not read, the stored copy / messages not read in time) and an ask the page stopped waiting for
 *                    (.ask-late), both in the calm warning colours.
 *                    2026-09-19 (Bernard: hover is not clear, and does not exist on his tablet): the tap-friendly
 *                    per-card "What do these buttons do?" panel (details.btnhelp, .btnhelp-list) and the one-line
 *                    "what happens" note a REMIND / FOLLOW / FORWARD / OTGON panel now shows (.cpanel-note).
 *                    2026-09-20 (round 5): the command box under every card (form.cmdbox, .cmdhint, .cmd-slot and
 *                    its three answers), the violet note a card comes back with when Claude needs him
 *                    (.note-command), the little word that says what kind of card the server's own reading wrote
 *                    (.tag-stall), and the folded list "Claude decided these do not need you" (details.notneeded).
 *                    2026-09-20 (round-5 review fixes): .cmd-msg.cmd-ok — the green line the command box shows when
 *                    something was really done but the card itself stays standing (a to-do).
 *                    2026-09-22 (the name lookup of the To field): .csug — the list of people a typed name may be,
 *                    under a To / Cc field of a draft and in the FORWARD box, with big tap rows.
 *                    2026-09-24 (step 8, spec B3): .watch-box — the quiet box under a to-do tied to its mail
 *                    conversation ("On this conversation since you wrote this to-do …", one line per mail, the Gmail
 *                    link), on the brief and on the to-do page. lib/todo_lib.php writes what is inside, so the box
 *                    styles its plain elements (p, ul, li, a) rather than class names of that library.
 *                    2026-09-25 (Otgon's desk, DECISIONS 31): the folded box "Files in this conversation" on a card
 *                    (details.files-box, ul.files and its four spans), the tag of a PROMISED card (the third kind the
 *                    server's own reading writes on her desk), and the phone pass at 480 px in ONE block at the end
 *                    of the file — added, never rewritten, so every earlier rule stands: the sticky tabs bar scrolls
 *                    sideways in one row instead of wrapping (the search box under it, full width), every tap target
 *                    at least the 44 px of --tap (the small buttons, the link buttons, the table buttons, the file
 *                    remove button, the people list), the draft and command boxes and their inputs full width, the
 *                    range bar's controls full width, and the cards edge to edge with 12 px of padding.
 *                    2026-09-25 (Otgon's desk, block 2, spec 8.1 / 8.2): the MAKE button (.btn-make, violet like the
 *                    Ask box), the MAKE box under a card (.makebox: the chooser, the form drawn from a schema —
 *                    .make-field with its label, box and description — "More fields" and "What this makes" folded,
 *                    the buttons, the one status line, the invoice preview with its figures and warnings) and the
 *                    UPDATE card's list of changes (.upd: one row per change with a big tick box, the words, how
 *                    sure the office is, a status word for a change already settled, the evidence folded under
 *                    "why"). One more phone block at the end: 44 px tick boxes and buttons, every box full width.
 *                    2026-09-25 (block 3a, spec 9.2 / 9.4): three small rules at the very end. The read-only view of
 *                    Otgon's desk (index.php ?as=2 for Bernard): its band (.view-banner, the blue info band in bold),
 *                    its cards drawn with a dashed edge so a look can never be mistaken for his own brief
 *                    (main[data-view="1"] .card), the quiet link that opens it under the title of his brief
 *                    (.view-link) and the link back (.view-back). And the row of the second, armed button that makes a
 *                    paid invoice again in the MAKE box (.make-again).
 *                    2026-09-25 (block 3c, spec 10.3): one more block at the very end for the Clients tab, which
 *                    becomes MDMC's full client system: the view buttons with their counts, the search form that
 *                    asks the server, one card per client on the phone, the relation badges in MDMC's colours
 *                    (.cl-badge .cl-rel-active green, -potential blue, -past orange, -inactive and -archived grey,
 *                    .cl-type, .cl-wait red / amber / green), the follow-up line and the profit cell of a row, the
 *                    folding sections of the detail (details.fold.cl-sec: the 44 px summary of details.fold), the
 *                    money chips (.cl-chips, .cl-chip, green for a profit, red for a loss), the rate line (.cl-rate),
 *                    the item cards of invoices, payments, tours and prices (.cl-items, .cl-item) and the status
 *                    pills (.cl-status: paid green, part paid amber, issued or sent blue, void grey). Added, never
 *                    rewritten: every earlier rule stands.
 *                    2026-09-25 (block 4B, spec 11.2 "Screens"): one more block at the very end for the REPLACE and
 *                    SEND panels of an invoice (.invbox, the invoice drawn .inv-doc with its lines table .inv-lines,
 *                    the old/new figures .inv-cmp, the "replaces" line, the paid and warning blocks, the mail with its
 *                    address chips .inv-chip, the signature and AI-line box .inv-sign) and their confirmation sheet
 *                    (.inv-sheet-wrap / .inv-sheet): side by side from 900 px (her PC), under each other on a phone
 *                    with one card per line and a sheet that rises from the bottom. Added, never rewritten.
 *                    2026-09-25 (block 5a, spec 12.2-12.4): one more block at the very end for the action row of the
 *                    three G cards of MDMC (.mdmc-box, .mdmc-acts, .mdmc-plain; a blue edge for a tour check, amber
 *                    for a payment claim, green for a camps card): TICK and the MDMC links, full width on a phone.
 *                    The TICK sheet is the invoice sheet above. Added, never rewritten.
 *                    2026-09-28 (block 5b-0, spec 13.10 / 13.11): one more block at the very end. The checks of ONE tour
 *                    card (.cfm: the groups by kind .cfm-group / .cfm-head, one row per check .cfm-item — .cfm-can with
 *                    its big tick box .cfm-pick, .cfm-no with its reason .cfm-why and its own "Open in MDMC" .cfm-open —
 *                    MDMC's facts folded .cfm-facts / .cfm-dl, the set-aside line .cfm-aside), the one line of the
 *                    information-only CAMPS card (.mdmc-who), and the UPDATE card's date line that cannot be ticked
 *                    (.upd-fixed: the sentence .upd-date in the warning colour, the link .upd-link). 44 px targets on a
 *                    phone. Added, never rewritten.
 *                    2026-10-03 (block 6a, spec 14.1 a-d — Bernard 3 Oct 2026): one more block at the very end. The B
 *                    button of the read-only view (.btn-b, .view-btns), the tour card's two groups "Questions for you"
 *                    (.cfm-questions, .cfm-q, .cfm-conf, the YES / NO / REMIND row .cfm-qbtns, the refused date sentence
 *                    .cfm-date, the help line .cfm-help, a reminded question folded details.cfm-reminded / .cfm-asleep,
 *                    the date box of REMIND .cfm-remind-box) and "To do in MDMC" (.cfm-todo), the menu link to her brief
 *                    in the header bar (.mb-nav-as) and the section "Her decisions (last 60 days)" of the view
 *                    (.decisions, table.decisions-tbl). 44 px targets on a phone. Added, never rewritten.
 *                    2026-10-10 (block 6d-4, spec 14.9 6d-4 d/e): one more block at the very end. The page /new (form.nmform with the draft-row rows, the From note .nm-why, the file line .nm-file, the status line .nm-status, the locked form, .nm-slot), the To / Subject line of a new mail's G card (.nm-facts), the link NEW MAIL WITH THIS FILE of a document card (a.btn-nmfile), and the "Add a document" picker of every draft box (.docpick: the two parts .dp-part, the groups .dp-group, the rows .dp-item with the kind pill .dp-kind, the name, the date and size, "added", the search rows .dp-search, the notes .dp-note, the left-out line .dp-left). 44 px targets on a phone. Added, never rewritten.
 *                    261019-desk (2026-10-19, Bernard: the header menu on ONE line; "Otgon's brief" opens her real desk): one more block at the very end. The switch of the bar (form.mb-nav-form with button.mb-nav-as, a button that looks exactly like a link of the bar), the header ON ONE LINE on a PC (>= 1024 px: the header row uses the full width, the row and the nav never wrap, the links a little tighter, the date the one part that may shorten), below 1024 px the nav on ONE line of its own that scrolls sideways (never two lines), 44 px targets kept; and the coloured band under the header while Bernard works on her desk (.desk-band, .desk-band-row, .desk-band-text, .desk-band-back). Added, never rewritten.
 *                    2026-10-24 (type bar, _CLAUDE/261024-SPEC-typebar.md step 9): one more block at the very end. The row IND / TO / OTHER / SUPPLIER / REMOVE under the card number: its own full-width row of the card head (div.tb-slot, grid-column 1 / -1), the buttons (.tb-btn, keyed on data-tb so the colours hold whatever classes the row carries) in four distinct colours with two looks — full colour (.is-full: MDMC holds it or a person chose it) and light colour with a '?' (.is-guess: the system's guess) — a small lock drawn in CSS (.is-locked: the partners, always TO), a grey row that cannot be tapped (.is-unreadable / .is-checking), the red REMOVE set a little apart, the "being written" look of a tap (.is-pending on the row, .is-writing on the button: moving stripes, still for prefers-reduced-motion), the grey why line (.tb-why) and the one-sentence answer with "Open in MDMC" (.tb-msg). It wraps onto two lines at 360 px with every button readable. Added, never rewritten.
 *                    2026-10-24 (type bar, integration): the '?' of a guess is the row's own span.tb-q (shown on .is-guess only, no ::after), and the small word "locked" after a partner's row (.tb-lock) is muted.
 * DATE: 2026-10-03 (block 6a: the B button, the questions of a tour card, the menu link, her decisions); 2026-09-28 (block 5b-0: the tour card's checks, the CAMPS line, the UPDATE date line); 2026-09-27 (.who: the person's address under the title; .who-src: the MDMC client's code in front); 2026-09-25 (block 5a: the MDMC G cards' action row; block 4B: the invoice panels; block 3c: the Clients tab's
 *       cards, badges, chips and folding sections)
 *
 * Class names the page frame (lib/http_lib.php) is expected to use. All of them are styled here, and the plain
 * elements (body > header, body > nav, body > footer) are styled as well, so the frame looks right whatever it uses:
 *   header.mb-head  .mb-brand  .mb-date  .chip (.chip-complete .chip-partial .chip-fallback .chip-late .chip-writing
 *   .chip-sample .chip-none)  .data-as-of (.is-stale)  nav.mb-nav a (.is-active)  footer.mb-foot  ul.legend
 */

/* ---------- tokens ---------- */
:root {
  --bg: #0f172a;
  --card: #1e293b;
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --line: #334155;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --accent-soft: #243049;
  --ok: #22c55e;
  --ok-soft: #14532d;
  --warn: #fbbf24;
  --warn-soft: #78350f;
  --danger: #f87171;
  --danger-soft: #7f1d1d;
  --banner-bg: #7f1d1d;
  --banner-ink: #fecaca;
  --chip-complete: #14532d;
  --chip-partial: #78350f;
  --radius: 14px;
  --radius-s: 8px;
  --pad: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --tap: 44px;
  --maxw: 960px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  min-height: 100vh;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 8px 0; font-weight: 700; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
p { margin: 0 0 12px 0; }
a { color: #93c5fd; text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { text-decoration-thickness: 2px; }
code, .codeword {
  font-family: var(--mono);
  font-size: 0.92em;
  background: #0f172a;
  border-radius: 4px;
  padding: 1px 5px;
}
b, strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.small { font-size: 15px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------- page frame: header, nav, footer ---------- */
body > header, header.mb-head {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 10px var(--pad);
}
.mb-head-row, body > header > div {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.mb-brand, body > header h1, header.mb-head h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.mb-brand a { color: inherit; text-decoration: none; }
.mb-date { font-size: 17px; color: var(--muted); }
.data-as-of {
  font-size: 15px;
  color: var(--muted);
}
.data-as-of.is-stale { color: var(--danger); font-weight: 700; }

nav.mb-nav, body > nav, body > header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-left: auto;
}
nav.mb-nav a, body > nav a, body > header nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-s);
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
}
nav.mb-nav a:hover, body > nav a:hover, body > header nav a:hover { background: var(--accent-soft); }
nav.mb-nav a.is-active, body > nav a.is-active, nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--accent);
  font-weight: 700;
}

/* status chips (header and in-page) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  background: #334155;
  color: var(--ink);
  white-space: normal;
}
.chip-complete, .chip.ok { background: var(--chip-complete); color: #bbf7d0; }
.chip-partial, .chip.warn { background: var(--chip-partial); color: #fde68a; }
.chip-fallback, .chip-late, .chip.danger { background: var(--danger-soft); color: var(--banner-ink); }
.chip-writing { background: var(--accent-soft); color: #bfdbfe; }
.chip-sample { background: #312e81; color: #c7d2fe; }
.chip-none { background: #334155; color: var(--muted); }

body > footer, footer.mb-foot {
  max-width: var(--maxw);
  margin: 32px auto 0 auto;
  padding: 20px var(--pad) 40px var(--pad);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}
footer h2, footer h3 { color: var(--ink); font-size: 18px; }
ul.legend, footer ul {
  margin: 8px 0 0 0;
  padding-left: 22px;
}
ul.legend li, footer ul li { margin: 4px 0; }
ul.legend li b, ul.legend li strong, footer ul li b, footer ul li strong { color: var(--ink); }

/* ---------- layout ---------- */
.wrap, main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--pad) 24px var(--pad);
}
.page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 4px 0 12px 0;
}
.page-title h1 { margin: 0; }

/* ---------- banner ---------- */
.banner {
  background: var(--banner-bg);
  color: var(--banner-ink);
  border: 1px solid #991b1b;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 16px 0;
  font-size: 17px;
  font-weight: 600;
}
.banner-info {
  background: #312e81;
  color: #c7d2fe;
  border-color: #4338ca;
}
.banner-warn {
  background: var(--warn-soft);
  color: #fde68a;
  border-color: #b45309;
}
.banner a { color: inherit; }

/* ---------- letter tabs (sticky) ---------- */
.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: 8px 0;
  margin: 0 0 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: var(--tap);
  min-width: 52px;
  padding: 0 10px;
  border-radius: var(--radius-s);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}
.tab:hover { background: var(--accent-soft); text-decoration: none; }
.tab.is-active { box-shadow: inset 0 -4px 0 var(--accent); border-color: var(--accent); }
/* 2026-10-18 (Bernard): the card a letter tab just went to glows for a moment (app.js tabGoTo) */
.card.is-tab-target { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow 0.3s ease; }
.tab .n {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
.tab.is-empty .n { background: #334155; color: var(--muted); }
.tabs .search {
  flex: 1 1 160px;
  min-height: var(--tap);
  margin-left: auto;
  max-width: 260px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 16px;
  background: var(--card);
}

/* ---------- sections ---------- */
.sec { margin: 0 0 24px 0; scroll-margin-top: 72px; }
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 10px 0;
}
.sec-head h2 { margin: 0; }
.sec-head .sub { color: var(--muted); font-size: 15px; }
.calm {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--muted);
}

/* E: groups by conversation */
.group {
  border-left: 4px solid var(--accent-soft);
  padding-left: 10px;
  margin: 0 0 16px 0;
}
.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px 0;
  color: var(--muted);
  font-size: 15px;
}
.group-head .who { font-weight: 700; color: var(--ink); }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  margin: 0 0 12px 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.card.is-fading { opacity: 0; transform: translateX(24px); }
.card.is-error { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); }
.card.is-sample { border-style: dashed; }
/* an earlier day: the card is a record, so it is a shade quieter and carries no buttons */
.card.is-readonly { background: #1a2438; }
.card.is-hidden-by-search { display: none; }
.card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: start;
}
.code {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  grid-row: 1;
}
.tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #334155;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  grid-column: 1;
}
/* 2026-09-20: which of the two the server's own reading made this card — a client waiting for an answer, or one
   who has gone silent. An adopted card can stand in the other letter, and then only this says so. */
.tag-stall {
  background: var(--accent-soft);
  color: #bfdbfe;
  letter-spacing: 0;
  white-space: nowrap;
}
.card[data-stall="SILENT"] .tag-stall { background: var(--warn-soft); color: #fde68a; }
.card-head .title {
  grid-column: 2;
  grid-row: 1 / span 3;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.substance {
  white-space: pre-line;
  margin: 10px 0 0 0;
}
.verdict {
  margin: 10px 0 0 0;
  padding: 6px 10px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.verdict.v-junk { border-color: var(--danger); background: var(--danger-soft); }
.verdict.v-ok { border-color: var(--ok); background: var(--ok-soft); }
.verdict.v-warn { border-color: var(--warn); background: var(--warn-soft); }
.meta {
  margin: 10px 0 0 0;
  color: var(--muted);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}
.meta .sep::before { content: "\00b7"; color: var(--muted); }
.meta a.gmail { font-weight: 600; }
/* 2026-09-27 (Bernard: always write the e-mail address of the person, so it can be searched in Gmail): the address right
   under the card's title (index.php mb_pages_person_line) - plain text that one tap selects whole, to copy it; a long
   address wraps instead of widening the card on the phone; "search in Gmail" searches it in the card's own mailbox. */
.who {
  margin: 6px 0 0 0;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
}
.who-addr { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.who-search { font-size: 14px; white-space: nowrap; }
/* 2026-09-27, second part: "client RAINB" in front of addresses that come from MDMC (a money or to-do card that names
   nobody itself) - muted, so the addresses stay what the eye finds first. */
.who-src { color: var(--muted); font-size: 14px; white-space: nowrap; }
.note-box {
  margin: 10px 0 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  font-size: 16px;
}
.note-answered { background: var(--warn-soft); color: #fde68a; }
.note-sent { background: var(--ok-soft); color: #bbf7d0; }
.note-remind { background: #334155; color: #cbd5e1; }
.note-failed { background: var(--danger-soft); color: var(--banner-ink); font-weight: 600; }
.note-private { background: var(--warn-soft); color: #fde68a; font-weight: 600; }
.doc-path { font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 8px 0 0 0; }
.doc-open { margin: 8px 0 0 0; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--card);
  color: #ffffff;   /* Bernard 2026-09-15: dark letters on the dark card could not be read — white letters, coloured border */
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  touch-action: manipulation;
}
.btn:hover { background: var(--accent-soft); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.btn-main { background: var(--accent); color: var(--accent-ink); }
.btn-main:hover { background: #1d4ed8; }
.btn-ok { border-color: var(--ok); color: #ffffff; }
.btn-ok:hover { background: var(--ok-soft); }
.btn-ok.btn-main { background: var(--ok); color: #fff; }
.btn-ok.btn-main:hover { background: #15803d; }
.btn-danger { border-color: var(--danger); color: #ffffff; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-quiet { border-color: #64748b; color: #e2e8f0; font-weight: 600; }
.btn-quiet:hover { background: #0f172a; }
.btn-ask { border-color: #a78bfa; color: #ffffff; }
.btn-ask:hover { background: #2e1065; }
.btn-small { min-height: 36px; padding: 4px 12px; font-size: 15px; }
.btn.is-confirm {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: #fde68a;
  animation: mb-pulse 1s ease-in-out infinite alternate;
}
.btn.is-busy { opacity: 0.7; cursor: progress; }
@keyframes mb-pulse { from { box-shadow: 0 0 0 0 rgba(251,191,36,0.35); } to { box-shadow: 0 0 0 6px rgba(251,191,36,0); } }
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0 0;
}
.btns.more { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* the note + argument inputs of a card */
.inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0 0;
}
.inputs input, .argrow input, .argrow select {
  flex: 1 1 200px;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 16px;
  background: var(--card);
  color: var(--ink);
}
.inputs input:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent); }
.argrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 0;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-s);
}
.argrow label { font-weight: 700; flex: 1 1 100%; }

/* messages on a card / block */
.msg {
  margin: 10px 0 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  font-size: 16px;
  background: #0f172a;
  color: var(--ink);
}
.msg-ok { background: var(--ok-soft); color: #bbf7d0; }
.msg-err { background: var(--danger-soft); color: var(--banner-ink); font-weight: 600; }
.msg-warn { background: var(--warn-soft); color: #fde68a; }
.msg-info { background: var(--accent-soft); color: #bfdbfe; }

/* ---------- folded blocks ---------- */
details.fold {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 12px 0;
}
details.fold > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--pad);
  font-weight: 700;
  font-size: 17px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > summary .n { color: var(--muted); font-weight: 600; }
details.fold > .fold-body { padding: 0 var(--pad) var(--pad) var(--pad); }
ul.done { list-style: none; margin: 0; padding: 0; }
ul.done li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
ul.done li:first-child { border-top: 0; }
ul.done .done-code { font-weight: 700; }
ul.done .done-act {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: #bbf7d0;
  font-size: 14px;
  font-weight: 700;
}
ul.done .done-act.auto { background: var(--warn-soft); color: #fde68a; }
ul.done .done-act.build { background: #334155; color: var(--muted); }
ul.done .done-title { flex: 1 1 240px; }
ul.done .done-res { color: var(--muted); font-size: 15px; flex: 1 1 100%; }
ul.done .btn { margin-left: auto; }

/* ---------- "Arrived since Claude's last reading" (the mail update, 2026-09-15): calm, nothing to do ---------- */
details.fold.new-since { border-color: var(--line); }
details.fold.new-since > summary { color: var(--muted); font-weight: 600; }
.new-since .newmail-box { font-size: 16px; color: var(--muted); margin: 14px 0 2px 0; }
ul.newmail { list-style: none; margin: 0; padding: 0; }
ul.newmail li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
ul.newmail li:first-child { border-top: 0; }
ul.newmail .nm-from { font-weight: 700; color: var(--ink); }
ul.newmail .nm-addr { color: var(--muted); font-size: 15px; }
ul.newmail .nm-ago { margin-left: auto; color: var(--muted); font-size: 15px; white-space: nowrap; }
ul.newmail .nm-subj { flex: 1 1 100%; }
ul.newmail .nm-snip { flex: 1 1 100%; color: var(--muted); font-size: 15px; }
ul.newmail .nm-link { font-size: 15px; }

/* ---------- range bar ---------- */
.rangebar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px var(--pad);
  margin: 0 0 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rangebar label { font-weight: 700; flex: 1 1 100%; }
.rangebar input, .rangebar select {
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 16px;
  background: var(--card);
}
.rangebar input { flex: 1 1 200px; }
.rangebar .hint { flex: 1 1 100%; color: var(--muted); font-size: 15px; margin: 0; }

/* ---------- draft box ---------- */
.draft {
  margin: 12px 0 0 0;
  padding: var(--pad);
  border: 1px solid #3b82f6;
  border-radius: var(--radius);
  background: #1e3a5f;
}
.draft-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 8px 0;
}
.draft-head h3 { margin: 0; }
.draft-head .ver { color: var(--muted); font-size: 15px; }
.draft-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 10px;
  align-items: center;
  margin: 0 0 8px 0;
}
.draft-row label { font-weight: 700; }
.draft-row input, .draft-row select, .draft textarea, .draft .instr {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 16px;
  background: var(--card);
  color: var(--ink);
}
.draft textarea {
  min-height: 220px;
  line-height: 1.5;
  resize: vertical;
  display: block;
  margin: 6px 0 0 0;
}
.draft-from { font-weight: 700; }
.draft-warn {
  margin: 4px 0 8px 0;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  background: var(--warn-soft);
  color: #fde68a;
  font-weight: 600;
}
.draft-red {
  margin: 4px 0 8px 0;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  background: var(--danger-soft);
  color: var(--banner-ink);
  font-weight: 700;
}
.draft-status {
  margin: 8px 0 0 0;
  color: var(--muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.draft-status.is-sent { color: #bbf7d0; font-weight: 700; }
.draft-status.is-failed { color: var(--danger); font-weight: 700; }
.draft-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 0 0;
}
/* The description box (what the mail must say) sits on its own line above the buttons and holds three lines of
   text: it is written BEFORE Claude writes anything, so it is no longer a one-line afterthought (2026-09-20). */
.draft-btns .instr { flex: 1 1 100%; width: 100%; min-height: 72px; resize: vertical; }
.draft.is-locked textarea, .draft.is-locked input, .draft.is-locked select { background: #0f172a; color: var(--muted); }
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mb-spin 0.9s linear infinite;
  flex: 0 0 auto;
}
@keyframes mb-spin { to { transform: rotate(360deg); } }

/* ---------- forms (login, settings, to-do add) ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  margin: 0 0 16px 0;
}
.panel h2 { margin-bottom: 10px; }
.login { max-width: 440px; margin: 40px auto; }
.login h1 { margin-bottom: 16px; }
.field { margin: 0 0 14px 0; }
.field label { display: block; font-weight: 700; margin: 0 0 4px 0; }
.field input, .field select, .field textarea, .addform input, .addform textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 17px;
  background: var(--card);
  color: var(--ink);
}
.field textarea, .addform textarea { min-height: 120px; resize: vertical; }
.field .help, .field small { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; }
.form-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.form-error {
  background: var(--danger-soft);
  color: var(--banner-ink);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  margin: 0 0 12px 0;
  font-weight: 600;
}
.form-ok {
  background: var(--ok-soft);
  color: #bbf7d0;
  border-radius: var(--radius-s);
  padding: 8px 12px;
  margin: 0 0 12px 0;
  font-weight: 600;
}
.key-once {
  font-family: var(--mono);
  font-size: 15px;
  background: var(--warn-soft);
  border: 1px solid #b45309;
  border-radius: var(--radius-s);
  padding: 10px 12px;
  word-break: break-all;
  user-select: all;
}
.set-on { color: var(--muted); font-size: 15px; }
.addform { margin-top: 8px; }
.addform .row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
.addform .row-2 { grid-template-columns: 1fr 220px; }
.addform label { display: block; font-weight: 700; margin: 0 0 4px 0; }

/* ---------- tables (history, settings) ---------- */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
}
table.tbl th, table.tbl td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.tbl th { background: #0f172a; font-weight: 700; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; }
table.tbl .btn { min-height: 36px; padding: 4px 12px; font-size: 15px; }
table.tbl a.date { font-weight: 700; white-space: nowrap; }

/* ---------- help page prose ---------- */
.help h2 { margin-top: 24px; }
.help ul, .help ol { padding-left: 24px; }
.help li { margin: 4px 0; }
.help .steps li { margin: 8px 0; }

/* ---------- small joins between the pages and the blocks above ---------- */
.rangebar .msg, .group .msg, .fold .msg { flex: 1 1 100%; width: 100%; }
.draft-slot:empty { display: none; }
.group > .card:last-child { margin-bottom: 4px; }
.sec-head .sub { white-space: nowrap; }
.panel .addform .form-btns { align-items: flex-end; height: 100%; }
.help .panel p:last-child, .help .panel ul:last-child { margin-bottom: 0; }
.help .doc-path { display: inline-block; margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  html { font-size: 16px; }
  :root { --pad: 12px; }
  .btns .btn { flex: 1 1 calc(50% - 8px); }
  .btns .btn-more { flex: 1 1 100%; }
  .card-head .title { font-size: 17px; }
  .code { font-size: 19px; }
  .tab { min-width: 44px; padding: 0 8px; font-size: 16px; }
  .tabs .search { max-width: 100%; margin-left: 0; }
  .draft-row { grid-template-columns: 1fr; }
  .draft-row label { margin-bottom: -2px; }
  .addform .row-2 { grid-template-columns: 1fr; }
  nav.mb-nav a, body > nav a, body > header nav a { padding: 0 8px; font-size: 15px; }
  ul.done .btn { margin-left: 0; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .btns .btn { flex: 0 1 auto; }
}
@media (min-width: 1024px) {
  :root { --maxw: 1000px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
  .btn.is-confirm { animation: none; }
  .spinner { animation-duration: 2s; }
}
/* ---------- the SORT folder picker (under a card; built by app.js, Bernard 2026-09-15) ---------- */
.sortpick {
  margin: 10px 0 0 0;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  color: var(--ink);
}
.sortpick-label { display: block; font-weight: 700; margin: 0 0 6px 0; color: var(--ink); }
.sortpick-select, .sortpick-name {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.sortpick-select:disabled { color: var(--muted); }
.sortpick-select optgroup { color: var(--muted); font-style: normal; font-weight: 700; }
.sortpick-select option { color: var(--ink); background: var(--card); font-weight: 400; }
.sortpick-status { margin: 6px 0 0 0; color: var(--muted); font-size: 15px; }
.sortpick-status.is-error { color: var(--danger); font-weight: 600; }
.sortpick-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 0;
}
.sortpick-cancel {
  min-height: var(--tap);
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}
.sortpick-cancel:hover, .sortpick-cancel:focus { color: var(--ink); }
.sortpick-newrow { margin: 12px 0 0 0; padding: 12px 0 0 0; border-top: 1px dashed var(--line); }
@media (max-width: 480px) {
  .sortpick-btns .btn { flex: 1 1 100%; }
  .sortpick-cancel { flex: 1 1 100%; }
}

/* ---------- Bernard's remarks of 15 September (DECISIONS 18) ---------- */

/* one short status line under the title: the AI brief and the last hourly reading */
.runline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: -4px 0 14px 0;
}
.run-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  background: #334155;
  color: var(--muted);
}
.run-ok { background: var(--chip-complete); color: #bbf7d0; }
.run-warn { background: var(--chip-partial); color: #fde68a; }
.run-bad { background: var(--danger-soft); color: var(--banner-ink); }
.run-info { background: var(--accent-soft); color: #bfdbfe; }

/* the routine's technical notes, folded at the bottom */
details.fold.technotes > summary { color: var(--muted); font-weight: 600; font-size: 16px; }
.technote {
  white-space: pre-line;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 12px 0;
}

/* "Answered today": the two lists and their counts */
.done-head { font-size: 16px; color: var(--muted); margin: 12px 0 2px 0; font-weight: 700; }
.fold-body > .done-head:first-child { margin-top: 0; }
details.fold > summary .sub-n { font-size: 14px; font-weight: 400; }

/* private card: where the sorter files the sender, and what the last SORT did */
.folderline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 8px 0 0 0;
  color: var(--muted);
  font-size: 15px;
}
.folderline .fl-folder { color: var(--ink); }
.linkbtn {
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #93c5fd;
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.linkbtn:hover, .linkbtn:focus { color: var(--ink); }
.sortline {
  margin: 6px 0 0 0;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  font-size: 15px;
}
.sort-done { background: var(--ok-soft); color: #bbf7d0; }
.sort-wait { background: var(--accent-soft); color: #bfdbfe; }
.sort-fail { background: var(--danger-soft); color: var(--banner-ink); }

/* files on a draft */
.draft-att {
  margin: 10px 0 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
}
.draft-att-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.draft-att-title { font-weight: 700; }
.draft-att-note { color: var(--muted); font-size: 14px; }
ul.draft-att-list { list-style: none; margin: 8px 0 0 0; padding: 0; }
.draft-att-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.draft-att-item:first-child { border-top: 0; }
.draft-att-name { flex: 1 1 160px; font-weight: 600; overflow-wrap: anywhere; }
.draft-att-size { color: var(--muted); font-size: 14px; white-space: nowrap; }
.draft-att-flag { flex: 1 1 100%; font-size: 14px; color: var(--danger); font-weight: 600; }
.draft-att-flag.is-sent { flex: 0 1 auto; color: var(--ok); }
.draft-att-item.is-missing .draft-att-name { color: var(--danger); }
.draft-att-x {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.draft-att-x:hover, .draft-att-x:focus { color: var(--danger); border-color: var(--danger); }
.draft-att-x:disabled { opacity: 0.5; cursor: default; }
.draft-att-none { color: var(--muted); font-size: 15px; }
.draft-att-status { margin: 6px 0 0 0; font-size: 15px; color: var(--muted); }
.draft-att-status.is-ok { color: #bbf7d0; }
.draft-att-status.is-failed { color: var(--danger); font-weight: 600; }

/* the folder admin page /sorter */
.fo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fo-row input, .fo-row select {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.fo-add label { display: block; font-weight: 700; margin: 0 0 6px 0; }
ul.foldertree { list-style: none; margin: 0; padding: 0; }
.fo-item { padding: 6px 0; border-top: 1px solid var(--line); }
.fo-item:first-child { border-top: 0; }
.fo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: var(--tap); }
.fo-name { flex: 1 1 180px; font-weight: 600; }
.fo-item.lvl-0 > .fo-line .fo-name { font-weight: 700; }
.fo-item.lvl-1 { padding-left: 22px; }
.fo-item.lvl-2 { padding-left: 44px; }
.fo-item.lvl-3 { padding-left: 66px; }
.fo-item.lvl-4 { padding-left: 88px; }
.fo-item.lvl-1 .fo-name::before, .fo-item.lvl-2 .fo-name::before,
.fo-item.lvl-3 .fo-name::before, .fo-item.lvl-4 .fo-name::before { content: "\2514\00a0"; color: var(--muted); }
.fo-note { color: var(--muted); font-size: 14px; }
.fo-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.fo-panel {
  margin: 8px 0 0 0;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-s);
}
.fo-q { display: block; font-weight: 700; margin: 0 0 6px 0; }
.fo-hint { color: var(--muted); font-size: 14px; margin: 6px 0 0 0; }
.fo-hint.is-error { color: var(--danger); font-weight: 600; }
.fo-item .msg, .fo-add .msg { width: 100%; }
@media (max-width: 480px) {
  .fo-item.lvl-1 { padding-left: 14px; }
  .fo-item.lvl-2 { padding-left: 28px; }
  .fo-item.lvl-3 { padding-left: 42px; }
  .fo-item.lvl-4 { padding-left: 56px; }
  .fo-btns { flex: 1 1 100%; }
  .fo-btns .btn { flex: 1 1 calc(50% - 6px); }
  .fo-row .btn, .fo-row .sortpick-cancel { flex: 1 1 100%; }
}

@media print {
  .sortpick { display: none !important; }
  .draft-att-head .btn, .draft-att-x, .linkbtn, .fo-btns { display: none !important; }
  .tabs, .btns, .inputs, .rangebar, .draft-btns, nav, .search, .btn { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; border-color: #999; }
}

/* ---------- round 4 (Bernard 2026-09-15, DECISIONS 19) ----------
 * .rich            the structured text of a line, an answer or a mail (rich_lib: headings, lists, quotes, attention
 *                  lines, bold, highlight) — clear and spacious, it may take room on the screen
 * .cpanel          the small box a button opens (REMIND / FOLLOW date with quick picks, FORWARD to whom, OTGON)
 * .askbox .ask-*   "Ask Claude" on top of the brief and under a card
 * .fullmail .fm-*  "Read the full mail": the cleaned mail, its header, attachments and the parts left out
 */
.rich { white-space: normal; margin: 12px 0 0 0; line-height: 1.6; }
.substance.rich { white-space: normal; }
.rich p { margin: 0 0 10px 0; }
.rich p:last-child, .rich ul:last-child, .rich ol:last-child, .rich blockquote:last-child { margin-bottom: 0; }
.rich h4 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #93c5fd;
  margin: 16px 0 6px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid #1e3a5f;
}
.rich h4:first-child { margin-top: 2px; }
.rich ul, .rich ol { margin: 0 0 10px 0; padding-left: 26px; }
.rich li { margin: 4px 0; }
.rich li::marker { color: #60a5fa; font-weight: 700; }
.rich blockquote {
  margin: 8px 0 10px 0;
  padding: 8px 14px;
  border-left: 4px solid #a78bfa;
  background: #231f45;
  color: #ede9fe;
  font-style: italic;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.rich .r-alert {
  padding: 8px 12px;
  background: var(--warn-soft);
  color: #fde68a;
  border-radius: var(--radius-s);
  font-weight: 600;
}
.rich .r-alert::before { content: "\26A0\00a0"; }
.rich mark { background: #713f12; color: #fef08a; padding: 0 4px; border-radius: 4px; font-weight: 600; }
.rich b { color: #ffffff; }
.rich u { text-decoration-color: #60a5fa; text-underline-offset: 3px; }
.rich hr { border: 0; border-top: 1px dashed var(--line); margin: 14px 0; }
.verdict .rich { margin: 0; line-height: 1.5; }
.verdict .verdict-text { margin: 0; }

/* the small box of a button */
.cpanel, .ask-panel {
  margin: 12px 0 0 0;
  padding: 12px 14px;
  background: #172554;
  border: 1px solid #1d4ed8;
  border-radius: var(--radius-s);
}
.ask-panel { background: #1e1b3a; border-color: #7c3aed; }
.cpanel-label { display: block; font-weight: 700; margin: 0 0 8px 0; color: #ffffff; }
.cpanel input, .cpanel textarea, .ask-panel textarea, .askbox textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid #475569;
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 17px;
  background: #0f172a;
  color: var(--ink);
  color-scheme: dark;
}
.cpanel input[type="date"] { max-width: 260px; }
.cpanel-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 0; }
/* Bernard 2026-09-19: the plain "what happens" line a panel shows above its own go-button. */
.cpanel-note {
  margin: 10px 0 0 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-s);
  color: #dbeafe;
  font-size: 15px;
  line-height: 1.45;
}
.cpanel-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 0; }

/* ---------- "What do these buttons do?" (Bernard 2026-09-19): hover is not clear, and does not exist at all on
 * his tablet. One per card, folded shut by default, tapping the summary needs no JavaScript and nothing here uses
 * an inline style or handler, so it works under the strict CSP. Readable on the page's own dark background; the
 * button labels stay in the same white-on-accent style as the real buttons (Bernard's rule: white letters on a
 * dark background), everything else in the same muted/ink tones as the rest of a card. ---------- */
details.btnhelp {
  margin: 12px 0 0 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
details.btnhelp > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
details.btnhelp > summary::-webkit-details-marker { display: none; }
details.btnhelp > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
details.btnhelp[open] > summary::before { transform: rotate(45deg); }
.btnhelp-list { list-style: none; margin: 0; padding: 0 14px 12px 14px; }
.btnhelp-list > li { padding: 12px 0; border-top: 1px solid var(--line); }
.btnhelp-list > li:first-child { border-top: 0; }
.btnhelp-list > li > b {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.btnhelp-list ul { list-style: none; margin: 0; padding: 0; }
.btnhelp-list ul li {
  position: relative;
  margin: 4px 0;
  padding-left: 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.btnhelp-list ul li::before { content: "\2013"; position: absolute; left: 0; color: var(--muted); }
@media (max-width: 480px) { .btnhelp-list > li > b { font-size: 13px; } }

/* Ask Claude */
.askbox {
  margin: 14px 0 18px 0;
  padding: 14px 16px;
  background: #1e1b3a;
  border: 1px solid #5b21b6;
  border-radius: var(--radius);
}
.askbox h2 { font-size: 19px; margin: 0 0 4px 0; color: #ffffff; }
.ask-help { color: #cbd5e1; font-size: 15px; margin: 0 0 10px 0; }
.ask-btns { display: flex; gap: 8px; margin: 10px 0 0 0; }
ul.asklist { list-style: none; margin: 10px 0 0 0; padding: 0; }
.ask-item {
  margin: 10px 0 0 0;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid #334155;
  border-left: 4px solid #a78bfa;
  border-radius: var(--radius-s);
}
.ask-q { margin: 0 0 8px 0; font-weight: 700; color: #ffffff; }
.ask-code {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: #4c1d95;
  color: #ede9fe;
  font-size: 14px;
}
.ask-a .rich { margin: 0; }
.ask-wait, .fm-status { display: flex; align-items: center; gap: 10px; color: #cbd5e1; margin: 0; }
.ask-failed, .fm-error { color: var(--banner-ink); background: var(--danger-soft); padding: 8px 12px; border-radius: var(--radius-s); margin: 0; }
.ask-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; margin: 10px 0 0 0; }
/* round-4 review fixes: the full mail's note (stored copy, not read in time) and an ask the page stopped waiting for */
.fm-status.fm-note, .ask-late { color: #fde68a; background: var(--warn-soft); padding: 8px 12px; border-radius: var(--radius-s); margin: 0 0 10px 0; }
.ask-late { margin: 0; }

/* Read the full mail */
.fm-line { margin: 10px 0 0 0; }
.fullmail {
  margin: 10px 0 0 0;
  padding: 12px 14px;
  background: #0b1224;
  border: 1px solid #334155;
  border-radius: var(--radius-s);
}
.fm-msg { padding: 4px 0 14px 0; }
.fm-msg + .fm-msg { border-top: 1px dashed #334155; padding-top: 14px; }
.fm-msg.is-ours { border-left: 3px solid var(--ok); padding-left: 12px; }
.fm-subject { font-weight: 700; font-size: 18px; color: #ffffff; margin: 0 0 6px 0; }
dl.fm-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 10px 0; font-size: 15px; }
dl.fm-meta dt { color: var(--muted); font-weight: 600; }
dl.fm-meta dd { margin: 0; color: #e2e8f0; overflow-wrap: anywhere; }
.fm-body { margin: 8px 0 0 0; }
.fm-atts-head { margin: 12px 0 4px 0; font-weight: 700; color: #cbd5e1; }
ul.fm-atts { margin: 0; padding-left: 22px; color: #e2e8f0; }
details.fm-hidden { margin: 8px 0 0 0; color: var(--muted); font-size: 15px; }
details.fm-hidden > summary { cursor: pointer; }
.fm-hidden-text { white-space: pre-line; margin: 6px 0 0 0; padding: 8px 12px; background: #111827; border-radius: var(--radius-s); color: #94a3b8; }

/* ---------- the command box under every card (Bernard 2026-09-19: "a box under every mail where I say what has to
 * happen with it"). One line that grows to six, one big button, one quiet hint underneath, and a slot for what comes
 * back. Tablet first: the whole row wraps, the button keeps its 44 px, nothing here takes the focus by itself. ---- */
form.cmdbox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0 0;
  padding: 10px 12px;
  background: #111c34;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
form.cmdbox textarea {
  flex: 1 1 260px;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid #475569;
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  background: #0f172a;
  color: var(--ink);
  color-scheme: dark;
  resize: vertical;
}
form.cmdbox textarea::placeholder { color: #94a3b8; }
form.cmdbox textarea:focus { border-color: var(--accent); }
form.cmdbox > .btn { flex: 0 0 auto; }
.cmdhint {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.cmd-slot { flex: 1 1 100%; }
.cmd-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  font-size: 16px;
  background: var(--accent-soft);
  color: #bfdbfe;
}
.cmd-msg.cmd-err { background: var(--danger-soft); color: var(--banner-ink); font-weight: 600; }
.cmd-msg.cmd-wait { background: var(--accent-soft); color: #dbeafe; }
/* Done, but the card itself stays ("todo: call the camp on Friday" adds a to-do and decides nothing about the
   mail): green, so it does not read as "still waiting" (2026-09-20, review C 2 / review R M2). */
.cmd-msg.cmd-ok { background: var(--ok-soft); color: #bbf7d0; }
.cmd-answer { margin: 8px 0 0 0; }

/* What Claude says when an instruction needs him after all — the card comes back carrying it (spec B3b). */
.note-command {
  background: #2e1065;
  color: #ede9fe;
  border-left: 4px solid #a78bfa;
}
.note-command .cmd-note-q { margin: 0 0 6px 0; font-weight: 700; }
.note-command .rich { margin: 0; }

/* "Claude decided these do not need you": folded inside "Handled today", quieter than the rest of it. */
details.fold.notneeded {
  margin: 14px 0 0 0;
  border-color: var(--line);
  background: #111c34;
}
details.fold.notneeded > summary { font-size: 16px; color: var(--muted); }
details.fold.notneeded .done-act.auto { color: var(--muted); font-weight: 600; }

/* The people a typed name may be (2026-09-22): under a To / Cc field of a draft (lined up with the field, past its
   110 px label) and in the FORWARD box. In the page flow, never floating, so it stays usable with a tablet keyboard. */
.csug {
  margin: -2px 0 10px 120px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.cpanel .csug { margin: 6px 0 8px 0; }
.csug-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.csug-item:first-child { border-top: 0; }
.csug-item:hover, .csug-item:focus-visible, .csug-item.is-active { background: var(--accent-soft); outline: none; }
.csug-name { font-weight: 700; }
.csug-mail { color: var(--ink); overflow-wrap: anywhere; }
.csug-src { margin-left: auto; color: var(--muted); font-size: 14px; }
.csug-note { margin: 0; padding: 8px 12px; color: var(--muted); border-top: 1px solid var(--line); }
.csug-note:first-child { border-top: 0; }
.csug-deep {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.csug-deep:hover, .csug-deep:focus-visible { background: var(--accent-soft); outline: none; }
@media (max-width: 480px) {
  .csug { margin-left: 0; }
  .csug-src { margin-left: 0; flex-basis: 100%; }
}

/* ---------- the watched to-do (2026-09-24, step 8, spec B3) ----------
   The box under a to-do tied to its mail conversation, on the brief (index.php) and on the to-do page (g.php).
   Quiet on purpose: a thin grey rule and muted small text, so the verdict above it keeps the colour that matters.
   What is inside comes from lib/todo_lib.php mb_todo_watch_html(); only its plain elements are styled here. */
.watch-box {
  margin: 10px 0 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--line);
  background: rgba(51, 65, 85, 0.35);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 15px;
  color: var(--muted);
}
.watch-box p { margin: 0 0 6px 0; }
.watch-box p:last-child { margin-bottom: 0; }
.watch-box ul { list-style: none; margin: 0 0 6px 0; padding: 0; }
.watch-box li { padding: 4px 0; border-top: 1px dashed var(--line); color: var(--ink); }
.watch-box li:first-child { border-top: 0; }
.watch-box a { font-weight: 600; }

@media print {
  .askbox, .cpanel, .ask-panel, .fm-line, .fullmail, details.btnhelp, form.cmdbox { display: none !important; }
  .makebox { display: none !important; }   /* 2026-09-25 (block 2): a form in the making is not part of the record */
}

/* ---------- Otgon's desk (2026-09-25, DECISIONS 31) ----------
   "Files in this conversation": one folded box per card with a conversation behind it (index.php
   mb_pages_files_box), closed by default, quiet like the watched to-do. Each file is one row: the name, the size,
   when it was sent or received, and where it is kept ("in the office" — no download link yet). */
details.files-box { margin: 10px 0 0 0; }
details.files-box > summary { font-size: 15px; color: var(--muted); }
details.files-box .fold-body { padding: 8px 0 0 0; }
ul.files { list-style: none; margin: 0; padding: 0; }
ul.files li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
  font-size: 15px;
}
ul.files li:first-child { border-top: 0; }
ul.files .file-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
ul.files .file-size { color: var(--muted); white-space: nowrap; }
ul.files .file-when { color: var(--muted); }
ul.files .file-where { color: var(--muted); font-style: italic; flex: 1 1 100%; }
/* The third kind of card the server's own reading writes on her desk: a promise of ours not yet kept. */
.card[data-stall="PROMISED"] .tag-stall { background: #4c1d95; color: #ddd6fe; }

/* ---------- the phone pass (2026-09-25, Otgon's desk; tested at 375 px) ----------
   One block, added at the end so nothing above is rewritten. The earlier 480 px rules still apply first. */
@media (max-width: 480px) {
  /* the sticky letter tabs: ONE row that scrolls sideways, never a second row that hides the first card */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 2px;
    padding-right: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-width: 44px; }
  .tabs .search { flex: 0 0 auto; width: 140px; max-width: 140px; margin-left: 4px; }
  .sec { scroll-margin-top: 64px; }
  /* every tap target at least the 44 px of --tap */
  .btn-small, table.tbl .btn, .linkbtn, .draft-att-x, .sortpick-cancel { min-height: var(--tap); }
  .csug-item, .csug-deep { min-height: var(--tap); }
  nav.mb-nav a, body > nav a, body > header nav a { min-height: var(--tap); }
  /* the draft and command boxes, and their inputs, full width */
  form.cmdbox textarea { flex: 1 1 100%; width: 100%; }
  form.cmdbox > .btn { flex: 1 1 100%; width: 100%; }
  .cpanel input[type="date"], .cpanel input[type="text"], .cpanel select, .cpanel textarea { max-width: 100%; width: 100%; }
  .cpanel-btns .btn, .cpanel-quick .btn { flex: 1 1 calc(50% - 8px); }
  .draft-btns .btn { flex: 1 1 calc(50% - 8px); }
  .draft-btns .btn-main { flex: 1 1 100%; }
  .draft textarea, .draft .instr, .draft-row input, .draft-row select { width: 100%; }
  /* the range bar: one control per line */
  .rangebar input, .rangebar select, .rangebar .btn { width: 100%; flex: 1 1 100%; }
  /* cards edge to edge, 12 px of padding inside */
  .card {
    margin-left: calc(0px - var(--pad));
    margin-right: calc(0px - var(--pad));
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 12px;
  }
  .group { padding-left: 6px; }
  .group > .card { margin-left: calc(0px - var(--pad) - 6px); margin-right: calc(0px - var(--pad)); }
  ul.files li { font-size: 14px; }
}

/* ---------- block 2 (2026-09-25, Otgon's desk, spec 8.1): the MAKE button and the MAKE box ----------
   The button is violet like the Ask box (it makes something, it decides nothing). The box opens in the card's
   .make-slot (index.php): first the chooser, then the chosen tool's form — one .make-field per schema field, the
   label above, the box, the schema's own description under it — with the required and most useful fields open and
   the rest folded under "More fields"; one status line; for the invoice the figures first, then CREATE. */
.btn-make { border-color: #a78bfa; }
.btn-make:hover { background: #2e1065; }
.make-slot:empty { display: none; }
.makebox {
  margin: 12px 0 0 0;
  padding: 12px 14px;
  background: #1e1b3a;
  border: 1px solid #7c3aed;
  border-radius: var(--radius-s);
}
.make-title { margin: 0 0 8px 0; font-weight: 700; color: #ffffff; }
.make-chooser { display: flex; flex-wrap: wrap; gap: 8px; }
.make-form { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 0 0; }
.make-form[hidden] { display: none; }
.make-field { display: flex; flex-direction: column; gap: 4px; }
.make-label { font-weight: 700; color: #ffffff; }
.make-field input[type="text"], .make-field input[type="number"], .make-field input[type="date"],
.make-field select, .make-field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid #475569;
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 17px;
  background: #0f172a;
  color: var(--ink);
  color-scheme: dark;
}
.make-field input[type="text"], .make-field input[type="number"], .make-field input[type="date"], .make-field select { max-width: 420px; }
.make-field textarea { resize: vertical; }
.make-field input[type="checkbox"] { width: 26px; height: 26px; margin: 9px 0; }
.make-desc { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
details.make-more, details.make-about { margin: 4px 0 0 0; }
details.make-more > summary, details.make-about > summary {
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--muted);
}
details.make-more > .make-field { margin: 10px 0 0 0; }
details.make-about > .make-desc { margin: 4px 0 8px 0; white-space: pre-line; }
.make-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 0; }
.make-btns[hidden] { display: none; }
.make-status {
  margin: 10px 0 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  font-size: 15px;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.07);
  color: #dbeafe;
}
.make-status[hidden] { display: none; }
/* the four moods of the status line (the .msg-* rules stand earlier in the file, so they are repeated here) */
.make-status.msg-info { background: var(--accent-soft); color: #bfdbfe; }
.make-status.msg-ok { background: var(--ok-soft); color: #bbf7d0; }
.make-status.msg-warn { background: var(--warn-soft); color: #fde68a; }
.make-status.msg-err { background: var(--danger-soft); color: var(--banner-ink); font-weight: 600; }
.make-status .make-link { font-weight: 700; margin-left: 6px; }
.make-status .doc-path { display: block; margin-top: 4px; }
.make-status .make-note { display: block; margin-top: 4px; color: var(--muted); }
.make-preview { margin: 10px 0 0 0; }
.make-preview[hidden] { display: none; }
.make-table { width: 100%; margin: 8px 0; font-size: 15px; }
.make-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; }
.make-facts dt { font-weight: 700; color: #ffffff; }
.make-facts dd { margin: 0; overflow-wrap: anywhere; }
.make-warn {
  margin: 8px 0;
  padding: 8px 12px 8px 28px;
  background: var(--warn-soft);
  color: #fde68a;
  border-radius: var(--radius-s);
  font-size: 15px;
}

/* ---------- block 2 (2026-09-25, spec 8.2): the UPDATE card's list of changes (index.php mb_pages_update_box) ----------
   One row per change. An open change is a big tick box with the words and how sure the office is; a change already
   settled (applied by itself, applied, not needed, could not be applied) shows a status word instead, and its note.
   The evidence is folded under "why". */
.upd { margin: 10px 0 0 0; }
.upd-head { margin: 0 0 4px 0; font-weight: 700; color: #ffffff; }
ul.upd-list { list-style: none; margin: 0; padding: 0; }
.upd-row { padding: 6px 0; border-top: 1px dashed var(--line); }
.upd-row:first-child { border-top: 0; }
.upd-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: var(--tap); cursor: pointer; }
.upd-pick input[type="checkbox"] { width: 26px; height: 26px; margin: 0; flex: 0 0 auto; }
.upd-words { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.upd-conf { color: var(--muted); font-size: 14px; white-space: nowrap; }
.upd-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: #334155;
  color: var(--muted);
}
.upd-auto .upd-status, .upd-applied .upd-status { background: var(--chip-complete); color: #bbf7d0; }
.upd-failed .upd-status { background: var(--danger-soft); color: var(--banner-ink); }
.upd-done .upd-words { color: var(--muted); }
.upd-note { display: block; font-size: 14px; color: var(--muted); margin: 2px 0 0 0; }
details.upd-ev { margin: 2px 0 0 36px; }
details.upd-ev > summary { cursor: pointer; font-size: 14px; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.upd-ev-text { margin: 4px 0 0 0; font-size: 14px; color: var(--muted); white-space: pre-line; }

/* the phone (block 2): 44 px targets, every box full width */
@media (max-width: 480px) {
  .make-chooser .btn, .make-btns .btn { flex: 1 1 calc(50% - 8px); }
  .make-chooser .btn-quiet, .make-btns .btn-main { flex: 1 1 100%; }
  .make-field input[type="text"], .make-field input[type="number"], .make-field input[type="date"],
  .make-field select, .make-field textarea { max-width: 100%; width: 100%; }
  .make-facts { grid-template-columns: 1fr; }
  .make-facts dd { margin-bottom: 4px; }
  details.upd-ev { margin-left: 0; }
  details.upd-ev > summary { min-height: var(--tap); }
  .upd-pick input[type="checkbox"] { width: 30px; height: 30px; }
}

/* ---------- 2026-09-25 (block 3a, spec 9.4): the read-only view of Otgon's desk ----------
   index.php ?as=2 for Bernard: the band says it is read only, the cards carry a dashed edge and no button at all.
   The link that opens the view stands under the title of his own brief, quiet; the link back sits in the band. */
.view-banner { font-weight: 600; }
.view-banner .view-back { font-weight: 400; margin-left: 8px; white-space: nowrap; }
main[data-view="1"] .card { border-style: dashed; }
.view-link { font-size: 0.9rem; color: var(--muted); }
.view-link:hover, .view-link:focus { color: var(--ink); }

/* 2026-09-25 (block 3a, spec 9.2): the row of "Make it again — the old invoice is archived" under the figures. */
.make-again { margin-top: 10px; }

/* ---------- 2026-09-25 (block 3c, spec 10.3): the Clients tab as MDMC's full client system ----------
   clients.php: the seven view buttons with their counts, the search form that asks the server, the rows as cards on
   the phone, the relation badges in MDMC's own colours (active green, potential blue, past orange, inactive and
   archived grey), the "waiting N days" badge (red from 6 days, amber from 3, as MDMC), the follow-up line (what they
   look for, the first contact), the profit cell of a money user, the folding sections of the detail (details.fold
   .cl-sec, the 44 px summary of details.fold), the money chips, the rate line, the item cards of the invoices,
   payments, tours and prices, and the status pills. Added at the end; every earlier rule stands. The page's own small
   style sheet (clients.php ?asset=css, loaded after this file) keeps the rules of block 2; the selectors here are
   one step more precise where they must win over it. */
.cl-views .btn .n { font-weight: 400; opacity: 0.85; }
.cl-search-form { display: flex; flex: 1 1 280px; gap: 8px; align-items: center; margin: 0; }
.cl-search-form .cl-search { flex: 1 1 auto; min-width: 0; }
.cl-views .cl-search-form .btn { min-height: var(--tap); flex: 0 0 auto; }

/* the rows: they may wrap, so the follow-up line takes a line of its own under the cells */
.cl-list > .cl-row { flex-wrap: wrap; }
.cl-list > .cl-row .cl-cell.c-rel { flex: 0 0 auto; overflow: visible; white-space: nowrap; }
.cl-list > .cl-row .cl-cell.c-profit { flex: 1.3 1 0; }
.cl-list > .cl-row .cl-cell.c-follow {
  flex: 1 1 100%; white-space: normal; overflow: visible; font-size: 14px; color: var(--muted); padding: 0 0 4px 0;
}
.cl-cell.c-follow b { color: #93c5fd; font-weight: 700; }

/* the badges */
.cl-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 1px 9px; margin: 2px 6px 2px 0;
  border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  background: #334155; color: var(--muted); vertical-align: middle;
}
.cl-rel-active { background: #14532d; color: #bbf7d0; }
.cl-rel-potential { background: #1e3a8a; color: #bfdbfe; }
.cl-rel-past { background: #7c2d12; color: #fed7aa; }
.cl-rel-inactive, .cl-rel-archived { background: #334155; color: #94a3b8; }
.cl-type { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.cl-wait.is-red { background: var(--danger-soft); color: var(--banner-ink); }
.cl-wait.is-amber { background: var(--warn-soft); color: #fde68a; }
.cl-wait.is-ok { background: var(--ok-soft); color: #bbf7d0; }

/* the folding sections of the detail */
details.fold.cl-sec { margin: 10px 0 0 0; background: var(--bg); }
details.fold.cl-sec > summary { font-size: 17px; }
details.fold.cl-sec > .fold-body { padding: 4px var(--pad) var(--pad) var(--pad); }
details.fold.cl-sec h3 { margin: 16px 0 6px 0; font-size: 17px; }
.cl-year { margin: 14px 0 4px 0; font-size: 17px; font-weight: 700; }
.cl-year:first-child { margin-top: 4px; }
.cl-rate { font-size: 14px; color: var(--muted); margin: 0 0 10px 0; }
.cl-warn { font-size: 15px; color: #fde68a; margin: 0 0 10px 0; }
.cl-text { white-space: pre-wrap; margin: 2px 0 10px 0; }

/* the money chips */
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px 0; }
.cl-chip {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 4px 12px;
  border-radius: 999px; background: #334155; color: var(--ink); font-size: 15px; white-space: nowrap;
}
.cl-chip .cl-chip-l { color: var(--muted); font-size: 13px; }
.cl-chip b { font-weight: 700; }
.cl-chip.is-good { background: var(--ok-soft); color: #bbf7d0; }
.cl-chip.is-bad { background: var(--danger-soft); color: var(--banner-ink); }
.cl-chip.is-good .cl-chip-l, .cl-chip.is-bad .cl-chip-l { color: inherit; opacity: 0.8; }

/* the item cards (invoices, payments, tours of the Money section, prices) */
.cl-items { list-style: none; margin: 0; padding: 0; }
.cl-item { padding: 8px 0 10px 0; border-top: 1px solid var(--line); }
.cl-item:first-child { border-top: 0; }
.cl-item.is-void { opacity: 0.6; }
.cl-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cl-item-head a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.cl-item-sub { font-size: 14px; color: var(--muted); margin: 2px 0 4px 0; }
.cl-item .btns { margin: 4px 0 0 0; }
.cl-status {
  display: inline-flex; align-items: center; min-height: 24px; padding: 1px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap; background: #334155; color: var(--muted);
}
.cl-status.is-paid { background: var(--ok-soft); color: #bbf7d0; }
.cl-status.is-part { background: var(--warn-soft); color: #fde68a; }
.cl-status.is-open { background: #1e3a8a; color: #bfdbfe; }
.cl-status.is-void { background: #334155; color: #94a3b8; }

/* the phone: one card per client, every target 44 px, the sections edge to edge */
@media (max-width: 480px) {
  .cl-search-form { flex: 1 1 100%; }
  .cl-list > .cl-row:not(.is-head) {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    margin: 0 0 10px 0; padding: 10px 12px;
  }
  .cl-list > .cl-row.is-open { background: var(--accent-soft); }
  .cl-list > .cl-row .cl-cell.c-rel, .cl-list > .cl-row .cl-cell.c-profit { flex: 1 1 100%; white-space: normal; }
  .cl-detail .btns .btn, .cl-item .btns .btn { min-height: var(--tap); }
  details.fold.cl-sec > .fold-body { padding: 4px 12px 12px 12px; }
  .cl-chip { min-height: 36px; white-space: normal; }
}

/* ---------- 2026-09-25 (block 4B, spec 11.2 "Screens"): REPLACE and SEND of an invoice ----------
   assets/app.js opens the panel (.invbox) in the slot under an invoice (div.inv-slot of clients.php) and the
   confirmation sheet (.inv-sheet-wrap) over the page. Otgon works mostly on her PC: from 900 px the SEND panel puts
   the invoice (left) beside the mail (right); on a phone everything stands under each other, the invoice lines and the
   old/new figures become one small card per line, every target is 44 px and the sheet rises from the bottom. The
   colours are the page's own: REPLACE amber-edged (it changes a document the client holds), SEND the main blue, a
   paid invoice and an address that is not on the client page in the warning colours. */
.btn-inv-replace { border-color: var(--warn); }
.btn-inv-replace:hover { background: var(--warn-soft); }
.cl-item .btns .btn.is-on { box-shadow: 0 0 0 2px var(--ink) inset; }
.inv-slot:empty { display: none; }
.invbox {
  margin: 10px 0 4px 0;
  padding: 12px 14px;
  background: #13213a;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
}
.invbox-replace { border-color: var(--warn); background: #1f1a12; }
.inv-title { margin: 0 0 6px 0; font-size: 17px; font-weight: 700; color: #ffffff; }
.inv-sub { margin: 12px 0 6px 0; font-weight: 700; color: #ffffff; }
.inv-hint { margin: 4px 0 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.inv-status {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  font-size: 15px;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.07);
}
.inv-status[hidden] { display: none; }
.inv-status.msg-info { background: var(--accent-soft); color: #bfdbfe; }
.inv-status.msg-ok { background: var(--ok-soft); color: #bbf7d0; font-weight: 600; }
.inv-status.msg-warn { background: var(--warn-soft); color: #fde68a; }
.inv-status.msg-err { background: var(--danger-soft); color: var(--banner-ink); font-weight: 600; }
.inv-bad {
  margin: 8px 0; padding: 8px 12px; border-radius: var(--radius-s);
  background: var(--danger-soft); color: var(--banner-ink); font-weight: 600; font-size: 15px;
}
.inv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 0; }
.inv-btns .btn-send { min-width: 140px; }

/* the fields */
.inv-form[hidden] { display: none; }
.inv-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0 0; }
.inv-label { font-weight: 700; color: #ffffff; }
.invbox input[type="text"], .invbox input[type="email"], .invbox input[type="number"], .invbox textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid #475569;
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 16px;
  background: #0f172a;
  color: var(--ink);
  color-scheme: dark;
  box-sizing: border-box;
}
.invbox input[type="number"] { max-width: 180px; }
.invbox textarea { resize: vertical; line-height: 1.45; }
.invbox textarea[data-role="inv-body"] { min-height: 260px; }
.invbox input:disabled, .invbox textarea:disabled { opacity: 0.7; }

/* the invoice drawn */
details.inv-cur { margin: 8px 0 0 0; }
details.inv-cur > summary, details.inv-vers > summary {
  cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 700; color: var(--muted);
}
.inv-doc {
  margin: 4px 0 0 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.inv-doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.inv-doc-nb { font-size: 17px; color: #ffffff; }
.inv-doc-sub { margin: 4px 0; font-size: 14px; color: var(--muted); }
.inv-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; }
.inv-facts dt { font-weight: 700; color: #cbd5e1; }
.inv-facts dd { margin: 0; overflow-wrap: anywhere; }
.inv-facts .inv-due { font-size: 17px; color: #ffffff; }
.inv-totals { border-top: 1px solid var(--line); padding-top: 8px; }
.inv-lines-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
table.inv-lines, table.inv-cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
table.inv-lines th, table.inv-lines td, table.inv-cmp th, table.inv-cmp td {
  padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
table.inv-lines thead th, table.inv-cmp thead th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
table.inv-lines .num, table.inv-cmp td.num { text-align: right; white-space: nowrap; }
table.inv-cmp tbody th { font-weight: 700; color: #cbd5e1; }
table.inv-cmp tr.is-changed td { color: #fde68a; font-weight: 700; }
.inv-vers-list { margin: 4px 0 0 0; padding: 0 0 0 18px; font-size: 14px; color: var(--muted); }
blockquote.inv-replaces {
  margin: 4px 0 8px 0; padding: 8px 12px; border-left: 4px solid var(--warn);
  background: rgba(251, 191, 36, 0.08); color: #ffffff; font-weight: 600;
}
.inv-paid {
  margin: 8px 0; padding: 8px 12px; border-radius: var(--radius-s);
  background: var(--warn-soft); color: #fde68a; font-weight: 700; font-size: 15px;
}
ul.inv-warn {
  margin: 8px 0; padding: 8px 12px 8px 28px; border-radius: var(--radius-s);
  background: var(--warn-soft); color: #fde68a; font-size: 15px; line-height: 1.45;
}
ul.inv-warn li + li { margin-top: 4px; }

/* the mail */
.inv-cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
.inv-col { min-width: 0; }
.inv-mailhead { margin-top: 0; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; }
.inv-chip {
  display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 0 0 12px;
  border-radius: 999px; background: #1e3a8a; color: #dbeafe; font-size: 15px; max-width: 100%;
}
.inv-chip-t { overflow-wrap: anywhere; }
.inv-chip.is-unknown { background: var(--warn-soft); color: #fde68a; box-shadow: 0 0 0 1px var(--warn) inset; }
.inv-chip-x {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 18px;
  cursor: pointer;
}
.inv-chip-x:hover { background: rgba(255, 255, 255, 0.12); }
.inv-add { display: flex; gap: 8px; align-items: center; }
.inv-add input { flex: 1 1 auto; min-width: 0; }
.inv-add .btn { flex: 0 0 auto; }
.inv-known { margin: 6px 0 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-known .inv-hint { flex: 1 1 100%; margin: 0; }
.inv-known .btn { font-weight: 600; overflow-wrap: anywhere; }
.inv-known .btn.is-on { background: #1e3a8a; border-color: #93c5fd; }
.inv-sign {
  margin: 10px 0 0 0; padding: 8px 12px; border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line);
}
.inv-sign .inv-hint:first-child { margin-top: 0; }
pre.inv-sign-text, pre.inv-ai-line {
  margin: 6px 0 0 0; white-space: pre-wrap; font-family: var(--font); font-size: 15px; color: var(--ink);
}
pre.inv-ai-line { color: #c7d2fe; font-style: italic; }
.inv-attach { margin: 8px 0 0 0; font-size: 15px; }

/* the confirmation sheet */
.inv-sheet-wrap {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(2, 6, 23, 0.72);
}
.inv-sheet {
  width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--card); border: 2px solid var(--accent); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.inv-sheet.is-danger { border-color: var(--warn); }
.inv-sheet-title { margin: 0 0 8px 0; font-size: 19px; color: #ffffff; }
.inv-sheet-warn {
  margin: 0 0 8px 0; padding: 8px 12px; border-radius: var(--radius-s);
  background: var(--danger-soft); color: var(--banner-ink); font-weight: 700;
}
.inv-sheet-facts dd { font-weight: 700; color: #ffffff; }
.inv-sheet-note { margin: 8px 0 0 0; font-size: 15px; color: var(--muted); line-height: 1.45; }

/* the PC: the invoice beside the mail */
@media (min-width: 900px) {
  .inv-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
}

/* the phone: under each other, one card per line, 44 px targets, the sheet from the bottom */
@media (max-width: 600px) {
  .invbox { padding: 10px 10px; }
  .inv-btns .btn { flex: 1 1 calc(50% - 8px); min-height: var(--tap); }
  .inv-btns .btn-main, .inv-btns .btn-danger { flex: 1 1 100%; }
  .inv-facts { grid-template-columns: 1fr; gap: 0; }
  .inv-facts dd { margin-bottom: 6px; }
  .invbox input[type="number"] { max-width: 100%; }
  table.inv-lines thead, table.inv-cmp thead { display: none; }
  table.inv-lines, table.inv-lines tbody, table.inv-lines tr, table.inv-lines td,
  table.inv-cmp, table.inv-cmp tbody, table.inv-cmp tr, table.inv-cmp th, table.inv-cmp td { display: block; width: 100%; box-sizing: border-box; }
  table.inv-lines tr, table.inv-cmp tr { padding: 6px 0; border-bottom: 1px solid var(--line); }
  table.inv-lines td, table.inv-cmp td, table.inv-cmp tbody th { border: 0; padding: 2px 0; }
  table.inv-lines td.num, table.inv-cmp td.num { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.inv-lines td.num::before, table.inv-cmp td.num::before { content: attr(data-l); color: var(--muted); font-weight: 400; text-align: left; }
  table.inv-lines td:first-child { font-weight: 600; }
  .inv-chip { min-height: var(--tap); }
  .inv-chip-x { min-width: var(--tap); min-height: var(--tap); }
  .inv-known .btn { min-height: var(--tap); }
  .inv-sheet-wrap { align-items: flex-end; padding: 0; }
  .inv-sheet { max-width: none; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; padding: 14px 14px 18px 14px; }
  .inv-sheet .inv-btns .btn { flex: 1 1 100%; }
}

/* ---------- block 5a (2026-09-25, spec 12.2-12.4): the action row of the three G cards of MDMC ----------
   index.php mb_pages_mdmc_box: under the text of a tour check (CONFIRM), a payment claim (CLAIM) or a camps card
   (CAMPS) — TICK on a tickable tour check (the main blue button), "Open in MDMC" / "Decide in MDMC", the camps link,
   "This tour in the BRIEF", and the plain MDMC address of a list that is not a deep link yet (.mdmc-plain, text that
   wraps anywhere). A thin blue edge on the left says "this card is about MDMC". Added, never rewritten. */
.mdmc-box {
  margin: 10px 0 0 0;
  padding: 8px 0 0 12px;
  border-left: 3px solid var(--accent);
}
.mdmc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mdmc-acts .btn { min-height: 40px; }
.mdmc-acts a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.mdmc-plain { margin: 8px 0 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.mdmc-claim { border-left-color: var(--warn); }
.mdmc-camps { border-left-color: var(--ok); }

/* the phone (block 5a): 44 px targets, TICK on a line of its own */
@media (max-width: 480px) {
  .mdmc-box { padding-left: 10px; }
  .mdmc-acts .btn { flex: 1 1 100%; min-height: var(--tap); justify-content: center; }
}

/* ---------- block 5b-0 (2026-09-28, spec 13.10 / 13.11): one tour-check card per tour ----------
   index.php mb_pages_cfm_list: the checks of one tour, grouped by kind in the order of MDMC's page. A check that can be
   ticked here is a big tick box with its words (the one TICK of the card sends the ticked ones); every other check says
   why and has its own "Open in MDMC". MDMC's facts are folded under "The facts in MDMC". Added, never rewritten. */
.cfm { margin: 0 0 10px 0; }
.cfm-group { margin: 0 0 8px 0; }
.cfm-head { margin: 0 0 4px 0; font-weight: 700; color: #ffffff; }
ul.cfm-items { list-style: none; margin: 0; padding: 0; }
.cfm-item { padding: 6px 0; border-top: 1px dashed var(--line); }
.cfm-item:first-child { border-top: 0; }
.cfm-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: var(--tap); cursor: pointer; }
.cfm-pick input[type="checkbox"] { width: 26px; height: 26px; margin: 0; flex: 0 0 auto; }
.cfm-label { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cfm-words { margin: 2px 0 0 0; color: var(--ink); overflow-wrap: anywhere; }
.cfm-why { margin: 2px 0 0 0; font-size: 14px; color: var(--muted); }
.cfm-open { margin: 4px 0 0 0; }
.cfm-open a.btn { display: inline-flex; align-items: center; text-decoration: none; min-height: 40px; }
.cfm-can .cfm-words { margin-left: 36px; }
details.cfm-facts { margin: 2px 0 0 0; }
details.cfm-facts > summary { cursor: pointer; font-size: 14px; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
dl.cfm-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 4px 0 0 0; font-size: 14px; }
dl.cfm-dl dt { color: var(--muted); }
dl.cfm-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cfm-aside { margin: 4px 0 0 0; font-size: 14px; color: var(--muted); }
.cfm-item.is-gone { opacity: 0.45; }

/* the CAMPS card is information only: its one line (who tells the camps, from which address) */
.mdmc-who { margin: 8px 0 0 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* the UPDATE card's date line that cannot be ticked (spec 13.10): the sentence in the warning colour, the tour link */
.upd-fixed .upd-date { color: var(--warn); }
.upd-link { display: block; margin: 4px 0 0 0; }
.upd-link a.btn { display: inline-flex; align-items: center; text-decoration: none; min-height: 40px; }

/* the phone (block 5b-0): 44 px targets, the facts under each other */
@media (max-width: 480px) {
  .cfm-pick input[type="checkbox"] { width: 30px; height: 30px; }
  .cfm-can .cfm-words { margin-left: 0; }
  details.cfm-facts > summary { min-height: var(--tap); }
  dl.cfm-dl { grid-template-columns: 1fr; }
  dl.cfm-dl dd { margin-bottom: 4px; }
  .cfm-open a.btn, .upd-link a.btn { min-height: var(--tap); width: 100%; justify-content: center; }
}

/* ---------- block 6a (2026-10-03, spec 14.1 a-d — Bernard 3 Oct 2026): the B button, the questions of a tour card, her decisions ----------
   index.php: the one button B of the read-only view (.btn-b: small, grey, a bold B — the only control a card of the view
   has, in .view-btns where its buttons would stand); the tour card's groups "Questions for you" (.cfm-questions: one row
   per question .cfm-q with its label, the evidence, "MDMC is N % sure" .cfm-conf, the three buttons .cfm-qbtns YES / NO /
   REMIND, the refused date sentence .cfm-date, the one plain help line .cfm-help) and "To do in MDMC" (.cfm-todo); a
   reminded question folded (details.cfm-reminded, .cfm-asleep); the small date box REMIND opens (.cfm-remind-box); the
   menu link to her brief in the header bar (.mb-nav-as); and the section "Her decisions (last 60 days)" of the view
   (.decisions, table.decisions-tbl on table.tbl). 44 px targets on a phone. Added, never rewritten. */
.btn-b {
  min-height: 36px;
  min-width: 48px;
  padding: 4px 14px;
  border-color: #94a3b8;
  background: #334155;
  color: #ffffff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
}
.btn-b:hover { background: #475569; }
main[data-view="1"] .view-btns { margin-top: 10px; }

.cfm-questions .cfm-item, .cfm-todo .cfm-item { padding: 8px 0; }
.cfm-conf { margin: 2px 0 0 0; font-size: 14px; color: var(--muted); }
.cfm-qbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 0; }
.cfm-qbtns .btn { min-height: 40px; min-width: 80px; }
.cfm-date { color: var(--warn); }
.cfm-help { margin: 6px 0 0 0; font-size: 14px; color: var(--muted); }
details.cfm-reminded > summary {
  cursor: pointer;
  font-size: 15px;
  color: var(--muted);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}
.cfm-asleep { opacity: 0.85; }
.cfm-remind-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 0;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.cfm-remind-box label { color: var(--muted); font-size: 14px; }
.cfm-remind-box input[type="date"] {
  font: inherit;
  min-height: 40px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}
.cfm-remind-note { flex: 1 1 100%; font-size: 14px; color: var(--muted); }

.mb-nav a.mb-nav-as { font-weight: 700; }

.decisions { margin: 12px 0 16px 0; }
.decisions h2 { margin: 0 0 4px 0; font-size: 1.15rem; }
.decisions-who { margin: 0 0 8px 0; color: var(--muted); font-size: 15px; }
table.decisions-tbl td { vertical-align: top; }
table.decisions-tbl .dec-when { white-space: nowrap; }
table.decisions-tbl .dec-said b { color: #ffffff; }
table.decisions-tbl .dec-q, table.decisions-tbl .dec-mdmc { overflow-wrap: anywhere; min-width: 160px; }

/* the phone (block 6a): 44 px targets, the three buttons share one line, the date box full width */
@media (max-width: 480px) {
  .cfm-qbtns .btn { flex: 1 1 30%; min-height: var(--tap); }
  .cfm-remind-box input[type="date"] { width: 100%; min-height: var(--tap); }
  .cfm-remind-box .btn { flex: 1 1 45%; min-height: var(--tap); }
  .btn-b { min-height: var(--tap); }
}

/* ---------- a new mail and "Add a document" (2026-10-10, block 6d-4, spec 14.9 6d-4 d/e) ----------
   The page /new: its form uses the draft box's own rows (.draft-row), with room for "About tour (optional)"; the
   From note, the file a document card handed over, the status line and the locked form after "Write the mail".
   The To / Subject line of a new mail's G card, and the link NEW MAIL WITH THIS FILE of a document card.
   The "Add a document" picker of every draft box: "From MDMC" in groups and "From OneDrive (MT AI DOCUMENTS)",
   one row per document with its kind, name, date and Add, each list with its search. Added, never rewritten. */
.nmform .draft-row { grid-template-columns: 170px 1fr; }
.nm-why { margin: 0 0 10px 0; color: var(--muted); font-size: 15px; }
.nm-file {
  margin: 4px 0 8px 0;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  background: var(--accent-soft);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.nm-status { margin: 8px 0 0 0; font-size: 15px; color: var(--muted); }
.nm-status.is-ok { color: #bbf7d0; font-weight: 600; }
.nm-status.is-failed { color: var(--danger); font-weight: 700; }
.nmform.is-locked input, .nmform.is-locked select { background: #0f172a; color: var(--muted); }
.nm-slot:empty { display: none; }
.nm-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0; font-size: 16px; overflow-wrap: anywhere; }
.nm-fact b { color: var(--muted); }
a.btn-nmfile { display: inline-flex; align-items: center; text-decoration: none; }

.docpick {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--card);
}
.dp-part + .dp-part { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-title { margin: 0 0 6px 0; font-size: 16px; }
.dp-group { margin: 8px 0 4px 0; font-weight: 700; font-size: 15px; color: var(--muted); }
.dp-items { list-style: none; margin: 0; padding: 0; }
.dp-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.dp-item:first-child { border-top: 0; }
.dp-kind {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  white-space: nowrap;
}
.dp-name { flex: 1 1 160px; font-weight: 600; overflow-wrap: anywhere; }
.dp-date, .dp-size { color: var(--muted); font-size: 14px; }
.dp-added { color: var(--ok); font-weight: 700; font-size: 14px; }
.dp-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 0; }
.dp-search input {
  flex: 1 1 200px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
}
.dp-note { margin: 4px 0; color: var(--muted); font-size: 15px; list-style: none; }
.dp-note.is-failed { color: var(--danger); font-weight: 600; }
.dp-left { margin: 8px 0 0 0; font-size: 14px; color: #fde68a; }
.dp-left a { color: inherit; text-decoration: underline; }
.docpick [data-role="doc-close"] { margin-top: 10px; }

/* the phone (block 6d-4): the form's rows one under the other, 44 px targets, the searches full width */
@media (max-width: 480px) {
  .nmform .draft-row { grid-template-columns: 1fr; }
  .dp-item .btn, .dp-search .btn, a.btn-nmfile { min-height: var(--tap); }
  .dp-search input, .dp-search .btn { flex: 1 1 100%; width: 100%; min-height: var(--tap); }
}

/* ---------- 261019-desk (2026-10-19, Bernard): the header menu on ONE line, the switch to Otgon's desk, the band ---------- */
/* 261019-desk: the switch at the end of the bar ("Otgon's brief" / "Back to my brief") is a small POST form whose button
   looks exactly like a link of the bar: same height, padding, colours and hover; bold like the menu link of block 6a. */
nav.mb-nav form.mb-nav-form { display: inline-flex; margin: 0; padding: 0; }
nav.mb-nav button.mb-nav-as {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  white-space: nowrap;
}
nav.mb-nav button.mb-nav-as:hover, nav.mb-nav button.mb-nav-as:focus-visible { background: var(--accent-soft); }
nav.mb-nav a { white-space: nowrap; }

/* 261019-desk: below 1024 px the nav stands on ONE line of its own under the name and the date, and scrolls sideways
   when it is wider than the screen — it never breaks into two lines. Log out stays up on the first line, at the right. */
@media (max-width: 1023px) {
  header.mb-head nav.mb-nav {
    order: 5;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  header.mb-head nav.mb-nav > a, header.mb-head nav.mb-nav > form { flex: 0 0 auto; }
  header.mb-head .mb-logout { margin-left: auto; }
  /* 261019-desk (fix m1): on its own scrolling line the desk switch ("Otgon's brief" / "Back to my brief") comes FIRST, so it
     is never the part hidden off the right edge; it keeps the bar's full touch height. */
  header.mb-head nav.mb-nav > form.mb-nav-form { order: -1; }
}
@media (max-width: 480px) {
  nav.mb-nav button.mb-nav-as { padding: 0 8px; font-size: 15px; }
}

/* 261019-desk: a PC (1024 px and wider): the header on ONE line — the header row may use the full width of the window (the
   page body keeps its own width), the row and the nav never wrap, the links a little tighter; the date is the one part
   that may shorten (an ellipsis) when the window is just too narrow, and the nav scrolls rather than wrap. */
@media (min-width: 1024px) {
  header.mb-head .mb-head-row { max-width: none; flex-wrap: nowrap; gap: 8px 12px; }
  header.mb-head .mb-brand, header.mb-head .mb-logout { flex: 0 0 auto; white-space: nowrap; }
  /* 261019-desk (fix m1): the date gives way FIRST (shrink factor 100 against the nav's 1), so the nav keeps its full width
     and "Otgon's brief" stays in view; measured 19 Oct: with equal factors the two shrank alike and the switch went behind
     the nav's sideways scroll between 1024 and ~1160 px. */
  header.mb-head .mb-date { flex: 0 100 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header.mb-head nav.mb-nav { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  header.mb-head nav.mb-nav > a, header.mb-head nav.mb-nav > form { flex: 0 0 auto; }
  nav.mb-nav a, nav.mb-nav button.mb-nav-as { padding: 0 9px; }
}
/* 261019-desk (fix m1): a narrow PC window (1024 to 1199 px) leaves the date out of the header altogether — a date cut to
   "Sund…" helps nobody, and its room goes to the menu (the brief names its own day under its title). */
@media (min-width: 1024px) and (max-width: 1199px) {
  header.mb-head .mb-date { display: none; }
}

/* 261019-desk: the band right under the header while Bernard works on Otgon's desk — amber, bold, impossible to miss,
   with its own "Back to my brief" button (the same form as the bar's). */
.desk-band {
  background: var(--warn-soft);
  color: #fde68a;
  border-bottom: 2px solid #b45309;
  padding: 8px var(--pad);
}
.desk-band-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.desk-band-text { margin: 0; flex: 1 1 260px; font-weight: 700; font-size: 17px; }
.desk-band-form { margin: 0; flex: 0 0 auto; }
.desk-band .btn.desk-band-back {
  min-height: var(--tap);
  background: #fde68a;
  color: #451a03;
  border-color: #b45309;
  font-weight: 700;
}
.desk-band .btn.desk-band-back:hover, .desk-band .btn.desk-band-back:focus-visible { background: #fef3c7; }
@media (max-width: 480px) {
  .desk-band-form, .desk-band .btn.desk-band-back { flex: 1 1 100%; width: 100%; }
}

/* ---------- 2026-10-24 (type bar, spec step 9): the row IND / TO / OTHER / SUPPLIER / REMOVE under the card number ----------
   lib/typebar_lib.php draws the row; index.php wraps it in div.tb-slot, the card head's own full-width row (the head is a
   two-column grid: inside a column the row would squeeze the title on a phone). Every rule is scoped to .tb-slot and keyed
   on data-tb, so the colours hold whatever classes the row itself carries. Two looks only: full colour (.is-full — MDMC
   holds it, or a person chose it) and light colour with a '?' (.is-guess — the system's guess). A small lock (.is-locked:
   G Adventures, Rainbow, Koning Aap / Shoestring — always TO), a grey row that cannot be tapped (.is-unreadable: MDMC could
   not be read; .is-checking: not read yet), the red REMOVE set a little apart. Wraps onto two lines at 360 px. */
.card-head > .tb-slot {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 6px 0 2px 0;
}
.tb-slot .typebar,
.tb-slot [data-role="typebar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
}
.tb-slot .tb-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tb-slot .tb-btn,
.tb-slot button[data-role="tb"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 48px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid #475569;
  background: transparent;
  color: #cbd5e1;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.tb-slot button[data-role="tb"]:hover { background: #0f172a; }
.tb-slot button[data-role="tb"]:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.tb-slot button[data-role="tb"]:disabled { opacity: 1; cursor: default; }
.tb-slot button[data-role="tb"]:disabled:not(.is-full):not(.is-guess):not(.is-writing) { opacity: 0.55; }

/* full colour: MDMC holds it, or a person chose it */
.tb-slot [data-tb="IND"].is-full      { background: #0f766e; border-color: #14b8a6; color: #ffffff; }
.tb-slot [data-tb="TO"].is-full       { background: #1d4ed8; border-color: #60a5fa; color: #ffffff; }
.tb-slot [data-tb="OTHER"].is-full    { background: #b45309; border-color: #f59e0b; color: #ffffff; }
.tb-slot [data-tb="SUPPLIER"].is-full { background: #6d28d9; border-color: #a78bfa; color: #ffffff; }

/* light colour with a '?': only the system's guess — a tap confirms it */
.tb-slot button[data-tb].is-guess { border-style: dashed; }
.tb-slot [data-tb="IND"].is-guess      { background: rgba(20, 184, 166, 0.14); border-color: #2dd4bf; color: #99f6e4; }
.tb-slot [data-tb="TO"].is-guess       { background: rgba(59, 130, 246, 0.16); border-color: #60a5fa; color: #bfdbfe; }
.tb-slot [data-tb="OTHER"].is-guess    { background: rgba(245, 158, 11, 0.14); border-color: #fbbf24; color: #fde68a; }
.tb-slot [data-tb="SUPPLIER"].is-guess { background: rgba(139, 92, 246, 0.16); border-color: #a78bfa; color: #ddd6fe; }
/* 2026-10-24 (type bar, integration): the '?' is the span.tb-q that lib/typebar_lib.php writes after the word of a guess
   (read aloud too); it shows on a guess only, so a tap that turns the button full colour hides it at once */
.tb-slot .tb-q { margin-left: 3px; font-weight: 800; }
.tb-slot button[data-role="tb"]:not(.is-guess) .tb-q { display: none; }

/* the red REMOVE, set a little apart */
.tb-slot [data-tb="REMOVE"] {
  margin-left: 12px;
  border-color: var(--danger);
  color: #fecaca;
}
.tb-slot button[data-tb="REMOVE"]:hover { background: var(--danger-soft); }

/* a small lock, drawn in CSS: the partners are always TO and cannot be changed from a card */
.tb-slot button[data-tb].is-locked { padding-right: 30px; cursor: default; }
.tb-slot button[data-tb].is-locked::before {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 8px;
  height: 7px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.tb-slot button[data-tb].is-locked::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 12px;
  height: 8px;
  margin: -1px 0 0 0;
  background: currentColor;
  border-radius: 2px;
}

/* 2026-10-24 (type bar, integration): the small word "locked" typebar_lib writes after a partner's row */
.tb-slot .tb-lock { color: var(--muted); font-size: 13px; }

/* grey: MDMC could not be read for a moment (or the row is not read yet) — nothing can be tapped.
   2026-10-24 (type bar, review): on a row not read yet (.is-checking) the card's old label keeps its light look with '?' (it is
   drawn as a guess), so only the other buttons go grey */
.tb-slot .is-unreadable button[data-role="tb"],
.tb-slot .is-checking button[data-role="tb"]:not(.is-guess):not(.is-full),
.tb-slot [data-look="UNREADABLE"] button[data-role="tb"] {
  background: transparent;
  border-color: #334155;
  border-style: solid;
  color: #64748b;
  cursor: default;
}
.tb-slot .is-unreadable button[data-role="tb"]::after,
.tb-slot .is-checking button[data-role="tb"]:not(.is-guess):not(.is-full)::after { content: none; }

/* a tap being written: the row is shut while it waits, the tapped button shows moving stripes */
.tb-slot.is-pending button[data-role="tb"]:not(.is-writing),
.tb-slot .is-pending button[data-role="tb"]:not(.is-writing) { opacity: 0.6; cursor: progress; }
.tb-slot button[data-role="tb"].is-writing {
  opacity: 1;
  cursor: progress;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 6px,
                                              transparent 6px, transparent 12px);
  background-size: 34px 34px;
  animation: tb-writing 0.9s linear infinite;
}
@keyframes tb-writing { from { background-position: 0 0; } to { background-position: 34px 0; } }

/* the short grey line after it: what MDMC knows, or why the system guessed */
.tb-slot .tb-why {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}
.tb-slot .is-unreadable .tb-why,
.tb-slot .is-checking .tb-why { font-style: italic; }

/* the one sentence a tap gets back, with "Open in MDMC" */
.tb-slot .tb-msg {
  margin: 6px 0 0 0;
  padding: 6px 10px;
  border-left: 4px solid var(--danger);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--danger-soft);
  color: var(--banner-ink);
  font-size: 15px;
  font-weight: 600;
}
.tb-slot .tb-msg[hidden] { display: none; }
.tb-slot .tb-msg.tb-msg-info { border-left-color: var(--accent); background: var(--accent-soft); color: #dbeafe; font-weight: 500; }
.tb-slot .tb-msg a.tb-mdmc { color: #ffffff; font-weight: 700; text-decoration: underline; white-space: nowrap; }

@media (max-width: 480px) {
  .tb-slot .typebar { gap: 6px 8px; }
  .tb-slot .tb-btns { gap: 6px; }
  .tb-slot .tb-btn,
  .tb-slot button[data-role="tb"] { min-height: var(--tap); padding: 4px 11px; font-size: 15px; }
  .tb-slot [data-tb="REMOVE"] { margin-left: 8px; }
  .tb-slot .tb-why { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-slot button[data-role="tb"].is-writing { animation: none; }
}
/* 2026-10-24 (main session, staging run 1): in Bernard's read-only view of Otgon's desk the bar is drawn as labels (span.tb-btn,
   lib/typebar_lib.php) - the colours above are keyed on [data-tb], so they hold; a label is not a pointer */
.tb-slot span.tb-btn { cursor: default; }