/* ===========================================================================
   GripCalc — visual system
   ---------------------------------------------------------------------------
   Two grounds, both taken from the subject rather than from a style trend.

   LIGHT is the setup sheet: the ruled paper a race engineer fills in by hand.
   It has no cards, no elevation and no shadows, because paper does not. Panels
   are separated by hairlines, the way a printed form is.

   DARK is the timing screen: deep graphite, hairline rules, data glowing.

   Light is the default because this product is used outdoors in daylight, where
   a luminous ground beats a dark one. Dark follows the system preference.

   ONE RULE GOVERNS COLOUR: the interface is achromatic. Colour appears only
   where it carries meaning — tyre temperature, and the provenance of a number.
   On a screen about heat, heat should be the only coloured thing on it.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   DIRECTION: the pit wall.

   The first pass of this design was a setup sheet: paper, hairlines, quiet.
   That is the engineer's desk, and it is the wrong half of the sport. What a
   driver actually looks at is a pit board and a timing screen: dark, enormous
   numerals, read in a second, and a kerb at the edge of your vision.

   Dark is the default because that is what racing equipment looks like. Light
   is a full second theme, not an afterthought, because this is used outdoors.

   COLOUR RULE, unchanged and still the discipline: the interface is
   achromatic. Colour means tyre temperature, provenance, or the kerb.
   -------------------------------------------------------------------------- */

:root {
  /* --- the timing screen ------------------------------------------------ */
  --paper:        #060708;   /* the ground: near black, a hair off it         */
  --paper-sunk:   #14181d;   /* wells: recessed, so LIGHTER than the ground    */
  --paper-raised: #1b2127;   /* panels, lifted clear of the ground             */
  --paper-lift:   #242b31;   /* hover, active                                  */
  --ink:          #f2f3f0;   /* bone                                          */
  --ink-2:        #a4a9a8;   /* 6.02:1 on the lightest surface: AA at 11px     */
  --ink-3:        #8d9498;   /* was #7d8489, which fell to 3.78:1 on a lift    */
  --rule:         #262c31;
  --rule-strong:  #3b434a;

  /* --- kerb: the one brand colour, used at edges and never as a fill ----- */
  --kerb:         #e03e2f;
  --kerb-dim:     #8f271d;

  /* --- thermal scale: data, not decoration ------------------------------ */
  --t-stone:  #a794e8;
  --t-cold:   #5aa2f0;
  --t-cool:   #86c4e8;
  --t-window: #3fd07f;
  --t-warm:   #f0b13d;
  --t-hot:    #f0543c;

  /* --- provenance ------------------------------------------------------- */
  --p-official:   #3fd07f;
  --p-unverified: #f0b13d;

  /* --- the accent: one instrument light -----------------------------------
         The green the logo already owns, promoted from a thermal band to the
         single colour that marks what is selected, what is focused and what
         the driver typed. It is a UI colour, so it clears 3:1 on every
         surface; --accent-ink is the only thing ever set on top of it and
         clears 4.5:1. Never used for body text. */
  --accent:     #3fd07f;   /* 7.20:1 at worst on --paper-lift               */
  --accent-ink: #06231b;   /* 8.34:1 on the accent fill                     */


  /* --- spacing scale. Every padding, margin and gap comes from this list.
         Before it existed this stylesheet used 28 different values, which is
         what makes a layout read as loose rather than designed. --- */
  --s0: 0;
  --s1: 2px;
  --s2: 4px;
  --s3: 8px;
  --s4: 12px;
  --s5: 16px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;
  --s9: 64px;

  --r-sm: 2px;
  --r-md: 3px;
  --hair: 1px;

  --f-label: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --f-body:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-data:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* pit-board numerals: condensed, so they can be enormous and still fit */
  --f-board: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;

  --label-size: 11px;
  --label-track: 0.1em;

  color-scheme: dark light;
}

/* Daylight. Not paper any more: the same instrument, lit. */
/* Light applies only when it is asked for, either explicitly or by choosing
   Auto in settings. The system preference no longer overrides the identity. */
:root[data-theme="auto"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --paper:        #eceae5;
    --paper-sunk:   #dedcd6;
    --paper-raised: #f7f6f3;
    --paper-lift:   #ffffff;
    --ink:          #101314;
    --ink-2:        #43484a;
    --ink-3:        #5b6063;   /* was #767c7e: 3.09:1 on a sunk well          */
    --rule:         #cfccc5;
    --rule-strong:  #a8a49c;

    --kerb:         #c62d20;
    --kerb-dim:     #e8a79f;

    --t-stone:  #7a68b8;
    --t-cold:   #2f7fce;
    --t-cool:   #5b9fc4;
    --t-window: #1f9257;
    --t-warm:   #b87d10;
    --t-hot:    #c23a24;

    --p-official:   #18623b;   /* was #1f7d4c: 3.74:1 on a tinted chip        */
    --p-unverified: #734e09;   /* was #9c6a0c: 3.42:1 on a tinted chip        */

    /* Daylight darkens the accent rather than brightening it, the way the
       thermal ramp already does, so the ink on top turns light. */
    --accent:     #12703f;
    --accent-ink: #ffffff;
  }
}


/* An explicit choice must beat the system setting in both directions: a driver
   in 2pm sunlight picks light and it sticks, whatever the phone is doing. */
:root[data-theme="light"] {
  --paper:        #eceae5;
  --paper-sunk:   #dedcd6;
  --paper-raised: #f7f6f3;
  --paper-lift:   #ffffff;
  --ink:          #101314;
  --ink-2:        #43484a;
  --ink-3:        #5b6063;
  --rule:         #cfccc5;
  --rule-strong:  #a8a49c;
  --kerb:         #c62d20;
  --t-stone:  #7a68b8;
  --t-cold:   #2f7fce;
  --t-cool:   #5b9fc4;
  --t-window: #1f9257;
  --t-warm:   #b87d10;
  --t-hot:    #c23a24;
  --p-official:   #18623b;
  --p-unverified: #734e09;
  --accent:     #12703f;
  --accent-ink: #ffffff;
}

/* ---------------------------------------------------------------------------
   Compatibility bridge. disclaimer.js and parts of app.js still style
   themselves with Material's --md-sys-color-* tokens. Mapping them onto this
   system keeps the legal gate and the drawers rendering; because the values are
   themselves variables, both themes follow automatically.
   -------------------------------------------------------------------------- */

:root {
  --md-sys-color-background:           var(--paper);
  --md-sys-color-surface:              var(--paper-raised);
  --md-sys-color-surface-variant:      var(--paper-sunk);
  --md-sys-color-on-surface:           var(--ink);
  --md-sys-color-on-surface-variant:   var(--ink-2);
  --md-sys-color-outline:              var(--rule-strong);
  --md-sys-color-primary:              var(--ink);
  --md-sys-color-on-primary:           var(--paper);
  --md-sys-color-primary-container:    var(--paper-sunk);
  --md-sys-color-on-primary-container: var(--ink);
  --md-sys-color-secondary:            var(--ink-2);
  --md-sys-color-secondary-container:  var(--paper-sunk);
  --md-sys-color-error:                var(--t-hot);
  --md-sys-color-on-error:             var(--paper);
  --md-sys-color-error-container:      var(--paper-sunk);
  --md-sys-color-on-error-container:   var(--ink);
  --md-sys-color-success:              var(--p-official);

  --md-ref-typeface-plain: 'IBM Plex Sans', system-ui, sans-serif;
  --md-ref-typeface-brand: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
}

/* ===========================================================================
   Base
   ========================================================================= */

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Every label in this product uses the same voice. */
.lbl,
.card-title,
.pressure-label,
.ux-fact__label,
.ux-chip,
.corner__id,
.sheet-legend {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-weight: 600;
}

/* Every number uses the same voice too, and they align in a column. */
.pressure-value,
.corner__value,
.ux-fact__value,
.sheet-value {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}

/* ===========================================================================
   Instrument strip — replaces the app bar
   A timing screen puts the car, the session and the conditions on one dense
   line and never moves it. So does this.
   ========================================================================= */

.top-app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: var(--hair) solid var(--rule-strong);
  padding: 8px 16px;
  margin-bottom: 0;
  box-shadow: none;
}

.top-bar-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.top-bar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }

.app-title {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.top-bar-actions { display: flex; align-items: center; gap: 0; flex: none; }

.unit-toggles {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: var(--label-size);
}

.unit-toggle { display: flex; align-items: center; gap: 4px; color: var(--ink-3); }
.unit-toggle__active { color: var(--ink); }

/* ===========================================================================
   The sheet
   No cards. A setup sheet is one continuous surface divided by rules.
   ========================================================================= */

.app-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 96px;
}

md-elevated-card {
  display: block;
  --md-elevated-card-container-color: transparent;
  --md-elevated-card-container-elevation: 0;
  --md-elevated-card-container-shadow-color: transparent;
  background: transparent;
  border: none;
  border-bottom: var(--hair) solid var(--rule);
  border-radius: 0;
  padding: 24px 0;
  margin: 0;
  box-shadow: none;
}

md-elevated-card:last-of-type { border-bottom: none; }

.card-title {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 16px 0;
}

