/* ==========================================================================
   f-access.css — CAT-15 only.

   Two halves. The first is ordinary page furniture for the twenty-two
   screens in js/features/access/. The second is the set of GLOBAL preference
   layers — text scale, contrast, motion, low data — which are keyed off
   data-* attributes on the root element and therefore do nothing at all
   until a guest turns one of them on.

   Colour: the standard palette is tokens.css and is not touched. The
   high-contrast palette below is the one place a second palette is allowed,
   because FR-368 requires a tested 7:1 token set. It is written with CSS
   colour keywords, not hex literals, and every ratio quoted on the contrast
   screen is the measured ratio of the pair named here.
   ========================================================================== */

/* ---- page furniture ------------------------------------------------------ */

.ax-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.ax-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
}
.ax-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }

.ax-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.ax-block > * + * { margin-top: var(--s-4); }
.ax-foot { padding: var(--s-5) var(--gutter) var(--s-8); }

.ax-frame { border: 1px solid var(--ink); padding: var(--s-4); }
.ax-frame > * + * { margin-top: var(--s-3); }
.ax-alarm { border: 1px solid var(--ink-alarm); padding: var(--s-4); }
.ax-alarm > * + * { margin-top: var(--s-3); }
.ax-quiet { border: 1px solid var(--hairline); padding: var(--s-4); }
.ax-quiet > * + * { margin-top: var(--s-3); }

.ax-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.ax-scroll { overflow-x: auto; }

/* ---- switches and steppers ----------------------------------------------- */

