/* ── Green Swans — legal_ledger.css ─────────────────────────────────────────
   Brand reference: CLAUDE-brand-greenswans.md ("Greenhouse") — keep in sync.
   The nine palette colours are also declared, identically, in the Green Swans
   branch of templates/admin/base_site.html (the admin never loads this file);
   legal_ledger/tests/test_admin_views_colors.py pins the two together.

   Palette — "Greenhouse" (exactly nine colours)
   Paper      #F5F7F2   page background; also text on dark sections
   Mint       #CDEBD0   green tint: section bands; the action fill ON Sky
   Sky        #CBE3F5   blue tint: info panels and chips; walls, water, sky
   Leaf       #90C924   logo lime: accents on DARK backgrounds only
   Forest     #096B36   logo green: ACTION — every button's fill; links
   Lake       #1F6A9E   mid blue: SELECTION — what is chosen, hovered, focused
   Slate      #5A6B72   secondary text, icons, captions
   Chestnut   #6B4327   the single wood — shelves, spines, frames; warning/risk
   Ink        #0F1F1A   body text, headings, dark section backgrounds

   Rules — one job per colour, the same on the Public Site, the Client Space
   and the Admin Tool (CLAUDE-brand-greenswans.md § One job per colour)
   - Ink is body text, Paper the page background.
   - Action buttons: Forest fill, Paper text; hover/focus Lake. A destructive
     button hovers Chestnut (.gs-action--destructive).
   - Selection (checked options, an open disclosure, text selection, focus
     rings): Lake.
   - Info panels and chips: Sky, Ink text. An action ON Sky is a Mint fill
     with Forest text (a Forest fill on Sky jars), still Lake on hover.
   - Chestnut is danger, warning and risk.
   - Leaf only ever appears on Ink — never as text or icons on a light surface.
   - Dark sections: Ink background, Paper text, --gs-muted-on-dark secondary,
     Leaf links/accents, --gs-hairline-on-dark borders; focus rings Leaf.
   - Slate is not legible enough on Mint/Sky (4.2:1): tinted surfaces use
     --gs-text, never --gs-text-2.
   - No hex outside :root. Every colour is a role token or a color-mix() of
     the palette.

   Type
   Serif      Libre Baskerville — headings and legal reading text (finding
              headline, explanation and quote, scope reasoning, privacy body)
   Wordmark   Fraunces — the "Green Swans" logo name only
   Sans       Instrument Sans — the interface (buttons, forms, labels, tables)
   Mono       Spline Sans Mono — eyebrows, chips, codes, counts
   The same four names (--gs-serif / --gs-sans / --gs-mono / --gs-wordmark)
   are declared in the Admin Tool's templates/admin/base_site.html.
────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Palette — exactly nine colours. Nothing else in this file is a hex. */
    --gs-paper:    #F5F7F2;
    --gs-mint:     #CDEBD0;
    --gs-sky:      #CBE3F5;
    --gs-leaf:     #90C924;
    --gs-forest:   #096B36;
    --gs-lake:     #1F6A9E;
    --gs-slate:    #5A6B72;
    --gs-chestnut: #6B4327;
    --gs-ink:      #0F1F1A;

    /* Roles — what the stylesheet actually references */
    --gs-bg:          var(--gs-paper);
    --gs-bg-tint:     var(--gs-mint);
    --gs-text:        var(--gs-ink);
    --gs-text-2:      var(--gs-slate);
    --gs-link:        var(--gs-forest);
    --gs-accent-dark: var(--gs-leaf);      /* accents and links on Ink ONLY */
    --gs-wood-light:  var(--gs-chestnut);
    --gs-wood-dark:   var(--gs-chestnut);
    --gs-illus-sky:   var(--gs-sky);
    --gs-info:        var(--gs-lake);      /* chart series — admin only */
    --gs-alert:       var(--gs-chestnut);  /* warning AND risk: severity, errors, paid actions */
    --gs-selected:    var(--gs-lake);      /* selection: checked options, an open disclosure, hovered/focused/pressed controls, the current nav page */
    --gs-action:      var(--gs-forest);    /* action buttons: Forest fill, Paper text */
    --gs-panel:       var(--gs-sky);       /* info panels and chips: Ink text */
    --gs-action-on-panel: var(--gs-mint);  /* an action ON a Sky panel: Mint fill, Forest text */

    /* Derived — alpha or mixes only, no new hues */
    --gs-hairline:         color-mix(in srgb, var(--gs-ink) 12%, transparent);
    --gs-hairline-on-dark: color-mix(in srgb, var(--gs-paper) 12%, transparent);
    --gs-muted-on-dark:    color-mix(in srgb, var(--gs-paper) 65%, transparent);
    --gs-paper-on-dark:    var(--gs-paper);
    --gs-surface-on-dark:  color-mix(in srgb, var(--gs-paper) 8%, var(--gs-ink));
    --gs-alert-tint:       color-mix(in srgb, var(--gs-alert) 12%, var(--gs-paper));
    --gs-bg-raised:        color-mix(in srgb, var(--gs-ink) 4%, var(--gs-paper));

    --gs-serif:    'Libre Baskerville', Baskerville, Georgia, serif;   /* headings + legal reading text */
    --gs-wordmark: 'Fraunces', 'Iowan Old Style', Georgia, serif;      /* the logo name only */
    --gs-sans:    'Instrument Sans', system-ui, sans-serif;
    --gs-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

    /* Signature: the misalignment mark (hand-drawn squiggle) — Leaf, because it
       only ever sits on the Ink hero. A data URI cannot read a custom property,
       so this is the one place the Leaf hex is repeated (URL-encoded). */
    --gs-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'%3E%3Cpath d='M0 6.5 Q 5 1.5 10 6.5 T 20 6.5 T 30 6.5 T 40 6.5' fill='none' stroke='%2390C924' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Only the root is viewport-tall: a body capped at 100% let the sticky header
   scroll away after the first screen of a long page. */
html { height: 100%; }

body {
    background: var(--gs-paper);
    color: var(--gs-text);
    font-family: var(--gs-sans);
    font-weight: 400;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--gs-selected);
    outline-offset: 2px;
}

/* Form controls do not inherit the page font on their own — a bare <button>
   rendered in Arial. They take the page's face; a class may still set another. */
button, input, select, textarea, optgroup { font-family: inherit; }

::selection { background: var(--gs-selected); color: var(--gs-paper); }

/* ── Legal reading text — Libre Baskerville ─────────────────────────────────
   The prose a customer reads as law or as our legal assessment is set in the
   serif, like the headings. Interface text — buttons, forms, labels, chips,
   the ISO register table — stays Instrument Sans; codes stay Spline Sans Mono.
   The finding quote already takes the serif from its own rule. */
.gs-finding-headline,
.gs-finding-comment,
.gs-scan-scope-reason,
.gs-privacy .gs-ledger-intro,
.gs-privacy-promises li,
.gs-privacy-section p { font-family: var(--gs-serif); }

/* A checked box or radio is a selection: Lake. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--gs-selected); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.gs-header {
    border-bottom: 1px solid var(--gs-hairline);
    background: var(--gs-paper);
    position: sticky;
    top: 0;
    z-index: 10;
}

.gs-header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gs-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.gs-logo-svg { flex-shrink: 0; display: block; }

.gs-logo-name {
    font-family: var(--gs-wordmark);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--gs-ink);
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

/* One row: Previous scans, language, who you are — then the two actions.
   Groups are made by spacing, never a divider. The panel (.gs-nav-menu) is
   only a box on a phone; on a wide screen `display: contents` lays its items
   out in the row, and `order` puts Scan between the identity and Sign out
   while Scan stays first in the DOM, so it is never folded away. */
.gs-header-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.gs-nav-menu { display: contents; }
.gs-nav-menu > * { order: 1; }
.gs-nav-scan { order: 2; }
.gs-nav-menu > .gs-nav-auth { order: 3; margin-left: -0.9rem; }
.gs-menu-button { display: none; }

/* Navigation and information are text; only actions are buttons. Shared by
   <a> and the Sign out <button>, so the line height is set, not inherited. */
.gs-nav-link {
    position: relative;
    font-family: var(--gs-mono);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gs-action);
    text-decoration: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.gs-nav-link:hover,
.gs-nav-link:focus-visible { color: var(--gs-selected); }

/* The page you are on is selected, so it is Lake (the brand's selection
   colour): a Lake fill on its button and a Lake dot under the item. */
.gs-nav-link.is-current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--gs-selected);
}

/* Scan is the action, a Forest fill. Sign out / Sign in are actions too, the
   same size in a Forest outline, so the way out never outshouts the way in.
   Both carry a 1px border so their heights match. */
.gs-nav-link--action {
    background: var(--gs-action);
    color: var(--gs-paper);
}
.gs-nav-link--outline {
    background: transparent;
    color: var(--gs-action);
}
.gs-nav-link--action,
.gs-nav-link--outline {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--gs-action);
    border-radius: 6px;
    cursor: pointer;
}
.gs-nav-link--action.is-current,
.gs-nav-link--action:hover,
.gs-nav-link--action:focus-visible,
.gs-nav-link--outline:hover,
.gs-nav-link--outline:focus-visible {
    background: var(--gs-selected);
    border-color: var(--gs-selected);
    color: var(--gs-paper);
}

/* Logout is POST-only, so Sign out is a <button> in a form. */
.gs-nav-auth { display: flex; }

/* Name · company on one line, in the sans (the name opens Your settings);
   under it, small and muted, the lifetime scan counters. */