/* section number: these are steps in a real sequence, so they are numbered */
.card-title::before {
  content: attr(data-step);
  display: inline-block;
  margin-right: 12px;
  padding-right: 12px;
  border-right: var(--hair) solid var(--rule);
  color: var(--ink-3);
  font-family: var(--f-data);
  font-weight: 500;
  letter-spacing: 0;
}

.card-title:not([data-step])::before { content: none; }


/* ===========================================================================
   iOS layer
   ---------------------------------------------------------------------------
   The chrome follows Apple's conventions so the app feels like it belongs on
   the phone: grouped inset lists, the system type scale, 44pt rows, separators
   inset to the label, continuous corner curvature, and sheets rather than side
   drawers.

   The identity lives where the data is. The results plan, the pit board
   numerals and the thermal scale are content, not chrome, and they stay.

   Typeface: `system-ui` resolves to SF Pro on an iPhone and iPad, so the chrome
   is set in Apple's own face at no download cost. Plex is kept for numerals and
   data, where its tabular figures are doing a job SF cannot.
   ========================================================================= */

:root {
  --f-ui: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;

  /* Apple's type scale, in points read as pixels */
  --t-large-title: 34px;
  --t-title1: 28px;
  --t-title2: 22px;
  --t-title3: 20px;
  --t-headline: 17px;
  --t-body: 17px;
  --t-callout: 16px;
  --t-subhead: 15px;
  --t-footnote: 13px;
  --t-caption: 12px;

  /* iOS layout metrics */
  --ios-margin: 16px;
  --ios-row: 44px;
  --ios-radius: 10px;
  --ios-radius-lg: 14px;
  --ios-sep-inset: 16px;
}

