/* MotionConvert — Matte Slate Design System */
/* Dark-first, CSS custom properties, Fira Sans + Fira Code */

/* Fira Sans + Fira Code are self-hosted (static/fonts/*.woff2) and
   declared in static/css/fonts.css, loaded as a separate sheet from
   base.html so the @font-face fetch starts in parallel with main.css. */

/* === Design Tokens === */
:root {
    /* Fonts */
    --font-body: 'Fira Sans', -apple-system, sans-serif;
    --font-mono: 'Fira Code', monospace;

    /* Colors — Soft Slate Dark (v0.3.0-influenced) */
    --bg-primary: #1a1d21;
    --bg-card: #23272b;
    --bg-elevated: #2b2f33;
    --bg-input: #1e2124;
    /* Opaque accent-subtle-over-bg-input so the value-field flash can
       stack slot + copy-button layers without the alpha doubling. */
    --value-field-flash: #343124;

    /* Aliases for inline-style compat */
    --bg-secondary: var(--bg-card);
    --bg-tertiary: var(--bg-elevated);
    --bg-output: var(--bg-input);

    /* Foreground */
    --fg: #f1f3f5;
    --fg-secondary: #adb5bd;
    --fg-muted: #868e96;

    /* Aliases */
    --text-primary: var(--fg);
    --text-secondary: var(--fg-secondary);
    --text-muted: var(--fg-muted);

    /* Borders */
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.14);
    --border-focus: #fbbf24;

    /* Accent — signal amber (industrial, motion-engineering heritage) */
    --accent: #fbbf24;
    --accent-hover: #f59e0b;
    --accent-subtle: rgba(251,191,36,0.10);
    --accent-glow: rgba(251,191,36,0.18);

    /* Result values */
    --result-color: #fcd34d;
    --result-unit: rgba(251,191,36,0.55);

    /* Status */
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;

    /* Shadows */
    --card-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.3);

    /* Spacing (8px grid) */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Typography scale */
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-result: 1.75rem;

    /* Layout */
    --topbar-height: 48px;
    --max-width: 1240px;
    --radius: 8px;
    --radius-sm: 6px;
    --sidebar-width: 280px;
    --rail-width: 28px;
}

/* === Light Mode === */
[data-theme="light"] {
    --bg-primary: #f5f5f7;
    --bg-card: #ffffff;
    --bg-elevated: #e8e8ec;
    --bg-input: #ffffff;
    --bg-output: #f0f0f4;

    --fg: #1a1a2e;
    --fg-secondary: #4a4a6a;
    --fg-muted: #6e6e88;

    --border: #d0d0d8;
    --border-hover: #b0b0bc;

    --accent-subtle: #fef3c7;
    --accent-glow: rgba(251,191,36,0.14);
    --value-field-flash: #fef3c7;

    --result-color: #b45309;
    --result-unit: rgba(180,83,9,0.7);

    --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.1);
}

/* === Reset === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* === Base === */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--fg);
    background: var(--bg-primary);
    line-height: 1.6;
    min-height: 100vh;
    /* `clip` avoids creating a scroll container, keeping top-level sticky
       elements working. `hidden` is the fallback for older browsers. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Tell the browser to render native controls (number-input spinners,
   date pickers, scrollbars) in the matching colour scheme so the
   spinner arrows are visible on both themes. */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

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

input, select, button {
    font-family: inherit;
}

/* Native <select> popup: color-scheme handles most of it, but Chromium
   on Linux/Windows still needs explicit option styling. */
select option {
    background: var(--bg-card);
    color: var(--fg);
}

h1, h2, h3 {
    line-height: 1.3;
    font-weight: 600;
    /* Zero top margin — browser defaults (~0.67em on h1, 0.83em on h2)
       silently push the first heading of every page down past the
       breadcrumb bar. Explicit top spacing should come from the parent
       container (.content / .rail-head), not from the heading itself. */
    margin-top: 0;
}
h1 { font-size: var(--text-xl); margin-bottom: var(--space-sm); letter-spacing: -0.03em; }
h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
h3 { font-size: var(--text-base); margin-bottom: var(--space-xs); }

/* === Topbar === */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-height);
    background: rgba(26,29,33,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Stronger separator + soft drop shadow so the bar stays visible
       when scrolling over dark content. */
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.4);
}
[data-theme="light"] .topbar {
    background: rgba(245,245,247,0.92);
    border-bottom-color: rgba(0,0,0,0.10);
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.06);
}

.topbar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.02em;
}
.logo:hover {
    color: var(--accent);
}

.main-nav {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0;
}
/* Each nav item fills the full topbar height and gets horizontal padding
   so the clickable hit-zone covers the whole header strip, not just the
   text baseline. */
.main-nav a,
.main-nav .nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-md);
    line-height: 1;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color 0.15s;
}
.main-nav .nav-dropdown {
    display: inline-flex;
    align-items: stretch;
    height: 100%;
}
.main-nav a:hover {
    color: var(--fg);
}
.main-nav a.main-nav-active,
.main-nav .main-nav-active {
    color: var(--accent);
    font-weight: 600;
}
.main-nav a.main-nav-active:hover,
.main-nav .main-nav-active:hover {
    color: var(--accent-hover);
}

/* === Tool categories dropdown (requirements §3.2) === */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--fg-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger {
    color: var(--fg);
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s, visibility 0.12s;
}
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.5rem;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown-menu.nav-dropdown-menu--open {
    opacity: 1;
    visibility: visible;
}
.nav-dropdown-group {
    padding: 0.25rem 0;
}
.nav-dropdown-group + .nav-dropdown-group {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}
.nav-dropdown-group-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    padding: 0.25rem 0.875rem;
}
.nav-dropdown-menu a {
    display: block;
    padding: 0.4rem 0.875rem;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}
.nav-dropdown-menu a:hover {
    color: var(--fg);
    background: var(--bg-elevated);
}
.nav-dropdown-menu a.nav-dropdown-item--active {
    color: var(--accent);
    font-weight: 600;
}
.nav-dropdown-overview {
    font-weight: 600 !important;
}

/* === Value field copy button (requirements §3.5.1) === */
/* Output-mode slot wraps input + copy button so the button can overlay
   the input's right edge. That keeps the input at the slot's full width
   — when the value overflows it slides behind the copy icon and gets
   clipped by overflow:hidden rather than shifting off the left side. */
