/* ═══════════════════════════════════════════════════════════════
   main.css — Warm Teal × Peach design system
   Sections:
     1  :root custom properties
     2  [data-theme="dark"] overrides
     3  Senior mode
     4  CVD mode
     5  Base reset & typography
     6  Callout system
     7  A11y FAB
     8  Hover transitions
     9  Mobile drawer
     10 Responsive layer
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. :root custom properties ─────────────────────────────── */
:root {
  /* Colors */
  --teal:         #0e7c7b;
  --teal-2:       #4a9e94;
  --teal-mist-1:  #b4ddd3;
  --teal-mist-2:  #9dccc3;
  --teal-mist-3:  #8fc3b9;
  --teal-deep:    #0a4d4d;
  --peach:        #e89661;
  --peach-dark:   #e5966a;
  --peach-light:  #f2b088;
  --gold:         #f2c94c;

  /* Backgrounds */
  --bg:           #ffffff;
  --cream-1:      #f5faf8;
  --cream-2:      #f0f7f4;
  --cream-3:      #e4ede9;
  --cream-4:      #eaf2ef;

  /* Foregrounds */
  --fg:           #0f2a42;
  --fg-heading:   #1a3942;
  --muted:        #56706c;
  --muted-2:      #6d8481;
  --muted-3:      #8aa3a0;
  --muted-4:      #435754;

  /* Borders */
  --border-soft:   #eaf2ef;
  --border-medium: #d6cfc6;

  /* Surfaces (used by inline-styled components — must be theme-aware) */
  --surface:             #ffffff;
  --surface-elevated:    #ffffff;
  --surface-warm:        #fff8ec;
  --surface-translucent: rgba(255,255,255,0.93);

  /* Topstrip (the slim utility bar above the navbar) */
  --topstrip-grad:    linear-gradient(90deg, #f0f7f4 0%, #e4ede9 100%);
  --topstrip-fg:      #5a7370;
  --topstrip-divider: #eaf2ef;

  /* Decorative hero orbs */
  --orb-teal:  radial-gradient(circle, #c7e8e1 0%, rgba(199,232,225,0) 70%);
  --orb-peach: radial-gradient(circle, #fde2c8 0%, rgba(253,226,200,0) 70%);

  /* Open-status accent dots */
  --accent-on:  #4fb39a;
  --accent-off: #aaa;

  /* Semantic */
  --success-bg:  #e7f5ef;
  --success-fg:  #1a7a4a;
  --warn-bg:     #fdf4d9;
  --warn-fg:     #a07a14;
  --danger-bg:   #fde6e0;
  --danger-fg:   #c44a2e;

  /* Sizing */
  --base-size:    16px;
  --max-content:  1200px;
  --max-article:  720px;

  /* Shadows */
  --shadow-soft: 0 10px 22px -14px rgba(15,42,66,0.18);
  --shadow-lift: 0 16px 30px -20px rgba(15,42,66,0.2);
  --shadow-hero: 0 24px 44px -20px rgba(229,150,106,0.5);
}

/* ─── 2. Dark mode overrides ─────────────────────────────────── */
[data-theme="dark"] {
  --bg:            #14201d;
  --cream-1:       #1a2823;
  --cream-2:       #1f2d28;
  --cream-3:       #243330;
  --cream-4:       #2a3a36;
  --fg:            #d8e6e0;
  --fg-heading:    #eef6f1;
  --muted:         #a6c8be;
  --muted-2:       #8aaaa3;
  --muted-3:       #6f8d86;
  --muted-4:       #b3d1c8;
  --border-soft:   #263531;
  --border-medium: #36464a;

  /* Surfaces — warm-lifted, not flat black */
  --surface:             #1e2b27;
  --surface-elevated:    #243330;
  --surface-warm:        #1f2c27;
  --surface-translucent: rgba(20,32,29,0.86);

  /* Topstrip — moss-to-shadow, mint text, soft divider */
  --topstrip-grad:    linear-gradient(90deg, #1a2823 0%, #243330 100%);
  --topstrip-fg:      #a6c8be;
  --topstrip-divider: #263531;

  /* Glow-on-dark orbs (subtler, additive) */
  --orb-teal:  radial-gradient(circle, rgba(74,158,148,0.22) 0%, rgba(74,158,148,0) 70%);
  --orb-peach: radial-gradient(circle, rgba(232,150,97,0.18) 0%, rgba(232,150,97,0) 70%);

  --accent-on:  #6dd0b4;
  --accent-off: #5a7370;

  /* Semantic tones — re-tuned for dark */
  --success-bg: #1c3a2c;
  --success-fg: #6fc99c;
  --warn-bg:    #2e2614;
  --warn-fg:    #f0c963;
  --danger-bg:  #3a201d;
  --danger-fg:  #f29c87;

  /* Shadows on dark — deeper, less spread */
  --shadow-soft: 0 10px 22px -14px rgba(0,0,0,0.55);
  --shadow-lift: 0 16px 30px -20px rgba(0,0,0,0.6);
  --shadow-hero: 0 24px 44px -22px rgba(229,150,106,0.42);
}

/* ─── 3. Senior mode ─────────────────────────────────────────── */
html.senior { --base-size: 19px; }
html.senior h1, html.senior h2 { letter-spacing: 0 !important; }

/* Senior mode 必須顯式覆寫 hard-coded px 規則，否則只有 body 會放大。
   比例約 19/16 ≈ 1.19，覆蓋使用者主要閱讀的：文章標題、callout、A11y FAB。 */
html.senior .callout::before     { font-size: 12px !important; }
html.senior .callout-title       { font-size: 20px !important; }
html.senior .callout-body        { font-size: 18px !important; line-height: 1.85 !important; }
html.senior .r-article-body      { font-size: 1.0625em; }
html.senior .r-article-body p,
html.senior .r-article-body li   { line-height: 1.9 !important; }
html.senior .r-article-h1        { font-size: clamp(34px, 3.6vw, 48px) !important; }
html.senior .r-section-head-title { font-size: clamp(34px, 3.4vw, 44px) !important; }
html.senior .r-logo-title        { font-size: 22px !important; }
html.senior .r-logo-sub          { font-size: 16px !important; }
html.senior .r-hero-h1           { font-size: clamp(48px, 5.8vw, 66px) !important; }
html.senior .r-hero-p            { font-size: 22px !important; }
html.senior .r-cat-tile-name     { font-size: 20px !important; }
html.senior .r-list-card         { font-size: 17px !important; }
html.senior .a11y-fab            { font-size: 15px !important; padding: 11px 18px 11px 14px !important; }
html.senior .tl-shape            { font-size: 21px !important; }

/* ─── 4. CVD mode (Okabe–Ito safe palette) ───────────────────── */
/* Swaps brand + semantic colors to a deuteranopia/protanopia/tritanopia-distinguishable
   palette. Category tones swap separately via cvdResolveTone() in JS so that c.tone strings
   drive the right hex at render time. */
html[data-cvd="on"] {
  /* Brand — teal becomes Okabe blue, peach becomes Okabe orange, gold becomes Okabe yellow */
  --teal:         #0072B2;
  --teal-2:       #56B4E9;
  --teal-deep:    #00558a;
  --teal-mist-1:  #c1dbed;
  --teal-mist-2:  #97c1de;
  --teal-mist-3:  #6ea7d0;

  --peach:        #E69F00;
  --peach-dark:   #cc8a00;
  --peach-light:  #f3b730;

  --gold:         #F0E442;

  /* Semantic — green & red shift to bluish-green & vermillion (Okabe), distinguishable across CVD types */
  --success-bg:   #d6efe5;
  --success-fg:   #009E73;
  --warn-bg:      #fff0cc;
  --warn-fg:      #b27a00;
  --danger-bg:    #ffe0d4;
  --danger-fg:    #D55E00;

  /* Open/closed indicator */
  --accent-on:    #009E73;
}

/* Dark + CVD — keep CVD brand, but use dark-tinted semantic backgrounds so text remains readable */
html[data-theme="dark"][data-cvd="on"] {
  --success-bg:   #143a2a;
  --warn-bg:      #2e2814;
  --danger-bg:    #3a201d;
  --warn-fg:      #f0c963;
  --danger-fg:    #f29c87;
  --success-fg:   #6dd0a8;
}

.tl-shape {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

/* ─── 5. Base reset & typography ─────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: var(--base-size);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--fg-heading);
  text-wrap: pretty;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.container { max-width: var(--max-content); margin: 0 auto; }

/* ─── 6. Callout system — Clinic Note cards ──────────────────── */
/*
 * Design: warm paper card with a tone-colored top stripe, a small
 * folded-corner accent in the top-right, an editorial eyebrow label
 * (English · Chinese, uppercase + letter-spaced), a dashed hairline
 * between title and body. Replaces the generic tinted-background
 * left-border style. Per-type tone is wired via CSS custom props so
 * dark / CVD modes inherit the semantic palette automatically.
 */
.callout {
  --callout-tone:      var(--teal);
  --callout-tone-soft: rgba(14,124,123,0.10);
  --callout-eyebrow:   'NOTE · 提示';
  position: relative;
  margin: 32px 0;
  padding: 22px 26px 24px;
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--callout-tone);
  border-radius: 4px 4px 14px 14px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 14px 28px -22px color-mix(in srgb, var(--callout-tone) 50%, transparent);
  overflow: hidden;
}
/* Eyebrow label (RECOMMEND · 建議事項 etc.) */
.callout::before {
  content: var(--callout-eyebrow);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--callout-tone);
  margin-bottom: 8px;
}
/* Folded-corner accent */
.callout::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28px; height: 28px;
  background: linear-gradient(225deg, var(--callout-tone-soft) 50%, transparent 50%);
  pointer-events: none;
}
.callout-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-heading);
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--callout-tone) 38%, transparent);
}
.callout-body {
  font-size: 15px;
  color: var(--fg);
  line-height: 1.78;
}
.callout-body > *:first-child { margin-top: 0; }
.callout-body > *:last-child  { margin-bottom: 0; }
.callout-body p:not(:last-child) { margin-bottom: 12px; }
.callout-body ul, .callout-body ol { margin: 8px 0 12px; padding-left: 22px; }
.callout-body li + li { margin-top: 4px; }

