/* ==========================================================================
   Meta i OS-et (1. oktober 2026, docs/helhet/spes-ads-manager.md 2.12).

   Tabellen er et .kort.tett med hårstrek mellom radene og ingen striper.
   Hodet og summeringsraden kleber seg øverst, av/på og navnet til venstre
   når tabellen ruller sidelengs. Tall i mono med tabular-nums, ord i Geist.
   Status er en prikk og et ord, aldri bare farge. Under 640 blir radene
   kort med navn, status og tre tall. De flytende panelene (.mt-flyt) står i
   body, og er Lodds .flyt, som ark nedenfra på telefon.
   ========================================================================== */

:root {
  --mt-kol-paa: 52px;
  --mt-kol-navn: 260px;
  --mt-kol-tall: 84px;
  --mt-kol-tekst: 120px;
  --mt-rad: 44px;
  --mt-pil: 24px;
  --mt-bryter: 30px;
  --mt-knott: 14px;
  --mt-flyt: 300px;
  --mt-flyt-bred: 540px;
  --mt-velger: 36px;
  --mt-rull-h: calc(100vh - 300px);
  --mt-navn-maks: 340px;
}

#skjerm-konsept .mt-rot { display: flex; flex-direction: column; gap: 0; }
#skjerm-konsept .mt-rot .faner { margin: 0 0 var(--s-4); }
#skjerm-konsept .mt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#skjerm-konsept .mt-ikon, #skjerm-konsept .mt-flyt .mt-ikon { width: 14px; height: 14px; flex: 0 0 auto; }
#skjerm-konsept .mt-mono, #skjerm-konsept .mt-flyt .mt-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- verktøylinja -------------------------------------------------------- */

#skjerm-konsept .mt-verktoy {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); margin: 0 0 var(--s-4);
  overflow-x: auto; scrollbar-width: none;
}
/* Med plass bryter linja heller enn å skjule Åpne i Meta bak kanten; under
   900 ruller den sidelengs, som Lodds faner. */
@media (min-width: 901px) { #skjerm-konsept .mt-verktoy { flex-wrap: wrap; overflow-x: visible; } }
#skjerm-konsept .mt-verktoy::-webkit-scrollbar { display: none; }
#skjerm-konsept .mt-velger {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--mt-velger); padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-2); background: var(--flate-2); color: var(--ink);
  font: inherit; font-size: var(--t-3); font-weight: 500; white-space: nowrap; flex: 0 0 auto; cursor: pointer;
}
#skjerm-konsept .mt-velger small { font-weight: 400; color: var(--ink-3); font-size: var(--t-2); }
#skjerm-konsept .mt-velger .mt-ikon { color: var(--ink-3); }
#skjerm-konsept .mt-velger[aria-expanded="true"] { background: var(--flate-3); }
#skjerm-konsept .mt-sok {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--mt-velger); padding: 0 var(--s-4);
  border-radius: var(--r-2); background: var(--flate-2); color: var(--ink-3); flex: 1 1 200px; min-width: 160px;
}
#skjerm-konsept .mt-sok input { border: 0; background: none; font: inherit; font-size: var(--t-3); color: var(--ink); flex: 1; min-width: 0; padding: 0; }
#skjerm-konsept .mt-sok input::placeholder { color: var(--ink-3); }
#skjerm-konsept .mt-sok input:focus { outline: none; }
#skjerm-konsept .mt-sok:focus-within { background: var(--flate-3); }
#skjerm-konsept .mt-tilmeta { margin-left: auto; flex: 0 0 auto; }
#skjerm-konsept .mt-tilmeta .mt-ikon { margin-right: var(--s-2); }

#skjerm-konsept .mt-bryter {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--mt-velger); padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); font: inherit; font-size: var(--t-3);
  white-space: nowrap; flex: 0 0 auto; cursor: pointer;
}
#skjerm-konsept .mt-bryter i { width: var(--mt-bryter); height: 18px; border-radius: 999px; background: var(--line-3); position: relative; flex: 0 0 auto; transition: background var(--tid-1) var(--kurve); }
#skjerm-konsept .mt-bryter i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: var(--mt-knott); height: var(--mt-knott); border-radius: 50%;
  background: var(--flate); transition: transform var(--tid-1) var(--kurve);
}
/* Grønn som Av/På: på er en tilstand, ikke merket. */
#skjerm-konsept .mt-bryter[aria-checked="true"] i { background: var(--gronn); }
#skjerm-konsept .mt-bryter[aria-checked="true"] i::after { transform: translateX(12px); }

