/* Accessibility overrides — additive on top of styles.css. Kept separate so
   the original design CSS stays as-is per the handoff contract. */

/* Visually-hidden labels for screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* WCAG AA contrast lift on the muted timeline eyebrow.
   Original --muted-2 vs --bg: 2.8:1. Bumped to --muted: ~4.8:1. */
.timeline__label {
  color: var(--muted);
}

/* Column titles previously used the column accent against its own tinted
   background — ~2.2:1 for "seen". Use the body's secondary ink for the title;
   keep the colored ::before pin so the column accent is still signalled. */
.column__title {
  color: var(--ink-2);
}

/* Card name was h3; now h2 — neutralize any default UA margins inherited
   from the heading level switch so the design spacing is preserved. */
h2.card__name {
  margin: 0;
}

/* Column count chip — was using the column accent on bg-elev (white in light
   mode) which gives ~2.6:1 for the muted "seen" accent. Use ink-2 for AA pass. */
.column__count {
  color: var(--ink-2);
}

/* Visual affordance for horizontal-scrolling board on tablet sizes
   (720–1100 px). A subtle gradient on the right edge signals there's more
   content to the right of the visible area. Hidden on phone (vertical stack)
   and on large viewports (all 4 columns visible). */
@media (max-width: 1100px) and (min-width: 721px) {
  .board {
    position: relative;
  }
  .board::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    width: 36px;
    height: 100%;
    margin-left: -36px;
    background: linear-gradient(to right, transparent, var(--bg) 80%);
    pointer-events: none;
    align-self: stretch;
    z-index: 1;
  }
}