/* =========================================================
   Zabon — Mobile-first styles
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #ffffff;
  --text: #1c1c1e;
  --text-muted: #6b6b70;
  --border: #e0e0e5;
  --accent: #2b6cb0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius: 14px;
  --toolbar-h: 56px;
  --panel-w: min(320px, 86vw);
  --transition: 220ms ease;

  /* ---- Milestone 07d — typographic system tokens (ADDITIVE) ----
     Family token defaults preserve the pre-07d body stack byte-for-byte
     (single source: --font-body now feeds html/body font-family). 07c
     will RE-POINT these family tokens; 07d only defines/sets them. */
  /* ---- Milestone 07c — font FAMILY tokens ----
     The reading serif (--font-traditional) and the clean sans (--font-modern)
     are SYSTEM stacks (no network fetch; F-4) and degrade gracefully (F-2).
     The DEFAULT base is the reading serif: --font-body (below) DEFAULTS to
     --font-traditional, so an unset data-font attribute still yields the
     book-reader base. The family is re-pointed ONLY via html[data-font=...]
     below (F-5): no component class changes meaning. */
  --font-traditional:
    Georgia, Cambria, "Times New Roman", Times, "Noto Serif", "Noto Serif JP",
    "Noto Serif SC", "Noto Serif Myanmar", "Sarabun", "Amiri", serif;
  --font-modern:
    system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Myanmar",
    "Myanmar Text", "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Meiryo", sans-serif;
  /* DEFAULT book-reader base: the reading serif (F-2). */
  --font-body: var(--font-traditional);
  --font-heading: var(--font-body);
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* Reading column: target ~60–75 characters per line at the base size. */
  --measure: 42rem;
  /* Base type size and reading line-height (book-like density). */
  --font-size-base: 1.0625rem;
  --line-height-base: 1.7;
  /* Vertical rhythm unit; block spacing is a small multiple of this. */
  --rhythm: 1.5rem;

  /* Spacing scale (additive; block spacing references these). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
}

/* Night theme */
html[data-theme="night"] {
  --bg: #111214;
  --surface: #1c1d20;
  --surface-2: #232427;
  --text: #f2f2f4;
  --text-muted: #9a9aa0;
  --border: #2e2f33;
  --accent: #6aa9ff;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Auto theme handled by JS toggling data-theme to day/night */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  /* 07d: body family now flows from the --font-body token (its default
     value is byte-identical to the former inline stack, so visuals are
     unchanged until 07c re-points the family). */
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition:
    background var(--transition),
    color var(--transition);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Milestone 07 — App shell: fixed toolbars + drawer
   Mobile-first; logical properties; safe-area insets; RTL-safe.
   ========================================================= */

/* Reserve space so the fixed bars never cover content (S-1). */
body {
  padding-block-start: calc(var(--toolbar-h) + env(safe-area-inset-top, 0px));
  padding-block-end: calc(var(--toolbar-h) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Fixed bars (shared) ---------- */
.app-bar {
  position: fixed;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--toolbar-h);
  background: var(--surface);
}

.app-bar--top {
  inset-block-start: 0;
  justify-content: space-between;
  gap: 8px;
  padding-block: env(safe-area-inset-top, 0px);
  padding-inline: calc(12px + env(safe-area-inset-left, 0px))
    calc(12px + env(safe-area-inset-right, 0px));
  border-block-end: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.app-bar--bottom {
  inset-block-end: 0;
  justify-content: center;
  padding-block: env(safe-area-inset-bottom, 0px);
  padding-inline: calc(12px + env(safe-area-inset-left, 0px))
    calc(12px + env(safe-area-inset-right, 0px));
  border-block-start: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.app-bar__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 10px;
  transition: background var(--transition);
}

/* ---------- Focus visibility (07 S-8) ---------- */
/* Restore a clear keyboard focus ring; do not remove outlines without
   a visible replacement. */
:where(a, button, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.app-bar__menu-btn:hover {
  background: var(--surface-2);
}
.app-bar__menu-btn:focus-visible {
  background: var(--surface-2);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: 20px;
  block-size: 14px;
}
.hamburger span {
  display: block;
  block-size: 2px;
  inline-size: 100%;
  background: var(--text);
  border-radius: 2px;
  transition:
    transform var(--transition),
    opacity var(--transition);
}
.app-bar__menu-btn[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.app-bar__menu-btn[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}
.app-bar__menu-btn[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Transport (inert; S-4) ---------- */
.transport {
  display: flex;
  align-items: center;
  gap: 8px;
}
.transport__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1rem;
}
.transport__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Drawer / side panel (overlay at all widths; S-1) ---------- */
.app-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.app-panel[aria-hidden="false"] {
  pointer-events: auto;
}

.app-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity var(--transition);
}
.app-panel[aria-hidden="false"] .app-panel__backdrop {
  opacity: 1;
}

.app-panel__content {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--panel-w);
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(-100%);
  transition: transform var(--transition);
  overflow-y: auto;
  padding-block-end: calc(24px + env(safe-area-inset-bottom, 0px));
}
.app-panel[aria-hidden="false"] .app-panel__content {
  transform: translateX(0);
}

/* RTL: the drawer slides in from the inline-end side (mirrors correctly). */
html[dir="rtl"] .app-panel__content {
  transform: translateX(100%);
}
html[dir="rtl"] .app-panel[aria-hidden="false"] .app-panel__content {
  transform: translateX(0);
}

.app-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-block-end: 1px solid var(--border);
}
.app-panel__header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.app-panel__close {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 8px;
  font-size: 1.5rem;
  line-height: 1;
}
.app-panel__close:hover {
  background: var(--surface-2);
}

.app-panel__section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
}

