/* ============================================================================
   Rekaro launch page
   ----------------------------------------------------------------------------
   Structure is carried by hairline rules and an asymmetric grid rather than by
   cards and shadows. That is a deliberate choice: a stack of rounded, shadowed,
   evenly spaced boxes is the house style of generated interfaces, and this
   product's whole claim is that it is checkable by a human.

   Every colour, space and duration below comes from tokens.css.
   ============================================================================ */

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-text);
  font-weight: var(--w-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* One focus treatment for the whole page. Visible on every control, keyboard
   only, and it never depends on colour alone. */
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 50;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--ink-inverse);
  border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus-visible { top: var(--s-4); }

/* --- page frame ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (min-width: 60rem) {
  .shell { padding-inline: var(--s-7); }
}

/* --- masthead ------------------------------------------------------------- */

/* Fast i toppen pa varje sida och i varje storlek.
 *
 * position: sticky och inte fixed: en fixed header lyfts ur floet och maste
 * kompenseras med en padding pa body som nagon glommer nar hojden andras, och
 * hojden andras redan i dag mellan telefon och skrivbord. Sticky behaller
 * platsen i floet och behover ingen kompensation.
 *
 * z-index 46 ligger over bottennaven, chattkortet och uppdateringsrutan, som
 * alla ar 40, och over menypanelen som ar 45 och dessutom ar dess eget barn.
 * Under hopplanken pa 50, som ska kunna na over allt.
 *
 * Sticky skapar ett innehallande block, sa menypanelen som ligger absolut mot
 * mastheaden pa smal skarm fortsatter hitta ratt utan sin egen position:
 * relative. Den regeln ar borttagen ur site.css av just det skalet: tva
 * positioneringsregler pa samma element ar en regel for mycket.
 */
.masthead {
  position: sticky;
  top: 0;
  z-index: 46;
  border-bottom: var(--rule-w) solid var(--rule);
  background: var(--surface);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wraps so the nav can take a row of its own on a narrow screen. See the
     note on .nav in site.css: the alternative was a second copy of the links. */
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-3);
  min-height: 4.25rem;
}

/* 72rem och inte 62rem: mastheaden behover 1150 px for att rymmas pa en rad,
   sa mellan 992 och 1149 px tvingade nowrap ut temaknappen och halva
   sprakrutan utanfor vyn, alltsa 126-150 px vagratt spill pa just de bredder
   en laptop har. Over 72rem finns marginal kvar aven nar ett menyord blir
   langre i nagot av de atta spraken. */
@media (min-width: 72rem) {
  .masthead__inner { flex-wrap: nowrap; padding-block: 0; }
}

.wordmark {
  display: block;
  height: 1.75rem;
  width: auto;
}

@media (min-width: 48rem) {
  .wordmark { height: 2rem; }
}

.masthead__controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* .langset, tre sprak som rena ord, togs bort 2026-08-30. Den stod bredvid
   .sprakvaljare i samma masthead, alltsa tva sprakvaljare intill varandra som
   sade emot varandra: knappraden bar tre sprak, rutan bredvid alla atta.
   Rutan ritas av sprakbygge.py och far ett nionde sprak automatiskt, sa den
   ar den som star kvar. Borttagningen tog ocksa 113 px ur mastheadens bredd. */

.themetoggle {
  display: grid;
  place-items: center;
  /* 44px, the WCAG 2.5.8 minimum. It was 2rem, and on every generated page this
     is the only control in the masthead. The icon inside stays at 1rem: the
     target grew, the drawing did not. */
  width: 2.75rem; height: 2.75rem;
  color: var(--ink-muted);
  /* --rule against either surface measures about 1.3:1, and this border is the
     button's entire boundary. SC 1.4.11 asks 3:1 of a control boundary. */
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.themetoggle:hover { color: var(--ink); border-color: var(--rule-strong); }
.themetoggle svg { width: 1rem; height: 1rem; }
/* The icon that matches the mode you are already in is the wrong affordance. */
.themetoggle .i-sun { display: none; }
:root[data-theme='dark'] .themetoggle .i-sun { display: block; }
:root[data-theme='dark'] .themetoggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .themetoggle .i-sun { display: block; }
  :root:not([data-theme='light']) .themetoggle .i-moon { display: none; }
}

/* --- hero ----------------------------------------------------------------- */

main { flex: 1; }

