/* ===================== RampUp Rocket · Page vocabulary ====================
   The shared card-on-canvas layout used across the site: forms, message
   pages, auth screens and admin. Every page links this one file, so they
   cannot drift apart — change the layout here and they all move together.

   Was form_page.css/.fb-*, which read as "feedback form only". Same idea,
   honest name.

   Colour and type come from css/theme.css (light + dark). Nothing here
   hardcodes either, so every page themes and scales automatically.

   Structure:
     .rr-page > .rr-card
        .rr-eyebrow (+ .rr-eyebrow-dot) · .rr-title · .rr-subtitle
        .rr-note                        — inline notice, optional
        .rr-section-head                — mono uppercase group label
        .rr-field > .rr-label + .rr-control (+ .rr-help / .rr-error)
        .rr-files > .rr-file            — attachment list
        .rr-readonly                    — value shown instead of an input
        .rr-actions > .rr-btn + .rr-actions-note
   ========================================================================== */

.rr-page {
    /* Colours come straight from css/theme.css. No page-local aliases: they
       are scoped to this container, so any rule outside it resolves them to
       nothing and silently drops the declaration. */
    background:var(--rr-bg); min-height:calc(100vh - 50px);
    /* Body face as the page default — the global h1-h6 rule in app.css
       gives this page's headings the display face. This used to default
       to the display face, which put labels, controls and running copy in
       Space Grotesk, out of step with the dashboard and marketing. */
    /* Top padding clears the 50px fixed site header, the same job the legacy
       .inner-page did with padding-top:120px. Inside the dashboard shell the
       rule below zeroes it, because .rr-main already supplies the spacing. */
    padding:calc(50px + 34px) 20px 60px; font-family:var(--font-body); color:var(--rr-ink);
}
/* Inside the dashboard shell, .rr-main already supplies the page background,
   padding and width cap — drop this page's own full-page chrome. */
.rr-main .rr-page { background:transparent; min-height:0; padding:0; }
.rr-page * { box-sizing:border-box; }
.rr-card {
    max-width:760px; margin:0 auto; background:var(--rr-panel);
    border:1px solid var(--rr-border); border-radius:18px; padding:32px 36px 36px;
    box-shadow:var(--rr-shadow-lg);
}

.rr-eyebrow { display:flex; align-items:center; gap:9px; font-family:var(--font-mono);
    font-size:12px; font-weight:700; letter-spacing:1.1px; color:var(--rr-faint);
    text-transform:uppercase; margin:0 0 10px; }
.rr-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--rr-brick); }
.rr-title { font-size:32px; font-weight:700; letter-spacing:-.5px; margin:0 0 8px; color:var(--rr-ink); }
.rr-subtitle { font-size:15px; line-height:1.55; color:var(--rr-muted); margin:0 0 8px; max-width:620px; }

/* Inline notice — replaces Bootstrap alerts on these pages. */
.rr-note { display:flex; align-items:flex-start; gap:10px; margin-top:18px;
    padding:12px 15px; border-radius:10px; font-size:13.5px; line-height:1.5;
    background:var(--rr-info-surface); border:1px solid var(--rr-info-border); color:var(--rr-info-text); }
.rr-note i { margin-top:2px; flex:none; font-size:12.5px; }
.rr-note--warn { background:var(--rr-warning-bg); border-color:var(--rr-warning); color:var(--rr-warning-ink); }
.rr-note--muted { background:var(--rr-panel-2); border-color:var(--rr-border); color:var(--rr-muted); }

/* Section labels — mono uppercase */
.rr-section-head { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase; color:var(--rr-faint); margin:34px 0 4px;
    padding-top:20px; border-top:1px solid var(--rr-border); }
.rr-section-head:first-of-type { border-top:none; padding-top:8px; margin-top:20px; }

