/* PSDA "Getting Started" landing page — first-touch empty state (2026-07-13).
   Ported from the validated React prototype (Max-Scope-Wonderland/!!!!PSDA-GettingStarted)
   into the real stack: LIGHT MODE ONLY (no dark theme toggle), Roboto inherited from the
   app, brand blue via var(--primary-color, #1565C0) (Office-theme-driven at runtime), no
   hard-coded #3b82f6/#2563eb. All text colors ≥ WCAG AA 4.5:1 on white.
   Everything is scoped under .gs-page so it can't leak into the dashboard shell. */

/* ── Page title ────────────────────────────────────────────────────────────
   [2026-07-29 item 6] The one rule in this file NOT scoped under .gs-page — the <h1> is rendered
   above that block (see Start.cshtml). The gs- prefix keeps it from leaking.
   FIXED rem, not clamp(): this is product UI, viewed at consistent DPI, and a fluid heading that
   resizes with the window is a brand-surface move. 2.25rem instead of Bootstrap's 2.5rem h1 buys
   ~60px of headroom so this 33-character title (~594px at 36px Roboto) clears the md container
   (720px) on one line with margin for font-metric variance. Wraps only below the sm breakpoint,
   where two lines is correct. `balance` evens the two lines out when it does. */
.gs-page-title {
    font-size: 2.25rem;
    text-wrap: balance;
}

.gs-page {
    /* Light-only tokens, aligned to the PSDA dashboard palette (psda-onepage.css):
       brand blue = --primary-color, neutral text/borders = #6c757d/#dee2e6, hover tint #f4f8fd. */
    --gs-bg: #f8f9fa;
    --gs-surface: #ffffff;
    --gs-border: #dee2e6;
    --gs-text: #212529;
    /* [2026-07-29 critique P1] Was #6c757d — 4.69:1 on white but only 4.45:1 on the --gs-bg tint,
       which FAILS WCAG AA for normal text. Once the field labels moved onto shaded input panels
       (item 4) every one of them was under the line. #5c636a is 6.09:1 on white and 5.78:1 on the
       tint, so every secondary-text surface on this page passes with room to spare. */
    --gs-text-secondary: #5c636a;    /* 6.09:1 on white · 5.78:1 on --gs-bg */
    --gs-accent: var(--primary-color, #1565C0);   /* 5.7:1 on white — AA for text */
    --gs-accent-tint: #f4f8fd;
    --gs-success-bg: #e8f5e9;
    --gs-success: #1b5e20;           /* 7.4:1 */
    --gs-error-bg: #fdecea;
    --gs-error: #b71c1c;             /* 6.6:1 */

    min-height: 70vh;
    display: flex;
    justify-content: center;
    /* [2026-07-29 item 6] Top padding trimmed — the page <h1> now sits above this block.
       [2026-07-30] Trimmed again top and bottom: page furniture, not content, and worth ~24px against
       the page's vertical overrun. */
    padding: 0.5rem 1.5rem 2rem;
    color: var(--gs-text);
}

.gs-container {
    width: 100%;
    max-width: 680px;
}

/* ── In-card intro ─────────────────────────────────────────────────────────
   [2026-07-29 items 2+5+6] The hero is gone: the page title is now a plain Bootstrap <h1>
   rendered by Start.cshtml OUTSIDE .gs-page (matching /Waterfall's h1 position + format), and
   the pitch lives at the top of the input card. .gs-page's own top padding shrinks so the card
   doesn't float away from that heading. */
.gs-card-intro { margin-bottom: 1rem; }

/* [2026-07-30] Now the first item on the shared intro row rather than its own line. Stepped down from
   1.35rem so the sentence, the tagline and the sample link fit one line in the 616px card. */
.gs-card-lede {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gs-text);
    margin: 0;
}

/* Tagline + sample-deal link share one line; wraps to two on narrow viewports.
   [2026-07-29 critique P2] Sits directly AFTER the tagline (was justify-content: space-between,
   which threw it to the far edge of a 616px row and made the page's only teaching affordance read
   as a peripheral utility). Adjacent to the sentence it follows, it reads as an invitation. */
