/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Base ── */
:root {
  --ivory: #f6f4f0;
  --cream: #edeae4;
  --warm-gray: #b5b0a8;
  --muted: #8a847b;
  --dark: #1a1a1a;
  --text: #3d3a35;
  --border: #d8d4cd;
  /* Submission status palette (text / 1px border / 15%-tint background), shared
     by the admin status badges, review tabs, char-counter, and revision-thread
     feedback. Single source of truth so a status hue is changed in one place.
     A few feedback backgrounds use a softer 0.12/0.10 tint of the same RGB and
     stay inline (one token cannot carry multiple alphas). */
  --status-pending-fg: #9a8a5a;
  --status-pending-border: #d8cf9f;
  --status-pending-bg: rgba(216, 207, 159, 0.15);
  --status-approved-fg: #5a7a5e;
  --status-approved-border: #a3c4a7;
  --status-approved-bg: rgba(163, 196, 167, 0.15);
  --status-rejected-fg: #a65a4e;
  --status-rejected-border: #d4a29a;
  --status-rejected-bg: rgba(212, 162, 154, 0.15);
  --status-revise-fg: #4a6e8a;
  --status-revise-border: #8db4cc;
  --status-revise-bg: rgba(141, 180, 204, 0.15);
  /* Display serif used for site chrome (logo, home hero, section / feature
     headers, footer brand) — same Playfair Display as guide article headings,
     pairing the OFL "Cheltenham-equivalent" with Noto Serif SC for CJK. */
  --serif: "Playfair Display", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --sans: "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, Helvetica, Arial, sans-serif;
  /* English guide articles use open-source serif typefaces (SIL OFL):
     - body / figcaption use Source Serif Pro (visually close to NYT Imperial)
     - headings use Playfair Display (visually close to NYT Cheltenham)
     Georgia is the swap-in system fallback. */
  --reading-serif: "Source Serif Pro", Georgia, "Times New Roman", Times, serif;
  --display-serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;
}

/* Simplified Chinese: guide articles (body + headings) use Source Serif Pro
   + PingFang SC. Source Serif Pro (the EN guide's Latin face) renders Latin
   text and digits with lining figures — uniform height, so numbers align
   with the CJK baseline instead of the bouncy old-style figures Georgia
   produces; Georgia stays as the Latin fallback. PingFang SC handles CJK and
   positions punctuation at the bottom-left of each character box (mainland
   convention, GB/T 15834). Site chrome keeps the default --sans / --serif
   (Noto Sans SC / Noto Serif SC). */
html[lang="zh-CN"] {
  --reading-serif: "Source Serif Pro", Georgia, "PingFang SC", "Heiti SC", "Microsoft YaHei", simsun, sans-serif;
  --display-serif: "Source Serif Pro", Georgia, "PingFang SC", "Heiti SC", "Microsoft YaHei", simsun, sans-serif;
}

/* Traditional Chinese: same approach as zh-CN but every CJK font swapped to
   the TC variant. TC fonts center punctuation (Taiwan convention,《重訂標
   點符號手冊》); using SC fonts on TW pages leaves punctuation glyphs in
   the wrong position. */
html[lang="zh-TW"] {
  --serif: "Playfair Display", "Noto Serif TC", "PMingLiU", "Songti TC", Georgia, serif;
  --sans: "Inter", "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", -apple-system, Helvetica, Arial, sans-serif;
  --reading-serif: "Source Serif Pro", Georgia, "PingFang TC", "Heiti TC", "Microsoft JhengHei", PMingLiU, sans-serif;
  --display-serif: "Source Serif Pro", Georgia, "PingFang TC", "Heiti TC", "Microsoft JhengHei", PMingLiU, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--dark);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
}

::selection {
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
}

/* ── Navigation ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(246, 244, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.1rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
  /* Never let a label wrap to a second line; if the row can't fit, the bar
     collapses to the hamburger instead (see Adaptive collapse below). Keeping
     links single-line is also what makes the overflow measurement reliable. */
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--dark);
}

.nav-language-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.nav-language-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 42px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  color: var(--dark);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.nav-language-pill:hover,
.nav-language-pill.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--ivory);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 16px;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--dark);
  position: absolute;
  left: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle span:first-child { top: 2px; }
.nav-toggle span:last-child { bottom: 2px; }

.nav-toggle.active span:first-child {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle.active span:last-child {
  transform: translateY(-5.5px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--ivory);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu a {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--dark);
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* Language switch lives inside the mobile menu (the nav bar hides it on small
   screens so the hamburger fits). Pills override .mobile-menu a's large serif. */
.mobile-menu-langs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mobile-menu-langs .nav-language-pill {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* Adaptive collapse — JS toggles `nav-collapsed` on <body> the moment the bar's
   links can no longer sit on one line (assets/js/script.js measures it live).
   This replaces a single hard-coded breakpoint, so the bar flips to the
   hamburger at the right width in every language (English labels run far wider
   than the CJK ones) and for any link or translation added later. The
   max-width:768px block in the Responsive section stays as a no-JS fallback. */
body.nav-collapsed .nav-links,
body.nav-collapsed .nav-language-switch { display: none; }
body.nav-collapsed .nav-toggle { display: block; }
body.nav-collapsed .mobile-menu { display: flex; }

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2.5rem 4rem;
}

.hero-content {
  max-width: 620px;
}

.hero-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 2rem;
}

.hero-category-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

.hero-category-link:hover {
  color: var(--dark);
  border-bottom-color: var(--dark);
}

.hero h1 {
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--dark);
  letter-spacing: -0.01em;
  margin-bottom: 1.8rem;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--dark);
  line-height: 1.8;
  margin-bottom: 3rem;
}

.hero-cta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  padding: 0.9rem 2.4rem;
  border: 1.5px solid var(--dark);
  transition: background 0.4s, color 0.4s;
}

.hero-cta:hover {
  background: var(--dark);
  color: var(--ivory);
}

/* ── Divider ── */
.divider {
  max-width: 1100px;
  margin: 0 auto;
  height: 1px;
  background: var(--border);
}

/* Anchor-scroll targets on the home page sit on the divider line above each
   section, so clicking a nav anchor lands with the line at the top of the
   viewport. scroll-margin-top clears the fixed top nav (≈4rem high). */
.divider[id] {
  scroll-margin-top: 4.5rem;
}

/* ── Sections ── */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2.5rem;
}

/* First .section on a page with no hero (e.g., category pages) needs extra
   top padding so it clears the fixed nav with the same breathing room as
   the section's natural bottom padding. */
.section.section--page-top {
  padding-top: 8rem;
}

.page-header {
  padding-top: 8.5rem;
  padding-bottom: 3.5rem;
}

.page-header > .section-header:last-child {
  margin-bottom: 0;
}

.section-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 4rem;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.6rem;
}

.section h1 {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.section h2 {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 1.4rem;
  letter-spacing: -0.01em;
}

.section-desc {
  font-size: 1rem;
  color: var(--dark);
  font-weight: 400;
  line-height: 1.8;
}

/* ── Grid: Two columns ── */
.grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
}

.feature {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s, transform 0.6s;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border);
}

.feature.visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-number {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--warm-gray);
  margin-bottom: 0.8rem;
}

.feature h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 0.7rem;
}

.feature p {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
  text-align: justify;
  word-break: break-word;
  hyphens: auto;
}

/* ── Grid: Three columns ── */
.grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.place {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s, transform 0.6s;
}

.place.visible {
  opacity: 1;
  transform: translateY(0);
}

.place h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.place-distance {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 0.9rem;
}

.place p:last-child {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
}

/* ── "Still growing" ghost card (end of a guide grid) ── */
.guide-card-ghost {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.6rem;
  border: 1px dashed var(--border);
  border-radius: 4px;
}

.guide-card-ghost h3,
.guide-card-ghost p:last-child {
  color: var(--warm-gray);
}

.guide-card-ghost h3 {
  font-size: 1.25rem;
}

.guides-language-group + .guides-language-group {
  margin-top: 4rem;
}

.guides-language-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.guides-language-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 0.5rem;
}

.guides-language-desc {
  max-width: 520px;
  color: var(--text);
  font-size: 0.95rem;
}

/* ── Steps ── */
.steps {
  display: flex;
  justify-content: center;
  gap: 4rem;
}

.step {
  text-align: center;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 1rem;
}

.step p {
  font-size: 0.92rem;
  color: var(--text);
}

/* ── Footer ── */
.footer {
  background: var(--cream);
  padding: 4rem 2.5rem;
  text-align: center;
}

.footer-inner {
  max-width: 500px;
  margin: 0 auto;
}

.footer-brand {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 1rem;
}

.footer-note {
  font-size: 0.82rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.footer-links {
  margin-bottom: 2rem;
}

.footer-links a + a {
  margin-left: 1rem;
}

.footer-links a {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--dark);
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--warm-gray);
  font-style: italic;
  font-family: var(--serif);
}

