/* sto-admin-design/css/layout.css
   App shell, sidebar, screen scaffolds, the [data-state] action-bar matrix,
   and the phone breakpoints. */

/* ============================================================== SHELL === */
.app {
  display: grid;
  grid-template-columns: var(--w-sidebar) minmax(0, 1fr);
  grid-template-rows: 100vh;
  background: var(--bg);
}
.app[data-sidebar="collapsed"] { grid-template-columns: var(--w-sidebar-collapsed) minmax(0, 1fr); }

/* ---- Sidebar — owner: initSidebar (toggle + persistence) --------------- */
.sidebar {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-right: 1px solid var(--rule);
  overflow: hidden;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--sp-2); height: var(--h-topbar);
  padding: 0 var(--sp-3); border-bottom: 1px solid var(--rule); flex: none; }
.sidebar__mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-on); border-radius: var(--r-sm);
  font-family: var(--font-content); font-weight: var(--fw-bold); font-size: 14px; }
.sidebar__name { font-family: var(--font-content); font-size: var(--fs-md); font-weight: var(--fw-semi);
  letter-spacing: -.01em; white-space: nowrap; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-2); display: flex;
  flex-direction: column; gap: 2px; }
.sidebar__group { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--text-3); padding: var(--sp-4) var(--sp-2) var(--sp-1); white-space: nowrap; }
.sidebar__foot { flex: none; padding: var(--sp-2); border-top: 1px solid var(--rule); }

.nav-item { display: flex; align-items: center; gap: var(--sp-3); height: 34px; padding: 0 var(--sp-2);
  border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-base); font-weight: var(--fw-medium);
  white-space: nowrap; text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item .icon { color: var(--text-3); flex: none; }
.nav-item:hover .icon { color: var(--text-2); }
.nav-item[aria-current="page"] { background: var(--amber-900); color: var(--amber-100); }
.nav-item[aria-current="page"] .icon { color: var(--amber-300); }
.nav-item .badge { margin-left: auto; }

/* Collapsed sidebar: icons only, labels hidden, title attr carries the name */
.app[data-sidebar="collapsed"] .sidebar__name,
.app[data-sidebar="collapsed"] .sidebar__group,
.app[data-sidebar="collapsed"] .nav-item span,
.app[data-sidebar="collapsed"] .userchip__text { display: none; }
.app[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 0; }
.app[data-sidebar="collapsed"] .nav-item .badge { position: absolute; margin: 0; transform: translate(12px, -10px); }
.app[data-sidebar="collapsed"] .nav-item { position: relative; }

.userchip { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2);
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); text-align: left; }
.userchip:hover { background: var(--surface-hover); }
.userchip__avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-hover); border: 1px solid var(--rule-strong);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--amber-200); }
.userchip__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.userchip__text b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.userchip__text small { font-size: var(--fs-xs); color: var(--text-3); text-transform: capitalize; }

/* ---- Main column ------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

.topbar { display: flex; align-items: center; gap: var(--sp-3); height: var(--h-topbar); flex: none;
  padding: 0 var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--rule); }
.topbar__title { font-family: var(--font-content); font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.topbar__crumb { font-size: var(--fs-sm); color: var(--text-3); }
.clock { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-3); white-space: nowrap; }
.clock .icon { width: 13px; height: 13px; }
.clock b { color: var(--text-2); font-weight: var(--fw-medium); }

.outlet { flex: 1; overflow-y: auto; min-height: 0; }
/* Shell must look right with an empty outlet — no layout jump on mount. */
.outlet:empty::before { content: ""; display: block; height: 100%; }

.screen { max-width: var(--w-content); margin: 0 auto; padding: var(--sp-5); }
.screen--flush { max-width: none; padding: 0; height: 100%; }
.screen__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding-bottom: var(--sp-2); }
.screen__head h1 { font-size: var(--fs-2xl); }
.screen__head p { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }

/* ======================================================= DASHBOARD ===== */
.dash { display: flex; flex-direction: column; gap: var(--sp-5); }
.dash__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.dash__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

/* ========================================================== EDITOR ===== */
/* .editor-screen is the [data-state] ROOT: it wraps the editor grid AND the
   sticky action bar, so the state matrix below can reach both. */
.editor-screen { display: flex; flex-direction: column; min-height: 100%; }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-rail);
  gap: var(--sp-5); align-items: start;
  max-width: calc(var(--w-editor) + var(--w-rail) + var(--sp-5));
  margin: 0 auto; padding: var(--sp-5) var(--sp-5) calc(var(--h-actionbar) + var(--sp-8)); }
.editor__main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.editor__rail { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: var(--sp-5); }
.rail-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.rail-card__title { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--text-3); }

