:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #2d2b29;
  --muted: #706c67;
  --line: #e4e4e1;
  --panel: #ffffff;
  --accent: #9b324d;
  --accent-hover: #7d253c;
  --accent-soft: #f2e7e9;
  --secondary: #52765e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.75 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
header, main, footer { width: min(100% - 48px, 1040px); margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.brand { font-size: 15px; font-weight: 650; text-decoration: none; }
.page-nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.page-nav a { color: var(--muted); text-decoration: none; }
.page-nav a:hover { color: var(--accent); text-decoration: underline; }
.skip-link { position: absolute; top: -80px; left: 20px; background: var(--paper); padding: 8px 16px; z-index: 2; }
.skip-link:focus { top: 10px; }
.hero { text-align: center; padding: 72px 0 52px; max-width: 820px; margin: auto; }
h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 650; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 12px; }
.subtitle { font: 25px/1.4 Georgia, "Times New Roman", serif; margin: 0 0 10px; }
.lead { max-width: 780px; margin: 0 auto; color: var(--muted); font-size: 17px; }
.hero-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 25px; }
.button, button { display: inline-block; border: 1px solid var(--accent); border-radius: 4px; padding: 8px 23px; background: var(--accent); color: var(--paper); font: 500 14px/1.6 system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.button:hover, button:hover { opacity: .85; }
.button.secondary { color: var(--secondary); border-color: var(--secondary); background: transparent; }
section { padding: 38px 0 42px; border-top: 1px solid var(--line); }
h2 { color: var(--accent); font: 500 27px/1.3 Georgia, "Times New Roman", serif; margin: 0 0 19px; letter-spacing: -.02em; }
h3 { font-size: 18px; line-height: 1.5; font-weight: 600; margin: 8px 0 12px; }
p { margin: 0 0 16px; }
section > p { max-width: 840px; }
.development-note, .source { color: var(--muted); font-size: 13px; }
.source { display: block; margin-top: 16px; }
.examples { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.example { border: 1px solid var(--line); border-radius: 5px; background: var(--panel); overflow: hidden; }
.example-head { padding: 22px 24px 0; }
.number { font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.example-head h3 { font-size: 19px; margin: 5px 0 18px; }
.example-body { padding: 0 24px 22px; }
.facts { font-size: 14px; min-height: 128px; padding-bottom: 18px; margin: 0; }
.facts strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 9px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.feature-tag { display: inline-block; padding: 5px 11px; border: 1px solid #d5dfd4; border-radius: 999px; background: #eff3eb; color: #49644f; font-size: 12px; line-height: 1.6; }

.context-panel { border-top: 1px solid var(--line); padding-top: 18px; min-height: 307px; }
.eyebrow { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.context-panel h4 { font-size: 16px; line-height: 1.45; font-weight: 600; margin: 10px 0; }
.context-panel p { font-size: 14px; color: var(--muted); margin: 0; }
.verdict { display: flex; align-items: center; gap: 9px; margin-top: 20px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.reference-label { width: 100%; font-size: 11px; font-weight: 500; color: var(--muted); }
.verdict-code { display: inline-grid; place-items: center; width: 25px; height: 25px; background: var(--secondary); color: var(--paper); border-radius: 3px; font: 13px ui-monospace, monospace; }
.context-panel .explanation { font-size: 12px; margin-top: 12px; }
.example.changed .context-panel { border-top-color: var(--accent); }
.example.changed .verdict-code { background: var(--accent); }
.example button { width: 100%; margin-top: 18px; padding: 10px 8px; background: transparent; color: var(--accent); font-size: 12px; }
.example .source { font-size: 10px; }
.statistics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 28px 0 12px; }
.statistics-grid > div { border-left: 1px solid var(--line); padding-left: 16px; }
.statistics-grid > div:first-child { border: 0; padding-left: 0; }
.statistics-grid span { display: block; color: var(--muted); font-size: 12px; }
.stat-value { color: var(--accent); background: transparent; padding: 0 0 2px; border: 0; border-bottom: 1px dotted var(--muted); border-radius: 0; font-size: 24px; font-weight: 500; }
.stat-value.active { border-bottom: 1px solid var(--accent); }
.stat-detail { border-left: 2px solid var(--line); padding: 4px 18px; margin: 22px 0; min-height: 166px; font-size: 13px; }
.stat-detail strong { font-size: 13px; font-weight: 600; }
.stat-detail p { white-space: pre-line; color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.secondary-details { margin-top: 22px; }
summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 500; padding: 6px 0; }
.resource-table-wrap { overflow-x: auto; margin-top: 15px; }
.resource-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 14px; }
.resource-table caption { text-align: left; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.resource-table th, .resource-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.resource-table th { font-weight: 500; }
.resource-table thead { color: var(--muted); font-size: 12px; }
.resource-table a { overflow-wrap: anywhere; }
pre { overflow-x: auto; background: #ffffff; border: 1px solid var(--line); border-radius: 4px; padding: 20px; margin: 20px 0; font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88em; }
pre code { font-size: inherit; }
.sample-record { max-height: 380px; }
.citation-heading { margin-top: 30px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
[hidden] { display: none !important; }
/* Keep the v2 development page compatible with the shared stylesheet. */
.version-hero .lead { margin-top: 22px; }
.version-hero .label { display: block; margin-top: 18px; font-size: 12px; color: var(--muted); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.grid p, .version-next { color: var(--muted); }
@media (max-width: 680px) {
  header, main, footer { width: calc(100% - 36px); }
  header { align-items: flex-start; gap: 15px; }
  .page-nav { gap: 12px; font-size: 11px; justify-content: flex-end; }
  .brand { white-space: nowrap; font-size: 13px; }
  .hero { padding: 48px 0 38px; }
  .subtitle { font-size: 20px; }
  section { padding: 30px 0; }
  h2 { font-size: 24px; }
  .examples, .grid { grid-template-columns: 1fr; }
  .facts, .context-panel { min-height: 0; }
  .statistics-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 14px; }
  .statistics-grid > div:nth-child(4) { border: 0; padding-left: 0; }
  .stat-detail { min-height: 185px; }
  pre { padding: 15px; font-size: 11px; }
  footer { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Dataset structure and reference-label visualizations. */
.cdr-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 28px 0; }
.cdr-flow li { position: relative; border-top: 2px solid var(--line); padding: 15px 8px 4px 0; }
.cdr-flow li:not(:last-child)::after { content: '→'; position: absolute; right: -19px; top: 33px; color: var(--muted); }
.cdr-flow strong, .cdr-flow span { display: block; }
.cdr-flow .flow-index { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.cdr-flow strong { font-size: 14px; font-weight: 600; }
.cdr-flow span:last-child { font-size: 12px; color: var(--muted); margin-top: 7px; }
.domain-art { width: 52px; height: 52px; flex-shrink: 0; color: var(--secondary); }
.example-head { display: flex; gap: 16px; align-items: center; }
.bird-scene { margin-bottom: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: center; }
.bird-scene svg { width: 100%; max-width: 260px; height: 94px; display: block; margin: auto; }
.bird-scene > span { font-size: 10px; color: var(--muted); }
.wet-weather { display: none; }
.example.changed .wet-weather { display: block; }
.example.changed .dry-weather { display: none; }
.context-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.example .context-choices button { width: auto; min-height: 36px; margin: 0; padding: 7px 11px; border-color: var(--line); font-size: 12px; }
.example .context-choices button[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.label-transition { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 12px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.entity-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 25px; }
.gallery-entity { border: 1px solid var(--line); border-radius: 4px; text-align: center; padding: 22px 15px; }
.gallery-entity .domain-art { width: 68px; height: 68px; }
.gallery-entity h4 { margin: 10px 0 4px; font-size: 15px; font-weight: 600; }
.gallery-entity code { color: var(--muted); font-size: 11px; }
.gallery-entity p { margin: 12px 0 0; font-size: 13px; }
.gallery-entity .source { font-size: 10px; }
.data-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 30px 0; }
.data-chart { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 4px; }
.data-chart:last-child { grid-column: 1 / -1; }
.data-chart h3 { font-size: 15px; margin: 0 0 22px; }
.chart-row { margin-bottom: 16px; }
.chart-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.chart-row strong { font-weight: 500; white-space: nowrap; }
.chart-row small { font-size: 10px; color: var(--muted); }
.bar-track { background: #e5e8df; height: 8px; }
.bar-track span { display: block; height: 100%; background: var(--secondary); }
.data-chart figcaption { font-size: 11px; color: var(--muted); line-height: 1.65; margin-top: 20px; }
@media (max-width: 680px) {
  .cdr-flow { grid-template-columns: 1fr 1fr; gap: 22px; }
  .cdr-flow li:nth-child(2)::after { content: none; }
  .entity-gallery { grid-template-columns: 1fr; gap: 14px; }
  .data-charts { grid-template-columns: 1fr; gap: 18px; }
  .data-chart { padding: 18px; }
}

/* Burgundy leads the page; green supports the natural illustrations and charts. */
.cdr-flow li:last-child { border-top-color: var(--accent); }
.cdr-flow li:last-child strong { color: var(--accent); }
.data-chart:nth-child(2) .chart-row:nth-of-type(2) .bar-track span { background: var(--accent); }
.secondary-details[open] > summary { color: var(--accent-hover); }

/* Configurable latest-version summary. */
.latest-version { margin: 27px 0 0; color: var(--muted); font-size: 13px; text-align: left; }
.latest-version a { font-weight: 650; }
.category-overview { margin-top: 12px; }
.category-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; }
.category-card { display: flex; flex-direction: column; align-items: center; padding: 21px 10px 19px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.category-icon { display: block; width: 38px; height: 38px; color: var(--secondary); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 11px; }
.category-card strong { color: var(--accent); font-size: 13px; font-weight: 600; }
.category-card > span { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 6px; }
@media (max-width: 680px) { .category-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .category-cards { grid-template-columns: repeat(2, 1fr); } }

/* Context switch sits at the top-right of each example card. */
.example-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.example-head .domain-art { width: 40px; height: 40px; }
.example-head h3 { font-size: 20px; }
@media (max-width: 380px) { .example-head { grid-template-columns: minmax(0, 1fr) auto; } .example-head .domain-art { display: none; } }

/* Domain-selectable reference conversations. */
.example-domain-tabs { display: flex; gap: 6px; padding: 4px; width: fit-content; border: 1px solid var(--line); border-radius: 999px; margin-top: 24px; }
.example-domain-tabs button { color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 8px 20px; font-size: 13px; }
.example-domain-tabs button[aria-selected="true"] { background: var(--accent); color: var(--paper); }
.examples { display: block; max-width: 880px; margin: 16px auto 0; }
.examples .example-head { padding-bottom: 4px; }
.examples .facts { min-height: 0; padding-bottom: 22px; }
.examples .bird-scene { margin-bottom: 18px; padding: 0; border: 0; }
.examples .bird-scene svg { height: 80px; }
.chat-conversation { display: flex; flex-direction: column; gap: 20px; padding: 22px 0 5px; border-top: 1px solid var(--line); }
.chat-message { padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; }
.chat-question { align-self: flex-end; width: min(85%, 610px); border-bottom-right-radius: 4px; background: #f2eee9; }
.chat-answer { align-self: flex-start; min-width: 230px; max-width: 85%; border-bottom-left-radius: 4px; background: #edf2e9; border-color: #d3ddcf; }
.chat-speaker { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 9px; }
.chat-reference { font-weight: 400; }
.chat-query { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.chat-question .eyebrow { font-size: 10px; color: var(--muted); }
.chat-question h4 { font-size: 14px; margin: 6px 0 8px; font-weight: 500; }
.chat-question p[data-field] { font-size: 14px; color: var(--ink); margin: 0; }
.chat-answer .verdict { margin: 0; font-size: 16px; }
.example.changed .chat-answer { background: var(--accent-soft); border-color: #dec6cd; }
@media (max-width: 680px) {
  .chat-question { width: 95%; }
  .chat-answer { max-width: 95%; min-width: 190px; }
  .chat-message { padding: 15px 16px; }
  .example-domain-tabs button { padding: 7px 17px; }
}

/* Desktop: fixed information on the left, reference conversation on the right. */
.examples { max-width: none; }
.examples .example-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 16px; }
.example-information { min-width: 0; padding-right: 24px; border-right: 1px solid var(--line); align-self: stretch; }
.examples .example-information .facts { padding-bottom: 20px; }
.example-information .context-choices { margin-bottom: 4px; gap: 7px; }
.example-information .bird-scene { margin: 0 0 22px; padding: 8px 0; }
.examples .chat-conversation { min-width: 0; border-top: 0; padding-top: 0; gap: 18px; }
.chat-question { width: 95%; }
.chat-answer { min-width: 200px; }
@media (max-width: 760px) {
  .examples .example-body { grid-template-columns: 1fr; gap: 22px; }
  .example-information { padding-right: 0; border-right: 0; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .example-information .bird-scene { margin-bottom: 16px; }
  .chat-answer { min-width: 180px; }
}

/* Speaker identity is conveyed by accessible SVG avatars. */
.chat-avatar { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; margin-bottom: 10px; border-radius: 50%; }
.chat-avatar svg { width: 21px; height: 21px; }
.chat-avatar-human { color: var(--accent); background: #e9dcdf; }
.chat-avatar-ai { color: var(--secondary); background: #dce6d7; }
.example.changed .chat-avatar-ai { color: var(--accent); background: #ead6dd; }

.context-picker-label { font-size: 14px; font-weight: 600; margin: 0 0 10px; }

.chat-question .chat-query { font-size: 15px; font-weight: 400; line-height: 1.8; margin: 0; }

.example-head { grid-template-columns: 40px minmax(0, 1fr); }
.legal-scene { text-align: center; margin: 0 0 22px; padding: 8px 0; }
.legal-scene svg { display: block; width: 100%; max-width: 260px; height: 80px; margin: auto; }
.legal-exception-symbol { display: none; color: var(--accent); }
.example.changed .legal-exception-symbol { display: block; }
.example.changed .legal-rule-symbol { display: none; }
@media (max-width: 380px) { .example-head { grid-template-columns: minmax(0, 1fr); } }

.chat-author { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.chat-author .chat-avatar { margin-bottom: 0; }
.chat-author-name { font-size: 13px; font-weight: 600; color: var(--ink); }

.examples .example-head .number { font-size: 12px; }
.examples .chat-answer .verdict { font-size: 17px; }

.chat-disclaimer { align-self: flex-end; max-width: 100%; margin: 0; text-align: right; font-size: 11px; line-height: 1.6; color: #888580; }

.example-domain-tabs { max-width: 100%; flex-wrap: wrap; border-radius: 22px; }
.domain-scene { text-align: center; margin: 0 0 22px; padding: 8px 0; color: var(--secondary); }
.domain-scene svg { display: block; width: 100%; max-width: 260px; height: 80px; margin: auto; }
.example.changed .domain-scene { color: var(--accent); }
@media (max-width: 680px) { .example-domain-tabs { gap: 3px; } .example-domain-tabs button { padding: 8px 12px; } }

.dataset-summary .resource-table th:not(:first-child), .dataset-summary .resource-table td { text-align: center; }
.dataset-summary .resource-table thead th { font-size: 12px; white-space: nowrap; }
.dataset-summary .resource-table tbody th, .dataset-summary .resource-table tbody td { padding-top: 18px; padding-bottom: 18px; font-size: 17px; }
.dataset-summary .resource-table tbody th { color: var(--accent); font-weight: 600; }
.statistics-note { margin-top: 14px; color: var(--muted); font-size: 11px; }
.dataset-summary .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.dataset-summary .stat-example-button { padding: 2px 4px; border: 0; border-bottom: 1px dotted var(--accent); border-radius: 0; color: var(--accent); background: transparent; font-size: 17px; font-weight: 500; }
.dataset-summary .stat-example-button:hover, .dataset-summary .stat-example-button.active { background: var(--accent-soft); opacity: 1; }
.statistic-examples { margin-top: 12px; border-left: 2px solid var(--secondary); padding: 10px 16px; background: var(--panel); }
.statistic-examples strong { font-size: 12px; font-weight: 600; color: var(--secondary); }
.statistic-examples p { margin: 4px 0 0; font-size: 12px; color: var(--muted); white-space: pre-line; }

/* Fixed tooltip floats above the table without affecting its layout. */
.dataset-summary .resource-table thead th { font-size: 13px; }
.dataset-summary .resource-table tbody th, .dataset-summary .stat-example-button { font-size: 19px; }
.statistic-tooltip { position: fixed; z-index: 100; width: max-content; max-width: min(390px, calc(100vw - 24px)); padding: 16px 18px; border: 1px solid #d7c5ca; border-radius: 9px; background: #ffffff; box-shadow: 0 8px 28px #2d2b291a; pointer-events: auto; }
.statistic-tooltip strong { display: block; color: var(--accent); font-size: 14px; font-weight: 600; }
.statistic-tooltip p { white-space: pre-line; color: var(--ink); font-size: 14px; line-height: 1.75; margin: 7px 0 0; overflow-wrap: anywhere; }

.version-detail-link { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid #d9bdc5; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 16px; line-height: 1.5; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.version-detail-link svg { width: 15px; height: 15px; }
.version-detail-link:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); text-decoration: none; }
.back-link { padding-top: 30px; margin-bottom: 0; font-size: 13px; }
.version-details-hero { padding-top: 42px; }
.domain-detail { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.domain-detail > summary { font-size: 16px; color: var(--accent); }
.domain-detail h3 { margin-top: 24px; font-size: 15px; }
.domain-detail .resource-table th { min-width: 150px; }
.domain-detail .resource-table code { overflow-wrap: anywhere; }
.version-resource-list { font-size: 14px; line-height: 2; padding-left: 20px; }

h1 .title-r { color: #b23849; }
h1 .title-d { color: var(--secondary); }

.generation-statement-list { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: generation; }
.generation-statement-list > li { counter-increment: generation; border-top: 1px solid var(--line); padding: 22px 0 5px; }
.generation-statement-list h3 { display: flex; align-items: baseline; gap: 12px; color: var(--accent); font-size: 18px; }
.generation-statement-list h3::before { content: "0" counter(generation); color: var(--secondary); font: 12px ui-monospace, monospace; }
.generation-statement-list p { font-size: 15px; line-height: 1.85; max-width: 920px; }

.version-quickstart { margin: 26px auto 0; text-align: left; }
.version-quickstart pre { margin-top: 0; text-align: left; padding: 22px 24px; font-size: 13px; }
.version-quickstart pre code { display: block; width: 100%; text-align: left; white-space: pre; }
.version-quickstart .source { text-align: left; font-size: 12px; line-height: 1.8; }
@media (max-width: 680px) { .version-quickstart pre { padding: 16px; font-size: 11px; } }

/* Lightweight static Python highlighting: copying preserves the original code. */
.syntax-keyword { color: #96304a; font-weight: 600; }
.syntax-string { color: #3c6c4c; }
.syntax-function { color: #3c5f86; }
.syntax-parameter { color: #805b35; }
.metadata-domain-panels { margin-top: 18px; }
.metadata-domain-panel { border: 1px solid var(--line); border-radius: 6px; padding: 25px; background: var(--panel); }
.metadata-domain-heading { display: flex; align-items: center; gap: 16px; padding-bottom: 23px; }
.metadata-domain-heading h3 { margin: 0; font-size: 19px; }
.metadata-domain-heading .source { margin-top: 4px; }
.metadata-browser-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; }
.metadata-features { border-right: 1px solid var(--line); padding-right: 25px; }
.metadata-browser-grid > div > h3 { font-size: 14px; margin-top: 0; }
.feature-definition { border-bottom: 1px solid var(--line); }
.feature-definition summary { font-size: 13px; padding: 11px 0; overflow-wrap: anywhere; }
.feature-definition summary code { font-size: 12px; }
.feature-definition p { font-size: 13px; line-height: 1.85; margin: 4px 0 14px; }
.metadata-context-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 21px; }
.metadata-context-tabs button { color: var(--accent); background: transparent; border-color: var(--line); padding: 7px 10px; font-size: 12px; }
.metadata-context-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.metadata-context { border-top: 1px solid var(--line); padding-top: 18px; }
.metadata-context h3 { font-size: 17px; margin-top: 0; }
.metadata-context p { font-size: 14px; line-height: 1.9; }
.metadata-context .metadata-id { font-size: 11px; color: var(--muted); margin-bottom: 14px; overflow-wrap: anywhere; }
.metadata-context h4 { font-size: 14px; color: var(--accent); margin: 20px 0 8px; }
@media (max-width: 760px) {
  .metadata-browser-grid { grid-template-columns: 1fr; }
  .metadata-features { border-right: 0; padding-right: 0; }
  .metadata-domain-panel { padding: 20px; }
}

/* Category values inside feature definitions are visually separated. */
.feature-definition > p { line-height: 2.25; }
.feature-value-tag { display: inline-block; vertical-align: baseline; padding: 1px 8px; margin: 1px 2px; border: 1px solid #d5dfd4; border-radius: 999px; background: #eff3eb; color: #49644f; font-size: 12px; line-height: 1.7; white-space: normal; }

/* Feature values are explicit; definitions no longer require expansion. */
.feature-definition-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 12px 0 5px; }
.feature-definition-heading code { font-size: 13px; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.feature-encoding { font-size: 12px; color: var(--muted); white-space: nowrap; }
.feature-definition > p { margin: 3px 0 14px; font-size: 13px; }

.feature-value-toggle > summary { cursor: pointer; list-style: none; }
.feature-value-toggle > summary::-webkit-details-marker { display: none; }
.feature-value-toggle .feature-encoding { display: inline-flex; align-items: center; gap: 7px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; }
.feature-value-toggle > summary:hover .feature-encoding, .feature-value-toggle[open] .feature-encoding { color: var(--accent); border-color: #d9bdc5; background: var(--accent-soft); }
.feature-toggle-chevron { display: inline-block; font-size: 13px; transition: transform .15s; }
.feature-value-toggle[open] .feature-toggle-chevron { transform: rotate(180deg); }

.feature-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.feature-section-header h3 { margin: 0; font-size: 14px; }
.feature-value-legend { color: var(--muted); font-size: 11px; line-height: 1.6; }

/* Center the domain selector while keeping the section introduction left-aligned. */
#examples > h2, #examples > p { text-align: left; }
#examples > .example-domain-tabs { margin-inline: auto; justify-content: center; }

#examples > .examples-intro { color: var(--muted); font-size: 16px; margin: 10px 0 0; max-width: 720px; }

/* A quiet visual bridge from the illustration to the project title. */
.hero > [data-bird-demo] .bird-demo-section { margin-bottom: 0; }
.hero-divider { width: 48px; height: 2px; margin: 16px auto 24px; border-radius: 2px; background: linear-gradient(to right, var(--secondary) 50%, var(--accent) 50%); }

.hero-links .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button-icon { width: 17px; height: 17px; flex-shrink: 0; }

.hero-links .button { color: var(--accent); border-color: var(--accent); background: transparent; }
.hero-links .button:hover { color: var(--accent-hover); border-color: var(--accent-hover); background: var(--accent-soft); opacity: 1; }

/* Incremental catalog explorer. */
.catalog-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin: 30px 0; font-size: 14px; }
.catalog-kicker { color: var(--secondary); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
#catalog-combinations .category-card { padding: 0; }
#catalog-combinations .category-card a { display: flex; height: 100%; flex-direction: column; align-items: center; gap: 10px; padding: 24px 12px; text-decoration: none; }
#catalog-combinations .category-card:hover { border-color: var(--secondary); }
#catalog-combinations .category-card strong { font-size: 15px; }
.catalog-section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.catalog-section-head > p { max-width: 440px; color: var(--muted); font-size: 15px; }
.catalog-counts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; margin: 12px 0 28px; background: var(--panel); }
.catalog-counts > div { display: flex; flex-direction: column; padding: 20px; text-align: center; }
.catalog-counts > div + div { border-left: 1px solid var(--line); }
.catalog-counts strong { color: var(--secondary); font-size: 28px; line-height: 1.3; }
.catalog-counts span, .catalog-entry-meta, .catalog-result-count { color: var(--muted); font-size: 13px; }
.catalog-controls { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; margin-bottom: 24px; }
.catalog-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.catalog-controls select, .catalog-controls input { width: 100%; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
.catalog-controls :focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
.catalog-instance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.catalog-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catalog-entry { border: 1px solid var(--line); border-radius: 5px; background: var(--panel); padding: 20px; overflow-wrap: anywhere; font-size: 14px; }
.catalog-entry h3 { font-size: 17px; margin: 4px 0 10px; }
.catalog-entry p:last-child { margin-bottom: 0; }
.catalog-entry-id { font: 11px/1.6 ui-monospace, monospace; color: var(--secondary); margin-bottom: 5px; }
.catalog-text-button { padding: 0; background: none; border: none; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; font-size: 13px; }
.catalog-pagination button { padding: 5px 14px; }
.catalog-pagination button:disabled { opacity: .35; cursor: default; }
.catalog-feature-definitions { margin-bottom: 20px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.catalog-feature-definitions summary { cursor: pointer; color: var(--secondary); }
.catalog-feature-definitions dt, .catalog-scope dt { margin-top: 14px; font-weight: 600; }
.catalog-feature-definitions dd, .catalog-scope dd { margin-left: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 680px) {
  .catalog-section-head { display: block; }
  .catalog-controls, .catalog-entry-grid { grid-template-columns: 1fr; }
  .catalog-instance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-counts > div { padding: 14px 5px; }
  .catalog-counts strong { font-size: 23px; }
  .catalog-counts span { font-size: 11px; }
}
@media (max-width: 400px) { .catalog-instance-grid { grid-template-columns: 1fr; } }

#catalog-combinations .category-card a > span { color: var(--muted); font-size: 12px; }

.catalog-page-links { display: flex; gap: 24px; margin: 20px 0 28px; font-size: 15px; }
.catalog-page-heading { padding: 58px 0 30px; max-width: 760px; }
.catalog-page-heading > p:last-child { color: var(--muted); margin: 16px 0 0; }
.catalog-browser { padding-top: 26px; }
.catalog-controls-three { grid-template-columns: 1fr 1fr 2fr; }
.page-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
@media (max-width: 680px) { .catalog-controls-three { grid-template-columns: 1fr; } .catalog-page-heading { padding-top: 36px; } }

/* Instance list, feature definitions and aligned label values. */
.instance-workspace { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden; }
.instance-sidebar { min-width: 0; border-right: 1px solid var(--line); }
.instance-column-title { padding: 16px 18px; margin: 0; font: 600 14px/1.5 system-ui, sans-serif; color: var(--muted); border-bottom: 1px solid var(--line); }
.instance-list { list-style: none; margin: 0; padding: 0; max-height: 720px; overflow-y: auto; }
.instance-list li + li { border-top: 1px solid var(--line); }
.instance-list-button { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--ink); padding: 14px 18px; font-size: 14px; }
.instance-list-button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); color: var(--accent); }
.instance-list-button:hover { background: var(--accent-soft); opacity: 1; }
.instance-list-button:focus-visible { outline-offset: -4px; }
.instance-detail { padding: 16px 20px; min-width: 0; }
.instance-detail-title { color: var(--ink); font: 600 18px/1.4 system-ui, sans-serif; margin: 0; }
.instance-feature-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 10px; }
.instance-feature-table thead th { color: var(--muted); font-size: 12px; padding: 6px 0; text-align: left; border-bottom: 1px solid var(--line); }
.instance-feature-table thead th:last-child { width: 70px; text-align: center; }
.instance-feature-table tbody th { text-align: left; font-weight: 400; padding: 7px 12px 7px 0; }
.instance-feature-table tbody tr { border-bottom: 1px solid var(--line); }
.instance-feature-table tbody tr:last-child { border-bottom: 0; }
.instance-feature-table td { text-align: center; border-left: 1px solid var(--line); font: 500 15px/1.4 ui-monospace, monospace; }
.instance-feature-name, .instance-feature-description, .instance-feature-table .catalog-entry-id { display: block; overflow-wrap: anywhere; }
.instance-feature-name { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.instance-feature-description { font-size: 12px; color: var(--muted); margin-top: 7px; }
.instance-label-na { color: var(--muted); }
.instance-label-value { color: var(--secondary); }
@media (max-width: 680px) {
  .instance-workspace { grid-template-columns: 1fr; }
  .instance-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .instance-list { max-height: 260px; }
  .instance-detail { padding: 18px; }
  .instance-feature-table thead th:last-child { width: 80px; }
}

/* Class icon filters and list-local search. */
.instance-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.instance-class-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.instance-class-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 76px; padding: 10px 12px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.instance-class-button svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.instance-class-button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.instance-class-button:hover { color: var(--accent); opacity: 1; }
.instance-source-control, .instance-search { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.instance-source-control select, .instance-search input { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); }
.instance-list-heading { padding: 16px; border-bottom: 1px solid var(--line); }
.instance-list-heading .instance-column-title { padding: 0; border: 0; margin: 0 0 12px; }
.instance-search input { width: 100%; }
.instance-search input:focus-visible, .instance-source-control select:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
@media (max-width: 680px) { .instance-toolbar { align-items: stretch; flex-direction: column; gap: 16px; } .instance-class-button { min-width: 65px; flex: 1; padding: 9px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.instance-detail-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 3px; }
.instance-detail-heading .catalog-entry-id { margin: 0; }
.instance-detail > .catalog-entry-meta { font-size: 11px; margin: 0; }
 .instance-feature-info { position: relative; display: inline-block; max-width: 100%; }
.instance-feature-trigger { font-size: 13px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; cursor: help; text-decoration: underline dotted var(--line); text-underline-offset: 4px; }
.instance-feature-trigger:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
.instance-feature-tooltip { position: absolute; z-index: 5; left: 0; bottom: calc(100% + 8px); width: min(320px, 65vw); padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 12px #2d2b2914; visibility: hidden; opacity: 0; font-weight: 400; }
.instance-feature-tooltip::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; }
.instance-feature-info:not(.tooltip-dismissed):hover .instance-feature-tooltip,
.instance-feature-info:not(.tooltip-dismissed):focus-within .instance-feature-tooltip { visibility: visible; opacity: 1; }
.instance-feature-tooltip .instance-feature-description { margin: 4px 0 0; font-weight: 400; }

/* Task/context sample judgments. */
.task-context-controls { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.3fr; gap: 16px; }
.task-context-controls label, .judgment-list-toolbar label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.task-context-controls select, .judgment-list-toolbar input, .judgment-list-toolbar select { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; }
.judgment-definition { margin: 24px 0 10px; padding: 16px 20px; border-left: 3px solid var(--secondary); background: var(--panel); }
.judgment-definition h2 { font: 600 16px/1.4 system-ui, sans-serif; color: var(--ink); margin-bottom: 8px; }
.judgment-definition p { font-size: 13px; margin: 0; color: var(--muted); }
.judgment-list-toolbar { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 24px 0 14px; }
.judgment-samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.judgment-sample { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); text-decoration: none; color: var(--ink); }
.judgment-sample:hover { border-color: var(--secondary); color: var(--ink); text-decoration: none; }
.judgment-sample-name { font-size: 13px; overflow-wrap: anywhere; padding-right: 42px; }
.judgment-value { position: absolute; right: 10px; top: 12px; font: 600 11px/1.6 ui-monospace, monospace; }
.judgment-true .judgment-value { color: var(--secondary); }
.judgment-false .judgment-value { color: var(--accent); }
.judgment-ambiguous .judgment-value { color: #87651b; }
.judgment-NA .judgment-value { color: var(--muted); }
.sample-tooltip { position: fixed; z-index: 20; width: min(330px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); box-shadow: 0 5px 20px #2d2b2920; font-size: 13px; }
.sample-tooltip[hidden] { display: none; }
.sample-tooltip > .catalog-entry-id { margin-top: 4px; }
.sample-tooltip-features { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 12px 0; }
.sample-tooltip-features dt { overflow-wrap: anywhere; }
.sample-tooltip-features dd { margin: 0; color: var(--secondary); font: 500 13px/1.6 ui-monospace, monospace; }
@media (max-width: 800px) { .task-context-controls { grid-template-columns: 1fr 1fr; } .judgment-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .task-context-controls, .judgment-list-toolbar { grid-template-columns: 1fr; } .judgment-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Two rows of catalog categories drift from left to right. */
.instance-stream { overflow: hidden; margin: 16px 0 0; padding: 6px 0; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.instance-stream-row { overflow: hidden; padding: 6px 0; }
.instance-stream-track { display: flex; width: max-content; animation: instance-drift 40s linear infinite; }
.instance-stream-row:nth-child(2) .instance-stream-track { animation-duration: 46s; }
.instance-stream-group { display: flex; flex: none; gap: 12px; list-style: none; padding: 0 12px 0 0; margin: 0; }
.instance-stream-chip { box-sizing: border-box; width: 190px; flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; }
.instance-stream-chip .category-icon { flex: none; width: 32px; height: 32px; margin: 0; }
.instance-stream-label { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.instance-stream-label strong { color: var(--accent); font-size: 13px; font-weight: 600; }
@keyframes instance-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .instance-stream { mask-image: none; }
  .instance-stream-row { overflow-x: auto; }
  .instance-stream-track { animation: none; }
  .instance-stream-group[aria-hidden="true"] { display: none; }
}

/* The landing page follows three screen-sized chapters. */
html.landing-page { scroll-padding-top: 82px; scroll-snap-type: y proximity; }
.landing-page .landing-header { position: sticky; top: 0; z-index: 30; min-height: 66px; padding: 12px 0; background: var(--paper); }
.landing-nav { display: flex; gap: 28px; }
.landing-nav a { padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 14px; border-bottom: 2px solid transparent; }
.landing-nav a[aria-current="location"] { color: var(--accent); border-color: var(--accent); }
.landing-page .landing-section { position: relative; min-height: calc(100svh - 82px); scroll-snap-align: start; scroll-margin-top: 0; padding-top: 42px; padding-bottom: 48px; }
.landing-page #overview { border-top: 0; }
.landing-page #release { display: flex; flex-direction: column; justify-content: center; }
.landing-anchor { position: absolute; top: 0; }
@media (max-width: 600px) {
  .landing-page .landing-header { gap: 12px; }
  .landing-nav { gap: 16px; }
  .landing-nav a { font-size: 12px; }
  .landing-page .landing-section { padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html.landing-page { scroll-snap-type: none; }
}

/* Keep catalog navigation in the header and the overview compact. */
.landing-nav { align-items: center; gap: 22px; }
.landing-nav .landing-data-link { margin-left: 10px; padding-left: 22px; border-left: 1px solid var(--line); }
.landing-page #overview { padding-top: 24px; padding-bottom: 24px; }
.landing-page #overview h1 { font-size: clamp(32px, 4.5vw, 42px); margin-bottom: 8px; }
.landing-page #overview .subtitle { font-size: 22px; margin-bottom: 6px; }
.landing-page #overview .hero-links { margin-top: 16px; }
.landing-page #overview .catalog-kicker { margin: 14px 0 0; }
.landing-page #overview .instance-stream { margin-top: 8px; padding: 0; }
.landing-page #overview .instance-stream-chip { padding: 8px 16px; }
.landing-page #overview .hero-divider { margin: 12px auto; }
.landing-page #overview .bird-demo-section { margin-top: 0; margin-bottom: 0; }
@media (max-width: 700px) {
  .landing-page .landing-header { flex-wrap: wrap; justify-content: center; gap: 2px 16px; padding: 8px 0; }
  .landing-nav { justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
  .landing-nav .landing-data-link { margin-left: 0; padding-left: 14px; }
  .landing-nav a { font-size: 12px; }
  .landing-page #overview .lead { font-size: 15px; }
}

/* Subtle full-width backgrounds distinguish the three landing chapters. */
.landing-page .landing-section { isolation: isolate; }
.landing-page .landing-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--chapter-background, #fff);
  box-shadow: 0 0 0 100vmax var(--chapter-background, #fff);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
.landing-page #overview { --chapter-background: #ffffff; }
.landing-page #examples { --chapter-background: #f3f6f3; border-top-color: #dce5dc; }
.landing-page #release { --chapter-background: #ffffff; border-top-color: var(--line); }
.landing-page #examples > h2, .landing-page #release > h2 { padding-top: 12px; }
.landing-page #examples > h2::before, .landing-page #release > h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--secondary);
}
.landing-page #release > h2::before { background: var(--accent); }

/* Extend the sticky header surface across the viewport. */
.landing-page .landing-header { isolation: isolate; }
.landing-page .landing-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
.landing-page .landing-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  box-shadow: 0 0 0 100vmax var(--line);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}

body[data-catalog-view="instances"] .catalog-page-heading { max-width: none; }
.instances-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.instances-title-row h1 { margin: 0; }
.instances-title-row .button { white-space: nowrap; }

.instances-downloads { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.task-context-definition-entry + .task-context-definition-entry { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.task-context-definition-entry h2 { font-size: 18px; }
body:has(.task-context-browser) .catalog-page-heading { max-width: none; }

/* Put the dataset scope above a balanced grid of compact class filters. */
.instance-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.instance-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
.instance-filter-heading > span { font-weight: 600; }
.instance-filter-heading .instance-source-control { flex-direction: row; align-items: center; gap: 10px; }
.instance-filter-heading select { min-width: 150px; padding: 7px 10px; }
.instance-class-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.instance-class-button { flex: initial; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 9px; padding: 10px 12px; text-align: left; }
.instance-class-button svg { flex: none; width: 23px; height: 23px; }
@media (max-width: 800px) { .instance-class-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .instance-class-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .instance-class-button { padding: 9px 7px; gap: 6px; font-size: 11px; }
  .instance-class-button svg { width: 20px; height: 20px; }
  .instance-filter-heading select { min-width: 130px; }
}

/* Keep all definitions available without pushing sample controls far below them. */
.task-context-browser .judgment-definition { max-height: 360px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.task-context-browser .judgment-definition:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
.task-context-definition-entry h2 { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .task-context-browser .judgment-definition { max-height: 280px; }
}

.grounding-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--grounding-border, currentColor); border-radius: 50%; font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0; vertical-align: middle; }
.grounding-real { --grounding-border: #d5a5b2; color: #9b324d; background: #f7ecef; }
.grounding-neutral { --grounding-border: #b8b8b8; color: #171717; background: #f1f1f1; }
.instance-class-button .grounding-badge { margin-left: auto; }
.grounding-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.feature-basis { margin-left: 10px; }
@media (max-width: 520px) { .instance-class-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Feature and class grounding share the same circular R/N notation. */
.grounding-badge.feature-basis { margin-left: 10px; padding: 0; }

/* Align feature badges as a consistent visual column, separate from names/values. */
.instance-feature-table tbody th { position: relative; padding-right: 46px; }
.instance-feature-table tbody th > .grounding-badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
.instance-class-button[aria-pressed="true"] .grounding-badge { box-shadow: 0 0 0 2px var(--panel); }

/* Anonymous feature samples retain the existing two-column browsing layout. */
.instance-list-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; overflow-wrap: anywhere; }
.instance-list-item[aria-pressed="true"] { border-color: var(--secondary); font-weight: 600; }
.instance-list-item:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.instance-feature-trigger { background: transparent; border: 0; color: inherit; text-align: left; padding: 0; }
.judgment-sample { display: flex; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.judgment-sample a { overflow-wrap: anywhere; }


/* Feature groups on the left, selected group's features on the right. */
.instance-workspace-classes { grid-template-columns: minmax(190px, 25%) minmax(0, 1fr); }
.class-sidebar { padding: 18px 16px; }
.class-sidebar .instance-column-title { margin: 0 0 14px; }
.class-sidebar .instance-class-buttons { grid-template-columns: minmax(0, 1fr); }
.class-sidebar .instance-class-button { width: 100%; font-size: 13px; }
@media (max-width: 680px) {
  .instance-workspace-classes { grid-template-columns: minmax(0, 1fr); }
  .class-sidebar .instance-class-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.class-search { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.class-search input { box-sizing: border-box; width: 100%; min-width: 0; }

.class-detail-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 16px 0; }
.class-detail-tab { padding: 10px 16px; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.class-detail-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.class-detail-tab:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.class-definition-section { margin-bottom: 24px; }
.class-context-entry { padding: 12px 0; border-bottom: 1px solid var(--line); }
.class-context-entry h4 { margin: 0 0 6px; font-size: 14px; }
.class-context-entry p { margin: 0; }

.context-workspace { display: grid; grid-template-columns: minmax(140px, 25%) minmax(0, 1fr); gap: 24px; }
.context-choices { display: flex; flex-direction: column; gap: 6px; }
.context-choice { text-align: left; padding: 10px 12px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; overflow-wrap: anywhere; }
.context-choice[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.context-description { min-width: 0; }
.context-description h3 { margin-top: 0; }
.context-description h4 { margin: 12px 0; }
@media (max-width: 680px) {
  .context-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .context-choices { flex-direction: row; flex-wrap: wrap; }
}

.context-task-question { margin: 0 0 20px; font-size: 17px; }
.context-description > h4:first-child { margin-top: 0; }

/* Keep class search visible while scrolling through the class list. */
.class-sidebar .instance-class-buttons {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
  padding: 2px 6px 2px 2px;
  scrollbar-width: thin;
}
@media (max-width: 680px) {
  .class-sidebar .instance-class-buttons { max-height: 240px; }
}