/* Tracker layout — MATERIAL 3.
 * Loaded only alongside Classic; every selector here is scoped to
 * html[data-design="material"], so Classic is unreachable from this file.
 */
/* Tracker component styles. Tokens: css/tokens.css · MD3: css/md3.css */
/* ── Material: flatten the Classic "glass" treatment ────────────────────────
   Classic leans on frosted translucency: 412 hardcoded rgba(255,255,255,…)
   fills and 57 backdrop blurs. Material 3 expresses depth with opaque tonal
   surfaces instead, so rather than rewrite every declaration, the effect is
   neutralised here for this design only. !important is deliberate — it has to
   beat inline gradients and per-element rules it cannot enumerate. */
html[data-design="material"] *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-design="material"] .tb-pill,
html[data-design="material"] .tb-prices-btn,
html[data-design="material"] .tb-settings-btn,
html[data-design="material"] .panel-card,
html[data-design="material"] .list-tabs,
html[data-design="material"] .rc,
html[data-design="material"] .stats{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
  box-shadow:none !important;
}
/* MD3 shape scale: cards medium (12dp), pills full. */
html[data-design="material"] .rc{border-radius:12px !important}
html[data-design="material"] .tb-pill,
html[data-design="material"] .tb-prices-btn,
html[data-design="material"] .tb-settings-btn{border-radius:999px !important}
html[data-design="material"] .list-tabs{border-radius:999px !important}
/* The page backdrop is a flat surface, not a snow gradient. */
html[data-design="material"] body{background:var(--bg) !important}
/* ── Material: opaque surfaces for everything Classic frosts ────────────────
   Found by walking the DOM in Material mode and collecting every element with
   a translucent background — tables, info blocks, map controls, modals and
   link buttons all inherited Classic's glass. MD3 uses opaque tonal surfaces,
   so they are pinned to the token scale here. */

/* Panels, modals and menus — MD3 dialog shape is extra-large (28dp). */
html[data-design="material"] .settings-modal,
html[data-design="material"] .prices-modal,
html[data-design="material"] .runs-modal,
html[data-design="material"] .lang-menu,
html[data-design="material"] .conn-modal{
  background:var(--surf) !important;
  border:1px solid var(--bdr) !important;
  box-shadow:var(--sh-lg) !important;
  border-radius:28px !important;
}
/* Scrims stay translucent — that is what a scrim is — but MD3 uses a neutral
   black wash, not a white frost. */
html[data-design="material"] .settings-overlay,
html[data-design="material"] .prices-overlay,
html[data-design="material"] .runs-overlay,
html[data-design="material"] .conn-overlay{
  background:rgba(0,0,0,.32) !important;
}

/* Data surfaces: pricing tables, stat blocks, weather, detail cells. */
html[data-design="material"] .info-stats,
html[data-design="material"] .info-wx,
html[data-design="material"] .p-type,
html[data-design="material"] .p-passes,
html[data-design="material"] .ptbl-detail-cell,
html[data-design="material"] .rp,
html[data-design="material"] .fp,
html[data-design="material"] .tt,
html[data-design="material"] .prices-modal th{
  background:var(--surf2) !important;
  border-color:var(--bdr) !important;
  box-shadow:none !important;
}

/* Buttons and link chips — MD3 outlined button: transparent fill, 1dp
   outline, fully rounded. */
html[data-design="material"] .olink,
html[data-design="material"] .ig-link,
html[data-design="material"] .rr-btn,
html[data-design="material"] .fac-tab,
html[data-design="material"] .runs-close,
html[data-design="material"] .runs-back,
html[data-design="material"] .sim-set-btn,
html[data-design="material"] .prices-sel,
html[data-design="material"] .lang-opt{
  background:var(--surf2) !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:999px !important;
  backdrop-filter:none !important;
}
html[data-design="material"] .fac-tab.sel,
html[data-design="material"] .prices-sel.sel,
html[data-design="material"] .olink.sel{
  background:var(--acc-bg) !important;
  border-color:var(--acc-bg) !important;
  color:var(--acc-h) !important;
}

