/* Stream: the gate board. Near-black bar, light board, white open message; yellow only for "changed, not seen yet",
   red only for "stop". Archivo (with its width axis for the condensed sign voice), Red Hat Mono for references,
   times and amounts. DESIGN.md describes the system; these tokens are its source. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/red-hat-mono-latin.woff2") format("woff2"); }

/* The help kit's colours, from the same palette (html:root outranks help.css's own :root). */
html:root {
  --help-page: var(--surface);
  --help-ink: var(--ink);
  --help-ink-2: var(--steel);
  --help-line: var(--line);
  --help-well: var(--board);
  --help-accent: var(--ink);
  --help-accent-wash: var(--alert-wash);
  --help-radius: var(--radius);
  --help-top: var(--bar-h);
}

:root {
  --ink: #0b0d10;
  --slate: #1c2127;
  --slate-2: #2b323a;
  --steel: #5b6168;          /* secondary text: 6.2:1 on white, 5.1:1 on the board */
  --steel-on-ink: #a7aeb6;   /* secondary text on the bar */
  --board: #eef0f2;
  --panel: #e3e6e9;
  --surface: #ffffff;
  --line: #d3d7db;
  --line-strong: #b9bec4;
  --alert: #ffd400;          /* changed, not seen yet */
  --alert-wash: #fff6c2;
  --stop: #c4161c;           /* stop: unconfirmed match, blocked attachment, failed send */
  --stop-wash: #fdecec;
  --focus: #0b0d10;

  --font: "Archivo", system-ui, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, monospace;

  --bar-h: 56px;
  --radius: 6px;
  --gap: 16px;
  --shadow: 0 1px 2px rgb(11 13 16 / 0.06), 0 2px 8px rgb(11 13 16 / 0.04);

}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--board);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--panel); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }

/* ---------- The shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 28px;
  height: var(--bar-h); padding: 0 20px;
  background: var(--ink); color: #fff;
}
.brand {
  font-stretch: 75%; font-weight: 800; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: #fff;
}
.topnav { display: flex; gap: 22px; height: 100%; }
.topnav a {
  display: flex; align-items: center; height: 100%;
  color: var(--steel-on-ink); text-decoration: none; font-weight: 500;
  box-shadow: inset 0 -3px 0 transparent;
}
.topnav a:hover { color: #fff; }
.topnav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #fff; }
.topnav .help-dot, .tabbar .help-dot { background: var(--alert); }  /* something new in What's new: the "not seen yet" yellow, on the bar */
.topbar :focus-visible, .tabbar :focus-visible { outline-color: #fff; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.company {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--slate-2); border-radius: var(--radius); padding: 5px 11px;
  font-weight: 600; color: #fff; text-decoration: none;
}
.company small { color: var(--steel-on-ink); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.who { color: var(--steel-on-ink); font-size: 14px; }
.topbar .help-open { border-color: var(--slate-2); background: transparent; color: #fff; }
.topbar .help-open:hover { border-color: #fff; }

.app-main { min-height: calc(100dvh - var(--bar-h)); }
.page { max-width: 1600px; margin: 0 auto; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
.page--narrow { max-width: 980px; }
/* The help kit's pages get the same gutters and heading voice as the app's own pages. */
.help-page { max-width: 1100px; margin: 0 auto; padding: 22px 24px 40px; }
.help-page h1 { font-stretch: 80%; font-weight: 800; font-size: 32px; letter-spacing: -0.01em; }
.today.today--single { grid-template-columns: 1fr; }
.today--single .pass-col { position: static; }

.tabbar { display: none; }

/* ---------- Page heads, notices, buttons ---------- */
.page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-stretch: 80%; font-weight: 800; font-size: 32px; letter-spacing: -0.01em; }
.page-date { color: var(--steel); font-size: 15px; }

.notice { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius); padding: 11px 14px; font-size: 14.5px; }
.notice b { display: block; }
.notice--stop { background: var(--stop-wash); box-shadow: inset 0 0 0 1.5px var(--stop); }
.notice--stop b { color: var(--stop); }
.notice--quiet { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--steel); }
.notice svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--radius);
  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink);
  font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--board); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--slate); }
.btn--quiet { border-color: var(--line-strong); }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--line); color: #8a9097; background: var(--surface); cursor: not-allowed; }

