/* sto-admin-design/css/components.css
   Classes style; data-* attributes bind and carry state. Never the reverse.
   Each block notes which STOAdmin.init* owns its behaviour (if any). */

/* ============================================================ BUTTONS === */
/* owner: none (plain), initTableActions (row actions), initDialogs (dialog buttons) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-control); padding: 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1;
  border-radius: var(--r-md); border: 1px solid var(--rule-strong);
  background: var(--surface-raised); color: var(--text);
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: #554e46; color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
.btn--primary:active { background: var(--accent-active); border-color: var(--accent-active); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--danger { background: transparent; border-color: var(--danger-bd); color: var(--danger-fg); }
.btn--danger:hover { background: var(--danger-bg); border-color: var(--danger-fg); color: var(--danger-fg); }

.btn--lg { height: var(--h-control-lg); padding: 0 var(--sp-4); font-size: var(--fs-base); }
.btn--sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn--icon { width: var(--h-control); padding: 0; }
.btn--icon.btn--lg { width: var(--h-control-lg); }

/* Loading state: set data-loading on the button; label stays for width */
.btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
.btn[data-loading]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--text); animation: sto-spin 700ms linear infinite;
}
.btn--primary[data-loading]::after { color: var(--accent-on); }
@keyframes sto-spin { to { transform: rotate(360deg); } }

.btn-group { display: flex; align-items: center; gap: var(--sp-2); }
.btn-group--tight { gap: var(--sp-1); }

/* ============================================================== CHIPS ==== */
/* Status chip. State comes from [data-status]; never from a colour class. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; padding: 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-pill); border: 1px solid var(--neutral-bd);
  background: var(--neutral-bg); color: var(--neutral-fg); white-space: nowrap;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.chip--plain::before { display: none; }

[data-status="draft"].chip       { color: var(--st-draft-fg);       background: var(--st-draft-bg);       border-color: var(--st-draft-bd); }
[data-status="offline"].chip     { color: var(--st-offline-fg);     background: var(--st-offline-bg);     border-color: var(--st-offline-bd); }
[data-status="scheduled"].chip   { color: var(--st-scheduled-fg);   background: var(--st-scheduled-bg);   border-color: var(--st-scheduled-bd); }
[data-status="online"].chip      { color: var(--st-online-fg);      background: var(--st-online-bg);      border-color: var(--st-online-bd); }
[data-status="new"].chip         { color: var(--st-new-fg);         background: var(--st-new-bg);         border-color: var(--st-new-bd); }
[data-status="approved"].chip    { color: var(--st-approved-fg);    background: var(--st-approved-bg);    border-color: var(--st-approved-bd); }
[data-status="notApproved"].chip { color: var(--st-notApproved-fg); background: var(--st-notApproved-bg); border-color: var(--st-notApproved-bd); }
[data-status="active"].chip      { color: var(--st-active-fg);      background: var(--st-active-bg);      border-color: var(--st-active-bd); }
[data-status="inactive"].chip    { color: var(--st-inactive-fg);    background: var(--st-inactive-bg);    border-color: var(--st-inactive-bd); }
[data-status="blocked"].chip     { color: var(--st-blocked-fg);     background: var(--st-blocked-bg);     border-color: var(--st-blocked-bd); }
/* the activity log's amber pill (Saved, Edited, Updated, the password/2FA actions) — warning tokens, no new colour */
[data-status="changed"].chip     { color: var(--warning-fg);        background: var(--warning-bg);        border-color: var(--warning-bd); }

/* Counter badge (nav unread, importance flag) */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-semi);
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on);
}
.badge--quiet { background: var(--surface-hover); color: var(--text-2); }

/* Filter chip — owner: none (router/binder reads [data-filter]/[data-value]) */
.fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  border-radius: var(--r-pill); border: 1px solid var(--rule); background: transparent; color: var(--text-2);
  transition: all var(--dur-1) var(--ease);
}
.fchip:hover { border-color: var(--rule-strong); color: var(--text); }
.fchip[aria-pressed="true"] { background: var(--amber-900); border-color: var(--amber-700); color: var(--amber-200); }

/* ============================================================== FIELDS === */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.field__label .req { color: var(--accent-text); }
.field__hint { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-snug); }
.field__row { display: flex; align-items: center; gap: var(--sp-2); }

.input, .select, .textarea {
  width: 100%; min-width: 0;
  height: var(--h-control-lg); padding: 0 var(--sp-3);
  background: var(--surface-sunken); color: var(--text);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  font-size: var(--fs-base);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.textarea { height: auto; min-height: 76px; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-base); resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: #554e46; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent-text); background: #0b0a09; }
.input[disabled], .select[disabled], .textarea[disabled] { opacity: .5; cursor: not-allowed; }
.input--sm { height: var(--h-control); font-size: var(--fs-sm); }

.select {
  appearance: none; padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a847c' stroke-width='1.6' stroke-linecap='round'><path d='M4 6.5 8 10.5l4-4'/></svg>");
  background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 14px;
}

/* Search input with leading icon */
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: var(--sp-3); color: var(--text-3); pointer-events: none; }
.search .input { padding-left: var(--sp-8); }

