/*
 * Styles for the generated cards in cards/ (one page per tokenized stock, built by
 * stocks/build-cards.mjs). The colour tokens and the dark-mode block are the same set stocks.css
 * defines, so a card looks like the rest of the site in both themes; the layout is its own —
 * a single readable column, label/value pairs that collapse to one column on a phone, and every
 * table in its own horizontal scroller so a 320 px screen never scrolls the page sideways.
 */

:root {
    color-scheme: light;
    --page-bg: #ffffff;
    --page-text: #111827;
    --panel-border: #d1d5db;
    --muted-text: #6b7280;
    --link-color: #2563eb;
    --card-bg: #ffffff;
    --sunken-bg: #f9fafb;
    --header-bg: #e5e7eb;
    --header-text: #111827;
    --accent: #8b5cf6;
    --good: #15803d;
    --good-bg: #dcfce7;
    --caution: #b45309;
    --caution-bg: #fef3c7;
    --warning: #b91c1c;
    --warning-bg: #fee2e2;
    --unknown: #6b7280;
    --unknown-bg: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --page-bg: #0f1117;
        --page-text: #f9fafb;
        --panel-border: #374151;
        --muted-text: #9ca3af;
        --link-color: #93c5fd;
        --card-bg: #151922;
        --sunken-bg: #1f2937;
        --header-bg: #1f2937;
        --header-text: #f9fafb;
        --good: #4ade80;
        --good-bg: #14361f;
        --caution: #fbbf24;
        --caution-bg: #3b2f0b;
        --warning: #f87171;
        --warning-bg: #3f1414;
        --unknown: #9ca3af;
        --unknown-bg: #262b35;
    }
}

* {
    box-sizing: border-box;
}

body {
    background: var(--page-bg);
    color: var(--page-text);
    font-family: system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 20px 16px 48px;
}

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

.card {
    max-width: 62rem;
    margin: 0 auto;
}

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

.crumb {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--muted-text);
}

h1 {
    margin: 0;
    font-size: 1.9rem;
    letter-spacing: -0.01em;
}

.card-head .sub {
    margin: 2px 0 12px;
    color: var(--muted-text);
}

.lay-verdict {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    background: var(--sunken-bg);
}

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

.banner {
    margin: 0 0 24px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--sunken-bg);
}

.banner-good {
    border-left-color: var(--good);
}

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

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

.banner-unknown {
    border-left-color: var(--unknown);
}

/* --- status chips ----------------------------------------------------------------------- */

.c-good,
.c-caution,
.c-warning,
.c-unknown {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.c-good {
    color: var(--good);
    background: var(--good-bg);
}

.c-caution {
    color: var(--caution);
    background: var(--caution-bg);
}

.c-warning {
    color: var(--warning);
    background: var(--warning-bg);
}

.c-unknown {
    color: var(--unknown);
    background: var(--unknown-bg);
}

/* --- sections --------------------------------------------------------------------------- */

section {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--card-bg);
}

h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
}

h3 {
    margin: 16px 0 6px;
    font-size: 0.92rem;
}

h3:first-child {
    margin-top: 0;
}

.note,
.no {
    margin: 0 0 10px;
    color: var(--muted-text);
    font-size: 0.9rem;
}

/* --- label / value pairs ---------------------------------------------------------------- */

.kv {
    display: grid;
    grid-template-columns: minmax(9rem, 15rem) 1fr;
    gap: 6px 16px;
    margin: 0;
}

.kv dt {
    color: var(--muted-text);
    font-size: 0.88rem;
}

.kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .kv {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .kv dt {
        margin-top: 10px;
    }

    .kv dt:first-child {
        margin-top: 0;
    }
}

/* --- tables ----------------------------------------------------------------------------- */

.scroll {
    overflow-x: auto;
    margin-top: 12px;
}

table {
    border-collapse: collapse;
    font-size: 0.88rem;
}

.r {
    min-width: 18rem;
}

.rules {
    min-width: 46rem;
}

th,
td {
    padding: 5px 10px 5px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--panel-border);
}

thead th {
    background: var(--header-bg);
    color: var(--header-text);
    padding-left: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
}

td.n,
th.n {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

td.s {
    color: var(--muted-text);
    font-size: 0.82rem;
}

.mv {
    color: var(--muted-text);
    font-size: 0.8rem;
}

.t {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--muted-text);
}

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

code {
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

/* --- footer ----------------------------------------------------------------------------- */

footer {
    border-top: 1px solid var(--panel-border);
    padding-top: 14px;
    font-size: 0.85rem;
    color: var(--muted-text);
}

footer h2 {
    margin-bottom: 6px;
}

.src,
.mint,
.built {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

#copy-mint {
    font: inherit;
    padding: 1px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: var(--sunken-bg);
    color: var(--page-text);
    cursor: pointer;
}

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

.card-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 12px;
}

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

/*
 * The "§" after a value opens the source's own words. A <details>, so it works by tap and by
 * keyboard with no script at all — a card must be readable with JavaScript off. The hollow "§?"
 * is a plain span with a title: every one of them would say the same sentence, and a card has a
 * byte budget the build enforces.
 */
.ev-line {
    margin: 0 0 8px;
    padding: 6px 8px;
    border-left: 3px solid var(--accent);
    background: var(--sunken-bg);
    font-size: 0.78rem;
}

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

.ev-chip > summary,
.ev-none {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}

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

.ev-none {
    border-style: dashed;
    color: var(--muted-text);
    font-weight: 400;
    cursor: help;
}

.ev-pop {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    width: min(340px, 78vw);
    max-height: 50vh;
    overflow-y: auto;
    padding: 9px;
    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.76rem;
    font-weight: 400;
    white-space: normal;
}

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

.ev-pop blockquote {
    margin: 5px 0;
    padding-left: 8px;
    border-left: 2px solid var(--accent);
    font-style: italic;
}

.ev-ok {
    color: var(--good);
}

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

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

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

/*
 * On a phone the popover cannot sit beside the chip: anchored to it, the box ran off the left edge
 * (measured at 360 px on a card: left -116 px). Below 560 px the row 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 whatever the chip's own x position is.
 */
@media (max-width: 560px) {
    .kv 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);
}