/*
 * AppsForMyCar v3, the "cyber" variant (SITE_THEME=cyber, docs/site-themes.md). Loaded after site.css on
 * the website and after account.css in the account; plain CSS, no build step.
 *
 * A night-city dashboard on v3's structure: the lanes, the kerb, the centre line and every template stay.
 * What changes: a blue-black page with a faint grid, three neon colours with one job each (cyan = the
 * line, links and edges; magenta = the one main action and "you are here"; acid = the live figure),
 * Chakra Petch for headings and figures, cut corners on buttons, thin rules that start with a bright
 * tick, corner brackets on the panels that matter, and a centre line that glows and drifts.
 * Body text never glows and is never neon on neon. Contrast of every pair: docs/site-themes-contrast.txt.
 *
 * Night is the main look. The daylight one (device or account set to light) keeps the header, the page
 * opening, the footer and the account's top bar at night, and puts the rest on a pale panel with the
 * same three colours darkened until they read.
 *
 * html.v3 = the website (follows the device's light/dark). html.fi = the account (Filament's .dark).
 */

/* Chakra Petch 600 and 700, self-hosted. SIL Open Font License 1.1 (The Chakra Petch Project Authors). */
@font-face {
    font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 600;
    src: url("chakra-petch-latin-ext-600.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 600;
    src: url("chakra-petch-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 700;
    src: url("chakra-petch-latin-ext-700.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 700;
    src: url("chakra-petch-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- The two palettes, once ---------- */
html {
    --n-void: #070a12;      /* night page */
    --n-deck: #0d1320;      /* night quiet band, panels */
    --n-panel: #0a0f1c;     /* night bars: header, footer, account top bar */
    --n-text: #dbe7f5;
    --n-muted: #9fb1c9;
    --n-hair: #27364f;      /* thin rules */
    --n-edge: #5f7391;      /* field borders, strong rules */
    --n-cyan: #00e5ff;
    --n-mag: #ff2e88;
    --n-acid: #d7ff3a;
    --n-ok: #3dffa2;
    --n-warn: #ffc457;
    --n-bad: #ff8a7a;

    --d-page: #eef3f8;      /* daylight page */
    --d-band: #e1e9f2;      /* daylight quiet band */
    --d-field: #ffffff;
    --d-text: #0b1220;
    --d-muted: #3d4c63;
    --d-hair: #b0bfd2;
    --d-edge: #5f7391;
    --d-cyan: #00657a;
    --d-mag: #b80058;
    --d-acid: #4a5c00;
    --d-ok: #086040;
    --d-warn: #7d4a00;
    --d-bad: #a8201a;

    --cy-display: "Chakra Petch", "Archivo", "Bahnschrift", "DIN Alternate", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --cy-cut: 10px;
}

/* ====================================================================== */
/* Website                                                                */
/* ====================================================================== */

/* Daylight (the device is set to light). */
html.v3 {
    --chalk: var(--d-page); --fog: var(--d-band); --ink: var(--d-text); --slate: var(--d-muted); --rule: var(--d-hair);
    --kowhai: var(--d-cyan); --on-kowhai: #ffffff; --harbour: var(--d-cyan);
    --tar: var(--n-panel); --on-tar: var(--n-text); --tar-muted: var(--n-muted); --tar-rule: var(--n-hair); --tar-link: var(--n-cyan);
    --ok: var(--d-ok); --warn: var(--d-warn); --bad: var(--d-bad); --field: var(--d-field);
    --cy-mag: var(--d-mag); --cy-on-mag: #ffffff; --cy-acid: var(--d-acid); --cy-edge: var(--d-edge);
    --cy-grid: rgb(0 101 122 / .07);
    --cy-glow: 0 0 0 transparent; --cy-glow-mag: 0 0 0 transparent; --cy-figure-glow: none; --cy-line-glow: none;
}
/* Night (the device is set to dark). */
@media (prefers-color-scheme: dark) {
    html.v3 {
        --chalk: var(--n-void); --fog: var(--n-deck); --ink: var(--n-text); --slate: var(--n-muted); --rule: var(--n-hair);
        --kowhai: var(--n-cyan); --on-kowhai: var(--n-void); --harbour: var(--n-cyan);
        --ok: var(--n-ok); --warn: var(--n-warn); --bad: var(--n-bad); --field: var(--n-panel);
        --cy-mag: var(--n-mag); --cy-on-mag: var(--n-void); --cy-acid: var(--n-acid); --cy-edge: var(--n-edge);
        --cy-grid: rgb(0 229 255 / .05);
        --cy-glow: 0 0 14px rgb(0 229 255 / .5); --cy-glow-mag: 0 0 14px rgb(255 46 136 / .55);
        --cy-figure-glow: 0 0 22px rgb(215 255 58 / .4); --cy-line-glow: drop-shadow(0 0 5px rgb(0 229 255 / .7));
    }
}
/* The parts that are night whatever the device says: the header, a page's opening, the dark lane, the
   form lane and card, the footer. Every colour a component reads is set again here. */
html.v3 .top, html.v3 .hero, html.v3 .page-head, html.v3 .lane--tar, html.v3 .lane--kowhai, html.v3 .lp-card, html.v3 .foot {
    --chalk: var(--n-void); --fog: var(--n-deck); --ink: var(--n-text); --slate: var(--n-muted); --rule: var(--n-hair);
    --kowhai: var(--n-cyan); --on-kowhai: var(--n-void); --harbour: var(--n-cyan);
    --ok: var(--n-ok); --warn: var(--n-warn); --bad: var(--n-bad); --field: var(--n-panel);
    --cy-mag: var(--n-mag); --cy-on-mag: var(--n-void); --cy-acid: var(--n-acid); --cy-edge: var(--n-edge);
    --cy-grid: rgb(0 229 255 / .05);
    --cy-glow: 0 0 14px rgb(0 229 255 / .5); --cy-glow-mag: 0 0 14px rgb(255 46 136 / .55);
    --cy-figure-glow: 0 0 22px rgb(215 255 58 / .4); --cy-line-glow: drop-shadow(0 0 5px rgb(0 229 255 / .7));
    --bg: var(--n-void); --fg: var(--n-text); --muted: var(--n-muted); --hair: var(--n-hair); --link: var(--n-cyan);
    color-scheme: dark;
}
html.v3 .lane--tar, html.v3 .foot { --bg: var(--n-panel); }
html.v3 .lane--kowhai, html.v3 .lp-card { --bg: var(--n-deck); --field: var(--n-void); }
html.v3 .foot { --link: var(--n-text); }

html.v3 ::selection, html.fi ::selection { background: #ff2e88; color: #070a12; }

/* ---------- Page, grid, type ---------- */
html.v3 body, html.v3 .hero, html.v3 .page-head, html.v3 .lane:not(.lane--fog):not(.lane--tar) {
    background-color: var(--bg);
    background-image: linear-gradient(var(--cy-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cy-grid) 1px, transparent 1px);
    background-size: 100% 40px, 40px 100%;
    color: var(--fg);
}
html.v3 h1, html.v3 h2, html.v3 h3, html.v3 .mark, html.v3 .btn, html.v3 .figure, html.v3 .car-name, html.v3 .price-big,
html.v3 .line-track li, html.v3 .foot-mark, html.v3 .menu-sheet > a, html.v3 .menu > summary, html.v3 .guide-title,
html.v3 .stops > li::before, html.v3 .rows > * > :first-child, html.v3 .faq summary, html.v3 .story-tabs label, html.v3 .lp-label {
    font-family: var(--cy-display); font-stretch: normal; letter-spacing: .005em;
}
html.v3 h1 { font-weight: 700; letter-spacing: 0; }
html.v3 h2 { font-weight: 700; }
html.v3 h3, html.v3 .rows > * > :first-child, html.v3 .faq summary, html.v3 .story-tabs label { font-weight: 600; }
html.v3 :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 0; }

/* ---------- Buttons: two corners cut ---------- */
html.v3 .btn {
    border: 1px solid var(--kowhai); border-radius: 0; color: var(--fg); font-weight: 600;
    background: linear-gradient(225deg, var(--kowhai) 8.6px, transparent 8.6px), linear-gradient(45deg, var(--kowhai) 8.6px, transparent 8.6px);
    background-origin: border-box;
    clip-path: polygon(0 0, calc(100% - var(--cy-cut)) 0, 100% var(--cy-cut), 100% 100%, var(--cy-cut) 100%, 0 calc(100% - var(--cy-cut)));
    transition: background-color .15s ease-out, color .15s ease-out;
}
html.v3 .btn:hover { background: var(--kowhai); color: var(--on-kowhai); }
html.v3 .btn-primary, html.v3 .lane--kowhai .btn-primary, html.v3 .lp-card .btn-primary { background: var(--cy-mag); border-color: var(--cy-mag); color: var(--cy-on-mag); font-weight: 700; }
html.v3 .btn-primary:hover, html.v3 .lane--kowhai .btn-primary:hover, html.v3 .lp-card .btn-primary:hover { background: var(--kowhai); border-color: var(--kowhai); color: var(--on-kowhai); }
/* A cut corner would cut an outside focus ring too: the ring goes inside. */
html.v3 .btn:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
html.v3 .skip, html.v3 .draft-banner { background: var(--n-mag); color: var(--n-void); }

/* A state: a diamond beside its word. */
html.v3 .state::before { transform: rotate(45deg) scale(.82); }
html.v3 .tag { border-radius: 0; }

/* ---------- Header ---------- */
html.v3 .top { background: var(--n-panel); border-bottom: 1px solid var(--n-cyan); box-shadow: 0 1px 18px rgb(0 229 255 / .22); }
html.v3 .mark { font-weight: 700; letter-spacing: .02em; }
/* An uploaded logo drawn for a light page sits on the night header in daylight too: it is shown in white there. */
@media (prefers-color-scheme: light) { html.v3 .mark img { filter: brightness(0) invert(1); } }
html.v3 .mark-dash { height: .4rem; background: linear-gradient(90deg, var(--n-mag) 0 45%, transparent 45% 55%, var(--n-cyan) 55%); transform: skewX(-24deg); }
html.v3 .top-nav > a:not(.btn) { border-bottom-width: 2px; margin-bottom: -1px; }
html.v3 .top-nav > a:not(.btn):hover { border-bottom-color: var(--n-cyan); }
html.v3 .top-nav > a[aria-current="page"] { border-bottom-color: var(--n-mag); }
html.v3 .menu > summary { border: 1px solid var(--n-cyan); border-radius: 0; font-weight: 600; }
html.v3 .menu[open] > summary { background: var(--n-cyan); color: var(--n-void); }
html.v3 .menu-sheet { inset: calc(4.25rem + 1px) 0 0 0; background: var(--n-void); }
html.v3 .menu-sheet > a { font-weight: 700; }

/* ---------- Lanes: a thin rule that starts with a bright tick ---------- */
html.v3 .lane, html.v3 .shelf {
    border-top-width: 2px;
    border-image: linear-gradient(90deg, var(--kowhai) 0 clamp(48px, 8vw, 120px), var(--hair) 0) 1;
}
html.v3 .lane--flush { border-top-width: 0; }
html.v3 .lane--kowhai { border-image: linear-gradient(90deg, var(--cy-mag) 0 clamp(48px, 8vw, 120px), var(--hair) 0) 1; }
html.v3 .lane--tar, html.v3 .foot {
    background-color: var(--n-panel);
    background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 4px);
}
/* The other thick ink rules become one thin, firm line. */
html.v3 .hero-index h2, html.v3 .lp-label, html.v3 .ledger thead th, html.v3 .plain-table thead th { border-bottom: 1px solid var(--cy-edge); }
html.v3 .cars > li:first-child, html.v3 .faq details:first-of-type, html.v3 .facts > div:first-child, html.v3 .feature:first-child,
html.v3 .benefits > li:first-child, html.v3 .guide-list, html.v3 .cat-notes, html.v3 .guide-more, html.v3 .features-more { border-top: 1px solid var(--cy-edge); }

/* ---------- Home: the opening ---------- */
html.v3 .hero-where::before { height: 1px; background: var(--kowhai); }
/* The one place the type itself is lit: the headline, split a hair into magenta and cyan. */
html.v3 .hero h1 { text-shadow: -.025em 0 rgb(255 46 136 / .6), .025em 0 rgb(0 229 255 / .6); }
/* The centre line: lit, and its dashes drift along it. */
html.v3 .line { padding-bottom: 2.25rem; }
html.v3 .line::after { bottom: 12px; height: 4px; filter: var(--cy-line-glow); animation: cy-drift 9s linear infinite; }
html.v3 .line-track li { font-weight: 700; }
html.v3 .line-track li::after { background: var(--cy-mag); transform: rotate(45deg); }
@keyframes cy-drift { to { background-position: 120px 0; } }
@keyframes cy-drift-short { to { background-position: 56px 0; } }
@keyframes cy-beat { 50% { opacity: .6; } }
/* The index beside the opening: a panel with its corners marked. */
html.v3 .hero-index, html.v3 .lp-card {
    padding: 1.25rem 1.25rem 1rem;
    background:
        linear-gradient(var(--cy-corner), var(--cy-corner)) left top / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) left top / 2px 18px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right top / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right top / 2px 18px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) left bottom / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) left bottom / 2px 18px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right bottom / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right bottom / 2px 18px no-repeat,
        var(--n-deck);
}
html.v3 .hero-index { --cy-corner: var(--n-cyan); }
html.v3 .lp-card { --cy-corner: var(--n-mag); color: var(--fg); padding: 1.5rem; }
html.v3 .lp-card a { color: var(--n-cyan); }
html.v3 .hero-index li:last-child a { border-bottom: 0; }

/* ---------- What you get, the catalogue ---------- */
html.v3 .story-tabs label::before { height: 2px; }
html.v3 .filter label { border: 1px solid var(--cy-edge); border-radius: 0; }
html.v3 .filter input:checked + label { background: var(--kowhai); border-color: var(--kowhai); color: var(--on-kowhai); }
html.v3 .shelf-app img, html.v3 .app-head img { border-radius: 0; }
@media (max-width: 900px) {
    html.v3 .story-tabs label { border: 1px solid var(--cy-edge); border-radius: 0; }
    @supports selector(:has(*)) {
        html.v3 .story:has(#story-apps:checked) label[for="story-apps"],
        html.v3 .story:has(#story-camera:checked) label[for="story-camera"],
        html.v3 .story:has(#story-lock:checked) label[for="story-lock"],
        html.v3 .story:has(#story-gauge:checked) label[for="story-gauge"],
        html.v3 .story:has(#story-book:checked) label[for="story-book"],
        html.v3 .story:has(#story-send:checked) label[for="story-send"] { background: var(--kowhai); border-color: var(--kowhai); color: var(--on-kowhai); }
    }
}

/* ---------- Stops on the line ---------- */
html.v3 .stops::before, html.v3 .days::before { filter: var(--cy-line-glow); }
html.v3 .stops::before { height: 3px; top: 1rem; }
html.v3 .stops > li::before {
    background: var(--bg); color: var(--kowhai); border: 1px solid var(--kowhai); font-weight: 700;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
html.v3 .stops--down::before { width: 3px; height: auto; top: 0; left: 1rem; }
@media (max-width: 900px) { html.v3 .stops::before { width: 3px; height: auto; top: 0; left: 1rem; } }
html.v3 .days::before { width: 3px; left: .65rem; }
html.v3 .day::before { background: var(--bg); border: 2px solid var(--cy-mag); transform: rotate(45deg) scale(.7); }

/* ---------- Price: the one lit figure ---------- */
html.v3 .price-sign { border-top: 2px solid var(--kowhai); }
html.v3 .price-big { font-weight: 700; color: var(--cy-acid); text-shadow: var(--cy-figure-glow); letter-spacing: 0; }
html.v3 .car-name { font-weight: 700; letter-spacing: 0; }
html.v3 .guide-needs, html.v3 .cp-quote { border-left-width: 2px; }
html.v3 .success, html.v3 .lp-thanks { border-left-width: 2px; }
html.v3 .cp-offer { border: 1px solid var(--cy-edge); }
html.v3 .faq summary::after { color: var(--link); }
html.v3 .jump a:hover { box-shadow: inset 2px 0 0 var(--cy-mag); }
html.v3 .feature-for .who--fleet { box-shadow: none; text-decoration: underline; text-decoration-color: var(--cy-mag); text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* ---------- Forms ---------- */
html.v3 .form input[type="text"], html.v3 .form input[type="email"], html.v3 .form input[type="tel"], html.v3 .form input[type="url"],
html.v3 .form select, html.v3 .form textarea { border: 1px solid var(--cy-edge); border-radius: 0; background: var(--field); color: var(--fg); }
html.v3 .lane--kowhai .form input, html.v3 .lane--kowhai .form select, html.v3 .lane--kowhai .form textarea,
html.v3 .lp-card input, html.v3 .lp-card select, html.v3 .lp-card textarea { color: var(--fg); }
html.v3 .form input:focus-visible, html.v3 .form select:focus-visible, html.v3 .form textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 0; box-shadow: var(--cy-glow); }
html.v3 .form [aria-invalid="true"] { border-color: var(--bad); }
html.v3 .check input { accent-color: var(--kowhai); }

/* ---------- Footer: the name as a lit sign ---------- */
html.v3 .foot { border-top: 1px solid var(--n-cyan); }
html.v3 .foot-mark { font-weight: 700; letter-spacing: .01em; color: var(--n-text); }
@supports (-webkit-text-stroke: 1px black) {
    html.v3 .foot-mark { color: transparent; -webkit-text-stroke: 1.5px var(--n-cyan); text-shadow: 0 0 26px rgb(0 229 255 / .28); }
}
html.v3 .foot-mark::after { height: 3px; background: repeating-linear-gradient(90deg, var(--n-mag) 0 72px, transparent 72px 120px); }
html.v3 .foot-cols h2 { font-weight: 600; }

/* ====================================================================== */
/* Account                                                                */
/* ====================================================================== */

/* Daylight (the account's switch on light). */
html.fi {
    --a3-chalk: var(--d-page); --a3-fog: var(--d-band); --a3-ink: var(--d-text); --a3-slate: var(--d-muted); --a3-rule: var(--d-hair);
    --a3-field-border: var(--d-edge); --a3-kowhai: var(--d-cyan); --a3-on-kowhai: #ffffff; --a3-harbour: var(--d-cyan);
    --a3-tar: var(--n-panel); --a3-on-tar: var(--n-text); --a3-tar-muted: var(--n-muted); --a3-tar-rule: var(--n-hair);
    --a3-ok: var(--d-ok); --a3-warn: var(--d-warn); --a3-bad: var(--d-bad);
    --afmc-radius: 0px;
    --cy-mag: var(--d-mag); --cy-on-mag: #ffffff; --cy-acid: var(--d-acid); --cy-field: var(--d-field); --cy-raise: var(--d-field);
    --cy-grid: rgb(0 101 122 / .06);
    --cy-glow: 0 0 0 transparent; --cy-figure-glow: none; --cy-line-glow: none;
    --cy-route: #b80058; --cy-pin-start: #0b1220; --cy-pin-end: #00657a;
}
/* Night (the account's switch on dark; the default for this variant). */
html.fi.dark {
    --a3-chalk: var(--n-void); --a3-fog: var(--n-deck); --a3-ink: var(--n-text); --a3-slate: var(--n-muted); --a3-rule: var(--n-hair);
    --a3-field-border: var(--n-edge); --a3-kowhai: var(--n-cyan); --a3-on-kowhai: var(--n-void); --a3-harbour: var(--n-cyan);
    --a3-tar: var(--n-panel); --a3-on-tar: var(--n-text); --a3-tar-muted: var(--n-muted); --a3-tar-rule: var(--n-hair);
    --a3-ok: var(--n-ok); --a3-warn: var(--n-warn); --a3-bad: var(--n-bad);
    --cy-mag: var(--n-mag); --cy-on-mag: var(--n-void); --cy-acid: var(--n-acid); --cy-field: var(--n-panel); --cy-raise: var(--n-deck);
    --cy-grid: rgb(0 229 255 / .045);
    --cy-glow: 0 0 14px rgb(0 229 255 / .5); --cy-figure-glow: 0 0 24px rgb(215 255 58 / .4); --cy-line-glow: drop-shadow(0 0 5px rgb(0 229 255 / .7));
    --cy-route: #00e5ff; --cy-pin-start: #d7ff3a; --cy-pin-end: #ff2e88;
}
/* The bars and the sign-in panel are night in both: their accent is the night cyan. */
html.fi .fi-topbar, html.fi .a3-tabs, html.fi .a3-more-panel, html.fi .a3-welcome {
    --a3-kowhai: var(--n-cyan); --a3-on-kowhai: var(--n-void); --a3-harbour: var(--n-cyan);
    --cy-mag: var(--n-mag); --cy-on-mag: var(--n-void);
}

/* ---------- Page, type ---------- */
html.fi .fi-body {
    --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --radius-3xl: 0px;
    background-color: var(--a3-chalk);
    background-image: linear-gradient(var(--cy-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cy-grid) 1px, transparent 1px);
    background-size: 100% 40px, 40px 100%;
}
html.fi .fi-body a:focus-visible, html.fi .fi-body button:focus-visible, html.fi .fi-body summary:focus-visible { outline: 2px solid var(--a3-harbour); outline-offset: 2px; }
html.fi .fi-logo, html.fi .a3-nav-link, html.fi .a3-tab, html.fi .fi-header-heading, html.fi .fi-section-header-heading, html.fi .fi-btn,
html.fi .fi-modal-heading, html.fi .fi-simple-header-heading, html.fi .a3-kerb h2, html.fi .a3-lineup-head h2, html.fi .a3-car-name,
html.fi .a3-battery-figure, html.fi .a3-row-figure, html.fi .a3-period-km, html.fi .a3-figures dd, html.fi .a3-trip-place, html.fi .a3-ask-title,
html.fi .a3-welcome-mark, html.fi .a3-welcome-head, html.fi .fi-ta-header-cell, html.fi .fi-tabs-item, html.fi .fi-badge {
    font-family: var(--cy-display); font-stretch: normal; letter-spacing: .005em;
}
html.fi .a3-figures dd.a3-figures-note { font-family: inherit; letter-spacing: 0; }
html.fi .fi-header-heading, html.fi .a3-car-name, html.fi .a3-battery-figure, html.fi .a3-trip-place, html.fi .a3-ask-title,
html.fi .fi-simple-header-heading, html.fi .a3-welcome-head, html.fi .a3-row-figure, html.fi .a3-period-km, html.fi .a3-figures dd { font-weight: 700; letter-spacing: 0; }
html.fi .fi-section-header-heading, html.fi .a3-kerb h2, html.fi .a3-lineup-head h2, html.fi .fi-modal-heading { font-weight: 700; }
html.fi .a3-nav-link, html.fi .a3-tab, html.fi .fi-btn, html.fi .fi-ta-header-cell, html.fi .fi-tabs-item, html.fi .fi-badge { font-weight: 600; }

/* ---------- Top bar, More, the phone tab bar ---------- */
html.fi .fi-topbar {
    border-bottom: 1px solid var(--n-cyan); box-shadow: 0 1px 18px rgb(0 229 255 / .22);
    background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 4px);
}
html.fi .fi-topbar .fi-logo { font-weight: 700; letter-spacing: .02em; }
html.fi .fi-topbar .fi-avatar { border-radius: 0; }
html.fi .a3-nav-link::after { height: 2px; bottom: .85rem; }
html.fi .a3-nav-link:hover::after { background: var(--n-cyan); }
html.fi .a3-nav-link.is-current::after { background: var(--n-mag); box-shadow: 0 0 12px rgb(255 46 136 / .7); }
html.fi .a3-more-panel { border-color: var(--n-edge); background: var(--n-deck); }
html.fi .a3-more-group a:hover { box-shadow: inset 0 -2px 0 var(--n-cyan); }
html.fi .a3-more-group a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--n-mag); }
@media (max-width: 63.99rem) {
    html.fi .a3-tabs { border-top: 1px solid var(--n-cyan); box-shadow: 0 -1px 18px rgb(0 229 255 / .2); }
    html.fi .a3-tab.is-current { box-shadow: inset 0 3px 0 var(--n-mag); }
}
html.fi .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { box-shadow: inset 3px 0 0 var(--cy-mag); }

/* ---------- Sections and tables: the thin rule with its tick ---------- */
html.fi .fi-main .fi-section, html.fi .a3-lane, html.fi .a3-lineup, html.fi .fi-main .fi-ta-ctn {
    border-top-width: 2px;
    border-image: linear-gradient(90deg, var(--a3-kowhai) 0 clamp(40px, 6vw, 96px), var(--a3-rule) 0) 1;
}
html.fi .fi-main .fi-section .fi-section { border-top-width: 1px; border-image: none; border-top-color: var(--a3-rule); }
html.fi .fi-main .fi-section .fi-ta-ctn { border-top-width: 0; }
html.fi .a3-figures, html.fi .a3-ask-form { border-top: 1px solid var(--a3-field-border); }
html.fi .fi-ta-header-cell, html.fi .a3-table th { border-bottom: 1px solid var(--a3-field-border); }
html.fi .fi-tabs { border-bottom: 1px solid var(--a3-field-border); }
html.fi .fi-tabs-item.fi-active { box-shadow: inset 0 -3px 0 var(--cy-mag); }

/* ---------- Buttons ---------- */
html.fi .fi-btn {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--cy-cut)) 0, 100% var(--cy-cut), 100% 100%, var(--cy-cut) 100%, 0 calc(100% - var(--cy-cut)));
    transition: background-color .15s ease-out, color .15s ease-out;
}
html.fi .fi-btn.fi-size-sm, html.fi .fi-btn.fi-size-xs { --cy-cut: 7px; }
html.fi .fi-body .fi-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
html.fi .fi-btn.fi-color-primary:not(.fi-outlined) { background: var(--cy-mag); color: var(--cy-on-mag); }
html.fi .fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon, html.fi .fi-btn.fi-color-primary:not(.fi-outlined) .fi-loading-indicator { color: var(--cy-on-mag); }
html.fi .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover { background: var(--a3-kowhai); color: var(--a3-on-kowhai); }
html.fi .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover .fi-icon { color: var(--a3-on-kowhai); }
/* The quiet buttons: a cyan edge, drawn along the cut corners too. */
html.fi .fi-btn.fi-color-primary.fi-outlined, html.fi .fi-btn.fi-color-gray:not(.fi-outlined), html.fi .fi-btn:not(.fi-color) {
    color: var(--a3-ink); box-shadow: inset 0 0 0 1px var(--a3-kowhai);
    background: linear-gradient(225deg, var(--a3-kowhai) 8px, transparent 8px), linear-gradient(45deg, var(--a3-kowhai) 8px, transparent 8px);
}
html.fi .fi-btn.fi-size-sm.fi-color-gray:not(.fi-outlined), html.fi .fi-btn.fi-size-sm:not(.fi-color), html.fi .fi-btn.fi-size-sm.fi-color-primary.fi-outlined,
html.fi .fi-btn.fi-size-xs.fi-color-gray:not(.fi-outlined), html.fi .fi-btn.fi-size-xs:not(.fi-color), html.fi .fi-btn.fi-size-xs.fi-color-primary.fi-outlined {
    background: linear-gradient(225deg, var(--a3-kowhai) 6px, transparent 6px), linear-gradient(45deg, var(--a3-kowhai) 6px, transparent 6px);
}
html.fi .fi-btn.fi-color-gray:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover, html.fi .fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover,
html.fi .fi-btn.fi-color-primary.fi-outlined:not(.fi-disabled):not([disabled]):hover { background: var(--a3-kowhai); color: var(--a3-on-kowhai); }
html.fi .fi-btn.fi-color-gray:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover .fi-icon, html.fi .fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover .fi-icon,
html.fi .fi-btn.fi-color-primary.fi-outlined:not(.fi-disabled):not([disabled]):hover .fi-icon { color: var(--a3-on-kowhai); }
html.fi .fi-btn.fi-color-danger.fi-outlined { box-shadow: inset 0 0 0 1px var(--a3-bad); background: linear-gradient(225deg, var(--a3-bad) 8px, transparent 8px), linear-gradient(45deg, var(--a3-bad) 8px, transparent 8px); }
html.fi .fi-badge { border-radius: 0; }
html.fi .a3-map-add { border-radius: 0 !important; background: var(--cy-mag) !important; color: var(--cy-on-mag) !important; font-family: var(--cy-display) !important; }

/* ---------- Fields ---------- */
html.fi .fi-input-wrp { border-radius: 0; box-shadow: inset 0 0 0 1px var(--a3-field-border); background: var(--cy-field); }
html.fi .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 2px var(--a3-harbour), var(--cy-glow); }
html.fi .fi-input-wrp.fi-invalid { box-shadow: inset 0 0 0 2px var(--a3-bad); }
html.fi .afmc-field, html.fi .afmc-btn, html.fi .afmc-code, html.fi .afmc-pre, html.fi .afmc-map { border-radius: 0; }
html.fi .afmc-btn[aria-pressed="true"], html.fi .afmc-btn-primary { color: var(--a3-on-kowhai); }

/* ---------- Things that float ---------- */
html.fi .fi-dropdown-panel { border-radius: 0; border: 1px solid var(--a3-field-border); background: var(--cy-raise); }
html.fi .fi-modal-window {
    border-radius: 0; border: 1px solid var(--a3-field-border); border-top: 2px solid var(--cy-mag);
    background-color: var(--cy-raise);
}
html.fi .fi-no-notification { border-radius: 0; border-inline-start: 2px solid var(--a3-kowhai); }

/* ---------- The dashboard and the car ---------- */
html.fi .a3-heard::before { transform: rotate(45deg) scale(.85); }
html.fi .a3-heard.is-online::before { animation: cy-beat 3.2s ease-in-out infinite; }
html.fi.dark .a3-heard.is-online::before { box-shadow: 0 0 10px var(--a3-ok); }
html.fi .a3-car-name a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--cy-mag); }
/* "Now": a panel with its corners marked. */
html.fi .a3-now {
    --cy-corner: var(--a3-kowhai);
    border-top: 0; padding: 1.5rem;
    background:
        linear-gradient(var(--cy-corner), var(--cy-corner)) left top / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) left top / 2px 18px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right top / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right top / 2px 18px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) left bottom / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) left bottom / 2px 18px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right bottom / 18px 2px no-repeat,
        linear-gradient(var(--cy-corner), var(--cy-corner)) right bottom / 2px 18px no-repeat,
        var(--cy-raise);
}
html.fi .a3-status > .a3-now { padding: 1.5rem; margin-top: 1.25rem; }
/* The battery: the one lit figure, over a gauge of slanted cells. */
html.fi .a3-battery-figure { color: var(--cy-acid); text-shadow: var(--cy-figure-glow); }
html.fi .a3-battery-figure--none { color: var(--a3-ink); text-shadow: none; }
html.fi .a3-gauge { padding-inline: 4px; gap: 5px; }
html.fi .a3-gauge span { transform: skewX(-24deg); background: var(--a3-rule); box-shadow: inset 0 0 0 1px var(--a3-field-border); }
html.fi .a3-gauge i { box-shadow: var(--cy-glow); }
html.fi .a3-gauge.is-low i { box-shadow: none; }
/* While the car is charging the filled cells breathe. */
html.fi .a3-gauge.is-charging i { animation: cy-beat 2.8s ease-in-out infinite; }
html.fi .a3-gauge--small { padding-inline: 2px; }
html.fi .a3-gauge--small i { box-shadow: none; }
html.fi .a3-bar > div { box-shadow: var(--cy-glow); }
html.fi .a3-flag { border-inline-start: 2px solid var(--cy-mag); }