/* Invalid + inline error — owner: binder sets aria-invalid and fills [data-error-for] */
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger-fg); background: #1c1210; }
.field__error { font-size: var(--fs-xs); color: var(--danger-fg); display: flex; align-items: center; gap: 5px; }
.field__error:empty { display: none; }

/* Form-level server error list */
.errors { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); margin-bottom: var(--sp-4);
  background: var(--danger-bg); border: 1px solid var(--danger-bd); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--danger-fg); }
.errors:empty { display: none; }

/* Character counter — owner: initCounters. Wording is legacy and deliberate. */
.counter { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.counter b { color: var(--text-2); font-weight: var(--fw-semi); }
.counter[data-state="near"] { color: var(--warning-fg); }
.counter[data-state="over"], .counter[data-state="under"] { color: var(--danger-fg); }

/* Checkbox / toggle rows — owner: none */
.check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-base); cursor: pointer; }
.check input { appearance: none; width: 16px; height: 16px; margin: 2px 0 0; flex: none;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--surface-sunken); }
.check input:checked { background: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5 6.5 11.5 12.5 5'/></svg>");
  background-size: 13px; background-position: center; background-repeat: no-repeat; }
.check__text { display: flex; flex-direction: column; gap: 2px; }
.check__text small { color: var(--text-3); font-size: var(--fs-xs); }

.switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.switch input { appearance: none; width: 34px; height: 19px; border-radius: var(--r-pill);
  background: var(--surface-hover); border: 1px solid var(--rule-strong); position: relative; flex: none;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--text-3); transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.switch input:checked { background: var(--amber-900); border-color: var(--amber-600); }
.switch input:checked::after { transform: translateX(15px); background: var(--amber-300); }

/* Segmented control — owner: initSegmented */
.segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); }
.segmented button { height: 26px; padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--sh-1); }
.segmented button:disabled { opacity: 0.45; cursor: not-allowed; }
.segmented button:disabled:hover { color: var(--text-3); }

/* Tag input (keywords) — owner: initTagInput */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--h-control-lg);
  padding: 5px var(--sp-2); background: var(--surface-sunken);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); cursor: text; }
.tags:focus-within { border-color: var(--accent-text); }
.tags__tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 4px 0 var(--sp-2);
  font-size: var(--fs-sm); background: var(--surface-hover); border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm); color: var(--text); }
.tags__tag button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0;
  border: 0; background: transparent; color: var(--text-3); border-radius: var(--r-sm); }
.tags__tag button:hover { color: var(--danger-fg); background: var(--danger-bg); }
.tags__input { flex: 1 1 90px; min-width: 90px; height: 22px; border: 0; background: transparent;
  font-size: var(--fs-base); outline: none; }

/* Date + time composite — owner: initDateTime */
.datetime { display: flex; align-items: center; gap: var(--sp-2); }
.datetime .input { width: auto; flex: 1 1 auto; }
.datetime__tz { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

/* ========================================================== PANELS ====== */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.panel__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule); }
.panel__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.panel__body { padding: var(--sp-4); }
.panel__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--rule); }
.panel--flush .panel__body { padding: 0; }

/* Stat card (dashboard) */
.stat { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); min-width: 0; }
.stat__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--text-3); }
.stat__value { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: var(--fw-semi);
  line-height: 1.05; letter-spacing: -.02em; }
.stat__meta { font-size: var(--fs-sm); color: var(--text-3); }
.stat--accent { border-color: var(--amber-700); }
.stat--accent .stat__value { color: var(--amber-300); }
.stat__spark { height: 30px; margin-top: var(--sp-1); }
.stat__spark path { fill: none; stroke: var(--amber-400); stroke-width: 1.6; }
.stat__spark .area { fill: rgba(203,143,54,.14); stroke: none; }

/* ============================================================ LISTS ===== */
/* Dense table. owner: initTableActions (row hover actions + sort clicks) */
.list { width: 100%; font-size: var(--fs-base); }
.list thead th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--sp-2) var(--sp-3); text-align: left;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--rule-strong);
}
.list th[data-sortable] { cursor: pointer; user-select: none; }
.list th[data-sortable]:hover { color: var(--text); }
.list th[data-sortable]::after { content: "↕"; margin-left: 5px; opacity: .35; font-size: 10px; }
.list th[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; color: var(--accent-text); }
.list th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--accent-text); }

.list tbody tr { border-bottom: 1px solid var(--rule); transition: background var(--dur-1) var(--ease); }
.list tbody tr:hover { background: var(--surface-hover); }
.list tbody tr[aria-selected="true"] { background: var(--amber-900); }
.list td { padding: var(--sp-2) var(--sp-3); vertical-align: middle; }
/* the row's flexible cell (width:100%, its text .u-truncate): max-width 0 lets it take the room left and cut its lines,
   where a long summary made it grow and pushed Released, Views and the row's buttons off the panel; a cut line is a block
   (an inline .list__sub never clipped - it ran over the next columns) (31 Oct 2026) */
