/* Material 3 PRIMITIVES — generic, page-agnostic.
 * Only .md-* classes and shared variables. Page classes are mapped onto these
 * in each page's own -material stylesheet, so no page owns another's layout.
 */
/* Material 3 component anatomy.
 *
 * EVERY rule in this file is scoped to html[data-design="material"]. Classic
 * cannot be affected by anything here — that is the point, and it is checked
 * by comparing Classic's computed styles before and after.
 *
 * Sizing note: MD3's 40dp buttons and 48dp touch targets are applied in
 * DIALOGS, where there is room. Controls inside resort cards keep their
 * compact size on purpose — this app exists to scan 342 resorts on a 420px
 * panel, and inflating list density to satisfy a spec would be a regression
 * dressed as compliance.
 */

/* ── Shared component variables ─────────────────────────────────────────── */
html[data-design="material"]{
  --md-btn-h:40px;          /* dialog / standalone buttons */
  --md-btn-h-compact:32px;  /* buttons living inside dense card rows */
  --md-shape-xs:4px;
  --md-shape-s:8px;
  --md-shape-m:12px;
  --md-shape-l:16px;
  --md-shape-xl:28px;
  --md-shape-full:999px;
}
html[data-design="material"] .md-btn.tonal,
html[data-design="material"] .conn-btn{
  background:var(--acc-bg) !important;
  color:var(--acc-h) !important;
}
html[data-design="material"] .md-btn.outlined,
html[data-design="material"] .sim-set-btn{
  background:transparent !important;
  color:var(--acc) !important;
  border:1px solid var(--bdr2) !important;
}
html[data-design="material"] .md-btn.text{
  background:transparent !important;
  color:var(--acc) !important;
  padding:0 12px;
}
html[data-design="material"] .md-btn:disabled,
html[data-design="material"] .conn-btn:disabled{
  opacity:.38 !important;
  cursor:default;
  pointer-events:none;
}


/* Keyboard users moving through a segmented group with arrow keys should see
   where they are even though only one segment is tabbable. */
html[data-design="material"] .list-tab:focus-visible,
html[data-design="material"] .powder-btn:focus-visible,
html[data-design="material"] .map-seg button:focus-visible{
  outline:3px solid var(--acc);
  outline-offset:-3px;
}