/* CO₂ Calculator design system · components (v2)
   Reads system roles from tokens.css only. States: hover, focus-visible, pressed, disabled, error. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--body-l); letter-spacing: var(--tracking-body);
  color: var(--md-on-surface); background: var(--md-surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--md-primary-text); }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }

.icon {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  display: inline-block; flex: none; user-select: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.icon--18 { font-size: 18px; }
.icon--20 { font-size: 20px; }

/* Type roles */
.t-display-l { font: var(--display-l); letter-spacing: var(--tracking-display); }
.t-display-m { font: var(--display-m); letter-spacing: var(--tracking-display); }
.t-display-s { font: var(--display-s); letter-spacing: var(--tracking-display); }
.t-headline-l { font: var(--headline-l); letter-spacing: var(--tracking-headline); }
.t-headline-m { font: var(--headline-m); letter-spacing: var(--tracking-headline); }
.t-headline-s { font: var(--headline-s); letter-spacing: var(--tracking-headline); }
.t-title-l { font: var(--title-l); letter-spacing: var(--tracking-headline); }
.t-title-m { font: var(--title-m); }
.t-title-s { font: var(--title-s); }
.t-body-l { font: var(--body-l); }
.t-body-m { font: var(--body-m); }
.t-body-s { font: var(--body-s); letter-spacing: var(--tracking-label); }
.t-label-l { font: var(--label-l); letter-spacing: var(--tracking-label); }
.t-label-m { font: var(--label-m); letter-spacing: var(--tracking-label); }
.kicker { font: var(--kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--md-primary-text); }
.muted { color: var(--md-on-surface-variant); }
.meta { color: var(--md-on-surface-muted); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* State layer: hover, focus and pressed overlay in the content color */
.sl { position: relative; isolation: isolate; overflow: hidden; }
.sl::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--dur-150) var(--ease-effects);
}
.sl:hover::after { opacity: var(--state-hover); }
.sl:focus-visible::after { opacity: var(--state-focus); }
.sl:active::after { opacity: var(--state-pressed); }

/* ---------- Visual motif ---------- */
.motif-leaf { color: var(--motif-line); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.motif-wave { display: block; width: 100%; height: auto; }
.motif-wave .w-fill { fill: var(--md-surface); }
.motif-wave .w-line { fill: none; stroke: var(--motif-line); stroke-width: 2; }
.motif-art { width: 160px; height: 120px; }
.motif-art .a-bg { fill: var(--motif-fill); }
.motif-art .a-line { fill: none; stroke: var(--md-primary-text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.motif-art .a-soft { fill: none; stroke: var(--motif-line); stroke-width: 2.5; stroke-linecap: round; }
.motif-art--error .a-bg { fill: var(--md-error-container); }
.motif-art--error .a-line { stroke: var(--md-error); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--inset-8);
  height: 48px; padding: 0 var(--space-24); border: 0; border-radius: var(--shape-full);
  font: var(--label-l); letter-spacing: var(--tracking-label);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--md-primary-text);
  transition: transform var(--dur-250) var(--ease-spatial), box-shadow var(--dur-150) var(--ease-effects), background-color var(--dur-150) var(--ease-effects);
}
.btn:active { transform: scale(.96); }
.btn .icon { font-size: 20px; margin-left: calc(var(--inset-8) * -1); }
.btn--trail .icon { margin-left: 0; margin-right: calc(var(--inset-8) * -1); transition: transform var(--dur-250) var(--ease-spatial); }
.btn--trail:hover .icon { transform: translateX(3px); }
.btn--filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn--filled:hover { box-shadow: var(--elev-1); }
.btn--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn--outlined { box-shadow: inset 0 0 0 1px var(--md-outline); }
.btn--text { padding: 0 var(--space-16); }
.btn--text .icon { margin-left: 0; }
.btn--lg { height: 64px; padding: 0 var(--space-40); font: var(--title-m); }
.btn--sm { height: 40px; padding: 0 var(--space-16); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; box-shadow: none; color: rgb(var(--disabled-rgb) / var(--disabled-content)); }
.btn--filled:disabled, .btn--tonal:disabled { background: rgb(var(--disabled-rgb) / var(--disabled-container)); }
.btn:disabled::after { display: none; }

.icon-btn {
  width: 48px; height: 48px; border: 0; border-radius: var(--shape-full); cursor: pointer;
  display: inline-grid; place-items: center; background: transparent; color: var(--md-on-surface-variant);
  transition: transform var(--dur-250) var(--ease-spatial);
}
.icon-btn:active { transform: scale(.9); }

/* Segmented button */
.segmented { display: inline-flex; padding: var(--inset-4); gap: var(--inset-4); border-radius: var(--shape-full); background: var(--md-surface-container); }
.segmented button {
  height: 40px; padding: 0 var(--space-16); border: 0; border-radius: var(--shape-full); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--inset-8);
  font: var(--label-l); letter-spacing: var(--tracking-label); color: var(--md-on-surface-variant); background: transparent;
  transition: background-color var(--dur-250) var(--ease-effects), color var(--dur-250) var(--ease-effects);
}
.segmented button[aria-pressed="true"] { background: var(--md-surface-container-lowest); color: var(--md-on-surface); box-shadow: var(--elev-1); }

