/*
 * Styles for stocks.html (the tokenized-stocks page). The colour tokens, the dark-mode block and
 * the .maturity-pill level-N rules are mirrored from index.html's inline <style> so both pages
 * look like one site — index.html keeps them inline, so they cannot simply be imported.
 * Only the grid, issuer cards, detail dialog and token table are new here.
 */

:root {
    color-scheme: light;
    --page-bg: #ffffff;
    --page-text: #111827;
    --panel-border: #d1d5db;
    --muted-text: #6b7280;
    --control-bg: #ffffff;
    --control-text: #111827;
    --control-border: #9ca3af;
    --link-color: #2563eb;
    --card-bg: #ffffff;
    --sunken-bg: #f9fafb;
    --header-bg: #e5e7eb;
    --header-text: #111827;
    --accent: #8b5cf6;
    --sev-info: #6b7280;
    --sev-caution: #b45309;
    --sev-warning: #c2410c;
    --sev-critical: #b91c1c;
    --up: #15803d;
    --down: #b91c1c;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --page-bg: #0f1117;
        --page-text: #f9fafb;
        --panel-border: #374151;
        --muted-text: #9ca3af;
        --control-bg: #111827;
        --control-text: #f9fafb;
        --control-border: #4b5563;
        --link-color: #93c5fd;
        --card-bg: #151922;
        --sunken-bg: #1f2937;
        --header-bg: #1f2937;
        --header-text: #f9fafb;
        --sev-info: #9ca3af;
        --sev-caution: #fbbf24;
        --sev-warning: #fb923c;
        --sev-critical: #f87171;
        --up: #4ade80;
        --down: #f87171;
    }
}

* {
    box-sizing: border-box;
}

body {
    background: var(--page-bg);
    color: var(--page-text);
    font-family: system-ui, sans-serif;
    margin: 24px;
    overflow-x: hidden;
}

a {
    color: var(--link-color);
}

h1 {
    margin: 0;
    font-size: 1.6rem;
}

h2 {
    font-size: 1.15rem;
    margin: 0 0 6px;
}

h3 {
    margin: 0;
}

/* --- header ----------------------------------------------------------- */

.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.brand svg {
    width: 44px;
    height: 44px;
    display: block;
}

.back-link {
    margin-left: auto;
    font-size: 0.9rem;
    white-space: nowrap;
}

.method-note {
    margin: 0 0 8px;
    max-width: 78ch;
    line-height: 1.55;
}

.data-line {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--muted-text);
}

.status {
    margin: 0 0 20px;
    font-size: 0.88rem;
    color: var(--muted-text);
}

.status-error {
    color: var(--sev-critical);
    font-weight: 600;
}

.sample-banner {
    margin: 0 0 16px;
    padding: 8px 12px;
    border: 1px solid var(--sev-caution);
    border-radius: 8px;
    background: var(--sunken-bg);
    font-size: 0.88rem;
}

section {
    margin: 0 0 32px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.global-discovery {
    max-width: 900px;
    padding: 16px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--sunken-bg);
}

.global-search-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background: var(--control-bg);
    color: var(--control-text);
    font: inherit;
    font-size: 1rem;
}

.global-search-results:not(:empty) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.global-search-results button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--page-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.global-search-results button:hover,
.global-search-results button:focus-visible {
    border-color: var(--accent);
}

.global-search-results span,
.collector-health,
.muted {
    color: var(--muted-text);
    font-size: 0.78rem;
}

.collector-health {
    margin-top: 10px;
}

.collector-health summary {
    cursor: pointer;
}

.collector-health ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 4px 14px;
    padding: 0;
    list-style: none;
}

.collector-health li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.collector-stale {
    color: var(--sev-warning);
}

.section-note {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--muted-text);
    max-width: 82ch;
    line-height: 1.5;
}

/* --- the maturity pill, mirrored from index.html ---------------------- */

.maturity-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.maturity-pill.level-0 {
    background: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}