/* ── Guide page hero ── */
.guide-hero {
  padding: 10rem 2.5rem 4rem;
  text-align: center;
  /* Force lining figures: Playfair Display (headings) defaults to old-style
     figures, so digits like the "1" in "R1" drop below the baseline and
     read as subscripts. lining-nums triggers the OpenType `lnum` feature —
     Playfair Display and Source Serif Pro both carry it; Georgia has no
     lining alternates and ignores it harmlessly. Inherits to descendants. */
  font-variant-numeric: lining-nums;
}

.guide-hero-content {
  max-width: 620px;
  margin: 0 auto;
}

.guide-hero h1 {
  font-family: var(--display-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: #121212;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.guide-byline {
  margin-bottom: 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.guide-timestamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.25rem;
  margin: 0 auto 1.2rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.guide-timestamps span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.guide-editor {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 1.2rem;
}

.guide-author-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

.guide-author-link:hover {
  color: var(--dark);
  border-bottom-color: var(--dark);
}

.guide-hero .hero-subtitle {
  font-family: var(--reading-serif);
  font-size: 1.1rem;
  color: var(--dark);
}

.translation-switch {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2.5rem 3rem;
}

.translation-switch-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 1rem;
}

.translation-switch-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.translation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  color: var(--dark);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.translation-pill:hover,
.translation-pill.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--ivory);
}

.guide-empty-state {
  margin-bottom: 0;
}

/* ── Guide content (rendered from markdown) ── */
.guide-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 2.5rem;
  /* Lining figures throughout the article body — see .guide-hero above. */
  font-variant-numeric: lining-nums;
}

/* Safari selection-highlight containment: constrain selection paint to the centered content column rather than the full-viewport ancestor block. */
.nav-inner,
.hero-content,
.guide-hero-content,
.section,
.guide-content,
.translation-switch,
.footer-inner,
.about-intro,
.author-summary,
.author-bibliography-header,
.author-articles,
.contributor-list,
.guides-language-desc {
  position: relative;
  isolation: isolate;
}

.guide-content h1 {
  font-family: var(--display-serif);
  font-size: 2rem;
  font-weight: 700;
  color: #121212;
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
}