/* Fields */
.rr-field { margin-top:18px; position:relative; }
.rr-label { display:block; font-size:14px; font-weight:600; color:var(--rr-ink); margin-bottom:8px; line-height:1.4; }
.rr-control {
    width:100%; border:1px solid var(--rr-border); border-radius:10px; background:var(--rr-panel);
    padding:11px 13px; font:400 14.5px/1.55 var(--font-body); color:var(--rr-ink);
    transition:border-color .14s, box-shadow .14s; resize:vertical;
}
/* Starts at a single row and grows with the content up to max-height, after
   which it scrolls — see static/js/autogrow_textarea.js. resize is off because
   the box sizes itself. */
textarea.rr-control {
    min-height:46px;
    max-height:320px;
    resize:none;
    overflow-y:hidden;
}
select.rr-control { max-width:220px; appearance:auto; cursor:pointer; }
input[type="file"].rr-control { padding:10px 13px; font-size:13.5px; cursor:pointer; }
/* The native picker button is a light OS widget by default — restyle it so the
   control reads as part of the form in both themes. */
.rr-control::file-selector-button {
    margin-right:12px; padding:7px 12px; border-radius:8px;
    border:1px solid var(--rr-border); background:var(--rr-pill); color:var(--rr-ink);
    font:600 12.5px/1 var(--font-body); cursor:pointer;
    transition:background .14s;
}
.rr-control::file-selector-button:hover { background:var(--rr-hover); }
.rr-control::placeholder { color:var(--rr-faint); }
.rr-control:focus { outline:none; border-color:var(--rr-dot); box-shadow:0 0 0 3px var(--rr-focus-ring); }
.rr-control.is-invalid { border-color:var(--rr-brick); }
.rr-error { color:var(--rr-brick); font-size:12.5px; margin-top:6px; }
.rr-help { display:block; font-size:12.5px; line-height:1.45; color:var(--rr-muted); margin-top:7px; }
.rr-help i { margin-right:5px; color:var(--rr-faint); }

/* Read-only value, shown where an input would be */
.rr-readonly { border:1px solid var(--rr-border); border-radius:10px; background:var(--rr-panel-2);
    padding:11px 13px; font:400 14.5px/1.55 var(--font-body); color:var(--rr-ink);
    white-space:pre-wrap; }
.rr-readonly--empty { color:var(--rr-faint); }
.rr-rating { display:inline-flex; align-items:baseline; gap:6px; font-family:var(--font-mono);
    font-size:20px; font-weight:700; color:var(--rr-ink); }
.rr-rating span { font-size:13px; font-weight:400; color:var(--rr-faint); }

/* Attachment list — hairline rows, matching the brief history table */
.rr-files { display:flex; flex-direction:column; margin-top:4px;
    border:1px solid var(--rr-border); border-radius:10px; overflow:hidden; }
.rr-file { display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:11px 14px; font-size:13.5px; color:var(--rr-ink); text-decoration:none;
    border-top:1px solid var(--rr-border); transition:background .14s; }
.rr-file:first-child { border-top:none; }
.rr-file:hover { background:var(--rr-hover); color:var(--rr-ink); }
.rr-file i { margin-right:8px; color:var(--rr-faint); }
.rr-file-size { font-family:var(--font-mono); font-size:11px; letter-spacing:.4px;
    color:var(--rr-faint); white-space:nowrap; }

/* Speech-to-text mic button (injected by speech_to_text.js) sits inside fields.
   app.css styles .stt-mic-btn as a 38px blue-outlined circle, which reads as a
   primary action next to every field. On these pages it should be a quiet
   inline affordance instead: small, borderless, no fill, muted grey. */
.rr-page .stt-mic-btn {
    width:24px; height:24px; font-size:12px;
    border:none; background:transparent;
    color:var(--rr-faint);
    border-radius:6px;
}
.rr-page .stt-mic-btn:hover {
    background:var(--rr-pill); color:var(--rr-muted); transform:none;
}
.rr-page .stt-mic-btn:active { transform:none; }
.rr-page .stt-mic-btn:focus { outline:none; }
.rr-page .stt-mic-btn:focus-visible { outline:2px solid var(--rr-dot); outline-offset:2px; }
/* Recording still has to be unmistakable, but stays flat — the icon swaps to a
   stop glyph and turns red, without the filled circle or pulse animation. */
