/*
 * Trust chain and what-if (stocks/EVIDENCE.md §6): the diagram, its key and flow list, and the
 * what-if answer list. One stylesheet for every page that shows them — stocks.html (the issuer
 * panel), whatif.html (the answer panel) and the static cards — because the same pure libraries,
 * stocks/lib/trustchain-svg.js and stocks/lib/whatif-render.js, emit the same markup in all three.
 * It used to be copied verbatim into stocks.css and card.css (next-steps.md F11).
 *
 * Colours come only from custom properties the page's own stylesheet defines, so this file follows
 * both themes for free: --tc-* (the four link evidence grades, lane colour in the diagram) and --wi-*
 * (the six answer statuses, badge colour in the what-if list) sit beside the theme tokens in
 * stocks.css and card.css, and --page-text, --muted-text and the rest are the pages' own.
 */

/* --- 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);
}