:root {
    --bg: #0A0A0A;
    --dim: #1c1c1c;
    --dot: #ededed;
    --txt: #b6b6b6;
    --mut: #5a5a5a;
    --accent: #D6001C;
    --warn: #FFA83A;
    --font: "Space Mono", ui-monospace, monospace;
    --px: 9px;
    --glass: rgba(10, 10, 10, .92);
    --glass-solid: rgba(10, 10, 10, .95);
    --edge: #2a2a2a;
    --me-halo: rgba(237, 237, 237, .20);
}

:root[data-theme="light"] {
    --bg: #F4F1EA;
    --dim: #E3DED2;
    --dot: #14120E;
    --txt: #3D3830;
    --mut: #8A8272;
    --accent: #D6001C;
    --warn: #A96200;
    --glass: rgba(244, 241, 234, .92);
    --glass-solid: rgba(244, 241, 234, .96);
    --edge: #CFC8B7;
    --me-halo: rgba(20, 18, 14, .16);
}

* {
    box-sizing: border-box
}

/* Every type size in this file is a rem, so this one number scales all of them at
   once. 62.5% of the browser's default makes 1rem = 10px, which is why the sizes
   below read as .9rem for 9px and 2.6rem for 26px. Expressing it as a percentage
   rather than a fixed pixel size also means a larger default text size set in the OS
   is still honoured, instead of being overridden. */
html {
    font-size: 62.5%
}

html,
body {
    margin: 0
}

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--font);
    /* A floor for any text that has no size of its own; nearly everything here sets
       one. Without it, stray text would inherit the 10px root. */
    font-size: 1.2rem;
    min-height: 100dvh;
    padding: max(26px, env(safe-area-inset-top)) 22px max(30px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    width: 100%;
    max-width: 440px
}

.page-tools {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 2px
}

.theme-float {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mut);
    font: 400 1.5rem/1 var(--font);
    letter-spacing: 0;
    cursor: pointer
}

.theme-float:hover:not(:disabled) {
    background: transparent;
    color: var(--dot);
    letter-spacing: 0
}

.theme-float:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0
}

.lbl {
    font-size: 1rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--mut)
}

.up {
    opacity: 0;
    transform: translateY(10px);
    animation: up .7s cubic-bezier(.2, .8, .25, 1) forwards
}

.u1 {
    animation-delay: .03s
}

.u2 {
    animation-delay: .10s
}

.u3 {
    animation-delay: .30s
}

/* Tabs */
.tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--dim)
}

.tabs a {
    flex: 1;
    text-align: center;
    padding: 13px 4px;
    font: 700 1rem var(--font);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mut);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s
}

.tabs a.on {
    color: var(--dot);
    border-bottom-color: var(--accent)
}

.tabs a:hover {
    color: var(--txt)
}

/* Header */
header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--dim)
}

h1.pg {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dot)
}

.sub {
    margin-top: 7px;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mut)
}

.dg {
    display: grid;
    grid-template-columns: repeat(5, var(--px));
    grid-auto-rows: var(--px);
    gap: 3px
}

.px {
    width: var(--px);
    height: var(--px);
    border-radius: 50%;
    background: var(--dim)
}

.px.on {
    background: var(--dot);
    animation: rip 2.8s ease-in-out infinite
}

.pct {
    font-size: 2.6rem;
    color: var(--mut);
    padding-bottom: 5px
}

/* Spec sheet */
dl {
    margin: 0
}

.row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--dim)
}

.row dt {
    font-size: 0.9rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--mut)
}

.row dd {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--dot);
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.row dd u {
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mut);
    text-decoration: none;
    margin-left: 5px
}

/* A flex row beats the browser's own [hidden] rule, so rows that come and go with
   the data - the tyres, which not every model reports - need saying explicitly. */
.row[hidden],
.foot[hidden] {
    display: none
}