.maturity-pill.level-1 {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.maturity-pill.level-2 {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.maturity-pill.level-3 {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

.maturity-pill.level-4 {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #a78bfa;
}

/* --- the 5x5 grid ----------------------------------------------------- */

.axis-caption {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: var(--muted-text);
    line-height: 1.45;
}

.axis-caption strong {
    color: var(--page-text);
}

/* --- the funnel graphic (stocks.js funnelLayout → an inline SVG) ------- */

/*
 * The SVG keeps its natural 1100 px width and the wrapper scrolls, because shrinking it to a phone
 * width would take the labels with it. Only this wrapper scrolls; the page body never does.
 * Every colour below is one of the theme's own custom properties, so the graphic follows dark and
 * light without a second set of values.
 */
.funnel-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--card-bg);
    margin: 0 0 12px;
}

.funnel-graphic {
    padding: 10px;
    min-width: 1120px;
}

.funnel-svg {
    display: block;
    overflow: visible;
}

.funnel-column-title {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    fill: var(--muted-text);
}

.funnel-column-count {
    font-weight: 700;
    letter-spacing: 0;
    fill: var(--page-text);
}

.funnel-node-text {
    font-size: 11px;
    dominant-baseline: middle;
    fill: var(--page-text);
}

.funnel-edge {
    fill: none;
    stroke: var(--muted-text);
    stroke-linecap: round;
    opacity: 0.35;
}

.funnel-edge:hover {
    opacity: 0.85;
}

.funnel-dot {
    stroke-width: 1.5;
}

.funnel-node-tokens .funnel-dot {
    fill: var(--muted-text);
    stroke: var(--muted-text);
}

.funnel-node-issuers .funnel-dot {
    fill: var(--accent);
    stroke: var(--accent);
}

.funnel-node-recipes .funnel-dot {
    fill: var(--link-color);
    stroke: var(--link-color);
}

.funnel-node-programs .funnel-dot {
    fill: var(--page-text);
    stroke: var(--page-text);
}

/* A programme with no live mints: the outline is the point, so the fill is the page itself. */
.funnel-node-hollow .funnel-dot {
    fill: var(--page-bg);
    stroke-dasharray: 3 2;
}

.funnel-node-hollow .funnel-node-text {
    fill: var(--muted-text);
}

.funnel-node-link {
    cursor: pointer;
}

.funnel-node-link:hover .funnel-dot,
.funnel-node-link:focus-visible .funnel-dot {
    stroke: var(--page-text);
    stroke-width: 2.5;
}

.funnel-node-link:hover .funnel-node-text,
.funnel-node-link:focus-visible .funnel-node-text {
    font-weight: 700;
}

.funnel-node-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.grid-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
}

.claim-grid {
    display: grid;
    grid-template-columns: max-content repeat(5, minmax(136px, 1fr));
    grid-template-rows: repeat(5, minmax(58px, auto)) max-content;
    gap: 2px;
    min-width: 780px;
    padding: 10px;
}

.grid-axis {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    color: var(--muted-text);
    padding: 4px 6px;
    line-height: 1.3;
}

/* Pinned, so the maturity level stays readable while the rungs scroll on a narrow screen. */
.grid-axis-y {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--page-bg);
}

.grid-axis-x {
    align-items: flex-start;
    gap: 4px;
    border-top: 1px solid var(--panel-border);
    padding-top: 6px;
}

.grid-axis-rung {
    font-weight: 700;
    color: var(--page-text);
}

.grid-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
}

.grid-cell-filled {
    border-style: solid;
    background: var(--sunken-bg);
}

.grid-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 2px 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--page-text);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.grid-chip:hover,
.grid-chip:focus-visible {
    background: var(--card-bg);
    outline: 1px solid var(--accent);
}

.grid-chip-dot {
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.85;
}

.grid-chip-name {
    line-height: 1.2;
}

.grid-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 0.82rem;
}

.legend-label {
    color: var(--muted-text);
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--sunken-bg);
    color: var(--page-text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.legend-chip-defunct {
    opacity: 0.55;
    text-decoration: line-through;
}

.legend-note {
    color: var(--muted-text);
    font-size: 0.75rem;
    text-decoration: none;
}

/* --- issuer cards ----------------------------------------------------- */

.issuer-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 14px;
}

.issuer-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--card-bg);
    padding: 14px;
}

.issuer-card-defunct {
    opacity: 0.6;
    background: var(--sunken-bg);
}

.issuer-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.issuer-name {
    font-size: 1.02rem;
}

.status-chip {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--sev-critical);
    color: var(--sev-critical);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-form {
    font-size: 0.78rem;
    color: var(--muted-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.holder-claim {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.5;
}

.lay-verdict {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    background: var(--sunken-bg);
    font-size: 0.86rem;
    line-height: 1.4;
}

.lay-verdict strong {
    font-size: 0.94rem;
}

.detail-verdict {
    margin-bottom: 14px;
}

.review-status {
    display: inline-block;
    margin: 0;
    padding: 3px 7px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    font-size: 0.74rem;
    line-height: 1.35;
}

.review-pending {
    border-color: var(--sev-caution);
    color: var(--sev-caution);
}

.review-complete {
    border-color: var(--up);
    color: var(--up);
}

#comparisonUnderlying {
    max-width: 360px;
    padding: 7px 9px;
    border: 1px solid var(--control-border);
    border-radius: 7px;
    background: var(--control-bg);
    color: var(--control-text);
    font: inherit;
}

.comparison-view {
    margin-top: 12px;
}

.comparison-table {
    min-width: 980px;
}

.comparison-table td,
.comparison-table th {
    vertical-align: top;
}

.comparison-table td > span,
.comparison-table td > strong {
    display: block;
    margin-bottom: 4px;
}

.grade-row,
.verification-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
}

