/*
 * layout.css — the responsive shell and the auth split (AB#2021, AB#2023).
 *
 * HAND-AUTHORED, like base.css and components.css beside it. Load order is
 * tokens.css → base.css → components.css → layout.css: everything here reads the custom properties
 * tokens.css defines (the --shell-* / --content-max-* / --auth-* layout tokens arrived with DS-1).
 *
 * THE SERVER RENDERS EVERY CHROME ELEMENT ONCE. The three bands are selected here, with @media only:
 *
 *     phone     < 900px     app bar + tab bar; the chart list is a bottom sheet
 *     drawer    900–1279px  top bar + the sidebar as an off-canvas drawer behind a menu button
 *     sidebar   ≥ 1280px    persistent 256px sidebar + 58px top bar
 *
 * Custom properties cannot be read inside a media query, so the two breakpoints are written literally
 * (they are recorded as comments in ui/design-system/tokens/layout.css); every measurement is a token.
 * No JavaScript decides layout — the only script in the shell is Bootstrap's offcanvas, which opens the
 * drawer and the sheet, and rt-theme.js.
 *
 * The chrome — app bar, tab bar, sidebar — is --rt-chrome-bg / --rt-chrome-ink in BOTH themes: that
 * token pair deliberately does not flip with [data-theme].
 */

/* ==================================================================================================
   Frame
   ================================================================================================== */

.rt-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.rt-shell__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* Phone content padding 16 16 24; the desktop values are in the 900px band below. */
.rt-shell__main {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
}

/* Every page opts into one content width (R4). */
.rt-page {
    width: 100%;
    margin: 0 auto;
}

.rt-page--wide {
    max-width: var(--content-max-wide);
}

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

/* ==================================================================================================
   The chrome ground, shared by the three dark-teal surfaces
   ================================================================================================== */

.rt-shell__appbar,
.rt-shell__tabbar,
.rt-shell__sidenav {
    background-color: var(--rt-chrome-bg);
    color: var(--rt-chrome-ink);
}

.rt-shell__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--rt-chrome-ink);
    font-size: var(--fs-card-title);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.rt-shell__brand:hover,
.rt-shell__brand:focus-visible {
    color: var(--rt-chrome-ink);
    text-decoration: none;
}

.rt-shell__brand .bi {
    color: var(--rt-gold);
    font-size: var(--fs-body);
}

/* Per-tab tints, shared by the tab bar and the sidebar nav (kitData TINT map). */
.rt-nav-tint--gold { --rt-tab-tint: var(--rt-gold); }
.rt-nav-tint--teal { --rt-tab-tint: var(--rt-meta); }
.rt-nav-tint--orange { --rt-tab-tint: var(--rt-accent); }
.rt-nav-tint--green { --rt-tab-tint: var(--rt-green); }
.rt-nav-tint--rose { --rt-tab-tint: var(--rt-rose); }

/* The chrome variant of the round icon button draws on the dark ground. The base .rt-icon-button lives in
   components.css (AB#2182), which the admin console loads too - RtDialog's close button needs it there. */
.rt-icon-button--chrome {
    border-color: transparent;
    color: var(--rt-chrome-ink);
}

.rt-icon-button--chrome:hover,
.rt-icon-button--chrome:focus-visible {
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
}

/* ==================================================================================================
   Phone app bar (< 900)
   ================================================================================================== */

.rt-shell__appbar {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.rt-shell__appbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
}

.rt-shell__appbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.rt-shell__appbar-link {
    color: var(--rt-chrome-ink);
    font-size: var(--fs-sub);
    font-weight: 600;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
}

.rt-shell__appbar-link:hover,
.rt-shell__appbar-link:focus-visible {
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
    text-decoration: none;
}

/* The calculation-context line under the app bar, on chart pages only. */
.rt-shell__context {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0 var(--sp-4) var(--sp-3);
    color: var(--rt-chrome-muted);
    font-size: var(--fs-meta);
}

/*
   The chart-switcher pill. Length-tolerant: Sinhala names ellipsise rather than push the gear off.
   min-width: 0 is what makes that true. The nowrap name makes the pill's min-content as wide as the
   whole name, so the flex default (min-width: auto) stopped it shrinking at the 46vw cap - and vw
   counts a classic scrollbar the bar itself does not have, so at 390 px under :lang(si) the gear sat
   3 px past the edge (AB#2041 Sinhala pass).
*/
.rt-chart-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    min-height: 36px;
    max-width: 46vw;
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
    border: 0;
    border-radius: var(--r-pill);
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
    font-family: var(--font-body);
    font-size: var(--fs-sub);
    font-weight: 600;
    cursor: pointer;
}