/* Grouped background sits behind, groups sit on top. Standard iOS. */
body {
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* --- large title, collapsing to the bar on scroll ----------------------- */

.top-app-bar {
  padding: max(8px, env(safe-area-inset-top)) var(--ios-margin) 8px;
  border-bottom: none;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.top-app-bar.is-scrolled { border-bottom: 0.5px solid var(--rule-strong); }

.app-title {
  font-family: var(--f-ui);
  font-size: var(--t-title3);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* The hidden attribute must always win. Road mode toggles whole cards with it,
   and any display set by a class rule outranks the UA default otherwise. */
[hidden] { display: none !important; }

/* --- grouped inset list ------------------------------------------------- */

.app-container { padding: 0 var(--ios-margin) 96px; max-width: 720px; }

md-elevated-card {
  display: block;
  background: var(--paper-raised);
  border: none;
  border-radius: var(--ios-radius-lg);
  padding: 0;
  margin: 0 0 32px;
  overflow: hidden;
  box-shadow: none;
}

/* Section headers sit above the group, not inside it. */
.card-title {
  font-family: var(--f-ui);
  font-size: var(--t-footnote);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 0 0 8px 16px;
  padding: 0;
}

.card-title::before { content: none; }

/* Every direct child row of a group carries an inset separator. */
.ios-group > .ios-row + .ios-row::before,
.input-group > .input-with-help + .input-with-help::before,
.input-row > .input-with-help + .input-with-help::before {
  content: '';
  position: absolute;
  left: var(--ios-sep-inset);
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--rule);
}

.input-with-help {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  min-height: 52px;
}

.input-group { display: block; gap: 0; }
.input-row { display: block; }

/* ===========================================================================
   Inputs — a field on a form, not a Material container
   ========================================================================= */

md-filled-text-field,
md-filled-select {
  width: 100%;
  --md-filled-text-field-container-color: var(--paper-sunk);
  --md-filled-text-field-hover-state-layer-color: transparent;
  --md-filled-text-field-focus-active-indicator-color: var(--ink);
  --md-filled-text-field-active-indicator-color: var(--rule-strong);
  --md-filled-text-field-hover-active-indicator-color: var(--ink-2);
  --md-filled-text-field-input-text-color: var(--ink);
  --md-filled-text-field-label-text-color: var(--ink-3);
  --md-filled-text-field-focus-label-text-color: var(--ink);
  --md-filled-text-field-supporting-text-color: var(--ink-3);
  --md-filled-text-field-container-shape-start-start: var(--r-sm);
  --md-filled-text-field-container-shape-start-end: var(--r-sm);
  --md-filled-text-field-container-shape-end-start: 0px;
  --md-filled-text-field-container-shape-end-end: 0px;
  --md-filled-text-field-input-text-font: var(--f-data);
  --md-filled-text-field-input-text-size: 15px;
  --md-filled-text-field-label-text-font: var(--f-label);
  --md-filled-text-field-label-text-size: 12px;
  --md-filled-text-field-supporting-text-font: var(--f-body);
  --md-filled-text-field-leading-icon-color: var(--ink-3);
  --md-filled-text-field-trailing-icon-color: var(--ink-3);

  --md-filled-select-text-field-container-color: var(--paper-sunk);
  --md-filled-select-text-field-input-text-color: var(--ink);
  --md-filled-select-text-field-label-text-color: var(--ink-3);
  --md-filled-select-text-field-input-text-font: var(--f-data);
  --md-filled-select-text-field-label-text-font: var(--f-label);
  --md-filled-select-text-field-container-shape-start-start: var(--r-sm);
  --md-filled-select-text-field-container-shape-start-end: var(--r-sm);
  --md-filled-select-text-field-container-shape-end-start: 0px;
  --md-filled-select-text-field-container-shape-end-end: 0px;
}

md-menu { --md-menu-container-color: var(--paper-raised); }
md-select-option {
  --md-list-item-label-text-color: var(--ink);
  --md-list-item-label-text-font: var(--f-body);
  --md-list-item-container-color: var(--paper-raised);
}

md-icon-button {
  --md-icon-button-icon-color: var(--ink-2);
  --md-icon-button-icon-size: 20px;
  --md-icon-button-state-layer-shape: var(--r-sm);
}

/* The primary action is a stamp on the sheet, not a pill. */
md-filled-button {
  width: 100%;
  --md-filled-button-container-color: var(--ink);
  --md-filled-button-label-text-color: var(--paper);
  --md-filled-button-container-shape: var(--r-md);
  --md-filled-button-container-height: 52px;
  --md-filled-button-label-text-font: var(--f-label);
  --md-filled-button-label-text-size: 13px;
  --md-filled-button-label-text-weight: 600;
  --md-filled-button-icon-color: var(--paper);
  --md-filled-button-hover-state-layer-color: var(--paper);
  letter-spacing: var(--label-track);
  margin-top: 16px;
}

md-outlined-button {
  --md-outlined-button-label-text-color: var(--ink);
  --md-outlined-button-outline-color: var(--rule-strong);
  --md-outlined-button-container-shape: var(--r-md);
  --md-outlined-button-label-text-font: var(--f-label);
}

md-switch {
  --md-switch-selected-track-color: var(--ink);
  --md-switch-selected-hover-track-color: var(--ink);
  --md-switch-selected-focus-track-color: var(--ink);
  --md-switch-selected-pressed-track-color: var(--ink);
  --md-switch-selected-handle-color: var(--paper);
  --md-switch-track-color: var(--paper-sunk);
  --md-switch-track-outline-color: var(--rule-strong);
  --md-switch-handle-color: var(--ink-3);
  --md-switch-track-shape: 3px;
  --md-switch-handle-shape: 2px;
  --md-switch-selected-handle-shape: 2px;
}

.input-group { display: flex; flex-direction: column; gap: 16px; margin-bottom: 0; }
.input-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.grid-inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ===========================================================================
   THE SIGNATURE — the car, seen from above
   The four results are not a dashboard grid. They are positioned the way the
   driver walks around the car, with the front at the top and the axles drawn
   between them. The pyrometer readings reuse the same geometry, so both halves
   of the product are visibly the same car.
   ========================================================================= */

.plan {
  --plan-gap: clamp(24px, 6vw, 48px);
  position: relative;
  display: grid;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1fr var(--plan-gap) 1fr;
  gap: 12px 0;
  align-items: center;
  margin: 24px 0 8px;
  padding: 0;
}

/* axle lines and centreline, drawn not decorated */
.plan__axle {
  grid-column: 2;
  height: var(--hair);
  background: var(--rule-strong);
  position: relative;
}

.plan__axle::before {
  content: attr(data-axle);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 0 8px;
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* the spine between the axles */
.plan__spine {
  grid-column: 2;
  grid-row: 2;
  width: var(--hair);
  height: 100%;
  min-height: 26px;
  background: var(--rule);
  justify-self: center;
}

.corner {
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  padding: 12px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.corner--lf { grid-column: 1; grid-row: 1; }
.corner--rf { grid-column: 3; grid-row: 1; }
.corner--lr { grid-column: 1; grid-row: 3; }
.corner--rr { grid-column: 3; grid-row: 3; }

/* the outboard edge of each corner is heavier: that is where the tyre is */
/* The outboard edge marks where the tyre is. A single weighted rule, not a
   striped hatch: the brief bans racing stripes, and a precision instrument does
   not decorate its own readout. */
.corner::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--ink-3);
}

.corner--lf::after, .corner--lr::after { left: -1px; }
.corner--rf::after, .corner--rr::after { right: -1px; }
.corner--lf, .corner--lr { padding-left: 16px; }
.corner--rf, .corner--rr { padding-right: 16px; }

.corner__id {
  font-size: 10px;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.corner__value {
  font-family: var(--f-board);
  font-size: clamp(46px, 14vw, 62px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.corner--rf, .corner--rr { text-align: right; }

.corner__unit {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 2px;
}

/* The value and its unit are one object, aligned on the number's baseline. */
.corner__lockup { display: flex; align-items: baseline; gap: 0; }
.corner--rf .corner__lockup, .corner--rr .corner__lockup { justify-content: flex-end; }

/* Type roles were crossed: this carries sentences and was set in the data face
   at 10px. Mono is for numerals that must align in a column; prose belongs in
   the body face. And numbers mirror to match the car, sentences never do. */
.corner__note {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: var(--hair) solid var(--rule);
  text-align: left;
}

.corner--rf .corner__note,
.corner--rr .corner__note,
.corner--rf [data-metric="pyro-advice"],
.corner--rr [data-metric="pyro-advice"],
.corner--rf [data-metric="pyro-spread"],
.corner--rr [data-metric="pyro-spread"] { text-align: left; }

/* the settle: corners arrive in the order you walk the car */
@media (prefers-reduced-motion: no-preference) {
  .plan--settle .corner {
    animation: corner-settle 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .plan--settle .corner--lf { animation-delay: 0ms; }
  .plan--settle .corner--rf { animation-delay: 45ms; }
  .plan--settle .corner--lr { animation-delay: 90ms; }
  .plan--settle .corner--rr { animation-delay: 135ms; }
}

@keyframes corner-settle {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ===========================================================================
   Readout header and the facts table
   ========================================================================= */

.ux-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ux-summary {
  font-family: var(--f-data);
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ux-facts {
  display: grid;
  gap: 0;
  background: transparent;
  border-top: var(--hair) solid var(--rule);
  border-radius: 0;
  overflow: visible;
  margin: 24px 0 0;
}

.ux-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  background: transparent;
  border-bottom: var(--hair) solid var(--rule);
  flex-wrap: wrap;
}

.ux-fact__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--ink-3);
}

.ux-fact__value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.ux-fact__value--muted {
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* ===========================================================================
   Provenance chips — colour only where it means something
   ========================================================================= */

.ux-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: var(--hair) solid currentColor;
  /* The tint is the tone at a twelfth, so every chip fills itself from its own
     colour and no tone needs a second token. Every pair clears 4.5:1. */
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: var(--label-track);
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-2);
}

.ux-chip__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.ux-chip--good { color: var(--p-official); }
.ux-chip--warn { color: var(--p-unverified); }
.ux-chip--info { color: var(--ink-2); }

/* A value the driver typed is the one thing on the readout they own, so its
   marker carries the accent while the chip stays neutral. */
.ux-chip[data-truth="entered"] .ux-chip__dot { background: var(--accent); }

/* Hover firms the outline rather than deepening the fill: a heavier tint
   pulls the chip's own text under 4.5:1 in daylight. */
.ux-chip:hover { box-shadow: inset 0 0 0 1px currentColor; }
.ux-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }

.ux-why {
  width: 15px; height: 15px; min-width: 15px;
  border-radius: 50%;
  /* The ring is the only thing that says this glyph is a control, so it is
     held at the same 3:1 the glyph is, not at the hairline value. */
  border: var(--hair) solid var(--ink-3);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--f-body);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

.ux-why:hover { border-color: var(--ink); color: var(--ink); }
.ux-why:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }

/* ===========================================================================
   Notices: stale, model limit, example data
   ========================================================================= */

.ux-stale-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 16px;
  border-radius: var(--r-sm);
  border: var(--hair) solid var(--p-unverified);
  border-left-width: 3px;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
}

.ux-stale-banner[hidden] { display: none; }

.result-card.is-stale .plan,
.result-card.is-stale .ux-facts { opacity: 0.32; filter: grayscale(1); }

.ux-inline-btn {
  border: var(--hair) solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  cursor: pointer;
}

.notes {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 16px;
  padding: 0 0 0 12px;
  background: transparent;
  border-left: 2px solid var(--rule-strong);
  border-radius: 0;
  line-height: 1.55;
}

.ux-kbd-hint {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 12px;
}

/* ===========================================================================
   Pyrometer: same car, same geometry, thermal colour carried by the tread
   ========================================================================= */

.tread {
  display: flex;
  gap: 2px;
  height: 74px;
  margin-top: 8px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: var(--hair) solid var(--rule);
}

.tread__band {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  position: relative;
}

.tread__temp {
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 600;
  color: #10161c;
  background: rgba(255,255,255,0.82);
  padding: 0px 4px;
  border-radius: var(--r-sm);
}

.tread__zone {
  position: absolute;
  bottom: 6px;
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
  color: #10161c;
  opacity: 0.75;
}

.sheet-legend {
  font-size: 10px;
  color: var(--ink-3);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: var(--hair) solid var(--rule);
}

.sheet-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sheet-legend i { width: 9px; height: 9px; border-radius: 1px; display: inline-block; }

.ux-window-note {
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pyro-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }

.ux-ghost-btn {
  border: var(--hair) solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10px;
  cursor: pointer;
}

.ux-ghost-btn:hover { background: var(--paper-sunk); }

/* ===========================================================================
   Drawers, toasts, dialogs — quiet, same vocabulary
   ========================================================================= */

.help-drawer, .feedback-drawer {
  background: var(--paper);
  border-left: var(--hair) solid var(--rule-strong);
  box-shadow: none;
}

.help-drawer-header, .feedback-drawer-header {
  border-bottom: var(--hair) solid var(--rule);
  padding: 16px 24px;
}

.help-drawer-header h2, .feedback-drawer-header h2 {
  font-family: var(--f-label) !important;
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 13px !important;
  font-weight: 600 !important;
}

.help-drawer-content, .feedback-drawer-content { padding: 24px; }
.help-drawer-content h3 {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 11px;
  color: var(--ink-3);
  margin: 24px 0 4px;
}
.help-drawer-content p, .help-drawer-content li { font-size: 13.5px; color: var(--ink-2); }
.help-drawer-content pre {
  font-family: var(--f-data);
  font-size: 11.5px;
  background: var(--paper-sunk);
  padding: 8px;
  border-radius: var(--r-sm);
  overflow-x: auto;
}

.help-drawer-overlay { background: rgba(20, 23, 25, 0.45); }

.ux-toast {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: 13px;
  box-shadow: none;
  border: var(--hair) solid var(--ink);
}

.ux-toast--warn { background: var(--ink); color: var(--paper); border-color: var(--p-unverified); border-left-width: 3px; }
.ux-toast--success { background: var(--ink); color: var(--paper); border-color: var(--p-official); border-left-width: 3px; }

.ux-toast__action {
  border: var(--hair) solid currentColor;
  border-radius: var(--r-sm);
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10px;
}

.ux-modal {
  background: var(--paper);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: none;
}

.ux-modal__title {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 13px;
}

.ux-btn { border-radius: var(--r-sm); font-family: var(--f-label); text-transform: uppercase; letter-spacing: var(--label-track); font-size: 11px; }
.ux-btn--danger { background: var(--t-hot); color: #fff; }
.ux-btn--text { color: var(--ink); }

.autocomplete-suggestions {
  background: var(--paper-raised);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: none;
}

.autocomplete-item { font-family: var(--f-body); font-size: 13.5px; color: var(--ink); padding: 8px 12px; }
.autocomplete-item:hover, .autocomplete-item.selected { background: var(--paper-sunk); }

.autocomplete-empty {
  padding: 12px 12px;
  font-size: 12.5px;
  color: var(--ink);
  background: transparent;
  border-left: 3px solid var(--p-unverified);
  border-radius: 0;
}

.ux-source-row { display: flex; align-items: center; gap: 8px; padding: 4px 0 0; }
.ux-source-row:empty { display: none; }

kbd {
  font-family: var(--f-data);
  border: var(--hair) solid var(--rule-strong);
  background: var(--paper-sunk);
  border-radius: 2px;
  padding: 0px 4px;
  font-size: 11px;
}

.ux-skip-link { background: var(--ink); color: var(--paper); border-radius: 0 0 var(--r-sm) 0; font-family: var(--f-label); text-transform: uppercase; letter-spacing: var(--label-track); }

/* ===========================================================================
   Small screens: the plan view narrows but never becomes a list, because the
   car does not stop having four corners on a phone.
   ========================================================================= */

@media (max-width: 700px) {
  .app-container { padding: 0 12px 96px; }
  .top-app-bar { padding: 8px 12px; }
  .app-title { font-size: 15px; }
  .top-bar-actions { order: 2; margin-left: auto; }
  .unit-toggles {
    order: 3; width: 100%;
    padding-top: 8px; margin-top: 4px;
    border-top: var(--hair) solid var(--rule);
  }
  .plan { --plan-gap: 24px; }
  .corner { padding: 12px 12px 8px; }
  .grid-inputs { grid-template-columns: 1fr 1fr; gap: 12px; }
  md-elevated-card { padding: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   Reading entry: three zones across the tread, on the corner they came from.
   The inputs sit where the tyre is, so there is no mapping to do in your head
   while crouched at a wheel with cold hands.
   -------------------------------------------------------------------------- */

.plan--inputs .corner { padding: 12px 12px 8px; }

.tread-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.tread-input {
  --md-filled-text-field-container-color: var(--paper-sunk);
  --md-filled-text-field-label-text-size: 10px;
  --md-filled-text-field-input-text-size: 16px;
  --md-filled-text-field-top-space: 14px;
  --md-filled-text-field-bottom-space: 6px;
  --md-filled-text-field-with-label-top-space: 16px;
  --md-filled-text-field-with-label-bottom-space: 6px;
}

/* Analyse sits with the car it belongs to */
#analyze-btn { margin-top: 24px; }

.ux-kbd-hint {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-body);
  font-size: 12px;
}

.corner__unit-note {
  color: var(--ink-3);
  font-family: var(--f-data);
  font-weight: 500;
  letter-spacing: 0;
}

/* The analysis is a new section, not a continuation of the button. */
.analysis-result {
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--hair) solid var(--rule-strong);
  background: transparent;
  border-radius: 0;
}

@media (max-width: 700px) {
  /* The axle word does not fit between the corners at this width, and the
     corner labels already say which end you are looking at. Keep the line. */
  .plan__axle::before { content: none; }
  .ux-fact { gap: 4px; }
  .ux-fact__value { flex-wrap: wrap; justify-content: flex-end; }
  .ux-fact__value--muted { text-align: left; }
}

/* One filled control per screen. Share sits under the notes, quietly. */
#share-results-btn {
  display: block;
  margin: 16px auto 0;
}

/* ===========================================================================
   The legal gate
   Built with plain elements, because it also runs on landing.html where the
   component library is not loaded. Every first-time visitor met a bare,
   unstyled button reading "checkI Accept - Continue to GripCalc".

   The wording is unchanged: it is legal text and not the designer's to edit.
   What is changed is that it is now readable, with the part that affects the
   driver's decision at the top and the full terms below it.
   ========================================================================= */

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 13, 0.62);
  backdrop-filter: blur(3px);
}

