/* editor/core.css — the editor's frame and its visual system: the tokens every editor stylesheet reads, the screen grid
   (top bar · rail · page · panel), the shared button kit, toasts. Owner: E1; the frame pass (FR, 2026-10-13) rebuilt it
   on P1's shell (KEPT L-K4). One family (Inter); mono only where it means something (the address, exact numbers).
   Motion: short and eased, nothing loops (L22, L35); prefers-reduced-motion turns transitions off. */
body.ed {
  /* FB2b T (2026-10-21): THE LOOK SYSTEM. One set of tokens; every editor stylesheet uses only these (LR-D D1, LR-P D-2,
     briefs/FB2b-look-system.md §1). Text: 12 meta, counts, hints · 13.5 secondary · 15 body, card titles, inputs (16 on a
     phone, where iOS zooms under 16) · 18 panel titles · 22 sheet and dialog headlines. 34 is the first screen's one
     headline (--fs-display), kept from P1. Weights 400 · 600 · 700. Spacing 4 · 8 · 12 · 16 · 24. Radii 8 · 14 · 20 ·
     pill. Pictures of the person's page (tiles, samples, the discord embed) draw in the page's own sizes, not these. */
  --fs-meta: 12px; --fs-sec: 13.5px; --fs-body: 15px; --fs-title: 18px; --fs-head: 22px; --fs-display: 34px; --fs-in: 15px;
  --fw-reg: 400; --fw-semi: 600; --fw-bold: 700;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --r-1: 8px; --r-2: 14px; --r-3: 20px; --r-pill: 999px;
  /* the phone's smallest hit area (the drawn control may be smaller; its hit area never is) */
  --hit: 44px;
  /* surfaces, darkest to lightest */
  --e-bg: #09090b; --e-ground: #060607; --e-panel: #101013; --e-card: #15151a; --e-raise: #1c1c22; --e-field: rgba(0,0,0,.28);
  /* lines */
  --e-line: rgba(255,255,255,.075); --e-line2: rgba(255,255,255,.12); --e-line3: rgba(255,255,255,.2);
  /* text: 4.5:1 or better on --e-panel for --e-dim; --e-faint is for hints only */
  /* FB2b T: --e-faint was #7c7c86 (4.10–4.60:1, LR-D 12 / LR-P 17); #8f8f99 is ≥ 5.1:1 on every editor surface, from
     --e-panel (5.93) to the phone dock's #1f1f26 (5.11) */
  --e-text: #ececf0; --e-dim: #a5a5ae; --e-faint: #8f8f99;
  /* the one tool colour (selection, focus, on), and the states */
  --e-sel: #7aa7ff; --e-sel-a: rgba(122,167,255,.16); --e-sel-b: rgba(122,167,255,.42);
  --e-ok: #3dd68c; --e-warn: #f0b232; --e-danger: #ff6b6b;
  /* primary action: the light button (P1) */
  --e-pri: #f5f5f7; --e-pri-ink: #0b0b0d;
  /* shape and rhythm: a 4px grid; inputs 38, small controls 32 */
  --e-r-in: var(--r-1); --e-r-card: var(--r-2); --e-r-pop: var(--r-2);
  --e-h: 38px; --e-h-sm: 32px;
  /* motion */
  --e-ease: cubic-bezier(.2, .8, .2, 1); --e-fast: .14s; --e-mid: .22s;
  /* the screen grid */
  --e-top: 56px; --e-rail: 272px; --e-pw: 392px;
  height: 100svh; overflow: hidden; display: grid; grid-template-rows: var(--e-top) minmax(0, 1fr);
  background: var(--e-bg); color: var(--e-text); font: var(--fs-sec)/1.45 var(--sans); -webkit-font-smoothing: antialiased;
}
body.ed button, body.ed input, body.ed select, body.ed textarea { font-family: inherit; }
body.ed :focus-visible { outline: 2px solid var(--e-sel); outline-offset: 2px; }
body.ed svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.grow { flex: 1; }

