/* ============================================================================
   The signed-in surface
   ----------------------------------------------------------------------------
   Loaded only by the pages under /konto. Everything here resolves to a token
   from tokens.css, and no component below invents a second button: the primary
   action is .btn from styles.css, and every secondary or destructive action is
   a link-shaped control, .konto__lank, so nothing on the page competes with the
   one thing the visitor came to do.

   Two rules from the site's Content-Security-Policy shape this file.

   `style-src 'self'` blocks the style attribute outright, so nothing here can
   be set from JavaScript as an inline declaration. Both meters are therefore
   driven by data attributes the client writes, and the widths live below as
   attribute selectors. A generator emits data-fyllnad="65", never a style.

   `img-src 'self'` does not cover data:, which is why the QR code is drawn as
   SVG elements rather than encoded into an image. See the note by .qr.
   ============================================================================ */

/* The UA rule for [hidden] is display:none at the lowest possible weight, and
   any class below that sets display beats it. A panel that stays visible while
   empty is the failure that produced this line. */
[hidden] { display: none !important; }

/* --- panels ---------------------------------------------------------------- */

.konto__panel {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}

.konto__panel:first-of-type { margin-top: var(--s-6); }

.konto__rubrik {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.konto__underrubrik {
  margin-top: var(--s-5);
  font-size: 1rem;
  font-weight: var(--w-strong);
}

.konto__brod {
  margin-top: var(--s-3);
  max-width: 44rem;
  color: var(--ink-secondary);
  line-height: 1.65;
}
.konto__brod a { color: var(--accent); text-underline-offset: 2px; }

.konto__not {
  margin-top: var(--s-3);
  max-width: 44rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.konto__not:empty { margin-top: 0; }
.konto__not a { color: var(--accent); }

.konto__knapprad {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
}

/* Loading state. Not a spinner: a spinner says something is happening and
   nothing else, and this line has to survive being the only thing on the page
   when the service is down. */
.konto__laddar {
  margin-top: var(--s-6);
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.konto__noscript {
  margin-top: var(--s-6);
  padding: var(--s-4);
  border-left: 2px solid var(--mark);
  background: var(--surface-sunk);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}
.konto__noscript a { color: var(--accent); }

/* The plan lock. Ochre rather than red: a plan that does not carry a capability
   is not an error, and colouring it as one reads as a fault in the account. */
.konto__planlas { border-top-color: var(--mark); }

/* --- the link-shaped control ----------------------------------------------- */

/* Used for logging out, for removing a member and for dropping a watch. It is
   a button element, because it acts rather than navigates, and it is styled as
   a link so the page keeps exactly one button weight. */
.konto__lank {
  padding: var(--s-2) 0;
  color: var(--accent);
  font-size: 0.94rem;
  font-weight: var(--w-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.konto__lank:hover { color: var(--accent-hover); }
.konto__lank--fara { color: var(--error); }
.konto__lank[disabled] { color: var(--ink-faint); cursor: not-allowed; }

/* --- the identity block ---------------------------------------------------- */

.konto__data { margin-top: var(--s-4); }

.konto__rad {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: var(--rule-w) solid var(--rule);
}

@media (min-width: 40rem) {
  .konto__rad {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--s-4);
    align-items: baseline;
  }
}

.konto__rad dt {
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.konto__rad dd {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* A slot the service had nothing for. Dashes are not allowed anywhere on this
   site, so the client writes the word Saknas and this only keeps it quiet. */
.konto__rad dd:empty::after { content: 'Saknas'; color: var(--ink-faint); }

.konto__plan {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-size: 1.6rem;
}

.konto__formagor {
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

.konto__formagor li {
  padding: var(--s-1) var(--s-3);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  color: var(--ink-secondary);
}

/* --- quotas ---------------------------------------------------------------- */

.konto__kvoter { margin-top: var(--s-4); }

.konto__kvot {
  margin-top: var(--s-3);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}

.konto__kvotrad { padding-block: var(--s-4); border-bottom: var(--rule-w) solid var(--rule); }
.konto__kvotrad dt { font-size: 0.9rem; font-weight: var(--w-strong); }
.konto__kvotrad dd { margin-top: var(--s-2); font-size: 0.86rem; color: var(--ink-muted);
                     font-variant-numeric: tabular-nums; }

/* The bar. Width comes from data-fyllnad in five point steps, which is the
   resolution a 20 rem bar can actually show. */
.matare { margin-top: var(--s-3); max-width: 26rem; }

.matare__spar {
  height: 6px;
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.matare__fyll {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--t-slow) var(--ease);
}

/* Past the limit the bar turns to the mark colour rather than to red. Being at
   the top of a quota is a fact about the plan, not a fault. */
.matare[data-over='true'] .matare__fyll { background: var(--mark); }

.matare[data-fyllnad='0'] .matare__fyll { width: 0; }
.matare[data-fyllnad='5'] .matare__fyll { width: 5%; }
.matare[data-fyllnad='10'] .matare__fyll { width: 10%; }
.matare[data-fyllnad='15'] .matare__fyll { width: 15%; }
.matare[data-fyllnad='20'] .matare__fyll { width: 20%; }
.matare[data-fyllnad='25'] .matare__fyll { width: 25%; }
.matare[data-fyllnad='30'] .matare__fyll { width: 30%; }
.matare[data-fyllnad='35'] .matare__fyll { width: 35%; }
.matare[data-fyllnad='40'] .matare__fyll { width: 40%; }
.matare[data-fyllnad='45'] .matare__fyll { width: 45%; }
.matare[data-fyllnad='50'] .matare__fyll { width: 50%; }
.matare[data-fyllnad='55'] .matare__fyll { width: 55%; }
.matare[data-fyllnad='60'] .matare__fyll { width: 60%; }
.matare[data-fyllnad='65'] .matare__fyll { width: 65%; }
.matare[data-fyllnad='70'] .matare__fyll { width: 70%; }
.matare[data-fyllnad='75'] .matare__fyll { width: 75%; }
.matare[data-fyllnad='80'] .matare__fyll { width: 80%; }
.matare[data-fyllnad='85'] .matare__fyll { width: 85%; }
.matare[data-fyllnad='90'] .matare__fyll { width: 90%; }
.matare[data-fyllnad='95'] .matare__fyll { width: 95%; }
.matare[data-fyllnad='100'] .matare__fyll { width: 100%; }

/* --- the password strength meter ------------------------------------------- */

/* Four steps, and they measure what accounts/server.py measures. Step 1 is a
   password the service will refuse; the wording under the bar is the service's
   own sentence, so nothing new can appear at submit. */
.styrka { margin-top: var(--s-3); max-width: 26rem; }

.styrka__spar {
  height: 4px;
  background: var(--surface-sunk);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.styrka__fyll {
  height: 100%;
  width: 0;
  background: var(--rule-strong);
  transition: width var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.styrka__ord { margin-top: var(--s-2); font-size: 0.84rem; color: var(--ink-muted); }
.styrka__ord:empty { margin-top: 0; }

.styrka[data-styrka='0'] .styrka__fyll { width: 0; }
.styrka[data-styrka='1'] .styrka__fyll { width: 25%; background: var(--error); }
.styrka[data-styrka='2'] .styrka__fyll { width: 55%; background: var(--mark); }
.styrka[data-styrka='3'] .styrka__fyll { width: 80%; background: var(--accent); }
.styrka[data-styrka='4'] .styrka__fyll { width: 100%; background: var(--accent); }

.styrka[data-styrka='1'] + .field__err,
.styrka[data-styrka='1'] ~ .styrka__ord { color: var(--error); }

/* --- lists ----------------------------------------------------------------- */

.konto__lista { margin-top: var(--s-4); padding: 0; list-style: none; }

.konto__post {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--s-3);
  border-bottom: var(--rule-w) solid var(--rule);
}

.konto__post-namn { font-weight: var(--w-medium); color: var(--ink); }
.konto__post-meta {
  font-size: 0.84rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.konto__snabb { margin-top: var(--s-4); padding: 0; list-style: none; }
.konto__snabb li { padding-block: var(--s-3); border-bottom: var(--rule-w) solid var(--rule); }
.konto__snabb a { color: var(--accent); text-underline-offset: 3px; }

.konto__steg { margin-top: var(--s-4); padding-left: var(--s-5); color: var(--ink-secondary);
               line-height: 1.65; }
.konto__steg li { margin-top: var(--s-2); }

/* --- backup codes ---------------------------------------------------------- */

.konto__koder { margin-top: var(--s-5); }

.konto__kodlista {
  margin-top: var(--s-4);
  padding: var(--s-4);
  list-style: none;
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  display: grid;
  gap: var(--s-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

@media (min-width: 34rem) {
  .konto__kodlista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.konto__hemlighet {
  margin-top: var(--s-4);
  font-size: 0.9rem;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}
.konto__hemlighet code { letter-spacing: 0.08em; }

/* --- the TOTP code --------------------------------------------------------- */

/* Drawn as SVG rectangles by konto.js. Not an image and not a third party:
   `img-src 'self'` does not cover the data: scheme, so a data URI would be
   blocked outright, and a hosted QR service would hand the shared secret to
   somebody else in a query string.

   The two colours are literals rather than tokens, and that is deliberate. In
   dark mode --ink is near white on a dark ground, which produces an inverted
   code, and a large share of phone cameras refuse to read one. The code stays
   dark on light in both themes; the frame around it carries the theme. */
.qr {
  margin-top: var(--s-5);
  display: inline-block;
  padding: var(--s-3);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: #ffffff;
}

.qr__svg { width: 13rem; height: 13rem; max-width: 100%; }
.qr__bg { fill: #ffffff; }
.qr__mod { fill: #000000; }

/* --- the event log --------------------------------------------------------- */

/* The table scrolls inside its own box. A page that scrolls sideways on a phone
   because of one wide column takes the whole layout with it. */
.konto__tabellyta { margin-top: var(--s-6); overflow-x: auto; }

.konto__tabell {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.konto__tabellrubrik {
  padding-bottom: var(--s-3);
  text-align: left;
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.konto__tabell th {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  text-align: left;
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--ink);
}

.konto__tabell td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: var(--rule-w) solid var(--rule);
  color: var(--ink-secondary);
  vertical-align: top;
}

.konto__tabell td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- forms ----------------------------------------------------------------- */

.konto__form { margin-top: var(--s-5); }

/* The failure that belongs to no single field, above the form where the eye
   already is after a submit. Empty it reserves nothing, and it never leaves the
   accessibility tree, for the same reason .signup__status does not. */
.orderform__fel {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--error);
  max-width: 40rem;
}
.orderform__fel:not(:empty) {
  margin-bottom: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--error);
}
.orderform__fel a { color: var(--error); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .matare__fyll, .styrka__fyll { transition: none; }
}

/* --- register search -------------------------------------------------------
   The results list on /sok. It reuses .field, .field__input, .field__label and
   .btn from styles.css rather than growing a second set: two button styles on
   one site is how a design system starts drifting, and this page is the newest
   one so it is the one that has to conform.

   The row is a grid rather than flex because the four filters must line up in a
   column on a phone without the free-text field shrinking to nothing. */
.sok__rad {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
  gap: var(--s-4);
  align-items: end;
  margin-top: var(--s-5);
}
@media (max-width: 52rem) {
  .sok__rad { grid-template-columns: 1fr 1fr; }
  .sok__rad .field:first-child { grid-column: 1 / -1; }
  .sok__rad .btn { grid-column: 1 / -1; justify-self: start; }
}
.sok__status {
  margin-top: var(--s-4);
  font-size: 0.9rem;
  color: var(--ink-muted);
  /* Reserve the line. Without a min-height the whole results list jumps by one
     line the moment the first status text lands, on every single search. */
  min-height: 1.4em;
}

.sok__ordning {
  margin-top: var(--s-6);
  padding: var(--s-4);
  border-inline-start: 2px solid var(--mark);
  background: var(--surface-sunk);
}
.sok__ordningtxt {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}
.sok__ordningtxt + .sok__ordningtxt { margin-top: var(--s-2); }

.sok__lista { margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.traff {
  padding: var(--s-5) 0;
  border-top: var(--rule-w) solid var(--rule);
}
.traff:last-child { border-bottom: var(--rule-w) solid var(--rule); }
.traff__namn {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight: var(--w-display);
}
.traff__namn a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.traff__namn a:hover { color: var(--accent); }
.traff__meta {
  margin: var(--s-2) 0 0;
  font-size: 0.84rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.traff__text {
  margin: var(--s-3) 0 0;
  max-width: var(--measure);
  font-size: 0.94rem;
  color: var(--ink-secondary);
}
.traff__certs { margin: var(--s-2) 0 0; font-size: 0.84rem; color: var(--ink-muted); }
/* A contested field is the one thing on a result row a buyer must not miss, so
   it carries the ochre and not the muted grey the rest of the metadata uses. */
.traff__konflikt {
  margin: var(--s-3) 0 0;
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--mark);
  font-size: 0.86rem;
  color: var(--ink-secondary);
}

.sok__tom, .sok__kvot { margin-top: var(--s-6); max-width: var(--measure); }
.sok__tom { color: var(--ink-secondary); }
.sok__kvot {
  padding-top: var(--s-4);
  border-top: var(--rule-w) solid var(--rule);
}
.sok__kvottxt { margin: 0; font-size: 0.86rem; color: var(--ink-muted); }
.sok__kvottxt + .sok__kvottxt { margin-top: var(--s-2); }

/* --- uppdrag ---------------------------------------------------------------
   Listan, raderna, anbuden och notiserna. Reusar .field, .btn och .prose__h2
   från styles.css och site.css: en femte knappstil på samma sajt är hur ett
   designsystem slutar vara ett. */
.uppdrag__flikar {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-5);
  border-bottom: var(--rule-w) solid var(--rule);
}
.uppdrag__flik {
  padding: var(--s-3) 0;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.uppdrag__flik[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--mark); }
.uppdrag__flik:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.uppdrag__flik[hidden] { display: none; }

.uppdrag__status { min-height: 1.4em; margin-top: var(--s-4);
                   font-size: 0.9rem; color: var(--ink-muted); }
.uppdrag__lista, .uppdrag__anbud, .uppdrag__fragor, .uppdrag__notiser {
  margin: var(--s-5) 0 0; padding: 0; list-style: none;
}
.uppdrag__kriterier { margin: var(--s-4) 0 0; padding-inline-start: var(--s-6); }
.uppdrag__kriterier li { margin-bottom: var(--s-2); }

.uppdragsrad { padding: var(--s-5) 0; border-top: var(--rule-w) solid var(--rule); }
.uppdragsrad:last-child { border-bottom: var(--rule-w) solid var(--rule); }
.uppdragsrad__titel { margin: 0; font-family: var(--f-display);
                      font-size: 1.15rem; font-weight: var(--w-display); }
.uppdragsrad__titel a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.uppdragsrad__titel a:hover { color: var(--accent); }
.uppdragsrad__meta { margin: var(--s-2) 0 0; font-size: 0.84rem;
                     color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Fristen står för sig. Den är den enda uppgiften på raden som ändrar vad
   läsaren gör härnäst, och tre dagar kvar är en annan sak än trettio. */
.uppdragsrad__frist { margin: var(--s-2) 0 0; font-size: 0.86rem;
                      color: var(--ink-secondary); }
.uppdragsrad__frist--nara { color: var(--mark); font-weight: var(--w-medium); }
.uppdragsrad__tillstand { margin: var(--s-2) 0 0; font-size: 0.8rem;
                          letter-spacing: 0.06em; text-transform: uppercase;
                          color: var(--ink-muted); }

.uppdrag__block { margin-top: var(--s-8); }
.uppdrag__block[hidden] { display: none; }
.uppdrag__text { margin-top: var(--s-4); max-width: var(--measure); }
.uppdrag__text p { margin: 0 0 var(--s-4); }

.anbudsrad { padding: var(--s-5); margin-bottom: var(--s-4);
             background: var(--surface-sunk);
             border: var(--rule-w) solid var(--rule); border-radius: var(--r-sm); }
.anbudsrad__namn { margin: 0; font-weight: var(--w-strong); }
.anbudsrad__meta { margin: var(--s-2) 0 0; font-size: 0.84rem;
                   color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.anbudsrad__text { margin: var(--s-3) 0 0; max-width: var(--measure);
                   white-space: pre-wrap; }
.anbudsrad__kontakt { margin: var(--s-3) 0 0; font-size: 0.88rem;
                      color: var(--accent); }
.btn--liten { margin-top: var(--s-4); padding: var(--s-2) var(--s-4);
              font-size: 0.88rem; }

.fragarad { padding: var(--s-4) 0; border-top: var(--rule-w) solid var(--rule); }
.fragarad__namn { margin: 0; font-size: 0.82rem; color: var(--ink-muted); }
.fragarad__text { margin: var(--s-2) 0 0; max-width: var(--measure);
                  white-space: pre-wrap; }

.notisrad { padding: var(--s-4) 0; border-top: var(--rule-w) solid var(--rule); }
/* Oläst markeras med ockra och inte med fetstil. Fetstil på en hel rad läser som
   en rubrik, och listan har redan rubriker. */
.notisrad--olast { border-inline-start: 2px solid var(--mark);
                   padding-inline-start: var(--s-4); }
.notisrad__titel { margin: 0; font-weight: var(--w-medium); }
.notisrad__text { margin: var(--s-2) 0 0; font-size: 0.92rem;
                  color: var(--ink-secondary); }
.notisrad__tid { margin: var(--s-2) 0 0; font-size: 0.8rem; color: var(--ink-muted); }

.uppdragsform__par { display: grid; grid-template-columns: 1fr 1fr;
                     gap: var(--s-5); }
@media (max-width: 40rem) { .uppdragsform__par { grid-template-columns: 1fr; } }
.uppdrag__cta { margin-top: var(--s-7); }
.uppdrag__tom { margin-top: var(--s-6); max-width: var(--measure);
                color: var(--ink-secondary); }
/* Honungsfällan. Utanför skärmen och utanför tabbordningen, aldrig display:none:
   en del botar hoppar över dolda fält, och då fångar fällan ingenting. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- agenter ---------------------------------------------------------------
   Gränsrutan under instruktionsfältet. Ockra och inte rött: det är inte en
   varning om att något är fel, det är en beskrivning av vad fältet gör. Rött
   hade läst som ett fel i det man just skrivit. */
.agentgrans {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--surface-sunk);
  border-inline-start: 2px solid var(--mark);
  border-radius: var(--r-sm);
}
.agentgrans__rubrik {
  margin: 0 0 var(--s-3);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mark);
}
.agentgrans__lista { margin: 0; padding-inline-start: var(--s-5);
                     font-size: 0.9rem; color: var(--ink-secondary); }
.agentgrans__lista li { margin-bottom: var(--s-2); }
.agentgrans__not { margin: var(--s-4) 0 0; font-size: 0.86rem;
                   color: var(--ink-muted); }
.agentmark {
  display: inline-block;
  padding: 0.1em 0.5em;
  vertical-align: 0.15em;
  background: var(--mark-soft);
  border-radius: var(--r-sm);
  font-family: var(--f-text);
  font-size: 0.7rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mark);
}
/* Ta bort är destruktivt och ska inte se ut som Ändra. Konturform och inte
   fylld: den fyllda knappen är sidans primära handling, och att ta bort något
   är aldrig det. */
.btn--fara {
  margin-inline-start: var(--s-3);
  background: none;
  color: var(--error);
  border: var(--rule-w) solid var(--error);
}
.btn--fara:hover { background: var(--error); color: var(--surface); }

/* --- förbrukning -----------------------------------------------------------
   Kort och inte en tabell. Ett tal av ett tak är två tal och en andel, och en
   stapel läser det snabbare än en rad gör. */
.anv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.anv__kort {
  padding: var(--s-5);
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-sm);
}
.anv__rubrik {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.anv__varde {
  margin: var(--s-3) 0 0;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: var(--w-display);
  font-variant-numeric: tabular-nums;
}
.anv__not { margin: var(--s-3) 0 0; font-size: 0.84rem; color: var(--ink-muted); }
.anv__matare {
  margin-top: var(--s-4);
  height: 4px;
  background: var(--rule);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.anv__fyll { height: 100%; background: var(--accent); border-radius: var(--r-pill); }
/* Bredden som attributselektorer i steg om fem procent. style-src 'self'
   blockerar style-attributet, så en inline-bredd hade tyst släppts på golvet och
   varje mätare hade sett tom ut. Tjugoen regler i stället för hundra: ingen ser
   skillnad på 63 och 65 procent i en fyra pixlar hög stapel. */
.anv__fyll[data-andel="0"]   { width: 0; }
.anv__fyll[data-andel="5"]   { width: 5%; }
.anv__fyll[data-andel="10"]  { width: 10%; }
.anv__fyll[data-andel="15"]  { width: 15%; }
.anv__fyll[data-andel="20"]  { width: 20%; }
.anv__fyll[data-andel="25"]  { width: 25%; }
.anv__fyll[data-andel="30"]  { width: 30%; }
.anv__fyll[data-andel="35"]  { width: 35%; }
.anv__fyll[data-andel="40"]  { width: 40%; }
.anv__fyll[data-andel="45"]  { width: 45%; }
.anv__fyll[data-andel="50"]  { width: 50%; }
.anv__fyll[data-andel="55"]  { width: 55%; }
.anv__fyll[data-andel="60"]  { width: 60%; }
.anv__fyll[data-andel="65"]  { width: 65%; }
.anv__fyll[data-andel="70"]  { width: 70%; }
.anv__fyll[data-andel="75"]  { width: 75%; }
.anv__fyll[data-andel="80"]  { width: 80%; }
.anv__fyll[data-andel="85"]  { width: 85%; }
.anv__fyll[data-andel="90"]  { width: 90%; background: var(--mark); }
.anv__fyll[data-andel="95"]  { width: 95%; background: var(--mark); }
.anv__fyll[data-andel="100"] { width: 100%; background: var(--error); }

/* --- hjälpguiden ------------------------------------------------------------ */
.hjalp__grind {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
}
.hjalp__vem { margin: 0; font-size: 0.86rem; color: var(--ink-secondary); }
.hjalp__innehall { margin-top: var(--s-6); }
.hjalp__innehall ol { margin: 0; padding-inline-start: var(--s-6); columns: 2;
                      column-gap: var(--s-7); }
.hjalp__innehall li { margin-bottom: var(--s-2); break-inside: avoid; }
@media (max-width: 40rem) { .hjalp__innehall ol { columns: 1; } }
.hjalp__avsnitt[hidden] { display: none; }
/* Ett avsnitt man ser men inte har. Ockra och dämpat: det är inte ett fel, det
   är något som finns bakom en annan plan. */
.hjalp__avsnitt--utanfor {
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--mark);
  opacity: 0.72;
}
.hjalp__avsnitt--utanfor::before {
  content: "Ingår inte i din behörighet";
  display: block;
  margin-bottom: var(--s-2);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mark);
}

/* Sidan av bordet. Tre kort i stället för en hopfälld lista: valet avgör hela
   ytan, och ett stängt fält som visar en av tre möjligheter döljer att det
   finns ett val att göra. */
.val { margin: 0; padding: 0; border: 0; }
.val > .field__label { padding: 0; }
.val__rad { position: relative; margin-top: var(--s-2); }
.val__radio {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: var(--s-4);
  margin: 0;
  accent-color: var(--accent);
}
.val__etikett {
  display: block;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.val__namn { display: block; font-weight: 600; }
.val__not {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.86rem;
  color: var(--ink-secondary);
}
.val__radio:checked + .val__etikett {
  border-color: var(--accent);
  background: var(--surface-raised);
}
/* Fokusringen sitter på inputen, som är en punkt i hörnet. Den flyttas till
   kortet, annars ser en tangentbordsanvändare en ring runt ingenting. */
.val__radio:focus-visible + .val__etikett {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- jämförelsen ---------------------------------------------------------- */
.jamfor__form { margin-top: var(--s-5); }
.jamfor__forslag, .jamfor__valda { margin: var(--s-2) 0 0; padding: 0;
                                   list-style: none; }
.jamfor__forslagsrad { margin-top: var(--s-1); display: flex; gap: var(--s-3);
                       align-items: baseline; }
.jamfor__lagg {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}
.jamfor__lagg:hover:not(:disabled) { border-color: var(--accent); }
.jamfor__lagg:disabled { opacity: 0.45; cursor: default; }
.jamfor__redan, .jamfor__intet, .jamfor__skal {
  font-size: 0.8rem; color: var(--ink-faint);
}
.jamfor__vald {
  margin-top: var(--s-2);
  display: flex; gap: var(--s-3); align-items: baseline;
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--s-3);
}
.jamfor__valdnamn { font-weight: var(--w-strong); font-size: 0.92rem; }
.jamfor__bort {
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem;
  color: var(--ink-faint); text-decoration: underline; cursor: pointer;
}
.vikt { margin-top: var(--s-6); border: 0; padding: 0; }
.vikt__rad {
  margin-top: var(--s-3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-3);
  align-items: center;
}
@media (min-width: 40rem) {
  .vikt__rad { grid-template-columns: 14rem 1fr 3rem; }
}
.vikt__label { font-size: 0.9rem; }
.vikt__reglage { width: 100%; accent-color: var(--accent); }
.vikt__varde { font-variant-numeric: tabular-nums; font-size: 0.86rem;
               color: var(--ink-secondary); text-align: right; }
.jamfor__knapprad { margin-top: var(--s-4); }
.jamfor__resultat { margin-top: var(--s-7); border-top: 2px solid var(--ink);
                    padding-top: var(--s-5); }
.jamfor__rekommendation { margin-top: var(--s-3); font-size: 1.02rem;
                          line-height: 1.6; }
.jamfor__forbehall { margin: var(--s-3) 0 0; padding-inline-start: var(--s-5);
                     font-size: 0.88rem; color: var(--ink-secondary);
                     line-height: 1.6; }
.jamfor__forbehallsrad { margin-top: var(--s-2); }
.jamfor__tabellyta { margin-top: var(--s-5); overflow-x: auto; }
.jamfor__tabell { width: 100%; border-collapse: collapse; font-size: 0.88rem;
                  min-width: 40rem; }
.jamfor__tabell caption { text-align: left; padding-bottom: var(--s-3);
                          font-size: 0.82rem; color: var(--ink-faint); }
.jamfor__tabell th, .jamfor__tabell td {
  text-align: left; vertical-align: top;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.jamfor__tabell thead th { border-bottom: 2px solid var(--ink); }
.jamfor__kalla { display: block; margin-top: var(--s-1); font-size: 0.75rem;
                 font-weight: 400; color: var(--ink-faint); }
.jamfor__ravarde { display: block; font-variant-numeric: tabular-nums;
                   font-size: 1rem; }
.jamfor__bidrag { display: block; font-size: 0.78rem; color: var(--accent); }
.jamfor__saknas { color: var(--ink-faint); }
.jamfor__skal { display: block; margin-top: var(--s-1); max-width: 16rem;
                line-height: 1.45; }
.jamfor__total th, .jamfor__total td { border-top: 2px solid var(--ink);
                                       border-bottom: 0; }
.jamfor__poang { display: block; font-family: var(--f-display);
                 font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.jamfor__plats, .jamfor__tackning, .jamfor__delta {
  display: block; font-size: 0.78rem; color: var(--ink-faint);
}
.jamfor__delta { color: var(--accent); }
.jamfor__regel { margin-top: var(--s-3); font-size: 0.86rem;
                 color: var(--ink-secondary); line-height: 1.65;
                 max-width: 44rem; }