.rt-chart-pill__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-chart-pill .bi-chevron-down {
    font-size: var(--fs-eyebrow);
    color: var(--rt-chrome-muted);
}

/* ==================================================================================================
   Phone tab bar (< 900) — Home · Charts · Today · Account
   ================================================================================================== */

.rt-shell__tabbar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-2) var(--sp-1);
}

.rt-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--hit-target);
    padding: var(--sp-2) var(--sp-1) var(--sp-1);
    border-radius: var(--r-sm);
    color: var(--rt-chrome-muted);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.rt-tab .bi {
    font-size: var(--fs-card-title);
    line-height: 1;
    color: var(--rt-tab-tint, inherit);
}

.rt-tab:hover,
.rt-tab:focus-visible {
    color: var(--rt-chrome-ink);
    text-decoration: none;
}

.rt-tab.is-active {
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
    font-weight: 700;
}

/* An honest placeholder (Today, Phase 3): visibly not yet a destination, never a dead link. */
.rt-tab[aria-disabled="true"],
.rt-sidenav__row[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
}

/* ==================================================================================================
   Sidebar (≥ 1280 static; 900–1279 inside the drawer)
   ================================================================================================== */

.rt-shell__sidenav {
    display: flex;
    flex: none;
    flex-direction: column;
    width: var(--shell-sidebar-w);
    padding: var(--sp-5) var(--sp-3) var(--sp-3);
    overflow-y: auto;
    scrollbar-width: none;
}

.rt-shell__sidenav::-webkit-scrollbar {
    display: none;
}

.rt-sidenav__brand {
    padding: 0 var(--sp-2) var(--sp-5);
}

.rt-sidenav__nav,
.rt-sidenav__charts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rt-sidenav__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--hit-target);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--rt-chrome-muted);
    font-size: var(--fs-body);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.rt-sidenav__row .bi {
    font-size: var(--fs-card-title);
    color: var(--rt-tab-tint, inherit);
}

.rt-sidenav__row:hover,
.rt-sidenav__row:focus-visible {
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
    text-decoration: none;
}

.rt-sidenav__row.is-active {
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
    font-weight: 700;
}

/* Sign out (AB#2191) is a form, so its row is a <button>: strip the UA button chrome so it draws exactly
   like the anchor rows - colour, hover and focus all come from .rt-sidenav__row. font-size is restated
   because the font shorthand resets it. */
.rt-sidenav__signout-form {
    margin: 0;
}

.rt-sidenav__signout {
    width: 100%;
    border: 0;
    background-color: transparent;
    font: inherit;
    font-size: var(--fs-body);
    text-align: left;
    cursor: pointer;
}

.rt-sidenav__divider {
    height: 0.8px;
    margin: var(--sp-4) var(--sp-2);
    background-color: var(--rt-tab-active-bg);
}