.rr-page .stt-mic-btn.stt-recording {
    background:transparent; border:none;
    color:var(--rr-brick);
    animation:none;
}
.rr-page .stt-mic-btn.stt-recording:hover {
    background:var(--rr-accent-soft); color:var(--rr-brick);
}
.rr-page .stt-wrapper { padding-top:11px; }
.rr-page .stt-status { font-size:10px; }

/* Actions */
.rr-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:32px;
    padding-top:22px; border-top:1px solid var(--rr-border); }
.rr-btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:650;
    line-height:1; padding:13px 20px; border-radius:10px; text-decoration:none; cursor:pointer;
    border:1px solid transparent; transition:background .14s; }
.rr-btn i { font-size:12px; }
.rr-btn-primary { background:var(--rr-brick-fill); color:var(--rr-on-brick); }
.rr-btn-primary:hover { background:var(--rr-brick-fill); filter:brightness(.9); }
.rr-btn-ghost { background:var(--rr-panel); color:var(--rr-ink); border-color:var(--rr-border-strong); }
.rr-btn-ghost:hover { background:var(--rr-hover); color:var(--rr-ink); }
.rr-actions-note { font-family:var(--font-mono); font-size:11px; letter-spacing:.4px; color:var(--rr-faint);
    text-transform:uppercase; }
/* Pushes a trailing note or secondary button to the right edge of the row. */
.rr-actions-spacer { margin-left:auto; }

@media (max-width:640px) { .rr-card { padding:24px 20px; } .rr-title { font-size:26px; } }

/* ==========================================================================
   Data display and layout primitives.

   Added when the legacy Bootstrap layer was removed: these are the
   replacements for col-md-*, table table-*, badge bg-*, alert alert-* and
   card-body. Same rule as everything above — colour and type come from
   css/theme.css, nothing is hardcoded, so every page themes together.
   ========================================================================== */

/* --- Grid: replaces the Bootstrap row/col-* pairs ----------------------- */
.rr-grid { display:grid; gap:16px; grid-template-columns:1fr; }
.rr-grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.rr-grid--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.rr-grid--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
/* Single breakpoint on purpose: these layouts are 2–4 equal columns that
   collapse to one. Anything needing more nuance gets its own page rule. */
@media (max-width:860px) {
    .rr-grid--2, .rr-grid--3, .rr-grid--4 { grid-template-columns:1fr; }
}

/* --- Card variants ------------------------------------------------------ */
.rr-card--narrow { max-width:460px; }
.rr-card--wide { max-width:1180px; }
.rr-card--flush { padding:0; overflow:hidden; }
.rr-card + .rr-card { margin-top:20px; }

/* --- Toolbar: page title row with actions on the right ------------------ */
.rr-toolbar { display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.rr-toolbar-actions { display:flex; align-items:center; gap:10px; }

/* --- Table -------------------------------------------------------------- */
/* Wrapper scrolls instead of the page: wide admin tables must not push the
   whole layout sideways. */
.rr-table-wrap { width:100%; overflow-x:auto; }
.rr-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.rr-table th, .rr-table td { padding:11px 14px; text-align:left; vertical-align:middle;
    border-bottom:1px solid var(--rr-border-soft); }
.rr-table th { font-family:var(--font-mono); font-size:11px; font-weight:700;
    letter-spacing:.9px; text-transform:uppercase; color:var(--rr-faint);
    background:var(--rr-panel-2); border-bottom:1px solid var(--rr-border);
    white-space:nowrap; }
.rr-table td { color:var(--rr-ink-2); }
.rr-table tbody tr:last-child td { border-bottom:none; }
.rr-table tbody tr:hover td { background:var(--rr-hover); }
.rr-table td.rr-num, .rr-table th.rr-num { text-align:right; font-variant-numeric:tabular-nums; }
.rr-table td.rr-nowrap { white-space:nowrap; }

/* --- Badge: replaces badge bg-* ----------------------------------------- */
.rr-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
    border-radius:999px; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
    letter-spacing:.7px; text-transform:uppercase; white-space:nowrap;
    background:var(--rr-neutral-bg); color:var(--rr-neutral); }