.ax-switch {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  background: transparent;
  color: inherit;
}
.ax-switch-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-switch-body small { color: var(--ink-muted); font-size: var(--t-small); }
.ax-switch-state {
  flex: 0 0 auto;
  min-width: 62px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.ax-switch[aria-checked="true"] .ax-switch-state,
.ax-switch[aria-pressed="true"] .ax-switch-state {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.ax-steps { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ax-step {
  flex: 1 1 0;
  min-width: 56px;
  min-height: var(--tap);
  border: 1px solid var(--hairline);
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.ax-step[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- fact sheets --------------------------------------------------------- */

.ax-fact { padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.ax-fact-line { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.ax-fact-key { font-size: var(--t-body); }
.ax-fact-val {
  flex: 0 0 auto;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.ax-fact-note { display: block; color: var(--ink-muted); font-size: var(--t-small); margin-top: 2px; max-width: 46ch; }
.ax-fact-when { display: block; font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--ink-muted); margin-top: var(--s-2); }
.ax-fact[data-stale="true"] .ax-fact-when { color: var(--ink-alarm); }

.ax-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); }
.ax-kv dt { color: var(--ink-muted); font-size: var(--t-small); }
.ax-kv dd { font-size: var(--t-small); font-variant-numeric: tabular-nums; }

/* ---- the thread ---------------------------------------------------------- */

.ax-thread { display: flex; flex-direction: column; gap: var(--s-3); }
.ax-msg { border: 1px solid var(--hairline); padding: var(--s-3); max-width: 90%; align-self: flex-start; }
.ax-msg[data-who="me"] { align-self: flex-end; border-color: var(--ink); }
.ax-msg-meta {
  display: block;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s-2);
}
.ax-composer { display: flex; gap: var(--s-2); align-items: stretch; }
.ax-composer input { flex: 1 1 auto; min-height: var(--tap); padding: var(--s-3); border: 1px solid var(--hairline); background: var(--paper); font-size: var(--t-body); }
.ax-composer button { flex: 0 0 auto; min-height: var(--tap); }

/* ---- the handoff code ---------------------------------------------------- */

.ax-code {
  font-family: var(--font-display);
  font-size: var(--t-title);
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.ax-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ax-diff-col { border: 1px solid var(--hairline); padding: var(--s-3); }
.ax-diff-col h3 { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-2); }

/* ---- read-aloud highlighting --------------------------------------------- */

.ax-speak-part { display: block; padding: var(--s-1) 0; }
.ax-speak-part[data-speaking="true"] { background: var(--wash); box-shadow: inset 2px 0 0 0 var(--accent); padding-left: var(--s-3); }

/* ---- the legend ---------------------------------------------------------- */

.ax-marker { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.ax-marker-glyph {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-small);
  font-weight: var(--w-bold);
}
.ax-grey { filter: grayscale(1); }

/* ---- large print --------------------------------------------------------- */

.ax-lp { padding: var(--s-5) var(--gutter); }
.ax-lp h2 { font-size: 28px; line-height: 1.25; margin-bottom: var(--s-3); }
.ax-lp-item { padding-block: var(--s-4); border-bottom: 1px solid var(--hairline); }
.ax-lp-name { font-size: 24px; line-height: 1.35; display: block; }
.ax-lp-gloss { font-size: 24px; line-height: 1.35; display: block; color: var(--ink-muted); margin-top: var(--s-2); }
.ax-lp-price { font-size: 24px; line-height: 1.35; display: block; margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.ax-lp-allerg { font-size: 24px; line-height: 1.35; display: block; margin-top: var(--s-2); }
.ax-lp-foot { font-size: 24px; line-height: 1.4; padding-top: var(--s-5); }

/* ---- the help dock ------------------------------------------------------- */

.ax-dock {
  border-top: 1px solid var(--hairline);
  padding: var(--s-5) var(--gutter) var(--s-6);
  margin-top: var(--s-6);
}
.ax-dock-label { display: block; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-3); }
.ax-dock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
}
.ax-dock-row .ax-dock-note { color: var(--ink-muted); font-size: var(--t-small); display: block; }
.ax-dock-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink);
  background: transparent;
  color: inherit;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* ---- print: the large-print sheet ---------------------------------------- */

@media print {
  .ax-lp { color: black; background: white; padding: 0; }
  .ax-lp-section { break-after: page; page-break-after: always; }
  .ax-lp-section:last-of-type { break-after: auto; page-break-after: auto; }
  .ax-lp-item { border-bottom: 1px solid black; break-inside: avoid; page-break-inside: avoid; }
  .ax-lp-gloss { color: black; }
  .ax-print-hide { display: none !important; }
  .ax-lp-foot { border-top: 1px solid black; }
}

/* ==========================================================================
   GLOBAL PREFERENCE LAYERS
   Nothing below applies until js/features/access/prefs.js writes the matching
   attribute onto <html>. A guest who never opens this category sees the
   product exactly as the other categories built it.
   ========================================================================== */

/* ---- FR-361 text size ---------------------------------------------------- */

:root[data-ax-scale] {
  --t-body:  calc(1.0625rem * var(--ax-scale, 1));
  --t-small: calc(0.9375rem * var(--ax-scale, 1));
  --t-sub:   calc(1.25rem   * var(--ax-scale, 1));
  --t-label: calc(0.75rem   * var(--ax-scale, 1));
  --t-title: calc(clamp(1.5rem, 5vw, 2.125rem) * var(--ax-scale, 1));
  --t-display: calc(clamp(2.5rem, 9vw, 4rem) * var(--ax-scale, 1));
}
:root[data-ax-scale] body { overflow-wrap: anywhere; }
:root[data-ax-scale] .row-item,
:root[data-ax-scale] .ax-fact-line,
:root[data-ax-scale] .menu-item-head { flex-wrap: wrap; }
:root[data-ax-scale] .ax-two,
:root[data-ax-scale] .ax-diff { grid-template-columns: 1fr; }
:root[data-ax-scale] .btn { white-space: normal; }

/* ---- FR-368 high contrast ------------------------------------------------ */

:root[data-ax-contrast="high"] {
  --paper: white;
  --ink: black;
  --ink-muted: darkslategray;
  --hairline: black;
  --accent: navy;
  --ink-alarm: maroon;
  --scrim: rgba(0, 0, 0, 0.78);
  --scrim-soft: rgba(0, 0, 0, 0.28);
  --wash: rgba(0, 0, 0, 0.07);
}

:root[data-ax-contrast="high-dark"] {
  --paper: black;
  --ink: white;
  --ink-muted: silver;
  --hairline: white;
  --accent: gold;
  --ink-alarm: orange;
  --scrim: rgba(255, 255, 255, 0.24);
  --scrim-soft: rgba(255, 255, 255, 0.14);
  --wash: rgba(255, 255, 255, 0.1);
}

:root[data-ax-contrast] body { background: var(--paper); color: var(--ink); }
:root[data-ax-contrast] .plate > svg,
:root[data-ax-contrast] img,
:root[data-ax-contrast] video { display: none; }
:root[data-ax-contrast] .plate { background: var(--wash); border: 1px solid var(--ink); }
:root[data-ax-contrast] .frame { border-color: var(--ink); }
/* Icons and markers hold their own 3:1 by carrying a full-weight border. */
:root[data-ax-contrast] .ax-marker-glyph,
:root[data-ax-contrast] .badge,
:root[data-ax-contrast] .chip { border-width: 2px; }

/* ---- FR-378 reduced motion ----------------------------------------------- */

:root[data-ax-motion="reduce"] *,
:root[data-ax-motion="reduce"] *::before,
:root[data-ax-motion="reduce"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

/* ---- FR-380 greyscale preview -------------------------------------------- */

:root[data-ax-grey="on"] #app { filter: grayscale(1); }

/* ---- FR-375 low data ----------------------------------------------------- */

:root[data-ax-lowdata="on"] .plate > svg,
:root[data-ax-lowdata="on"] img,
:root[data-ax-lowdata="on"] video { display: none; }
:root[data-ax-lowdata="on"] .plate { background: var(--wash); min-height: var(--s-8); }