.value-field-slot {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
}
.value-field--output .value-field-slot .value-field-input {
    width: 100%;
}
.value-field-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.5rem;
    background: var(--bg-input);
    border: none;
    color: var(--fg-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.value-field--output:hover .value-field-copy,
.value-field-copy:focus-visible {
    opacity: 1;
}
.value-field-copy:hover {
    color: var(--fg);
}
.value-field-copy--done {
    opacity: 1 !important;
    color: var(--fg-muted);
}
.value-field-copy--done svg { display: none; }
.value-field-copy--done::after {
    content: "✓";
    font-size: var(--text-sm);
    font-weight: 700;
}
/* Click-to-copy flash on the output value. The slot gets the animation
   so the flash covers both the number (input) and the copy-icon overlay,
   which sits on top of the slot — otherwise the button would stay its
   neutral bg while the input flashes around it. */
.value-field-slot--copied,
.value-field-slot--copied .value-field-copy {
    animation: value-field-flash 0.6s ease-out;
}
@keyframes value-field-flash {
    0%   { background-color: var(--value-field-flash); }
    100% { background-color: var(--bg-input); }
}
/* Results tiles: copy button nudged inside the slot's corner since the
   tile is visually denser than inline converter rows. */
.station--results .value-field-copy {
    top: 0.125rem;
    right: 0.125rem;
    bottom: auto;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

/* result-inline variant (belt-length result, drivetrain sidebar tiles):
   the row has no background, so the copy button must stay transparent
   on hover — otherwise it shows up as a dark chip over the value.
   Placed after the .station--results rule so it wins the specificity
   tie for .value-field--result-inline fields rendered inside a result
   station (the belt-length case). Leaves .value-field--output (unit
   converter) and .value-field--result-tile (drivetrain main results)
   alone. */
.value-field--result-inline .value-field-copy {
    background: transparent;
}
.value-field--result-inline .value-field-slot--copied,
.value-field--result-inline .value-field-slot--copied .value-field-copy {
    animation: value-field-flash-inline 0.6s ease-out;
}
@keyframes value-field-flash-inline {
    0%   { background-color: var(--value-field-flash); }
    100% { background-color: transparent; }
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.topbar-auth {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.topbar-link {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color 0.15s;
}
.topbar-link:hover {
    color: var(--fg);
}

/* === Mobile Menu Button === */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    gap: 4px;
    margin-left: var(--space-xs);
}
.hamburger-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--fg-secondary);
    border-radius: 1px;
    transition: all 0.2s;
}
.mobile-menu-btn:hover .hamburger-line {
    background: var(--fg);
}
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* === Mobile Nav Dropdown === */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm) 0;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="light"] .mobile-nav {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.mobile-nav.open {
    display: block;
}
.mobile-nav a {
    display: block;
    padding: var(--space-sm) 1.25rem;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color 0.15s, background 0.15s;
}
.mobile-nav a:hover {
    color: var(--fg);
    background: var(--bg-elevated);
}
.mobile-nav-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-xs) 1.25rem;
}

/* === Theme Toggle === */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 5px 7px;
    color: var(--fg-secondary);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover {
    color: var(--fg);
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}
.theme-icon {
    width: 16px;
    height: 16px;
    display: block;
}
/* Show the sun (theme-icon-light) when in DARK mode (it's the action: switch to light)
   and the moon (theme-icon-dark) when in LIGHT mode (action: switch to dark). */
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: block; }
[data-theme="light"] .theme-icon-light,
:not([data-theme="dark"]) .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark,
:not([data-theme="dark"]) .theme-icon-dark { display: block; }

/* === Breadcrumb === */
/* Templates emit only the link/span items now — the fraction-slash
   separators come from the `> * + *::before` pseudo. Using U+2044
   (FRACTION SLASH) instead of a plain `/` keeps the breadcrumb
   visually distinct from any regular slash that appears in a page
   title or piece of prose. */
.breadcrumb {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-sm) 1.25rem var(--space-xs);
    font-size: var(--text-sm); /* match the rail-head subtitle */
    color: var(--fg-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.6;
}
.breadcrumb a {
    color: var(--fg-muted);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--accent);
}
.breadcrumb > span {
    color: var(--fg-secondary);
}
.breadcrumb > * + *::before {
    content: "\2044"; /* FRACTION SLASH — angled, thinner than `/` */
    display: inline-block;
    margin: 0 0.55rem;
    color: var(--fg-muted);
    font-weight: 400;
    font-size: 1.25em;
}

/* === Content Container === */
/* Top padding matches the rail-head compact pattern used on /tools/*
   pages so every page reads with the same tight breadcrumb → heading
   → content rhythm. Bottom stays --space-xl so the footer has room. */
.content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-sm) 1.25rem var(--space-xl);
}

/* When content wraps a rail-layout, remove duplicate constraints */
.content:has(> .rail-layout) {
    max-width: none;
    padding: 0;
}


/* === Cards === */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 5-card grid: balanced 3+2 on wide screens (3 across top, 2 centered
   below with the same cell width as the top row). Falls back to the
   default card-grid breakpoints on tablet/mobile. */
@media (min-width: 1024px) {
    .card-grid--5 {
        grid-template-columns: repeat(6, 1fr);
    }
    .card-grid--5 > .card { grid-column: span 2; }
    .card-grid--5 > .card:nth-child(4) { grid-column: 2 / span 2; }
    .card-grid--5 > .card:nth-child(5) { grid-column: 4 / span 2; }
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    transition: border-color 0.2s, transform 0.2s cubic-bezier(.16,1,.3,1), box-shadow 0.2s;
    color: var(--fg);
    display: block;
}
.card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    color: var(--fg);
}
.card h3 {
    font-size: var(--text-base);
    font-weight: 600;
}
.card p {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

/* === Payment Failed Banner === */
.payment-failed-banner {
    background: rgba(239, 68, 68, 0.12);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    text-align: center;
    padding: 0.625rem 1rem;
    font-size: var(--text-sm);
}
.payment-failed-banner a {
    color: #fca5a5;
    text-decoration: underline;
    font-weight: 600;
}
[data-theme="light"] .payment-failed-banner {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}
[data-theme="light"] .payment-failed-banner a {
    color: #b91c1c;
}

/* === Flash messages (django.contrib.messages) === */
.flash-messages {
    max-width: var(--max-width);
    margin: var(--space-md) auto 0;
    padding: 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.flash {
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg);
    font-size: var(--text-sm);
}
.flash--success {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--result-color);
}
.flash--error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.flash--warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}
.flash--info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}
[data-theme="light"] .flash--error { color: #b91c1c; }
[data-theme="light"] .flash--warning { color: #b45309; }
[data-theme="light"] .flash--info { color: #1d4ed8; }

/* === Hero === */
.hero {
    text-align: center;
    padding: var(--space-2xl) 0;
}
.hero h1 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.hero-subtitle {
    color: var(--fg-secondary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
}
.hero-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--fg-secondary);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    font-family: var(--font-body);
}
.btn:hover {
    color: var(--fg);
    border-color: var(--border-hover);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.btn-sm {
    padding: 3px 7px;
    font-size: 0.75rem;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.btn-sm:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
}

/* Focus rings for keyboard navigation */
.btn:focus-visible,
.btn-sm:focus-visible,
.btn-icon:focus-visible,
.pill-tab:focus-visible,
.stage-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* === Tool Category Sections === */
.tool-category {
    margin-bottom: var(--space-xl);
}
.tool-category h2 {
    font-size: var(--text-lg);
    color: var(--fg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-md);
}

/* === Category Tabs === */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}
.category-tab {
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    transition: all 0.15s;
    white-space: nowrap;
}
.category-tab:hover {
    color: var(--fg);
    border-color: var(--border-hover);
}
.category-tab--active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
.category-tab--active:hover {
    color: #fff;
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* === Tool Toolbar === */
.tool-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) 0;
    flex-wrap: wrap;
}
.tool-toolbar-left {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}
.tool-toolbar-right {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
}
.tool-toolbar-msg {
    font-size: var(--text-sm);
    color: var(--success);
    transition: opacity 0.3s;
}
.tool-toolbar-msg:not(:empty) {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
}
/* Inside a .rail-head (drivetrain / gear-finder / belt-length / convert /
   statusword), the toolbar sits in the header strip next to the h1 — so
   strip the default standalone padding and bottom margin. Without this
   the toolbar wraps to its own row and inflates the rail-head to 79px
   instead of the 43px compact pattern drivetrain already had. */
.rail-head .tool-toolbar {
    margin-bottom: 0;
    padding: 0;
}

.load-dropdown {
    position: relative;
}
.load-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--card-shadow-hover);
    max-height: 200px;
    overflow-y: auto;
}
.load-dropdown-item {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    cursor: pointer;
    color: var(--fg-secondary);
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.load-dropdown-item:last-child { border-bottom: none; }
.load-dropdown-item:hover {
    background: var(--bg-elevated);
    color: var(--fg);
}
.load-dropdown-empty {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

/* === Tool toolbar menus (mc-menu) === */
.mc-menu {
    position: relative;
}
.mc-menu-trigger .mc-menu-caret {
    margin-left: 4px;
    font-size: 0.85em;
}
.mc-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--card-shadow-hover);
    padding: var(--space-xs) 0;
    margin-top: 2px;
    max-height: 70vh;
    overflow-y: auto;
}
.mc-menu-section-label {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
    font-weight: 600;
}
.mc-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--fg-secondary);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.mc-menu-item:hover:not([disabled]) {
    background: var(--bg-elevated);
    color: var(--fg);
}
.mc-menu-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.mc-menu-item[disabled],
.mc-menu-item[aria-disabled="true"] {
    color: var(--fg-muted);
    cursor: not-allowed;
    opacity: 0.6;
}
.mc-menu-item[data-locked]:hover {
    /* Don't lift hover background on locked items — visual cue that the
       click is a no-op. Tooltip surfaces the reason. */
    background: transparent;
    color: var(--fg-muted);
}
.mc-menu-item .mc-lock {
    flex-shrink: 0;
    opacity: 0.7;
    color: var(--fg-muted);
}
.mc-menu-item-nested {
    padding-left: calc(var(--space-md) + var(--space-md));
    font-size: 0.85rem;
}
.mc-menu-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-xs) 0;
}
.mc-menu-empty {
    padding: var(--space-sm) calc(var(--space-md) + var(--space-md));
    font-size: 0.85rem;
    color: var(--fg-muted);
    font-style: italic;
}
.mc-menu-sublist {
    border-top: 1px dashed var(--border);
    background: var(--bg-elevated);
}
.mc-menu-toggle {
    cursor: pointer;
    user-select: none;
    justify-content: flex-start;
}
.mc-menu-toggle input[type="checkbox"] {
    margin-right: var(--space-sm);
    cursor: pointer;
}

