/* info.css — en liten (i)-knapp som visar en förklaring i en ruta. Kräver tokens.css och info.js.

   Byggt för Företagsdata 2026-10-14 (Sami: "kan man inte bara ha en info knapp för sånt ... känns som man kan
   spara mkt yta på speciellt mobil och det blir cleanare även på desktop"). För instruktioner och detaljer,
   inte för det som påverkar ett köp: det ska stå synligt (marknadsföringslagen, väsentlig information).

   Markup, webbläsarens egna popover sköter öppna, stäng, Esc och tryck utanför:
     <button type="button" class="info-knapp" popovertarget="om-kartan" aria-label="Om kartan"></button>
     <div id="om-kartan" class="info-ruta" popover>Text, gärna med länkar.</div>
   Lägg rutan direkt efter knappen, så kommer länkarna i den direkt efter knappen när man tabbar.
   info.js placerar rutan vid knappen (under, eller över om det inte får plats).
   Rutan avtäcks uppifrån med --tid-lugn och --kurva-expo och stängs med samma rörelse, speglad, där
   webbläsaren kan animera utgången (overlay); annars stängs den direkt.
   Knappen 22 px med en osynlig träffyta på 44 px; rutans bredd 300 px är byggets val [OMÄTT]. */
/* Knappen nollställer det som projektets egna knappregler (min-width, padding, radie) annars ger den. */
.info-knapp {
  position: relative; min-width: 0; box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 0 0 0 6px; padding: 0;
  vertical-align: middle; border: 1px solid var(--hairline); border-radius: 50%; background: var(--yta); color: var(--text-svag);
  font: 600 12px/1 var(--font-brod, inherit); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--tid-normal) var(--kurva-standard), border-color var(--tid-normal) var(--kurva-standard), background-color var(--tid-normal) var(--kurva-standard);
}
.info-knapp::before { content: "i"; font-style: normal; }
.info-knapp::after { content: ""; position: absolute; inset: -11px; }   /* träffyta 44 px */
@media (hover: hover) { .info-knapp:hover { color: var(--text); border-color: var(--accent); } }
.info-knapp.info-oppen { color: var(--pa-accent); background: var(--accent); border-color: var(--accent); }

.info-ruta[popover] {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: max-content; max-width: min(300px, calc(100vw - 24px));
  padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--yta); color: var(--text);
  font: 400 13px/1.55 var(--font-brod, inherit); text-align: left; white-space: normal;
  box-shadow: 0 16px 36px rgb(6 26 87 / .14), 0 2px 6px rgb(6 26 87 / .06);
  clip-path: inset(0 0 100% 0 round 12px); transform: translateY(-6px);
  transition: clip-path var(--tid-normal) cubic-bezier(.78, 0, .81, 0), transform var(--tid-normal) cubic-bezier(.78, 0, .81, 0),
              overlay var(--tid-normal) allow-discrete, display var(--tid-normal) allow-discrete;
}
.info-ruta.info-ovanfor { clip-path: inset(100% 0 0 0 round 12px); transform: translateY(6px); }
/* Rutan ligger i DOM bredvid sin knapp och får inte ärva förälderns layout (t.ex. en flexrad som annars
   skulle visa den stängda rutan). */
.info-ruta[popover]:not(:popover-open) { display: none; }
.info-ruta[popover]:popover-open {
  display: block;
  clip-path: inset(0 0 0 0 round 12px); transform: none;
  transition-duration: var(--tid-lugn); transition-timing-function: var(--kurva-expo);
}
@starting-style {
  .info-ruta[popover]:popover-open { clip-path: inset(0 0 100% 0 round 12px); transform: translateY(-6px); }
  .info-ruta.info-ovanfor:popover-open { clip-path: inset(100% 0 0 0 round 12px); transform: translateY(6px); }
}
.info-ruta p { margin: 0; }
.info-ruta p + p { margin-top: 8px; }
.info-ruta a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .info-knapp, .info-ruta[popover] { transition: none; }
}