/* ============================================================
   Prov-AI AP — Layout + wide-table enhancements
   (Phase 1 落地，2026-05-21；對照
    docs: 2_AAT-TW索引典專案/P2_Traceable_Governance_AAT/溯源背景文件/
          08_release_site_design/2026-05-21_overall-visual-review.md)

   Strategy:
   - Design tokens in :root (spacing / type / width / radius / nav offset)
   - Single content-width system: container 80rem, prose min(64ch, 100%)
   - Wide tables retain page-sticky thead (Fix v8) and gain a visible
     border container so they read as a "different region" rather than
     a wider prose block — solves the prose/table visual rift without
     introducing horizontal scroll
   - Material 3-column layout retained, but .md-content__inner is
     centered (Anthropic Docs style, Layout option C)
   ============================================================ */

/* === Design tokens === */
:root {
  /* Spacing scale (8px base, swiss modernism) */
  --pa-space-1: 0.25rem;
  --pa-space-2: 0.5rem;
  --pa-space-3: 0.75rem;
  --pa-space-4: 1rem;
  --pa-space-6: 1.5rem;
  --pa-space-8: 2rem;
  --pa-space-12: 3rem;
  --pa-space-16: 4rem;

  /* Type scale */
  --pa-text-xs: 0.75rem;
  --pa-text-sm: 0.875rem;
  --pa-text-base: 1rem;
  --pa-text-lg: 1.125rem;
  --pa-text-xl: 1.25rem;
  --pa-text-2xl: 1.5rem;
  --pa-text-3xl: 1.875rem;

  /* Width tokens.
     - page-width: outer Material grid (sidebar + content combined).
       Stays generous so 1366+ viewports use full layout.
     - content-width: .md-content__inner only. Wrapped in min() so it
       caps at 64rem on wide viewports, but on narrow viewports
       (e.g. 1366) drops to (parent width − 4rem) so there's always
       room for `margin: 0 auto` to produce visible centering
       (Layout option C — Anthropic Docs style).
     - Material's root font scales with breakpoint (20px @1366, 22px
       @1920), so 64rem ≈ 1280px @1366 and ≈ 1408px @1920. */
  --pa-prose-width: min(64ch, 100%);
  --pa-page-width: 80rem;
  --pa-content-width: min(64rem, calc(100% - 4rem));

  /* Nav offset: md-header 2.6rem + md-tabs 2.4rem ≈ 5rem */
  --pa-nav-offset: 5rem;

  /* Border radius (uniform, swiss) */
  --pa-radius: 0.4em;
}

/* === Page container (outer grid, sidebar + content combined) === */
.md-grid {
  max-width: var(--pa-page-width);
}

/* === Centered article content (Layout option C: Anthropic style) ===
   Material 在 @media (min-width: 76.25em) 用 5-class selector
     [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner
   設了 margin-left: 1.2rem，specificity (0,5,0) 蓋過我的 .md-content__inner (0,1,0)。
   max-width / padding 沒被覆寫所以正常套上；margin 必須 !important 才能中心對齊。 */
.md-content__inner {
  max-width: var(--pa-content-width);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pa-space-8);
  padding-right: var(--pa-space-8);
}

/* === Top nav / tabs height compression === */
.md-header { min-height: 2.6rem; height: 2.6rem; }
.md-tabs   { min-height: 2.4rem; height: 2.4rem; }

/* === Prose width — 64ch best practice (Tailwind, MDN, React docs) === */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > blockquote,
.md-typeset > h2,
.md-typeset > h3,
.md-typeset > h4 {
  max-width: var(--pa-prose-width);
}

/* === Line-height relaxed === */
.md-typeset { line-height: 1.7; }

/* === Wide tables: page-sticky thead (Fix v8) + visible border
       container so the table reads as a distinct region rather than
       a wider prose block. No horizontal scroll: 10 columns fit via
       table-layout: fixed + per-column % widths (Fix v9). === */