/* === Share banner (shown when URL has ?share=<uuid>) === */
.share-banner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent, var(--fg));
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--fg-secondary);
}
.share-banner[hidden] {
    display: none;
}
.share-banner__icon {
    display: inline-flex;
    color: var(--fg-muted);
}
.share-banner__label {
    flex: 1;
}
.share-banner__close {
    background: transparent;
    border: 0;
    color: var(--fg-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--space-xs);
}
.share-banner__close:hover {
    color: var(--fg);
}

/* === Load-from-JSON modal === */
.json-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}
.json-dropzone:hover,
.json-dropzone:focus-visible {
    border-color: var(--accent, var(--fg));
    outline: none;
}
.json-dropzone--dragover {
    border-color: var(--accent, var(--fg));
    background: var(--bg-card);
}
.json-dropzone__primary {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    color: var(--fg);
}
.json-dropzone__sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--fg-muted);
}
.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent, var(--fg));
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.form-error {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 0, 0, 0.05);
    border-left: 3px solid var(--error);
    border-radius: 2px;
}

/* === Tool Block === */
.tool-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: var(--space-lg);
    transition: border-color 0.2s;
}
.tool-block:hover {
    border-color: var(--border-hover);
}
.tool-block-header {
    margin-bottom: var(--space-lg);
}
.tool-block-header h2 {
    text-transform: none;
    letter-spacing: normal;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--space-xs);
}
.tool-block-header p {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
}

/* === Tool Page === */
.tool-page {
    max-width: 900px;
}
.tool-description {
    color: var(--fg-secondary);
    margin-bottom: var(--space-md);
}

/* === Value Field Component === */
.value-field {
    margin-bottom: 0.75rem;
    /* Grid items default to min-width:auto (= intrinsic min-content), so
       a value-field placed in a two-column grid can force the track
       wider than the container and bleed into the sidebar. Overflow is
       already clipped at the inner level — pinning to 0 lets parent
       grids shrink the track as expected. Same pattern as
       .converter-from / .converter-to above. */
    min-width: 0;
}
.value-field:last-child {
    margin-bottom: 0;
}
.value-field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-secondary);
    margin-bottom: 4px;
}
.value-field-inner {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    overflow: hidden;
    transition: all 0.2s cubic-bezier(.16,1,.3,1);
}
.value-field-inner:hover {
    border-color: var(--border-hover);
}
.value-field-inner:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
.value-field-input {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
    caret-color: var(--accent);
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.value-field-input::placeholder {
    color: var(--fg-muted);
}
/* Native selects ignore top/bottom padding on most platforms — give them an
   explicit padding + appearance:none + a caret glyph so they line up with
   sibling text inputs inside a value-field row. */
select.value-field-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    cursor: pointer;
}
.value-field-unit {
    padding: 0.625rem 0.5rem;
    border: none;
    border-left: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    outline: none;
    min-width: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.value-field-unit:focus {
    background: var(--accent-subtle);
}
[data-theme="light"] .value-field-unit {
    background: rgba(0,0,0,0.03);
}

/* Output mode */
.value-field--output .value-field-inner {
    background: var(--bg-input);
}
.value-field--output .value-field-input {
    font-weight: 600;
    color: var(--result-color);
    cursor: pointer;
}
.value-field--output .value-field-unit {
    color: var(--result-unit);
}

/* `result-inline` variant: compact borderless row with a big mono value
   and a right-aligned unit selector. Used by the belt-length result
   card. Opt in via `variant="result-inline"` on the value_field include. */
.value-field--result-inline {
    margin-bottom: 0;
}
.value-field--result-inline > label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fg-secondary);
    margin-bottom: 6px;
}
.value-field--result-inline .value-field-inner {
    border: none;
    background: none;
    border-radius: 0;
}
.value-field--result-inline .value-field-inner:focus-within {
    box-shadow: none;
}
.value-field--result-inline .value-field-input {
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--text-result);
    font-weight: 600;
    color: var(--result-color);
    letter-spacing: -0.01em;
    background: transparent;
}
.value-field--result-inline .value-field-unit {
    padding: 0 0 4px 4px;
    font-size: 0.875rem;
    color: var(--result-unit);
    background: transparent;
    border-left: none;
    min-width: auto;
    justify-content: flex-start;
    align-self: flex-end;
}

/* === Section Headers (tool pages) === */
.sec-h {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.sec-title {
    font-size: var(--text-base);
    font-weight: 600;
    white-space: nowrap;
}
.sec-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.sec-extra {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* === Rail Flow Layout === */
.rail-layout {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 1.5rem;
    padding: 0 1.25rem;
    align-items: start;
}

/* Page header spans both columns. Top padding matches the non-rail
   .content padding-top so the breadcrumb → heading gap is identical
   across layouts. */
.rail-head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0 0.25rem;
}
.rail-head-left {
    display: flex;
    align-items: baseline;
}
.rail-head-left h1 {
    margin-bottom: 0;
}
.rail-head-left p {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin-left: 0.75rem;
}
.rail-head-right {
    display: flex;
    gap: 0.5rem;
}

/* Left column: rail + stations */
.rail-col {
    position: relative;
    padding-left: var(--rail-width);
    min-width: 0;
}

/* Continuous rail line */
.rail-col::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, var(--accent) 3%, rgba(251,191,36,0.25) 80%, transparent 100%);
    z-index: 1;
}
[data-theme="light"] .rail-col::before {
    background: linear-gradient(to bottom, transparent 0%, var(--accent) 3%, rgba(251,191,36,0.12) 80%, transparent 100%);
}

/* Station sections */
.station {
    position: relative;
    margin-bottom: 1.25rem;
}
.rail-col .station:last-child {
    margin-bottom: 0;
}

/* Station dot on the rail */
.station-dot {
    position: absolute;
    left: calc(-1 * var(--rail-width) + 4px);
    /* Align dot center with .sec-title center inside .stn-card */
    top: calc(2rem - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid rgba(251,191,36,0.35);
    z-index: 2;
}
.station-dot--active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Station card */
.stn-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: border-color 0.2s;
}
.station:hover .stn-card {
    border-color: var(--border-hover);
}

