/* GEM Content Studio (/admin/).

   TWO LOOKS, switched by admin.js (a class on <body>):
     body.adm-app   signed in: the Content Studio. Only tokens.css and this file
                    apply - the public site's stylesheets are switched off.
     body.adm-site  signed out (sign in, forgot password, new password, no
                    permission): the member login's split screen under the
                    public site's own header and footer. styles.css and auth.css
                    dress that; this file only adds the few pieces the member
                    login does not have (see "Signed-out screens" at the end).
   So the page-wide rules below are written for body.adm-app only, and nothing
   here restyles the public header, menu or footer.

   COLOUR: the site's purple and gold only.
     --purple #3A2A66 / --purple-deep #2E2150   ink, bars, primary buttons
     --gold #BB863F                             rules, accents and LARGE numerals (never small text)
     --gold-deep #8A6222                        small gold text on light grounds
     --lavender / --lavender-light / --cream    grounds
   The one exception is the red of a destructive action or an error message.
   Contrast is noted where a pairing is used (WCAG AA: 4.5:1 text, 3:1 large text and controls).

   TYPE: --font-head (Lora) for the brand, page titles, card titles and the big
   numerals; --font-body (Inter) for everything else.

   BUTTONS: three kinds only.
     .adm-btn--primary   solid purple        the one main action of a card or bar
     .adm-btn            outlined            secondary
     .adm-btn--quiet     text link, gold underline
   (.adm-btn--small is a size; the reds are for Delete only.) */
