/* DrivingNorway visual preview — Samfunnsklar palette and card finish.
   Load last. No content, navigation, grading, access or persistence changes. */
:root {
  --cream:#f2f4f0; --paper:#fbfcf9; --navy:#1b343b; --navy-soft:#415c62;
  --muted:#566f75; --line:#d6e2de; --border:#d6e2de; --soft:#edf3f1;
  --accent:#145365; --accent-soft:#e3eeec; --green:#23734f; --green-bg:#e6f4eb;
  --success:#23734f; --success-bg:#e6f4eb; --success-ink:#145437;
  --red:#b3344a; --red-bg:#fcebf0; --error-ink:#82223a;
  --gold:#d3b25c; --amber:#806322; --amber-bg:#f1ecda;
  --petrol-deep:#0b3039; --petrol-bright:#115365; --header-ink:#f3f8f5;
  --button:#145365; --button-light:#1b6070; --button-edge:#0a3c48; --button-text:#f3f8f5;
  --card-edge:#a6bec0; --option-ledge:#d1ded9; --radius:22px;
  --card-shadow:0 2px 5px rgb(10 60 72 / 7%),0 10px 28px rgb(10 60 72 / 9%);
  --question-face:linear-gradient(110deg,var(--petrol-deep),var(--petrol-bright));
  color-scheme:light;
}
:root[data-theme=dark] {
  --cream:#0a1d24; --paper:#112e37; --navy:#edf5f2; --navy-soft:#c2d5d4;
  --muted:#a1baba; --line:#30545f; --border:#30545f; --soft:#193d47;
  --accent:#86ccd3; --accent-soft:#1f4a55; --green:#85cba5; --green-bg:#173c32;
  --success:#85cba5; --success-bg:#173c32; --success-ink:#e0f7e9;
  --red:#f1a0b1; --red-bg:#462a37; --error-ink:#ffe5ed;
  --gold:#dfc16f; --amber:#dfc16f; --amber-bg:#343521;
  --petrol-deep:#082b35; --petrol-bright:#15586b;
  --button:#86ccd3; --button-light:#a1dce0; --button-edge:#3c8490; --button-text:#0a2933;
  --card-edge:#30545f; --option-ledge:#234650;
  --card-shadow:0 2px 5px rgb(0 10 16 / 16%),0 10px 28px rgb(0 10 16 / 23%);
}
html,body,body.is-practicing,body.is-focused {background:var(--cream);color:var(--navy)}
body {background-image:none}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.focus-scroll:focus-visible,
#dn-dashboard :focus-visible {outline-color:var(--accent)}

