/* ============================================================================
   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);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
[data-konto] .btn, [data-konto] .btn:hover, [data-konto] .btn:active { box-shadow: none; }

/* 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);
}
.orderform__fel a { color: var(--error); text-underline-offset: 3px; }

/* The drawing explains the kind of interruption. The live region carries the
   actual service message, with the next action alongside it. */
.konto__notice {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  max-width: 46rem;
  padding-block: var(--s-4);
  border-block: 1px solid var(--rule-strong);
  color: var(--ink-secondary);
  font-size: 0.94rem;
  line-height: 1.6;
}
.konto__notice-art { display: block; }
.konto__notice-art svg { display: block; width: 100%; height: auto; }
.konto__notice-copy { min-width: 0; overflow-wrap: anywhere; }
.konto__notice-title { display: block; margin-bottom: var(--s-2); color: var(--ink); font-weight: 600; }
.konto__notice-detail { display: block; }
.konto__notice a { color: var(--accent); text-underline-offset: 3px; }
.konto__onboarding { max-width: 48rem; }
.konto__identity { margin-block: var(--s-5); padding-block: var(--s-4); border-block: 1px solid var(--rule); }
.konto__identity-label { color: var(--ink-muted); font-size: 0.85rem; }
.konto__identity-address { margin-top: var(--s-1); color: var(--ink); font-size: 1.08rem; overflow-wrap: anywhere; }
.konto__identity .konto__brod { overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .konto__notice { grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--s-3); align-items: start; }
}

@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,
.uppdrag__matchningar {
  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; }

.matchningar__status { min-height: 1.4em; margin: var(--s-4) 0 0;
                       font-size: 0.88rem; color: var(--ink-muted); }
.matchrad { padding: var(--s-5) 0; border-top: var(--rule-w) solid var(--rule); }
.matchrad:last-child { border-bottom: var(--rule-w) solid var(--rule); }
.matchrad__namn { margin: 0; font-weight: var(--w-strong); }
.matchrad__skal, .matchrad__matt { margin: var(--s-2) 0 0;
                                  font-size: 0.84rem; color: var(--ink-muted); }
.matchrad__text { margin: var(--s-3) 0 0; max-width: var(--measure); }

.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; }

/* --- Lanseringspolering 2026-08-28 --------------------------------------- */
/*
 * Kontoflodena var vansterstallda blanketter i ett stort tomrum. Nu ar de ett
 * centrerat kort: max en lasbredd brett, med ram, rundning och upphojd yta,
 * sa att inloggningen ser ut som en produkt och inte som ett formularprov.
 * Reglerna ligger har och inte i styles.css eftersom bara kontosidorna
 * laddar konto.css, och en kortlayout pa /priser vore fel.
 */