.hero {
  display: grid;
  gap: var(--s-7);
  padding-block: var(--s-7) var(--s-8);
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-9);
    align-items: start;
    padding-block: var(--s-9) var(--s-10);
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.72rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* A short ochre rule instead of a pill badge. Badges read as template. */
.eyebrow::before {
  content: '';
  width: var(--s-6);
  height: 2px;
  background: var(--mark);
  flex: none;
}

.hero__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(2.5rem, 1.35rem + 5vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* Optical sizing is why Literata is here: at display size the serifs thin out
   and the counters open, which is what keeps a 5rem headline from looking set
   in a body face. */
@supports (font-variation-settings: 'opsz' 60) {
  .hero__title { font-variation-settings: 'opsz' 60; }
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__deck {
  margin-top: var(--s-5);
  max-width: var(--measure);
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.24rem);
  line-height: 1.62;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

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

/* --- signup form ---------------------------------------------------------- */

.signup { margin-top: var(--s-7); max-width: 30rem; }

.signup__row {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 30rem) {
  .signup__row { grid-template-columns: 1fr auto; align-items: end; }
}

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

/* A toned surface with the printed rule kept as the strong bottom edge. The
   bare underline read as body text on a full page: the fill is what makes a
   field findable at a glance, the rule is what keeps it ours rather than the
   grey box every component kit ships. */
.field__input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--rule-strong);
  border-radius: 4px 4px 0 0;
  color: var(--ink);
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.field__input::placeholder { color: var(--ink-faint); }
.field__input:hover { border-bottom-color: var(--ink-muted); }
.field__input:focus {
  outline: none;
  background: var(--surface-raised, var(--surface));
  border-bottom-color: var(--accent);
}
.field__input:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}
.field__input[aria-invalid='true'] { border-bottom-color: var(--error); }
select.field__input { cursor: pointer; }
.field__input--area { resize: vertical; min-height: 6rem; }

/* Ett obligatoriskt falt bar en asterisk pa etiketten. Stjarnan ar dold for
   skarmlasare eftersom required-attributet redan lases upp, och regeln gar
   via :has sa att varje formular pa sajten far markningen utan egen markup. */
.field:has([required]) > .field__label::after,
.field:has([required]) > legend.field__label::after {
  content: ' *' / '';
  color: var(--accent);
  font-weight: var(--w-strong);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--w-strong);
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* --- button states -------------------------------------------------------- */
.btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn--loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--accent-ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn--success {
  background: var(--success);
  border-color: var(--success);
}

@media (prefers-reduced-motion: reduce) {
  .btn--loading::after { animation: none; }
}

/* --- form input states ---------------------------------------------------- */
.field__input[aria-invalid="true"] {
  border-bottom-color: var(--error);
}
.field__input[aria-invalid="true"]:focus {
  border-bottom-color: var(--error);
}
.field__input[aria-invalid="false"] {
  border-bottom-color: var(--success);
}
.field__input[aria-invalid="false"]:focus {
  border-bottom-color: var(--success);
}

/* Shake animation for invalid fields. */
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .field__input[aria-invalid="true"] {
    animation: field-shake 0.4s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .field__input[aria-invalid="true"] { animation: none; }
}

/* --- custom checkbox/radio ------------------------------------------------ */
.check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

/* --- field validation icons ----------------------------------------------- */
.field__input[aria-invalid="true"] ~ .field__icon-error,
.field__input[aria-invalid="false"] ~ .field__icon-success {
  display: inline-flex;
}
.field__icon-error,
.field__icon-success {
  display: none;
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}
.field__icon-error { color: var(--error); }
.field__icon-success { color: var(--success); }

/* Make field wrapper relative for icon positioning. */
.field { position: relative; }
/* --- provenance badges ---------------------------------------------------- */
.provenance-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15em 0.55em;
  font-size: 0.68rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  line-height: 1;
  vertical-align: 0.08em;
}
.provenance-badge--1 { background: var(--badge-1); color: var(--prov-1); }
.provenance-badge--2 { background: var(--badge-2); color: var(--prov-2); }
.provenance-badge--3 { background: var(--badge-3); color: var(--prov-3); }
.provenance-badge--4 { background: var(--badge-4); color: var(--prov-4); }
.provenance-badge--5 {
  background: var(--badge-5);
  color: var(--prov-5);
  border: 1px dashed var(--prov-5);
}