.rr-badge--ok { background:var(--rr-success-bg); color:var(--rr-success-ink); }
.rr-badge--warn { background:var(--rr-warning-bg); color:var(--rr-warning-ink); }
.rr-badge--danger { background:var(--rr-danger-bg); color:var(--rr-danger); }
.rr-badge--info { background:var(--rr-info-bg); color:var(--rr-info-ink); }

/* --- Stat tiles --------------------------------------------------------- */
.rr-stat { background:var(--rr-panel); border:1px solid var(--rr-border);
    border-radius:12px; padding:16px 18px; }
.rr-stat-label { font-family:var(--font-mono); font-size:10.5px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase; color:var(--rr-faint); margin:0 0 6px; }
.rr-stat-value { font-family:var(--font-display); font-size:26px; font-weight:700;
    line-height:1.1; color:var(--rr-ink); font-variant-numeric:tabular-nums; }
.rr-stat-sub { font-size:12.5px; color:var(--rr-muted); margin-top:4px; }

/* --- Note tones the alert classes covered ------------------------------- */
.rr-note--ok { background:var(--rr-success-bg); border-color:var(--rr-success); color:var(--rr-success-ink); }
.rr-note--danger { background:var(--rr-danger-bg); border-color:var(--rr-danger); color:var(--rr-danger); }

/* --- Button variants ---------------------------------------------------- */
.rr-btn-danger { background:var(--rr-danger); color:var(--rr-on-accent); }
.rr-btn-danger:hover { background:var(--rr-danger); filter:brightness(.9); }
.rr-btn--sm { padding:6px 12px; font-size:12.5px; }
.rr-btn[disabled], .rr-btn:disabled { opacity:.55; pointer-events:none; }

/* --- Link --------------------------------------------------------------- */
.rr-link { color:var(--rr-info-link); text-decoration:none; font-weight:600; }
.rr-link:hover { text-decoration:underline; color:var(--rr-info-link); }

/* --- Empty state -------------------------------------------------------- */
.rr-empty { padding:44px 20px; text-align:center; color:var(--rr-muted); font-size:14px; }
.rr-empty i { display:block; font-size:26px; color:var(--rr-icon-faint); margin-bottom:12px; }

/* --- Message page: errors, maintenance, access status ------------------- */
/* A centred card with a large status icon. Replaces the four hand-rolled
   variants that each carried their own markup and colours. */
.rr-msg { max-width:520px; margin:0 auto; text-align:center; }
.rr-msg .rr-card { text-align:center; padding:40px 36px 36px; }
.rr-msg-icon { width:74px; height:74px; margin:0 auto 22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:29px;
    background:var(--rr-info-bg); color:var(--rr-info); }
.rr-msg-icon--warn { background:var(--rr-warning-bg); color:var(--rr-warning); }
.rr-msg-icon--danger { background:var(--rr-danger-bg); color:var(--rr-danger); }
.rr-msg-code { font-family:var(--font-mono); font-size:12px; font-weight:700;
    letter-spacing:2px; color:var(--rr-faint); margin:0 0 10px; }
.rr-msg .rr-title { font-size:26px; }
.rr-msg .rr-subtitle { margin-left:auto; margin-right:auto; }
.rr-msg .rr-actions { justify-content:center; border-top:none; padding-top:4px; margin-top:26px; }

/* One-time code entry — wide tracking, centred, tabular digits. */
.rr-control--code { text-align:center; font-family:var(--font-mono); font-size:26px;
    font-weight:700; letter-spacing:.42em; text-indent:.42em; padding:14px 13px; }

/* Checkbox + label pair — replaces Bootstrap's .form-check trio. */
.rr-check { display:flex; align-items:flex-start; gap:10px; margin-top:20px;
    font-size:14px; line-height:1.55; color:var(--rr-ink-2); cursor:pointer; }
.rr-check input[type="checkbox"] { flex:none; width:17px; height:17px; margin-top:1px;
    accent-color:var(--rr-navy); cursor:pointer; }

/* --- Card sub-parts ------------------------------------------------------ */
/* .rr-card supplies the padding, so the body element inside it adds none.
   These exist so markup converted from Bootstrap keeps its shape. */