.gs-card-tagrow {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gs-card-tagline {
    font-size: 0.95rem;
    color: var(--gs-text-secondary);
    margin: 0;
}

.gs-sample-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gs-accent);
    cursor: pointer;
}

.gs-sample-cta:hover { text-decoration: underline; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.gs-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    /* [2026-07-30] 2rem → 1.5rem: card furniture, ~16px back, and it tightens the same gap item 7 was
       about (card top → first section header). */
    padding: 1.5rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
}

/* ── Import zone ───────────────────────────────────────────────────────── */
.gs-import-zone {
    /* Now a container for the whole cash-flow entry (drop target + paste/type/growth), so a touch
       more room than the old single-row drop strip. */
    padding: 1rem 1.25rem 0.85rem;
    border: 1.5px dashed var(--gs-border);
    border-radius: 10px;
    background: var(--gs-bg);
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* The divider inside the drop container gets a bit less vertical space than the standalone one.
   [2026-07-30] 1.25rem → 0.85rem. This was the cheapest ~16px left in the cash-flow block: the
   format-help line above it carries item 12's "how to export" / "get it" links, so THAT stays. */
.gs-import-zone .gs-divider { margin: 0.85rem 0; }

.gs-import-zone.gs-import-zone-active {
    border-color: var(--gs-accent);
    background: var(--gs-accent-tint);
}

.gs-import-zone-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.gs-import-zone-icon { color: var(--gs-text-secondary); flex-shrink: 0; }

/* The upload icon is a real button — clicking it opens the file picker (like Browse). */
.gs-import-zone-iconbtn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.gs-import-zone-iconbtn:hover .gs-import-zone-icon { color: var(--gs-accent); }

.gs-import-zone-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gs-text);
    flex: 1;
    margin: 0;
}

.gs-import-zone-formats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--gs-text-secondary);
    margin: 0.5rem 0 0 1.65rem;
}

.gs-import-zone-sep { color: var(--gs-border); }

.gs-import-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--gs-success-bg);
    color: var(--gs-success);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    text-align: left;
}

.gs-import-error {
    background: var(--gs-error-bg);
    color: var(--gs-error);
    border-radius: 8px;
    padding: 0.6rem 0.875rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    text-align: left;
}

/* ── Links / buttons ───────────────────────────────────────────────────── */
.gs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gs-accent);
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
}

.gs-link:hover { text-decoration: underline; }
.gs-link-inline { text-decoration: underline; text-underline-offset: 2px; }

/* [2026-07-29 item 12] "how to export" / "get it" — italicized so the two how-to asides read as
   secondary to the format names they follow. */
.gs-link-em { font-style: italic; }

/* ── Divider ───────────────────────────────────────────────────────────── */
.gs-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0;
    color: var(--gs-text-secondary);
    font-size: 0.8rem;
}

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

/* ── Section labels + fields ─────────────────────────────────────────────
   [2026-07-30] 1.5rem → 1rem, paired with the same change on .gs-terms-section so the spacing stays
   EVEN above and below each separator rule (item 9) — there is just less of it. */
.gs-field { margin: 1rem 0; }

/* [2026-07-29 item 7] Deal Terms follows the in-card intro directly — no stacked 1.5rem margin
   on top of the intro's own bottom margin. (Adjacent-sibling, NOT :first-of-type: the intro is
   also a <div>, so :first-of-type would match nothing.) */
.gs-card > .gs-card-intro + .gs-field { margin-top: 0; }

/* [2026-07-29 critique P1] These are real <h2>s now (they were <div>s, leaving the page with no
   document outline below the h1 and the shaded panels grouping visually only). Bootstrap's h2
   defaults are overridden here — margin-top explicitly, since .gs-field/.gs-terms-section own the
   vertical rhythm. */
.gs-section-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gs-text-secondary);
    margin-top: 0;
    /* [2026-07-29 item 7] Each label hugs its panel (was 1rem). */
    margin-bottom: 0.5rem;
}