.grade-score {
    font-weight: 600;
}

.claim-rung {
    color: var(--muted-text);
}

.ver-bar {
    display: inline-flex;
    gap: 3px;
}

.ver-cell {
    width: 14px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid var(--control-border);
    background: transparent;
}

.ver-cell-on {
    background: var(--accent);
    border-color: var(--accent);
}

.ver-number {
    font-weight: 600;
}

.verification-label {
    color: var(--muted-text);
}

.tag-machine {
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ctl-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--panel-border);
    background: var(--sunken-bg);
    font-size: 0.72rem;
    cursor: help;
}

.ctl-badge-label {
    color: var(--muted-text);
}

.ctl-badge-value {
    font-weight: 600;
}

.cov-all {
    border-color: var(--sev-warning);
}

.cov-all .ctl-badge-value {
    color: var(--sev-warning);
}

.cov-some {
    border-color: var(--sev-caution);
}

.cov-some .ctl-badge-value {
    color: var(--sev-caution);
}

.cov-none .ctl-badge-value {
    color: var(--up);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--panel-border);
}

.metric dt {
    font-size: 0.68rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metric dd {
    margin: 2px 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.issuer-card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}

.count-chip {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: var(--sunken-bg);
    font-size: 0.74rem;
}

.detail-button {
    margin-left: auto;
    padding: 6px 14px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--control-text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.detail-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* severity colouring, shared by count chips, finding chips and list items */

.sev-info {
    color: var(--sev-info);
}

.sev-caution {
    color: var(--sev-caution);
    border-color: var(--sev-caution);
}

.sev-warning {
    color: var(--sev-warning);
    border-color: var(--sev-warning);
}

.sev-critical {
    color: var(--sev-critical);
    border-color: var(--sev-critical);
    font-weight: 600;
}

.sev-chip {
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid currentColor;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- detail dialog ---------------------------------------------------- */

.detail-dialog {
    width: min(760px, 94vw);
    max-width: 94vw;
    max-height: 88vh;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--page-text);
    overflow: hidden;
}

.detail-dialog::backdrop {
    background: rgba(0, 0, 0, 0.62);
}

.detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--card-bg);
}

.detail-head h3 {
    font-size: 1.05rem;
    margin-right: auto;
}

.detail-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--control-border);
    background: var(--control-bg);
    color: var(--control-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.detail-close:hover {
    border-color: var(--sev-critical);
    color: var(--sev-critical);
}

.detail-body {
    padding: 4px 16px 18px;
    overflow-y: auto;
    max-height: calc(88vh - 60px);
}

.detail-section {
    margin: 14px 0 0;
}

.detail-section h4 {
    margin: 0 0 6px;
    font-size: 0.82rem
}

.detail-count {
    color: var(--muted-text);
    font-weight: 400;
}

.detail-fields {
    margin: 0;
    display: grid;
    gap: 6px;
}

.detail-field {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
}

.detail-field dt {
    font-size: 0.78rem;
    color: var(--muted-text);
}

.detail-field dd {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.detail-empty {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted-text);
}

.detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.detail-list li {
    padding: 8px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--sunken-bg);
    font-size: 0.84rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.item-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.item-meta,
.item-date {
    color: var(--muted-text);
    font-size: 0.78rem;
}

.item-body {
    margin: 4px 0 2px;
}

.item-meta code {
    font-size: 0.75rem;
}

.doc-type {
    color: var(--muted-text);
    font-size: 0.72rem;
}

.att-status {
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--panel-border);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.att-status-valid {
    color: var(--up);
    border-color: var(--up);
}

.att-status-expired {
    color: var(--sev-critical);
    border-color: var(--sev-critical);
}

/* --- token table ------------------------------------------------------ */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0 0 12px;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.filter-field label {
    font-size: 0.72rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filter-field select,
.filter-field input {
    padding: 7px 9px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--control-text);
    font: inherit;
    font-size: 0.86rem;
    max-width: 100%;
}

.token-count {
    font-size: 0.82rem;
    color: var(--muted-text);
    padding-bottom: 8px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
}

#tokenTable,
#activityTable {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.84rem;
}

/* Wide enough that no column wraps; the .table-wrap scrolls, the page never does. */
#tokenTable {
    min-width: 1400px;
}