.gs-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 18rem;
}
.gs-identity-who {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    font-family: var(--gs-sans);
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
}
.gs-identity-usage {
    font-family: var(--gs-mono);
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--gs-text-2);
    white-space: nowrap;
}
.gs-identity-name {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--gs-text);
    text-decoration: none;
}
.gs-identity-name:hover,
.gs-identity-name:focus-visible { color: var(--gs-selected); }
.gs-identity-sep,
.gs-identity-company { color: var(--gs-text-2); }
.gs-identity-company {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Header: phone menu ───────────────────────────────────────────────────── */
/* Below 960px only Scan and the Menu button stay in the bar; the rest opens
   as a panel under it. Sign out is a Forest fill there — nothing competes. */
@media (max-width: 959px) {
    .gs-menu-button {
        order: 3;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        min-height: 44px;
        padding: 0.45rem 0;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .gs-nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        padding: 1.25rem 2rem 1.5rem;
        background: var(--gs-paper);
        border-bottom: 1px solid var(--gs-hairline);
        box-shadow: 0 14px 24px -16px color-mix(in srgb, var(--gs-ink) 30%, transparent);
    }
    .gs-header.is-menu-open .gs-nav-menu { display: flex; }
    .gs-nav-menu > .gs-nav-auth { margin-left: 0; }
    .gs-nav-menu .gs-nav-link--outline {
        background: var(--gs-action);
        color: var(--gs-paper);
    }
    .gs-nav-menu .gs-nav-link.is-current::after { left: auto; right: -14px; bottom: 50%; margin: 0 0 -3px; }
    .gs-identity { max-width: 100%; }
    .gs-identity-who { white-space: normal; flex-wrap: wrap; }
    .gs-nav-menu .gs-lang-label { position: static; width: auto; height: auto; clip: auto; margin: 0 0.6rem 0 0; }
}
@media (max-width: 720px) {
    .gs-nav-menu { padding-inline: 1.25rem; }
}
@media (max-width: 420px) {
    .gs-header-nav { gap: 1rem; }
    .gs-menu-button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    /* Icon only here, so the button keeps a 44px square to tap; the negative
       margin keeps the icon on the gutter edge where it was. */
    .gs-menu-button { min-width: 44px; justify-content: center; margin-inline-end: -14px; }
}
/* "New scan" runs long in some languages ("Nouvelle analyse"), so on a narrow
   phone the bar tightens: a smaller swan and wordmark, a snugger button. */
@media (max-width: 480px) {
    .gs-logo { gap: 8px; }
    .gs-logo-svg { width: 32px; height: 32px; }
    .gs-logo-name { font-size: 1.1rem; }
    .gs-nav-scan { padding-inline: 0.65rem; letter-spacing: 0.04em; }
}
@media (max-width: 380px) {
    .gs-logo-name { font-size: 1rem; }
    .gs-nav-scan { font-size: 0.72rem; }
}

/* ── Main ─────────────────────────────────────────────────────────────────── */
.gs-main { flex: 1; }

/* ── Hero — dark petrol band ──────────────────────────────────────────────── */
.gs-hero {
    position: relative;
    background: linear-gradient(155deg, var(--gs-ink) 30%, var(--gs-surface-on-dark) 100%);
    color: var(--gs-paper-on-dark);
    overflow: hidden;
}

.gs-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    padding: 6.5rem 2rem 6rem;
}

/* Faint wireframe swan drifting on the dark water */
.gs-hero-swan {
    position: absolute;
    z-index: 0;
    right: -60px;
    bottom: -110px;
    width: 560px;
    height: auto;
    color: var(--gs-paper-on-dark);
    opacity: 0.11;
    pointer-events: none;
}

.gs-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    margin-bottom: 2rem;
}

/* The eyebrow is reused on light pages (the scan intake, privacy): Slate text
   and a Forest dot there, muted Paper and Leaf only inside the Ink hero. */
.gs-hero .gs-hero-eyebrow { color: var(--gs-muted-on-dark); }
.gs-hero .gs-hero-eyebrow-dot { background: var(--gs-accent-dark); }
.gs-hero-eyebrow-dot {
    width: 7px;
    height: 7px;
    background: var(--gs-link);
    border-radius: 50%;
}

.gs-hero-headline {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: clamp(2.2rem, 4.8vw, 3.75rem);
    font-weight: 400;
    color: var(--gs-paper-on-dark);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 780px;
    margin-bottom: 2rem;
}

.gs-hero-line { display: block; }

/* The gap line — italic, Leaf on the Ink hero, marked with the misalignment squiggle */
.gs-hero-gap {
    font-style: italic;
    font-weight: 430;
    color: var(--gs-accent-dark);
}

.gs-hero-headline .gs-hero-gap {
    display: inline-block;
    background-image: var(--gs-squiggle);
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 0.14em;
    padding-bottom: 0.14em;
}

.gs-hero-body {
    font-size: 1.12rem;
    font-weight: 400;
    color: var(--gs-muted-on-dark);
    max-width: 540px;
    line-height: 1.75;
    margin-bottom: 2.75rem;
}

.gs-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--gs-action);
    color: var(--gs-paper);
    font-family: var(--gs-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.85rem 1.9rem;
    /* The CTA is an <a> on the landing page but a <button> on the scan and
       sign-in forms, and a button keeps the UA's own `2px outset` border
       unless told otherwise — a bevel around a dark pill, lighter on the
       top-left, darker on the bottom-right. Reset here, once, so the two
       elements are the same shape (fixed 2026-09-24). */
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.15s, transform 0.15s;
}

.gs-hero-cta:hover,
.gs-hero-cta:focus-visible {
    background: var(--gs-selected);
    transform: translateY(-2px);
}

/* The one rule a destructive button adds: it hovers Chestnut, not Lake. No
   Public Site or Client Space page has one yet. */
.gs-action--destructive:hover,
.gs-action--destructive:focus-visible { background: var(--gs-alert); }

/* An action on a Sky info panel: Mint fill, Forest text — Lake on hover. */
.gs-panel .gs-hero-cta,
.gs-panel .gs-scan-export-btn {
    background: var(--gs-action-on-panel);
    color: var(--gs-action);
}
.gs-panel .gs-hero-cta:hover,
.gs-panel .gs-hero-cta:focus-visible,
.gs-panel .gs-scan-export-btn:hover,
.gs-panel .gs-scan-export-btn:focus-visible {
    background: var(--gs-selected);
    color: var(--gs-paper);
}

.gs-hero-cta-arrow {
    color: inherit;
    font-size: 1.05rem;
    transition: transform 0.15s;
}

.gs-hero-cta:hover .gs-hero-cta-arrow { transform: translateX(4px); }

/* Page-load reveal, staggered */
@keyframes gs-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.gs-hero-eyebrow  { animation: gs-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s backwards; }
.gs-hero-line:nth-child(1) { animation: gs-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s backwards; }
.gs-hero-line:nth-child(2) { animation: gs-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s backwards; }
.gs-hero-line:nth-child(3) { animation: gs-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.44s backwards; }
.gs-hero-body     { animation: gs-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.58s backwards; }
.gs-hero-cta      { animation: gs-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s backwards; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.gs-divider {
    max-width: 1140px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--gs-hairline);
}

/* ── Section labels (shared) ──────────────────────────────────────────────── */
.gs-pillars-label {
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    margin-bottom: 2.5rem;
}

/* ── Pillars — an actual sequence: reference → compare → surface ──────────── */
.gs-pillars {
    max-width: 1140px;
    margin: 0 auto;
    padding: 5rem 2rem 6rem;
    border-top: 1px solid var(--gs-hairline);
}

.gs-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 2.5rem;
}

.gs-pillar {
    border-top: 2px solid var(--gs-ink);
    padding-top: 1.5rem;
}

.gs-pillar-number {
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gs-link);
    margin-bottom: 1rem;
}

.gs-pillar-title {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: 1.18rem;
    font-weight: 400;
    color: var(--gs-ink);
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin-bottom: 0.75rem;
}

.gs-pillar-desc {
    font-size: 0.94rem;
    color: var(--gs-text-2);
    line-height: 1.7;
}

.gs-pillar-desc + .gs-pillar-desc {
    margin-top: 0.9rem;
}

/* ── Legal notice — colophon before the footer ──────────────────────────── */
.gs-legal-notice {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem 6rem;
}

.gs-legal-notice-inner {
    border-top: 1px solid var(--gs-hairline);
    padding-top: 3rem;
}

.gs-legal-notice-disclaimer {
    border-left: 2px solid var(--gs-hairline);
    padding-left: 1.5rem;
    font-family: var(--gs-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--gs-text-2);
    max-width: 62ch;
    margin-bottom: 3rem;
}

.gs-legal-notice-label {
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gs-link);
    margin-bottom: 1.5rem;
}

.gs-legal-notice-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.3fr);
    gap: 2rem 4rem;
}

.gs-legal-notice-firm {
    font-family: var(--gs-serif);
    font-size: 1.08rem;
    font-weight: 400;
    color: var(--gs-ink);
    max-width: 26ch;
    line-height: 1.55;
}

.gs-legal-notice-firm sup {
    font-size: 0.55em;
    color: var(--gs-link);
}

.gs-legal-notice-rows {
    display: grid;
    row-gap: 0.9rem;
}

.gs-legal-notice-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.5rem 1rem;
}

.gs-legal-notice-row-label {
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    padding-top: 0.15rem;
}

.gs-legal-notice-row-value {
    font-size: 0.92rem;
    color: var(--gs-text);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
}

.gs-legal-notice-row-value a {
    color: var(--gs-link);
    text-decoration: none;
}