/* Results station */
.station--results .stn-card {
    border-color: rgba(251,191,36,0.15);
    position: relative;
    overflow: hidden;
}
.station--results .stn-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--accent) 50%, transparent 95%);
}
.station--results .sec-title {
    color: var(--accent);
}
.station--results .sec-line {
    background: rgba(251,191,36,0.12);
}

/* Results grid */
.results-inline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.result-inline-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fg-secondary);
    margin-bottom: 6px;
}
.result-inline-value {
    font-family: var(--font-mono);
    font-size: var(--text-result);
    font-weight: 600;
    color: var(--result-color);
    letter-spacing: -0.01em;
}
.result-inline-unit {
    font-size: 0.875rem;
    color: var(--result-unit);
    margin-left: 4px;
}

/* === Sidebar (sticky right column) === */
.sidebar {
    position: sticky;
    top: 60px;
    align-self: start;
}

.sidebar-results {
    background: var(--bg-elevated);
    border: 1px solid rgba(251,191,36,0.12);
    border-radius: var(--radius);
    padding: 1rem;
    position: relative;
    overflow: hidden;
}
.sidebar-results::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
}
.sidebar-results-title {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 0.75rem;
}
.sidebar-result-item {
    margin-bottom: 1rem;
}
.sidebar-result-item:last-child {
    margin-bottom: 0;
}
.sidebar-result-label {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--fg-secondary);
    margin-bottom: 2px;
}
.sidebar-result-value {
    font-family: var(--font-mono);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--result-color);
}
.sidebar-result-unit {
    font-size: var(--text-xs);
    color: var(--result-unit);
    margin-left: 2px;
}
.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 0.75rem 0;
}

.sidebar-links {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
}
.sidebar > * + * {
    margin-top: 0.75rem;
}
.sidebar-links-title {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: 0.5rem;
}
.sidebar-link {
    display: block;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    transition: color 0.15s;
}
.sidebar-link:last-child {
    border-bottom: none;
}
.sidebar-link:hover {
    color: var(--accent);
}
.sidebar-link span {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    display: block;
}
.sidebar-link--active {
    color: var(--accent);
    font-weight: 600;
}

/* === Reusable category navigation (components/category_nav.html) ===
   Desktop: vertical list with aria-current on the active link.
   Mobile:  native <select> that navigates on change.
   Swap is CSS-only — both variants sit in the template and each layout picks
   which one to show. Components (stn sidebar, mobile top-of-page wrap) hide
   the variant they don't want. */
.category-nav {
    display: block;
}
.category-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.category-nav-link {
    display: block;
    padding: 0.4rem 0;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border);
    transition: color 0.15s;
}
.category-nav-list > li:last-child .category-nav-link {
    border-bottom: none;
}
.category-nav-link:hover {
    color: var(--accent);
}
.category-nav-link--active,
.category-nav-link[aria-current="page"] {
    color: var(--accent);
    font-weight: 600;
}
.category-nav-select-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: 0.35rem;
}
.category-nav-select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    cursor: pointer;
}

/* Default viewport (>900px desktop) — show list, hide select. */
.category-nav-select,
.category-nav-select-label {
    display: none;
}

/* Converter-specific: the mobile-only wrapper is hidden on desktop. */
.converter-category-mobile {
    display: none;
}
.converter-category-mobile .category-nav {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* === Calc Disclaimer ===
   Permanent, non-dismissable per-tool notice. Spans both rail columns
   so it sits squarely under the calculator on every breakpoint. Muted
   styling so it never competes with the result panel. */
.calc-disclaimer {
    grid-column: 1 / -1;
    margin-top: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--fg-secondary);
    text-align: center;
}

/* === Below Fold ===
   Mobile-only related links: on desktop the .sidebar-links rail already
   shows Related Tools, so we hide this to avoid duplication. */
.below-fold {
    grid-column: 1 / -1;
    padding: 2rem 0 3rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 3;
    background: var(--bg-primary);
    display: none;
}
@media (max-width: 900px) {
    .below-fold { display: block; }
}
.below-fold-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.below-fold-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.related-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.related-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    transition: all 0.2s cubic-bezier(.16,1,.3,1);
    display: block;
    color: var(--fg);
}
.related-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    color: var(--fg);
}
.related-card h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 3px;
}
.related-card p {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.upgrade-prompt {
    text-align: center;
    padding: 1rem;
    background: var(--accent-subtle);
    border: 1px solid rgba(251,191,36,0.1);
    border-radius: var(--radius);
}
.upgrade-prompt p {
    color: var(--fg-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* === Output Tabs (underline style) === */
.output-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
}
.output-tab {
    padding: 0.5rem 0.875rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
    margin-bottom: -1px;
}
.output-tab:hover {
    color: var(--fg-secondary);
}
.output-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* === Stage Tabs (pill style) === */
.pill-tab {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-secondary);
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
}
.pill-tab:hover {
    color: var(--fg);
    border-color: var(--border-hover);
}
.pill-tab--active {
    color: var(--accent);
    background: var(--accent-subtle);
    border-color: rgba(251,191,36,0.2);
}

/* === Sub-cards (gear stages) === */
.sub-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
[data-theme="light"] .sub-card {
    background: rgba(0,0,0,0.02);
}
.sub-card:last-of-type {
    margin-bottom: 0;
}
.sub-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.sub-card-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.stage-add {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.15s;
}
.stage-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* === Form Elements === */
input[type="number"],
input[type="text"],
select {
    font-family: var(--font-body);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
.form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-secondary);
    margin-bottom: var(--space-xs);
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
.form-check label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--fg-secondary);
    cursor: pointer;
}
.form-control {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--fg);
    font-size: 1rem;
    box-sizing: border-box;
}
.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: 0.85rem;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* === Converter Layout === */
.converter-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-md);
    align-items: end;
}
/* Grid columns default to min-width:auto, so the intrinsic size of the
   inputs can push the row past the card width — pinning children to 0
   lets them shrink and stay within the content column. */
.converter-from,
.converter-to {
    min-width: 0;
}
/* .converter-to is the anchor for the absolutely-positioned sci-toggle
   that floats into the "To" label row. */
.converter-to {
    position: relative;
}
.converter-arrow {
    font-size: var(--text-xl);
    color: var(--fg-muted);
    padding-bottom: var(--space-sm);
    text-align: center;
}
.converter-swap {
    align-self: end;
    margin-bottom: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-secondary);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.converter-swap svg {
    transform: rotate(90deg);
}
.converter-swap:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.converter-swap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Sci-toggle pins to the top-right of .converter-to (which is
   position:relative above) so it sits inline with the "To" label. */
.conversion-sci-toggle {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    z-index: 1;
}
.conversion-sci-toggle[hidden] { display: none; }
/* Compact pill that sits inline with the "To" label. Hairline border
   instead of the old dashed-draft look; pressed state fills with the
   accent tint so the current mode reads at a glance. */