#skjerm-konsept .mt-melding {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  background: var(--amber-svak); color: var(--ink); font-size: var(--t-3); line-height: var(--t-3-h);
}
#skjerm-konsept .mt-filterrad { display: flex; gap: var(--s-3); align-items: center; margin: 0 0 var(--s-4); flex-wrap: wrap; }
#skjerm-konsept .mt-brikke {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 0 var(--s-2) 0 var(--s-3);
  border-radius: var(--r-2); background: var(--brand-svak); color: var(--brand-tekst); font-size: var(--t-2); font-weight: 500;
}
#skjerm-konsept .mt-brikke button { border: 0; background: none; padding: var(--s-2); display: inline-flex; color: inherit; cursor: pointer; border-radius: var(--r-1); }

/* --- tabellen ------------------------------------------------------------ */

#skjerm-konsept .mt-tabellkort { padding: 0; overflow: hidden; margin: 0; }
#skjerm-konsept .mt-rull { overflow: auto; max-height: var(--mt-rull-h); }
#skjerm-konsept .mt-tabell { display: table; }
#skjerm-konsept .mt-hode { display: table-header-group; }
#skjerm-konsept .mt-kropp { display: table-row-group; }
#skjerm-konsept .mt-hoderad, #skjerm-konsept .mt-rad, #skjerm-konsept .mt-sum { display: table-row; }
#skjerm-konsept .mt-h, #skjerm-konsept .mt-c { display: table-cell; }
#skjerm-konsept .mt-tabell {
  border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content;
  font-size: var(--t-3); line-height: var(--t-3-h);
}
#skjerm-konsept .mt-tabell .mt-h {
  position: sticky; top: 0; z-index: 3; background: var(--flate); text-align: right; font-weight: 500;
  color: var(--ink-3); font-size: var(--t-2); line-height: var(--t-2-h); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line); white-space: nowrap; min-width: var(--mt-kol-tall); vertical-align: bottom;
}
#skjerm-konsept .mt-tabell .mt-h.mt-tekst, #skjerm-konsept .mt-tabell .mt-h.mt-navn { text-align: left; }
#skjerm-konsept .mt-tabell .mt-h.mt-tekst { min-width: var(--mt-kol-tekst); }
#skjerm-konsept .mt-tabell .mt-h[aria-sort] { color: var(--ink); }
#skjerm-konsept .mt-sortknapp {
  border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap;
}
#skjerm-konsept .mt-sortpil { display: inline-flex; width: 0; overflow: hidden; transition: width var(--tid-1) var(--kurve); }
#skjerm-konsept .mt-h[aria-sort] .mt-sortpil { width: 12px; }
#skjerm-konsept .mt-h[aria-sort="ascending"] .mt-sortpil svg { transform: rotate(180deg); }
#skjerm-konsept .mt-tabell .mt-paa {
  position: sticky; left: 0; z-index: 2; background: var(--flate); min-width: var(--mt-kol-paa); width: var(--mt-kol-paa); text-align: left;
}
#skjerm-konsept .mt-tabell .mt-navn {
  position: sticky; left: var(--mt-kol-paa); z-index: 2; background: var(--flate); min-width: var(--mt-kol-navn);
  border-right: 1px solid var(--line); text-align: left;
}
#skjerm-konsept .mt-tabell .mt-h.mt-paa, #skjerm-konsept .mt-tabell .mt-h.mt-navn { z-index: 4; }
#skjerm-konsept .mt-tabell .mt-c {
  padding: 0 var(--s-4); height: var(--mt-rad); border-bottom: 1px solid var(--line);
  text-align: right; white-space: nowrap; vertical-align: middle;
}
#skjerm-konsept .mt-tabell .mt-c.mt-tekst, #skjerm-konsept .mt-tabell .mt-c.mt-navn { text-align: left; }
#skjerm-konsept .mt-tabell .mt-c.mt-tekst small { color: var(--ink-3); font-size: var(--t-2); }
/* 1920 skal vise alle standardkolonnene uten sidelengs rulling (spes 2.12):
   tallene får smalere luft, og budsjettsetningen bryter heller enn å ta
   en hel kolonne. */