/* Switch (M3) */
.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch__track { position: absolute; inset: 0; border-radius: var(--shape-full); background: var(--md-surface-container-highest); box-shadow: inset 0 0 0 2px var(--md-outline); transition: background-color var(--dur-250) var(--ease-effects); }
.switch__thumb {
  position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-outline);
  display: grid; place-items: center; color: transparent;
  transition: transform var(--dur-400) var(--ease-spatial), width var(--dur-250) var(--ease-spatial), height var(--dur-250) var(--ease-spatial), top var(--dur-250) var(--ease-spatial), left var(--dur-250) var(--ease-spatial), background-color var(--dur-150) var(--ease-effects);
}
.switch input:checked ~ .switch__track { background: var(--md-primary); box-shadow: none; }
.switch input:checked ~ .switch__thumb { width: 24px; height: 24px; top: 4px; left: 4px; transform: translateX(20px); background: var(--md-on-primary); color: var(--md-primary); }
.switch input:focus-visible ~ .switch__track { outline: 3px solid var(--md-primary); outline-offset: 3px; }

/* ---------- Fields: tonal, 16 radius, label above, unit as suffix ---------- */
.field { display: grid; gap: var(--inset-8); min-width: 0; align-content: start; }
.field__label { font: var(--label-l); letter-spacing: var(--tracking-label); color: var(--md-on-surface); display: flex; align-items: center; gap: var(--inset-8); }
/* M3 outlined text field: white container, 1px outline, 2px on focus. The label sits above for scanability. */
.field__box {
  position: relative; display: flex; align-items: center; min-height: 56px; border-radius: var(--shape-m);
  background: var(--md-surface-container-lowest);
  box-shadow: inset 0 0 0 1px var(--md-outline);
  transition: box-shadow var(--dur-150) var(--ease-effects), background-color var(--dur-150) var(--ease-effects);
}
.field__box:hover { box-shadow: inset 0 0 0 1px var(--md-on-surface); }
.field__box:focus-within { box-shadow: inset 0 0 0 2px var(--md-primary); }
.field__input {
  flex: 1; min-width: 0; height: 56px; padding: 0 var(--space-16); border: 0; outline: 0; background: transparent;
  font: var(--body-l); color: var(--md-on-surface);
}
.field__input::placeholder { color: var(--md-outline); opacity: 1; }  /* 4.5:1, lighter than a value */
.field__input[type="number"] { font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.field__input::-webkit-outer-spin-button, .field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__input[readonly] { cursor: pointer; }
.field__btn { width: 40px; height: 40px; margin-right: var(--inset-8); flex: none; color: var(--md-on-surface-variant); }
.field__suffix {
  margin-right: var(--inset-8); padding: var(--inset-4) var(--inset-12); border-radius: var(--shape-s);
  font: var(--label-m); letter-spacing: var(--tracking-label); color: var(--md-on-surface-variant); background: var(--md-surface-container); white-space: nowrap;
}
.field__support { font: var(--body-s); letter-spacing: var(--tracking-label); color: var(--md-on-surface-muted); display: flex; align-items: flex-start; gap: var(--inset-4); }
.field__support .icon { font-size: 16px; }
.field--error .field__box, .field--error .field__box:focus-within { box-shadow: inset 0 0 0 2px var(--md-error); }
.field--error .field__support { color: var(--md-error); }
.field--estimated .field__box { background: var(--md-tertiary-container); box-shadow: inset 0 0 0 1px var(--md-tertiary); }
.field--estimated .field__suffix { background: var(--md-surface-container-lowest); }
.field__select { appearance: none; cursor: pointer; padding-right: 48px; }
.field__box--select::after {
  content: "expand_more"; font-family: "Material Symbols Rounded"; font-size: 24px;
  position: absolute; right: 16px; pointer-events: none; color: var(--md-on-surface-variant);
}
.field__extra { display: flex; align-items: center; justify-content: space-between; gap: var(--inset-8); flex-wrap: wrap; }
.linkish {
  border: 0; background: none; padding: var(--inset-4) 0; cursor: pointer; border-radius: var(--shape-s);
  font: var(--label-m); letter-spacing: var(--tracking-label); color: var(--md-primary-text); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Cards: tonal, no hairlines ---------- */
.card { border-radius: var(--shape-l); background: var(--md-surface-container-lowest); padding: var(--space-24); box-shadow: var(--elev-card); }
.card--low, .card--tint { box-shadow: none; }
.card--low { background: var(--md-surface-container-low); }
.card--tint { background: var(--md-primary-soft); }
.card--xl { border-radius: var(--shape-xl); padding: var(--space-40); }
.card__head { display: flex; align-items: center; gap: var(--inset-12); margin-bottom: var(--space-24); }
.tile-icon {
  width: 48px; height: 48px; flex: none; border-radius: var(--shape-m); display: grid; place-items: center;
  background: var(--md-primary-soft); color: var(--md-primary-text);
}

/* Selectable card */
.select-card {
  position: relative; display: grid; gap: var(--inset-8); align-content: start; padding: var(--space-24);
  border-radius: var(--shape-l); cursor: pointer; background: var(--md-surface-container-lowest); box-shadow: var(--elev-card);
  transition: background-color var(--dur-250) var(--ease-effects), box-shadow var(--dur-250) var(--ease-effects), transform var(--dur-400) var(--ease-spatial);
}
.select-card:hover { box-shadow: var(--elev-card), var(--elev-2); }
.select-card:active { transform: scale(.98); }
.select-card input { position: absolute; opacity: 0; pointer-events: none; }
.select-card:has(input:focus-visible) { outline: 3px solid var(--md-primary); outline-offset: 3px; }
.select-card .tile-icon { margin-bottom: var(--space-16); transition: background-color var(--dur-250) var(--ease-effects), color var(--dur-250) var(--ease-effects); }
.select-card__mark {
  position: absolute; top: var(--space-24); right: var(--space-24); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--md-outline);
}
.select-card__mark .icon { font-size: 20px; color: var(--md-on-primary); opacity: 0; transform: scale(.4); transition: opacity var(--dur-150) var(--ease-effects), transform var(--dur-400) var(--ease-spatial); }
.select-card:has(input:checked) { background: var(--md-primary-soft); box-shadow: inset 0 0 0 2px var(--md-primary); }
.select-card:has(input:checked) .tile-icon { background: var(--md-primary); color: var(--md-on-primary); }
.select-card:has(input:checked) .select-card__mark { background: var(--md-primary); box-shadow: none; }
.select-card:has(input:checked) .select-card__mark .icon { opacity: 1; transform: scale(1); }

/* ---------- Chips and badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--inset-8); height: 32px; padding: 0 var(--inset-12);
  border-radius: var(--shape-s); font: var(--label-m); letter-spacing: var(--tracking-label);
  background: var(--md-surface-container); color: var(--md-on-surface-variant); white-space: nowrap;
}
.chip .icon { font-size: 18px; }
.chip--success { background: var(--md-success-container); color: var(--md-on-success-container); }
.chip--warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.chip--error { background: var(--md-error-container); color: var(--md-on-error-container); }
.chip--tertiary { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.chip--plain { background: var(--md-surface-container-lowest); }

/* ---------- Banners and snackbar ---------- */
.banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-16); align-items: center;
  padding: var(--space-16) var(--space-24); border-radius: var(--shape-m);
  background: var(--md-surface-container); color: var(--md-on-surface);
}
.banner__title { font: var(--title-s); }
.banner__text { font: var(--body-m); }
.banner__actions { display: flex; gap: var(--inset-8); }
.banner--info > .icon { color: var(--md-primary-text); }
.banner--success { background: var(--md-success-container); color: var(--md-on-success-container); }
.banner--warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.banner--error { background: var(--md-error-container); color: var(--md-on-error-container); }
.snackbar {
  display: flex; align-items: center; gap: var(--inset-12); min-height: 56px; padding: var(--inset-4) var(--inset-8) var(--inset-4) var(--space-24);
  border-radius: var(--shape-m); box-shadow: var(--elev-3); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font: var(--body-m);
  animation: rise var(--dur-400) var(--ease-spatial);
}
.snackbar .btn { color: var(--md-inverse-primary); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* ---------- Progress ---------- */
.progress { height: 8px; border-radius: var(--shape-full); background: var(--md-primary-container); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--md-primary); transition: width var(--dur-600) var(--ease-spatial-soft); }
.ring { width: 32px; height: 32px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .r-track { stroke: var(--md-surface-container-highest); }
.ring .r-fill { stroke: var(--md-primary); stroke-linecap: round; transition: stroke-dashoffset var(--dur-600) var(--ease-spatial-soft); }

/* Stepper */
.stepper { display: flex; align-items: center; gap: var(--inset-8); list-style: none; margin: 0; padding: 0; }
.stepper li { display: flex; align-items: center; gap: var(--inset-8); font: var(--label-l); letter-spacing: var(--tracking-label); color: var(--md-on-surface-muted); white-space: nowrap; }
.stepper li + li::before { content: ""; width: 32px; height: 2px; border-radius: 2px; background: var(--md-surface-container-highest); margin-right: var(--inset-8); }
.stepper__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font: var(--label-m); background: var(--md-surface-container-high); color: var(--md-on-surface-variant); transition: background-color var(--dur-250) var(--ease-effects); }
.stepper li[aria-current="step"] { color: var(--md-on-surface); }
.stepper li[aria-current="step"] .stepper__dot { background: var(--md-primary); color: var(--md-on-primary); }
.stepper li.is-done .stepper__dot { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.stepper li.is-done + li::before { background: var(--md-primary); }

/* Section navigation with a progress ring, time and a lock reason */
.sections { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--inset-4); }
.sections button {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 32px 1fr; align-items: center; column-gap: var(--inset-12);
  padding: var(--inset-8) var(--space-16) var(--inset-8) var(--inset-12); border: 0; border-radius: var(--shape-m); cursor: pointer; text-align: left;
  background: transparent; color: var(--md-on-surface);
  transition: background-color var(--dur-250) var(--ease-effects);
}
.sections__name { font: var(--label-l); letter-spacing: var(--tracking-label); display: block; }
.sections__sub { font: var(--body-s); letter-spacing: var(--tracking-label); color: var(--md-on-surface-muted); display: flex; align-items: center; gap: var(--inset-4); }
.sections__sub .icon { font-size: 14px; }
.sections__glyph { position: relative; width: 32px; height: 32px; display: grid; place-items: center; }
.sections__glyph .ring { position: absolute; inset: 0; }
.sections__glyph .icon { font-size: 16px; color: var(--md-on-surface-variant); }
.sections button[aria-current="true"] { background: var(--md-secondary-container); }
.sections button.is-done .sections__glyph .icon { color: var(--md-primary-text); }
.sections button:disabled { cursor: not-allowed; color: rgb(var(--disabled-rgb) / .6); }
.sections button:disabled::after { display: none; }