:root {
  --adm-gutter: 1rem;
  --adm-max: 70rem;                                   /* 1120px of content */
  --adm-radius: 14px;      /* cards (2026-10-30: was 16px) */
  --adm-line: rgba(58, 42, 102, 0.12);
  --adm-shadow: 0 1px 2px rgba(46, 33, 80, 0.06), 0 10px 30px rgba(46, 33, 80, 0.08);
  --adm-shadow-soft: 0 1px 2px rgba(46, 33, 80, 0.05), 0 4px 14px rgba(46, 33, 80, 0.05);
}
@media (min-width: 48rem) { :root { --adm-gutter: 1.5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.adm-app {
  margin: 0;
  background: var(--cream);
  color: var(--text);                          /* 13.4:1 on --cream */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
/* Hidden means hidden - for the dashboard's own parts and for the copied site
   header / footer while the other look is on. (Not a blanket [hidden] rule: the
   public header relies on one deliberately un-hidden image.) */
.adm-main [hidden], .adm-bar [hidden], .adm-bar[hidden], .adm-skip[hidden],
body > .skip-link[hidden], body > .site-header[hidden], body > .site-footer[hidden] { display: none !important; }
/* The public site's cookie banner is not used on these pages. Nothing is
   accepted on the visitor's behalf: with no choice made, non-essential cookies stay off. */
.cookie-banner { display: none !important; }
.adm-main [lang="zh-Hans"], .adm-bar [lang="zh-Hans"] { font-family: var(--font-body), "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }

.adm-skip { position: absolute; left: -9999px; top: 0; padding: 0.75rem 1rem; background: var(--white); color: var(--purple-deep); z-index: 30; }
.adm-skip:focus { left: 0; }

:where(body.adm-app) :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* EN / 中文: a slim track with a purple thumb. Each button is a full 44px target;
   the track and the thumb are drawn 32px tall inside it. */
.adm-lang { position: relative; display: inline-flex; flex: none; }
.adm-lang::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; right: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(58, 42, 102, 0.28); }
.adm-lang__btn {
  position: relative; min-width: 46px; height: 44px; padding: 0 0.7rem;
  border: solid transparent; border-width: 8px 2px; border-radius: 999px; background: transparent; background-clip: padding-box;
  font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; color: var(--purple-deep); cursor: pointer;      /* 12.7:1 or better */
}      /* no transition: the saved language is applied as the page opens and must not animate in */
.adm-lang__btn:hover { background-color: rgba(58, 42, 102, 0.1); }
.adm-lang__btn[aria-pressed="true"] { background-color: var(--purple); color: var(--white); }   /* 11.7:1 */


/* ---- The Content Studio shell (2026-10-30, STEP 5) -----------------------------
   Built by admin.js from one list (NAV). Deep-purple sidebar on the left:
     --side-bg #2A1E4D  text #ECE7F6 (12.9:1)  group labels #B9AEDA (7.5:1, 11px caps)
     active pill #4A3A80 with a gold #E2C27A icon and count (6.1:1 on the pill)
   above 75rem (1200px) 256px with names; 48.01-75rem a 72px icon rail (names as
   tooltips on hover / keyboard focus); 48rem (768px) or less a top bar and a drawer.
   The page area keeps the Studio's light ground #F7F5FB. */
:root {
  --side-w: 256px;
  --side-bg: #2A1E4D;
  --side-ink: #ECE7F6;
  --side-muted: #B9AEDA;
  --side-pill: #4A3A80;
  --side-gold: #E2C27A;
  --studio-bg: #F7F5FB;
}
@media (max-width: 75rem) { :root { --side-w: 72px; } }
@media (max-width: 48rem) { :root { --side-w: 0px; } }
body.adm-app { background: var(--studio-bg); }
body.adm-app .adm-main { margin-left: var(--side-w); min-height: 100vh; }
body.adm-app.adm-drawer-open { overflow: hidden; }

.adm-side {
  position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 256px;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--side-bg); color: var(--side-ink); padding: 1rem 0.75rem;
}
.adm-side__brand { margin: 0 0 1.25rem; }
.adm-side__brand a { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; padding: 0 0.4rem; color: var(--side-ink); text-decoration: none; border-radius: 10px; }
.adm-side__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #FBF9F4; }   /* the GEM crest on a cream tile, so it reads on the deep purple */
.adm-side__crest { display: block; width: 34px; height: 34px; object-fit: contain; }
.adm-side__brandtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.adm-side__gem { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }
.adm-side__studio { font-size: 0.8125rem; color: var(--side-muted); }
.adm-side__nav { flex: 1 1 auto; }
.adm-side__list, .adm-side__sub { list-style: none; margin: 0; padding: 0; }
.adm-side__group { margin-top: 1.1rem; }
.adm-side__glabel { display: block; padding: 0 0.75rem 0.35rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--side-muted); }   /* 11px */
.adm-side__link {
  position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 44px; margin: 1px 0; padding: 0.5rem 0.75rem;
  border: 0; border-radius: 10px; background: transparent; color: var(--side-ink); font: inherit; font-size: 0.9375rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.adm-side__link:hover { background: rgba(255, 255, 255, 0.08); }
.adm-side__link[aria-current="page"] { background: var(--side-pill); font-weight: 600; }
.adm-side__link:focus-visible { outline: 3px solid var(--side-gold); outline-offset: -3px; }
.adm-ico { width: 20px; height: 20px; flex: none; }
.adm-side__link[aria-current="page"] .adm-side__ico, .adm-side__link[aria-current="page"] .adm-side__count { color: var(--side-gold); }
.adm-side__label { flex: 1 1 auto; min-width: 0; }
.adm-side__count { margin-left: auto; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--side-muted); }
.adm-side__badge { margin-left: auto; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--side-gold); color: var(--side-bg); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }   /* 9.0:1 */
.adm-side__foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(236, 231, 246, 0.16); }
.adm-side__who { display: flex; align-items: center; gap: 0.65rem; padding: 0 0.4rem 0.75rem; }
.adm-side__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--side-pill); color: var(--side-gold); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid rgba(226, 194, 122, 0.6); }
.adm-side__whotext { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.adm-side__name { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-side__role { font-size: 0.75rem; color: var(--side-muted); }
/* EN / 中文 on the dark ground */
.adm-lang--side, .adm-lang--top { margin: 0 0.4rem 0.5rem; }

/* EN / 中文 in the Studio (2026-10-30): a segmented control, two equal segments "English" | "中文". The outer box is
   36px (radius 6px, 1px #5A4B8E); each button is a 44px target whose visible segment (radius 4px) is drawn 30px tall
   inside it. Active: #ECE7F6 fill, #2A1E4D text, 600 (12.9:1); inactive: transparent, #ECE7F6 text (12.9:1 on #2A1E4D). */
.adm-lang--seg { display: inline-grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 13rem; }
.adm-lang--seg::before { top: 4px; bottom: 4px; border-radius: 6px; background: transparent; box-shadow: none; border: 1px solid #5A4B8E; }
.adm-lang--seg .adm-lang__btn { min-width: 0; height: 44px; padding: 0 0.6rem; border-width: 7px 0 7px 3px; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: #ECE7F6; }
.adm-lang--seg .adm-lang__btn + .adm-lang__btn { border-width: 7px 3px 7px 0; }
.adm-lang--seg .adm-lang__btn:hover { background-color: rgba(236, 231, 246, 0.1); }
.adm-lang--seg .adm-lang__btn[aria-pressed="true"] { background-color: #ECE7F6; color: #2A1E4D; font-weight: 600; }
.adm-lang--seg .adm-lang__btn:focus-visible { outline: 3px solid var(--side-gold); outline-offset: -3px; }

/* phone top bar (hidden above 48rem) and the drawer's backdrop */
.adm-top { display: none; }
.adm-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(23, 16, 43, 0.55); }

/* ---- icon rail: 48.01-75rem */
@media (max-width: 75rem) and (min-width: 48.01rem) {
  .adm-side { width: 72px; padding: 1rem 0.5rem; overflow: visible; }
  .adm-side__brand a { justify-content: center; padding: 0; }
  .adm-side__brandtext, .adm-side__glabel, .adm-side__count, .adm-side__whotext, .adm-lang--side { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .adm-side__group { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(236, 231, 246, 0.12); }
  .adm-side__link { justify-content: center; padding: 0.5rem; }
  /* the name, as a tooltip beside the icon, on hover or keyboard focus */
  .adm-side__label {
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); flex: none; min-width: 0;
    padding: 0.35rem 0.65rem; border-radius: 8px; background: var(--side-bg); color: var(--side-ink); box-shadow: 0 6px 18px rgba(23, 16, 43, 0.35);
    white-space: nowrap; font-size: 0.875rem; opacity: 0; pointer-events: none; z-index: 50;
    clip-path: inset(50%);
  }
  .adm-side__link:hover .adm-side__label, .adm-side__link:focus-visible .adm-side__label { opacity: 1; clip-path: none; }
  .adm-side__badge { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .adm-side__who { justify-content: center; padding: 0 0 0.75rem; }
}

/* ---- phones: top bar + drawer, 48rem or less */
@media (max-width: 48rem) {
  .adm-top {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.5rem; min-height: 56px; padding: 0.4rem 0.75rem;
    background: var(--side-bg); color: var(--side-ink);
  }
  .adm-top__menu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--side-ink); cursor: pointer; }
  .adm-top__menu:focus-visible { outline: 3px solid var(--side-gold); outline-offset: -3px; }
  .adm-top__title { flex: 1 1 auto; min-width: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adm-lang--top { margin: 0; }
  .adm-lang--top { flex: none; width: 9.5rem; }
  .adm-side { width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; box-shadow: 0 0 40px rgba(23, 16, 43, 0.4); }
  .adm-side.is-open { transform: none; visibility: visible; transition: transform 0.2s ease; }
}
@media (prefers-reduced-motion: reduce) { .adm-side, .adm-side.is-open { transition: none; } }

/* My account */
.adm-acc { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0; }
.adm-acc dt { font-weight: 600; color: var(--purple-deep); }
.adm-acc dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Page header (2026-10-30, STEP 5) ------------------------------------------
   On the Studio's light ground: breadcrumb (13px, muted) -> h1 in Lora 28-30px
   #2A1E4D -> a one-line subtitle -> the page's actions on the right (secondary
   outline + primary). The signed-out pages keep the same classes (their own
   rules are in the auth section). */
:root { --adm-lift: 0px; }
.adm-main { display: block; }
.adm-band { position: relative; color: var(--side-bg, #2A1E4D); background: transparent; }
.adm-band__inner { position: relative; max-width: calc(var(--adm-max) + 2 * var(--adm-gutter)); margin: 0 auto; padding: 1.5rem var(--adm-gutter) 1.25rem; }
.adm-crumbs { margin: 0 0 0.5rem; font-size: 0.8125rem; }   /* 13px */
.adm-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35rem; margin: 0; padding: 0; list-style: none; }
.adm-crumbs__list li + li::before { content: "/"; margin-right: 0.35rem; color: var(--text-muted); }
.adm-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); text-decoration: underline; text-decoration-color: rgba(92, 84, 112, 0.35); text-underline-offset: 3px; }   /* 6.4:1 on #F7F5FB */
.adm-crumbs a:hover { color: var(--purple-deep); text-decoration-color: currentColor; }
.adm-band__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; }
.adm-band__text { flex: 1 1 22rem; min-width: 0; }
.adm-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.adm-band .adm-title {
  margin: 0; font-family: var(--font-head); font-weight: 600; letter-spacing: -0.005em; overflow-wrap: anywhere;
  font-size: clamp(1.75rem, 1.65rem + 0.4vw, 1.875rem); line-height: 1.2; color: #2A1E4D;      /* 28-30px; 14.9:1 on #F7F5FB */
}
.adm-title:focus { outline: none; }
.adm-band__eyebrow { margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6B4E0E; }   /* 7.6:1 on #F7F5FB */
.adm-band__sub { margin: 0.35rem 0 0; font-size: 1rem; color: var(--text-warm); }       /* 8.4:1 on #F7F5FB */

/* ---- Summary cards: Published, Drafts, To do (amber), Last change ---------------- */
.adm-sumwrap { margin: 0 0 1.25rem; }
.adm-sumwrap:empty { display: none; }
.adm-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0.85rem; }
.adm-sum__card { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; padding: 1rem 1.15rem; border: 1px solid var(--adm-line); border-radius: var(--adm-radius); background: var(--white); }
.adm-sum__label { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }   /* 6.9:1 on white */
.adm-sum__value { font-family: var(--font-head); font-weight: 600; font-size: 1.75rem; line-height: 1.15; color: #2A1E4D; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-sum__value--small { font-family: var(--font-body, inherit); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.adm-sum__card--todo { background: #FFF8EA; border-color: #EBD7A6; }
.adm-sum__card--todo .adm-sum__label, .adm-sum__card--todo .adm-sum__value { color: #6B4E0E; }   /* 7.1:1 on #FFF8EA */
.adm-sum__label--link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: -0.6rem 0 -0.5rem; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.adm-sum__label--link:hover { text-decoration-thickness: 2px; }
.adm-sum__parts { display: flex; flex-wrap: wrap; align-items: center; margin: 0.1rem 0 -0.6rem; font-size: 0.8125rem; color: var(--text-muted); }
.adm-sum__part { display: inline-flex; align-items: center; min-height: 44px; color: var(--purple); text-decoration: underline; text-decoration-color: rgba(58, 42, 102, 0.35); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }   /* 11.7:1 on white */
.adm-sum__part:hover { text-decoration-color: currentColor; }
.adm-sum__card--todo .adm-sum__part { color: #6B4E0E; text-decoration-color: rgba(107, 78, 14, 0.45); }   /* 7.1:1 on #FFF8EA */
.adm-sum__parts .adm-dot { padding: 0 0.35rem; }

/* ---- Page --------------------------------------------------------------------- */
.adm-body { position: relative; z-index: 1; max-width: calc(var(--adm-max) + 2 * var(--adm-gutter)); margin: 0 auto; padding: 0 var(--adm-gutter) 3.5rem; }
/* the signed-out pages (sign in, forgot password, new password): one narrow column */
.adm-band--narrow .adm-band__inner, .adm-body--narrow { max-width: calc(32rem + 2 * var(--adm-gutter)); }
.adm-card { background: var(--white); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); box-shadow: var(--adm-shadow-soft); padding: 1.5rem; }
/* the list page's panel: filter tabs, Add and the rows together */
.adm-sheet { padding: 1.1rem; }
.adm-sheet .adm-toolbar { margin-bottom: 1.1rem; }
.adm-sheet .adm-row, .adm-sheet .adm-empty { box-shadow: none; }
@media (min-width: 48rem) { .adm-card { padding: 1.75rem 2rem; } .adm-sheet { padding: 1.5rem; } }
.adm-h2 { margin: 2.75rem 0 1rem; font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.3; color: var(--purple-deep); }
.adm-help { margin: 0 0 0.75rem; max-width: 46rem; color: var(--text-warm); font-size: 0.9375rem; }   /* 8.9:1 on white */
.adm-help--strong { color: var(--purple-deep); font-weight: 600; }
.adm-hint { margin: 0.35rem 0 0; max-width: 46rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }   /* 6.9:1 on white */
.adm-note { margin: 0.6rem 0 0; max-width: 46rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--gold); background: var(--cream); font-size: 0.875rem; font-weight: 600; color: var(--purple-deep); }

/* ---- Messages ----------------------------------------------------------------- */
.adm-msg { margin: 0 0 1.25rem; padding: 0.8rem 1.1rem; border-radius: 12px; border-left: 4px solid; font-weight: 500; max-width: none; }
.adm-msg__line { margin: 0 0 0.5rem; max-width: none; }
.adm-msg--ok    { background: var(--white); border-color: var(--gold); color: var(--purple-deep); box-shadow: inset 0 0 0 1px rgba(187, 134, 63, 0.45); }   /* 14.6:1 */
.adm-msg--info  { background: var(--lavender); border-color: var(--purple-mid); color: var(--text); }
.adm-msg--error { background: #FCEFF3; border-color: #A3243B; color: #6E1526; }    /* 9.4:1 on the pale ground */

/* ---- Buttons: primary, secondary, text link ------------------------------------ */
.adm-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.5rem 1.3rem;
  border: 1.5px solid var(--purple); border-radius: 10px; background: var(--white); color: var(--purple);   /* 11.7:1; 10px, no pills (2026-10-30) */
  font: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.adm-btn:hover { background: var(--lavender); }
.adm-btn[disabled] { opacity: 0.55; cursor: default; }
.adm-btn--primary { background: var(--purple); color: var(--white); box-shadow: 0 1px 2px rgba(46, 33, 80, 0.25), 0 4px 12px rgba(58, 42, 102, 0.18); }
.adm-btn--primary:hover { background: var(--purple-deep); }
.adm-btn--quiet {
  padding-inline: 0.3rem; border-color: transparent; border-radius: 10px; background: transparent;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.adm-btn--quiet:hover { background: transparent; text-decoration-color: currentColor; }
.adm-arrow { margin-left: 0.4rem; }
.adm-btn--small { padding: 0.35rem 0.95rem; font-size: 0.875rem; }
.adm-btn--small.adm-btn--quiet { padding-inline: 0.3rem; }
.adm-btn--upload::before { content: "↑"; margin-right: 0.5rem; font-weight: 700; }
.adm-btn--danger { border-color: #A3243B; color: #8C1D32; }                 /* 8.1:1 on white */
.adm-btn--danger:hover { background: #FCEFF3; }
.adm-btn--danger-solid { border-color: #8C1D32; background: #8C1D32; color: var(--white); }
.adm-btn--danger-solid:hover { background: #6E1526; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/* ---- Overview: statement cards -------------------------------------------------- */
.adm-doors { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .adm-doors { grid-template-columns: 1fr 1fr; } }
.adm-door {
  display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem;
  background: var(--white); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); box-shadow: var(--adm-shadow);
}
@media (min-width: 48rem) { .adm-door { padding: 2.25rem 2.25rem 2rem; } }
/* (2026-10-30) every card has the same rows - head (title + View on site), a description reserved at two lines,
   the figures, the actions - and the figures and actions sit on the bottom, so they line up across the cards */
.adm-door__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.adm-door__title { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1.25; }
.adm-door__title a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--purple-deep); text-decoration: none; }
.adm-door__title a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.adm-door__site { flex: none; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; margin: 0 -0.25rem 0 0; padding: 0 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-color: rgba(58, 42, 102, 0.35); text-underline-offset: 3px; white-space: nowrap; }   /* 11.7:1 */
.adm-door__site:hover { text-decoration-color: currentColor; }
.adm-door__siteico { width: 14px; height: 14px; }
.adm-door__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: calc(2 * 1.5em); margin: 0.25rem 0 0; color: var(--text-warm); font-size: 0.9375rem; line-height: 1.5; }
/* the figures: a large gold numeral, "published" under it, drafts beside it in smaller text */
.adm-door__counts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 2rem; min-height: 5.6rem; margin: auto 0 0; padding-top: 1.5rem; font-size: 0.9375rem; color: var(--text-warm); }
.adm-count { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.adm-count strong { font-variant-numeric: tabular-nums; }
.adm-count--pub { flex-direction: column; align-items: flex-start; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }   /* 6.9:1 */
.adm-count--pub strong { font-family: var(--font-head); font-weight: 600; font-size: clamp(3rem, 2.6rem + 1.6vw, 3.75rem); line-height: 0.95; letter-spacing: -0.01em; color: var(--gold); }   /* 48-60px numeral: 3.2:1 on white, AA for large text */
.adm-count--draft { padding: 0 0 0.05rem 2rem; border-left: 1px solid var(--adm-line); color: var(--text-muted); }
.adm-count--draft strong { font-size: 1.0625rem; font-weight: 600; color: var(--purple-deep); }
.adm-door__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--adm-line); }
.adm-btn--outline { background: transparent; }

/* ---- Overview: recently updated -------------------------------------------------- */
.adm-recent { background: var(--white); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); box-shadow: var(--adm-shadow-soft); overflow: hidden; }
.adm-recent__list { list-style: none; margin: 0; padding: 0; }
.adm-recent__list > li + li { border-top: 1px solid var(--adm-line); }
.adm-recent__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem 1.25rem; align-items: center; min-height: 64px; padding: 0.85rem 1.5rem; color: inherit; text-decoration: none; }
@media (min-width: 40rem) { .adm-recent__row { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 2rem; } .adm-recent__time { grid-row: 1 / span 2; grid-column: 2; } }
.adm-recent__row:hover { background: var(--lavender-light); }
.adm-recent__row:hover .adm-recent__name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.adm-recent__row:focus-visible { outline-offset: -3px; border-radius: 10px; }
.adm-recent__name { font-weight: 600; color: var(--purple-deep); }
.adm-recent__meta, .adm-recent__time { font-size: 0.875rem; color: var(--text-muted); }                 /* 6.9:1 on white, 6.5:1 on the hover ground */
.adm-recent__time { white-space: nowrap; }
.adm-recent__note { margin: 0; padding: 1.5rem; color: var(--text-warm); }