/* --- verification badge --------------------------------------------------- */
.verification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex: none;
}
.verification-badge svg {
  width: 100%;
  height: 100%;
}
.verification-badge--check { color: var(--success); }
.verification-badge--ring {
  border: 2px solid var(--prov-3);
  border-radius: 50%;
}

/* --- citation marker ------------------------------------------------------ */
.citation-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  height: 1.2em;
  padding: 0 0.25em;
  font-size: 0.62rem;
  font-weight: var(--w-strong);
  line-height: 1;
  color: var(--ink-secondary);
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: 50%;
  vertical-align: super;
  cursor: default;
}
/* --- filter pill ---------------------------------------------------------- */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.6em 0.25em 0.5em;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-pill);
  cursor: default;
}
.filter-pill__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  padding: 0;
  margin-left: 0.15em;
  background: none;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.filter-pill__x:hover { background: var(--rule); color: var(--ink); }

/* --- search page polish --------------------------------------------------- */
/* Active filter pills row. */
.sok__filterrad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.sok__filterrad:empty { display: none; }

/* Results hover elevation. */
.traff {
  transition: background var(--t-fast) var(--ease);
}
.traff:hover {
  background: var(--surface-sunk);
}

/* Placement badge on result rows. */
.traff__plats {
  display: inline-block;
  padding: 0.1em 0.4em;
  font-size: 0.62rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--prov-1);
  background: var(--badge-1);
  border-radius: var(--r-sm);
  margin-left: var(--s-2);
  vertical-align: 0.1em;
}

/* "Visa fler" button. */
.sok__fler {
  margin-top: var(--s-5);
  text-align: center;
}
.sok__fler .btn {
  min-width: 10rem;
}

/* Quota display for anonymous users. */
.sok__kvot-anon {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-sm);
  text-align: center;
}
.sok__kvot-anon p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}
.sok__kvot-anon a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.signup__consent {
  margin-top: var(--s-4);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.signup__consent a { color: var(--ink-secondary); text-underline-offset: 2px; }
.signup__consent a:hover { color: var(--accent); }

/* Live region. Reserves no space until it has something to say. */
.signup__status { margin-top: var(--s-4); font-size: 0.9rem; }
/* Not display:none. A live region removed from the accessibility tree cannot
   announce the thing that just put text into it: the node appears and is
   populated in the same frame, and the announcement is dropped. Collapsing the
   margin gets the same layout without ever taking the region out of the tree. */
.signup__status:empty { margin-top: 0; }
.signup__status:focus { outline: none; }
.signup__status[data-state='error'] { color: var(--error); }
.signup__status[data-state='ok'] {
  padding-top: var(--s-3);
  border-top: var(--rule-w) solid var(--rule);
  color: var(--accent);
}

/* Bot trap. Off-screen rather than display:none, because some fillers skip
   hidden fields. Real people never reach it; it is not focusable or announced. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

/* --- register panel ------------------------------------------------------- */

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

@media (min-width: 62rem) {
  .register { margin-top: var(--s-2); }
}

.register__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
}

.register__title {
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
}

.register__meta {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.register__list { list-style: none; padding: 0; }

.register__row {
  padding-block: var(--s-4);
  border-top: var(--rule-w) solid var(--rule);
}


.register__name {
  font-weight: var(--w-medium);
  line-height: 1.4;
}

.register__note {
  margin-top: var(--s-1);
  font-size: 0.86rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.register__state {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: 0.7rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
  padding: 0.15rem var(--s-2);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--r-sm);
}
.register__state[data-state='building'] {
  color: var(--accent);
  border-color: var(--accent);
}

/* --- icons ---------------------------------------------------------------- */

/* The sprite is inlined into the document rather than referenced as a file.
   An external SVG cannot see the page's custom properties, so the one ochre
   mark in each icon would fall back to nothing. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.register__row-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.register__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--ink-muted);
  transform: translateY(0.18rem);
}

/* --- provenance chain ----------------------------------------------------- */

.chain {
  margin: 0;
  padding-block: var(--s-6) var(--s-8);
  border-top: var(--rule-w) solid var(--rule);
}

.chain__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 70rem;
  margin-inline: auto;
  overflow: visible;
}

.chain__label {
  font-family: var(--f-text);
  font-size: 15px;
  font-weight: var(--w-strong);
  fill: var(--ink);
  letter-spacing: 0.01em;
}

