/* ==========================================================================
   Pertimm — accessibility.html (loaded after legal.css, the shared policy
   layout). Signature: the keyboard panel. Every key the site supports is a
   keycap; press it anywhere on the page and it lights up (legal.js).
   ========================================================================== */

/* Status list in the hero facts */
.a11y-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }

/* Keyboard panel (a dark slab inside the paper chapter) */
.keys { display: grid; gap: var(--space-m); margin-top: 1.4em !important; }
.keys__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.keys__hint { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--step--1); color: var(--fg-3); }
.keys__hint::before {
  content: ""; width: 7px; height: 8px; clip-path: var(--hex); background: var(--fg-4);
  transition: background-color var(--dur-2), box-shadow var(--dur-2);
}
.keys.is-live .keys__hint::before { background: var(--spectrum); box-shadow: 0 0 10px var(--glow); }

.keys__list { list-style: none; padding: 0 !important; margin: 0 !important; border-top: 1px solid var(--line); }
.keys__row { display: grid; grid-template-columns: minmax(11rem, 15.5rem) minmax(0, 1fr); gap: .5rem 1.5rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.keys__caps { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--fg-3); font-size: var(--step--1); }
.keys__text { color: var(--fg-2); line-height: 1.55; }
.keys__text strong { color: var(--fg); }
@media (max-width: 599px) { .keys__row { grid-template-columns: 1fr; } }

/* Keycap */
.key {
  position: relative; display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.5rem; padding: 0 .8rem;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 560; line-height: 1; letter-spacing: 0; color: var(--fg);
  background: linear-gradient(180deg, rgb(240 237 247 / .09), rgb(240 237 247 / .025));
  border: 1px solid var(--line-2); border-bottom-width: 3px; border-radius: 7px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset;
  transition: transform .12s var(--ease-out), border-color .12s, box-shadow .35s var(--ease-out), color .12s, background-color .35s;
}
.key--wide { min-width: 4.25rem; }
.key__icon { width: 1rem; height: 1rem; }
.key.is-pressed {
  transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px;
  color: #fff; border-color: var(--iris);
  background: linear-gradient(180deg, rgb(166 140 255 / .32), rgb(228 156 242 / .14));
  box-shadow: 0 0 0 1px rgb(166 140 255 / .5), 0 0 26px rgb(166 140 255 / .55), 0 0 60px rgb(228 156 242 / .22);
}

/* Inline keys inside the prose (paper) */
.policy-prose kbd:not(.key) {
  display: inline-block; padding: .05em .45em; font-family: var(--font-sans); font-size: .86em; font-weight: 560; line-height: 1.4;
  color: var(--fg); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface);
}

/* Measures list: hex markers, two columns on wide screens */
.measures { list-style: none; padding: 0 !important; display: grid; gap: 0; border-top: 1px solid var(--line); }
.measures li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .9rem; padding: .95rem 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.measures svg { width: .8rem; height: .8rem; color: var(--accent); translate: 0 .38em; }
.measures strong { color: var(--fg); }

@media print { .keys__hint { display: none; } .key { border-color: #999; } }