.rt-sidenav__eyebrow {
    padding: 0 var(--sp-2) var(--sp-2);
    color: var(--rt-chrome-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* "Your charts" rows are <button>s inside the activate form — a row that changes state posts. */
.rt-sidenav__chart {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: var(--hit-target);
    padding: var(--sp-2);
    border: 0;
    border-radius: var(--r-sm);
    background-color: transparent;
    color: var(--rt-chrome-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.rt-sidenav__chart:hover,
.rt-sidenav__chart:focus-visible {
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
    text-decoration: none;
}

.rt-sidenav__chart.is-active {
    background-color: var(--rt-tab-active-bg);
}

.rt-sidenav__chart--archived {
    opacity: 0.55;
}

.rt-sidenav__chart-main {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.rt-sidenav__chart-name,
.rt-sidenav__chart-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-sidenav__chart-name {
    font-size: var(--fs-body);
    font-weight: 700;
}

.rt-sidenav__chart-sub {
    color: var(--rt-chrome-muted);
    font-size: var(--fs-meta);
}

/* The active dot. */
.rt-sidenav__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--rt-gold);
}

.rt-sidenav__allowance {
    margin: var(--sp-3) var(--sp-2) 0;
}

.rt-sidenav__allowance-head {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    color: var(--rt-chrome-muted);
    font-size: var(--fs-meta);
}

.rt-sidenav__allowance-head a {
    color: var(--rt-gold);
    font-weight: 700;
}

.rt-sidenav__allowance-track {
    height: 5px;
    margin-top: var(--sp-2);
    border-radius: var(--r-pill);
    background-color: var(--rt-tab-active-bg);
}

.rt-sidenav__allowance-fill {
    display: block;
    width: var(--rt-meter-pct, 0%);
    height: 100%;
    border-radius: var(--r-pill);
    background-color: var(--rt-gold);
}

.rt-sidenav__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--hit-target);
    margin: var(--sp-3) var(--sp-2) 0;
    border-radius: var(--r-sm);
    background-color: var(--rt-accent);
    color: var(--rt-on-accent);
    font-size: var(--fs-body);
    font-weight: 700;
    text-decoration: none;
}

.rt-sidenav__add:hover,
.rt-sidenav__add:focus-visible {
    color: var(--rt-on-accent);
    text-decoration: none;
    filter: brightness(1.05);
}

.rt-sidenav__spacer {
    flex: 1 1 auto;
    min-height: var(--sp-4);
}

.rt-sidenav__account {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
    text-decoration: none;
}

.rt-sidenav__account:hover,
.rt-sidenav__account:focus-visible {
    color: var(--rt-chrome-ink);
    text-decoration: none;
}

.rt-sidenav__account-main {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.rt-sidenav__account-name {
    display: block;
    overflow: hidden;
    font-size: var(--fs-body);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-sidenav__account-plan {
    color: var(--rt-chrome-muted);
    font-size: var(--fs-meta);
}

/* The sidebar foot: language, theme, admin, legal links. Everything the old navbar and footer held. */
.rt-sidenav__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: 0 var(--sp-2);
    color: var(--rt-chrome-muted);
    font-size: var(--fs-meta);
}

.rt-sidenav__foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    width: 100%;
}

.rt-sidenav__foot a {
    color: var(--rt-chrome-muted);
}

.rt-sidenav__foot a:hover,
.rt-sidenav__foot a:focus-visible {
    color: var(--rt-chrome-ink);
}

/* The admin entry point keeps the Professional gold identity (hard rule 6). */
.rt-shell__admin-link {
    color: var(--tier-pro);
}

.rt-sidenav__foot .rt-shell__admin-link,
.rt-sidenav__foot .rt-shell__admin-link:hover {
    color: var(--rt-gold);
}

/* ==================================================================================================
   Language selector — a form with one button per culture (used in the sidebar foot and the gear menu)
   ================================================================================================== */

.rt-lang {
    display: inline-flex;
    gap: var(--sp-1);
    margin: 0;
}

.rt-lang__option {
    min-height: 36px;
    padding: var(--sp-1) var(--sp-2);
    border: 0;
    border-radius: var(--r-sm);
    background-color: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-meta);
    font-weight: 600;
    cursor: pointer;
}

.rt-lang__option:hover,
.rt-lang__option:focus-visible {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
}

.rt-lang__option.is-active {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
}

.rt-shell__sidenav .rt-lang__option {
    color: var(--rt-chrome-muted);
}

.rt-shell__sidenav .rt-lang__option:hover,
.rt-shell__sidenav .rt-lang__option:focus-visible,
.rt-shell__sidenav .rt-lang__option.is-active {
    background-color: var(--rt-tab-active-bg);
    color: var(--rt-chrome-ink);
}

/* The phone gear menu: Bootstrap's dropdown, already token-bridged in base.css. Only its rows need
   the 44px target and the form rows need to lose their margins. */
.rt-gear-menu {
    min-width: 240px;
    padding: var(--sp-2);
}

.rt-gear-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--hit-target);
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
}

.rt-gear-menu form {
    margin: 0;
}

.rt-gear-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    color: var(--text-muted);
    font-size: var(--fs-meta);
}

.rt-gear-menu__divider {
    height: 0.8px;
    margin: var(--sp-2) 0;
    background-color: var(--border-default);
}

/* ==================================================================================================
   Top bar (≥ 900): menu button (drawer band only), breadcrumb, calc-context pill, bell
   ================================================================================================== */

.rt-shell__topbar {
    display: none;
    flex: none;
    align-items: center;
    gap: var(--sp-3);
    height: var(--shell-topbar-h);
    padding: 0 var(--sp-6);
    border-bottom: 0.8px solid var(--border-default);
    background-color: var(--surface-card);
}

/* The crumb clips with an ellipsis, so it carries a --sp-2 inset (cancelled by the negative margin):
   without it the overflow would clip the 3px focus ring off the root link (AB#2027). */
.rt-shell__crumb {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 calc(var(--sp-2) * -1);
    padding: var(--sp-2);
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--fs-sub);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-shell__crumb a {
    color: inherit;
}

