/* ==========================================================================
   Site editor
   App screens follow the "framed sheet" style (design-taste-frontend, app screens): one tinted
   L-shaped frame holds the sidebar and the 48px top bar; the work sits on a white sheet inset 8px,
   with a hairline edge, 16px corners and no shadow. The site's own palettes and faces are kept:
   its hue marks only what is live or selected, its display face only the wordmark and the sign-in
   greeting. Every value lives in the style library below; rules only name tokens.
     1. Colour   2. Effects   3. Text   4. Spacing   5. Shape   6. Motion
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-500-italic.woff2") format("woff2"); font-weight: 500 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* ---- 1. Colour (Gallery: stone frame, white sheet, forest for what is live; the other themes,
     Signal (the default, set on <html>), Noir and Porcelain, redefine these below) ---- */
  --frame: #efefea;             /* the L-frame: sidebar and top bar */
  --sheet: #ffffff;             /* the work */
  --raised: #f6f6f3;            /* wells inside the sheet: the preview stage, picture slots */
  --active: #e3e4dd;            /* the current nav item, a neutral pill */
  --border: #e3e3dd;            /* card and sheet edges */
  --rule: #eeeeea;              /* row rules */
  --control: #c9c9c1;           /* input and button edges, one step stronger */
  --text: #181715;
  --muted: #5c5850;             /* 6.9:1 on white, 6:1 on the frame */
  --accent: #24493a;            /* live, selected, focus */
  --on-accent: #ffffff;
  --primary: #181715;           /* the one filled button: near-black */
  --on-primary: #ffffff;
  --o-ink: #2f7d4f; --x-ink: #b3261e;   /* the site's hand-drawn ring and X */
  --positive: #1e7b4f; --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --negative: #c4242a; --pill-negative-bg: #ffedea; --pill-negative-ink: #831c1e;
  --warning-bg: #fffbeb; --warning-line: #fde68a; --warning-ink: #92400e;   /* drafts and edits */
  --neutral-bg: #ecece7; --neutral-ink: #3d3a35;
  --toast: #181715; --on-toast: #f4f4f1; --on-negative: #ffffff;
  --scrim: rgba(0, 0, 0, 0.28);   /* behind the menu sheet on a phone */
  --crop-scrim: rgba(0, 0, 0, 0.58); --crop-line: #ffffff;   /* the cropper: the photo outside the circle, its edge */
  --preview-bg: #ffffff;          /* the frame the site's preview loads into */
  --gate-art: #17211c; --on-gate-art: #f1f1ee; --on-gate-art-soft: rgba(242, 239, 232, 0.72);
  color-scheme: light;

  /* ---- 2. Effects: nothing rests on a shadow; only what floats gets one ---- */
  --float-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  /* ---- 3. Text: one grotesk; the theme's display face for the wordmark and greeting only ---- */
  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --w-display: 400; --track-display: -0.03em;
  --type-title: 600 1.375rem/1.25 var(--font);        /* 22: the screen's h1 */
  --type-section: 600 1rem/1.4 var(--font);           /* 16: card titles */
  --type-body: 400 0.875rem/1.45 var(--font);         /* 14: body, nav, cells */
  --type-strong: 500 0.875rem/1.45 var(--font);       /* 14: labels, buttons */
  --type-input: 400 0.9375rem/1.45 var(--font);       /* 15: what you type */
  --type-small: 400 0.75rem/1.4 var(--font);          /* 12: help, meta, headers */
  --type-chip: 500 0.75rem/1 var(--font);             /* 12: pills */
  --type-mark: var(--w-display) 1.375rem/1 var(--font-display);
  --type-greeting: var(--w-display) clamp(2.75rem, 1.4rem + 6vw, 7.5rem)/0.92 var(--font-display);
  --type-gate-title: var(--w-display) clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1 var(--font-display);

  /* ---- 4. Spacing: 4px base; tiers pad all four sides alike, gaps name a relationship ---- */
  --space-hair: 2px;           /* stacked lines that belong together: a value over its unit */
  --space-inset: 6px;          /* a control or chip tucked inside another */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --pad-l: var(--space-5);      /* the sheet's content, the sign-in panel */
  --pad-m: var(--space-5);      /* cards */
  --pad-s: var(--space-3);      /* wells, notices */
  --gap-label: var(--space-2);  /* a label and its field */
  --gap-field: var(--space-5);  /* field to field */
  --gap-card: var(--space-4);   /* card to card */
  --gap-head: var(--space-5);   /* a screen's title row to its first card */
  --gap-inline: var(--space-2); /* controls in a row */
  --gutter: var(--space-4);
  --bar-h: 48px;                /* named exception: the top bar */
  --nav-w: 232px;               /* named exception: the sidebar */
  --inset: 8px;                 /* named exception: the sheet's inset from the window */
  --control-h: 32px;            /* buttons and controls in bars and rows */
  --input-h: 40px;              /* form fields */

  /* ---- 5. Shape: tight pair, plus the sheet ---- */
  --radius-sheet: 16px; --radius-card: 8px; --radius-control: 6px; --radius-chip: 4px; --round: 999px;

  /* ---- 6. Motion: feedback only ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 140ms; --slow: 700ms;
}
:root[data-theme="signal"] {
  /* Signal, the site's default look: white, black type, electric blue for what is live */
  --frame: #f2f2f2; --sheet: #ffffff; --raised: #f7f7f7; --active: #e7eaff;
  --border: #e4e4e4; --rule: #efefef; --control: #c6c6c6;
  --text: #0d0d0d; --muted: #595959;
  --accent: #1f3bff; --on-accent: #ffffff;
  --primary: #0d0d0d; --on-primary: #ffffff;
  --o-ink: #12a150; --x-ink: #e5322b;
  --neutral-bg: #ececec; --neutral-ink: #333333;
  --toast: #0d0d0d; --on-toast: #f5f5f5;
  --gate-art: #0d0d0d; --on-gate-art: #ffffff; --on-gate-art-soft: rgba(255, 255, 255, 0.74);
  --font-display: var(--font); --w-display: 800; --track-display: -0.045em;
}
:root[data-theme="noir"] {
  --frame: #0f0e0d; --sheet: #161412; --raised: #1d1b18; --active: #2a2723;
  --border: #2a2724; --rule: #211f1c; --control: #4d4840;
  --text: #ebe9e4; --muted: #b0a99d;
  --accent: #d4b98a; --on-accent: #0f0e0d;
  --primary: #ebe9e4; --on-primary: #0f0e0d;
  --o-ink: #6cc28a; --x-ink: #e0533f;
  --positive: #7fd1a0; --pill-positive-bg: #172a1d; --pill-positive-ink: #9fdcb5;
  --negative: #f0a3a8; --pill-negative-bg: #2c1a20; --pill-negative-ink: #f2b8b0;
  --warning-bg: #2a2214; --warning-line: #5a4720; --warning-ink: #e7cf9f;
  --neutral-bg: #2a2723; --neutral-ink: #d6d1c7;
  --toast: #ebe9e4; --on-toast: #0f0e0d;
  --gate-art: #191714; --on-gate-art: #ebe9e4; --on-gate-art-soft: rgba(235, 233, 228, 0.68);
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif; --w-display: 600;
  color-scheme: dark;
}
:root[data-theme="porcelain"] {
  --frame: #f1f3f7; --sheet: #ffffff; --raised: #f7f8fa; --active: #e2e7ef;
  --border: #e2e6ed; --rule: #eef1f5; --control: #c3cad6;
  --text: #0f1b2d; --muted: #56607a;
  --accent: #2c4fa3; --primary: #0f1b2d;
  --o-ink: #1f9a5c; --x-ink: #d23b2f;
  --neutral-bg: #e9edf3; --neutral-ink: #2f3a4f;
  --toast: #0f1b2d; --on-toast: #f3f5f9;
  --gate-art: #0f1b2d; --on-gate-art: #f3f5f9; --on-gate-art-soft: rgba(243, 245, 249, 0.7);
  --font: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: var(--font); --w-display: 300; --track-display: -0.05em;
}
@media (min-width: 900px) {
  :root { --gutter: var(--space-6); --pad-l: var(--space-6); }
}

