/*
 * 共通UIプリミティブ。静的HTMLのため、shadcn/ui を依存として導入せず、
 * 同じ token → primitive → page の一方向で全ビューを組む。
 * 判定色（--e1..--e5）は情報そのものなので、ここでは再定義しない。
 */

.ota-ui {
  --background:var(--page);
  --foreground:var(--ink);
  --card:var(--surface);
  --card-foreground:var(--ink);
  --popover:var(--surface);
  --popover-foreground:var(--ink);
  --primary:var(--accent);
  --primary-foreground:#fff;
  --muted-surface:color-mix(in srgb, var(--page) 94%, var(--ink));
  --muted-foreground:var(--sec);
  --border:var(--grid);
  --input:var(--grid);
  --ring:var(--accent);
  --radius:6px;
  color:var(--foreground);
  background:var(--background);
  text-rendering:optimizeLegibility;
}

.ota-ui :is(button, input, select, textarea) { font:inherit; }
.ota-ui :is(a, button, summary, [role="button"]) { text-underline-offset:3px; }
.ota-ui :is(a, button, summary, [role="button"]):focus-visible {
  outline:2px solid var(--ring);
  outline-offset:3px;
}
.ota-ui :is(button, summary, [role="button"]) { -webkit-tap-highlight-color:transparent; }
.ota-ui ::selection { color:var(--primary-foreground); background:var(--primary); }