.guide-content h2 {
  font-family: var(--display-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: #121212;
  line-height: 1.21;
  margin: 35px 0 20px;
}

.guide-content h3 {
  font-family: var(--display-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #121212;
  line-height: 1.25;
  margin: 2rem 0 0.8rem;
}

.guide-content h4 {
  font-family: var(--display-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #121212;
  margin: 1.6rem 0 0.7rem;
}

.guide-content h5 {
  font-family: var(--display-serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: #121212;
  margin: 1.4rem 0 0.6rem;
}

.guide-content h6 {
  font-family: var(--display-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: #121212;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.3rem 0 0.55rem;
}

/* Within the guide article reading area, CJK glyphs render in PingFang SC
   (Hei sans, dense at any weight). Headings drop one step (700/600 → 500)
   so the bold/regular contrast in display type stays visually balanced with
   the Latin Playfair Display. Inline strong / b is left at the browser
   default (700) so emphasized words stand out at body-copy size as clearly
   as their Latin counterparts.
   Home page chrome (which renders CJK in Noto Serif SC — a Song serif with
   lighter strokes than PingFang) intentionally keeps the EN weights, since
   Noto Serif SC needs a heavier numeric weight to match Playfair Display
   visually. */
html[lang^="zh"] .guide-content h1,
html[lang^="zh"] .guide-content h2,
html[lang^="zh"] .guide-content h3,
html[lang^="zh"] .guide-content h4,
html[lang^="zh"] .guide-content h5,
html[lang^="zh"] .guide-content h6 {
  font-weight: 500;
}

/* NYT 中文 caps the article headline at 2.5rem and uses the browser's
   default ("normal") line-height for CJK headings — tighter line-heights
   crop the PingFang SC glyphs visually compared with NYT's render. */
html[lang^="zh"] .guide-hero h1 {
  font-size: 2.5rem;
  line-height: normal;
  color: #000;
}

/* NYT EN figcaptions: Imperial body face, smaller size, muted gray. */
.guide-content figcaption {
  font-family: var(--reading-serif);
  font-size: 15px;
  line-height: 20px;
  color: #727272;
  margin-top: 10px;
}

/* NYT 中文 figcaptions: Helvetica/Arial first (Latin sans), then CJK Hei.
   Larger and black, distinct from NYT EN's gray Imperial. */
html[lang^="zh"] .guide-content figcaption {
  font-family: Helvetica, Arial, Georgia, "PingFang SC", "Heiti SC", "Microsoft YaHei", simsun, sans-serif;
  font-size: 1rem;
  line-height: 1.25;
  color: #000;
}

.guide-content p {
  font-family: var(--reading-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: #363636;
  line-height: 1.5;
  margin-bottom: 15px;
  text-align: left;
  word-break: break-word;
  hyphens: auto;
}

.guide-content ul, .guide-content ol {
  margin: 1rem 0 1.2rem 1.2rem;
}

/* Nested sub-bullet lists hug their parent item instead of taking the full
   block gap above/below, so multi-level bullets stay compact. */
.guide-content li > ul,
.guide-content li > ol {
  margin: 0.12rem 0 0.3rem 1.2rem;
}

.guide-content li {
  font-family: var(--reading-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: #363636;
  line-height: 1.55;
  margin-bottom: 0.15rem;
}

.guide-content li::marker {
  color: var(--muted);
}

/* ── Foldable blocks: <details>/<summary> written as raw HTML in guides ──
   Without these rules <summary> falls back to the browser default font and
   size, so it renders smaller than — and visually out of step with — the
   surrounding body text. Match it to the body. */
.guide-content details {
  margin: 1rem 0 1.2rem;
}

.guide-content summary {
  font-family: var(--reading-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.55;
  cursor: pointer;
}

.guide-content summary::marker {
  color: var(--muted);
}

.guide-content summary:hover {
  color: var(--muted);
}

/* Chinese guides follow NYT 中文 typography: body and lists share one size,
   one weight, and one line-height; paragraphs are left-aligned (NYT does not
   justify CJK body text). */
html[lang="zh-CN"] .guide-content p,
html[lang="zh-CN"] .guide-content li,
html[lang="zh-TW"] .guide-content p,
html[lang="zh-TW"] .guide-content li {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.875;
  color: #363636;
}

html[lang="zh-CN"] .guide-content summary,
html[lang="zh-TW"] .guide-content summary {
  font-size: 1.125rem;
  font-weight: 400;
}

html[lang="zh-CN"] .guide-content p,
html[lang="zh-TW"] .guide-content p {
  margin-bottom: 1.75rem;
}

/* A caption line written directly above an image (single newline = soft
   line break) lands in the same paragraph as that image. Justified text
   stretches every line except the last, so the caption above the image
   was being spread edge-to-edge. Left-align any paragraph holding an image. */
.guide-content p:has(img),
html[lang="zh-CN"] .guide-content p:has(img),
html[lang="zh-TW"] .guide-content p:has(img) {
  text-align: left;
}

.guide-content a {
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
  transition: text-decoration-color 0.3s;
}

.guide-content a:hover {
  text-decoration-color: var(--dark);
}

.guide-content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 4px;
}

/* An image on its own line is wrapped in a <p>; drop that paragraph's block
   margin so it does not stack on top of the image's own vertical margin and
   leave an oversized gap above/below the image. */
.guide-content p:has(> img:only-child) {
  margin: 0;
}

.guide-content blockquote {
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: var(--muted);
}

.guide-content code {
  background: var(--cream);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.88rem;
}

.guide-content hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 3rem 0;
}

/* ── Obsidian-style tables ── */
.guide-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.6rem 0;
  font-size: 0.95rem;
}

.guide-content th,
.guide-content td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.guide-content th {
  background: var(--cream);
  font-weight: 600;
}

/* ── Legacy `align` attribute support ──
   `align` is a presentational HTML attribute carrying zero specificity, so
   every rule above silently overrides it. Guides that hand-write raw HTML
   tables depend on it — and so does the editor preview, where marked.js
   renders markdown `:--:` column alignment as `align="..."` attributes
   (kramdown emits inline `style` instead, which is why published tables
   already align but the preview did not). Honor it explicitly here. */
.guide-content [align="center"]  { text-align: center; }
.guide-content [align="right"]   { text-align: right; }
.guide-content [align="left"]    { text-align: left; }
.guide-content [align="justify"] { text-align: justify; }

/* Block text inside an aligned container (e.g. a caption/title placed under
   a <div align="center"> wrapping a table) should follow the container's
   alignment instead of the default paragraph/heading/list alignment. */
.guide-content [align="center"] p,
.guide-content [align="center"] h1, .guide-content [align="center"] h2,
.guide-content [align="center"] h3, .guide-content [align="center"] h4,
.guide-content [align="center"] h5, .guide-content [align="center"] h6,
.guide-content [align="center"] li, .guide-content [align="center"] figcaption,
.guide-content [align="right"] p,
.guide-content [align="right"] h1, .guide-content [align="right"] h2,
.guide-content [align="right"] h3, .guide-content [align="right"] h4,
.guide-content [align="right"] h5, .guide-content [align="right"] h6,
.guide-content [align="right"] li, .guide-content [align="right"] figcaption,
.guide-content [align="left"] p,
.guide-content [align="left"] h1, .guide-content [align="left"] h2,
.guide-content [align="left"] h3, .guide-content [align="left"] h4,
.guide-content [align="left"] h5, .guide-content [align="left"] h6,
.guide-content [align="left"] li, .guide-content [align="left"] figcaption {
  text-align: inherit;
}

/* A table carrying align="center" centers itself when it is not full-width. */
.guide-content table[align="center"] { margin-left: auto; margin-right: auto; }
.guide-content table[align="right"]  { margin-left: auto; margin-right: 0; }

/* ── Obsidian-style fenced code block ── */
.guide-content pre {
  background: var(--cream);
  padding: 0.85rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1.6rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
}

.guide-content pre code {
  background: none;
  padding: 0;
  font-size: 1em;
}

/* ── Guide link cards ── */
.guide-link {
  text-decoration: none;
  display: block;
  transition: transform 0.3s;
}

.guide-link:hover {
  transform: translateY(-4px);
}

/* ── Feature cards as links ── */
a.feature {
  text-decoration: none;
  display: block;
  transition: transform 0.3s;
}

a.feature:hover {
  transform: translateY(-4px);
}

/* ── About page ── */
.about-hero {
  min-height: auto;
  padding: 10rem 2.5rem 4.5rem;
}

.about-hero .hero-content {
  max-width: 760px;
}

.about-intro {
  max-width: 760px;
  margin: 0 auto 4rem;
}

.about-intro p {
  font-size: 1.05rem;
  color: var(--dark);
  line-height: 1.9;
}

.about-intro p + p {
  margin-top: 1.4rem;
}

.cfa-body {
  text-align: center;
}
.cfa-body p {
  text-align: left;
}
.cfa-body a:not(.cfa-portal-btn) {
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
  transition: text-decoration-color 0.3s;
}
.cfa-body a:not(.cfa-portal-btn):hover {
  text-decoration-color: var(--dark);
}
.cfa-body p ~ .cfa-portal-btn {
  margin-top: 2rem;
}
.about-principles + .cfa-body {
  margin-top: 2rem;
}
.cfa-updated {
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: left;
}
.cfa-portal-btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--dark);
  padding: 0.7rem 2rem;
  text-decoration: none;
  transition: opacity 0.2s;
}
.cfa-portal-btn:hover {
  opacity: 0.85;
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.about-principle {
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.about-principle-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 0.8rem;
}

.about-principle h3,
.contributor-row h3,
.profile-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 0.6rem;
  word-break: keep-all;
  overflow-wrap: normal;
}

.about-principle p:last-child {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.8;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.profile-card {
  border: 1px solid var(--border);
  padding: 1.25rem;
  background: rgba(237, 234, 228, 0.38);
  /* Lay the card out as a column so the Author Page link can be pinned to the
     bottom (margin-top: auto on .profile-links), aligning it across cards whose
     affiliation/cohort/summary text runs to different line counts. The grid row
     already stretches all cards to equal height. */
  display: flex;
  flex-direction: column;
}

.profile-media {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.2rem;
  background: linear-gradient(180deg, rgba(181, 176, 168, 0.18) 0%, rgba(237, 234, 228, 0.8) 100%);
  overflow: hidden;
}

.profile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--warm-gray);
  letter-spacing: 0.08em;
}

.profile-eyebrow,
.contributor-count,
.contributor-meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-eyebrow,
.contributor-meta {
  color: var(--warm-gray);
}

.profile-meta,
.profile-summary,
.contributor-summary {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.75;
}

.person-meta-line {
  display: block;
}

.person-meta-line + .person-meta-line {
  margin-top: 0.1rem;
}

.profile-meta {
  margin-bottom: 0.8rem;
}

.profile-summary {
  margin-bottom: 0.9rem;
}

.profile-name-link,
.contributor-name-link {
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

.profile-name-link:hover,
.contributor-name-link:hover {
  color: var(--muted);
  border-bottom-color: var(--muted);
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
  /* Pin to the bottom of the (equal-height) card so the Author Page link lines
     up across cards regardless of how much affiliation/cohort/summary text
     sits above it. */
  margin-top: auto;
}

.profile-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid var(--dark);
  padding-bottom: 0.15rem;
}

.profile-link:hover {
  color: var(--muted);
  border-bottom-color: var(--muted);
}

.about-empty {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  color: var(--text);
}

.contributor-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.contributor-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
}

.contributor-main {
  flex: 1;
}

.contributor-meta {
  margin-bottom: 0.65rem;
}

.contributor-summary {
  margin-bottom: 0.65rem;
}

.contributor-count {
  color: var(--dark);
  white-space: nowrap;
  padding-top: 0.35rem;
}

.contributor-link {
  margin-top: 0.15rem;
}

.author-header {
  padding-top: 9rem;
}

.author-profile {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.author-photo {
  aspect-ratio: 4 / 5;
  background: var(--cream);
  overflow: hidden;
}

.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.author-copy h1 {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: 0.8rem;
  word-break: keep-all;
  overflow-wrap: normal;
}

.author-role {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 1rem;
}

.author-meta {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 0.4rem 1rem;
  align-items: baseline;
  max-width: 620px;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  text-align: left;
}

.author-meta .person-meta-line {
  display: contents;
}

.author-meta .person-meta-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.author-summary {
  max-width: 620px;
  color: var(--dark);
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: 1.5rem;
}

.author-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.author-bibliography-header {
  max-width: 760px;
}

#bibliography-heading {
  font-size: clamp(1.85rem, 4vw, 2.2rem);
  line-height: 1.16;
}

.bibliography-heading-name {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.author-contact-list {
  display: grid;
  gap: 0.75rem;
  max-width: 620px;
  margin-bottom: 1.5rem;
}

.author-contact-item {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  margin: 0;
}

.author-contact-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.author-contact-value {
  min-width: 0;
  color: var(--dark);
  font-size: 0.98rem;
  line-height: 1.7;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.author-contact-value:hover {
  color: var(--muted);
}

.author-stat {
  min-width: 160px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  background: rgba(237, 234, 228, 0.38);
}

.author-stat-value {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.author-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.author-links .profile-link {
  margin-top: 0;
}

/* Coauthor list */
.coauthor-list {
  border-top: 1px solid var(--border);
}

.coauthor-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

a.coauthor-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a.coauthor-name:hover {
  border-bottom-color: var(--dark);
}

span.coauthor-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--dark);
}

.coauthor-count {
  font-size: 0.82rem;
  color: var(--warm-gray);
  white-space: nowrap;
  margin-left: 1rem;
}

.author-bio {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.author-articles {
  max-width: 860px;
  margin: 0 auto;
}

.author-article-card {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.author-article-card:last-child {
  border-bottom: 1px solid var(--border);
}

.author-article-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.author-article-head h3 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--dark);
}

.author-article-category,
.author-article-count {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.author-article-category {
  color: var(--warm-gray);
  margin-bottom: 0.45rem;
}

.author-article-count {
  color: var(--text);
  white-space: nowrap;
  padding-top: 0.35rem;
}

.author-article-desc {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.author-article-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
 }

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu { display: flex; }
  .nav-inner { padding: 1rem 1.5rem; }
  .nav-actions { gap: 0.65rem; }
  .nav-language-switch { display: none; }
  .nav-language-pill {
    min-width: 0;
    min-height: 30px;
    padding: 0.32rem 0.45rem;
    font-size: 0.62rem;
  }

  .hero h1 { font-size: 2.6rem; }
  .hero-subtitle br { display: none; }

  .guide-content p,
  .guide-content li { font-size: 1.0625rem; }
  html[lang="zh-CN"] .guide-content p,
  html[lang="zh-CN"] .guide-content li,
  html[lang="zh-TW"] .guide-content p,
  html[lang="zh-TW"] .guide-content li { font-size: 1.0625rem; }
  .guide-content table { display: block; overflow-x: auto; }

  .grid-two { grid-template-columns: 1fr; gap: 2.5rem; }
  .grid-three { grid-template-columns: 1fr; gap: 2rem; }
  .about-principles { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .author-profile { grid-template-columns: 1fr; gap: 2rem; }
  .profile-card h3,
  .contributor-row h3 {
    font-size: clamp(1.15rem, 5vw, 1.4rem);
    line-height: 1.12;
    white-space: nowrap;
  }
  .author-copy h1 {
    font-size: clamp(1.55rem, 8vw, 2.4rem);
    line-height: 1.08;
    white-space: nowrap;
  }
  .author-bibliography-header {
    max-width: 100%;
  }
  #bibliography-heading {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
    line-height: 1.18;
  }
  .author-contact-item { grid-template-columns: 1fr; gap: 0.25rem; }
  .author-meta { grid-template-columns: 1fr; gap: 0.25rem; }
  .author-article-head { display: block; }
  .author-article-count { margin-top: 0.75rem; padding-top: 0; }

  .steps { flex-direction: column; gap: 2rem; }
  .contributor-row { display: block; }
  .contributor-count { padding-top: 0; margin-top: 0.75rem; }

  .section { padding: 4rem 1.5rem; }
  .page-header {
    padding-top: 7rem;
    padding-bottom: 2.75rem;
  }
  .hero { padding: 5rem 1.5rem 3rem; }
  .guides-language-header { display: block; }
  .translation-switch { padding: 0 1.5rem 2.5rem; }
  .about-hero { padding: 8rem 1.5rem 3.5rem; }
  .author-header { padding-top: 7.5rem; }
}

/* ── Admin Page ── */
.admin-wrapper {
  padding-top: 5rem;
}

.admin-login {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2.5rem;
}

.admin-login-box {
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.admin-login-title {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.admin-login-subtitle {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.admin-signup-id-warning {
  font-size: 0.8rem;
  color: var(--warm-gray);
  line-height: 1.5;
  margin: -0.4rem 0 0;
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-error {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--status-rejected-fg);
}

.admin-success {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--status-approved-fg);
}

/* Unverified-email banner shown at the top of the dashboard */
/* Verification notice: a restrained, warm bar at the top of the dashboard — a
   soft cream wash under a hairline rule, a fine mail glyph, message + status
   stacked, and quiet text-link actions. NOT sticky: a pinned bar collided with
   the top nav on scroll, and a slab of colour is louder than this page wants. */
.admin-verify-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin: 0 0 0.25rem;
  padding: 0.9rem 2rem;
  background: #f8f3e7;
  border-bottom: 1px solid var(--border);
}

.admin-verify-main {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}

.admin-verify-icon {
  flex: none;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--status-pending-fg);
}

.admin-verify-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#verify-email-banner-text {
  font-size: 0.92rem;
  color: var(--text);
}

.admin-verify-note {
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-verify-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: none;
}

.admin-verify-action {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--status-revise-fg);
  cursor: pointer;
  white-space: nowrap;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.admin-verify-action:hover:not(:disabled) { text-decoration: underline; }
.admin-verify-action-quiet { color: var(--muted); }
.admin-verify-action:disabled { color: var(--warm-gray); cursor: default; text-decoration: none; }

.admin-verify-sep {
  width: 1px;
  height: 0.9rem;
  background: var(--border);
}

.admin-auth-links {
  margin-top: 2rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.admin-auth-links a {
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  transition: border-color 0.3s, color 0.3s;
}

.admin-auth-links a:hover {
  border-bottom-color: var(--dark);
}

.admin-auth-sep {
  margin: 0 0.6rem;
  color: var(--warm-gray);
}

.admin-hero {
  padding: 4rem 2.5rem 3rem;
  text-align: center;
}

.admin-hero-content {
  max-width: 620px;
  margin: 0 auto;
}

.admin-hero-title {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.admin-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.8;
}

.admin-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 2.5rem 6rem;
}

.admin-panel {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.admin-card {
  padding: 2.5rem;
  border: 1px solid var(--border);
  background: rgba(237, 234, 228, 0.25);
}

.admin-card-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.admin-card-desc {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.admin-guide-list {
  list-style: none;
}

.admin-guide-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}

.admin-guide-item:first-child {
  border-top: 1px solid var(--border);
}

.admin-guide-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--dark);
}