/* Map controls (top/bottom-right) — MD3 small FAB: opaque surface, no glass. */
html[data-design="material"] .tm-action-btn,
html[data-design="material"] .tm-overlay-toggle,
html[data-design="material"] .tm-zoom-btn,
html[data-design="material"] .geo-ctrl-btn,
html[data-design="material"] .leaflet-bar a,
html[data-design="material"] .leaflet-control-zoom a{
  background:var(--surf) !important;
  border:1px solid var(--bdr) !important;
  color:var(--text2) !important;
  box-shadow:var(--sh-sm) !important;
  backdrop-filter:none !important;
}

/* Pin popup — an MD3 surface card, not frosted glass. */
html[data-design="material"] .leaflet-popup-content-wrapper{
  background:var(--surf) !important;
  color:var(--text) !important;
  border:1px solid var(--bdr) !important;
  border-radius:12px !important;
  box-shadow:var(--sh-md) !important;
}
html[data-design="material"] .leaflet-popup-tip{
  background:var(--surf) !important;
  border:1px solid var(--bdr) !important;
  box-shadow:none !important;
}
html[data-design="material"] .cam-thumb-lbl{
  background:rgba(0,0,0,.66) !important;
  border-radius:8px !important;
}

/* All / Star / Powder — MD3 segmented button: one outlined container, equal
   segments divided by hairlines, selected segment filled with the secondary
   container and marked by tone rather than a raised pill. */
html[data-design="material"] .list-tabs{
  background:transparent !important;
  border:1px solid var(--bdr2) !important;
  border-radius:999px !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden;
  box-shadow:none !important;
}
html[data-design="material"] .list-tab,
html[data-design="material"] .powder-btn{
  flex:1 !important;
  background:transparent !important;
  color:var(--text2) !important;
  border:0 !important;
  border-left:1px solid var(--bdr2) !important;
  border-radius:0 !important;
  padding:10px 8px !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
html[data-design="material"] .list-tabs > :first-child{border-left:0 !important}
html[data-design="material"] .list-tab.sel,
html[data-design="material"] .powder-btn[aria-pressed="true"]{
  background:var(--acc-bg) !important;
  color:var(--acc-h) !important;
  font-weight:600 !important;
}
/* Settings segmented controls (map style / appearance / design / language) —
   same MD3 segmented-button treatment as the All-Star-Powder switch, so the
   whole settings sheet stops looking like frosted Classic. */
html[data-design="material"] .map-seg{
  background:transparent !important;
  border:1px solid var(--bdr2) !important;
  border-radius:999px !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden;
  box-shadow:none !important;
}
html[data-design="material"] .map-seg button{
  background:transparent !important;
  color:var(--text2) !important;
  border:0 !important;
  border-left:1px solid var(--bdr2) !important;
  border-radius:0 !important;
  padding:10px 8px !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
html[data-design="material"] .map-seg button:first-child{border-left:0 !important}
html[data-design="material"] .map-seg button.sel{
  background:var(--acc-bg) !important;
  color:var(--acc-h) !important;
  font-weight:600 !important;
}

/* Remaining prices-sheet controls. */
html[data-design="material"] .prices-count,
html[data-design="material"] .prices-close,
html[data-design="material"] .prices-srch{
  background:var(--surf2) !important;
  border:1px solid var(--bdr) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  border-radius:999px !important;
}

/* ── Component mapping (moved out of the generic primitives file) ── */
/* ── Buttons ────────────────────────────────────────────────────────────────
   MD3 anatomy: pill container, 24dp side padding, labelLarge (14/500),
   optional 18dp leading icon with an 8dp gap. Variants differ only by
   container fill and outline. */
html[data-design="material"] .md-btn,
html[data-design="material"] .conn-btn,
html[data-design="material"] .runs-rec-btn,
html[data-design="material"] .runs-stop-btn,
html[data-design="material"] .sim-set-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--md-btn-h);
  padding:0 24px;
  border-radius:var(--md-shape-full);
  font-size:14px;
  font-weight:500;
  letter-spacing:.1px;
  line-height:20px;
  border:none;
  cursor:pointer;
}
/* Filled — the default high-emphasis action. */
html[data-design="material"] .md-btn.filled,
html[data-design="material"] .runs-rec-btn{
  background:var(--acc) !important;
  color:var(--acc-on) !important;
}
html[data-design="material"] .runs-stop-btn{
  background:var(--closed-bg) !important;
  color:var(--closed) !important;
}
/* Dense card controls: shape and colour only.
   Setting MD3 metrics here (32dp min-height, 14px label, 14px padding) grew
   .olink from 20px to 32px tall and ~55px to ~90px wide, pushing the link row
   from 2 lines to 3 and the card from 437px to 557px. The card's own type
   scale is em-compounded down to ~8px computed, so an absolute 13px label also
   read as a different size from everything beside it. Inherit both instead. */
