/* ─────────────────────────────────────────────
   Nordivé — Feature animations  (v2)
   Six 200px-tall product preview animations, rebuilt to match
   the actual app at app.nordiveai.no.
   • Easings: cubic-bezier(.16,1,.3,1) for pops, (.4,0,.2,1) for sweeps.
   • Loops 7–12s, seamless.
   • No emoji. Norsk copy.
   • Use kilde-chips in [N]-brackets (the product's real notation).
   • Use the ✻ assistant glyph for AI replies.
   ───────────────────────────────────────────── */

.feat-anim{
  position:relative;height:200px;
  background:linear-gradient(180deg,#fff 0%,#f7f5ef 100%);
  border-bottom:1px solid var(--rule-2);
  overflow:hidden;
  display:flex;align-items:stretch;justify-content:stretch;
}
.feat-anim > *{flex:1;display:flex;flex-direction:column}

/* Shared scan-line — a brand-blue wash descending across an element. */
.fa-scan{
  position:absolute;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(41,82,217,.045) 35%,
    rgba(41,82,217,.07)  50%,
    rgba(41,82,217,.045) 65%,
    transparent 100%);
  pointer-events:none;transform:translateY(-110%);
  z-index:1;
}
@keyframes fa-scan-sweep{
  0%       {transform:translateY(-110%);opacity:0}
  6%       {opacity:1}
  20%      {transform:translateY(280%);opacity:1}
  24%,100% {transform:translateY(280%);opacity:0}
}

/* ════════════════════════════════════════════
   01 — AKTØRPORTALEN
   Wizard step 2: bilag rows where AI renames raw filenames
   (G156295712_…HEIC) to clean "Bilag N: …".
   ════════════════════════════════════════════ */
.fa1-wrap{padding:10px 12px;width:100%;display:flex;flex-direction:column;gap:7px;justify-content:center}

.fa1-ocr{
  display:flex;align-items:center;gap:6px;
  background:rgba(41,82,217,.055);border:1px solid rgba(41,82,217,.18);
  border-radius:5px;padding:4px 8px 4px 7px;
  font-family:var(--font-body);font-size:9px;color:var(--ink-2);letter-spacing:-.005em;
  flex-shrink:0;
}
.fa1-ocr-mark{
  width:12px;height:12px;flex-shrink:0;
  background:url('../assets/logo-mark.png') center/contain no-repeat;
}
.fa1-ocr-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa1-ocr-t b{color:var(--brand);font-weight:600;font-variant-numeric:tabular-nums}
.fa1-ocr-bar{
  width:48px;height:3px;border-radius:99px;background:rgba(41,82,217,.18);
  overflow:hidden;flex-shrink:0;
}
.fa1-ocr-bar-fill{
  height:100%;background:var(--brand);width:0%;
  animation:fa1-progress 14s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes fa1-progress{
  0%      {width:0%}
  4%      {width:18%}
  8%      {width:52%}
  14%     {width:88%}
  18%,96% {width:100%}
  98%,100%{width:0%}
}

.fa1-rows{display:flex;flex-direction:column;gap:5px}
.fa1-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;
  background:#fff;border:1px solid var(--rule);border-radius:4px;
  padding:4px 7px;min-height:22px;
  box-shadow:0 1px 0 rgba(14,27,51,.02);
  position:relative;overflow:hidden;
}
.fa1-num{
  font-family:var(--font-h);font-size:8px;font-weight:600;color:var(--mid);
  background:rgba(14,27,51,.05);padding:1.5px 4px;border-radius:2px;letter-spacing:-.005em;
}
.fa1-name{
  font-family:var(--font-body);font-size:9.5px;color:var(--ink-2);font-feature-settings:"tnum";
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  position:relative;height:13px;
}
.fa1-status{flex-shrink:0;white-space:nowrap;font-family:var(--font-h);font-size:7.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;padding:2px 6px;border-radius:2px}
.fa1-status-ocr{background:rgba(108,119,133,.10);color:var(--mid);border:1px solid rgba(108,119,133,.20)}
.fa1-status-done{background:rgba(63,122,82,.10);color:var(--green)}