.sci-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
    font-family: var(--font-mono);
    font-size: var(--text-xs, 0.75rem);
    color: var(--fg-muted);
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sci-toggle-btn:hover {
    color: var(--fg);
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.sci-toggle-btn[aria-pressed="true"] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.sci-toggle-preview {
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.sci-toggle-btn[aria-pressed="true"] .sci-toggle-preview { color: var(--accent); }

/* Belt-length 4-field validation: green when inputs agree, amber when
   they don't. When inconsistent, the displayed value is muted so the
   user sees the number plus a clear "doesn't match your inputs" signal
   — one of the four inputs is off, we just can't tell which. */
/* Specificity bump: the belt-length template inlines a .result-label rule
   that loads after main.css and would otherwise win on a single-class tie. */
.result-label.belt-result-warning {
    color: var(--warning, #b4631a);
    font-weight: 500;
}
.result-label.belt-result-ok {
    color: var(--success, #2f855a);
    font-weight: 500;
}
#belt-results.is-inconsistent .value-field-input {
    color: var(--fg-muted);
}
#belt-results.is-inconsistent .value-field-unit {
    color: var(--fg-muted);
}

/* === SEO Cards === */
.seo-cards {
    margin-top: var(--space-2xl);
}
.seo-cards h2 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
}
.seo-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
}
.seo-card-grid--popular {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.seo-card-grid--popular .seo-card {
    background: var(--bg-card-hover, var(--bg-card));
}
.pair-grid-subhead {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted, var(--text-secondary));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-sm);
}
/* Soft hairline divider between stacked chunks inside a card. Apply to
   any block element; composes with the element's own styles (e.g. the
   converter formula row, the "Other <category>" subhead). Keep using
   this class rather than re-defining the border/padding each time. */
.divider-top {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}
.seo-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: border-color 0.15s;
    color: inherit;
    text-decoration: none;
    display: block;
    /* content-visibility lets the browser skip layout + paint for
       offscreen cards until they scroll into view. The 200-pair torque
       grid costs several seconds of render work otherwise; the intrinsic
       size hint reserves space so the scrollbar doesn't jump when cards
       are revealed. */
    content-visibility: auto;
    contain-intrinsic-size: auto 84px;
}
.seo-card:hover {
    border-color: var(--accent);
}
.seo-card--active {
    border-color: var(--accent);
    background: var(--bg-card-hover, var(--bg-card));
    box-shadow: 0 0 0 1px var(--accent);
}
.pair-formulas {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: var(--space-sm);
    /* margin-top comes from the .divider-top utility so the spacing
       travels with the hairline; don't re-add it here. */
}
.pair-formula {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    background: var(--bg-card-hover, var(--bg-card));
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.pair-formula--reverse {
    opacity: 0.85;
}
/* Matches the swap button's outer width (18px icon + 0.5rem padding ×2 +
   1px border ×2 = 36px) so the formula cells land under the input/output
   columns of .converter-grid exactly. */
.pair-formula-spacer {
    width: 2.25rem;
}
.pair-prose {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--fg);
}
.seo-card h3 {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 2px;
}
.seo-card p {
    font-size: 0.75rem;
    color: var(--fg-muted);
    margin: 0;
}

/* === Data Tables === */
.table-wrapper {
    overflow-x: auto;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.data-table th,
.data-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.data-table th {
    font-weight: 600;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.data-table tbody tr:hover {
    background: var(--bg-elevated);
}
.mono {
    font-family: var(--font-mono);
}
.text-success {
    color: var(--success);
    font-weight: 600;
}

/* === Gear Finder Inputs === */
.gear-finder-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* === Gear Finder Results (card grid) === */
.gf-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}
.gf-show-more-btn {
    display: block;
    margin: var(--space-md) auto 0 auto;
}
.gf-result-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: border-color 0.15s, transform 0.15s cubic-bezier(.16,1,.3,1);
}
.gf-result-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}
.gf-result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gf-result-card-rank {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.gf-result-card-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
}
.gf-result-card-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--fg);
}
.gf-result-card-pair {
    padding: 0.25rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.gf-result-card-arrow {
    color: var(--fg-muted);
    font-size: var(--text-sm);
}
.gf-result-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--border);
}
.gf-result-stat label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    margin-bottom: 0.2rem;
}
.gf-result-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--fg);
    font-weight: 500;
}
.gf-result-stat-value--perfect {
    color: var(--result-color);
    font-weight: 600;
}

/* === Auth Pages === */
.auth-page {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl) var(--space-md);
}
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-2xl);
    width: 100%;
    max-width: 420px;
}
.auth-card h1 {
    text-align: center;
    margin-bottom: var(--space-xs);
}
.auth-subtitle {
    text-align: center;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.auth-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--error);
    font-size: var(--text-sm);
}
.auth-error p { margin: 0; }
.auth-footer {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--fg-secondary);
}
.auth-legal-notice {
    margin-top: var(--space-md);
    margin-bottom: 0;
    font-size: var(--text-xs);
    color: var(--fg-secondary);
    text-align: center;
    line-height: 1.4;
}

/* === Account Pages === */
.account-page {
    max-width: 920px;
    margin: 0 auto;
}
.account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}
@media (min-width: 768px) {
    .account-grid { grid-template-columns: 1fr 1fr; }
}
.account-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
}
.account-card h3 {
    margin-bottom: var(--space-md);
}
.account-detail {
    font-size: var(--text-sm);
    color: var(--fg-secondary);
    margin-bottom: var(--space-xs);
}
.account-links {
    list-style: none;
    padding: 0;
}
.account-links li {
    margin-bottom: var(--space-sm);
}
.account-links a {
    font-size: var(--text-sm);
}

/* === Settings Form === */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.settings-section h2 {
    font-size: var(--text-base);
    margin-bottom: 0;
}

/* === Pricing Page === */
.pricing-page {
    text-align: center;
}
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}
@media (min-width: 768px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s;
}
.pricing-card:hover {
    border-color: var(--border-hover);
}
.pricing-card.featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    position: relative;
}
.pricing-badge {
    position: absolute;
    top: -12px;
    background: var(--accent);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 2px var(--space-md);
    border-radius: var(--radius-sm);
}
.pricing-tier-name {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.pricing-price {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--accent);
    margin-bottom: var(--space-sm);
}
.pricing-price span {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--fg-muted);
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0;
    text-align: left;
    width: 100%;
}
.pricing-features li {
    font-size: var(--text-sm);
    color: var(--fg-secondary);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
}
.pricing-features li:last-child {
    border-bottom: none;
}
/* Push the action (form / button / span) to the bottom of the card so all
   three "Upgrade" / "Current plan" pills line up across the row regardless
   of how many features each tier has. */
.pricing-features {
    flex: 1 0 auto;
}
.pricing-card > form,
.pricing-card > a.btn,
.pricing-card > span.btn {
    margin-top: auto;
    width: 100%;
    text-align: center;
}
/* .btn is display:inline-flex, so width:100% alone leaves the label
   hugging the left edge — we need justify-content:center to actually
   center the text inside the button. */
.pricing-card > form button,
.pricing-card > a.btn,
.pricing-card > span.btn {
    width: 100%;
    justify-content: center;
}
.pricing-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    margin: var(--space-lg) auto 0;
}
.pricing-toggle-option {
    background: transparent;
    border: none;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-xs) var(--space-lg);
    border-radius: calc(var(--radius) - 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: background 0.15s, color 0.15s;
}
.pricing-toggle-option:hover {
    color: var(--fg);
}
.pricing-toggle-option.active {
    background: var(--accent);
    color: #fff;
}
.pricing-toggle-badge {
    font-size: calc(var(--text-sm) * 0.85);
    font-weight: 500;
    opacity: 0.9;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.18);
}
.pricing-toggle-option:not(.active) .pricing-toggle-badge {
    background: var(--accent-subtle);
    color: var(--accent);
}
.early-bird {
    background: var(--accent-subtle);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
}
.early-bird h3 {
    color: var(--accent);
}
.rate-limit-banner {
    background: rgba(251,191,36,0.12);
    border-bottom: 1px solid rgba(251,191,36,0.30);
    color: #fcd34d;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-size: var(--text-sm);
}
.rate-limit-banner a {
    color: #fde68a;
    font-weight: 600;
    text-decoration: underline;
}
/* Compact pill anchored to the right edge of topbar-actions. In the
   collapsed state only the remaining count is visible inside a small
   circular/pill shape. On click (or the auto-threshold trigger) the
   pill expands LEFTWARD, revealing "/ <limit> left today" inside a
   grid-template-columns 0fr → 1fr transition (no JS width math).
   The (i) info button sits next to the pill and shows the reset
   time on hover/focus via its tooltip. */