/* Headline field sits on paper with the body — one lit block */
.editor__paper-head { background: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-6) var(--sp-6) 0; box-shadow: var(--sh-3); }
.editor__paper-head + .rte { border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--sh-3); }
/* Authored as a <textarea> so a full 115-character headline is always visible;
   it must never look like a text box. field-sizing grows it where supported,
   rows="1" + the min-height below cover the rest. */
.input--headline { background: transparent; border: 0; border-bottom: 1px solid transparent;
  border-radius: 0; padding: 0 0 var(--sp-2); height: auto; min-height: 0;
  resize: none; overflow: hidden; field-sizing: content;
  font-family: var(--font-content); font-size: var(--fs-3xl); font-weight: var(--fw-semi);
  line-height: var(--lh-tight); color: #0f0d0c; }
.input--headline::placeholder { color: #b6b0a6; }
.input--headline:hover, .input--headline:focus { background: transparent; border-bottom-color: var(--amber-400); }
.input--headline[aria-invalid="true"] { border-bottom-color: var(--danger-fg); background: transparent; }
.input--summary { background: transparent; border: 0; border-radius: 0; padding: var(--sp-2) 0 var(--sp-4);
  field-sizing: content; min-height: 0; overflow: hidden;
  font-family: var(--font-content); font-size: var(--fs-md); line-height: var(--lh-base); color: #4a453f; resize: none; }
.input--summary::placeholder { color: #b6b0a6; }
.input--summary:hover, .input--summary:focus { background: transparent; }
.editor__paper-head .counter { color: #8a847c; }

/* ---- Sticky action bar ------------------------------------------------- */
.actionbar { position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--h-actionbar); padding: 0 var(--sp-5);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--rule-strong); }
.actionbar__state { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); }
.actionbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* ===== [data-state] → action-bar matrix. CSS ONLY. No JS decides this. ===
   States: new | offline | scheduled | online  (set on .editor-screen root)
   Every button lives in the markup once; this hides what doesn't apply and
   rewrites the labels that change per state via [data-label-*] spans.      */

/* default: hide everything state-specific, then re-show per state */
.editor-screen [data-action="publish"],
.editor-screen [data-action="saveDraft"],
.editor-screen [data-action="save"],
.editor-screen [data-action="takeOffline"],
.editor-screen [data-action="view"],
.editor-screen [data-action="delete"] { display: none; }

/* new (unsaved draft) — Save draft + Publish now */
.editor-screen[data-state="new"] [data-action="saveDraft"],
.editor-screen[data-state="new"] [data-action="publish"] { display: inline-flex; }

/* offline (saved, not live) — Save + Publish + Delete + no View */
.editor-screen[data-state="offline"] [data-action="save"],
.editor-screen[data-state="offline"] [data-action="publish"],
.editor-screen[data-state="offline"] [data-action="delete"] { display: inline-flex; }

/* scheduled — Save + Publish now (overrides schedule) + Unschedule + View preview */
.editor-screen[data-state="scheduled"] [data-action="save"],
.editor-screen[data-state="scheduled"] [data-action="publish"],
.editor-screen[data-state="scheduled"] [data-action="takeOffline"],
.editor-screen[data-state="scheduled"] [data-action="view"],
.editor-screen[data-state="offline"] [data-action="view"] { display: inline-flex; }

/* online — Save changes + Take offline + View on site. Never Publish. */
.editor-screen[data-state="online"] [data-action="save"],
.editor-screen[data-state="online"] [data-action="takeOffline"],
.editor-screen[data-state="online"] [data-action="view"] { display: inline-flex; }

/* Labels that change per state. Each button holds all its variants; only the
   one matching the editor state renders. */
[data-label-new], [data-label-offline], [data-label-scheduled], [data-label-online] { display: none; }
.editor-screen[data-state="new"] [data-when="saved"] { display: none; }
.editor-screen[data-state="new"]       [data-label-new],
.editor-screen[data-state="offline"]   [data-label-offline],
.editor-screen[data-state="scheduled"] [data-label-scheduled],
.editor-screen[data-state="online"]    [data-label-online] { display: inline; }

/* Schedule row is only meaningful before the piece is live */
.editor-screen[data-state="online"] [data-when="prelive"] { display: none; }
/* Live-metrics rail card only once it has been live */
.editor-screen[data-state="new"] [data-when="live"],
.editor-screen[data-state="offline"] [data-when="live"] { display: none; }

/* ========================================================== LETTERS ==== */
/* Two-pane: list left, reading pane right. Collapses to one pane on phones. */
.split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); height: 100%; }
.split__list { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--rule);
  background: var(--surface); }
.split__list-head { flex: none; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--sp-3); }
.split__scroll { flex: 1; overflow-y: auto; min-height: 0; }
.split__pane { min-width: 0; overflow-y: auto; background: var(--bg); }
.reader { max-width: 700px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-12);
  display: flex; flex-direction: column; gap: var(--sp-4); }