#skjerm-konsept .mt-tabell .mt-tall { padding-left: var(--s-3); padding-right: var(--s-3); }
#skjerm-konsept .mt-tabell .mt-c.mt-k-budsjett { white-space: normal; max-width: 170px; line-height: 16px; }
#skjerm-konsept .mt-tabell .mt-kropp > div:last-child > .mt-c { border-bottom: 0; }
#skjerm-konsept .mt-tabell .mt-rad { content-visibility: auto; contain-intrinsic-size: auto var(--mt-rad); }
#skjerm-konsept .mt-tabell .mt-rad:focus { outline: none; }
#skjerm-konsept .mt-tabell .mt-rad:focus-visible > .mt-c { background: var(--brand-svak); }
@media (hover: hover) { #skjerm-konsept .mt-tabell .mt-rad:hover > .mt-c { background: var(--flate-2); } }
#skjerm-konsept .mt-tabell .mt-sum > .mt-c {
  background: var(--flate-2); font-weight: 500; position: sticky; top: var(--mt-hode-h, 37px); z-index: 2;
}
#skjerm-konsept .mt-tabell .mt-sum .mt-c.mt-paa, #skjerm-konsept .mt-tabell .mt-sum .mt-c.mt-navn { z-index: 3; }
#skjerm-konsept .mt-tabell .mt-sum .mt-delta { font-weight: 400; }

#skjerm-konsept .mt-celle { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 16px; }
#skjerm-konsept .mt-verdi { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#skjerm-konsept .mt-rtype { font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
#skjerm-konsept .mt-delta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-1); line-height: 14px;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: var(--s-1);
}
#skjerm-konsept .mt-delta.mt-bedre { color: var(--gronn); }
#skjerm-konsept .mt-delta.mt-verre { color: var(--rod); }
#skjerm-konsept .mt-pilikon { width: 10px; height: 10px; }

#skjerm-konsept .mt-rad[data-dybde="2"] .mt-navn .mt-navncelle { padding-left: var(--s-6); }
#skjerm-konsept .mt-rad[data-dybde="3"] .mt-navn .mt-navncelle { padding-left: calc(var(--s-6) * 2); }
#skjerm-konsept .mt-navncelle { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
#skjerm-konsept .mt-pil {
  width: var(--mt-pil); height: var(--mt-pil); border: 0; background: none; padding: 0; display: inline-grid; place-items: center;
  color: var(--ink-3); border-radius: var(--r-1); flex: 0 0 auto; cursor: pointer;
}
#skjerm-konsept .mt-pil svg { transition: transform var(--tid-1) var(--kurve); }
#skjerm-konsept .mt-pil[aria-expanded="true"] svg { transform: rotate(90deg); }
#skjerm-konsept .mt-pil.mt-ingen { visibility: hidden; }
@media (hover: hover) { #skjerm-konsept .mt-pil:hover { background: var(--flate-3); color: var(--ink); } }
#skjerm-konsept .mt-navntekst { display: flex; flex-direction: column; min-width: 0; line-height: 16px; flex: 1; }
#skjerm-konsept .mt-navntekst b { font-weight: 500; }
#skjerm-konsept .mt-navntekst small { font-size: var(--t-1); color: var(--ink-3); display: inline-flex; align-items: center; gap: var(--s-2); }
#skjerm-konsept .mt-navnknapp, #skjerm-konsept .mt-navnord {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--ink); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--mt-navn-maks);
}
#skjerm-konsept .mt-navnknapp { cursor: pointer; }
@media (hover: hover) { #skjerm-konsept .mt-navnknapp:hover { color: var(--brand-tekst); text-decoration: underline; } }
#skjerm-konsept .mt-kontobrikke {
  display: inline-flex; align-items: center; padding: 0 var(--s-2); border-radius: var(--r-1);
  background: var(--flate-2); font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3);
}
#skjerm-konsept .mt-radlenker { display: inline-flex; align-items: center; gap: var(--s-3); opacity: 0; flex: 0 0 auto; }
#skjerm-konsept .mt-rad:hover .mt-radlenker, #skjerm-konsept .mt-rad:focus-within .mt-radlenker, #skjerm-konsept .mt-rad:focus .mt-radlenker { opacity: 1; }
#skjerm-konsept .mt-ut { color: var(--ink-3); font-size: var(--t-2); display: inline-flex; align-items: center; text-decoration: none; padding: var(--s-2); border-radius: var(--r-1); }
@media (hover: hover) { #skjerm-konsept .mt-ut:hover { color: var(--ink); background: var(--flate-3); } }

#skjerm-konsept .mt-paaav { display: inline-flex; align-items: center; }
#skjerm-konsept .mt-paaav i { width: var(--mt-bryter); height: 18px; border-radius: 999px; background: var(--line-3); position: relative; display: inline-block; }
#skjerm-konsept .mt-paaav i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: var(--mt-knott); height: var(--mt-knott); border-radius: 50%; background: var(--flate);
}
#skjerm-konsept .mt-paaav.mt-erpaa i { background: var(--gronn); }
#skjerm-konsept .mt-paaav.mt-erpaa i::after { transform: translateX(12px); }