.admin-guide-meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--dark);
  cursor: pointer;
}

.admin-checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--dark);
  cursor: pointer;
}

.admin-input {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--dark);
  background: var(--ivory);
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}

.admin-input:focus {
  border-color: var(--warm-gray);
}

.admin-input::placeholder {
  color: var(--warm-gray);
}

.admin-input:disabled {
  background: var(--cream);
  color: var(--muted);
  cursor: not-allowed;
}

/* A required field the submit handler found empty. "Please fill out all fields"
   on its own left authors hunting for which one, so the offenders are marked
   here and named in the message. Cleared as soon as the field is filled in. */
.admin-input.is-missing,
.admin-textarea.is-missing {
  border-color: var(--status-rejected-fg);
  /* A wash of --status-rejected-fg (#a65a4e) over the ivory field background. */
  background: rgba(166, 90, 78, 0.05);
}

.admin-input.is-missing:focus,
.admin-textarea.is-missing:focus {
  border-color: var(--status-rejected-fg);
}

.admin-label.is-missing {
  color: var(--status-rejected-fg);
}

.admin-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23b5b0a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.admin-textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.7;
  font-family: monospace;
  font-size: 0.88rem;
}

.admin-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--dark);
  border: 1.5px solid var(--dark);
  padding: 0.9rem 2.4rem;
  cursor: pointer;
  transition: background 0.4s, color 0.4s;
}

.admin-btn:hover {
  background: transparent;
  color: var(--dark);
}

.admin-btn:disabled {
  cursor: not-allowed;
}

.admin-btn-small {
  padding: 0.55rem 1.4rem;
  font-size: 0.72rem;
}

.admin-btn-outline {
  background: transparent;
  color: var(--dark);
}

.admin-btn-outline:hover {
  background: var(--dark);
  color: var(--ivory);
}

/* ── Admin Profile ── */
.admin-profile-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.admin-avatar-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: linear-gradient(180deg, rgba(181, 176, 168, 0.18) 0%, rgba(237, 234, 228, 0.8) 100%);
  transition: border-color 0.3s;
}

.admin-avatar:hover {
  border-color: var(--warm-gray);
}

.admin-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--warm-gray);
  letter-spacing: 0.08em;
}

.admin-avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(44, 42, 38, 0.7);
  color: var(--ivory);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.35rem 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.admin-avatar:hover .admin-avatar-overlay {
  opacity: 1;
}

.admin-avatar-hint {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--warm-gray);
  letter-spacing: 0.06em;
}

.admin-profile-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* ── Admin Submissions ── */
.admin-submissions {
  border-top: 1px solid var(--border);
}

.admin-submission-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.admin-submission-item:last-child {
  border-bottom: none;
}

.admin-submission-main {
  flex: 1;
  min-width: 0;
}

.admin-submission-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.admin-submission-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.admin-submission-title a:hover {
  border-bottom-color: var(--dark);
}

.admin-submission-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--warm-gray);
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}
.admin-date-label {
  display: inline-block;
  min-width: 5.5em;
}

.admin-submission-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.admin-author-link {
  color: var(--warm-gray);
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: flex-start;
  width: fit-content;
}
.admin-author-link:hover {
  color: var(--dark);
}

.admin-status {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border: 1px solid;
  white-space: nowrap;
  min-width: 9rem;
  text-align: center;
  display: inline-block;
}

.admin-status-pending {
  color: var(--status-pending-fg);
  border-color: var(--status-pending-border);
  background: var(--status-pending-bg);
}

.admin-status-approved {
  color: var(--status-approved-fg);
  border-color: var(--status-approved-border);
  background: var(--status-approved-bg);
}

.admin-status-rejected {
  color: var(--status-rejected-fg);
  border-color: var(--status-rejected-border);
  background: var(--status-rejected-bg);
}

.admin-status-revise_resubmit {
  color: var(--status-revise-fg);
  border-color: var(--status-revise-border);
  background: var(--status-revise-bg);
}

.admin-rnr-feedback {
  background: #faf7f0;
  border: 1px solid #e8dfc8;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.admin-rnr-feedback-approved {
  border-color: var(--status-approved-border);
  background: rgba(163, 196, 167, 0.12);
}

.admin-rnr-feedback-approved .admin-rnr-feedback-label {
  color: var(--status-approved-fg);
}

.admin-rnr-feedback-rejected {
  border-color: var(--status-rejected-border);
  background: rgba(212, 162, 154, 0.12);
}

.admin-rnr-feedback-rejected .admin-rnr-feedback-label {
  color: var(--status-rejected-fg);
}

.admin-rnr-feedback-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--status-pending-fg);
  margin-bottom: 0.4rem;
}

.admin-rnr-feedback-body {
  font-size: 0.88rem;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
}

.admin-rnr-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.admin-rnr-form-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.admin-char-counter {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
  margin-top: 0.3rem;
}

.admin-char-counter.admin-char-near-limit {
  color: var(--status-pending-fg);
}

.admin-char-counter.admin-char-at-limit {
  color: var(--status-rejected-fg);
}

.admin-modal-content-wide {
  max-width: 860px;
}

.admin-revision-thread {
  margin-bottom: 1.25rem;
}

.admin-thread-toggle {
  font-size: 0.82rem;
  color: var(--warm-gray);
  cursor: pointer;
  padding: 0.3rem 0;
  list-style: none;
}