/* ---------- the button kit ---------- */
.eb {
  height: var(--e-h-sm); padding: 0 var(--sp-3); border-radius: var(--e-r-in); border: 1px solid var(--e-line2); background: var(--e-card); color: var(--e-text);
  cursor: pointer; font-size: var(--fs-sec); font-weight: var(--fw-semi); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); white-space: nowrap;
  transition: background var(--e-fast), border-color var(--e-fast), color var(--e-fast), transform .1s;
}
.eb:hover { background: var(--e-raise); border-color: var(--e-line3); }
.eb:active { transform: translateY(1px); }
.eb:disabled { opacity: .38; cursor: default; pointer-events: none; }
.eb.primary { background: var(--e-pri); color: var(--e-pri-ink); border-color: var(--e-pri); font-weight: var(--fw-bold); }
.eb.primary:hover { background: #fff; border-color: #fff; }
.eb.ghost { background: transparent; border-color: transparent; color: var(--e-dim); }
.eb.ghost:hover { background: rgba(255,255,255,.06); color: var(--e-text); }
.eb.icon { width: var(--e-h-sm); padding: 0; font-size: var(--fs-body); }
.eb.danger { color: #ffb3b3; }
.eb.danger:hover { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.4); color: #ffd0d0; }
.eb.sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sec); border-radius: var(--r-1); }
.eb.sm.icon { width: 28px; padding: 0; }
.eb svg.i { width: 16px; height: 16px; }
.eb.on { background: var(--e-sel-a); border-color: var(--e-sel-b); color: #fff; }
.eb[hidden] { display: none; } /* added by E1: display:inline-flex above beats the [hidden] attribute (the local editor has no publish) */
/* an icon button with no box: the top bar's undo/redo/search/⋯ */
.ed-ib { width: 34px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-1); background: transparent; color: var(--e-dim); cursor: pointer; padding: 0;
  transition: background var(--e-fast), color var(--e-fast); }
.ed-ib:hover { background: rgba(255,255,255,.07); color: var(--e-text); }
.ed-ib:disabled { opacity: .35; cursor: default; background: transparent; }
.ed-ib.ghost { width: 36px; height: 36px; border-radius: var(--r-1); }

/* ---------- the screen: rail | page | panel ---------- */
.ed-main { display: grid; grid-template-columns: var(--e-rail) minmax(0, 1fr) var(--e-pw); min-height: 0; }
/* the page area: P1's dotted ground, the page drawn on it as a screen with rounded corners */
.ed-canvas { position: relative; min-width: 0; min-height: 0; padding: var(--sp-4) var(--sp-5); background: var(--e-ground);
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; display: flex; }
.ed-scroll { flex: 1; min-width: 0; overflow: auto; position: relative; border-radius: var(--r-2); background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px rgba(0,0,0,.7); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
  overflow-anchor: none; /* FR cause 2: nothing re-anchors the view while blocks move under the pointer */ }
/* the stage fills the screen even when the page is empty or short (FR cause 1: min-height:100% resolved to nothing) */
.ed-frame { position: relative; display: flex; flex-direction: column; min-height: var(--ed-vh, 100%); width: 100%; margin: 0 auto; transition: width .3s var(--e-ease); }
.ed-frame > .stage { flex: 1 0 auto; min-height: 0; }
/* phone: the screen becomes the phone (390 wide) */
.ed-canvas:has(.ed-frame.phone) .ed-scroll { flex: none; width: 390px; margin: 0 auto; border-radius: 36px;
  box-shadow: 0 0 0 7px #17171b, 0 0 0 8px rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.6); }
.ed-frame.phone { width: 100%; }
.ed-views { position: absolute; z-index: 5; }
.ed-frame.phone .ed-views { top: 14px; left: 14px; }

/* ---------- toasts ---------- */
.ed-toast {
  position: fixed; left: 50%; bottom: 22px; translate: -50% 20px; z-index: 100; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2);
  background: var(--e-pri); color: #111; font-size: var(--fs-sec); font-weight: var(--fw-semi); opacity: 0; pointer-events: none; box-shadow: 0 16px 50px rgba(0,0,0,.5);
  transition: opacity .2s, translate .3s var(--e-ease); max-width: min(560px, calc(100vw - 32px));
}
.ed-toast.on { opacity: 1; translate: -50% 0; }
/* F item 24: a toast with an action (undo a multi-block delete) takes clicks */
.ed-toast.on.has-act { pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); }
.ed-toast-act { border: 0; border-radius: var(--r-1); height: 28px; padding: 0 var(--sp-3); background: #111; color: #fff; font: var(--fw-semi) var(--fs-sec) var(--sans); cursor: pointer; }

/* ---------- widths ---------- */
@media (min-width: 1800px) { body.ed { --e-pw: 420px; --e-rail: 288px; } }
@media (max-width: 1360px) { body.ed { --e-pw: 360px; --e-rail: 240px; } }
/* below 1180 the rail keeps its icons only */
@media (max-width: 1180px) and (min-width: 861px) { body.ed { --e-rail: 64px; } }
/* phones (≤ 860): page on top, the section chips, then the panel. Wave 3 (E9) turns the panel into the sheet. */
@media (max-width: 860px) {
  body.ed { --e-top: 52px; --e-pw: 100%; --fs-in: 16px; }
  .ed-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto 58svh; }
  .ed-canvas { grid-row: 1; } .ed-rail { grid-row: 2; } .ed-panel { grid-row: 3; }
  .ed-canvas { padding: 0; background-image: none; }
  .ed-scroll { border-radius: 0; box-shadow: none; }
  .ed-canvas:has(.ed-frame.phone) .ed-scroll { width: 100%; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.ed *, body.ed *::before, body.ed *::after { transition-duration: .01ms !important; }
}