#skjerm-konsept .mt-status { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink-2); }
#skjerm-konsept .mt-status::before { content: ""; width: var(--punkt); height: var(--punkt); border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
#skjerm-konsept .mt-status.mt-aktiv::before { background: var(--gronn); }
#skjerm-konsept .mt-status.mt-vurdering::before { background: var(--amber); }
#skjerm-konsept .mt-status.mt-avvist::before { background: var(--rod); }
#skjerm-konsept .mt-status.mt-ikke { color: var(--ink-3); }

#skjerm-konsept .mt-tom { margin: var(--s-4); }
#skjerm-konsept .mt-laster { padding: var(--s-7) var(--s-5); color: var(--ink-3); font-size: var(--t-3); text-align: center; }
#skjerm-konsept .mt-fot {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line); font-size: var(--t-2); color: var(--ink-3);
}

/* --- de flytende panelene ----------------------------------------------- */

#skjerm-konsept .mt-flyt { top: var(--mt-y, 120px); left: var(--mt-x, 16px); width: var(--mt-flyt); max-height: calc(100vh - var(--mt-y, 120px) - 16px); overflow-y: auto; padding: var(--s-2); }
#skjerm-konsept .mt-flyt.mt-bred { width: var(--mt-flyt-bred); }
#skjerm-konsept .mt-flyt.ark { top: auto; left: 0; right: 0; width: auto; max-height: 80vh; padding: var(--s-3) var(--s-3) var(--s-5); }
#skjerm-konsept .mt-flytrad {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-height: var(--mt-velger);
  border: 0; border-radius: var(--r-2); background: none; width: 100%; text-align: left; font: inherit; font-size: var(--t-3); color: var(--ink); cursor: pointer;
}
@media (hover: hover) { .mt-flytrad:hover { background: var(--flate-2); } }
#skjerm-konsept .mt-flytrad[aria-current="true"] { background: var(--brand-svak); }
#skjerm-konsept .mt-flyttekst { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 16px; }
#skjerm-konsept .mt-flyttekst small { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); }
#skjerm-konsept .mt-flythoyre { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-2); color: var(--ink); white-space: nowrap; }
#skjerm-konsept .mt-flythoyre.mt-ingenforbruk { font-family: inherit; color: var(--ink-3); }
#skjerm-konsept .mt-flytseksjon { font-size: var(--t-2); font-weight: 500; color: var(--ink-3); padding: var(--s-3) var(--s-4) var(--s-2); }
#skjerm-konsept .mt-flytnote { margin: var(--s-2) var(--s-4) var(--s-3); font-size: var(--t-2); color: var(--ink-3); }
#skjerm-konsept .mt-flyt input[type="checkbox"], #skjerm-konsept .mt-flyt input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
#skjerm-konsept .mt-kolorden { list-style: none; margin: 0; padding: 0; }
#skjerm-konsept .mt-kolflytt {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); min-height: 32px; border-radius: var(--r-2);
  font-size: var(--t-3); color: var(--ink); cursor: grab;
}
#skjerm-konsept .mt-kolflytt:focus-visible { background: var(--brand-svak); outline: none; }
@media (hover: hover) { .mt-kolflytt:hover { background: var(--flate-2); } }
#skjerm-konsept .mt-haandtak { color: var(--line-3); display: inline-flex; }
#skjerm-konsept .mt-flytknapper { display: flex; justify-content: flex-end; gap: var(--s-3); padding: var(--s-3) var(--s-2) var(--s-1); position: sticky; bottom: 0; background: var(--flate); }