/* ---------- Data table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--shape-m); background: var(--md-surface-container-lowest); }
.table { width: 100%; border-collapse: collapse; font: var(--body-m); }
.table th, .table td { height: 52px; padding: 0 var(--space-16); text-align: left; border-bottom: 1px solid var(--md-surface-container-high); white-space: nowrap; }
.table th { height: 56px; font: var(--title-s); color: var(--md-on-surface-variant); }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td { font: var(--title-s); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; }

/* ---------- Dialog ---------- */
.scrim { position: fixed; inset: 0; background: var(--md-scrim); display: grid; place-items: center; padding: var(--space-24); z-index: 50; animation: fade var(--dur-250) var(--ease-effects); }
.dialog {
  width: min(100%, 560px); max-height: calc(100vh - 48px); overflow: auto; padding: var(--space-40) var(--space-24) var(--space-24);
  border-radius: var(--shape-xl); background: var(--md-surface-container-low); box-shadow: var(--elev-3); text-align: center;
  animation: pop var(--dur-400) var(--ease-spatial);
}
.dialog__title { font: var(--headline-s); letter-spacing: var(--tracking-headline); margin: var(--space-16) 0; }
.dialog__body { font: var(--body-m); color: var(--md-on-surface-variant); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--inset-8); margin-top: var(--space-24); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ---------- Empty, error and loading ---------- */
.state { display: grid; justify-items: center; text-align: center; gap: var(--space-16); padding: var(--space-64) var(--space-24); }
.state__title { font: var(--headline-s); letter-spacing: var(--tracking-headline); }
.state__text { font: var(--body-l); color: var(--md-on-surface-variant); max-width: 46ch; }
.state__actions { display: flex; gap: var(--inset-8); flex-wrap: wrap; justify-content: center; margin-top: var(--inset-8); }
.skeleton { border-radius: var(--shape-s); background: var(--md-surface-container-high); position: relative; overflow: hidden; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--md-surface-container-lowest), transparent); opacity: .7;
  animation: shimmer 1.4s var(--ease-effects) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Top app bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--space-24); padding: 0 var(--space-40);
  background: var(--md-surface);
  background: rgb(from var(--md-surface) r g b / .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.appbar__brand { display: flex; align-items: center; flex: none; text-decoration: none; border-radius: var(--shape-s); }
.appbar__logo { display: block; height: 32px; width: auto; }
.appbar__center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.appbar__actions { display: flex; align-items: center; gap: var(--inset-8); }

@media (max-width: 640px) {
  .appbar { padding: 0 var(--space-16); gap: var(--space-16); height: 64px; }
  .appbar__logo { height: 24px; }
  .dialog__actions, .state__actions { flex-direction: column-reverse; align-items: stretch; }
  .banner { grid-template-columns: auto 1fr; }
  .banner__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- Date picker (M3 modal) ---------- */
.dp { width: min(100%, 360px); padding: var(--space-24) var(--inset-12) var(--inset-12); text-align: left; }
.dp__head { padding: 0 var(--inset-12) var(--space-16); border-bottom: 1px solid var(--md-outline-variant); }
.dp__head p { font: var(--label-m); letter-spacing: var(--tracking-label); color: var(--md-on-surface-variant); }
.dp__head h2 { font: var(--headline-m); letter-spacing: var(--tracking-headline); margin-top: var(--space-16); }
.dp__nav { display: flex; align-items: center; justify-content: space-between; padding: var(--inset-8) 0 var(--inset-4) var(--inset-12); }
.dp__nav b { font: var(--label-l); }
.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 var(--inset-4); }
.dp__grid span { height: 40px; display: grid; place-items: center; font: var(--body-s); color: var(--md-on-surface-variant); }
.dp__day { height: 40px; width: 40px; margin: auto; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font: var(--body-m); color: var(--md-on-surface); font-variant-numeric: tabular-nums; transition: transform var(--dur-250) var(--ease-spatial); }
.dp__day:hover { background: var(--md-surface-container-high); }
.dp__day:active { transform: scale(.9); }
.dp__day.is-today { box-shadow: inset 0 0 0 1px var(--md-primary); color: var(--md-primary-text); }
.dp__day[aria-pressed="true"] { background: var(--md-primary); color: var(--md-on-primary); box-shadow: none; }
.dp .dialog__actions { margin-top: var(--inset-8); }

/* ---------- Select menu (M3 exposed dropdown) ---------- */
.field__trigger { text-align: left; cursor: pointer; padding-right: 48px; }
.field__trigger .is-ph { color: var(--md-outline); }
.field__box--select::after { transition: transform var(--dur-250) var(--ease-spatial); }
.field__box--select:has([aria-expanded="true"])::after { transform: rotate(180deg); }
.field__box--select:has([aria-expanded="true"]) { box-shadow: inset 0 0 0 2px var(--md-primary); }
.menu {
  position: absolute; top: calc(100% + var(--inset-4)); left: 0; right: 0; z-index: 30; margin: 0; padding: var(--inset-8) 0;
  list-style: none; max-height: 304px; overflow-y: auto; border-radius: var(--shape-m);
  background: var(--md-surface-container-lowest); box-shadow: var(--elev-2);
  transform-origin: top; animation: menu-open var(--dur-250) var(--ease-spatial-soft);
}
.menu[hidden] { display: none; }
.menu [role="option"] {
  display: flex; align-items: center; gap: var(--inset-12); min-height: 48px; padding: 0 var(--space-16);
  font: var(--body-l); color: var(--md-on-surface); cursor: pointer;
}
.menu [role="option"] .icon { color: transparent; }
.menu [role="option"]:hover, .menu [role="option"].is-active { background: var(--md-surface-container-high); }
.menu [role="option"][aria-selected="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.menu [role="option"][aria-selected="true"] .icon { color: var(--md-primary-text); }
/* The keyboard position gets a ring only when the menu is driven from the keyboard */
.field__box--select:has(.field__trigger:focus-visible) .menu [role="option"].is-active { box-shadow: inset 0 0 0 2px var(--md-primary); }
@keyframes menu-open { from { opacity: 0; transform: scaleY(.9); } }