.gs-legal-notice-row-value a:hover {
    text-decoration: underline;
}

/* Below 720px the firm and its contact rows stack: the two minimum column
   widths plus the gap need about 620px, so a phone would scroll sideways. */
@media (max-width: 720px) {
    .gs-legal-notice { padding: 0 1.25rem 4rem; }
    .gs-legal-notice-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 560px) {
    .gs-legal-notice-row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

/* ── Footer — dark bookend ────────────────────────────────────────────────── */
.gs-footer {
    background: var(--gs-ink);
    padding: 2.25rem 2rem;
}

.gs-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.gs-footer-copy {
    font-family: var(--gs-mono);
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--gs-muted-on-dark);
}

.gs-footer-link {
    font-family: var(--gs-mono);
    font-size: 0.76rem;
    color: var(--gs-accent-dark);
    text-decoration: none;
    /* A 44px tap target that takes no more room than the text: the padding
       grows the hit area, the negative margin gives the space back. */
    display: inline-block;
    padding: 0.8rem 0.5rem;
    margin: -0.8rem -0.5rem;
}

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

.gs-footer-tagline {
    font-family: var(--gs-serif);
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 420;
    color: var(--gs-paper-on-dark);
}

/* ── Language switcher ────────────────────────────────────────────────────── */
/* A quiet text toggle: the code alone, no pill. Its label is read by screen
   readers and shown only in the phone menu. */
.gs-lang-form { display: flex; align-items: center; }
.gs-lang-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-text-2);
}
.gs-lang-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--gs-text-2);
    cursor: pointer;
    font-family: var(--gs-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.1rem;
    min-height: 28px;
    transition: color 0.15s;
}
/* On a touch screen the select is a 44px target; the negative margin keeps
   the header and the phone menu the height they were. */
@media (pointer: coarse) {
    .gs-lang-select { min-height: 44px; min-width: 44px; padding-inline: 0.4rem; margin: -0.6rem -0.3rem; text-align: center; }
}

.gs-lang-select:hover,
.gs-lang-select:focus-visible { color: var(--gs-selected); }
.gs-lang-select:focus-visible { outline: 2px solid var(--gs-selected); outline-offset: 2px; }

/* ── Ledger (browse) — the registry ───────────────────────────────────────── */
.gs-ledger {
    max-width: 960px;
    margin: 0 auto;
    padding: 4.5rem 2rem 5.5rem;
}

.gs-ledger-headline {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: clamp(1.85rem, 3.6vw, 2.65rem);
    font-weight: 400;
    color: var(--gs-ink);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: 1.1rem;
}

.gs-ledger-intro {
    font-size: 1rem;
    color: var(--gs-text-2);
    max-width: 580px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.gs-ledger-search {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.gs-ledger-search-input {
    flex: 1;
    max-width: 440px;
    padding: 0.7rem 1.2rem;
    font-family: var(--gs-sans);
    font-size: 0.95rem;
    color: var(--gs-ink);
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 999px;
    transition: border-color 0.15s;
}

.gs-ledger-search-input::placeholder { color: var(--gs-text-2); }

.gs-ledger-search-input:focus {
    outline: none;
    border-color: var(--gs-selected);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-selected) 14%, transparent);
}

.gs-ledger-search-btn {
    padding: 0.7rem 1.6rem;
    font-family: var(--gs-sans);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gs-paper);
    background: var(--gs-ink);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}

.gs-ledger-search-btn:hover { background: var(--gs-link); }

/* Jurisdiction tabs — plain text; active carries the misalignment mark */
.gs-ledger-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--gs-hairline);
    padding-bottom: 0.9rem;
}

.gs-ledger-tab {
    font-family: var(--gs-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    text-decoration: none;
    padding-bottom: 0.35rem;
    transition: color 0.15s;
}

.gs-ledger-tab:hover { color: var(--gs-ink); }

.gs-ledger-tab.is-active {
    color: var(--gs-ink);
    background-image: var(--gs-squiggle);
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 6px;
}

/* Second tree level — the selected group's federal/subdivision chips.
   Sits tight under the group row: that row keeps the hairline. */
.gs-ledger-subtabs {
    margin-top: -1rem;
    margin-bottom: 1.75rem;
    padding: 0.75rem 0 0 1.25rem;
    border-bottom: none;
    border-left: 2px solid var(--gs-hairline);
    gap: 0.4rem 1.2rem;
}

.gs-ledger-subtab {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}

/* Third tree level — federal/subdivision chips when a country row is
   already showing above them. */
.gs-ledger-subtabs--2 {
    padding-left: 2.5rem;
}

/* Region row + mini world map. Hovering (or focusing) a region chip lights
   that part of the world; the selected region stays lit in pine. */
.gs-ledger-browse {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
}

.gs-ledger-browse .gs-ledger-tabs {
    flex: 1 1 auto;
}

.gs-map {
    flex: 0 0 auto;
    width: 250px;
    margin-top: 0.15rem;
}

.gs-map path {
    fill: var(--gs-hairline);
}

.gs-map .gs-map-bg {
    opacity: 0.55;
}

.gs-map g path {
    transition: fill 0.15s;
}

.gs-map g.is-current path {
    fill: var(--gs-ink);
}

.gs-map g.is-lit path {
    fill: var(--gs-link);
}

@media (max-width: 900px) {
    .gs-map { display: none; }
}

/* Tiny jurisdiction flag inside chips and browse links. The hairline ring
   keeps light flags (Japan, Finland) visible on the paper surface. */
.gs-flag {
    width: 15px;
    height: 10px;
    margin-right: 0.4rem;
    vertical-align: -1px;
    border-radius: 1.5px;
    box-shadow: 0 0 0 1px var(--gs-hairline);
    object-fit: cover;
}

.gs-ledger-count {
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    margin-bottom: 0.75rem;
}

/* Registry rows — numbered like ledger entries */
.gs-ledger-list {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    border-top: 1px solid var(--gs-hairline);
}

.gs-ledger-item {
    border-bottom: 1px solid var(--gs-hairline);
    counter-increment: ledger;
}

.gs-ledger-item-link {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding: 1rem 0.6rem;
    text-decoration: none;
    transition: background 0.15s;
}

.gs-ledger-item-link::before {
    content: counter(ledger, decimal-leading-zero);
    font-family: var(--gs-mono);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--gs-text-2);
    min-width: 2.6ch;
    flex-shrink: 0;
    transition: color 0.15s;
}

.gs-ledger-item-link:hover { background: var(--gs-bg-tint); }
.gs-ledger-item-link:hover::before { color: var(--gs-link); }

.gs-ledger-item-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gs-ink);
    line-height: 1.45;
}

.gs-ledger-item-meta {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-shrink: 0;
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    color: var(--gs-text-2);
    white-space: nowrap;
}

.gs-ledger-badge {
    display: inline-block;
    padding: 0.14rem 0.6rem;
    font-family: var(--gs-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text);
    background: var(--gs-panel);
    border-radius: 999px;
}

.gs-ledger-empty {
    padding: 2.5rem 0;
    color: var(--gs-text-2);
    font-family: var(--gs-serif);
    font-style: italic;
    font-size: 1.05rem;
}

.gs-ledger-pagination {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
}

.gs-ledger-page-link {
    font-family: var(--gs-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gs-link);
    text-decoration: none;
    transition: color 0.15s;
}

.gs-ledger-page-link:hover { color: var(--gs-ink); }

.gs-ledger-page-status {
    font-family: var(--gs-mono);
    font-size: 0.78rem;
    color: var(--gs-text-2);
}

/* ── Ledger (document page) ───────────────────────────────────────────────── */
.gs-document {
    max-width: 840px;
    margin: 0 auto;
    padding: 3.5rem 2rem 5.5rem;
}

.gs-document-breadcrumb { margin-bottom: 2.5rem; }

.gs-document-breadcrumb a {
    font-family: var(--gs-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--gs-link);
    text-decoration: none;
    transition: color 0.15s;
}

.gs-document-breadcrumb a:hover { color: var(--gs-ink); }

.gs-document-title {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 510;
    color: var(--gs-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}

.gs-document-fullname {
    font-family: var(--gs-serif);
    font-style: italic;
    font-weight: 420;
    font-size: 1.02rem;
    color: var(--gs-text-2);
    line-height: 1.55;
    margin-bottom: 1rem;
}

.gs-document-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.9rem;
    font-family: var(--gs-mono);
    font-size: 0.75rem;
    color: var(--gs-text-2);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gs-hairline);
    margin-bottom: 2.5rem;
}

.gs-document-meta a {
    color: var(--gs-link);
    font-weight: 500;
    text-decoration: none;
}

.gs-document-meta a:hover { color: var(--gs-ink); }

.gs-document-body {
    font-size: 1rem;
    color: var(--gs-text);
    line-height: 1.8;
    overflow-wrap: break-word;
}

.gs-document-body h1,
.gs-document-body h2,
.gs-document-body h3,
.gs-document-body h4 {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    color: var(--gs-ink);
    line-height: 1.25;
    margin: 2.25rem 0 0.75rem;
}

/* Split-out parts of glued legislation.gov.uk headings */
.gs-document-body .gs-doc-secnum {
    font-family: var(--gs-mono);
    font-size: 0.78em;
    font-weight: 500;
    color: var(--gs-link);
    margin-right: 0.3em;
}

.gs-document-body .gs-doc-extent {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.6em;
    padding: 0.12rem 0.6rem;
    font-family: var(--gs-mono);
    font-size: 0.55em;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.08em;
    color: var(--gs-text-2);
    background: var(--gs-bg-tint);
    border-radius: 999px;
}

