/* a11y-motion-controls — the Motion & senses settings surface. Deliberately still: no transition or animation
   rule anywhere in this file; every state change lands in one frame at every motion level. The only motion is
   the preview tile, driven from component.js with the site's live tokens. */
.mc-amc {
  --amc-pad: calc(14px * var(--mc-density, 1));
  --amc-line: 1px;
  --amc-focus: 2px;
  --amc-seg-h: 34px;
  font-family: var(--mc-font);
  color: var(--mc-fg);
  position: relative;
}
.mc-amc[data-variant="pill"] { position: fixed; z-index: 2147483600; bottom: 16px; right: 16px; }
.mc-amc[data-variant="pill"][data-side="start"] { right: auto; left: 16px; }
.mc-amc svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mc-amc [data-act="pause"] svg, .mc-amc__pause svg { fill: currentColor; stroke: none; }

/* trigger: a quiet pill with the effective level as a subtle badge */
.mc-amc__trigger {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 11px;
  font: 500 13px/1 var(--mc-font); color: var(--mc-fg); background: var(--mc-surface);
  border: var(--amc-line) solid var(--mc-border); border-radius: 999px; cursor: pointer;
}
.mc-amc[data-variant="pill"] .mc-amc__trigger { min-height: 40px; box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--mc-fg) 30%, transparent); }
.mc-amc__trigger:hover { background: var(--mc-surface-2); }
.mc-amc__badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--mc-muted);
  padding: 3px 7px; border-radius: 999px; background: var(--mc-surface-2); border: var(--amc-line) solid var(--mc-border);
}
.mc-amc[data-level="none"] .mc-amc__badge, .mc-amc[data-level="paused"] .mc-amc__badge { color: var(--mc-fg); }

/* panel */
.mc-amc__panel {
  box-sizing: border-box; color: var(--mc-fg); background: var(--mc-surface);
  border: var(--amc-line) solid var(--mc-border); border-radius: var(--mc-radius-lg);
  font: 400 13px/1.45 var(--mc-font);
}
.mc-amc__panel--pop {
  position: fixed; inset: auto; margin: 0; width: min(360px, calc(100vw - 32px)); overflow: auto; overscroll-behavior: contain;
  padding: var(--amc-pad); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--mc-fg) 35%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--mc-fg) 12%, transparent);
  z-index: 2147483601;
}
.mc-amc__panel--pop[hidden] { display: none; }
.mc-amc__panel--pop:popover-open { display: block; }
.mc-amc__panel--pop::backdrop { background: transparent; }
.mc-amc__panel--row { padding: calc(var(--amc-pad) * 1.4); }
.mc-amc__panel--row .mc-amc__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--amc-pad) * 2.2); align-items: start; }
.mc-amc__panel--row .mc-amc__col + .mc-amc__col > .mc-amc__row:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
@media (max-width: 720px) { .mc-amc__panel--row .mc-amc__cols { grid-template-columns: minmax(0, 1fr); } .mc-amc__panel--row .mc-amc__col + .mc-amc__col > .mc-amc__row:first-child { margin-top: 12px; border-top: var(--amc-line) solid var(--mc-border); padding-top: 11px; } }
.mc-amc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mc-amc__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.mc-amc__title:focus { outline-color: transparent; }
.mc-amc__title:focus-visible { outline: var(--amc-focus) solid var(--mc-accent); outline-offset: 2px; }
.mc-amc__reset { font: 500 12px/1 var(--mc-font); color: var(--mc-muted); background: none; border: 0; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mc-amc__reset:hover { color: var(--mc-fg); }

.mc-amc__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.mc-amc__legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--mc-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.mc-amc__hint { margin: 8px 0 0; font-size: 12px; color: var(--mc-muted); }

/* segmented control on real radios */
.mc-amc__segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 2px; border-radius: var(--mc-radius); background: var(--mc-surface-2); border: var(--amc-line) solid var(--mc-border); }
.mc-amc__seg { position: relative; display: grid; place-items: center; min-height: var(--amc-seg-h); border-radius: calc(var(--mc-radius) - 3px); cursor: pointer; font-weight: 500; color: var(--mc-muted); }
.mc-amc__seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mc-amc__seg:hover { color: var(--mc-fg); }
.mc-amc__seg:has(input:checked) { color: var(--mc-fg); background: var(--mc-surface); outline: var(--amc-line) solid var(--mc-border); box-shadow: 0 1px 2px color-mix(in srgb, var(--mc-fg) 14%, transparent); }
.mc-amc__seg:has(input:focus-visible) { outline: var(--amc-focus) solid var(--mc-accent); outline-offset: 1px; z-index: 1; }

/* preview tile */
.mc-amc__preview { margin-top: 14px; border-radius: var(--mc-radius); border: var(--amc-line) solid var(--mc-border); background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--mc-fg) 12%, transparent) 1px, transparent 1.4px) 0 0 / 12px 12px, var(--mc-surface-2); overflow: hidden; }
.mc-amc__stage { height: 92px; display: grid; place-items: center; }
.mc-amc__card { width: 124px; padding: 10px; box-sizing: border-box; display: grid; grid-template-columns: 22px 1fr; gap: 6px 8px; border-radius: 10px;
  background: var(--mc-surface); border: var(--amc-line) solid var(--mc-border); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--mc-fg) 40%, transparent); }
.mc-amc__card i { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; background: var(--mc-accent); }
.mc-amc__card b { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--mc-fg) 22%, transparent); align-self: center; }
.mc-amc__card b + b { width: 64%; background: color-mix(in srgb, var(--mc-fg) 12%, transparent); }
.mc-amc__previewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mc-amc__caption { margin: 0; font-size: 12px; color: var(--mc-muted); min-height: 2.9em; }