/* The quiet teal shell keeps the existing brand and four navigation items. */
.site-header {background:var(--petrol-deep);border-color:rgb(243 248 245 / 12%)}
.site-header .brand-icon,:root[data-theme=dark] .site-header .brand-icon {background:#fbfcf9;border-radius:12px;padding:4px}
.site-header .brand {color:var(--header-ink)}
.site-header .brand-wordmark {color:var(--header-ink)}
.site-header .brand-wordmark>span {color:var(--gold)}
.site-header .language-links a {color:#c2d5d4}
.hero h1 em,.journal-heading .eyebrow,.pricing-heading .eyebrow,.story-category {color:var(--accent)}
.plan-value {color:var(--amber)}
.price-card-value {border-color:var(--gold)}
.topic-card:nth-child(n) .topic-icon {background:var(--soft);color:var(--accent)}
.site-header .header-icon-control {background:transparent;border-color:rgb(243 248 245 / 24%);color:var(--header-ink)}
.site-header .header-icon-control:hover {background:rgb(243 248 245 / 9%);border-color:var(--gold)}
.site-header .main-nav a,.is-practicing .site-header .main-nav a {color:#c2d5d4}
.site-header .main-nav a:hover,.site-header .main-nav a[aria-current=page] {color:var(--header-ink)}
.main-nav a[aria-current=page]::after {background:var(--gold)}
.site-header .main-nav a[aria-current=page] {border-color:var(--gold)}
.main-nav a,.main-nav a[data-action],:root[data-theme=dark] .main-nav a,:root[data-theme=dark] .main-nav a[data-action] {
  --nav-ink:#c2d5d4; --nav-detail:#0b3039; --nav-accent:#d3b25c; --nav-paper:#f3f8f5; --nav-soft:transparent;
}
.main-nav a .nav-symbol,.main-nav a[data-action=dashboard] .nav-symbol {background:transparent;box-shadow:none}
.main-nav a[aria-current=page] .nav-symbol {--nav-ink:#f3f8f5;box-shadow:none}
.site-header :is(a,button):focus-visible {outline-color:var(--gold)}

/* Shared card material: a pale face, a fine edge, and soft teal shadows. */
.access-card,.empty-state,.results,.topic-card,.topic-badge,.profile-section,
.account-card,.profile-card,.exam-landing,.exam-facts,.dn-stat-panel,
.price-card,.story-card,.pricing-faq,.contact-card,
.dashboard-board,.image-dialog,dialog,.display-options,.language-dialog,
.focus-explanation,.exam-feedback-popover {
  background:var(--paper);color:var(--navy);border-color:var(--line);
  border-radius:22px;box-shadow:var(--card-shadow);
}
.topic-badge:hover,.topic-card:hover {border-color:var(--card-edge);box-shadow:0 4px 8px rgb(10 60 72 / 8%),0 14px 30px rgb(10 60 72 / 12%)}
.topic-badge-go,.study-symbol,.access-symbol,.account-tabs,.topic-icon,.feature-icon {background:var(--soft);color:var(--accent);border-color:var(--line)}
.sample-access-bar {padding-inline:16px;background:var(--amber-bg);border:1px solid color-mix(in srgb,var(--gold) 65%,var(--line));border-radius:17px}
.sample-access-bar>span {color:var(--navy-soft)}
.sample-access-bar .pass-link {color:var(--accent)}
.exam-landing {padding:28px;border:1px solid var(--line)}
.pass-choice {background:var(--paper);color:var(--navy);border-color:var(--line)}
.pass-choice.is-selected {background:var(--accent-soft);border-color:var(--accent)}
.pass-choice:has(input:focus-visible) {outline-color:var(--accent)}
.exam-landing>.access-card {background:transparent;border:0;padding:0;box-shadow:none}
.exam-landing .exam-facts {background:var(--soft);box-shadow:none}

/* Tactile primary actions, with separate semantic answer feedback. */
.button,.practice-section .button,.dashboard-section .button,.question-actions .button,
:root[data-theme=dark] .button,:root[data-theme=dark] .practice-section .button,
:root[data-theme=dark] .dashboard-section .button,:root[data-theme=dark] .question-actions .button {
  background:linear-gradient(120deg,var(--button-light),var(--button));
  color:var(--button-text);border-color:var(--button-edge);border-radius:16px;
  box-shadow:0 3px 0 var(--button-edge),0 6px 14px rgb(10 60 72 / 9%);
}
.button:hover,.practice-section .button:hover,.dashboard-section .button:hover,
:root[data-theme=dark] .button:hover {background:var(--button);border-color:var(--button-edge)}
.button-secondary,.practice-section .button-secondary,.dashboard-section .button-secondary,
:root[data-theme=dark] .button-secondary,:root[data-theme=dark] .practice-section .button-secondary,
:root[data-theme=dark] .dashboard-section .button-secondary,
.focus-why,.focus-sheet-back {background:var(--soft);color:var(--navy);border:1px solid var(--line);box-shadow:0 2px 0 var(--option-ledge)}

.button.button-secondary:not(:disabled):hover,.practice-section .button.button-secondary:not(:disabled):hover,
.dashboard-section .button.button-secondary:not(:disabled):hover,.question-actions .button.button-secondary:not(:disabled):hover,
:root[data-theme=dark] .button.button-secondary:not(:disabled):hover,
:root[data-theme=dark] .practice-section .button.button-secondary:not(:disabled):hover,
:root[data-theme=dark] .dashboard-section .button.button-secondary:not(:disabled):hover,
:root[data-theme=dark] .question-actions .button.button-secondary:not(:disabled):hover {
  background:var(--accent-soft);color:var(--navy);border-color:var(--card-edge);
}
.button:disabled,.practice-section .button:disabled,.dashboard-section .button:disabled,.question-actions .button:disabled,
:root[data-theme=dark] .button:disabled,:root[data-theme=dark] .dashboard-section .button:disabled,:root[data-theme=dark] .question-actions .button:disabled {
  background:var(--soft);color:var(--muted);border-color:var(--line);box-shadow:none;
}
.option,.practice-section .option,.focus-form .option {
  background:var(--soft);border:1px solid var(--line);border-radius:17px;
  box-shadow:0 2px 0 color-mix(in srgb,var(--option-ledge) 70%,transparent);
}
.option:hover,.practice-section .option:hover {background:var(--accent-soft);border-color:var(--card-edge)}
.option-letter {background:transparent;color:var(--muted);border-color:var(--line);border-radius:9px}
.option.selected:not(.correct):not(.incorrect),.practice-section .option.selected:not(.correct):not(.incorrect) {background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.option.selected:not(.correct):not(.incorrect) .option-letter {background:var(--button);border-color:var(--button);color:var(--button-text)}
.option.correct,.practice-section .option.correct {background:var(--success-bg);border-color:var(--success);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--success) 30%,transparent)}
.option.incorrect,.practice-section .option.incorrect {background:var(--red-bg);border-color:var(--red);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--red) 30%,transparent)}
.option.correct .option-letter,.option.correct .option-marker {background:var(--success);color:var(--paper);border-color:var(--success)}
.option.incorrect .option-letter {background:var(--red);color:var(--paper);border-color:var(--red)}
.feedback,.feedback.wrong {background:var(--paper);border-color:var(--line);box-shadow:none}
.focus-sheet-content .focus-explanation-answer {background:var(--soft)}

/* The existing question and image become one rounded study card. */
.focus-form .question-workspace,.focus-form.focus-compact .question-workspace {
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;
  background:var(--paper);border:1px solid var(--card-edge);border-radius:22px;
  overflow:hidden;box-shadow:var(--card-shadow);align-items:center;
}
.focus-form .question-workspace.text-only {grid-template-columns:minmax(0,1fr);max-width:800px;margin-inline:auto}
.focus-form .question-title,.focus-form.focus-compact .question-title {
  grid-column:1 / -1;grid-row:1;margin:0;padding:24px 28px;
  background:var(--question-face);color:var(--header-ink);
}
.focus-form .question-workspace .image-stage {
  grid-column:1;grid-row:2;margin:24px;width:calc(100% - 48px);
  height:min(300px,38dvh);min-height:0;padding:10px;background:var(--soft);border-color:var(--line);border-radius:17px;
}
.focus-form .question-workspace .options {grid-column:2;grid-row:2;padding:24px 24px 24px 0;gap:12px}
.focus-form .question-workspace.text-only .options {grid-column:1;grid-row:2;padding:24px}
html[dir=rtl] .focus-form .question-workspace:not(.text-only) .options {padding-inline:0 24px}
.focus-form .question-workspace .question-decoration {grid-column:1;grid-row:2;padding:24px}
.focus-form .question-workspace.with-decoration .question-title {grid-column:1 / -1;grid-row:1}
.focus-form .question-workspace.with-decoration .options {grid-column:2;grid-row:2}
.focus-bar {background:var(--petrol-deep);color:var(--header-ink);border-bottom-color:rgb(243 248 245 / 15%)}
.focus-bar .focus-count,.focus-bar .focus-icon,.focus-form .focus-bar .bookmark-control {color:var(--header-ink)}
.focus-bar .exam-clock {color:var(--gold)}
.focus-bar .exam-feedback-menu>summary {background:transparent;border-color:rgb(243 248 245 / 24%);color:var(--header-ink)}
.focus-bar .exam-feedback-menu[open]>summary {background:rgb(243 248 245 / 12%);color:var(--gold)}
.focus-form .focus-bar .bookmark-control.saved {color:var(--gold)}
.focus-form .focus-bar .bookmark-control.saved .icon {fill:currentColor}
.exam-feedback-toggle input:focus-visible+.exam-feedback-track {outline-color:var(--accent)}
.focus-bar .question-language {background:transparent;border-color:rgb(243 248 245 / 24%);color:var(--header-ink)}
.focus-form .focus-bar .bookmark-control:hover {background:rgb(243 248 245 / 9%)}
.focus-bar :is(button,a):hover {background:rgb(243 248 245 / 9%)}
.focus-bar :is(button,a,summary):focus-visible {outline-color:var(--gold)}
.focus-explanation {border-radius:22px 22px 0 0;box-shadow:0 -12px 60px rgb(0 10 16 / 20%)}
.focus-dock,:root[data-theme=dark] .focus-dock {background:var(--cream);border-color:var(--line)}

/* Dashboard cards share the same material, with teal reserved for the summary. */
#dashboard-view .dashboard-board,:root[data-theme=dark] #dashboard-view .dashboard-board {--dashboard-surface:var(--paper);--dashboard-edge:var(--line);background:var(--paper);border-color:var(--line);box-shadow:var(--card-shadow)}
#dn-dashboard,[data-theme=dark] #dn-dashboard {--dn-paper:var(--paper);--dn-ink:var(--navy);--dn-muted:var(--muted);--dn-line:var(--line);--dn-mint:var(--soft);--dn-teal:var(--accent)}
.dn-journey {background:var(--question-face);color:var(--header-ink);border:1px solid var(--card-edge);box-shadow:var(--card-shadow)}
.dn-journey-top p,.dn-insight span,.dn-insight small {color:#c2d5d4}
.dn-journey-track>span {background:var(--gold)}
.dn-stat-panel {box-shadow:0 2px 5px rgb(10 60 72 / 4%)}
.dn-coverage>button[aria-pressed=true] {box-shadow:inset 3px 0 var(--accent)}
html[dir=rtl] .dn-coverage>button[aria-pressed=true] {box-shadow:inset -3px 0 var(--accent)}
#dashboard-view #saved-practice,:root[data-theme=dark] #dashboard-view #saved-practice,
#dashboard-view .topic-dashboard-entry,:root[data-theme=dark] #dashboard-view .topic-dashboard-entry {background:var(--soft);color:var(--navy);border-color:var(--line);box-shadow:0 2px 0 var(--option-ledge)}
#dashboard-view .collection-count,:root[data-theme=dark] #dashboard-view .collection-count {background:var(--paper);color:var(--navy)}
#dashboard-view .dashboard-go,:root[data-theme=dark] #dashboard-view .dashboard-go {background:var(--button);color:var(--button-text);box-shadow:0 3px 0 var(--button-edge)}
#dashboard-view :is(button,a):hover .dashboard-go,:root[data-theme=dark] #dashboard-view :is(button,a):hover .dashboard-go {background:var(--button-light)}
#dashboard-view #saved-practice>.icon:first-child,:root[data-theme=dark] #dashboard-view #saved-practice>.icon:first-child {color:var(--accent)}
.dn-segment.correct {stroke:var(--success)}.dn-segment.wrong {stroke:var(--red)}.dn-segment.unseen {stroke:var(--card-edge)}
.dn-dot.correct {background:var(--success)}.dn-dot.wrong {background:var(--red)}.dn-dot:not(.correct):not(.wrong) {background:var(--card-edge)}
.site-footer,:root[data-theme=dark] .site-footer {--footer-text:var(--muted);background:var(--cream);border-color:var(--line)}

@media(max-width:960px) {
  body:has(.main-nav .nav-symbol) .site-header .main-nav {background:var(--paper);border-color:var(--line)}
  body:has(.main-nav .nav-symbol) .site-header .main-nav a {--nav-ink:var(--muted);--nav-detail:var(--paper);--nav-paper:var(--soft);color:var(--muted)}
  body:has(.main-nav .nav-symbol) .site-header .main-nav a[aria-current=page],body:has(.main-nav .nav-symbol) .site-header .main-nav a:hover {--nav-ink:var(--accent);color:var(--accent)}
  body:has(.main-nav .nav-symbol) .site-header .main-nav :is(a,button):focus-visible {outline-color:var(--accent)}
  body:has(.main-nav .nav-symbol) .site-header .main-nav a[aria-current=page] .nav-symbol {--nav-ink:var(--accent)}
}
@media(max-width:760px) {
  .exam-landing {padding:20px}
  .focus-form .question-workspace,.focus-form.focus-compact .question-workspace,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) {grid-template-columns:minmax(0,1fr);gap:0;margin-block:auto}
  .focus-form .question-title,.focus-form.focus-compact .question-title,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) .question-title {grid-column:1;grid-row:1;padding:20px;font-size:20px;line-height:1.4}
  .focus-form .question-workspace .image-stage,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) .image-stage {grid-column:1;grid-row:2;width:calc(100% - 32px);height:clamp(108px,19dvh,160px);margin:16px 16px 0;padding:6px}
  .focus-form .question-workspace .options,.focus-form .question-workspace.text-only .options,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) .options,
  .focus-form .question-workspace.with-decoration .options,
  html[dir=rtl] .focus-form .question-workspace:not(.text-only) .options {grid-column:1;grid-row:3;padding:16px;gap:9px}
  .focus-form .question-workspace.text-only .options {grid-row:2}
  .focus-form .question-workspace.with-decoration .question-decoration {grid-column:1;grid-row:2;padding:12px;height:100px}
  .focus-form .question-workspace.with-decoration .options {grid-row:3}
  .focus-form.focus-compact .question-workspace.with-decoration .question-decoration {display:none}
  .focus-form.focus-compact .question-workspace.with-decoration .options {grid-row:2}
}
@media(max-width:360px),(max-height:650px) {
  .focus-form .question-title,.focus-form.focus-compact .question-title,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) .question-title {padding:16px;font-size:18px}
  .focus-form .question-workspace .options,.focus-form .question-workspace.text-only .options {padding:12px;gap:7px}
  .focus-form .question-workspace .image-stage {height:108px;margin-top:12px}
}
@media(max-width:760px) and (max-height:740px) {
  .focus-form .question-title,.focus-form.focus-compact .question-title,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) .question-title {padding:16px;font-size:18px}
  .focus-form .question-workspace .image-stage,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) .image-stage {height:108px;margin-top:12px}
  .focus-form .question-workspace .options,.focus-form .question-workspace.text-only .options,
  .focus-form .question-workspace:not(.text-only):not(.with-decoration) .options,
  html[dir=rtl] .focus-form .question-workspace:not(.text-only) .options {padding:12px;gap:7px}
}

