/* =============================================================================
   present.css — presentationsläget
   =============================================================================

   Lager 4 (komponent). Importerar theme.css och ingenting annat — inte
   canvas.css, inte comments.css, inte app.css. Prefixet är `.pr-`.

   Två klasser hamnar på element som ägs av canvas.css: `.pr-pulse` och
   `.pr-current` sätts av present.js på pinnen som visas just nu. Namnen är
   våra, reglerna är våra, och canvasens egna klasser rörs inte — det är
   skillnaden mot att skriva om `.ac-pin` härifrån.

   Panelen är låg med flit. Den ska visa ett fynd, inte konkurrera med
   skärmdumpen bakom, och present.js flyttar canvasens centrum uppåt med
   exakt panelens höjd så att pinnen aldrig hamnar bakom den.
   ========================================================================== */

@import "./theme.css";

/* ------------------------------------------------------------------ roten */

.pr-root {
  position: fixed;
  inset: 0;
  z-index: 70;                 /* över canvasen och #exitFocus (60) */
  /* Roten släpper igenom allt: canvasen ska gå att panorera och nypa mitt i
     en presentation. Bara panelen och hjälprutan tar emot pekare. */
  pointer-events: none;
}
.pr-root[hidden] { display: none; }

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

.pr-panel {
  /* Typfärgen är en variabel så att chip, badge och förloppslinje alltid
     säger samma sak. Standard är problem — den vanligaste typen. */
  --pr-type: var(--note-issue);
  --pr-type-soft: var(--note-issue-soft);

  position: absolute;
  left: calc(var(--space-3) + var(--safe-l));
  right: calc(var(--space-3) + var(--safe-r));
  bottom: calc(var(--space-3) + var(--safe-b));
  margin-inline: auto;
  max-width: var(--container-desktop);
  pointer-events: auto;

  border-radius: var(--radius-2xl);
  overflow: hidden;

  /* Svep hanteras i JS. Utan detta tolkar webbläsaren svepet som en
     scrollgest och skickar aldrig pointerup med en användbar delta. */
  touch-action: none;

  /* Samma glasyta som .overlay i theme.css, men med egen radie och skugga.
     OBS ordningen: prefixet först, standarden sist — flera minifierare
     behåller bara den sista av två identiska deklarationer. */
  background: color-mix(in oklch, var(--color-surface) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-xl);

  animation: pr-rise var(--dur-slow) var(--ease-out) both;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pr-panel { background: var(--color-surface); }
}

@keyframes pr-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.pr-panel[data-type="issue"]       { --pr-type: var(--note-issue);       --pr-type-soft: var(--note-issue-soft); }
.pr-panel[data-type="opportunity"] { --pr-type: var(--note-opportunity); --pr-type-soft: var(--note-opportunity-soft); }
.pr-panel[data-type="question"]    { --pr-type: var(--note-question);    --pr-type-soft: var(--note-question-soft); }
.pr-panel[data-type="heuristic"]   { --pr-type: var(--note-heuristic);   --pr-type-soft: var(--note-heuristic-soft); }

/* ---------------------------------------------------------- förloppslinjen */

.pr-progress {
  height: 2px;
  background: var(--color-line);
}
.pr-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pr-type);
  transition: width var(--dur-slow) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* ------------------------------------------------------------- innehållet */

.pr-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-3);
}

.pr-grow { flex: 1 1 auto; }

.pr-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Numret som står på pinnen. Att det står här också gör att den som tittar
   på skärmen kan koppla panelen till rätt pin utan att någon pekar. */
.pr-num {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding-inline: var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--pr-type);
  color: var(--color-accent-ink);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Nodens namn: liten överrubrik så man vet vilken skärm man tittar på. */