.gs-document-body h1 { font-size: 1.55rem; font-weight: 540; }
.gs-document-body h2 { font-size: 1.32rem; font-weight: 530; }
.gs-document-body h3 { font-size: 1.12rem; font-weight: 520; }
.gs-document-body h4 { font-size: 1rem;    font-weight: 600; font-family: var(--gs-sans); }

.gs-document-body p { margin: 0 0 1rem; }

.gs-document-body a {
    color: var(--gs-link);
    text-decoration-color: var(--gs-hairline);
    text-underline-offset: 2px;
}

.gs-document-body a:hover { text-decoration-color: var(--gs-link); }

.gs-document-body ul,
.gs-document-body ol { margin: 0 0 1rem 1.4rem; }

.gs-document-body table {
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.88rem;
    display: block;
    overflow-x: auto;
}

.gs-document-body th,
.gs-document-body td {
    border: 1px solid var(--gs-hairline);
    padding: 0.45rem 0.75rem;
    text-align: left;
}

.gs-document-body th {
    font-family: var(--gs-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    background: var(--gs-bg-tint);
}

.gs-document-body img { max-width: 100%; }

.gs-document-body blockquote {
    margin: 1.25rem 0;
    padding: 0.25rem 1.4rem;
    border-left: 3px solid var(--gs-link);
    color: var(--gs-text-2);
    font-family: var(--gs-serif);
    font-style: italic;
}

/* ── Citation graph ───────────────────────────────────────────────────────── */
.gs-graph {
    max-width: 1360px;
    margin: 0 auto;
    padding: 3rem 2rem 4.5rem;
}

.gs-graph-headline {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 520;
    color: var(--gs-ink);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 0.9rem;
}

.gs-graph-intro {
    max-width: 640px;
    font-size: 0.98rem;
    color: var(--gs-text-2);
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

/* Server-capped selection warning — the user should narrow the selection. */
.gs-graph-notice {
    font-family: var(--gs-mono);
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--gs-ink);
    background: var(--gs-bg-tint);
    border: 1px solid var(--gs-hairline);
    border-left: 3px solid var(--gs-link);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
}

.gs-graph-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.gs-graph-search {
    font-family: var(--gs-sans);
    font-size: 0.92rem;
    color: var(--gs-text);
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    width: min(280px, 100%);
    transition: border-color 0.15s;
}

.gs-graph-search:focus {
    outline: none;
    border-color: var(--gs-selected);
}

.gs-graph-search-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gs-graph-search-count {
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    color: var(--gs-text-2);
    min-height: 0.9rem;
    padding-left: 0.2rem;
}

.gs-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gs-graph-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gs-text-2);
    background: var(--gs-bg-tint);
    border: 1px solid var(--gs-hairline);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s;
}

.gs-graph-chip.is-on {
    color: var(--gs-ink);
    opacity: 1;
}

.gs-graph-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gs-graph-stats {
    font-family: var(--gs-mono);
    font-size: 0.78rem;
    color: var(--gs-text-2);
    margin-left: auto;
}

.gs-graph-stage {
    position: relative;
    height: min(72vh, 780px);
    min-height: 460px;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 12px;
    overflow: hidden;
}

.gs-graph-canvas {
    position: absolute;
    inset: 0;
}

.gs-graph-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gs-graph-ctl {
    width: 36px;
    height: 36px;
    font-family: var(--gs-sans);
    font-size: 1.05rem;
    line-height: 1;
    color: var(--gs-ink);
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.gs-graph-ctl:hover {
    background: var(--gs-bg-tint);
    border-color: var(--gs-link);
}

.gs-graph-panel {
    position: absolute;
    top: 14px;
    left: 14px;
    width: min(320px, calc(100% - 28px));
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 12px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--gs-ink) 12%, transparent);
    padding: 1.1rem 1.25rem 1.25rem;
}

.gs-graph-panel-close {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--gs-text-2);
    background: none;
    border: none;
    cursor: pointer;
}

.gs-graph-panel-close:hover { color: var(--gs-ink); }

.gs-graph-panel-jurisdiction {
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}

.gs-graph-panel-title {
    font-family: var(--gs-serif);
    font-size: 1.15rem;
    font-weight: 540;
    color: var(--gs-ink);
    line-height: 1.25;
    margin-bottom: 0.3rem;
}

.gs-graph-panel-fullname {
    font-family: var(--gs-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--gs-text-2);
    line-height: 1.45;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gs-graph-panel-type {
    font-size: 0.85rem;
    color: var(--gs-text-2);
    margin-bottom: 0.55rem;
}

.gs-graph-panel-degrees {
    font-family: var(--gs-mono);
    font-size: 0.76rem;
    color: var(--gs-text-2);
    margin-bottom: 0.8rem;
}

.gs-graph-panel-link {
    font-family: var(--gs-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gs-link);
    text-decoration: none;
    transition: color 0.15s;
}

.gs-graph-panel-link:hover { color: var(--gs-ink); }

.gs-graph-note {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--gs-mono);
    font-size: 0.85rem;
    color: var(--gs-text-2);
    text-align: center;
    max-width: 80%;
}

/* ── Privacy — one readable column ───────────────────────────────────────── */
.gs-privacy {
    max-width: 720px;
    margin: 0 auto;
    padding: 4.5rem 2rem 6rem;
}

.gs-privacy-short {
    background: var(--gs-panel);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 3rem;
}

.gs-privacy-short-head {
    font-family: var(--gs-mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text);
    margin-bottom: 0.9rem;
}

.gs-privacy-promises {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.7rem;
}

.gs-privacy-promises li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--gs-text);
    line-height: 1.55;
}

.gs-privacy-promises li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--gs-text);
}

.gs-privacy-section {
    padding: 1.6rem 0;
    border-top: 1px solid var(--gs-hairline);
}

.gs-privacy-section h2 {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: 1.18rem;
    font-weight: 400;
    color: var(--gs-ink);
    margin-bottom: 0.6rem;
}

.gs-privacy-section p {
    color: var(--gs-text);
    line-height: 1.7;
    margin-bottom: 0.8rem;
}

.gs-privacy-section p:last-child {
    margin-bottom: 0;
}

.gs-privacy-section a {
    color: var(--gs-link);
}

.gs-privacy-updated {
    margin-top: 2rem;
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    color: var(--gs-text-2);
}

/* ── Misalignment scan ───────────────────────────────────────────────────── */
.gs-scan {
    max-width: 760px;
    margin: 0 auto;
    padding: 4.5rem 2rem 6rem;
}

/* The page's own links (How we handle your documents, See an example scan). */
.gs-scan-runs-link {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
}

/* A reference link, not an action: Forest link text, never a filled button. */
.gs-scan-runs-link a {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gs-link);
}
.gs-scan-runs-link a:hover,
.gs-scan-runs-link a:focus-visible { color: var(--gs-selected); }

/* Interface prose, so the sans: mono is for codes and registry marks only. */
.gs-scan-preview-note {
    display: inline-block;
    padding: 0.7rem 1rem;
    margin-bottom: 2.5rem;
    font-family: var(--gs-sans);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--gs-text);
    background: var(--gs-panel);
    border-radius: 10px;
}

.gs-scan-error {
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    color: var(--gs-ink);
    background: var(--gs-alert-tint);
    border: 1px solid var(--gs-alert);
    border-radius: 10px;
}

.gs-scan-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 2rem;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 16px;
}

.gs-scan-label {
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-2);
}

.gs-scan-help {
    font-family: var(--gs-sans);
    font-size: 0.86rem;
    color: var(--gs-text-2);
    margin-top: -0.3rem;
}

.gs-scan-textarea {
    width: 100%;
    padding: 0.9rem 1.1rem;
    font-family: var(--gs-sans);
    font-size: 0.96rem;
    color: var(--gs-ink);
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 10px;
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.15s;
}

.gs-scan-textarea::placeholder { color: var(--gs-text-2); }

.gs-scan-textarea:focus {
    outline: none;
    border-color: var(--gs-selected);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-selected) 14%, transparent);
}

.gs-scan-divider {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0.4rem 0;
    color: var(--gs-text-2);
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gs-scan-divider::before,
.gs-scan-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gs-hairline);
}

.gs-scan-file {
    font-family: var(--gs-sans);
    font-size: 0.9rem;
    color: var(--gs-text);
    padding: 0.6rem 0;
}

/* Scan context — the six optional request-environment fields */
.gs-scan-context {
    border: 1px solid var(--gs-hairline);
    border-radius: 10px;
    padding: 0.9rem 1.1rem 1.1rem;
    margin: 0;
    background: color-mix(in srgb, var(--gs-paper) 45%, transparent);
}
.gs-scan-context legend { padding: 0 0.4rem; }
/* "Which company is this document about?" — above the scan context, same
   frame, so the answer reads as what decides the fields below it. */
.gs-scan-whose {
    border: 1px solid var(--gs-hairline);
    border-radius: 10px;
    padding: 0.9rem 1.1rem 1rem;
    margin: 0 0 1rem;
    background: color-mix(in srgb, var(--gs-paper) 45%, transparent);
}
.gs-scan-whose legend { padding: 0 0.4rem; }
.gs-scan-whose-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.75rem;
    margin: 0.2rem 0 0.5rem;
}
.gs-scan-whose-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.6rem;
    margin: 0 -0.6rem;
    border-radius: 6px;
    font-family: var(--gs-sans);
    font-size: 0.9rem;
    color: var(--gs-text);
    cursor: pointer;
}
/* The chosen option is a selection: a Lake fill, Paper text. The radio
   inside turns Paper so it still shows on the Lake. */