/* ---------- Main content ---------- */
.content {
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition:
    transform var(--transition),
    background var(--transition);
}
.app-card:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
}

.app-card__icon {
  font-size: 1.6rem;
}
.app-card__name {
  font-weight: 600;
}
.app-card__desc {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* =========================================================
   Milestone 06b — Language switcher
   The control now lives inside the 07 drawer; layout comes from
   .app-panel__section. Flags decorative (B-4(i), B-6).
   ========================================================= */

/* Visually-hidden label (the select needs an accessible name, B-2). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand {
  font-weight: 600;
}

/* Zabon suite: toolbar home icon linking to the main site index. */
.brand--home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.brand--home:hover,
.brand--home:focus-visible {
  opacity: 0.75;
}

/* Space the home icon apart from the brand title. */
.app-bar--top .brand--home + .brand {
  margin-inline-end: auto;
}

/* Language control group: decorative flag + native select. */
#lang-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-select {
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
}

/* Decorative flag: background-image keyed by data-lang (B-4(i), B-6). */
.lang-flag {
  display: inline-block;
  inline-size: 24px;
  block-size: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.lang-flag[data-lang="en"] {
  background-image: url("../img/flags/en.svg");
}
.lang-flag[data-lang="fa"] {
  background-image: url("../img/flags/fa.svg");
}
.lang-flag[data-lang="ar"] {
  background-image: url("../img/flags/ar.svg");
}
.lang-flag[data-lang="th"] {
  background-image: url("../img/flags/th.svg");
}

/* ---------- Larger screens ---------- */
@media (min-width: 481px) {
  .brand {
    font-size: 1.05rem;
  }
}

@media (min-width: 600px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .app-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .content {
    padding: 24px;
  }
}

/* ... existing code ... */
/* =========================================================
   Milestone 08 — Post list
   Mobile-first; logical properties only; reuses tokens.
   Namespaced item classes (L-3): __title / __meta / __excerpt.
   Empty state (.no-posts) is carried from the non-EN languages (L-4).
   ========================================================= */

.post-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-inline-size: 720px;
  margin-inline: auto;
}

.post-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition:
    transform var(--transition),
    background var(--transition);
}
.post-list-item:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
}

.post-list-item__title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.post-list-item__title:hover {
  color: var(--accent);
}

.post-list-item__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.post-list-item__excerpt {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Empty state for a language with no posts (carried; L-4). */
.no-posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--text-muted);
}
.no-posts h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}
.no-posts p {
  margin: 0;
  font-size: 0.95rem;
}

/* ... existing code ... */

/* =========================================================
   Milestone 09 — Single post
   Additive; reuses tokens. Logical properties only; RTL-safe.
   Namespaced header classes mirror 08's list vocabulary (L-3).
   Raw ISO date rendering is intentional (D2 — formatter is 11).
   ========================================================= */

.post-detail {
  display: block;
  max-inline-size: 720px;
  margin-inline: 1vh 1vw;
}

.post-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 8px 16px;
  margin-block-end: 8px;
  border-block-end: 1px solid var(--border);
}