/* Buttons */
button {
    cursor: pointer;
    font: 700 1rem var(--font);
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--dot);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 2px;
    padding: 14px 20px;
    transition: background .25s, color .25s, letter-spacing .25s
}

button:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    letter-spacing: 3px
}

button:disabled {
    border-color: var(--dim);
    color: var(--mut);
    cursor: default
}

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

/* Alerts */
.foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--dim)
}

.foot button {
    flex: none
}

.foot span {
    flex: 1 1 160px;
    min-width: 150px;
    font-size: 0.95rem;
    line-height: 1.7;
    letter-spacing: .4px;
    color: var(--mut)
}

/* Error */
#err {
    display: none;
    margin-bottom: 20px;
    padding-left: 14px;
    border-left: 2px solid var(--accent)
}

#err b {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--accent)
}

#err p {
    margin: 7px 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--mut)
}

/* Auto Cut */
.autocut {
    padding: 6px 0
}

.ac-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px
}

.ac-head .t1 {
    font-size: 1.1rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--dot);
    font-weight: 700
}

.ac-head .t2 {
    margin-top: 7px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--mut)
}

.sw {
    width: 44px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid var(--dim);
    background: var(--dim);
    position: relative;
    cursor: pointer;
    flex: none;
    transition: background .25s, border-color .25s
}

.sw::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: var(--mut);
    transition: transform .25s, background .25s
}

.sw.on {
    background: var(--accent);
    border-color: var(--accent)
}

.sw.on::after {
    transform: translateX(20px);
    background: #fff
}

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

.ac-body {
    margin-top: 26px;
    transition: opacity .3s
}

.autocut.acoff .ac-body {
    opacity: .38
}

.ac-target {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 12px 0 16px
}

.acnum {
    display: flex;
    gap: 8px;
    --px: 8px
}

.acnum .px.on {
    animation: none !important
}

.ac-target .pct {
    font-size: 2rem;
    color: var(--mut);
    padding-bottom: 3px
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 3px;
    background: var(--dim);
    outline: none
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 4px solid var(--bg)
}

input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 3px solid var(--bg)
}

.ac-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--mut)
}

.ac-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dim)
}

.togglerow {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mut);
    user-select: none
}

.chk {
    width: 16px;
    height: 16px;
    border: 1px solid var(--dim);
    border-radius: 2px;
    flex: none;
    position: relative
}

.togglerow.on .chk {
    background: var(--accent);
    border-color: var(--accent)
}

.togglerow.on .chk::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

#ac-state {
    font-size: 0.9rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mut)
}

.acdisabled {
    opacity: .5;
    pointer-events: none
}

/* Navigation */
.nav-search {
    display: flex;
    gap: 8px;
    margin: 6px 0 16px
}

.nav-search input {
    flex: 1;
    min-width: 0;
    background: var(--dim);
    border: 1px solid var(--dim);
    border-radius: 2px;
    color: var(--dot);
    font: 400 1.2rem var(--font);
    padding: 13px 14px;
    outline: none
}

.nav-search input::placeholder {
    color: var(--mut)
}

.nav-search input:focus {
    border-color: var(--accent)
}

.nav-search button {
    flex: none
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.chip2 {
    padding: 10px 14px;
    border: 1px solid var(--dim);
    border-radius: 2px;
    font: 700 0.95rem var(--font);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--txt);
    cursor: pointer;
    background: transparent;
    transition: border-color .2s, color .2s
}

/* Outranks the shared button hover deliberately, which fills solid: a tap leaves :hover
   stuck on a phone, and a filled chip is how the chosen one is drawn. */
.chip2:hover:not(:disabled) {
    background: transparent;
    border-color: var(--accent);
    color: var(--dot);
    letter-spacing: 1.4px
}

.results {
    list-style: none;
    margin: 0 0 18px;
    padding: 0
}

.results li {
    padding: 14px 4px;
    border-bottom: 1px solid var(--dim);
    font: 400 1.1rem/1.45 var(--font);
    color: var(--txt);
    cursor: pointer;
    transition: color .2s
}