.pr-node {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.pr-count {
  flex: 0 0 auto;
  color: var(--color-faint);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.pr-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pr-type {
  color: var(--pr-type);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.pr-type.is-resolved { color: var(--color-faint); }

.pr-title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-wrap: balance;
}

/* Brödtexten får ett tak och scrollar internt. En lång anteckning ska inte
   kunna växa panelen tills den täcker skärmdumpen den handlar om. */
.pr-text {
  margin: 0;
  max-height: 22vh;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}

.pr-heur {
  margin: 0;
  color: var(--color-faint);
  font-size: var(--text-sm);
  font-style: italic;
}

.pr-panel.is-empty .pr-title { color: var(--color-ink-muted); font-size: var(--text-lg); }

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

.pr-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* 16px räcker precis: två ikonknappars osynliga träffytor sträcker sig
     8px åt varje håll och möts utan att överlappa. Krymper gapet vinner den
     som ligger sist i DOM:en, och det syns inte förrän någon klagar. */
  gap: var(--space-4);
  padding-top: var(--space-1);
}

/* Ikonknapp: 28px synligt, 44px träffyta via ett osynligt ::before.
   Att i stället sätta min-width: 44px spräcker foten på 390px. */
.pr-btn {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pr-btn::before { content: ""; position: absolute; inset: -8px; }
.pr-btn svg { width: 16px; height: 16px; display: block; }
.pr-btn:hover { background: var(--color-surface); color: var(--color-accent); }
.pr-btn:active { transform: scale(0.96); }
.pr-btn[disabled] { opacity: 0.35; cursor: default; }
.pr-btn[disabled]::before { content: none; }
.pr-btn[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }

/* Ordningsväxlaren. Läget bärs av aria-pressed, inte av en klass — annars
   kan stilen och skärmläsaren säga olika saker. */
.pr-seg {
  display: inline-flex;
  flex: 0 1 auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  overflow: hidden;
}
.pr-order {
  position: relative;
  padding: var(--space-1-5) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-ink-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* Träffytan växer bara i höjdled: knapparna sitter kant i kant, och en
   inset åt sidorna hade lagt grannens yta ovanpå den här. */
.pr-order::before { content: ""; position: absolute; inset: -9px 0; }
.pr-order:hover { color: var(--color-ink); }
.pr-order[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* ------------------------------------------------------------- hjälprutan */

.pr-help {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: color-mix(in oklch, var(--color-bg) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: pr-fade var(--dur-base) var(--ease-out) both;
}
.pr-help[hidden] { display: none; }

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

@keyframes pr-fade { from { opacity: 0 } to { opacity: 1 } }

.pr-help-card {
  width: min(var(--container-tablet), 100%);
  max-height: 80vh;
  overflow: auto;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-xl);
}
.pr-help-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pr-help-h {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.pr-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.pr-keys dd {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}
.pr-kbd {
  display: inline-block;
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid var(--color-line);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ------------------------------------------------------- pinnen som visas

   Sätts av present.js på canvasens pin-element. `--pc` är pinnens egen
   typfärg och sätts där som inline-stil, därav fallbacken. */

.pr-current {
  outline: 2px solid var(--pc, var(--note-issue));
  outline-offset: 3px;
}

.pr-pulse { animation: pr-pulse var(--dur-pulse) var(--ease-out) 1; }

@keyframes pr-pulse {
  from { box-shadow: 0 0 0 0 var(--pc, var(--note-issue)); }
  to   { box-shadow: 0 0 0 26px transparent; }
}

/* --------------------------------------------------------- skärmläsartext */

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

/* ------------------------------------------------------------------ touch

   Touch-anpassningen hänger på inmatningsmetod, inte skärmbredd: en iPad i
   liggande läge är 1024px och styrs med ett finger. 34 + 5 + 5 = 44. */

@media (pointer: coarse) {
  .pr-btn { width: 34px; height: 34px; }
  .pr-btn::before { inset: -5px; }
  .pr-order { padding-block: var(--space-2-5); }
  .pr-order::before { inset: -6px 0; }
}

/* -------------------------------------------------------------- smal skärm

   390px är utgångsläget, inte undantaget. Foten radbryts så att
   ordningsväxlaren får en egen rad i stället för att knapparna krymper. */

@media (max-width: 640px) {
  .pr-panel {
    left: calc(var(--space-2) + var(--safe-l));
    right: calc(var(--space-2) + var(--safe-r));
    bottom: calc(var(--space-2) + var(--safe-b));
    border-radius: var(--radius-xl);
  }
  .pr-inner { padding: var(--space-3); gap: var(--space-1-5); }
  .pr-title { font-size: var(--text-lg); }
  .pr-text { font-size: var(--text-sm); max-height: 18vh; }
  .pr-foot { gap: var(--space-3) var(--space-4); }
  .pr-seg { order: 3; flex: 1 0 100%; justify-content: stretch; }
  .pr-order { flex: 1 1 0; text-align: center; }
  .pr-help-card { padding: var(--space-4); }
  .pr-keys { gap: var(--space-2) var(--space-3); }
}

/* Låg och liggande — en telefon på sidan har knappt någon höjd att ge bort. */
@media (max-height: 520px) {
  .pr-text { max-height: 14vh; }
  .pr-title { font-size: var(--text-lg); }
}

/* --------------------------------------------------------- mindre rörelse

   Durationerna nollas centralt i tokens/motion.css, men en animation med
   noll duration hoppar fortfarande till slutläget. Transformer och keyframes
   måste därför stängas av var för sig. */

@media (prefers-reduced-motion: reduce) {
  .pr-panel { animation: none; }
  .pr-help { animation: none; }
  .pr-pulse { animation: none; }
  .pr-btn:active { transform: none; }
}