/* Shared navigation: a quiet, legible boundary instead of a decorative top bar. */
.ota-ui.page-detail #bar {
  box-shadow:none;
  border-bottom:1px solid color-mix(in srgb, #fff 18%, transparent);
}
.ota-ui.page-detail .bar-home { text-decoration:none; }
.ota-ui.page-detail .bar-home:focus-visible { outline-color:#fff; }
.ota-ui.page-detail .wrap { max-width:860px; }

/* Document hierarchy. The root report's three protected analysis sections are deliberately excluded. */
.ota-ui.page-root h2:not(#sec1):not(#sec2):not(#sec5),
.ota-ui.page-detail h2,
.ota-ui.page-detail .proj-h2 {
  margin-top:56px;
  padding-bottom:10px;
  border-bottom:1px solid var(--foreground);
  font-weight:650;
  letter-spacing:-.01em;
}
.ota-ui.page-detail h3,
.ota-ui.page-detail section h3 {
  margin-top:30px;
  padding-bottom:7px;
  border-bottom:1px solid var(--border);
  font-weight:650;
  letter-spacing:-.005em;
}
.ota-ui.page-detail .kicker,
.ota-ui.page-root .apx-h3,
.ota-ui .sh-eyebrow,
.ota-ui .otaco-card-eyebrow,
.ota-ui .otaco-source-kind,
.ota-ui .gnav-t {
  color:var(--muted-foreground);
  font-family:ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  font-size:.69rem;
  font-weight:650;
  letter-spacing:.055em;
  text-transform:uppercase;
}

/* Card: borders and spacing carry hierarchy; no glossy panels or excess rounding. */
.ota-ui.page-root :is(.followup-card, .cmp-card, .cg-card, .provenance-card, .data-source-card),
.ota-ui.page-detail :is(.fig, .gnav, .sh-card, .otaco-chart-card, .otaco-doc-card, .otaco-verdict-card, .otaco-issue-card, .otaco-related-card, .otaco-intro-card, .otaco-finance-hero, .otaco-flow-chart) {
  border-color:var(--border);
  border-radius:var(--radius);
  box-shadow:none;
}
.ota-ui.page-root .followup-card { padding:20px; }
.ota-ui.page-root .followup-head { gap:16px; padding-bottom:12px; }
.ota-ui.page-root .followup-grid {
  border-color:var(--border);
  border-radius:calc(var(--radius) - 2px);
}
.ota-ui.page-root .followup-grid > div { padding:14px 16px; border-color:var(--border); }
.ota-ui.page-root .followup-grid dt {
  font-family:ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  font-size:.66rem;
  font-weight:650;
  letter-spacing:.045em;
}
.ota-ui.page-root .followup-grid .decision-impact { background:var(--muted-surface); }
.ota-ui.page-root .followup-link { margin-top:12px; }

/* Evidence and quotations are typographic evidence, not a stack of floating cards. */
.ota-ui.page-detail blockquote,
.ota-ui.page-root .cg-card .q,
.ota-ui.page-root .pm-quotes li {
  border-color:var(--border);
  border-left:3px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.ota-ui.page-detail blockquote { padding:12px 15px; }
.ota-ui.page-detail blockquote p { color:var(--muted-foreground); }
.ota-ui.page-root .cg-card .q { padding:13px 15px; }
.ota-ui.page-root .cg-card .q blockquote { border-left-color:var(--primary); }
.ota-ui.page-detail .attr,
.ota-ui.page-detail .rb-link {
  text-decoration-color:color-mix(in srgb, currentColor 42%, transparent);
}
.ota-ui.page-detail .attr:hover,
.ota-ui.page-detail .rb-link:hover { text-decoration-thickness:1.5px; }

/* 凡例はrootと詳細ページで同じチップとして読む。 */
.ota-ui .legend { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; align-items:center; }
.ota-ui .legend .chip { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--sec); background:var(--surface); border:1px solid var(--grid); border-radius:999px; padding:2px 9px; }
.ota-ui .legend .chip i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.ota-ui .legend .chip b { color:var(--ink); }

/* Tables, charts, and legends share the same reading frame. */
.ota-ui.page-detail :is(table, .fig, .hm-scroll),
.ota-ui.page-root :is(.provenance-table-wrap, .hcal-wrap) {
  border-color:var(--border);
  border-radius:var(--radius);
  box-shadow:none;
}
.ota-ui.page-detail table { background:var(--card); }
.ota-ui.page-detail :is(thead th, .fig figcaption, .shared-note, .rb-n span) { color:var(--muted-foreground); }
.ota-ui.page-detail :is(th, td) { border-color:var(--border); }
.ota-ui.page-detail .fig { padding:16px; }
.ota-ui.page-detail .fig figcaption { padding-top:12px; }
.ota-ui.page-detail .fig .ax { stroke:var(--border); }
.ota-ui.page-detail .rb-bar { gap:3px; }
.ota-ui.page-detail .rb-bar span { border-radius:2px; }
.ota-ui.page-detail .rb-n { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; }
.ota-ui.page-detail .rb-link { float:none; margin-left:auto; white-space:nowrap; }

/* Compact controls and status labels use one interaction model. */
.ota-ui :is(.source-chip, .role-chip, .choice-chip, .chip, .sh-badge, .otaco-verdict-chip, .otaco-source-chip) {
  border-radius:4px;
  box-shadow:none;
}
.ota-ui.page-detail :is(.sh-button, .otaco-related-control) {
  min-height:32px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--card);
  color:var(--foreground);
  box-shadow:none;
}
.ota-ui.page-detail :is(.sh-button, .otaco-related-control):hover {
  border-color:var(--foreground);
  background:var(--muted-surface);
}
.ota-ui.page-detail .sh-button.otaco-card-action-link {
  border-color:var(--foreground);
  background:var(--foreground);
  color:var(--background);
}
.ota-ui.page-detail .sh-button.otaco-card-action-link:hover,
.ota-ui.page-detail .sh-button.otaco-card-action-link:focus-visible {
  border-color:var(--foreground);
  background:#2a2a28;
  color:var(--background);
}
.ota-ui.page-detail :is(.gnav, .otaco-source-strip) {
  background:var(--muted-surface);
}

/* Popovers and dialogs are the only elevated surface. */
.ota-ui.page-detail :is(.source-popover, .otaco-popover, [role="tooltip"]),
.ota-ui.page-root .person-modal {
  background:var(--popover);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 34px rgb(11 11 11 / 14%);
}
.ota-ui.page-root .person-modal { padding:22px; }
.ota-ui.page-root .person-modal header { padding-bottom:14px; border-bottom:1px solid var(--border); }
.ota-ui.page-root .person-modal-close {
  min-width:36px;
  min-height:36px;
  border-color:var(--border);
  border-radius:4px;
  background:var(--card);
}
.ota-ui.page-root .person-modal-close:hover { background:var(--muted-surface); }
.ota-ui.page-root .pm-trace {
  gap:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.ota-ui.page-root .pm-trace > div { padding:13px 14px; border-color:var(--border); }

/* 日別判定表の最小幅は内側の横スクロールへ閉じ込め、ページ全体を横へ広げない。 */
.ota-ui.page-root .hm-split > .hm-day { min-width:0; }

/* OTACO has more source materials, but it uses the same cards, tabs, and evidence language. */
.ota-ui.page-detail .otaco-chart-heading,
.ota-ui.page-detail .otaco-section-heading { letter-spacing:-.01em; }
.ota-ui.page-detail .otaco-source-strip { border-color:var(--border); border-radius:var(--radius); }
.ota-ui.page-detail .otaco-source-chip { border-color:var(--border); background:var(--card); }
.ota-ui.page-detail .otaco-related-viewport {
  scrollbar-color:var(--line) transparent;
  scrollbar-width:thin;
}
.ota-ui.page-detail .otaco-related-slide { scroll-snap-align:start; }
.ota-ui.page-detail .otaco-related-card { min-height:100%; }

@media (max-width:700px) {
  .ota-ui.page-root .followup-card { padding:16px; }
  .ota-ui.page-root .person-modal { padding:18px; }
  .ota-ui.page-detail .wrap { padding-inline:16px; }
  .ota-ui.page-detail .rb-link { margin-left:0; flex-basis:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .ota-ui *, .ota-ui *::before, .ota-ui *::after { scroll-behavior:auto !important; transition:none !important; }
}