.rr-card-body { padding:0; }
.rr-card-head { display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin:0 0 18px; padding-bottom:14px;
    border-bottom:1px solid var(--rr-border); }
.rr-card-title { font-family:var(--font-display); font-size:17px; font-weight:700;
    color:var(--rr-ink); margin:0; }

/* --- Checkbox / radio inside forms --------------------------------------- */
.rr-check-input { width:17px; height:17px; margin-right:9px; accent-color:var(--rr-navy);
    vertical-align:-2px; cursor:pointer; }
.rr-check-label { font-size:14px; color:var(--rr-ink-2); cursor:pointer; }

/* A .rr-card nested inside another card's body should not double the chrome. */
.rr-card-body > .rr-card { box-shadow:none; }

/* ==========================================================================
   Site header — the default chrome for pages outside the dashboard shell and
   the .rr2 marketing system. Replaces the legacy .nasa-nav.
   Fixed, 50px: .rr-page's top padding is calculated against that height.
   ========================================================================== */
.rr-header { position:fixed; top:0; left:0; right:0; z-index:1000; height:50px;
    background:var(--rr-panel); border-bottom:1px solid var(--rr-border); }
/* .rr-header is fixed at 50px, so an in-page anchor would otherwise scroll
   its target under the bar. Keep jump targets clear of it. */
html { scroll-padding-top: 66px; }

/* Full-bleed: the brand sits against the left edge and the links against the
   right, rather than both being pulled into a centred 1240px column. */
.rr-header-inner { height:100%; width:100%; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; }
.rr-header-brand { display:flex; align-items:center; flex:none; }
.rr-header-brand img { height:28px; width:auto; display:block; }
.rr-header-links { display:flex; align-items:center; gap:6px; }
.rr-header-link { display:inline-flex; align-items:center; padding:9px 13px;
    border-radius:8px; font-size:14.5px; font-weight:600; color:var(--rr-muted);
    text-decoration:none; background:none; border:0; font-family:var(--font-body);
    cursor:pointer; white-space:nowrap; transition:background .14s, color .14s; }
.rr-header-link:hover { background:var(--rr-hover); color:var(--rr-ink); }
.rr-header-link.is-active { color:var(--rr-ink); background:var(--rr-active); }
.rr-header-form { margin:0; display:inline-flex; }
/* Scoped: .rr-btn--sm is shared with ~58 admin call sites, so the header's
   CTA is sized here rather than by changing the utility itself. */
.rr-header-links .rr-btn--sm { padding:8px 15px; font-size:13.5px; }
/* The logo is dark artwork; invert it on a dark header. */
html[data-theme="dark"] .rr-header-brand img { filter:brightness(0) invert(1); opacity:.92; }

@media (max-width:720px) {
    .rr-header-inner { padding:0 14px; gap:10px; }
    .rr-header-link { padding:7px 8px; font-size:13px; }
    /* Secondary destinations drop out before the primary action does. */
    .rr-header-links .rr-header-link:not(:last-child):not(.is-active) { display:none; }
}

/* --- Site footer --------------------------------------------------------- */
.rr-footer { margin-top:auto; background:var(--rr-panel-2);
    border-top:1px solid var(--rr-border); padding:26px 20px; }
.rr-footer-inner { max-width:1240px; margin:0 auto; display:flex;
    flex-direction:column; gap:14px; align-items:center; text-align:center; }
.rr-footer-help { margin:0; font-size:13.5px; color:var(--rr-muted); }
.rr-footer-help i { margin-right:7px; color:var(--rr-faint); }
.rr-footer-help a, .rr-footer-links a { color:var(--rr-info-link); text-decoration:none; font-weight:600; }
.rr-footer-help a:hover, .rr-footer-links a:hover { text-decoration:underline; }
.rr-footer-legal { display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
    align-items:center; font-size:12.5px; color:var(--rr-faint); }
.rr-footer-links { display:inline-flex; gap:22px; }
@media (min-width:760px) {
    .rr-footer-legal { width:100%; justify-content:space-between; }
}