/* The outer wrapper reserves a collapsed-width slot in the topbar
   flex flow (min-width: 40px height: 24px) so expansion never
   shifts neighboring items like Articles/Tools in the main nav.
   The pill is absolutely positioned with right:0, so widening
   simply grows leftward into the flex gap. */
/* Topbar usage pill. The outer .rate-usage wrapper is sized to the
   COLLAPSED pill exactly (46×28) so it reserves a tight slot in the
   topbar flex — no empty gap on either side. The pill itself is
   absolutely positioned inside and grows leftward into the flex gap
   when expanded, without pushing neighboring items. We deliberately
   avoid flex `gap` on the pill because gap also counts between
   zero-width flex items (the collapsed tail and info), which would
   make the collapsed pill wider than the slot. Margins on the
   visible siblings carry the spacing only when expanded. */
.rate-usage {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 28px;
    vertical-align: middle;
}
.rate-usage__pill {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 28px;
    padding: 0 12px;
    /* Match the theme-toggle button: subtle border, no fill, small
       rounded corners. Keeps the two neighbors visually paired. */
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-secondary);
    background: none;
    border: 1px solid var(--border);
    transition: color 0.15s, background 0.15s, border-color 0.15s, padding 0.22s ease-out;
}
.rate-usage__pill[aria-expanded="true"] {
    justify-content: flex-start;
    padding: 0 12px 0 16px;
}
.rate-usage__pill:hover,
.rate-usage__pill:focus-within {
    color: var(--fg);
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}
.rate-usage__toggle {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.rate-usage__toggle:focus-visible { outline: none; }
.rate-usage__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    font-weight: 700;
    font-size: var(--text-sm);
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.rate-usage__pill[aria-expanded="true"] .rate-usage__num {
    margin-right: 8px;
}
/* max-width transition animates the reveal. The grid-template-columns
   0fr→1fr trick collapses to 0 inside a flex item with auto width, so
   we use a generous max-width cap (wider than the real content) and
   let the intrinsic content width take over when expanded. */
.rate-usage__tail {
    display: inline-flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width 0.24s ease-out, opacity 0.18s ease-out;
}
.rate-usage__tail-inner {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.rate-usage__pill[aria-expanded="true"] .rate-usage__tail {
    max-width: 280px;
    opacity: 1;
}
.rate-usage__sep {
    margin: 0 6px;
    color: var(--fg-muted);
    font-weight: 400;
}
.rate-usage__limit {
    color: var(--fg-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}
.rate-usage__label {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
}
/* (i) lives inside the pill, only visible when expanded. Max-width
   and opacity drive the reveal so it participates in the same
   expansion timing as the tail. */
.rate-usage__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: transparent;
    color: var(--fg-muted);
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    font-size: calc(var(--text-sm) * 0.8);
    font-style: italic;
    font-weight: 600;
    font-family: Georgia, "Times New Roman", serif;
    cursor: help;
    transition: opacity 0.18s ease-out, max-width 0.22s ease-out,
                margin-left 0.22s ease-out, color 0.15s;
}
.rate-usage__pill[aria-expanded="true"] .rate-usage__info {
    opacity: 1;
    max-width: 22px;
    margin-left: 10px;
}
.rate-usage__info:hover,
.rate-usage__info:focus-visible {
    color: var(--fg);
    outline: none;
}
.rate-usage--caution .rate-usage__pill {
    color: #fcd34d;
    border-color: rgba(251,191,36,0.35);
    background: rgba(251,191,36,0.08);
}
.rate-usage--warning .rate-usage__pill {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
}
.rate-usage__tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--fg);
    font-size: calc(var(--text-sm) * 0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 50;
}
.rate-usage__tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.invoice-table th,
.invoice-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.invoice-table th {
    color: var(--fg-secondary);
    font-weight: 600;
    background: var(--bg-card-hover, rgba(255,255,255,0.02));
}
.invoice-table tr:last-child td {
    border-bottom: none;
}
.invoice-status {
    display: inline-block;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: calc(var(--text-sm) * 0.9);
    font-weight: 600;
}
.invoice-status--paid {
    background: rgba(34,197,94,0.10);
    color: var(--success, #4ade80);
}
.invoice-status--payment_failed {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
}
.invoice-status--refunded,
.invoice-status--void,
.invoice-status--uncollectible {
    background: rgba(148,163,184,0.15);
    color: var(--fg-secondary);
}

/* === Upgrade Page === */
.upgrade-page {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-md);
}
.upgrade-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-2xl);
}
.upgrade-card h2 {
    margin-bottom: var(--space-md);
}
.upgrade-card p {
    color: var(--fg-secondary);
    margin-bottom: var(--space-lg);
}

/* === Projects Page === */
.project-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.15s;
}
.project-card:hover {
    border-color: var(--border-hover);
}
.project-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
    min-height: 400px;
}
/* When nested inside a .rail-layout grid, span both columns so the
   project's own 280px + 1fr grid uses the full rail width. */
.rail-layout > .project-layout,
.rail-layout > .project-list-wrap {
    grid-column: 1 / -1;
}
.project-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    overflow-y: auto;
}
.project-sidebar-item {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--fg-secondary);
    transition: background 0.15s;
}
.project-sidebar-item:hover,
.project-sidebar-item.active {
    background: var(--bg-elevated);
    color: var(--fg);
}
.project-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
}

/* === Modal === */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-xl);
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}
.modal-header h3 { margin: 0; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--fg-secondary);
    padding: 0 4px;
}