#activityTable {
    min-width: 900px;
}

#tokenTable th,
#tokenTable td,
#activityTable th,
#activityTable td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

#tokenTable th,
#activityTable th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--header-bg);
    color: var(--header-text);
    font-size: 0.76rem;
}

#tokenTable th[data-sort],
#activityTable th[data-sort] {
    cursor: pointer;
    user-select: none;
}

#tokenTable th[data-sort]:hover,
#activityTable th[data-sort]:hover {
    color: var(--accent);
}

#tokenTable th.sort-active,
#activityTable th.sort-active {
    color: var(--accent);
}

#tokenTable td.num,
#activityTable td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- trading activity ------------------------------------------------- */

.collection-note {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted-text);
    margin: 8px 0 0;
}

.issuer-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--link-color);
    text-align: left;
    cursor: pointer;
}

.issuer-link:hover,
.issuer-link:focus-visible {
    text-decoration: underline;
}

/* Not display:flex — a flex td stops being a table cell, so its bottom border draws at content
   height and leaves a stub line across the column. Inline badges with a margin keep the cell. */
.cell-act-flags .act-badge + .act-badge {
    margin-left: 4px;
}

/* A badge, not a colour: the glyph and the word carry the warning on their own. */
.act-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border: 1px solid var(--sev-caution);
    border-radius: 999px;
    background: var(--sunken-bg);
    color: var(--sev-caution);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

.act-badge-inorganic {
    border-color: var(--sev-warning);
    color: var(--sev-warning);
}

tr.activity-flagged td:first-child {
    box-shadow: inset 3px 0 0 var(--sev-caution);
}

.num-up {
    color: var(--up);
}

.num-down {
    color: var(--down);
}

.cell-token .token-symbol,
.cell-ref .ref-source {
    display: block;
    font-weight: 600;
}

.cell-token .token-name,
.cell-ref .ref-price {
    display: block;
    font-size: 0.74rem;
    color: var(--muted-text);
}

.cell-ref {
    text-align: right;
}

/* Same reason as .cell-act-flags: a flex table cell loses its row-height border. */
.cell-flags .flag + .flag {
    margin-left: 3px;
}

.flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: 4px;
    border: 1px solid var(--control-border);
    background: var(--sunken-bg);
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
    cursor: help;
}

.flag-alert {
    border-color: var(--sev-critical);
    color: var(--sev-critical);
}

tr.asset-defunct td {
    opacity: 0.55;
}

/* The whole row opens the detail panel; the button is the keyboard path to the same thing. */
#tokenTable tbody tr.token-row {
    cursor: pointer;
}

#tokenTable tbody tr.token-row:hover {
    background: var(--sunken-bg);
}

.cell-detail {
    text-align: right;
}

.row-detail {
    padding: 2px 8px;
    border: 1px solid var(--control-border);
    border-radius: 6px;
    background: var(--control-bg);
    color: var(--control-text);
    font: inherit;
    font-size: 0.74rem;
    cursor: pointer;
}

.row-detail:hover,
.row-detail:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- venues, inside the token detail panel ---------------------------- */

.venue-wrap {
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
}

.venue-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
    font-size: 0.8rem;
}

.venue-table th,
.venue-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
    white-space: nowrap;
}

.venue-table th {
    background: var(--header-bg);
    color: var(--header-text);
    font-size: 0.72rem;
}

.venue-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.venue-table tr:last-child td {
    border-bottom: 0;
}

.venue-kind {
    display: inline-block;
    min-width: 30px;
    padding: 0 4px;
    border: 1px solid var(--control-border);
    border-radius: 4px;
    background: var(--sunken-bg);
    color: var(--muted-text);
    font-size: 0.64rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.venue-kind-cex {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- methodology ------------------------------------------------------ */

.method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 14px;
}

.method-block {
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--card-bg);
}

.method-block h3 {
    font-size: 0.92rem;
    margin: 0 0 6px;
}

/* The glossary is a definition list, so it gets the full width rather than one narrow column. */
.method-block-wide {
    grid-column: 1 / -1;
}

.glossary {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 4px 14px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.glossary dt {
    font-weight: 600;
}

.glossary dd {
    margin: 0;
    color: var(--muted-text);
}

.method-block ul {
    margin: 0;
    padding-left: 18px;
}

.method-block li,
.method-block p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 6px;
}

.page-foot {
    margin: 32px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--panel-border);
    font-size: 0.8rem;
    color: var(--muted-text);
}

/* --- small screens ---------------------------------------------------- */