.callout-recommend {
  --callout-tone:      var(--success-fg);
  --callout-tone-soft: var(--success-bg);
  --callout-eyebrow:   'RECOMMEND · 建議事項';
}
.callout-caution {
  --callout-tone:      var(--warn-fg);
  --callout-tone-soft: var(--warn-bg);
  --callout-eyebrow:   'CAUTION · 注意事項';
}
.callout-danger {
  --callout-tone:      var(--danger-fg);
  --callout-tone-soft: var(--danger-bg);
  --callout-eyebrow:   'WARNING · 重要警告';
}
.callout-info {
  --callout-tone:      var(--teal-2);
  --callout-tone-soft: rgba(74,158,148,0.12);
  --callout-eyebrow:   'INSIGHT · 小知識';
}

@media (max-width: 639px) {
  .callout         { padding: 18px 18px 20px; margin: 24px 0; }
  .callout-title   { font-size: 16px; }
  .callout-body    { font-size: 14.5px; line-height: 1.75; }
  .callout::before { font-size: 9.5px; letter-spacing: 0.16em; }
  /* Senior mode：手機放大 callout 文字 */
  html.senior .callout-title   { font-size: 19px !important; }
  html.senior .callout-body    { font-size: 17.5px !important; line-height: 1.85 !important; }
  html.senior .callout::before { font-size: 11.5px !important; }
}