/* ---------- A trip: the line is lit and drifts ---------- */
html.fi .a3-trip-line { height: 4px; filter: var(--cy-line-glow); animation: cy-drift-short 6s linear infinite; }
@media (max-width: 40rem) { html.fi .a3-trip-line { width: 4px; height: 100%; animation: none; } }
html.fi .a3-map, html.fi .afmc-map { border: 1px solid var(--a3-field-border); }

/* ---------- Maps and the charge graph ---------- */
html.fi .a3-route { stroke: var(--cy-route); }
html.fi .a3-pin--start { fill: var(--cy-pin-start); }
html.fi .a3-pin--end { fill: var(--cy-pin-end); }
/* Night: the map tiles are turned dark; the route and the pins drawn over them keep their own colour. */
html.fi.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) saturate(.55) brightness(.82) contrast(.95); }
html.fi.dark .leaflet-container { background: var(--n-deck); }
html.fi.dark .a3-route { filter: drop-shadow(0 0 4px rgb(0 229 255 / .8)); }
html.fi.dark .a3-pin { stroke: var(--n-void); }
html.fi.dark .leaflet-bar a, html.fi.dark .leaflet-popup-content-wrapper, html.fi.dark .leaflet-popup-tip, html.fi.dark .leaflet-tooltip,
html.fi.dark .leaflet-control-attribution { background: var(--n-deck); color: var(--n-text); border-color: var(--n-edge); }
html.fi.dark .leaflet-bar a { border-bottom-color: var(--n-hair); }
html.fi.dark .leaflet-tooltip-top::before { border-top-color: var(--n-deck); }
html.fi.dark .leaflet-control-attribution a, html.fi.dark .leaflet-popup-content a, html.fi.dark .leaflet-container a.leaflet-popup-close-button { color: var(--n-cyan); }
html.fi .leaflet-bar, html.fi .leaflet-bar a, html.fi .leaflet-popup-content-wrapper, html.fi .leaflet-tooltip { border-radius: 0; }
html.fi.dark .afmc-curve .line { filter: drop-shadow(0 0 4px rgb(0 229 255 / .75)); }
html.fi .afmc-curve .dot { fill: var(--cy-mag); }