@media (max-width: 600px) {
    body {
        margin: 12px;
    }

    h1 {
        font-size: 1.3rem;
    }

    .back-link {
        margin-left: 0;
        flex-basis: 100%;
    }

    .detail-field {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .filter-field {
        flex: 1 1 100%;
    }

    .detail-dialog {
        width: 96vw;
        max-height: 92vh;
    }

    .detail-body {
        max-height: calc(92vh - 58px);
    }

    /* One column on a phone: a 140px term column leaves nothing for the definition. */
    .glossary {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .glossary dt {
        margin-top: 8px;
    }

    .glossary dd {
        margin-bottom: 4px;
    }
}

/*
 * The one rule added here for the stock cards (stocks/build-cards.mjs): the "Card ↗" link that sits
 * beside a symbol in the token table and in the detail panel's heading. It lives on this page, so
 * its style belongs in this file rather than in card.css, which only the cards themselves load.
 */
.card-link {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
}

/*
 * The "New on Solana" strip (stocks.html and monitor.html, both of which load this file): a
 * horizontally scrolling ticker of the mints the universe crawl first saw in the last fortnight,
 * from stocks-changes.json `newMints`. Two identical tracks sit side by side inside one marquee and
 * the marquee is translated by exactly half its width, so the loop is seamless with no JS. The
 * clone is aria-hidden and its links are not tab stops, so the keyboard walks each chip once.
 * Motion is a decoration here, never the message: with `prefers-reduced-motion: reduce` or the
 * ?reduceMotion=1 flag (body.reduce-motion, the convention live.js set) the animation is dropped and
 * the chips become an ordinary wrapping row, which is also what a hover or a keyboard focus pauses
 * into. The strip is `hidden` until there is something in it — an empty ticker claims nothing.
 */
.new-mints {
    margin: 0 0 20px;
    padding: 10px 0 12px;
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
    background: var(--sunken-bg);
}

.new-mints-heading {
    margin: 0 0 2px;
    padding: 0 12px;
    font-size: 0.95rem;
}

.new-mints-note {
    margin: 0 0 10px;
    padding: 0 12px;
    max-width: 78ch;
    font-size: 0.78rem;
    color: var(--muted-text);
}

.new-mints-viewport {
    overflow: hidden;
}

.new-mints-marquee {
    display: flex;
    width: max-content;
    animation: new-mints-scroll 90s linear infinite;
}

/* Hovering or tabbing into the strip stops it, so a chip can actually be read and clicked. */
.new-mints-viewport:hover .new-mints-marquee,
.new-mints-marquee:focus-within {
    animation-play-state: paused;
}

.new-mints-track {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 4px;
    list-style: none;
}

@keyframes new-mints-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.new-mint-chip>a,
.new-mint-chip>span {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--card-bg);
    font-size: 0.8rem;
    white-space: nowrap;
    text-decoration: none;
}

.new-mint-chip>a:hover,
.new-mint-chip>a:focus-visible {
    border-color: var(--accent);
}

.new-mint-symbol {
    font-weight: 600;
    color: var(--page-text);
}

.new-mint-issuer {
    color: var(--muted-text);
}

.new-mint-age {
    color: var(--accent);
}

/* The strip's count in the data line, so the header says how many there are and jumps to them. */
.new-mints-summary {
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

    /* No motion at all: the same chips as a static wrapping row, and the clone would only repeat
       them, so it goes. */
    .new-mints-marquee {
        animation: none;
        width: auto;
        flex-wrap: wrap;
    }

    .new-mints-track {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .new-mints-clone {
        display: none;
    }
}

body.reduce-motion .new-mints-marquee {
    animation: none;
    width: auto;
    flex-wrap: wrap;
}

body.reduce-motion .new-mints-track {
    flex-wrap: wrap;
    row-gap: 8px;
}

body.reduce-motion .new-mints-clone {
    display: none;
}

/* --- evidence chips (stocks/EVIDENCE.md §4) ---------------------------- */

/*
 * The whole UI cost of a claim: a "§" after the value, and a popover with the source's own words.
 * A <details> rather than a hover-only tooltip, so it opens by tap and by keyboard with no script;
 * the summary's title attribute keeps the hover one-liner. `position: relative` on the <dd> is not
 * available (the grid row would clip it), so the popover is positioned against the chip itself.
 */
.ev-line {
    margin: 0 0 14px;
    padding: 8px 10px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    background: var(--sunken-bg);
    font-size: 0.8rem;
    color: var(--page-text);
}

.ev-counts {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--muted-text);
}

.ev-chip {
    display: inline;
    position: relative;
}

.ev-chip > summary {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: var(--accent);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    vertical-align: baseline;
}

.ev-chip > summary::-webkit-details-marker {
    display: none;
}

.ev-chip > summary:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 1px;
}