.md-typeset table:has(th:nth-child(7)) {
  display: table;
  overflow: visible;
  max-width: none;
  width: 100%;
  table-layout: fixed;
  /* light mode: --lightest 對比太淡看不出 containment；改用 --light 並加
     subtle box-shadow 強化「不同區域」的視覺分離 */
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: var(--pa-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin: var(--pa-space-6) 0;
}

[data-md-color-scheme="slate"] .md-typeset table:has(th:nth-child(7)) {
  /* dark mode 維持原 --lightest 邊框（白底 box-shadow 在暗底沒效果） */
  border-color: var(--md-default-fg-color--lightest);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Cell padding (token-driven) */
.md-typeset table:has(th:nth-child(7)) th,
.md-typeset table:has(th:nth-child(7)) td {
  padding: var(--pa-space-2) var(--pa-space-3);
  vertical-align: top;
}

/* thead headers: break only at real word boundaries (spaces, →) */
.md-typeset table:has(th:nth-child(7)) thead th {
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
}

/* tbody cells: prefer wrapping at spaces/slashes/arrows; mid-word
   break only as last resort for camelCase IDs (reasoningDurationSec) */
.md-typeset table:has(th:nth-child(7)) tbody td {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Column widths (Fix v9, sum = 100%) */
.md-typeset table:has(th:nth-child(7)) th:nth-child(1)  { width: 13%; }  /* 名稱 (prefixed name) */
.md-typeset table:has(th:nth-child(7)) th:nth-child(2)  { width:  7%; }  /* 國際標準 (PROV-O / DCMI) */
.md-typeset table:has(th:nth-child(7)) th:nth-child(3)  { width: 18%; }  /* 定義 */
.md-typeset table:has(th:nth-child(7)) th:nth-child(4)  { width: 10%; }  /* requirement */
.md-typeset table:has(th:nth-child(7)) th:nth-child(5)  { width: 11%; }  /* 條件 */
.md-typeset table:has(th:nth-child(7)) th:nth-child(6)  { width: 10%; }  /* cardinality */
.md-typeset table:has(th:nth-child(7)) th:nth-child(7)  { width: 11%; }  /* domain → range */
.md-typeset table:has(th:nth-child(7)) th:nth-child(8)  { width:  8%; }  /* Encoding Scheme */
.md-typeset table:has(th:nth-child(7)) th:nth-child(9)  { width:  7%; }  /* capture */
.md-typeset table:has(th:nth-child(7)) th:nth-child(10) { width:  5%; }  /* CQ */

/* Sticky table header vs page scroll (under compressed nav 5rem) */
.md-typeset table:has(th:nth-child(7)) thead th {
  position: sticky;
  top: var(--pa-nav-offset);
  background: var(--md-default-bg-color);
  z-index: 3;
}

/* Fix v8: lift sticky thead out of Material's overflow:auto wrapper.
   Without this, the th's sticky containing block is `.md-typeset__scrollwrap`
   (overflow:auto) which doesn't scroll for fixed-layout wide tables, so the
   thead never pins to the viewport — it just scrolls away with the page. */
.md-typeset__scrollwrap:has(table th:nth-child(7)) { overflow: visible; }

/* === Code block: subtle border for Anthropic-style framing === */
.md-typeset pre > code {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--pa-radius);
}

/* === Zebra + row hover (applies to all tables) === */
.md-typeset table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.025);
}
.md-typeset table tbody tr:hover td {
  background: rgba(var(--md-accent-fg-color--rgb), 0.08);
}

/* Dark-mode zebra */
[data-md-color-scheme="slate"] .md-typeset table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   Phase 3 — Wide-table dual-mode: Table view ⇄ Card view
   ------------------------------------------------------------
   extra.js wraps each wide table (≥7 cols) in `.pa-view-wrap`,
   builds a card-grid sibling, and injects a Table/Card toggle.
   Preference persists in localStorage. Default is card view
   (使用者偏好：人閱讀卡片比較清晰；表格留給報告需要時).
   ============================================================ */

.pa-view-wrap {
  margin: var(--pa-space-6) 0;
}