.reader__bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.reader__bar .btn-group { margin-left: auto; }

/* ============================================================ AUTH ===== */
/* login.html — no shell, no nav */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6);
  background: var(--bg); }
.auth__card { width: min(380px, 100%); display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__brand { display: flex; align-items: center; gap: var(--sp-2); justify-content: center;
  padding-bottom: var(--sp-2); }
.auth__box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); box-shadow: var(--sh-2); }
.auth__title { font-family: var(--font-content); font-size: var(--fs-xl); font-weight: var(--fw-semi); }
.auth__text { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-base); }
.auth__foot { text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
/* Only the active step renders — the page sets [data-auth-step] on .auth.
   Descendant, not child: the steps sit inside .auth__card, one level down. */
[data-auth-step] [data-step] { display: none; }
[data-auth-step="credentials"] [data-step="credentials"],
[data-auth-step="mfa"]         [data-step="mfa"],
[data-auth-step="enrol"]       [data-step="enrol"],
[data-auth-step="newPassword"] [data-step="newPassword"],
[data-auth-step="reset"]       [data-step="reset"] { display: flex; }

.otp { display: flex; gap: var(--sp-2); justify-content: center; }
.otp input { width: 42px; height: 52px; text-align: center; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-semi); }
.qr { width: 168px; height: 168px; margin: 0 auto; display: grid; place-items: center;
  background: var(--paper); border-radius: var(--r-md); padding: var(--sp-2); }
.secret { font-family: var(--font-mono); font-size: var(--fs-sm); text-align: center;
  padding: var(--sp-2); background: var(--surface-sunken); border: 1px solid var(--rule);
  border-radius: var(--r-sm); color: var(--amber-200); word-break: break-all; user-select: all; }

/* ========================================================== SYSTEM ===== */
/* 403 / 404 */
.sys { min-height: 100%; display: grid; place-items: center; padding: var(--sp-12) var(--sp-5); }
.sys__inner { max-width: 420px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-3); }
.sys__code { font-family: var(--font-mono); font-size: 56px; font-weight: var(--fw-semi);
  line-height: 1; color: var(--rule-strong); letter-spacing: -.03em; }
.sys__title { font-family: var(--font-content); font-size: var(--fs-xl); font-weight: var(--fw-semi); }
.sys__text { font-size: var(--fs-base); color: var(--text-3); line-height: var(--lh-base); }

/* ======================================================= BREAKPOINTS === */
/* Documented: 1280 rail wraps · 1024 sidebar collapses · 768 single column
   · 400 phone (letters, letter-review, article-edit must work here). */

@media (max-width: 1280px) {
  .dash__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor { grid-template-columns: minmax(0, 1fr); max-width: var(--w-editor); }
  .editor__rail { position: static; }
}

@media (max-width: 1024px) {
  .app, .app[data-sidebar="collapsed"] { grid-template-columns: var(--w-sidebar-collapsed) minmax(0, 1fr); }
  .app .sidebar__name, .app .sidebar__group, .app .nav-item span, .app .userchip__text { display: none; }
  .app .nav-item { justify-content: center; padding: 0; position: relative; }
  .dash__cols { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .screen { padding: var(--sp-4) var(--sp-3); }
  .editor { padding: var(--sp-4) var(--sp-3) calc(var(--h-actionbar) + var(--sp-8)); }
  .topbar { padding: 0 var(--sp-3); }
  .clock { display: none; }
  /* Two-pane becomes one: the pane is shown only when a row is selected.
     The router adds .is-detail to .split when a :id route is active. */
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__pane { display: none; }
  .split.is-detail .split__list { display: none; }
  .split.is-detail .split__pane { display: block; }
  /* Lists drop non-essential columns */
  .list [data-optional] { display: none; }
}

@media (max-width: 520px) {
  .dash__stats { grid-template-columns: minmax(0, 1fr); }
  .paper, .rte__area { padding: var(--sp-4); }
  .editor__paper-head { padding: var(--sp-4) var(--sp-4) 0; }
  .input--headline { font-size: var(--fs-2xl); }
  .actionbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .actionbar__state { display: none; }
  .actionbar__actions { margin-left: 0; width: 100%; }
  .actionbar__actions .btn { flex: 1; }
  .reader { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
  .toasts { left: var(--sp-3); right: var(--sp-3); }
  .toast { max-width: none; }
  .drawer { width: 100vw; }
}

@media print {
  .sidebar, .topbar, .actionbar, .toasts, .drawer, .toolbar { display: none !important; }
  .app { display: block; }
  .main { height: auto; }
  body { background: #fff; color: #000; }
}