.ev-chip.ev-confirmed > summary {
    color: var(--up);
}

.ev-chip.ev-caution > summary {
    color: var(--sev-caution);
}

.ev-chip.ev-warning > summary {
    color: var(--sev-warning);
}

.ev-chip.ev-muted > summary {
    color: var(--muted-text);
}

/* Nothing recorded yet: hollow, muted, and it says so when opened. */
.ev-chip-none > summary {
    color: var(--muted-text);
    border-style: dashed;
    font-weight: 400;
}

.ev-pop {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    width: min(360px, 78vw);
    max-height: 44vh;
    overflow-y: auto;
    /* stocks.js scrolls an opening popover into view with scrollIntoView, which honours this:
       without it the box lands flush against the panel's bottom edge and reads as clipped
       rather than as a box whose own content scrolls. */
    scroll-margin-block: 12px;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    background: var(--card-bg);
    box-shadow: 0 6px 20px rgb(0 0 0 / 22%);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--page-text);
    text-align: left;
    white-space: normal;
}

.ev-field {
    margin: 0 0 8px;
    font-size: 0.72rem;
    color: var(--muted-text);
}

.ev-claim + .ev-claim {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
}

.ev-claim-head {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

.ev-badge {
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ev-badge.ev-confirmed {
    color: var(--up);
}

.ev-badge.ev-caution {
    color: var(--sev-caution);
}

.ev-badge.ev-warning {
    color: var(--sev-warning);
}

.ev-badge.ev-muted {
    color: var(--muted-text);
}

.ev-quote {
    margin: 0 0 6px;
    padding-left: 8px;
    border-left: 2px solid var(--accent);
    font-style: italic;
    line-height: 1.45;
}

.ev-meta {
    font-size: 0.72rem;
    color: var(--muted-text);
    overflow-wrap: anywhere;
}

.ev-stamps {
    margin-top: 3px;
}

.ev-note {
    margin: 6px 0 0;
    font-size: 0.74rem;
}

.ev-none,
.ev-nosource {
    margin: 0;
    color: var(--muted-text);
    font-style: italic;
}

/*
 * On a phone the popover is wider than the space beside the chip, and anchoring it to the chip
 * pushed it off the left edge (measured at 360 px: left -19 px). Below 560 px the row itself is a
 * single column, so the popover is anchored to the whole <dd> instead — `position: static` on the
 * chip hands the containing block to the row, and the box then spans it and can never overflow
 * the viewport whatever the chip's own x position is.
 */
@media (max-width: 560px) {
    .detail-field dd {
        position: relative;
    }

    .ev-chip {
        position: static;
    }

    .ev-pop {
        left: 0;
        right: 0;
        width: auto;
    }
}

/* =====================================================================
 * Trust chain and what-if (stocks/EVIDENCE.md §6). This block is shared
 * verbatim between stocks.css (the issuer panel and whatif.html) and
 * card.css (the static cards), because the same two pure libraries —
 * stocks/lib/trustchain-svg.js and the what-if renderers — emit the same
 * markup in both places. Two axes, two vocabularies, never mixed:
 *   --tc-*  the four LINK evidence grades (lane colour in the diagram)
 *   --wi-*  the six ANSWER statuses (badge colour in the what-if list),
 *           where `missing` is the absence of an answer, not an answer.
 * ===================================================================== */

:root {
    --tc-documented: #15803d;
    --tc-inferred: #2563eb;
    --tc-asserted: #b45309;
    --tc-unknown: #9ca3af;
    --tc-node-bg: #f9fafb;
    --wi-documented: #15803d;
    --wi-litigated: #7c3aed;
    --wi-inferred: #2563eb;
    --wi-unknown: #b45309;
    --wi-not-applicable: #9ca3af;
    --wi-missing: #dc2626;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tc-documented: #4ade80;
        --tc-inferred: #60a5fa;
        --tc-asserted: #fbbf24;
        --tc-unknown: #6b7280;
        --tc-node-bg: #1b2030;
        --wi-documented: #4ade80;
        --wi-litigated: #c4b5fd;
        --wi-inferred: #60a5fa;
        --wi-unknown: #fbbf24;
        --wi-not-applicable: #6b7280;
        --wi-missing: #f87171;
    }
}

/* --- the diagram ------------------------------------------------------ */

.tc-diagram {
    margin: 0;
}

/* The drawing is one fixed viewBox scaled by CSS, so the phone and the desktop
   get the same picture at two sizes rather than two layouts. The cap stops it
   growing into a poster on a 1280 px screen. */
.tc-canvas {
    max-width: 460px;
    margin: 0 auto 12px;
}

.tc-svg {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Below ~420 px the drawing scaled from its 360-unit viewBox down to ~254 px, which renders the
 * 9.5 px party names at about 6.7 px — present but not readable (measured on a card at 320 px).
 * So under that width it stops scaling and gets its own horizontal scroller instead, at 1 unit to
 * 1 px: the type is full size and the PAGE still never scrolls sideways, which is the only rule a
 * diagram is allowed to bend.
 */
@media (max-width: 420px) {
    .tc-canvas {
        overflow-x: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .tc-svg {
        width: 360px;
        max-width: none;
    }
}

.tc-guide {
    stroke: var(--panel-border);
    stroke-width: 0.5;
}

.tc-node-box {
    fill: var(--tc-node-bg);
    stroke: var(--panel-border);
    stroke-width: 0.6;
}

.tc-node-label {
    fill: var(--page-text);
    font: 600 11px system-ui, sans-serif;
}

.tc-node-party {
    fill: var(--muted-text);
    font: 9.5px system-ui, sans-serif;
}

.tc-node-none {
    fill: var(--tc-unknown);
    font: italic 9.5px system-ui, sans-serif;
}

/* An actor nobody fills keeps its seat and is drawn as an outline: the empty
   seat is the finding, so it must look deliberate rather than missing. */
.tc-node-empty .tc-node-box {
    fill: none;
    stroke-dasharray: 3 2;
}

/* Lane colour is the link's `evidence` grade. `cursor: help` and not `pointer`
   because the lane's own affordance is its <title> tooltip; the tap target for
   the detail is the flow list below, which works with JavaScript off. */
.tc-lane {
    stroke: var(--tc-unknown);
    fill: var(--tc-unknown);
    color: var(--tc-unknown);
    cursor: help;
}

.tc-ev-documented {
    stroke: var(--tc-documented);
    fill: var(--tc-documented);
    color: var(--tc-documented);
}

.tc-ev-inferred {
    stroke: var(--tc-inferred);
    fill: var(--tc-inferred);
    color: var(--tc-inferred);
}

.tc-ev-asserted {
    stroke: var(--tc-asserted);
    fill: var(--tc-asserted);
    color: var(--tc-asserted);
}

.tc-ev-unknown {
    stroke: var(--tc-unknown);
    fill: var(--tc-unknown);
    color: var(--tc-unknown);
}

.tc-lane-line {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: butt;
}

/* Line style is the link's `verification` grade: on-chain solid, attested
   dashed, self-reported dotted, none a faint hairline. */
.tc-vf-onchain .tc-lane-line {
    stroke-width: 2.1;
}

.tc-vf-attested .tc-lane-line {
    stroke-dasharray: 6 3.5;
}

.tc-vf-self-reported .tc-lane-line {
    stroke-dasharray: 1.6 2.8;
}

.tc-vf-none .tc-lane-line {
    stroke-dasharray: 1 4.5;
    stroke-opacity: 0.5;
}

.tc-stop {
    stroke: none;
}

/* The flow's origin: a ring in the page colour, so it reads as hollow. */
.tc-origin {
    fill: var(--page-bg);
    stroke-width: 1.4;
}

/* A flow whose two ends are the same actor (holder to holder) has no direction
   to arrow, so its one station is ringed instead. */
.tc-loop {
    fill: none;
    stroke-width: 1.2;
}

.tc-arrow {
    stroke: none;
}

.tc-lane:hover .tc-lane-line,
.tc-lane:focus .tc-lane-line {
    stroke-width: 3.2;
}

/* --- the legend ------------------------------------------------------- */

.tc-key {
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
}

@media (min-width: 620px) {
    .tc-key {
        grid-template-columns: 1fr 1fr;
    }
}

.tc-key-head {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
}

.tc-key-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
}

.tc-key-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    color: var(--muted-text);
    line-height: 1.35;
}

.tc-key-item strong {
    color: var(--page-text);
    font-weight: 600;
}

.tc-key-swatch {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 3px;
    background: currentColor;
}

.tc-key-line,
.tc-flow-swatch {
    width: 22px;
    flex: 0 0 auto;
    border-top: 3px solid currentColor;
}

.tc-vf-attested.tc-key-line,
.tc-vf-attested.tc-flow-swatch {
    border-top-style: dashed;
}

.tc-vf-self-reported.tc-key-line,
.tc-vf-self-reported.tc-flow-swatch {
    border-top-style: dotted;
}

.tc-vf-none.tc-key-line,
.tc-vf-none.tc-flow-swatch {
    border-top-width: 1px;
    opacity: 0.5;
}

/* --- the flow list --------------------------------------------------- */

.tc-flows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.tc-flow {
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--card-bg);
}

