/* =============================================================================
   Roundtoe design tokens and primitives.

   Hand-written, no framework, no build step - CLAUDE.md, "Design and front end".
   Everything here is scoped under .rt so it can sit alongside the Bootstrap
   pages that have not been migrated yet without either fighting the other.

   Read the tokens first. Nothing below them should contain a raw colour or a
   magic number; if it does, that is a bug rather than a shortcut.
   ========================================================================== */

.rt {
    /* --- palette -----------------------------------------------------------
       One accent, one neutral ramp. A countdown is already a busy object, so
       the page around it stays quiet and lets the timer be the loud thing. */
    --ink: #0d1117;
    --ink-soft: #3d4753;
    --ink-faint: #667081;
    --paper: #ffffff;
    --paper-sunk: #f6f7f9;
    --line: #e3e6ea;

    --accent: #4338ca;
    --accent-hot: #5b4bdd;
    --accent-wash: #eef0fe;
    --accent-ink: #ffffff;

    --good: #0f7b52;
    --warn: #9a5b00;

    /* --- type --------------------------------------------------------------
       System stack: SF on Apple, Segoe on Windows, Inter if a user has it.
       Nothing to download, nothing to self-host, and it renders as the OS
       intends rather than approximating it. */
    --face: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --face-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    /* Fluid, so a 13" laptop and a 27" display both get a sensible measure
       without a single media query. */
    --t-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
    --t-h2: clamp(1.6rem, 1.25rem + 1.4vw, 2.35rem);
    --t-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    --t-body: clamp(1rem, 0.97rem + 0.14vw, 1.09rem);
    --t-small: 0.875rem;
    --t-micro: 0.78rem;

    --measure: 68ch;

    /* --- space -------------------------------------------------------------
       A 4px-derived ramp. Named by size rather than by use, so it survives
       being used somewhere it was not designed for. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4.5rem;
    --s9: 7rem;

    --radius: 12px;
    --radius-lg: 20px;

    --shadow-1: 0 1px 2px rgb(13 17 23 / 0.05), 0 1px 3px rgb(13 17 23 / 0.06);
    --shadow-2: 0 4px 12px rgb(13 17 23 / 0.07), 0 12px 32px rgb(13 17 23 / 0.08);
    --shadow-accent: 0 6px 20px rgb(67 56 202 / 0.28);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    color: var(--ink);
    background: var(--paper);
    font-family: var(--face);
    font-size: var(--t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Dark mode is designed, not inverted: the neutrals warm slightly and the
   accent lifts, because a colour that reads as confident on white reads as
   muddy on near-black. */
@media (prefers-color-scheme: dark) {
    .rt {
        --ink: #eef1f6;
        --ink-soft: #b3bcc9;
        --ink-faint: #8590a1;
        --paper: #0e1116;
        --paper-sunk: #161b22;
        --line: #262d38;

        --accent: #8b7dff;
        --accent-hot: #a294ff;
        --accent-wash: #191a2e;
        --accent-ink: #10121b;

        --good: #4ade80;
        --warn: #fbbf24;

        --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.35);
        --shadow-accent: 0 6px 20px rgb(139 125 255 / 0.25);
    }
}

/* --- resets, only what is needed ---------------------------------------- */

.rt *,
.rt *::before,
.rt *::after { box-sizing: border-box; }

.rt h1, .rt h2, .rt h3, .rt p, .rt ul, .rt ol, .rt figure { margin: 0; }
.rt ul, .rt ol { padding: 0; list-style: none; }
.rt img, .rt svg { display: block; max-width: 100%; height: auto; }

/* --- layout ------------------------------------------------------------- */

.rt-shell {
    width: min(100% - 2.5rem, 1120px);
    margin-inline: auto;
}

.rt-narrow { max-width: var(--measure); }

.rt-section { padding-block: var(--s8); }
.rt-section + .rt-section { border-top: 1px solid var(--line); }

/* --- type --------------------------------------------------------------- */

.rt-hero-title {
    font-size: var(--t-hero);
    line-height: 1.02;
    letter-spacing: -0.033em;
    font-weight: 680;
    text-wrap: balance;
}

.rt-h2 {
    font-size: var(--t-h2);
    line-height: 1.12;
    letter-spacing: -0.022em;
    font-weight: 660;
    text-wrap: balance;
}

.rt-h3 {
    font-size: var(--t-h3);
    line-height: 1.25;
    letter-spacing: -0.012em;
    font-weight: 640;
}

.rt-lede {
    font-size: clamp(1.09rem, 1rem + 0.45vw, 1.3rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: var(--measure);
    text-wrap: pretty;
}

.rt-body { color: var(--ink-soft); max-width: var(--measure); text-wrap: pretty; }
.rt-small { font-size: var(--t-small); color: var(--ink-faint); }

.rt-eyebrow {
    font-size: var(--t-micro);
    font-weight: 640;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent);
}