#skjerm-konsept .mt-dato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
#skjerm-konsept .mt-forvalg { border-right: 1px solid var(--line); padding-right: var(--s-2); }
#skjerm-konsept .mt-datofelt { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
#skjerm-konsept .mt-inn { display: flex; gap: var(--s-3); }
#skjerm-konsept .mt-inn label { flex: 1; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-2); color: var(--ink-3); }
#skjerm-konsept .mt-inn input {
  min-height: var(--mt-velger); border: 0; border-radius: var(--r-2); background: var(--flate-2); padding: 0 var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-3); color: var(--ink); width: 100%; min-width: 0;
}
#skjerm-konsept .mt-datofeil { margin: 0; font-size: var(--t-2); color: var(--rod); }
#skjerm-konsept .mt-datofeil:empty { display: none; }
#skjerm-konsept .mt-sml { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
#skjerm-konsept .mt-sml .mt-bryter { padding: 0; justify-content: flex-start; }
#skjerm-konsept .mt-smlvalg { display: flex; flex-direction: column; gap: var(--s-2); padding-left: var(--s-7); font-size: var(--t-3); color: var(--ink-2); }
#skjerm-konsept .mt-smlvalg label { display: flex; gap: var(--s-3); align-items: center; min-height: 28px; }

@media (pointer: coarse) {
  #skjerm-konsept .mt-velger, #skjerm-konsept .mt-sok, #skjerm-konsept .mt-bryter, #skjerm-konsept .mt-flytrad, #skjerm-konsept .mt-inn input { min-height: 44px; }
  #skjerm-konsept .mt-kolflytt, #skjerm-konsept .mt-smlvalg label { min-height: 44px; }
  #skjerm-konsept .mt-pil { width: 44px; height: 44px; }
}

/* --- bredder -------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --mt-rull-h: none; }
  #skjerm-konsept .mt-rull { max-height: none; }
  #skjerm-konsept .mt-tilmeta { margin-left: 0; }
}

/* Telefon: hver rad er et kort med navnet, statusen og tre tall
   (Beløp brukt, ROAS, Kjøp). Summeringsraden er det første kortet. */
