/* "Ledger & Brass" - grounded in the underwriting-ledger/deed-file vernacular
   of real estate investing, not generic financial-SaaS blue. Green is spent
   once, as one meaning: the ledger's own color, used for rule lines AND
   positive figures ("in the black"). Brass is the only accent, spent once,
   on interactive elements only. See design notes in git history for the
   full rationale. */
:root {
    --ink: #26241d;
    --ink-dim: #5a5548;
    --bg: #efefea;
    --surface: #fafaf6;
    --border: #c7d0c4;
    --accent: #7c4f1e;
    --accent-hover: color-mix(in srgb, #7c4f1e 85%, black);
    --accent-dim: #efe0c8;
    --negative: #9c3a2e;
    --positive: #1f7a4d;
    --warn: #8a6d1f;
    --warn-bg: #f5ecd2;
    --warn-border: #d9c48f;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    /* Spacing scale - most of this file's hardcoded px values land on one of
       these steps; a few one-off layout values (e.g. .site-main's page
       margin) stay literal rather than forcing a regression. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    --radius: 2px;
    --radius-pill: 999px;
    --radius-sm: 4px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 14px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.site-header .brand {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    font-size: 17px;
}

.site-header nav a {
    margin-left: 20px;
    color: var(--ink-dim);
    text-decoration: none;
    font-size: 13px;
}

.site-header nav a:hover { color: var(--accent); }

.nav-user {
    margin-left: 20px;
    color: var(--ink-dim);
    font-size: 13px;
}

.site-main {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px;
}

h1 { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 0 0 6px; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 28px 0 10px; color: var(--ink); }

/* Section labels carry hierarchy through a rule, not decoration (no all-caps
   tracking - see design notes in git history). */
h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
    padding-left: var(--space-2);
    border-left: 3px solid var(--accent);
}

.subtitle { color: var(--ink-dim); margin: 0 0 20px; }

/* Shared card pattern - added as an extra class alongside each element's own
   class (fieldset, .stat, .step-guide, .income-unit-row, etc), not a rename,
   so every existing selector that targets those elements keeps working. */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.card--sunken { background: var(--bg); }

.form-errors {
    border: 1px solid var(--negative);
    background: color-mix(in srgb, var(--negative) 8%, var(--surface));
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-5);
    color: var(--negative);
}
.form-errors ul { margin: 6px 0 0; padding-left: 20px; }

fieldset {
    padding: var(--space-4) var(--space-5) var(--space-5);
    margin: 0 0 18px;
}

legend {
    padding: 0 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-3) var(--space-4);
}

label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 12.5px;
    color: var(--ink-dim);
}