.konto__panel {
  margin: var(--s-6) auto 0;
  max-width: 42rem;
  padding: var(--s-5) 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page__title { text-align: center; }
.page .eyebrow, .page__deck { text-align: center; }
.konto__panel .field { margin-top: var(--s-4); }
.konto__panel .btn { width: 100%; margin-top: var(--s-4); }
.konto__lankar, .konto__panel > p:last-child { text-align: center; }
/* Tva-faktor- och bekraftelsestegen ar samma kort, inte nya avsnitt. */
[data-steg="tvafaktor"], [data-panel="obekraftad"] {
  margin: var(--s-5) auto 0; max-width: 27rem;
}
@media (max-width: 30rem) {
  .konto__panel { padding: var(--s-4); border-radius: 0;
    border-left: none; border-right: none; box-shadow: none; }
}

/* Scenen: illustrationen bredvid flodet pa bred skarm, ovanfor pa smal.
   Bilden ar dekor och far aldrig trycka ner formularet under vecket pa en
   telefon, darfor ar den strypt i hojd dar. */
.konto__scen { display: grid; gap: var(--s-6); }
.konto__bild { display: flex; justify-content: center; }
.konto__bild svg { width: 100%; max-width: 30rem; height: auto; }
@media (max-width: 63.999rem) {
  .konto__bild svg { max-height: 13rem; }
}
@media (min-width: 64rem) {
  .konto__scen { grid-template-columns: 1fr 30rem; gap: var(--s-8);
    align-items: center; }
  .konto__bild { order: 0; }
  .konto__flode { order: 1; }
  .konto__bild svg { max-width: 34rem; }
}

/* Flodets formular far samma kort som panelerna, sa att inloggningen och
   registreringen ser ut som en produktyta och inte en blankett i ett tomrum. */
.konto__flode > div > .orderform,
.konto__flode > .orderform,
[data-workspace] [data-konto] .konto__form {
  margin: var(--s-5) auto 0;
  max-width: 42rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
[data-konto="registrera"] .konto__flode > .orderform { max-width: 32rem; }
.konto__flode .orderform .btn { width: 100%; }
.konto__flode > .konto__brod { text-align: center; }
@media (max-width: 30rem) {
  .konto__flode > div > .orderform, .konto__flode > .orderform {
    padding: 0; border-radius: 0;
    border-left: none; border-right: none; box-shadow: none; }
  .konto__scen .konto__bild { display: none; }
}

/* Raden som forklarar asterisken. En markning utan forklaring ar en gata. */
.orderform__oblig {
  margin: 0 0 var(--s-2);
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.orderform__oblig span { color: var(--accent); font-weight: var(--w-strong); }

/* === Den inloggade vyn, andra utformningen ===============================
   Skriven 2026-08-31. Den forsta var ett formular: en smal kolumn, en panel
   under den andra, och uppgifterna i en definitionslista som laste som en
   utskrift. Den bar innehallet men den sade ingenting om att man kommit in.

   Tre andringar, i den ordning de syns:

   1. Ytan blir bredare an en formularkolumn nar det finns plats. Ett konto
      med bevakningar, team och handelser ar ett arbetsbord och inte ett
      kvitto.
   2. Korten far djup och en egen rorelse in. Rorelsen ar forskjuten per kort,
      sa ytan byggs upp i stallet for att slas pa.
   3. Foretagsnamnet star overst i egen ratt. Det ar det forsta som sager
      "det har ar ditt".

   Djupet ar skuggor och en tvagradig lyftning vid hover, inte en 3D-scen. En
   perspective-transform pa text ger suddiga bokstaver pa varje skarm utan hog
   pixeltathet, och ett konto man laser i ar fel plats att kopa effekt for
   laslighet.

   Allt rorligt ligger bakom prefers-reduced-motion. */

@media (min-width: 64rem) {
  /* Overblicken far bredden. De ovriga kontosidorna ar formular och behaller
     sin smala kolumn, dar radlangden ar det som styr. */
  /* Behallaren ar [data-lage="inloggad"] och inte .konto__flode: den senare
     finns pa formularsidorna, inte pa oversikten, sa regeln traffade
     ingenting och korten stod kvar i en kolumn. */
  [data-konto="oversikt"] [data-lage="inloggad"] {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
  }
  [data-konto="oversikt"] [data-lage="inloggad"] > .konto__hej {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  [data-konto="oversikt"] .konto__panel { margin-inline: 0; max-width: none; }
  /* Vem du ar tar hela raden: den bar foretagsnamnet och ska inte trangas. */
  [data-konto="oversikt"] .konto__panel:first-of-type { grid-column: 1 / -1; }
}

[data-konto="oversikt"] .konto__panel {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 1px 2px rgb(0 0 0 / 0.06),
    0 12px 32px rgb(0 0 0 / 0.10);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Tva grader lyft. Mer an sa borjar kortet sväva och ytan blir orolig att
     lasa i, vilket ar motsatsen till vad ett konto ska vara. */
  [data-konto="oversikt"] .konto__panel:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.07),
      0 2px 4px rgb(0 0 0 / 0.07),
      0 20px 48px rgb(0 0 0 / 0.16);
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-konto="oversikt"] .konto__panel {
    animation: konto-in var(--t-slow) var(--ease) both;
  }
  /* Forskjutningen ar liten. Ett halvt sekunds vantan pa det tredje kortet
     ar en animation som borjar kosta tid i stallet for att ge form. */
  [data-konto="oversikt"] .konto__panel:nth-of-type(2) { animation-delay: 60ms; }
  [data-konto="oversikt"] .konto__panel:nth-of-type(3) { animation-delay: 120ms; }
  [data-konto="oversikt"] .konto__panel:nth-of-type(4) { animation-delay: 180ms; }
  [data-konto="oversikt"] .konto__panel:nth-of-type(n+5) { animation-delay: 240ms; }
}
@keyframes konto-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Foretagsnamnet overst, sa sidan borjar med vems konto det ar. */
.konto__hej {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
}
.konto__hej[hidden] { display: none; }
.konto__hej-etikett {
  font-size: 0.68rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.konto__hej-namn {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  line-height: 1.15;
  /* Namnet kommer ur registret och kan vara langt. Bryt mellan ord, aldrig
     mitt i ett: "Investerard emo AB" laste som en trasig sida. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Uppgiftsraderna: vardet ska inte brytas mitt i ett ord heller. */
.konto__rad dd {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 40rem) {
  [data-konto="oversikt"] .konto__rad {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  }
}

/* --- adminytan ----------------------------------------------------------- */

.konto__vantar { list-style: none; margin: var(--s-4) 0 0; padding: 0;
                 display: grid; gap: var(--s-3); }
.konto__vantar-rad {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: var(--rule-w) solid var(--rule);
  border-radius: 8px;
  background: var(--surface-sunk);
}
.konto__vantar-namn { font-weight: var(--w-strong); overflow-wrap: break-word; }
.konto__vantar-meta { font-size: 0.82rem; color: var(--ink-muted);
                      overflow-wrap: break-word; }
.konto__vantar-knappar { display: flex; gap: var(--s-2); margin-top: var(--s-2);
                         flex-wrap: wrap; }
.konto__vantar-knappar .btn { width: auto; margin-top: 0; }

/* --- GADDR-inloggningen -------------------------------------------------- */
.konto__gaddr { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.btn--gaddr {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  background: var(--ink);
  color: var(--ink-inverse);
  border-color: var(--ink);
}
.btn--gaddr:hover { background: var(--ink-secondary); }
.konto__gaddr-not { font-size: 0.8rem; line-height: 1.45; color: var(--ink-muted); }

/* Avdelaren mellan de tva vagarna in. En linje med ett ord i, sa att
   losenordsformularet inte laser som ett andra forsok. */
.konto__eller {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.konto__eller::before, .konto__eller::after {
  content: "";
  flex: 1;
  height: var(--rule-w);
  background: var(--rule);
}

/* --- dashboard cards ------------------------------------------------------- */
.dashboard-card {
  padding: var(--s-5);
  background: var(--surface-raised);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-md);
}
.dashboard-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ink-muted);
  margin-bottom: var(--s-3);
}
.dashboard-card__title {
  font-size: 0.72rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dashboard-card__value {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: var(--w-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dashboard-card__action {
  margin-top: var(--s-3);
  font-size: 0.88rem;
}
.dashboard-card__action a {
  color: var(--accent);
  text-underline-offset: 2px;
}

/* --- quota meter ---------------------------------------------------------- */
.quota-meter {
  max-width: 20rem;
}
.quota-meter__track {
  height: 6px;
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.quota-meter__fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease);
}
.quota-meter__fill--warn { background: var(--mark); }
.quota-meter__fill--over { background: var(--error); }

/* --- agent cards ---------------------------------------------------------- */
.agent-card {
  padding: var(--s-4);
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-sm);
}
.agent-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.agent-card__name {
  font-weight: var(--w-strong);
  font-size: 0.95rem;
}
.agent-card__badges {
  display: flex;
  gap: var(--s-2);
}
.agent-card__badge {
  display: inline-block;
  padding: 0.1em 0.4em;
  font-size: 0.68rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--surface-raised);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-sm);
}
.agent-card__test {
  margin-top: var(--s-3);
  font-size: 0.88rem;
}
.agent-card__test a {
  color: var(--accent);
  text-underline-offset: 2px;
}

/* --- success toast -------------------------------------------------------- */
.toast {
  position: fixed;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 50;
  padding: var(--s-3) var(--s-4);
  background: var(--success);
  color: var(--surface);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: var(--w-medium);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
  animation: toast-in var(--t-base) var(--ease) both;
}
.toast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* --- stepped form --------------------------------------------------------- */
.stepped {
  counter-reset: steg;
}
.stepped__step {
  display: none;
}
.stepped__step--active {
  display: block;
}
.stepped__progress {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

/* --- uppdrag polish ------------------------------------------------------- */
/* Tab underline animation. */
.uppdrag__flik {
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .uppdrag__flik::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mark);
    transform: scaleX(0);
    transition: transform var(--t-base) var(--ease);
  }
  .uppdrag__flik[aria-selected="true"]::after {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .uppdrag__flik::after { display: none; }
}

/* Role badges. */
.uppdrag__roll {
  display: inline-block;
  padding: 0.1em 0.5em;
  font-size: 0.68rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  margin-left: var(--s-2);
}
.uppdrag__roll--kopare {
  color: var(--prov-1);
  background: var(--badge-1);
}
.uppdrag__roll--leverantor {
  color: var(--prov-2);
  background: var(--badge-2);
}
.uppdrag__roll--besokare {
  color: var(--ink-muted);
  background: var(--surface-sunk);
}

/* Timeline visual for /uppdrag/visa. */
.uppdrag__timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: var(--s-5) 0;
  padding: var(--s-4) 0;
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
  overflow-x: auto;
}
.uppdrag__timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-width: 6rem;
  text-align: center;
}
.uppdrag__timeline-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  display: grid;
  place-items: center;
}
.uppdrag__timeline-dot--klar {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.uppdrag__timeline-dot--aktiv {
  background: var(--mark);
  border-color: var(--mark);
  color: var(--surface);
}
.uppdrag__timeline-label {
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  color: var(--ink-muted);
}
.uppdrag__timeline-step--aktiv .uppdrag__timeline-label {
  color: var(--ink);
}
.uppdrag__timeline-line {
  flex: 1;
  height: var(--rule-w);
  background: var(--rule);
  min-width: 2rem;
}
.uppdrag__timeline-line--klar {
  background: var(--accent);
}

/* Stepped create form. */
.uppdrag__steg {
  counter-reset: steg;
}
.uppdrag__steg-panel {
  display: none;
}
.uppdrag__steg-panel--aktiv {
  display: block;
}
.uppdrag__steg-progress {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.stepped__dot {
  width: 2rem;
  height: 0.25rem;
  background: var(--rule);
  border-radius: var(--r-pill);
  transition: background var(--t-base) var(--ease);
}
.uppdrag__steg-dot {
  width: 2rem;
  height: 0.25rem;
  background: var(--rule);
  border-radius: var(--r-pill);
  transition: background var(--t-base) var(--ease);
}
.stepped__dot--done { background: var(--accent); }
.stepped__dot--active { background: var(--mark); }
.uppdrag__steg-dot--klar { background: var(--accent); }
.uppdrag__steg-dot--aktiv { background: var(--mark); }