.chain__meta {
  font-family: var(--f-text);
  font-size: 12.5px;
  fill: var(--ink-faint);
}

/* One orchestrated entry, then it stops. The trace draws left to right so the
   eye follows the claim in the headline: rating, verification, source. Nothing
   here loops, pulses or floats. */
@media (prefers-reduced-motion: no-preference) {
  .chain__line {
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: draw 380ms var(--ease) both;
  }
  .chain__line--2 { animation-delay: 520ms; }

  .chain__arrow path { opacity: 0; animation: fade 200ms var(--ease) both; }
  .chain__arrow path:first-child { animation-delay: 380ms; }
  .chain__arrow path:last-child { animation-delay: 900ms; }

  .chain__node { opacity: 0; animation: rise 300ms var(--ease) both; }
  .chain__node[data-step='2'] { animation-delay: 420ms; }
  .chain__node[data-step='3'] { animation-delay: 940ms; }

  .chain__check {
    stroke-dasharray: 46;
    stroke-dashoffset: 46;
    animation: draw 260ms var(--ease) both;
    animation-delay: 700ms;
  }

  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }
}

/* Without motion the finished picture renders immediately. Same image, no
   drawing. Nothing is hidden from anyone who cannot see the animation. */
@media (prefers-reduced-motion: reduce) {
  .chain__line, .chain__check { stroke-dashoffset: 0; }
  .chain__node, .chain__arrow path { opacity: 1; }
}

@media (max-width: 46rem) {
  /* Three cards side by side stop being readable well before the viewport
     runs out, so below this the chain is replaced by the list it describes. */
  .chain { display: none; }
}

/* --- team ----------------------------------------------------------------- */

.team {
  border-top: var(--rule-w) solid var(--rule);
  padding-block: var(--s-7);
}