.admin-thread-toggle::-webkit-details-marker {
  display: none;
}

.admin-thread-toggle::before {
  content: "▸ ";
}

details[open] > .admin-thread-toggle::before {
  content: "▾ ";
}

.admin-revision-entry {
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}

.admin-revision-entry-decision {
  border-left-color: var(--status-pending-border);
}

.admin-revision-round-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.admin-revision-entry .admin-rnr-feedback + .admin-rnr-feedback {
  margin-top: 0.5rem;
  margin-left: 0.75rem;
  border-color: var(--status-approved-border);
  background: rgba(163, 196, 167, 0.1);
}

.admin-revision-timestamp {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.admin-empty-state {
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
  padding: 1rem 0;
}

.admin-signout-wrap {
  text-align: center;
  padding-top: 1rem;
}

.admin-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-output-filename {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--muted);
}

.admin-output {
  background: var(--ivory);
  border: 1px solid var(--border);
  padding: 1.5rem;
  font-family: monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text);
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .admin-login { padding: 3rem 1.5rem; }
  .admin-login-title { font-size: 2.2rem; }
  .admin-hero { padding: 3rem 1.5rem 2rem; }
  .admin-hero-title { font-size: 2rem; }
  .admin-section { padding: 2.5rem 1.5rem 4rem; }
  .admin-card { padding: 1.5rem; }
  .admin-guide-item { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .admin-output-header { flex-direction: column; align-items: flex-start; }
  .admin-profile-layout { flex-direction: column; align-items: center; gap: 1.5rem; }
  .admin-profile-fields { width: 100%; }
  .admin-submission-item { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .admin-modal-content { width: 95%; max-height: 85vh; }
  .admin-modal-actions { flex-direction: column; }
  .admin-usage-metrics { gap: 0.4rem 1rem; }
}

/* ── Admin Review Panel ── */
.admin-review-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

.admin-tab {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: all 0.3s;
}

.admin-tab.active {
  color: var(--dark);
  border-color: var(--dark);
}
.admin-tab.active[data-filter="pending"] {
  color: var(--status-pending-fg);
  border-color: var(--status-pending-border);
  background: var(--status-pending-bg);
}
.admin-tab.active[data-filter="approved"] {
  color: var(--status-approved-fg);
  border-color: var(--status-approved-border);
  background: var(--status-approved-bg);
}
.admin-tab.active[data-filter="rejected"] {
  color: var(--status-rejected-fg);
  border-color: var(--status-rejected-border);
  background: var(--status-rejected-bg);
}
.admin-tab.active[data-filter="revise_resubmit"] {
  color: var(--status-revise-fg);
  border-color: var(--status-revise-border);
  background: var(--status-revise-bg);
}

.admin-tab:hover {
  color: var(--dark);
}

.admin-review-item {
  cursor: pointer;
}

.admin-review-item:hover {
  background: var(--cream);
}

/* ── Usage Panel ── */
.admin-usage-section {
  margin-top: 1.8rem;
}
.admin-usage-section:first-child {
  margin-top: 1.2rem;
}
.admin-usage-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Quota rows */
.admin-usage-quota {
  margin-bottom: 1.4rem;
}
.admin-usage-quota-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.admin-usage-quota-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dark);
}
.admin-usage-quota-value {
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  color: #7a7570;
}
.admin-usage-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.admin-usage-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--olive, #8a7e6b);
  transition: width 0.4s ease;
}
.admin-usage-bar-fill.warn {
  background: #c9a227;
}
.admin-usage-bar-fill.danger {
  background: #b44;
}
.admin-usage-quota-note {
  font-size: 0.68rem;
  color: #7a7570;
  margin-top: 0.25rem;
}

/* Compact metric row for overview */
.admin-usage-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
}
.admin-usage-metric {
  font-size: 0.78rem;
  color: #7a7570;
}
.admin-usage-metric b {
  font-weight: 600;
  color: var(--dark);
  font-family: var(--mono, monospace);
}

/* ── Modal ── */
.admin-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(44, 42, 38, 0.5);
}

.admin-modal-content {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--border);
  max-width: 720px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2.5rem;
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.admin-modal-close {
  font-size: 1.8rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.admin-modal-close:hover {
  color: var(--dark);
}


.admin-modal-body {
  margin: 1.5rem 0;
}

.admin-preview-content {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 1.5rem;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
  color: var(--text);
}

.admin-modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-approved-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  gap: 0.75rem;
}

.admin-btn-danger {
  color: #9b2c2c;
  border-color: #9b2c2c;
}

.admin-btn-danger:hover {
  background: #9b2c2c;
  color: var(--ivory);
}
.admin-btn.admin-btn-danger:not(.admin-btn-outline) {
  background: #9b2c2c;
  color: var(--ivory);
  border-color: #9b2c2c;
}
.admin-btn.admin-btn-danger:not(.admin-btn-outline):hover {
  background: #7a2020;
  border-color: #7a2020;
}

/* ── Profile Links ── */
.admin-link-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.admin-link-label {
  flex: 1;
  min-width: 0;
}

.admin-link-url {
  flex: 2;
  min-width: 0;
}

.admin-link-remove {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--warm-gray);
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
  transition: color 0.2s;
}

.admin-link-remove:hover {
  color: #9b2c2c;
}

@media (max-width: 768px) {
  .admin-link-row {
    flex-wrap: wrap;
  }
  .admin-link-label, .admin-link-url {
    flex: 1 1 100%;
  }
}

/* ── Author ID Display ── */
.admin-author-id-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: var(--light-stone, #f0ece3);
  color: var(--warm-gray);
  border: 1px solid var(--border);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.admin-coauthor-toggle {
  margin-top: 0.5rem;
  font-size: 0.82rem;
}

/* ── Co-Authors: Search Bar ── */
.admin-coauthor-search {
  display: flex;
  gap: 0.5rem;
}

.admin-coauthor-search .admin-input {
  flex: 1;
  min-width: 0;
}

.admin-coauthor-search .admin-btn {
  flex-shrink: 0;
}

/* ── Co-Authors: Search Result ── */
.admin-coauthor-search-result {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-top: 0.5rem;
}

.admin-coauthor-search-result.admin-coauthor-searching {
  background: var(--bg-alt, #f5f3ef);
  border: 1px solid var(--border);
  color: var(--warm-gray);
}

.admin-coauthor-search-result.admin-coauthor-result-success {
  background: var(--bg-alt, #f5f3ef);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

.admin-coauthor-search-result.admin-coauthor-result-error {
  background: rgba(192, 57, 43, 0.05);
  border: 1px solid rgba(192, 57, 43, 0.14);
  color: var(--error, #c0392b);
}

.admin-coauthor-dismiss {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--warm-gray);
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.admin-coauthor-dismiss:hover {
  opacity: 1;
}

.admin-coauthor-result-info {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.admin-coauthor-result-name {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text);
}

a.admin-coauthor-result-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.admin-coauthor-result-name:hover {
  color: var(--success, #2d7a3a);
}

.admin-coauthor-result-name-no-profile {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}

.admin-coauthor-result-name-no-profile:hover {
  color: var(--warm-gray);
}

.admin-coauthor-no-profile {
  width: 100%;
  font-size: 0.78rem;
  color: var(--warm-gray);
  font-style: italic;
  margin-top: 0.3rem;
}

.admin-coauthor-result-note {
  font-size: 0.8rem;
  color: var(--warm-gray);
  font-style: italic;
  white-space: nowrap;
}

.admin-coauthor-result-text {
  font-size: 0.88rem;
}

.admin-coauthor-add-btn {
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  flex-shrink: 0;
  background: none;
  color: var(--success, #2d7a3a);
  border: 1px solid rgba(45, 122, 58, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.admin-coauthor-add-btn:hover {
  background: rgba(45, 122, 58, 0.08);
  border-color: rgba(45, 122, 58, 0.5);
}

/* ── Co-Authors: Added List ── */
#coauthors-list:not(:empty) {
  margin-top: 0.7rem;
}

.admin-coauthor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  background: var(--bg-alt, #f5f3ef);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.admin-coauthor-order {
  min-width: 1.4rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--warm-gray);
}

.admin-coauthor-name-display {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-coauthor-name-display:hover {
  color: var(--success, #2d7a3a);
}

.admin-coauthor-name-no-profile {
  cursor: pointer;
  text-decoration-style: dashed;
}

.admin-coauthor-no-profile-tip {
  width: 100%;
  font-size: 0.78rem;
  color: var(--warm-gray);
  font-style: italic;
  margin-top: 0.25rem;
}

.admin-coauthor-id-display {
  font-size: 0.78rem;
  color: var(--warm-gray);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.admin-coauthor-move {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--warm-gray);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s;
}

.admin-coauthor-move:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--text);
}

.admin-coauthor-move:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 768px) {
  .admin-coauthor-search {
    flex-direction: column;
  }
  .admin-coauthor-row {
    flex-wrap: wrap;
  }
  .admin-coauthor-id-display {
    display: none;
  }
}

/* ── Article Preview Panel ── */
.admin-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.admin-editor-header .admin-label {
  margin-bottom: 0;
}

.admin-editor-tab-newtab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--warm-gray);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.admin-editor-tab-newtab:hover {
  background: var(--cream);
  border-color: var(--dark);
  color: var(--dark);
}

/* ── Live split-pane editor ── */
.admin-editor-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-editor-viewmode {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.admin-editor-viewbtn {
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--warm-gray);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.admin-editor-viewbtn:first-child {
  border-left: none;
}

.admin-editor-viewbtn:hover {
  background: var(--cream);
  color: var(--dark);
}

.admin-editor-viewbtn.is-active {
  background: var(--dark);
  color: var(--ivory);
}

.admin-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto auto;
  gap: 0 1rem;
}

.admin-editor-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-editor-pane-src {
  display: contents;
}

/* Explicit placement for grid items */
.admin-editor-pane-src > .admin-md-toolbar { grid-column: 1; grid-row: 1; }
.admin-editor-pane-src > .admin-textarea-editor { grid-column: 1; grid-row: 2; height: 100%; }
.admin-editor-pane-src > .admin-md-gallery { grid-column: 1; grid-row: 3; }
.admin-editor-pane-src > .admin-md-hint { grid-column: 1; grid-row: 4; align-self: start; }
.admin-editor-pane-preview { grid-column: 2; grid-row: 1 / 3; }

/* Handle split[data-view="edit"] */
.admin-editor-split[data-view="edit"] { grid-template-columns: 1fr; }
.admin-editor-split[data-view="edit"] .admin-editor-pane-preview { display: none; }
.admin-editor-split[data-view="edit"] .admin-editor-pane-src > * { grid-column: 1; }

/* Handle split[data-view="preview"] */
.admin-editor-split[data-view="preview"] { grid-template-columns: 1fr; }
.admin-editor-split[data-view="preview"] .admin-editor-pane-src { display: none; }
.admin-editor-split[data-view="preview"] .admin-editor-pane-preview { grid-column: 1; grid-row: 2; }

.admin-editor-preview-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--border);
  background: var(--ivory);
}

@media (max-width: 768px) {
  .admin-editor-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }
  .admin-editor-pane-src > .admin-md-toolbar { grid-row: 1; }
  .admin-editor-pane-src > .admin-textarea-editor { grid-row: 2; min-height: 300px; }
  .admin-editor-pane-src > .admin-md-gallery { grid-row: 3; }
  .admin-editor-pane-src > .admin-md-hint { grid-row: 4; }
  .admin-editor-pane-preview { grid-column: 1; grid-row: 5; min-height: 320px; }
}

/* ── Dedicated editor page (/editor/) launcher + full-screen mode ── */
/* On the dashboard the article editor lives on the /editor/ page, so the
   Submit Article card shows only the launcher button; the form markup stays in
   the DOM (so admin.js can wire it on the editor page) but is hidden here. */
body:not(.editor-mode) .article-editor-body { display: none; }
.open-editor-launch { margin-top: 0.5rem; }
.open-editor-btn { display: inline-block; text-decoration: none; }
.open-editor-hint { font-size: 0.82rem; color: var(--warm-gray); margin-top: 0.6rem; }

.editor-back-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--warm-gray);
  text-decoration: none;
  margin-bottom: 1rem;
}
.editor-back-link::before { content: "\2190\00a0"; }
.editor-back-link:hover { color: var(--dark); text-decoration: underline; }

