/* ui-v3 component system. Behavior selectors and source text remain stable. */
:root {
  --color-ink: #202938;
  --color-secondary: #566274;
  --color-muted: #606b7d;
  --color-accent: #2459b8;
  --color-accent-strong: #1d4895;
  --color-selected: #eaf1ff;
  --color-canvas: #f4f6fa;
  --color-surface: #ffffff;
  --color-page: #f3f5f8;
  --color-line: #dfe4ec;
  --color-line-strong: #8190a5;
  --color-soft: #f5f7fa;
  --color-warning: #81530d;
  --color-warning-surface: #fff8e8;
  --nav-ink: #283548;
  --nav-muted: #58687b;
  --nav-surface: #f8f9fc;
  --nav-card: #edf1f7;
  --nav-line: #899ab1;
  --nav-selected: #eaf1ff;
  --nav-accent: #2459b8;
  --control-radius: 8px;
  --panel-radius: 12px;
  --control-height: 40px;
  --global-header-height: 76px;
  --shadow: 0 8px 32px #20293812;
  --motion-fast: 160ms;
  --radius: 8px;
}
::selection { background: #d7e5ff; color: #202938; }
.ui-icon { flex-shrink: 0; }
.article-head .prose-small a { overflow-wrap: anywhere; }
.result-list { grid-template-columns: minmax(0,1fr); }
.result-item { min-width: 0; overflow-wrap: anywhere; }
:is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
:is(button,a,summary) { transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
:is(input,select,textarea) { accent-color: var(--color-accent); }

/* Global navigation: task names stay visible, active state has a shape. */
.topbar { height: 76px; padding: 0 28px; gap: 32px; box-shadow: none; border-bottom: 1px solid var(--color-line); }
.brand { gap: 12px; min-width: 152px; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent); color: white; box-shadow: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-title strong { font: 600 18px/1.4 var(--font-ui); letter-spacing: .02em; }
.brand-title span { font: 12px/1.5 var(--font-ui); letter-spacing: 0; margin-top: 2px; }
.library-nav { gap: 8px; }
.library-nav a { gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 14px; min-height: 40px; }
.library-nav a .ui-icon { width: 18px; height: 18px; }
.library-nav a:hover { background: var(--color-soft); color: var(--color-ink); }
.library-nav a[aria-current=page] { color: var(--color-accent); background: var(--color-selected); font-weight: 600; }
.library-nav a[aria-current=page]::after { display: none; }
.topbar-actions { gap: 16px; }
.topbar .button-quiet { font-size: 14px; border: 1px solid var(--color-line); padding: 8px 12px; background: var(--color-surface); border-radius: var(--control-radius); }
.dataset-picker select { height: 40px; padding: 8px 30px 8px 12px; border-color: var(--color-line-strong); border-radius: var(--control-radius); background: var(--color-surface); font-size: 14px; }
.topbar .button-quiet:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-selected); }