.tc-flow > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 0.82rem;
}

.tc-flow-label {
    font-weight: 600;
}

.tc-flow-grade {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--muted-text);
}

.tc-flow-summary {
    margin: 0;
    padding: 0 10px 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted-text);
}

.tc-fields {
    margin: 0;
    padding: 0 10px 10px;
    list-style: none;
    display: grid;
    gap: 5px;
}

.tc-field {
    display: grid;
    gap: 2px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.tc-field-path {
    color: var(--accent);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.tc-field-value {
    overflow-wrap: anywhere;
}

.tc-claim {
    justify-self: start;
    padding: 1px 6px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-text);
}

.tc-claim-confirmed {
    color: var(--tc-documented);
    border-color: currentColor;
}

.tc-claim-inference {
    color: var(--tc-inferred);
    border-color: currentColor;
}

.tc-claim-unverified,
.tc-claim-changed,
.tc-claim-contradicted-corrected,
.tc-claim-source-gone {
    color: var(--tc-asserted);
    border-color: currentColor;
}

.tc-claim-none {
    color: var(--tc-unknown);
}

.tc-empty,
.tc-out {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted-text);
}

.tc-out {
    margin-top: 8px;
}

/* --- the what-if list ------------------------------------------------ */

.wi-counts {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--muted-text);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.wi-count {
    white-space: nowrap;
}