.gate {
  background: var(--paper);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-md);
  max-width: 660px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
}

.gate__body {
  padding: 24px 32px 16px;
  overflow-y: auto;
  flex: 1;
}

/* the legal copy, set to a readable measure */
.gate__body > div { max-height: none !important; overflow: visible !important; }
.gate__body h2 {
  font-family: var(--f-label) !important;
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  border-bottom: var(--hair) solid var(--rule);
}

.gate__body h3, .gate__body h4 {
  font-family: var(--f-label) !important;
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  margin: 24px 0 4px !important;
}

.gate__body p, .gate__body li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

.gate__body ol, .gate__body ul { padding-left: 16px; }
.gate__body li { margin-bottom: 8px; }
.gate__body strong { color: var(--ink); font-weight: 600; }

/* the "use at your own risk" panel: the one part that changes a decision */
.gate__body > div > div:first-of-type {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid var(--t-hot) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 12px !important;
  margin-bottom: 16px !important;
}

.gate__body > div > div:first-of-type p:first-child {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 11px !important;
  color: var(--t-hot) !important;
  margin: 0 0 4px !important;
}

.gate__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 32px;
  border-top: var(--hair) solid var(--rule-strong);
  background: var(--paper);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

.gate__btn {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-md);
  padding: 12px 16px;
  cursor: pointer;
  border: var(--hair) solid transparent;
  min-height: 44px;
}

.gate__btn--accept { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gate__btn--accept:hover { opacity: 0.88; }
.gate__btn--decline { background: transparent; color: var(--ink-3); border-color: transparent; }
.gate__btn--decline:hover { color: var(--ink); }
.gate__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .gate__body { padding: 16px 16px 16px; }
  .gate__actions { padding: 12px 16px; }
  .gate__btn { flex: 1; justify-content: center; }
}

/* ===========================================================================
   MOBILE FIRST: entry is not the same problem as reading
   ---------------------------------------------------------------------------
   The plan view is right for RESULTS on a phone: four numbers, glanceable, no
   touch targets involved. It is wrong for ENTRY. Two corners across a 390px
   screen left each reading field 41px wide, and these twelve fields are filled
   in with cold hands, often in gloves, in the ninety seconds before the tyres
   cool. 41px is not a target.

   So on a phone the entry plan unfolds into one corner per row, in the order
   you walk the car, and each zone gets a real target. The car is still there:
   front pair, then rear pair, marked by the same axle rules.
   ========================================================================= */

@media (max-width: 700px) {
  .plan--inputs {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: none;
  }

  .plan--inputs .corner {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 12px 12px 12px;
  }

  /* The axle rules become full-width section markers. Source order puts the
     rear marker last; in a single column it belongs between the two pairs. */
  .plan--inputs .plan__axle {
    grid-column: 1;
    margin: 4px 0 2px;
  }
  .plan--inputs > .plan__axle:first-of-type { order: 1; }
  .plan--inputs > .corner--lf { order: 2; }
  .plan--inputs > .corner--rf { order: 3; }
  .plan--inputs > .plan__axle:last-of-type { order: 4; }
  .plan--inputs > .corner--lr { order: 5; }
  .plan--inputs > .corner--rr { order: 6; }
  .plan--inputs .plan__axle::before {
    content: attr(data-axle);
    left: 0;
    transform: translateY(-50%);
    padding: 0 8px 0 0;
    background: var(--paper);
  }
  .plan--inputs .plan__spine { display: none; }

  .tread-inputs { gap: 8px; }

  .tread-input {
    --md-filled-text-field-input-text-size: 20px;
    --md-filled-text-field-top-space: 18px;
    --md-filled-text-field-bottom-space: 12px;
    --md-filled-text-field-with-label-top-space: 20px;
    --md-filled-text-field-with-label-bottom-space: 12px;
    --md-filled-text-field-label-text-size: 11px;
  }

  /* The info buttons were taking 40px of width off every field on a 390px
     screen. They shrink and sit tight to the field instead. */
  .input-with-help { gap: 2px; }
  .input-with-help .help-icon-btn {
    --md-icon-button-icon-size: 17px;
    width: 32px;
    height: 32px;
    flex: none;
  }
}

/* Car and tyre names are long ("Michelin Pilot Sport Cup 2 R") and mono is wide.
   On a phone the value was being clipped mid-name. */
@media (max-width: 700px) {
  #car, #tyre, #track {
    --md-filled-text-field-input-text-size: 13px;
    --md-filled-select-text-field-input-text-size: 13px;
  }
  #car::part(input), #tyre::part(input) { text-overflow: ellipsis; }
}

/* ---------------------------------------------------------------------------
   Settings: where a preference belongs. Units were on the main screen at all
   times, costing a row of the instrument strip on every session, for a choice
   almost nobody changes twice.
   -------------------------------------------------------------------------- */

.settings-group {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10.5px;
  color: var(--ink-3);
  margin: 24px 0 4px;
}

.settings-group:first-child { margin-top: 0; }

.settings-hint { font-size: 12.5px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.55; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: var(--hair) solid var(--rule);
}

.setting-row__name {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.setting-row__note { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.unit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 11px;
  color: var(--ink-3);
  flex: none;
}

.unit-toggle__active { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Segmented control: three states shown at once, because they are not opposites.
   -------------------------------------------------------------------------- */

.segmented {
  display: inline-flex;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  flex: none;
}

.segmented__opt {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-right: var(--hair) solid var(--rule-strong);
  padding: 0 12px;
  min-height: 44px;
  cursor: pointer;
}

.segmented__opt:last-child { border-right: none; }
.segmented__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------------------------------------------------------------------------
   Steppers. Typing a two digit number on a phone in gloves is the slowest
   input in the product, and the air temperature changes every session.
   -------------------------------------------------------------------------- */

.stepper { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.stepper__btn {
  flex: none;
  width: 56px;
  min-height: 44px;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--f-board);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.stepper__btn:active { transform: translateY(1px); }
.stepper__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stepper__hint {
  font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: var(--label-track); font-size: 10px; color: var(--ink-3);
}

/* Offline is normal in a paddock, so it states a fact rather than warning. */
.offline-bar {
  background: var(--paper-raised);
  border-bottom: var(--hair) solid var(--rule-strong);
  color: var(--ink-2);
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10.5px;
  padding: 8px 16px;
  text-align: center;
}

.offline-bar[hidden] { display: none; }

.install-state { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.install-state strong { color: var(--ink); }
.install-state--done { border-left: 3px solid var(--p-official); padding-left: 12px; }
.install-steps { margin: 8px 0 0; padding-left: 16px; }
.install-steps li { margin-bottom: 8px; }
.install-glyph { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--ink); }
.install-btn { min-height: 44px; }

/* Safe area for an installed app on a notched phone. */
@supports (padding: max(0px)) {
  .top-app-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  .app-container { padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 64px)); }
}

/* ---------------------------------------------------------------------------
   Autocomplete. The structural rules for this lived in the inline stylesheet
   that theme.css replaced, so the list was rendering as a 2px bordered dot
   beside every text field. Appearance without structure is not a style.
   -------------------------------------------------------------------------- */

.autocomplete-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.autocomplete-suggestions.visible { display: block; }
.autocomplete-item { cursor: pointer; }

/* ===========================================================================
   DARK: the instrument, lit
   ---------------------------------------------------------------------------
   Everything below is dark only. A screen emits light, and until now this one
   was flat: one value of grey everywhere, no depth, no source. These give it
   the qualities of real equipment without decorating it.

     graticule   the faint plot grid of a telemetry display, at the edge of
                 perception. Texture, not pattern.
     bezel       a 1px lighter line on the top edge of each panel. Milled
                 aluminium catches light on its upper arris; this is that.
     emission    the numerals carry a small bloom, because they are the light
                 source on a pit board.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image: var(--graticule); }
}
:root[data-theme="dark"] body { background-image: var(--graticule); }

:root {
  --graticule:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
}

body {
  background-size: 34px 34px, 34px 34px;
  background-attachment: fixed;
}

:root[data-theme="light"] body { background-image: none; }

/* --- panels gain an upper arris ----------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .corner,
  :root:not([data-theme="light"]) .gate,
  :root:not([data-theme="light"]) .ux-modal {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 1px 0 rgba(0, 0, 0, 0.5);
  }
  :root:not([data-theme="light"]) .corner__value {
    text-shadow: 0 0 22px rgba(226, 234, 240, 0.14);
  }
  :root:not([data-theme="light"]) .top-app-bar {
    background: linear-gradient(var(--paper), color-mix(in srgb, var(--paper) 88%, #000));
  }
}

:root[data-theme="dark"] .corner,
:root[data-theme="dark"] .gate,
:root[data-theme="dark"] .ux-modal {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1px 0 rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .corner__value { text-shadow: 0 0 22px rgba(226, 234, 240, 0.14); }
:root[data-theme="dark"] .top-app-bar {
  background: linear-gradient(var(--paper), color-mix(in srgb, var(--paper) 88%, #000));
}

/* ===========================================================================
   Corner thermal scale
   Each corner already knows the temperature it was derived from. Showing where
   that sits inside the tyre's own window puts the blue-green-amber-red gradient
   on the main screen as DATA, which is the only way it earns a place there.
   ========================================================================= */

.corner__therm {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.corner__scale {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--t-stone) 0%,
    var(--t-cold) 18%,
    var(--t-cool) 33%,
    var(--t-window) 50%,
    var(--t-warm) 74%,
    var(--t-hot) 100%
  );
  opacity: 0.7;
  filter: saturate(0.85);
}