/* Each row swaps from "raw" name → "clean" name in a synchronized wave
   after the progress bar fills. All rows hold in clean state for most
   of the 14s cycle, then snap back to raw at the very end. */
.fa1-name{position:relative}
.fa1-name-raw,.fa1-name-clean{
  display:block;position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation-fill-mode:both;
}
.fa1-name-clean{color:var(--ink);font-weight:500;opacity:0}
.fa1-row-1 .fa1-name-raw  {animation:fa1-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:0s}
.fa1-row-1 .fa1-name-clean{animation:fa1-in  14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:0s}
.fa1-row-1 .fa1-status-ocr{animation:fa1-status-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:0s;animation-fill-mode:both}
.fa1-row-1 .fa1-status-done{animation:fa1-status-in 14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:0s;animation-fill-mode:both}
.fa1-row-2 .fa1-name-raw  {animation:fa1-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.35s}
.fa1-row-2 .fa1-name-clean{animation:fa1-in  14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.35s}
.fa1-row-2 .fa1-status-ocr{animation:fa1-status-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.35s;animation-fill-mode:both}
.fa1-row-2 .fa1-status-done{animation:fa1-status-in 14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.35s;animation-fill-mode:both}
.fa1-row-3 .fa1-name-raw  {animation:fa1-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.7s}
.fa1-row-3 .fa1-name-clean{animation:fa1-in  14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.7s}
.fa1-row-3 .fa1-status-ocr{animation:fa1-status-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.7s;animation-fill-mode:both}
.fa1-row-3 .fa1-status-done{animation:fa1-status-in 14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.7s;animation-fill-mode:both}
.fa1-row-4 .fa1-name-raw  {animation:fa1-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:1.05s}
.fa1-row-4 .fa1-name-clean{animation:fa1-in  14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.05s}
.fa1-row-4 .fa1-status-ocr{animation:fa1-status-out 14s cubic-bezier(.4,0,.2,1) infinite;animation-delay:1.05s;animation-fill-mode:both}
.fa1-row-4 .fa1-status-done{animation:fa1-status-in 14s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.05s;animation-fill-mode:both}

/* Each animation is delayed up to 1.05s before its 14s cycle starts, so:
   - 0–1s of cycle: raw + OCR-pending visible (progress bar filling)
   - 1–2s: brief swap to clean + Klar
   - 2–13.7s: stable clean state (≈83% of cycle)
   - 13.7–14s: snap back to raw   */
/* Instant swaps — no crossfade window where both filenames or status
   pills overlap visibly. Each label is either fully on or fully off. */
@keyframes fa1-out{
  0%, 7%      {opacity:1}
  7.01%, 99%  {opacity:0}
  99.01%,100% {opacity:1}
}
@keyframes fa1-in{
  0%, 7%      {opacity:0}
  7.01%, 99%  {opacity:1}
  99.01%,100% {opacity:0}
}
@keyframes fa1-status-out{
  0%, 7%      {opacity:1}
  7.01%, 99%  {opacity:0}
  99.01%,100% {opacity:1}
}
@keyframes fa1-status-in{
  0%, 7%      {opacity:0;transform:scale(.9)}
  7.01%,99%   {opacity:1;transform:scale(1)}
  99.01%,100% {opacity:0;transform:scale(.9)}
}

/* ════════════════════════════════════════════
   02 — FRISTER
   Two-pane inbox: top row selected (navy left bar, tinted bg),
   subject + body preview + frist-pill below. Scan sweeps; frist
   pills pop in sequentially under each subject.
   ════════════════════════════════════════════ */
.fa2-wrap{padding:10px 12px;width:100%;display:flex;align-items:stretch}
.fa2-list{flex:1;display:flex;flex-direction:column}
.fa2-list .fa2-row{flex:1;justify-content:center}
.fa2-list{
  width:100%;background:#fff;border:1px solid var(--rule);border-radius:5px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(14,27,51,.02),0 12px 28px -16px rgba(14,27,51,.14);
}
.fa2-scan{animation:fa-scan-sweep 8s cubic-bezier(.4,0,.2,1) infinite}
.fa2-row{
  position:relative;z-index:2;
  padding:5px 11px 6px 13px;border-bottom:1px solid var(--rule-2);
}
.fa2-row:last-child{border-bottom:0}
.fa2-row-sel{background:rgba(41,82,217,.04)}
.fa2-row-sel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--navy);
}