/* Keep room for answers when the existing fit check selects compact mode. */
@media(max-width:760px) {
  .focus-form.focus-compact .question-workspace .question-title,
  .focus-form.focus-compact .question-workspace:not(.text-only):not(.with-decoration) .question-title {padding:12px}
  .focus-form.focus-compact .question-workspace .image-stage,
  .focus-form.focus-compact .question-workspace:not(.text-only):not(.with-decoration) .image-stage {height:88px}
}

/* Short landscape screens keep the image beside the question and answers. */
@media(min-width:500px) and (max-height:500px) {
  .focus-form.focus-compact .question-workspace:not(.text-only):not(.with-decoration) {grid-template-columns:minmax(100px,.3fr) minmax(0,1fr);align-items:start}
  .focus-form.focus-compact .question-workspace:not(.text-only):not(.with-decoration) .question-title {grid-column:2;grid-row:1;padding:12px;font-size:18px;line-height:1.4}
  .focus-form.focus-compact .question-workspace:not(.text-only):not(.with-decoration) .image-stage {grid-column:1;grid-row:1 / span 2;align-self:start;margin:12px;width:calc(100% - 24px);height:min(130px,35dvh);padding:6px}
  .focus-form.focus-compact .question-workspace:not(.text-only):not(.with-decoration) .options {grid-column:2;grid-row:2;padding:12px;gap:7px}
  .focus-form.focus-compact .question-workspace.with-decoration {grid-template-columns:minmax(0,1fr)}
  .focus-form.focus-compact .question-workspace.with-decoration .options,
  html[dir=rtl] .focus-form.focus-compact .question-workspace.with-decoration .options {grid-column:1;grid-row:2;padding:12px;gap:7px}
}