/* ---- Overview: coming next (planned, not clickable) ------------------------------- */

/* ---- Forms -------------------------------------------------------------------- */
.adm-form { max-width: 32rem; }
.adm-form--wide { max-width: none; display: grid; gap: 1.25rem; }
.adm-section__title {
  margin: 0 0 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(187, 134, 63, 0.6);
  font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; color: var(--purple-deep);
}
.adm-field, .adm-pair, .adm-photo, .adm-switch { margin: 0 0 1.25rem; }
.adm-section > :last-child { margin-bottom: 0; }
.adm-pair { border: 0; padding: 0; min-width: 0; }
.adm-pair .adm-hint { margin: -0.15rem 0 0.6rem; }
.adm-pair__cols { display: grid; gap: 0.75rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .adm-pair__cols { grid-template-columns: 1fr 1fr; } }      /* EN and 中文 side by side */
.adm-label { display: block; margin: 0 0 0.4rem; padding: 0; font-weight: 600; color: var(--purple-deep); }
.adm-label--gap { margin-top: 1.1rem; }
.adm-sublabel { display: block; margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }   /* 6.9:1 on white */
.adm-req { font-weight: 500; font-size: 0.875rem; color: var(--text-muted); }
.adm-input {
  display: block; width: 100%; min-height: 44px; padding: 0.55rem 0.8rem;
  border: 1.5px solid #8A84A0; border-radius: 10px; background: var(--white); color: var(--text);    /* border 3.6:1 on white */
  font: inherit;
}
.adm-input:focus-visible { outline-offset: 0; border-color: var(--purple); }
.adm-input--area { min-height: 8rem; resize: vertical; line-height: 1.5; }
.adm-input--story { min-height: 22rem; }
.adm-input--short { max-width: 16rem; }
/* the account line on reset.html: a read-only field that reads as plain text */
.adm-input--plain { border-color: transparent; background: transparent; padding-left: 0; font-weight: 600; color: var(--purple-deep); }
.adm-input--plain:focus-visible { border-color: transparent; }
.adm-rules__lead { margin: 0.6rem 0 0.25rem; }
.adm-rules { list-style: none; margin: 0 0 0.25rem; padding: 0; font-size: 0.9375rem; color: var(--text-warm); }
.adm-rule { display: flex; gap: 0.5rem; padding: 0.15rem 0; }
.adm-rule__mark { flex: none; width: 1rem; text-align: center; font-weight: 700; color: var(--text-muted); }
.adm-rule.is-met { color: var(--purple-deep); font-weight: 600; }
.adm-rule.is-met .adm-rule__mark { color: var(--gold-deep); }                /* 5.4:1 on white */
.adm-check { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin-top: 0.75rem; }
.adm-check__box { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--purple); }
.adm-check__label { padding: 0.6rem 0; font-weight: 500; color: var(--purple-deep); cursor: pointer; }