.rt-shell__crumb .bi {
    margin: 0 var(--sp-1);
    font-size: var(--fs-eyebrow);
}

.rt-shell__crumb b {
    color: var(--text-heading);
}

.rt-context-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 40%;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--fs-meta);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-context-pill .bi {
    font-size: var(--fs-eyebrow);
}

.rt-shell__menu {
    display: none;
}

/* ==================================================================================================
   Drawer (900–1279) — the sidebar inside Bootstrap's offcanvas-start, reskinned with tokens
   ================================================================================================== */

.rt-shell__sidenav.offcanvas {
    --bs-offcanvas-width: var(--shell-sidebar-w);
    --bs-offcanvas-bg: var(--rt-chrome-bg);
    --bs-offcanvas-color: var(--rt-chrome-ink);
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-border-color: transparent;
}

.offcanvas-backdrop {
    --bs-backdrop-bg: var(--rt-hero-bg);
    --bs-backdrop-opacity: 0.45;
}

/* ==================================================================================================
   Chart sheet (< 900) — Bootstrap's offcanvas-bottom, reskinned with tokens
   ================================================================================================== */

.rt-chart-sheet.offcanvas {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-bg: var(--surface-card);
    --bs-offcanvas-color: var(--text-body);
    --bs-offcanvas-border-width: 0;

    max-height: 80vh;
    padding: var(--sp-3) var(--sp-5) var(--sp-6);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--shadow-card);
}

.rt-chart-sheet__handle {
    width: 40px;
    height: 4px;
    margin: 0 auto var(--sp-3);
    border-radius: var(--r-pill);
    background-color: var(--border-default);
}

.rt-chart-sheet__rows {
    overflow-y: auto;
}

.rt-chart-sheet__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--hit-target);
    padding: var(--sp-3) 0;
    border: 0;
    border-bottom: 0.8px solid var(--border-default);
    background-color: transparent;
    color: var(--text-body);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.rt-chart-sheet__row:hover,
.rt-chart-sheet__row:focus-visible {
    color: var(--text-body);
    text-decoration: none;
}

/* The rows sit edge to edge inside a scrolling list, which would clip an outset ring: draw the 3px
   gold ring inside the row instead (AB#2027). */
.rt-chart-sheet__row:focus-visible {
    outline-offset: -3px;
}

.rt-chart-sheet__row--archived {
    opacity: 0.55;
}

.rt-chart-sheet__main {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.rt-chart-sheet__name {
    display: block;
    overflow: hidden;
    color: var(--text-heading);
    font-size: var(--fs-body);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-chart-sheet__sub {
    color: var(--text-muted);
    font-size: var(--fs-meta);
}

.rt-chart-sheet__check {
    flex: none;
    color: var(--rt-accent);
    font-size: var(--fs-card-title);
}

.rt-chart-sheet__manage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--hit-target);
    margin-top: var(--sp-3);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-sm);
    background-color: var(--surface-page);
    color: var(--text-heading);
    font-size: var(--fs-body);
    font-weight: 700;
    text-decoration: none;
}

.rt-chart-sheet__manage:hover,
.rt-chart-sheet__manage:focus-visible {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
    text-decoration: none;
}

/* ==================================================================================================
   Banner strip — the full-width chrome-level notices (impersonation, pending deletion)
   --------------------------------------------------------------------------------------------------
   Not a Callout: a Callout is a page-level "that worked / that failed" message with a radius and a
   dismiss; this is a strip that spans the viewport above the shell and carries an action the reader
   must be able to take from any page.
   ================================================================================================== */

.rt-banner-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background-color: var(--rt-neutral-bg);
    color: var(--rt-neutral);
    font-size: var(--fs-body);
}

.rt-banner-strip--warning {
    background-color: var(--rt-gold-soft);
    color: var(--rt-gold-deep);
}

.rt-banner-strip__icon {
    flex: none;
    font-size: var(--fs-card-title);
}

.rt-banner-strip__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-banner-strip form {
    margin: 0;
}

/* ==================================================================================================
   Auth split (AB#2023) — Identity, the landing page, the first-run wizard
   --------------------------------------------------------------------------------------------------
   Desktop: a 540px brand panel on the chrome ground beside a form column of at most 420px.
   Phone: one stacked column; the panel collapses to a short header band.
   ================================================================================================== */

.rt-auth {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 100vh;
}

.rt-auth__panel {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    background-color: var(--rt-chrome-bg);
    color: var(--rt-chrome-ink);
}

.rt-auth__panel-body {
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sp-4);
}

