/* Cellar Dash — the display controls.
 *
 * Its own file because two pages carry them: the app, and the marketing
 * homepage. Both already applied the saved preferences before first paint —
 * they read the same two localStorage keys — but only the app could change
 * them, so a reader who needed larger text had to sign in first to ask for it.
 *
 * Duplicating this into home.css was the alternative, and a duplicated control
 * over shared storage drifts into two things that disagree about one setting.
 */

/* ══ Accessibility: text scaling + high contrast ═══════════════════════════
   The control is fixed top-right on every screen. Text scaling multiplies the
   root font size, so everything sized in rem/em grows with it. */
#a11y-bar {
  position: fixed; top: 16px; right: 16px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--cd-sans);
}
#a11y-toggle {
  display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  background: var(--cd-act-bg); border: 1px solid var(--cd-act-bg); border-radius: 13px;
  color: var(--cd-act-ink); font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 16px 40px -22px rgba(0,0,0,0.5);
}
#a11y-toggle:hover { background: var(--cd-act-bg-h); border-color: var(--cd-act-bg-h); }
#a11y-toggle .ic { color: currentColor; }
#a11y-panel {
  width: 268px; background: var(--el-card); border: 1px solid var(--el-line2);
  border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.5);
}
#a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.a11y-title { font-family: var(--cd-head); font-weight: 700; font-size: 14px; color: var(--el-ink); }
.a11y-close {
  background: var(--cd-actq-bg); border: 1px solid var(--cd-actq-bd); border-radius: 7px;
  color: var(--cd-actq-ink); cursor: pointer; padding: 3px; display: flex;
}
.a11y-close:hover { background: var(--cd-act-bg); border-color: var(--cd-act-bg); color: var(--cd-act-ink); }
.a11y-label {
  font-family: var(--cd-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--el-faint); margin-bottom: 9px;
}
.a11y-scales { display: flex; gap: 8px; margin-bottom: 18px; }
.a11y-scales button {
  flex: 1; padding: 10px 0; border-radius: 10px; cursor: pointer;
  font-family: var(--cd-serif); line-height: 1;
  border: 1px solid var(--cd-actq-bd); background: var(--cd-actq-bg); color: var(--cd-actq-ink);
}
.a11y-scales button:hover { background: var(--cd-actq-bg-h); }
.a11y-scales button[aria-pressed="true"] {
  border-color: var(--cd-act-bg); background: var(--cd-act-bg); color: var(--cd-act-ink);
}
.a11y-contrast {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--cd-actq-bd); background: var(--cd-actq-bg); color: var(--cd-actq-ink);
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.a11y-contrast:hover { background: var(--cd-actq-bg-h); }
.a11y-cl { display: flex; align-items: center; gap: 9px; }
.a11y-cl .ic { color: currentColor; }
.a11y-track {
  width: 38px; height: 22px; border-radius: 100px; background: var(--el-muted);
  position: relative; flex: none; transition: background 0.2s;
}
.a11y-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.a11y-contrast[aria-checked="true"] .a11y-track { background: var(--el-accent); }
.a11y-contrast[aria-checked="true"] .a11y-knob  { left: 18px; }

/* High contrast is a legibility mode — the flame's flicker is decoration that
   works against it, and the spec asks for it to stop. */
:root[data-contrast="on"] .cd-logo,
:root[data-contrast="on"] .auth-logo { animation: none; }

/* On a phone the control shrinks to just the icon so it doesn't eat the header. */
@media (max-width: 640px) {
  #a11y-bar { top: 10px; right: 10px; }
  #a11y-toggle { padding: 9px; border-radius: 11px; }
  #a11y-toggle span { display: none; }
  #a11y-panel { width: 244px; }
}
/* A page whose own sticky header already owns the top-right corner — the
   marketing home, where this would sit on top of "Start free". Anchored to the
   bottom instead, with the panel opening upward out of the corner. */
#a11y-bar[data-placement="bottom"] {
  top: auto; bottom: 20px; right: 20px;
  flex-direction: column-reverse;
}
@media (max-width: 640px) {
  #a11y-bar[data-placement="bottom"] { bottom: 12px; right: 12px; }
}

@media print { #a11y-bar { display: none; } }