/* Källan · viz — "Riktning". Läses efter ../system/kallan.css.
 * Hårlinjer 1 px (webb) / 1,5 px (film), sätts som stroke-width i JS. Guld bara i punkten (er position).
 * Inga skuggor, glow, gradienter, blur eller rundade kort. */

.kv-riktning { position: relative; display: block; line-height: 0; }
.kv-svg { display: block; overflow: visible; }

/* papper */
.kv-riktning { --kv-linje: var(--k-ink, #122b25); --kv-eker: var(--k-linje-stark, #719187); --kv-nod: var(--k-ink-dampad, #3f5a4d);
  --kv-text: var(--k-ink, #122b25); --kv-text2: #2c463c; --kv-bg: var(--k-papper, #f6f2ea); --kv-guld: var(--k-guld, #c9a96b); }
.kv-ton-natt { --kv-linje: rgba(255,255,255,.82); --kv-eker: rgba(255,255,255,.42); --kv-nod: rgba(255,255,255,.7);
  --kv-text: #fff; --kv-text2: var(--k-natt-text-dampad, #d9e3dc); --kv-bg: var(--k-natt, #0b2926); }

.kv-linje { stroke: var(--kv-linje); stroke-linecap: butt; stroke-linejoin: round; }
.kv-ekerlinje path { stroke: var(--kv-linje); stroke-linecap: butt; } /* ton och vikt per del sätts i JS: tunn → tydlig */
.kv-nod { stroke: var(--kv-nod); stroke-linecap: butt; }          /* leverantörens tvärstreck i trådens ände */
.kv-punktring { fill: none; stroke: var(--kv-nod); }               /* er position i läge 01, innan bilden finns */
.kv-punkt { fill: var(--kv-guld); }

.kv-etikett { font-family: var(--k-sans, Figtree, sans-serif); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  fill: var(--kv-text); }
.kv-lev { font-family: var(--k-sans, Figtree, sans-serif); font-weight: 400; letter-spacing: .01em; fill: var(--kv-text2); }
.kv-signal { font-family: var(--k-serif, Newsreader, serif); font-variation-settings: "opsz" 36; font-weight: 400; fill: var(--kv-text); }
.kv-ton-natt .kv-signal { font-weight: 360; }
/* hänvisningen till belägget: som en källrad, Figtree i versaler. På webben en länk till figuren. */
.kv-ref { font-family: var(--k-sans, Figtree, sans-serif); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  fill: var(--kv-text2); font-variant-numeric: tabular-nums; }
.kv-ref-lank { cursor: pointer; }
.kv-ref-lank .kv-ref { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.kv-ref-lank:hover .kv-ref { fill: var(--kv-text); }
.kv-mitt { font-family: var(--k-serif, Newsreader, serif); font-variation-settings: "opsz" 36; font-weight: 400; text-anchor: middle; fill: var(--kv-text); }
.kv-mitt-a { fill: var(--kv-text2); }
.kv-mitt-b { font-style: italic; }
.kv-ton-natt .kv-mitt { font-weight: 360; }

/* ---------- webbfiguren (src/scripts/kallan/riktning.ts) ----------
 * Stegindikatorns markering är bläck, inte guld: guldet i vyn tillhör punkten. */
.kv-fig { margin: 0; color: var(--k-fg, #122b25); }
.kv-fig.k-natt { background: var(--k-natt); color: #fff; }
.kv-scen { position: relative; width: 100%; }
.kv-scen:focus-visible { outline: 1px solid var(--k-guld); outline-offset: 4px; }
.kv-fot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px;
  border-top: 1px solid var(--k-rule, #cedbd3); font: 400 13px/1.4 var(--k-sans); }
.kv-steg { display: flex; gap: 0; align-items: baseline; }
.kv-steg button, .kv-om { appearance: none; background: none; border: 0; padding: 6px 2px; margin: 0; cursor: pointer;
  font: 600 12px/1 var(--k-sans); letter-spacing: .14em; color: var(--k-fg2, #3f5a4d); font-variant-numeric: tabular-nums;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0 max(1.5px, .02em); transition: background-size .6s var(--k-ease-markera), color .32s; }
.kv-steg .kv-sep { color: var(--k-fg2, #3f5a4d); padding: 0 8px; font: 400 12px/1 var(--k-sans); opacity: .6; }
.kv-steg button[aria-current="step"] { color: var(--k-fg, #122b25); background-size: 100% max(1.5px, .02em); }
.kv-steg button:focus-visible, .kv-om:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.kv-om { letter-spacing: .02em; font-weight: 400; font-size: 13px; text-transform: none; background: none; }
.kv-om[hidden] { display: none; }
.k-natt .kv-steg button[aria-current="step"] { color: #fff; }

/* reducerad rörelse: tre stillbilder sida vid sida, staplade på mobil */
.kv-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kv-tre .kv-panel { position: relative; }
.kv-tre .kv-nr { display: block; font: 600 12px/1 var(--k-sans); letter-spacing: .14em; color: var(--k-fg2); padding: 0 0 8px;
  border-bottom: 1px solid var(--k-rule); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .kv-tre { grid-template-columns: 1fr; gap: 32px; } }

/* utan JS: den statiska bilden och beskrivningen syns; med JS döljs beskrivningen visuellt */
.kv-beskrivning { font: 400 15px/1.55 var(--k-sans); color: var(--k-fg2); max-width: 62ch; margin: 12px 0 0; }
.kv-js .kv-beskrivning, .kv-dold { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }