@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================================
   casting.css — «Lumen» · lyst, elegant designsystem for casting-appen
   ----------------------------------------------------------------------------
   ÉN kilde for hele utseendet. Lenkes SIST i <head> på alle malene, slik at
   dette temaet styrer looken (det overstyrer malenes egne <style>-blokker):

       <link rel="stylesheet" href="/static/casting.css">   ← sist i <head>

   Looken: varm ivory-bakgrunn, skarp near-black tekst, hårfine kanter, myke
   skygger, mild avrunding. Elegant «Squarespace»-ro med en egen vri:
   serif-display (Fraunces) + ren sans (Inter) + mono mikro-etiketter
   (Space Mono), og lime som dempet signaturaksent.

   VIL DU ENDRE UTTRYKKET? Juster tokenene i :root nedenfor — det slår igjennom
   på alle sider samtidig.
   ========================================================================== */

:root {
  /* ── PALETT — hvitt/lyst, nøytralt (ingen lime, ingen svart) ────────────
     Endre disse for å endre hele fargestemningen. Aksenten er nå en myk
     grafitt (varmgrå), ikke en farge. */
  --canvas:      #FAF8F2;   /* sidebakgrunn (varm off-white)        */
  --canvas-2:    #F2EFE6;   /* dempet seksjonsbakgrunn              */
  --surface:     #FFFFFF;   /* kort / paneler / felt                */
  --surface-2:   #FBFAF6;   /* lett hevet flate                     */
  --ink:         #35332D;   /* primærtekst (myk varm grafitt, ikke svart) */
  --ink-soft:    #6E6A5E;   /* sekundærtekst                        */
  --ink-faint:   #9C9789;   /* etiketter / dempet                   */
  --line:        #E7E2D5;   /* hårfin kant                          */
  --line-2:      #D6D0BF;   /* sterkere hårfin kant                 */
  --accent:      #4A473F;   /* grafitt — knappfyll / fremhevet fyll */
  --accent-deep: #35332D;   /* grafitt — aksenttekst/lenker/kanter  */
  --accent-soft: #ECE8DF;   /* svak varmgrå tint                    */
  --on-accent:   #FBFAF6;   /* lys tekst på grafittfyll             */
  --danger:      #B3503F;   /* feil / fare (dempet terrakotta)      */
  --warn:        #9C7A33;   /* venter / pause (dempet oker)         */
  --ok:          #5E7355;   /* ok / godkjent (dempet salvie)        */

  /* ── TYPOGRAFI ──────────────────────────────────────────────────────────*/
  --serif:  "Fraunces", Georgia, "Times New Roman", serif;     /* display    */
  --sans:   "Inter", system-ui, -apple-system, sans-serif;     /* body / UI  */
  --mono:   "Space Mono", ui-monospace, monospace;             /* etiketter  */

  /* ── STRUKTUR (juster for å endre «følelsen» globalt) ───────────────────*/
  --radius:    7px;          /* mild avrunding                       */
  --radius-sm: 5px;
  --radius-lg: 12px;
  --bd:        1px;          /* hårfin standardkant                  */
  --speed:     0.18s;
  --speed-slow:0.32s;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-1:  0 1px 2px rgba(27,26,22,.05), 0 1px 3px rgba(27,26,22,.06);
  --shadow-2:  0 2px 6px rgba(27,26,22,.06), 0 6px 18px -6px rgba(27,26,22,.12);
  --shadow-3:  0 8px 24px -6px rgba(27,26,22,.16), 0 18px 48px -12px rgba(27,26,22,.20);

  /* ── RYTME (8px-grid) ───────────────────────────────────────────────────*/
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --save-bar-h: 76px;

  /* ── LEGACY-ALIASER ─────────────────────────────────────────────────────
     Malene bruker disse navnene direkte (også i inline style=""). Vi mapper
     dem til det nye temaet, så det meste re-farges automatisk. Resten styres
     av skin-laget lenger ned. */
  --dk-ink:    var(--ink);        /* tekst / mørke elementer / tekst-på-lime  */
  --dk-paper:  var(--canvas);     /* lys flate                                */
  --ac:        var(--accent);
  --dk-acid:   var(--accent);     /* lime FYLL (knapper m/ mørk tekst)        */
  --dk-acidD:  var(--accent-deep);
  --dk-acid-d: var(--accent-deep);
  --ac-dark:   var(--accent-deep);
  --ac-soft:   var(--accent-soft);
  --dk-ash:    var(--ink-soft);
  --dk-mono:   var(--mono);
  --dk-disp:   var(--sans);       /* «display»-token → ren sans som standard  */
  --dk-track:  -0.01em;
  --dk-red:    var(--danger);
  --error:     var(--danger);
  --dk-err:    var(--danger);
  --dk-yellow: var(--warn);
  --dk-amber:  var(--warn);
  --dk-ok:     var(--ok);
  --border:    var(--line);
  --border-hi: var(--line-2);
  --border-faint: var(--line);
  --input-bg:  var(--surface);
  --text-muted: var(--ink-soft);
  --bg:        var(--canvas);
  --text:      var(--ink);
  --paper:     var(--surface);
  --paper-hi:  var(--canvas-2);
  --surface-1: var(--surface);
  --surface-3: var(--surface);

  color-scheme: light;
}

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL BASE
   ════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body.lumen,
body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

body.lumen a { color: inherit; }

::selection { background: var(--line-2); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--canvas); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Heroene får elegant serif (logo / store navn / sidetitler) */
body.lumen .header-wordmark,
body.lumen .login-wordmark,
body.lumen .logo-main,
body.lumen .actor-name,
body.lumen .page-title,
body.lumen .prod-header h1,
body.lumen .project-name {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  line-height: 1.02;
}

/* ════════════════════════════════════════════════════════════════════════
   SKIN — overstyrer malenes brutalist-komponenter til det lyse temaet.
   (casting.css lastes sist; single-class-regler vinner via rekkefølge,
   sammensatte/escalerte regler bruker body.lumen-prefiks.)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Topptekst / header ───────────────────────────────────────────────── */
body.lumen .site-header {
  background: rgba(250,248,242,0.85) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--bd) solid var(--line) !important;
  box-shadow: var(--shadow-1);
  padding: var(--sp-4) var(--sp-6) !important;
}
body.lumen .header-wordmark { color: var(--ink) !important; }
body.lumen .header-wordmark:hover { color: var(--accent-deep) !important; }
body.lumen .header-sub,
body.lumen .header-meta,
body.lumen .header-sub [data-brand="prefix"] {
  color: var(--ink-faint) !important;
  border: none !important;
}
body.lumen .header-sub [data-brand="prefix"] { color: var(--ink-soft) !important; }

/* Navigasjon / sekundærlenker */
body.lumen .nav-link,
body.lumen .logout-link,
body.lumen .breadcrumb-link,
body.lumen .back-link {
  color: var(--ink-soft) !important;
  border-color: var(--line) !important;
  letter-spacing: .04em;
}
body.lumen .nav-link:hover,
body.lumen .logout-link:hover,
body.lumen .breadcrumb-link:hover,
body.lumen .back-link:hover {
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
body.lumen .nav-link.active { color: var(--ink) !important; }
body.lumen .user-info strong { color: var(--ink) !important; }

/* ── Filterlinje + felt ───────────────────────────────────────────────── */
body.lumen .filter-bar {
  background: rgba(250,248,242,0.9) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: var(--bd) solid var(--line) !important;
  padding: var(--sp-3) var(--sp-6) !important;
}
body.lumen input,
body.lumen select,
body.lumen textarea,
body.lumen .filter-search,
body.lumen .filter-select,
body.lumen .tag-input,
body.lumen .age-group,
body.lumen .gender-group,
body.lumen .edit-input,
body.lumen .edit-select,
body.lumen .edit-textarea,
body.lumen .comment-textarea,
body.lumen .tag-add-input {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: var(--bd) solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-1) !important;
  font-family: var(--sans) !important;
  text-transform: none !important;
}
body.lumen .filter-search,
body.lumen .tag-input { letter-spacing: 0 !important; }
body.lumen input::placeholder,
body.lumen textarea::placeholder { color: var(--ink-faint) !important; text-transform: none; }
body.lumen input:focus,
body.lumen select:focus,
body.lumen textarea:focus,
body.lumen .filter-search:focus,
body.lumen .filter-select:focus,
body.lumen .tag-input:focus,
body.lumen .edit-input:focus,
body.lumen .edit-textarea:focus,
body.lumen .comment-textarea:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
body.lumen .filter-search:hover,
body.lumen .filter-select:hover,
body.lumen .tag-input:hover { border-color: var(--ink-faint) !important; }
body.lumen .filter-select option,
body.lumen .edit-select option { background: var(--surface); color: var(--ink); }
body.lumen .age-group { padding: 0; }
body.lumen .age-label { color: var(--ink-faint) !important; border-right: var(--bd) solid var(--line) !important; }
body.lumen .age-input { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--ink) !important; }