.gs-scan-whose-option:has(input:checked),
.gs-scan-jflag:has(input:checked) { background: var(--gs-selected); color: var(--gs-paper); }
.gs-scan-whose-option:has(input:checked) input,
.gs-scan-jflag:has(input:checked) input { accent-color: var(--gs-paper); }
.gs-scan-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.9rem 1.2rem;
    margin-top: 0.4rem;
}
.gs-scan-field { display: flex; flex-direction: column; gap: 0.3rem; }
.gs-scan-field--wide { grid-column: 1 / -1; }
.gs-scan-field label,
.gs-scan-field-label {
    font-family: var(--gs-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gs-text);
}
.gs-scan-field select,
.gs-scan-field input[type="text"] {
    font-family: var(--gs-sans);
    font-size: 0.9rem;
    color: var(--gs-ink);
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--gs-hairline);
    border-radius: 7px;
    background: var(--gs-paper);
}
.gs-scan-field select[multiple] { padding: 0.3rem; }
/* A field the error above is about: a Chestnut edge (danger), on top of the
   aria-invalid a screen reader announces. Focus still draws Lake over it. */
.gs-scan-form [aria-invalid="true"]:is(textarea, input[type="text"], input[type="url"]):not(:focus) {
    border-color: var(--gs-alert);
    box-shadow: inset 0 0 0 1px var(--gs-alert);
}
.gs-scan-form input[type="file"][aria-invalid="true"] {
    outline: 1px solid var(--gs-alert);
    outline-offset: 3px;
    border-radius: 6px;
}
.gs-scan-field select:focus,
.gs-scan-field input[type="text"]:focus { outline: 2px solid var(--gs-selected); outline-offset: 1px; }
.gs-scan-field-hint { font-family: var(--gs-sans); font-size: 0.75rem; color: var(--gs-text-2); }
.gs-scan-jurisdictions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.15rem 0.6rem;
    padding: 0.6rem;
    border: 1px solid var(--gs-hairline);
    border-radius: 7px;
    background: var(--gs-paper);
}
.gs-scan-jflag {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.3rem;
    border-radius: 6px;
    font-family: var(--gs-sans);
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--gs-ink);
    cursor: pointer;
}
.gs-scan-whose-option:hover,
.gs-scan-jflag:hover { background: color-mix(in srgb, var(--gs-selected) 12%, var(--gs-paper)); }
.gs-scan-jflag input[type="checkbox"] { flex-shrink: 0; }
.gs-scan-flag {
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gs-ink) 12%, transparent);
    object-fit: cover;
}
.gs-scan-radios { display: flex; gap: 1.2rem; padding-top: 0.35rem; font-family: var(--gs-sans); font-size: 0.9rem; color: var(--gs-ink); }
.gs-scan-radios label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; font-size: 0.9rem; }
.gs-scan-results-context {
    margin: 0.6rem 0 0;
    font-family: var(--gs-sans);
    font-size: 0.85rem;
    color: var(--gs-text);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.2rem;
}
.gs-scan-results-context dt { font-weight: 600; flex-basis: 100%; }
.gs-scan-results-context dd { margin: 0; }
.gs-scan-results-context-label { color: var(--gs-text-2); }
.gs-scan-results-context-label::after { content: ":"; }
/* Scope of this scan (ADR-LL-044): the answer's reasoning under its meaning,
   the quoted facts folded away. */
.gs-scan-scope .gs-ledger-badge { white-space: nowrap; }
.gs-scan-scope-reason { display: block; margin-top: 0.3rem; color: var(--gs-text-2); font-size: 0.85em; }
.gs-scan-scope-facts { margin-top: 0.75rem; font-size: 0.9rem; }
.gs-scan-scope-facts summary { cursor: pointer; color: var(--gs-link); font-weight: 600; }
.gs-scan-scope-facts[open] > summary,
.gs-scan-scope-facts summary:hover { color: var(--gs-selected); }
.gs-scan-scope-facts ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.gs-scan-scope-facts li { margin-bottom: 0.35rem; }

.gs-scan-submit {
    align-self: flex-start;
    margin-top: 0.8rem;
}

/* ── Misalignment scan — processing takeover ─────────────────────────────────
   The polled status page while the scan runs on the worker. The dial is deliberately
   number-free: a needle that wanders toward "deep", never a percentage. */

/* Elements the takeover hides carry display rules, so the hidden attribute
   needs teeth. */
[hidden] { display: none !important; }

.gs-scan-processing {
    padding: 2.5rem 0 1rem;
    text-align: center;
    animation: gs-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.gs-processing-eyebrow {
    color: var(--gs-text-2);
    margin-bottom: 1.4rem;
}

.gs-processing-dot { animation: gs-processing-pulse 1.6s ease-in-out infinite; }

@keyframes gs-processing-pulse {
    50% { transform: scale(1.65); opacity: 0.55; }
}

.gs-processing-headline {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--gs-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0.8rem;
}

.gs-processing-body {
    max-width: 46ch;
    margin: 0 auto 2.2rem;
    color: var(--gs-text);
}

.gs-processing-gauge {
    max-width: 300px;
    margin: 0 auto;
}

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

.gs-gauge-track {
    fill: none;
    stroke: var(--gs-hairline);
    stroke-width: 3;
    stroke-linecap: round;
}

.gs-gauge-sweep {
    fill: none;
    stroke: var(--gs-link);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 14 86;
    opacity: 0.85;
    animation: gs-gauge-sweep 3.2s linear infinite;
}

@keyframes gs-gauge-sweep {
    to { stroke-dashoffset: -100; }
}

#gs-gauge-ticks line {
    stroke: var(--gs-text-2);
    stroke-width: 1;
    opacity: 0.45;
}

#gs-gauge-ticks line.gs-gauge-tick-major {
    stroke-width: 1.4;
    opacity: 0.8;
}

.gs-gauge-needle-line {
    stroke: var(--gs-ink);
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* Liveness tremor — CSS on purpose, not JS. The scan now submits via fetch()
   (so JS stays live everywhere), but the compositor-run shake is kept as the
   guaranteed liveness signal: it survives main-thread stalls and any future
   return to a navigating submit (Safari suspends rAF during a pending form
   navigation). Irregular keyframe spacing so the shake breathes instead of
   metronoming. The global prefers-reduced-motion block above neutralizes it. */
.gs-gauge-needle-shake {
    transform-box: view-box;
    transform-origin: 130px 140px;
    animation: gs-needle-shake 1.1s ease-in-out infinite;
}

@keyframes gs-needle-shake {
    0%   { transform: rotate(-2.8deg); }
    18%  { transform: rotate(2.3deg); }
    37%  { transform: rotate(-1.5deg); }
    55%  { transform: rotate(3.1deg); }
    76%  { transform: rotate(-2.1deg); }
    100% { transform: rotate(-2.8deg); }
}

.gs-gauge-hub     { fill: var(--gs-ink); }
.gs-gauge-hub-dot { fill: var(--gs-paper); }

.gs-gauge-scale {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 0.4rem;
    margin-top: 0.4rem;
    font-family: var(--gs-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-2);
}

.gs-gauge-title { color: var(--gs-link); }

.gs-processing-stage {
    margin-top: 1.8rem;
    font-family: var(--gs-mono);
    font-size: 0.9rem;
    color: var(--gs-ink);
    min-height: 1.5em;
}

/* The signature Chestnut squiggle drawing and redrawing itself — the
   misalignment mark being traced. */
.gs-processing-squiggle {
    display: block;
    width: 80px;
    height: 9px;
    margin: 0 auto 0.9rem;
}

.gs-processing-squiggle path {
    fill: none;
    stroke: var(--gs-wood-dark);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 100 100;
    animation: gs-squiggle-draw 3s ease-in-out infinite;
}

@keyframes gs-squiggle-draw {
    0%   { stroke-dashoffset: 100; }
    45%  { stroke-dashoffset: 0; }
    60%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
}

#gs-processing-stage-text { transition: opacity 0.35s ease; }
#gs-processing-stage-text.gs-stage-fading { opacity: 0; }

.gs-processing-caret {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 0.3em;
    background: var(--gs-link);
    vertical-align: text-bottom;
    animation: gs-caret-blink 1.1s steps(1) infinite;
}

@keyframes gs-caret-blink {
    50% { opacity: 0; }
}

.gs-processing-meta {
    margin-top: 1.2rem;
    font-size: 0.8rem;
    color: var(--gs-text-2);
}

#gs-processing-clock {
    font-family: var(--gs-mono);
    font-weight: 500;
    color: var(--gs-text);
}

.gs-processing-meta-sep { margin: 0 0.35rem; }

/* The scan runs on the server: the visitor may leave and come back. */
.gs-processing-leave {
    max-width: 46ch;
    margin: 0.6rem auto 0;
    font-size: 0.9rem;
    color: var(--gs-text);
}

/* ── Misalignment scan — results ──────────────────────────────────────────── */
.gs-scan-results {
    margin-top: 1rem;
    padding-top: 3rem;
    border-top: 1px solid var(--gs-hairline);
}

.gs-scan-results-headline {
    font-family: var(--gs-serif);
    font-optical-sizing: auto;
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
    font-weight: 400;
    color: var(--gs-ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.gs-scan-results-source {
    font-family: var(--gs-mono);
    font-size: 0.78rem;
    color: var(--gs-text-2);
    margin-bottom: 2rem;
}

/* Risk summary — one row per finding above the cards (Tool Prompt v3 §11.3). */
.gs-scan-summary {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 4px 12px 12px 4px;
}

.gs-scan-summary-head {
    margin: 0 0 0.4rem;
    font-family: var(--gs-serif);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--gs-text);
}

/* Read by screen readers, not shown: a column header that has no visible
   title, for instance. */
.gs-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.gs-scan-summary-profile {
    display: block;
    margin: 0 0 0.9rem;
    font-family: var(--gs-sans);
    font-size: 0.9rem;
    color: var(--gs-text);
}

/* A narrow screen scrolls the table itself, never the page. The wrapper is a
   focusable region so a keyboard can scroll it too. */
.gs-scan-summary-scroll { overflow-x: auto; }
.gs-scan-summary-scroll:focus-visible {
    outline: 2px solid var(--gs-selected);
    outline-offset: 2px;
    border-radius: 4px;
}

.gs-scan-summary-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-family: var(--gs-sans);
    font-size: 0.85rem;
    color: var(--gs-text);
}

.gs-scan-summary-table th {
    text-align: left;
    font-family: var(--gs-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    padding: 0 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--gs-hairline);
}

.gs-scan-summary-table td {
    padding: 0.6rem 0.75rem 0.6rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--gs-hairline);
}

.gs-scan-summary-table tr:last-child td { border-bottom: 0; }

/* On a phone or a narrow tablet (the tables need 36rem plus the card's
   padding, about 670px) the Risk summary, the Scope answers and Your scans
   read as one small record per row: the header row is kept for screen readers only, each
   cell is a block, and every cell but the row's first carries its column
   name (data-label), so no column ends up off-screen. */
@media (max-width: 680px) {
    .gs-scan-summary-table--stack { min-width: 0; }
    .gs-scan-summary-table--stack thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .gs-scan-summary-table--stack tr {
        display: block;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--gs-hairline);
    }
    .gs-scan-summary-table--stack tr:first-child { padding-top: 0.25rem; }
    .gs-scan-summary-table--stack tr:last-child { border-bottom: 0; padding-bottom: 0; }
    .gs-scan-summary-table--stack td {
        display: block;
        padding: 0.35rem 0 0;
        border-bottom: 0;
    }
    .gs-scan-summary-table--stack td:first-child { padding-top: 0; }
    .gs-scan-summary-table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.1rem;
        font-family: var(--gs-mono);
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--gs-text-2);
    }
    .gs-scan-runs-table.gs-scan-summary-table--stack td:last-child { padding-top: 0.6rem; }
}

.gs-scan-summary-number {
    font-family: var(--gs-mono);
    font-weight: 600;
    color: var(--gs-forest);
    margin-right: 0.2rem;
    /* A jump link on its own: a finger-sized target without moving the text. */
    display: inline-block;
    padding: 0.35rem 0.3rem;
    margin: -0.35rem -0.1rem -0.35rem -0.3rem;
}
.gs-scan-summary-reviewed { color: var(--gs-selected); font-weight: 600; }
.gs-scan-summary-head:focus { outline: none; }

/* ── Triage bar: filter by severity or review state, count what is done ── */
.gs-scan-triage { margin: 0 0 1.5rem; }
.gs-scan-triage[hidden] { display: none; }
.gs-scan-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.gs-scan-filter {
    min-height: 2.25rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--gs-hairline);
    border-radius: 999px;
    background: var(--gs-paper);
    color: var(--gs-text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}
.gs-scan-filter-count { font-family: var(--gs-mono); font-variant-numeric: tabular-nums; margin-left: 0.25rem; }
.gs-scan-filter:hover { border-color: var(--gs-selected); color: var(--gs-selected); }
/* The chosen filter is a selection: Lake. */
.gs-scan-filter[aria-pressed="true"] {
    background: var(--gs-selected);
    border-color: var(--gs-selected);
    color: var(--gs-paper);
}
@media (pointer: coarse) { .gs-scan-filter { min-height: 44px; } }
.gs-scan-triage-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--gs-text);
}
.gs-scan-triage-note { color: var(--gs-text-2); }

/* The example scan's banner (a Sky panel, Ink text). */
.gs-scan-example-note { margin: 0 0 1.25rem; }

/* A scan that left part of the document unread: a warning, so Chestnut. */
.gs-scan-coverage-note {
    padding: 0.7rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    color: var(--gs-text);
    background: var(--gs-alert-tint);
    border: 1px solid var(--gs-alert);
    border-radius: 10px;
}

/* The scope inside About this scan: a sub-heading, not a second card. */
.gs-scan-scope { margin-top: 1.25rem; }
.gs-scan-summary-subhead {
    margin: 0 0 0.4rem;
    font-family: var(--gs-serif);
    font-size: 0.98rem;
    font-weight: 400;
    color: var(--gs-text);
}

/* ISO 31022 Table B.1 as the annex draws it — one register, one row per
   finding, the nine numbered columns side by side. Ten columns of prose
   never fit a phone or a laptop, so the table scrolls inside its own box
   with the Finding column pinned on the left. */
.gs-scan-register {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 4px 12px 12px 4px;
}

/* Open, it breaks out of the results column: ten columns need the viewport,
   not the reading measure (16px gutter each side on a phone). Folded, it
   stays in the column like the summary above it. */
.gs-scan-register:has(.gs-scan-register-fold[open]) {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(96rem, calc(100vw - 2rem));
    box-sizing: border-box;
}

/* The heading is the toggle: + folded, − open, Lake on hover — the same
   mark as the opinion columns' unfold. */
.gs-scan-register-toggle {
    display: block;
    list-style: none;
    cursor: pointer;
}
.gs-scan-register-toggle::-webkit-details-marker { display: none; }
.gs-scan-register-toggle .gs-scan-summary-head::after {
    content: " +";
    font-family: var(--gs-mono);
    color: var(--gs-forest);
}
.gs-scan-register-fold[open] .gs-scan-register-toggle .gs-scan-summary-head::after { content: " \2212"; }
.gs-scan-register-toggle:hover .gs-scan-summary-head,
.gs-scan-register-toggle:hover .gs-scan-summary-head::after { color: var(--gs-selected); }
.gs-scan-register-toggle:focus-visible {
    outline: 2px solid var(--gs-selected);
    outline-offset: 4px;
    border-radius: 4px;
}
.gs-scan-register-fold:not([open]) .gs-scan-summary-profile { margin-bottom: 0; }

.gs-scan-register-scroll {
    overflow-x: auto;
    border: 1px solid var(--gs-hairline);
    border-radius: 4px;
    background: var(--gs-paper);
}

.gs-scan-register-scroll:focus-visible {
    outline: 2px solid var(--gs-selected);
    outline-offset: 2px;
}

/* The register's scrollbar mirrored above the table (the page's script
   sizes it to the table and keeps both in step). The side borders match
   the scroller's, so both scroll the same distance. */
.gs-scan-register-rail {
    overflow-x: auto;
    overflow-y: hidden;
    border: solid transparent;
    border-width: 0 1px;
    margin-bottom: 0.4rem;
}
.gs-scan-register-rail > div { height: 1px; }

/* Both scrollbars in Forest, always drawn: the ::-webkit-scrollbar rules
   (Chrome, Safari, Edge) also turn off macOS's hide-until-scrolling
   overlay bars; Firefox takes scrollbar-color. Hover is Lake. */
.gs-scan-register-scroll::-webkit-scrollbar,
.gs-scan-register-rail::-webkit-scrollbar { height: 12px; }
.gs-scan-register-scroll::-webkit-scrollbar-track,
.gs-scan-register-rail::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--gs-forest) 10%, var(--gs-paper));
    border-radius: 6px;
}
.gs-scan-register-scroll::-webkit-scrollbar-thumb,
.gs-scan-register-rail::-webkit-scrollbar-thumb {
    background: var(--gs-forest);
    border-radius: 6px;
    border: 2px solid color-mix(in srgb, var(--gs-forest) 10%, var(--gs-paper));
}
.gs-scan-register-scroll::-webkit-scrollbar-thumb:hover,
.gs-scan-register-rail::-webkit-scrollbar-thumb:hover { background: var(--gs-selected); }
@supports not selector(::-webkit-scrollbar) {
    .gs-scan-register-scroll,
    .gs-scan-register-rail {
        scrollbar-color: var(--gs-forest) color-mix(in srgb, var(--gs-forest) 10%, var(--gs-paper));
    }
}

.gs-scan-register-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 110rem;
    width: 100%;
    font-family: var(--gs-sans);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--gs-text);
}

.gs-scan-register-table thead th {
    text-align: left;
    vertical-align: bottom;
    font-family: var(--gs-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    padding: 0.7rem 0.75rem 0.55rem;
    border-bottom: 1px solid var(--gs-hairline);
    background: var(--gs-bg-raised);
}

.gs-scan-register-num {
    color: var(--gs-forest);
    font-weight: 600;
}

.gs-scan-register-table td,
.gs-scan-register-table tbody th {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--gs-hairline);
    border-left: 1px dashed var(--gs-hairline);
    font-weight: 400;
}

.gs-scan-register-table tbody tr:last-child td,
.gs-scan-register-table tbody tr:last-child th { border-bottom: 0; }

.gs-scan-register-table td .gs-ledger-badge {
    display: inline-block;
    border-radius: 6px;
    margin: 0.2rem 0.25rem 0 0;
}

/* A law's name is read, not stamped: in a finding and in the register the
   chips holding citations are sentence-case sans, not tracked uppercase
   mono (a 70-character name in 11px capitals was the page's worst read). */
