/*
 * The tool-page design language, ported from homepage/src/template.html.
 *
 * /vehicles must not look like a different site from /awg-to-amps: same dark
 * palette, same monospace kickers, same hairline borders, no rounded corners,
 * no shadows other than the flat offset the panels already use. The tokens
 * below are copied from that template rather than reinvented, so a change
 * there is a one-file change here.
 */

:root {
    color-scheme: dark;
    --bg: #0d0e0e;
    --panel: rgba(17, 19, 19, 0.92);
    --panel-soft: rgba(21, 23, 22, 0.72);
    --text: #dcd9d4;
    --muted: #a69e92;
    /* The static site's --faint is #777064, which measures 3.95:1 against the
       background and 3.81:1 against a panel — under WCAG AA's 4.5:1 for text
       this size. The site can afford it on a decorative caption; the wiki
       cannot, because the same token carries a value's note and its citation,
       which are text a reader is meant to read. Twelve points lighter clears
       AA on both grounds and is the smallest change that does. */
    --faint: #837c70;
    --line: #7d7466;
    --line-soft: rgba(125, 116, 102, 0.34);
    --line-faint: rgba(125, 116, 102, 0.14);
    --accent: #ebe4d2;
    --accent-soft: #c5c0b1;
    --good: #b9ca9c;
    --warn: #d7b47a;
    --danger: #df9b87;
    --shadow: rgba(0, 0, 0, 0.32);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

* {
    box-sizing: border-box;
}

/* Class rules like `.field { display: grid }` outrank the UA stylesheet's
   `[hidden] { display: none }`, so hidden fields would stay visible. */
[hidden] {
    display: none !important;
}

html {
    background: var(--bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background-color: var(--bg);
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.45;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: '';
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--line-faint) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-faint) 1px, transparent 1px);
    background-position: center;
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.36) 70%, transparent);
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: var(--text);
}

:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