/* [2026-07-30] Header row: label on the left, an optional section-level action right-justified against
   it. Carries the label's bottom margin so the h2 and the action share one baseline with no extra gap
   below the button. */
.gs-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.gs-section-head .gs-section-label { margin-bottom: 0; }

/* [2026-07-29 item 8] .gs-section-note is gone with the Debt "prepopulated…" note it styled
   (removed by request 2026-07-30). Nothing else used it. */

/* [2026-07-29 item 4] Shaded input panel — the same fill as .gs-import-zone, so each input group
   reads as one block.
   [2026-07-29 critique P2] NO border. Fill alone is enough to group, and a bordered rounded panel
   inside a bordered rounded shadowed .gs-card is card-in-card. Dropping the border also gives the
   drop zone's dashed border its meaning back: it's now the only outlined box in the card, so the
   outline once again says "you can drop a file here". */
.gs-input-panel {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: var(--gs-bg);
}

/* [2026-07-29 item 9] Equal air on both sides of each separator rule (margin above == padding
   below). Was 2.5rem above / 1.5rem below. .gs-field's 1.5rem bottom margin collapses into this,
   so one change evens out the Deal Terms→rule gap AND the Debt→rule gap. */
.gs-terms-section {
    /* [2026-07-30] 1.5rem → 1rem, matched to .gs-field's margin so item 9's symmetry holds: 1rem of air
       above the rule (collapsed margins) and 1rem below it (padding). */
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gs-border);
}

.gs-section-opt {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gs-text-secondary);
    font-size: 0.7rem;
    margin-left: 0.4rem;
}

.gs-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.gs-input-group { display: flex; flex-direction: column; gap: 0.5rem; }

.gs-input-label { font-size: 0.875rem; font-weight: 500; color: var(--gs-text-secondary); }

.gs-input {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--gs-border);
    background: var(--gs-surface);
    /* [2026-07-30] Blue values, matching the assumptions tab. The previous comment here claimed the
       blue over there was "the focus highlight, not the value color" — that was wrong: every real
       input on the assumptions surface carries Bootstrap's .text-primary (55+ of them across
       _PurchaseAndSale / _Debts / _LoanCard / _CashFlows / _Reserves), and custom.css overrides
       .text-primary to var(--cre-blue) precisely because, in its own words, blue is "the color the
       app uses to signal user inputs". So blue here is the app-wide convention (blue = you typed it,
       bold black = we calculated it), not decoration.
       Uses --gs-accent rather than a literal so a themed tenant's --primary-color flows through, and
       so it stays the same token the links and the primary button already use. #1565C0 on white is
       5.7:1 — the contrast guard in JsTests/psdaGettingStartedContrast.test.js holds it to AA. */
    color: var(--gs-accent);
    font-size: 0.95rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gs-input::placeholder { color: var(--gs-text-secondary); opacity: 1; }

/* [2026-07-30] Provenance colour on prefilled values: grey while the user has not engaged with the
   field, blue the moment they do (typed in it OR merely clicked into it). Blue keeps its app-wide
   meaning of "this number is yours"; grey says "ours, until you look at it".
   A grey value is REAL — it is used in the calculation and posted with the deal exactly like a typed
   one. Grey marks provenance, never a placeholder (placeholders have their own ::placeholder rule).
   Removed by wireDefaults() on focus/input. Note the class is NOT the same thing as the
   data-gs-default attribute, which tracks whether the VALUE is still ours and must survive a mere
   click — see the long comment in psda-getting-started.js. */
.gs-input-default { color: var(--gs-text-secondary); }

/* "or cap rate" beside the Purchase Price label — the affordance is invisible otherwise. */
.gs-input-label-alt {
    font-weight: 400;
    color: var(--gs-text-secondary);
    font-size: 0.8rem;
}

/* Derived-price readout under Purchase Price when a cap rate was entered. Shows the price the cap
   implies (and the NOI it was priced off) so the user is never guessing what we did with their 7.5%. */