input, select {
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

input:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

button, .button {
    font: inherit;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

button:hover, .button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

button:active, .button:active { transform: translateY(1px); }

button:disabled, .button:disabled {
    opacity: 0.5;
    cursor: default;
    background: var(--ink-dim);
    border-color: var(--ink-dim);
    transform: none;
}

button.secondary, .button.secondary {
    background: var(--surface);
    color: var(--accent);
}

button.secondary:hover, .button.secondary:hover {
    background: var(--accent-dim);
}

button.danger, .button.danger {
    background: var(--surface);
    color: var(--negative);
    border-color: var(--negative);
}

button.danger:hover, .button.danger:hover {
    background: color-mix(in srgb, var(--negative) 10%, var(--surface));
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 18px;
    background: var(--surface);
}

.table-scroll {
    overflow-x: auto;
}

th, td {
    padding: 8px 10px;
    border: 1px solid var(--border);
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

th:first-child, td:first-child { text-align: left; }
th { background: var(--accent-dim); font-weight: 600; color: var(--ink-dim); }

/* Ledger tables: the numbers get the mono ledger face, ruled with the same
   green as a positive figure - the table's own line color, not decoration.
   The label column (first) stays prose. */
.ledger-table {
    border: 1px solid var(--positive);
}
.ledger-table th, .ledger-table td {
    border-color: var(--border);
}
.ledger-table td:not(:first-child) {
    font-family: var(--font-mono);
}

.capex-table input { width: 100%; text-align: right; font-family: var(--font-mono); }
.capex-table input[name="capex_component"] { text-align: left; font-family: var(--font-body); }

.negative { color: var(--negative); }
.positive { color: var(--positive); }

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 12px 0 24px;
}

.stat {
    padding: var(--space-3) var(--space-4);
}

.stat .label {
    font-size: 11px;
    color: var(--ink-dim);
    margin-bottom: 4px;
    border-left: 2px solid var(--accent-dim);
    padding-left: 6px;
}

.stat .value {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.deal-list a {
    color: var(--accent);
    text-decoration: none;
}

.deal-list a:hover { text-decoration: underline; }

.note {
    color: var(--ink-dim);
    font-size: 13px;
}

.note a {
    color: var(--accent);
    text-decoration: none;
}

.note a:hover { text-decoration: underline; }

.feedback-widget {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    font-size: 13px;
    vertical-align: middle;
}

.feedback-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 1px 5px;
    font-size: 13px;
}

.feedback-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.save-deal-prompt {
    margin: 12px 0 24px;
}

.stale-version-banner {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
    color: var(--warn);
}

.footnotes {
    margin-top: 24px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-dim);
}

.footnotes p {
    margin: 4px 0;
}

.home-hero {
    text-align: center;
    padding: 60px 20px;
}

.home-hero h1 {
    font-size: 30px;
    margin: 0 0 12px;
}

.home-hero .subtitle {
    max-width: 560px;
    margin: 0 auto 28px;
}

.home-cta {
    font-size: 16px;
    padding: 14px 32px;
}

.wizard-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.wizard-progress li {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-dim);
    font-size: 12px;
}

.wizard-progress li.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

.wizard-progress li.done {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
    color: var(--accent);
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

/* Back on the left; "Analyze now" + Continue grouped on the right. */
.wizard-nav { gap: var(--space-2); }
.wizard-nav .wizard-now {
    margin-left: auto;
}

.income-unit-row, .upgrade-row {
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-3);
}

.income-unit-row h3, .upgrade-row h3 {
    margin: 0 0 8px;
}

.income-unit-row .mirror-rent {
    font-size: 12px;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.capex-auto-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.capex-table input.auto-estimated {
    background: var(--accent-dim);
}

.listing-url-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.listing-url-row label { flex: 1; }

.listing-suggestion {
    font-size: 12px;
    color: var(--accent);
    margin-top: 2px;
}

.listing-suggestion button {
    font-size: 11px;
    padding: 2px 8px;
    margin-left: 6px;
}

.listing-status {
    font-size: 12px;
    color: var(--ink-dim);
    margin-top: 4px;
}

.step-layout {
    display: grid;
    grid-template-columns: 200px 1fr 220px;
    gap: 20px;
    align-items: start;
}

.step-guide, .step-presets {
    padding: var(--space-3) var(--space-4);
    font-size: 12.5px;
    color: var(--ink-dim);
}

.step-guide h3, .step-presets h3 {
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--ink-dim);
    border-left-color: var(--accent-dim);
}

.step-guide p {
    margin: 0;
    line-height: 1.5;
}

.step-presets ul {
    margin: 0;
    padding-left: 16px;
}

.step-presets li {
    margin: 0 0 6px;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .step-layout {
        grid-template-columns: 1fr;
    }
}

/* Login's one-off single-field form - was an unstyled class, now given a
   minimal layout rather than recast into .card/fieldset semantics. */
.deal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 320px;
}

/* Header search */
.deal-search {
    position: relative;
    flex: 1;
    max-width: 320px;
    min-width: 160px;
}

.deal-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-dim);
    pointer-events: none;
}

.deal-search input {
    width: 100%;
    padding: 6px 30px 6px 30px;
    border-radius: var(--radius);
}

.deal-search-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font: 11px var(--font-mono);
    color: var(--ink-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    pointer-events: none;
}

.deal-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(38, 36, 29, 0.12);
    max-height: 320px;
    overflow-y: auto;
}

