/* ============================================================
   TechNews — editorial design system (implemented from Claude Design)
   Fonts: Archivo (UI/headlines), Source Serif 4 (body), IBM Plex Mono (meta)
   ============================================================ */
:root {
  /* color */
  --accent: #00D47E;
  --accent-hover: #00B76D;
  --accent-ink: #00603A;   /* AA link on white */
  --accent-tint: #E6F9F0;  /* badges */
  --accent-deep: #00301C;  /* text on accent */
  --ink: #0C1210;
  --ink-2: #3A4441;
  --ink-3: #5C6763;        /* meta */
  --ink-4: #7C8783;        /* disabled */
  --rule: #E2E6E3;
  --rule-strong: #C9CFCB;
  --surface: #FFFFFF;
  --surface-2: #F5F7F5;
  --canvas: #FFFFFF;
  --breaking: #B3231E;
  /* intentionally-dark elements that keep a dark background in BOTH themes
     (utility bar, consent bar, dark buttons, code blocks, newsletter box) */
  --chrome: #0C1210;
  --accent-line: var(--accent-line);              /* hairline on green pills/badges */
  --ph-a: #E4E8E6; --ph-b: #F1F4F2;    /* image-placeholder stripes */
  --photo-dim: 1;                      /* photo brightness (dimmed in dark) */
  --danger-bg: #FBEFEE; --danger-line: #E4C0BE; --danger-ink: #8A2A26;
  color-scheme: light;
  /* dark chrome (footer, spotlight) */
  --dk-bg: #0C1210;
  --dk-card: #141B18;
  --dk-rule: #26302B;
  --dk-body: #B7C0BB;
  --dk-meta: #8A948F;
  /* type */
  --sans: 'Archivo', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* layout */
  --maxw: 1320px;
  --pad: 60px;
}

/* ============================================================
   Dark reading theme (design system artboard 3).
   Applies when the OS prefers dark (unless the reader forced light),
   or when the reader toggles it on. Keep the two token lists in sync.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html[data-site="public"]:not([data-theme="light"]) {
    --accent-hover: #2BE0A0;
    --accent-ink: #63E9AE;        /* green links/kickers, light on dark */
    --accent-tint: #11291F;
    --accent-line: #1E4633;
    --ink: #E8EDE9;
    --ink-2: #D5DDD7;
    --ink-3: #94A09A;
    --ink-4: #6E7A75;
    --rule: #2A3531;
    --rule-strong: #3B4742;
    --surface: #151D19;
    --surface-2: #1D2723;
    --canvas: #0E1512;
    --breaking: #FF6F66;
    --chrome: #1D2723;
    --ph-a: #1C2521; --ph-b: #232D28;
    --photo-dim: .92;
    --danger-bg: #241311; --danger-line: #5A2A26; --danger-ink: #FF9A93;
    color-scheme: dark;
  }
}
html[data-site="public"][data-theme="dark"] {
  --accent-hover: #2BE0A0;
  --accent-ink: #63E9AE;
  --accent-tint: #11291F;
  --accent-line: #1E4633;
  --ink: #E8EDE9;
  --ink-2: #D5DDD7;
  --ink-3: #94A09A;
  --ink-4: #6E7A75;
  --rule: #2A3531;
  --rule-strong: #3B4742;
  --surface: #151D19;
  --surface-2: #1D2723;
  --canvas: #0E1512;
  --breaking: #FF6F66;
  --chrome: #1D2723;
  --ph-a: #1C2521; --ph-b: #232D28;
  --photo-dim: .92;
  --danger-bg: #241311; --danger-line: #5A2A26; --danger-ink: #FF9A93;
  color-scheme: dark;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- media placeholder (until image uploads land) ---------- */
.ph {
  background: repeating-linear-gradient(135deg, var(--ph-a) 0, var(--ph-a) 8px, var(--ph-b) 8px, var(--ph-b) 18px);
}
.ph-16-9 { aspect-ratio: 16 / 9; }
.ph-16-10 { aspect-ratio: 16 / 10; }
.ph-21-9 { aspect-ratio: 21 / 9; }
img.media { width: 100%; display: block; object-fit: cover; background: var(--surface-2); filter: brightness(var(--photo-dim)); }
.media-16-9 { aspect-ratio: 16 / 9; }
.media-16-10 { aspect-ratio: 16 / 10; }
.media-21-9 { aspect-ratio: 21 / 9; }

/* ---------- kicker / badges / meta ---------- */
.kicker { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.meta { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.badge {
  display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 9px; background: var(--accent-tint); color: var(--accent-ink);
}
.badge-ink { background: var(--chrome); color: var(--accent); }
.badge-outline { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); }
.badge-breaking { background: var(--breaking); color: #fff; }

/* ---------- buttons ---------- */
.btn { display: inline-block; font: 700 14px/1 var(--sans); padding: 13px 20px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-deep); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-deep); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--chrome); color: #fff; }
.btn-text { background: none; border: none; border-bottom: 2px solid var(--accent); color: var(--accent-ink); font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 8px 2px; cursor: pointer; }
.btn-text:hover { color: var(--ink); border-bottom-color: var(--ink); text-decoration: none; }

/* ---------- utility bar ---------- */
.utility-bar { background: var(--chrome); color: var(--dk-body); }
.utility-bar .container { height: 36px; display: flex; align-items: center; justify-content: space-between; }
.utility-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.utility-headline { color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.utility-headline:hover { color: var(--accent); text-decoration: none; }
.utility-right { display: flex; align-items: center; gap: 18px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.utility-right a { color: var(--dk-body); }
/* dark-mode switch (utility bar). Inner parts are pointer-events:none so the
   button is always the click target — fixes the WebKit/Safari svg-in-button bug. */
.theme-switch { -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0; padding: 2px; cursor: pointer; display: inline-flex; align-items: center; line-height: 0; }
.ts-track { position: relative; width: 42px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule-strong); pointer-events: none; transition: background .2s, border-color .2s; }
.ts-ic { position: absolute; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; color: var(--ink-3); pointer-events: none; }
.ts-sun { left: 4px; }
.ts-moon { right: 4px; }
.ts-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.28); transition: transform .2s, background .2s; pointer-events: none; }
.theme-switch[aria-checked="true"] .ts-track { background: var(--accent); border-color: var(--accent); }
.theme-switch[aria-checked="true"] .ts-ic { color: var(--accent-deep); }
.theme-switch[aria-checked="true"] .ts-thumb { background: #04170F; transform: translateX(20px); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }

/* ---------- nav ---------- */
.site-nav { background: var(--surface); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 50; }
.site-nav .container { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 28px; height: 28px; background: url("/logo.svg") center / contain no-repeat; display: block; flex: none; }
/* dark chrome (sidebar, editor bar, footer) gets the dark-ink mark; light chrome keeps the off-white one */
.as-brand .brand-mark,
.editor-top .brand-mark,
.site-footer .brand-mark { background-image: url("/logo-dark.svg"); }
.brand-name { font: 800 26px/1 var(--sans); letter-spacing: -.03em; }
.nav-links { display: flex; align-items: center; gap: 26px; font: 600 13px/1 var(--sans); }
.nav-links a { color: var(--ink); padding: 26px 0; border-bottom: 3px solid transparent; }
.nav-links a:hover { text-decoration: none; border-bottom-color: var(--rule-strong); }
.nav-links a.active { border-bottom-color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--rule-strong); padding: 9px 12px; width: 200px; border-radius: 2px; color: var(--ink-4); font: 400 13px/1 var(--sans); }
.nav-search .dot { width: 11px; height: 11px; border: 2px solid var(--ink-3); border-radius: 50%; display: block; flex: none; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--ink); cursor: pointer; flex: none; }
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; }
/* mobile menu panel (hamburger target) — only rendered under 640px */
.mobile-menu { display: none; }
.mm-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--rule-strong); border-radius: 4px; padding: 11px 13px; margin-bottom: 14px; }
.mm-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: 400 15px/1 var(--sans); color: var(--ink); }
.mm-search button { background: none; border: none; color: var(--ink-3); cursor: pointer; display: flex; padding: 0; }
.mm-search button svg { width: 18px; height: 18px; }
.mm-links { display: flex; flex-direction: column; }
.mm-links a { padding: 13px 4px; font: 700 16px/1 var(--sans); color: var(--ink); border-bottom: 1px solid var(--rule); }
.mm-links a:hover { text-decoration: none; color: var(--accent-ink); }
.mm-subscribe { display: block; text-align: center; margin-top: 16px; }