.adm-switch { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; }
.adm-switch__box {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0;
  border-radius: 999px; background: #6F6A85; cursor: pointer; transition: background-color 0.15s ease;      /* off track 5.0:1 on white */
}
.adm-switch__box::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); transition: transform 0.15s ease; }
.adm-switch__box:checked { background: var(--purple); }
.adm-switch__box:checked::after { transform: translateX(22px); }
.adm-switch__label { font-weight: 600; color: var(--purple-deep); cursor: pointer; padding: 0.5rem 0; }
.adm-statusline { margin: 0; font-weight: 600; color: var(--purple-deep); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* ---- Image: drop zone with preview --------------------------------------------- */
.adm-drop {
  display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; padding: 1rem;
  border: 2px dashed #8A84A0; border-radius: var(--radius); background: var(--lavender-light);
}
@media (min-width: 44rem) { .adm-drop { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.adm-drop.is-over { border-color: var(--purple); border-style: solid; background: var(--lavender); }
.adm-photo__preview {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 9rem;
  background: var(--white); border: 1px solid var(--adm-line); border-radius: 10px; overflow: hidden;
}
.adm-photo__img { display: block; max-width: 100%; height: auto; max-height: 18rem; }
.adm-photo__none { color: var(--text-muted); font-size: 0.9375rem; }
.adm-drop__side { min-width: 0; }
.adm-drop__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
/* the real file field is kept for screen readers and the label, out of sight: the button above opens it */
.adm-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Delete --------------------------------------------------------------------- */
.adm-danger { border-color: rgba(163, 36, 59, 0.35); }
.adm-danger .adm-section__title { border-bottom-color: rgba(163, 36, 59, 0.5); color: #6E1526; }
.adm-danger__slot { margin-top: 0.9rem; }
.adm-danger__ask { margin: 0 0 0.6rem; font-weight: 600; color: #6E1526; }
.adm-danger__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- Save bar: stays at the bottom of the window while the form scrolls ---------- */
.adm-savebar {
  position: sticky; bottom: 0; z-index: 10; margin: 1.25rem calc(-1 * var(--adm-gutter)) 0; padding: 0.7rem var(--adm-gutter);
  background: var(--white); border-top: 2px solid var(--gold); box-shadow: 0 -8px 24px rgba(46, 33, 80, 0.12);
}
.adm-savebar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.adm-savebar__dirty { font-size: 0.875rem; font-weight: 600; color: var(--gold-deep); }       /* 5.4:1 on white */
.adm-savebar__dirty::before { content: "●"; margin-right: 0.35rem; }
.adm-savebar__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-left: auto; }

/* ---- Lists ---------------------------------------------------------------------- */
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 1.25rem; }
.adm-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 12px; background: var(--lavender); }
.adm-tab {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.95rem; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--purple-deep); cursor: pointer;      /* 12.7:1 on --lavender */
}
.adm-tab:hover { background: rgba(58, 42, 102, 0.1); }
.adm-tab[aria-pressed="true"] { background: var(--purple); color: var(--white); }
.adm-tab__n { min-width: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: rgba(58, 42, 102, 0.12); font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: center; }
.adm-tab[aria-pressed="true"] .adm-tab__n { background: rgba(255, 255, 255, 0.2); }
.adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.adm-row {
  display: grid; gap: 0.6rem 1rem; align-items: center;
  grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img body" "pill pill" "actions actions";
  padding: 1rem; background: var(--white); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); box-shadow: var(--adm-shadow-soft);
}
@media (min-width: 52rem) {
  .adm-row { grid-template-columns: 64px minmax(0, 1fr) auto auto; grid-template-areas: "img body pill actions"; padding: 1rem 1.5rem 1rem 1rem; }
}
.adm-row__img { grid-area: img; display: block; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--lavender); }
.adm-row__img--none { border: 1px dashed #8A84A0; background: var(--lavender-light); }
.adm-row__body { grid-area: body; min-width: 0; }
.adm-row__name { margin: 0; font-weight: 600; color: var(--purple-deep); }
.adm-row__zh { display: block; font-weight: 500; color: var(--text-warm); }
.adm-row__meta { margin: 0.15rem 0 0; font-size: 0.875rem; color: var(--text-muted); }
.adm-row > .adm-pill { grid-area: pill; justify-self: start; }
.adm-row__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.adm-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }
.adm-pill--on  { background: var(--purple); color: var(--white); }                      /* 11.7:1 */
.adm-pill--off { background: var(--lavender); color: var(--purple-deep); }              /* 12.7:1 */
.adm-pill--pin { background: var(--cream); color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold); padding: 0.05rem 0.5rem; }   /* 5.2:1 */
/* ---- Comments (the moderation queue, 2026-10-11) ------------------------------------
   One card per comment; the fields stack on a phone and sit in two columns from 52rem.
   Pairs: name --purple-deep on white 13.9:1; meta --text-muted 7.0:1; text --text 13.9:1;
   the Hidden / Deleted chips --purple-deep on --lavender 12.7:1; the error line as .adm-msg--error. */