/* ─── 6b. Mermaid diagram — themed via CSS variables ─────────── */
/*
 * Mermaid bakes its theme into SVG inline attributes at render time.
 * We override with CSS using !important so light/dark/CVD modes can swap
 * without re-rendering. Class names target mermaid 10's SVG output.
 */
:root {
  --mm-canvas:      #fffaf2;
  --mm-node-bg:     #fff8ec;
  --mm-node-border: #0e7c7b;
  --mm-node-text:   #1f3a37;
  --mm-decision-bg: #fde2c8;
  --mm-decision-border: #e89661;
  --mm-edge:        #5a8a82;
  --mm-edge-label:  #fffaf0;
  --mm-cluster-bg:  #f0f7f4;
  --mm-cluster-border: #0e7c7b;
  --mm-shadow:      0 1px 2px rgba(14,124,123,0.14);
}
[data-theme="dark"] {
  --mm-canvas:      #1a2823;
  --mm-node-bg:     #243330;
  --mm-node-border: #6dd0b4;
  --mm-node-text:   #d8e6e0;
  --mm-decision-bg: #3a2f24;
  --mm-decision-border: #f0c075;
  --mm-edge:        #6dd0b4;
  --mm-edge-label:  #1f2d28;
  --mm-cluster-bg:  #1f2d28;
  --mm-cluster-border: #6dd0b4;
  --mm-shadow:      0 1px 2px rgba(0,0,0,0.4);
}
html[data-cvd="on"] {
  --mm-node-border: #0072B2;
  --mm-decision-border: #E69F00;
  --mm-edge:        #0072B2;
}
html[data-theme="dark"][data-cvd="on"] {
  --mm-node-border: #56B4E9;
  --mm-decision-border: #f0b048;
  --mm-edge:        #56B4E9;
}

