/* Ræder& utviklingsportal – designsystem (ds).
   Byggeklossene bruker bare verdiene i :root nedenfor. Se docs/DESIGNSYSTEM_PLAN_V1.md.
   Brytningspunkter (kan ikke være variabler i media queries):
   mobil ≤ 700px, nettbrett 701–1239px, PC ≥ 1240px. */

.hidden, [hidden] { display: none !important; }

@layer ds {
  :root {
    --ds-canvas: #fdfaf4;
    --ds-paper: #ffffff;
    --ds-ink: #171517;
    --ds-text: #302d30;
    --ds-muted: #5d585d;
    --ds-placeholder: #6e696e;
    --ds-line: #ebe8e4;
    --ds-line-strong: #d6d2cc;
    --ds-wash: #f7f5f2;
    --ds-next: #fff2ef;
    --ds-next-ink: #8a3a3a;
    --ds-next-accent: #ffa6a6;
    --ds-done: #3f7a4a;
    --ds-danger: #8b2424;
    --ds-on-ink: #ffffff;

    --ds-font-display: "p22-mackinac-pro", Georgia, serif;
    --ds-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --ds-title-page: 400 36px/1.15 var(--ds-font-display);
    --ds-title-object: 400 34px/1.15 var(--ds-font-display);
    --ds-title-section: 400 24px/1.2 var(--ds-font-display);
    --ds-question: 600 16px/1.4 var(--ds-font-body);
    --ds-body: 400 16px/1.55 var(--ds-font-body);
    --ds-support: 400 15px/1.5 var(--ds-font-body);
    --ds-label: 600 13px/1.35 var(--ds-font-body);

    --ds-space-4: 4px;
    --ds-space-8: 8px;
    --ds-space-12: 12px;
    --ds-space-16: 16px;
    --ds-space-20: 20px;
    --ds-space-24: 24px;
    --ds-space-32: 32px;
    --ds-space-40: 40px;
    --ds-space-56: 56px;

    --ds-radius-field: 6px;
    --ds-radius: 8px;
    --ds-radius-pill: 999px;
    --ds-shadow-sheet: 0 1px 2px rgba(30, 25, 28, .04), 0 10px 30px rgba(30, 25, 28, .05);
    --ds-focus-ring: 0 0 0 3px rgba(23, 21, 23, .14);

    --ds-target: 40px;
    --ds-width-content: 1272px;
    --ds-width-read: 760px;
    --ds-width-list: 280px;
  }

  @media (max-width: 700px) {
    :root {
      --ds-title-page: 400 28px/1.15 var(--ds-font-display);
      --ds-title-object: 400 24px/1.2 var(--ds-font-display);
    }
  }

  :where([class^="ds-"], [class*=" ds-"]) {
    box-sizing: border-box;
    letter-spacing: normal;
    text-transform: none;
  }

  :where([class^="ds-"], [class*=" ds-"])[hidden] { display: none !important; }

  :where([class^="ds-"], [class*=" ds-"]):focus-visible {
    outline: 2px solid var(--ds-ink);
    outline-offset: 2px;
  }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    min-height: 100vh;
    color: var(--ds-text);
    background: var(--ds-canvas);
    font-family: var(--ds-font-body);
    font: var(--ds-body);
    -webkit-font-smoothing: antialiased;
  }
  *, *::before, *::after { box-sizing: border-box; }
  a { color: inherit; }
  button, input, textarea, select { font: inherit; }
  button { cursor: pointer; }
  button, a { -webkit-tap-highlight-color: transparent; }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .hidden-editor { display: none !important; }

  /* Skall */
  body:has(.ds-shell:not(.hidden)) { background: var(--ds-canvas); }
  .ds-shell {
    position: relative;
    display: block;
    min-height: 100vh;
    background: var(--ds-canvas);
    font-family: var(--ds-font-body);
  }
  .ds-workspace { position: relative; z-index: 1; min-width: 0; max-width: 100%; }
  .ds-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-space-24);
    width: 100%;
    min-height: 118px;
    margin: 0;
    padding: var(--ds-space-24) max(var(--ds-space-24), calc((100vw - 1320px) / 2 + 24px));
    background: transparent;
  }
  .ds-topline-copy { display: grid; gap: 4px; min-width: 0; max-width: 760px; }
  .ds-topline .ds-object-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .ds-topline-title {
    margin: 0;
    color: var(--ds-ink);
    font-family: var(--ds-font-display);
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.05;
  }
  .ds-topline-lead {
    max-width: 680px;
    margin: 6px 0 0;
    color: var(--ds-muted);
    font: var(--ds-body);
  }
  .ds-topline-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ds-space-8); }
  .ds-topline-actions:empty, #view-kicker:empty { display: none; }
  .ds-main {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px var(--ds-space-24) 88px;
  }
  .ds-workspace:has(.ds-consent) > .ds-topline,
  .ds-workspace:has(.ds-coach-page) > .ds-topline { display: none; }
  .ds-workspace:has(.workspace-pane.active:not([data-pane="now"])) .ds-topline-title { font-size: 30px; }
  .ds-workspace:has(.workspace-pane.active:not([data-pane="now"])) #view-kicker { display: none; }
  .ds-shell.is-client-workspace #view-kicker { display: none; }
  .ds-shell.is-client-workspace .ds-workspace:has(.workspace-pane.active:not([data-pane="now"])) .ds-topline { display: none; }
  .ds-shell.is-client-workspace .ds-workspace:has(.workspace-pane.active:not([data-pane="now"])) .ds-main { padding-top: var(--ds-space-32); }
  .plan-layout, .client-workspace { min-width: 0; }
  .client-workspace { display: grid; gap: 28px; }
  .workspace-pane { display: none; min-width: 0; }
  .workspace-pane.active { display: grid; gap: var(--ds-space-24); }
  .ds-loading {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 220px;
    padding: 30px;
  }
  .ds-loading-line, .ds-loading-card {
    overflow: hidden;
    border-radius: var(--ds-radius-field);
    background: var(--ds-line);
  }
  .ds-loading-line { width: min(560px, 85%); height: 16px; }
  .ds-loading-line.is-short { width: 92px; height: 11px; }
  .ds-loading-line.is-title { width: min(360px, 68%); height: 30px; }
  .ds-loading-card { width: 100%; height: 104px; margin-top: var(--ds-space-12); }

  /* 1 · Toppfelt */
  .ds-appbar {
    position: relative;
    z-index: 60;
    width: 100%;
    background: var(--ds-canvas);
  }
  .ds-appbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "brand center user";
    align-items: center;
    gap: var(--ds-space-16);
    min-height: 76px;
    padding: var(--ds-space-12) max(var(--ds-space-24), calc((100vw - 1320px) / 2 + 24px));
  }
  .ds-appbar-brand {
    grid-area: brand;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: var(--ds-target);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .ds-appbar-brand img { display: block; width: auto; height: 23px; }
  .ds-appbar-nav, .ds-appbar-tabs { grid-area: center; min-width: 0; }
  .ds-appbar-tabs:empty { display: none; }
  .ds-appbar-nav { display: flex; align-items: center; gap: var(--ds-space-4); }
  .ds-appbar-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ds-target);
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--ds-radius);
    background: transparent;
    box-shadow: none;
    color: var(--ds-muted);
    font: var(--ds-question);
    font-size: 14px;
    cursor: pointer;
  }
  .ds-appbar-link:hover { color: var(--ds-ink); }
  .ds-appbar-link[aria-current="page"] {
    background: var(--ds-paper);
    color: var(--ds-ink);
    box-shadow: 0 1px 2px rgba(30, 25, 28, .06), 0 4px 12px rgba(30, 25, 28, .06);
  }
  .ds-appbar-user {
    grid-area: user;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--ds-space-12);
    min-width: 0;
  }
  .ds-appbar-email {
    overflow: hidden;
    color: var(--ds-muted);
    font: var(--ds-label);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ds-appbar-status:empty { display: none; }

  /* Faner (de seks fanene i et forløp) */
  .ds-tabs {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
  }
  .ds-tabs--page {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 var(--ds-space-32);
    padding: var(--ds-space-4);
    overflow-x: auto;
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    box-shadow: var(--ds-shadow-sheet);
    scrollbar-width: none;
  }
  .ds-tabs--page::-webkit-scrollbar { display: none; }
  .ds-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: var(--ds-target);
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--ds-radius);
    background: transparent;
    box-shadow: none;
    color: var(--ds-muted);
    font: var(--ds-question);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
  }
  .ds-tab:hover { color: var(--ds-ink); }
  .ds-tab[aria-selected="true"] {
    background: var(--ds-paper);
    color: var(--ds-ink);
    box-shadow: 0 1px 2px rgba(30, 25, 28, .06), 0 4px 12px rgba(30, 25, 28, .06);
  }
  .ds-tabs--page .ds-tab[aria-selected="true"] { background: var(--ds-wash); box-shadow: none; }
  .ds-tab-icon { display: none; }
  .ds-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-line);
    color: var(--ds-text);
    font: var(--ds-label);
    font-size: 11px;
  }
  .ds-tab-count[data-new="true"] { background: var(--ds-next-accent); color: var(--ds-ink); }

  /* 3 · Side */
  .ds-page {
    width: 100%;
    max-width: var(--ds-width-content);
    margin: 0 auto;
    font: var(--ds-body);
    color: var(--ds-text);
  }
  .ds-page--read { max-width: var(--ds-width-read); }
  .ds-page-head { margin: 0 0 var(--ds-space-24); }
  .ds-page-title {
    margin: 0;
    color: var(--ds-ink);
    font: var(--ds-title-page);
  }
  .ds-page-intro {
    max-width: 640px;
    margin: var(--ds-space-8) 0 0;
    color: var(--ds-muted);
    font: var(--ds-body);
  }

  /* 4 · Ark */
  .ds-sheet {
    display: block;
    min-width: 0;
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    box-shadow: var(--ds-shadow-sheet);
    color: var(--ds-text);
    font: var(--ds-body);
  }
  .ds-sheet--split {
    display: grid;
    grid-template-columns: var(--ds-width-list) minmax(0, 1fr);
  }
  .ds-sheet-body { min-width: 0; padding: var(--ds-space-40) var(--ds-space-56) var(--ds-space-56); }
  .ds-sheet--split > .ds-list { border-right: 1px solid var(--ds-line); }
  .ds-section {
    margin: var(--ds-space-40) 0 0;
    padding: var(--ds-space-32) 0 0;
    border-top: 1px solid var(--ds-line);
  }
  .ds-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-24);
    margin: 0 0 var(--ds-space-8);
  }
  .ds-section-title {
    margin: 0;
    color: var(--ds-ink);
    font: var(--ds-title-section);
  }
  .ds-section-intro {
    margin: var(--ds-space-4) 0 0;
    color: var(--ds-muted);
    font: var(--ds-support);
  }

  /* 5 · Liste og rad */
  .ds-list {
    display: grid;
    align-content: start;
    gap: 0;
    margin: 0;
    padding: var(--ds-space-20) 0;
    list-style: none;
  }
  .ds-list-title {
    margin: 0 var(--ds-space-20) var(--ds-space-8);
    color: var(--ds-muted);
    font: var(--ds-label);
  }
  .ds-list-foot { margin: var(--ds-space-12) var(--ds-space-20) 0; }
  .ds-list-foot .ds-button {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
    text-align: left;
  }
  .ds-row {
    position: relative;
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: var(--ds-target);
    margin: 0;
    padding: var(--ds-space-12) var(--ds-space-20) var(--ds-space-12) 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ds-text);
    font: var(--ds-support);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .ds-row:hover { background: var(--ds-wash); }
  .ds-row[aria-current="true"] { background: var(--ds-wash); }
  .ds-row[aria-current="true"]::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--ds-ink);
  }
  .ds-row-title {
    color: var(--ds-ink);
    font: var(--ds-question);
    font-size: 15px;
  }
  .ds-row-meta { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }

  /* 6 · Steg */
  .ds-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 var(--ds-space-20);
    padding: var(--ds-space-4);
    border-radius: var(--ds-radius);
    background: var(--ds-wash);
  }
  .ds-step {
    display: grid;
    gap: 1px;
    min-height: var(--ds-target);
    margin: 0;
    padding: 10px var(--ds-space-16);
    border: 0;
    border-radius: var(--ds-radius-field);
    background: transparent;
    box-shadow: none;
    color: var(--ds-muted);
    font: var(--ds-label);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
  }
  .ds-step[aria-current="step"],
  .ds-step[aria-selected="true"] {
    background: var(--ds-paper);
    box-shadow: 0 1px 2px rgba(30, 25, 28, .08), 0 2px 8px rgba(30, 25, 28, .05);
  }
  .ds-step-title { color: var(--ds-ink); font: var(--ds-question); font-size: 15px; }
  .ds-step-hint { color: var(--ds-muted); }
  .ds-steps:has(+ .ds-focus-premise) { margin-bottom: var(--ds-space-8); }
  .ds-focus-premise { margin: 0 0 var(--ds-space-20); color: var(--ds-muted); font: var(--ds-support); }

  /* 7 · Objekttopp */
  .ds-object-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-24);
  }
  .ds-object-head > :first-child { flex: 1 1 auto; min-width: 0; }
  .ds-object-kicker { margin: 0; color: var(--ds-muted); font: var(--ds-label); }
  .ds-object-title {
    margin: var(--ds-space-4) 0 0;
    color: var(--ds-ink);
    font: var(--ds-title-object);
    overflow-wrap: break-word;
  }
  .ds-object-lead {
    max-width: 640px;
    margin: var(--ds-space-12) 0 0;
    color: var(--ds-muted);
    font: var(--ds-body);
  }
  .ds-object-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--ds-space-12); }

  /* 8 · Meny */
  .ds-menu { position: relative; display: inline-block; }
  .ds-menu > summary { list-style: none; }
  .ds-menu > summary::-webkit-details-marker { display: none; }
  .ds-menu-trigger {
    display: grid;
    place-items: center;
    width: var(--ds-target);
    height: var(--ds-target);
    border-radius: var(--ds-radius-field);
    color: var(--ds-muted);
    cursor: pointer;
  }
  .ds-menu-trigger:hover, .ds-menu[open] > .ds-menu-trigger { background: var(--ds-wash); color: var(--ds-ink); }
  .ds-menu-trigger svg { width: 20px; height: 20px; }
  .ds-menu-list {
    position: absolute;
    top: calc(100% + var(--ds-space-4));
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 200px;
    padding: var(--ds-space-4);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    box-shadow: var(--ds-shadow-sheet);
  }
  .ds-menu-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-8);
    min-height: var(--ds-target);
    margin: 0;
    padding: 0 var(--ds-space-12);
    border: 0;
    border-radius: var(--ds-radius-field);
    background: transparent;
    box-shadow: none;
    color: var(--ds-ink);
    font: var(--ds-support);
    text-align: left;
    cursor: pointer;
  }
  .ds-menu-item:hover { background: var(--ds-wash); }
  .ds-menu-item--danger { color: var(--ds-danger); }
  .ds-menu-item svg { width: 16px; height: 16px; }

  /* 9 · Spørsmål og svar */
  .ds-qa {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 14px;
    padding: var(--ds-space-20) 0;
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-qa:last-child { border-bottom: 0; }
  .ds-qa-mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1.5px solid var(--ds-line-strong);
    border-radius: 50%;
    color: var(--ds-muted);
    font: var(--ds-label);
    font-size: 11px;
  }
  .ds-qa-mark.is-done { border-color: var(--ds-done); background: var(--ds-done); color: var(--ds-on-ink); }
  .ds-qa-mark svg { width: 12px; height: 12px; stroke-width: 3; }
  .ds-qa-main { min-width: 0; }
  .ds-qa-question { margin: 2px 0 0; color: var(--ds-ink); font: var(--ds-question); }
  .ds-qa-help { margin: var(--ds-space-4) 0 0; color: var(--ds-muted); font: var(--ds-support); }
  .ds-qa-answer {
    margin: 6px 0 0;
    color: var(--ds-text);
    font: var(--ds-body);
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  .ds-qa-field {
    display: block;
    width: 100%;
    min-height: 72px;
    margin: 10px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius-field);
    background: var(--ds-paper);
    box-shadow: none;
    color: var(--ds-text);
    font: var(--ds-body);
    resize: vertical;
  }
  .ds-qa-field::placeholder { color: var(--ds-placeholder); opacity: 1; }
  .ds-qa-field:focus { border-color: var(--ds-ink); outline: none; box-shadow: var(--ds-focus-ring); }
  .ds-qa-side { padding-top: 2px; }
  .ds-qa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-12); margin-top: var(--ds-space-12); }

  .ds-qa-eyebrow { margin: 0 0 2px; color: var(--ds-muted); font: var(--ds-label); }
  .ds-qa-prompt {
    color: var(--ds-placeholder);
    text-align: left;
    cursor: text;
    transition: border-color .15s ease;
  }
  .ds-qa-prompt:hover { border-color: var(--ds-muted); }
  .ds-qa-prompt:focus-visible { border-color: var(--ds-ink); outline: none; box-shadow: var(--ds-focus-ring); }
  .ds-qa-list { margin-top: var(--ds-space-8); }
  .ds-qa-auto {
    width: calc(100% + 28px);
    min-height: 44px;
    margin: 2px 0 0 -14px;
    padding: 6px 13px;
    resize: none;
    field-sizing: content;
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .ds-qa-auto:hover { border-color: var(--ds-muted); }
  .ds-qa-auto.is-filled { min-height: 0; }
  .ds-qa-auto.is-filled:not(:focus) {
    border-color: transparent;
    background: transparent;
  }
  .ds-qa-auto.is-filled:not(:focus):hover { border-color: var(--ds-line-strong); }
  .ds-qa-auto:focus { overflow: auto; }
  .ds-sheet-body > .ds-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .ds-qa-fields { display: grid; gap: var(--ds-space-8); }
  .ds-qa-sublabel { display: block; margin: 10px 0 0; color: var(--ds-ink); font: var(--ds-label); }
  .ds-qa-sublabel + .ds-qa-field { margin-top: var(--ds-space-4); }
  .ds-qa-sublabel + .ds-qa-auto { margin-top: 0; }
  .ds-qa-subvalues { display: grid; gap: 2px; margin: 6px 0 0; }
  .ds-qa-subvalues dt { margin: 10px 0 0; color: var(--ds-muted); font: var(--ds-label); }
  .ds-qa-subvalues dt:first-child { margin-top: 0; }
  .ds-qa-subvalues dd { margin: 0; color: var(--ds-text); font: var(--ds-body); white-space: pre-wrap; overflow-wrap: break-word; }
  .ds-qa-subvalues dd.is-empty { color: var(--ds-muted); }
  .ds-qa .ds-disclosure-body { display: grid; gap: var(--ds-space-8); }
  .ds-qa-foot > .ds-disclosure { margin-top: 0; }
  .ds-qa-subfield > .ds-disclosure { margin-top: var(--ds-space-8); }
  .ds-example { display: grid; gap: 2px; margin: 0; }
  .ds-example strong { color: var(--ds-ink); font: var(--ds-label); }

  .ds-title-editor { display: grid; gap: var(--ds-space-4); margin-top: var(--ds-space-8); }
  .ds-title-input {
    width: 100%;
    min-height: 48px;
    padding: var(--ds-space-8) var(--ds-space-12);
    border: 1px solid var(--ds-ink);
    border-radius: var(--ds-radius-field);
    background: var(--ds-paper);
    box-shadow: var(--ds-focus-ring);
    color: var(--ds-ink);
    font: var(--ds-title-section);
  }
  .ds-title-input:focus { outline: none; }
  .ds-object-title.is-empty { color: var(--ds-muted); }

  .ds-section-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-20); margin-top: var(--ds-space-20); }

  /* Oppføringer i arket (for eksempel eksperimenter) */
  .ds-entries { display: grid; }
  .ds-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: var(--ds-space-16);
    width: 100%;
    margin: 0;
    padding: var(--ds-space-16) 0;
    border: 0;
    border-bottom: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ds-text);
    font: var(--ds-body);
    text-align: left;
    cursor: pointer;
  }
  .ds-entry:disabled { cursor: default; opacity: 1; }
  .ds-entry:not(:disabled):hover .ds-entry-title { text-decoration: underline; text-decoration-color: var(--ds-line-strong); text-underline-offset: 4px; }
  .ds-entry > svg { width: 16px; height: 16px; color: var(--ds-placeholder); }
  .ds-entry-main { display: grid; gap: var(--ds-space-4); min-width: 0; }
  .ds-entry-title { color: var(--ds-ink); font: var(--ds-question); }
  .ds-entry-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-12); }
  .ds-entry-text { color: var(--ds-text); font: var(--ds-support); overflow-wrap: break-word; }
  .ds-entry-meta { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }

  /* Forslag i listen */
  .ds-list-group { margin-top: var(--ds-space-16); }
  .ds-suggestion { display: grid; gap: var(--ds-space-4); padding: var(--ds-space-8) var(--ds-space-20) var(--ds-space-12) 22px; }
  .ds-suggestion-title { margin: 0; color: var(--ds-ink); font: var(--ds-question); font-size: 15px; }
  .ds-suggestion-text { margin: 0; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-suggestion .ds-qa-foot { margin-top: var(--ds-space-8); }
  .ds-list-foot-stack { display: grid; justify-items: start; gap: var(--ds-space-12); }
  .ds-list-note { margin: 0; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }

  /* Verktøylinje med segmentvalg og nedtrekksliste */
  .ds-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-12); margin: var(--ds-space-24) 0 var(--ds-space-8); }
  .ds-segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ds-radius); background: var(--ds-wash); }
  .ds-segmented-option {
    min-height: 34px;
    margin: 0;
    padding: 0 var(--ds-space-12);
    border: 0;
    border-radius: var(--ds-radius-field);
    background: transparent;
    box-shadow: none;
    color: var(--ds-muted);
    font: var(--ds-question);
    font-size: 14px;
    cursor: pointer;
  }
  .ds-segmented-option[aria-selected="true"] { background: var(--ds-paper); color: var(--ds-ink); box-shadow: 0 1px 2px rgba(30, 25, 28, .08); }
  .ds-select {
    min-height: var(--ds-target);
    padding: 0 36px 0 var(--ds-space-12);
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius);
    background: var(--ds-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d585d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--ds-ink);
    font: var(--ds-support);
    appearance: none;
  }
  .ds-toolbar .ds-select { width: auto; max-width: 100%; }
  .ds-only-mobile { display: none; }
  .ds-empty-title { margin: 0; color: var(--ds-ink); font: var(--ds-question); }

  /* 10 · Anbefalt neste steg */
  .ds-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-space-24);
    margin: var(--ds-space-24) 0 var(--ds-space-8);
    padding: 18px 22px;
    border-radius: var(--ds-radius);
    background: var(--ds-next);
  }
  .ds-next-label { display: block; margin: 0; color: var(--ds-next-ink); font: var(--ds-label); }
  .ds-next-title { display: block; margin: 2px 0 0; color: var(--ds-ink); font: var(--ds-question); }
  .ds-next-text { margin: 2px 0 0; color: var(--ds-muted); font: var(--ds-support); }

  /* Grupper med lenkerader (Akkurat nå) */
  .ds-groups { display: grid; margin-top: var(--ds-space-8); }
  .ds-group {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--ds-space-24);
    padding: var(--ds-space-16) 0;
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-group:last-child { border-bottom: 0; }
  .ds-group-label { display: grid; gap: 2px; align-content: start; margin: 0; padding-top: 10px; }
  .ds-group-name { color: var(--ds-ink); font: var(--ds-question); font-size: 15px; }
  .ds-group-object { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-group-main { display: grid; align-content: start; min-width: 0; }
  .ds-group-premise { margin: 0; padding-top: 10px; color: var(--ds-muted); font: var(--ds-support); }
  .ds-group-empty { margin: 0; padding-top: 10px; color: var(--ds-muted); font: var(--ds-support); }
  .ds-group-title { margin: var(--ds-space-24) 0 0; color: var(--ds-ink); font: var(--ds-label); }
  .ds-link-rows { display: grid; margin: 0; padding: 0; list-style: none; }
  .ds-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: var(--ds-space-12);
    width: 100%;
    min-height: var(--ds-target);
    margin: 0;
    padding: var(--ds-space-8) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ds-ink);
    font: var(--ds-question);
    text-align: left;
    cursor: pointer;
  }
  .ds-link-row:hover .ds-link-row-title { text-decoration: underline; text-decoration-color: var(--ds-line-strong); text-underline-offset: 4px; }
  .ds-link-row-title { min-width: 0; overflow-wrap: break-word; }
  .ds-link-row > svg { width: 16px; height: 16px; color: var(--ds-placeholder); }

  /* Små tall under arket (Akkurat nå) */
  .ds-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-12); margin-top: var(--ds-space-12); }
  .ds-metric {
    display: grid;
    justify-items: start;
    gap: 2px;
    margin: 0;
    padding: var(--ds-space-16) var(--ds-space-16);
    border: 0;
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    box-shadow: var(--ds-shadow-sheet);
    text-align: left;
    cursor: pointer;
  }
  .ds-metric-label { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-metric-value { color: var(--ds-ink); font: var(--ds-question); }
  .ds-metric:hover .ds-metric-label { color: var(--ds-ink); }
  .ds-now > .ds-next { margin-top: 0; margin-bottom: var(--ds-space-16); }

  /* Fremdrift over arket (Forløpet) */
  .ds-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-space-24);
    margin: 0 0 var(--ds-space-16);
    padding: var(--ds-space-16) var(--ds-space-24);
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    box-shadow: var(--ds-shadow-sheet);
  }
  .ds-progress-title { display: block; color: var(--ds-ink); font: var(--ds-question); }
  .ds-progress-text { margin: 2px 0 0; color: var(--ds-muted); font: var(--ds-support); }
  .ds-progress-bar { display: flex; gap: var(--ds-space-4); margin-top: var(--ds-space-12); }
  .ds-progress-bar > span { width: 28px; height: 4px; border-radius: 2px; background: var(--ds-line); }
  .ds-progress-bar > span[data-done="true"] { background: var(--ds-done); }

  /* 11 · Status */
  .ds-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ds-muted);
    font: var(--ds-label);
    white-space: nowrap;
  }
  .ds-status::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-placeholder);
  }
  .ds-status[data-tone="done"]::before { background: var(--ds-done); }
  .ds-status[data-tone="next"]::before { background: var(--ds-next-accent); }

  /* 12 · Knapper */
  .ds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-8);
    min-height: var(--ds-target);
    margin: 0;
    padding: 0 var(--ds-space-16);
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    box-shadow: none;
    color: var(--ds-ink);
    font: var(--ds-question);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .ds-button:hover { border-color: var(--ds-ink); }
  .ds-button:disabled { cursor: default; opacity: .5; }
  .ds-button svg { width: 16px; height: 16px; }
  .ds-button--primary { border-color: var(--ds-ink); background: var(--ds-ink); color: var(--ds-on-ink); }
  .ds-button--primary:hover { background: var(--ds-text); }
  .ds-button.ds-button--danger { border-color: var(--ds-danger); background: var(--ds-danger); color: var(--ds-on-ink); }
  .ds-button.ds-button--danger:hover { border-color: var(--ds-ink); background: var(--ds-ink); }
  .ds-button--block { width: 100%; }
  .ds-button--text {
    position: relative;
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: underline;
    text-decoration-color: var(--ds-line-strong);
    text-underline-offset: 4px;
  }
  .ds-button--text::after {
    content: "";
    position: absolute;
    inset: 50% -6px auto;
    height: var(--ds-target);
    transform: translateY(-50%);
  }
  .ds-button--text:hover { text-decoration-color: var(--ds-ink); }

  /* 13 · Kontekst */
  .ds-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-space-24);
    margin: var(--ds-space-20) 0 0;
    padding: 2px 0 2px var(--ds-space-16);
    border-left: 2px solid var(--ds-line-strong);
  }
  .ds-context > .ds-button { justify-self: start; }
  .ds-context-label { display: block; margin: 0; color: var(--ds-muted); font: var(--ds-label); }
  .ds-context-text {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ds-text);
    font: var(--ds-support);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 14 · Vis mer */
  .ds-disclosure { margin: var(--ds-space-12) 0 0; }
  .ds-disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--ds-ink);
    font: var(--ds-question);
    font-size: 14px;
    list-style: none;
    cursor: pointer;
  }
  .ds-disclosure > summary::-webkit-details-marker { display: none; }
  .ds-disclosure > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -3px 0 0 2px;
    border-right: 1.5px solid var(--ds-muted);
    border-bottom: 1.5px solid var(--ds-muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
  }
  .ds-disclosure[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
  .ds-disclosure-body { margin: var(--ds-space-8) 0 0; color: var(--ds-text); font: var(--ds-support); }
  .ds-section > .ds-disclosure--block { margin: 0; }
  .ds-disclosure--block > summary { display: flex; justify-content: space-between; width: 100%; gap: var(--ds-space-16); }
  .ds-disclosure--block > summary > span { display: grid; gap: 2px; }
  .ds-disclosure-title { color: var(--ds-ink); font: var(--ds-question); }
  .ds-disclosure-hint { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-disclosure--block > .ds-disclosure-body { display: grid; gap: var(--ds-space-20); margin-top: var(--ds-space-20); }
  .ds-guidance-title { margin: 0 0 var(--ds-space-8); color: var(--ds-ink); font: var(--ds-question); font-size: 15px; }
  .ds-guidance-list { display: grid; gap: var(--ds-space-4); margin: 0; padding-left: 20px; }
  .ds-guidance-group p { margin: 0; }

  /* 15 · Tom tilstand */
  .ds-empty {
    display: grid;
    justify-items: start;
    gap: var(--ds-space-12);
    padding: var(--ds-space-24) 0;
  }
  .ds-section .ds-empty { padding: var(--ds-space-12) 0 0; }
  .ds-empty-text { max-width: 560px; margin: 0; color: var(--ds-muted); font: var(--ds-support); }

  /* 16 · Lagret */
  .ds-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    color: var(--ds-muted);
    font: var(--ds-label);
    font-weight: 400;
  }
  .ds-saved:empty, .ds-saved[data-state="clean"] { visibility: hidden; }
  .ds-saved[data-state="saved"]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-done);
  }
  .ds-saved[data-state="error"] { color: var(--ds-danger); }

  /* Valg med forklaring, for eksempel «Hvem kan lese?» */
  .ds-segmented-option[aria-checked="true"] { background: var(--ds-paper); color: var(--ds-ink); box-shadow: 0 1px 2px rgba(30, 25, 28, .08); }
  .ds-choice { display: grid; gap: var(--ds-space-8); margin-top: var(--ds-space-16); }
  .ds-choice-label { margin: 0; color: var(--ds-ink); font: var(--ds-label); }
  .ds-choice-help { margin: 0; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-choice .ds-segmented { justify-self: start; }

  .ds-link-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-16); }
  .ds-link-fields label { display: grid; gap: var(--ds-space-4); color: var(--ds-ink); font: var(--ds-label); }
  .ds-link-fields .ds-select { width: 100%; }

  .ds-context--note .ds-context-text { white-space: pre-wrap; text-overflow: clip; font: var(--ds-body); }

  /* Notater i dagbokform: brukerens tekst først, stille metadata over */
  .ds-notes { display: grid; }
  .ds-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--ds-space-16);
    padding: var(--ds-space-20) 0;
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-note:first-child { padding-top: var(--ds-space-8); }
  .ds-note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-12); margin: 0 0 var(--ds-space-8); }
  .ds-note-date { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-note-text { margin: 0; color: var(--ds-text); font: var(--ds-body); white-space: pre-wrap; overflow-wrap: break-word; }
  .ds-note .ds-qa-field { margin-top: var(--ds-space-4); }
  .ds-composer > .ds-qa-help { margin: var(--ds-space-4) 0 var(--ds-space-12); }

  /* Innhold i en ressurs. Innholdsblokkene tegnes av resources.renderer.js, som også brukes i coachens bibliotek. */
  .ds-content { display: grid; gap: var(--ds-space-16); max-width: var(--ds-width-read); }
  .ds-content p { margin: 0; color: var(--ds-text); font: var(--ds-body); }
  .ds-content-heading { margin: var(--ds-space-8) 0 0; color: var(--ds-ink); font: var(--ds-question); }
  .ds-content-list { display: grid; gap: var(--ds-space-8); margin: 0; padding-left: 20px; color: var(--ds-text); font: var(--ds-body); }
  .ds-resource-content { gap: var(--ds-space-32); }
  .ds-resource-content > .ds-button { justify-self: start; }
  .ds-resource-content :is(.resource-block, .resource-model-card) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .ds-resource-content .resource-block { display: grid; gap: var(--ds-space-12); }
  .ds-resource-content .resource-block + .resource-block {
    padding-top: var(--ds-space-32);
    border-top: 1px solid var(--ds-line);
  }
  .ds-resource-content .resource-block--intro + .resource-block--illustration {
    padding-top: 0;
    border-top: 0;
  }
  .ds-resource-content :is(.resource-block__heading, .resource-model-card h4, .ds-content-heading) {
    margin: 0;
    color: var(--ds-ink);
    font: var(--ds-title-section);
    letter-spacing: 0;
    text-transform: none;
  }
  .ds-resource-content .resource-model-card h4 { font: var(--ds-question); }
  .ds-resource-content .resource-block__content { margin: 0; color: var(--ds-text); font: var(--ds-body); }
  .ds-resource-content .resource-block--intro .resource-block__content { color: var(--ds-ink); }
  .ds-resource-content .resource-block__questions {
    display: grid;
    gap: var(--ds-space-12);
    margin: 0;
    padding-left: 20px;
    color: var(--ds-text);
    font: var(--ds-body);
    list-style: disc;
  }
  .ds-resource-content .resource-block__questions li { display: list-item; min-height: 0; padding: 0; border: 0; background: none; }
  .ds-resource-content :is(.resource-block__questions li, .resource-block__field)::before { content: none; }
  .ds-resource-content .resource-block__fields { display: grid; gap: var(--ds-space-8); margin: 0; padding: 0; }
  .ds-resource-content .resource-block__field {
    display: block;
    min-height: var(--ds-target);
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius-field);
    background: var(--ds-paper);
    box-shadow: none;
    color: var(--ds-muted);
    font: var(--ds-body);
    list-style: none;
  }
  .ds-resource-content .resource-block--callout,
  .ds-resource-content .resource-block--quote { padding: 2px 0 2px var(--ds-space-16); border-left: 2px solid var(--ds-line-strong); }
  .ds-resource-content .resource-block--quote blockquote { margin: 0; color: var(--ds-ink); font: var(--ds-question); }
  .ds-resource-content .resource-block--quote figcaption { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-resource-content .resource-model-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-16) var(--ds-space-24); }
  .ds-resource-content .resource-model-card { display: grid; gap: var(--ds-space-8); padding-top: var(--ds-space-16); border-top: 1px solid var(--ds-line); }
  .ds-resource-content .resource-model-card h4 { margin: 0; }
  .ds-resource-content .resource-block--illustration {
    justify-items: stretch;
    width: 100%;
  }
  .ds-resource-content .resource-illustration-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 220px;
    aspect-ratio: 14 / 9;
    object-fit: contain;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    background: var(--ds-wash);
  }
  .ds-resource-content .resource-illustration-orb { display: none; }
  .ds-resource-content :is(.resource-illustration-caption, .resource-download-card) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-12);
    width: 100%;
    color: var(--ds-muted);
    font: var(--ds-label);
    font-weight: 400;
  }
  .ds-resource-content .resource-download-card {
    padding: var(--ds-space-16) 0;
    border-top: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-resource-content .resource-download-kicker { color: var(--ds-muted); font: var(--ds-label); letter-spacing: 0; text-transform: none; }
  .ds-resource-content .resource-file-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ds-ink);
    font: var(--ds-question);
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: var(--ds-line-strong);
    text-underline-offset: 4px;
    cursor: pointer;
  }
  .ds-resource-content .resource-file-open svg { width: 16px; height: 16px; }
  .ds-resource-content .ds-content-heading {
    margin: 0;
    padding-top: var(--ds-space-24);
    border-top: 1px solid var(--ds-line);
  }
  .ds-files { display: grid; margin: 0; padding: 0; list-style: none; }
  .ds-files li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-12); padding: var(--ds-space-12) 0; border-bottom: 1px solid var(--ds-line); color: var(--ds-text); font: var(--ds-support); }

  /* 17 · Dialog: skuff fra høyre, skjemavindu midt på skjermen og lite vindu for bekreft og melding */
  .ds-dialog {
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text);
    font-family: var(--ds-font-body);
  }
  .ds-dialog::backdrop { background: rgba(23, 21, 23, .32); }
  .ds-dialog-panel {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    margin: 0;
    background: var(--ds-paper);
    box-shadow: 0 20px 60px rgba(30, 25, 28, .18);
  }
  .ds-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-16);
    padding: var(--ds-space-24) 28px var(--ds-space-16);
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-dialog .ds-object-kicker:empty { display: none; }
  .ds-dialog-title { margin: 2px 0 0; color: var(--ds-ink); font: var(--ds-title-section); }
  .ds-dialog-lead { max-width: 640px; margin: 6px 0 0; color: var(--ds-muted); font: var(--ds-support); }
  .ds-dialog-text { margin: var(--ds-space-8) 0 0; color: var(--ds-text); font: var(--ds-support); }
  .ds-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--ds-space-24) 28px; }
  .ds-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-12);
    padding: var(--ds-space-16) 28px;
    border-top: 1px solid var(--ds-line);
    background: var(--ds-paper);
  }
  .ds-dialog-foot-start { display: flex; align-items: center; gap: var(--ds-space-20); margin-right: auto; }
  .ds-dialog-foot:empty, .ds-dialog-foot-start:empty, .ds-dialog-message:empty { display: none; }
  .ds-dialog-message, .ds-dialog-note { margin: 0 auto 0 0; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-icon-button {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--ds-target);
    height: var(--ds-target);
    margin: -6px -10px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius);
    background: transparent;
    color: var(--ds-muted);
    cursor: pointer;
  }
  .ds-icon-button:hover { background: var(--ds-wash); color: var(--ds-ink); }
  .ds-icon-button svg { width: 20px; height: 20px; }

  .ds-dialog--side { position: fixed; inset: 0 0 0 auto; width: min(560px, 100vw); height: 100vh; max-height: 100vh; margin: 0; }
  .ds-dialog--side .ds-dialog-panel { height: 100%; }
  .ds-dialog--workspace { width: min(1180px, 100vw); }
  .ds-dialog--workspace .ds-dialog-body { padding: 0; }
  .ds-dialog--workspace .ds-form { gap: 0; }
  .ds-dialog--center { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); margin: auto; }
  .ds-dialog--center .ds-dialog-panel { max-height: calc(100vh - 64px); border-radius: var(--ds-radius); }
  .ds-dialog--small { width: min(440px, calc(100vw - 32px)); margin: auto; }
  .ds-dialog--small .ds-dialog-panel { border-radius: var(--ds-radius); }
  .ds-dialog--small .ds-dialog-body { padding: var(--ds-space-24) var(--ds-space-24) var(--ds-space-8); }
  .ds-dialog--small .ds-dialog-foot { padding: var(--ds-space-16) var(--ds-space-24) var(--ds-space-24); border-top: 0; }
  .ds-dialog--wide { width: min(1180px, calc(100vw - 48px)); height: calc(100vh - 48px); max-height: calc(100vh - 48px); margin: auto; }
  .ds-dialog--wide .ds-dialog-panel { height: 100%; border-radius: var(--ds-radius); }
  .ds-dialog--wide .ds-dialog-body { display: flex; padding: 0; overflow: hidden; }

  /* 18 · Skjema: spørsmål, eventuell hjelpetekst og felt */
  .ds-form { display: grid; gap: var(--ds-space-20); }
  .ds-form-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .ds-form-label { padding: 0; color: var(--ds-ink); font: var(--ds-question); font-size: 15px; }
  .ds-form-help { margin: -2px 0 0; color: var(--ds-muted); font: var(--ds-support); font-size: 14px; }
  .ds-form-field .ds-qa-field { margin: 0; }
  .ds-input {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius-field);
    background: var(--ds-paper);
    box-shadow: none;
    color: var(--ds-text);
    font: var(--ds-body);
  }
  .ds-input::placeholder { color: var(--ds-placeholder); opacity: 1; }
  .ds-form-field .ds-select { width: 100%; min-height: 44px; border-radius: var(--ds-radius-field); font: var(--ds-body); }
  .ds-input:focus, .ds-form-field .ds-select:focus { border-color: var(--ds-ink); outline: none; box-shadow: var(--ds-focus-ring); }
  .ds-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-16); }
  .ds-form-disclosure { margin: 0; padding-top: var(--ds-space-16); border-top: 1px solid var(--ds-line); }
  .ds-form-disclosure > .ds-disclosure-body { gap: var(--ds-space-20); }
  .ds-form-fieldset > legend { margin-bottom: 6px; }
  .ds-form-section { display: grid; gap: var(--ds-space-4); padding-top: var(--ds-space-16); border-top: 1px solid var(--ds-line); }
  .ds-form-section:first-child { padding-top: 0; border-top: 0; }
  .ds-form-section-title { margin: 0; color: var(--ds-ink); font: var(--ds-question); }
  .ds-form-section > .ds-button { justify-self: start; margin-top: var(--ds-space-8); }
  .ds-check-list { display: grid; }
  .ds-check {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-12);
    min-height: var(--ds-target);
    margin: 0;
    padding: var(--ds-space-8) 0;
    color: var(--ds-text);
    font: var(--ds-support);
    cursor: pointer;
  }
  .ds-check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--ds-ink); }

  /* 19 · Velgeren for lederkompetanser: listen til venstre og kompetansen til høyre */
  .ds-chooser { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; }
  .ds-chooser-list { min-height: 0; overflow: auto; padding-bottom: var(--ds-space-20); border-right: 1px solid var(--ds-line); }
  .ds-chooser-tools {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: var(--ds-space-20);
    border-bottom: 1px solid var(--ds-line);
    background: var(--ds-paper);
  }
  .ds-chooser-tools .ds-search, .ds-chooser-tools .ds-select { width: 100%; }
  .ds-chooser-count { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-12); }
  .ds-chooser-count > .ds-button--text { flex: none; }
  .ds-chooser-group { padding-top: var(--ds-space-16); }
  .ds-chooser-groups > .ds-empty, .ds-chooser-detail > .ds-empty { padding: var(--ds-space-20); }
  .ds-chooser-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--ds-space-12); }
  .ds-chooser-row-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ds-chooser-detail { min-height: 0; overflow: auto; padding: var(--ds-space-32) var(--ds-space-40); }
  .ds-chooser-detail .ds-back { display: none; }
  .ds-chooser-english { margin: 2px 0 0; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-chooser-detail .ds-object-lead { max-width: var(--ds-width-read); margin-top: var(--ds-space-16); }
  .ds-chooser-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-32);
    margin-top: 28px;
    padding-top: var(--ds-space-24);
    border-top: 1px solid var(--ds-line);
  }
  .ds-chooser-facts p { margin: 0; color: var(--ds-text); font: var(--ds-support); }
  .ds-chooser-detail .ds-detail > .ds-disclosure { margin-top: var(--ds-space-24); padding-top: var(--ds-space-16); border-top: 1px solid var(--ds-line); }

  .ds-search {
    width: min(100%, 360px);
    min-height: var(--ds-target);
    padding: 0 var(--ds-space-12);
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    color: var(--ds-ink);
    font: var(--ds-support);
  }
  .ds-search:focus { border-color: var(--ds-ink); outline: none; box-shadow: var(--ds-focus-ring); }
  .ds-back { margin-bottom: var(--ds-space-16); }

  /* 20 · Innlogging: et smalt ark midt på siden, med logoen øverst til venstre som i toppfeltet */
  body:has(.ds-auth:not(.hidden)) { background: var(--ds-canvas); }
  .ds-auth {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    padding: var(--ds-space-24) max(var(--ds-space-24), calc((100vw - 1320px) / 2 + 24px));
    background: var(--ds-canvas);
    font-family: var(--ds-font-body);
  }
  .ds-auth-logo { width: auto; height: 23px; margin-top: 14px; }
  .ds-auth-sheet {
    display: grid;
    align-self: center;
    justify-self: center;
    gap: var(--ds-space-20);
    width: min(440px, 100%);
    margin: var(--ds-space-40) 0 80px;
    padding: var(--ds-space-40);
    border-radius: var(--ds-radius);
    background: var(--ds-paper);
    box-shadow: var(--ds-shadow-sheet);
  }
  .ds-auth-title { margin: 0; color: var(--ds-ink); font: var(--ds-title-page); }
  .ds-auth-sheet > .ds-object-kicker { margin-bottom: -14px; }
  .ds-auth-lead { margin: -8px 0 4px; color: var(--ds-muted); font: var(--ds-support); }
  .ds-auth-sheet > .ds-button--text { justify-self: center; }
  .ds-auth-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-12); }
  .ds-form-message { margin: 0; color: var(--ds-danger); font: var(--ds-label); font-weight: 400; }
  .ds-form-message:empty { display: none; }
  .ds-form-message[data-tone="success"] { color: var(--ds-done); }

  /* 21 · Samtykke */
  .ds-facts { display: grid; gap: var(--ds-space-4); margin: 28px 0 0; padding-top: var(--ds-space-20); border-top: 1px solid var(--ds-line); }
  .ds-facts dt { margin-top: var(--ds-space-12); color: var(--ds-ink); font: var(--ds-question); }
  .ds-facts dt:first-child { margin-top: 0; }
  .ds-facts dd { margin: 0; color: var(--ds-text); font: var(--ds-support); }
  .ds-facts + .ds-check { margin-top: var(--ds-space-24); padding-top: var(--ds-space-20); border-top: 1px solid var(--ds-line); color: var(--ds-ink); font: var(--ds-body); }

  /* 22 · Coach-sidene: tittel i siden, nøkkeltall, filterrad og tabell */
  .ds-page-head--actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-16) var(--ds-space-24); }
  .ds-page-head--actions .ds-object-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-12); }

  .ds-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ds-space-24); margin: 0; }
  .ds-figure { display: grid; gap: 2px; margin: 0; }
  .ds-figure-value { color: var(--ds-ink); font: var(--ds-title-section); }
  .ds-figure-label { color: var(--ds-text); font: var(--ds-question); font-size: 15px; }
  .ds-figure-hint { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }

  .ds-tools { display: flex; flex-wrap: wrap; gap: var(--ds-space-12); margin: var(--ds-space-16) 0 var(--ds-space-8); }
  .ds-tools .ds-search { flex: 1 1 280px; width: auto; max-width: none; }
  .ds-tools .ds-select { flex: 0 1 220px; min-height: var(--ds-target); }

  .ds-table { display: grid; margin: var(--ds-space-16) 0 0; }
  .ds-tools + .ds-table,
  .ds-tools + div > .ds-table:first-child { margin-top: var(--ds-space-8); }
  .ds-table-head, .ds-table-row {
    display: grid;
    grid-template-columns: var(--ds-table-columns, minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto);
    align-items: center;
    gap: var(--ds-space-16);
    padding: var(--ds-space-12) var(--ds-space-8);
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-table-head { padding-top: 0; color: var(--ds-muted); font: var(--ds-label); }
  .ds-table-row { min-height: 56px; color: var(--ds-text); font: var(--ds-support); }
  .ds-table-row.is-link { cursor: pointer; }
  .ds-table-row.is-link:hover { background: var(--ds-wash); }
  .ds-table-row.is-muted .ds-row-title { color: var(--ds-muted); }
  .ds-table-cell { display: grid; gap: 2px; min-width: 0; }
  .ds-table-cell > .ds-row-title, .ds-table-cell > .ds-row-meta { overflow: hidden; text-overflow: ellipsis; }
  .ds-table-label { display: none; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-16); }
  .ds-table-actions .ds-menu { margin: 0; }
  .ds-table-text { display: -webkit-box; overflow: hidden; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* 23 · Ressursbibliotek, redigering og sending */
  .ds-sheet--split.ds-library { grid-template-columns: 340px minmax(0, 1fr); }
  .ds-library > .ds-list { padding-top: 0; }
  .ds-library .ds-chooser-tools { position: static; margin-bottom: var(--ds-space-4); }
  .ds-library .ds-chooser-group { padding-top: var(--ds-space-16); }
  .ds-library-help { margin: var(--ds-space-8) 0 0; color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }
  .ds-library .ds-detail > .ds-disclosure--block { margin-top: var(--ds-space-24); padding: var(--ds-space-16) 0; border-top: 1px solid var(--ds-line); }
  .ds-library .ds-detail > .ds-disclosure--block + .ds-section { margin-top: 0; }
  .ds-guidance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-24) var(--ds-space-32); }
  .ds-guidance-grid p { margin: 0; }

  .ds-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100%; }
  .ds-dialog--workspace .ds-editor-form.ds-form { display: grid; align-content: start; gap: var(--ds-space-20); padding: var(--ds-space-24) 28px var(--ds-space-40); border-right: 1px solid var(--ds-line); }
  .ds-editor-preview { padding: var(--ds-space-24) 28px var(--ds-space-40); background: var(--ds-wash); }
  .ds-editor-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-16); margin-bottom: var(--ds-space-16); }
  .ds-editor-preview .ds-sheet-body { padding: var(--ds-space-32); }
  .ds-ready .ds-context { margin: 0; }
  .ds-ready-list { display: flex; flex-wrap: wrap; gap: var(--ds-space-4) var(--ds-space-16); margin: 0; padding: 0; list-style: none; }
  .ds-block { display: grid; gap: var(--ds-space-8); padding: var(--ds-space-16) 0; border-top: 1px solid var(--ds-line); }
  .ds-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-12); }
  .ds-block-title { margin: 0; color: var(--ds-ink); font: var(--ds-question); font-size: 15px; }
  .ds-block-tools { display: flex; gap: 0; }
  .ds-block-tools .ds-icon-button { margin: 0; }
  .ds-block-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-12); padding-top: var(--ds-space-16); border-top: 1px solid var(--ds-line); }
  .ds-block-add .ds-select { min-height: var(--ds-target); }
  .ds-block .ds-input, .ds-block .ds-qa-field, .ds-block .ds-select { width: 100%; }
  .ds-file-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-12); padding: var(--ds-space-12) 0; border-bottom: 1px solid var(--ds-line); }
  .ds-file-row > div { display: grid; gap: 2px; }
  .ds-file-row small { color: var(--ds-muted); font: var(--ds-label); font-weight: 400; }

  @media (min-width: 1240px) {
    .ds-shell.is-client-workspace .ds-workspace:has(.workspace-pane.active[data-pane="now"]) .ds-main { padding-top: 8px; }
  }

  @media (max-width: 1239px) {
    .ds-sheet-body { padding: var(--ds-space-32) var(--ds-space-32) var(--ds-space-40); }
    .ds-appbar-inner {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "brand user" "center center";
      row-gap: var(--ds-space-8);
    }
    .ds-appbar-nav, .ds-appbar-tabs { justify-self: center; max-width: 100%; }
    .ds-appbar-tabs .ds-tabs { overflow-x: auto; scrollbar-width: none; }
  }

  @media (max-width: 980px) {
    .ds-topline { min-height: 0; padding: 22px var(--ds-space-20); }
    .ds-main { padding: 22px var(--ds-space-20) 72px; }
  }

  @media (max-width: 700px) {
    .ds-progress { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-12); padding: var(--ds-space-16) 18px; }
    .ds-progress > .ds-button { justify-self: start; }
    .ds-group { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-4); }
    .ds-group-label { padding-top: 0; }
    .ds-group-premise { padding-top: 0; }
    .ds-group-empty { padding-top: 0; }
    .ds-appbar-inner {
      min-height: 60px;
      padding: var(--ds-space-8) var(--ds-space-16);
      row-gap: var(--ds-space-4);
    }
    .ds-topline {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--ds-space-16);
      padding: var(--ds-space-24) 16px 28px;
    }
    .ds-topline-title { font-size: 30px; }
    .ds-topline-lead { font: var(--ds-support); }
    .ds-topline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; width: 100%; }
    .ds-topline-actions .ds-button { width: 100%; }
    .ds-main { padding: 24px 16px 64px; }
    .ds-appbar-email { display: none; }
    .ds-appbar-nav { justify-self: stretch; justify-content: center; }
    .ds-shell:has(.ds-appbar-tabs:not(:empty)) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

    /* 2 · Bunnmeny */
    .ds-appbar-tabs {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 70;
      padding: 6px var(--ds-space-4) calc(6px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--ds-line);
      background: var(--ds-paper);
      box-shadow: 0 -6px 18px rgba(30, 25, 28, .06);
    }
    .ds-appbar-tabs .ds-tabs {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
      overflow: visible;
    }
    .ds-appbar-tabs .ds-tab {
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 3px;
      min-width: 0;
      min-height: 54px;
      padding: 6px 1px 4px;
      background: transparent;
      box-shadow: none;
      font-size: 10.5px;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
      hyphens: manual;
    }
    .ds-appbar-tabs .ds-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
    .ds-appbar-tabs .ds-tab-icon {
      display: grid;
      place-items: center;
      width: 40px;
      height: 26px;
      border-radius: var(--ds-radius-pill);
    }
    .ds-appbar-tabs .ds-tab[aria-selected="true"] .ds-tab-icon { background: var(--ds-line); }
    .ds-appbar-tabs .ds-tab-icon svg { width: 19px; height: 19px; }
    .ds-appbar-tabs .ds-tab-count {
      position: absolute;
      top: 2px;
      left: calc(50% + 8px);
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      font-size: 10px;
    }
    .ds-tabs--page { width: 100%; margin-bottom: var(--ds-space-24); }

    .ds-sheet--split { display: block; }
    .ds-sheet--split > .ds-list { border-right: 0; border-bottom: 1px solid var(--ds-line); }
    .ds-sheet-body { padding: var(--ds-space-24) 18px var(--ds-space-32); }
    .ds-section-head { flex-wrap: wrap; gap: var(--ds-space-8); }
    .ds-object-head { gap: var(--ds-space-8); }
    .ds-object-head > .ds-object-actions { margin-right: calc(var(--ds-space-8) * -1); }
    .ds-steps { margin-bottom: var(--ds-space-12); }
    .ds-step { padding: 10px var(--ds-space-4); text-align: center; }
    .ds-step-title { font-size: 13px; }
    .ds-step-hint { display: none; }
    .ds-qa { grid-template-columns: 24px minmax(0, 1fr); }
    .ds-qa-side { grid-column: 2; padding-top: var(--ds-space-8); }
    .ds-next, .ds-context { grid-template-columns: 1fr; gap: var(--ds-space-12); }
    .ds-next .ds-button { width: 100%; }
    .ds-hide-mobile { display: none; }
    .ds-only-mobile { display: flex; }
    .ds-context-text { white-space: normal; }
    .ds-link-fields, .ds-resource-content .resource-model-card-grid { grid-template-columns: 1fr; }
    .ds-note { gap: var(--ds-space-8); }
    .ds-sheet--list-only > .ds-list { border-bottom: 0; }
    .ds-sheet--list-only > .ds-sheet-body { display: none; }
    .ds-auth-sheet { margin: var(--ds-space-24) 0 var(--ds-space-40); padding: 28px var(--ds-space-20); }
    .ds-dialog--side, .ds-dialog--center, .ds-dialog--wide { inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
    .ds-dialog--side .ds-dialog-panel, .ds-dialog--center .ds-dialog-panel, .ds-dialog--wide .ds-dialog-panel { height: 100%; max-height: none; border-radius: 0; }
    .ds-dialog-head { padding: var(--ds-space-16) var(--ds-space-20) var(--ds-space-12); }
    .ds-dialog-body { padding: var(--ds-space-20); }
    .ds-dialog-foot { padding: var(--ds-space-12) var(--ds-space-20) calc(var(--ds-space-12) + env(safe-area-inset-bottom)); }
    .ds-dialog-foot .ds-button { flex: 1 1 0; }
    .ds-dialog-foot-start, .ds-dialog-message, .ds-dialog-note { flex: 1 0 100%; }
    .ds-dialog-foot-start .ds-button { width: 100%; }
    .ds-form-row { grid-template-columns: 1fr; }
    .ds-dialog--wide .ds-dialog-body { display: block; overflow: auto; }
    .ds-chooser { display: block; height: auto; }
    .ds-chooser-list { overflow: visible; border-right: 0; }
    .ds-chooser.is-preview .ds-chooser-list, .ds-chooser:not(.is-preview) .ds-chooser-detail { display: none; }
    .ds-dialog:has(.ds-chooser:not(.is-preview)) .ds-dialog-foot, .ds-dialog:has(.ds-chooser.is-preview) .ds-dialog-lead { display: none; }
    .ds-chooser-detail { padding: var(--ds-space-20); }
    .ds-chooser-detail .ds-back { display: inline-flex; }
    .ds-chooser-facts { grid-template-columns: 1fr; gap: var(--ds-space-20); }
    .ds-page-head--actions .ds-object-actions { width: 100%; }
    .ds-page-head--actions .ds-object-actions .ds-button { flex: 1 1 auto; }
    .ds-figures { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--ds-space-12); }
    .ds-figure-hint { display: none; }
    .ds-tools .ds-select { flex: 1 1 100%; }
    .ds-table-head { display: none; }
    .ds-table-row { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-8) var(--ds-space-16); padding: var(--ds-space-16) 0; }
    .ds-table-cell:first-child { grid-column: 1 / -1; }
    .ds-table-cell.is-extra, .ds-table-text { display: none; }
    .ds-table-label { display: block; }
    .ds-table-actions { position: absolute; top: var(--ds-space-8); right: 0; }
    .ds-table-row:has(.ds-table-actions) > .ds-table-cell:first-child { padding-right: 150px; }
    .ds-library .ds-object-head { flex-direction: column; }
    .ds-library .ds-object-head > .ds-object-actions { margin-right: 0; }
    .ds-guidance-grid { grid-template-columns: minmax(0, 1fr); }
    .ds-editor { grid-template-columns: minmax(0, 1fr); }
    .ds-dialog--workspace .ds-editor-form.ds-form { border-right: 0; padding: var(--ds-space-20) var(--ds-space-16) var(--ds-space-32); }
    .ds-editor-preview { display: none; }
  }

  @media (max-width: 380px) {
    .ds-main { padding: 24px 12px 64px; }
    .ds-topline { padding-left: 12px; padding-right: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([class^="ds-"], [class*=" ds-"]) { transition: none; }
  }
}