.deal-search-result {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.deal-search-result:last-child { border-bottom: none; }

.deal-search-result:hover,
.deal-search-result:focus {
    background: var(--accent-dim);
    outline: none;
}

.deal-search-name { font-weight: 600; }
.deal-search-address { color: var(--ink-dim); }

.deal-search-empty {
    padding: var(--space-3);
    font-size: 13px;
    color: var(--ink-dim);
}

/* Quick Start - the guide/form/presets row reuses .step-layout's 3-column
   grid + mobile collapse (the wizard's own guide/fields/presets
   convention). The Running Ledger (headline stats + stress tests +
   required-price tables) is a separate, full-width section below it
   instead of living in a column - those tables need real width, not a
   sidebar, and this way nothing needs horizontal scrolling. */
.site-main:has(.quick-start-layout) {
    max-width: 1200px;
}

.quick-start-layout .card {
    padding: var(--space-4) var(--space-5);
}

.quick-ledger {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
}

.quick-ledger .listing-status {
    margin: 0 0 var(--space-3);
}

.quick-ledger h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin: var(--space-5) 0 var(--space-2);
    padding-left: var(--space-2);
    border-left: 2px solid var(--accent-dim);
}

.quick-ledger table {
    width: 100%;
}

.quick-ledger #qs-memo-btn {
    margin-top: var(--space-4);
    width: 100%;
}

/* Saved-deals filter/sort */
.deals-filter-label {
    display: block;
    max-width: 320px;
    margin: 0 0 var(--space-4);
    font-size: 12.5px;
    color: var(--ink-dim);
}

.deals-filter-label input {
    width: 100%;
    margin-top: var(--space-1);
}

#deals-table th[data-sort-key] {
    cursor: pointer;
    user-select: none;
    min-height: 24px;
    padding: var(--space-2) var(--space-3);
}

#deals-table th[data-sort-key]:hover { color: var(--accent); }

#deals-table th[data-sort-key]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Decision strip - the dashboard's one anchor figure (max offer). A ruled
   ledger band, not a card: top and bottom rules, figure in the mono ledger
   face, label in the display face. No fill, so it can't be mistaken for the
   stale-version warning banner. */
.decision-strip {
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) 0 var(--space-3);
    margin: 0 0 var(--space-5);
}

.decision-strip .decision-label {
    margin: 0 0 var(--space-1);
    font-size: 15px;
    color: var(--ink-dim);
}

.decision-figure {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 34px;
    font-weight: 600;
    margin: 0 0 var(--space-1);
    color: var(--ink);
}

.decision-figure--none {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--negative);
}

.decision-detail {
    margin: 0 0 var(--space-2);
}

@media (max-width: 900px) {
    .decision-figure { font-size: 28px; }
}

/* Verdict strip: status (left) and max offer (right), then the checks.
   Status color is spent on the word only - the glyph + word carry meaning,
   color reinforces it (never color alone). */
.decision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-3);
}

.decision-word {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 var(--space-1);
}

.decision-strip--meets .decision-word { color: var(--positive); }
.decision-strip--borderline .decision-word { color: var(--warn); }
.decision-strip--misses .decision-word { color: var(--negative); }
.decision-strip--no_criteria .decision-word { color: var(--ink-dim); }

.check-table { margin: var(--space-2) 0; }
.check-table caption { text-align: left; }
.check-miss .check-glyph { color: var(--negative); }
.check-meet .check-glyph { color: var(--positive); }
.check-why summary { cursor: pointer; }
.check-why p { margin: var(--space-1) 0 0; font-family: var(--font-body); }
.check-margin-inline { display: none; }
.screening-line { margin: var(--space-2) 0; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .decision-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    /* Drop the margin column; show it inline next to the actual figure. */
    .check-table .check-margin { display: none; }
    .check-margin-inline { display: inline; color: var(--ink-dim); }
    .check-table .feedback-widget { display: none; }
}