.results li:hover {
    color: var(--dot)
}

/* What the scooter itself says about the last destination pushed to it, as distinct
   from what this page did - hence the rule above it, and the brighter type than the
   note below. */
.navstate {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--dim);
    font: 400 1rem/1.6 var(--font);
    letter-spacing: .3px;
    color: var(--txt)
}

.navstate[hidden] {
    display: none
}

.nav-note {
    margin-top: 4px;
    font: 400 0.95rem/1.6 var(--font);
    color: var(--mut);
    letter-spacing: .4px
}

/* Remote shutdown. Styled to look like a hazard rather than a feature - it writes to
   a vehicle, and it should not read as casually as the charge-limit slider does. */
.warnbox {
    margin: 22px 0 6px;
    padding: 14px 16px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    font: 400 1rem/1.75 var(--font);
    letter-spacing: .3px;
    color: var(--txt)
}

.danger {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--dim)
}

.danger .lbl {
    margin-bottom: 12px
}

.dangerbtns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.dangerbtns button {
    flex: 1 1 160px;
    text-align: center
}

.raw {
    margin: 12px 0 0;
    padding: 14px;
    max-height: 46vh;
    overflow: auto;
    background: var(--dim);
    border-radius: 2px;
    font: 400 1rem/1.6 var(--font);
    color: var(--txt);
    white-space: pre-wrap;
    word-break: break-word
}

/* Shadow explorer */
.sections {
    list-style: none;
    margin: 0;
    padding: 0
}

.sections li {
    border-bottom: 1px solid var(--dim)
}

.sechead {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: 400 1.1rem var(--font);
    letter-spacing: .4px;
    text-transform: none;
    color: var(--txt);
    text-align: left
}

.sechead:hover:not(:disabled) {
    background: transparent;
    color: var(--dot);
    letter-spacing: .4px
}

.sechead:disabled {
    cursor: default
}

.sechead .n {
    flex: none;
    font-size: 0.9rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mut)
}

/* The sections carrying data nothing has read yet are the point of the page, so the
   ones already in use are toned down rather than the other way round. */
.sections li.has .sechead {
    color: var(--dot)
}

.sections li.empty .sechead,
.sections li.gone .sechead {
    color: var(--mut)
}

.sechead .p i {
    margin-left: 8px;
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mut)
}

.sections li.open .sechead {
    color: var(--accent)
}

.sections .raw {
    margin: 0 0 12px;
    max-height: 34vh
}

/* Login */
.login {
    align-self: center;
    padding-bottom: 12vh
}

.login .sub {
    margin-top: 9px
}

.login .nav-search input {
    font-size: 1.4rem;
    letter-spacing: 3px
}

/* Phones read at arm's-length-minus-a-foot, and this scale was drawn on a monitor.
   9-10px type looks deliberate there and is simply hard to read here - and an
   installed PWA gives you no pinch-zoom to escape it. Lifting the root lifts every
   size together, so the hierarchy the design was tuned with survives intact.

   This is the one number to change if it still isn't right: 81.25% makes 1rem = 13px,
   so everything is 30% larger than on desktop. */
@media (hover: none) and (pointer: coarse) {
    html {
        font-size: 81.25%
    }
}

/* iOS Safari zooms the whole page in when you focus an input smaller than 16px,
   which on the map page throws the fixed layout off and cannot be undone by
   pinching back. Only touch devices need this, so leave the desktop sizes alone.
   Stays in px deliberately: 16 is a fixed iOS threshold, not a design size, so it
   must not drift when the scale above is retuned. */
@media (hover: none) and (pointer: coarse) {

    .nav-search input,
    .login .nav-search input {
        font-size: 16px
    }
}