/* ---- Text styles applied: every text element takes exactly one style ----
   title        .title, .gate__title
   section      .card__title, .group__title
   body         body, .nav__item, cells, .notice
   strong       .label, .btn, .seg > *
   input        .input, .gfield__input
   small        .help, .meta, .nav__group, .log th, .count, .diff__k
   chip         .pill
   mark         .brandmark__name
   greeting     .gate__display                                                  */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--frame); color: var(--text); font: var(--type-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
code { font: 0.92em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--raised); padding: 1px 5px; border-radius: var(--radius-chip); overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--space-4); top: -60px; z-index: 50; background: var(--primary); color: var(--on-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); }
.skip:focus { top: var(--space-2); }

/* Buttons: one filled primary per screen, near-black; secondary outlined; tertiary is text */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline);
  height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius-control);
  border: 1px solid var(--control); background: var(--sheet); color: var(--text);
  font: var(--type-strong); text-decoration: none; white-space: nowrap; flex: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { border-color: var(--text); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: color-mix(in srgb, var(--primary) 82%, var(--sheet)); }
.btn--ghost { background: transparent; }
.btn--danger { color: var(--negative); }
.btn--danger:hover { border-color: var(--negative); }
.btn--wide { width: 100%; height: var(--input-h); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.link { background: none; border: 0; padding: 0; font: var(--type-strong); color: var(--text); text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }

/* Pills: a pale tint with dark text of the same hue */
.pill { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-chip); font: var(--type-chip); white-space: nowrap; }
.pill--live { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pill--draft { background: var(--warning-bg); color: var(--warning-ink); box-shadow: inset 0 0 0 1px var(--warning-line); }
.pill--neutral { background: var(--neutral-bg); color: var(--neutral-ink); }

/* The site's hand-drawn marks */
.ring, .cross { position: relative; display: inline-block; white-space: nowrap; }
.mark { position: absolute; pointer-events: none; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 900ms var(--ease) forwards; }
.mark--o { left: -14%; top: -12%; width: 128%; height: 124%; stroke: var(--o-ink); stroke-width: 2.5; }
.mark--o path { animation-delay: 500ms; }
.mark--x { left: -6%; top: 6%; width: 112%; height: 92%; stroke: var(--x-ink); stroke-width: 2.5; }
.mark--x path:nth-child(1) { animation-delay: 1100ms; animation-duration: 380ms; }
.mark--x path:nth-child(2) { animation-delay: 1400ms; animation-duration: 380ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   Sign-in, setup and error screens (a page, not an app screen: the greeting may be large)
   ========================================================================== */
.gate-body { background: var(--sheet); }
.gate { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.gate__art { background: var(--gate-art); color: var(--on-gate-art); padding: var(--pad-l); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
.gate__site { font: var(--type-body); color: var(--on-gate-art-soft); }
.gate__display { font: var(--type-greeting); letter-spacing: var(--track-display); }
.gate__l1, .gate__l2 { display: block; }
.gate__l1 { animation: rise var(--slow) var(--ease) both; }
.gate__l2 { font-style: italic; animation: rise var(--slow) 120ms var(--ease) both; }
.gate__aside { font: var(--type-body); color: var(--on-gate-art-soft); }
.gate__aside .cross { color: var(--on-gate-art); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.gate__panel { padding: var(--pad-l); display: flex; flex-direction: column; gap: var(--space-4); max-width: 480px; width: 100%; justify-self: center; }
.gate__title { font: var(--type-gate-title); letter-spacing: var(--track-display); }
.gate__sub { color: var(--muted); margin-top: calc(-1 * var(--space-2)); }
.gate__form { display: grid; gap: var(--space-4); margin-top: var(--space-2); }
.gate__note { padding: var(--pad-s); border-radius: var(--radius-control); background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.gate__note--error { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.gate__note--info { background: var(--raised); color: var(--text); }
.gate__fine { font: var(--type-small); color: var(--muted); }
.gate__theme { align-self: flex-start; margin-top: auto; padding: var(--space-2) 0; }
.gfield { display: grid; gap: var(--gap-label); }
.gfield__label { font: var(--type-strong); }
.gfield__label small { font: var(--type-small); color: var(--muted); }
.gfield__input { width: 100%; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--sheet); font: var(--type-input); }
.gfield__input:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus-ring); }
.gfield__pw { position: relative; display: block; }
.gfield__pw .gfield__input { padding-right: 72px; }
.gfield__input--code { font-variant-numeric: tabular-nums; letter-spacing: 0.2em; }
.gfield__show { position: absolute; right: var(--space-inset); top: var(--space-inset); bottom: var(--space-inset); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-chip); background: var(--raised); font: var(--type-strong); }
.gate .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); height: 44px; }
.steps { padding-left: 1.3em; display: grid; gap: var(--space-2); }
.path { display: inline-block; margin-top: var(--space-1); }
.config { width: 100%; padding: var(--pad-s); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--raised); font: 0.8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.lone { min-height: 100vh; display: grid; place-content: center; gap: var(--space-4); padding: var(--pad-l); max-width: 600px; margin: 0 auto; }
.lone__code { font: var(--type-small); color: var(--muted); }
.lone__title { font: var(--type-gate-title); letter-spacing: var(--track-display); }
.lone__text { color: var(--muted); }
@media (min-width: 900px) {
  .gate { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); }
  .gate__art { padding: var(--space-7); }
  .gate__panel { align-self: center; padding: var(--space-7); }
}