.rt-stack > * + * { margin-top: var(--s4); }
.rt-stack-lg > * + * { margin-top: var(--s6); }

/* --- controls -----------------------------------------------------------

   EVERY BUTTON RULE IS SCOPED UNDER .rt ON PURPOSE, and it is not decoration.

   The compatibility shim near the bottom of this file sets `.rt a { color:
   var(--accent) }`. That selector is (0,1,1); a bare `.rt-btn-primary` is
   (0,1,0), so the link colour WINS - and every <a> styled as a primary button
   renders accent text on an accent background. Invisible. It took out every
   call to action on the pricing page (I-43).

   `.rt .rt-btn-primary` is (0,2,0), which beats it. Do not "simplify" these
   selectors back. */

.rt .rt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 0.8em 1.5em;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
                background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.rt .rt-btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-accent);
}

.rt .rt-btn-primary:hover { background: var(--accent-hot); transform: translateY(-1px); }
.rt .rt-btn-primary:active { transform: translateY(0); }

.rt .rt-btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.rt .rt-btn-ghost:hover { border-color: var(--ink-faint); background: var(--paper-sunk); }

.rt .rt-btn-lg { padding: 0.95em 1.9em; font-size: 1.05rem; }
.rt .rt-btn-block { width: 100%; }

/* One focus treatment everywhere, and it is visible. */
.rt :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- surfaces ----------------------------------------------------------- */

.rt-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s6);
    box-shadow: var(--shadow-1);
}

.rt-grid {
    display: grid;
    gap: var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* --- pricing ------------------------------------------------------------ */

.rt-price {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    position: relative;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.rt-price:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.rt-price-featured {
    border-color: var(--accent);
    box-shadow: var(--shadow-2);
}

.rt-price-tag {
    position: absolute;
    top: calc(var(--s4) * -0.75);
    left: var(--s6);
    padding: 0.25em 0.8em;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: var(--t-micro);
    font-weight: 660;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rt-amount {
    display: flex;
    align-items: baseline;
    gap: 0.15em;
    font-family: var(--face-num);
    font-size: 2.6rem;
    font-weight: 620;
    letter-spacing: -0.04em;
    /* Tabular figures so the tiers align vertically rather than shimmering. */
    font-variant-numeric: tabular-nums;
}

.rt-amount-unit { font-size: 0.95rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }

.rt-feature { display: flex; gap: var(--s3); align-items: flex-start; }
.rt-feature + .rt-feature { margin-top: var(--s3); }
.rt-feature svg { flex: 0 0 auto; margin-top: 0.32em; color: var(--good); }

/* --- misc --------------------------------------------------------------- */

.rt-rule { height: 1px; background: var(--line); border: 0; }

.rt-note {
    padding: var(--s4) var(--s5);
    border-left: 3px solid var(--accent);
    background: var(--accent-wash);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-soft);
    font-size: var(--t-small);
}

@media (prefers-reduced-motion: reduce) {
    .rt *,
    .rt *::before,
    .rt *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   Account pages - sign in, register, password reset, account management.

   These inherit /Pages/Shared/_Layout.cshtml, which no longer loads Bootstrap,
   so everything they need lives here. The .rt class is on <body>, so the tokens
   above are already in scope.
   ========================================================================== */

.rt-auth-body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--paper-sunk);
}

.rt-auth-head { border-bottom: 1px solid var(--line); background: var(--paper); }

.rt-auth-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: 4rem;
}

.rt-brand {
    font-weight: 660;
    letter-spacing: -0.02em;
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
}

.rt-auth-nav ul { display: flex; gap: var(--s4); align-items: center; }
.rt-auth-nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-small); }
.rt-auth-nav a:hover { color: var(--ink); }

.rt-auth-main { flex: 1; display: grid; place-items: center; padding-block: var(--s7); }
.rt-auth-foot { border-top: 1px solid var(--line); padding-block: var(--s4); background: var(--paper); }
.rt-auth-foot a { color: var(--ink-faint); }

/* The card a form sits in. Narrow on purpose: a sign-in form that spans a
   desktop is the single most recognisable "unstyled framework" tell. */
.rt-auth-card {
    width: min(100%, 27rem);
    margin-inline: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s6);
    box-shadow: var(--shadow-1);
}

.rt-auth-wide { width: min(100%, 52rem); }

.rt-auth-title { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.02em; font-weight: 660; }
.rt-auth-sub { color: var(--ink-soft); font-size: var(--t-small); margin-top: var(--s2); }

/* --- forms -------------------------------------------------------------- */

.rt-field { display: flex; flex-direction: column; gap: var(--s2); }
.rt-field + .rt-field { margin-top: var(--s4); }

.rt-label { font-size: var(--t-small); font-weight: 560; color: var(--ink); }