/* Editor page: strip the dashboard chrome and let the editor fill the screen. */
body.editor-mode .nav,
body.editor-mode .footer,
body.editor-mode .admin-hero,
body.editor-mode .admin-dashboard > .divider,
body.editor-mode #featured-articles-card,
body.editor-mode #published-articles-card,
body.editor-mode #admin-review-panel,
body.editor-mode #admin-usage-panel,
body.editor-mode .admin-signout-wrap,
body.editor-mode .admin-card:not(.admin-card-submit) { display: none; }

/* The Submit Article card becomes a fixed, full-viewport two-pane editor:
   compact metadata header on top, then source (left half) ↔ live result (right
   half) filling the whole browser window. (No overflow:hidden on <body> — when
   signed out the editor card is display:none and the sign-in view must remain
   scrollable if it is taller than the viewport.) */
body.editor-mode .admin-card-submit {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--ivory);
  padding: 2rem clamp(1.25rem, 5vw, 3.5rem) 1.75rem;
  overflow-y: auto;
}
/* Compose the editor as a centered column instead of an edge-to-edge admin form:
   the masthead, metadata, and split panes all share one measured width. */
body.editor-mode .editor-back-link,
body.editor-mode .admin-card-submit > .admin-card-title,
body.editor-mode .article-editor-body {
  width: 100%;
  max-width: 1240px;
}
body.editor-mode .admin-card-submit > .admin-card-title {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0.1rem 0 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
}
body.editor-mode .admin-card-submit > .admin-card-desc { display: none; }

/* Flex chain so the editor split grows to fill all remaining height. */
body.editor-mode .article-editor-body,
body.editor-mode #article-form,
body.editor-mode .admin-field-editor {
  display: flex;
  flex-direction: column;
  /* Grow to fill the viewport when the metadata is collapsed, but never shrink
     below content (flex-shrink 0): an expanded metadata header makes the whole
     card scroll instead of the editor overflowing onto the submit button. */
  flex: 1 0 auto;
  min-height: 0;
}

/* Collapsible Metadata Section */
body.editor-mode .admin-meta-details {
  margin-bottom: 0.5rem;
}
body.editor-mode .admin-meta-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
body.editor-mode .admin-meta-summary::-webkit-details-marker { display: none; }
/* Custom disclosure caret: points right when collapsed, rotates down when open. */
body.editor-mode .admin-meta-summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
body.editor-mode .admin-meta-details[open] .admin-meta-summary::before {
  transform: rotate(45deg);
}
body.editor-mode .admin-meta-summary:hover {
  color: var(--dark);
}
body.editor-mode .admin-meta-details[open] .admin-meta-summary {
  margin-bottom: 1.25rem;
}

/* Metadata grid. Column spans come from explicit role classes on each field,
   never positional nth-child: inserting or reordering a field can no longer
   silently drop a neighbour to a 1-column cell (the bug that collapsed the
   Description box). Any unclassified field defaults to full width. */
body.editor-mode .editor-meta {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.35rem 1.5rem;
  flex: 0 0 auto;
  margin-bottom: 1.75rem;
}
body.editor-mode .editor-meta .admin-field { margin: 0; min-width: 0; grid-column: span 12; }
body.editor-mode .editor-meta .editor-meta-third { grid-column: span 4; }
body.editor-mode .editor-meta .editor-meta-full { grid-column: span 12; }

@media (max-width: 900px) {
  body.editor-mode .editor-meta .editor-meta-third { grid-column: span 6; }
}

@media (max-width: 768px) {
  body.editor-mode .editor-meta .admin-field { grid-column: span 12 !important; }
}

body.editor-mode .editor-meta .admin-label { 
  font-size: 0.75rem; 
  margin-bottom: 0.4rem; 
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}
body.editor-mode .editor-meta .admin-input { 
  padding: 0.6rem 0.8rem; 
}

/* Co-author control: match the other metadata fields instead of a big CTA box. */
body.editor-mode .editor-meta .admin-field-coauthor { position: relative; }
body.editor-mode .editor-meta .admin-coauthor-toggle {
  margin-top: 0;
  width: 100%;
  text-align: left;
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.6rem 0.8rem;
  transition: all 0.2s ease;
}
body.editor-mode .editor-meta .admin-coauthor-toggle:hover {
  border-color: var(--warm-gray);
  color: var(--dark);
  background: var(--ivory);
}
/* Co-authors occupy a full-width row, so the expanded panel flows inline and
   pushes the following fields down — no absolute popover overlapping the editor. */
body.editor-mode .editor-meta #coauthor-section {
  margin-top: 0.6rem;
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(237, 234, 228, 0.4);
  border: 1px solid var(--border);
  border-radius: 8px;
}
body.editor-mode .editor-meta #coauthor-section > div:first-child > .admin-label { display: none; }

/* Anonymous toggle is its own full-width row below the description, set off by a
   hairline rule. */