/* === Segmented control: Table | Card === */
.pa-view-toggle {
  display: inline-flex;
  gap: 1px;
  margin-bottom: var(--pa-space-3);
  background: var(--md-default-fg-color--lightest);
  padding: 2px;
  border-radius: var(--pa-radius);
}
.pa-view-toggle button {
  border: 0;
  background: transparent;
  padding: 0.3em 0.9em;
  font-size: 0.82em;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  border-radius: calc(var(--pa-radius) - 2px);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.pa-view-toggle button:hover { color: var(--md-default-fg-color); }
.pa-view-toggle button.active {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
[data-md-color-scheme="slate"] .pa-view-toggle button.active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pa-view-toggle button svg {
  width: 0.95em;
  height: 0.95em;
}

/* Hide table when card view is active (target the Material scrollwrap
   that wraps our wide tables, since extra.js moves *that* — not the
   bare <table> — into the wrap). Hide card grid when table view active. */
.pa-view-wrap.pa-view-mode-card > .md-typeset__scrollwrap,
.pa-view-wrap.pa-view-mode-card > .md-typeset__table,
.pa-view-wrap.pa-view-mode-card > table {
  display: none;
}
.pa-view-wrap.pa-view-mode-table > .pa-cv-grid {
  display: none;
}

/* === Card grid === */
.pa-cv-grid {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
}

.pa-cv-card {
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: var(--pa-radius);
  padding: var(--pa-space-4) var(--pa-space-6);
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pa-cv-card:hover {
  border-color: var(--md-default-fg-color--lighter, var(--md-default-fg-color--light));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
[data-md-color-scheme="slate"] .pa-cv-card {
  border-color: var(--md-default-fg-color--lightest);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pa-cv-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin-bottom: var(--pa-space-3);
}
.pa-cv-name {
  font-family: var(--md-code-font, monospace);
  font-size: 1.05em;
  font-weight: 600;
  color: var(--md-default-fg-color);
  margin: 0;
  margin-right: auto;
  line-height: 1.4;
}
.pa-cv-name code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.pa-cv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-4);
  margin: 0 0 var(--pa-space-3);
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
}
.pa-cv-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}
.pa-cv-meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
}
.pa-cv-meta-value {
  font-family: var(--md-code-font, monospace);
  font-size: 0.9em;
  color: var(--md-default-fg-color);
}

.pa-cv-body {
  font-size: 0.95em;
  line-height: 1.65;
  color: var(--md-default-fg-color);
  margin: 0 0 var(--pa-space-3);
}

.pa-cv-condition {
  font-size: 0.88em;
  color: var(--md-default-fg-color);
  background: var(--md-default-fg-color--lightest);
  padding: var(--pa-space-2) var(--pa-space-3);
  border-left: 3px solid var(--md-default-fg-color--light);
  border-radius: 0 var(--pa-radius) var(--pa-radius) 0;
  margin: 0 0 var(--pa-space-3);
}
.pa-cv-condition-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
  margin-bottom: 0.2em;
}

.pa-cv-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pa-space-3);
  padding-top: var(--pa-space-2);
  border-top: 1px dashed var(--md-default-fg-color--lightest);
  font-size: 0.82em;
}
.pa-cv-footer-item {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}
.pa-cv-footer-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
}
.pa-cv-footer-value {
  color: var(--md-default-fg-color);
  word-break: break-word;
}
.pa-cv-footer-value code {
  background: none;
  padding: 0;
  font-size: 0.95em;
}

/* === Chip styles (markup injected by extra.js) ===
   Two-axis design (Phase 4 simplification):
   - Requirement strength (4 colors): MUST/MUST-conditional/SHOULD/OPTIONAL
   - Capture mode (1 neutral chip + 3 SVG icons): AUTO/HYBRID/HUMAN
   Reduces visual noise from 7 competing colors to 4 + iconography. */
.md-typeset .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 0.6em;
  margin: 0 0.1em;
  border-radius: 0.8em;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.md-typeset .chip svg {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}

/* Requirement axis — strength as color */
.md-typeset .chip-must             { background: #e74c3c; color: #fff; }
.md-typeset .chip-must-conditional { background: #f39c12; color: #fff; }
.md-typeset .chip-should           { background: #3498db; color: #fff; }
.md-typeset .chip-optional         { background: #95a5a6; color: #fff; }

/* Capture-mode axis — neutral chip, distinguished by icon */
.md-typeset .chip-mode {
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lighter, rgba(0, 0, 0, 0.12));
}
[data-md-color-scheme="slate"] .md-typeset .chip-mode {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}