/* Split workspace: source reading is the largest quiet surface. */
.column-layout,.is-outline .column-layout { grid-template-columns: clamp(280px,var(--column-nav-width,336px),calc(100% - 420px)) minmax(0,1fr); padding: 20px 24px 24px; gap: 20px; overflow: visible; }
.column-map,.column-reading-panel { height: calc(100dvh - var(--global-header-height) - 44px); min-height: 460px; border: 1px solid var(--color-line); border-radius: var(--panel-radius); }
.column-map { background: var(--nav-surface); }
.column-reading-panel { box-shadow: 0 2px 6px #20293803; }
.column-header { padding: 24px 20px 16px; }
.column-heading { gap: 6px; }
.column-library-label { font-size: 13px; color: var(--color-secondary); letter-spacing: 0; }
.column-heading h1 { font: 600 24px/1.5 var(--font-ui); }
.column-heading>span:last-child { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.column-heading>span:last-child::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #337649; }
.column-search { margin-top: 20px; }
.column-search-field { height: 44px; border-color: var(--color-line-strong); background: var(--color-surface); border-radius: var(--control-radius); box-shadow: none; }
.column-search-field>.ui-icon { color: var(--color-secondary); }
.column-search-field input { color: var(--color-ink); height: 42px; font-size: 14px; }
.column-search-field input::placeholder { color: var(--color-secondary); }
.column-search-field kbd { color: var(--color-secondary); border: 1px solid var(--color-line); border-radius: 4px; background: var(--color-soft); }
.column-search-field button { color: var(--color-accent); border-radius: 6px; width: 36px; height: 36px; }
.column-search-field button:hover { background: var(--color-selected); }
.column-search-field:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px #2459b814; }
.column-map-toolbar { border-bottom: 1px solid var(--color-line); padding: 8px 16px 16px; gap: 8px; }
.column-view-switch { padding: 4px; gap: 4px; background: #e9edf3; border-radius: 9px; }
.column-view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; min-width: 72px; border-radius: 6px; font-size: 14px; }
.column-view-switch .ui-icon { width: 16px; height: 16px; }
.column-view-switch button[aria-pressed=true] { color: var(--color-accent); background: var(--color-surface); box-shadow: 0 1px 4px #20293812; font-weight: 600; }
.column-map-menu summary { color: var(--color-secondary); border-radius: 6px; min-height: 40px; }
.column-map-menu[open]>summary { background: var(--color-selected); color: var(--color-accent); }
.column-map-menu>div { background: var(--color-surface); border-color: var(--color-line); border-radius: 10px; box-shadow: var(--shadow); z-index: 12; }
.column-map-menu button { font-size: 14px; min-height: 44px; color: var(--color-ink); }
.column-map-menu button:hover { background: var(--color-selected); color: var(--color-accent); }
.column-viewport { background-image: radial-gradient(#b8c4d6 1px,transparent 1px); background-size: 24px 24px; }
.column-node { box-shadow: 0 2px 6px #20293808; background: var(--color-surface); border-color: var(--nav-line); border-radius: 10px; }
.column-node-title { font-size: 14px; }
.column-node-toggle { min-height: 40px; }
.is-outline .column-viewport { padding: 8px 10px 24px; }
.is-outline .column-node { border-radius: 8px; margin: 2px 0; }
.is-outline .column-node-title { padding: 10px 58px 10px calc(12px + var(--depth)*14px); font-size: 14px; line-height: 1.75; border-radius: 8px; }
.is-outline .column-node.is-selected { box-shadow: inset 3px 0 var(--color-accent); }
.is-outline .column-node.is-selected .column-node-title:hover { background: var(--color-selected); }
.column-map-bottom { padding: 8px 16px; min-height: 44px; border-top-color: var(--color-line); border-radius: 0 0 var(--panel-radius) var(--panel-radius); font-size: 12px; }
.column-resizer { right: -12px; width: 12px; }
.column-resizer::after { opacity: .55; left: 4px; width: 3px; background: var(--nav-line); }

/* Reading controls, path, metadata, and personal tools share one hierarchy. */
.column-reading-toolbar { min-height: 56px; padding: 8px 24px; border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.column-reading-toolbar button,.column-settings summary { font-size: 14px; min-height: 40px; border-radius: var(--control-radius); }
.column-reading-toolbar [data-column-action=focus] { border: 1px solid var(--color-line); padding: 6px 12px; }
.column-reading-progress { color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.column-breadcrumb { min-height: 48px; padding: 4px 24px; background: #fbfcfe; gap: 16px; }
.column-breadcrumb :is(button,summary),.column-current-path { font-size: 13px; }
.column-back { color: var(--color-secondary); }
.column-reader { padding: 32px clamp(24px,4vw,64px) 88px; border-radius: 0 0 var(--panel-radius) var(--panel-radius); scrollbar-color: #a4b0c1 var(--color-surface); }
.column-status { font-size: 12px; border-radius: 6px; color: var(--color-secondary); }
.column-status::before { background: var(--color-accent); }
.column-article-head h2 { font-size: clamp(28px,2.3vw,34px); line-height: 1.6; }
.column-article-head>p,.column-source { font-size: 13px; }
.column-settings-content,.column-path-menu>div { border-color: var(--color-line); border-radius: 10px; box-shadow: var(--shadow); }
.column-settings-content { padding: 20px; font-size: 14px; }
.column-settings-content :is(button,select) { min-height: 40px; border-radius: 6px; }
.column-points { border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-soft); padding: 0 16px; }
.column-points>summary { min-height: 44px; font-size: 13px; }
.annotation-buttons>button,.article-marks>summary,.article-audio button,.article-audio select { min-height: 40px; border-radius: var(--control-radius); border-color: var(--color-line-strong); }
.annotation-buttons>button:first-child { color: var(--color-accent); background: var(--color-selected); border-color: #7894c8; }
.annotation-buttons>button:hover,.article-audio button:hover { background: var(--color-selected); border-color: var(--color-accent); }
.article-audio { border-radius: 8px; padding: 12px 16px; background: var(--color-soft); border: 1px solid var(--color-line); }
.column-reader>.article-audio { padding: 12px 16px; margin-block: 16px; }
.article-audio-heading { gap: 16px; }
.article-audio-heading>span { color: var(--color-secondary); font-size: 13px; }
.column-next-list button { border-radius: 8px; padding: 12px; min-height: 48px; }
.column-next-list button:hover { background: var(--color-selected); }

/* Existing datasets use the same inputs, list rhythm, and dialog components. */
.button { min-height: var(--control-height); border-radius: var(--control-radius); }
.field :is(input,select,textarea),.search-toolbar :is(input,select),.pinned-topic-search :is(input,select) { border-radius: var(--control-radius); min-height: 40px; }
.page-intro h1,.favorites-heading h1 { font: 600 30px/1.5 var(--font-ui); }
.personal-favorites { padding-top: 16px; }
.favorite-item h2 { font-size: 22px; }
.favorites-tabs { gap: 24px; }
.favorites-tabs a { font-size: 14px; }
.favorites-tabs span { background: var(--color-soft); border-radius: 12px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.favorites-empty { padding: 40px 24px; background: var(--color-surface); border: 1px dashed var(--color-line-strong); border-radius: var(--panel-radius); margin-top: 24px; }
.hero { color: var(--color-ink); border: 1px solid var(--color-line); background: var(--color-surface); }
.hero h1 { color: var(--color-ink); font: 600 32px/1.5 var(--font-ui); }
.hero p,.hero-meta { color: var(--color-secondary); }
.nav-list a.active { color: var(--color-accent); background: var(--color-selected); border-left-color: var(--color-accent); }
.nav-list a { min-height: 44px; border-radius: 6px; }
.stat,.panel,.search-toolbar { border-radius: var(--panel-radius); box-shadow: none; }
.annotation-dialog,.audio-progress-dialog { border: 1px solid var(--color-line); border-radius: 16px; box-shadow: 0 20px 80px #20293830; }
.annotation-dialog h2,.audio-progress-dialog h2 { font: 600 22px/1.5 var(--font-ui); }
.annotation-dialog :is(select,textarea),.annotation-dialog footer button { border-radius: var(--control-radius); }
.annotation-dialog footer .annotation-remove { color: #a12e2e; }
.audio-progress-overview { background: var(--color-soft); border-radius: 10px; padding: 16px; margin-block: 20px; }
.audio-progress-control { border-top: 0; padding-top: 0; }
.audio-progress-dialog [data-stop] { color: #a12e2e; border-color: #bd6868; background: #fff6f5; }
.audio-progress-dialog [data-stop]:hover:not(:disabled) { background: #fbe5e3; }
.audio-progress-control [data-operation][data-state=failed],.audio-progress-control [data-operation][data-state=interrupted],.annotation-editor-error { color: #a12e2e; }

/* Explicit mode and responsive contracts override the desktop shell. */
.pinned-column.is-reading-focused .column-layout { padding: 0; gap: 0; }
.pinned-column.is-reading-focused .column-reading-panel { height: 100dvh; border: 0; border-radius: 0; }
.pinned-column.is-reading-focused .column-reading-toolbar { border-radius: 0; }
.pinned-column.is-map-focused .column-layout { padding: 0; gap: 0; }
body.is-map-focused .column-workspace { inset: var(--global-header-height) 0 0; }
.pinned-column.is-map-focused .column-map { height: calc(100dvh - var(--global-header-height)); border: 0; border-radius: 0; }
@media(max-width:1100px) {
  .topbar { padding: 0 20px; gap: 16px; }
  .brand { min-width: 140px; }
  .library-nav a { padding-inline: 10px; gap: 6px; }
  .library-nav a .ui-icon { display: none; }
  .topbar-actions { gap: 8px; }
  .column-layout,.is-outline .column-layout { grid-template-columns: clamp(280px,var(--column-nav-width,300px),calc(100% - 416px)) minmax(0,1fr); gap: 16px; padding-inline: 16px; }
}
@media(min-width:801px) and (max-width:1000px) {
  :root { --global-header-height: 120px; }
  .topbar { height: 120px; flex-wrap: wrap; padding: 12px 20px 8px; gap: 8px 16px; }
  .brand { margin-right: auto; }
  .topbar-actions { margin-left: auto; }
  .library-nav { order: 3; width: 100%; margin: 0; }
}
@media(max-width:800px) {
  .topbar { height: auto; padding: 12px 16px 0; gap: 8px 12px; }
  .brand { min-width: 0; gap: 8px; }
  .brand-mark { width: 32px; height: 36px; border-radius: 8px; }
  .brand-title strong { font-size: 16px; }
  .library-nav { gap: 4px; padding: 4px 0 8px; }
  .library-nav a { min-height: 44px; padding: 8px 12px; font-size: 14px; }
  .topbar .button-quiet { min-height: 44px; min-width: 44px; padding: 8px; }
  .dataset-picker select { min-height: 44px; max-width: 128px; font-size: 13px; }
  .column-layout,.is-outline .column-layout { grid-template-columns: 1fr; padding: 0 12px 16px; gap: 16px; }
  .column-mobile-tools { padding: 8px 12px; background: var(--color-page); }
  .column-mobile-tools button { color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-line-strong); font-size: 14px; }
  .column-map { height: 420px; min-height: 0; }
  .column-header { padding: 16px; }
  .column-heading { gap: 4px 12px; }
  .column-heading h1 { font-size: 22px; }
  .column-heading>span:last-child { font-size: 12px; }
  .column-search { margin-top: 12px; }
  .column-search-field input { font-size: 16px; }
  .column-search-field button { width: 44px; height: 42px; }
  .column-map-toolbar { padding: 4px 12px 12px; }
  .column-view-switch button,.column-map-menu summary,.column-node-toggle { min-height: 44px; }
  .column-view-switch button { min-width: 76px; }
  .column-map-bottom button { min-height: 44px; min-width: 44px; }
  .column-reading-panel { height: 85dvh; min-height: 520px; }
  .column-reading-toolbar { padding: 8px 16px; position: relative; }
  .column-settings { position: static; }
  .column-settings-content { right: 16px; top: calc(100% - 4px); max-width: calc(100vw - 56px); }
  .annotation-buttons { position: relative; }
  .article-marks { position: static; }
  .article-marks>div { left: 0; right: auto; top: calc(100% + 8px); max-width: 100%; }
  .column-breadcrumb { padding-inline: 16px; gap: 8px; }
  .column-reading-toolbar :is(button,summary),.column-breadcrumb :is(button,summary),.annotation-buttons>button,.article-marks>summary,.article-audio :is(button,select),.column-settings-content :is(button,select),.button,.field :is(input,select) { min-height: 44px; }
  .column-reader { padding: 24px 20px 72px; }
  .column-article-head h2 { font-size: 27px; }
  .pinned-column.is-reading-focused .column-reader { padding: 24px 22px 72px; }
  .pinned-column.is-map-focused .column-map { height: 100dvh; }
  body.is-map-focused .column-workspace { inset: 0; }
  .page-intro h1,.favorites-heading h1 { font-size: 26px; }
}
@media(max-width:360px) {
  .topbar { padding-inline: 10px; gap: 8px; }
  .brand-title strong { font-size: 15px; }
  .brand-mark { width: 28px; }
  .dataset-picker select { max-width: 108px; }
  .topbar-actions { gap: 6px; }
  .library-nav a { padding-inline: 10px; font-size: 13px; }
  .column-heading>span:last-child { font-size: 11px; gap: 4px; }
  .column-settings-content { width: 244px; }
}
@media(prefers-reduced-motion:reduce) { :is(button,a,summary) { transition: none; } }
@media print {
  .column-layout,.is-outline .column-layout { display: block; padding: 0; }
  .column-reading-panel,.column-reader,.pinned-column.is-reading-focused .column-reading-panel { height: auto; min-height: 0; border: 0; overflow: visible; padding: 0; }
}