/* 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); }

/* 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; }
.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 { width: 44px; height: 30px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-hover); }

/* 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; }

/* 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); }

/* ============================================================ 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); }
.legend__swatch--edge { height: 0; border-top: 2px dashed var(--text-3); }
.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 .edge { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 4 3; 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; }
.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; }