.adm-crow { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 0.5rem; align-items: start; }
.adm-crow > * { grid-area: auto; }
.adm-crow--reply { border-left: 4px solid var(--lavender); }
.adm-crow--hidden { background: var(--lavender-light); }
.adm-crow--deleted { background: var(--lavender-light); border-style: dashed; }
.adm-crow--deleted .adm-crow__text { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(58, 42, 102, 0.35); }
.adm-crow.is-saving { opacity: 0.7; }
.adm-crow__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0; }
.adm-crow__name { font-weight: 700; color: var(--purple-deep); }
.adm-crow__role { padding: 0.1rem 0.6rem; }
.adm-crow__time, .adm-crow__label { font-size: 0.875rem; color: var(--text-muted); }
.adm-crow__video, .adm-crow__replyto { margin: 0; font-size: 0.9375rem; color: var(--text); overflow-wrap: anywhere; }
.adm-crow__video a { color: var(--purple); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.adm-crow__video a:hover { color: var(--purple-bright); }
.adm-crow__text { margin: 0.25rem 0; font-size: 1rem; line-height: 1.55; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.adm-crow__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.adm-crow__reports { font-size: 0.875rem; }
.adm-crow__repsum { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--guide-help); }      /* #9B1C1C on white 8.2:1 */
.adm-crow__reasons { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--text); }
.adm-crow__reasons li { margin: 0 0 0.3rem; }
.adm-crow__reason { overflow-wrap: anywhere; }
.adm-crow__reason--none { color: var(--text-muted); }
.adm-crow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.adm-crow__actions .adm-btn, .adm-crow__note .adm-btn { min-height: 44px; }
.adm-crow__note:empty { display: none; }
.adm-crow__ask { padding: 0.85rem 1rem; }
.adm-crow__askline { margin: 0 0 0.6rem; font-weight: 600; color: var(--purple-deep); }
.adm-crow__err { margin: 0; }
.adm-crow__err:focus { outline: none; }
.adm-csearchwrap { flex: 1 1 14rem; max-width: 24rem; }
.adm-csearch { width: 100%; min-height: 44px; }
@media (min-width: 52rem) {
  .adm-crow { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-crow__who, .adm-crow__video, .adm-crow__replyto, .adm-crow__text, .adm-crow__reports, .adm-crow__note { grid-column: 1 / -1; }
  .adm-crow__chips { grid-column: 1; }
  .adm-crow__actions { grid-column: 2; justify-self: end; }
}
.adm-empty { padding: 2.25rem 1rem; text-align: center; color: var(--text-warm); background: var(--white); border: 1px dashed #8A84A0; border-radius: var(--adm-radius); }

/* ---- Signed-out screens (body.adm-site) -------------------------------------------
   The layout, panel, card, fields, tick box and buttons are the member login's
   own classes (auth.css / styles.css). Only these additions are the dashboard's. */
body.adm-site .adm-main { display: block; }
.adm-authcard { position: relative; }
.adm-authcard .auth-split__title { overflow-wrap: anywhere; }
.adm-authcard .auth-split__title:focus { outline: none; }
/* EN / 中文: its own small row above the heading, aligned right, tucked into the
   card's top padding so the heading has the full width to itself */
.adm-authlang { display: flex; justify-content: flex-end; margin: -1.75rem -0.6rem -0.25rem 0; }
@media (max-width: 30rem) { .adm-authlang { margin: -0.9rem -0.35rem 0.15rem 0; } }
.adm-lang--card .adm-lang__btn { margin: 0; box-shadow: none; text-transform: none; }
/* the same segmented control on the white card: inactive text #2A1E4D (15.2:1 on white), active #ECE7F6 / #2A1E4D (12.9:1) */
.adm-lang--seg.adm-lang--card { width: 11rem; }
.adm-lang--seg.adm-lang--card .adm-lang__btn { color: #2A1E4D; }
.adm-lang--seg.adm-lang--card .adm-lang__btn:hover { background-color: rgba(42, 30, 77, 0.08); }
.adm-lang--seg.adm-lang--card .adm-lang__btn[aria-pressed="true"] { background-color: #ECE7F6; color: #2A1E4D; }
.adm-lang--seg.adm-lang--card .adm-lang__btn:focus-visible { outline-color: var(--purple); }
.adm-authcard .adm-status { margin: 0; }
.adm-authcard .adm-msg { margin: 0 0 1.25rem; font-size: 0.9375rem; }
.adm-authform { margin: 0; }
/* the action row: main button on the left, the quiet link on its right; they
   stack (button first) only where the card is too narrow for both */
.adm-authrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.5rem; margin: 1.5rem 0 0; }
.adm-authrow .btn { flex: 0 0 auto; }
.adm-authrow .auth-toggle { flex: 0 1 auto; min-width: 44px; min-height: 44px; text-align: left; }
.adm-authform a.auth-toggle { text-decoration: underline; }
/* the password box with its show / hide eye */
.adm-pass { position: relative; }
.adm-authcard .adm-pass input { padding-right: 3.1rem; }
.adm-eye {
  position: absolute; top: 50%; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--purple); cursor: pointer;      /* 11.7:1 on white */
}
.adm-eye svg { width: 22px; height: 22px; }
.adm-eye.is-on { color: var(--gold-deep); }                                   /* showing: 5.4:1 on white */
.adm-eye:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* the account line on reset.html: a read-only field that reads as plain text */
.adm-authcard .adm-field--plain input { border-color: transparent; background: transparent; padding-left: 0; font-weight: 600; color: var(--purple-deep); }
.adm-authcard .adm-rules { margin: 0 0 1.25rem; }
.adm-authcard .adm-rules__lead { margin: -0.6rem 0 0.35rem; }
.adm-authcard .adm-help { max-width: none; font-size: 1rem; }
/* small print at the foot of the card */
.adm-small { margin: 1.75rem 0 0; padding-top: 1rem; max-width: none; border-top: 1px solid rgba(58, 42, 102, 0.12); font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }      /* 6.9:1 on white */
.adm-small a { display: inline-block; padding-block: 0.85rem; margin-block: -0.85rem; font-weight: 600; color: var(--purple); overflow-wrap: anywhere; }

/* ---- Videos (CMS Phase 1 STEP 3, 2026-10-29) ----------------------------------------
   The list is a real table from 52rem (nine columns, the title column takes the width);
   below that each row becomes a stacked card with its column name in front of every value
   (the header row is kept for screen readers only). Pairs: th --text-muted 6.9:1; id link
   --purple 11.7:1; title --purple-deep 13.9:1; the fixed id / library text --purple-deep. */
body.adm-app .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.adm-subnav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1rem; }
.adm-subnav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 10px; background: var(--white); border: 1px solid var(--adm-line); font-weight: 600; color: var(--purple); text-decoration: none; }      /* 11.7:1 */
.adm-subnav__link:hover { background: var(--lavender); }
.adm-subnav__link[aria-current="page"] { background: var(--purple); border-color: var(--purple); color: var(--white); }      /* 11.7:1 */
.adm-vtoolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0 0 1rem; }      /* minmax(0, …): a long category name in the select must not widen the page */
.adm-vtoolbar .adm-toolbar { margin: 0; }
.adm-vfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; }
.adm-vfilters > * { min-width: 0; }
.adm-vcatsel { width: auto; max-width: 100%; }
.adm-vcount { margin: 0; font-size: 0.875rem; color: var(--text-muted); }      /* 6.9:1 */
.adm-vtable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.adm-vtable th, .adm-vtable td { padding: 0.65rem 0.55rem; text-align: left; vertical-align: top; border-top: 1px solid var(--adm-line); }
.adm-vth { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-top: 0 !important; border-bottom: 2px solid rgba(187, 134, 63, 0.6); white-space: nowrap; }
.adm-vrow { cursor: pointer; }
.adm-vrow:hover, .adm-vrow:focus-within { background: var(--lavender-light); }
.adm-vtable .adm-vrow > th, .adm-vtable .adm-vrow > td { vertical-align: middle; }
/* (2026-10-30, STEP 5) one row: a 16:9 cover with its length, the title (two lines at most) over
   "id · category", then chips (who can watch, Chinese title, status), "date · who", View on site and Edit */