/* [2026-07-30] Spans the whole panel below the input row rather than sitting in Purchase Price's grid
   column: its two messages run ~420-435px and the column is ~190px. */
.gs-derived {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    color: var(--gs-text-secondary);
}
.gs-derived[hidden] { display: none; }
.gs-derived strong { color: var(--gs-text); font-weight: 600; }

.gs-input:focus {
    /* Subtle brand-blue border + faint ring; no stacked outline (see focus-visible note below). */
    outline: none;
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 1px rgba(21, 101, 192, 0.18);
}

/* [2026-07-29 critique P1] Per-field validation. An out-of-range or non-numeric value used to sail
   through the readiness gate and silently become 0 server-side; now the field says so and Continue
   stays shut. Error colour is --gs-error (#b71c1c, 6.6:1) and never the ONLY signal — the message
   text carries the meaning, and aria-invalid + aria-describedby carry it to assistive tech. */
.gs-input-invalid,
.gs-input-invalid:focus {
    border-color: var(--gs-error);
    box-shadow: 0 0 0 1px rgba(183, 28, 28, 0.18);
}

.gs-field-error {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gs-error);
}

/* ── NOI year list ─────────────────────────────────────────────────────── */
.gs-noi-list { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; }

.gs-noi-row { display: flex; align-items: center; gap: 1rem; }

.gs-noi-input-wrapper { position: relative; flex: 1; }

.gs-noi-currency {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    /* [2026-07-30] Blue with the value it prefixes. Unlike the assumptions tab — where the $ is a
       separate grey Bootstrap input-group addon, visually outside the field — this $ is positioned
       INSIDE the input box and reads as the first character of the value, so a grey $ against blue
       digits in one box looks like a rendering fault rather than a deliberate chip. */
    color: var(--gs-accent);
    pointer-events: none;
}

.gs-noi-input-wrapper .gs-input { padding-left: 2rem; }
.gs-noi-input-wrapper.gs-noi-input-wrapper-plain .gs-input { padding-left: 1rem; }
/* [2026-07-30] Cap mode on Purchase Price: the "$" is cleared (it would contradict a rate), so
   reclaim its inset rather than leaving the value floating behind an empty gutter. */
.gs-noi-input-wrapper.gs-unit-hidden .gs-input { padding-left: 1rem; }

.gs-lead-hint { margin: 0 0 0.5rem; }
.gs-row-label { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gs-text-secondary); }

.gs-add-year-group { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* [2026-07-30 polish] Was an inline style="margin-top:0.75rem" in the markup. Purely presentational and
   untouched by JS, unlike the display toggles nearby (which the script drives via .style.display and
   which therefore stay inline on purpose). */
.gs-add-year-group-spaced { margin-top: 0.75rem; }

.gs-add-year-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--gs-accent);
    background: var(--gs-accent-tint);
    cursor: pointer;
}