/* === Footer === */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: var(--space-2xl);
    /* Vertical padding only — horizontal padding lives on .footer-inner /
       .footer-bottom so they line up with .content (border-box max-width) */
    padding: var(--space-2xl) 0 var(--space-xl);
    background: var(--bg-card);
}
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.footer-heading {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: var(--space-sm);
}
.footer-col a {
    display: block;
    padding: 3px 0;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    transition: color 0.15s;
}
.footer-col a:hover {
    color: var(--fg);
}
.footer-bottom {
    max-width: var(--max-width);
    margin: var(--space-xl) auto 0;
    padding: var(--space-md) 1.25rem 0;
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

/* === Article/Prose Content === */
.article-content {
    max-width: 800px;
}
.article-content h2 {
    margin-top: var(--space-xl);
}
.article-content p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}
.article-content ul, .article-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}
.article-content li {
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}
.article-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 3px;
}
.articles-grid {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.article-card h2 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
}
.article-date {
    color: var(--fg-muted);
    font-size: var(--text-sm);
}
.prose {
    line-height: 1.7;
}
.prose p {
    margin-bottom: var(--space-md);
}
.prose h2, .prose h3 {
    margin-top: var(--space-xl);
}
.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 3px;
}
.prose pre {
    background: var(--bg-elevated);
    padding: var(--space-md);
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}
.prose pre code {
    background: none;
    padding: 0;
}
.prose ul, .prose ol {
    margin: 0 0 var(--space-md) var(--space-lg);
}
.prose li {
    margin-bottom: var(--space-xs);
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: var(--text-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.prose th,
.prose td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.prose th {
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--fg);
}
.prose tr:last-child td {
    border-bottom: none;
}
.prose tr:hover td {
    background: var(--bg-elevated);
}

/* === Utility === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Field pair grid */
.field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Icon buttons */
.btn-icon {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 2px 8px;
    font-size: var(--text-sm);
    color: var(--fg-secondary);
    transition: all 0.15s;
    line-height: 1.5;
}
.btn-icon:hover {
    color: var(--fg);
    border-color: var(--border-hover);
    background: var(--bg-card);
}
.btn-icon--danger:hover {
    color: var(--error);
    border-color: var(--error);
}

/* === Responsive === */
@media (max-width: 900px) {
    :root {
        --rail-width: 24px;
    }

    /* Rail layout collapses to single column */
    .rail-layout {
        grid-template-columns: 1fr;
        padding: 0 0.75rem;
        gap: 0;
    }
    .rail-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 0 0.25rem;
    }
    .rail-head-left p {
        margin-left: 0;
    }

    /* Sidebar becomes fixed bottom bar */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        z-index: 200;
        padding: 0;
        background: rgba(14,14,17,0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(251,191,36,0.15);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    }
    [data-theme="light"] .sidebar {
        background: rgba(245,245,247,0.95);
        border-top-color: rgba(251,191,36,0.2);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    }
    .sidebar-results {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 0.625rem 0.75rem;
        background: none;
        border: none;
        border-radius: 0;
    }
    .sidebar-results::before { display: none; }
    .sidebar-results-title,
    .sidebar-divider { display: none; }
    .sidebar-result-item {
        min-width: 80px;
        margin-bottom: 0;
    }
    .sidebar-result-value { font-size: var(--text-base); }
    .sidebar-result-label { font-size: 0.5625rem; }
    .sidebar-links { display: none; }

    /* Category nav: hide the desktop list + show the mobile dropdown. The
       .converter-category-mobile wrap becomes visible at this breakpoint. */
    .converter-category-mobile { display: block; }
    .category-nav-list { display: none; }
    .category-nav-select,
    .category-nav-select-label { display: block; }

    /* Tighter stations */
    .station { margin-bottom: 0.75rem; }
    .stn-card { padding: 1rem; }
    .rail-col::before { left: 7px; }
    .station-dot {
        left: calc(-1 * var(--rail-width) + 4px);
        top: calc(1.75rem - 4px);
        width: 8px;
        height: 8px;
    }

    /* Compact fields. Input font-size is pinned to 16px: iOS Safari
       auto-zooms any focused input <16px, which on iPhone SE turns into
       a horizontal scroll as soon as you tap a field. */
    .field-pair { grid-template-columns: 1fr; }
    .value-field-input { padding: 0.5rem 0.625rem; font-size: 16px; }
    .value-field-unit { padding: 0.5rem 0.375rem; min-width: 3.25rem; font-size: 0.75rem; }
    .value-field label { font-size: 0.75rem; margin-bottom: 3px; }

    .results-inline { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
    .result-inline-value { font-size: var(--text-lg); }
    .result-inline-label { font-size: 0.625rem; }
    .result-inline-unit { font-size: var(--text-xs); }
    .sec-h { margin-bottom: 0.75rem; }
    .sec-title { font-size: 0.875rem; }

    .below-fold .related-grid { grid-template-columns: 1fr; }
    .below-fold { padding-bottom: 5rem; }

    .main-nav { display: none; }
    .topbar-auth { display: none; }
    .mobile-menu-btn { display: flex; }
    .content { padding: var(--space-md); }
    .site-footer {
        margin-top: var(--space-md);
        padding: var(--space-lg) 0 var(--space-md);
    }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-md); padding: 0 var(--space-md); }
    .footer-inner .footer-col:last-child { grid-column: 1 / -1; }
    .footer-bottom { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md) 0; }

    /* Converter */
    .converter-grid { grid-template-columns: 1fr; }
    .converter-arrow {
        text-align: center;
        transform: rotate(90deg);
        padding: 0;
    }
    .pair-formulas { grid-template-columns: 1fr; }
    .pair-formula-spacer { display: none; }

    /* Gear finder */
    .gear-finder-inputs { grid-template-columns: 1fr; }

    /* Projects */
    .project-layout { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .results-inline { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .rail-head-right { gap: 0.25rem; }
    .rail-head-right .btn { padding: 4px 8px; font-size: 0.75rem; }
}

/* === Homepage: hero-large, featured-tool, tool-grid, badges === */
/* Design ported from v0.3.0's landing page. */

.hero-large {
    padding: var(--space-2xl) 0 var(--space-xl);
}
.hero-large h1 {
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    margin-bottom: var(--space-lg);
}

.typewriter-heading {
    min-height: 2.4em;
    text-align: center;
    /* Inline flow (not flex) so the cursor stays right after the last
       typed character across line breaks. `pre-wrap` on the text span
       keeps spaces between words but still wraps at word boundaries,
       which matters on narrow viewports (iPhone SE) where phrases like
       "Your Application in Motion" are wider than the screen. */
}
.typewriter {
    white-space: pre-wrap;
}
.typewriter-cursor {
    display: inline-block;
    margin-left: 0.05em;
    font-weight: 400;
    color: var(--accent, currentColor);
    animation: typewriter-blink 1s steps(1) infinite;
}
.typewriter-cursor--typing {
    animation: none;
    opacity: 1;
}
@keyframes typewriter-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .typewriter-cursor { display: none; }
}
.hero-large .hero-subtitle {
    font-size: var(--text-lg);
    max-width: 640px;
    margin: 0 auto var(--space-xl);
}
.hero-large .hero-actions {
    flex-wrap: wrap;
}

.btn-lg {
    padding: 0.625rem 1.25rem;
    font-size: var(--text-base);
}
.btn-xl {
    padding: 0.75rem 1.75rem;
    font-size: var(--text-lg);
    font-weight: 600;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--fg-secondary);
    margin-bottom: var(--space-sm);
}
.badge-primary {
    background: var(--accent);
    color: #fff;
}

.featured-tool {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: var(--space-xl) 0 var(--space-2xl);
}
@media (min-width: 768px) {
    .featured-tool {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
    }
}
.featured-tool-content h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}
.featured-tool-content p {
    color: var(--fg-secondary);
    margin-bottom: var(--space-lg);
    font-size: var(--text-base);
}
.featured-tool-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    color: var(--accent);
    opacity: 0.75;
}

.feature-list {
    list-style: none;
    margin-bottom: var(--space-lg);
    padding: 0;
}
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--fg-secondary);
    font-size: var(--text-sm);
}
.feature-list li::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.section-heading {
    font-size: var(--text-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
}
.tool-category-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--fg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}
.home-tools .tool-category-title:first-of-type {
    margin-top: 0;
}

.tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}
@media (min-width: 640px) {
    .tool-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .tool-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .tool-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.tool-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    text-align: center;
    color: var(--fg);
    display: block;
    transition: border-color 0.2s, transform 0.2s cubic-bezier(.16,1,.3,1), box-shadow 0.2s;
}
.tool-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    color: var(--fg);
}
.tool-card .tool-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius);
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tool-card h3 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}
.tool-card p {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin: 0;
}
.tool-card-featured {
    border-color: var(--accent);
    border-width: 1.5px;
}
.tool-card-featured:hover {
    border-color: var(--accent-hover);
}
.tool-card-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    margin-bottom: 0;
}

.home-articles {
    margin-top: var(--space-2xl);
}
.home-articles .section-heading {
    text-align: left;
}
.home-upgrade {
    margin-top: var(--space-2xl);
    text-align: center;
}