.rt-input {
    width: 100%;
    padding: 0.7em 0.85em;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.rt-input::placeholder { color: var(--ink-faint); }
.rt-input:hover { border-color: var(--ink-faint); }

.rt-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.rt-check { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--ink-soft); }
.rt-check input { width: 1rem; height: 1rem; accent-color: var(--accent); }

.rt-error { color: #c0392b; font-size: var(--t-small); }
@media (prefers-color-scheme: dark) { .rt-error { color: #ff8a80; } }

.rt-error:empty, .rt-error ul:empty { display: none; }
.rt-error ul { padding-left: 1.1rem; list-style: disc; }

.rt-links { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); font-size: var(--t-small); }
.rt-links a { color: var(--accent); text-decoration: none; }
.rt-links a:hover { text-decoration: underline; }

/* --- the external-provider divider -------------------------------------- */

.rt-or {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-block: var(--s5);
    color: var(--ink-faint);
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rt-or::before, .rt-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.rt-providers { display: flex; flex-direction: column; gap: var(--s3); }
.rt-providers .rt-btn { width: 100%; }

/* =============================================================================
   Bootstrap compatibility shim.

   The shared layout stopped loading Bootstrap, but 29 scaffolded Identity pages
   still carry its classes. Rebuilding all of them at once is a lot of surface
   for one sitting, and leaving them unstyled would look broken rather than
   plain - so this maps the small vocabulary they actually use onto the design
   tokens.

   IT IS A BRIDGE, NOT AN API. Do not write these class names in new markup; use
   the .rt primitives. Delete a rule here as each page is rebuilt, and delete the
   block when the last one goes.
   ========================================================================== */

.rt .text-danger { color: #c0392b; font-size: var(--t-small); }
@media (prefers-color-scheme: dark) { .rt .text-danger { color: #ff8a80; } }

.rt .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    padding: 0.8em 1.5em; border: 1px solid var(--line); border-radius: var(--radius);
    font: inherit; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
    background: transparent; color: var(--ink);
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.rt .btn:hover { border-color: var(--ink-faint); background: var(--paper-sunk); }

.rt .btn-primary {
    background: var(--accent); color: var(--accent-ink);
    border-color: transparent; box-shadow: var(--shadow-accent);
}
.rt .btn-primary:hover { background: var(--accent-hot); }

.rt .btn-danger { background: #c0392b; color: #fff; border-color: transparent; }
.rt .btn-link { border-color: transparent; color: var(--accent); padding-inline: 0; }
.rt .btn-lg { padding: 0.95em 1.9em; font-size: 1.05rem; }
.rt .w-100 { width: 100%; }

.rt .form-label { display: block; font-size: var(--t-small); font-weight: 560; color: var(--ink); }

.rt .form-control {
    width: 100%; padding: 0.7em 0.85em; font: inherit; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.rt .form-control:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Bootstrap's floating labels put the input BEFORE the label in the markup and
   position the label over it. Without Bootstrap's CSS that reads upside down,
   so column-reverse restores a conventional label-above-input stack without
   touching 20 files. */
.rt .form-floating { display: flex; flex-direction: column-reverse; gap: var(--s2); }
.rt .form-floating > label { font-size: var(--t-small); font-weight: 560; color: var(--ink); }

.rt .mb-3 { margin-bottom: var(--s4); }

.rt .row { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.rt .col-md-4, .rt .col-md-6, .rt .col-md-offset-2 { min-width: 0; }

.rt .alert {
    padding: var(--s4) var(--s5); border-radius: var(--radius);
    border-left: 3px solid var(--accent); background: var(--accent-wash);
    color: var(--ink-soft); font-size: var(--t-small);
}
.rt .alert-warning { border-left-color: var(--warn); }
.rt .alert-danger { border-left-color: #c0392b; }

.rt .nav { display: flex; flex-direction: column; gap: var(--s1); }
.rt .nav-link {
    display: block; padding: var(--s2) var(--s3); border-radius: var(--radius);
    color: var(--ink-soft); text-decoration: none; font-size: var(--t-small);
}
.rt .nav-link:hover { background: var(--paper-sunk); color: var(--ink); }
.rt .nav-link.active { background: var(--accent-wash); color: var(--accent); font-weight: 600; }

.rt .list-group { display: flex; flex-direction: column; gap: var(--s2); }

/* Scaffolded pages assume a document with default heading sizes. */
.rt h1 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.02em; font-weight: 660; }
.rt h2 { font-size: var(--t-h3); font-weight: 640; }
.rt h4 { font-size: 1rem; font-weight: 640; }
.rt hr { height: 1px; background: var(--line); border: 0; margin-block: var(--s4); }
/* Content links only. Buttons are scoped above to outrank this - see the
   note by the controls block. */
.rt a { color: var(--accent); }
.rt p + p, .rt form > p { margin-top: var(--s3); }