body.editor-mode .editor-meta .editor-meta-anon {
  gap: 0.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
body.editor-mode .editor-meta .editor-meta-anon-hint {
  font-size: 0.78rem;
  color: var(--warm-gray);
  line-height: 1.5;
  margin: 0.15rem 0 0 1.55rem;
}
/* When anonymous is checked, the author field previews the public "Anonymous"
   label the byline will show — muted + italic to read as a derived value. */
body.editor-mode .admin-input.admin-input-anon {
  font-style: italic;
  color: var(--muted);
}

/* Co-author actions share a row: "Add co-author" + "Add anonymous author". */
body.editor-mode .editor-meta .admin-coauthor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
body.editor-mode .editor-meta .admin-coauthor-actions .admin-coauthor-toggle {
  flex: 1 1 12rem;
  width: auto;
  text-align: center;
}

/* Anonymous co-author row: a credited slot with no linked identity, so the name
   is plain and italic — not the underlined/hover-linked style of a real author. */
.admin-coauthor-name-anon {
  text-decoration: none;
  font-style: italic;
  color: var(--muted);
  cursor: default;
}
.admin-coauthor-name-anon:hover { color: var(--muted); }

/* The split + panes fill the rest: left half = source, right half = live result. */
body.editor-mode .admin-field-editor .admin-editor-header { flex: 0 0 auto; }
/* The split grows to fill leftover height when the metadata is collapsed, but
   never shrinks below a comfortable writing height — so an expanded metadata
   header makes the page scroll rather than crushing the editor. */
body.editor-mode .admin-editor-split { flex: 1 1 auto; min-height: 60vh; }
body.editor-mode .admin-editor-pane { min-height: 0; }
body.editor-mode .admin-editor-pane-src .admin-textarea-editor {
  flex: 1 1 auto;
  min-height: 0;
  resize: none;
}
body.editor-mode .admin-editor-preview-frame {
  flex: 1 1 auto;
  min-height: 0;
}
body.editor-mode #submit-article-btn { flex: 0 0 auto; margin-top: 0.6rem; align-self: flex-start; }

/* Mobile: stack the two panes and let the page scroll. */
@media (max-width: 768px) {
  body.editor-mode .admin-card-submit { position: static; }
  body.editor-mode .admin-editor-pane-src .admin-textarea-editor { min-height: 40vh; }
  body.editor-mode .admin-editor-preview-frame { min-height: 50vh; }
}

/* ── Markdown Toolbar ── */
.admin-md-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.55rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-bottom: none;
  font-family: var(--sans);
}

.admin-md-toolbar-group {
  display: flex;
  gap: 0.2rem;
}

.admin-md-toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 1.1rem;
  background: var(--border);
  margin: 0 0.25rem;
}

.admin-md-btn {
  min-width: 2.2rem;
  padding: 0.35rem 0.55rem;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dark);
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.admin-md-btn-mono {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.admin-md-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.55rem;
}

.admin-md-btn-icon svg {
  display: block;
}

/* Import-from-PDF: a labeled accent button so the action is obvious rather than
   lost among the icon-only formatting buttons. */
.admin-md-btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-color: var(--dark);
}

.admin-md-btn-pdf svg {
  display: block;
}

.admin-md-btn:hover {
  background: var(--dark);
  color: var(--ivory);
  border-color: var(--dark);
}

.admin-md-btn:active {
  transform: translateY(1px);
}

.admin-md-btn:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 1px;
}

/* ── Heading dropdown (expand/collapse menu) ── */
.admin-md-dropdown {
  position: relative;
}

.admin-md-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.admin-md-caret {
  display: block;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.admin-md-dropdown-open .admin-md-caret {
  transform: rotate(180deg);
}

.admin-md-dropdown-open .admin-md-dropdown-toggle {
  background: var(--dark);
  color: var(--ivory);
  border-color: var(--dark);
}

.admin-md-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  min-width: 11.5rem;
  padding: 0.3rem;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(44, 42, 38, 0.16);
}

.admin-md-dropdown-open .admin-md-menu {
  display: flex;
}

.admin-md-menu-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--dark);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.admin-md-menu-item:hover {
  background: var(--cream);
}

.admin-md-menu-item:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: -2px;
}

.admin-md-menu-mark {
  flex: none;
  width: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

.admin-md-menu-mark-1 { font-size: 1.05rem; }
.admin-md-menu-mark-2 { font-size: 0.97rem; }
.admin-md-menu-mark-3 { font-size: 0.9rem; }
.admin-md-menu-mark-4 { font-size: 0.84rem; }
.admin-md-menu-mark-5 { font-size: 0.78rem; }

.admin-md-menu-label {
  font-size: 0.82rem;
  color: var(--warm-gray);
}

.admin-textarea-editor {
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

.admin-md-toolbar + .admin-textarea {
  border-top: none;
}

.admin-textarea-drop {
  outline: 2px dashed var(--dark);
  outline-offset: -4px;
  background: var(--cream);
}

.admin-md-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.admin-md-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream);
}

.admin-md-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-md-thumb-uploading::before,
.admin-md-thumb-failed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(44, 42, 38, 0.45);
}

.admin-md-thumb-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(246, 244, 240, 0.4);
  border-top-color: #f6f4f0;
  border-radius: 50%;
  animation: admin-md-spin 0.7s linear infinite;
}

@keyframes admin-md-spin {
  to { transform: rotate(360deg); }
}

.admin-md-thumb-err {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffd4cc;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
}

.admin-md-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(44, 42, 38, 0.85);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.admin-md-thumb-remove:hover {
  background: rgba(44, 42, 38, 1);
}

.admin-md-hint {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--warm-gray);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .admin-md-btn {
    min-width: 1.9rem;
    padding: 0.32rem 0.45rem;
    font-size: 0.8rem;
  }
  .admin-md-toolbar-sep {
    display: none;
  }
  .admin-md-thumb {
    width: 60px;
    height: 60px;
  }
}

/* ── Author Featured & Latest ── */
.author-section-cards {
  max-width: 860px;
  margin: 0 auto;
}


/* Latest list */
.author-latest-list {
  border-top: 1px solid var(--border);
}

.author-latest-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.author-latest-date {
  font-size: 0.8rem;
  color: var(--muted);
  padding-top: 0.2rem;
}

.author-latest-author-wrapper {
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.author-latest-author {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

a.author-latest-author:hover {
  color: var(--dark);
  border-bottom-color: var(--dark);
}

.author-latest-category {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 0.35rem;
}

.author-latest-body h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.author-latest-body h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}

.author-latest-body h3 a:hover {
  border-bottom-color: var(--dark);
}

.author-latest-desc {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 0.9rem;
}

.author-latest-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.author-lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 42px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--dark);
  color: var(--dark);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.author-lang-pill:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--ivory);
}

/* Article-list sort control (section + author pages) — a delicate connected
   segmented control (fields + direction), a smaller sibling of the nav language
   switcher: hairline outline, muted idle text, one dark active field. */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}
.list-sort {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.list-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: transparent;
  transition: border-color 0.2s;
  max-width: 200px;
  min-height: 30px;
}
.list-search:focus-within {
  border-color: var(--dark);
}
.list-search-icon {
  color: var(--muted);
  flex-shrink: 0;
}
.list-search-input {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--dark);
  width: 100%;
  outline: none;
  letter-spacing: 0.03em;
}
.list-search-input::placeholder {
  color: var(--muted);
}
.list-search-input::-webkit-search-decoration,
.list-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.list-search-input::-webkit-search-cancel-button {
  height: 12px;
  width: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14' fill='none' stroke='%238a847b' stroke-width='1.8' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'><path d='M3.5 3.5l7 7m0-7l-7 7'/></svg>");
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  margin-left: 0.2rem;
}
.list-search-input::-webkit-search-cancel-button:hover {
  opacity: 1;
}
.list-sort-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.list-sort-fields {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.list-sort-fields > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0.32rem 0.75rem;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--dark);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.list-sort-fields > button:first-child {
  border-left: 0;
}
.list-sort-fields > button:hover {
  background: var(--light-stone, #f0ece3);
}
.list-sort-field-label {
  display: inline-block;
  text-align: center;
}
.list-sort-swap {
  flex: none;
  opacity: 0.5;
}
.list-sort-dir {
  padding: 0.32rem 0.6rem;
}
.list-sort-dir svg {
  display: block;
  transition: transform 0.18s;
}
.list-sort-dir.is-asc svg {
  transform: rotate(180deg);
}
.list-sort-fields > button:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: -2px;
}

/* Admin role badge */
.admin-role-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: var(--light-stone, #f0ece3);
  color: var(--warm-gray);
  border: 1px solid var(--border);
}
.admin-role-badge-eic {
  background: #f5efe3;
  color: #8a6220;
  border-color: #d4aa6a;
}
.admin-role-badge-core {
  background: #eef3ed;
  color: #3d6b35;
  border-color: #8cb885;
}