/* the window this compound actually wants, marked on the scale */
.corner__band {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  opacity: 0.55;
}

.corner__needle {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 17px;
  border-radius: 0;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper-raised);
  transform: translateX(-50%);
  transition: left 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) { .corner__needle { transition: none; } }

.corner__therm-note {
  font-family: var(--f-data);
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.corner--rf .corner__therm-note, .corner--rr .corner__therm-note { text-align: right; }

/* ===========================================================================
   The moment: the axle draws, then the corners settle in the order you walk
   the car. One orchestrated sequence, 300ms, and nothing else moves.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .plan--settle .plan__axle { animation: axle-draw 300ms cubic-bezier(0.2,0.7,0.3,1) both; }
  .plan--settle .plan__spine { animation: spine-draw 260ms 120ms cubic-bezier(0.2,0.7,0.3,1) both; }
}

@keyframes axle-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes spine-draw { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* The side-to-side figure was clipping at the right edge on a 375px screen. */
@media (max-width: 700px) {
  .ux-fact { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ux-fact__value { justify-content: flex-start; text-align: left; width: 100%; }
}

/* ---------------------------------------------------------------------------
   The tyre. Three tread zones carrying their own temperature, shoulders, and
   the grooves between. Drawn rather than charted, because the driver is looking
   at a tread face and not at a bar chart.
   -------------------------------------------------------------------------- */

.tyre { width: 100%; height: auto; display: block; margin-top: 8px; }

/* The carcass has to read as rubber, or the tread is just a colour block.
   Mid grey rather than near black: on a dark panel a black tyre disappears. */
.tyre-carcass { fill: none; stroke: rgba(0,0,0,0.45); stroke-width: 1.5; }
.tyre-shoulder { fill: #33383b; }
.tyre-sidewall { fill: #2a2e31; }
.tyre-groove { fill: rgba(0,0,0,0.45); }

.tyre-temp {
  font-family: var(--f-data);
  font-size: 15px;
  font-weight: 600;
  fill: #10161c;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.tyre-zone {
  font-family: var(--f-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: #10161c;
  text-anchor: middle;
  text-transform: uppercase;
  opacity: 0.72;
}

/* ---------------------------------------------------------------------------
   Legend: a band is not just a colour, it is a consequence for grip.
   -------------------------------------------------------------------------- */

.sheet-legend { display: block; }

.legend-row {
  display: grid;
  grid-template-columns: 14px 78px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: var(--hair) solid var(--rule);
}

.legend-row:last-child { border-bottom: none; }
.legend-swatch { width: 14px; height: 14px; border-radius: 2px; align-self: center; }

.legend-range {
  font-family: var(--f-data);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.legend-name {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
}

.legend-note { font-size: 11.5px; color: var(--ink-3); grid-column: 3; }
.legend-name-wrap { display: flex; flex-direction: column; gap: 0px; }

/* ---------------------------------------------------------------------------
   Session score.

   The WHOOP grammar: one ring, one number, the state carried by colour and
   nothing else. It is the hero of the post-session view because it is the
   answer to the only question worth asking after a session, and because a job
   that ends in a score is a job people come back and do again.

   The colour is the same thermal language used everywhere else: green means the
   tyre was in the window it wants, amber means partly, red means it was not.
   -------------------------------------------------------------------------- */

.score {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0 24px;
  border-bottom: var(--hair) solid var(--rule);
  margin-bottom: 24px;
}

.dial { width: 124px; height: 124px; flex: none; }

.dial__track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 9;
}

.dial__value {
  fill: none;
  stroke-width: 9;
  stroke-linecap: butt;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dasharray 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) { .dial__value { transition: none; } }

.dial__num {
  font-family: var(--f-board);
  font-size: 40px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.dial__den { font-size: 21px; fill: var(--ink-3); }

.dial__cap {
  font-family: var(--f-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--ink-3);
  text-anchor: middle;
}

.score__body { min-width: 0; }

.score__head {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.score__verdict {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  margin: 8px 0 12px;
}

@media (max-width: 700px) {
  .score { gap: 16px; }
  .dial { width: 104px; height: 104px; }
  .score__verdict { font-size: 14px; }
}

/* ===========================================================================
   Inputs as iOS list rows
   ---------------------------------------------------------------------------
   An iOS form row is a label on the left and the value on the right, on a plain
   grouped background. A Material filled field is a tinted box with a floating
   label. The components stay (replacing them is a separate job that would also
   drop 440 KB) but they are dressed as rows: no container fill, no active
   indicator, label at footnote size, value at body size on the right.
   ========================================================================= */

md-filled-text-field,
md-filled-select {
  --md-filled-text-field-container-color: transparent;
  --md-filled-text-field-focus-container-color: transparent;
  --md-filled-text-field-hover-state-layer-color: transparent;
  --md-filled-text-field-active-indicator-height: 0px;
  --md-filled-text-field-focus-active-indicator-height: 0px;
  --md-filled-text-field-hover-active-indicator-height: 0px;
  --md-filled-text-field-active-indicator-color: transparent;
  --md-filled-text-field-focus-active-indicator-color: transparent;
  --md-filled-text-field-hover-active-indicator-color: transparent;
  --md-filled-text-field-container-shape-start-start: 0px;
  --md-filled-text-field-container-shape-start-end: 0px;
  --md-filled-text-field-container-shape-end-start: 0px;
  --md-filled-text-field-container-shape-end-end: 0px;

  --md-filled-text-field-label-text-font: var(--f-ui);
  --md-filled-text-field-label-text-size: 13px;
  --md-filled-text-field-label-text-color: var(--ink-3);
  --md-filled-text-field-focus-label-text-color: var(--ink-3);
  --md-filled-text-field-input-text-font: var(--f-ui);
  --md-filled-text-field-input-text-size: 17px;
  --md-filled-text-field-input-text-color: var(--ink);
  --md-filled-text-field-supporting-text-font: var(--f-ui);
  --md-filled-text-field-supporting-text-size: 13px;
  --md-filled-text-field-top-space: 8px;
  --md-filled-text-field-bottom-space: 8px;
  --md-filled-text-field-with-label-top-space: 8px;
  --md-filled-text-field-with-label-bottom-space: 8px;

  --md-filled-select-text-field-container-color: transparent;
  --md-filled-select-text-field-focus-container-color: transparent;
  --md-filled-select-text-field-active-indicator-height: 0px;
  --md-filled-select-text-field-focus-active-indicator-height: 0px;
  --md-filled-select-text-field-hover-active-indicator-height: 0px;
  --md-filled-select-text-field-input-text-font: var(--f-ui);
  --md-filled-select-text-field-input-text-size: 17px;
  --md-filled-select-text-field-input-text-color: var(--ink);
  --md-filled-select-text-field-label-text-font: var(--f-ui);
  --md-filled-select-text-field-label-text-size: 13px;
  --md-filled-select-text-field-container-shape-start-start: 0px;
  --md-filled-select-text-field-container-shape-start-end: 0px;
  --md-filled-select-text-field-container-shape-end-start: 0px;
  --md-filled-select-text-field-container-shape-end-end: 0px;
}

/* Numbers keep the data face: they are values, not labels. */
#ambient, #basehot, #dlf, #drf, #dlr, #drr, .tread-input {
  --md-filled-text-field-input-text-font: var(--f-data);
  --md-filled-text-field-input-text-size: 17px;
}

/* The leading icons are Material vocabulary, not iOS. */
.input-with-help md-icon[slot="leading-icon"] { display: none; }

/* The info control becomes the trailing detail of the row. */
.input-with-help .help-icon-btn {
  --md-icon-button-icon-size: 18px;
  --md-icon-button-icon-color: var(--ink-3);
  width: 32px; height: 32px; flex: none;
}

/* --- buttons: iOS filled, full width, 50pt, continuous radius ----------- */

md-filled-button {
  --md-filled-button-container-shape: 12px;
  --md-filled-button-container-height: 50px;
  --md-filled-button-label-text-font: var(--f-ui);
  --md-filled-button-label-text-size: 17px;
  --md-filled-button-label-text-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 8px 0 0;
}

.ux-ghost-btn, .ux-inline-btn, .gate__btn, .segmented__opt, .stepper__hint {
  font-family: var(--f-ui);
  text-transform: none;
  letter-spacing: -0.01em;
}

.ux-ghost-btn {
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  min-height: 40px;
  padding: 0 16px;
}

.segmented {
  border: none;
  background: var(--paper-sunk);
  border-radius: 9px;
  padding: 2px;
}

.segmented__opt {
  border: none;
  border-radius: 7px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  padding: 0 12px;
}

/* The chosen option is the instrument light: track day, race or road is the
   single decision the whole calculation hangs on, so it is lit, not shaded. */
.segmented__opt[aria-checked="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
}

/* The ring is drawn inside the option, so on the lit one it would have been
   accent on accent: a 1:1 indicator, which is no indicator. The lit option
   takes the ink it already carries, 8.34:1 in the dark and 6.15:1 in
   daylight. */
.segmented__opt[aria-checked="true"]:focus-visible { outline-color: var(--accent-ink); }

/* --- iOS switch --------------------------------------------------------- */

md-switch {
  --md-switch-track-shape: 16px;
  --md-switch-handle-shape: 14px;
  --md-switch-track-width: 51px;
  --md-switch-track-height: 31px;
  --md-switch-selected-track-color: #34c759;
  --md-switch-selected-hover-track-color: #34c759;
  --md-switch-selected-focus-track-color: #34c759;
  --md-switch-selected-pressed-track-color: #34c759;
  --md-switch-selected-handle-color: #fff;
  --md-switch-selected-hover-handle-color: #fff;
  --md-switch-handle-color: #fff;
  --md-switch-track-outline-width: 0px;
  --md-switch-track-color: var(--rule-strong);
}

/* --- settings rows ------------------------------------------------------ */

.setting-row { padding: 12px 0; border-top: 0.5px solid var(--rule); }
.setting-row__name { font-family: var(--f-ui); font-size: 17px; font-weight: 400; text-transform: none; letter-spacing: -0.01em; }
.setting-row__note { font-size: 13px; }
.settings-group { font-family: var(--f-ui); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; }
.settings-hint { font-size: 13px; }

/* ===========================================================================
   Sheets
   ---------------------------------------------------------------------------
   A panel sliding in from the right edge is an Android navigation drawer. iOS
   presents secondary content modally from the bottom, with a grabber, rounded
   top corners, and the page behind it visibly held. That is what help, history,
   settings and feedback are: modal detail over the main screen.
   ========================================================================= */

.help-drawer, .feedback-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  max-width: none;
  height: auto;
  max-height: 92vh;
  border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0;
  border-left: none;
  border-top: 0.5px solid var(--rule-strong);
  background: var(--paper-raised);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 40px rgba(0,0,0,0.45);
}

.help-drawer.open, .feedback-drawer.open {
  right: 0;
  transform: translateY(0);
}

/* the grabber */
.help-drawer::before, .feedback-drawer::before {
  content: '';
  position: sticky;
  top: 8px;
  display: block;
  width: 36px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 3px;
  background: var(--rule-strong);
  z-index: 2;
}

.help-drawer-header, .feedback-drawer-header {
  padding: 8px var(--ios-margin) 12px;
  border-bottom: 0.5px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--paper-raised);
  z-index: 1;
}

.help-drawer-header h2, .feedback-drawer-header h2 {
  font-family: var(--f-ui) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-transform: none;
  letter-spacing: -0.01em;
}

.help-drawer-content, .feedback-drawer-content { padding: var(--ios-margin); }

.help-drawer-content h3 {
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 24px 0 4px;
}

.help-drawer-content p, .help-drawer-content li { font-size: 15px; line-height: 1.45; }

.help-drawer-overlay { background: rgba(0,0,0,0.4); }

/* On a wide screen a bottom sheet is wrong; centre it as a modal card. */
@media (min-width: 720px) {
  .help-drawer, .feedback-drawer {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: 560px;
    max-height: 82vh;
    border-radius: var(--ios-radius-lg);
    border: 0.5px solid var(--rule-strong);
    transform: translate(-50%, -46%) scale(0.98);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 220ms cubic-bezier(0.32,0.72,0,1), opacity 180ms ease, visibility 0s 220ms;
  }
  .help-drawer.open, .feedback-drawer.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }
  .help-drawer::before, .feedback-drawer::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .help-drawer, .feedback-drawer { transition: none; }
}

/* The value column sits on the standard inset, not wherever the component's
   internal padding happens to land. */
.input-with-help { padding: 0 8px 0 0; }
md-filled-text-field, md-filled-select {
  --md-filled-text-field-leading-space: 16px;
  --md-filled-text-field-trailing-space: 8px;
  --md-filled-select-text-field-leading-space: 16px;
  --md-filled-select-text-field-trailing-space: 8px;
}

/* Section header above the group, standard iOS. */
.card-title { margin: 0 0 7px 16px; display: block; }
.ux-result-head .card-title { margin-left: 0; }

/* Supporting text lines up with the value it belongs to. */
md-filled-text-field { --md-filled-text-field-supporting-text-leading-space: 16px; }

/* Stepper as trailing detail of a row, the way iOS puts a control at the end
   of a list row rather than stranding it on the grouped background. */
.stepper { margin: 0; gap: 6px; flex: none; }
.stepper__btn {
  width: 44px;
  min-height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--paper-sunk);
  font-family: var(--f-ui);
  font-size: 19px;
  font-weight: 500;
}

#ambient-source { padding: 0; margin-right: 4px; }
#ambient-source .ux-chip { border: none; background: transparent; padding: 0; font-size: 11px; }
#ambient-source .ux-why { display: none; }

/* Supporting text is part of the row it belongs to. */
.input-with-help { align-items: center; min-height: 52px; padding-right: 8px; }

/* ===========================================================================
   Material
   ---------------------------------------------------------------------------
   A dark interface reads as cheap when every surface is a flat fill at the same
   value. Real equipment has a light source: the top edge of a panel catches it,
   the face falls away, and the bottom sits in its own shadow. These are small
   numbers on purpose. If you can see the gradient, it is too strong.
   ========================================================================= */

:root[data-theme="dark"] md-elevated-card,
:root[data-theme="dark"] .corner,
:root[data-theme="dark"] .help-drawer,
:root[data-theme="dark"] .feedback-drawer,
:root[data-theme="dark"] .gate,
:root[data-theme="dark"] .ux-modal {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0.012) 42%,
    rgba(0, 0, 0, 0.10) 100%
  );
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.09),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 28px -14px rgba(0, 0, 0, 0.8);
}