.rt-auth__glyph {
    font-family: var(--font-display);
    font-size: calc(var(--fs-display) * 2.25);
    line-height: 1;
    color: var(--rt-gold);
}

.rt-auth__headline {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    color: var(--rt-chrome-ink);
}

.rt-auth__blurb {
    margin: 0;
    max-width: 44ch;
    color: var(--rt-chrome-muted);
    font-size: var(--fs-body);
}

.rt-auth__quote {
    margin: var(--sp-4) 0 0;
    padding-left: var(--sp-4);
    border-left: 3px solid var(--rt-gold);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-style: italic;
    line-height: var(--lh-body);
    color: var(--rt-chrome-ink);
}

.rt-auth__quote cite {
    display: block;
    margin-top: var(--sp-2);
    color: var(--rt-chrome-muted);
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-style: normal;
}

.rt-auth__panel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    color: var(--rt-chrome-muted);
    font-size: var(--fs-meta);
}

.rt-auth__panel-foot a {
    color: var(--rt-chrome-muted);
}

.rt-auth__panel-foot a:hover,
.rt-auth__panel-foot a:focus-visible {
    color: var(--rt-chrome-ink);
}

.rt-auth__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + var(--sp-1));
}

.rt-auth__col {
    width: 100%;
    max-width: var(--auth-col-w);
}

/* "or" between the provider buttons and the fields. */
.rt-auth__or {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    color: var(--text-muted);
    font-size: var(--fs-meta);
    text-transform: lowercase;
}

.rt-auth__or::before,
.rt-auth__or::after {
    content: "";
    flex: 1 1 auto;
    height: 0.8px;
    background-color: var(--border-default);
}

.rt-auth__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 36px;
    margin-bottom: var(--sp-3);
    color: var(--text-muted);
    font-size: var(--fs-sub);
    font-weight: 600;
}

.rt-auth__swap {
    margin: var(--sp-5) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sub);
    text-align: center;
}

/* The secondary links under a form: forgot password, resend. */
.rt-auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-4);
    font-size: var(--fs-sub);
}

/* A page with more than a form in it (Welcome's three value cards). */
.rt-auth__col--wide {
    max-width: var(--content-max-narrow);
}

/* The verify-email envelope disc: the .rt-avatar gradient (components.css), at hero scale. */
.rt-auth__disc {
    --rt-avatar-size: 72px;

    margin-bottom: var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-display);
}

/* The Welcome page's three value cards. */
.rt-auth__values {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
}

.rt-auth__value .bi {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--rt-accent);
    font-size: var(--fs-title);
}

/* ==================================================================================================
   Bands
   ================================================================================================== */

/* Phone: no sidebar at all — the drawer only exists from 900px, and the sheet replaces it. */
@media (max-width: 899.98px) {
    .rt-shell__sidenav.offcanvas {
        display: none;
    }
}

/* Desktop shell: sidebar (as a drawer until 1280) + top bar; the phone chrome goes away. */
@media (min-width: 900px) {
    .rt-shell {
        flex-direction: row;
    }

    .rt-shell__appbar,
    .rt-shell__tabbar,
    .rt-chart-sheet.offcanvas {
        display: none;
    }

    .rt-shell__topbar {
        display: flex;
    }

    .rt-shell__menu {
        display: inline-flex;
    }

    /* Content padding 28 40 48. */
    .rt-shell__main {
        padding: calc(var(--sp-6) + var(--sp-1)) calc(var(--sp-8) + var(--sp-2)) calc(var(--sp-8) + var(--sp-4));
    }

    .rt-auth {
        flex-direction: row;
    }

    .rt-auth__panel {
        width: var(--auth-panel-w);
        padding: calc(var(--sp-8) + var(--sp-6)) calc(var(--sp-8) + var(--sp-4));
    }

    .rt-auth__panel-body {
        display: flex;
    }

    .rt-auth__main {
        justify-content: center;
        padding: calc(var(--sp-8) + var(--sp-6)) calc(var(--sp-8) + var(--sp-4));
    }

    .rt-auth__values {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Sidebar band: the offcanvas becomes a static, sticky column and the menu button goes away. */
@media (min-width: 1280px) {
    .rt-shell__sidenav.offcanvas {
        position: sticky;
        top: 0;
        display: flex;
        width: var(--shell-sidebar-w);
        height: 100vh;
        max-width: none;
        border: 0;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .rt-shell__menu {
        display: none;
    }

    .rt-shell__topbar {
        padding: 0 calc(var(--sp-8) + var(--sp-2));
    }
}