/* =============================================================================
   Annot — rundturen
   =============================================================================

   Hör ihop med web/tour.js. Allt är prefixat `atr-` (annot tour) så att rutan
   inte kan krocka med canvas.css (`ac-`), comments.css (`ac-`), share.css
   (`ash-`), landing.css (`lp-`), shortcuts.css (`akb-`), present.css (`pv-`),
   popover.css (`pr-`), history.css (`ahi-`), ai.css (`aai-`) eller
   tabs.css (`atb-`).

   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.

   Två saker skiljer den här filen från de andra överlagringarna:

   1. Ingen egen scrim med färg. Mörkläggningen görs av `.atr-spot`, ramen
      runt målet, genom en box-shadow med enorm spridning. Vinsten är att
      målet blir kvar i sin egen färg i stället för att ligga under en dimma —
      hela poängen med att peka på något är att man ska kunna se det.
      `.atr-scrim` är alltså genomskinlig och finns bara för att fånga klick
      utanför rutan.

   2. All geometri sätts från JavaScript. Filen bestämmer utseende, inte
      position. Undantaget är pilen, som placeras ur `--atr-arrow-x` och
      `--atr-arrow-y` som JS skriver.

   Måtten står som egna custom properties högst upp. Träffytorna räknas ur
   dem med calc(), så att en ändrad knapphöjd inte tyst krymper ytan man
   träffar — se DESIGN.md avsnitt 7, där just det felet står beskrivet.
   ========================================================================== */

@import "./theme.css";

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

   9600: över hjälprutan (9500), som är det enda som rimligen kan stå öppet
   samtidigt — rundturen startas därifrån. Under kommentarernas bildvisare
   (9999), som aldrig är öppen när rundturen startar. */