.post-header__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.post-header__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 404 block for an unknown slug (class pre-existed; styled from 09). */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--text-muted);
}
.not-found h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text);
}
.not-found p {
  margin: 0;
  font-size: 0.95rem;
}
.not-found a {
  margin-block-start: 8px;
  color: var(--accent);
  text-decoration: underline;
}

/* =========================================================
   Milestone B1 — Renderer remaining block types
   Additive; NEW classes only (no existing block edited).
   Reuses tokens; logical properties only; RTL-safe.
   ========================================================= */

/* ---------- pullquote ---------- */
.pullquote {
  margin: 16px 0;
  padding-inline-start: 16px;
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.pullquote__content {
  margin: 0;
  padding: 12px 16px;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
}
.pullquote__citation {
  display: block;
  padding: 0 16px 12px;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--text-muted);
}
.pullquote__citation::before {
  content: "— ";
}

/* ---------- callout ---------- */
.callout {
  display: block;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-inline-start: 4px solid var(--accent);
  background: var(--surface-2);
  color: var(--text);
}
.callout--info {
  border-inline-start-color: var(--accent);
}
.callout__content {
  margin: 0;
}
.callout__content > :first-child {
  margin-block-start: 0;
}
.callout__content > :last-child {
  margin-block-end: 0;
}

/* ---------- resourceList ---------- */
.resource-list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resource-list li {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background var(--transition);
}
.resource-list li:hover {
  background: var(--surface-2);
}
.resource-list a {
  color: var(--accent);
}

/* ---------- attachment ---------- */
.attachment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: var(--surface);
}
.attachment__link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  word-break: break-word;
}
.attachment__caption {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* =========================================================
   Milestone 10b — List item as collapsible panel
   Additive; NEW classes only (no existing block edited).
   Reuses tokens; logical properties only; RTL-safe.
   The title toggle is a real <button>; the panel uses the
   `hidden` attribute (not display:none), so it carries the
   correct accessible name/state (D-10b-1).
   ========================================================= */

/* The toggle fills the item width; it is the primary control. */
.post-list-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  text-align: start;
  color: var(--text);
}
.post-list-item__toggle:hover .post-list-item__title-text {
  color: var(--accent);
}
/* Disclosure caret; rotates when the panel is expanded. Logical padding
   keeps it on the correct side in RTL. */
.post-list-item__toggle::after {
  content: "\25B8";
  flex: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.post-list-item__toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}
html[dir="rtl"] .post-list-item__toggle::after {
  transform: scaleX(-1);
}
html[dir="rtl"] .post-list-item__toggle[aria-expanded="true"]::after {
  transform: scaleX(-1) rotate(90deg);
}

.post-list-item__title-text {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* The collapsible panel. When `hidden` is present it is not rendered. */
.post-list-item__panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 4px;
}
.post-list-item__panel[hidden] {
  display: none;
}

/* "read full post" is the ONLY navigation affordance in the panel. */
.post-list-item__read {
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
}
.post-list-item__read:hover {
  text-decoration: none;
}

/* =========================================================
   Milestone 07b — Theme toggle (light / dark / auto)
   Additive; NEW classes only (no existing block edited).
   The token blocks already exist above: :root (day/default) and
   html[data-theme="night"] (night). Themes re-point TOKENS ONLY (T-4);
   this block styles only the new theme control.
   ========================================================= */

/* The theme control group mirrors #lang-nav's section layout. */
#theme-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Decorative theme glyph; a mirror of the selection, not a control. */
.theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  font-size: 1rem;
  color: var(--text-muted);
}

.theme-select {
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
}

/* =========================================================
   Milestone TTS — Transport active state
   Additive; NEW classes only (no existing block edited).
   Reuses tokens; logical properties only; RTL-safe. The buttons'
   disabled state (index.html + tts.js) is the single source of
   transport availability (X-3); these rules only decorate the
   currently-active control while speaking.
   ========================================================= */

/* The control reflecting the current speaking action (Play while playing,
   Pause while paused). Accent-tinted, not a semantic state change. */
.transport__btn.is-active {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

/* Subtle pulse while actively speaking (Play button when speaking, or the
   Pause button when paused — the active control). Respect reduced motion. */
.transport__btn.is-speaking {
  animation: transport-speak-pulse 1.6s ease-in-out infinite;
}
@keyframes transport-speak-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .transport__btn.is-speaking {
    animation: none;
  }
}