.gs-finding-citations .gs-ledger-badge,
.gs-risk-register-value .gs-ledger-badge,
.gs-scan-register-table td .gs-ledger-badge {
    font-family: var(--gs-sans);
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 6px;
}

.gs-scan-register-table .gs-risk-register-text { display: block; }

/* Column (3)'s description of the risk the claim creates, under its quote. */
.gs-risk-register-note { margin-top: 0.3rem; }

/* Pinned first column — which finding the row is. */
.gs-scan-register-finding {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 13rem;
    min-width: 13rem;
    background: var(--gs-paper);
    border-right: 1px solid var(--gs-hairline);
}

.gs-scan-register-table thead .gs-scan-register-finding {
    z-index: 2;
    background: var(--gs-bg-raised);
}

.gs-scan-register-table tbody th.gs-scan-register-finding {
    border-left: 0;
}

.gs-scan-register-finding a {
    font-family: var(--gs-mono);
    font-weight: 600;
    color: var(--gs-forest);
    margin-right: 0.35rem;
}

.gs-scan-register-headline {
    display: block;
    margin-top: 0.35rem;
    font-weight: 500;
}

/* Prose columns (the claim, the measure) get room; chip columns stay tight. */
.gs-scan-register-col-event,
.gs-scan-register-col-action { min-width: 17rem; }
.gs-scan-register-col-activity,
.gs-scan-register-col-laws,
.gs-scan-register-col-past_cases { min-width: 12rem; }
.gs-scan-register-col-category { min-width: 10rem; }
.gs-scan-register-col-consequences,
.gs-scan-register-col-internal_opinion,
.gs-scan-register-col-external_opinion { min-width: 8rem; }

/* The opinion columns (7)–(8) fold to their number while no finding fills
   them (iso31022_display._FOLD_WHEN_EMPTY); the number opens the column. */
.gs-scan-register-table th.is-folded,
.gs-scan-register-table td.is-folded { min-width: 0; width: 3.5rem; }
.gs-scan-register-table th.is-folded .gs-scan-register-col-label,
.gs-scan-register-table td.is-folded > * { display: none; }

.gs-scan-register-unfold {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.gs-scan-register-unfold .gs-scan-register-num { white-space: nowrap; }
.gs-scan-register-unfold .gs-scan-register-num::after { content: " +"; }
.gs-scan-register-unfold[aria-expanded="true"] .gs-scan-register-num::after { content: " \2212"; }
.gs-scan-register-unfold:hover .gs-scan-register-num,
.gs-scan-register-unfold[aria-expanded="true"] .gs-scan-register-num { color: var(--gs-selected); }

@media (max-width: 560px) {
    .gs-scan-register { padding: 1rem 0.75rem; }
    .gs-scan-register-finding { width: 8.5rem; min-width: 8.5rem; }
}

.gs-finding-number {
    font-family: var(--gs-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gs-text-2);
}

.gs-finding-card:target {
    outline: 2px solid var(--gs-selected);
    outline-offset: 3px;
}

.gs-scan-findings {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gs-finding-card {
    /* Lands below the sticky header, not under it. */
    scroll-margin-top: 5.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 4px 12px 12px 4px;
}

/* Chestnut is risk: a CRITICAL or HIGH card carries a Chestnut border all
   round (never a side stripe); the rest keep the hairline. */
.gs-finding-card--critical,
.gs-finding-card--high { border-color: color-mix(in srgb, var(--gs-alert) 40%, transparent); }

.gs-finding-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Reviewed and Back to summary, at the head's far end. */
.gs-finding-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}
.gs-finding-done {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--gs-text);
}
.gs-finding-done[hidden] { display: none; }
.gs-finding-done input { accent-color: var(--gs-selected); width: 1rem; height: 1rem; }
.gs-finding-top { color: var(--gs-link); }
.gs-finding-top:hover, .gs-finding-top:focus-visible { color: var(--gs-selected); }

/* A finding marked reviewed steps back; its mark stays Lake (a selection). */
.gs-finding-card.is-reviewed .gs-finding-quote,
.gs-finding-card.is-reviewed .gs-finding-headline,
.gs-finding-card.is-reviewed .gs-finding-comment { color: var(--gs-text-2); }
.gs-finding-card.is-reviewed .gs-finding-done { color: var(--gs-selected); font-weight: 600; }

@media (pointer: coarse) {
    .gs-finding-done, .gs-finding-top { min-height: 44px; display: inline-flex; align-items: center; }
}

/* CRITICAL: a per se prohibition established (ADR-LL-039) — Paper on
   Chestnut like HIGH, set apart by an Ink outline. */
.gs-finding-severity-critical {
    color: var(--gs-paper);
    background: var(--gs-alert);
    box-shadow: 0 0 0 2px var(--gs-text);
}

.gs-finding-severity-high {
    color: var(--gs-paper);
    background: var(--gs-alert);
}

.gs-finding-severity-medium {
    color: var(--gs-ink);
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
}

.gs-finding-severity-low {
    color: var(--gs-text-2);
    background: transparent;
    border: 1px solid var(--gs-hairline);
}

.gs-finding-category {
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--gs-text-2);
}

.gs-finding-quote {
    font-family: var(--gs-serif);
    font-style: italic;
    font-size: 0.98rem;
    font-weight: 400;
    color: var(--gs-ink);
    line-height: 1.5;
    margin-bottom: 0.9rem;
    padding-left: 1rem;
    border-left: 2px solid var(--gs-hairline);
}

.gs-finding-headline {
    font-family: inherit;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--gs-ink);
    margin-bottom: 0.5rem;
}

.gs-finding-comment {
    font-size: 0.9rem;
    color: var(--gs-text);
    line-height: 1.75;
}

.gs-finding-citations {
    margin-top: 1rem;
    font-family: var(--gs-sans);
    font-size: 0.85rem;
    color: var(--gs-text-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* ISO 31022:2020 Annex C/D analysis on a finding card — the two grades and
   the 1-25 rating, then every criterion with its grade or an explicit "not
   established". Paper-on-white sub-panel: no amber anywhere (that stays the
   misalignment mark), verdigris only on the rating, which is the number a
   reader acts on. */
.gs-finding-risk {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--gs-hairline);
}

.gs-finding-risk-head {
    font-family: var(--gs-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    margin-bottom: 0.7rem;
}

.gs-risk-grades {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gs-risk-grade {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 6px;
}

.gs-risk-grade-label {
    font-size: 0.78rem;
    color: var(--gs-text);
}

.gs-risk-grade-value {
    font-family: var(--gs-mono);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--gs-ink);
}

.gs-risk-grade--rating {
    background: var(--gs-paper);
    border-color: var(--gs-link);
}

.gs-risk-grade--rating .gs-risk-grade-value {
    color: var(--gs-link);
}

.gs-risk-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem 2rem;
}

.gs-risk-table dt {
    font-family: var(--gs-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--gs-hairline);
    margin-bottom: 0.35rem;
}

.gs-risk-table dd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.18rem 0;
}

.gs-risk-row-label {
    font-size: 0.82rem;
    color: var(--gs-text);
}

.gs-risk-row-grade {
    font-family: var(--gs-mono);
    font-size: 0.76rem;
    color: var(--gs-ink);
    white-space: nowrap;
}

.gs-risk-row-grade--unknown {
    color: var(--gs-text-2);
    font-style: italic;
}

/* ISO 31022 Table B.1 — the finding's legal-risk register. Nine rows,
   heading on the left, prose + chips on the right; a column the scan
   cannot fill reads "not established" in the same muted italic as an
   unestablished grade. */
.gs-risk-register {
    margin: 0.5rem 0 1rem;
}

/* A card's register row is folded: its nine columns restate the finding. */
.gs-risk-register-fold { margin: 0 0 1rem; }
.gs-risk-register-toggle {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gs-link);
}
.gs-risk-register-fold[open] > .gs-risk-register-toggle,
.gs-risk-register-toggle:hover { color: var(--gs-selected); }
@media (pointer: coarse) {
    .gs-risk-register-toggle { min-height: 44px; display: flex; align-items: center; }
}

.gs-risk-register dt {
    font-family: var(--gs-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--gs-hairline);
    margin-bottom: 0.35rem;
}

.gs-risk-register dd {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.25rem 1rem;
    align-items: baseline;
    margin: 0;
    padding: 0.28rem 0;
    border-bottom: 1px dashed var(--gs-hairline);
}

.gs-risk-register dd:last-child {
    border-bottom: 0;
}

/* An empty opinion row (7)–(8) on the card: closed, opens on its label. */
.gs-risk-register dd.gs-risk-register-folded { display: block; }
.gs-risk-register-folded summary { cursor: pointer; }
.gs-risk-register-folded summary:hover,
.gs-risk-register-folded details[open] > summary { color: var(--gs-selected); }
.gs-risk-register-folded details[open] .gs-risk-register-value { margin-top: 0.25rem; }

.gs-risk-register-label {
    font-size: 0.82rem;
    color: var(--gs-text);
}

.gs-risk-register-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.84rem;
    color: var(--gs-ink);
    line-height: 1.55;
}

.gs-risk-register-text {
    flex-basis: 100%;
}

