/* evidence.css — the site-wide interface-evidence system.

   The homepage hero proved the idea: CSS-drawn interface fragments read as real
   product work, cost nothing to load, and cannot accidentally leak a client's data
   the way a screenshot can. This file lifts that vocabulary out of the hero so every
   page can tell the same story — statement, then proof you can actually look at.

   BUILT ON .block, NOT BESIDE IT. An evidence card is a `.block` with an extra class,
   which means it already inherits the twelve-column spans, the surface tokens, the
   focus ring and — importantly — the Building Blocks reveal, because js/main.js
   animates `.grid > .block`. Nothing here needs a new JS hook.

   MOBILE FIRST: one column, a shorter media well, and the denser fragments drop their
   fine detail below 600px so they read as an interface rather than as noise.

   NOTHING HERE MAKES A CLAIM. Every fragment is abstract geometry with a generic
   system label (BOOKING, LINK, ORDER). No client names, no numbers presented as
   metrics, no invented outcomes. */

/* ---------- Card ---------- */
.evidence-card {
    gap: var(--space-5);
    overflow: hidden;
}

.evidence-topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    font-size: .68rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-subtle);
}

.block--graphite .evidence-topline,
.block--earth .evidence-topline,
.section--graphite .block--bare .evidence-topline { color: var(--color-text-on-dark-muted) }

.evidence-topline b { font-weight: var(--weight-semibold); color: var(--color-accent-earth) }
.block--graphite .evidence-topline b,
.block--earth .evidence-topline b { color: var(--color-accent-earth-soft) }

/* The media well. A fixed aspect ratio rather than a fixed height, so a card that
   spans five columns and one that spans seven both keep a deliberate proportion
   instead of stretching whatever fragment is inside them. */
.evidence-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: #34322e;
}

.evidence-media--wide { aspect-ratio: 16 / 7 }
.evidence-media--tall { aspect-ratio: 4 / 3 }

/* Four grounds, so a mosaic of evidence cards is not four copies of one colour.
   All are dark: the fragments are drawn in light ink and need a surface to sit on
   regardless of whether the chapter behind them is paper or graphite. */