/* ==========================================================================
   App frame: sidebar and top bar on the frame, the work on the sheet
   ========================================================================== */
.frame { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bar-h) auto; min-height: 100vh; }

/* Sidebar: the product's mark, the content sections, the other screens, the account */
.nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--frame); }
.brandmark { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-4); text-decoration: none; }
.brandmark__glyph { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; font: var(--type-mark); font-style: italic; }
.brandmark__glyph .mark--o { left: -8%; top: -4%; width: 116%; height: 108%; stroke-width: 2; }
.brandmark__glyph .mark--o path { animation: none; stroke-dashoffset: 0; }
.brandmark__text { display: grid; gap: var(--space-hair); }
.brandmark__name { font: var(--type-mark); letter-spacing: var(--track-display); }
.brandmark__name em { font-style: italic; color: var(--accent); }
.brandmark__sub { font: var(--type-small); color: var(--muted); }
.nav__group { font: var(--type-small); color: var(--muted); padding: var(--space-4) var(--space-2) var(--space-1); }
.nav__list { list-style: none; display: grid; gap: var(--space-hair); }
.nav__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-control); text-decoration: none; color: var(--muted); font: var(--type-body); }
.nav__item:hover { color: var(--text); background: color-mix(in srgb, var(--active) 55%, transparent); }
.nav__item[aria-current] { background: var(--active); color: var(--text); font: var(--type-strong); }
.nav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning-ink); flex: none; }
.nav__foot { margin-top: auto; display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-2) var(--space-2); }
.nav__who { font: var(--type-small); color: var(--muted); }
.nav__who b { font-weight: 500; color: var(--text); }
.nav__acts { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.nav__acts form { display: contents; }

/* Top bar: where you are, the state of the draft and the screen's actions */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--gap-inline); height: var(--bar-h); padding: 0 var(--space-3); background: var(--frame); }
.bar__menu { display: none; }
.bar__scope { font: var(--type-strong); color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__scope:hover { color: var(--text); }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--gap-inline); }
.bar__status { display: flex; align-items: center; gap: var(--space-2); margin-right: var(--space-2); color: var(--muted); white-space: nowrap; }
.bar__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--positive); flex: none; }
.bar__status.is-draft::before { background: var(--warning-ink); }
.bar__status.is-dirty { color: var(--text); }
.bar__status.is-dirty::before { background: var(--warning-ink); }