@media (max-width: 560px) {
    .gs-risk-register dd {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.gs-risk-step {
    margin-top: 1rem;
    font-size: 0.86rem;
    color: var(--gs-text);
}

/* Column (9)'s concrete steps under Recommended action: reading prose. */
.gs-risk-step-detail {
    margin-top: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.gs-risk-step-label {
    font-family: var(--gs-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-text-2);
    margin-right: 0.5rem;
}

.gs-scan-results-risk {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}

.gs-scan-results-risk-peak {
    font-family: var(--gs-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gs-link);
}

.gs-scan-results-risk-note {
    font-size: 0.84rem;
    color: var(--gs-text-2);
}

.gs-scan-disclaimer {
    margin-top: 2rem;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--gs-text-2);
}

.gs-scan-export-form {
    margin: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.gs-scan-export-btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    background: var(--gs-action);
    color: var(--gs-paper);
    border: 0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.gs-scan-export-btn:hover,
.gs-scan-export-btn:focus-visible { background: var(--gs-selected); }
.gs-scan-export-btn--secondary {
    background: transparent;
    color: var(--gs-action);
    box-shadow: inset 0 0 0 1px var(--gs-action);
}
.gs-scan-export-btn--secondary:hover,
.gs-scan-export-btn--secondary:focus-visible {
    background: var(--gs-selected);
    color: var(--gs-paper);
    box-shadow: inset 0 0 0 1px var(--gs-selected);
}

/* Open on a row of My scans: the same Forest action, sized to sit in a table cell. */
.gs-scan-runs-open {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: var(--gs-action);
    color: var(--gs-paper);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.gs-scan-runs-table td:last-child { white-space: nowrap; }
.gs-scan-runs-open:hover,
.gs-scan-runs-open:focus-visible { background: var(--gs-selected); color: var(--gs-paper); }

/* The browser's own file-picker button is an action too. */
input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: 6px;
    background: var(--gs-action);
    color: var(--gs-paper);
    font-family: var(--gs-sans);
    font-weight: 600;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--gs-selected); }

.gs-export-card {
    margin-top: 2rem;
    padding: 1.75rem;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 10px;
    max-width: 32rem;
}

.gs-export-meta {
    font-size: 0.94rem;
    color: var(--gs-text-2);
}

.gs-export-error { color: var(--gs-alert); }

.gs-export-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gs-link);
    margin-right: 0.5rem;
    animation: gs-export-pulse 1.3s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes gs-export-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.gs-export-back {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--gs-link);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .gs-header-inner { padding: 0 1.25rem; }
    .gs-hero-inner   { padding: 4rem 1.25rem 3.75rem; }
    .gs-hero-swan    { width: 380px; right: -110px; bottom: -80px; opacity: 0.08; }
    .gs-pillars      { padding: 3.25rem 1.25rem 4rem; }
    .gs-ledger       { padding: 3rem 1.25rem 4rem; }
    .gs-scan         { padding: 3rem 1.25rem 4rem; }
    .gs-scan-form    { padding: 1.25rem; }
    .gs-document     { padding: 2.5rem 1.25rem 4rem; }
    .gs-graph        { padding: 2.5rem 1.25rem 3.5rem; }

    .gs-graph-stage { height: 65vh; min-height: 380px; }
    .gs-graph-stats { margin-left: 0; flex-basis: 100%; }
    .gs-footer-inner { flex-direction: column; gap: 0.5rem; text-align: center; align-items: center; }

    .gs-ledger-item-link { flex-wrap: wrap; row-gap: 0.4rem; }
    .gs-ledger-item-title { flex-basis: calc(100% - 2.6ch - 1.25rem); }
    .gs-ledger-item-meta { white-space: normal; flex-wrap: wrap; margin-left: calc(2.6ch + 1.25rem); }

    .gs-ledger-search { flex-direction: column; }
    .gs-ledger-search-input { max-width: none; }
}

/* ── Your settings (/settings/) ───────────────────────────────────────────── */
.gs-settings-form,
.gs-settings .gs-settings-saved,
.gs-settings .gs-scan-error { max-width: 40rem; box-sizing: border-box; }
.gs-settings-form { gap: 1.4rem; }
/* What we hold on the person and their company — read-only cards above the
   form, same frame as the form card. */
.gs-settings-card,
.gs-settings-form-head { max-width: 40rem; box-sizing: border-box; }
.gs-settings-card {
    padding: 1.4rem 2rem 1.2rem;
    margin-bottom: 1.25rem;
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 16px;
}
.gs-settings-card h2 { margin: 0 0 0.8rem; }
.gs-settings-subhead {
    margin: 1.2rem 0 0.6rem;
    font-family: var(--gs-sans);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--gs-text);
}
.gs-settings-facts {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.45rem 1.25rem;
    margin: 0;
    font-size: 0.9rem;
}
.gs-settings-facts dt { color: var(--gs-text-2); }
.gs-settings-facts dd { margin: 0; color: var(--gs-ink); overflow-wrap: anywhere; }
.gs-settings-note { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--gs-text-2); }
.gs-settings-note a { color: var(--gs-link); }
.gs-settings-form-head {
    margin: 2.2rem 0 0;
    font-family: var(--gs-serif);
    font-size: 1.22rem;
    font-weight: 400;
    color: var(--gs-ink);
}
.gs-settings-form-head + .gs-settings-note { margin: 0.35rem 0 1.2rem; max-width: 40rem; }
.gs-settings-form select { max-width: 26rem; }
/* Same label style for both fields (.gs-scan-field label would make the
   time zone's a sans-serif one). */
.gs-settings-form .gs-scan-field label.gs-scan-label {
    font-family: var(--gs-mono);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--gs-text-2);
}
.gs-settings-formats {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    border: none;
}
.gs-settings-formats legend { padding: 0; margin-bottom: 0.4rem; }
.gs-settings-example {
    font-family: var(--gs-mono);
    font-size: 0.86rem;
    min-width: 8.5rem;
    color: var(--gs-ink);
}
.gs-settings-format-name { font-size: 0.82rem; color: var(--gs-text-2); }
/* The chosen format sits on the Lake fill: its example and name take the
   option's Paper text — Ink and Slate on Lake are unreadable. */
.gs-scan-whose-option:has(input:checked) .gs-settings-example,
.gs-scan-whose-option:has(input:checked) .gs-settings-format-name { color: inherit; }
.gs-settings-now { margin: 0; font-size: 0.86rem; color: var(--gs-text-2); }
.gs-settings-saved {
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    color: var(--gs-text);
    background: var(--gs-panel);
    border-radius: 10px;
}

@media (max-width: 720px) {
    .gs-settings-card { padding: 1.1rem 1.25rem; }
    .gs-settings-facts { grid-template-columns: 1fr; gap: 0.1rem; }
    .gs-settings-facts dd { margin-bottom: 0.5rem; }
}

/* ── Sign-in screen ───────────────────────────────────────────────────────── */
/* Same column and card as the scan page (.gs-scan / .gs-scan-form) so signing
   in reads as the first step of the scan, not a detour into a different app. */
.gs-auth {
    max-width: 480px;
    margin: 0 auto;
    padding: 4.5rem 2rem 6rem;
}

.gs-auth-form {
    margin-top: 2rem;
    gap: 0.45rem;
}

/* Django's AuthenticationForm renders bare widgets — style by type rather than
   restyling the form class, so a future password-reset form inherits it too. */
.gs-auth-form input[type="text"],
.gs-auth-form input[type="password"] {
    width: 100%;
    padding: 0.7rem 0.95rem;
    margin-bottom: 0.9rem;
    font-family: var(--gs-sans);
    font-size: 0.96rem;
    color: var(--gs-ink);
    background: var(--gs-paper);
    border: 1px solid var(--gs-hairline);
    border-radius: 10px;
    transition: border-color 0.15s;
}

.gs-auth-form input[type="text"]:focus,
.gs-auth-form input[type="password"]:focus {
    outline: none;
    border-color: var(--gs-selected);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-selected) 14%, transparent);
}

.gs-auth-note {
    margin-top: 1.5rem;
    font-family: var(--gs-sans);
    font-size: 0.86rem;
    color: var(--gs-text-2);
}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.gs-not-found {
    max-width: 560px;
    margin: 0 auto;
    padding: 4.5rem 1.25rem 6rem;
    text-align: center;
}

.gs-not-found-code {
    font-family: var(--gs-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--gs-link);
    margin-bottom: 0.9rem;
}

.gs-not-found-title {
    font-family: var(--gs-serif);
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
    font-weight: 400;
    color: var(--gs-ink);
    margin-bottom: 0.75rem;
}

.gs-not-found-body {
    font-family: var(--gs-sans);
    font-size: 0.98rem;
    color: var(--gs-text-2);
    margin-bottom: 2rem;
}

/* ADR-LL-056 — the Green Swans legal review: a Sky info panel (Ink text) above
   the findings, and the same panel on each finding card the expert wrote on. */
.gs-legal-review {
    background: var(--gs-panel);
    color: var(--gs-text);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem;
}
.gs-finding-legal-review {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    border-radius: 10px;
}
.gs-legal-review-head {
    font-family: var(--gs-mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text);
    margin: 0 0 0.6rem;
}
.gs-legal-review-text {
    font-family: var(--gs-serif);
    font-size: 0.9rem;
    line-height: 1.75;
}
.gs-legal-review-text p { margin: 0 0 0.6rem; }
.gs-legal-review-signature {
    font-size: 0.8rem;
    font-style: italic;
    margin: 0.4rem 0 0;
}
/* The card's column (8) points at its review block — a text link, Forest. */
a.gs-risk-register-text { color: var(--gs-link); }
a.gs-risk-register-text:hover,
a.gs-risk-register-text:focus-visible { color: var(--gs-selected); }
.gs-scan-runs-reviewed {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    font-family: var(--gs-mono);
    font-size: 0.7rem;
    background: var(--gs-panel);
    color: var(--gs-text);
    border-radius: 999px;
}