/* Hairlines are half a pixel. On a phone that is a real line; at 1px it is a
   border, and borders make an interface look like a form. */
:root[data-theme="dark"] .ux-fact,
:root[data-theme="dark"] .setting-row,
:root[data-theme="dark"] .legend-row { border-bottom-width: 0.5px; }

:root[data-theme="dark"] .input-with-help + .input-with-help::before,
:root[data-theme="dark"] .ios-group > .ios-row + .ios-row::before { height: 0.5px; }

/* The results plan gets a little more room than everything else, because it is
   the thing the product exists to show. */
.plan { margin: 32px auto 12px; }
.corner { padding: 16px 16px 16px; }
.corner--lf, .corner--lr { padding-left: 20px; }
.corner--rf, .corner--rr { padding-right: 20px; }

/* Sharper, tighter numerals: at this size the default tracking reads loose. */
.corner__value { letter-spacing: -0.035em; }

/* The recessed track on a segmented control should read as cut into the
   surface, not printed on it. */
:root[data-theme="dark"] .segmented {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}

/* The grey slug that used to sit here overrode the accent and carried a dead
   second box-shadow; the lit option now comes from .segmented__opt itself. */
:root[data-theme="dark"] .segmented__opt[aria-checked="true"] {
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 0.5px 0 rgba(255,255,255,0.12);
}

/* The stepper's dark slug used to live here. The glass layer sets the same two
   properties at equal specificity further down, so it never painted; the
   stepper's surface and its accent states are owned there now. */