.fa2-head{display:flex;align-items:center;gap:6px;margin-bottom:1px}
.fa2-sender{
  font-family:var(--font-body);font-size:10px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.fa2-tag{
  font-family:var(--font-h);font-size:7.5px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;padding:1px 5px;border-radius:2px;line-height:1.4;flex-shrink:0;
  border:1px solid var(--rule);background:#fff;color:var(--mid);
}
.fa2-tag-domstol{background:rgba(41,82,217,.08);color:var(--brand);border-color:rgba(41,82,217,.18)}
.fa2-tag-klient {background:rgba(63,122,82,.10);color:var(--green);border-color:rgba(63,122,82,.20)}
.fa2-date{
  font-size:9px;color:var(--dim);margin-left:auto;font-variant-numeric:tabular-nums;
  flex-shrink:0;letter-spacing:.01em;
}
.fa2-subject{
  font-family:var(--font-body);font-size:10.5px;font-weight:500;color:var(--ink-2);
  letter-spacing:-.005em;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;
}
.fa2-body{
  font-family:var(--font-body);font-size:9.5px;color:var(--mid);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;
}
.fa2-frist{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.02em;
  padding:2px 7px 2px 6px;border-radius:3px;line-height:1.3;
  opacity:0;transform:translateY(4px);
}
.fa2-frist-icon{width:9px;height:9px;flex-shrink:0}
.fa2-frist-red  {background:rgba(176,34,60,.10);color:var(--red)}
.fa2-frist-amber{background:rgba(184,130,28,.12);color:var(--amber)}
.fa2-frist-gray {background:rgba(108,119,133,.10);color:var(--mid)}
.fa2-frist-1{animation:fa2-pop-1 8s cubic-bezier(.16,1,.3,1) infinite}
.fa2-frist-2{animation:fa2-pop-2 8s cubic-bezier(.16,1,.3,1) infinite}
.fa2-frist-3{animation:fa2-pop-3 8s cubic-bezier(.16,1,.3,1) infinite}
@keyframes fa2-pop-1{0%,26%{opacity:0;transform:translateY(4px)}32%,92%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes fa2-pop-2{0%,38%{opacity:0;transform:translateY(4px)}44%,92%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes fa2-pop-3{0%,50%{opacity:0;transform:translateY(4px)}56%,92%{opacity:1;transform:translateY(0)}100%{opacity:0}}

/* ════════════════════════════════════════════
   03 — RÅDGIVNING
   User prompt bubble (small, top-right) → ✻ assistant avatar
   with HOVEDPUNKTER list that fades in line by line +
   kilde-chip [N] in brackets per line.
   ════════════════════════════════════════════ */
.fa3-wrap{padding:10px 12px;width:100%;display:flex;flex-direction:column;gap:6px;justify-content:flex-start}

.fa3-q{
  align-self:flex-end;max-width:75%;
  background:var(--off-2);border:1px solid var(--rule);border-radius:8px 8px 2px 8px;
  padding:4px 9px 5px;
  font-family:var(--font-serif);font-style:italic;font-size:11px;color:var(--ink);
  letter-spacing:-.005em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(-3px);
  animation:fa3-q-in 10s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes fa3-q-in{
  0%,2%   {opacity:0;transform:translateY(-3px)}
  6%,94%  {opacity:1;transform:translateY(0)}
  98%,100%{opacity:0}
}

.fa3-msg{display:flex;align-items:stretch;gap:7px;flex:1}
.fa3-av{
  width:22px;height:22px;border-radius:5px;background:#fff;
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 1px 0 rgba(14,27,51,.02);
}
.fa3-av-mark{
  width:14px;height:14px;
  background:url('../assets/logo-mark.png') center/contain no-repeat;
}
.fa3-card{
  flex:1;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:5px;
  padding:7px 10px 8px;display:flex;flex-direction:column;
  justify-content:space-around;gap:3px;
  box-shadow:0 1px 0 rgba(14,27,51,.02);
}
.fa3-eye{
  font-family:var(--font-h);font-size:7.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);
}
.fa3-pt{
  display:grid;grid-template-columns:14px 1fr auto;gap:5px;align-items:baseline;
  font-family:var(--font-body);font-size:10px;color:var(--ink-2);line-height:1.35;
  opacity:0;transform:translateY(3px);min-width:0;
}
.fa3-pt-n{font-family:var(--font-h);font-size:8.5px;font-weight:600;color:var(--brand);font-feature-settings:"tnum";letter-spacing:.04em}
.fa3-pt-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa3-kilde{
  font-family:var(--font-body);font-size:8px;font-weight:600;
  background:rgba(41,82,217,.10);color:var(--brand);
  padding:1px 4px;border-radius:2px;line-height:1.2;
  font-feature-settings:"tnum";letter-spacing:0;
  opacity:0;
}
.fa3-pt-1{animation:fa3-pt-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.3s;animation-fill-mode:both}
.fa3-pt-2{animation:fa3-pt-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.9s;animation-fill-mode:both}
.fa3-pt-3{animation:fa3-pt-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.5s;animation-fill-mode:both}
.fa3-pt-4{animation:fa3-pt-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:2.1s;animation-fill-mode:both}
/* kilde-chip animates with its parent point — small offset so the text
   lands first, then the [N] tag pops in right behind it. */
.fa3-pt-1 .fa3-kilde{animation:fa3-kilde-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.55s;animation-fill-mode:both}
.fa3-pt-2 .fa3-kilde{animation:fa3-kilde-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.15s;animation-fill-mode:both}
.fa3-pt-3 .fa3-kilde{animation:fa3-kilde-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.75s;animation-fill-mode:both}
.fa3-pt-4 .fa3-kilde{animation:fa3-kilde-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:2.35s;animation-fill-mode:both}
@keyframes fa3-pt-in{
  0%,3%   {opacity:0;transform:translateY(3px)}
  7%,96%  {opacity:1;transform:translateY(0)}
  99%,100%{opacity:0}
}
@keyframes fa3-kilde-in{
  0%,6%   {opacity:0;transform:scale(.85)}
  11%,96% {opacity:1;transform:scale(1)}
  99%,100%{opacity:0}
}

/* ════════════════════════════════════════════
   04 — TIDSLOGG
   Eyebrow + serif italic date · large total counter ticking up.
   Day strip TOR FRE LØR SØN MAN TIR ONS. Entries fade in,
   total rolls 0 min → 20 min → 45 min → 1t 30 min.
   ════════════════════════════════════════════ */
.fa4-wrap{padding:12px 14px;width:100%;display:flex;flex-direction:column;gap:8px;justify-content:space-between}
.fa4-entries{flex:1;justify-content:flex-end}
.fa4-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fa4-eye{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-h);font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-bottom:1px}
.fa4-eye-dot{width:4px;height:4px;border-radius:50%;background:var(--navy)}
.fa4-title{font-family:var(--font-serif);font-style:italic;font-size:14px;color:var(--navy);letter-spacing:-.01em;line-height:1.1}
.fa4-total{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.fa4-total-n{
  font-family:var(--font-h);font-feature-settings:"tnum";font-size:22px;font-weight:500;
  color:var(--navy);letter-spacing:-.02em;line-height:1;height:22px;overflow:hidden;
}
.fa4-total-stack{display:flex;flex-direction:column;animation:fa4-total-roll 12s cubic-bezier(.16,1,.3,1) infinite}
.fa4-total-stack>span{height:22px;line-height:22px;display:block;white-space:nowrap}
@keyframes fa4-total-roll{
  /* sync’d with entry delays — .6, 1.1, 1.6, 2.1s on a 12s cycle */
  0%,4%   {transform:translateY(0)}       /* 0 min */
  9%,12%  {transform:translateY(-22px)}   /* 20 min   ← entry 1 (.6s = 5%) */
  14%,17% {transform:translateY(-44px)}   /* 1t 5min  ← entry 2 (1.1s = 9%) */
  19%,22% {transform:translateY(-66px)}   /* 1t 35min ← entry 3 (1.6s = 13%) */
  24%,96% {transform:translateY(-88px)}   /* 2t 20min ← entry 4 (2.1s = 17%), holds */
  99%,100%{transform:translateY(0)}       /* snap back */
}
.fa4-total-l{font-family:var(--font-h);font-size:7.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-top:2px}

.fa4-days{display:flex;align-items:center;gap:1px;padding-bottom:5px;border-bottom:1px solid var(--rule-2)}
.fa4-day{
  flex:1;font-family:var(--font-h);font-size:7.5px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--dim);text-align:center;padding:3px 0;
  border-radius:2px;
}
.fa4-day-on{background:var(--navy);color:#fff}

.fa4-entries{display:flex;flex-direction:column}
.fa4-entry{
  display:grid;grid-template-columns:28px 1fr auto auto;gap:7px;align-items:baseline;
  padding:2.5px 0;border-bottom:1px solid var(--rule-2);min-width:0;
  opacity:0;transform:translateY(4px);
}
.fa4-entry:last-child{border-bottom:0}
.fa4-entry-1{animation:fa4-entry 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.6s;animation-fill-mode:both}
.fa4-entry-2{animation:fa4-entry 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.1s;animation-fill-mode:both}
.fa4-entry-3{animation:fa4-entry 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.6s;animation-fill-mode:both}
.fa4-entry-4{animation:fa4-entry 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:2.1s;animation-fill-mode:both}
@keyframes fa4-entry{
  0%,5%   {opacity:0;transform:translateY(4px)}
  10%,96% {opacity:1;transform:translateY(0)}
  99%,100%{opacity:0}
}
.fa4-e-time{font-family:var(--font-body);font-size:9px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.fa4-e-act{font-family:var(--font-body);font-size:10px;font-weight:500;color:var(--ink);letter-spacing:-.003em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fa4-e-min{font-family:var(--font-body);font-size:9.5px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.005em;white-space:nowrap}
.fa4-e-min>span{color:var(--mid);font-weight:500;margin-left:1.5px}
.fa4-e-ok{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--font-h);font-size:8px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);
}
.fa4-e-ok::before{content:"✓"}

/* ════════════════════════════════════════════
   05 — GRID REVIEW  (v3, matches /grid redesign)
   M&A SPA grid: italic-serif insight, 3 documents with bold
   values + numbered cite-chips, one subtle "diff" cell with
   amber wash + 2px left rail (no "Avviker" tag).
   ════════════════════════════════════════════ */
.fa5-wrap{padding:8px 10px;width:100%;display:flex;flex-direction:column;gap:5px}

.fa5-insight{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  background:#fff;border:1px solid var(--rule);border-radius:5px;
  padding:5px 9px 5px 11px;position:relative;
}
.fa5-insight::before{
  content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;
  background:var(--navy);border-radius:1px;
}
.fa5-insight-mark{
  width:12px;height:12px;flex-shrink:0;
  background:url('../assets/logo-mark.png') center/contain no-repeat;
}
.fa5-insight-t{
  flex:1;min-width:0;
  font-family:var(--font-serif);font-style:italic;font-size:10px;
  color:var(--ink);letter-spacing:-.005em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fa5-insight-t b{
  font-family:var(--font-h);font-style:normal;font-weight:600;color:var(--navy);
  letter-spacing:-.005em;font-feature-settings:"tnum";
}
.fa5-insight-stat{
  display:inline-flex;align-items:baseline;gap:3px;flex-shrink:0;
  font-family:var(--font-h);font-feature-settings:"tnum";
}
.fa5-insight-stat .n{font-size:12px;font-weight:600;color:var(--amber);letter-spacing:-.02em;line-height:1}
.fa5-insight-stat .l{font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}

.fa5-table{
  flex:1;width:100%;background:#fff;border:1px solid var(--rule);border-radius:5px;
  position:relative;overflow:hidden;display:grid;
  grid-template-rows:auto 1fr 1fr 1fr;
  box-shadow:0 1px 0 rgba(14,27,51,.02),0 12px 28px -16px rgba(14,27,51,.14);
}
.fa5-scan{animation:fa-scan-sweep 9s cubic-bezier(.4,0,.2,1) infinite}

.fa5-row{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;
  position:relative;z-index:2;border-bottom:1px solid var(--rule-2);
}
.fa5-row:last-child{border-bottom:none}
.fa5-cell{
  padding:5px 9px;border-right:1px solid var(--rule-2);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-width:0;overflow:hidden;position:relative;
}
.fa5-cell:last-child{border-right:none}

.fa5-row-head{background:var(--off-2)}
.fa5-row-head .fa5-cell{
  font-family:var(--font-h);font-size:7.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);padding:4px 9px;
  flex-direction:row;align-items:center;justify-content:flex-start;
}
.fa5-row-head .fa5-cell.is-ref{color:var(--navy)}

/* Document column */
.fa5-doc{
  background:var(--off);border-right:1px solid var(--rule);
}
.fa5-row-head .fa5-doc{background:var(--off-2)}
.fa5-doc-name{
  font-family:var(--font-h);font-size:10px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fa5-doc-meta{
  display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden;
}
.fa5-doc-type{
  font-family:var(--font-h);font-size:7px;font-weight:700;letter-spacing:.06em;
  padding:1px 4px;border-radius:2px;flex-shrink:0;line-height:1.4;
}
.fa5-doc-type-pdf{background:rgba(176,34,60,.10);color:var(--red)}
.fa5-doc-type-docx{background:rgba(41,82,217,.10);color:var(--brand)}
.fa5-doc-ref{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--font-h);font-size:7px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);
  background:rgba(63,122,82,.10);padding:1px 4px;border-radius:2px;flex-shrink:0;
}
.fa5-doc-ref::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--green)}