/* Criteria form (dashboard "Adjust criteria" panel + /ui/criteria). */
.adjust-criteria { margin-top: var(--space-3); }
.adjust-criteria > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.adjust-criteria form { margin-top: var(--space-3); }
.criteria-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.criteria-presets legend { grid-column: 1 / -1; }
.preset-btn { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); text-align: left; min-height: 44px; height: auto; white-space: normal; }
.preset-btn .note { font-weight: 400; }
.checkbox-label { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; font-size: 14px; color: var(--ink); }
.checkbox-label input { width: auto; }

/* Deals list verdict column: a word, colored - never color alone. */
.verdict-cell { white-space: nowrap; }
.verdict-cell .note { display: block; font-size: 12px; }
.verdict-badge { font-weight: 600; }
.verdict-badge--meets { color: var(--positive); }
.verdict-badge--borderline { color: var(--warn); }
.verdict-badge--misses { color: var(--negative); }
.verdict-badge--no_criteria { color: var(--ink-dim); }

/* Quick Start screen block: dims (not blanks) while a recompute is in flight. */
.qs-screen { margin-bottom: var(--space-4); transition: opacity 150ms ease; }
.qs-screen.is-updating { opacity: 0.5; }
.qs-max-offer { margin: var(--space-2) 0; }
.qs-max-offer strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .qs-screen { transition: none; } }

/* Quick Start -> wizard handoff. */
.qs-next { margin: var(--space-5) 0 var(--space-4); }
.qs-next .button { font-size: 16px; padding: 12px 22px; }
.carried-tag { display: inline-block; align-self: flex-start; margin-left: 0; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent-dim); color: var(--accent); font-size: 11px; font-weight: 600; }

/* Owner-occupancy, folded into the Income step. */
.owner-subsection { margin-top: var(--space-4); }

/* Under 900px the 7 pills wrap to 2-3 rows; show one line instead. */
.wizard-step-label { display: none; margin: 0 0 var(--space-4); font-weight: 600; color: var(--ink-dim); }
@media (max-width: 900px) {
    .wizard-progress { display: none; }
    .wizard-step-label { display: block; }
}

/* Stage bar: Screen -> Underwrite -> Decide. Quiet by design - it orients,
   it doesn't compete with the page's own heading. */
.stage-bar ol { display: flex; gap: var(--space-4); list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: 12.5px; color: var(--ink-dim); }
.stage-bar li { display: flex; align-items: center; gap: 6px; }
.stage-bar li + li::before { content: "→"; margin-right: var(--space-2); color: var(--border); }
.stage-bar .stage-num { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: 11px; }
.stage-bar li.current { color: var(--ink); font-weight: 600; }
.stage-bar li.current .stage-num { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.stage-bar a { color: var(--accent); text-decoration: none; }

/* House-hack return that counts rent saved: set apart so it never reads as
   ordinary property income. */
.stat--rent-saved { border-style: dashed; }
.rent-saved-note { margin-top: calc(-1 * var(--space-3)); }

/* Login and account pages: stacked auth forms and the account summary. */
.auth-form { max-width: 420px; margin-bottom: 28px; }
.auth-form h2 { font-size: 18px; margin: 0 0 8px; }
.account-table { margin-bottom: 24px; }
.account-table th { text-align: left; padding-right: 16px; }
.inline-form { display: inline; margin-left: 8px; }

/* Admin data pages: filter bar and wide tables that scroll sideways. */
.admin-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0 20px; }
.admin-filters label { display: flex; flex-direction: column; font-size: 13px; }
.table-scroll { overflow-x: auto; margin-bottom: 24px; }
.table-scroll table { white-space: nowrap; }

/* Footer: privacy link on every page. */
.site-footer { text-align: center; padding: 24px 16px 32px; font-size: 13px; color: var(--ink-dim); }
.site-footer a { color: inherit; }