/* =========================================================
   Milestone TTS2 — Reader sentence highlight + click-to-read
   Additive; NEW selectors only (no existing block edited).
   Reuses tokens; logical properties only; RTL-safe. The active
   SENTENCE gets a book-reader highlight via the CSS Custom
   Highlight API (sentence granular, does not disturb layout or
   markup); readable nodes get a subtle pointer affordance.
   Presentation only (D-TTS2-5).
   ========================================================= */

/* Sentence-granular highlight (CSS Custom Highlight API): ONLY the sentence
   being spoken is marked, not the whole paragraph. An accent wash plus a
   subtle underline; works over inline markup (<a>, <em>) without reflow. */
::highlight(tts-sentence) {
  background-color: color-mix(in srgb, var(--accent) 26%, transparent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* Fallback when the Highlight API is unavailable: the whole readable source
   element (title/<p>/<blockquote>) is marked instead of a single sentence. */
.tts-sentence--active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 4px 0 0 0 var(--accent);
  border-radius: 4px;
}
html[dir="rtl"] .tts-sentence--active {
  box-shadow: inset -4px 0 0 0 var(--accent);
}

/* Hover affordance: readable text can start playback from the point clicked.
   The cursor signals clickability; links inside keep their own cursor. */
.tts-readable {
  cursor: pointer;
}
.tts-readable:hover {
  background: var(--surface);
}

/* =========================================================
   Milestone 07d — Book-reader typography pass
   Additive; NEW selectors + ADDITIVE tokens only (no existing block
   edited; no existing class renamed; no existing token removed).
   Turns the reading column into a book-like measure/rhythm:
   comfortable line length, even vertical rhythm, a coherent heading
   scale, and long-form element styling (blockquote, code/pre, table,
   figure, lists, links, hr). Logical properties only; RTL-safe.
   The renderer emits the body inside `.post-content > .blog-post-content`
   (block class NAMES unchanged; renderer.js is out of scope).

   SYSTEM ONLY: this milestone sets the typographic SYSTEM using the
   existing --font-* family tokens. Choosing a font FAMILY is 07c.
   ========================================================= */

/* ---------- Reading column: measure + base type + rhythm ---------- */
/* The post reading column is centred and capped at --measure (~60–75ch). */
.post-content {
  max-inline-size: var(--measure);
  margin-inline: auto;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* The renderer's own wrapper is a transparent pass-through (no class
   meaning change; layout flows from .post-content). */
.post-content .blog-post-content {
  display: block;
}

/* Body prose: even paragraph rhythm + book-like wrapping + hyphenation.
   Hyphenation needs a language tag; the document/containers carry one. */
.post-content p {
  margin-block: 0 var(--space-5);
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Headings follow the heading family token and balance their lines. */
.post-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin-block: var(--space-6) var(--space-4);
  text-wrap: balance;
  hyphens: none;
}
.post-content :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

/* Heading scale: proportional to --font-size-base (em-based). */
.post-content h1 {
  font-size: 2em;
}
.post-content h2 {
  font-size: 1.5em;
}
.post-content h3 {
  font-size: 1.25em;
}
.post-content h4 {
  font-size: 1.1em;
}
.post-content h5 {
  font-size: 1em;
}
.post-content h6 {
  font-size: 0.9em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Links ---------- */
.post-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.post-content a:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Lists (body prose lists; ul reset above is chrome-neutral) ---------- */
.post-content :is(ul, ol) {
  margin-block: 0 var(--space-5);
  padding-inline-start: var(--rhythm);
}
.post-content li {
  margin-block: 0 var(--space-2);
}
.post-content li:last-child {
  margin-block-end: 0;
}

/* ---------- Blockquote ---------- */
.post-content blockquote {
  margin-block: var(--space-5);
  margin-inline: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--border);
  color: var(--text);
  font-style: italic;
}
.post-content blockquote > :last-child {
  margin-block-end: 0;
}

/* pullquote already styled in B1; keep title spacing coherent here. */
.post-content .pullquote {
  margin-block: var(--space-6);
}

/* ---------- Heading-adjacent spacing (book rhythm) ---------- */
.post-content > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--space-6);
}

/* ---------- Horizontal rule (divider) ---------- */
.post-content hr {
  margin-block: var(--space-6);
  border: 0;
  border-block-start: 1px solid var(--border);
}

/* ---------- Inline code + pre: NEVER hyphenate; scroll, don't break -------- */
.post-content :is(code, kbd, samp) {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  /* Code must read verbatim: no hyphenation, no arbitrary word breaks. */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
.post-content pre {
  display: block;
  margin-block: var(--space-5);
  padding: var(--space-4);
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.9em;
  line-height: 1.5;
  /* No hyphenation inside pre; long lines scroll horizontally. */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  white-space: pre;
}
.post-content pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}