/* === User menu (logged-in topbar) ============================== */
.user-menu {
    position: relative;
}
.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    color: var(--fg-secondary);
    line-height: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: var(--font-body);
}
.user-menu__trigger:hover,
.user-menu__trigger[aria-expanded="true"],
.user-menu:hover .user-menu__trigger,
.user-menu:focus-within .user-menu__trigger {
    border-color: var(--accent);
}
.user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #1a1d21;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.02em;
    user-select: none;
}
[data-theme="light"] .user-menu__avatar {
    color: #1a1d21;
}
.user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    padding: 6px;
    z-index: 1100;
    display: none;
}
[data-theme="light"] .user-menu__panel {
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.user-menu__panel.is-open { display: block; }
/* Desktop hover-intent: opening on hover (click still works on touch and
   keyboard). The :focus-within keeps the panel open while a child has
   focus, so tabbing through items doesn't snap it shut. */
@media (hover: hover) and (pointer: fine) {
    .user-menu:hover .user-menu__panel,
    .user-menu:focus-within .user-menu__panel { display: block; }
    /* Bridge the visual gap between trigger and panel so pulling the
       cursor down doesn't briefly leave .user-menu and close the menu. */
    .user-menu::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        width: 280px;
        height: 12px;
    }
}
.user-menu__header {
    padding: 10px 12px 12px;
}
.user-menu__email {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu__meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--fg-secondary);
}
.user-menu__tier {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    color: var(--fg-secondary);
}
.user-menu__tier--pro {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.user-menu__tier--expert {
    color: #1a1d21;
    background: var(--accent);
    border-color: var(--accent);
}
.user-menu__usage {
    font-variant-numeric: tabular-nums;
}
.user-menu__group {
    border-top: 1px solid var(--border);
    padding: 4px;
}
.user-menu__group:first-child { border-top: none; }
.user-menu__group--end { padding-bottom: 4px; }
.user-menu__group-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-secondary);
    padding: 6px 10px 4px;
}
.user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-secondary);
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
}
.user-menu__item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    opacity: 0.85;
}
.user-menu__item:hover {
    background: var(--bg-elevated);
    color: var(--fg);
}
.user-menu__item--active {
    color: var(--accent);
    background: var(--accent-subtle);
    font-weight: 600;
}
.user-menu__item--active:hover {
    color: var(--accent);
    background: var(--accent-subtle);
}
.user-menu__item--active svg { opacity: 1; }
.user-menu__item--danger {
    color: var(--fg-secondary);
}
.user-menu__item--danger:hover {
    color: #ef5b5b;
    background: rgba(239,91,91,0.08);
}

/* Theme segmented control inside the user menu */
.user-menu__group--theme {
    padding: 8px 8px 10px;
}
.theme-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}
.theme-segmented__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--fg-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-body);
}
.theme-segmented__btn svg {
    width: 13px;
    height: 13px;
}
.theme-segmented__btn:hover {
    color: var(--fg);
}
.theme-segmented__btn[aria-checked="true"] {
    background: var(--bg-card);
    color: var(--fg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[data-theme="light"] .theme-segmented__btn[aria-checked="true"] {
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* === Hybrid rate-pill: hide unless <25% remaining (logged-in) === */
.rate-usage[data-hybrid="1"] {
    display: none;
}
.rate-usage[data-hybrid="1"].rate-usage--caution,
.rate-usage[data-hybrid="1"].rate-usage--warning {
    display: block;
}

/* === Account dashboard ========================================= */
.dashboard {
    max-width: 920px;
    margin: 0 auto;
}
.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}
.dashboard-header h1 {
    margin-bottom: 4px;
}
.dashboard-subtitle {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin: 0;
}
.dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}
.dash-card--plan {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
}
.dash-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}
.dash-card__head:last-child { margin-bottom: 0; }
.dash-card__eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-secondary);
    margin-bottom: 4px;
}
.dash-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dash-card__title-muted {
    color: var(--fg-secondary);
    font-weight: 400;
    font-size: 1rem;
}
.dash-card__link {
    font-size: var(--text-sm);
    color: var(--fg-secondary);
    font-weight: 500;
    white-space: nowrap;
}
.dash-card__link:hover { color: var(--accent); }
.dash-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-card__hint {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin: 8px 0 0;
}
.dash-card__error {
    color: #ef5b5b;
    font-size: var(--text-sm);
    margin: 8px 0 0;
}
.dash-card__empty {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    margin: 0;
    padding: var(--space-sm) 0;
}
.dash-card__foot {
    margin-top: var(--space-md);
}
.plan-pill {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--fg-secondary);
}
.plan-pill--pro {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.plan-pill--expert {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1d21;
}

/* Usage block */
.usage-block { margin-top: var(--space-md); }
.usage-block__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.usage-block__label {
    font-size: var(--text-sm);
    color: var(--fg-secondary);
}
.usage-block__value {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}
.usage-block__value strong { font-weight: 600; }
.usage-block__total {
    color: var(--fg-secondary);
    font-weight: 400;
    margin-left: 4px;
}
.usage-bar {
    height: 8px;
    background: var(--bg-elevated);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.usage-bar__fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.3s ease;
    border-radius: 999px;
}
.usage-bar__fill--caution { background: #f59e0b; }
.usage-bar__fill--warning { background: #ef5b5b; }
.usage-block__foot {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--fg-secondary);
}

.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 720px) {
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .dash-grid .dash-card { margin-bottom: 0; }
}

.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg-elevated);
    font-size: var(--text-sm);
}
.dash-list__title {
    color: var(--fg);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.dash-list__title:hover { color: var(--accent); }
.dash-list__meta {
    color: var(--fg-secondary);
    font-size: 0.75rem;
    flex: 0 0 auto;
}
.dash-list__meta--mono {
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* Ghost button variant — must come AFTER .btn-sm to override its accent fill */
.btn-ghost,
.btn-sm.btn-ghost {
    background: transparent;
    color: var(--fg-secondary);
    border-color: var(--border);
    font-weight: 500;
}
.btn-ghost:hover,
.btn-sm.btn-ghost:hover {
    background: var(--bg-elevated);
    color: var(--fg);
    border-color: var(--border-hover);
}
.inline-form { display: inline-flex; }

.invoice-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-md);
}

/* === Settings: preference rows ================================== */
.prefs {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.prefs-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.prefs-group__head {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.prefs-group__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 2px;
}
.prefs-group__sub {
    margin: 0;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
}
.prefs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.prefs-row:last-child { border-bottom: none; }
.prefs-row[hidden] { display: none; }
.prefs-row__main {
    flex: 1 1 auto;
    min-width: 0;
}
.prefs-row__label {
    display: block;
    font-weight: 500;
    color: var(--fg);
    font-size: 0.9rem;
    margin-bottom: 2px;
    cursor: default;
}
.prefs-row__hint {
    margin: 0;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.prefs-row__hint em {
    font-style: normal;
    color: var(--fg);
    font-weight: 500;
}
.prefs-row__control {
    flex: 0 0 auto;
}
.prefs-select,
.prefs-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: 6px 10px;
    min-width: 180px;
    transition: border-color 0.15s, background 0.15s;
}
.prefs-select:hover,
.prefs-input:hover {
    border-color: var(--border-hover);
}
.prefs-select:focus,
.prefs-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
}
.prefs-input--num { min-width: 100px; }

/* iOS-style toggle */
.prefs-toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.prefs-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.prefs-toggle__track {
    display: block;
    width: 38px;
    height: 22px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    position: relative;
    transition: background 0.18s, border-color 0.18s;
}
.prefs-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fg-secondary);
    transition: transform 0.18s, background 0.18s;
}
.prefs-toggle input:checked + .prefs-toggle__track {
    background: var(--accent);
    border-color: var(--accent);
}
.prefs-toggle input:checked + .prefs-toggle__track::after {
    transform: translateX(16px);
    background: #fff;
}
.prefs-toggle input:focus-visible + .prefs-toggle__track {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.prefs-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* On narrow screens, stack the row instead of squeezing the control */
@media (max-width: 600px) {
    .prefs-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .prefs-select,
    .prefs-input {
        width: 100%;
    }
}