/* Navigate: fixed split. The map takes whatever the panel leaves.

     Every rule below is scoped to body.mapview deliberately. An earlier version of
     this block left them unscoped and undid them again under body.nomap, and those
     undo rules kept outranking the shared :focus and :hover rules further up this
     file - three separate interactive states died that way, one at a time, each
     found only by hand-tracing specificity. Scoping means fallback mode never
     receives these rules at all, so the shared ones apply untouched and there is
     nothing to undo. Keep it this way when adding map styles. */
/* svh, not dvh: dvh shrinks when the on-screen keyboard opens, which reflows the
   whole grid mid-typing. svh sizes to the smallest viewport once and stays put. */
body.mapview {
    padding: 0;
    height: 100svh;
    overflow: hidden;
    align-items: stretch
}

body.mapview .wrap {
    height: 100svh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto
}

body.mapview .page-tools {
    margin: 0;
    padding: max(6px, env(safe-area-inset-top)) 18px 0
}

body.mapview .tabs {
    margin-bottom: 0;
    padding: 0 22px
}

body.mapview .mapwrap {
    position: relative;
    min-height: 0
}

body.mapview #map {
    position: absolute;
    inset: 0;
    background: var(--dim)
}

body.mapview .mapover {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    z-index: 5
}

body.mapview .mapover .nav-search {
    margin: 0
}

body.mapview .mapover .nav-search input {
    background: var(--glass);
    border-color: var(--edge);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

body.mapview .mapover .nav-search button,
body.mapview .mapover .chip2 {
    background: var(--glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

body.mapview .mapover .results {
    margin: 6px 0 0;
    max-height: 42vh;
    overflow-y: auto;
    background: var(--glass-solid);
    border: 1px solid var(--edge);
    border-radius: 2px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

body.mapview .mapover .results li {
    padding: 12px 12px
}

body.mapview .mapover .results li:last-child {
    border-bottom: 0
}

body.mapview .mapover .chips {
    margin: 8px 0 0
}

body.mapview .zoomers {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px
}

body.mapview .zoomers button {
    width: 34px;
    height: 34px;
    padding: 0;
    font: 400 1.5rem var(--font);
    border-color: var(--edge);
    background: var(--glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

/* These three restate a shared state that the scoped rules above outrank on
     specificity. Only mapview needs them; fallback mode inherits the originals
     unmodified. The chips need none - mapview sets only their background, which
     does not collide with the border and colour their hover state changes. */
body.mapview .mapover .nav-search input:focus {
    border-color: var(--accent)
}

body.mapview .mapover .nav-search button:hover:not(:disabled) {
    background: var(--accent);
    color: #fff
}

body.mapview .zoomers button:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    letter-spacing: normal
}

body.mapview .zoomers .boltbtn {
    display: grid;
    place-items: center;
    color: var(--accent)
}

/* Chargers hidden: the bolt goes as quiet as the map did. */
body.mapview .zoomers .boltbtn.off {
    color: var(--mut)
}

body.mapview .zoomers .boltbtn svg {
    width: 14px;
    height: 14px;
    fill: currentColor
}

/* Map markers, drawn as advanced markers' HTML content.

   These were all 11-14px to begin with and were too small to find on a map opened
   at city zoom - you had to zoom in before you could tell what was where, which
   defeats opening on the scooter at all. They are sized to be picked out at a
   glance now, and the halos matter as much as the sizes: a flat shape of any size
   disappears over busy map detail, while a ring of colour around it reads as
   something placed on top of the map rather than part of it. */

/* Where you are heading. */
.gpin {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 6px rgba(214, 0, 28, .24), 0 0 0 14px rgba(214, 0, 28, .10)
}

/* The scooter. A diamond, so it is not mistaken for the round destination pin or
   the round dot marking you - shape carries the difference, not just colour. */
.gbike {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 4px rgba(214, 0, 28, .30);
    transform: rotate(45deg);
    cursor: pointer
}

/* Where you are. Kept white rather than the usual blue so it stays inside the
   palette, and still reads as neither the destination nor the scooter. */
.gme {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dot);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 7px var(--me-halo)
}

/* A charging station. The bolt sits in a chip rather than on the map bare, because
   there are a couple of dozen of them and a bare glyph disappears over a road or a
   park. The chip is also a finger-sized tap target, which a bare bolt was not. */
.gcharger {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    background: var(--glass-solid);
    border: 1px solid var(--edge);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    color: var(--accent);
    cursor: pointer
}

.gcharger svg {
    width: 16px;
    height: 16px;
    fill: currentColor
}

.gcharger.busy {
    color: var(--mut)
}

/* Destination panel. Its chrome is pinned-panel styling and so belongs to
     mapview; the type inside it is shared by both modes. */
body.mapview .destpanel {
    padding: 14px 22px max(18px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--dim)
}

.destpanel .hint {
    font: 400 0.95rem/1.6 var(--font);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mut);
    padding: 4px 0
}

.destpanel .t {
    font: 400 1.2rem/1.45 var(--font);
    color: var(--dot)
}

.desthead {
    display: flex;
    align-items: flex-start;
    gap: 12px
}

.desthead .t {
    flex: 1;
    min-width: 0
}

/* A square button, so the shared hover rule's letter-spacing has to go - it would
   shove the glyph off centre. */
.xbtn {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    font: 400 1.5rem/1 var(--font);
    letter-spacing: 0;
    border-color: var(--dim);
    color: var(--mut)
}

.xbtn:hover:not(:disabled) {
    letter-spacing: 0;
    color: #fff
}

.coordrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 7px
}

.coordrow span {
    font: 400 1rem var(--font);
    letter-spacing: .5px;
    color: var(--mut);
    font-variant-numeric: tabular-nums
}

.coordrow button {
    padding: 5px 9px;
    font-size: 0.85rem;
    letter-spacing: 1.4px;
    border-color: var(--dim)
}

.coordrow button:hover:not(:disabled) {
    border-color: var(--accent);
    letter-spacing: 1.4px
}

.destpanel .meta {
    display: flex;
    gap: 26px;
    margin: 14px 0 16px
}

.destpanel .meta .k {
    font-size: 0.9rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mut)
}

.destpanel .meta .v {
    margin-top: 6px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--dot);
    font-variant-numeric: tabular-nums
}

