/* ============================================================================
   Style book chrome
   ----------------------------------------------------------------------------
   Only loaded by /Styleguide. Everything the style book DISPLAYS comes from the
   real component stylesheets; this file styles the specimen frames around them.

   Direction: a specimen sheet, not a documentation page. In a materials sample
   book the material fills the page and the annotation is small, precise and set
   in a utility face. The first version of this page had that inverted, with a
   36px colour chip inside a large bordered card of text. Here the colour is the
   block and the annotation sits inside it.

   The two faces are the system's own: the sans carries the display sizes with
   tight tracking, the mono carries every label, token name and measurement in
   uppercase with wide tracking. No webfont is loaded; the contrast between the
   two roles does the work instead.
   ========================================================================== */

/* === Page head =========================================================== */
.sg-masthead { margin-bottom: var(--space-16); }
.sg-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand);
    display: block;
    margin-bottom: var(--space-4);
}
.sg-title {
    font-size: var(--text-6xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--leading-none);
    color: var(--text);
    margin-bottom: var(--space-5);
}
.sg-standfirst {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--text-body);
    max-width: 46ch;
}

/* The measured facts about the system, as a row of figures. This is the page's
   thesis: the system is countable and its contrast floor is enforced. */
.sg-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: var(--space-12);
    border-top: var(--border-width) solid var(--border);
    border-bottom: var(--border-width) solid var(--border);
}
.sg-fact {
    padding: var(--space-6) var(--space-10) var(--space-6) 0;
    margin-right: var(--space-10);
    border-right: var(--border-width) solid var(--border);
}
.sg-fact:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.sg-fact-value {
    display: block;
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.sg-fact-label {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* === Contents ============================================================ */
.sg-toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-8);
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-10);
    border-bottom: var(--border-width) solid var(--border);
}
.sg-toc a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: var(--border-width) solid transparent;
    padding-bottom: var(--space-1);
    transition: color var(--transition), border-color var(--transition);
}
.sg-toc a:hover { color: var(--text); border-bottom-color: var(--brand); }

/* === Sections ============================================================ */
.sg-section { margin-bottom: var(--space-24); scroll-margin-top: var(--space-10); }
.sg-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding-bottom: var(--space-5);
    border-bottom: var(--border-width-thick) solid var(--text);
    margin-bottom: var(--space-8);
}
.sg-section-head h2 {
    font-size: var(--text-5xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--leading-none);
    color: var(--text);
}
/* The count is a fact about the section, so it is set as data, not as a caption. */
.sg-section-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    white-space: nowrap;
}
.sg-lede {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    max-width: 68ch;
    margin-bottom: var(--space-12);
}
.sg-lede code, .sg-rule code, .sg-note code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--code-inline-bg);
    color: var(--code-inline-text);
    padding: var(--space-px) var(--space-3);
    border-radius: var(--radius-xs);
}
.sg-sub {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin: var(--space-16) 0 var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.sg-sub:first-of-type { margin-top: 0; }

/* === Colour specimens ====================================================
   The swatch IS the block. Its token name and measured contrast sit inside it,
   drawn in whichever of ink or paper reads better on that colour; theme.js-era
   JS sets .is-dark when the swatch needs light text. */
.sg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-4);
}
.sg-swatch {
    position: relative;
    min-height: 108px;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    background: var(--sg-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-1);
    /* A near-white swatch on a white page would otherwise have no edge. */
    box-shadow: inset 0 0 0 1px var(--border);
    overflow: hidden;
}
.sg-swatch-on-light { color: var(--text); }
.sg-swatch-on-dark { color: var(--surface); }
.sg-token {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    word-break: break-all;
}
.sg-value {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}
.sg-note {
    font-size: var(--text-2xs);
    line-height: var(--leading-snug);
    opacity: 0.75;
    margin-top: var(--space-1);
}
/* The measured contrast, pinned to the swatch's top corner. This is the page's
   signature: every pair in the system was measured, and the number is printed on
   the material rather than claimed in prose. */
.sg-ratio {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    padding: var(--space-px) var(--space-3);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.14);
}
.sg-swatch-on-dark .sg-ratio { background: rgba(255, 255, 255, 0.18); }