/* rows */
.mc-amc__row, .mc-amc__assist { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: var(--amc-line) solid var(--mc-border); margin-top: 12px; }
.mc-amc__row + .mc-amc__row, .mc-amc__sub + .mc-amc__row, .mc-amc__row + .mc-amc__sub { margin-top: 0; }
.mc-amc__assist { flex-direction: column; align-items: stretch; gap: 10px; }
.mc-amc__lbl { display: grid; gap: 1px; font-weight: 500; min-width: 0; }
.mc-amc__lbl small { font-size: 12px; font-weight: 400; color: var(--mc-muted); }
.mc-amc__sub { padding: 0 0 11px; }
.mc-amc__sub[hidden] { display: none; }

.mc-amc__btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 0 12px; font: 500 12.5px/1 var(--mc-font);
  color: var(--mc-fg); background: var(--mc-surface-2); border: var(--amc-line) solid var(--mc-border); border-radius: 999px; cursor: pointer; }
.mc-amc__btn:hover { border-color: color-mix(in srgb, var(--mc-fg) 35%, var(--mc-border)); }
.mc-amc__pause[aria-pressed="true"] { color: var(--mc-accent-fg); background: var(--mc-accent); border-color: var(--mc-accent); }
.mc-amc__trigger:focus-visible, .mc-amc__btn:focus-visible, .mc-amc__reset:focus-visible { outline: var(--amc-focus) solid var(--mc-accent); outline-offset: 2px; }

/* switch on a real checkbox[role=switch] */
.mc-amc__switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; cursor: pointer; position: relative; }
.mc-amc__switch input { position: absolute; right: 0; width: 38px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.mc-amc__track { flex: none; width: 38px; height: 22px; box-sizing: border-box; border-radius: 999px; padding: 2px; background: var(--mc-surface-2); border: var(--amc-line) solid var(--mc-border); display: flex; }
.mc-amc__track span { width: 16px; height: 16px; border-radius: 50%; background: var(--mc-muted); }
.mc-amc__switch input:checked + .mc-amc__track { background: var(--mc-accent); border-color: var(--mc-accent); justify-content: flex-end; }
.mc-amc__switch input:checked + .mc-amc__track span { background: var(--mc-accent-fg); }
.mc-amc__switch input:focus-visible + .mc-amc__track { outline: var(--amc-focus) solid var(--mc-accent); outline-offset: 2px; }

/* range */
.mc-amc__range { display: grid; gap: 6px; }
.mc-amc__range .mc-amc__lbl { grid-auto-flow: column; justify-content: space-between; }
.mc-amc__range output { font-variant-numeric: tabular-nums; color: var(--mc-muted); font-weight: 500; }
.mc-amc__range input { width: 100%; margin: 0; accent-color: var(--mc-accent); }
.mc-amc__range input:focus-visible { outline: var(--amc-focus) solid var(--mc-accent); outline-offset: 3px; }
.mc-amc__range:has(input:disabled) { opacity: 0.5; }

.mc-amc__sys { margin: 0 0 4px; font-size: 11.5px; color: var(--mc-muted); }
.mc-amc__flash { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 11px; font-size: 12px; color: var(--mc-muted);
  border-radius: var(--mc-radius); background: var(--mc-surface-2); border: var(--amc-line) solid var(--mc-border); }
.mc-amc__flash svg { color: var(--mc-success); margin-top: 1px; }

/* reduced / none: already still — the preview card drops its depth so nothing implies travel */
@media (prefers-reduced-motion: reduce) { .mc-amc__card { box-shadow: none; } }
:root[data-mc-motion="reduce"] .mc-amc__card, :root[data-mc-motion="none"] .mc-amc__card { box-shadow: none; }

/* more contrast: thicker lines and focus, muted text lifts */
@media (prefers-contrast: more) { .mc-amc { --amc-line: 2px; --amc-focus: 3px; --mc-muted: var(--mc-fg); } }
:root[data-mc-contrast="more"] .mc-amc { --amc-line: 2px; --amc-focus: 3px; --mc-muted: var(--mc-fg); }

/* forced colours (law 14): state as outline/border in system colours */
@media (forced-colors: active) {
  .mc-amc__panel, .mc-amc__trigger, .mc-amc__btn, .mc-amc__segs, .mc-amc__track, .mc-amc__flash, .mc-amc__preview, .mc-amc__card { border-color: CanvasText; }
  .mc-amc__seg:has(input:checked) { outline: 2px solid Highlight; color: HighlightText; background: Highlight; }
  .mc-amc__switch input:checked + .mc-amc__track { background: Highlight; border-color: Highlight; }
  .mc-amc__switch input:checked + .mc-amc__track span, .mc-amc__track span { background: CanvasText; forced-color-adjust: none; }
  .mc-amc__pause[aria-pressed="true"] { outline: 2px solid Highlight; }
  .mc-amc__card i { background: Highlight; forced-color-adjust: none; }
}
/* preview hook: <html data-mc-forced="active"> approximates the same look (real forced colours cannot be set from JS) */
:root[data-mc-forced="active"] .mc-amc { --mc-surface: Canvas; --mc-surface-2: Canvas; --mc-fg: CanvasText; --mc-muted: CanvasText; --mc-border: CanvasText; --mc-accent: Highlight; --mc-accent-fg: HighlightText; --mc-success: CanvasText; }
:root[data-mc-forced="active"] .mc-amc__panel, :root[data-mc-forced="active"] .mc-amc__trigger, :root[data-mc-forced="active"] .mc-amc__card { box-shadow: none; }
:root[data-mc-forced="active"] .mc-amc__preview { background: Canvas; }
:root[data-mc-forced="active"] .mc-amc__seg:has(input:checked) { background: Highlight; color: HighlightText; outline: 2px solid Highlight; }