/* The sheet */
.sheet { background: var(--sheet); border: 1px solid var(--border); min-width: 0; min-height: calc(100vh - var(--bar-h)); }

/* Phone and tablet: the sidebar folds into a sheet behind the Menu button */
@media (max-width: 899px) {
  .js .nav { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 86vw); overflow-y: auto; box-shadow: var(--float-shadow); transform: translateX(-105%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s 220ms; }
  .js body.nav-open .nav { transform: none; visibility: visible; transition: transform 220ms var(--ease); }
  .js body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
  .js .bar__menu { display: inline-flex; }
  .bar__scope { display: none; }
  .sheet { border-width: 1px 0 0; }
}
@media (max-width: 559px) {
  .bar__status, .bar [data-undo-all], .canvas__hint, .canvas__tools .seg { display: none; }
  .bar .btn { padding: 0 var(--space-2); }
}
@media (min-width: 900px) {
  .frame { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .nav { grid-row: 1 / 3; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .bar { padding: 0 var(--space-4) 0 var(--space-2); }
  .sheet { margin: 0 var(--inset) var(--inset) 0; border-radius: var(--radius-sheet); min-height: calc(100vh - var(--bar-h) - var(--inset)); }
}

.flash {
  position: fixed; z-index: 45; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-card); background: var(--toast); color: var(--on-toast); box-shadow: var(--float-shadow);
  animation: rise 240ms var(--ease) both;
}
.flash p { flex: 1; padding-top: var(--space-hair); }
.flash--error { background: var(--negative); color: var(--on-negative); }
.flash__x { background: none; border: 0; color: inherit; font-size: 1.25rem; line-height: 1; padding: var(--space-hair) var(--space-inset); opacity: 0.8; }

/* ==========================================================================
   Screens
   ========================================================================== */
.screen { padding: var(--pad-l) var(--gutter) var(--space-8); max-width: 1120px; }
.screen__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--gap-head); }
.screen__head > div { display: grid; gap: var(--space-1); max-width: 64ch; }
.title { font: var(--type-title); letter-spacing: -0.01em; }
.sub { color: var(--muted); }
.crumb { margin-bottom: var(--space-2); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); text-decoration: underline; }
.card { background: var(--sheet); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--pad-m); display: grid; gap: var(--space-3); }
.card__title { font: var(--type-section); }
.card__text { color: var(--muted); }
.empty { padding: var(--pad-m); border: 1px dashed var(--control); border-radius: var(--radius-card); color: var(--muted); }
.notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--pad-s) var(--space-4); border-radius: var(--radius-card); margin-bottom: var(--gap-card); background: var(--warning-bg); color: var(--warning-ink); border: 1px solid var(--warning-line); }
.notice b { font-weight: 600; }
.seg { display: inline-flex; padding: var(--space-hair); border-radius: var(--radius-control); background: var(--raised); border: 1px solid var(--border); }
.seg > * { border: 0; background: none; height: 26px; display: inline-flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-chip); font: var(--type-strong); color: var(--muted); text-decoration: none; }
.seg > [aria-pressed="true"] { background: var(--sheet); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

/* ---- Content: the form beside the live preview ---- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr); }
.doc { min-width: 0; padding: var(--pad-l) var(--gutter) var(--space-8); }
.doc__intro { margin-bottom: var(--space-4); }
.sec { max-width: 720px; }
.sec__head { display: grid; gap: var(--space-1); margin-bottom: var(--gap-head); }
.group { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--pad-m); margin-bottom: var(--gap-card); display: grid; gap: var(--gap-field); }
.group__title { float: left; width: 100%; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); font: var(--type-section); }
.group__title + * { clear: both; }
.group__kicker { font: var(--type-small); color: var(--muted); }
.doc__foot { display: grid; gap: var(--gap-label); margin-top: var(--space-6); max-width: 720px; }

.field { display: grid; gap: var(--gap-label); position: relative; }
.field::before { content: ""; position: absolute; left: calc(-1 * var(--pad-m) - 1px); top: 0; bottom: 0; width: 2px; border-radius: 2px; background: transparent; }
.field.is-edited::before { background: var(--warning-ink); }
.field.has-error::before { background: var(--negative); }
.field__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 20px; }
.label { font: var(--type-strong); }
.field__flags { display: flex; align-items: center; gap: var(--space-3); }
.input {
  width: 100%; min-height: var(--input-h); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--sheet);
  font: var(--type-input); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
textarea.input { resize: vertical; min-height: 84px; }
.input:hover { border-color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.has-error .input { border-color: var(--negative); }
.field__meta { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--type-small); color: var(--muted); }
.count { margin-left: auto; font-variant-numeric: tabular-nums; }
.count.is-near { color: var(--negative); font-weight: 500; }
.field__error { font: var(--type-strong); color: var(--negative); }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-3); }
/* every photo shows as the site shows it: a circle (older 4:5 photos sit 30% down, as on the site) */
.photo { position: relative; display: block; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--raised); aspect-ratio: 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.photo input[type="radio"] { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }   /* fills the circle: a corner would be clipped away */
.photo:has(input:checked) { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; }
.photo .pill { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); }
.photo--add { display: grid; place-content: center; text-align: center; gap: var(--space-1); border: 1px dashed var(--control); background: none; text-decoration: none; color: var(--muted); font: var(--type-strong); }
.photo--add:hover { border-color: var(--text); color: var(--text); }