.evidence-media--warm {
    background:
        radial-gradient(circle at 74% 16%, rgba(247,243,236,.30), transparent 30%),
        linear-gradient(158deg, #8a5e43 0%, #4b4038 54%, #272624 100%);
}
.evidence-media--cool {
    background:
        radial-gradient(circle at 50% 42%, rgba(37,99,235,.34), transparent 38%),
        linear-gradient(158deg, #202e49 0%, #181a1f 60%, #0e0f11 100%);
}
.evidence-media--slate {
    background:
        radial-gradient(circle at 22% 82%, rgba(150,80,44,.28), transparent 44%),
        linear-gradient(158deg, #3d3a35 0%, #29272400 60%, #1c1b19 100%),
        #232220;
}
.evidence-media--deep {
    background:
        radial-gradient(circle at 82% 78%, rgba(37,99,235,.20), transparent 42%),
        linear-gradient(158deg, #24231f 0%, #16151300 62%, #101010 100%),
        #1a1917;
}

.evidence-copy { display: flex; flex-direction: column; gap: var(--space-2) }
/* .project-tag carries its own bottom margin for the card layouts it was written
   for; inside an evidence card the flex gap already provides that space. */
.evidence-copy .project-tag { margin-bottom: 0 }
.evidence-card h3 { margin: 0 }
.evidence-card p { margin: 0; font-size: var(--text-sm); line-height: 1.55; max-width: 46ch }

/* ---------- Fragment shell ----------
   Every fragment is one absolutely-positioned pane inset inside the media well, so
   the ground shows around it and the thing reads as a screen rather than a texture
   that fills the card. */
.fragment {
    position: absolute;
    inset: 12%;
    padding: 11px;
    display: grid;
    gap: 7px;
    border: 1px solid rgba(247,243,236,.26);
    border-radius: 11px;
    background: rgba(16,16,15,.34);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Shared ink. `u` is a filled bar, `i` a hollow panel, `b` a system label. Single
   letters because these are decorative and repeated dozens of times — the elements
   carry no meaning and every fragment is inside an aria-hidden well. */
.fragment u { display: block; height: 4px; border-radius: 99px; background: rgba(247,243,236,.6); text-decoration: none }
.fragment i { display: block; border-radius: 6px; background: rgba(247,243,236,.13); border: 1px solid rgba(247,243,236,.13) }
.fragment b {
    font-family: var(--font-sans);
    font-size: 8.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .13em;
    color: rgba(247,243,236,.78);
    line-height: 1;
}
.fragment em {
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .09em;
    color: #8ee0a7;
    line-height: 1;
}

/* ---------- Board: a workflow / kanban surface ----------
   Three lanes of unequal chip stacks. What a scheduling or order pipeline looks like
   from across the room. */
.fragment--board { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; align-content: start }
.fragment--board b { grid-column: 1 / -1 }
.fragment--board i { display: grid; grid-auto-rows: 9px; gap: 5px; align-content: start; padding: 5px; background: rgba(247,243,236,.08) }
.fragment--board i span { display: block; border-radius: 3px; background: rgba(247,243,236,.34) }
.fragment--board i:nth-child(3) span:nth-child(2) { background: rgba(150,80,44,.85) }
.fragment--board i:nth-child(4) span:first-child { background: rgba(37,99,235,.8) }

/* ---------- Table: rows of records ----------
   The unglamorous screen most internal tools actually are. */
.fragment--table { grid-template-rows: auto repeat(4, 1fr); gap: 6px }
.fragment--table b { display: flex; justify-content: space-between }
.fragment--table i {
    display: grid;
    grid-template-columns: 1.6fr 1fr .5fr;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    background: rgba(247,243,236,.07);
    border-color: rgba(247,243,236,.09);
}
.fragment--table i u { width: 100% }
.fragment--table i u:nth-child(2) { opacity: .55 }
.fragment--table i u:last-child { background: rgba(37,99,235,.85) }
.fragment--table i:nth-child(3) u:last-child { background: rgba(150,80,44,.9) }

/* ---------- Queue: open support requests ----------
   Three rows, each a request with a state chip. Two in hand, one closed — the
   proportion matters: a queue drawn as mostly-done reads as a boast, and a queue
   drawn as mostly-open reads as a backlog. This is a working afternoon. */
.fragment--queue { grid-template-rows: auto 1fr; gap: 8px }
.fragment--queue b { display: flex; justify-content: space-between; align-items: center }
.fragment--queue .rows { display: grid; grid-auto-rows: 1fr; gap: 6px; align-content: center }
.fragment--queue .rows s {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(247,243,236,.14);
    background: rgba(247,243,236,.07);
    text-decoration: none;
}
/* The subject line, standing in for text we are deliberately not inventing. */
.fragment--queue .rows s u { width: 62% }
.fragment--queue .rows s:nth-child(2) u { width: 78%; opacity: .72 }
.fragment--queue .rows s:nth-child(3) u { width: 45%; opacity: .45 }
/* The state chip. Open work takes the accent; closed work goes quiet rather than
   green, so the eye lands on what is still live. */
.fragment--queue .rows s em {
    padding: 2px 6px;
    border-radius: 99px;
    font-size: 6.5px;
    letter-spacing: .1em;
    color: rgba(247,243,236,.9);
    background: rgba(150,80,44,.75);
}
.fragment--queue .rows s:nth-child(3) em {
    background: rgba(247,243,236,.13);
    color: rgba(247,243,236,.5);
}
/* The one being worked on right now. */
.fragment--queue .rows s:first-child {
    border-color: rgba(37,99,235,.55);
    background: rgba(37,99,235,.15);
}

/* ---------- Session: a remote screen share ----------
   A window inside a window, with a second cursor in it. That second cursor is the
   whole point of the fragment: it is what a support session looks like from the
   visitor's side, and it is why the copy beside it can say nothing happens
   off-screen. */
.fragment--session { grid-template-rows: auto 1fr auto; gap: 7px }
.fragment--session b { display: flex; justify-content: space-between; align-items: center }
.fragment--session .screen {
    position: relative;
    display: grid;
    grid-template-rows: 7px 1fr 1fr;
    gap: 5px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid rgba(247,243,236,.2);
    background: rgba(10,10,9,.6);
}
.fragment--session .screen i:first-child { background: rgba(247,243,236,.22); border-color: transparent }
.fragment--session .screen i:nth-child(2) { background: rgba(247,243,236,.1) }
.fragment--session .screen i:nth-child(3) { background: rgba(247,243,236,.06) }
/* The visiting cursor, drawn as a small accent arrow head. */
.fragment--session .screen s {
    position: absolute;
    right: 26%;
    bottom: 24%;
    width: 0;
    height: 0;
    border-left: 6px solid rgba(37,99,235,.95);
    border-bottom: 9px solid transparent;
    text-decoration: none;
    filter: drop-shadow(0 0 3px rgba(37,99,235,.55));
}

/* ---------- Signal: a link-status readout ---------- */
.fragment--signal { grid-template-rows: auto 1fr auto; gap: 8px }
.fragment--signal b { display: flex; justify-content: space-between; align-items: center }
.fragment--signal .bars { display: flex; align-items: flex-end; gap: 5px; height: 100% }
.fragment--signal .bars i {
    flex: 1;
    align-self: flex-end;
    background: rgba(247,243,236,.2);
    border-color: rgba(247,243,236,.16);
    border-radius: 4px;
}
/* Deliberately uneven and unlabelled — a waveform, not a chart anyone could read a
   claim out of. */
.fragment--signal .bars i:nth-child(1) { height: 46% }
.fragment--signal .bars i:nth-child(2) { height: 72% }
.fragment--signal .bars i:nth-child(3) { height: 58% }
.fragment--signal .bars i:nth-child(4) { height: 88%; background: rgba(37,99,235,.55); border-color: rgba(37,99,235,.6) }
.fragment--signal .bars i:nth-child(5) { height: 66% }
.fragment--signal .bars i:nth-child(6) { height: 80% }

/* ---------- Chassis: hardware, close up ----------
   A device front panel: vent run, port block, one live indicator. */
.fragment--chassis { grid-template-rows: auto 1fr auto; gap: 8px; background: rgba(10,10,9,.5) }
.fragment--chassis b { display: flex; justify-content: space-between; align-items: center }
.fragment--chassis .vents {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    align-items: stretch;
}
.fragment--chassis .vents u { height: 100%; border-radius: 3px; background: rgba(247,243,236,.16) }
.fragment--chassis .ports { display: flex; align-items: center; gap: 6px }
.fragment--chassis .ports i { width: 22px; height: 11px; border-radius: 3px }
.fragment--chassis .ports i:last-child { width: 11px; background: rgba(142,224,167,.7); border-color: rgba(142,224,167,.5) }

/* ---------- Manifest: the sourcing paperwork ----------
   Field rows over a scan block. The part of hardware sourcing clients never see and
   never want to. */
.fragment--manifest { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto 1fr; gap: 7px 10px }
.fragment--manifest b { grid-column: 1 / -1; display: flex; justify-content: space-between }
.fragment--manifest .fields { display: grid; grid-auto-rows: min-content; gap: 7px; align-content: start }
.fragment--manifest .fields u:nth-child(1) { width: 82% }
.fragment--manifest .fields u:nth-child(2) { width: 54%; opacity: .6 }
.fragment--manifest .fields u:nth-child(3) { width: 68% }
.fragment--manifest .fields u:nth-child(4) { width: 40%; opacity: .6 }
/* A scan block, not a real barcode — uneven bars, no encoded value. */
.fragment--manifest .scan {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    border-radius: 6px;
    background: rgba(247,243,236,.9);
}
.fragment--manifest .scan u { width: 2px; height: auto; border-radius: 0; background: #1c1b19 }
.fragment--manifest .scan u:nth-child(2n) { width: 4px; opacity: .82 }
.fragment--manifest .scan u:nth-child(3n) { width: 1px }

/* ---------- Layout: a page under construction ----------
   Header band, hero split, content run. The wireframe stage of a build. */
.fragment--layout { grid-template-rows: auto 1.5fr 1fr; gap: 7px; padding: 9px }
.fragment--layout .bar { display: flex; align-items: center; gap: 5px }
.fragment--layout .bar u { width: 16px; background: rgba(150,80,44,.9) }
.fragment--layout .bar u ~ u { width: 9px; opacity: .45; background: rgba(247,243,236,.7) }
.fragment--layout .split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px }
.fragment--layout .split i:first-child { background: rgba(247,243,236,.17) }
.fragment--layout .run { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }

/* ---------- Scope: the written plan ----------
   A document with a checked run of lines. What "you get it in writing" looks like. */
.fragment--scope { grid-template-rows: auto 1fr; gap: 9px; background: rgba(247,243,236,.94); border-color: rgba(28,27,25,.16) }
.fragment--scope b { color: rgba(28,27,25,.6) }
/* Centred, not top-aligned: in a tall well — the pinned stage in particular — four
   start-aligned lines left two thirds of the document empty and the fragment read as
   a blank page rather than a written scope. */
.fragment--scope .lines { display: grid; grid-auto-rows: min-content; gap: 8px; align-content: center }
.fragment--scope .lines span { display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 7px }
.fragment--scope .lines span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 3px;
    border: 1px solid rgba(28,27,25,.32);
    background: rgba(28,27,25,.06);
}
.fragment--scope .lines span:nth-child(-n+2)::before { background: var(--color-accent-earth); border-color: var(--color-accent-earth) }
.fragment--scope .lines u { background: rgba(28,27,25,.34) }
.fragment--scope .lines span:nth-child(1) u { width: 88% }
.fragment--scope .lines span:nth-child(2) u { width: 62% }
.fragment--scope .lines span:nth-child(3) u { width: 74%; opacity: .55 }
.fragment--scope .lines span:nth-child(4) u { width: 46%; opacity: .55 }

/* ---------- Phone density ----------
   Below 600px the well is small enough that the finest detail turns to mush. Drop
   the labels and thin the densest runs rather than shrinking everything uniformly. */
@media (max-width: 599px) {
    .fragment { inset: 9%; padding: 9px; gap: 6px }
    .fragment b, .fragment em { font-size: 8px; letter-spacing: .1em }
    .fragment--table { grid-template-rows: auto repeat(3, 1fr) }
    .fragment--table i:last-child { display: none }
    .fragment--chassis .vents { grid-template-columns: repeat(6, 1fr) }
    .fragment--manifest { grid-template-columns: 1fr }
    .fragment--manifest .scan { display: none }
}

/* ---------- Large screens ----------
   Two things have to happen together here, or the composition inverts. A card
   spanning seven columns of an 1880px rail is roughly 950px wide, so a 16/7 well
   would be over 400px tall — and the fragment inside it, drawn at phone scale, would
   be a handful of 15px marks stranded in a large empty box. That is precisely the
   "oversized desktop canvas" the build plan rules out.

   So the wells are capped in height AND the ink inside them grows. The cap turns the
   ratio into a letterbox rather than letting it dictate an ever-taller box; the
   larger marks keep the fragment reading as an interface at arm's length. */
@media (min-width: 900px) {
    .evidence-media { max-height: 330px }
    .evidence-media--wide { max-height: 290px }
    .evidence-media--tall { max-height: 400px }

    .fragment { inset: 13%; padding: 14px; gap: 9px }
    .fragment b, .fragment em { font-size: 9.5px }
    .fragment u { height: 5px }
    .evidence-card p { font-size: var(--text-base) }

    .fragment--board i { grid-auto-rows: 12px; gap: 6px; padding: 6px }
    .fragment--queue .rows s { padding: 0 10px }
    .fragment--queue .rows s em { font-size: 7.5px; padding: 3px 7px }
    .fragment--session .screen { padding: 8px; gap: 6px }
    .fragment--session .screen s { border-left-width: 8px; border-bottom-width: 12px }
    .fragment--chassis .ports i { width: 30px; height: 14px }
    .fragment--chassis .ports i:last-child { width: 14px }
    .fragment--scope .lines { gap: 11px }
    .fragment--scope .lines span { grid-template-columns: 12px 1fr; gap: 9px }
    .fragment--scope .lines span::before { width: 12px; height: 12px }
}

@media (min-width: 1440px) {
    .evidence-media { max-height: 380px }
    .evidence-media--wide { max-height: 330px }
    .evidence-media--tall { max-height: 460px }

    .fragment { padding: 18px; gap: 11px }
    .fragment b, .fragment em { font-size: 10.5px }
    .fragment u { height: 6px }

    .fragment--board i { grid-auto-rows: 14px; gap: 7px }
    .fragment--queue .rows s em { font-size: 8.5px }
    .fragment--session .screen s { border-left-width: 9px; border-bottom-width: 14px }
    .fragment--chassis .ports i { width: 36px; height: 16px }
    .fragment--chassis .ports i:last-child { width: 16px }
}

/* ---------- Evidence rail ----------
   A caption strip under a mosaic: three short facts about the work itself, set as an
   index rather than three more cards. Used where a chapter needs to close on detail
   instead of whitespace. */
.evidence-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    margin-top: var(--grid-gap);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.section--graphite .evidence-rail { border-top-color: rgba(247,243,236,.2) }

.evidence-rail > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0 }

.evidence-rail .evidence-rail-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent-earth);
}

.section--graphite .evidence-rail .evidence-rail-label { color: var(--color-accent-earth-soft) }

.evidence-rail p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); max-width: 38ch }
.section--graphite .evidence-rail p { color: var(--color-text-on-dark-muted) }

@media (min-width: 700px) {
    .evidence-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap) }
}

/* Reduced motion needs no rule here: nothing in this file animates. The fragments are
   static by design — the build plan rules out continuous motion, and a "live"
   dashboard that never stops moving is exactly that. */