/* Kjønn-knapper (segmentert) */
body.lumen .gender-group { padding: 3px; gap: 2px; }
body.lumen .gender-btn {
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink-soft) !important;
  text-transform: none !important;
  letter-spacing: .02em;
}
body.lumen .gender-btn:hover { background: var(--canvas-2) !important; color: var(--ink) !important; }
body.lumen .gender-btn.active { background: var(--ink) !important; color: var(--canvas) !important; }

/* Nullstill-knapp */
body.lumen .reset-btn {
  border: var(--bd) solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink-soft) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1);
}
body.lumen .reset-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; }

/* Tag-autocomplete / dropdowns */
body.lumen .tag-autocomplete,
body.lumen .status-dropdown,
body.lumen .search-result-item,
body.lumen .tag-ac-item {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}
body.lumen .tag-ac-item,
body.lumen .status-opt { color: var(--ink-soft) !important; text-transform: none !important; }
body.lumen .tag-ac-item:hover,
body.lumen .status-opt:hover { background: var(--accent-soft) !important; color: var(--ink) !important; }

/* ── Stats-linje ──────────────────────────────────────────────────────── */
body.lumen .stats-bar {
  color: var(--ink-faint) !important;
  border-bottom: var(--bd) solid var(--line) !important;
  padding: var(--sp-3) var(--sp-6) !important;
  text-transform: none !important;
  letter-spacing: .02em;
}
body.lumen .stats-bar strong { color: var(--accent-deep) !important; font-family: var(--mono) !important; }

/* ── Aktørkort (grid) ─────────────────────────────────────────────────── */
body.lumen .main-content { padding: var(--sp-7) var(--sp-6) var(--sp-8) !important; }
body.lumen .actor-grid { gap: var(--sp-5) !important; }
body.lumen .actor-card {
  background: var(--surface) !important;
  border: var(--bd) solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
  overflow: hidden;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) !important;
}
body.lumen .actor-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-3) !important;
  transform: translateY(-4px) !important;
}
body.lumen .card-photo { background: var(--canvas-2) !important; }
body.lumen .card-initials { background: var(--accent-soft) !important; color: var(--accent-deep) !important; font-family: var(--serif) !important; }
body.lumen .card-name { color: var(--ink) !important; font-family: var(--serif) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: 16px !important; }
body.lumen .actor-card:hover .card-name { color: var(--accent-deep) !important; }
body.lumen .card-meta { color: var(--ink-soft) !important; }
body.lumen .card-exp-badge {
  border: var(--bd) solid var(--line-2) !important;
  border-radius: 999px !important;
  color: var(--ink-soft) !important;
  text-transform: none !important;
}
body.lumen .card-exp-badge.high { border-color: var(--accent-deep) !important; color: var(--accent-deep) !important; background: var(--accent-soft) !important; }
body.lumen .card-tag {
  background: var(--canvas-2) !important;
  border: var(--bd) solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--ink-soft) !important;
  text-transform: none !important;
}

/* ── Tom-/lastetilstand ───────────────────────────────────────────────── */
body.lumen .grid-empty.visible,
body.lumen .grid-loading.visible {
  border: var(--bd) dashed var(--line-2) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-2);
  color: var(--ink-soft) !important;
  text-align: center; justify-content: center;
  margin: var(--sp-5) auto 0; max-width: 540px;
}

/* ── Paginering ───────────────────────────────────────────────────────── */
body.lumen .page-btn {
  background: var(--surface) !important;
  border: var(--bd) solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-1);
  text-transform: none !important;
}
body.lumen .page-btn:hover:not(:disabled) { background: var(--ink) !important; color: var(--canvas) !important; box-shadow: var(--shadow-2) !important; }
body.lumen .page-counter { color: var(--ink-faint) !important; }

/* ════════════════════════════════════════════════════════════════════════
   AKTØRPROFIL
   ════════════════════════════════════════════════════════════════════════ */
body.lumen .profile-left { border-right: var(--bd) solid var(--line) !important; }
body.lumen .main-photo-wrap {
  border: var(--bd) solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--canvas-2) !important;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
body.lumen .main-photo-initials { color: var(--accent-deep) !important; font-family: var(--serif) !important; }
body.lumen .thumb-item { border: var(--bd) solid var(--line) !important; border-radius: var(--radius-sm) !important; }
body.lumen .thumb-item.active,
body.lumen .thumb-item:hover { border-color: var(--accent-deep) !important; }

body.lumen .actor-name { color: var(--ink) !important; }
body.lumen .meta-chip { color: var(--ink-soft) !important; }
body.lumen .meta-sep { color: var(--line-2) !important; }

/* Status- og erfaringsmerker */
body.lumen .status-badge,
body.lumen .exp-badge {
  border-radius: 999px !important;
  text-transform: none !important;
  font-family: var(--mono) !important;
  border-width: var(--bd) !important;
}
body.lumen .status-badge.godkjent { color: var(--ok) !important; border-color: var(--ok) !important; background: rgba(46,125,50,.08) !important; }
body.lumen .status-badge.venter   { color: var(--warn) !important; border-color: var(--warn) !important; background: rgba(183,121,31,.08) !important; }
body.lumen .status-badge.skjult   { color: var(--ink-soft) !important; border-color: var(--line-2) !important; background: var(--canvas-2) !important; }
body.lumen .exp-badge { color: var(--ink-soft) !important; border-color: var(--line-2) !important; }
body.lumen .exp-badge.high { color: var(--accent-deep) !important; border-color: var(--accent-deep) !important; background: var(--accent-soft) !important; }

/* Quick-copy + generiske ghost-knapper */
body.lumen .copy-btn,
body.lumen .edit-actor-btn,
body.lumen .dl-btn {
  background: var(--surface) !important;
  border: var(--bd) solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-1);
  text-transform: none !important;
}
body.lumen .copy-btn:hover,
body.lumen .edit-actor-btn:hover,
body.lumen .dl-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; box-shadow: var(--shadow-2) !important; }
body.lumen .copy-btn.copied { border-color: var(--accent-deep) !important; color: var(--accent-deep) !important; background: var(--accent-soft) !important; }
body.lumen .copy-btn .copy-icon { color: var(--ink-faint) !important; }