/* ---------- Sign in: the form beside a night panel ---------- */
html.fi .a3-welcome {
    border-inline-end: 1px solid var(--n-cyan); box-shadow: 1px 0 22px rgb(0 229 255 / .25);
    background-color: var(--n-panel);
    background-image:
        repeating-linear-gradient(0deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 4px),
        linear-gradient(rgb(0 229 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(0 229 255 / .05) 1px, transparent 1px);
    background-size: auto, 100% 40px, 40px 100%;
}
html.fi .a3-welcome-mark span { height: .4rem; background: linear-gradient(90deg, var(--n-mag) 0 45%, transparent 45% 55%, var(--n-cyan) 55%); transform: skewX(-24deg); }
html.fi .a3-welcome-head { text-shadow: -.035em 0 rgb(255 46 136 / .6), .035em 0 rgb(0 229 255 / .6); }
html.fi .a3-welcome a { color: var(--n-text); }
html.fi .fi-simple-layout { background-color: var(--a3-chalk); }
@media (max-width: 56rem) {
    html.fi .a3-welcome { border-inline-end: 0; border-bottom: 1px solid var(--n-cyan); box-shadow: 0 1px 18px rgb(0 229 255 / .22); }
}

/* ---------- Stillness for those who ask for it ---------- */
@media (prefers-reduced-motion: reduce) {
    html.v3 .line::after, html.fi .a3-trip-line, html.fi .a3-heard.is-online::before, html.fi .a3-gauge.is-charging i { animation: none; }
    html.v3 .btn, html.fi .fi-btn { transition: none; }
}