.mermaid {
  margin: 28px 0;
  text-align: center;
  background: var(--mm-canvas);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 24px 20px;
  overflow-x: auto;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 18px 32px -28px rgba(14,124,123,0.20);
}
.mermaid svg { max-width: 100%; height: auto; }

/* Nodes — fill, border, drop-shadow */
.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node ellipse,
.mermaid svg .node polygon,
.mermaid svg .node path {
  fill: var(--mm-node-bg) !important;
  stroke: var(--mm-node-border) !important;
  stroke-width: 1.5px !important;
  filter: drop-shadow(var(--mm-shadow));
}
/* Decision diamonds (rhombus) — auto-distinguish via tag */
.mermaid svg .node polygon {
  fill: var(--mm-decision-bg) !important;
  stroke: var(--mm-decision-border) !important;
  stroke-width: 1.75px !important;
}
/* Node labels */
.mermaid svg .nodeLabel,
.mermaid svg .node text,
.mermaid svg .node .label {
  fill: var(--mm-node-text) !important;
  color: var(--mm-node-text) !important;
  font-family: 'Noto Sans TC', system-ui, sans-serif !important;
  font-weight: 500 !important;
}
/* Edges — thinner, tone color */
.mermaid svg .edgePath path,
.mermaid svg .flowchart-link {
  stroke: var(--mm-edge) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
/* Arrowheads */
.mermaid svg .arrowMarkerPath,
.mermaid svg .arrowheadPath,
.mermaid svg defs marker path,
.mermaid svg defs marker polygon {
  fill: var(--mm-edge) !important;
  stroke: var(--mm-edge) !important;
}
/* Edge labels (text on arrows) */
.mermaid svg .edgeLabel {
  background-color: transparent !important;
  color: var(--mm-node-text) !important;
}
.mermaid svg .edgeLabel rect,
.mermaid svg .edgeLabel .label rect,
.mermaid svg .label foreignObject {
  fill: var(--mm-edge-label) !important;
  background-color: var(--mm-edge-label) !important;
}
.mermaid svg .edgeLabel text,
.mermaid svg .edgeLabel .label text {
  fill: var(--mm-node-text) !important;
  font-family: 'Noto Sans TC', system-ui, sans-serif !important;
  font-size: 12.5px !important;
}
/* Subgraph clusters */
.mermaid svg .cluster rect {
  fill: var(--mm-cluster-bg) !important;
  stroke: var(--mm-cluster-border) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 5 4 !important;
  rx: 10 !important;
  ry: 10 !important;
}
.mermaid svg .cluster .nodeLabel,
.mermaid svg .cluster text {
  fill: var(--mm-node-border) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

@media (max-width: 639px) {
  .mermaid { padding: 16px 12px; margin: 24px 0; border-radius: 12px; }
  .mermaid svg .nodeLabel,
  .mermaid svg .node text,
  .mermaid svg .node .label { font-size: 12.5px !important; }
}

/* ─── 7. A11y FAB ────────────────────────────────────────────── */
.a11y-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 998;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 10px 16px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-heading);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(15,42,66,0.25);
  font-family: 'Noto Sans TC', sans-serif;
}
.a11y-fab:hover { background: var(--cream-1); }
.a11y-fab .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5d2;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #9ab3af;
}
.a11y-fab.on .dot {
  background: var(--teal);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--teal);
}
.a11y-fab.on {
  background: #e7f3f1;
  border-color: var(--teal);
  color: var(--teal);
}

