/* ─────────────────────────────────────────
   BOTTOM COMMAND BAR (a11y bar)
   Exact spec from Figma node 19:216783 — replaces the footer.
   Command hints (left), live contrast/alt inspector (right).
───────────────────────────────────────── */

/* No body padding-bottom: the bar is fixed and overlaps the bottom of the
   pinned hero (nothing critical sits behind it). Adding it created 48px of
   overscroll past the pinned timeline, letting the text scroll away at the
   end. (Scrollable inner pages will add their own bottom spacing.) */

#a11y-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  height: 48px;
  /* Plain page background (not a tinted bar), no dots. */
  background: var(--case-bg, var(--color-bg-page));
  border-top: 1px solid var(--bar-border);
  font-family: var(--font-sans);
  user-select: none;
}

.a11y-bar__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: var(--home-max-width);
  margin-inline: auto;
  padding-inline: var(--home-hero-pad-x);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* ── Command hints — full-height segments split by dividers ── */
.a11y-bar__shortcuts {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.a11y-bar__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 16px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  border-left: 1px solid var(--bar-border);
}
.a11y-bar__hint:last-child { border-right: 1px solid var(--bar-border); }

/* LinkedIn / resume / email: the whole segment is a link (the shortcut keys still work) */
.a11y-bar__hint--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
.a11y-bar__hint--link:hover { background: var(--bar-border); }   /* same colour as the dividers */
.a11y-bar__hint--link:focus-visible {
  outline: 2px solid var(--case-ui, var(--accent-600));
  outline-offset: -2px;
}

/* Key pair */
.a11y-bar__keys { display: inline-flex; align-items: center; gap: 4px; }
.a11y-bar__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--key-text);
  background: var(--key-bg);
  border: 1px solid var(--bar-border);
  border-radius: var(--radius-sm);
  transition: background 0.1s, border-color 0.1s;
}
/* Press feedback — the key fills accent-300 while its keyboard key is held
   (letter keeps its color). Driven by keydown/keyup in a11y-bar.js. */
.a11y-bar__hint kbd.is-pressed {
  background: var(--key-pressed, var(--accent-300));
  border-color: var(--key-pressed, var(--accent-300));
}

/* ── Contrast / alt inspector (right segment) ── */
.a11y-bar__contrast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 16px;
  flex-shrink: 0;
  min-width: 0;
  border-left: 1px solid var(--bar-border);
  border-right: 1px solid var(--bar-border);
}
.a11y-bar__idle {
  color: var(--color-text-secondary);
  font-style: italic;
  white-space: nowrap;
  font-size: 14px;
}
.a11y-bar__idle--mobile { display: none; }

.a11y-bar__info { display: flex; align-items: center; gap: 10px; }

/* Swatches — two 16×20 blocks in one bordered box */
.a11y-bar__swatches {
  display: flex;
  border: 1px solid var(--bar-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.a11y-bar__swatch { display: block; width: 16px; height: 20px; }

/* Result — connected two-part pill: [check AA][ratio], both green, dark text
   (exact: bg #E4F5E1 = success-surface, border #9AD88D = success-300). */
.a11y-bar__result { display: inline-flex; align-items: center; }
.a11y-bar__badge,
.a11y-bar__ratio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);   /* #0C2A1C check + text */
  border: 1px solid;
}
.a11y-bar__badge { gap: 3px; border-right-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }  /* shares its edge with the ratio */
.a11y-bar__ratio { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.a11y-bar__icon { width: 12px; height: 12px; flex-shrink: 0; }

.a11y-bar__result--pass .a11y-bar__badge,
.a11y-bar__result--pass .a11y-bar__ratio {
  background: var(--color-success-surface);
  border-color: var(--success-300);
}
.a11y-bar__result--fail .a11y-bar__badge,
.a11y-bar__result--fail .a11y-bar__ratio {
  background: var(--color-error-surface);
  border-color: var(--error-300);
}

/* ── Alt-text inspector ── */
.a11y-bar__alt { align-items: center; gap: 6px; }
.a11y-bar__alt-label {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.a11y-bar__alt-value {
  font-size: 14px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.a11y-bar__alt-value--missing { color: var(--error-600); }
.a11y-bar__alt-value--decorative { color: var(--color-text-secondary); font-style: italic; }

/* ── Mobile — the bar is a desktop affordance (keyboard shortcuts, hover-driven
   contrast/alt inspector); on touch it just eats screen space, so hide it. ── */
@media (max-width: 768px) {
  #a11y-bar { display: none; }
}