.destpanel .send {
    width: 100%;
    text-align: center
}

/* No key, no map: the page is simply the ordinary scrolling one. Because every
     map rule above is scoped to mapview, nothing needs undoing - only the two
     elements that would otherwise render as stray content have to go. The empty
     #map div would collapse to nothing on its own, but the zoom buttons would
     appear in the flow as two real buttons. */
body.nomap #map,
body.nomap .zoomers {
    display: none
}

/* Scrolling mode has no pinned panel to imply a boundary, so the destination
     needs its own rule off the chips above it. This adds fallback styling rather
     than undoing map styling, so nothing competes with it. */
body.nomap .destpanel {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--dim)
}

@keyframes up {
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes rip {

    0%,
    100% {
        opacity: .82;
        transform: scale(.9)
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }
}

.chip2.on,
.chip2.on:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    letter-spacing: 1.4px
}

.battery-page header {
    padding-bottom: 14px;
    border-bottom: 0
}

.battery-page .chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 14px
}

.battery-page .chip2 {
    width: 100%;
    padding: 11px 8px;
    border-radius: 10px
}

.hero {
    margin: 0;
    padding: 22px;
    border: 1px solid rgba(214, 0, 28, .35);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(214, 0, 28, .18), rgba(214, 0, 28, .035))
}

:root[data-theme="light"] .hero {
    background: linear-gradient(145deg, rgba(214, 0, 28, .12), rgba(214, 0, 28, .025))
}

.hero-head,
.trend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.hero-head>span,
.trend-head>span {
    font-size: .95rem;
    letter-spacing: .5px;
    color: var(--mut)
}