/* ---- The visual editor: layers (in the sidebar) | the page as a canvas | the inspector ---- */
.js-only { display: none; }
.js .js-only { display: revert; }
.js .no-js-only { display: none; }
.studio-mode .frame { --nav-w: 264px; }
.studio { display: grid; grid-template-columns: minmax(0, 1fr); }
.canvas { display: flex; flex-direction: column; min-width: 0; background: var(--raised); }
.canvas__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); background: var(--sheet); }
.canvas__hint { color: var(--muted); }
.canvas__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); }
.canvas__stage { flex: 1; display: flex; justify-content: center; padding: var(--space-3); min-height: 0; overflow-x: auto; }
.canvas__frame { width: 100%; height: 100%; min-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--preview-bg); transition: width 240ms var(--ease); }
/* Tablet and phone are exact widths, so the site's own breakpoints apply; a narrow window scrolls the stage */
.canvas__stage[data-device="tablet"], .canvas__stage[data-device="phone"] { justify-content: safe center; }
.canvas__stage[data-device="tablet"] .canvas__frame { width: 820px; flex: none; }
.canvas__stage[data-device="phone"] .canvas__frame { width: 390px; flex: none; }

.insp { min-width: 0; background: var(--sheet); }
.insp .doc { padding: var(--pad-m); display: grid; gap: var(--space-4); align-content: start; }
.insp__empty { display: grid; gap: var(--space-4); }
.insp__state { color: var(--muted); }
.insp__how { display: grid; gap: var(--space-3); padding: var(--pad-m); border: 1px dashed var(--control); border-radius: var(--radius-card); }
.how { padding-left: 1.2em; display: grid; gap: var(--space-2); color: var(--muted); }
.how b { color: var(--text); font-weight: 500; }
.insp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.insp__head > div { display: grid; gap: var(--space-1); min-width: 0; }
.insp__kind { font: var(--type-small); color: var(--muted); }
.insp__close { flex: none; width: var(--control-h); height: var(--control-h); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--sheet); font-size: 1.125rem; line-height: 1; }
.insp__close:hover { border-color: var(--text); }
.insp__sibs { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.sibs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sib { height: 28px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--round); background: var(--raised); font: var(--type-body); color: var(--text); }
.sib:hover { border-color: var(--text); }
.insp .doc__foot { margin-top: 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.photo-up { display: grid; gap: var(--space-2); justify-items: start; }
.input--select { width: auto; min-height: var(--control-h); padding: 0 var(--space-6) 0 var(--space-3); }
.field__meta.is-bad { color: var(--negative); font-weight: 500; }

/* With script, the inspector shows only the selected layer's field */
.studio-mode .insp .sec__head, .studio-mode .insp .group__title { display: none; }
.studio-mode .insp .sec, .studio-mode .insp .group { display: contents; }
.studio-mode .insp .field { display: none; }
.studio-mode .insp .field.is-selected { display: grid; }
/* a setting that belongs to the field above it shows with it (the photo's colour under the photo) */
.studio-mode .insp .field.is-selected + .field[data-with] { display: grid; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
/* a choice of two or three: a segmented switch, the picked one raised */
.choice { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: var(--space-hair); padding: var(--space-hair); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--raised); }
.choice__opt { position: relative; display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius-chip); font: var(--type-strong); color: var(--muted); cursor: pointer; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.choice__opt input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__opt:hover { color: var(--text); }
.choice__opt:has(input:checked) { background: var(--sheet); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.choice__opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .choice__opt { min-height: 44px; } }
.studio-mode .insp .field::before { display: none; }

/* Layers tree */
.tree { list-style: none; display: grid; gap: 1px; min-width: 0; }
.tree li, .tree ul { min-width: 0; }
.studio-mode .nav { overflow-x: clip; }
.tree ul { list-style: none; }
.tree__toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-control); background: none; color: var(--text); font: var(--type-strong); text-align: left; }
.tree__toggle:hover { background: color-mix(in srgb, var(--active) 55%, transparent); }
.tree__caret { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast) var(--ease); }
.tree__toggle[aria-expanded="true"] .tree__caret { transform: rotate(90deg); }
.tree__toggle .nav__dot { margin-left: auto; }
.js .tree__toggle[aria-expanded="false"] + .tree__kids { display: none; }
.tree__kids { display: grid; gap: 1px; padding: 2px 0 var(--space-2) var(--space-5); }
.tree__grp { display: grid; gap: 1px; }
.tree__grplabel { padding: var(--space-2) var(--space-2) 2px; font: var(--type-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree__leaf { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-control); color: var(--muted); text-decoration: none; }
.tree__leaf:hover { color: var(--text); background: color-mix(in srgb, var(--active) 55%, transparent); }
.tree__leaf[aria-current] { background: var(--active); color: var(--text); font-weight: 500; }
.tree__leaf svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tree__name { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Below 1100px the inspector is a drawer over the canvas while a layer is selected */
@media (max-width: 1099px) {
  .studio-mode .insp { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 58vh; overflow-y: auto; border-top: 1px solid var(--border); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--float-shadow); transform: translateY(105%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s 220ms; }
  .studio-mode body.insp-open .insp { transform: none; visibility: visible; transition: transform 220ms var(--ease); }
  .canvas__frame { min-height: calc(100vh - var(--bar-h) - 64px); }
}
@media (min-width: 1100px) {
  .studio { grid-template-columns: minmax(0, 1fr) 340px; height: calc(100vh - var(--bar-h) - var(--inset) - 2px); }
  .canvas { border-radius: var(--radius-sheet) 0 0 var(--radius-sheet); overflow: hidden; }
  .canvas__bar { border-radius: var(--radius-sheet) 0 0 0; }
  .canvas__frame { min-height: 0; }
  .insp { border-left: 1px solid var(--border); overflow-y: auto; border-radius: 0 var(--radius-sheet) var(--radius-sheet) 0; }
  .studio-mode .sheet { overflow: hidden; }
}

/* ---- History, a version, photos, activity ---- */
.hist { list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.hist__row + .hist__row { border-top: 1px solid var(--rule); }
.hist__main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); text-decoration: none; }
.hist__main:hover { background: var(--raised); }
.hist__id { color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 0; }
.hist__what { display: grid; gap: var(--space-hair); min-width: 0; }
.hist__label { font: var(--type-strong); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hist__detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist__when { display: grid; gap: var(--space-hair); text-align: right; white-space: nowrap; }
.hist__when span:last-child { color: var(--muted); }
.pager { display: flex; justify-content: space-between; margin-top: var(--space-4); }

.ver { display: grid; gap: var(--gap-head); }
.ver__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.diff { list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); }
.diff__row { padding: var(--space-4); display: grid; gap: var(--space-2); }
.diff__row + .diff__row { border-top: 1px solid var(--rule); }
.diff__label { display: grid; gap: var(--space-hair); }
.diff__label span:first-child { font: var(--type-small); color: var(--muted); }
.diff__label span:last-child { font: var(--type-strong); }
.diff__pair { display: grid; gap: var(--space-2); }
.diff__old, .diff__new { padding: var(--pad-s); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.diff__old { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.diff__new { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.diff__k { display: block; font: var(--type-small); opacity: 0.85; margin-bottom: var(--space-hair); }
.stack { display: grid; gap: var(--space-2); }

.upload { max-width: 640px; gap: var(--space-4); }
.drop { position: relative; display: grid; place-items: center; min-height: 168px; padding: var(--pad-m); border: 1px dashed var(--control); border-radius: var(--radius-card); background: var(--raised); text-align: center; cursor: pointer; transition: border-color var(--fast) var(--ease); }
.drop:hover, .drop.is-over { border-color: var(--accent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop__text b { font-weight: 500; }
.focus { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.focus legend { float: left; margin-right: var(--space-2); }
.focus label, .check { display: inline-flex; gap: var(--space-2); align-items: center; min-height: 32px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.lib { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--gap-card); }
.lib__item { display: grid; gap: var(--space-2); align-content: start; }
/* the site's portrait: a circle in a ring with a gap; the ring is drawn on the live photo only */
.lib__thumb { position: relative; padding: var(--space-1); border: 3px solid transparent; border-radius: 50%; }
.lib__thumb.is-live { border-color: var(--accent); }
.lib__thumb img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%; background: var(--raised); }
.lib__x { position: absolute; top: 6%; right: 6%; }   /* on the circle's edge, where a corner would be */
.lib__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font: var(--type-small); color: var(--muted); }
.lib__actions { display: flex; gap: var(--gap-inline); }
.lib__actions form { display: contents; }
.section-title { font: var(--type-section); margin: var(--space-7) 0 var(--space-4); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
.log { width: 100%; border-collapse: collapse; }
.log th, .log td { text-align: left; padding: 0 var(--space-4); height: 44px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.log th { font: var(--type-small); color: var(--muted); height: 36px; }
.log tr:last-child td { border-bottom: 0; }
.log td:first-child, .log td:last-child { font-variant-numeric: tabular-nums; }
.log .is-alarm td:nth-child(2) { color: var(--negative); font-weight: 500; }

@media (min-width: 900px) {
  .ver { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .ver__side { position: sticky; top: calc(var(--bar-h) + var(--space-5)); }
  .diff__pair { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .input, .gfield__input { font-size: 1rem; }   /* 16px keeps phones from zooming in on focus */
  .hist__main { grid-template-columns: 32px minmax(0, 1fr); }
  .hist__when { grid-column: 2; display: flex; gap: var(--space-2); text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* ---- Photo controls: the × on a photo, the chosen upload, the round crop thumbnail ---- */
.x-btn { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; background: var(--sheet); color: var(--text); box-shadow: var(--float-shadow); transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.x-btn::before { content: ""; position: absolute; inset: -8px; }   /* a 44px target around the 28px circle */
.x-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.x-btn:hover { background: var(--negative); border-color: var(--negative); color: var(--on-negative); }
.x-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.crop-thumb { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--raised); }
.crop-thumb img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; }

.chosen { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--pad-s); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--raised); }
.chosen__info { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.chosen__info .btn { margin-top: var(--space-1); }
.chosen__name { font: var(--type-strong); overflow-wrap: anywhere; }
.chosen__x { position: absolute; top: var(--space-2); right: var(--space-2); }

/* ---- The cropper: the photo under the site's circle, with what the site will show beside it ---- */
.cropper { width: min(760px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--gutter)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sheet); background: var(--sheet); color: var(--text); box-shadow: var(--float-shadow); overflow: auto; }
.cropper::backdrop { background: color-mix(in srgb, var(--toast) 52%, transparent); }
.cropper__box { display: grid; gap: var(--space-4); padding: var(--pad-l); }
.cropper__head { display: grid; gap: var(--space-1); }
.cropper__title { font: var(--type-title); }
.cropper__sub, .cropper__help { color: var(--muted); }
.cropper__help { font: var(--type-small); }
.cropper__body { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: var(--space-5); align-items: start; }
.cropper__stage { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-card); background: var(--raised); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cropper__stage:active { cursor: grabbing; }
.cropper__stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cropper__img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.cropper__img.is-easing { transition: transform var(--fast) var(--ease), width var(--fast) var(--ease); }
.cropper__mask { position: absolute; inset: 8%; border-radius: 50%; box-shadow: 0 0 0 100vmax var(--crop-scrim); outline: 2px solid var(--crop-line); pointer-events: none; }
.cropper__loading { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--pad-m); text-align: center; color: var(--muted); }
.cropper__side { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.cropper__ring { width: 136px; padding: var(--space-1); border: 3px solid var(--accent); border-radius: 50%; }
.cropper__res { font: var(--type-small); color: var(--muted); }
.cropper__res.is-warn { padding: var(--space-2); border-radius: var(--radius-control); background: var(--warning-bg); color: var(--warning-ink); box-shadow: inset 0 0 0 1px var(--warning-line); }
.cropper__zoom { display: flex; align-items: center; gap: var(--space-3); }
.cropper__range { flex: 1; min-width: 0; accent-color: var(--accent); height: 32px; }
.icon-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--sheet); color: var(--text); }
.icon-btn:hover { border-color: var(--text); }
.icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cropper__foot { display: flex; flex-wrap: wrap; gap: var(--gap-inline); justify-content: flex-end; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.cropper__foot [data-c-reset] { margin-right: auto; }
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .cropper__foot .btn { height: 44px; }
}
@media (max-width: 640px) {
  .cropper__box { padding: var(--pad-s); gap: var(--space-3); }
  .cropper__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cropper__side { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .cropper__side .label { grid-column: 1 / -1; }
  .cropper__ring { width: 72px; border-width: 2px; padding: 2px; }
}
.photo-up .btn:disabled { cursor: not-allowed; }