.gs-add-year-btn:hover { background: #e8f1fb; }

.gs-add-year-or { font-size: 0.8rem; color: var(--gs-text-secondary); }

.gs-hint {
    font-size: 0.8rem;
    color: var(--gs-text-secondary);
    margin-top: 1rem;
}

.gs-status {
    font-size: 0.8rem;
    color: var(--gs-text-secondary);
    margin: 0;
}
/* Only reserve/space the status line once it actually has a message (keeps the container tight). */
.gs-status:not(:empty) { margin-top: 0.5rem; }

.gs-growth-preview { margin-top: 1rem; font-size: 0.85rem; color: var(--gs-text-secondary); }
.gs-growth-preview strong { color: var(--gs-text); font-weight: 600; }

/* ── Post-import "NOI by year" ribbon — matches the dashboard's .psda-op-cf-ribbon so the
   annual cash-flow view reads the same on both surfaces. */
.gs-cf-ribbon {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    align-items: baseline;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    padding: 10px 4px;
    margin: 0 0 1rem;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
.gs-cf-ribbon[hidden] { display: none; }
.gs-cf-ribbon::-webkit-scrollbar { height: 6px; }
.gs-cf-ribbon::-webkit-scrollbar-thumb { background: #ccd2d8; border-radius: 3px; }
.gs-cf-lead {
    padding: 2px 14px 2px 8px;
    border-right: 1px solid #eef0f2;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    white-space: nowrap;
}
.gs-cf-seg {
    display: flex;
    flex-direction: column;
    padding: 2px 14px;
    border-right: 1px solid #eef0f2;
    white-space: nowrap;
}
.gs-cf-seg:last-child { border-right: 0; }
.gs-cf-label { color: #6c757d; font-size: 11px; }
.gs-cf-value { color: #1f2328; font-weight: 600; }
.gs-cf-ribbon-2row { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.gs-cf-ribbon-2row .gs-cf-lead { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid #eef0f2; padding-bottom: 6px; }

.gs-cf-ribbon-bar { display: flex; justify-content: flex-end; margin: -0.25rem 0 0.75rem; }
.gs-cf-ribbon-bar[hidden] { display: none; }

/* ── Continue ──────────────────────────────────────────────────────────── */
.gs-continue-row {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* right-justify the Calculate button + its hint */
    gap: 0.5rem;
}

.gs-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--gs-accent);
    cursor: pointer;
    transition: filter 0.2s ease;
}

.gs-continue-btn:hover { filter: brightness(0.92); }

.gs-continue-btn[aria-disabled='true'] {
    background: var(--gs-border);
    color: var(--gs-text-secondary);
    cursor: not-allowed;
    filter: none;
}

.gs-continue-hint { font-size: 0.875rem; color: var(--gs-text-secondary); margin: 0; text-align: right; }

/* ── Recent / My Deals ─────────────────────────────────────────────────── */
.gs-recents { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--gs-border); }

.gs-recents-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gs-recents-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gs-text-secondary);
    margin: 0;
}

.gs-recents-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }

.gs-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gs-border);
    border-radius: 6px;
    background: var(--gs-surface);
}

.gs-recent-open {
    border: none;
    background: transparent;
    color: var(--gs-accent);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    flex: 1;
}

.gs-recent-open:hover { text-decoration: underline; }
.gs-recent-meta { font-size: 0.75rem; color: var(--gs-text-secondary); flex-shrink: 0; }

/* ── "How to export from ARGUS" instructions dialog ─────────────────────── */
.gs-dialog {
    max-width: 720px;
    width: calc(100vw - 3rem);
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 12px 44px rgba(15, 23, 42, 0.28);
    color: var(--gs-text);
}
.gs-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }

.gs-dialog-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--gs-border);
    background: var(--gs-surface);
}
.gs-dialog-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--gs-text); }
.gs-dialog-close {
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--gs-text-secondary);
    cursor: pointer;
    padding: 0 0.25rem;
}
.gs-dialog-close:hover { color: var(--gs-text); }

.gs-argus-steps {
    list-style: none;
    counter-reset: gs-step;
    margin: 0;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 68vh;
    overflow-y: auto;
}
.gs-argus-steps li { counter-increment: gs-step; }
.gs-argus-step-text { font-size: 0.9rem; color: var(--gs-text); margin-bottom: 0.6rem; }
.gs-argus-step-text::before {
    content: counter(gs-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--gs-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    vertical-align: middle;
}
.gs-argus-step-text strong { font-weight: 600; }
.gs-argus-img { display: block; width: 100%; border: 1px solid var(--gs-border); border-radius: 8px; }
.gs-argus-foot {
    margin: 0;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--gs-border);
    font-size: 0.85rem;
    color: var(--gs-text-secondary);
}

.gs-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible focus for buttons/links (accessibility is load-bearing). Inputs are intentionally
   excluded — they carry their own subtle .gs-input:focus treatment; stacking this solid outline on
   top read as over-highlighted. */
.gs-page button:focus-visible,
.gs-page a:focus-visible {
    outline: 2px solid var(--gs-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

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