/* The bar floats over content, so it needs to read as glass rather than paint. */
:root[data-theme="dark"] .top-app-bar {
  background: rgba(6, 7, 8, 0.72);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ===========================================================================
   2026 LAYER: the glass instrument
   ---------------------------------------------------------------------------
   The Material components are gone; every control below is native and fully
   owned. The visual grammar is the modern instrument: an aurora ground built
   from the thermal hues, translucent panels with genuine blur, and glow spent
   only where it carries state. The gradient is spent once per screen.

   Selector note: rules here are prefixed :root[data-theme] so they tie with
   the earlier :root[data-theme="dark"] rules and win on source order. The
   attribute is always present because the theme is applied before first paint.
   ========================================================================= */

:root {
  --stroke:     rgba(255, 255, 255, 0.13);
  --stroke-hi:  rgba(255, 255, 255, 0.22);
  --well:       rgba(5, 7, 10, 0.55);
  /* Focus is the accent. A second hue for keyboard state was one colour more
     than the interface can justify. */
  --focus-c:    var(--accent);
  --brand-grad: linear-gradient(115deg, #39c3ff 0%, #3fd07f 55%, #b7e86b 100%);
  --r-card:     16px;
  --r-field:    12px;
}

:root[data-theme="light"] {
  --stroke:    rgba(12, 16, 22, 0.10);
  --stroke-hi: rgba(255, 255, 255, 0.75);
  --well:      rgba(255, 255, 255, 0.72);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --stroke:    rgba(12, 16, 22, 0.10);
    --stroke-hi: rgba(255, 255, 255, 0.75);
    --well:      rgba(255, 255, 255, 0.72);
  }
}

/* --- the ground: heat haze in the product's own thermal hues ------------- */

:root[data-theme] body {
  background-color: var(--paper);
  background-image: var(--graticule);
  background-size: 34px 34px, 34px 34px;
  background-attachment: fixed;
}

:root[data-theme="light"] body { background-image: none; }

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] body { background-image: none; }
}

/* --- flat bar navigation. The floating glass pill went with the aurora:
       separation is a hairline, the surface is honest. ------------------- */

:root[data-theme] .top-app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(20px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
  box-sizing: border-box;
}

:root[data-theme] .top-app-bar.is-scrolled { border-bottom-color: var(--stroke-hi); }

.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}

.icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.icon-btn:active { transform: scale(0.94); }

.msym {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}

/* The one gradient moment at rest. It used to sit on a second, in-content
   wordmark; the owner rightly called the duplication, so the bar title now
   carries the colour and the page says GripCalc exactly once. */
:root[data-theme] .app-title {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- glass panels -------------------------------------------------------- */

:root[data-theme] md-elevated-card {
  display: block;
  background: var(--paper-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin: 0 0 28px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  overflow: visible;
}

:root[data-theme] .card-title {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 10px 20px;
}

.card-title-row { display: flex; align-items: center; gap: 6px; margin: 0 0 10px 20px; }
.card-title-row .card-title { margin: 0; }

/* --- fields: owned, not dressed ------------------------------------------ */

:root[data-theme] .field {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 12px 0;
  min-height: 0;
}

:root[data-theme] md-elevated-card > .field + .field { border-top: 0.5px solid var(--stroke); }

.field__label {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.field__well {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--well);
  border: 1px solid var(--stroke);
  border-radius: var(--r-field);
  padding: 13px 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.field__well:focus-within {
  border-color: color-mix(in srgb, var(--focus-c) 70%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--focus-c) 18%, transparent),
    0 0 32px -8px color-mix(in srgb, var(--focus-c) 45%, transparent);
}

.field__well input,
.field__well select {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: 400 17px/1.3 var(--f-ui);
  letter-spacing: -0.01em;
}

.field__well input[inputmode="decimal"] {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a9096' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 22px;
  cursor: pointer;
}

.field__suffix {
  flex: none;
  font-family: var(--f-data);
  font-size: 13px;
  color: var(--ink-3);
}

.field__hint { font-size: 13px; color: var(--ink-3); margin: 0; }

.field-error { font-size: 13px; color: var(--t-hot); }

.field__well:has(input[aria-invalid="true"]) {
  border-color: var(--t-hot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-hot) 22%, transparent);
}

.field-area {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--stroke);
  border-radius: var(--r-field);
  padding: 13px 14px;
  color: var(--ink);
  font: 400 15px/1.5 var(--f-ui);
  resize: vertical;
  outline: 0;
}

.field-area:focus {
  border-color: color-mix(in srgb, var(--focus-c) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-c) 18%, transparent);
}

:root[data-theme] .help-icon-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.help-icon-btn .msym { font-size: 17px; }
.help-icon-btn:hover { color: var(--ink); }

:root[data-theme] .grid-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
:root[data-theme] .grid-inputs .field { padding: 8px 0; }

/* --- the switch ----------------------------------------------------------- */

.tgl {
  appearance: none;
  -webkit-appearance: none;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: var(--paper-sunk);
  border: 1px solid var(--stroke);
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background 200ms ease, border-color 200ms ease;
}

.tgl::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.tgl:checked {
  background: linear-gradient(115deg, #3fd07f, #39c3ff);
  border-color: transparent;
  box-shadow: 0 0 20px -6px rgba(63, 208, 127, 0.6);
}

.tgl:checked::after { transform: translateX(20px); }

/* --- buttons -------------------------------------------------------------- */

.btn-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  margin-top: 14px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: 600 17px var(--f-ui);
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 65%, transparent); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px) scale(0.995); }
.btn-primary .msym { font-size: 20px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  font: 500 15px var(--f-ui);
  cursor: pointer;
}

.btn-secondary:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.btn-secondary .msym { font-size: 18px; }

/* --- corners: the readout glows in its own state -------------------------- */

:root[data-theme] .corner {
  background: var(--paper-sunk);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--stroke-hi);
}

:root[data-theme] .corner::after {
  width: 4px;
  border-radius: 6px;
  top: 14px;
  bottom: 14px;
  background: var(--edge-c, var(--ink-3));
  box-shadow: 0 0 18px 0 color-mix(in srgb, var(--edge-c, transparent) 70%, transparent);
}

:root[data-theme] .corner__value {
  text-shadow: 0 0 36px color-mix(in srgb, var(--edge-c, #7fb2ea) 42%, transparent);
}

:root[data-theme] .corner__scale {
  opacity: 1;
  filter: saturate(1.1) drop-shadow(0 0 7px rgba(90, 162, 240, 0.28));
}

/* --- reading entry: the zone carries its colour --------------------------- */

.zone-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--well);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px 8px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.zone-field:focus-within {
  border-color: color-mix(in srgb, var(--focus-c) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-c) 16%, transparent);
}

.zone-label {
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.zone-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--zone-accent, var(--rule));
  border-radius: 0;
  outline: 0;
  padding: 0 0 5px;
  color: var(--ink);
  font: 600 20px var(--f-data);
  font-variant-numeric: tabular-nums;
  transition: border-color 200ms ease;
}

/* --- facts as chips -------------------------------------------------------- */

:root[data-theme] .ux-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  border: 0;
  background: transparent;
  margin: 20px 0 0;
  overflow: visible;
}

:root[data-theme] .ux-fact {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--stroke);
  border-bottom-width: 1px;
  border-radius: 14px;
}

/* --- score ring glow ------------------------------------------------------- */

:root[data-theme] .dial__value {
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--dial-c, #3fd07f) 55%, transparent));
}

/* --- sheets, gate, modal: real glass --------------------------------------- */

:root[data-theme] .help-drawer,
:root[data-theme] .feedback-drawer {
  background: color-mix(in srgb, var(--paper-raised) 84%, transparent);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-top: 1px solid var(--stroke-hi);
}

:root[data-theme] .gate {
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--stroke-hi);
}

:root[data-theme] .gate__actions { background: transparent; border-top-color: var(--stroke); }

:root[data-theme] .gate__btn--accept {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: -0.01em;
  font-family: var(--f-ui);
  font-size: 15px;
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}

:root[data-theme] .ux-modal {
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--stroke);
  border-radius: 20px;
}

:root[data-theme] .autocomplete-suggestions {
  background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}

:root[data-theme] .autocomplete-item { padding: 12px 14px; font-family: var(--f-ui); font-size: 15px; }
:root[data-theme] .autocomplete-item:hover,
:root[data-theme] .autocomplete-item.selected { background: color-mix(in srgb, var(--focus-c) 12%, transparent); }

:root[data-theme] .ux-toast { border-radius: 14px; border: 1px solid var(--stroke-hi); }

/* --- steppers -------------------------------------------------------------- */

:root[data-theme] .stepper { margin-top: 2px; gap: 8px; }

:root[data-theme] .stepper__btn {
  width: 46px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  font: 500 19px var(--f-ui);
  box-shadow: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

/* A stepper is pressed with a thumb in gloves; the accent is how it answers. */
:root[data-theme] .stepper__btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

:root[data-theme] .stepper__btn:active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* --- keyboard -------------------------------------------------------------- */

:focus-visible { outline: 2px solid var(--focus-c); outline-offset: 2px; }

/* --- small screens ---------------------------------------------------------- */

@media (max-width: 700px) {
  :root[data-theme] md-elevated-card { border-radius: 18px; padding: 12px 14px; }
  :root[data-theme] .grid-inputs { gap: 2px 10px; }
}

/* ---------------------------------------------------------------------------
   Announcement and shop, both config-driven. The shop lives at the end of the
   page on purpose: commerce never sits in the eight-minute path to a pressure.
   -------------------------------------------------------------------------- */

.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 8px auto 0;
  padding: 8px 12px 8px 16px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
  backdrop-filter: blur(20px);
  font-size: 13px;
  color: var(--ink);
}