.wi-count-n {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wi-note {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted-text);
}

.wi-groups {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.wi-actor-head {
    margin: 0 0 5px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
}

.wi-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.wi-item {
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--card-bg);
}

.wi-item > summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    padding: 7px 9px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.4;
}

/*
 * Chrome drops the disclosure triangle the moment a <summary> gets any `display` other than
 * list-item, and both of these are grid/flex — so without an explicit chevron 38 answer rows and
 * 9 flow rows look like static text and nobody discovers they open. Column 1 of the summary grid
 * is reserved for it.
 */
.wi-item > summary,
.tc-flow > summary {
    list-style: none;
}

.wi-item > summary::-webkit-details-marker,
.tc-flow > summary::-webkit-details-marker {
    display: none;
}

.wi-item > summary::before,
.tc-flow > summary::before {
    content: '\25b8';
    align-self: center;
    color: var(--muted-text);
    font-size: 0.78rem;
    line-height: 1;
}

.wi-item > summary::before {
    grid-column: 1;
    grid-row: 1 / 3;
}

.wi-item[open] > summary::before,
.tc-flow[open] > summary::before {
    content: '\25be';
}

.wi-q {
    grid-column: 2;
}

.wi-badge {
    grid-column: 2;
    justify-self: start;
    padding: 1px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wi-not-applicable);
}

.wi-s-documented {
    color: var(--wi-documented);
}

.wi-s-litigated {
    color: var(--wi-litigated);
}

.wi-s-inferred {
    color: var(--wi-inferred);
}

.wi-s-unknown {
    color: var(--wi-unknown);
}

.wi-s-not-applicable {
    color: var(--wi-not-applicable);
}

/* `missing` is not an answer — nobody has looked. Drawn as an outline over the
   hatch the matrix uses for the same thing, so a gap never reads as a finding. */
.wi-s-missing {
    color: var(--wi-missing);
}

.wi-body {
    padding: 0 10px 10px;
    display: grid;
    gap: 7px;
}

.wi-outcome {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.wi-quote {
    margin: 0;
    padding: 6px 10px;
    border-left: 3px solid var(--accent);
    background: var(--sunken-bg);
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wi-meta {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted-text);
    overflow-wrap: anywhere;
}

.wi-meta a {
    overflow-wrap: anywhere;
}

.wi-sub {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted-text);
}

.wi-cases {
    margin: 0;
    padding-left: 18px;
    font-size: 0.76rem;
    line-height: 1.45;
    display: grid;
    gap: 4px;
}

.wi-searched {
    border-top: 1px dashed var(--panel-border);
    padding-top: 6px;
}

.wi-searched > summary {
    cursor: pointer;
    font-size: 0.74rem;
    color: var(--muted-text);
}

.wi-searched ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--muted-text);
    display: grid;
    gap: 3px;
    overflow-wrap: anywhere;
}

.wi-empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted-text);
}

.wi-fail {
    margin: 0;
    font-size: 0.8rem;
    color: var(--sev-warning, var(--warning, var(--wi-missing)));
}

/* The numbered source list a byte-capped page cites instead of repeating one URL on 38 rows. */
.wi-sources {
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--muted-text);
    display: grid;
    gap: 4px;
    overflow-wrap: anywhere;
}

.wi-ref {
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.wi-sources li:target {
    color: var(--page-text);
}