/* ─── 8. Hover transitions ───────────────────────────────────── */
.topic-card, .feat-med { transition: transform .2s, box-shadow .2s; }
.topic-card:hover, .feat-med:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.cat-tile { transition: transform .2s, box-shadow .2s; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.latest-row:hover { background: var(--cream-1); }

/* ─── 9. Mobile drawer ───────────────────────────────────────── */
.r-nav-hamburger { display: none; }
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: rgba(15,42,66,0.4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.mobile-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .25s ease-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }

/* ─── 10. Responsive layer ───────────────────────────────────── */

/* TABLET ≤1023px ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Navigation — hide desktop nav, show hamburger */
  .r-nav-primary   { display: none !important; }
  .r-nav-topstrip  { display: none !important; }
  .r-nav-hamburger { display: grid !important; }
  .r-nav-grid      { grid-template-columns: auto 1fr auto !important; gap: 12px !important; padding: 10px 20px !important; }
  .r-cta-cluster .r-cta-text { display: none !important; }

  /* Hero — stack vertically */
  .r-hero-grid  { grid-template-columns: 1fr !important; gap: 32px !important; padding: 48px 20px 56px !important; }
  .r-hero-illus { display: none !important; }
  .r-hero-stats { flex-wrap: wrap !important; gap: 20px !important; }

  /* Featured: 1 big + 2 medium → 1 column, big first */
  .r-feat-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .r-feat-big  { grid-column: 1 / -1 !important; min-height: 320px !important; }

  /* Categories 4-col → 2-col */
  .r-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* Mega menu 4-col → 2-col (rarely seen on tablet since hamburger) */
  .r-mega-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Latest 3-col → 2-col */
  .r-latest-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .r-latest-grid > a:nth-child(n+5) { border-top: 1px solid var(--cream-4) !important; }

  /* Doctors 4-col → 2-col */
  .r-docs-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Info section */
  .r-info-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* FAQ section */
  .r-faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .r-faq-grid > div:first-child { position: static !important; }

  /* Footer: 4-col → 2-col */
  .r-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* Article list: sidebar on top */
  .r-list-grid    { grid-template-columns: 1fr !important; gap: 28px !important; }
  .r-list-sidebar { position: static !important; }

  /* Article: single-column body */
  .r-article-grid { grid-template-columns: 1fr !important; }

  /* QR card stacks on tablet */
  .r-article-qr { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 20px !important; padding: 24px 20px !important; }
  .r-article-qr p { text-align: left; }

  /* Article body */
  .r-article-body { max-width: 100% !important; }

  /* HeroSearch search box */
  .r-hero-search          { max-width: 100% !important; }
  .r-hero-search-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .r-hero-search-top      { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Hero section paddings */
  .r-hero-pad { padding: 48px 20px 56px !important; }

  /* Section paddings */
  .r-section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Traffic-light table adjust */
  .r-tl-row { grid-template-columns: 36px 80px 1fr !important; }
  .r-tl-row > :nth-child(4) { grid-column: 1 / -1 !important; padding-left: 116px; margin-top: 2px; color: var(--muted); }
}

/* MOBILE ≤639px ──────────────────────────────────────────────── */
@media (max-width: 639px) {
  /* 縮小 mobile 預設字級；senior mode 透過下面的 html.senior 覆寫保持放大 */
  :root       { --base-size: 15px; }
  html.senior { --base-size: 18px; }

  .container  { padding-left: 16px !important; padding-right: 16px !important; }
  .r-nav-grid { padding: 10px 16px !important; gap: 8px !important; }
  .r-logo-sub   { display: none !important; }
  .r-logo-title { font-size: 16px !important; }

  /* Hero */
  .r-hero-grid  { padding: 40px 16px 48px !important; gap: 24px !important; }
  .r-hero-h1    { font-size: 32px !important; line-height: 1.2 !important; }
  .r-hero-p     { font-size: 16px !important; }
  .r-hero-stats { gap: 16px !important; padding-top: 20px !important; margin-top: 28px !important; }
  .r-hero-stats > div { min-width: 45% !important; }

  /* Featured → single column */
  .r-feat-grid { grid-template-columns: 1fr !important; }
  .r-feat-big  { min-height: 260px !important; padding: 24px !important; }
  .r-feat-med  { min-height: auto !important; padding: 22px !important; }

  /* Categories → 2 col narrow */
  .r-cat-grid       { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .r-cat-tile       { padding: 16px !important; min-height: 140px !important; }
  .r-cat-tile-name  { font-size: 15px !important; margin-top: 12px !important; }
  .r-cat-tile-desc  { display: none !important; }
  .r-cat-tile-arrow { display: none !important; }

  /* Latest → 1 col */
  .r-latest-grid { grid-template-columns: 1fr !important; }
  .r-latest-grid > a { border-right: none !important; border-bottom: 1px solid var(--cream-4) !important; border-top: none !important; }
  .r-latest-grid > a:last-child { border-bottom: none !important; }

  /* Doctors → 1 col */
  .r-docs-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Section paddings tighter */
  .r-section { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Section header */
  .r-section-head-title { font-size: 26px !important; }

  /* Footer stack */
  .r-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Article list cards — stack icon + text vertically */
  .r-list-card { flex-direction: column !important; }
  .r-list-card > :first-child { width: 56px !important; height: 56px !important; }

  /* Article body */
  .r-article-pad       { padding: 32px 16px !important; }
  .r-article-h1        { font-size: 26px !important; line-height: 1.3 !important; }
  .r-article-hero-grid { grid-template-columns: 1fr !important; }

  /* Hero Search mobile */
  .r-hero-search-flex            { flex-wrap: wrap !important; gap: 6px !important; }
  .r-hero-search-flex input      { min-width: 100% !important; order: -1 !important; padding: 12px 8px !important; }

  /* CTA cluster on mobile — hide search icon, keep LINE */
  .r-cta-cluster .r-cta-search { display: none !important; }

  /* Tweaks panel full-width */
  .tweaks-panel { left: 12px; right: 12px; bottom: 12px; width: auto !important; }

  /* A11y FAB smaller on mobile */
  .a11y-fab { padding: 8px 12px 8px 10px; font-size: 12px; }

  /* Traffic-light table → fully stacked */
  .r-tl-row { grid-template-columns: 36px 1fr !important; row-gap: 2px !important; }
  .r-tl-row > :nth-child(3),
  .r-tl-row > :nth-child(4) {
    grid-column: 2 / -1 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  /* ─── Senior mode 手機覆寫：抵銷上方手機 !important 規則 ─── */
  html.senior .r-logo-title         { font-size: 19px !important; }
  html.senior .r-hero-h1            { font-size: 38px !important; }
  html.senior .r-hero-p             { font-size: 19px !important; }
  html.senior .r-cat-tile-name      { font-size: 18px !important; }
  html.senior .r-section-head-title { font-size: 31px !important; }
  html.senior .r-article-h1         { font-size: 31px !important; }
  html.senior .a11y-fab             { font-size: 14px !important; padding: 10px 14px 10px 12px !important; }
}

/* ── Hero card float animations ── */
@keyframes heroFloat1 {
  0%, 100% { transform: rotate(-3deg) translateY(0px); }
  50%       { transform: rotate(-3deg) translateY(-10px); }
}
@keyframes heroFloat2 {
  0%, 100% { transform: rotate(2deg) translateY(0px); }
  50%       { transform: rotate(2deg) translateY(-14px); }
}
@keyframes heroFloat3 {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.hero-card-back  { animation: heroFloat1 6s ease-in-out infinite; }
.hero-card-front { animation: heroFloat2 8s ease-in-out infinite 1s; }
.hero-card-pill  { animation: heroFloat3 5s ease-in-out infinite 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .hero-card-back, .hero-card-front, .hero-card-pill { animation: none; }
}