/* ---------- homepage ---------- */
.home-top { display: grid; grid-template-columns: 1fr 372px; gap: 36px; padding: 36px 0; border-bottom: 1px solid var(--rule); }
.lead { display: flex; flex-direction: column; gap: 20px; }
.lead-media { }
.lead-badges { display: flex; align-items: center; gap: 10px; }
.lead-title { margin: 0; font: 800 46px/1.03 var(--sans); letter-spacing: -.03em; text-wrap: pretty; }
.standfirst { margin: 0; font: 400 20px/1.5 var(--serif); color: var(--ink-2); text-wrap: pretty; max-width: 62ch; }
.byline { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.byline .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--rule); display: block; }
.byline .name { color: var(--ink); }

.featured-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 4px; }

/* rail */
.rail { display: flex; flex-direction: column; gap: 20px; }
.rail-box { border: 1px solid var(--rule); padding: 20px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 4px; }
.rail-title { margin: 0; font: 700 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mostread-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mostread-item:last-child { border-bottom: none; }
.mostread-item .num { font: 600 22px/1 var(--mono); color: var(--accent); width: 26px; flex: none; }
.mostread-item h4 { margin: 0 0 6px; font: 700 16px/1.25 var(--sans); letter-spacing: -.01em; }
.mostread-item h4 a { color: var(--ink); }

.news-box { background: var(--chrome); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.news-box .kicker { color: var(--accent); }
.news-box h3 { margin: 0; font: 800 24px/1.1 var(--sans); letter-spacing: -.02em; color: #fff; }
.news-box p { font: 400 15px/1.55 var(--serif); color: var(--dk-body); }
.news-box input { font: 400 14px/1 var(--sans); padding: 12px; border: 1.5px solid var(--ink-2); background: var(--dk-card); color: #fff; border-radius: 2px; }
.news-box .fineprint { font: 400 11px/1.4 var(--mono); color: var(--dk-meta); }

/* latest feed + secondary sidebar */
.home-latest { display: grid; grid-template-columns: 1fr 372px; gap: 36px; padding: 36px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.section-head h2 { margin: 0; font: 800 22px/1 var(--sans); letter-spacing: -.02em; }
.feed-item { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.feed-item .feed-media { align-self: stretch; }
.feed-body { display: flex; flex-direction: column; gap: 9px; }
.feed-body h3 { margin: 0; font: 700 24px/1.15 var(--sans); letter-spacing: -.02em; text-wrap: pretty; }
.feed-body h3 a { color: var(--ink); }
.feed-body .excerpt { font: 400 15px/1.55 var(--serif); color: var(--ink-2); max-width: 70ch; margin: 0; }

/* standard card (featured / related / spotlight) */
.card { display: flex; flex-direction: column; gap: 10px; }
.card a { color: inherit; }
.card .card-media { }
.card h3 { margin: 0; font: 700 20px/1.18 var(--sans); letter-spacing: -.015em; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { text-decoration: underline; }
.card .excerpt { margin: 0; font: 400 14px/1.5 var(--serif); color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* spotlight (dark themed category block) */
.spotlight { background: var(--dk-bg); padding: 44px 0; }
.spotlight-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--dk-rule); padding-bottom: 16px; }
.spotlight-head .kicker { color: var(--accent); }
.spotlight-head h2 { margin: 6px 0 0; font: 800 34px/1 var(--sans); letter-spacing: -.025em; color: #fff; }
.spotlight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 24px; }
.spotlight-card { background: var(--dk-card); border: 1px solid var(--dk-rule); display: flex; flex-direction: column; }
.spotlight-card .sc-media { aspect-ratio: 16/10; background: repeating-linear-gradient(135deg,#1C2521 0,#1C2521 6px,#232D28 6px,#232D28 14px); }
.spotlight-card .sc-body { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.spotlight-card h3 { margin: 0; font: 700 18px/1.2 var(--sans); letter-spacing: -.015em; color: #fff; text-wrap: pretty; }
.spotlight-card h3 a { color: #fff; }
.spotlight-card .kicker { color: var(--accent); }
.spotlight-card .meta { color: var(--dk-meta); }

/* newsletter band */
.news-band { background: var(--accent); padding: 40px 0; }
.news-band .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.news-band h2 { margin: 0 0 8px; font: 800 32px/1.05 var(--sans); letter-spacing: -.025em; color: var(--accent-deep); }
.news-band p { margin: 0; font: 400 17px/1.5 var(--serif); color: var(--accent-deep); }
.news-band form { display: flex; gap: 8px; flex: none; }
.news-band input { font: 400 15px/1 var(--sans); padding: 15px; width: 280px; max-width: 60vw; border: 1.5px solid var(--accent-deep); background: #fff; border-radius: 2px; color: var(--ink); }
.news-band .btn-dark { font: 700 15px/1 var(--sans); background: var(--chrome); color: var(--accent); border: none; padding: 15px 24px; cursor: pointer; }
.news-band .btn-dark:hover { background: var(--accent-deep); }

/* ---------- footer ---------- */
.site-footer { background: var(--dk-bg); padding: 48px 0 28px; color: var(--dk-body); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-brand p { font: 400 14px/1.6 var(--serif); color: var(--dk-body); max-width: 34ch; margin: 14px 0; }
.footer-social { display: flex; gap: 8px; }
.footer-social span { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ink-2); color: var(--dk-body); padding: 8px 10px; }
.footer-col h4 { margin: 0 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.footer-col a { display: block; font: 400 14px/1.9 var(--sans); color: var(--dk-body); }
.footer-col a:hover { color: #fff; }
.footer-legal { border-top: 1px solid var(--dk-rule); margin-top: 36px; padding-top: 20px; font: 400 11px/1.5 var(--mono); color: var(--dk-meta); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- article ---------- */
.progress { position: sticky; top: 74px; height: 3px; background: var(--rule); z-index: 40; }
.progress > span { display: block; height: 3px; width: 0; background: var(--accent); }
.breadcrumb { padding-top: 32px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--accent-ink); }
.article-head { max-width: 1000px; padding-top: 20px; display: flex; flex-direction: column; gap: 18px; }
.article-title { margin: 0; font: 800 52px/1.04 var(--sans); letter-spacing: -.03em; max-width: 22ch; text-wrap: pretty; }
.article-standfirst { margin: 0; font: 400 22px/1.5 var(--serif); color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.article-byline { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.article-byline .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--rule); display: block; flex: none; }
.article-byline .who { display: flex; flex-direction: column; gap: 4px; }
.article-byline .who .name { font: 700 15px/1 var(--sans); }
.article-hero { padding-top: 24px; }
.article-hero figcaption { font: 400 12px/1.5 var(--mono); color: var(--ink-3); padding-top: 8px; max-width: 70ch; }

.article-layout { display: grid; grid-template-columns: 64px minmax(0, 720px) 1fr; gap: 40px; align-items: start; padding: 36px 0 56px; }
.share-rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 90px; }
.share-rail .lbl { font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.share-rail a { width: 44px; height: 44px; border: 1px solid var(--rule-strong); display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--mono); color: var(--ink); }
.share-rail a:hover { border-color: var(--ink); text-decoration: none; }

.article-body { display: flex; flex-direction: column; gap: 24px; }
.article-body > p { margin: 0; font: 400 19px/1.7 var(--serif); color: var(--ink); }
.article-body h2 { margin: 24px 0 0; font: 800 32px/1.15 var(--sans); letter-spacing: -.025em; }
.article-body h3 { margin: 16px 0 0; font: 700 24px/1.2 var(--sans); letter-spacing: -.02em; }
.article-body a { color: var(--ink); border-bottom: 2px solid var(--accent); }
.article-body a:hover { text-decoration: none; background: var(--accent-tint); }
.article-body ul, .article-body ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; font: 400 19px/1.7 var(--serif); color: var(--ink); }
.article-body blockquote { margin: 12px 0; border-left: 4px solid var(--accent); padding: 8px 0 8px 24px; font: 600 28px/1.35 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.article-body img { margin: 8px 0; filter: brightness(var(--photo-dim)); }
.article-body pre { margin: 0; background: var(--chrome); color: #E8EFEA; padding: 20px; overflow: auto; font: 400 14px/1.7 var(--mono); }
.article-body code { font: 400 .95em/1.5 var(--mono); background: var(--surface-2); padding: 1px 5px; }
.article-body pre code { background: none; padding: 0; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 12px; align-items: center; }
.article-tags .lbl { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.article-tags .tag { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--surface-2); border: 1px solid var(--rule); padding: 9px 12px; color: var(--ink-2); }

.article-aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 90px; }
.aside-box { border: 1px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.aside-box .aside-title { font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.aside-item { display: flex; flex-direction: column; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.aside-item:last-child { border-bottom: none; padding-bottom: 0; }
.aside-item a { font: 700 15px/1.25 var(--sans); color: var(--ink); }

.related { padding: 0 0 56px; display: flex; flex-direction: column; gap: 20px; }
.related h2 { margin: 0; font: 800 26px/1 var(--sans); letter-spacing: -.02em; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- section landing ---------- */
.section-hero { padding: 40px 0 24px; border-bottom: 2px solid var(--ink); }
.section-hero h1 { margin: 8px 0 0; font: 800 44px/1.05 var(--sans); letter-spacing: -.025em; }
.section-hero p { margin: 10px 0 0; font: 400 18px/1.5 var(--serif); color: var(--ink-2); max-width: 60ch; }
.section-list { padding: 28px 0 48px; }

/* ---------- notices / empty ---------- */
.notice { background: var(--surface-2); border: 1px solid var(--rule); padding: 24px; color: var(--ink-2); font: 400 16px/1.5 var(--serif); margin: 32px 0; }
.notice.error { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  :root { --pad: 24px; }
  .home-top, .home-latest { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .share-rail { flex-direction: row; position: static; }
  .article-aside { position: static; }
  .featured-row { grid-template-columns: repeat(2, 1fr); }
  .spotlight-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .article-title { font-size: 38px; }
  .lead-title { font-size: 34px; }
}
@media (max-width: 640px) {
  :root { --pad: 16px; }
  .hide-mobile { display: none !important; }
  .nav-links, .nav-search, .utility-tagline, .util-date, .util-news { display: none; }
  /* Utility bar is just the breaking headline on phones — full width, scrolling
     as a horizontal marquee so the whole thing can be read. The theme toggle now
     lives in the nav (before Subscribe), so this row has no controls. */
  .utility-right { display: none; }
  .utility-left { width: 100%; min-width: 0; }
  .ticker { width: 100%; }
  .nav-toggle { display: inline-flex; }
  .nav-right > .btn-primary { display: none; }   /* Subscribe moves into the menu */
  .mobile-menu:not([hidden]) { display: block; background: var(--surface); border-bottom: 2px solid var(--ink); padding: 16px var(--pad) 20px; }
  .featured-row, .related-grid, .spotlight-grid, .footer-grid { grid-template-columns: 1fr; }
  .feed-item { grid-template-columns: 1fr; }
  .feed-item .feed-media { order: -1; }
  .lead-title { font-size: 30px; }
  .article-title { font-size: 30px; }
  .article-body > p, .article-body ul, .article-body ol { font-size: 17px; }
  .news-band .container { flex-direction: column; align-items: flex-start; }
  .news-band input { width: 100%; max-width: none; }
  .news-band form { width: 100%; }
}

/* ---------- admin (kept minimal, aligned to tokens) ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--surface-2); }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--rule); padding: 28px; display: grid; gap: 14px; }
.auth-card h1 { margin: 0; font: 800 26px/1 var(--sans); letter-spacing: -.02em; }
.auth-card .sub { margin: -8px 0 4px; color: var(--ink-3); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.auth-card label, .post-form label { display: grid; gap: 6px; font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.auth-card input, .post-form input, .post-form textarea, .post-form select {
  font: 400 15px/1.4 var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: 11px 12px; width: 100%;
}
.form-error { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-ink); padding: 10px 12px; font: 400 14px/1.4 var(--sans); }
.back-link { margin: 4px 0 0; font: 400 13px/1 var(--mono); text-align: center; }
.admin-header { border-bottom: 2px solid var(--ink); padding: 14px 0; margin-bottom: 24px; }
.admin-header .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-brand a { color: var(--ink); font: 800 20px/1 var(--sans); letter-spacing: -.02em; }
.pill { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); border: 1px solid var(--rule); padding: 3px 8px; margin-left: 6px; }
.admin-nav { display: flex; align-items: center; gap: 10px; }
.admin-nav .who { color: var(--ink-3); font: 500 13px/1 var(--mono); }
.admin-main { max-width: 900px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.admin-toolbar h1 { margin: 0; font: 800 28px/1 var(--sans); letter-spacing: -.02em; }
.admin-table { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); background: var(--surface); }
.admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); font: 400 14px/1.4 var(--sans); }
.admin-table th { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .t-title a { color: var(--ink); font-weight: 700; }
.admin-table .t-date { color: var(--ink-3); white-space: nowrap; }
.admin-table .t-actions { white-space: nowrap; text-align: right; }
.status { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border: 1px solid var(--rule); }
.status.published { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-tint); }
.status.draft { color: #8a6d1a; border-color: #E7D9A9; background: #FBF4DE; }
.link { background: none; border: none; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--accent-ink); padding: 0 6px; text-decoration: none; }
.link:hover { text-decoration: underline; }
.link.danger { color: #B3231E; }
.post-form { display: grid; gap: 16px; max-width: 760px; }
.post-form .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.post-form .hint { color: var(--ink-4); text-transform: none; letter-spacing: 0; font-weight: 400; }
.post-form textarea { resize: vertical; font-family: var(--serif); }
#editor { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 0 0 2px 2px; min-height: 300px; }
.ql-toolbar.ql-snow { border: 1px solid var(--rule-strong); border-radius: 2px 2px 0 0; }
.ql-editor { min-height: 300px; font: 400 17px/1.6 var(--serif); }
.form-actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 620px) { .post-form .row { grid-template-columns: 1fr; } .admin-table .t-date { display: none; } }

/* ============================================================
   ADMIN CMS SHELL (from TechNews Admin design)
   ============================================================ */
.admin-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--surface-2); }
.admin-sidebar { background: var(--dk-bg); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.as-brand { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--dk-rule); flex: none; }
.as-brand .brand-name { font: 800 20px/1 var(--sans); letter-spacing: -.03em; color: #fff; }
.as-brand .tag { font: 500 9px/1 var(--mono); letter-spacing: .1em; color: var(--ink-3); border: 1px solid var(--dk-rule); padding: 3px 4px; }
.as-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; overflow-y: auto; flex: 1; }
.as-group { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 16px 20px 8px; }
.as-link { font: 600 14px/1 var(--sans); color: var(--dk-body); padding: 12px 20px; display: flex; align-items: center; gap: 10px; text-decoration: none; border-left: 3px solid transparent; }
.as-link:hover { color: #fff; background: var(--dk-card); text-decoration: none; }
.as-link.active { color: #fff; background: var(--dk-card); border-left-color: var(--accent); }
.as-ico { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.as-ico svg { width: 18px; height: 18px; display: block; }
.as-link:hover .as-ico { color: var(--dk-body); }
.as-link.active .as-ico { color: var(--accent); }
.as-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-link .count { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--ink-3); }
.as-link .count.alert { background: var(--breaking); color: #fff; padding: 3px 6px; }
.as-user { padding: 16px 20px; border-top: 1px solid var(--dk-rule); display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.as-user:hover, .as-user.active { background: var(--dk-card); text-decoration: none; }
.as-user .avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--dk-rule); display: block; flex: none; }
.as-user .name { font: 600 13px/1 var(--sans); color: #fff; }
.as-user .role { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

.admin-main { display: flex; flex-direction: column; min-width: 0; max-width: none; }
.admin-topbar { height: 64px; background: var(--surface); border-bottom: 1px solid var(--rule); padding: 0 24px; display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 30; }
.topbar-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: 8px 12px; width: 340px; max-width: 40vw; }
.topbar-search .dot { width: 11px; height: 11px; border: 2px solid var(--ink-3); border-radius: 50%; display: block; flex: none; }
.topbar-search input { border: none; background: none; padding: 0; width: 100%; font: 400 13px/1 var(--sans); color: var(--ink); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.viewsite { font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.admin-content { padding: 24px; min-width: 0; }
.admin-content > .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-h1 { margin: 0; font: 800 28px/1 var(--sans); letter-spacing: -.025em; }
.admin-sub { font: 400 12px/1 var(--mono); color: var(--ink-3); margin-top: 6px; }

/* stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.stat .label { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stat .value { font: 800 34px/1 var(--sans); letter-spacing: -.03em; }
.stat .delta { font: 500 11px/1 var(--mono); color: var(--accent-ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stat .delta-note { color: var(--ink-3); }
/* trend chips (up = green, down = red, flat/new = muted) */
.trend { display: inline-flex; align-items: center; gap: 3px; font: 700 11px/1 var(--mono); padding: 3px 6px; border-radius: 999px; letter-spacing: .01em; }
.trend.up { color: var(--accent-ink); background: var(--accent-tint); }
.trend.down { color: var(--breaking); background: #FBEAE9; }
.trend.flat, .trend.new { color: var(--ink-3); background: var(--surface-2); }

/* panels */
.panel { background: var(--surface); border: 1px solid var(--rule); }
.panel-head { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.panel-title { font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.panel-link { font: 600 11px/1 var(--mono); color: var(--accent-ink); }
.dash-cols { display: grid; grid-template-columns: 1fr 380px; gap: 20px; min-width: 0; }
.dash-cols .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* recent list rows */
.mini-row { padding: 12px 16px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 110px 90px 74px; gap: 12px; align-items: center; }
.mini-row:last-child { border-bottom: none; }
.mini-row .t { font: 600 14px/1.3 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-row .t a { color: var(--ink); }
.mini-row .m { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.mini-row .d { text-align: right; }

/* chart placeholder */
.chart { padding: 18px 16px; display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.chart span { flex: 1; background: var(--accent); display: block; }
.chart-x { padding: 0 16px 14px; display: flex; justify-content: space-between; font: 400 10px/1 var(--mono); color: var(--ink-3); }

/* activity */
.activity-item { padding: 11px 16px; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; }
.activity-item:last-child { border-bottom: none; }
.activity-item .dot { width: 6px; height: 6px; background: var(--accent); display: block; margin-top: 6px; flex: none; }
.activity-item .text { font: 400 13px/1.4 var(--sans); }
.activity-item .when { font: 400 10px/1 var(--mono); color: var(--ink-3); }

/* filter tabs */
.filter-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--rule); font: 600 13px/1 var(--sans); margin-bottom: 16px; }
.filter-tabs a { padding: 10px 0; color: var(--ink-3); border-bottom: 2px solid transparent; text-decoration: none; }
.filter-tabs a:hover { color: var(--ink); text-decoration: none; }
.filter-tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }
.filter-tabs .n { font: 400 11px/1 var(--mono); color: var(--ink-3); }

.admin-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-tools form { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: 8px 12px; width: 260px; background: var(--surface); }
.admin-tools form input { border: none; background: none; padding: 0; width: 100%; font: 400 13px/1 var(--sans); }

/* data table (posts) */
.dt { background: var(--surface); border: 1px solid var(--rule); min-width: 0; }
.dt-head, .dt-row { display: grid; grid-template-columns: 1fr 130px 140px 110px 96px 40px; gap: 12px; padding: 12px 14px; align-items: start; }
.dt-head { background: var(--surface-2); border-bottom: 1px solid var(--rule); font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); align-items: center; }
.dt-row { border-bottom: 1px solid var(--rule); font: 400 13px/1.3 var(--sans); }
.dt-row:last-of-type { border-bottom: none; }
.dt-row:hover { background: var(--surface-2); }
.dt-title { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dt-title .h { font: 700 14px/1.3 var(--sans); }
.dt-title .h a { color: var(--ink); }
.dt-title .x { font: 400 12px/1.45 var(--serif); color: var(--ink-3); }
.dt-title .actions { font: 400 11px/1 var(--mono); color: var(--accent-ink); display: flex; gap: 8px; }
.dt-title .actions a { color: var(--accent-ink); }
.dt-title .actions form { display: inline; }
.dt-title .actions button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--breaking); }
.dt-cell { font: 400 12px/1.3 var(--mono); color: var(--ink-3); }
.pager { padding: 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pager .info { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.pager .pages { display: flex; align-items: center; gap: 6px; }
.pager .pages a, .pager .pages span { font: 600 12px/1 var(--mono); padding: 9px 12px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.pager .pages a.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager .pages a:hover { border-color: var(--ink); text-decoration: none; }

/* editor */
.editor-top { height: 60px; background: var(--dk-bg); padding: 0 20px; display: flex; align-items: center; gap: 16px; }
.editor-top .brand-name { color: #fff; font-size: 18px; }
.editor-top .crumb { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-body); border-left: 1px solid var(--dk-rule); padding-left: 16px; }
.editor-top .save-state { font: 400 12px/1 var(--mono); color: var(--dk-meta); margin-left: auto; }
.editor-top .close { font: 600 12px/1 var(--sans); color: var(--dk-body); border: 1px solid var(--dk-rule); padding: 9px 12px; text-decoration: none; }
.editor-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding: 20px; align-items: start; min-width: 0; }
.editor-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.editor-card { background: var(--surface); border: 1px solid var(--rule); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.title-input { font: 800 30px/1.15 var(--sans); letter-spacing: -.025em; border: none; border-bottom: 2px solid var(--rule); padding: 0 0 10px; color: var(--ink); width: 100%; }
.title-input:focus { outline: none; border-bottom-color: var(--accent); }
.slug-row { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); color: var(--ink-3); flex-wrap: wrap; }
.slug-row input { font: 400 12px/1.3 var(--mono); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 6px 8px; flex: 1; min-width: 160px; }
.excerpt-card { background: var(--surface); border: 1px solid var(--rule); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.excerpt-card .head { display: flex; justify-content: space-between; align-items: baseline; }
.excerpt-card textarea { font: 400 15px/1.6 var(--serif); padding: 10px; border: 1.5px solid var(--rule-strong); border-radius: 2px; resize: vertical; }
.counter { font: 400 11px/1 var(--mono); color: var(--ink-3); }
.counter.over { color: var(--breaking); }

.editor-side { display: flex; flex-direction: column; gap: 16px; }
.pub-panel { background: var(--surface); border: 1px solid var(--rule); }
.pub-panel .head { background: var(--dk-bg); color: #fff; padding: 11px 14px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pub-panel .body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pub-row { display: flex; justify-content: space-between; align-items: center; font: 400 13px/1 var(--sans); }
.pub-row .k { color: var(--ink-3); }
.pub-actions { display: flex; gap: 8px; border-top: 1px solid var(--rule); padding-top: 12px; flex-wrap: wrap; align-items: center; }
.side-card { background: var(--surface); border: 1px solid var(--rule); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.side-card .label { font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.side-card select, .side-card input, .side-card textarea { font: 400 14px/1.3 var(--sans); padding: 10px; border: 1.5px solid var(--rule-strong); border-radius: 2px; background: var(--surface); width: 100%; }
.dropzone { border: 1.5px dashed var(--rule-strong); background: var(--surface-2); padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.dropzone .h { font: 700 13px/1 var(--sans); }
.dropzone .s { font: 400 11px/1.3 var(--mono); color: var(--ink-3); }
.seo-preview { background: var(--surface-2); border: 1px solid var(--rule); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.seo-preview .u { font: 400 11px/1 var(--mono); color: var(--accent-ink); }
.seo-preview .t { font: 600 15px/1.25 var(--sans); color: var(--ink); }
.seo-preview .d { font: 400 12px/1.45 var(--serif); color: var(--ink-2); }
.field-label { display: flex; justify-content: space-between; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* stub / coming soon */
.stub { background: var(--surface); border: 1px solid var(--rule); padding: 48px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.stub .box { width: 28px; height: 28px; border: 2px solid var(--rule-strong); }
.stub h2 { margin: 0; font: 800 20px/1.2 var(--sans); }
.stub p { margin: 0; font: 400 14px/1.5 var(--serif); color: var(--ink-2); max-width: 44ch; }

/* media library */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.media-card { background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.media-thumb { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-meta { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--rule); }
.media-meta .fn { font: 600 13px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta .sz { font: 400 11px/1 var(--mono); color: var(--ink-3); flex: none; }
.media-actions { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--rule); }
.media-actions form { display: inline; }
.fi-preview img { border: 1px solid var(--rule); }
.fi-actions { display: flex; gap: 14px; align-items: center; }

/* maintenance banner (admin) */
.uc-banner { display: flex; align-items: center; gap: 12px; background: #FBEAE9; border: 1px solid #F0C9C7; border-left: 3px solid var(--breaking); color: #7A211D; padding: 12px 16px; margin-bottom: 20px; font: 600 13px/1.4 var(--sans); }
.uc-banner strong { font-weight: 800; }
.uc-banner .uc-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--breaking); flex: none; }
.uc-banner .uc-link { color: var(--breaking); border-bottom: 1px solid var(--breaking); }
.uc-banner .uc-link:hover { text-decoration: none; }

/* newsletter honeypot (spam trap) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.as-user-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* sidebar collapse toggle */
.sidebar-toggle { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.sidebar-toggle:hover { border-color: var(--ink); color: var(--ink); }
.sidebar-toggle svg { width: 18px; height: 18px; }

/* collapsed sidebar (user toggle) */
.admin-app.sidebar-collapsed { grid-template-columns: 68px 1fr; }
.sidebar-collapsed .as-label,
.sidebar-collapsed .as-link .count,
.sidebar-collapsed .as-group,
.sidebar-collapsed .as-brand .brand-name,
.sidebar-collapsed .as-brand .tag,
.sidebar-collapsed .as-user-meta { display: none; }
.sidebar-collapsed .as-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.sidebar-collapsed .as-link.active { border-left-color: transparent; box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-collapsed .as-brand { justify-content: center; padding: 0 8px; }
.sidebar-collapsed .as-user { justify-content: center; }

/* auto icon-rail on narrow screens (never the broken horizontal bar) */
@media (max-width: 960px) {
  .admin-app, .admin-app.sidebar-collapsed { grid-template-columns: 64px 1fr; }
  .as-label, .as-link .count, .as-group, .as-brand .brand-name, .as-brand .tag, .as-user-meta { display: none; }
  .as-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  .as-link.active { border-left-color: transparent; box-shadow: inset 3px 0 0 var(--accent); }
  .as-brand { justify-content: center; padding: 0 8px; }
  .as-user { justify-content: center; }
  .sidebar-toggle { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-cols, .editor-grid { grid-template-columns: 1fr; }
  .topbar-search { width: auto; flex: 1; }
}
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr; }
  .dt-head { display: none; }
  .dt-row { grid-template-columns: 1fr !important; gap: 6px; }
  .dt-row .dt-cell { color: var(--ink-2); }
  .viewsite { display: none; }
}

/* --- Admin forms: users & import --- */
.a-field { display: flex; flex-direction: column; gap: 6px; }
.a-label { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.a-input, .a-select { font: 400 14px/1.3 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 9px 10px; width: 100%; }
.a-input:focus, .a-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.a-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6763' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.a-grid { display: grid; gap: 14px; }
.a-notice { background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent-ink); padding: 11px 14px; font: 500 14px/1.45 var(--sans); border-radius: 2px; }
.role-pill { border-radius: 999px; padding: 4px 10px; font: 600 12px/1.4 var(--sans); }
.nav-live { color: var(--accent-ink); font: 700 10px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 760px) { .a-grid { grid-template-columns: 1fr !important; } }

/* --- Dashboard site status --- */
.site-status { display: flex; align-items: center; gap: 14px; border: 1px solid var(--rule); background: var(--surface); padding: 14px 16px; margin-bottom: 20px; }
.site-status .ss-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.site-status.is-live .ss-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.site-status.is-down .ss-dot { background: var(--breaking); box-shadow: 0 0 0 4px #F7DAD9; }
.site-status .ss-text { display: flex; flex-direction: column; gap: 2px; }
.site-status .ss-title { font: 700 15px/1.2 var(--sans); }
.site-status.is-live .ss-title { color: var(--accent-ink); }
.site-status.is-down .ss-title { color: var(--breaking); }
.site-status .ss-sub { font: 400 13px/1.45 var(--serif); color: var(--ink-2); }
.site-status .ss-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (max-width: 600px) { .site-status { flex-wrap: wrap; } .site-status .ss-actions { margin-left: 0; width: 100%; } }

/* --- Post scoring: SEO readiness meter + rating badges --- */
.score-badge { font: 700 12px/1 var(--mono); padding: 5px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); white-space: nowrap; }
.score-badge.band-good { background: var(--accent-tint); color: var(--accent-ink); border-color: var(--accent-line); }
.score-badge.band-ok { background: #FBF3D6; color: #7A5B00; border-color: #EAD9A0; }
.score-badge.band-poor { background: #FBEAE9; color: var(--breaking); border-color: #E4C0BE; }
.score-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.score-checks .chk { display: flex; gap: 8px; align-items: flex-start; font: 400 13px/1.35 var(--sans); color: var(--ink-2); }
.score-checks .chk .ic { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--sans); color: #fff; margin-top: 1px; }
.score-checks .chk.pass .ic { background: var(--accent); }
.score-checks .chk.warn .ic { background: #C9A227; }
.score-checks .chk.warn .lbl { color: var(--ink); }
.score-checks .chk .lbl em { display: block; font-style: normal; color: var(--ink-3); font-size: 12px; margin-top: 1px; }

/* admin posts-list SEO column */
.score-cell { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.seo-pill, .ed-pill { font: 700 11px/1 var(--mono); letter-spacing: .02em; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--rule); }
.seo-pill.band-good { background: var(--accent-tint); color: var(--accent-ink); border-color: var(--accent-line); }
.seo-pill.band-ok { background: #FBF3D6; color: #7A5B00; border-color: #EAD9A0; }
.seo-pill.band-poor { background: #FBEAE9; color: var(--breaking); border-color: #E4C0BE; }
.seo-pill.band-none { background: var(--surface-2); color: var(--ink-3); }
.ed-pill { background: var(--ink); color: #fff; border-color: var(--ink); }
.pop-pill { background: var(--accent-deep); color: var(--accent); border-color: var(--accent-deep); }

/* public editor's rating badge */
.rating { display: inline-flex; align-items: center; gap: 3px; font: 700 11px/1 var(--mono); color: var(--accent-ink); background: var(--accent-tint); border: 1px solid var(--accent-line); padding: 4px 8px; border-radius: 999px; vertical-align: middle; }
.lead-badges .rating, .article-head .rating { margin-left: 8px; }

/* --- Breaking-news ticker (utility bar) --- */
.ticker { height: 36px; overflow: hidden; flex: 1 1 auto; min-width: 0; }
.ticker-track { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ticker-track li { height: 36px; display: flex; align-items: center; min-width: 0; }
.ticker-track li a { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utility-right a, .utility-right span { white-space: nowrap; }
/* horizontal marquee variant (mobile): items laid in a row, duplicated in JS
   for a seamless -50% loop, so the full headline scrolls past. */
.ticker-track.marquee { flex-direction: row; flex-wrap: nowrap; width: max-content; animation: ticker-marquee var(--marquee-dur, 22s) linear infinite; }
.ticker-track.marquee li { position: relative; flex: none; height: 36px; padding-right: 34px; }
.ticker-track.marquee li a { max-width: none; overflow: visible; }
.ticker-track.marquee li::after { content: "•"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--dk-meta); }
.ticker:hover .ticker-track.marquee { animation-play-state: paused; }
@keyframes ticker-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track.marquee { animation: none; } }

/* --- Bulk select + delete (admin tables) --- */
.bulk-cb, .bulk-all { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.bulk-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--rule); background: var(--surface-2); border-radius: 2px; font: 600 13px/1 var(--sans); color: var(--ink-3); transition: background .15s, border-color .15s, color .15s; }
.bulk-bar.is-active { background: var(--surface); border-color: var(--rule-strong); color: var(--ink); }
.bulk-bar .bulk-count { font-weight: 800; }
.bulk-bar .spacer { margin-left: auto; }
.bulk-bar .btn-del { background: var(--breaking); color: #fff; border: 1px solid var(--breaking); padding: 8px 14px; border-radius: 2px; font: 700 13px/1 var(--sans); cursor: pointer; }
.bulk-bar .btn-del:hover:not(:disabled) { filter: brightness(1.08); }
.bulk-bar .btn-del:disabled { background: var(--surface); color: var(--ink-4); border-color: var(--rule); cursor: not-allowed; }

/* --- Comments --- */
.comments { max-width: 760px; margin: 40px auto 0; padding-top: 24px; border-top: 2px solid var(--ink); }
.comments h2 { font: 800 24px/1.1 var(--sans); letter-spacing: -.02em; margin: 0 0 20px; display: flex; align-items: center; gap: 10px; }
.comments h2 .c-count { font: 600 13px/1 var(--mono); color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--rule); padding: 5px 9px; border-radius: 999px; }
.c-flash { padding: 11px 14px; border-radius: 2px; font: 500 14px/1.4 var(--sans); margin-bottom: 18px; }
.c-flash.ok { background: var(--accent-tint); color: var(--accent-ink); border: 1px solid var(--accent-line); }
.c-flash.err { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid var(--danger-line); }
.c-empty { color: var(--ink-3); font: 400 15px/1.6 var(--serif); }
.c-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.c-item { border-bottom: 1px solid var(--rule); padding-bottom: 20px; }
.c-item:last-child { border-bottom: none; }
.c-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.c-name { font: 700 15px/1.2 var(--sans); color: var(--ink); }
.c-date { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.c-body { font: 400 16px/1.6 var(--serif); color: var(--ink-2); }
.c-form { background: var(--surface-2); border: 1px solid var(--rule); padding: 22px; }
.c-form h3 { margin: 0 0 14px; font: 700 18px/1.2 var(--sans); }
.c-form input[type=text], .c-form input[type=email], .c-form textarea { width: 100%; font: 400 15px/1.4 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 10px 12px; }
.c-form textarea { font-family: var(--serif); resize: vertical; margin-bottom: 12px; }
.c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.c-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.c-note { font: 400 13px/1.4 var(--serif); color: var(--ink-3); }
@media (max-width: 600px) { .c-row { grid-template-columns: 1fr; } }

/* --- Listen player + Like button (article) --- */
.listen { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.listen-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--accent-tint); color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: 999px; padding: 9px 16px; font: 700 13px/1 var(--sans); cursor: pointer; }
.listen-btn:hover { filter: brightness(1.06); }
.listen-ic { font-size: 12px; }
.listen-bar { flex: 1; max-width: 220px; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.listen-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s linear; }
.listen-stop { background: none; border: none; color: var(--ink-3); font: 600 11px/1 var(--mono); cursor: pointer; text-transform: uppercase; letter-spacing: .06em; }
.listen-stop:hover { color: var(--breaking); }

.like-row { margin: 28px 0 8px; }
.like-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 10px 18px; font: 700 14px/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.like-btn .heart { color: var(--ink-3); font-size: 16px; transition: color .12s, transform .12s; }
.like-btn:hover { border-color: var(--breaking); }
.like-btn.liked { background: #FBEAE9; border-color: var(--breaking); color: var(--breaking); }
.like-btn.liked .heart { color: var(--breaking); transform: scale(1.15); }
.like-count { font: 700 13px/1 var(--mono); color: var(--ink-3); }
.like-btn.liked .like-count { color: var(--breaking); }

/* --- Analytics: line chart + mini paginator --- */
.line-chart { width: 100%; height: 160px; display: block; }
/* hover overlay: vertical guide, marker dot, and a tooltip */
.chart-wrap { position: relative; touch-action: pan-y; }
.chart-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule-strong); transform: translateX(-0.5px); pointer-events: none; }
.chart-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); transform: translate(-50%, -50%); pointer-events: none; }
.chart-tip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 7px 10px; border-radius: 4px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(12,18,16,.22); display: flex; flex-direction: column; gap: 3px; z-index: 3; }
.chart-tip strong { font: 800 14px/1 var(--sans); }
.chart-tip span { font: 500 10px/1 var(--mono); color: #B7C0BB; letter-spacing: .04em; text-transform: uppercase; }
.chart-tip.flip-l { transform: translateX(-100%); }
.chart-tip.flip-r { transform: translateX(0); }
/* the class display rules above outrank the UA [hidden] rule, so restore it */
.chart-dot[hidden], .chart-tip[hidden], .chart-guide[hidden] { display: none; }
.pager-mini { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--rule); font: 600 12px/1 var(--mono); color: var(--ink-3); }
.pager-mini button { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 2px; width: 26px; height: 26px; cursor: pointer; color: var(--ink); font-size: 15px; line-height: 1; }
.pager-mini button:hover:not(:disabled) { border-color: var(--ink); }
.pager-mini button:disabled { opacity: .4; cursor: default; }
.pager-mini .pm-info { min-width: 46px; text-align: center; }

/* --- Draft preview bar --- */
.preview-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); color: #fff; padding: 10px var(--pad); font: 500 13px/1.4 var(--sans); }
.preview-bar strong { color: var(--accent); }
.preview-bar a { color: var(--accent); font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .preview-bar { padding: 10px 16px; font-size: 12px; } }

/* --- Newsletter --- */
.status.nl-draft { color: #8a6d1a; border-color: #E7D9A9; background: #FBF4DE; }
.status.nl-ready { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-tint); }
.status.nl-sent { color: #fff; border-color: var(--ink); background: var(--ink); }
.nl-note { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 12px 14px; margin-bottom: 20px; font: 400 13px/1.5 var(--sans); color: var(--ink-2); border-radius: 2px; }
.nl-note strong { color: var(--ink); }
.nl-note em { font-style: normal; font-weight: 600; color: var(--accent-ink); }
.nl-note-ico { color: var(--accent-ink); flex: none; margin-top: 1px; }
.panel-meta { font: 600 11px/1 var(--mono); color: var(--ink-3); }
.nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .nl-grid { grid-template-columns: 1fr; } }
.nl-stories { max-height: 420px; overflow-y: auto; }
.nl-stories-group { font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px 6px; position: sticky; top: 0; background: var(--surface); }
.nl-story { display: flex; gap: 12px; align-items: flex-start; padding: 11px 16px; border-top: 1px solid var(--rule); cursor: pointer; }
.nl-story:hover { background: var(--surface-2); }
.nl-story-cb { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.nl-story-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl-story-kicker { font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.nl-story-draft { color: #8a6d1a; }
.nl-story-title { font: 700 14px/1.35 var(--sans); color: var(--ink); }
.nl-story-meta { font: 400 11px/1 var(--mono); color: var(--ink-3); }
.nl-actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.status.nl-sending { color: var(--ink-2); border-color: var(--rule-strong); background: var(--surface-2); }
/* Delivery panel */
.nl-send-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.nl-send-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.nl-progress { display: flex; flex-direction: column; gap: 8px; }
.nl-progress-bar { height: 8px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.nl-progress-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.nl-sent-done { font: 700 14px/1.3 var(--sans); color: var(--accent-ink); background: var(--accent-tint); border: 1px solid var(--accent-line); padding: 12px 14px; border-radius: 2px; }
/* Inbox-style email preview */
.mailp-toggle { display: inline-flex; border: 1px solid var(--dk-rule); border-radius: 3px; overflow: hidden; }
.mailp-toggle button { background: transparent; border: none; color: var(--dk-body); font: 600 12px/1 var(--sans); padding: 8px 12px; cursor: pointer; }
.mailp-toggle button.active { background: var(--accent); color: var(--accent-deep); }
.mailp-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 24px; max-width: 1100px; margin: 28px auto; padding: 0 24px; align-items: start; }
@media (max-width: 900px) { .mailp-wrap { grid-template-columns: 1fr; } }
.mailp-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.mailp-meta { padding: 16px 20px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.mailp-row { display: flex; gap: 12px; font: 400 13px/1.4 var(--sans); }
.mailp-k { flex: none; width: 96px; color: var(--ink-3); font: 600 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding-top: 1px; }
.mailp-v { color: var(--ink); min-width: 0; word-break: break-word; }
.mailp-subj { font-weight: 700; }
.mailp-pre { color: var(--ink-3); }
.mailp-frame-wrap { display: flex; justify-content: center; background: #edeeec; padding: 24px; }
.mailp-frame { width: 600px; max-width: 100%; height: 900px; border: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.1); transition: width .2s ease; }
.mailp-card.is-mobile .mailp-frame { width: 390px; }
.mailp-side { position: sticky; top: 20px; }

/* Tag token input (post editor) */
.tagin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--rule-strong); border-radius: 2px; padding: 6px; background: var(--surface); cursor: text; }
.tagin:focus-within { border-color: var(--ink); }
.tagin-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-tint); color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: 3px; padding: 4px 5px 4px 9px; font: 600 12px/1 var(--sans); }
.tagin-x { background: none; border: none; color: var(--accent-ink); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: .7; }
.tagin-x:hover { opacity: 1; }
.tagin-input { border: none; outline: none; flex: 1 1 90px; min-width: 90px; padding: 5px 4px; font: 400 13px/1 var(--sans); background: none; color: var(--ink); }

/* Consent banner */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--chrome); color: #fff; box-shadow: 0 -3px 18px rgba(0,0,0,.22); }
.consent-in { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--pad); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.consent-msg { margin: 0; font: 400 13px/1.55 var(--sans); color: var(--dk-body); max-width: 74ch; }
.consent-msg a { color: var(--accent); text-decoration: underline; }
.consent-btns { display: flex; gap: 10px; flex: none; }
.consent-yes, .consent-no { font: 700 13px/1 var(--sans); padding: 11px 18px; border-radius: 3px; cursor: pointer; border: 1px solid transparent; }
.consent-yes { background: var(--accent); color: var(--accent-deep); border-color: var(--accent); }
.consent-yes:hover { background: var(--accent-hover); }
.consent-no { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.consent-no:hover { border-color: #fff; }
@media (max-width: 640px) { .consent-btns { width: 100%; } .consent-yes, .consent-no { flex: 1; } }
.consent-choice { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
/* Legal / privacy prose */
.legal { font: 400 16px/1.7 var(--serif); color: var(--ink-2); padding-bottom: 40px; }
.legal h2 { font: 700 20px/1.3 var(--sans); color: var(--ink); margin: 32px 0 10px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--accent-ink); text-decoration: underline; }
/* Disabled buttons read as disabled (e.g. Save until a form changes) */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--accent); border-color: var(--accent); }
.btn-secondary:disabled:hover, .btn-secondary[disabled]:hover { background: var(--surface); color: var(--ink); }

/* --- Editorial review workflow + notifications + presence (admin) --- */
.status.pending { color: #2F55B3; border-color: #C7D6F5; background: #EDF2FD; }
.filter-tabs .n.alert { background: var(--breaking); color: #fff; padding: 2px 6px; border-radius: 999px; font-weight: 600; }

.review-back { margin: 20px 20px 0; background: #FFF6E8; border: 1px solid #F0D9AE; border-left: 4px solid #E0A63C; padding: 12px 14px; border-radius: 3px; }
.review-back .rb-label { font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9A6A16; }
.review-back p { margin: 6px 0 0; font: 400 14px/1.5 var(--sans); color: var(--ink); }

.sendback { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); display: flex; flex-direction: column; align-items: flex-start; }
.sendback textarea { width: 100%; margin-top: 6px; font: 400 13px/1.5 var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: 9px 10px; resize: vertical; }
.pub-hint { margin: 8px 0 0; font: 400 12px/1.4 var(--sans); color: var(--ink-3); }

.topbar-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--ink-3); border-radius: 3px; text-decoration: none; }
.topbar-bell:hover { color: var(--ink); background: var(--surface-2); }
.topbar-bell svg { width: 18px; height: 18px; }
.topbar-bell.has-unread { color: var(--ink); }
.bell-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--breaking); color: #fff; font: 700 9px/15px var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--surface); }

.notif-row { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.notif-row:last-child { border-bottom: none; }
.notif-row.unread { background: var(--accent-tint); }
.notif-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); }
.notif-ic.notif-rejected { color: var(--breaking); }
.notif-ic.notif-approved { color: var(--accent-ink); }
.notif-body { flex: 1; min-width: 0; }
.notif-text { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--ink); }
.notif-msg { margin: 6px 0 0; font: 400 13px/1.5 var(--serif); color: var(--ink-2); border-left: 3px solid var(--rule-strong); padding-left: 10px; }
.notif-meta { display: block; margin-top: 6px; font: 400 11px/1 var(--mono); color: var(--ink-3); }

.presence { display: inline-flex; align-items: center; gap: 7px; }
.presence .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; }
.presence.online { color: var(--accent-ink); font-weight: 600; }
.presence.online .pdot { background: #12B76A; animation: presence-pulse 1.8s ease-out infinite; }
@keyframes presence-pulse { 0% { box-shadow: 0 0 0 0 rgba(18,183,106,.55); } 70% { box-shadow: 0 0 0 6px rgba(18,183,106,0); } 100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); } }
@media (prefers-reduced-motion: reduce) { .presence.online .pdot { animation: none; } }

/* --- Per-author upload count pill (Users page) --- */
.count-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--surface); line-height: 1; }
.count-pill:hover { border-color: var(--accent); background: var(--accent-tint); }
.count-pill strong { font: 700 14px/1 var(--sans); }
.count-pill .count-sub { font: 500 11px/1 var(--sans); color: var(--ink-3); }
.count-pill.zero { color: var(--ink-3); }
.count-pill.zero strong { color: var(--ink-3); font-weight: 600; }

/* --- Search type-ahead dropdown --- */
.nav-search, .mm-search { position: relative; }
.ac-menu { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 4px; box-shadow: 0 12px 32px rgba(12,18,16,.16); overflow: hidden; }
.mm-search .ac-menu { left: 0; right: 0; width: auto; max-width: none; top: calc(100% + 8px); }
.ac-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: var(--surface-2); text-decoration: none; }
.ac-t { font: 600 14px/1.35 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-c { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); flex: none; }
.ac-all { background: var(--surface-2); }
.ac-all .ac-t { font-weight: 700; color: var(--accent-ink); }

/* --- Rich editor: expanded + sticky toolbar --- */
.ql-toolbar.ql-snow { position: sticky; top: 0; z-index: 6; background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.rc-btn { width: auto !important; height: 24px; padding: 0 10px !important; font: 700 12px/24px var(--sans); color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: 3px; background: var(--accent-tint); cursor: pointer; }
.rc-btn:hover { background: var(--accent); color: var(--accent-deep); }
.ql-review { border-left: 1px solid var(--rule); padding-left: 10px; margin-left: 2px; }

/* Quill alignment + indentation as rendered on the public article */
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }
.article-body .ql-indent-1 { padding-left: 3em; }
.article-body .ql-indent-2 { padding-left: 6em; }
.article-body .ql-indent-3 { padding-left: 9em; }
.article-body .ql-indent-4 { padding-left: 12em; }

/* --- Inline review comments panel (editor) --- */
.rc-panel .rc-hint { margin: 4px 0 10px; font: 400 12px/1.45 var(--sans); color: var(--ink-3); }
.rc-count { font: 700 11px/1 var(--mono); color: var(--breaking); }
.rc-composer { border: 1px solid var(--rule-strong); border-radius: 4px; padding: 10px; margin-bottom: 12px; background: var(--surface-2); }
.rc-quote { font: 400 12px/1.45 var(--serif); color: var(--ink-2); border-left: 3px solid var(--accent); padding-left: 8px; margin-bottom: 8px; }
.rc-composer textarea { width: 100%; font: 400 13px/1.5 var(--sans); border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: 8px; resize: vertical; color: var(--ink); background: var(--surface); }
.rc-composer-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.rc-empty { font: 400 13px/1.4 var(--sans); color: var(--ink-3); margin: 6px 0 0; }
.rc-item { border-top: 1px solid var(--rule); padding: 12px 0 4px; }
.rc-item:first-of-type { border-top: none; }
.rc-item.resolved { opacity: .5; }
.rc-q { font: 400 12px/1.45 var(--serif); color: var(--ink-2); border-left: 3px solid var(--accent); padding-left: 8px; cursor: pointer; }
.rc-q:hover { color: var(--ink); }
.rc-q.lost { border-left-color: var(--ink-4); cursor: default; }
.rc-lost { font: 600 9px/1 var(--mono); color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }
.rc-note { font: 400 14px/1.5 var(--sans); color: var(--ink); margin: 6px 0 0; white-space: pre-wrap; }
.rc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font: 500 11px/1 var(--mono); color: var(--ink-3); }
.rc-acts { display: flex; gap: 12px; }
.rc-acts button { background: none; border: none; cursor: pointer; font: 600 11px/1 var(--mono); color: var(--accent-ink); padding: 0; }
.rc-acts .rc-del { color: var(--breaking); }
.rc-acts button:hover { text-decoration: underline; }

/* --- Right-click "Add comment" menu + Changes-requested status --- */
.rc-ctx { position: absolute; z-index: 1000; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px; box-shadow: 0 10px 28px rgba(12,18,16,.22); padding: 4px; }
.rc-ctx-add { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: 600 13px/1 var(--sans); color: var(--ink); padding: 9px 16px 9px 12px; border-radius: 4px; white-space: nowrap; }
.rc-ctx-add:hover { background: var(--accent-tint); color: var(--accent-ink); }
.rc-bubble { position: fixed; z-index: 1001; background: var(--ink); border-radius: 8px; box-shadow: 0 8px 24px rgba(12,18,16,.32); padding: 3px; animation: rcpop .1s ease-out; }
.rc-bubble-add { display: block; background: none; border: none; cursor: pointer; font: 600 12.5px/1 var(--sans); color: #fff; padding: 9px 13px; border-radius: 6px; white-space: nowrap; }
.rc-bubble-add:hover { background: rgba(255,255,255,.16); }
@keyframes rcpop { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.status.changes { color: #B4560B; border-color: #F1CBA0; background: #FDECD8; }