.announce-bar[hidden] { display: none; }
.announce-bar a { color: var(--focus-c); }
.announce-close { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 12px; padding: 4px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.shop-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}

.shop-item:hover { border-color: var(--stroke-hi); transform: translateY(-1px); }

.shop-item__name { font: 600 15px var(--f-ui); color: var(--ink); letter-spacing: -0.01em; }
.shop-item__why { font: 400 12.5px/1.45 var(--f-ui); color: var(--ink-2); }
.shop-item__retailer { font: 500 11px var(--f-ui); color: var(--ink-3); margin-top: 2px; }

.shop-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 13px var(--f-ui);
  color: var(--ink-2);
  margin: 18px 0 10px;
}

.shop-disclosure {
  font: 400 11.5px/1.5 var(--f-ui);
  color: var(--ink-3);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 0.5px solid var(--rule);
}

/* Circuit suggestions carry the country as trailing metadata. */
.autocomplete-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.autocomplete-item .ac-meta {
  font: 500 11px var(--f-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}

/* Usage as a segmented pair: a two-option choice is a switch you can see, not
   a dropdown you have to open. */
.usage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.usage-row .segmented { flex: 1; }
.usage-row .segmented__opt { flex: 1; min-height: 44px; font-size: 14px; }

/* ---------------------------------------------------------------------------
   Quantity rows. A two digit value in a full width well with the buttons
   stranded underneath was a desktop habit; on a phone the buttons sit beside
   the number, full height, thumb sized.
   -------------------------------------------------------------------------- */

.qty-row { display: flex; align-items: stretch; gap: 8px; }

.qty-row .qty-btn {
  flex: none;
  width: 56px;
  min-height: 0;
  border-radius: var(--r-field);
  font-size: 22px;
  margin: 0;
}

.field__well--qty {
  flex: none;
  width: 148px;
  justify-content: center;
  gap: 6px;
}

.field__well--qty input {
  flex: 0 1 64px;
  min-width: 0;
  text-align: center;
  font-size: 20px;
}

.field__well--qty .field__suffix { flex: none; }

.qty-row .help-icon-btn { align-self: center; margin-left: auto; }

@media (max-width: 700px) {
  .field__well--qty { width: 132px; }
}

/* Grid blowout guard: a native input's intrinsic width is about twenty
   characters, and a grid item refuses to shrink below its content unless told.
   Without this the delta grid pushed its right column off a 390px screen. */
.grid-inputs .field,
.grid-inputs .field__well { min-width: 0; }

/* The glass layer sets display on every card at higher specificity than the
   inline hide rule, which quietly un-hid the results and pyro cards before
   any calculation. Hidden means hidden, at the same strength. */
:root[data-theme] md-elevated-card.result-card:not(.visible),
:root[data-theme] md-elevated-card.pyro-section:not(.visible) { display: none; }

/* ===========================================================================
   Bottom navigation - mobile only
   ---------------------------------------------------------------------------
   The same glass grammar as the top pill, mirrored at the thumb end of the
   phone. These are section anchors and drawer triggers over one continuous
   page, not separate screens: the workflow (set up, result, analysis) is a
   sequence and stays visible as one. On wide viewports the bar disappears and
   the top bar carries the same actions.
   ========================================================================= */

.bottom-nav { display: none; }

@media (max-width: 700px) {
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-radius: 0;
    border-top: 1px solid var(--stroke);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 0 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease;
  }

  .bottom-nav__item .msym { font-size: 21px; }

  .bottom-nav__label {
    font-family: var(--f-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .bottom-nav__item[aria-current="true"] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }

  .bottom-nav__item:active { transform: scale(0.96); }

  /* Content must clear the bar, and the last card must not hide behind it. */
  body { padding-bottom: 88px; }

  /* The thumb end now owns navigation: the top pill keeps the wordmark and
     the two actions that have no home below (help, feedback). */
  #home-btn, #settings-btn, #history-btn, #shop-btn { display: none; }

  /* Toasts (including the update prompt) must sit above the nav, not on it. */
  .ux-toast-host { bottom: 96px; }
}

/* ===========================================================================
   Pyrometer sliders
   The track is the same thermal gradient the corner scales use, so the thumb's
   resting place reads as a temperature before the number does.
   ========================================================================= */

.pyro-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 4px 0 0;
  background: transparent;
  cursor: pointer;
}

.pyro-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--t-stone) 0%, var(--t-cold) 18%, var(--t-cool) 33%,
    var(--t-window) 50%, var(--t-warm) 74%, var(--t-hot) 100%);
  opacity: 0.75;
  filter: saturate(0.85);
}

.pyro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pyro-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--t-stone) 0%, var(--t-cold) 18%, var(--t-cool) 33%,
    var(--t-window) 50%, var(--t-warm) 74%, var(--t-hot) 100%);
  opacity: 0.75;
}

.pyro-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper-raised);
}

/* ===========================================================================
   Kit view - product cards
   ========================================================================= */

.shop-item__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--well);
  border: 1px solid var(--stroke);
  overflow: hidden;
  margin-bottom: 4px;
}

.shop-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-item__media--glyph { color: var(--ink-3); }
.shop-item__media--glyph svg { width: 44px; height: 44px; }
.shop-item:hover .shop-item__media--glyph { color: var(--ink-2); }

.shop-item__rating {
  font: 500 11.5px var(--f-ui);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.shop-item__stars { color: var(--t-warm); letter-spacing: 1px; font-size: 11px; }

.shop-empty {
  font: 400 13.5px/1.5 var(--f-ui);
  color: var(--ink-3);
  padding: 12px 0;
}

/* Inside the drawer the grid stays two-up on phones so cards keep card shape */
@media (max-width: 700px) {
  #shop-drawer .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Kit buying guide lines */
.shop-item__guide {
  font: 400 11.5px/1.5 var(--f-ui);
  color: var(--ink-3);
}
.shop-item__guide strong { color: var(--ink-2); font-weight: 600; }

.shop-item__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.shop-item__foot .shop-item__retailer { margin-top: 0; }

.shop-item__price {
  font: 500 11.5px var(--f-data);
  color: var(--ink-2);
}

/* On phones a card becomes a horizontal row: thumbnail left, text right,
   the way native shop lists read. Desktop keeps the vertical card. */
@media (max-width: 700px) {
  #shop-drawer .shop-grid { grid-template-columns: 1fr; }
  #shop-drawer .shop-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 3px 14px;
    align-items: start;
  }
  #shop-drawer .shop-item > * { grid-column: 2; }
  #shop-drawer .shop-item__media {
    grid-column: 1;
    grid-row: 1 / span 6;
    aspect-ratio: 1;
    margin-bottom: 0;
  }
  #shop-drawer .shop-item__media--glyph svg { width: 34px; height: 34px; }
}

/* Wordmark is a link now; the gradient must survive anchor colour rules */
.app-title__link {
  text-decoration: none;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Settings: routes to the pages that are not the calculator */
.settings-links { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.settings-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background 140ms ease;
}
.settings-link:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.settings-link .msym { color: var(--ink-3); font-size: 20px; }
.settings-link .setting-row__name, .settings-link .setting-row__note { display: block; }

/* ===========================================================================
   Pro membership + tread depth + partners
   ========================================================================= */

.pro-tag {
  display: inline-block;
  font: 600 9px var(--f-data);
  letter-spacing: 0.12em;
  color: var(--t-window);
  background: color-mix(in srgb, var(--t-window) 13%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.tread-depth-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tread-depth-row input {
  background: var(--well);
  border: 1px solid var(--stroke);
  border-radius: var(--r-field);
  padding: 12px 10px;
  color: var(--ink);
  font: 500 16px var(--f-data);
  text-align: center;
  min-width: 0;
}
.tread-depth-row input:disabled { opacity: 0.45; cursor: not-allowed; }
.tread-depth-row input:focus-visible { outline: 2px solid var(--focus-c); outline-offset: 1px; }

.pro-benefits {
  margin: 6px 0 12px;
  padding-left: 20px;
  font: 400 13.5px/1.9 var(--f-ui);
  color: var(--ink-2);
}
.pro-actions .btn-primary { text-decoration: none; }

.history-upsell {
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 16px;
  margin-top: 4px;
  font: 400 13.5px/1.6 var(--f-ui);
  color: var(--ink-2);
  text-align: center;
}
.history-upsell strong { color: var(--ink); }

/* Car profile entry point + modal fields */
.car-profile-btn {
  margin-top: 8px;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: 500 12px var(--f-ui);
  cursor: pointer;
  padding: 4px 0;
}
.car-profile-btn:hover { color: var(--ink); }

.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cp-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 500 11.5px var(--f-ui);
  color: var(--ink-3);
}
.cp-grid input, .cp-grid select {
  background: var(--well);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  font: 500 15px var(--f-ui);
  min-width: 0;
}
.cp-grid input:focus-visible, .cp-grid select:focus-visible {
  outline: 2px solid var(--focus-c);
  outline-offset: 1px;
}