/* A short exam entry: facts, start, and optional settings. */
.exam-landing.exam-start-card {max-width:500px;gap:14px;padding:24px}
.exam-start-card .exam-heading {font-size:32px;line-height:1.2}
.exam-start-card .exam-facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px;margin:0;text-align:center}
.exam-start-card .exam-facts>div {font-size:13px;line-height:1.3;gap:3px}
.exam-start-card .exam-facts strong {font-size:24px;line-height:1.2}
.exam-start-card>.button {min-height:48px;width:100%;padding:12px 16px}
.exam-start-card .exam-start-note {font-size:12px;line-height:1.5;text-align:center;text-wrap:balance}
.exam-start-options {margin:0;border-top:1px solid var(--line);padding-top:2px}
.exam-start-options>summary {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;border:0;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.exam-start-options>summary::after {content:"";width:7px;height:7px;border-bottom:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-inline:4px;flex:none}
.exam-start-options[open]>summary {background:transparent;color:var(--accent)}
.exam-start-options[open]>summary::after {transform:rotate(225deg)}
.exam-start-options .exam-feedback-setting {margin:4px 0 0;padding:12px;background:var(--soft)}
.exam-start-options .exam-feedback-toggle {font-size:14px;gap:12px}
@media(max-width:680px) {
  .exam-landing.exam-start-card {padding:20px;gap:12px}
  .exam-start-card .exam-heading {font-size:30px}
}
@media(max-width:360px),(max-height:500px) {
  .exam-landing.exam-start-card {padding:14px;gap:10px}
  .exam-start-card .exam-heading {font-size:26px}
  .exam-start-card .exam-facts {padding:10px 6px}
  .exam-start-card .exam-facts strong {font-size:22px}
}

/* Keep profile content inside the shared card surface at every screen size. */
.account-section .access-card {width:100%;padding:28px;border:1px solid var(--line);background:var(--paper);box-shadow:var(--card-shadow);gap:20px;margin-block:12px 28px}
.account-section .access-card>h1,.account-section .access-card>h2 {margin:0}
.account-section .access-card>.button,.account-section .profile-topic-focus .button {max-width:100%;white-space:normal}
.account-section .account-help-links {margin:0}
.account-section .profile-topic-focus {margin-top:4px;padding-top:24px;gap:16px}
.account-section .profile-topic-focus h2 {margin:0}
.exam-resume-card {display:grid;gap:14px}
.exam-resume-card .exam-heading {margin-bottom:6px}
.exam-focus-dock .focus-message {gap:12px}
.exam-restart-link {flex-shrink:0;min-height:36px;font-size:12px}
#exam-restart-confirm {max-width:min(460px,calc(100vw - 32px))}
#exam-restart-confirm form {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
#exam-restart-confirm form .button {flex:1;min-width:120px}
@media(max-width:600px){.account-section .access-card{padding:24px 20px}.account-section{padding-inline:16px}}