/* Reference row left rail */
.fa5-row.is-ref .fa5-doc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--navy);
}

/* Value cells */
.fa5-val{
  font-family:var(--font-h);font-size:10px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em;line-height:1.2;
  font-feature-settings:"tnum";
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(2px);
}
.fa5-cite{
  display:inline-flex;align-items:center;gap:3px;width:max-content;
  font-family:var(--font-h);font-size:7.5px;font-weight:700;letter-spacing:.04em;
  color:var(--brand);background:rgba(41,82,217,.07);
  border:1px solid rgba(41,82,217,.12);
  padding:0 4px;border-radius:99px;line-height:1.5;
  font-feature-settings:"tnum";
  opacity:0;
}

/* Diff treatment — subtle amber wash + 2px left rail */
.fa5-cell.is-diff{background:rgba(184,130,28,.06)}
.fa5-cell.is-diff::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);
  opacity:0;
  animation:fa5-diff-rail 12s cubic-bezier(.16,1,.3,1) infinite;
  animation-delay:2.6s;animation-fill-mode:both;
}
@keyframes fa5-diff-rail{
  0%,18%  {opacity:0}
  24%,96% {opacity:1}
  99%,100%{opacity:0}
}

/* Row + col-specific reveal timing */
.fa5-row-1 .fa5-val   {animation:fa5-val-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.6s;animation-fill-mode:both}
.fa5-row-2 .fa5-val   {animation:fa5-val-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.2s;animation-fill-mode:both}
.fa5-row-3 .fa5-val   {animation:fa5-val-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.8s;animation-fill-mode:both}
.fa5-row-1 .fa5-cite  {animation:fa5-cite-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.9s;animation-fill-mode:both}
.fa5-row-2 .fa5-cite  {animation:fa5-cite-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:1.5s;animation-fill-mode:both}
.fa5-row-3 .fa5-cite  {animation:fa5-cite-in 12s cubic-bezier(.16,1,.3,1) infinite;animation-delay:2.1s;animation-fill-mode:both}
@keyframes fa5-val-in{
  0%,6%   {opacity:0;transform:translateY(2px)}
  12%,96% {opacity:1;transform:translateY(0)}
  99%,100%{opacity:0}
}
@keyframes fa5-cite-in{
  0%,9%   {opacity:0;transform:scale(.85)}
  15%,96% {opacity:1;transform:scale(1)}
  99%,100%{opacity:0}
}