/* Info-seksjoner */
body.lumen .info-section {
  border: var(--bd) solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
body.lumen .section-header { background: var(--surface-2) !important; border-bottom: var(--bd) solid var(--line) !important; }
body.lumen .section-header:hover { background: var(--canvas-2) !important; }
body.lumen .section-title { color: var(--ink-soft) !important; }
body.lumen .section-chevron { color: var(--ink-faint) !important; }
body.lumen .section-header:hover .section-chevron { color: var(--accent-deep) !important; }
body.lumen .info-label { color: var(--ink-faint) !important; letter-spacing: .08em; }
body.lumen .info-value { color: var(--ink) !important; font-family: var(--sans) !important; }
body.lumen .info-value.empty { color: var(--ink-faint) !important; }
body.lumen .info-value a { color: var(--accent-deep) !important; }
body.lumen .notes-text,
body.lumen .comment-text { font-family: var(--sans) !important; color: var(--ink) !important; }

/* Media */
body.lumen .media-thumb { border: var(--bd) solid var(--line) !important; border-radius: var(--radius-sm) !important; transition: transform var(--speed) var(--ease), border-color var(--speed); }
body.lumen .media-thumb:hover { border-color: var(--accent-deep) !important; transform: translateY(-2px); }
body.lumen .video-embed,
body.lumen .video-player-wrap { border: var(--bd) solid var(--line) !important; border-radius: var(--radius-sm); }
body.lumen .video-label { color: var(--ink-soft) !important; }
body.lumen .doc-item { border: var(--bd) solid var(--line) !important; border-radius: var(--radius-sm) !important; color: var(--ink) !important; background: var(--surface); }
body.lumen .doc-item:hover { border-color: var(--ink) !important; box-shadow: var(--shadow-1); }
body.lumen .doc-icon { color: var(--ink-faint) !important; }
body.lumen .doc-dl { color: var(--accent-deep) !important; }

/* Staff-seksjon (intern) */
body.lumen .staff-section { border-top: 2px solid var(--accent-deep) !important; }
body.lumen .staff-heading { color: var(--accent-deep) !important; }
body.lumen .tags-label,
body.lumen .comments-label { color: var(--ink-faint) !important; }
body.lumen .tag-pill {
  background: var(--canvas-2) !important;
  border: var(--bd) solid var(--line-2) !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
body.lumen .tag-remove { color: var(--ink-faint) !important; }
body.lumen .tag-remove:hover { color: var(--danger) !important; }
body.lumen .comment-item { border: var(--bd) solid var(--line) !important; border-radius: var(--radius-sm) !important; background: var(--surface); }
body.lumen .comment-author { color: var(--ink) !important; }
body.lumen .comment-time { color: var(--ink-faint) !important; }
body.lumen .comment-del { color: var(--ink-faint) !important; }
body.lumen .comment-del:hover { color: var(--danger) !important; }

/* ── KNAPPER (primær = ink, aksent = lime-pop) ────────────────────────── */
body.lumen .tag-add-btn,
body.lumen .comment-submit,
body.lumen .page-btn {
  border-radius: var(--radius-sm) !important;
  text-transform: none !important;
}
body.lumen .tag-add-btn {
  background: var(--surface) !important;
  border: var(--bd) solid var(--line-2) !important;
  color: var(--ink) !important;
}
body.lumen .tag-add-btn:hover { border-color: var(--accent-deep) !important; color: var(--accent-deep) !important; box-shadow: var(--shadow-1) !important; }
body.lumen .comment-submit {
  background: var(--ink) !important;
  border: var(--bd) solid var(--ink) !important;
  color: var(--canvas) !important;
}
body.lumen .comment-submit:hover { background: #000 !important; box-shadow: var(--shadow-2) !important; }

/* Primær-/CTA-knapper (Lagre, Legg til …) — myk grafitt med lys tekst */
body.lumen .edit-save-btn,
body.lumen .btn-create,
body.lumen .btn-save,
body.lumen .btn-submit,
body.lumen .btn-primary {
  background: var(--accent) !important;
  border: var(--bd) solid var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: var(--radius-sm) !important;
  text-transform: none !important;
  box-shadow: var(--shadow-1);
}
body.lumen .edit-save-btn:hover,
body.lumen .btn-create:hover,
body.lumen .btn-save:hover,
body.lumen .btn-submit:hover,
body.lumen .btn-primary:hover { background: var(--ink) !important; border-color: var(--ink) !important; box-shadow: var(--shadow-2) !important; }

/* ── Rediger-drawer / modaler ─────────────────────────────────────────── */
body.lumen .edit-overlay,
body.lumen .modal-overlay,
body.lumen .panel-overlay { background: rgba(27,26,22,.38) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.lumen .edit-drawer,
body.lumen .side-panel,
body.lumen .add-panel {
  background: var(--surface) !important;
  border-left: var(--bd) solid var(--line) !important;
  box-shadow: var(--shadow-3);
}
body.lumen .edit-drawer-header,
body.lumen .edit-drawer-footer {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
body.lumen .edit-drawer-title,
body.lumen .edit-section-title { color: var(--accent-deep) !important; border-color: var(--line) !important; }
body.lumen .edit-close-btn { color: var(--ink-soft) !important; }
body.lumen .edit-close-btn:hover { color: var(--ink) !important; }
body.lumen .edit-label { color: var(--ink-faint) !important; }
body.lumen .edit-upload-wrap { border: 1.5px dashed var(--line-2) !important; border-radius: var(--radius-sm) !important; background: var(--surface-2); }
body.lumen .edit-upload-wrap:hover { border-color: var(--accent-deep) !important; }
body.lumen .edit-upload-label { color: var(--ink-soft) !important; }
body.lumen .edit-file-item { border: var(--bd) solid var(--line) !important; border-radius: var(--radius-sm) !important; background: var(--surface-2); color: var(--ink-soft) !important; }
body.lumen .modal-box,
body.lumen .modal,
body.lumen .edit-modal,
body.lumen .edit-actor-modal,
body.lumen .edit-project-modal,
body.lumen .modal-content {
  background: var(--surface) !important;
  border: var(--bd) solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-3) !important;
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */
body.lumen .lightbox-overlay { background: rgba(27,26,22,.92) !important; }
body.lumen .lightbox-img { border: 3px solid var(--canvas) !important; border-radius: var(--radius-sm); }
body.lumen .lightbox-close,
body.lumen .lightbox-nav { background: var(--canvas) !important; color: var(--ink) !important; border-radius: var(--radius-sm); }
body.lumen .lightbox-close:hover,
body.lumen .lightbox-nav:hover { background: var(--accent) !important; }

/* ── Prosjekt-/produksjonskort + diverse ──────────────────────────────── */
body.lumen .project-card,
body.lumen .prod-card {
  background: var(--surface) !important;
  border: var(--bd) solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) !important;
}
body.lumen .project-card:hover,
body.lumen .prod-card:hover { border-color: var(--line-2) !important; box-shadow: var(--shadow-3) !important; transform: translateY(-4px) !important; }
body.lumen .toast { background: var(--ink) !important; color: var(--canvas) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-3); }
body.lumen .msg.ok  { border-color: var(--ok) !important; color: var(--ok) !important; }
body.lumen .msg.err { border-color: var(--danger) !important; color: var(--danger) !important; }

/* Mono mikro-etiketter: behold, men dempet og luftig (den «editorielle vri») */
body.lumen .section-title,
body.lumen .info-label,
body.lumen .tags-label,
body.lumen .comments-label,
body.lumen .edit-section-title,
body.lumen .staff-heading,
body.lumen .header-sub,
body.lumen .stats-bar { font-family: var(--mono) !important; }

/* ════════════════════════════════════════════════════════════════════════
   MERKEVARE-BRYTER (brand-switch.js) — lyst tema
   ════════════════════════════════════════════════════════════════════════ */
.brand-lockup { display: inline-flex; align-items: center; gap: var(--sp-3); }

.brand-switch { position: relative; display: inline-flex; align-items: center; }

/* Sirkulær ikon-knapp: pilen SNURRER ved klikk og sykler merkevaren videre */
.brand-switch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--ink-soft);
  background: var(--surface);
  border: var(--bd) solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color var(--speed), color var(--speed), box-shadow var(--speed);
}
.brand-switch-btn:hover { color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-2); }
.brand-switch-btn:active { box-shadow: var(--shadow-1); }
.brand-switch-btn .bs-icon {
  display: block;
  transition: transform 0.55s var(--ease);   /* selve «snurringen» */
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC OVERRIDES (rollout)
   Per-side komponenter, scopet til hver sides body-klasse (pg-*), slik at
   generiske selektorer (.btn, .card, input ...) ikke lekker mellom sider.
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   LUMEN PAGE OVERRIDES — casting_projects.html
   Page-specific brutalist components not skinned by casting.css.
   Paste at the end of casting.css (loads after the inline <style>).
   ════════════════════════════════════════════════════════════════════ */

/* ── Page heading ─────────────────────────────────────────────────────
   .page-title color only (casting.css already sets serif/weight/spacing
   but leaves it ivory --dk-paper → invisible on light canvas). */
body.lumen.pg-projects .page-title    { color: var(--ink) !important; }
body.lumen.pg-projects .page-subtitle { color: var(--ink-faint) !important; }   /* mono micro-label */

/* ── Project card shell + internals ───────────────────────────────────
   .project-card is in the shared list, but its dark #111 bg / 3px ivory
   border / hard acid offset shadow are NOT re-skinned — pin them here.
   (Drop if casting.css already covers the card shell.) */
body.lumen.pg-projects .project-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-projects .project-card:hover {
  border-color: var(--accent-deep) !important;
  box-shadow: var(--shadow-3) !important;
}

body.lumen.pg-projects .card-top    { border-bottom: 1px solid var(--line) !important; }
body.lumen.pg-projects .card-footer { border-top: 1px solid var(--line) !important; }

body.lumen.pg-projects .project-name { color: var(--ink) !important; }            /* font already serif via shared */
body.lumen.pg-projects .project-desc { color: var(--ink-soft) !important; }

body.lumen.pg-projects .meta-item        { color: var(--ink-faint) !important; }  /* mono micro-label */
body.lumen.pg-projects .meta-item strong { color: var(--ink) !important; }

/* ── Project-specific status badges ───────────────────────────────────
   Shared casting.css only skins .godkjent/.venter/.skjult. These four
   carry dark/acid/red/yellow fills — retint to soft, readable chips. */
body.lumen.pg-projects .status-badge.aktiv {
  background: var(--accent-soft) !important;
  color: var(--accent-deep) !important;
  border: 1px solid var(--accent-deep) !important;
}
body.lumen.pg-projects .status-badge.pause {
  background: rgba(183,121,31,.10) !important;   /* --warn tint */
  color: var(--warn) !important;
  border: 1px solid var(--warn) !important;
}
body.lumen.pg-projects .status-badge.avsluttet {
  background: rgba(193,42,42,.08) !important;     /* --danger tint */
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
}
body.lumen.pg-projects .status-badge.arkivert {
  background: var(--canvas-2) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line-2) !important;
}

/* ── "Åpn" ghost button ───────────────────────────────────────────────
   Was ivory text + faint ivory border + hard ivory offset shadow. */