.team__title {
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.team__founders {
  list-style: none;
  padding: 0;
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 40rem) {
  .team__founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

.team__name {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.team__role {
  margin-top: var(--s-1);
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.team__figures {
  margin: var(--s-7) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--rule-w) solid var(--rule);
}

.figure {
  padding-top: var(--s-4);
  padding-right: var(--s-4);
}
.figure + .figure {
  padding-left: var(--s-4);
  border-left: var(--rule-w) solid var(--rule);
}

/* Label above value. A count is only meaningful once you know what is being
   counted, and reading order should match that. */
.figure__label {
  font-size: 0.7rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.figure__value {
  margin: var(--s-2) 0 0;
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- colophon ------------------------------------------------------------- */

.colophon {
  border-top: var(--rule-w) solid var(--rule);
  background: var(--surface-sunk);
  padding-block: var(--s-6);
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.colophon__grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 48rem) {
  .colophon__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .colophon__grid--two { grid-template-columns: repeat(2, minmax(0, 24rem)); }
}

.colophon__label {
  font-size: 0.7rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin-bottom: var(--s-2);
}

.colophon p + p { margin-top: var(--s-1); }
.colophon a { color: var(--ink-secondary); text-underline-offset: 2px; }
.colophon a:hover { color: var(--accent); }

.colophon__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--rule-w) solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* --- error pages --------------------------------------------------------- */

/* One large mark, in ochre, above the message. An error page with nothing on it
   but grey text reads as a dead end; an icon that names the failure gives the
   eye somewhere to land before the sentence. */
.errpage__icon {
  width: 3.25rem;
  height: 3.25rem;
  color: var(--mark);
  margin-bottom: var(--s-5);
}

@media (prefers-reduced-motion: no-preference) {
  .errpage__icon { animation: rise 320ms var(--ease) both; }
}

/* --- offline ------------------------------------------------------------- */

.offline {
  flex: 1;
  display: grid;
  place-content: center;
  padding-block: var(--s-9);
}

.offline__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.offline__body {
  margin-top: var(--s-4);
  max-width: 32rem;
  color: var(--ink-secondary);
}
.offline__body--alt { color: var(--ink-muted); font-size: 0.92rem; }

.offline__retry { margin-top: var(--s-6); justify-self: start; text-decoration: none; }

/* --- entrance ------------------------------------------------------------- */

/* One short rise, staggered by a few frames so the eye lands on the headline
   first. Nothing loops, nothing floats, nothing glows. */
/* The stagger is a class rather than an inline custom property, because the
   page ships a strict Content-Security-Policy and style-src 'self' blocks style
   attributes outright. Loosening the policy to keep five inline declarations
   would be the wrong trade. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise var(--t-slow) var(--ease) both;
  }
  .rise--2 { animation-delay: 60ms; }
  .rise--3 { animation-delay: 120ms; }
  .rise--4 { animation-delay: 150ms; }
  .rise--5 { animation-delay: 200ms; }
  .rise--6 { animation-delay: 260ms; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- hero sourcing figure -------------------------------------------------- */

/* Replaces the register panel in the hero's right column. It shows the product
   doing its job rather than illustrating around it: a need, a field of
   candidates, and a ranked shortlist with the reason for each rank visible.
   Density is the point, a buyer reads it as competence, but every mark is a
   hairline, a tabular number or a bar. Nothing glows, nothing floats, and the
   whole sequence plays once. */

.sourcing { margin: 0; }
.sourcing__svg { display: block; width: 100%; height: auto; overflow: visible; }

.src__label {
  font-family: var(--f-text); font-size: 11px; font-weight: 620;
  letter-spacing: 0.1em; fill: var(--ink-muted); text-transform: none;
}
.src__need-text { font-family: var(--f-text); font-size: 14.5px; fill: var(--ink); }
.src__meta { font-family: var(--f-text); font-size: 11px; fill: var(--ink-faint);
             font-variant-numeric: tabular-nums; }
.src__dot { fill: var(--rule-strong); }
.src__name { font-family: var(--f-text); font-size: 14px; font-weight: 500; fill: var(--ink); }
.src__sub  { font-family: var(--f-text); font-size: 11.5px; fill: var(--ink-faint); }
.src__score {
  font-family: var(--f-display); font-size: 17px; fill: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  /* The field settles first, then a single pass of the scan line, then the
     shortlist resolves. One sequence, about 1.6s, then it is a static diagram. */
  .src__need { opacity: 0; animation: rise 320ms var(--ease) both; }

  /* Delays as nth-child buckets rather than an inline custom property. The
     page ships style-src 'self', which blocks style attributes outright, and
     loosening the policy for 50 timing values would be the wrong trade. */
  .src__dot { opacity: 0; animation: dot 260ms var(--ease) both; }
  .src__dot:nth-child(12n+1) { animation-delay: 40ms; }
  .src__dot:nth-child(12n+2) { animation-delay: 62ms; }
  .src__dot:nth-child(12n+3) { animation-delay: 84ms; }
  .src__dot:nth-child(12n+4) { animation-delay: 106ms; }
  .src__dot:nth-child(12n+5) { animation-delay: 128ms; }
  .src__dot:nth-child(12n+6) { animation-delay: 150ms; }
  .src__dot:nth-child(12n+7) { animation-delay: 172ms; }
  .src__dot:nth-child(12n+8) { animation-delay: 194ms; }
  .src__dot:nth-child(12n+9) { animation-delay: 216ms; }
  .src__dot:nth-child(12n+10) { animation-delay: 238ms; }
  .src__dot:nth-child(12n+11) { animation-delay: 260ms; }
  .src__dot:nth-child(12n+12) { animation-delay: 282ms; }
  @keyframes dot { to { opacity: 1; } }

  .src__scanline {
    opacity: 0;
    animation: scan 620ms var(--ease) 420ms both;
  }
  @keyframes scan {
    0%   { opacity: 0; transform: translateY(0); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(84px); }
  }

  /* Dots the scan has passed fade back, so the field visibly narrows rather
     than just sitting there. */
  .src__dots { animation: dim 400ms var(--ease) 900ms both; }
  @keyframes dim { to { opacity: 0.35; } }

  .src__list { opacity: 0; animation: rise 300ms var(--ease) 860ms both; }

  .src__row { opacity: 0; animation: rise 300ms var(--ease) both; }
  .src__bar { transform-origin: 428px 0; animation: grow 420ms var(--ease) both; }
  .src__row:nth-of-type(1) { animation-delay: 900ms; }
  .src__row:nth-of-type(1) .src__bar { animation-delay: 1020ms; }
  .src__row:nth-of-type(2) { animation-delay: 1010ms; }
  .src__row:nth-of-type(2) .src__bar { animation-delay: 1130ms; }
  .src__row:nth-of-type(3) { animation-delay: 1120ms; }
  .src__row:nth-of-type(3) .src__bar { animation-delay: 1240ms; }
  .src__row:nth-of-type(4) { animation-delay: 1230ms; }
  .src__row:nth-of-type(4) .src__bar { animation-delay: 1350ms; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .src__need, .src__dot, .src__list, .src__row { opacity: 1; }
  .src__dots { opacity: 0.35; }
  .src__scanline { opacity: 0; }
}

/* The cutoff was 62rem, which took the densest figure on the site off every
   tablet and every laptop window under 992px. In the single-column layout the
   figure simply drops full width under the hero copy and is perfectly legible
   there. It goes at 46rem, the width where its own 14px labels stop being
   readable rather than merely small, which is the same place .chain gives up. */
@media (max-width: 46rem) { .sourcing { display: none; } }


/* --- reduced motion, the part the keyframe gates miss ---------------------- */

/* Every animation on this site is declared inside a
   prefers-reduced-motion: no-preference block, which is the right way round.
   Transitions are not, and they are motion too: the skip link slides down, the
   inputs move their underline colour, and .btn:active translates the button a
   pixel on every press. Rather than adding a query to each one, this is the
   backstop. Durations go to near-zero instead of zero so transitionend and
   animationend still fire and no script waiting on them hangs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* The skip link moves the scroll position but not the focus in Safari and
   Firefox unless the target can hold it, so the next Tab goes back to the
   masthead and the link achieves nothing for the visitors it exists for. */
main:focus { outline: none; }

/* --- Grupperad meny ------------------------------------------------------ */
/* En grupp ar en details-meny: fungerar utan JavaScript, och site.js later
   hogst en sta oppen at gangen. Undermenyn ligger pa ett kort under sitt
   toppval, sa toppraden haller sig kort oavsett hur manga sidor sajten far. */
.nav__grupp { position: relative; display: inline-block; }
.nav__grupp > summary { list-style: none; cursor: pointer; }
.nav__grupp > summary::-webkit-details-marker { display: none; }
.nav__grupp > summary::after { content: ""; display: inline-block;
  width: 0.42em; height: 0.42em; margin-left: 0.35em; vertical-align: 0.12em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 140ms ease; }
.nav__grupp[open] > summary::after { transform: rotate(225deg); vertical-align: -0.1em; }
.nav__meny { position: absolute; left: 0; top: calc(100% + 0.4rem);
  min-width: 13rem; padding: 0.4rem; z-index: 30;
  background: var(--surface-raised, var(--surface));
  border: var(--rule-w) solid var(--rule); border-radius: 4px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.12);
  display: flex; flex-direction: column; }
.nav__menyval { display: block; padding: 0.45rem 0.7rem; border-radius: 3px;
  text-decoration: none; color: var(--ink-secondary); font-size: 0.92rem; }
.nav__menyval:hover { background: var(--surface-sunk); color: var(--ink); }
.nav__menyval.nav__link--on { color: var(--ink); font-weight: 600; }
/* Skapa konto-lanken stylas i site.css, inte har: .masthead__konto satter
   padding och min-width dar, och site.css laddas sist. En kopia har hade sett
   ut att galla utan att gora det. */
.masthead__konto { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .nav__grupp > summary::after { transition: none; }
}

/* --- Hjaltebandet --------------------------------------------------------- */
/* Ett brett foto under sidhuvudet, fore titeln. Hojden ar klampt sa bandet
   ar en anslagsbild och inte en vagg: besokaren ska se titeln utan att rulla.
   Bilderna ar var egna CC0/PD-pool, sa ingen kallrad behovs. */
.sidbild { max-width: 100%; overflow: hidden; }
.sidbild .foto { margin: 0; }
.sidbild__foto, .sidbild img { display: block; width: 100%;
  height: clamp(230px, 34vw, 460px); object-fit: cover; }

/* --- CTA-lyftet 2026-08-28 ---------------------------------------------- */
/* Primarknappen far tyngd och ett riktigt fokus- och aktivlage. Skuggan ar
   fargad av accenten sa knappen ser tryckbar ut aven pa morka ytor, och
   hover lyfter den en pixel i stallet for att bara byta fargton. */
.btn {
  box-shadow: 0 2px 10px color-mix(in oklab, var(--accent) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 70%, var(--ink) 30%);
}
.btn:hover { transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 45%, transparent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 4px
  color-mix(in oklab, var(--accent) 30%, transparent); }
.btn--ghost { background: transparent; color: var(--ink);
  border: var(--rule-w) solid var(--rule-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--surface-sunk); transform: none;
  box-shadow: none; border-color: var(--accent); }

/* Undermenyens lankar: samma typografi som toppvalen, med luft och en tydlig
   aktiv rad. Ett kort dar raderna ser ut som brodtext laser som ofardig. */
.nav__meny { min-width: 15rem; padding: 0.5rem; gap: 0.1rem;
  border-top: 3px solid var(--accent); }
.nav__menyval { font-size: 0.95rem; padding: 0.55rem 0.8rem;
  line-height: 1.35; transition: background 120ms ease, color 120ms ease,
  padding-left 120ms ease; }
.nav__menyval:hover { padding-left: 1rem; }
.nav__menyval.nav__link--on { background: var(--surface-sunk); }

/* Undermenyn faller in mjukt nar gruppen oppnas. En meny som bara dyker upp
   pa plats laser som ett fel snarare an ett val. */
@media (prefers-reduced-motion: no-preference) {
  .nav__grupp[open] > .nav__meny { animation: menyfall 160ms ease; }
}
@keyframes menyfall {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- skelton loader ------------------------------------------------------- */
.skeleton { display: grid; gap: var(--s-5); }
.skeleton__card,
.skeleton__row,
.skeleton__cell {
  background: var(--skeleton);
  border-radius: var(--r-sm);
  min-height: 1rem;
}
.skeleton__card { height: 8rem; }
.skeleton__row { height: 3.5rem; }
.skeleton__cell { height: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .skeleton__card,
  .skeleton__row,
  .skeleton__cell {
    animation: skeleton-pulse 1.8s var(--ease) infinite;
  }
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton__card,
  .skeleton__row,
  .skeleton__cell { animation: none; opacity: 0.6; }
}

/* --- empty state ---------------------------------------------------------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-5);
  text-align: center;
}
.empty-state__icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--ink-muted);
  opacity: 0.55;
}
.empty-state__text {
  max-width: 24rem;
  font-size: 0.95rem;
  color: var(--ink-secondary);
  line-height: 1.6;
}
.empty-state__cta { justify-self: center; }

/* --- 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); }

/* --- 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);
}
.stepped__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); }

/* --- dashboard card ------------------------------------------------------- */
.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;
}

/* Pa skarmar utan hovring maste varje knapp balla ett fingermal. */
@media (hover: none) {
  .btn { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: none; }
  .nav__menyval, .nav__menyval:hover { transition: none; padding-left: 0.8rem; }
  .nav__grupp[open] > .nav__meny { animation: none; }
}

/* --- Bottennavigeringen -------------------------------------------------- */
/* Pa telefon och platta flyttar menyn till botten, som i en app. Fem val,
   fast panel, safe-area-marginal for hem-indikatorn, och innehallet far
   luft i botten sa panelen aldrig tacker sista stycket. Pa skrivbord ar
   den borta och toppmenyn galler. */
.bottnav { display: none; }
@media (max-width: 52rem) {
  .nav { display: none; }
  .bottnav { position: fixed; inset: auto 0 0 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface-raised, var(--surface));
    border-top: var(--rule-w) solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 24px rgb(0 0 0 / 0.10); }
  .bottnav__val { display: flex; flex-direction: column; align-items: center;
    gap: 0.15rem; padding: 0.5rem 0.25rem 0.55rem; text-decoration: none;
    color: var(--ink-secondary); font-size: 0.68rem; letter-spacing: 0.01em; }
  .bottnav__val svg { width: 22px; height: 22px; }
  .bottnav__val--on { color: var(--accent); }
  .bottnav__val--on span { font-weight: 600; }
  .bottnav__val:active svg { transform: scale(0.92); }
  body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
  /* Chattens flytande knapp krockar annars med panelen. */
  /* Bottennaven har ett eget RISTOO-val som oppnar panelen, sa den flytande
     knappen goms har i stallet for att ligga ovanpa menyn. Panelen sjalv
     lyfts ovanfor navhojd nar den ar oppen. */
  .asst__open { display: none !important; }
  .asst__panel { bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bottnav__val:active svg { transform: none; }
}

/* Stegvisa formular: raknaren mellan knapparna, och luft runt raden. */
.steg__rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.steg__lage {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.steg__rad .btn { width: auto; }
.steg__tillbaka[hidden], .steg__nasta[hidden] { display: none; }

/* --- Hamburgermenyn 2026-08-28 ------------------------------------------- */
/*
 * Mobilen har bada delarna med flit: bottennaven bar de fem handlingarna en
 * telefon anvander oftast, och burgaren bar hela menytradet for det som ligger
 * djupare. En bottennav ensam gomde halva sajten bakom foterns lankar.
 *
 * Knappen levereras med hidden i markupen och avslojas av site.js. Utan
 * JavaScript finns alltsa ingen knapp som inte gor nagot, och navigeringen gar
 * via bottennaven och foten, som bada ar ren markup.
 */
.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--r-sm);
  order: 3;
}
.burger__strecken { display: grid; gap: 5px; width: 1.15rem; }
.burger__strecken span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded='true'] .burger__strecken span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded='true'] .burger__strecken span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__strecken span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 61.999rem) {
  .burger:not([hidden]) { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .burger__strecken span { transition: none; }
}

/* --- familjevaxlaren ------------------------------------------------------ */

/* Loggan och oppnaren sitter ihop, panelen ankras mot mastheaden. Mastheaden
 * ar sticky och darmed panelens innehallande block, sa panelen borjar exakt
 * dar sidhuvudet slutar: inget glapp, alltsa ingen mouseleave-falla pa vagen
 * ner. Stangningens nadatid ligger i familj.js, aldrig har.
 */
.familj {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

.familj__hem { display: block; }

.familj__oppnare {
  display: grid;
  place-items: center;
  /* 44px at hallen, WCAG 2.5.8: pa touch ar knappen enda vagen in. */
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink-muted);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease);
}
.familj__oppnare:hover { color: var(--ink); }
.familj__oppnare svg { width: 0.65rem; height: auto; transform-origin: center; transition: transform var(--t-fast) var(--ease); }
.familj--oppen .familj__oppnare { color: var(--ink); }
.familj--oppen .familj__oppnare svg { transform: rotate(180deg); }