/* Semantic roles: the solid fill and its soft pair share one row, so the rule
   that binds them is visible rather than described. */
.sg-role { margin-bottom: var(--space-4); }
.sg-role-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    margin-bottom: var(--space-3);
}
.sg-role-name {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: 0.04em;
}
.sg-role-note { font-size: var(--text-xs); color: var(--text-muted); }
.sg-role-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-1);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sg-role-cell {
    position: relative;
    min-height: 84px;
    padding: var(--space-5) var(--space-6);
    background: var(--sg-color);
    color: var(--sg-on);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-1);
}
/* The cell that carries text shows it, at the weight the application uses. */
.sg-role-sample {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

/* === Type specimens ====================================================== */
.sg-type-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-10);
    padding: var(--space-5) 0;
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.sg-type-row:last-child { border-bottom: none; }
.sg-type-meta {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}
.sg-type-meta b { color: var(--text); font-weight: var(--weight-bold); }
.sg-type-sample {
    min-width: 0;
    color: var(--text);
    font-size: var(--sg-size);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}
.sg-type-use {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
    letter-spacing: 0;
}

/* Weight and mono specimens */
.sg-weights { display: flex; flex-wrap: wrap; gap: var(--space-10); align-items: baseline; }
.sg-weight-item { display: flex; flex-direction: column; gap: var(--space-2); }
.sg-weight-sample { font-size: var(--text-3xl); color: var(--text); line-height: var(--leading-none); }

/* === Measurement scales ==================================================
   Spacing and radius read as measurement, not as cards: a rule, a bar, a number. */
.sg-scale-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-2) 0;
}
.sg-scale-meta {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}
.sg-scale-meta b { color: var(--text); font-weight: var(--weight-bold); }
.sg-scale-bar {
    height: var(--space-5);
    width: var(--sg-size);
    background: var(--brand);
    border-radius: var(--radius-xs);
}

.sg-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--space-6);
}
.sg-tile {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: flex-end;
    padding: var(--space-5);
    background: var(--surface-alt);
    box-shadow: inset 0 0 0 1px var(--border);
    border-radius: var(--sg-radius, var(--radius-md));
}
.sg-tile-shadow {
    background: var(--surface);
    box-shadow: var(--sg-shadow, none);
    border-radius: var(--radius-md);
}
.sg-tile-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    line-height: var(--leading-snug);
}
.sg-tile-label b { display: block; color: var(--text); font-weight: var(--weight-bold); }

/* === Component specimens =================================================
   A quiet stage, not another card. One hairline, generous air, so the component
   inside is the only thing with a border. */
.sg-specimen {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-4);
}
.sg-specimen-col { flex-direction: column; align-items: stretch; }
/* Where the component is itself a card, the stage drops its own surface so two
   panels do not nest. */
.sg-specimen-bare {
    background: var(--bg);
    box-shadow: none;
    padding: var(--space-12) 0;
}

/* === Contract ============================================================ */
.sg-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-px);
    background: var(--border);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sg-rule {
    background: var(--surface);
    padding: var(--space-10);
}
.sg-rule-verdict {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: var(--space-4);
}
/* The on-soft tokens, not the solid fills: a solid fill is tuned to carry white
   text, not to BE text, and --success on the dark surface measured 4.42:1. */
.sg-rule-do .sg-rule-verdict { color: var(--success-on-soft); }
.sg-rule-dont .sg-rule-verdict { color: var(--danger-on-soft); }
.sg-rule h4 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
    color: var(--text);
}
.sg-rule p { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); }

/* === Reference table ===================================================== */
.sg-ref { font-size: var(--text-sm); }
.sg-ref td:first-child, .sg-ref th:first-child { white-space: nowrap; }
.sg-ref td:first-child { font-family: var(--font-mono); color: var(--text); font-weight: var(--weight-semibold); }
.sg-ref td:nth-child(2) { font-family: var(--font-mono); }

@media (max-width: 768px) {
    .sg-type-row, .sg-scale-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .sg-fact { padding-right: var(--space-6); margin-right: var(--space-6); }
    .sg-specimen { padding: var(--space-8); }
}