/* ---------- Tables: rhythm + legible cells (grid replaced by <table>) ------ */
.post-content table {
  display: block;
  max-inline-size: 100%;
  margin-block: var(--space-5);
  border-collapse: collapse;
  overflow-x: auto;
  font-size: 0.95em;
}
.post-content :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}
.post-content th {
  font-weight: 600;
  background: var(--surface);
}

/* ---------- Figure / image + caption ---------- */
.post-content figure {
  margin-block: var(--space-5);
  margin-inline: 0;
}
.post-content figure img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius);
}
.post-content figcaption {
  margin-block-start: var(--space-2);
  font-size: 0.875em;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- Embeds: keep them block-level and responsively contained ------ */
.post-content .embed-container {
  margin-block: var(--space-5);
}
.post-content .embed-container iframe {
  max-inline-size: 100%;
}

/* ---------- Footnotes list (NEW-3 shape) ---------- */
.post-content .footnotes {
  margin-block: var(--space-5);
  padding-inline-start: var(--rhythm);
  font-size: 0.9em;
  color: var(--text-muted);
}
.post-content .footnotes li {
  margin-block: 0 var(--space-2);
}

/* ---------- Hyphenation/language guard ---------- */
/* Hyphenation above is prose-only; code/pre opt out (hyphens: none).
   `lang` attributes are authored by the document/router; no new markup. */
.post-content :lang(en) p,
.post-content p:lang(en) {
  hyphens: auto;
}

/* ---------- Small screens: keep the column comfortable ---------------- */
@media (max-width: 480px) {
  :root {
    --font-size-base: 1rem;
    --line-height-base: 1.65;
    --measure: 100%;
    --rhythm: 1.25rem;
  }
}

/* =========================================================
   Milestone 07c — Font selection (traditional / modern + default)
   Additive; NEW selectors only (no existing block edited; no
   existing class renamed; no existing token removed). Re-points
   the family tokens that 07d DEFINED (--font-body / --font-heading)
   via html[data-font=...]. The DEFAULT lives in :root (--font-body
   defaults to --font-traditional), so an ABSENT data-font attribute
   yields the book-reader base. F-5: tokens only; no component class
   changes meaning. Logical properties only; RTL-safe. The control
   block mirrors #lang-nav / #theme-nav.

   SYSTEM ONLY: no webfont is fetched (F-4). Choosing the family is
   this milestone; the typographic SYSTEM (measure/rhythm/scale) is 07d.
   ========================================================= */

/* ---------- Family token re-points (F-5) ---------- */
/* The chosen family feeds --font-body; headings follow it (--font-heading
   is var(--font-body)). No attribute (or the empty/default key) => the
   :root default (--font-traditional) applies unchanged. */
html[data-font="traditional"] {
  --font-body: var(--font-traditional);
}
html[data-font="modern"] {
  --font-body: var(--font-modern);
}

/* ---------- Font control (peer of #lang-nav / #theme-nav) ---------- */
#font-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Decorative font glyph; a mirror of the selection, not a control. */
.font-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.font-select {
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
}

/* =========================================================
   Milestone 10c — compact blog index (option B)
   Additive; NEW classes only (.blog-index*) — no existing class
   changes meaning and no token is removed. Reuses tokens; logical
   properties only; RTL-safe. This is the ruled, table-of-contents
   style list that sits inside the "Two Legs Bad" panel (the panel
   itself reuses the existing 10b card classes; no CSS here).
   ========================================================= */

/* The index is a tight vertical list with ruled rows. */
.blog-index {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One entry per row; a thin separator between entries (option B). */
.blog-index__item {
  margin: 0;
  border-block-end: 1px solid var(--border);
}
.blog-index__item:last-child {
  border-block-end: 0;
}

/* The heading text IS the link; compact row padding, accent on hover. */
.blog-index__link {
  display: block;
  padding-block: var(--space-2);
  padding-inline: var(--space-1);
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--transition);
}
.blog-index__link:hover {
  color: var(--accent);
}

/* =========================================================
   Milestone 12 — TTS player controls (speed / pitch / voice) +
   on-toolbar Language & Font icons
   Additive; NEW classes only (no existing block edited; no existing
   class renamed; no existing token removed). Reuses tokens; logical
   properties only; RTL-safe. The transport buttons' disabled state
   stays the single source of transport availability (X-3); these
   rules style the ADDED settings toggle, its popover, and the
   language / font icons. speech-settings.js wires the controls.
   ========================================================= */

/* The icon-only transport buttons (settings gear, language, font) are a
   touch narrower than the transport glyph buttons. */
.transport__btn--icon {
  inline-size: 40px;
  font-size: 1.1rem;
}

/* The shared popover surface (settings + language menu). Anchored ABOVE
   the bottom toolbar (the toolbar is fixed to the block-end edge). Uses
   the `hidden` attribute (10b convention) for its open/closed state. */
.tts-popover {
  position: fixed;
  inset-block-end: calc(var(--toolbar-h) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(8px + env(safe-area-inset-right, 0px));
  z-index: 70;
  inline-size: min(320px, calc(100vw - 32px));
  max-block-size: calc(100vh - var(--toolbar-h) - 32px);
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tts-popover[hidden] {
  display: none;
}

/* RTL: anchor the popover to the inline-end (mirrors the LTR placement). */
html[dir="rtl"] .tts-popover {
  inset-inline-end: auto;
  inset-inline-start: calc(8px + env(safe-area-inset-left, 0px));
}

/* --- Settings popover rows --- */
.tts-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.tts-settings__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tts-settings__select {
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  max-inline-size: 60%;
}
.tts-settings__range {
  inline-size: 100%;
  accent-color: var(--accent);
}
.tts-settings__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tts-settings__fieldset legend {
  padding: 0;
}
.tts-settings__pitch-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.tts-settings__pitch-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}
.tts-settings__pitch-option input {
  accent-color: var(--accent);
}
.tts-settings__test {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 8px;
}
.tts-settings__test:hover {
  background: var(--surface);
}

/* --- Toolbar language menu --- */
.tts-lang-menu {
  gap: 4px;
}
.tts-lang-menu__item {
  display: block;
  inline-size: 100%;
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  text-align: start;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: background var(--transition);
}
.tts-lang-menu__item:hover {
  background: var(--surface-2);
}
.tts-lang-menu__item[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
}

/* =========================================================
   Milestone 12 — TTS player controls (speed / pitch / voice) +
   on-toolbar Language & Font icons
   Additive; NEW classes only (no existing block edited; no existing
   class renamed; no existing token removed). Reuses tokens; logical
   properties only; RTL-safe. The transport buttons' disabled state
   stays the single source of transport availability (X-3); these
   rules style the ADDED settings toggle, its popover, and the
   language / font icons. speech-settings.js wires the controls.
   ========================================================= */

/* The icon-only transport buttons (settings gear, language, font) are a
   touch narrower than the transport glyph buttons. */
.transport__btn--icon {
  inline-size: 40px;
  font-size: 1.1rem;
}

/* The shared popover surface (settings + language menu). Anchored ABOVE
   the bottom toolbar (the toolbar is fixed to the block-end edge). Uses
   the `hidden` attribute (10b convention) for its open/closed state. */
.tts-popover {
  position: fixed;
  inset-block-end: calc(var(--toolbar-h) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(8px + env(safe-area-inset-right, 0px));
  z-index: 70;
  inline-size: min(320px, calc(100vw - 32px));
  max-block-size: calc(100vh - var(--toolbar-h) - 32px);
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tts-popover[hidden] {
  display: none;
}

/* RTL: anchor the popover to the inline-end (mirrors the LTR placement). */
html[dir="rtl"] .tts-popover {
  inset-inline-end: auto;
  inset-inline-start: calc(8px + env(safe-area-inset-left, 0px));
}

/* --- Settings popover rows --- */
.tts-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.tts-settings__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tts-settings__select {
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  max-inline-size: 60%;
}
.tts-settings__range {
  inline-size: 100%;
  accent-color: var(--accent);
}
.tts-settings__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tts-settings__fieldset legend {
  padding: 0;
}
.tts-settings__pitch-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.tts-settings__pitch-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}
.tts-settings__pitch-option input {
  accent-color: var(--accent);
}
.tts-settings__test {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 8px;
}
.tts-settings__test:hover {
  background: var(--surface);
}

/* --- Toolbar language menu --- */
.tts-lang-menu {
  gap: 4px;
}
.tts-lang-menu__item {
  display: block;
  inline-size: 100%;
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  text-align: start;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: background var(--transition);
}
.tts-lang-menu__item:hover {
  background: var(--surface-2);
}
.tts-lang-menu__item[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
}