.page {
    width: min(1360px, calc(100% - 40px));
    margin: 0 auto;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.brand {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.topbar-meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.langswitch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.langswitch a,
.langswitch span {
    padding: 3px 6px;
    border: 1px solid var(--line-soft);
    text-decoration: none;
}

.langswitch [aria-current='true'] {
    color: var(--accent);
    border-color: var(--accent-soft);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 16px 0 0;
    list-style: none;
}

.breadcrumb li::after {
    margin-left: 8px;
    content: '/';
    color: var(--line);
}

.breadcrumb li:last-child::after {
    content: '';
}

.breadcrumb a {
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--accent-soft);
}

.eyebrow,
.section-kicker,
.micro-label,
.table-note,
.source-note,
.breadcrumb,
.footer {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 860px;
    margin-bottom: 20px;
    color: var(--accent);
    font-size: clamp(2.1rem, 4.4vw, 3.8rem);
    font-weight: 650;
    letter-spacing: -0.06em;
    line-height: 0.98;
}

.hero {
    padding: 40px 0 42px;
}

.hero p {
    max-width: 660px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 17px;
}

.panel {
    margin-bottom: 26px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 12px 12px 0 var(--shadow);
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
}

.panel-header h2 {
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -0.025em;
}

.panel-header p {
    max-width: 520px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 13px;
}

.panel-body {
    padding: 22px 24px 24px;
}

.count {
    padding-top: 3px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    white-space: nowrap;
}

.table-wrap {
    overflow-x: auto;
    scrollbar-color: var(--line) transparent;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

caption {
    padding: 0 24px 12px;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

thead th {
    padding: 12px 11px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

tbody th[scope='row'] {
    padding: 12px 11px 12px 24px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

tbody td {
    padding: 12px 11px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}

tbody td:last-child {
    padding-right: 24px;
}

.value {
    font-family: var(--mono);
}

.unit {
    color: var(--faint);
    font-size: 10px;
}

/* An unknown value renders as an em dash and never as the source's wording. */
.unknown {
    color: var(--faint);
}

/* A number this page computed from the stored canonical value, rather than one
   the source quoted. The distinction is not decoration: a converted figure
   carries the rounding of two conversions, and a reader checking it against
   the manufacturer needs to know which they are looking at. */
.converted {
    color: var(--muted);
}

.note,
.provenance {
    display: block;
    margin-top: 4px;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
}

.provenance a {
    color: var(--accent-soft);
}

/* The ends of a comparison row. A fact about the numbers, not a verdict about
   the bikes: a taller seat is not a better one. Rows whose values were measured
   differently never get one, because they were split into separate rows. */
.extreme {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid var(--line-soft);
    color: var(--good);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pick-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px 20px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.pick-list label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

/* The comparison's first column stays put while the rest scrolls, or the
   attribute name is gone by the third vehicle. */
.compare-table th[scope='row'] {
    position: sticky;
    left: 0;
    background: var(--panel);
}

/* A row whose values were measured differently. Annotated rather than
   summarised: no "more torque" verdict is available across measuring points. */
.convention-note {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 5px;
    border: 1px solid var(--line-soft);
    color: var(--warn);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fallback-note {
    margin-bottom: 22px;
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--warn);
    padding: 12px 16px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 13px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    background: var(--line-soft);
}

.card {
    padding: 18px 20px;
    background: var(--panel);
    text-decoration: none;
}

.card:hover {
    background: var(--panel-soft);
}

.card h3 {
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.card p {
    margin-bottom: 0;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 22px;
    border: 1px solid var(--line);
    padding: 16px 20px;
    background: var(--panel);
    box-shadow: 12px 12px 0 var(--shadow);
}

.toolbar select,
.toolbar input {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;
    background: rgba(13, 14, 14, 0.72);
    padding: 7px 10px;
    color: var(--accent);
    font-size: 13px;
}

.toolbar button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 7px 14px;
    color: var(--accent);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.toolbar button:hover,
.toolbar select:hover,
.toolbar select:focus,
.toolbar input:focus {
    border-color: var(--accent-soft);
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 70px;
    padding: 18px 0 28px;
    border-top: 1px solid var(--line);
    color: var(--faint);
    font-size: 10px;
}

.footer div:last-child {
    text-align: right;
}

@media (max-width: 720px) {
    .topbar {
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .footer {
        flex-direction: column;
    }

    .footer div:last-child {
        text-align: left;
    }
}

/* ---- Forms ------------------------------------------------------------- */

.form-panel {
    max-width: 640px;
}

.field {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.field label {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;
    background: rgba(13, 14, 14, 0.72);
    padding: 8px 10px;
    color: var(--accent);
    font-size: 14px;
}

.field textarea {
    min-height: 180px;
    font-family: var(--mono);
    line-height: 1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--accent-soft);
}

.field .help {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
}

button[type='submit'] {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 8px 18px;
    color: var(--accent);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

button[type='submit']:hover {
    border-color: var(--accent-soft);
}

/* Errors are the application's own markup, in the page's language and
   styling. html5_validation is on, so the browser does not race this with a
   native bubble that would stop the submit event before the list renders. */
.form-error,
.field ul,
.form-errors {
    margin: 0 0 14px;
    border-left: 2px solid var(--danger);
    padding: 8px 0 8px 12px;
    color: var(--danger);
    font-size: 13px;
    list-style: none;
}

.field ul {
    margin: 0;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--danger);
}

/* The honeypot. Off-screen rather than display:none — a form-filler skips what
   is hidden and fills what is merely invisible, which is the whole point. Kept
   out of the tab order and out of the accessibility tree by the row's
   aria-hidden, so nobody reading the page ever meets it. */
.honeypot-row {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Sign in with Google ---------------------------------------------- */

/* A link that looks like a button. Google's own mark, inlined as SVG — the
   site loads no remote images, and a sign-in button is not the place to start. */
.oauth-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    padding: 8px 18px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.oauth-button:hover,
.oauth-button:focus-visible {
    border-color: var(--accent-soft);
}

/* A rule with a word in the middle of it. */
.or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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