body.lumen.pg-projects .btn-open {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-projects .btn-open:hover {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  box-shadow: var(--shadow-1) !important;
}

/* ── Archived toggle ──────────────────────────────────────────────────
   Mono link, ash-grey on dark → muted ink-faint. */
body.lumen.pg-projects .archive-toggle a               { color: var(--ink-faint) !important; }
body.lumen.pg-projects .archive-toggle a:hover         { color: var(--ink) !important; border-bottom-color: var(--line-2) !important; }

/* ── Empty state ──────────────────────────────────────────────────────
   Oversized uppercase ghost text at 0.18 ivory → soft faint on canvas. */
body.lumen.pg-projects .empty-label {
  color: var(--ink-faint) !important;
  text-transform: none !important;
  opacity: 0.55 !important;
}

/* ── Create-project modal ─────────────────────────────────────────────
   .modal-overlay / .modal / .btn-submit are shared; the inner chrome,
   form fields and cancel button are page-specific. */
body.lumen.pg-projects .modal-header {
  border-bottom: 1px solid var(--line) !important;
}
body.lumen.pg-projects .modal-title { color: var(--ink) !important; }
body.lumen.pg-projects .modal-footer {
  border-top: 1px solid var(--line) !important;
}

body.lumen.pg-projects .modal-close {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-soft) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-projects .modal-close:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

body.lumen.pg-projects .form-label     { color: var(--ink-faint) !important; }   /* mono micro-label */
body.lumen.pg-projects .form-label .req { color: var(--accent-deep) !important; }

/* Dark transparent inputs w/ 3px ivory border + hard acid focus shadow.
   (If casting.css's generic input/select/textarea already lands these,
   you can drop this block — kept for the .form-* class specificity.) */
body.lumen.pg-projects .form-input,
body.lumen.pg-projects .form-textarea,
body.lumen.pg-projects .form-select {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-projects .form-input:focus,
body.lumen.pg-projects .form-textarea:focus,
body.lumen.pg-projects .form-select:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;   /* replaces hard offset */
}
body.lumen.pg-projects .form-input::placeholder,
body.lumen.pg-projects .form-textarea::placeholder {
  color: var(--ink-faint) !important;
}

/* Dark dropdown options (#1a1a1a) → light surface menu. */
body.lumen.pg-projects .form-select option {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
/* Recolor the inline SVG chevron (was stroke #888 — fine, but ensure contrast). */
body.lumen.pg-projects .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

body.lumen.pg-projects .modal-error { color: var(--danger) !important; }         /* mono micro-label */

body.lumen.pg-projects .btn-cancel {
  background: var(--surface) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-projects .btn-cancel:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* ============================================================
   LUMEN OVERRIDES — casting_project_detail.html
   Page-specific components not covered by casting.css
   ============================================================ */

/* ── Site header sep / breadcrumb wrapper (page-local) ─────── */
body.lumen.pg-project .header-sep,
body.lumen.pg-project .meta-sep {
  color: var(--line-2) !important;
}

/* ── PROJECT HERO (dark 3px border box) ────────────────────── */
body.lumen.pg-project .project-hero {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
}
body.lumen.pg-project .project-name {
  color: var(--ink) !important;
}
body.lumen.pg-project .project-description {
  color: var(--ink-soft) !important;
}
body.lumen.pg-project .meta-chip {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .meta-chip strong {
  color: var(--ink) !important;
}

/* ── PROJECT STATUS BADGE (border-only fills + hard shadow) ── */
body.lumen.pg-project .status-badge {
  border: 1px solid !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .status-badge:hover {
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-project .status-badge.aktiv {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
}
body.lumen.pg-project .status-badge.lukket {
  border-color: var(--line-2) !important;
  color: var(--ink-soft) !important;
  background: var(--canvas-2) !important;
}
body.lumen.pg-project .status-badge.arkivert {
  border-color: var(--line) !important;
  color: var(--ink-faint) !important;
  background: var(--canvas-2) !important;
}
body.lumen.pg-project .status-badge.utkast {
  border-color: var(--warn) !important;
  color: var(--warn) !important;
  background: rgba(245,166,35,0.10) !important;
}

/* ── PROJECT STATUS DROPDOWN (dark #1a1a1a surface) ────────── */
body.lumen.pg-project .status-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-2) !important;
}
body.lumen.pg-project .status-opt {
  color: var(--ink-soft) !important;
}
body.lumen.pg-project .status-opt:hover {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
}

/* ── ACTION ROW divider + buttons ──────────────────────────── */
body.lumen.pg-project .action-row {
  border-top: 1px solid var(--line) !important;
}
body.lumen.pg-project .btn {
  border: 1px solid !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .btn-primary {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  background: transparent !important;
}
body.lumen.pg-project .btn-primary:hover {
  background: var(--accent) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-2) !important;
}
body.lumen.pg-project .btn-default {
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}
body.lumen.pg-project .btn-default:hover {
  border-color: var(--ink) !important;
  background: var(--canvas-2) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-project .btn-danger {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
body.lumen.pg-project .btn-danger:hover {
  border-color: var(--danger) !important;
  background: rgba(220,38,38,0.08) !important;
  box-shadow: var(--shadow-1) !important;
}

/* ── SECTION HEADING + COUNT BADGE ─────────────────────────── */
body.lumen.pg-project .section-heading {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .count-badge {
  border: 1px solid var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── FILTER SEARCH (dark transparent + 3px border) ─────────── */
body.lumen.pg-project .filter-search {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}
body.lumen.pg-project .filter-search::placeholder {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .filter-search:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ── STATUS TABS (segmented control, dark borders) ─────────── */
body.lumen.pg-project .status-tabs {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
}
body.lumen.pg-project .status-tab {
  border-right: 1px solid var(--line) !important;
  color: var(--ink-faint) !important;
  background: transparent !important;
}
body.lumen.pg-project .status-tab:hover {
  background: var(--canvas-2) !important;
  color: var(--ink) !important;
}
body.lumen.pg-project .status-tab.active {
  background: var(--ink) !important;
  color: var(--canvas) !important;
}

/* ── ACTOR CARD (dark #111 surface + offset shadow) ────────── */
body.lumen.pg-project .actor-card {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-project .actor-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-2) !important;
}
body.lumen.pg-project .card-photo {
  background: var(--canvas-2) !important;
}
body.lumen.pg-project .card-photo-initials {
  background: var(--canvas-2) !important;
  color: var(--accent-deep) !important;
}
body.lumen.pg-project .card-name {
  color: var(--ink) !important;
}
body.lumen.pg-project .card-meta {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .card-rolle {
  color: var(--ink-soft) !important;
}

/* ── PA-BADGE (per-actor status, border-only fills) ────────── */
body.lumen.pg-project .pa-badge {
  border: 1px solid !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .pa-badge.vurderes {
  border-color: var(--line-2) !important;
  color: var(--ink-soft) !important;
  background: var(--canvas-2) !important;
}
body.lumen.pg-project .pa-badge.valgt {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
}
body.lumen.pg-project .pa-badge.avslatt {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: rgba(220,38,38,0.08) !important;
}

/* ── TAG PILL (dark translucent fill) ──────────────────────── */
body.lumen.pg-project .tag-pill {
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
  background: var(--canvas-2) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── CARD ACTIONS bar + buttons ────────────────────────────── */
body.lumen.pg-project .card-actions {
  border-top: 1px solid var(--line) !important;
}
body.lumen.pg-project .card-btn {
  border-right: 1px solid var(--line) !important;
  color: var(--ink-faint) !important;
  background: transparent !important;
}
body.lumen.pg-project .card-btn:hover {
  background: var(--canvas-2) !important;
  color: var(--ink) !important;
}
body.lumen.pg-project .card-btn.btn-edit:hover {
  color: var(--accent-deep) !important;
}
body.lumen.pg-project .card-btn.btn-remove:hover {
  color: var(--danger) !important;
  background: rgba(220,38,38,0.06) !important;
}

/* ── EMPTY STATE (dashed dark border) ──────────────────────── */
body.lumen.pg-project .empty-state {
  border: 1px dashed var(--line-2) !important;
  border-radius: var(--radius) !important;
  background: var(--canvas-2) !important;
}
body.lumen.pg-project .empty-title {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .empty-hint {
  color: var(--ink-soft) !important;
}

/* ── ADD ACTORS SIDE PANEL (dark #0f0f0f surface) ──────────── */
body.lumen.pg-project .panel-overlay {
  background: rgba(11,11,11,0.40) !important;
}
body.lumen.pg-project .side-panel {
  background: var(--surface) !important;
  border-left: 1px solid var(--line) !important;
  box-shadow: var(--shadow-3) !important;
}
body.lumen.pg-project .panel-header {
  border-bottom: 1px solid var(--line) !important;
}
body.lumen.pg-project .panel-title {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .panel-close {
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .panel-close:hover {
  border-color: var(--ink) !important;
  background: var(--canvas-2) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-project .panel-search-wrap {
  border-bottom: 1px solid var(--line) !important;
}
body.lumen.pg-project .panel-search {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}
body.lumen.pg-project .panel-search::placeholder {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .panel-search:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
body.lumen.pg-project .panel-result-item {
  border-bottom: 1px solid var(--line) !important;
}
body.lumen.pg-project .panel-result-item:hover {
  background: var(--canvas-2) !important;
}
body.lumen.pg-project .result-thumb {
  border: 1px solid var(--line) !important;
  background: var(--canvas-2) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .result-thumb-initials {
  color: var(--accent-deep) !important;
}
body.lumen.pg-project .result-name {
  color: var(--ink) !important;
}
body.lumen.pg-project .result-meta {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .result-add-btn {
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .result-add-btn:hover:not(.already-added) {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-project .result-add-btn.already-added {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
}
body.lumen.pg-project .panel-status {
  color: var(--ink-faint) !important;
}

/* ── EDIT ACTOR / PROJECT MODAL (dark #111 surface) ────────── */
body.lumen.pg-project .modal-backdrop {
  background: rgba(11,11,11,0.45) !important;
}
body.lumen.pg-project .modal {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-3) !important;
}
body.lumen.pg-project .modal-header {
  border-bottom: 1px solid var(--line) !important;
}
body.lumen.pg-project .modal-title {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .modal-close {
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .modal-close:hover {
  border-color: var(--ink) !important;
  background: var(--canvas-2) !important;
}

/* ── MODAL FORM FIELDS (dark inputs + acid focus) ──────────── */
body.lumen.pg-project .form-label {
  color: var(--ink-faint) !important;
}
body.lumen.pg-project .form-input,
body.lumen.pg-project .form-textarea,
body.lumen.pg-project .form-select {
  background: var(--canvas-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-project .form-input:focus,
body.lumen.pg-project .form-textarea:focus,
body.lumen.pg-project .form-select:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
body.lumen.pg-project .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
}
body.lumen.pg-project .form-select option {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* ── MODAL MESSAGE LINES ───────────────────────────────────── */
body.lumen.pg-project .modal-msg.ok {
  color: var(--accent-deep) !important;
}
body.lumen.pg-project .modal-msg.err {
  color: var(--danger) !important;
}

/* ── FEEDBACK TOAST (dark #0f0f0f surface + 3px border) ────── */
body.lumen.pg-project .toast {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-3) !important;
}
body.lumen.pg-project .toast.ok {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
}
body.lumen.pg-project .toast.err {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* ============================================================
   LUMEN PAGE OVERRIDES — casting_productions_admin.html
   (page-specific classes not covered by casting.css)
   ============================================================ */

/* ── CONFIG SECTION (Google Sheets config panel) ───────────── */
body.lumen.pg-prodadmin .config-section {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1) !important;
  overflow: hidden !important;
}

body.lumen.pg-prodadmin .config-header {
  border-bottom: 1px solid var(--line) !important;
  background: var(--canvas-2) !important;
}

body.lumen.pg-prodadmin .config-header-title {
  color: var(--accent-deep) !important;
}

body.lumen.pg-prodadmin .config-toggle-icon {
  color: var(--ink-faint) !important;
}

body.lumen.pg-prodadmin .config-field label {
  color: var(--ink-faint) !important;
}

/* dark input -> light surface input */
body.lumen.pg-prodadmin .config-input-wrap input {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}

body.lumen.pg-prodadmin .config-input-wrap input:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: var(--shadow-1) !important;
}

body.lumen.pg-prodadmin .toggle-pw {
  border-left: 1px solid var(--line) !important;
  color: var(--ink-faint) !important;
}

body.lumen.pg-prodadmin .toggle-pw:hover {
  color: var(--ink) !important;
}

/* primary save button — keep lime pop, drop hard offset shadow */
body.lumen.pg-prodadmin .btn-save-config {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius-sm) !important;
}

body.lumen.pg-prodadmin .btn-save-config:hover {
  background: var(--accent-deep) !important;
  color: var(--surface) !important;
  box-shadow: var(--shadow-2) !important;
}

/* ── PRODUCTIONS HEADER ROW ────────────────────────────────── */
body.lumen.pg-prodadmin .list-section-title {
  color: var(--ink) !important;
}

/* refresh / cleanup buttons — paper-on-dark -> outlined on light */
body.lumen.pg-prodadmin .btn-refresh {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}

body.lumen.pg-prodadmin .btn-refresh:hover {
  background: var(--ink) !important;
  color: var(--surface) !important;
  box-shadow: var(--shadow-2) !important;
}

/* ── GROUP HEADING ─────────────────────────────────────────── */
body.lumen.pg-prodadmin .group-heading {
  color: var(--ink-faint) !important;
  border-bottom: 1px solid var(--line) !important;
}

body.lumen.pg-prodadmin .group-count {
  background: var(--accent-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
  border-radius: 999px !important;
}

/* ── PRODUCTION CARDS ──────────────────────────────────────── */
body.lumen.pg-prodadmin .prod-card {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}

body.lumen.pg-prodadmin .prod-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-3) !important;
  transform: translateY(-2px) !important;
}

body.lumen.pg-prodadmin .prod-card.inactive {
  border-color: var(--line) !important;
}

body.lumen.pg-prodadmin .prod-card.inactive:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-2) !important;
}

body.lumen.pg-prodadmin .prod-name {
  color: var(--ink) !important;
}

/* page-specific status badges (active/inactive) -> tinted fills */
body.lumen.pg-prodadmin .status-badge.active {
  background: var(--accent-soft) !important;   /* nøytral grafitt-tint */
  border: 1px solid var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  border-radius: var(--radius-sm) !important;
}

body.lumen.pg-prodadmin .status-badge.inactive {
  background: var(--canvas-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-faint) !important;
  border-radius: var(--radius-sm) !important;
}

body.lumen.pg-prodadmin .prod-meta {
  color: var(--ink-soft) !important;
}

body.lumen.pg-prodadmin .prod-meta-label {
  color: var(--ink-faint) !important;
}

/* ── APPLY LINK AREA ───────────────────────────────────────── */
body.lumen.pg-prodadmin .apply-link-area {
  border-top: 1px solid var(--line) !important;
}

body.lumen.pg-prodadmin .apply-url-box {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}

body.lumen.pg-prodadmin .apply-url-text {
  background: var(--canvas-2) !important;
  color: var(--ink-soft) !important;
}

body.lumen.pg-prodadmin .btn-copy {
  background: var(--surface) !important;
  border-left: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}

body.lumen.pg-prodadmin .btn-copy:hover {
  background: var(--ink) !important;
  color: var(--surface) !important;
}

body.lumen.pg-prodadmin .btn-copy.copied {
  background: var(--accent) !important;
  color: var(--ink) !important;
}

body.lumen.pg-prodadmin .btn-open-apply {
  color: var(--accent-deep) !important;
}

body.lumen.pg-prodadmin .btn-open-apply:hover {
  border-bottom-color: var(--accent-deep) !important;
}

/* ── EMPTY STATE ───────────────────────────────────────────── */
body.lumen.pg-prodadmin .empty-state {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
}

body.lumen.pg-prodadmin .empty-state-icon {
  color: var(--ink-faint) !important;
}

body.lumen.pg-prodadmin .empty-state-title {
  color: var(--ink) !important;
}

body.lumen.pg-prodadmin .empty-state-text {
  color: var(--ink-soft) !important;
}

/* ── TOAST ─────────────────────────────────────────────────── */
body.lumen.pg-prodadmin #toast {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-3) !important;
}

body.lumen.pg-prodadmin #toast.error {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}

/* ── INACTIVE GROUP TOGGLE ─────────────────────────────────── */
body.lumen.pg-prodadmin .inactive-toggle {
  color: var(--ink-soft) !important;
}

body.lumen.pg-prodadmin .inactive-toggle:hover {
  color: var(--ink) !important;
}

/* ============================================================
   LUMEN PAGE OVERRIDES — casting_form_builder.html
   Page-specific components not covered by casting.css.
   Re-skins the dark brutalist builder for the ivory canvas.
   ============================================================ */

/* ── BREADCRUMB BAR ─────────────────────────────────────── */
body.lumen.pg-formbuilder .breadcrumb-bar {
  background: var(--canvas-2) !important;
  border-bottom: 1px solid var(--line) !important;
}
body.lumen.pg-formbuilder .breadcrumb-item { color: var(--ink-faint) !important; }
body.lumen.pg-formbuilder .breadcrumb-item:hover { color: var(--ink) !important; }
body.lumen.pg-formbuilder .breadcrumb-sep { color: var(--line-2) !important; }
body.lumen.pg-formbuilder .breadcrumb-current { color: var(--ink) !important; }

/* ── PAGE TITLE ─────────────────────────────────────────── */
body.lumen.pg-formbuilder .page-title { color: var(--ink) !important; }
body.lumen.pg-formbuilder .page-title-meta { color: var(--ink-faint) !important; }
body.lumen.pg-formbuilder .page-title-meta .prod-badge { color: var(--accent-deep) !important; }

/* ── SECTION PANELS ─────────────────────────────────────── */
body.lumen.pg-formbuilder .panel {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
  overflow: hidden;
}
body.lumen.pg-formbuilder .panel-header {
  border-bottom: 1px solid var(--line) !important;
  background: var(--canvas-2) !important;
}
body.lumen.pg-formbuilder .panel-title { color: var(--accent-deep) !important; }
/* Preview panel title is intentionally muted */
body.lumen.pg-formbuilder .preview-panel .panel-title { color: var(--ink-faint) !important; }

/* ── BUTTONS ────────────────────────────────────────────── */
body.lumen.pg-formbuilder .btn { border-width: 1px !important; border-radius: var(--radius-sm) !important; }

body.lumen.pg-formbuilder .btn-acid {
  background: var(--accent) !important;
  border-color: var(--accent-deep) !important;
  color: var(--ink) !important;
}
body.lumen.pg-formbuilder .btn-acid:hover {
  background: var(--ink) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-2) !important;
}

body.lumen.pg-formbuilder .btn-ghost {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-soft) !important;
}
body.lumen.pg-formbuilder .btn-ghost:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-1) !important;
}

body.lumen.pg-formbuilder .btn-danger {
  background: var(--surface) !important;
  border-color: rgba(200,40,40,0.35) !important;
  color: var(--danger) !important;
}
body.lumen.pg-formbuilder .btn-danger:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  box-shadow: var(--shadow-1) !important;
}

/* ── QUESTION CARDS ─────────────────────────────────────── */
body.lumen.pg-formbuilder .question-card {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .question-card.drag-over {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

body.lumen.pg-formbuilder .q-drag-handle { color: var(--ink-faint) !important; }
body.lumen.pg-formbuilder .q-drag-handle:hover { color: var(--ink) !important; }

body.lumen.pg-formbuilder .q-type-badge {
  border: 1px solid var(--line-2) !important;
  color: var(--ink-faint) !important;
  border-radius: var(--radius-sm) !important;
}

body.lumen.pg-formbuilder .q-label { color: var(--ink) !important; }
body.lumen.pg-formbuilder .q-label.empty { color: var(--ink-faint) !important; }
body.lumen.pg-formbuilder .q-required-star { color: var(--accent-deep) !important; }

/* Question action icon buttons */
body.lumen.pg-formbuilder .q-icon-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-soft) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .q-icon-btn:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}
body.lumen.pg-formbuilder .q-icon-btn.danger:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
body.lumen.pg-formbuilder .q-icon-btn.active {
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
}

/* ── INLINE EDIT EXPAND PANEL ───────────────────────────── */
body.lumen.pg-formbuilder .q-edit-panel {
  border-top: 1px solid var(--line) !important;
  background: var(--canvas-2) !important;
}

/* Field micro-labels stay mono, recolored to readable ink-soft (ink-faint
   was too low-contrast against the light surface — hard to read) */
body.lumen.pg-formbuilder .field-label { color: var(--ink-soft) !important; }

/* Edit-panel text & select inputs */
body.lumen.pg-formbuilder .field-input {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .field-input:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
/* Recolor the select chevron arrow (was hard-coded grey %23888) */
body.lumen.pg-formbuilder select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111111'/%3E%3C/svg%3E") !important;
}

/* ── TOGGLE SWITCH ──────────────────────────────────────── */
body.lumen.pg-formbuilder .toggle-label { color: var(--ink-soft) !important; }
body.lumen.pg-formbuilder .toggle-track {
  background: var(--surface-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
}
body.lumen.pg-formbuilder .toggle-track::after {
  background: var(--ink-faint) !important;
  border-radius: 50%;
}
body.lumen.pg-formbuilder .toggle-switch input:checked + .toggle-track {
  background: var(--accent-soft) !important;
  border-color: var(--accent-deep) !important;
}
body.lumen.pg-formbuilder .toggle-switch input:checked + .toggle-track::after {
  background: var(--accent-deep) !important;
}

/* ── OPTIONS LIST ───────────────────────────────────────── */
body.lumen.pg-formbuilder .options-label { color: var(--ink-soft) !important; }
body.lumen.pg-formbuilder .option-input {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .option-input:focus { border-color: var(--accent-deep) !important; }
body.lumen.pg-formbuilder .option-remove-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-soft) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .option-remove-btn:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* ── EMPTY STATE ────────────────────────────────────────── */
body.lumen.pg-formbuilder #empty-state {
  border: 1px dashed var(--line-2) !important;
  border-radius: var(--radius) !important;
  background: var(--canvas-2) !important;
}
body.lumen.pg-formbuilder .empty-icon { color: var(--ink-faint) !important; }
body.lumen.pg-formbuilder .empty-title { color: var(--ink) !important; }
body.lumen.pg-formbuilder .empty-text { color: var(--ink-soft) !important; }

/* ── PREVIEW COLUMN ─────────────────────────────────────── */
body.lumen.pg-formbuilder .preview-standard-note {
  color: var(--ink-faint) !important;
  border: 1px dashed var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .pv-label { color: var(--ink-faint) !important; }
body.lumen.pg-formbuilder .pv-required-mark { color: var(--accent-deep) !important; }

/* Disabled preview inputs — muted but readable on ivory */
body.lumen.pg-formbuilder .pv-input,
body.lumen.pg-formbuilder .pv-select {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-faint) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .pv-option-box {
  border: 1px solid var(--line-2) !important;
  background: var(--surface-2) !important;
}
body.lumen.pg-formbuilder .pv-option-text { color: var(--ink-soft) !important; }
body.lumen.pg-formbuilder .pv-empty { color: var(--ink-faint) !important; }

body.lumen.pg-formbuilder .pv-apply-link { border-top: 1px solid var(--line) !important; }
body.lumen.pg-formbuilder .pv-apply-link a { color: var(--accent-deep) !important; }
body.lumen.pg-formbuilder .pv-apply-link a:hover { border-bottom-color: var(--accent-deep) !important; }

/* ── SAVE BAR (fixed footer) ────────────────────────────── */
body.lumen.pg-formbuilder .save-bar {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: var(--shadow-2) !important;
}
body.lumen.pg-formbuilder .save-bar-info { color: var(--ink-soft) !important; }

/* Unsaved badge — tasteful warn tint instead of dark amber */
body.lumen.pg-formbuilder .unsaved-badge {
  border: 1px solid rgba(180,120,0,0.4) !important;
  background: rgba(255,170,0,0.10) !important;
  color: var(--warn) !important;
  border-radius: var(--radius-sm) !important;
}

/* Primary save button */
body.lumen.pg-formbuilder .btn-save {
  background: var(--accent) !important;
  border: 1px solid var(--accent-deep) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-formbuilder .btn-save:hover {
  background: var(--ink) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-3) !important;
}

/* ── TOAST ──────────────────────────────────────────────── */
body.lumen.pg-formbuilder #toast {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-3) !important;
}
body.lumen.pg-formbuilder #toast.error {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}

/* ============================================================
   LUMEN PAGE OVERRIDES — casting_import.html
   Page-specific components not covered by casting.css.
   Paste at the end of casting.css (loads after inline <style>).
   ============================================================ */

/* Hero heading — oversized uppercase reads heavy on ivory; keep
   scale but soften to ink and drop the all-caps shout. */
body.lumen.pg-import h1 {
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: -0.03em !important;
}

/* Mono sub-label under the title */
body.lumen.pg-import .page-sub {
  color: var(--ink-faint) !important;
}

/* ── Card (3px paper border on dark) → light surface panel ── */
body.lumen.pg-import .card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-import .card-title {
  color: var(--accent-deep) !important;
}
body.lumen.pg-import .card-body {
  color: var(--ink-soft) !important;
}
body.lumen.pg-import .card-body strong {
  color: var(--ink) !important;
}

/* Inline path/code chip — dark translucent fill → soft tint */
body.lumen.pg-import .path-tag {
  background: var(--canvas-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

/* ── Primary button — acid fill on dark ink text ── */
body.lumen.pg-import .btn {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius-sm) !important;
}
/* Hard offset shadow on hover → soft lift, no nudge transform */
body.lumen.pg-import .btn:hover:not(:disabled) {
  box-shadow: var(--shadow-2) !important;
  transform: none !important;
}
body.lumen.pg-import .btn:active:not(:disabled) {
  box-shadow: var(--shadow-1) !important;
  transform: none !important;
}

/* Ghost button — paper border/text → ink outline on surface */
body.lumen.pg-import .btn-ghost {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
body.lumen.pg-import .btn-ghost:hover:not(:disabled) {
  box-shadow: var(--shadow-2) !important;
  border-color: var(--accent-deep) !important;
}

/* ── Progress section — 3px acid border box ── */
body.lumen.pg-import #progress-section {
  background: var(--surface) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-import .progress-label {
  color: var(--accent-deep) !important;
}
/* Progress track — dark translucent rail → muted canvas rail */
body.lumen.pg-import .progress-track {
  background: var(--canvas-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-import .progress-fill {
  background: var(--accent) !important;
}
body.lumen.pg-import .progress-status {
  color: var(--ink) !important;
}
body.lumen.pg-import .progress-count {
  color: var(--ink-faint) !important;
}

/* ── Result banner — colored 3px border + bright color text ── */
body.lumen.pg-import #result-banner {
  border-width: 1px !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-import #result-banner.ok {
  background: rgba(46, 160, 67, 0.10) !important;
  border-color: var(--ok) !important;
  color: var(--ok) !important;
}
body.lumen.pg-import #result-banner.err {
  background: rgba(200, 50, 50, 0.08) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* ── Error log — 2px red translucent border on dark ── */
body.lumen.pg-import #error-log {
  background: rgba(200, 50, 50, 0.05) !important;
  border: 1px solid rgba(200, 50, 50, 0.30) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-import .error-log-title {
  color: var(--danger) !important;
}
body.lumen.pg-import .error-item {
  color: var(--danger) !important;
  border-bottom: 1px solid rgba(200, 50, 50, 0.15) !important;
}

/* ── Stats grid cells — 2px paper-translucent border ── */
body.lumen.pg-import .stat-cell {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-import .stat-num {
  color: var(--accent-deep) !important;
}
body.lumen.pg-import .stat-label {
  color: var(--ink-faint) !important;
}

/* ── Politiskolen folder input (inline-styled dark field) ──
   Inline style="" wins over these for the static values, but the
   id selector lifts specificity; the focus/blur handlers still
   set dark colors via JS, so the template needs an edit too
   (see notes). These cover the resting paint where possible. */
body.lumen.pg-import #politiskolen-dir {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}

/* ============================================================
   LUMEN PAGE OVERRIDES — casting_apply.html
   Page-specific gaps not covered by casting.css shared skin.
   Paste at the END of casting.css (after the shared rules).
   ============================================================ */

/* ── Company logo: dark-tuned opacity reads fine on ivory, but
      lift it to full strength so light-on-light logos stay crisp ── */
body.lumen.pg-apply .company-logo { opacity: 1 !important; }

/* ── PROD HEADER BLOCK: 3px paper rule -> hairline ── */
body.lumen.pg-apply .prod-header {
  border-bottom: 1px solid var(--line-2) !important;
}
body.lumen.pg-apply .prod-eyebrow {
  color: var(--accent-deep) !important;   /* acid -> readable lime */
}
body.lumen.pg-apply .prod-title {
  color: var(--ink) !important;            /* was paper (near-white) */
}
body.lumen.pg-apply .prod-meta {
  color: var(--ink-faint) !important;      /* mono micro-label */
}
body.lumen.pg-apply .prod-meta span::before {
  color: var(--accent-deep) !important;    /* acid dash */
}

/* ── STATE SCREENS (success / closed): 3px paper border, acid title ── */
body.lumen.pg-apply .state-box {
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-apply .state-icon {
  color: var(--accent-deep) !important;
}
body.lumen.pg-apply .state-title {
  color: var(--accent-deep) !important;    /* was acid on dark */
}
body.lumen.pg-apply .state-text {
  color: var(--ink-soft) !important;
}
body.lumen.pg-apply .state-box.closed .state-title {
  color: var(--ink) !important;            /* was paper */
}
body.lumen.pg-apply .state-box.closed .state-icon {
  color: var(--ink-faint) !important;      /* was ash */
}

/* ── ERROR BOX: 3px red border + dark-tinted fill -> soft danger tint ── */
body.lumen.pg-apply .error-box {
  border: 1px solid var(--danger) !important;
  background: rgba(220,38,38,0.08) !important;   /* soft --danger tint */
  color: var(--danger) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── FORM SECTION: 3px invisible-on-light border ── */
body.lumen.pg-apply .form-section {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-apply .section-heading {
  color: var(--accent-deep) !important;          /* acid -> readable lime */
  border-bottom: 1px solid var(--line) !important;
}

/* ── LABELS: mono micro-label + acid required marker ── */
body.lumen.pg-apply label {
  color: var(--ink-faint) !important;
}
body.lumen.pg-apply label .req {
  color: var(--accent-deep) !important;
}

/* ── INPUT FOCUS / INVALID: hard offset shadows -> soft glow rings.
      (Base input/select/textarea is shared — only the offset shadows
       and the dark <option> surface are page-specific gaps.) ── */
body.lumen.pg-apply input:focus,
body.lumen.pg-apply select:focus,
body.lumen.pg-apply textarea:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;   /* was 4px 4px 0 acid */
}
body.lumen.pg-apply input.invalid,
body.lumen.pg-apply select.invalid,
body.lumen.pg-apply textarea.invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18) !important; /* was 4px 4px 0 red */
}

/* Dark <option> dropdown surface -> light surface */
body.lumen.pg-apply select option {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* Date picker indicator was invert(1) for a dark UI — drop the invert
   so the glyph is dark on the light field */
body.lumen.pg-apply input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.55 !important;
}

/* ── FILE DROP ZONE: 3px dashed invisible border + acid offset shadow ── */
body.lumen.pg-apply .drop-zone {
  border: 1px dashed var(--line-2) !important;
  background: var(--canvas-2) !important;
  border-radius: var(--radius) !important;
}
body.lumen.pg-apply .drop-zone:hover,
body.lumen.pg-apply .drop-zone.drag-over {
  border-color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--shadow-2) !important;          /* was 4px 4px 0 acid */
}
body.lumen.pg-apply .drop-zone-label {
  color: var(--accent-deep) !important;            /* acid -> readable lime */
}
body.lumen.pg-apply .drop-zone-hint {
  color: var(--ink-faint) !important;
}

/* ── IMAGE THUMBS (NOT the shared .thumb-item profile thumb — these are
      the upload-preview img + remove button, page-specific) ── */
body.lumen.pg-apply .thumb-item img {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-apply .thumb-remove {
  background: rgba(11,11,11,0.72) !important;       /* keep dark scrim over photo */
  color: #fff !important;
  border-radius: 0 var(--radius-sm) 0 var(--radius-sm) !important;
}
body.lumen.pg-apply .thumb-remove:hover {
  background: var(--danger) !important;
}

/* ── SUBMIT AREA: 3px paper top rule ── */
body.lumen.pg-apply .submit-area {
  border-top: 1px solid var(--line-2) !important;
}
/* .btn-submit base is shared, but its dark-theme hover offset shadow is
   a page-specific gap — soften it */
body.lumen.pg-apply .btn-submit:hover:not(:disabled) {
  box-shadow: var(--shadow-2) !important;           /* was 6px 6px 0 acid */
}

/* ── FOOTER NOTE: mono micro-label + 3px accent rule ── */
body.lumen.pg-apply .footer-note {
  color: var(--ink-faint) !important;
  border-left: 2px solid var(--accent-deep) !important;
}

/* ── SAMTYKKE / CONSENT: dark border + dark-tinted fill, paper text ── */
body.lumen.pg-apply .consent-wrap {
  border: 1px solid var(--line) !important;
  background: var(--canvas-2) !important;
  border-radius: var(--radius) !important;
}
body.lumen.pg-apply .consent-check {
  accent-color: var(--accent-deep) !important;
}
body.lumen.pg-apply .consent-text {
  color: var(--ink) !important;                     /* was paper (near-white) */
}
body.lumen.pg-apply .consent-note {
  color: var(--ink-faint) !important;               /* was ash */
}

/* ── CUSTOM-QUESTION RADIO / CHECKBOX option labels.
      These carry an INLINE color via var(--dk-mono) font only (no inline
      color), so a class rule wins — color the mono labels + accent inputs ── */
body.lumen.pg-apply .radio-opt,
body.lumen.pg-apply .checkbox-opt {
  color: var(--ink-soft) !important;
}
body.lumen.pg-apply .radio-opt input,
body.lumen.pg-apply .checkbox-opt input {
  accent-color: var(--accent-deep) !important;
}

/* ============================================================
   LUMEN PAGE OVERRIDES — casting_register.html
   Page-specific components not covered by casting.css.
   Paste at the END of casting.css (after shared-component rules).
   ============================================================ */

/* ── Back strip (sticky top bar) ──────────────────────────────
   Was: full lime fill with a 3px near-black (--bg) bottom border,
   black link text. On ivory keep it as a light hairline strip. */
body.lumen.pg-register #back-strip {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line-2) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-register #back-strip a {
  color: var(--ink) !important;
}

/* ── Logo / wordmark accents ──────────────────────────────────
   logo-sep & logo-sub used raw --ac (bright lime) as TEXT — too
   pale on ivory. Use the readable lime. Main wordmark -> ink. */
body.lumen.pg-register .logo-main { color: var(--ink) !important; }
body.lumen.pg-register .logo-sep  { color: var(--line-2) !important; }
body.lumen.pg-register .logo-sub  { color: var(--ink) !important; }

/* ── Page subtitle / notice (mono micro-labels & dividers) ──── */
body.lumen.pg-register .page-subtitle {
  color: var(--ink-faint) !important;
  border-top: 1px solid var(--line) !important;
}
body.lumen.pg-register .page-notice {
  color: var(--ink-soft) !important;
  border-left: 3px solid var(--accent-soft) !important;
}

/* ── Success banner ───────────────────────────────────────────
   Was: translucent dark paper fill + 3px lime border + lime title.
   On ivory: white card, soft lime tint border, readable lime title. */
body.lumen.pg-register .success-banner {
  background: var(--surface) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-2) !important;
}
body.lumen.pg-register .success-stars { color: var(--accent-deep) !important; }
body.lumen.pg-register .success-title { color: var(--ink) !important; }
body.lumen.pg-register .success-text  { color: var(--ink-soft) !important; }

/* ── Form section cards ───────────────────────────────────────
   Was: 3px translucent (near-invisible-on-light) border, no bg.
   Give them a real white surface + hairline + radius. */
body.lumen.pg-register .form-section {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 28px 28px 22px !important;
}
body.lumen.pg-register .section-heading {
  color: var(--accent-deep) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ── Labels (mono micro-labels) & required marker ───────────── */
body.lumen.pg-register label { color: var(--ink-faint) !important; }
body.lumen.pg-register label .req { color: var(--accent-deep) !important; }

/* ── Inputs / selects / textarea ──────────────────────────────
   Was: translucent dark input-bg, 2px translucent border, square,
   focus ring = bright lime. (Generic inputs may be skinned by
   casting.css, but these carry square corners + 2px borders +
   dark <option> + the SVG arrow tinted for a dark bg — re-skin.) */
body.lumen.pg-register #casting-form input[type="text"],
body.lumen.pg-register #casting-form input[type="email"],
body.lumen.pg-register #casting-form input[type="tel"],
body.lumen.pg-register #casting-form input[type="url"],
body.lumen.pg-register #casting-form input[type="number"],
body.lumen.pg-register #casting-form input[type="date"],
body.lumen.pg-register #casting-form select,
body.lumen.pg-register #casting-form textarea {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-register #casting-form input:focus,
body.lumen.pg-register #casting-form select:focus,
body.lumen.pg-register #casting-form textarea:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
body.lumen.pg-register #casting-form input.invalid,
body.lumen.pg-register #casting-form select.invalid,
body.lumen.pg-register #casting-form textarea.invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(214,69,69,0.18) !important;
}
/* Select dropdown arrow re-tinted for light bg (was %239E9B90 grey) */
body.lumen.pg-register #casting-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
}
/* Native <option> menu surface was hard-coded #1a1a1a (dark) */
body.lumen.pg-register #casting-form select option {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* ── Radio / checkbox swatches ────────────────────────────────
   Had a 2px translucent border + dark input-bg + lime accent. */
body.lumen.pg-register .radio-opt, body.lumen.pg-register .check-opt { color: var(--ink) !important; }
body.lumen.pg-register .radio-opt input[type="radio"],
body.lumen.pg-register .check-opt input[type="checkbox"] {
  accent-color: var(--accent-deep) !important;
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
}

/* ── File drop zones ──────────────────────────────────────────
   Dashed translucent border + dark input-bg; hover used raw lime
   wash. Light: dashed hairline on muted canvas, soft lime hover. */
body.lumen.pg-register .drop-zone {
  background: var(--canvas-2) !important;
  border: 2px dashed var(--line-2) !important;
  border-radius: var(--radius) !important;
}
body.lumen.pg-register .drop-zone:hover,
body.lumen.pg-register .drop-zone.drag-over {
  border-color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
}
body.lumen.pg-register .drop-zone-label { color: var(--accent-deep) !important; }
body.lumen.pg-register .drop-zone-hint  { color: var(--ink-soft) !important; }
/* CV filename feedback uses inline style color:var(--text-muted) — see notes */

/* ── Image thumbnails ─────────────────────────────────────────
   2px translucent border + opaque-black remove button. */
body.lumen.pg-register .thumb-item img {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-register .thumb-remove {
  background: rgba(26,22,18,0.72) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-register .thumb-remove:hover { background: var(--danger) !important; }

/* ── Guardian section (under-18 callout) ──────────────────────
   Was: translucent lime border + lime wash + a SOLID lime badge
   with dark text. Light: soft lime tinted panel + readable badge. */
body.lumen.pg-register #guardian-section {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius) !important;
}
body.lumen.pg-register .guardian-badge {
  background: var(--accent-deep) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Upload progress bar ──────────────────────────────────────
   Track used --border (invisible on ivory); fill raw lime. */
body.lumen.pg-register .progress-label { color: var(--ink-faint) !important; }
body.lumen.pg-register .progress-track {
  background: var(--canvas-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-register .progress-fill { background: var(--accent-deep) !important; }

/* ── Submit area divider & legal text ─────────────────────────
   3px translucent top border -> hairline. */
body.lumen.pg-register .submit-area {
  border-top: 1px solid var(--line) !important;
}
body.lumen.pg-register .submit-legal { color: var(--ink-soft) !important; }

/* ── Submit button ────────────────────────────────────────────
   Solid lime fill + 3px lime border + dark (--bg) text; hover
   inverts to dark bg + lime text; spinner ring tuned for dark.
   (.btn-submit MAY be shared — this page also sets a 3px border &
   dark text token; re-skin for safety on the lime fill.) */
body.lumen.pg-register #casting-form .btn-submit {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1) !important;
}
body.lumen.pg-register #casting-form .btn-submit:hover:not(:disabled) {
  background: var(--accent-deep) !important;
  color: #fff !important;
}
body.lumen.pg-register #casting-form .btn-spinner {
  border: 3px solid rgba(26,22,18,0.25) !important;
  border-top-color: var(--ink) !important;
}

/* ── Validation error summary ─────────────────────────────────
   2px error border + translucent red wash + red text — fine in
   hue but harmonize with token + add radius/light tint. */
body.lumen.pg-register #error-summary {
  background: rgba(214,69,69,0.08) !important;
  border: 1px solid var(--danger) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--danger) !important;
}

/* ── Divider hr ───────────────────────────────────────────────
   1px translucent line -> visible hairline. */
body.lumen.pg-register .divider {
  border-top: 1px solid var(--line) !important;
}

/* ============================================================
   login.html — Lumen page-specific overrides
   (paste into casting.css, after the shared-component rules)
   ============================================================ */

/* Login card: dark #141414 surface + 3px paper border -> white card on ivory */
body.lumen.pg-login .login-card {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
}

/* Wordmark: oversized uppercase ink, keep it bold but on-canvas */
body.lumen.pg-login .login-wordmark {
  color: var(--ink) !important;
}

/* Mono sub-label: was dark-ash, keep micro mono but faint ink */
body.lumen.pg-login .login-sub {
  color: var(--ink-faint) !important;
}

/* Field labels: dark-ash mono micro-labels -> faint ink */
body.lumen.pg-login label {
  color: var(--ink-faint) !important;
}

/* Inputs/selects: translucent-white-on-dark + 2px translucent paper border
   -> clean light field (generic inputs are themed by casting.css, but these
   page-scoped rules win on specificity, so restate them) */
body.lumen.pg-login select,
body.lumen.pg-login input {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-login select:focus,
body.lumen.pg-login input:focus {
  border-color: var(--accent-deep) !important;
}

/* Native option list: dark #1a1a1a dropdown surface -> light */
body.lumen.pg-login select option {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* Primary submit button: lime fill is fine, but ink-on-lime + hard offset
   shadow needs softening; 3px lime border -> readable accent-deep hairline */
body.lumen.pg-login button {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-login button:hover {
  box-shadow: var(--shadow-2) !important;
}

/* Google SSO button: dark-paper fill + 3px border + hard lime offset shadow
   -> white surface, hairline, soft shadow */
body.lumen.pg-login .google-btn {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
}
body.lumen.pg-login .google-btn:hover {
  box-shadow: var(--shadow-2) !important;
}

/* Error message: raw #ff5555 -> token danger */
body.lumen.pg-login .login-msg {
  color: var(--danger) !important;
}

/* Footnote: translucent grey -> faint ink, keep mono micro */
body.lumen.pg-login .login-note {
  color: var(--ink-faint) !important;
}


/* ── FIX: egendefinert <select>-pil skal ikke tile (bakgrunn-shorthand nullstilte repeat) ── */
body.lumen select {
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px auto !important;
  padding-right: 34px !important;
}


/* ── FIX (spesifikk): custom <select>-pil må ikke tile, matcher side-spesifikk specificity ── */
body.lumen.pg-register #casting-form select,
body.lumen.pg-formbuilder select.field-input,
body.lumen.pg-project .form-select,
body.lumen.pg-projects .form-select,
body.lumen .filter-select,
body.lumen .edit-select {
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px auto !important;
  padding-right: 34px !important;
}


/* ── NØYTRALT TEMA: lys tekst på grafitt-fylte side-knapper (aksent ble mørk) ── */
body.lumen.pg-import .btn,
body.lumen.pg-formbuilder .btn-acid,
body.lumen.pg-formbuilder .btn-save,
body.lumen.pg-prodadmin .btn-save-config,
body.lumen.pg-register #casting-form .btn-submit,
body.lumen.pg-login button {
  color: var(--on-accent) !important;
}
body.lumen.pg-import .btn:hover:not(:disabled),
body.lumen.pg-formbuilder .btn-acid:hover,
body.lumen.pg-formbuilder .btn-save:hover,
body.lumen.pg-register #casting-form .btn-submit:hover:not(:disabled),
body.lumen.pg-login button:hover,
body.lumen.pg-project .btn-primary:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--on-accent) !important;
}