.familj__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 45;
  background: var(--surface);
  border-bottom: var(--rule-w) solid var(--rule);
  max-height: calc(100dvh - 4.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Egen display-regel pa en [hidden]-yta ar receptet pa "visa fem" som visar
 * alla sjuttiofyra. Garden star har sa att den inte kan glommas. */
.familj__panel[hidden] { display: none !important; }

.familj__innehall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5) var(--s-6);
  padding-block: var(--s-5) var(--s-6);
}
@media (min-width: 40rem) {
  .familj__innehall { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 62rem) {
  /* Fyra grupper, fyra spalter, i registerordningen: egna gruppen forst,
   * karnan bredast, inkubatorn och programmen smalast. */
  .familj__innehall { grid-template-columns: 1.1fr 1.3fr 1.1fr 0.9fr; }
}

.familj__etikett {
  margin: 0 0 var(--s-2);
  padding-inline: var(--s-2);
  font-size: 0.72rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.familj__rad {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease);
}
a.familj__rad:hover { background: var(--surface-sunk); }

.familj__glyf {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  color: var(--ink-muted);
}
a.familj__rad:hover .familj__glyf { color: var(--mark); }

.familj__text { display: block; min-width: 0; }

.familj__namn {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--w-medium);
  line-height: 1.35;
}

.familj__kort {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* Utan lank ar raden en etikett: samma form, lugnare farg, ingen hover.
 * Den ljuger aldrig om att vara klickbar. */
.familj__rad--stum { cursor: default; }
.familj__rad--stum .familj__namn { color: var(--ink-muted); }

.familj__rad--extern .familj__namn::after {
  content: "\2197";
  margin-left: 0.35em;
  font-size: 0.78em;
  color: var(--ink-muted);
}

.familj__chip {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: 999px;
  vertical-align: 0.12em;
}

@media (prefers-reduced-motion: reduce) {
  .familj__oppnare, .familj__oppnare svg, .familj__rad { transition: none; }
}

/* Raden som sager att falten kom fran assistenten. Den maste lasas som en
   upplysning och inte som en bekraftelse: den som ser den ska forsta att
   ingenting ar utlagt an. Accentlinjen till vanster och inte en ram runt
   hela, eftersom en inramad ruta hogst upp i ett formular laser som ett
   kvitto pa nagot som redan hant. */
.uppdragsform__forifylld {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: var(--rule-w) solid var(--accent);
  background: var(--surface-sunk);
  color: var(--ink-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}