/* ════════════════════════════════════════════
   06 — KI-SPESIALISTER
   Persona dropdown (INNEBYGDE list).  Each persona = dark circle
   monogram + name + small description + ✓ on active.
   The "active" indicator cycles top → bottom.
   ════════════════════════════════════════════ */
.fa6-wrap{padding:10px 14px;width:100%;display:flex;align-items:stretch}
.fa6-pop{flex:1;display:flex;flex-direction:column}
.fa6-list{flex:1;justify-content:center}
.fa6-pop{
  width:100%;background:#fff;border:1px solid var(--rule);border-radius:6px;
  padding:6px;overflow:hidden;position:relative;
  box-shadow:0 1px 0 rgba(14,27,51,.02),0 14px 32px -18px rgba(14,27,51,.20);
}
.fa6-eye{
  display:block;font-family:var(--font-h);font-size:7.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid);padding:4px 6px 6px;
}
.fa6-list{display:flex;flex-direction:column;gap:1px;position:relative}
.fa6-p{
  display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;
  padding:4px 6px;border-radius:4px;position:relative;
  transition:background .35s var(--ease);
}
.fa6-mono{
  width:18px;height:18px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:#fff;font-family:var(--font-h);font-size:9px;font-weight:600;letter-spacing:0;
}
.fa6-meta{display:flex;flex-direction:column;min-width:0;gap:1px}
.fa6-n{font-family:var(--font-body);font-size:10px;font-weight:600;color:var(--ink);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa6-d{font-family:var(--font-body);font-size:8.5px;color:var(--mid);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa6-check{
  width:11px;height:11px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:8px;line-height:1;font-weight:700;flex-shrink:0;
  opacity:0;transform:scale(.6);
}

/* Active highlight slides between rows; check icon on each persona
   appears ONLY when the highlight is on that persona. Synchronized
   via shared keyframe percentages (12s total cycle). */
.fa6-hi{
  position:absolute;left:0;right:0;height:30px;
  background:rgba(41,82,217,.05);border-radius:4px;
  animation:fa6-hi-slide 12s cubic-bezier(.5,.2,.3,1) infinite;
}
@keyframes fa6-hi-slide{
  0%,18%   {transform:translateY(0)}
  22%,40%  {transform:translateY(31px)}
  44%,62%  {transform:translateY(62px)}
  66%,84%  {transform:translateY(93px)}
  88%,100% {transform:translateY(0)}
}

.fa6-p-1 .fa6-check{animation:fa6-check-1 12s ease-in-out infinite;animation-fill-mode:both}
.fa6-p-2 .fa6-check{animation:fa6-check-2 12s ease-in-out infinite;animation-fill-mode:both}
.fa6-p-3 .fa6-check{animation:fa6-check-3 12s ease-in-out infinite;animation-fill-mode:both}
.fa6-p-4 .fa6-check{animation:fa6-check-4 12s ease-in-out infinite;animation-fill-mode:both}

/* ✓ visibility is "keyed to highlight row", not absolute time — it appears
   the moment the highlight arrives and stays until it leaves. */
@keyframes fa6-check-1{
  0%,18%   {opacity:1;transform:scale(1)}
  22%,100% {opacity:0;transform:scale(.6)}
}
@keyframes fa6-check-2{
  0%,18%   {opacity:0;transform:scale(.6)}
  22%,40%  {opacity:1;transform:scale(1)}
  44%,100% {opacity:0;transform:scale(.6)}
}
@keyframes fa6-check-3{
  0%,40%   {opacity:0;transform:scale(.6)}
  44%,62%  {opacity:1;transform:scale(1)}
  66%,100% {opacity:0;transform:scale(.6)}
}
@keyframes fa6-check-4{
  0%,62%   {opacity:0;transform:scale(.6)}
  66%,84%  {opacity:1;transform:scale(1)}
  88%,100% {opacity:0;transform:scale(.6)}
}