.list td:has(> .u-truncate) { max-width: 0; }
.list td > .u-truncate { display: block; }
.list td.is-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); }
.list td.is-time { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.list__title { font-weight: var(--fw-semi); color: var(--text); display: block; }
.list__sub { font-size: var(--fs-sm); color: var(--text-3); }
.list tr.is-unread .list__title { font-weight: var(--fw-bold); }
.list tr.is-unread td::first-line { color: var(--text); }
.list tr.is-dim { opacity: .58; }
.list__thumb { position: relative; display: block; width: 44px; height: 30px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-hover); }
.list__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.list__thumb img:not([src]) { display: none; }
/* No picture: the masthead in the box, as the site shows it (sto-wordmark.svg, a copy of the site's; 25 Sep 2026) */
.list__noimage { position: absolute; inset: 0; background: var(--text-3);
  -webkit-mask: url(../img/sto-wordmark.svg) center / 86% auto no-repeat;
          mask: url(../img/sto-wordmark.svg) center / 86% auto no-repeat; }
.list__thumb img[src] + .list__noimage { display: none; }

/* Row actions appear on hover / focus-within, reserve their space always */
.list__actions { display: flex; justify-content: flex-end; gap: var(--sp-1); opacity: 0;
  transition: opacity var(--dur-1) var(--ease); }
tr:hover .list__actions, tr:focus-within .list__actions { opacity: 1; }
@media (hover: none) { .list__actions { opacity: 1; } }

/* Card list (letters, threads) */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule); text-align: left; background: transparent; border-left: 0;
  border-right: 0; border-top: 0; width: 100%; color: inherit;
  transition: background var(--dur-1) var(--ease); }
.row:hover { background: var(--surface-hover); }
.row[aria-current="true"] { background: var(--amber-900); box-shadow: inset 2px 0 0 var(--amber-500); }
.row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.row__title { font-weight: var(--fw-semi); }
.row.is-unread .row__title { font-weight: var(--fw-bold); }
.row.is-unread::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-400); flex: none; }
.row__meta { font-size: var(--fs-sm); color: var(--text-3); display: flex; gap: var(--sp-2); align-items: center; }

/* The Wire inbox (js/wire.js): a statement per row — the label, the title to the portal, the model's summary and why, the two buttons */
.wire__list { list-style: none; margin: 0; padding: 0; }
.wire__row { align-items: flex-start; padding: var(--sp-3) var(--sp-4); }
.wire__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wire__head .row__title a { color: inherit; text-decoration: none; }
.wire__head .row__title a:hover { text-decoration: underline; }
.wire__summary { margin: var(--sp-1) 0 0; font-size: var(--fs-base); color: var(--text); max-width: 72ch; }
.wire__why { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); max-width: 72ch; }
.wire__outcome { margin-top: var(--sp-1); flex-wrap: wrap; }
.wire__actions { flex: none; align-self: center; }

/* Toolbar above a list */
.toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0 var(--sp-4); }
.toolbar .search { flex: 1 1 240px; max-width: 340px; }
.toolbar__filters { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--text-3); }
.pager__pages { display: flex; align-items: center; gap: var(--sp-1); }
.pager__pages button[aria-current="page"] { background: var(--amber-900); border-color: var(--amber-700); color: var(--amber-200); }

/* Activity log rows (js/log.js): the actor's dot says who acted — gold = the system, grey = a person */
.log__actor { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.log__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--st-offline-bd); }
.log__dot[data-kind="system"] { background: var(--accent-text); }
.log__item { color: var(--text-2); }
a.log__item[href] { color: var(--text); text-decoration: none; }
a.log__item[href]:hover { text-decoration: underline; }
.log__note { font-size: var(--fs-xs); color: var(--text-3); margin-left: var(--sp-1); }
.pager .log__foot { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* Empty state — hidden unless the binder reveals it */
.empty { display: none; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--text-3); }
.empty.is-shown { display: flex; }
.empty .icon { width: 26px; height: 26px; color: var(--rule-strong); stroke-width: 1.2; }
.empty__title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text-2); }
.empty__text { font-size: var(--fs-sm); max-width: 42ch; }

/* Skeleton — [data-skeleton] templates and .is-loading regions use these */
.skel { background: linear-gradient(90deg, var(--surface-hover) 25%, #302c28 37%, var(--surface-hover) 63%);
  background-size: 400% 100%; border-radius: var(--r-sm); animation: sto-shimmer 1.4s ease infinite; }
@keyframes sto-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skel--text { height: 11px; }
.skel--title { height: 15px; width: 60%; }
.skel--chip { height: 20px; width: 62px; border-radius: var(--r-pill); }
.skel--block { height: 100%; min-height: 60px; border-radius: var(--r-md); }
.is-loading [data-list] tbody, .is-loading .rows { visibility: hidden; }

/* ========================================================== PAPER ====== */
/* The lit writing surface — the only light area in the product. */
.paper { background: var(--paper); color: var(--text-inverse); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: var(--sp-8); }
.paper a { color: var(--amber-600); }
.paper a:hover { color: var(--amber-700); }
.paper hr { border-top-color: var(--paper-rule); }
.paper__kicker { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--amber-600); }
.paper__headline { font-family: var(--font-content); font-size: var(--fs-3xl); font-weight: var(--fw-semi);
  line-height: var(--lh-tight); color: #0f0d0c; }
.paper__byline { font-size: var(--fs-sm); color: var(--text-inverse-2); display: flex; gap: var(--sp-2);
  flex-wrap: wrap; align-items: center; }
.paper__body { font-family: var(--font-content); font-size: var(--fs-md); line-height: var(--lh-loose);
  color: #241f1a; max-width: 66ch; }
.paper__body p + p { margin-top: var(--sp-4); }

/* Rich-text chrome. The developer mounts the editor on [data-editor]. */
.rte { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
  display: flex; flex-direction: column; }
.rte__bar { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
  padding: 6px var(--sp-3); background: #eceae4; border-bottom: 1px solid var(--paper-rule); }
.rte__bar button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: #38332e; }
.rte__bar button:hover { background: #ddd8cf; color: #131110; }
.rte__bar button[aria-pressed="true"] { background: var(--amber-100); color: var(--amber-700); }
.rte__bar .sep { width: 1px; height: 18px; background: var(--paper-rule); margin: 0 var(--sp-1); }
.rte__area { padding: var(--sp-6); min-height: 340px; font-family: var(--font-content);
  font-size: var(--fs-md); line-height: var(--lh-loose); color: #241f1a; outline: none; }
.rte__area p + p { margin-top: var(--sp-4); }
.rte__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 6px var(--sp-3); background: #eceae4; border-top: 1px solid var(--paper-rule);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: #6b655d; }

/* ==================================================== IMAGE / DROPZONE == */
/* owner: initDropzone. States: is-dragover is-uploading has-image */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-2); min-height: 132px; padding: var(--sp-4);
  background: var(--surface-sunken); border: 1px dashed var(--rule-strong); border-radius: var(--r-md);
  text-align: center; color: var(--text-3); font-size: var(--fs-sm); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.dropzone:hover { border-color: #554e46; }
.dropzone.is-dragover { border-color: var(--amber-400); background: var(--amber-900); color: var(--amber-200); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__preview { display: none; width: 100%; }
.dropzone.has-image { border-style: solid; padding: 0; min-height: 0; overflow: hidden; }
.dropzone.has-image .dropzone__prompt { display: none; }
.dropzone.has-image .dropzone__preview { display: block; }
.dropzone__preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dropzone__bar { display: none; height: 3px; background: var(--surface-hover); }
.dropzone.is-uploading .dropzone__bar { display: block; }
.dropzone__bar span { display: block; height: 100%; background: var(--amber-400);
  transition: width var(--dur-3) var(--ease); }

/* Crop alignment picker */
.crop { display: flex; gap: var(--sp-1); }
.crop button { flex: 1; height: 30px; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--surface-raised); color: var(--text-3); }
.crop button[aria-pressed="true"] { background: var(--amber-900); border-color: var(--amber-600); color: var(--amber-200); }

/* ========================================================== DIALOGS ==== */
/* owner: initDialogs — native <dialog>, closes on backdrop click + Esc */
dialog {
  padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--sh-3);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
}
dialog::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
dialog[open] { animation: sto-dialog-in var(--dur-3) var(--ease-out); }
@keyframes sto-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.dialog__head { padding: var(--sp-4) var(--sp-5) 0; display: flex; flex-direction: column; gap: 4px; }
.dialog__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.dialog__text { font-size: var(--fs-base); color: var(--text-2); line-height: var(--lh-base); }
.dialog__body { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.dialog__foot { display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-4); }
.dialog--wide { width: min(680px, calc(100vw - 32px)); }
/* "What's next?" choice rows */
.choice { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; padding: var(--sp-3);
  text-align: left; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--r-md);
  color: var(--text); }
.choice:hover { border-color: var(--amber-600); background: var(--surface-hover); }
.choice .icon { color: var(--accent-text); margin-top: 2px; }
.choice__text { display: flex; flex-direction: column; gap: 2px; }
.choice__text small { color: var(--text-3); font-size: var(--fs-sm); }
/* a choice that holds a control instead of being one (the notifications switch) */
.choice--static:hover { border-color: var(--rule); background: var(--surface-raised); }
.choice--static .switch { gap: var(--sp-3); }
.choice--static .btn { align-self: flex-start; margin-top: var(--sp-1); }

/* ============================================================ TOASTS === */
/* owner: initToasts — STOAdmin.toast(message, variant) */
.toasts { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast);
  display: flex; flex-direction: column-reverse; gap: var(--sp-2); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 260px;
  max-width: 380px; padding: var(--sp-3); pointer-events: auto;
  background: var(--surface-raised); border: 1px solid var(--rule-strong); border-left-width: 3px;
  border-radius: var(--r-md); box-shadow: var(--sh-2); font-size: var(--fs-base);
  animation: sto-toast-in var(--dur-3) var(--ease-out); }
.toast.is-leaving { animation: sto-toast-out var(--dur-2) var(--ease) forwards; }
@keyframes sto-toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sto-toast-out { to { opacity: 0; transform: translateY(6px); } }
.toast[data-variant="success"] { border-left-color: var(--success-fg); }
.toast[data-variant="success"] .icon { color: var(--success-fg); }
.toast[data-variant="error"] { border-left-color: var(--danger-fg); }
.toast[data-variant="error"] .icon { color: var(--danger-fg); }
.toast[data-variant="info"] { border-left-color: var(--info-fg); }
.toast[data-variant="info"] .icon { color: var(--info-fg); }
.toast__close { margin-left: auto; border: 0; background: transparent; color: var(--text-3); padding: 0; }
.toast__close:hover { color: var(--text); }

/* ============================================================ DRAWER === */
/* Slide-over. owner: initDialogs (data-action="closeDrawer") */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  z-index: var(--z-drawer); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--rule-strong); box-shadow: var(--sh-3);
  transform: translateX(100%); transition: transform var(--dur-4) var(--ease-out); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.drawer__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--rule); }