/* Admin register article form */
.admin-register-article {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.admin-register-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-register-row .admin-input {
  flex: 1 1 160px;
  min-width: 0;
}

/* Admin featured star button */
.admin-featured-star {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--warm-gray);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  transition: color 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.admin-featured-star:hover {
  color: var(--dark);
  transform: scale(1.15);
}

.admin-featured-star.is-active {
  color: #c8962a;
}

@media (max-width: 768px) {
  .author-latest-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .author-latest-date { padding-top: 0; }
}

/* ── Guide TOC (inline at article top, then sticky sidebar after scroll) ── */
.guide-toc-wrap {
  display: none;
}

.guide-content h1,
.guide-content h2,
.guide-content h3,
.guide-content h4,
.guide-content h5,
.guide-content h6 {
  scroll-margin-top: 5rem;
}

/* Inline TOC sits at the top of the article body. Left-aligned, book-style
   contents page — numbered chapters in display serif, with their H3
   sub-sections nested beneath. Once the reader scrolls past it (body gains
   .guide-toc-active), the sticky sidebar takes over; the inline block stays
   in the DOM (scrolled out of view) so there is zero layout shift. */
.guide-content .guide-inline-toc {
  margin: 0 0 4rem;
  padding: 0;
  text-align: left;
  scroll-margin-top: 5rem;
}

.guide-inline-toc[hidden] { display: none; }

.guide-content .guide-inline-toc-label {
  font-family: var(--display-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

html[lang^="zh"] .guide-content .guide-inline-toc-label {
  font-family: var(--display-serif);
  font-style: normal;
  font-size: 0.95rem;
  letter-spacing: 0.35em;
}

.guide-content .guide-inline-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-content .guide-inline-toc-list > li {
  margin: 0 0 1.4rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.guide-content .guide-inline-toc-list > li > a {
  display: block;
  font-family: var(--display-serif);
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--dark);
  text-decoration: none;
  transition: color 0.2s;
}

html[lang^="zh"] .guide-content .guide-inline-toc-list > li > a {
  font-family: var(--reading-serif);
  font-size: 1.02rem;
  font-weight: 400;
}

.guide-content .guide-inline-toc-list > li > a:hover {
  color: var(--muted);
}

/* Two-column layout via grid on a wrapper holding two independent <ul>s.
   JS splits the items in half between the two lists at build time. Because
   each column is its own block, the first item of each <ul> sits at y=0 of
   its grid cell — alignment is guaranteed without row-locking subsequent
   items, so each column still flows naturally below the first row. */
.guide-content .guide-inline-toc-cols {
  display: block;
}

@media (min-width: 700px) {
  .guide-content .guide-inline-toc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    align-items: start;
  }
}

/* H3 sub-list under each H2 — indent matches the sidebar TOC's relative
   H2→H3 offset (sidebar: H2 padding-left 1rem, H3 padding-left 2rem). */
.guide-content .guide-inline-toc-sublist {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0 0 0 1rem;
}

.guide-content .guide-inline-toc-sublist li {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.guide-content .guide-inline-toc-sublist a {
  display: block;
  padding: 0.18rem 0;
  font-family: var(--reading-serif);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.guide-content .guide-inline-toc-sublist a:hover {
  color: var(--dark);
}

@media (min-width: 1100px) {
  .guide-layout {
    position: relative;
  }

  body.guide-toc-active .guide-toc-wrap {
    display: block;
    position: absolute;
    top: 4rem;
    bottom: 0;
    right: calc(50% + 340px + 2rem);
    width: 180px;
  }

  .guide-toc {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }

  .guide-toc-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.9rem 1rem;
  }

  .guide-toc-label a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
  }

  .guide-toc-label a:hover {
    color: var(--dark);
  }

  .guide-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .guide-toc-list li {
    margin: 0;
  }

  .guide-toc-list a {
    display: block;
    padding: 0.35rem 0 0.35rem 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
    border-left: 2px solid transparent;
  }

  .guide-toc-list a:hover {
    color: var(--dark);
  }

  .guide-toc-list a.active {
    color: var(--dark);
    border-left-color: var(--dark);
    font-weight: 500;
  }

  .guide-toc-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
  }

  .guide-toc-list > li.expanded > .guide-toc-sublist {
    display: block;
  }

  .guide-toc-sublist a {
    padding-left: 2rem;
    font-size: 0.8rem;
  }
}

@media (min-width: 1280px) {
  body.guide-toc-active .guide-toc-wrap {
    right: calc(50% + 340px + 3rem);
    width: 220px;
  }
}

/* ── Site search (nav magnifier → Spotlight-style overlay) ───────────────── */
/* macOS Spotlight-inspired: a centered, large-radius frosted-glass panel that
   floats over a lightly dimmed page. Tinted with the site's warm ivory so it
   reads as Spotlight but still belongs to this site. */
.nav-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.3s;
}

.nav-search-toggle:hover {
  color: var(--dark);
}

.nav-search-toggle:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

/* Lock background scroll while the overlay is open. */
body.search-open {
  overflow: hidden;
}

/* Full-screen overlay. The [hidden] rule has higher specificity than the
   display:flex base rule, so the dialog stays hidden until JS opens it. */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18vh 1.5rem 2rem;
}

.search-overlay[hidden] {
  display: none;
}

.search-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 26, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* The frosted Spotlight panel. */
.search-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 680px;
  max-width: 100%;
  max-height: 70vh;
  border-radius: 22px;
  background: rgba(246, 244, 240, 0.72);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 30px 80px rgba(26, 26, 26, 0.28);
  overflow: hidden;
  animation: search-dialog-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes search-dialog-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Input row — the always-visible "Spotlight bar". */
.search-field {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  padding: 1.05rem 1.45rem;
}

.search-field-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--muted);
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dark);
}

.search-input:focus {
  outline: none;
}

.search-input::placeholder {
  color: var(--warm-gray);
}

.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-result:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: -2px;
}

/* Results list — only divides from the bar once it has content, so an empty
   query leaves a bare Spotlight bar. */
.search-results {
  padding: 0.4rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.search-results:empty {
  padding: 0;
}

.search-results:not(:empty) {
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.search-result {
  display: block;
  padding: 0.65rem 0.95rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}

.search-result:hover,
.search-result.is-active {
  background: rgba(26, 26, 26, 0.07);
}

.search-snippet-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 0;
}

/* Hits are emphasized, not loudly colored — a faint wash + heavier weight keeps
   the editorial feel and reads in both Latin and CJK. */
.search-result mark,
[data-sort-item] mark {
  padding: 0 0.06em;
  border-radius: 2px;
  background: rgba(26, 26, 26, 0.08);
  color: var(--dark);
  font-weight: 600;
}

.search-status {
  margin: 0;
  padding: 1.1rem 1.45rem;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.search-status[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .search-overlay {
    padding: 10vh 1rem 1rem;
  }
  .search-dialog {
    max-height: 80vh;
    border-radius: 18px;
  }
  .search-input {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-dialog {
    animation: none;
  }
}

/* ── Admin Visit Dashboard ── */
.admin-dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.admin-dash-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.admin-dash-range {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.admin-dash-range-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}
.admin-dash-range-btn + .admin-dash-range-btn { border-left: 1px solid var(--border); }
.admin-dash-range-btn:hover { background: var(--cream); }
.admin-dash-range-btn.active {
  background: var(--status-revise-bg);
  color: var(--status-revise-fg);
  font-weight: 600;
}
.admin-dash-notice {
  font-size: 0.85rem;
  color: var(--status-pending-fg);
  background: var(--status-pending-bg);
  border: 1px solid var(--status-pending-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.admin-dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.admin-dash-tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--ivory);
}
.admin-dash-tile-value {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--text);
}
.admin-dash-tile-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.admin-dash-tile-sub {
  font-size: 0.75rem;
  color: var(--status-revise-fg);
  margin-top: 0.15rem;
}
.admin-dash-block { margin-bottom: 1.75rem; }
.admin-dash-block-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.admin-dash-empty {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.5rem 0;
}
.admin-dash-chart-wrap {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  background: var(--ivory);
}
.admin-dash-svg {
  display: block;
  width: 100%;
  height: 240px;
}
.admin-dash-grid { stroke: var(--border); stroke-width: 1; }
.admin-dash-axis { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.admin-dash-area { fill: var(--status-revise-fg); opacity: 0.14; stroke: none; }
.admin-dash-line { fill: none; stroke: var(--status-revise-fg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.admin-dash-cross { stroke: var(--status-revise-fg); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.admin-dash-dot { fill: var(--status-revise-fg); stroke: var(--ivory); stroke-width: 2; }
.admin-dash-tooltip {
  position: absolute;
  top: 0.5rem;
  pointer-events: none;
  background: var(--dark);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2;
}
.admin-dash-tooltip span { color: var(--warm-gray); }
/* Ranking lists stack full-width so labels (long URLs, ASN/org names) have
   room to read instead of truncating in a narrow column. */
.admin-dash-lists {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.admin-dash-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 2.75rem;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}
.admin-dash-bar-label {
  font-size: 0.85rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-dash-bar-track {
  height: 8px;
  background: var(--cream);
  border-radius: 4px;
  overflow: hidden;
}
.admin-dash-bar-fill {
  height: 100%;
  background: var(--status-revise-fg);
  border-radius: 4px;
}
.admin-dash-bar-count {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: right;
}
@media (max-width: 720px) {
  .admin-dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .admin-dash-bar-row { grid-template-columns: minmax(0, 1fr) 90px 2.5rem; gap: 0.6rem; }
}