html[data-design="material"] .olink,
html[data-design="material"] .ig-link,
html[data-design="material"] .rr-btn{
  /* Shape only. Setting font-size:inherit was WORSE than the absolute 13px it
     replaced: Classic sizes these with a compounding em rule (8.68px
     computed), and `inherit` discards that in favour of the parent's 14px.
     Declaring nothing lets Classic's own metric stand, which is what keeps the
     link row from wrapping. */
  border-radius:var(--md-shape-full) !important;
}

/* ── Icon button — 40dp box, circular state layer ───────────────────────── */
html[data-design="material"] .md-icon-btn,
html[data-design="material"] .settings-close,
html[data-design="material"] .prices-close,
html[data-design="material"] .runs-close,
html[data-design="material"] .runs-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-height:40px;
  padding:0 !important;
  border-radius:var(--md-shape-full) !important;
  background:transparent !important;
  border:none !important;
  color:var(--text2) !important;
  cursor:pointer;
}

/* ── Chips ──────────────────────────────────────────────────────────────────
   32dp high, 8dp corner, 1dp outline when unselected, secondary-container
   fill when selected. */
html[data-design="material"] .fac-tab,
html[data-design="material"] .prices-sel{
  border-radius:var(--md-shape-s) !important;
  background:transparent !important;
  border:1px solid var(--bdr) !important;
  color:var(--text2) !important;
}
html[data-design="material"] .fac-tab.sel,
html[data-design="material"] .prices-sel.sel{
  background:var(--acc-bg) !important;
  border-color:transparent !important;
  color:var(--acc-h) !important;
}

/* ── Dialog ─────────────────────────────────────────────────────────────────
   28dp corner, 24dp padding, headline 24/400, level-3 elevation, 32% scrim.
   The scrim opacity and radius already came from the theme pass; what this
   adds is the internal rhythm and the headline/supporting type scale. */
html[data-design="material"] .settings-modal,
html[data-design="material"] .prices-modal,
html[data-design="material"] .runs-modal{
  border-radius:var(--md-shape-xl) !important;
  max-width:560px;
  box-shadow:0 4px 4px rgba(0,0,0,.30),0 8px 12px 6px rgba(0,0,0,.15) !important;
}
html[data-design="material"] .settings-head,
html[data-design="material"] .prices-head,
html[data-design="material"] .runs-head{
  padding:20px 24px 12px !important;
  font-size:22px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  border-bottom:1px solid var(--bdr) !important;
}
html[data-design="material"] .settings-body,
html[data-design="material"] .runs-body{
  padding:8px 24px 24px !important;
}
/* Section labels inside a dialog are MD3 "title small". */
html[data-design="material"] .settings-sec-title{
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.1px !important;
  text-transform:none !important;
  color:var(--acc) !important;
}
html[data-design="material"] .settings-sec-desc{
  font-size:12px !important;
  line-height:16px !important;
  letter-spacing:.4px !important;
  color:var(--text2) !important;
}

/* ── Menu ───────────────────────────────────────────────────────────────────
   Surface container at 4dp corner, 8dp vertical padding, 48dp rows. */
html[data-design="material"] .lang-menu{
  border-radius:var(--md-shape-xs) !important;
  padding:8px 0 !important;
  background:var(--surf2) !important;
  border:1px solid var(--bdr) !important;
}
html[data-design="material"] .lang-opt{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 12px !important;
  border-radius:0 !important;
  border:none !important;
  background:transparent !important;
  font-size:14px;
  font-weight:400;
  letter-spacing:.1px;
  color:var(--text) !important;
  width:100%;
}

/* ── Text field (search) ────────────────────────────────────────────────────
   MD3 search field: fully rounded, filled, no outline. Kept at the topbar's
   existing height so the header does not grow. */
html[data-design="material"] .tb-srch-in{
  font-size:16px;
  letter-spacing:.5px;
  border:none !important;
  background:transparent !important;
}

/* ── Snackbar ───────────────────────────────────────────────────────────────
   Inverse surface, 4dp corner — MD3 puts a snackbar on the INVERSE surface so
   it reads as a system message rather than page content. */
html[data-design="material"] .toast,
html[data-design="material"] #toast{
  background:var(--text) !important;
  color:var(--bg) !important;
  border-radius:var(--md-shape-xs) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15) !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:.25px !important;
  padding:14px 16px !important;
  border:none !important;
}


/* ── Material: controls the earlier sweeps missed ──────────────────────────
   Found by auditing with the search dropdown and Settings OPEN — the first
   pass only walked the default view, so anything behind an interaction stayed
   Classic. Two different failure modes were hiding here:
     · translucent + blurred panels (the search dropdown), and
     · OPAQUE Classic gradients (the location presets), which a translucency
       audit cannot see at all. */

/* Search / filter dropdown. */
html[data-design="material"] .filter-body{
  background:var(--surf) !important;
  background-image:none !important;
  border:1px solid var(--bdr) !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-design="material"] .filter-row-lbl{
  color:var(--text2) !important;
  background:transparent !important;
}

/* Notification control. Its colours were already Material, but a 9px corner on
   a full-width control still reads as Classic; MD3 wants a pill. */
html[data-design="material"] .push-toggle{
  border-radius:999px !important;
  background:var(--surf2) !important;
  background-image:none !important;
  border:1px solid var(--bdr) !important;
  box-shadow:none !important;
  padding:10px 16px !important;
  font-weight:500 !important;
}

/* Location simulation presets — MD3 outlined chips. */
html[data-design="material"] .sim-presets button{
  background:transparent !important;
  background-image:none !important;
  border:1px solid var(--bdr2) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  color:var(--acc) !important;
  padding:6px 14px !important;
  font-weight:500 !important;
}
html[data-design="material"] .sim-presets button:disabled{opacity:.38 !important}

/* Remaining floating chrome that still frosted. */
html[data-design="material"] .rp-modal,
html[data-design="material"] .map-legend,
html[data-design="material"] .tm-toolbar{
  background:var(--surf) !important;
  background-image:none !important;
  border:1px solid var(--bdr) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-design="material"] .rp-close,
html[data-design="material"] .lt-cnt{
  background:var(--surf2) !important;
  color:var(--text2) !important;
  border-radius:999px !important;
  box-shadow:none !important;
}
html[data-design="material"] .map-fab{
  background:var(--surf) !important;
  background-image:none !important;
  border:1px solid var(--bdr) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-design="material"] .map-hint{
  background:var(--text) !important;   /* MD3 snackbar sits on the inverse surface */
  color:var(--bg) !important;
  border-radius:4px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ── Lifts / slopes group: keep the outline continuous when open ────────────
   Two earlier rules both set .fac-tab with !important, and the later one wins,
   so an OPEN group kept a fully-rounded 8px radius and a transparent border
   while the list below it has square top corners and a solid one. The two
   edges met at a mismatch and the panel looked like its top corners were
   missing. Classic never had this: its .fac-tab.sel squares off to 12px 12px
   0 0 and meets .fac-list's 0 0 12px 12px exactly.

   Fix the junction rather than the radius alone: square the header's bottom,
   and carry the list's border around its top and sides so one outline runs
   round the whole group. */
html[data-design="material"] .fac-tab.sel{
  border-radius:var(--md-shape-s) var(--md-shape-s) 0 0 !important;
  border:1px solid var(--bdr) !important;
  border-bottom:none !important;
}
html[data-design="material"] .fac-list{
  border-radius:0 0 var(--md-shape-s) var(--md-shape-s);
}