.drawer-scrim { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--overlay);   /* under the drawer, not over it: --z-overlay (300) covered the drawer (200) and swallowed every click in it (16 Sep 2026) */
  opacity: 0; visibility: hidden; transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3); }
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

/* ========================================================= NOTICES ===== */
.notice { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); font-size: var(--fs-sm);
  background: var(--surface-raised); color: var(--text-2); }
.notice .icon { margin-top: 1px; flex: none; }
.notice--info { background: var(--info-bg); border-color: var(--info-bd); color: #cfe4f5; }
.notice--info .icon { color: var(--info-fg); }
.notice--warning { background: var(--warning-bg); border-color: var(--warning-bd); color: #f0dcb0; }
.notice--warning .icon { color: var(--warning-fg); }
.notice--danger { background: var(--danger-bg); border-color: var(--danger-bd); color: #f6c8b8; }
.notice--danger .icon { color: var(--danger-fg); }
.notice--success { background: var(--success-bg); border-color: var(--success-bd); color: #bfe3cd; }
.notice--success .icon { color: var(--success-fg); }

/* Definition rows (rail metadata, user detail) */
.deflist { display: flex; flex-direction: column; }
.deflist > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 7px 0; border-bottom: 1px dotted var(--rule); font-size: var(--fs-sm); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { color: var(--text-3); }
.deflist dd { margin: 0; color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: right; }
.deflist[hidden] { display: none; }
.deflist dd a { color: inherit; }

/* ========================================================== READERS ===== */
/* The readers' statistics screen (Times.Stats) and the Desk's readers row. owner: router.js loadReaders / drawChart */
.stat--link { text-decoration: none; color: inherit; transition: border-color var(--dur-1) var(--ease); }
.stat--link:hover { border-color: var(--rule-strong); }
.stat--accent.stat--link:hover { border-color: var(--amber-500); }
.legend { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); flex-wrap: wrap; }
.legend__item { display: inline-flex; align-items: center; gap: 5px; }
.legend__item[hidden] { display: none; }
.legend__swatch { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.legend__swatch--bar { background: var(--amber-400); }
.legend__swatch--line { height: 0; border-top: 2px solid var(--amber-200); }
.chart { display: block; width: 100%; height: 180px; }
.chart .bar { fill: var(--amber-400); opacity: .85; }
.chart .bar:hover { opacity: 1; }
.chart .bar--bot { fill: var(--rule-strong); }
.chart .line { fill: none; stroke: var(--amber-200); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart .grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .gridlabel { fill: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
.legend__swatch--paid { background: var(--rule-strong); }
/* the Facebook screen (js/facebook.js): a number with its small line underneath; a post clicking at twice / half the
   page's usual unpaid rate */
.list td.is-num .list__sub { display: block; font-size: var(--fs-xs); white-space: nowrap; }
.list [data-heat="hot"] { color: var(--success-fg); font-weight: 600; }
.list [data-heat="cold"] { color: var(--text-3); }
.chart__axis { display: flex; justify-content: space-between; margin-top: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.share { display: flex; align-items: center; gap: var(--sp-2); margin-top: 3px; }
.share__bar { display: block; height: 5px; border-radius: 3px; background: var(--amber-400); opacity: .75; min-width: 2px; }
.share__pct { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.list .chip--plain { text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- inbox (Times.Mail)
 * The thread list rows, the label chips (colour from the label's token name, never a hex), the reader's
 * messages (received mail on the paper, sent mail on a raised surface), the sandboxed HTML frame, the
 * compose block and the label manager. Phone: the split's .is-detail rule in layout.css applies. */
.inbox__row { align-items: flex-start; padding: var(--sp-3) var(--sp-4); }
a.inbox__row:hover { text-decoration: none; color: inherit; }
.inbox__row .row__main { gap: 3px; }
.inbox__line { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.inbox__line .row__title { flex: 1; min-width: 0; font-weight: var(--fw-medium); color: var(--text-2); }
.inbox__row.is-unread .inbox__line .row__title { font-weight: var(--fw-bold); color: var(--text); }
.inbox__time { flex: none; font-size: var(--fs-xs); }
.inbox__subject { font-size: var(--fs-base); color: var(--text-2); }
.inbox__row.is-unread .inbox__subject { font-weight: var(--fw-semi); color: var(--text); }
.inbox__preview { font-size: var(--fs-sm); display: block; }
.inbox__tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.inbox__tags:empty { display: none; }
.inbox__tags .chip { text-transform: none; letter-spacing: 0; font-weight: var(--fw-medium); height: 18px; }
.inbox__tags .u-mono { font-size: var(--fs-xs); color: var(--text-3); display: inline-flex; align-items: center; gap: 3px; }
.chip[data-colour="grey"]   { color: var(--neutral-fg); background: var(--neutral-bg); border-color: var(--neutral-bd); }
.chip[data-colour="red"]    { color: var(--danger-fg);  background: var(--danger-bg);  border-color: var(--danger-bd); }
.chip[data-colour="amber"]  { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-bd); }
.chip[data-colour="green"]  { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-bd); }
.chip[data-colour="blue"]   { color: var(--info-fg);    background: var(--info-bg);    border-color: var(--info-bd); }
.chip[data-colour="purple"] { color: var(--purple-fg);  background: var(--purple-bg);  border-color: var(--purple-bd); }
.fchip[data-colour]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; }
.fchip[data-colour="grey"]::before   { background: var(--neutral-fg); }
.fchip[data-colour="red"]::before    { background: var(--danger-fg); }
.fchip[data-colour="amber"]::before  { background: var(--warning-fg); }
.fchip[data-colour="green"]::before  { background: var(--success-fg); }
.fchip[data-colour="blue"]::before   { background: var(--info-fg); }
.fchip[data-colour="purple"]::before { background: var(--purple-fg); }

.inbox__reader { max-width: 820px; }
.inbox__reader .reader__bar .btn-group { flex-wrap: wrap; justify-content: flex-end; }
.inbox__head { margin: var(--sp-4) 0 var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.inbox__subject-h { font-family: var(--font-content); font-size: var(--fs-xl); font-weight: var(--fw-semi); line-height: var(--lh-snug); margin: 0; }
.inbox__meta { font-size: var(--fs-sm); }
.inbox__messages { display: flex; flex-direction: column; gap: var(--sp-3); }
.inbox__msg { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.inbox__msg-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; flex-wrap: wrap; }
.inbox__msg-head b { color: var(--text); }
.inbox__msg-head .u-mono { font-size: var(--fs-xs); color: var(--text-3); margin-left: auto; }
.inbox__msg[data-collapsed="true"] .inbox__msg-body, .inbox__msg[data-collapsed="true"] .inbox__att { display: none; }
.inbox__msg[data-collapsed="true"] .inbox__msg-head { opacity: .8; }
.inbox__msg-body { background: var(--paper); color: var(--text-inverse); padding: var(--sp-5) var(--sp-6); font-family: var(--font-content); font-size: var(--fs-md); line-height: var(--lh-loose); white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox__msg--out .inbox__msg-body { background: var(--surface-raised); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); }
.inbox__msg-body .inbox__quote { color: var(--text-inverse-2); font-size: var(--fs-sm); }
.inbox__msg--out .inbox__msg-body .inbox__quote { color: var(--text-3); }
.inbox__msg-tools { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--text-3); flex-wrap: wrap; }
.inbox__html { width: 100%; height: 520px; min-height: 240px; border: 0; background: #fff; resize: vertical; display: block; }
.inbox__att { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--rule); background: var(--surface-sunken); }
.inbox__att a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-md); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-2); text-decoration: none; max-width: 100%; }
.inbox__att a:hover { border-color: var(--amber-600); color: var(--text); }
.inbox__att img { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; }
.inbox__att .u-truncate { max-width: 220px; }
.inbox__compose { margin-top: var(--sp-4); }
.inbox__compose-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center; }
.inbox__compose-grid .field { display: contents; }
.inbox__compose-grid .field__label { font-size: var(--fs-sm); color: var(--text-3); text-align: right; }
.inbox__compose-grid .field__label + .input, .inbox__compose-grid .field__label + .select { grid-column: 2; }
.inbox__compose-grid .field__error { grid-column: 2; }
.inbox__compose-grid .field__error:empty { display: none; }
.inbox__compose textarea { width: 100%; max-width: none; }
.inbox__compose-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.inbox__compose .errors { margin-bottom: 0; }
/* the files attached to a reply or a new mail (31 Oct 2026): a chip each (thumbnail, name, size, progress, remove, its error) */
.inbox__compose.is-dropping { outline: 2px dashed var(--amber-400); outline-offset: 2px; }
.inbox__attach { display: flex; flex-direction: column; gap: var(--sp-2); }
.inbox__attach-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.inbox__attach-list:empty { display: none; }
.inbox__attach-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.inbox__attach-total { font-size: var(--fs-xs); }
.inbox__attach-total[data-tone="error"] { color: var(--danger-fg); }
.inbox__file { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; padding: 4px 4px 4px 8px; overflow: hidden;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--surface-sunken); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-2); }
.inbox__file img { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; }
.inbox__file .u-truncate { max-width: min(220px, 45vw); }
.inbox__file-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--amber-400); transition: width .2s; }
.inbox__file[data-state="ready"] .inbox__file-bar { display: none; }
.inbox__file[data-state="error"] { border-color: var(--danger-bd); }
.inbox__file-error { flex-basis: 100%; padding-right: 4px; color: var(--danger-fg); font-family: var(--font-ui); white-space: normal; }
.inbox__draft-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.inbox__triage { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); font-size: var(--fs-sm); }
.inbox__article-draft { margin-top: var(--sp-4); }
.inbox__draft-headline { font-family: var(--font-content); font-size: var(--fs-xl); line-height: var(--lh-tight); margin: 0; }
.inbox__draft-summary { margin: 0; font-size: var(--fs-md); color: var(--text-2); }
.inbox__draft-body { background: var(--paper); color: var(--text-inverse); padding: var(--sp-4) var(--sp-5); font-family: var(--font-content); font-size: var(--fs-md); line-height: var(--lh-loose); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; }
.inbox__draft-photo { margin: 0; max-width: 28rem; }
.inbox__draft-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm, 4px); }
.inbox__draft-photo figcaption { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.inbox__draft-links { margin: 0; font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
/* the AI notes: the triage's checks for the editor — amber, never in the body, a tick before publishing (editor) */
.ai-notes { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--warning-fg, var(--danger-fg)); background: var(--warning-bg, var(--danger-bg)); border: 1px solid var(--warning-bd, var(--danger-bd)); border-radius: var(--radius-sm, 4px); padding: var(--sp-3); margin-bottom: var(--sp-4); }
.ai-notes__head { display: flex; gap: var(--sp-2); align-items: center; }
.ai-notes__head .icon { flex: none; }
.ai-notes__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--text); }
.ai-notes__ok { display: flex; gap: var(--sp-2); align-items: center; font-weight: 600; cursor: pointer; }
.ai-notes.inbox__draft-covered { display: block; margin: 0; overflow-wrap: anywhere; }   /* one sentence, not the notes' column */
.ai-notes__ok input { width: 1.1em; height: 1.1em; }
/* the letter check: Claude's read of a letter to the editor for the head admin — the colour is the legal verdict (letter review) */
.letter-check { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); background: var(--info-bg); border: 1px solid var(--info-bd); border-radius: var(--radius-sm, 4px); padding: var(--sp-3); margin-bottom: var(--sp-4); }
.letter-check[data-level="clear"] { background: var(--success-bg); border-color: var(--success-bd); }
.letter-check[data-level="care"] { background: var(--warning-bg); border-color: var(--warning-bd); }
.letter-check[data-level="risk"] { background: var(--danger-bg); border-color: var(--danger-bd); }
.letter-check__head { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.letter-check__head .icon { flex: none; }
.letter-check__head .chip[data-level="clear"], .letter-check__head .chip[data-level="relevant"] { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-bd); }
.letter-check__head .chip[data-level="care"], .letter-check__head .chip[data-level="marginal"] { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-bd); }
.letter-check__head .chip[data-level="risk"], .letter-check__head .chip[data-level="off-topic"] { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-bd); }
.letter-check__summary { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.letter-check__summary:empty { display: none; }
.letter-check__findings { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-2); overflow-wrap: anywhere; }
.letter-check__findings q { font-style: italic; }
.letter-check__findings .letter-check__fix { display: block; color: var(--text-2); }
.letter-check__meta { font-size: var(--fs-xs); color: var(--text-2); }
.letter-check__meta:empty { display: none; }
.inbox__changes { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-1); }
.inbox__changes del { color: var(--danger, #c0392b); text-decoration: line-through; }
.inbox__changes ins { color: var(--success, #2e7d32); text-decoration: none; }
[data-correction] details summary { cursor: pointer; font-size: var(--fs-sm); }
.inbox__labels { display: flex; flex-direction: column; gap: var(--sp-2); }
.inbox__label-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto auto; gap: var(--sp-2); align-items: center; }
.inbox__label-row--new { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--rule); grid-template-columns: minmax(0, 1fr) 110px auto; }
.inbox__label-row .u-dimmer { font-size: var(--fs-xs); }
.inbox__picks { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 768px) {
  .inbox__compose-grid { grid-template-columns: 1fr; }
  .inbox__compose-grid .field__label { text-align: left; }
  .inbox__compose-grid .field__label + .input, .inbox__compose-grid .field__label + .select, .inbox__compose-grid .field__error { grid-column: 1; }
  .inbox__reader .reader__bar .btn-group { margin-left: 0; }
}

/* ---- Systems board (js/ops.js): the lights, the system panel, the problems, the groups ------------------- */
.ops__light { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text-3); }
.ops__light[data-state="green"] { background: var(--success-fg); box-shadow: 0 0 0 3px var(--success-bg); }
.ops__light[data-state="red"] { background: var(--danger-fg); box-shadow: 0 0 0 3px var(--danger-bg), 0 0 10px var(--danger-fg); }
.ops__light--md { width: 12px; height: 12px; }
.ops__light--lg { width: 14px; height: 14px; }
.ops__light--xl { width: 22px; height: 22px; }
.ops__system { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.ops__system[data-state="green"] { border-color: var(--success-bd); background: var(--success-bg); }
.ops__system[data-state="red"] { border-color: var(--danger-bd); background: var(--danger-bg); }
.ops__system-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops__system-text b { font-family: var(--font-content); font-size: var(--fs-xl); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
.ops__system-text span { font-size: var(--fs-sm); color: var(--text-2); }
.ops__system[data-state="red"] .ops__system-text b { color: var(--danger-fg); }
.ops__problems { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ops__problem { flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); font-size: var(--fs-base); }
.ops__problem-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ops__problem-head b { font-family: var(--font-content); font-size: var(--fs-lg); }
.ops__problem p { margin: 0; line-height: var(--lh-base); }
.ops__problem .ops__since { font-size: var(--fs-sm); opacity: .85; }
.ops__details summary { cursor: pointer; font-size: var(--fs-sm); opacity: .85; }
/* the Claude credits (Times.Log /admin/credits) */
.ops__credits { margin-bottom: var(--sp-4); }
.ops__credits-left { display: block; font-family: var(--font-mono); font-size: var(--fs-2xl, 1.5rem); font-weight: var(--fw-semi); }
.ops__credits-left[data-state="red"] { color: var(--danger-fg); }
.ops__credits-meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--sp-3); }
.ops__credits-form label { display: block; font-size: var(--fs-sm); color: var(--text-2); }
.ops__credits-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-1) 0 var(--sp-2); }
.ops__credits-row .input { flex: 0 1 12rem; min-width: 0; }
.ops__credits-sets { margin: var(--sp-2) 0 0; padding-left: 1.2em; font-size: var(--fs-sm); }
/* problems in readers' browsers (Times.Log issues) */
.ops__issues { margin-bottom: var(--sp-4); }
.ops__issue { border-top: 1px solid var(--rule); padding: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ops__issue:first-child { border-top: 0; padding-top: 0; }
.ops__issue-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ops__issue-head b { font-family: var(--font-content); font-size: var(--fs-md); overflow-wrap: anywhere; }
.ops__where { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--amber-200); }
.ops__issue-meta { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-base); }
.ops__issue .btn-group { margin-top: var(--sp-1); }
.ops__code { margin: 0; background: var(--surface-sunken); border: 1px solid var(--rule); border-radius: 8px; padding: var(--sp-2) 0; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; }
.ops__code span { display: block; padding: 0 var(--sp-3); white-space: pre; }
.ops__code span.at { background: var(--danger-bg); color: #f6c8b8; }
.ops__code i { display: inline-block; width: 3.5em; color: var(--text-3); font-style: normal; user-select: none; }
.ops__sample { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.ops__sample h4 { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ops__sample ol { margin: 0; padding-left: 1.4em; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.ops__sample ol li.ours { color: var(--text); font-weight: var(--fw-semi); }
.ops__sample ol li:not(.ours) { color: var(--text-3); }
.ops__sample-nav { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.ops__detail-lines { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-xs); word-break: break-word; }
.ops__detail-lines a { color: inherit; }
.ops__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.ops__group[data-state="red"] { border-color: var(--danger-bd); }
.ops__group .panel__head { gap: var(--sp-2); }
.ops__group-sum { font-size: var(--fs-sm); }
.ops__list { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
.ops__alarm { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); min-width: 0; }
.ops__alarm-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops__alarm[data-state="red"] .ops__alarm-title { color: var(--danger-fg); font-weight: var(--fw-semi); }
.ops__alarm .ops__since { font-size: var(--fs-xs); white-space: nowrap; }
.nav-item .nav-item__light { width: 18px; height: 18px; box-shadow: none; background: transparent; position: relative; }
.nav-item .nav-item__light::after { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.nav-item .nav-item__light[data-state="green"]::after { background: var(--success-fg); }
.nav-item .nav-item__light[data-state="red"]::after { background: var(--danger-fg); box-shadow: 0 0 8px var(--danger-fg); }

/* Boosts (Times.Boost): the cap meters and the fitted tables --------------- */
.meter { display: block; height: 4px; border-radius: 2px; background: var(--surface-3, #2a2622); overflow: hidden; margin: var(--sp-1) 0; }
.meter > span { display: block; height: 100%; width: 0; background: var(--amber-400); transition: width .3s ease; }
.boost__table { margin-top: var(--sp-4); }
.boost__table h3 { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--sp-1); }
/* the desk's switch for every Facebook ad (16 Oct 2026): a reason for the record, then the one button */
.boost__switch { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0 var(--sp-3); }
.boost__switch .input { flex: 1 1 16rem; min-width: 0; }
.meter[data-colour="red"] > span { background: var(--danger-fg); }