/* Forms */
.input {
  width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: 15px;
}
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
.input::placeholder { color: #8a9097; }
.input--small { width: auto; min-width: 200px; min-height: 34px; padding: 5px 10px; font-size: 14px; }
.input--file { padding: 6px; }
textarea.input { line-height: 1.55; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.field small, .field-hint { font-weight: 500; font-size: 13px; color: var(--steel); }
.field--inline { flex-direction: row; align-items: center; gap: 10px; }
.field-error { margin: 6px 0 0; color: var(--stop); font-weight: 600; font-size: 14px; }
.input[aria-invalid="true"] { border-color: var(--stop); box-shadow: inset 0 0 0 1px var(--stop); }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; padding: 0; }
.choice { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.choice input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); }
.btn--small { min-height: 32px; padding: 4px 11px; font-size: 13.5px; }
.link-btn { border: 0; background: none; padding: 0 2px; color: var(--ink); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.back-link { align-self: flex-start; }

/* Actions on the open message */
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.acts form { display: contents; }
.acts--end { align-items: center; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.act-form { position: relative; }
.act-form > summary { list-style: none; }
.act-form > summary::-webkit-details-marker { display: none; }
.act-form[open] > summary { background: var(--ink); color: #fff; }
.drop {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: min(340px, 86vw);
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 30px rgb(11 13 16 / 0.16);
}
.entity-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.entity-acts form { display: contents; }
.refresh { font-size: 13.5px; font-weight: 600; margin-left: 4px; }
.saved { font-size: 13.5px; color: var(--steel); }

/* After an action: what happened, at the top of the page. */
.flash {
  max-width: 1552px; margin: 14px auto 0; width: calc(100% - 48px);
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-weight: 600; font-size: 14.5px;
}
.flash svg { width: 18px; height: 18px; flex: none; }
.flash--stop { background: var(--stop-wash); color: var(--stop); box-shadow: inset 0 0 0 1.5px var(--stop); }

/* The bulk bar over Unhandled */
.board-form { display: flex; flex-direction: column; gap: 10px; }
.bulk { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.bulk-count { font-size: 14px; color: var(--steel); margin-right: auto; }
.bulk.is-on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.bulk.is-on .bulk-count { color: var(--ink); font-weight: 700; }

/* Writing a reply */
.compose-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.pass-segs.pass-segs--3 { grid-template-columns: 1.2fr 1.4fr 1fr; }
.compose-title { font-stretch: 85%; font-weight: 800; font-size: 25px; }
.compose-body { min-height: 220px; font-weight: 400; }
.signature { white-space: pre-line; font-size: 14.5px; color: var(--steel); padding: 10px 12px; background: var(--board); border-radius: var(--radius); }
.signature .label { display: block; margin-bottom: 4px; }
.attach { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.replying-to .mail-head--top { border-radius: 10px 10px 0 0; }
.writing { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-radius: var(--radius); background: var(--board); font-size: 14px; }
.writing svg { width: 16px; height: 16px; flex: none; }
/* Entities */
.page--mid { max-width: 1200px; }
.count-line { margin: 0; font-size: 13.5px; color: var(--steel); }
.board .c-when2 { width: 120px; }
.board .c-num, .board td.num { width: 96px; text-align: right; font-family: var(--mono); }
.entity-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.side-col { min-width: 0; }
.side-col .entity { margin: 0; border-top: 0; }
.contacts { padding: 12px 20px 16px; }
.contacts ul { list-style: none; margin: 8px 0 0; padding: 0; }
.contacts li { display: grid; grid-template-columns: 110px 1fr; column-gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 14.5px; }
.contacts li small { grid-column: 2; color: var(--steel); font-size: 12.5px; }
.contact-kind { color: var(--steel); font-size: 13px; }
#entity-title a { text-decoration: none; }
#entity-title a:hover { text-decoration: underline; }

/* Companies */
.companies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.company-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.company-row > div { margin-right: auto; display: flex; flex-direction: column; }
.company-row b { font-stretch: 85%; font-weight: 800; font-size: 22px; }
.company-wait { color: var(--steel); font-size: 14px; }
.company-row.is-current { box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow); }
.current-word { font-weight: 700; font-size: 14px; }
.company-row .lane-new { margin: 0; }
.switch-here { margin-top: 14px; }
a.company:hover { border-color: #fff; }
a.company[aria-current="page"] { border-color: #fff; }

/* Signing in */
.auth { min-height: calc(100dvh - var(--bar-h)); display: grid; place-items: start center; padding: 48px 16px 64px; }
.auth-card { width: min(440px, 100%); }
.auth-card--wide { width: min(620px, 100%); }
.pass-segs.pass-segs--1 { grid-template-columns: 1fr; }
.pass-segs--1 .pass-seg b { font-size: 26px; font-weight: 800; white-space: normal; }
.pass-segs--1 .pass-seg small { white-space: normal; }
.btn--wide { width: 100%; min-height: 46px; font-size: 16px; }
.btn svg { width: 20px; height: 20px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--steel); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); }
.auth-alt { margin: 0; font-size: 14px; font-weight: 600; }
.input--code { font-family: var(--mono); font-size: 20px; letter-spacing: 0.12em; max-width: 220px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 18px; }
.steps li { padding-left: 4px; }
.steps li > b { display: block; font-size: 16px; }
.steps li > span { display: block; color: var(--steel); font-size: 14px; margin-bottom: 8px; }
.qr-row { display: flex; gap: 18px; align-items: center; margin-top: 4px; }
.qr { width: 132px; height: 132px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.qr svg { width: 100%; height: 100%; display: block; }
.key { margin: 2px 0 4px; font-size: 18px; letter-spacing: 0.06em; word-spacing: 0.3em; }
.codes { margin: 0; padding: 14px 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; background: var(--board); border-radius: var(--radius); font-size: 17px; list-style-position: inside; }
.plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.who { text-decoration: none; }
.who:hover, .who[aria-current="page"] { color: #fff; }
.signout { display: contents; }
.signout-btn { border: 0; background: none; color: var(--steel-on-ink); font-size: 14px; cursor: pointer; padding: 4px; }
.signout-btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.more-signout { width: 100%; text-align: left; border: 0; background: none; padding: 12px 14px; font-size: 15px; font-weight: 600; color: var(--ink); border-radius: 4px; cursor: pointer; }
.more-signout:hover { background: var(--board); }

/* Your sign-in */
.confirm-card .pass-body { gap: 12px; }
.confirm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.confirm-row .field { flex: 1 1 180px; }
.sec .entity-head { border-radius: 10px 10px 0 0; }
.entity-head.entity-head--plain { background: var(--surface); border-top: 1px dashed var(--line-strong); border-radius: 0; }
.sec-sub { font-size: 15px; }
.sec-list { list-style: none; margin: 0; padding: 0; }
.sec-list li { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px dashed var(--line); }
.sec-list li > div { margin-right: auto; display: flex; flex-direction: column; }
.sec-list small { color: var(--steel); font-size: 13px; }
.this-device { display: inline-block; vertical-align: 2px; margin-left: 6px; font-stretch: 100%; padding: 0 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ink); font-size: 12px; font-weight: 600; }
.history.sec-history { padding: 4px 20px 12px; }
.drop--right { left: auto; right: 0; }

/* Streams and connectors */
.page-head-row { align-items: center; }
.form-pass .pass-body { gap: 22px; }
.form-section { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border-bottom: 1px dashed var(--line-strong); }
.form-section legend { font-stretch: 85%; font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.form-grid > .btn { margin-top: 26px; }
.form-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.form-grid--server { grid-template-columns: 1fr 90px 1fr 90px; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.figure { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 10px 14px; text-decoration: none; border-left: 1.5px solid var(--ink); }
.figure:first-child { border-left: 0; }
.figure:hover { background: var(--board); }
.figure small { grid-column: 2; color: var(--steel); font-size: 12.5px; }
.throughput { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.throughput > div { background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); padding: 10px 14px; display: flex; flex-direction: column; }
.throughput b { font-size: 16px; }
.settings-form fieldset { border: 0; padding: 0; margin: 0; }
.read-back { align-items: flex-end; }
.read-back .field { flex: 1; }
.hs-steps { padding: 16px 20px 18px 40px; }
.hs-steps li > form { margin-top: 6px; }
.hs-steps .form-grid { grid-template-columns: 1.4fr 1fr auto; }
.checklist > summary { list-style: none; cursor: pointer; }
.checklist > summary::-webkit-details-marker { display: none; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 9px 20px; border-top: 1px dashed var(--line); align-items: start; }
.checks li div { display: flex; flex-direction: column; }
.checks small { color: var(--steel); font-size: 13.5px; }
.check-mark { font-stretch: 85%; font-weight: 700; font-size: 13px; text-align: center; padding: 2px 6px; border-radius: 3px; }
.check--pass .check-mark { background: var(--ink); color: #fff; }
.check--warn .check-mark { box-shadow: inset 0 0 0 1.5px var(--ink); }
.check--fail .check-mark { color: var(--stop); box-shadow: inset 0 0 0 1.5px var(--stop); }
.check--fail small { color: var(--stop); }
.changes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--alert-wash); }
.changes ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14.5px; }
.changes small { color: var(--steel); }
.commands { display: flex; flex-direction: column; gap: 12px; }
.cmd-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pill { font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); white-space: nowrap; }
.pill--ink { background: var(--ink); color: #fff; box-shadow: none; }
.pill--quiet { color: var(--steel); }
.io { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 12px 20px; }
.io ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14.5px; }
.io li small { color: var(--steel); font-size: 12px; margin-left: 2px; }
.io li svg { width: 11px; height: 11px; margin-left: 4px; }
.unmarked { color: var(--ink) !important; font-weight: 600; }
.try { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 20px; border-top: 1px dashed var(--line-strong); }
.try .field { flex: 1 1 200px; }
.tried { padding: 0 0 6px; border-top: 1px dashed var(--line); }
.tried p { padding: 10px 20px; margin: 0; }
.entity-grid.entity-grid--even { grid-template-columns: 1fr 1fr; }

/* Company admin and platform */
.subnav { display: flex; gap: 4px; border-bottom: 1.5px solid var(--ink); }
.subnav a { padding: 8px 14px; font-weight: 600; text-decoration: none; color: var(--steel); border-radius: var(--radius) var(--radius) 0 0; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--ink); color: #fff; }
.invite > summary { list-style: none; cursor: pointer; border-radius: 10px; }
.invite > summary::-webkit-details-marker { display: none; }
.invite[open] > summary { border-radius: 10px 10px 0 0; }
.invite[open] > summary .btn { display: none; }
.tags-pick { gap: 8px; }
.board .c-tags { width: 190px; }
.board .c-signin { width: 170px; }
.board .c-acts { width: 300px; }
.board-row--static td { overflow: visible; }
.row-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row-acts form { display: contents; }
.person { display: block; }
.pill + .pill { margin-left: 4px; }
.input--select { appearance: auto; max-width: 340px; }
.input--num { width: 90px; min-width: 0; }
.plain-list--small { font-size: 14px; color: var(--steel); }
.confirm-shorten { margin: 18px 20px 0; }
.confirm-shorten .acts { margin-top: 10px; }
.acting { max-width: 1552px; margin: 14px auto 0; width: calc(100% - 48px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 14.5px; }

/* The model (US-047) */
#model { scroll-margin-top: calc(var(--bar-h) + 16px); }
#model .entity-head { border-radius: 10px 10px 0 0; }
.model-lead { margin: 0; max-width: 70ch; }
.model-facts { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 16px; }
.model-facts > div { display: flex; flex-direction: column; gap: 4px; }
.model-facts small { color: var(--steel); font-size: 13px; }
.model-record { padding-top: 14px; border-top: 1px dashed var(--line-strong); align-items: flex-start; }
.model-note { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.model-facts ul { margin: 2px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }

/* Stream's draft (US-014, US-015) */
.stream-draft { border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); }
.stream-draft > summary { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; background: var(--panel); border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; list-style: none; }
.stream-draft > summary::-webkit-details-marker { display: none; }
.stream-draft:not([open]) > summary { border-radius: var(--radius); }
.sd-text { padding: 12px 14px; white-space: pre-line; line-height: 1.6; font-size: 15px; }
.field-mark { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); font-weight: 600; padding: 0 1px; cursor: help; }
.model-written { box-shadow: inset 2px 0 0 var(--line-strong); padding-left: 8px; display: inline-block; color: var(--slate); font-style: italic; }
.sd-missing { padding: 0 14px 10px; font-size: 14px; }
.sd-missing ul { margin: 4px 0 0; padding-left: 18px; color: var(--steel); }
.stream-draft .acts { padding: 10px 14px; border-top: 1px dashed var(--line); align-items: center; }
.instruct .lookup-row .input { flex: 1; }
.original, .versions { border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 12px; }
.original > summary, .versions > summary { cursor: pointer; }
.versions .history li { grid-template-columns: 96px 1fr; }
.check-list { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.check-list .choice { align-items: flex-start; }
.check-list q { font-style: italic; }

/* What they ask (US-016) and the reminder offer (US-018) */
.requests { border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.requests ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.requests li > div { display: inline-flex; flex-direction: column; }
.requests li { font-size: 15px; }
.requests li form { display: inline; margin-left: 6px; }
.requests small { color: var(--steel); font-size: 13px; }
.rq-none { margin: 0; color: var(--steel); font-size: 14px; }
.rq-add > summary { list-style: none; display: inline; font-size: 13.5px; }
.rq-add > summary::-webkit-details-marker { display: none; }
.rq-add form { margin-top: 8px; }
.offer svg { width: 20px; height: 20px; flex: none; }
.offer-acts { margin-top: 8px; align-items: center; }

/* Proposed: nothing to do (US-017) */
.proposals { background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); }
.prop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-radius: var(--radius) var(--radius) 0 0; }
.prop-head h2 { font-stretch: 85%; font-weight: 800; font-size: 17px; margin-right: auto; }
.count-pill { display: inline-block; min-width: 22px; text-align: center; font-size: 13px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; vertical-align: 2px; }
.proposals ul { list-style: none; margin: 0; padding: 0; }
.proposals li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 14px; border-top: 1px dashed var(--line); }
.proposals li small { flex-basis: 100%; padding-left: 25px; color: var(--steel); font-size: 13.5px; }
.proposals li .choice { margin-right: auto; }
.snip-inline { color: var(--steel); }

/* Rules (slice 3) */
.found { padding: 12px 20px; border-top: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 8px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.found p { margin: 0; font-size: 14.5px; }
.pass-body h2.label, .pass-body h3.label { font-size: 11.5px; font-weight: 600; font-stretch: 100%; letter-spacing: 0.09em; }
.rule-sentence { margin: 0; padding: 12px 16px; border-left: 0; background: var(--board); border-radius: var(--radius); font-size: 16px; line-height: 1.5; }
.plan-trigger { margin: 6px 0; }
.plan-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.plan-steps li > b { display: block; }
.plan-steps li small { color: var(--steel); font-size: 13.5px; }
.plan-steps li small a { margin-left: 6px; font-weight: 600; color: var(--ink); }
.plan-steps li.is-manual > b::after { content: "  by hand"; font-weight: 600; font-size: 12px; color: var(--steel); letter-spacing: 0.04em; }
.step-choice { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rule-input { font-size: 16px; }
.values { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--steel); }
.test-line { margin: 0; font-size: 15px; }
.test-list { list-style: none; margin: 0; padding: 0; }
.test-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 14.5px; }
.test-list small { color: var(--steel); }
.test-list .choice { margin-left: auto; }
.choice--small { font-size: 13px; }
.spec-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.spec-track li { padding: 8px 10px; font-weight: 600; font-size: 13.5px; text-align: center; border-left: 1.5px solid var(--ink); color: var(--steel); }
.spec-track li:first-child { border-left: 0; }
.spec-track li.is-done { background: var(--ink); color: #fff; }
.spec-what { margin: 4px 0 0; font-size: 15.5px; }
.io.io--spec { padding: 0; }
.prepared { border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--ink); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.prepared-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.prepared-head h3 { font-size: 15px; }
.prepared-head form { display: inline; }
.pw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pw-steps li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; font-size: 14.5px; }
.pw-steps li div { display: flex; flex-direction: column; gap: 2px; }
.pw-steps small { color: var(--steel); font-size: 13px; }
.pw-state { font-stretch: 85%; font-weight: 700; font-size: 12.5px; text-align: center; padding: 2px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.pw-done .pw-state { background: var(--ink); color: #fff; box-shadow: none; }
.pw-byhand .pw-state, .pw-waiting .pw-state { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pw-failed .pw-state { color: var(--stop); box-shadow: inset 0 0 0 1.5px var(--stop); }
.pw-failed small { color: var(--stop); }
.pw-do { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.add-rule { font-size: 13.5px; margin-right: 14px; }
form.inline { display: inline; }
a.on-ink { color: var(--steel-on-ink); }

.notice--check { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lookup-row { display: flex; gap: 8px; }
.entity-name { font-size: 18px; }

.label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); }

/* ---------- Today: lanes, filters, the board ---------- */
.today { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.board-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.lane {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px;
  padding: 9px 14px 10px; text-decoration: none; border-left: 1.5px solid var(--ink);
}
.lane:first-child { border-left: 0; }
.lane:hover { background: var(--board); }
.lane-n { font-stretch: 75%; font-weight: 800; font-size: 52px; line-height: 0.95; letter-spacing: -0.01em; }
.lane-name { font-stretch: 85%; font-weight: 700; font-size: 16px; }
.lane-new { grid-column: 2; font-stretch: 85%; font-size: 12.5px; font-weight: 700; justify-self: start; background: var(--alert); padding: 0 6px; border-radius: 3px; line-height: 19px; margin-top: 2px; }
.lane[aria-current="page"] { background: var(--ink); color: #fff; }
.lane[aria-current="page"] .lane-new { color: var(--ink); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--steel); }
.filters select {
  min-height: 36px; padding: 4px 30px 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230b0d10' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; color: var(--ink); font-weight: 500;
}
.filters .count { margin-left: auto; font-size: 13.5px; color: var(--steel); display: flex; gap: 14px; align-items: baseline; }
.filters .count a { color: var(--ink); font-weight: 600; }
.aside-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aside-head h2 { font-stretch: 85%; font-weight: 800; font-size: 22px; }
.aside-head a { font-weight: 600; font-size: 14px; }

.board { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.board th {
  text-align: left; padding: 9px 12px; background: var(--panel); border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel);
}
.board td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.board tbody tr:first-child td { border-top: 0; }
.board .c-pick { width: 44px; }
.board .c-when { width: 84px; }
.board td.pick { position: relative; z-index: 1; padding-right: 0; }
.pick input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.board .c-from { width: 27%; }
.board .c-entity { width: 128px; }
.board .c-state { width: 184px; }
.board-row { position: relative; }
.board-row:hover td { background: #f6f7f8; }
.when { font-family: var(--mono); font-weight: 600; font-size: 15px; white-space: nowrap; display: block; }
.age { font-size: 12.5px; color: var(--steel); white-space: nowrap; }
.from { font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.board-row:has(a.from) { cursor: pointer; }                           /* the whole row opens it (js/rows.js) */
.from:focus-visible { outline: none; }
.board-row:has(.from:focus-visible) td { box-shadow: inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.addr, .snip { font-size: 13.5px; color: var(--steel); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subj { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.ref--none { font-family: var(--font); color: var(--steel); }
.state { font-size: 13.5px; font-weight: 600; }
.state small { display: block; font-weight: 500; color: var(--steel); }
.match-word { font-size: 12.5px; color: var(--steel); display: block; white-space: nowrap; }

/* A change: lit until someone opens it, with its words always beside the colour. */
.board-row.is-changed td { background: var(--alert-wash); }
.tag-changed { display: inline-block; background: var(--alert); color: var(--ink); font-stretch: 85%; font-weight: 700; font-size: 13px; padding: 2px 7px; border-radius: 3px; line-height: 1.3; }
.detail-table { overflow-x: auto; border-top: 1px dashed var(--line); padding: 8px 20px 4px; }
.detail-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.detail-table caption { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); padding-bottom: 6px; }
.detail-table caption small { margin-left: 6px; color: var(--slate); }
.detail-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); padding: 4px 10px 4px 0; white-space: nowrap; }
.detail-table th svg { width: 11px; height: 11px; vertical-align: -1px; }
.detail-table td { padding: 5px 10px 5px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.sig-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.sig-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sig-list img { width: 96px; height: 48px; object-fit: contain; border: 1px solid var(--line); background: var(--panel); }
.sig-name { flex: 1 1 140px; overflow-wrap: anywhere; }
.sig-preview { white-space: pre-line; }
.sig-preview img, .signature img { display: block; max-width: 100%; max-height: 120px; margin-top: 8px; }
.copies { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 12px; }
.copies .field--inline { flex: 1 1 260px; }
.copies .input { flex: 1; min-width: 0; }
.mail-copies { font-size: 13px; color: var(--slate); padding: 0 0 6px; overflow-wrap: anywhere; }
.org-instruction { padding: 10px 20px; border-top: 1px dashed var(--line); }
.org-instruction .label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.org-instruction blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--line-strong); }
.org-instruction p { margin: 0; color: var(--slate); }
.org-means { padding: 0 20px 4px 38px; }
.tag-org { display: inline-block; color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-stretch: 85%; font-weight: 700; font-size: 13px; padding: 2px 7px; border-radius: 3px; line-height: 1.3; }
.tag-stop { display: inline-block; color: var(--stop); box-shadow: inset 0 0 0 1.5px var(--stop); font-stretch: 85%; font-weight: 700; font-size: 13px; padding: 2px 7px; border-radius: 3px; line-height: 1.3; }
.board-row.is-open td { background: var(--panel); }

/* The signature: a row that changed slides into its place once, then holds its light. */
@media (prefers-reduced-motion: no-preference) {
  .board-row.is-changed { animation: rerank 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes rerank { from { transform: translateY(44px); opacity: 0.35; } to { transform: none; opacity: 1; } }
}

.empty { padding: 34px 20px; text-align: center; color: var(--steel); background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }

/* ---------- The open message: a pass ---------- */
.pass-col { position: sticky; top: calc(var(--bar-h) + 16px); min-width: 0; max-height: calc(100dvh - var(--bar-h) - 32px); overflow-y: auto; border-radius: 10px; }
.pass { background: var(--surface); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.pass-back { display: none; }
.pass-segs { display: grid; grid-template-columns: 1.5fr 1.1fr 0.8fr 0.9fr; background: var(--ink); color: #fff; border-bottom: 2px dashed var(--line-strong); }
.pass-seg { padding: 10px 14px 11px; border-left: 1px dashed #3a434d; min-width: 0; }
.pass-seg:first-child { border-left: 0; }
.pass-seg .label { color: var(--steel-on-ink); font-size: 10.5px; }
.pass-seg b { display: block; font-stretch: 85%; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-seg small { display: block; font-size: 12.5px; color: var(--steel-on-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-seg b.mono { font-family: var(--mono); font-stretch: 100%; font-size: 15px; }
.pass-seg.is-stop b { color: #ff8a8f; }
.pass-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.pass-body h2 { font-stretch: 85%; font-weight: 800; font-size: 25px; }
.pass-place { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--steel); }

/* Inside the pass nothing is boxed: header strips and dashed rules run the pass's full width. */
.thread { display: flex; flex-direction: column; margin: 0 -20px; border-top: 1px dashed var(--line-strong); }
.mail + .mail { border-top: 1px dashed var(--line-strong); }
.mail-head { display: flex; justify-content: space-between; gap: 10px; padding: 7px 20px; background: var(--panel); font-size: 13.5px; }
.mail-head b { font-weight: 700; }
.mail-head span { color: var(--steel); font-family: var(--mono); }
.mail-text { padding: 12px 20px 4px; font-size: 15px; line-height: 1.55; max-width: 70ch; }
.mail-text p { margin: 0 0 10px; white-space: pre-line; }
.mail--out { background: #f7f8f9; }
.mail--out .mail-head b::before { content: "Sent · "; font-weight: 500; color: var(--steel); }
.files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
/* Emails as sent (US-048): the sender's layout in a frame of its own; its styles stay inside it. */
.mail [data-mail-part][hidden] { display: none; }
.mail-head .mail-views { font-family: var(--font); display: inline-flex; margin-left: auto; margin-right: 10px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
.mail-view { font: inherit; font-size: 12.5px; padding: 2px 10px; border: 0; background: transparent; color: var(--steel); cursor: pointer; }
.mail-view[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.mail-frame { display: block; width: calc(100% - 40px); margin: 12px 20px 10px; min-height: 160px; border: 0; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mail-pictures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 10px 20px 0; padding: 7px 12px; border-radius: var(--radius); background: var(--panel); font-size: 13px; color: var(--steel); }
.mail-shots { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.mail-shots img { max-width: min(100%, 420px); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.file-thumb { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.file a { color: inherit; }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13.5px; }
.file svg { width: 15px; height: 15px; }
.file small { color: var(--steel); }
.file--blocked { box-shadow: inset 0 0 0 1.5px var(--stop); color: var(--stop); }
.file--checking { color: var(--steel); }

.entity { margin: 0 -20px; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); }
.entity-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 20px; background: var(--panel); }
.entity-head h3 { font-size: 15px; }
.entity-head small { color: var(--steel); font-size: 12.5px; }
.entity-head a { font-size: 13.5px; font-weight: 600; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 0; }
.fields div { padding: 8px 20px; border-top: 1px dashed var(--line); }
.fields dt { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); display: flex; align-items: center; gap: 5px; }
.fields dt svg { width: 11px; height: 11px; }
.fields dd { margin: 1px 0 0; font-weight: 600; font-size: 15px; overflow-wrap: normal; word-break: keep-all; }
.entity-note { padding: 10px 20px; font-size: 14px; color: var(--steel); }

.history { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.history li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); }
.history time { font-family: var(--mono); color: var(--steel); }
.pass-empty { padding: 60px 24px; text-align: center; color: var(--steel); }

/* ---------- The box and reports (slice 4) ---------- */
.topbox { position: relative; flex: 1 1 200px; max-width: 420px; }
.topbox-input {
  width: 100%; height: 36px; padding: 6px 34px 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--slate-2); background: var(--slate); color: #fff; font-size: 14.5px;
}
.topbox-input::placeholder { color: var(--steel-on-ink); }
.topbox-input:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-color: #fff; background: var(--ink); }
.topbox-key { position: absolute; background: transparent; right: 8px; top: 50%; translate: 0 -50%; font-family: var(--mono); font-size: 12px; color: var(--steel-on-ink);
  border: 1px solid var(--slate-2); border-radius: 3px; padding: 0 5px; line-height: 18px; pointer-events: none; }
.topbox-input:focus + .topbox-key { display: none; }

.box-line { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--ink); border-radius: 10px; }
.box-input { font-size: 19px; line-height: 1.45; min-height: 64px; resize: vertical; border-color: var(--ink); }
.box-input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.box-line-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.box-line .btn--primary { background: #fff; color: var(--ink); border-color: #fff; min-width: 88px; }
.box-line .btn--primary:hover { background: var(--board); }
.box-record { background: transparent; color: #fff; border-color: var(--slate-2); }
.box-record:hover { background: var(--slate); }
.box-record.is-recording { border-color: var(--stop); box-shadow: inset 0 0 0 1px var(--stop); }
.box-record.is-recording svg { color: #ff8a8f; }
.box-line .saved { color: var(--steel-on-ink); }
.box-help { padding: 14px 18px; background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.box-help ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.box-help li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 14.5px; }
.box-help li span { color: var(--steel); }
.pass-segs.pass-segs--box { grid-template-columns: 1fr 1.4fr 0.9fr; }
.box-result h2 { font-size: 23px; }
.box-rule, .box-which { margin: 0; font-size: 15px; }
.who-pick { gap: 2px; }
.who-choice { align-items: flex-start; padding: 8px 10px; border-radius: var(--radius); }
.who-choice input { margin-top: 3px; }
.who-choice:has(input:checked) { background: var(--board); box-shadow: inset 0 0 0 1.5px var(--ink); }
.who-choice small { color: var(--steel); font-size: 13px; }
.new-contact[hidden] { display: none; }
.new-contact { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 12px 36px; }
.new-contact .field-hint { margin: 0; }
.box-or { padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.ask-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.ask-facts div { padding: 8px 12px; border-left: 1.5px solid var(--ink); }
.ask-facts div:first-child { border-left: 0; }
.ask-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; }
.asked > div { display: flex; flex-direction: column; gap: 2px; }
.asked small { color: var(--steel); font-size: 13.5px; }
.asked small b { display: inline; color: var(--ink); }
.asked svg { width: 20px; height: 20px; }

/* An answer: the data as received; the presentation changes, the data doesn't. */
.answer { display: flex; flex-direction: column; gap: 12px; }
.answer svg.lock { width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; color: var(--ink); }
.answer-value { margin: 0; display: flex; align-items: baseline; }
.answer-value b { font-stretch: 75%; font-weight: 800; font-size: 76px; line-height: 0.95; letter-spacing: -0.01em; }
.answer--value .answer-value b:not(:only-child), .answer-value b { overflow-wrap: anywhere; }
.answer-fields { margin: 0 -20px; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); }
.answer-fields dt svg.lock { width: 11px; height: 11px; margin: 0; }
.answer-list { margin: 0; padding: 0; list-style: none; counter-reset: a; }
.answer-list li { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 8px 0 8px 34px; border-top: 1px dashed var(--line); position: relative; font-size: 15px; }
.answer-list li::before { counter-increment: a; content: counter(a); position: absolute; left: 0; top: 9px; width: 24px; text-align: right; font-family: var(--mono); color: var(--steel); font-size: 13px; }
.answer-list li span { color: var(--steel); }
.answer-table .board td.num, .answer-table .board .c-num { width: 110px; text-align: right; font-family: var(--mono); }
.answer-note { margin: 0; font-size: 13.5px; color: var(--steel); }
.answer-note b { color: var(--ink); }
.answer-note svg.lock { margin: 0 4px 0 0; }

.bars { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bars-key { display: flex; gap: 16px; font-size: 13px; line-height: 1.4; color: var(--steel); }
.bars-key .key { font-size: 13px; font-weight: 600; }
.key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.key--0::before { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.key--1::before { background: var(--ink); }
.bar-row { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.bar-label { font-stretch: 85%; font-weight: 700; font-size: 14px; }
.bar-set { display: flex; flex-direction: column; gap: 3px; }
.bar { width: max(var(--w), 2px); min-height: 18px; border-radius: 2px; display: flex; align-items: center; justify-content: flex-end; }
.bar span { font-size: 12.5px; font-weight: 600; padding: 0 6px; transform: translateX(100%); }
.bar--0 { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bar--1 { background: var(--ink); }
.bar-set { padding-right: 44px; }

.answer-acts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.show-as { display: inline-flex; align-items: center; gap: 0; }
.show-as .label { margin-right: 10px; }
.seg-btn { min-height: 34px; padding: 4px 12px; border: 1.5px solid var(--ink); background: var(--surface); font-weight: 600; font-size: 13.5px; cursor: pointer; margin-left: -1.5px; }
.seg-btn:first-of-type { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.seg-btn:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
.seg-btn:hover { background: var(--board); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

.report-q { margin: 6px 0 0; color: var(--steel); font-size: 15px; }
.board .c-owner { width: 190px; }
.versions-pass .entity-head { flex-wrap: wrap; }
.version-list { list-style: none; margin: 0; padding: 0; }
.version-list li { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: baseline; padding: 9px 20px; border-top: 1px dashed var(--line); font-size: 14.5px; }
.version-list li div { display: flex; flex-direction: column; }
.version-list small { color: var(--steel); font-size: 13px; }
.version-list li.is-shown { background: var(--board); }
.version-n { font-weight: 700; }
.version-exp { font-family: var(--mono); font-size: 13px; color: var(--steel); }

.head-act { margin-left: auto; }
.schedule-facts { margin: 6px 0 10px; }
.schedule-facts small { display: block; color: var(--steel); font-size: 12.5px; }
.audience-pick { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-left: 25px; }

/* Reaching people (slice 5) */
.choice--block { align-items: flex-start; }
.choice--block input { margin-top: 3px; }
.choice--block span { display: flex; flex-direction: column; }
.choice--block small { color: var(--steel); font-size: 13px; }
.choice.is-off { color: var(--steel); cursor: not-allowed; }
.notice-preview { margin: 0; padding: 14px; background: var(--board); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; }
.np-msg { max-width: 460px; padding: 10px 14px 12px; background: var(--surface); border-radius: 10px 10px 10px 2px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; }
.notice-preview--email .np-msg { border-radius: var(--radius); max-width: 560px; }
.np-msg p { margin: 0; font-size: 14.5px; }
.np-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.np-button { padding: 4px 12px; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 13.5px; }
.notice-preview--email .np-button { box-shadow: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.np-button--link { box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.remove-bot { align-self: flex-start; }

/* Connectors that talk back (slice 6) */
.pw-steps li div > .pw-system { align-self: flex-start; margin: 2px 0 0; }
.pw-steps li div.pw-do { flex-direction: row; align-items: center; }
.pw-system { font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--steel); vertical-align: 1px; }
.pw-running .pw-state, .pw-toconfirm .pw-state { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pw-noanswer .pw-state, .pw-noansweryet .pw-state { background: var(--alert); box-shadow: none; }
.will-send { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 6px 0 4px; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.will-send div { padding: 6px 10px; border-left: 1px dashed var(--line-strong); }
.will-send div:first-child { border-left: 0; }
.will-send dt { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); display: flex; gap: 5px; align-items: center; }
.will-send dt svg { width: 11px; height: 11px; }
.will-send dd { margin: 1px 0 0; font-weight: 600; font-size: 14.5px; overflow-wrap: break-word; }
.write-check { border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--ink); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.write-check h3 { font-size: 16px; }
.write-check p { margin: 0; }
.file-on { font-size: 13px; align-self: center; }
.entity-note--act { color: var(--ink); }
.pw-do form.inline { display: inline; }
.event-use { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-end; align-items: center; }
.event-list li { align-items: flex-start; }
.on-today { color: var(--ink) !important; }
.from-event .link-btn { margin-left: 6px; }

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  .topnav, .who, .signout, .company small { display: none; }
  .codes { grid-template-columns: 1fr; }
  .qr-row { flex-direction: column; align-items: flex-start; }
  .topbar { padding: 0 14px; gap: 12px; }
  .page, .help-page { padding: 14px 12px 96px; }
  .today { grid-template-columns: 1fr; }
  .today.has-open .board-col { display: none; }
  .today:not(.has-open) .pass-col { display: none; }
  .pass-col { position: static; max-height: none; overflow: visible; }
  .pass-back { display: inline-flex; margin-bottom: 10px; }
  .lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lane { grid-template-columns: 1fr; padding: 7px 8px 8px; }
  .lane-n { font-size: 34px; }
  .lane-name { font-size: 12.5px; }
  .lane-new { grid-column: 1; font-size: 11px; }
  .board .c-about, .board .c-entity, .board .t-about, .board .t-entity { display: none; }
  .bulk { flex-wrap: wrap; }
  .compose-grid, .entity-grid, .entity-grid.entity-grid--even { grid-template-columns: 1fr; }
  .board .c-tags, .board .c-signin, .board .c-acts { width: auto; }
  .row-acts { justify-content: flex-start; }
  /* Wide admin tables become one card per row. */
  .board--cards thead { display: none; }
  .board--cards tr { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-top: 1px solid var(--line); }
  .board--cards tbody tr:first-child { border-top: 0; }
  .board--cards td { padding: 0; border: 0; text-align: left; width: auto; }
  .board--cards td.num::before { content: attr(data-label) " "; font-family: var(--font); color: var(--steel); }
  .form-grid, .form-grid--server, .hs-steps .form-grid, .io, .figures, .throughput, .model-facts { grid-template-columns: 1fr; }
  .figure { border-left: 0; border-top: 1.5px solid var(--ink); }
  .figure:first-child { border-top: 0; }
  .board .c-when2, .board .c-num, .board td.num { display: none; }
  .pass-segs.pass-segs--3 { grid-template-columns: 1fr; }
  .pass-segs.pass-segs--3 .pass-seg { border-left: 0; border-top: 1px dashed #3a434d; }
  .pass-segs.pass-segs--3 .pass-seg:first-child { border-top: 0; }
  .entity-head { flex-wrap: wrap; }
  .board .c-when { width: 66px; }
  .board .c-from { width: auto; }
  .board .c-state { width: 120px; }
  .pass-segs { grid-template-columns: 1fr 1fr; }
  .pass-seg:nth-child(3) { border-left: 0; border-top: 1px dashed #3a434d; }
  .pass-seg:nth-child(4) { border-top: 1px dashed #3a434d; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 30;
    background: var(--ink); padding: 6px 4px calc(10px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar summary { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--steel-on-ink); text-decoration: none; font-size: 12px; font-weight: 600; }
  .tabbar a[aria-current="page"] { color: #fff; box-shadow: inset 0 3px 0 #fff; }
  .tabbar summary { list-style: none; cursor: pointer; }
  .tabbar summary::-webkit-details-marker { display: none; }
  .tabbar details[open] summary { color: #fff; }
  .more-sheet { position: absolute; right: 8px; bottom: calc(100% + 8px); min-width: 200px; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); box-shadow: 0 8px 28px rgb(11 13 16 / 0.22); padding: 6px; }
  .tabbar .more-sheet a { flex-direction: row; justify-content: flex-start; padding: 12px 14px; font-size: 15px; color: var(--ink); border-radius: 4px; }
  .tabbar .more-sheet a:hover { background: var(--board); }
  .tabbar .more-sheet :focus-visible { outline-color: var(--focus); }
  .tabbar svg { width: 20px; height: 20px; }
  .topbox { display: none; }
  .tabbar .tab-box svg { width: 22px; height: 22px; }
  .box-line { margin: 0 -12px; border-radius: 0; }
  .box-help li { grid-template-columns: 1fr; gap: 2px; }
  .pass-segs.pass-segs--box { grid-template-columns: 1fr 1fr; }
  .pass-segs--box .pass-seg:first-child { grid-column: 1 / -1; }
  .pass-segs--box .pass-seg:nth-child(2) { border-left: 0; border-top: 1px dashed #3a434d; }
  .answer-value b { font-size: 60px; }
  .version-list li { grid-template-columns: 40px 1fr; }
  .version-list li .version-exp, .version-list li form { grid-column: 2; }
  .board .c-owner { width: auto; }
  .answer-acts { flex-direction: column; align-items: stretch; }
  .show-as { flex-wrap: wrap; row-gap: 6px; }
}

/* Company · Telegram: how Telegram reaches Stream (GetTelegramReach). */
.reach { display: grid; gap: 10px; margin: 4px 0 18px; }
.reach-last { display: block; margin-top: 4px; font-size: 13px; color: var(--steel); }
.reach-again { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.reach-again .field-hint { margin: 0; }

/* Two rules claim one request: pick one (US-026, GetRuleChoice). Lit as a change waiting for a person. */
.choose-rule { border-radius: var(--radius); background: var(--alert-wash); box-shadow: inset 0 0 0 1.5px var(--ink); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.choose-rule h3 { font-size: 15px; }
.rc-request { margin: 0; font-size: 14px; }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rc-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 10px; }
.rc-list li.rc-prepared { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rc-list small { display: block; color: var(--steel); font-size: 13px; margin-top: 2px; }
.rc-list form { flex: none; }
.rc-mark { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--steel); }
.choose-rule .field-hint, .choose-rule form { margin: 0; }
@media (max-width: 640px) { .rc-list li { flex-direction: column; align-items: stretch; } }

/* Today: a command a rule uses is gone (US-023, ListGoneCommands). */
.notice--gone > div { flex: 1; }
.notice--gone .notice-since { display: block; margin-top: 4px; font-size: 13px; color: var(--steel); }
.notice--gone form { display: block; margin-top: 8px; }
.sender-list { list-style: none; padding-left: 0; margin-top: 6px; }
.sender-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.sec--after { margin-top: 16px; }