.adm-vrow__main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.adm-vthumb { position: relative; flex: none; display: block; width: 112px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--lavender); }
.adm-vthumb__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adm-vthumb__none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--purple-mid); }
.adm-vthumb__dur { position: absolute; right: 4px; bottom: 4px; padding: 0 0.3rem; border-radius: 4px; background: rgba(23, 16, 43, 0.82); color: #FFFFFF; font-size: 0.75rem; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums; }   /* 15:1 on the dark tag */
.adm-vrow__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.adm-vrow__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; line-height: 1.35; color: #2A1E4D; }   /* 14.9:1 */
.adm-vrow__meta { font-size: 0.8125rem; font-weight: 400; color: var(--text-muted); }   /* 6.9:1 on white, 6.0:1 on the hover tint */
.adm-vrow__id { font-variant-numeric: tabular-nums; }
.adm-vrow__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.adm-vrow__link { min-height: 44px; }
.adm-iconlink { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--purple); }   /* 11.7:1 */
.adm-iconlink:hover { background: var(--lavender); }
.adm-iconlink:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; }
/* small chips in the rows */
.adm-chip-s { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.adm-chip-s--pub { background: #E7F4EC; color: #1D5B36; }        /* 7.3:1 */
.adm-chip-s--draft, .adm-chip-s--todo { background: #FFF8EA; color: #6B4E0E; border-color: #EBD7A6; }   /* 7.1:1 */
.adm-chip-s--ok { background: #F3F0FA; color: var(--purple-deep); }   /* 12.6:1 */
.adm-chip-s--members { background: var(--white); color: var(--purple); border-color: rgba(58, 42, 102, 0.3); }   /* 11.7:1 */
.adm-chip-s--open { background: var(--white); color: #1D5B36; border-color: rgba(29, 91, 54, 0.35); }   /* 8.2:1 */
.adm-vcell__label { display: none; }
.adm-vcell--dur, .adm-vcell--sort { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-vcell--upd { white-space: nowrap; color: var(--text-muted); font-size: 0.875rem; }
.adm-vth--actions { text-align: right !important; }
.adm-vth--actions > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.adm-vempty { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
/* the library tabs as a segmented control; the status filters as chips with counts */
.adm-seg { border-radius: 12px; }
.adm-seg .adm-tab { border-radius: 10px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.adm-chip { border: 1px solid rgba(58, 42, 102, 0.22); border-radius: 999px; background: var(--white); }   /* chips stay pill-shaped */
.adm-chip--todo:not([aria-pressed="true"]) { background: #FFF8EA; border-color: #EBD7A6; color: #6B4E0E; }   /* 7.1:1 */
.adm-vadd__ico { width: 18px; height: 18px; margin-right: 0.35rem; }
@media (max-width: 75rem) {
  .adm-vthumb { width: 96px; }
  .adm-vcell--upd { white-space: normal; }
}
/* phones and narrow tablets: each row becomes a card; on phones Add floats at the bottom right */
/* the categories table keeps its STEP 3 phone layout (labelled cells, one under another) */
@media (max-width: 51.99rem) {
  .adm-vtable--cats, .adm-vtable--cats tbody, .adm-vtable--cats tr, .adm-vtable--cats td, .adm-vtable--cats th { display: block; }
  .adm-vtable--cats thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .adm-vtable--cats tr { padding: 0.5rem 0.25rem 0.75rem; border-top: 1px solid var(--adm-line); }
  .adm-vtable--cats th, .adm-vtable--cats td { padding: 0.15rem 0; border: 0; }
  .adm-vtable--cats .adm-vcell { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
  .adm-vtable--cats .adm-vcell__label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
}
@media (max-width: 61.99rem) {
  .adm-vtable:not(.adm-vtable--cats), .adm-vtable:not(.adm-vtable--cats) tbody, .adm-vtable:not(.adm-vtable--cats) tr, .adm-vtable:not(.adm-vtable--cats) td, .adm-vtable:not(.adm-vtable--cats) th { display: block; }
  .adm-vtable:not(.adm-vtable--cats) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .adm-vrow { margin: 0 0 0.75rem; padding: 0.85rem; border: 1px solid var(--adm-line); border-radius: var(--adm-radius); background: var(--white); }
  .adm-vtable .adm-vrow > th, .adm-vtable .adm-vrow > td { padding: 0; border: 0; }
  .adm-vtable .adm-vrow > .adm-vcell--title { margin-bottom: 0.6rem; }
  .adm-vrow { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
  .adm-vrow > * { min-width: 0; }
  .adm-vrow > .adm-vcell--title, .adm-vrow > .adm-vcell--upd { flex: 1 1 100%; }
  .adm-vrow__title { overflow-wrap: anywhere; }
  .adm-vrow > .adm-vcell--actions { flex: 1 1 100%; display: flex !important; justify-content: flex-end; margin-top: 0.25rem; }
  .adm-vcell--upd .adm-vcell__label { display: inline; margin-right: 0.35rem; font-weight: 600; }
  .adm-vcell--upd .adm-vcell__label::after { content: ":"; }
  .adm-vcell--upd .adm-vcell__val { display: inline; }
}
@media (max-width: 48rem) {
  .adm-vthumb { width: 104px; }
  body.adm-app[data-admin-page="videos"] .adm-body { padding-bottom: 6rem; }
  .adm-band__actions .adm-vadd { position: fixed; right: 16px; bottom: 16px; z-index: 20; min-height: 52px; padding: 0 1.25rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(23, 16, 43, 0.3); }
  body.adm-drawer-open .adm-band__actions .adm-vadd { visibility: hidden; }
}
/* the form */
.adm-grid2 { display: grid; gap: 0 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .adm-grid2 { grid-template-columns: 1fr 1fr; } }
.adm-vfixed { display: flex; align-items: center; min-height: 44px; margin: 0; font-weight: 600; color: var(--purple-deep); }
.adm-vfixed--id { font-variant-numeric: tabular-nums; }
.adm-photo__preview--wide { aspect-ratio: 16 / 9; min-height: 0; }
.adm-photo__preview--wide .adm-photo__img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
/* (2026-10-30, STEP 5) the edit form in two columns: Titles, Details, Who can watch on the left;
   Live preview, Cover, Publishing in a 440px column on the right (one column below 62rem) */
.adm-vcols { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .adm-vcols { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } }
.adm-vcol { display: grid; gap: 1.25rem; min-width: 0; }
.adm-vcard { min-width: 0; }
.adm-vcard .adm-field:last-child, .adm-vcard .adm-switch:last-child { margin-bottom: 0; }
.adm-vgrid { display: grid; gap: 0 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .adm-vgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .adm-vgrid__wide { grid-column: 1 / -1; } }
.adm-vgrid .adm-input--short { width: 100%; max-width: none; }
.adm-vlocked { display: inline-flex; align-items: center; gap: 0.45rem; }
.adm-vlocked__ico { width: 18px; height: 18px; color: var(--purple-mid); }
.adm-label--tag { display: flex; align-items: center; gap: 0.5rem; }
/* Who can watch: Members only | Everyone */
.adm-vseg { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; margin: 0 0 1.25rem; border-radius: 12px; background: var(--lavender); }
.adm-vseg__opt { position: relative; display: inline-flex; }
.adm-vseg__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.adm-vseg__label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 9px; font-weight: 600; color: var(--purple-deep); cursor: pointer; }   /* 12.7:1 on lavender */
.adm-vseg__input:checked + .adm-vseg__label { background: var(--purple); color: var(--white); }   /* 11.7:1 */
.adm-vseg__input:focus-visible + .adm-vseg__label { outline: 3px solid var(--purple); outline-offset: 2px; }
.adm-vprev { max-width: 14rem; }
/* LIVE PREVIEW */
.adm-vcard--live .adm-section__title { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.adm-vlive { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #2A1E4D; }
.adm-vlive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.adm-vlive__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; height: 100%; padding: 1rem; text-align: center; color: #ECE7F6; font-size: 0.9375rem; }   /* 12.9:1 */
.adm-vlive__ico { width: 32px; height: 32px; color: #B9AEDA; }
.adm-vcard--live .adm-hint { margin-top: 0.6rem; }
/* Cover: one column inside the side card */
.adm-drop--stack, .adm-vcol--side .adm-drop { grid-template-columns: minmax(0, 1fr); }
.adm-drop--stack .adm-photo__preview { aspect-ratio: 16 / 9; min-height: 0; }
.adm-drop--stack .adm-photo__img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.adm-drop--stack .adm-btn--upload::before { content: none; }
/* Publishing */
.adm-vfacts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0 0 1rem; font-size: 0.9375rem; }
.adm-vfacts dt { font-weight: 600; color: var(--text-muted); }   /* 6.9:1 */
.adm-vfacts dd { margin: 0; color: #2A1E4D; overflow-wrap: anywhere; }
.adm-vmove { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin: 0 0 1rem; padding: 0.75rem 0; border-top: 1px solid var(--adm-line); border-bottom: 1px solid var(--adm-line); }
.adm-vpos { margin: 0; font-weight: 600; color: #2A1E4D; }
.adm-vmove__btns { display: flex; gap: 0.5rem; }
.adm-vmove__ico { width: 16px; height: 16px; margin-right: 0.35rem; }
.adm-vunpub { margin: 0 0 1rem; }
.adm-vunpub .adm-hint { margin-top: 0.4rem; }
.adm-btn--amber { border-color: #B07A16; color: #6B4E0E; }        /* 7.9:1 on white */
.adm-btn--amber:hover { background: #FFF8EA; }
.adm-vnever { margin: 0; font-size: 0.875rem; color: var(--text-muted); }
/* the header: Videos / id, Edit video + its status, View on site + Save changes */
.adm-band__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.adm-crumbs__here { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.adm-vview__ico { width: 18px; height: 18px; margin-right: 0.4rem; }
/* one Save at any width: in the header from 768px up, in the bar at the bottom on phones */
@media (min-width: 48.01rem) { .adm-savebar .adm-vsave--bar { display: none; } }
@media (max-width: 48rem) { .adm-band__actions .adm-vsave--head { display: none; } }
.adm-vdetails { padding: 0; }
.adm-vdetails__summary { margin: 0; padding: 1.25rem 1.5rem; border-bottom: 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.adm-vdetails__summary::-webkit-details-marker { display: none; }
.adm-vdetails__summary::before { content: "▸"; flex: none; font-size: 0.9rem; color: var(--gold-deep); }
.adm-vdetails[open] .adm-vdetails__summary::before { content: "▾"; }
.adm-vdetails[open] .adm-vdetails__summary { border-bottom: 1px solid rgba(187, 134, 63, 0.6); }
.adm-vdetails > .adm-pair { margin: 1.25rem 1.5rem 1.5rem; }
@media (min-width: 48rem) { .adm-vdetails__summary { padding: 1.5rem 2rem; } .adm-vdetails > .adm-pair { margin: 1.5rem 2rem 1.75rem; } }
/* categories: inputs in the table, actions grouped */
.adm-ctable { margin: 0 0 0.25rem; }
.adm-vtable--cats .adm-vcell--en, .adm-vtable--cats .adm-vcell--zh { min-width: 11rem; }
.adm-cinput { min-width: 9rem; }
.adm-cslug { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; font-weight: 600; color: var(--purple-deep); overflow-wrap: anywhere; }
.adm-cactions { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.adm-vcell--actions { white-space: nowrap; }
@media (max-width: 51.99rem) { .adm-vcell--slug { display: block; } .adm-vcell--actions { white-space: normal; } .adm-vtable--cats .adm-vcell { grid-template-columns: 7rem minmax(0, 1fr); } }
/* three cards on the Overview */
@media (min-width: 48rem) and (max-width: 61.99rem) { .adm-doors--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 62rem) { .adm-doors--3 { grid-template-columns: repeat(3, 1fr); } }
/* three across: the cards share four row tracks (subgrid), so the head, description, figures and actions of
   all three sit on the same lines even when one card's buttons wrap */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 62rem) {
    .adm-doors--3 .adm-door { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .adm-doors--3 .adm-door__counts { margin-top: 0; align-self: end; }
    .adm-doors--3 .adm-door__actions { align-self: start; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .adm-btn, .adm-switch__box, .adm-switch__box::after, .adm-avatar, .adm-nav a::after { transition: none; }
}

/* ---- One-click upload (2026-10-31, CMS Phase 1 module 2) ------------------------------------------------------
   The Upload video button and panel are for computers; on phones a short note takes their place (the rest of
   Videos works as before). The step tracker: done steps ticked, the current step with a turning ring (a still
   ring under reduced motion), one plain line under it. */
.adm-uphone { display: none; }
@media (max-width: 48rem) {
  .adm-uphone { display: block; }
  .adm-band__actions .adm-vupload, .adm-uform { display: none; }
  .adm-band__actions .adm-vadd { background: var(--purple); color: var(--white); }   /* the floating Add stays a filled button */
}
.adm-unotice { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }
.adm-unotice__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0; padding: 0.6rem 0.9rem 0.6rem 1rem; border: 1px solid #EBD7A6; border-radius: var(--adm-radius); background: #FFF8EA; color: #6B4E0E; font-weight: 600; }   /* 7.1:1 */
.adm-unotice__row--bad { border-color: rgba(163, 36, 59, 0.35); background: #FCEFF3; color: #6E1526; }   /* 9.4:1 */
.adm-file-visible { display: block; max-width: 100%; min-height: 44px; padding: 0.5rem 0; font: inherit; }
.adm-ufacts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0 0 0.75rem; font-size: 0.9375rem; }
.adm-ufacts dt { color: var(--text-muted); font-weight: 600; }
.adm-ufacts dd { margin: 0; overflow-wrap: anywhere; color: #2A1E4D; }
.adm-ucheck { margin: 0.5rem 0 0; font-weight: 600; color: var(--text-muted); }
.adm-ucheck--ok { color: #1D5B36; }    /* 7.3:1 on white */
.adm-ucheck--bad { color: #8C1D32; }   /* 8.1:1 on white */
.adm-ucheckbox { width: 20px; height: 20px; vertical-align: middle; }
.adm-udup { margin: 0 0 1rem; padding: 1rem 1.15rem; border: 1px solid #EBD7A6; border-radius: var(--adm-radius); background: #FFF8EA; color: #6B4E0E; }
.adm-udup__list { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; }
.adm-uprog { max-width: 52rem; }
.adm-track { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 62rem) { .adm-track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; } }
.adm-track__step { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.4rem 0.6rem; border-radius: 10px; color: var(--text-muted); font-weight: 600; }   /* 6.9:1 */
.adm-track__dot { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #8A84A0; background: var(--white); }
.adm-track__step--done { color: #2A1E4D; }
.adm-track__step--done .adm-track__dot { border-color: var(--purple); background: var(--purple); }
.adm-track__step--done .adm-track__dot::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.adm-track__step--now { background: #F3F0FA; color: #2A1E4D; }   /* 12.6:1 */
.adm-track__step--now .adm-track__dot { border-color: rgba(58, 42, 102, 0.25); border-top-color: var(--purple); animation: adm-turn 0.9s linear infinite; }
.adm-track__step--bad { background: #FCEFF3; color: #6E1526; }
.adm-track__step--bad .adm-track__dot { border-color: #A3243B; background: #A3243B; }
@keyframes adm-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .adm-track__step--now .adm-track__dot { animation: none; border-color: var(--purple); box-shadow: inset 0 0 0 4px var(--white); background: var(--purple); } }
.adm-ubar { display: block; width: 100%; height: 10px; margin: 0 0 0.75rem; accent-color: var(--purple); }
.adm-track__line { margin: 0 0 0.5rem; font-size: 0.9375rem; color: #2A1E4D; }
.adm-track__line--bad { color: #8C1D32; font-weight: 600; }
.adm-track__actions { margin-top: 0.75rem; }

/* ---- Experts module (2026-10-31): the EN/中文 hint, the page address, the Publish to website panel -------------
   Colours are the Studio's own chips (--pub 7.3:1, --todo 7.1:1, --ok 12.6:1); the red is the upload notice's. */
.adm-hint--zh { margin-top: 0.35rem; }
.adm-switch--hinted { margin-bottom: 0.25rem; }
.adm-hint--switch { margin: 0 0 1.25rem; }
.adm-input--slug { max-width: 28rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.adm-slug__fixed { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; overflow-wrap: anywhere; }
.adm-slug__addr { overflow-wrap: anywhere; }
.adm-row__flag { margin-left: 0.1rem; vertical-align: middle; }
.adm-pub__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.adm-pub__text { flex: 1 1 18rem; min-width: 0; }
.adm-pub .adm-section__title { margin-bottom: 0.6rem; }
.adm-pub__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; }
.adm-pub__when { font-size: 0.875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }   /* 6.9:1 */
.adm-pub__note { margin-top: 0.6rem; }
.adm-pub__note--bad { color: #8C1D32; font-weight: 600; }   /* 8.1:1 on white */
.adm-pub__link { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; margin-left: 0.35rem; font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-color: rgba(58, 42, 102, 0.35); text-underline-offset: 3px; }   /* 11.7:1 */
.adm-pub__link:hover { text-decoration-color: currentColor; }
.adm-pubchip--bad { background: #FCEFF3; color: #6E1526; border-color: rgba(163, 36, 59, 0.35); }   /* 9.4:1 */
.adm-pubchip--busy::before { content: ""; flex: none; width: 12px; height: 12px; margin-right: 0.4rem; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: adm-turn 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .adm-pubchip--busy::before { animation: none; border-top-color: currentColor; opacity: 0.55; } }
.adm-pubbtn { flex: none; }

/* ---- Articles (2026-11-02, build part 1): the list rows, the Topics panel, the panel's "will send" list -------------- */
.adm-row__idx { display: flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 600; color: var(--purple-deep); background: var(--lavender-light); border: 1px solid var(--adm-line); border-radius: 10px; }   /* 12.7:1 */
.adm-row__slug { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; overflow-wrap: anywhere; }
.adm-chip-s--plain { background: var(--white); color: var(--text-muted); border-color: var(--adm-line); }   /* 6.9:1 */
.adm-pub__will { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--text-muted); }   /* 6.9:1 */
.adm-pub__group { margin: 0.15rem 0; overflow-wrap: anywhere; }
.adm-pub__gname { font-weight: 600; color: var(--purple-deep); }
.adm-pub__item { color: var(--text); }
.adm-pub__ready { font-weight: 600; color: #1D5B36; }   /* 7.3:1 */
.adm-topics { display: grid; gap: 1.25rem; }
.adm-topic__facts { margin: -0.5rem 0 1rem; }
.adm-topic__actions { margin-top: 0; }
/* the article form shell (C2): topics picker, the revision list, the read-only block cards */
.adm-aform__facts, .adm-aform__idx { font-variant-numeric: tabular-nums; }
/* long file names and addresses (a flex item cannot shrink below its text unless told): wrap them, break anywhere */
.adm-slug__fixed, .adm-aform__pdf { flex-wrap: wrap; }
.adm-slug__value { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; }
.adm-topicpick { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.adm-topicpick__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; min-height: 44px; padding: 0.25rem 0; border-top: 1px solid var(--adm-line); }
.adm-topicpick__item:first-child { border-top: 0; }
.adm-topicpick__label { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-weight: 600; color: var(--purple-deep); cursor: pointer; }
.adm-check { width: 22px; height: 22px; flex: none; accent-color: var(--purple); }
.adm-topicpick__order { display: inline-flex; align-items: center; gap: 0.5rem; }
.adm-topicpick__order .adm-sublabel { margin: 0; }
.adm-topicpick__pos { width: 5.5rem; min-width: 0; }
.adm-revs__line { gap: 0.5rem 0.75rem; margin-bottom: 1rem; }
.adm-revlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.adm-revlist__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border: 1px solid var(--adm-line); border-radius: 10px; background: var(--lavender-light); }
.adm-revlist__body { min-width: 0; flex: 1 1 16rem; }
.adm-revlist__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0; }
.adm-revlist__no { font-weight: 600; color: var(--purple-deep); }
.adm-revlist__meta { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--text-muted); overflow-wrap: anywhere; }   /* 6.9:1 on the lavender ground */
.adm-revlist__actions { flex: none; }
.adm-blocklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.adm-blockcard { padding: 0.6rem 0.9rem; border: 1px solid var(--adm-line); border-left-width: 4px; border-radius: 10px; background: var(--white); }
.adm-blockcard--heading { border-left-color: var(--purple); }
.adm-blockcard--callout { border-left-color: var(--gold); background: var(--cream); }
.adm-blockcard--figure, .adm-blockcard--clinical_photo { border-left-color: #1D5B36; }
.adm-blockcard__type { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }   /* 6.9:1 */
.adm-blockcard__text { margin: 0.15rem 0 0; font-size: 0.9375rem; color: var(--text); overflow-wrap: anywhere; }
.adm-blockcard--heading .adm-blockcard__text { font-weight: 600; color: var(--purple-deep); }

/* ---- Articles, build part 2: the block editor, the toolbar, the preview, the picture chooser and upload (2026-11-02) ---------- */
.adm-blocks__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.adm-blocks__tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.adm-blocklist--edit { gap: 0.25rem; }
.adm-blockcard--edit { padding: 0.75rem 0.9rem 0.9rem; }
.adm-blockcard--edit.is-dragging { opacity: 0.6; }
.adm-blockcard--edit.is-over { outline: 2px dashed var(--purple); outline-offset: 2px; }
.adm-blk__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0 0 0.5rem; }
.adm-blk__handle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -0.5rem; border-radius: 10px; color: var(--text-muted); font-size: 1.1rem; letter-spacing: -0.2em; cursor: grab; touch-action: none; user-select: none; }   /* 6.9:1 */
.adm-blk__handle:active { cursor: grabbing; }
.adm-blk__type { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.adm-blk__actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-left: auto; }
.adm-blk__fam { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); vertical-align: middle; }
.adm-blk__fam--big { width: 22px; height: 22px; flex: none; }
.adm-blk__tokenpick { display: flex; align-items: center; gap: 0.6rem; }
.adm-blk__tokenpick select { flex: 1 1 auto; min-width: 0; }
.adm-blk__pair { margin-bottom: 0.5rem; }
.adm-blk__pair .adm-sublabel { margin-top: 0.25rem; }
.adm-blk__text { font-size: 0.9375rem; }
.adm-blk__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; }
.adm-blk__label { font-weight: 600; }
.adm-blk__stale { margin-top: 0.3rem; color: var(--gold-deep); font-weight: 600; }   /* 5.4:1 */
.adm-blk__level { margin-bottom: 0.5rem; }
.adm-blk__level .adm-input--short { width: 9rem; }
.adm-tool { display: flex; gap: 0.3rem; margin: 0.15rem 0 0.25rem; }
.adm-tool__btn { min-height: 44px; padding: 0.2rem 0.8rem; font-size: 0.8125rem; }
.adm-blocklist--inner { margin: 0.5rem 0 0 0.5rem; padding-left: 0.5rem; border-left: 3px solid var(--adm-line); gap: 0.25rem; }
.adm-blk__addli { list-style: none; padding: 0.1rem 0; }
.adm-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-height: 44px; }
.adm-blk__add { border-style: dashed; }
.adm-addmenu { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.adm-blk__pic { display: grid; gap: 0.5rem; margin: 0 0 0.75rem; }
.adm-blk__img { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--adm-line); background: var(--lavender-light); }
.adm-blk__file { margin: 0; }
.adm-pick { margin: 0.25rem 0 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--adm-line); border-radius: 10px; background: var(--lavender-light); }
.adm-pick__list { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; display: grid; gap: 0.35rem; }
.adm-pick__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-height: 44px; }
.adm-pick__thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--adm-line); background: var(--white); }
.adm-pick__name { display: grid; min-width: 0; flex: 1 1 12rem; }
.adm-upload { display: grid; gap: 0.25rem; }
.adm-switch--plain { min-height: 44px; }
.adm-removed { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px dashed var(--adm-line); border-radius: 10px; }
.adm-removed__list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.adm-removed__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-height: 44px; font-size: 0.9375rem; }
.adm-aform__pdfup { margin-top: 0.75rem; }
.adm-aform__pdfwarn { margin-bottom: 0.75rem; }
/* the approximate preview: the eight callout families in the site's colour sense (the real styling is the template's) */
.adm-prevbox { margin: 0.5rem 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--adm-line); border-radius: 10px; background: var(--white); }
.adm-prev { max-width: 46rem; font-size: 1rem; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; min-width: 0; }   /* long reference links wrap at 320 px (audit of 3 Nov) */
.adm-prev a { word-break: break-all; }
.adm-prev h1, .adm-prev h3, .adm-prev h4 { font-family: var(--font-head); color: var(--purple-deep); margin: 1.25em 0 0.4em; }
.adm-prev h1 { font-size: 1.6rem; } .adm-prev h3 { font-size: 1.25rem; } .adm-prev h4 { font-size: 1.05rem; }
.adm-prev p, .adm-prev ul, .adm-prev ol { margin: 0 0 0.9em; }
.adm-prev a { color: var(--purple); }
.adm-prev__pre { white-space: pre-wrap; font-size: 0.875rem; }
.adm-prev__fig { margin: 1em 0; } .adm-prev__fig img { max-width: 100%; height: auto; border-radius: 8px; } .adm-prev__fig figcaption { font-size: 0.875rem; color: var(--text-muted); }
.adm-prev__clin { margin: 1em 0; padding: 0.75rem 1rem; border: 1px dashed var(--purple); border-radius: 8px; }
.adm-prev__callout { margin: 1em 0; padding: 0.9rem 1.1rem; border-radius: 10px; border: 1px solid transparent; }
.adm-prev__callout > :last-child { margin-bottom: 0; }
.adm-prev__callout--key-message { background: var(--purple-deep); color: var(--white); }
.adm-prev__callout--key-message a { color: #F3E7C8; }
.adm-prev__callout--postoperative { border-color: var(--purple); color: var(--purple-deep); }
.adm-prev__callout--postoperative strong { color: var(--gold-deep); }
.adm-prev__callout--position { background: #F3F0FA; border-left: 4px solid var(--purple); color: var(--purple-deep); }
.adm-prev__callout--caution { background: #FFF8EA; border-color: #EBD7A6; color: #6B4E0E; }
.adm-prev__callout--founder { border: 2px dashed var(--purple); color: var(--purple-deep); }
.adm-prev__callout--help { background: #FCEFF3; border-color: rgba(163, 36, 59, 0.35); color: #6E1526; }
.adm-prev__callout--labelled { background: var(--lavender-light); border-top: 4px solid var(--purple-deep); color: var(--purple-deep); }
.adm-prev__callout--slogan { background: var(--purple-deep); color: #F3E7C8; text-align: center; font-weight: 600; }
.adm-prev__callout--unknown { background: #F3F0FA; border: 1px dashed #8A84A0; }
@media (prefers-reduced-motion: reduce) { .adm-blockcard--edit { transition: none; } }
.adm-pub__note2 { color: var(--gold-deep); font-weight: 600; }   /* 5.4:1 */