.atr-overlay {
  --atr-w: 21rem;            /* rutans bredd på desktop */
  --atr-arrow: 9px;          /* pilens halva bredd */
  --atr-close: 28px;         /* krysset, synlig storlek */
  --atr-hit: 44px;           /* träffytan, alltid */

  position: fixed;
  inset: 0;
  z-index: 9600;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

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

/* Genomskinlig, med flit. Den finns för klicket utanför, inte för blicken. */
.atr-scrim {
  position: absolute;
  inset: 0;
}

/* Saknas mål mörkas hela sidan i stället, så att rutan inte flyter fritt
   ovanpå en board som ser fullt klickbar ut. */
.atr-overlay.atr-dim .atr-scrim {
  background: color-mix(in oklch, var(--color-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .atr-overlay.atr-dim .atr-scrim {
    background: color-mix(in oklch, var(--color-bg) 88%, transparent);
  }
}

/* ---------------------------------------------------------------- ramen

   Spridningen på 100vmax är mörkläggningen. Den ligger på ramen och inte på
   scrimen, så att hålet i mitten blir exakt målet — utan en andra yta att
   hålla i synk och utan clip-path, som inte går att animera mjukt mellan två
   rektanglar i alla webbläsare.

   pointer-events: none — ramen får aldrig äta klicket som är avsett för
   scrimen bakom. */

.atr-spot {
  position: absolute;
  pointer-events: none;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 100vmax color-mix(in oklch, var(--color-bg) 62%, transparent),
    0 0 0 4px var(--color-focus-halo);
  transition:
    left var(--dur-base) var(--ease-out),
    top var(--dur-base) var(--ease-out),
    width var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out);
}

.atr-spot[hidden] { display: none; }

/* Utan color-mix blir mörkläggningen antingen helt täckande eller ingen alls.
   Ingen alls är rätt svar: ramen syns fortfarande, och en board man ser är
   bättre än en board man inte ser. */
@supports not (background: color-mix(in oklch, red 50%, transparent)) {
  .atr-spot { box-shadow: 0 0 0 4px var(--color-focus-halo), var(--shadow-xl); }
  .atr-overlay.atr-dim .atr-scrim { background: var(--color-surface); }
}

/* ----------------------------------------------------------------- rutan */

.atr-card {
  position: absolute;
  left: 0;
  top: 0;
  width: min(var(--atr-w), calc(100vw - var(--space-4)));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition:
    left var(--dur-base) var(--ease-out),
    top var(--dur-base) var(--ease-out);
}

/* ------------------------------------------------------------------ pilen

   En roterad kvadrat med två kanter, inte en border-triangel: en triangel
   gjord av ramar kan inte ha en egen ram, och rutan har en hårfin linje som
   pilen måste fortsätta för att inte se lös ut.

   Den ärver rutans yta och linje, och skjuts ut halva sin bredd så att
   spetsen ligger utanför kanten. z-index -1 lägger den bakom rutans egen
   bakgrund, vilket är det som klipper bort de två kanter som inte ska synas. */

.atr-arrow {
  /* Standardläge: mitt på den sida rutan vänder mot. JS skriver över dem
     inline när målets mitt ligger någon annanstans än rutans, vilket den gör
     så fort rutan klämts in mot en skärmkant. De måste stå deklarerade här —
     scripts/check-styles.mjs failar på var(--x) som ingen deklarerar, och en
     egenskap som bara sätts från JS ser för vakten ut som ett stavfel. */
  --atr-arrow-x: 50%;
  --atr-arrow-y: 50%;

  position: absolute;
  z-index: -1;
  width: calc(var(--atr-arrow) * 2);
  height: calc(var(--atr-arrow) * 2);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transform: rotate(45deg);
}

.atr-card[data-side="none"] .atr-arrow { display: none; }

.atr-card[data-side="bottom"] .atr-arrow {
  top: calc(var(--atr-arrow) * -1);
  left: calc(var(--atr-arrow-x, 50%) - var(--atr-arrow));
}
.atr-card[data-side="top"] .atr-arrow {
  bottom: calc(var(--atr-arrow) * -1);
  left: calc(var(--atr-arrow-x, 50%) - var(--atr-arrow));
}
.atr-card[data-side="right"] .atr-arrow {
  left: calc(var(--atr-arrow) * -1);
  top: calc(var(--atr-arrow-y, 50%) - var(--atr-arrow));
}
.atr-card[data-side="left"] .atr-arrow {
  right: calc(var(--atr-arrow) * -1);
  top: calc(var(--atr-arrow-y, 50%) - var(--atr-arrow));
}

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

.atr-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.atr-counter {
  flex: 1;
  min-width: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Husregeln: 28 px synligt, 44 px att träffa, via ett osynligt ::before med
   negativ inset. Aldrig genom att göra knappen större — sidhuvudet och den
   här rutan har båda för lite plats för det. */
.atr-close {
  position: relative;
  flex: none;
  width: var(--atr-close);
  height: var(--atr-close);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  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);
}

.atr-close::before {
  content: "";
  position: absolute;
  inset: calc((var(--atr-close) - var(--atr-hit)) / 2);
}

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

/* --------------------------------------------------------------- texterna */

.atr-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.atr-body {
  margin: 0;
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ foten */

.atr-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.atr-dots {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.atr-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-line-2);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.atr-dot.is-now { background: var(--color-accent); }

.atr-btn {
  position: relative;
  flex: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* Knappen är ungefär 34 px hög med sin padding. Ytan dras ut till 44 åt båda
   håll utan att raden blir högre — se DESIGN.md avsnitt 7. Inseten är
   avsiktligt bara vertikal: två knappar bredvid varandra med vågrät
   utdragning får överlappande träffytor, och då vinner den som ligger sist i
   DOM:en, tyst. */
.atr-btn::before {
  content: "";
  position: absolute;
  inset-block: -5px;
  inset-inline: 0;
}

.atr-btn:hover { background: var(--color-surface-2); }
.atr-btn:active { transform: scale(0.97); }
.atr-btn[hidden] { display: none; }

.atr-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.atr-primary:hover {
  background: color-mix(in oklch, var(--color-accent) 88%, var(--color-ink));
  border-color: color-mix(in oklch, var(--color-accent) 88%, var(--color-ink));
}

/* ------------------------------------------------------------ livregionen

   Läses av skärmläsare, syns för ingen. `clip-path` i stället för
   `display: none`, som tar bort noden ur tillgänglighetsträdet helt och
   därmed aldrig annonserar något. */

.atr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* ------------------------------------------------------------------ pekskärm

   Samma regel som resten av appen: touch-anpassningen hänger på
   inmatningsmetod, inte på skärmbredd. En iPad i liggande läge är 1024 px
   och styrs med ett finger. */

@media (pointer: coarse) {
  .atr-overlay { --atr-close: 34px; }
  .atr-btn { padding-block: var(--space-2-5); }
}

/* -------------------------------------------------------------- telefon

   390 px. Rutan får hela bredden minus marginalerna och lite mer luft i
   texten — den läses stående, med en tumme på skärmen.

   820 px är samma brytpunkt som skalet och comments.css använder: under den
   är kommentarspanelen inte en kolumn till höger utan ett ark i underkanten,
   och rundturens text säger det (`tour.panel.bodyPhone` i tour.js). */

@media (max-width: 820px) {
  .atr-overlay { --atr-w: 22rem; }
  .atr-card {
    width: min(var(--atr-w), calc(100vw - var(--space-5)));
    padding-inline: var(--space-4);
  }
}

@media (max-width: 400px) {
  .atr-card { font-size: var(--text-xs); }
  .atr-title { font-size: var(--text-sm); }
}

/* ------------------------------------------------------------ minskad rörelse

   Durationerna nollas centralt i tokens/motion.css, men en transition med
   noll duration hoppar fortfarande — vilket är precis vad som efterfrågas.
   Blocket här stänger bara av det som inte är en duration: nedskalningen vid
   tryck. Inga egna tider, ingen egen animation. */

@media (prefers-reduced-motion: reduce) {
  .atr-btn:active { transform: none; }
}