/* =============================================================================
   Annot — tangentbordsgenvägarna
   =============================================================================

   Hör ihop med web/shortcuts.js. Allt är prefixat `akb-` (annot keyboard) så
   att rutan inte kan krocka med canvas.css, comments.css eller navigator.css.
   `ash-` är taget av share.js, `nv-` av navigatorn.

   Regeln från design-systemet gäller: aldrig hex eller rgb, aldrig egna
   millisekunder. Färger, radier, mellanrum och tider kommer från tokens i
   theme.css — en hårdkodad tid överlever `prefers-reduced-motion`, och det
   felet är osynligt för alla utom den det gäller.

   Ordningen i filen är byggordningen: telefonen först, desktop sist. Under
   720 px står grupperna i en kolumn och rutan fyller skärmen; över lägger de
   sig i två och rutan blir en centrerad ruta som svävar över canvasen. Två
   kolumner är inte kosmetik — en lista på trettio rader i en kolumn kräver
   att man rullar för att se att gruppen man letar efter finns.

   Träffytor: minst 44 × 44 CSS-px på allt man ska kunna peka på. Stängknappen
   följer husregeln och växer med ett osynligt ::before, inte genom att bli
   större själv. 28 + 8 + 8 = 44.
   ========================================================================== */

@import "./theme.css";

/* ------------------------------------------------------------ överlagringen */

.akb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;              /* över navigatorn (9400) — `?` ska nå fram */
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.akb-overlay[hidden] { display: none; }
.akb-overlay.akb-open { opacity: 1; }

.akb-scrim {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  background: color-mix(in oklch, var(--color-bg) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Utan sudd är scrimen bara en halvgenomskinlig yta: canvasen lyser igenom
   och genvägslistan blir svårläst. Byt då till en nästan täckande yta. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .akb-scrim { background: color-mix(in oklch, var(--color-bg) 88%, transparent); }
}
@supports not (background: color-mix(in oklch, red 50%, transparent)) {
  .akb-scrim { background: var(--color-bg); }
}

/* ------------------------------------------------------------------ panelen */

.akb-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  overflow: hidden;
  padding-top: var(--safe-t);
  transform: translateY(var(--space-4));
  transition: transform var(--dur-base) var(--ease-out);
}

.akb-panel:focus { outline: none; }
.akb-overlay.akb-open .akb-panel { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .akb-overlay,
  .akb-panel { transition: none; }
}

/* ------------------------------------------------------------------ huvudet */

.akb-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.akb-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* Husregeln: knappen ser ut som 28 px och träffas som 44. Ett osynligt
   ::before med negativ inset i stället för en större knapp — den uppenbara
   lösningen, min-width: 44px, gör knappen tung i ett huvud som bara har
   en rubrik bredvid sig. */
.akb-close {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-none);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.akb-close::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.akb-close:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

/* -------------------------------------------------------------------- kropp

   Rullningen ligger här, inte på panelen: huvudet med stängknappen ska stå
   still. `overscroll-behavior: contain` hindrar att en svepning som når
   listans slut fortsätter ned i canvasen bakom. */

.akb-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  padding-bottom: max(var(--space-6), var(--safe-b));
}

/* En kolumn är utgångsläget. Två är specialfallet, längst ned i filen. */
.akb-grid {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

/* -------------------------------------------------------------------- grupp */

.akb-group { min-width: 0; }

.akb-group-head {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-faint);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.akb-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Raden: beskrivning till vänster, tangenter till höger. `baseline` i
   stället för `center` — tangenterna är kapslar med egen höjd, och centreras
   de mot texten hamnar bokstäverna en aning för högt. */
.akb-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1-5) 0;
  line-height: var(--leading-snug);
}

.akb-item + .akb-item { border-top: 1px solid var(--color-line); }

.akb-desc {
  flex: 1;
  min-width: 0;
  color: var(--color-ink);
}

/* Tangenterna får aldrig knuffa ut beskrivningen. På 390 px med en
   trekombination (⌘ ⇧ K) tar de sin plats och texten bryts i stället. */
.akb-keys {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-1);
}

/* --------------------------------------------------------------- tangenten

   Var deltangent i sitt eget <kbd>. En sammanslagen sträng ("Cmd+K") läses
   upp som ett ord av skärmläsare och går inte att sätta i tabell-läge. */

.akb-key {
  min-width: 22px;
  padding: var(--space-0-5) var(--space-1-5);
  border: 1px solid var(--color-line);
  border-bottom-color: var(--color-line-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  text-align: center;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- tomt läge

   Ingen registrerad bindning är ett riktigt tillstånd, inte ett fel — men
   en tom ruta säger att verktyget är trasigt. Säg vad som hände. */

.akb-grid.akb-bare { place-content: center; }

.akb-empty {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  color: var(--color-faint);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  text-align: center;
}

/* En genvägslista är brus för den som styr med fingret — men den nås numera
   också från en knapp, och en iPad kan ha tangentbord. Rutan blir alltså
   kvar; raderna blir bara luftigare. Frågan är inmatningsmetod, inte
   skärmbredd. */
@media (pointer: coarse) {
  .akb-item { padding-block: var(--space-2); }
}

/* --------------------------------------------------------------- två kolumner

   720 px, som uppgiften anger. Under den finns det inte plats för två
   spalter utan att beskrivningarna börjar brytas mitt i, och en bruten
   beskrivning bredvid en kapsel med ⌘ läses långsammare än en lång lista. */

@media (min-width: 721px) {
  .akb-overlay {
    align-items: flex-start;
    padding: var(--space-12) var(--space-4) var(--space-4);
  }

  .akb-panel {
    width: 720px;
    max-width: 100%;
    height: auto;
    max-height: min(80vh, 40rem);
    padding-top: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transform: translateY(calc(var(--space-2) * -1));
  }

  .akb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
}

/* --------------------------------------------------------------- 390 px

   Den smalaste skärm som ska fungera. Kroppen behåller sin rullning, huvudet
   krymper sin indragning, och beskrivningen får bryta rad hellre än att
   tangenterna hamnar utanför kanten. */

@media (max-width: 400px) {
  .akb-head { padding-left: var(--space-3); }
  .akb-body { padding: var(--space-3); padding-bottom: max(var(--space-5), var(--safe-b)); }
  .akb-item { gap: var(--space-2); }
  .akb-desc { overflow-wrap: anywhere; }
}

/* --- likvärdiga alternativ -------------------------------------------------
   Flera tangenter som gör samma sak står på en rad, åtskilda av "eller".
   Behållaren får krympa och radbryta: på 390 px ryms inte
   "← eller P eller PgUp" på en rad bredvid sin beskrivning. */
.akb-combos {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 0;
}

.akb-or {
  color: var(--color-ink-muted);
  font-size: var(--text-2xs);
  /* Ordet är bindetext, inte en tangent. Det ska läsas som mellanrum. */
  padding-inline: var(--space-0-5);
}