.hero .big {
    margin-top: 24px;
    font-size: 6rem;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -2px;
    color: var(--dot);
    font-variant-numeric: tabular-nums
}

.hero .big u {
    margin-left: 7px;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mut);
    text-decoration: none
}

.hero .under {
    margin: 18px 0 0;
    font: 400 1.15rem/1.6 var(--font);
    letter-spacing: .2px;
    color: var(--txt)
}

.trend {
    padding: 26px 2px 22px;
    border-bottom: 1px solid var(--dim)
}

.trend-head {
    margin-bottom: 16px
}

.fold {
    border-bottom: 1px solid var(--dim)
}

.fold>summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 17px 2px;
    cursor: pointer;
    font: 700 1rem var(--font);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--mut);
    list-style: none;
    transition: color .2s
}

.fold>summary::-webkit-details-marker {
    display: none
}

.fold>summary::before {
    content: "";
    border-left: 6px solid currentColor;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
    transition: transform .2s
}

.fold[open]>summary::before {
    transform: rotate(90deg)
}

.fold>summary:hover,
.fold[open]>summary {
    color: var(--dot)
}

.fold>summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px
}

.foldbody {
    padding-bottom: 10px
}

/* The fold already closes itself off, so the footer's own rule would be a second line a
   few pixels under the first. */
.fold+.foot {
    margin-top: 22px;
    padding-top: 0;
    border-top: 0
}

.blk {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dim)
}

.blk .lbl {
    margin-bottom: 12px
}

/* The trace is one line per interval rather than a single path: the intervals tile the
   timeline end to end, so the pieces join up on their own and each one can carry the
   colour of what the scooter was doing while it ran. */
.chart {
    font: 400 1rem var(--font);
    color: var(--mut)
}

.trend .chart {
    min-height: 160px;
    display: grid;
    place-items: center
}

.chart svg {
    width: 100%;
    height: auto;
    display: block
}

.chart .g {
    stroke: var(--dim);
    stroke-width: 2
}

.chart .gt {
    fill: var(--mut);
    font: 400 26px var(--font)
}

.chart .at-end {
    text-anchor: end
}

.chart .s {
    stroke-width: 5;
    stroke-linecap: round
}

.chart .s.idle {
    stroke: var(--mut)
}

.chart .s.ride {
    stroke: var(--warn)
}

.chart .s.charge {
    stroke: var(--accent)
}

.chart .s.adjustment {
    stroke: #8B7CFF;
    stroke-dasharray: 10 8
}

.chart .s.unknown {
    stroke: var(--mut);
    stroke-dasharray: 4 10
}

.chart .p {
    fill: var(--bg);
    stroke: var(--mut);
    stroke-width: 5;
    cursor: pointer
}

.chart .p.ride {
    stroke: var(--warn)
}

.chart .p.charge {
    stroke: var(--accent)
}

.chart .p.adjustment {
    stroke: #8B7CFF
}

.chart .p:focus {
    outline: none;
    stroke-width: 9
}

.chart .pl {
    fill: var(--dot);
    font: 700 27px var(--font)
}

.chart-readout {
    min-height: 1.4em;
    margin: 8px 0 0;
    color: var(--txt);
    font: 400 1rem/1.4 var(--font);
    letter-spacing: .2px
}

.key {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font: 400 1rem var(--font);
    letter-spacing: .3px;
    color: var(--mut)
}

.key span::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 2px;
    margin-right: 6px;
    vertical-align: 3px
}

.key .k-idle::before {
    background: var(--mut)
}

.key .k-ride::before {
    background: var(--warn)
}

.key .k-charge::before {
    background: var(--accent)
}

@media (max-width:360px) {
    :root {
        --px: 8px
    }

    .row dd {
        font-size: 1.8rem
    }

    .hero .big {
        font-size: 4.4rem
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }

    .up {
        opacity: 1;
        transform: none
    }
}