/* Committee review: decision banner, gate table, one card per question. */
.committee-decision { border: 1px solid var(--border); border-left: 6px solid var(--ink-dim); background: var(--surface); padding: var(--space-4) var(--space-5); margin: var(--space-4) 0 var(--space-6); }
.committee-decision--buy { border-left-color: var(--positive); }
.committee-decision--needs_support { border-left-color: var(--warn); background: var(--warn-bg); }
.committee-decision--decline { border-left-color: var(--negative); }
.committee-decision ul { margin: var(--space-2) 0 0; padding-left: 20px; }
.committee-gates td.pass { color: var(--positive); font-weight: 600; }
.committee-gates td.fail { color: var(--negative); font-weight: 600; }
.committee-question { border: 1px solid var(--border); background: var(--surface); padding: var(--space-4); margin-bottom: var(--space-4); }
.committee-question header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.committee-question h3 { margin: 0; font-size: 17px; }
.question-prompt { font-weight: 600; margin: var(--space-2) 0 var(--space-1); }
.question-reason { color: var(--ink-dim); margin: 0 0 var(--space-2); }
.committee-question details { margin: var(--space-2) 0; font-size: 14px; }
.committee-question textarea { width: 100%; }
.answer-form, .upload-form, .rate-form { margin-top: var(--space-3); }
.rate-form fieldset { border: none; padding: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.rate-form label { display: block; margin-top: var(--space-2); }
.answer { border-left: 3px solid var(--border); margin: var(--space-2) 0; padding-left: var(--space-3); white-space: pre-wrap; }
.reviewer-note { background: var(--accent-dim); padding: var(--space-2) var(--space-3); }
.support-docs { margin: var(--space-2) 0; padding-left: 20px; }
.rating { font-weight: 600; font-size: 13px; white-space: nowrap; }
.rating--supported { color: var(--positive); }
.rating--partial, .rating--awaiting_review { color: var(--warn); }
.rating--not_supported { color: var(--negative); }
.rating--unanswered { color: var(--ink-dim); }
.tag { font-size: 12px; font-weight: 400; color: var(--ink-dim); }
.link-button { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.research-library dt { font-weight: 600; margin-top: var(--space-2); }
.research-library dd { margin: 0 0 0 var(--space-4); }
.attest { display: block; margin: var(--space-2) 0; font-size: 14px; }

/* Homepage AI-connector section and the footer's developer links. */
.ai-connector { border: 1px solid var(--border); background: var(--surface); padding: var(--space-5); margin: var(--space-7) 0; }
.ai-connector h2 { margin-top: 0; }
.connector-url { display: flex; gap: var(--space-2); margin: var(--space-3) 0; flex-wrap: wrap; }
.connector-url input { flex: 1 1 280px; font-family: var(--font-mono); }
.connector-steps { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.connector-steps > div { flex: 1 1 260px; }
.connector-steps h3 { margin-bottom: var(--space-1); }
.footer-dev { display: block; margin-top: var(--space-2); }

/* Admin usage page: headline tiles. */
.usage-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.usage-tile { border: 1px solid var(--border); background: var(--surface); padding: var(--space-3); }
.usage-value { display: block; font-size: 24px; font-weight: 700; font-family: var(--font-mono); }
.usage-label { font-size: 13px; color: var(--ink-dim); }

/* Beta feedback: floating button, one-time invitation, and the form dialog. */
.beta-feedback-button { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 20; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.beta-invite { position: fixed; right: var(--space-4); bottom: 64px; z-index: 20; max-width: 300px; background: var(--surface); border: 1px solid var(--border); padding: var(--space-3) var(--space-4); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.beta-invite p { margin: 0 0 var(--space-2); }
.beta-dialog { max-width: 560px; width: calc(100% - 32px); border: 1px solid var(--border); background: var(--surface); padding: var(--space-5); }
.beta-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.beta-dialog h2 { margin-top: 0; }
.beta-dialog label { display: block; margin: var(--space-3) 0 0; }
.beta-dialog textarea, .beta-dialog select, .beta-dialog input[type="email"] { width: 100%; }
.beta-score { border: none; padding: 0; margin: 0; }
.beta-score label { display: inline-block; margin: var(--space-1) var(--space-2) 0 0; }
.beta-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
@media print { .beta-feedback-button, .beta-invite { display: none; } }
.table-scroll .survey-table td { white-space: normal; min-width: 120px; vertical-align: top; }