@media (max-width: 640px) {
  #skjerm-konsept .mt-verktoy { flex-wrap: nowrap; }
  #skjerm-konsept .mt-sok { flex-basis: 200px; }
  #skjerm-konsept .mt-tabell { min-width: 0; display: block; }
  #skjerm-konsept .mt-tabell .mt-hode { display: none; }
  #skjerm-konsept .mt-tabell .mt-kropp { display: block; }
  #skjerm-konsept .mt-tabell .mt-kropp > div {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1) var(--s-3);
    padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  }
  #skjerm-konsept .mt-tabell .mt-kropp > div:last-child { border-bottom: 0; }
  #skjerm-konsept .mt-tabell .mt-c { display: none; padding: 0; height: auto; border: 0; text-align: left; white-space: normal; position: static; box-shadow: none; min-width: 0; }
  #skjerm-konsept .mt-tabell .mt-c.mt-navn { display: block; grid-column: 1 / -1; background: none; }
  #skjerm-konsept .mt-tabell .mt-c.mt-k-levering { display: block; grid-column: 1 / -1; font-size: var(--t-2); background: none; }
  #skjerm-konsept .mt-tabell .mt-c.mt-k-forbruk, #skjerm-konsept .mt-tabell .mt-c.mt-k-roas, #skjerm-konsept .mt-tabell .mt-c.mt-k-kjop {
    display: flex; flex-direction: column; margin-top: var(--s-2); background: none;
  }
  #skjerm-konsept .mt-tabell .mt-c.mt-k-forbruk::before, #skjerm-konsept .mt-tabell .mt-c.mt-k-roas::before, #skjerm-konsept .mt-tabell .mt-c.mt-k-kjop::before {
    content: attr(data-etikett); font-size: var(--t-1); color: var(--ink-3); line-height: 14px;
  }
  #skjerm-konsept .mt-celle { align-items: flex-start; }
  #skjerm-konsept .mt-verdi { white-space: nowrap; font-size: var(--t-2); }
  /* Rekkefølgen på telefon er spesifikasjonens: Beløp brukt, ROAS, Kjøp,
     uansett hvilken rekkefølge kolonnene har på stor skjerm. */
  #skjerm-konsept .mt-tabell .mt-c.mt-navn { order: -2; }
  #skjerm-konsept .mt-tabell .mt-c.mt-k-levering { order: -1; }
  #skjerm-konsept .mt-tabell .mt-c.mt-k-forbruk { order: 1; }
  #skjerm-konsept .mt-tabell .mt-c.mt-k-roas { order: 2; }
  #skjerm-konsept .mt-tabell .mt-c.mt-k-kjop { order: 3; }
  #skjerm-konsept .mt-rad[data-dybde="2"] .mt-navn .mt-navncelle, #skjerm-konsept .mt-rad[data-dybde="3"] .mt-navn .mt-navncelle { padding-left: 0; }
  #skjerm-konsept .mt-tabell .mt-rad[data-dybde="2"], #skjerm-konsept .mt-tabell .mt-rad[data-dybde="3"] { background: var(--flate-2); }
  #skjerm-konsept .mt-tabell .mt-sum { background: var(--flate-2); }
  #skjerm-konsept .mt-tabell .mt-sum > .mt-c { position: static; background: none; }
  #skjerm-konsept .mt-navnknapp, #skjerm-konsept .mt-navnord { max-width: 100%; white-space: normal; }
  #skjerm-konsept .mt-radlenker { opacity: 1; }
  #skjerm-konsept .mt-radlenker .mt-ut:not([target]) { display: none; }
  #skjerm-konsept .mt-dato { grid-template-columns: minmax(0, 1fr); }
  /* Avkrysningen og valgene er 16 store, så raden rundt dem er trykkflata:
     44 høy, og nok luft til venstre til at fingeren treffer raden. */
  #skjerm-konsept .mt-kolrad, #skjerm-konsept .mt-smlvalg label { min-height: 44px; padding-left: var(--s-5); }
  #skjerm-konsept .mt-smlvalg { padding-left: var(--s-5); }
  #skjerm-konsept .mt-forvalg { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: var(--s-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #skjerm-konsept .mt-bryter i, #skjerm-konsept .mt-bryter i::after, #skjerm-konsept .mt-pil svg, #skjerm-konsept .mt-sortpil { transition: none; }
}

/* Navnene klassene bærer for prøvene og kolonnevalget, med det lille de
   trenger selv. */
#skjerm-konsept .mt-velgerord { overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
#skjerm-konsept .mt-tabell .mt-c.mt-tall { font-variant-numeric: tabular-nums; }
#skjerm-konsept .mt-kolpanel { display: flex; flex-direction: column; }
#skjerm-konsept .mt-kolrad { user-select: none; }
#skjerm-konsept .mt-hake {
  width: 16px; height: 16px; border-radius: var(--r-1); border: 1.5px solid var(--line-3); flex: 0 0 auto; position: relative;
}
#skjerm-konsept .mt-kolrad[aria-checked="true"] .mt-hake { background: var(--brand); border-color: var(--brand); }
#skjerm-konsept .mt-kolrad[aria-checked="true"] .mt-hake::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--brand-blekk); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}