/* Nexus Global CSS */
/* Projektmappe: Nexus.UI.Shared/wwwroot/css */
/* Fil: nexus.css */
/* Formål: Den ene kilde for Nexus' designtokens (light + dark), MudBlazor-tilpasningen og
   Nexus V2-skallens og -primitivernes CSS. Designguiden er
   docs/product/designs/nexus-v2-visual-language.md; whitelisten er docs/ai-agents/TOKENS.md. */

/* ============================================
   TOKENS (plan 2026-10-20 fase D1)
   ============================================

   Ét tokenlag for UI-kode: --ui-*, --space-*, --radius-* (TOKENS.md). Opbygning:

   1. :root (denne blok) baerer V2's LYSE vaerdier som literaler. Ikke alt ligger inde i
      .kartograf-root: de standalone dev-hosts (Characters/Chat/Items) og portal-indhold uden
      .kartograf-pop falder tilbage hertil og skal se V2 ud, ikke en anden palette.
   2. Dark-vaerdierne staar under ÉT dark-selektorsaet laengere nede (Nexus V2 dark mode):
      .kartograf-root/.kartograf-pop under [data-theme="dark"] paa <html> samt
      .kartograf-root.dark og .kartograf-pop.dark.
   3. Afledte tokens (var()/color-mix() af andre tokens) staar i ":root, .kartograf-root,
      .kartograf-pop", saa de genberegnes i dark-scopet i stedet for at arve den lyse vaerdi.

   Figma-basislaget (--background, --foreground, --card, --primary, --secondary, --muted,
   --accent, --destructive, --border, --ring), den gamle .dark-blok og de gamle aliaser
   (--font-size, --text-*, --switch-*) er fjernet i fase D1.

   Kompat-laget (--font-*, --motion-*, --shadow-*, --z-*) staar kun tilbage, fordi modul-CSS
   stadig bruger det (taelles som flavorleak; plan fase E migrerer, fase F sletter). nexus.css
   selv bruger det ikke. Ny kode bruger --ui-*-navnene.
*/
:root {
  /* --- Spacing (ENESTE tilladte afstande; TOKENS.md § 3) ---
     2026-09-20: --space-2xs og --space-sm-md tilfoejet (taette vaerktoejsflader). --space-3xl
     (48px) er H123 fase 2e's niende trin. Mangler en vaerdi, bruges en calc()-sum af tokens,
     fx calc(var(--space-sm) + var(--space-2xs)) = 10px - foretraek altid ét token. */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-sm-md: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;

  /* --- Radius (halvtrin = midtpunkt mellem to trin, som for skriftstoerrelser) --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --ui-radius: 5px; /* V2's standardradius - spejler KartografTheme.DefaultBorderRadius */

  /* --- Typografi ---
     Familier: Georgia/Inter indlaeses ikke som webfonte (Inter falder tilbage til Segoe UI/system-ui). */
  --ui-font-display: Georgia, 'Times New Roman', serif;
  --ui-font-sans: Inter, 'Segoe UI', system-ui, sans-serif;
  --ui-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  /* Skriftstoerrelser. Skalaen er udledt af de vaerdier V2-skallen og -primitiverne faktisk
     bruger (fase D1-audit). Et halvtrin skrives som midtpunktet mellem to trin,
     calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2) = 13.5px - aldrig en literal. */
  --ui-font-size-3xs: 9px;
  --ui-font-size-2xs: 10px;
  --ui-font-size-xs: 11px;
  --ui-font-size-sm: 12px;
  --ui-font-size-sm-md: 13px;
  --ui-font-size-md: 14px;   /* broedtekst (body) */
  --ui-font-size-lg: 16px;   /* rod-stoerrelse (html, 1rem) */
  --ui-font-size-xl: 17px;   /* kort-, sektions- og tomtilstandstitler */
  --ui-font-size-2xl: 20px;
  --ui-font-size-3xl: 24px;
  --ui-font-size-4xl: 28px;  /* sidetitel (k-pagehead) */

  /* Linjehoejde (enhedsloese) */
  --ui-leading-none: 1;
  --ui-leading-compact: 1.19; /* dense labels at the smallest V2 type size */
  --ui-leading-tight: 1.2;
  --ui-leading-snug: 1.4;
  --ui-leading-normal: 1.5;
  --ui-leading-relaxed: 1.6;

  /* Vaegt */
  --ui-font-weight-normal: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;

  /* --- Bevaegelse (nulstilles under prefers-reduced-motion) --- */
  --ui-motion-fast: 0.15s ease;
  --ui-motion-normal: 0.2s ease;

  /* --- Z-index (komplet stige; ubrugte trin beholdes, H123 fase 2c) --- */
  --ui-z-base: 1;
  --ui-z-dropdown: 100;
  --ui-z-sticky: 200;
  --ui-z-fixed: 300;
  --ui-z-modal-backdrop: 400;
  --ui-z-modal: 500;
  --ui-z-popover: 600;
  --ui-z-tooltip: 700;

  /* --- Skygger (dark-vaerdier er staerkere mod moerk grund, H123 fase 2d) --- */
  --ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ui-shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* Geometri til ringe/kanter: bruges som "var(--ui-shadow-ring-2) var(--ui-ring)" (farven er et token) */
  --ui-shadow-ring-1: 0 0 0 1px;
  --ui-shadow-ring-1-5: 0 0 0 1.5px; /* valgt handlingsudfald i Battlemap */
  --ui-shadow-ring-2: 0 0 0 2px;
  --ui-shadow-ring-3: 0 0 0 3px;
  --ui-shadow-ring-4: 0 0 0 4px;
  --ui-shadow-ring-0: 0 0 0 0; /* graph pulse start */
  --ui-shadow-ring-8: 0 0 0 8px; /* graph pulse end */
  --ui-shadow-inset-1: inset 0 0 0 1px;
  --ui-shadow-inset-leading-2: inset 2px 0 0; /* active GM nav */
  --ui-shadow-inset-leading-3: inset 3px 0 0; /* active GM section */
  --ui-shadow-underline: inset 0 -2px 0;   /* aktiv fane */
  --ui-shadow-detail-sm: 0 1px 3px; /* item image controls */
  --ui-shadow-soft-lift: 0 2px 5px; /* kompakt handlingchip */
  --ui-shadow-card-lift: 0 3px 9px; /* kort i Combat-overblik */
  --ui-shadow-card-hover-lift: 0 3px 12px; /* aktivt Combat-kort */
  --ui-shadow-halo: 0 0 16px; /* valgt kort */
  --ui-shadow-avatar-lift: 0 2px 4px; /* token-avatar */
  --ui-shadow-outcome-lift: 0 3px 11px; /* handlingsudfald */
  --ui-shadow-inset-halo: inset 0 0 12px; /* præget udfaldsstempel */
  --ui-shadow-stamp-lift: 0 2px 7px; /* præget udfaldsstempel */
  --ui-shadow-inset-top-1: inset 0 1px 0; /* øvre lyskant */
  --ui-shadow-top-rule-1: 0 -1px 0; /* klæbrig fodlinje */
  --ui-shadow-detail-md: 0 1px 4px; /* item image controls */
  --ui-shadow-compact: 0 4px 12px; /* notebook cards */
  --ui-shadow-graph-lift: 0 6px 18px; /* GM flow nodes */
  --ui-shadow-panel-lift: 0 10px 24px; /* panels and dialogs */
  --ui-shadow-toast-lift: 0 12px 40px; /* status toasts */
  --ui-shadow-dialog-lift: 0 18px 60px; /* large dialogs */
  --ui-shadow-dialog-xl-lift: 0 24px 90px; /* full dialogs */
  --ui-shadow-offset: 1px 2px 0;           /* stemplet maerke (k-item-mark) */
  /* Battlemap shadow geometry. Colors stay in the scoped --bm-* palette. */
  --ui-shadow-geo-0-0-10: 0 0 10px;
  --ui-shadow-geo-0-0-12: 0 0 12px;
  --ui-shadow-geo-0-0-14: 0 0 14px;
  --ui-shadow-geo-0-0-5: 0 0 5px;
  --ui-shadow-geo-0-0-6: 0 0 6px;
  --ui-shadow-geo-0-0-8: 0 0 8px;
  --ui-shadow-geo-0-1-0: 0 1px 0;
  --ui-shadow-geo-0-1-2: 0 1px 2px;
  --ui-shadow-geo-0-2-0-n1: 0 2px 0 -1px;
  --ui-shadow-geo-0-2-6: 0 2px 6px;
  --ui-shadow-geo-0-22-50: 0 22px 50px;
  --ui-shadow-geo-0-4-14: 0 4px 14px;
  --ui-shadow-geo-0-4-16: 0 4px 16px;
  --ui-shadow-geo-0-5-14: 0 5px 14px;
  --ui-shadow-geo-0-6-22: 0 6px 22px;
  --ui-shadow-geo-1-n1-0: 1px -1px 0;
  --ui-shadow-geo-inset-0-1-2: inset 0 1px 2px;
  --ui-shadow-geo-inset-0-14-26: inset 0 14px 26px;
  --ui-shadow-geo-inset-0-2-0: inset 0 2px 0;
  --ui-shadow-geo-inset-0-n10-22: inset 0 -10px 22px;
  --ui-shadow-geo-inset-0-n3-6: inset 0 -3px 6px;
  --ui-shadow-geo-inset-1-0-0: inset 1px 0 0;
  --ui-shadow-geo-inset-14-0-22: inset 14px 0 22px;
  --ui-shadow-geo-inset-n14-0-22: inset -14px 0 22px;
  --ui-shadow-geo-n10-0-30: -10px 0 30px;
  --ui-shadow-geo-n14-0-40: -14px 0 40px;
  --ui-shadow-geo-0-0-0-5: 0 0 0 5px;
  --ui-shadow-geo-0-0-0-6: 0 0 0 6px;
  --ui-shadow-geo-0-0-18: 0 0 18px;
  --ui-shadow-geo-0-0-20: 0 0 20px;
  --ui-shadow-geo-0-0-24: 0 0 24px;
  --ui-shadow-geo-0-0-26: 0 0 26px;
  --ui-shadow-geo-0-0-38: 0 0 38px;
  --ui-shadow-geo-0-0-46: 0 0 46px;
  --ui-shadow-geo-0-14-40: 0 14px 40px;
  --ui-shadow-geo-0-4-8: 0 4px 8px;
  --ui-shadow-geo-0-4-10: 0 4px 10px;
  --ui-shadow-geo-0-4-9: 0 4px 9px;
  --ui-shadow-geo-0-8-22: 0 8px 22px;
  --ui-shadow-geo-inset-0-1-3: inset 0 1px 3px;
  --ui-shadow-geo-0-1-1: 0 1px 1px;
  --ui-shadow-geo-n1-n1-0-0: -1px -1px 0 0;
  --ui-shadow-geo-0-0-11: 0 0 11px;
  --ui-shadow-geo-0-0-3: 0 0 3px;
  --ui-shadow-geo-0-12-26: 0 12px 26px;
  --ui-shadow-geo-0-14-32: 0 14px 32px;
  --ui-shadow-geo-0-18-44: 0 18px 44px;
  --ui-shadow-geo-0-22-30: 0 22px 30px;
  --ui-shadow-geo-0-26-36: 0 26px 36px;
  --ui-shadow-geo-0-30-44: 0 30px 44px;
  --ui-shadow-geo-0-6-20: 0 6px 20px;
  --ui-shadow-geo-0-8-20: 0 8px 20px;
  --ui-shadow-geo-0-8-24: 0 8px 24px;
  --ui-shadow-geo-0-8-26: 0 8px 26px;
  --ui-shadow-geo-0-n2-8: 0 -2px 8px;
  --ui-shadow-geo-inset-0-1-1: inset 0 1px 1px;
  --ui-shadow-geo-inset-0-n2-4: inset 0 -2px 4px;
  --ui-shadow-ring-subtle: 0 0 0 2px color-mix(in srgb, var(--ui-ring) 10%, transparent); /* diskret fokus i Realm-lister */
  --ui-shadow-swatch: inset 0 0 0 1px rgba(255, 255, 255, 0.25); /* lys indre kant paa farveproever; ens i begge temaer */
  --ui-map-pin-card-left: auto; /* datakoordinat erstattes inline paa valgt kortpin */
  --ui-map-pin-card-top: auto;  /* datakoordinat erstattes inline paa valgt kortpin */
  --ui-map-card-x: 18px;        /* GM Workbench: standardplacering, overskrives af pin-data */
  --ui-map-card-y: 18px;

  /* --- Farver: Nexus V2 lys (literaler; spejles af KartografTheme.PaletteLight) --- */
  /* Flader */
  --ui-background: #F7F2E8;          /* desk */
  --ui-background-deep: #E8E0D1;     /* dybere desk-tone (disabled-flader, maerke-baggrund) */
  --ui-surface: #FFFCF5;             /* hoevet kort/vindue */
  --ui-surface-muted: #F7F2E8;       /* kort */
  --ui-surface-subtle: #F7F2E8;      /* papir */
  --ui-backdrop-soft: rgba(0, 0, 0, 0.3);   /* kode-/fejldetaljer */
  --ui-backdrop-strong: rgba(0, 0, 0, 0.5); /* mobil skuffe */
  /* Tekst */
  --ui-text-primary: #14212A;
  --ui-text-secondary: #53616B;
  --ui-text-disabled: #8A969D;       /* MudBlazor ActionDisabled */
  --ui-icon-muted: #757575;          /* menupunkt-ikoner i popovers (MudBlazor action-default) */
  /* Handlinger */
  --ui-action-primary: #205E62;          /* teal */
  --ui-action-primary-text: #FFFCF5;
  --ui-action-primary-subtle: #E3EEEA;   /* lys teal-toning (hover/aktiv flade) */
  --ui-action-secondary: #142A36;        /* navy - ogsaa V2's krom (topbar, vinduesheader) */
  --ui-action-secondary-text: #FFFCF5;
  /* Krom */
  --ui-chrome-deep: #0B1D27;         /* dybeste navy (skygge/overlay paa krom) */
  --ui-chrome-accent: #E6C37E;       /* lys guld paa navy-krom (segl, krom-kanter) */
  /* Tilstande */
  --ui-error: #A2463D;
  --ui-error-text: #FFFCF5;
  /* Kant og fokus */
  --ui-border: #DED4C2;
  --ui-border-hover: #CDBB9B;
  --ui-ring: #205E62;
  /* Status (= KartografTheme Success/Warning/Error/Info) */
  --ui-status-success: #2D7058;
  --ui-status-warning: #B28238;      /* guld */
  --ui-status-accent: #142A36;       /* dekorativ (ikke-alarm) accent: navy i lys */
  --ui-status-error: #A2463D;
  --ui-status-info: #205E62;
  --ui-status-chip-wash: rgba(248, 244, 235, 0.42); /* lys transparent status-chip paa begge V2-flader */

  /* MudSwitch (roed/groen tilstand) */
  --ui-switch-track: transparent;
  --ui-switch-off: #dc2626;          /* red-600 */
  --ui-switch-off-hover: #b91c1c;    /* red-700 */
  --ui-switch-on: #16a34a;           /* green-600 */
  --ui-switch-on-hover: #15803d;     /* green-700 */

  /* Battlemap-krom: bevidst permanent moerk (laeses ens i alle temaer, ligesom --ui-nav-*) */
  --ui-battlemap-surface-elevated: #1A1D22;
  --ui-battlemap-border-hover: #3B424C;

  /* Navigation (slate). BEVIDST konstant i light og dark - ét sted, ingen dark-override
     (TOKENS.md § Navigation tokens). */
  --ui-nav-bg: #1e293b;              /* slate-800 */
  --ui-nav-border: #334155;          /* slate-700 */
  --ui-nav-height: 64px;
  --ui-nav-text: #ffffff;
  --ui-nav-text-muted: #e2e8f0;      /* slate-200 */
  --ui-nav-hover: rgba(71, 85, 105, 0.5); /* slate-700/50 */
  --ui-nav-active: #475569;          /* slate-700 */
  --ui-nav-button-bg: #475569;       /* slate-700 */
  --ui-nav-button-hover: #334155;    /* slate-600 */

  /* Modul-badges (lys flade + moerk ink; dark-parret staar i dark-saettet). Alle par
     WCAG-kontrolleret >= 4.5:1 (H123 fase 3). */
  --ui-module-characters-bg: #eff6ff;   /* blue-50 */
  --ui-module-characters-text: #2563eb; /* blue-600 */
  --ui-module-adventure-bg: #f0fdf4;    /* green-50 */
  --ui-module-adventure-text: #15803d;  /* green-700 - green-600 gav 3.15:1 */
  --ui-module-chat-bg: #f8fafc;         /* slate-50 */
  --ui-module-chat-text: #475569;       /* slate-600 */
  --ui-module-realm-bg: #fffbeb;        /* amber-50 */
  --ui-module-realm-text: #b45309;      /* amber-800 - amber-600 gav 2.07:1 */
  --ui-module-realm-text-hover: #92400e; /* amber-900 - moerkere end hviletilstanden */
  --ui-module-rules-bg: #eef2ff;        /* indigo-50 */
  --ui-module-rules-text: #4f46e5;      /* indigo-600 */
  --ui-module-combat-bg: #fef2f2;       /* red-50 */
  --ui-module-combat-text: #b91c1c;     /* red-700 - red-600 gav 4.41:1 */
  --ui-module-friends-bg: #faf5ff;      /* purple-50 */
  --ui-module-friends-text: #9333ea;    /* purple-600 */

  /* --- Kompat-lag (modul-CSS; plan fase E migrerer, fase F sletter). Ikke til ny kode. --- */
  --font-size-base: var(--ui-font-size-lg);
  --font-weight-normal: var(--ui-font-weight-normal);
  --font-weight-medium: var(--ui-font-weight-medium);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Cinzel', serif;
  --font-lore: 'Cormorant Garamond', serif;
  --motion-fast: var(--ui-motion-fast);
  --motion-normal: var(--ui-motion-normal);
  --z-base: var(--ui-z-base);
  --z-dropdown: var(--ui-z-dropdown);
  --z-sticky: var(--ui-z-sticky);
  --z-fixed: var(--ui-z-fixed);
  --z-modal-backdrop: var(--ui-z-modal-backdrop);
  --z-modal: var(--ui-z-modal);
  --z-popover: var(--ui-z-popover);
  --z-tooltip: var(--ui-z-tooltip);
}

/* Afledte tokens: genberegnes i hvert scope, saa dark-saettet slaar igennem. */
:root,
.kartograf-root,
.kartograf-pop {
  /* Rule Builder-noder (RuleBuilderCanvas/-Toolbox). Semantikken spejler KartografTheme:
     primary=teal, warning=gold, secondary=accent, info=teal, tertiary=gold, text-secondary. */
  --ui-node-default:    var(--ui-action-primary);
  --ui-node-check:      var(--ui-status-warning);
  --ui-node-effekt:     var(--ui-status-accent);
  --ui-node-betingelse: var(--ui-status-info);
  --ui-node-subflow:    var(--ui-status-warning); /* KartografTheme Tertiary; egen "subflow"-farve er stadig aaben (TOKENS.md § 11) */
  --ui-node-resultat:   var(--ui-text-secondary);

  /* ContractVariablesPanel: rolle-farver (input/output/event/missing) med toning */
  --ui-role-input:      var(--ui-action-primary);
  --ui-role-input-bg:   color-mix(in srgb, var(--ui-action-primary) 20%, var(--ui-surface));
  --ui-role-output:     var(--ui-status-warning);
  --ui-role-output-bg:  color-mix(in srgb, var(--ui-status-warning) 20%, var(--ui-surface));
  --ui-role-event:      var(--ui-status-success);
  --ui-role-event-bg:   color-mix(in srgb, var(--ui-status-success) 20%, var(--ui-surface));
  --ui-role-missing:    var(--ui-error);
  --ui-role-missing-bg: color-mix(in srgb, var(--ui-error) 20%, var(--ui-surface));

  /* Skygger farvet af paletten (genberegnes i dark) */
  --ui-shadow-popover: 0 14px 34px color-mix(in srgb, var(--ui-action-secondary) 18%, transparent); /* profilmenu, dockens undermenu */
  --ui-shadow-window: 0 18px 44px color-mix(in srgb, var(--ui-action-secondary) 20%, transparent),
      0 4px 12px color-mix(in srgb, var(--ui-action-secondary) 13%, transparent);                  /* KWindow */
  --ui-shadow-float: 0 18px 42px color-mix(in srgb, var(--ui-action-secondary) 10%, transparent),
      0 2px 10px color-mix(in srgb, var(--ui-text-primary) 7%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--ui-surface) 92%, transparent);                     /* svaevende dock og chat-dock */
  --ui-shadow-raised: 0 10px 20px color-mix(in srgb, var(--ui-action-secondary) 16%, transparent); /* dockens fjerpen-knap */
  --ui-shadow-active: 0 8px 18px color-mix(in srgb, var(--ui-action-primary) 12%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--ui-action-primary) 16%, transparent);              /* aktivt dock-punkt */
  --ui-shadow-soft: 0 4px 12px color-mix(in srgb, var(--ui-action-secondary) 5%, transparent);   /* chat-systembesked */
  --ui-shadow-chrome: 0 2px 0 color-mix(in srgb, var(--ui-chrome-deep) 42%, transparent);        /* topbjaelkens underkant */
  --ui-shadow-focus: var(--ui-shadow-ring-3) color-mix(in srgb, var(--ui-action-primary) 16%, transparent); /* fokusring paa felter */
  --ui-shadow-stamp: var(--ui-shadow-offset) color-mix(in srgb, var(--ui-border-hover) 40%, transparent);   /* k-item-mark */
  --ui-shadow-stamp-hover: var(--ui-shadow-ring-2) color-mix(in srgb, var(--ui-action-primary) 24%, transparent), var(--ui-shadow-stamp);
  --ui-shadow-crit: var(--ui-shadow-ring-1) color-mix(in srgb, var(--ui-status-success) 55%, transparent);  /* kritisk slag i chat */
  --ui-shadow-fumble: var(--ui-shadow-ring-1) color-mix(in srgb, var(--ui-error) 55%, transparent);         /* fumle i chat */
  --ui-shadow-map-label: 0 1px 3px color-mix(in srgb, var(--ui-text-primary) 80%, transparent); /* kortetiket paa illustration */

  /* Kompat: skygger skal foelge dark-saettet, derfor her og ikke i :root-blokken */
  --shadow-sm: var(--ui-shadow-sm);
  --shadow-md: var(--ui-shadow-md);
  --shadow-lg: var(--ui-shadow-lg);
}

/* ============================================
   REDUCED MOTION (H123 fase 2b, 2026-09-21)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-motion-fast: 0s;
        --ui-motion-normal: 0s;
    }
}

/* ============================================
   BASE / RESET STYLES
   ============================================ */

html {
    font-size: var(--ui-font-size-lg);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Forhindrer scroll på body/html - kun specifikke containere skal scrolles */
}

body {
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-md);
    color: var(--ui-text-primary);
    background-color: var(--ui-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    border-color: var(--ui-border);
    outline-color: color-mix(in srgb, var(--ui-ring) 50%, transparent);
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
:where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
    h1 {
        font-size: var(--ui-font-size-3xl);
        font-weight: var(--ui-font-weight-medium);
        line-height: var(--ui-leading-normal);
    }

    h2 {
        font-size: var(--ui-font-size-2xl);
        font-weight: var(--ui-font-weight-medium);
        line-height: var(--ui-leading-normal);
    }

    h3 {
        font-size: calc((var(--ui-font-size-lg) + var(--ui-font-size-2xl)) / 2);
        font-weight: var(--ui-font-weight-medium);
        line-height: var(--ui-leading-normal);
    }

    h4 {
        font-size: var(--ui-font-size-lg);
        font-weight: var(--ui-font-weight-medium);
        line-height: var(--ui-leading-normal);
    }

    label {
        font-size: var(--ui-font-size-lg);
        font-weight: var(--ui-font-weight-medium);
        line-height: var(--ui-leading-normal);
    }

    button {
        font-size: var(--ui-font-size-lg);
        font-weight: var(--ui-font-weight-medium);
        line-height: var(--ui-leading-normal);
    }

    input {
        font-size: var(--ui-font-size-lg);
        font-weight: var(--ui-font-weight-normal);
        line-height: var(--ui-leading-normal);
    }
}

/* ============================================
   GLOBAL SCROLLING SUPPORT
   ============================================
   Indhold maa vokse og scrolle i lange formularer og redigeringsflader; de indre
   flader (.k-shell-body, vinduernes .kwin-body) scroller selv. */

.mud-container {
    min-height: 0;
    padding-bottom: var(--space-xl);
    height: auto;
}

.mud-card {
    overflow: visible;
    height: auto;
}

.mud-card-content {
    overflow: visible;
}

.mud-container[class*="detail-container"],
.mud-container[class*="create-container"],
.mud-container[class*="edit-container"] {
    padding-bottom: var(--space-3xl);
}

.mud-card.mt-4 {
    margin-bottom: var(--space-xl);
}

.mud-card.mt-4 .mud-card-content {
    padding-bottom: var(--space-lg);
}

/* Standalone dev-hosten Nexus.Chat.Browser (MainLayout) */
.fill-height {
    height: 100vh;
    width: 100vw;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, .h1 {
    font-family: var(--ui-font-display);
    font-weight: var(--ui-font-weight-semibold);
    font-size: var(--ui-font-size-3xl);
    color: var(--ui-text-primary);
}

h2, .h2 {
    font-family: var(--ui-font-sans);
    font-weight: var(--ui-font-weight-semibold);
    font-size: var(--ui-font-size-2xl);
    color: var(--ui-text-primary);
}

h3, .h3 {
    font-family: var(--ui-font-sans);
    font-weight: var(--ui-font-weight-semibold);
    font-size: calc((var(--ui-font-size-lg) + var(--ui-font-size-2xl)) / 2);
    color: var(--ui-text-primary);
}

/* ============================================
   DELTE HJAELPEKLASSER
   Generiske sektions-/statistik-/tomtilstandsklasser, som flere moduler bruger
   (Adventure, Timeline, Combat TokenDrawer, chat-oversigten).
   ============================================ */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--ui-border);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-icon {
    color: var(--ui-text-secondary);
}

.section-title {
    font-family: var(--ui-font-sans);
    font-weight: var(--ui-font-weight-semibold);
    font-size: var(--ui-font-size-2xl);
    color: var(--ui-text-primary);
    margin: 0;
}

.section-count {
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-md);
}

.stat-icon {
    flex-shrink: 0;
}

.stat-label {
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-md);
    margin: 0;
}

.stat-value {
    color: var(--ui-text-primary);
    font-weight: var(--ui-font-weight-semibold);
    font-size: calc(var(--ui-font-size-lg) * 2);
    margin: 0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
}

/* ============================================
   MUDBLAZOR-TILPASNING
   ============================================

   KartografTheme (C#) giver MudBlazor V2-paletten; reglerne herunder retter de
   faa steder hvor Nexus afviger fra MudBlazors standard (felter, popover-lister,
   ikonknapper, chips). De vinder paa specificitet og kaskade-raekkefoelge
   (nexus.css indlaeses efter MudBlazor.min.css) - ikke paa !important.

   PINNEDE !important (plan 2026-10-20 § Definition, undtagelse d; listen maa kun
   skrumpe - CssComplianceTests/gaten taeller dem):
   1. .mud-icon-button (+ :hover): MudIconButton med Color= faar MudBlazors
      farve-utility (mud-<farve>-text, !important); Nexus' ikonknapper er neutrale.
   2. Popover-listernes efterkommere (.mud-list-item *, .mud-select-item *,
      .mud-list-item-text *) og menupunkternes ikoner: tekst og ikoner inde i
      listepunkter baerer MudBlazors farve-utilities (!important).
   3. MudSwitch (hele afsnittet): .mud-switch-base faar mud-<farve>-text
      (!important), og MudBlazors tilstandsregler for spor/greb har hoejere
      specificitet end Nexus' roed/groen-skema.
   4. V2-skallen: brugermenuens knap, punkter, ikoner og log-ud samt topbjaelkens
      links (Color.Inherit/MudLink giver mud-inherit-text/mud-<farve>-text,
      !important), kartograf-pop-listernes punkter/valgte punkt/hover (som 2 plus
      mud-<farve>-hover), feltikoner (AdornmentColor), chips i chat-kampkort
      (characters.css' egne !important-regler), KWindow maksimeret/mobil og
      dock/chat mobil (overstyrer inline position/stoerrelse fra KWindow/KDock),
      Bestiariets vindueslayout og popover ejes nu af monsters.css.
   5. Outlined-felternes kantfarve og labels (hvile/hover/fokus/shrink): MudBlazors
      tilstandsregler har samme eller hoejere specificitet.
   6. .mud-chip/.mud-avatar font: modulernes egne .razor.css saetter vaegt/familie
      (gennemgaas i fase E).
*/

/* --- Felter (MudSelect, MudTextField) --- */
.mud-select {
    font-family: var(--ui-font-sans);
}

.mud-select .mud-input-control {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

.mud-select .mud-input-control:hover {
    border-color: var(--ui-border-hover);
}

.mud-input,
.mud-select .mud-input-control,
.mud-select .mud-input-control input,
.mud-select .mud-input-root,
.mud-select .mud-input-root input,
.mud-select .mud-input-root .mud-input,
.mud-select .mud-input-root .mud-select-input,
.mud-select .mud-input-root .mud-input-slot,
.mud-select .mud-input-root .mud-input-slot input,
.mud-select .mud-input-root .mud-input-slot .mud-select-input,
.mud-select.mud-input-outlined .mud-input-root .mud-input-slot .mud-select-input,
.mud-select.mud-input-outlined .mud-input-root .mud-input-slot,
.mud-select.mud-input-outlined .mud-input-root .mud-select-input,
.mud-select.mud-input-outlined .mud-input-root .mud-input-slot input,
.mud-select .mud-chip,
.mud-input-outlined-primary input,
.mud-input-outlined-primary textarea,
.mud-input-outlined input,
.mud-input-outlined textarea,
.mud-input-text input,
.mud-input-text textarea,
.mud-input-underlined input,
.mud-input-underlined textarea {
    color: var(--ui-text-primary);
}

.mud-input-helper-text,
.mud-select .mud-input-root .mud-input-placeholder,
.mud-select .mud-input-adornment,
.mud-select .mud-input-adornment .mud-icon-root,
.mud-select .mud-input-control .mud-input-adornment .mud-icon-root,
.mud-select.mud-input-outlined .mud-input-control .mud-input-adornment .mud-icon-root {
    color: var(--ui-text-secondary);
}

/* Pinnet !important (5): MudBlazors label-tilstande (.mud-shrink~label..., :focus-within~label...)
   har hoejere specificitet end Nexus' label-farver. */
.mud-input-label:where(:not(.plan-tab-root *)),
.mud-select .mud-input-label:where(:not(.plan-tab-root *)),
.mud-select .mud-input-label.mud-input-label-inputcontrol:where(:not(.plan-tab-root *)),
.mud-select .mud-input-slot .mud-input-label:where(:not(.plan-tab-root *)),
.mud-select .mud-input-control .mud-input-label:where(:not(.plan-tab-root *)),
.mud-select.mud-input-outlined .mud-input-label:where(:not(.plan-tab-root *)),
.mud-select.mud-input-outlined .mud-input-slot .mud-input-label:where(:not(.plan-tab-root *)),
.mud-select.mud-input-outlined .mud-input-control .mud-input-label:where(:not(.plan-tab-root *)) {
    color: var(--ui-text-secondary) !important;
}

.mud-select .mud-input-label.mud-input-label-input-focused:where(:not(.plan-tab-root *)) {
    color: var(--ui-action-primary) !important;
}

.mud-select .mud-input-adornment:hover {
    color: var(--ui-text-primary);
}

/* --- Popovers (MudSelect/MudMenu/MudAutocomplete). Portal-indhold renderes i
   MudPopoverProvider uden for skallen; :not(.mud-tooltip) lader MudTooltip
   beholde sin egen (moerke) flade. --- */
.mud-popover:not(.mud-tooltip) {
    background-color: var(--ui-surface);
    --mud-palette-text-primary: var(--ui-text-primary);
    --mud-palette-text-secondary: var(--ui-text-secondary);
    color: var(--ui-text-primary);
}

/* MudSelect marks the selected Battlemap row with its own priority utilities.
   Feed those utilities the V2 text and neutral hover values in this portal. */
.mud-popover.bm-bg3-popover {
    --mud-palette-primary: var(--ui-text-primary);
    --mud-palette-primary-hover: transparent;
}

.mud-popover:not(.mud-tooltip) > .mud-popover-paper,
.mud-popover .mud-list,
.mud-popover .mud-list-item {
    background-color: var(--ui-surface);
}

.mud-popover .mud-list-item,
.mud-popover .mud-list-item-text,
.mud-popover:not(.mud-tooltip) .mud-menu-item,
.mud-select-item {
    color: var(--ui-text-primary);
}

.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item.mud-selected,
.mud-popover .mud-list-item.mud-selected:hover,
.mud-popover:not(.mud-tooltip) .mud-menu-item:hover {
    background-color: var(--ui-background);
}

/* Pinnet !important (2): farve-utilities paa efterkommere i listepunkter */
.mud-popover .mud-list-item *,
.mud-popover .mud-list-item-text *,
.mud-select-item * {
    color: var(--ui-text-primary) !important;
}

/* Pinnet !important (2): menupunkternes ikoner */
.mud-popover:not(.mud-tooltip) .mud-menu-item .mud-icon,
.mud-popover:not(.mud-tooltip) .mud-menu-item .mud-icon-root,
.mud-popover:not(.mud-tooltip) .mud-menu-item svg:not(.mud-chip svg):not(.mud-chip-root svg) {
    color: var(--ui-icon-muted) !important;
    fill: var(--ui-icon-muted) !important;
}

/* --- Chips, avatarer, knapper. Pinnet !important (6): modulernes egne .razor.css saetter
   font-weight/-family paa MudChip/MudAvatar; Nexus' faelles vaegt skal vinde (fase E rydder op). --- */
.mud-chip {
    font-family: var(--ui-font-sans) !important;
    font-weight: var(--ui-font-weight-medium) !important;
}

.mud-avatar {
    font-family: var(--ui-font-sans) !important;
    font-weight: var(--ui-font-weight-semibold) !important;
}

/* Pinnet !important (1) */
.mud-icon-button {
    color: var(--ui-text-secondary) !important;
}

.mud-icon-button:hover {
    color: var(--ui-text-primary) !important;
    background: var(--ui-surface-muted) !important;
}

.mud-button-text-primary {
    color: var(--ui-action-primary);
}

.mud-button-contained-primary {
    background-color: var(--ui-action-primary);
}

.mud-button-contained-primary:hover {
    background-color: color-mix(in srgb, var(--ui-action-primary) 85%, black);
}

/* ============================================
   MUDSWITCH - roed/groen tilstand (pinnet !important (3))
   ============================================ */

.mud-switch .mud-switch-track {
    background-color: var(--ui-switch-track) !important;
    box-shadow: var(--ui-shadow-inset-1) var(--ui-border) !important;
    opacity: 1 !important;
}

.mud-switch .mud-switch-span {
    background-color: var(--ui-switch-track) !important;
    box-shadow: none !important;
    border: none !important;
}

.mud-switch:hover .mud-switch-track,
.mud-switch:hover .mud-switch-span,
.mud-switch.mud-checked:hover .mud-switch-track,
.mud-switch.mud-checked:hover .mud-switch-span {
    background-color: var(--ui-switch-track) !important;
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 1 !important;
}

/* Grebets farve styres af currentColor paa .mud-switch-base */
.mud-switch .mud-switch-base {
    color: var(--ui-switch-off) !important;
    background-color: transparent !important;
}

.mud-switch .mud-switch-base.mud-checked {
    color: var(--ui-switch-on) !important;
    background-color: transparent !important;
}

.mud-switch:hover .mud-switch-base {
    color: var(--ui-switch-off-hover) !important;
    background-color: transparent !important;
}

.mud-switch:hover .mud-switch-base.mud-checked,
.mud-switch .mud-switch-base.mud-checked:hover {
    color: var(--ui-switch-on-hover) !important;
    background-color: transparent !important;
}

/* Fallback hvis MudBlazor renderer greb-spans */
.mud-switch .mud-switch-thumb {
    background-color: var(--ui-switch-off) !important;
}

.mud-switch.mud-checked .mud-switch-thumb {
    background-color: var(--ui-switch-on) !important;
}

.mud-switch:hover .mud-switch-thumb {
    background-color: var(--ui-switch-off-hover) !important;
}

.mud-switch.mud-checked:hover .mud-switch-thumb {
    background-color: var(--ui-switch-on-hover) !important;
}

/* =====================================================================
   NEXUS V2 — dark mode, skal og primitiver
   Tokens: de lyse vaerdier staar som literaler i :root-blokken oeverst; her staar
   dark-saettet. Fase D2 (plan 2026-10-20) fjernede V2's gamle kildetoken-lag (k-praefikset) og
   remap-blokken; skal-CSS og primitiver bruger --ui-* direkte. KartografTheme.cs
   spejler hex-vaerdierne (KartografThemeTokenSyncTests).
   ===================================================================== */

/* === Nexus V2 dark mode (ejerbeslutning B6, plan fase 4a) ================================
   Samme toneslaegt som lys tilstand, men desk/papir-forholdet vendes: dyb navy som desk, navy
   som papir/vinduer, lys papir-tone som ink. Aktiveres af ThemeService (data-theme="dark" paa
   <html>, saa portal-indhold med .kartograf-pop uden for .kartograf-root foelger med) og af
   .dark-klassen paa skallens rod. Alle tekst/flade-par er kontrasttjekket >= 4.5:1
   (se docs/product/designs/nexus-v2-visual-language.md § Palette (dark)).
   Det ENESTE dark-selektorsaet (fase D1): hvert farvetoken i :root har sin dark-vaerdi her.
   ========================================================================================== */
[data-theme="dark"] .kartograf-root, [data-theme="dark"] .kartograf-pop,
.kartograf-root.dark, .kartograf-pop.dark {
    color-scheme: dark;

    /* Flader */
    --ui-background: #0B1D27;
    --ui-background-deep: #07141C;
    --ui-surface: #1B3442;
    --ui-surface-muted: #142A36;
    --ui-surface-subtle: #142A36;
    --ui-backdrop-soft: rgba(0, 0, 0, 0.3);
    --ui-backdrop-strong: rgba(0, 0, 0, 0.5);
    /* Tekst */
    --ui-text-primary: #F3EEE4;
    --ui-text-secondary: #B7C2C9;
    --ui-text-disabled: #6B7A83; /* MudBlazor ActionDisabled (dark) */
    --ui-icon-muted: #757575;    /* bevidst samme graa ikon-tone som i lys tilstand */
    /* Handlinger */
    --ui-action-primary: #5FB0B3;          /* teal: 5.9:1 mod #142A36 */
    --ui-action-primary-text: #0B1D27;
    --ui-action-primary-subtle: #173E42;
    --ui-action-secondary: #071822;        /* dybeste krom-tone */
    --ui-action-secondary-text: #F3EEE4;
    /* Krom */
    --ui-chrome-deep: #040F16;
    --ui-chrome-accent: #F1DCAE;
    /* Tilstande */
    --ui-error: #E08A80;
    --ui-error-text: #0B1D27;
    /* Kant og fokus */
    --ui-border: #2A4553;
    --ui-border-hover: #3A5A6B;
    --ui-ring: #5FB0B3;
    /* Status */
    --ui-status-success: #6FBF9A;
    --ui-status-warning: #E6C37E;
    --ui-status-accent: #8FB6C4;
    --ui-status-error: #E08A80;
    --ui-status-info: #5FB0B3;

    /* Skygger og MudSwitch (flyttet fra den gamle .dark-blok i fase D1) */
    --ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --ui-shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.35);
    --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
    --ui-shadow-ring-0: 0 0 0 0;
    --ui-shadow-ring-8: 0 0 0 8px;
    --ui-shadow-inset-leading-2: inset 2px 0 0;
    --ui-shadow-inset-leading-3: inset 3px 0 0;
    --ui-shadow-detail-sm: 0 1px 3px;
    --ui-shadow-ring-1-5: 0 0 0 1.5px;
    --ui-shadow-soft-lift: 0 2px 5px;
    --ui-shadow-card-lift: 0 3px 9px;
    --ui-shadow-card-hover-lift: 0 3px 12px;
    --ui-shadow-halo: 0 0 16px;
    --ui-shadow-avatar-lift: 0 2px 4px;
    --ui-shadow-outcome-lift: 0 3px 11px;
    --ui-shadow-inset-halo: inset 0 0 12px;
    --ui-shadow-stamp-lift: 0 2px 7px;
    --ui-shadow-inset-top-1: inset 0 1px 0;
    --ui-shadow-top-rule-1: 0 -1px 0;
    --ui-shadow-detail-md: 0 1px 4px;
    --ui-shadow-compact: 0 4px 12px;
    --ui-shadow-graph-lift: 0 6px 18px;
    --ui-shadow-panel-lift: 0 10px 24px;
    --ui-shadow-toast-lift: 0 12px 40px;
    --ui-shadow-dialog-lift: 0 18px 60px;
    --ui-shadow-dialog-xl-lift: 0 24px 90px;
    --ui-shadow-geo-0-0-0-5: 0 0 0 5px;
    --ui-shadow-geo-0-0-0-6: 0 0 0 6px;
    --ui-shadow-geo-0-0-10: 0 0 10px;
    --ui-shadow-geo-0-0-12: 0 0 12px;
    --ui-shadow-geo-0-0-14: 0 0 14px;
    --ui-shadow-geo-0-0-18: 0 0 18px;
    --ui-shadow-geo-0-0-20: 0 0 20px;
    --ui-shadow-geo-0-0-26: 0 0 26px;
    --ui-shadow-geo-0-0-38: 0 0 38px;
    --ui-shadow-geo-0-0-46: 0 0 46px;
    --ui-shadow-geo-0-0-5: 0 0 5px;
    --ui-shadow-geo-0-0-6: 0 0 6px;
    --ui-shadow-geo-0-0-8: 0 0 8px;
    --ui-shadow-geo-0-1-0: 0 1px 0;
    --ui-shadow-geo-0-1-2: 0 1px 2px;
    --ui-shadow-geo-0-14-40: 0 14px 40px;
    --ui-shadow-geo-0-2-0-n1: 0 2px 0 -1px;
    --ui-shadow-geo-0-2-6: 0 2px 6px;
    --ui-shadow-geo-0-22-50: 0 22px 50px;
    --ui-shadow-geo-0-4-14: 0 4px 14px;
    --ui-shadow-geo-0-4-16: 0 4px 16px;
    --ui-shadow-geo-0-4-8: 0 4px 8px;
    --ui-shadow-geo-0-4-9: 0 4px 9px;
    --ui-shadow-geo-0-5-14: 0 5px 14px;
    --ui-shadow-geo-0-6-22: 0 6px 22px;
    --ui-shadow-geo-0-8-22: 0 8px 22px;
    --ui-shadow-geo-1-n1-0: 1px -1px 0;
    --ui-shadow-geo-inset-0-1-2: inset 0 1px 2px;
    --ui-shadow-geo-inset-0-1-3: inset 0 1px 3px;
    --ui-shadow-geo-inset-0-14-26: inset 0 14px 26px;
    --ui-shadow-geo-inset-0-2-0: inset 0 2px 0;
    --ui-shadow-geo-inset-0-n10-22: inset 0 -10px 22px;
    --ui-shadow-geo-inset-0-n3-6: inset 0 -3px 6px;
    --ui-shadow-geo-inset-1-0-0: inset 1px 0 0;
    --ui-shadow-geo-inset-14-0-22: inset 14px 0 22px;
    --ui-shadow-geo-inset-n14-0-22: inset -14px 0 22px;
    --ui-shadow-geo-n1-n1-0-0: -1px -1px 0 0;
    --ui-shadow-geo-n10-0-30: -10px 0 30px;
    --ui-shadow-geo-n14-0-40: -14px 0 40px;
    --ui-shadow-map-label: 0 1px 3px color-mix(in srgb, var(--ui-text-primary) 80%, transparent);
    --ui-shadow-ring-subtle: 0 0 0 2px color-mix(in srgb, var(--ui-ring) 10%, transparent);
    --ui-map-pin-card-left: auto;
    --ui-map-pin-card-top: auto;
    --ui-map-card-x: 18px;
    --ui-map-card-y: 18px;
    --ui-switch-off: #ef4444;       /* red-500 - lysere for synlighed mod moerk grund */
    --ui-switch-off-hover: #dc2626; /* red-600 */
    --ui-switch-on: #22c55e;        /* green-500 */
    --ui-switch-on-hover: #16a34a;  /* green-600 */

    /* Modul-badges: moerk flade + lysere ink (TOKENS.md § Module colors), WCAG >= 4.5:1. */
    --ui-module-characters-bg: #172554;   --ui-module-characters-text: #93c5fd;
    --ui-module-adventure-bg: #052e16;    --ui-module-adventure-text: #86efac;
    --ui-module-chat-bg: #1e293b;         --ui-module-chat-text: #cbd5e1;
    --ui-module-realm-bg: #451a03;        --ui-module-realm-text: #fcd34d; --ui-module-realm-text-hover: #fde68a;
    --ui-module-rules-bg: #1e1b4b;        --ui-module-rules-text: #a5b4fc;
    --ui-module-combat-bg: #450a0a;       --ui-module-combat-text: #fca5a5;
    --ui-module-friends-bg: #3b0764;      --ui-module-friends-text: #d8b4fe;
}
.kartograf-root {
    background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--ui-surface) 70%, transparent), transparent 24%),
        radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--ui-status-warning) 16%, transparent), transparent 29%),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--ui-text-primary) 3%, transparent) 0, color-mix(in srgb, var(--ui-text-primary) 3%, transparent) 1px, transparent 1px, transparent 4px),
        var(--ui-background);
    color: var(--ui-text-primary);
    font-family: var(--ui-font-sans);
    min-height: 100vh;
}
.kartograf-root h1, .kartograf-root h2, .kartograf-root h3,
.kartograf-root h4, .kartograf-root h5, .kartograf-root h6,
.kartograf-root .k-display { font-family: var(--ui-font-display); }
.kartograf-root .mud-paper, .kartograf-root .mud-card { background-color: var(--ui-surface); color: var(--ui-text-primary); }
.kartograf-root .mud-appbar { background-color: var(--ui-action-secondary); color: var(--ui-action-secondary-text); }

/* C2-fix: popovers/dialoger renderes i den GLOBALE provider udenfor .kartograf-root.
   Komponenter under /v2 saetter PopoverClass/Class="kartograf-pop", saa portal-indhold retmes. */
.kartograf-pop.mud-popover, .kartograf-pop .mud-popover,
.kartograf-pop.mud-dialog, .kartograf-pop .mud-dialog-container .mud-paper {
    background-color: var(--ui-surface);
    color: var(--ui-text-primary);
    font-family: var(--ui-font-sans);
    border: 1px solid var(--ui-border-hover);
}
.kartograf-pop .mud-list-item:not(.notification-item):hover { background-color: color-mix(in srgb, var(--ui-action-primary) 10%, var(--ui-surface)) !important; }

/* MudMenu aligns this wide panel to its activator in the mobile rail.
   Keep the portal inside narrow viewports without overriding its inline placement. */
@media (max-width: 600px) {
    .kartograf-notification-pop.mud-popover {
        width: min(352px, calc(100vw - 16px));
    }
}

/* === Nexus V2 form-controls: lyse felter paa MudSelect/MudAutocomplete/MudTextField + popovers ===
   Out-specificerer de globale (klassiske) hvide input/popover-regler via 3-klasse-scope under
   .kartograf-root / .kartograf-pop, saa /v2-dropdowns matcher den nye V2-flade. */
.kartograf-root .mud-select .mud-input-control,
.kartograf-root .mud-input-control.mud-input-control-margin-dense {
    background: var(--ui-surface);
    color: var(--ui-text-primary);
}
.kartograf-root .mud-input-control .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ui-border-hover) !important;
}
.kartograf-root .mud-input-control:hover .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ui-action-primary) !important;
}
.kartograf-root .mud-input.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.kartograf-root .mud-input-control .mud-input-root.mud-focused .mud-input-outlined-border {
    border-color: var(--ui-ring) !important;
}
.kartograf-root .mud-select .mud-select-input,
.kartograf-root .mud-input-root input,
.kartograf-root .mud-input-slot input { color: var(--ui-text-primary); }
.kartograf-root .mud-input-label:where(:not(.plan-tab-root *)) { color: var(--ui-text-secondary) !important; font-family: var(--ui-font-sans); }
.kartograf-root .mud-input-label.mud-input-label-input-focused:where(:not(.plan-tab-root *)) { color: var(--ui-ring) !important; }
/* Kompakt hoejde — mindre kluntede felter */
.kartograf-root .mud-input.mud-input-outlined input,
.kartograf-root .mud-input.mud-input-outlined .mud-select-input { padding-top: calc(var(--space-sm) - var(--space-2xs) / 2); padding-bottom: calc(var(--space-sm) - var(--space-2xs) / 2); font-size: var(--ui-font-size-md); }
.kartograf-root .mud-input-adornment .mud-icon-root { color: var(--ui-text-secondary) !important; }

/* Dropdown-listen (popover), kompakt */
.kartograf-pop .mud-popover-paper,
.kartograf-pop .mud-list,
.kartograf-pop .mud-list-item:not(.notification-item) { background-color: var(--ui-surface-muted) !important; color: var(--ui-text-primary) !important; }
.kartograf-pop .mud-list { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.kartograf-pop .mud-list-item { font-family: var(--ui-font-sans); font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2); min-height: 0; padding-top: calc(var(--space-sm) - var(--space-2xs) / 2); padding-bottom: calc(var(--space-sm) - var(--space-2xs) / 2); }
.kartograf-pop .mud-list-item.mud-selected,
.kartograf-pop .mud-selected-item { background-color: color-mix(in srgb, var(--ui-action-primary) 14%, var(--ui-surface)) !important; }
.kartograf-pop .mud-list-item-text, .kartograf-pop .mud-list-item-text * { color: var(--ui-text-primary) !important; }

/* Lille, diskret tekst-handling (fx "ryd holder") — i stil med resten, ikke en stor knap */
.kartograf-root .k-linkbtn { font-size: var(--ui-font-size-xs); color: var(--ui-text-secondary); cursor: pointer;
    border-bottom: 1px dotted var(--ui-border-hover); padding: 0; margin-left: var(--space-sm); }
.kartograf-root .k-linkbtn:hover { color: var(--ui-action-primary); border-bottom-color: var(--ui-action-primary); }

/* Bredere/pænere dialoger (fx Tidslinjens begivenheds-editor) — ikke smalle og grimme */
.kartograf-pop .mud-dialog-container .mud-paper { min-width: 480px; max-width: 94vw; }
@media (max-width: 560px) { .kartograf-pop .mud-dialog-container .mud-paper { min-width: 0; } }

/* Nexus V2 shell */
/* height (ikke min-height) + overflow:hidden binder layoutet til viewporten, så .k-shell-main og
   chat-dock'en (.k-chat) ikke vokser med indholdet og skubber chat-skrivefeltet under viewporten.
   Indre flader scroller selv (.k-shell-body / .k-chat-body har min-height:0 + overflow:auto). */
.k-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.k-shell-top { display: flex; align-items: center; gap: calc(var(--space-md) + var(--space-2xs)); min-height: 76px; padding: 0 var(--space-xl);
    border-bottom: 1px solid color-mix(in srgb, var(--ui-action-secondary-text) 18%, transparent);
    background: var(--ui-action-secondary); color: var(--ui-action-secondary-text);
    box-shadow: var(--ui-shadow-chrome); }
.k-shell-brand { font-family: var(--ui-font-display); font-weight: 700; font-size: calc((var(--ui-font-size-md) + var(--ui-font-size-4xl)) / 2);
    letter-spacing: 0; display: flex; align-items: center; gap: calc(var(--space-sm) + var(--space-2xs)); }
.k-shell-seal { width: 38px; height: 38px; border-radius: var(--radius-md); color: var(--ui-chrome-accent); font-size: var(--ui-font-size-3xl);
    font-weight: 600; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--ui-status-warning); }
.k-shell-sub { font-style: italic; font-size: var(--ui-font-size-lg); color: color-mix(in srgb, var(--ui-action-secondary-text) 82%, transparent); }
.k-shell-spacer { flex: 1; }
/* Shell-label (aktivt eventyr) og login-link paa navy chrome (KartografShell, PlayerGateLayout). !important: MudLink-farve-utility. */
.k-shell-link { color: color-mix(in srgb, var(--ui-action-secondary-text) 82%, transparent) !important; font-size: var(--ui-font-size-sm-md); }
.k-active-team { display: inline-grid; grid-template-columns: auto minmax(150px, 220px); gap: calc(var(--space-sm) - var(--space-2xs) / 2); align-items: center;
    color: color-mix(in srgb, var(--ui-action-secondary-text) 82%, transparent); font-size: var(--ui-font-size-sm); font-weight: 700; }
.k-active-team select { min-height: 36px; border: 1px solid color-mix(in srgb, var(--ui-chrome-accent) 52%, transparent); border-radius: var(--radius-md);
    color: var(--ui-action-secondary-text); background: color-mix(in srgb, var(--ui-action-secondary-text) 4%, transparent); font: inherit; font-weight: 700; padding: var(--space-xs) var(--space-xl) var(--space-xs) calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .k-user-menu { display: flex; align-items: center; }
.kartograf-root .k-user-button {
    min-width: 0;
    color: color-mix(in srgb, var(--ui-action-secondary-text) 82%, transparent) !important;
    font-family: var(--ui-font-sans);
    text-transform: none;
}
.kartograf-root .k-user-button:hover { color: var(--ui-action-secondary-text) !important; background: color-mix(in srgb, var(--ui-action-secondary-text) 12%, transparent); }
.kartograf-root .k-user-button .mud-button-label { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.kartograf-root .k-user-avatar {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--ui-action-primary);
    color: var(--ui-action-primary-text);
    font-family: var(--ui-font-display);
    font-size: var(--ui-font-size-sm);
    font-weight: 700;
    letter-spacing: 0;
}
.kartograf-root .k-user-button-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kartograf-root .k-user-login-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space-sm) - var(--space-2xs) / 2);
}
.kartograf-pop.k-user-menu-pop.mud-popover,
.kartograf-pop.k-user-menu-pop .mud-popover-paper {
    min-width: 244px;
}
/* Profilmenuen skal ligne V2-dockens flyout (.k-sub): runde kanter, tynd kant,
   blød skygge og indrykkede items med egen radius — ikke en firkantet Mud-liste. */
.kartograf-pop.k-user-menu-pop.mud-popover {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--ui-shadow-popover);
    overflow: hidden;
    margin-top: calc(var(--space-xs) + var(--space-2xs));
}
.kartograf-pop.k-user-menu-pop .mud-list,
.kartograf-pop.k-user-menu-pop .mud-menu-item {
    background-color: var(--ui-surface) !important;
}
.kartograf-pop.k-user-menu-pop .mud-list {
    padding: calc(var(--space-xs) + var(--space-2xs));
}
.kartograf-pop.k-user-menu-pop .mud-divider {
    margin: var(--space-xs) 0;
    border-color: var(--ui-border);
}
.kartograf-pop.k-user-menu-pop .mud-menu-item {
    min-height: 0;
    padding: calc(var(--space-sm) - var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs));
    border-radius: var(--radius-sm);
    color: var(--ui-text-primary) !important;
    font-family: var(--ui-font-sans);
    font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2);
}
.kartograf-pop.k-user-menu-pop .mud-menu-item:not(.mud-disabled):hover {
    background-color: var(--ui-action-primary-subtle) !important;
    color: var(--ui-action-primary) !important;
}
.kartograf-pop.k-user-menu-pop .mud-menu-item.mud-disabled {
    opacity: 1;
}
.kartograf-pop.k-user-menu-pop .mud-menu-item span {
    color: inherit !important;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-header {
    min-width: 0;
    padding: var(--space-2xs) 0;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-name {
    font-family: var(--ui-font-display);
    font-size: var(--ui-font-size-lg);
    font-weight: 700;
    color: var(--ui-text-primary);
}
.kartograf-pop.k-user-menu-pop .k-user-menu-email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-sm);
}
.kartograf-pop.k-user-menu-pop .k-user-menu-realm {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ui-text-primary);
    font-size: var(--ui-font-size-sm);
    font-weight: 600;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-icon,
.kartograf-pop.k-user-menu-pop .k-user-menu-icon svg,
.kartograf-pop.k-user-menu-pop .mud-menu-item .mud-icon-root,
.kartograf-pop.k-user-menu-pop .mud-menu-item svg {
    color: var(--ui-status-warning) !important;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-signout,
.kartograf-pop.k-user-menu-pop .k-user-menu-signout span,
.kartograf-pop.k-user-menu-pop .k-user-menu-signout .mud-icon-root,
.kartograf-pop.k-user-menu-pop .k-user-menu-signout svg {
    color: var(--ui-status-error) !important;
}
.k-shell-body { flex: 1; min-height: 0; padding: var(--space-lg, var(--space-lg)); overflow: auto; }
/* Gate-fladerne (foer indgangen: /hjem, /choose-adventure m.fl.) baeres af
   PlayerGateLayout, som ikke har dock og chat-panel. Kroppen havde ingen regel
   overhovedet, og da .k-layout er height:100vh + overflow:hidden kostede det to ting:
   indholdet laa klistret op ad venstre skaermkant, og alt under skaermkanten blev
   KLIPPET uden mulighed for at scrolle. Reglen er bevidst identisk med .k-shell-body
   — foer og efter indgangen maa ikke se forskellige ud i noget saa basalt som marginer. */
.k-gate-body { flex: 1; min-height: 0; padding: var(--space-lg, var(--space-lg)); overflow: auto; }
/* Offentlige sider (plan fase 5.1): navy topstribe + papirflade; sidernes egne kort (login-card m.fl.) ligger i k-public-body */
.k-public { min-height: 100dvh; display: flex; flex-direction: column; background: var(--ui-background); color: var(--ui-text-primary); }
.k-public-top { flex: 0 0 auto; }
.k-public-brand { text-decoration: none; color: inherit; }
.k-public-body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.kartograf-root.k-public .k-public-theme-toggle { color: var(--ui-nav-text); border-color: color-mix(in srgb, var(--ui-nav-text) 40%, transparent); }
.kartograf-root.k-public .k-public-theme-toggle:not(:disabled):hover { color: var(--ui-nav-text); border-color: var(--ui-nav-text); background: color-mix(in srgb, var(--ui-nav-text) 12%, transparent); }
/* Bekraeftelses-overlay og formular-hjaelpere paa gate-sider (plan fase 5.2: vaelg/opret/slet verden) */
.kartograf-root .k-overlay { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: var(--space-md); background: color-mix(in srgb, var(--ui-text-primary) 45%, transparent); }
.kartograf-root .k-overlay__panel { width: min(100%, 34rem); box-shadow: var(--ui-shadow-lg); border-radius: var(--radius-lg); }
.kartograf-root .k-overlay__text { margin: 0 0 var(--space-md); color: var(--ui-text-primary); }
.kartograf-root .k-overlay__actions, .kartograf-root .k-form-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); flex-wrap: wrap; }
.kartograf-root .k-form-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.kartograf-root .k-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); }
.kartograf-root .k-page.k-page--narrow { max-width: 56rem; margin: 0 auto; }
.k-shell-body:has(> .kws-canvas) { overflow: hidden; }
/* Plan fase 5.5a: regelbyggerens canvas (RulesV2Layout .rules-v2--canvas) faar hele fladen uden padding,
   som bordet; indre paneler scroller selv. */
.k-shell-body:has(> .rules-v2--canvas) { overflow: hidden; padding: 0; position: relative; }
.kartograf-root .rules-v2--canvas { position: absolute; inset: 0; }
.k-card { background: var(--ui-surface);
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: calc(var(--space-md) + var(--space-2xs)) calc(var(--space-md) + var(--space-xs));
    box-shadow: var(--ui-shadow-sm); }
.k-kicker { font-size: var(--ui-font-size-xs); letter-spacing: .2em; text-transform: uppercase;
    color: var(--ui-action-primary); font-weight: 700; }

/* Kartograf shell layout: reol (venstre) · body · brevvekslingen (hoejre) */
.k-shell-main { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.kartograf-root .k-dock-shell { position: relative; z-index: 1250; width: 76px; flex-shrink: 0;
    align-self: flex-start; max-height: calc(100% - (var(--space-xl) * 2)); min-height: 0; overflow: visible; margin: var(--space-xl) 0 var(--space-xl) var(--space-lg); }
.kartograf-root .k-dock { position: relative; width: 76px; max-height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--ui-border) 62%, transparent); border-radius: var(--radius-full);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-surface) 82%, transparent),
        color-mix(in srgb, var(--ui-surface-subtle) 72%, transparent));
    display: flex; flex-direction: column; align-items: center;
    padding: var(--space-sm-md) 0; gap: var(--space-xs);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(6px); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-text-secondary) 34%, transparent) transparent; }
.kartograf-root .k-dock-quill { width: 48px; height: 48px; border-radius: var(--radius-xl); cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--ui-status-warning) 74%, transparent); color: var(--ui-chrome-accent); background: var(--ui-action-secondary);
    display: grid; place-items: center; margin-bottom: var(--space-sm); box-shadow: var(--ui-shadow-raised); }
.kartograf-root .k-dock-sep { width: 36px; height: 1px; background: color-mix(in srgb, var(--ui-border) 72%, transparent); margin: var(--space-xs) 0 var(--space-sm); }
.kartograf-root .k-dock-item { width: 54px; min-height: 54px; box-sizing: border-box; padding: calc(var(--space-sm) - var(--space-2xs) / 2) var(--space-2xs) calc(var(--space-xs) + var(--space-2xs)); border: none; background: transparent; cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); color: var(--ui-text-secondary);
    border-radius: var(--radius-xl); transition: background var(--ui-motion-fast), color var(--ui-motion-fast), box-shadow var(--ui-motion-fast), transform var(--ui-motion-fast); }
.kartograf-root .k-dock-item:hover { color: var(--ui-action-primary); background: color-mix(in srgb, var(--ui-action-primary-subtle) 76%, transparent); transform: translateY(-1px); }
.kartograf-root .k-dock-item.active { color: var(--ui-text-primary); background: color-mix(in srgb, var(--ui-action-primary-subtle) 84%, var(--ui-surface));
    box-shadow: var(--ui-shadow-active); }
.kartograf-root .k-dock-lb { font-family: var(--ui-font-sans); font-size: var(--ui-font-size-2xs); font-weight: 700;
    line-height: 1.05; text-align: center; display: block; width: 100%; max-width: 48px; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.kartograf-root .k-dock-wrap { position: relative; width: 54px; display: flex; justify-content: center; }
.kartograf-root .k-sub { position: fixed; left: var(--ui-dock-sub-left, 112px); top: var(--ui-dock-sub-top, 160px); min-width: 232px; max-width: calc(100vw - var(--ui-dock-sub-left, 112px) - 12px); max-height: calc(100vh - var(--ui-dock-sub-top, 160px) - 12px); overflow-y: auto; z-index: 1260;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--radius-lg);
    box-shadow: var(--ui-shadow-popover); padding: calc(var(--space-xs) + var(--space-2xs)); }
.kartograf-root .k-sub-h { font-family: var(--ui-font-sans); font-weight: 800; font-size: var(--ui-font-size-xs); color: var(--ui-status-warning);
    letter-spacing: .12em; text-transform: uppercase; padding: calc(var(--space-sm) - var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs)) var(--space-sm); border-bottom: 1px solid var(--ui-border); margin-bottom: var(--space-xs); }
.kartograf-root .k-sub-i { display: flex; align-items: center; gap: calc(var(--space-sm) + var(--space-2xs) / 2); padding: calc(var(--space-sm) - var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs)); border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--ui-font-size-sm-md); color: var(--ui-text-primary); }
.kartograf-root .k-sub-i:hover { background: var(--ui-action-primary-subtle); color: var(--ui-action-primary); }
.kartograf-root .k-sub-ic { width: 18px; text-align: center; color: var(--ui-text-secondary); font-size: var(--ui-font-size-md); }
.kartograf-root .k-sub-backdrop { position: fixed; inset: 0; z-index: 1240; background: transparent; }

/* Brevvekslingen svaever som reolen (.k-dock): afrundet kort med luft til kanten, samme bloede
   gradient, bloede kant og skygge — i stedet for et fladt panel klistret til hoejre side. */
.kartograf-root .k-chat { width: 316px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    margin: var(--space-xl) var(--space-lg) var(--space-xl) 0;
    border: 1px solid color-mix(in srgb, var(--ui-border) 62%, transparent); border-radius: var(--radius-xl);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-surface) 86%, transparent),
        color-mix(in srgb, var(--ui-surface-subtle) 76%, transparent));
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(6px); transition: width .2s ease; }
.kartograf-root .k-chat.collapsed { width: 42px; }
.kartograf-root .k-chat-mini { position: relative; flex: 1; border: none; background: none; cursor: pointer; display: grid; place-items: center; }
.kartograf-root .k-chat-mini span { writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--ui-font-sans); font-weight: 800; font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); letter-spacing: .12em; text-transform: uppercase; }
.kartograf-root .k-chat-head { display: flex; align-items: center; padding: calc(var(--space-sm-md) + var(--space-2xs)) var(--space-md) calc(var(--space-sm) + var(--space-2xs));
    border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 62%, transparent); background: transparent; }
.kartograf-root .k-chat-title { font-weight: 800; font-size: var(--ui-font-size-lg); flex: 1; }
.kartograf-root .k-chat-min { border: none; background: none; cursor: pointer; color: var(--ui-text-secondary); }
.kartograf-root .k-chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: calc(var(--space-sm-md) + var(--space-2xs)); display: flex; flex-direction: column; }
.kartograf-root .k-chat-reactions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); padding: 0 var(--space-2xs); }
.kartograf-root .k-chat-msg.mine .k-chat-reactions { justify-content: flex-end; }
.kartograf-root .k-chat-rx { font-size: var(--ui-font-size-xs); padding: calc(var(--space-2xs) / 2) calc(var(--space-sm) - var(--space-2xs) / 2); border-radius: var(--radius-lg); border: 1px solid var(--ui-border);
    background: var(--ui-surface-muted); color: var(--ui-text-primary); }
.kartograf-root .k-chat-rx.mine { border-color: var(--ui-status-warning); background: var(--ui-surface); }
.kartograf-root .k-chat-rx-pick { font-size: calc((var(--ui-font-size-md) + var(--ui-font-size-lg)) / 2); padding: 0 calc(var(--space-2xs) * 1.5); border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); }
.kartograf-root .k-chat-rx-pick:hover { background: var(--ui-surface-muted); }
.kartograf-root .k-chat-sysmsg { display: flex; gap: calc(var(--space-sm) - var(--space-2xs) / 2); align-items: flex-start; align-self: flex-start; max-width: 94%;
    margin: calc(var(--space-sm) - var(--space-2xs) / 2) 0; padding: var(--space-sm) calc(var(--space-sm-md) - var(--space-2xs) / 2); background: var(--ui-surface); border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
    border-radius: var(--radius-xl); font-size: calc((var(--ui-font-size-sm) + var(--ui-font-size-sm-md)) / 2); color: var(--ui-text-secondary);
    box-shadow: var(--ui-shadow-soft); }
.kartograf-root .k-chat-sysmsg.mine { align-self: flex-end; }
.kartograf-root .k-chat-sysmsg.k-pinned { border-style: solid; border-color: var(--ui-status-warning); }
/* v2-chat combat-kort: farvet venstrekant + baggrundstoning pr. kamp-type. */
.kartograf-root .k-chat-sysmsg.k-sys-attack,
.kartograf-root .k-chat-sysmsg.k-sys-damage,
.kartograf-root .k-chat-sysmsg.k-sys-roll { border-left-style: solid; border-left-width: 3px; }
.kartograf-root .k-chat-sysmsg.k-sys-attack { border-left-color: var(--ui-error); background: color-mix(in srgb, var(--ui-error) 7%, var(--ui-surface)); }
.kartograf-root .k-chat-sysmsg.k-sys-damage { border-left-color: var(--ui-status-warning); background: color-mix(in srgb, var(--ui-status-warning) 9%, var(--ui-surface)); }
.kartograf-root .k-chat-sysmsg.k-sys-roll { border-left-color: var(--ui-status-info); background: color-mix(in srgb, var(--ui-status-info) 6%, var(--ui-surface)); }
/* V2-chat: systembeskeden er den ENESTE visuelle indpakning. De indlejrede kamp-kort tegner deres
   egen lyse kort-flade (til Classic/mobil), saa den fjernes her, og kortene arver chattens
   baggrund og tekstfarve. */
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .damage-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .combat-action-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .combat-roll-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .skill-check-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .dice-check-display {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    color: inherit;
    /* Flex-barn i k-chat-sysmsg: skal fylde den ledige bredde og maa gerne braekke linjer. */
    flex: 1 1 auto;
    min-width: 0;
}
/* Chips inde i kortene: kun en tynd kant, ingen udfyldt flade der genskaber kasse-looket. */
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .damage-type-chip,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .skill-chip {
    background-color: transparent !important;
    border-color: color-mix(in srgb, var(--ui-status-warning) 30%, transparent) !important;
    color: inherit !important;
}
/* Udregningen der er foldet ud inline under et tal: indlejret V2-flade i stedet for Mud-fladen. */
.kartograf-root .k-chat-v2-surface .roll-total-trigger { color: var(--ui-text-primary); border-bottom: 1px dotted var(--ui-border-hover); }
.kartograf-root .k-chat-v2-surface .roll-total-popover {
    background: color-mix(in srgb, var(--ui-status-warning) 7%, transparent);
    border-left-color: var(--ui-border-hover);
    color: var(--ui-text-secondary);
}
.kartograf-root .k-chat-sysmsg.k-sys-crit { box-shadow: var(--ui-shadow-crit); }
.kartograf-root .k-chat-sysmsg.k-sys-fumble { box-shadow: var(--ui-shadow-fumble); }
.kartograf-root .k-chat-sysmsg .k-chat-sys-icon { font-size: calc((var(--ui-font-size-md) + var(--ui-font-size-lg)) / 2); line-height: 1.15; }
/* v2-chat: altid-synlig oplæs-knap (🔊) på hver besked; pulserer mens TTS spiller. */
.kartograf-root .k-chat-readaloud-btn { font-size: var(--ui-font-size-sm); line-height: var(--ui-leading-none); cursor: pointer; opacity: .5; margin-left: var(--space-2xs);
    transition: opacity .12s ease, transform .12s ease; }
.kartograf-root .k-chat-readaloud-btn:hover { opacity: 1; transform: scale(1.14); }
.kartograf-root .k-chat-readaloud-btn.k-tts-on { opacity: 1; animation: k-tts-pulse 1s ease-in-out infinite; }
@keyframes k-tts-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.kartograf-root .k-chat-sys-icon { flex-shrink: 0; }
.kartograf-root .k-chat-sys-text { white-space: pre-wrap; word-break: break-word; }
.kartograf-root .k-chat-sys-rich { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.kartograf-root .k-chat-sys-head { font-weight: 700; color: var(--ui-text-primary); }
.kartograf-root .k-chat-sys-calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--space-xs) + var(--space-2xs)); }
.kartograf-root .k-chat-sys-formula { font-family: var(--ui-font-display); color: var(--ui-text-secondary); }
.kartograf-root .k-chat-sys-total { font-weight: 700; color: var(--ui-text-primary); border-bottom: 1px dotted var(--ui-border-hover); }
.kartograf-root .k-chat-sysmsg.k-sys-crit .k-chat-sys-total { color: var(--ui-status-success); }
.kartograf-root .k-chat-sysmsg.k-sys-fumble .k-chat-sys-total { color: var(--ui-error); }
.kartograf-root .k-chat-sys-breakdown { margin: calc(var(--space-2xs) * 1.5) 0 0; padding-left: var(--space-md); list-style: disc; color: var(--ui-text-secondary); }
.kartograf-root .k-chat-sys-breakdown li { margin: calc(var(--space-2xs) / 2) 0; }
.kartograf-root .k-chat-badge { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 var(--space-xs);
    border-radius: var(--radius-md); background: var(--ui-action-primary); color: var(--ui-action-primary-text); font-size: var(--ui-font-size-2xs); font-weight: 700;
    line-height: var(--ui-leading-relaxed); text-align: center; }
.kartograf-root .k-chat-pin { margin-left: var(--space-xs); font-size: var(--ui-font-size-xs); }
.kartograf-root .k-chat-loadolder.active { background: var(--ui-status-warning); color: var(--ui-surface-subtle); border-color: var(--ui-status-warning); }
.kartograf-root .chat-feature { min-height: 100%; display: flex; flex-direction: column; gap: var(--space-sm-md); }
.kartograf-root .chat-feature-head,
.kartograf-root .chat-feature-actions,
.kartograf-root .chat-feature-row,
.kartograf-root .chat-feature-row-actions { display: flex; align-items: center; gap: calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .chat-feature-head { justify-content: space-between; }
.kartograf-root .chat-feature-actions { flex-wrap: wrap; }
.kartograf-root .chat-feature-grid { display: grid; gap: calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .chat-feature-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartograf-root .chat-feature-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kartograf-root .chat-feature-input,
.kartograf-root .chat-feature-btn,
.kartograf-root .chat-feature-tab { min-height: 36px; border: 1px solid var(--ui-border); border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); background: var(--ui-surface); color: inherit; }
.kartograf-root .chat-feature-input { width: 100%; min-width: 0; padding: calc(var(--space-sm) - var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs) / 2); }
.kartograf-root .chat-feature-btn,
.kartograf-root .chat-feature-tab { padding: 0 calc(var(--space-sm) + var(--space-2xs)); font-weight: 700; }
.kartograf-root .chat-feature-btn.primary,
.kartograf-root .chat-feature-tab.active {
    border-color: var(--ui-action-primary);
    color: var(--ui-action-primary);
    background: color-mix(in srgb, var(--ui-action-primary) 9%, var(--ui-surface));
}
.kartograf-root .chat-feature-btn.danger { color: var(--ui-error); }
.kartograf-root .chat-feature-check { min-height: 36px; display: flex; align-items: center; gap: var(--space-sm); }
.kartograf-root .chat-feature-tabs,
.kartograf-root .chat-feature-stats { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.kartograf-root .chat-feature-stats div,
.kartograf-root .chat-feature-callout,
.kartograf-root .chat-feature-row { border: 1px solid var(--ui-border); border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); background: var(--ui-surface-muted); }
.kartograf-root .chat-feature-stats div { min-width: 110px; padding: calc(var(--space-sm) + var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .chat-feature-stats span,
.kartograf-root .chat-feature-row span,
.kartograf-root .chat-feature-callout span { color: var(--ui-text-secondary); font-size: var(--ui-font-size-sm-md); }
.kartograf-root .chat-feature-stats strong { display: block; margin-top: calc(var(--space-2xs) * 1.5); font-size: calc((var(--ui-font-size-lg) + var(--ui-font-size-2xl)) / 2); }
.kartograf-root .chat-feature-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.kartograf-root .chat-feature-row { justify-content: space-between; padding: calc(var(--space-sm) + var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .chat-feature-row.strong { border-color: var(--ui-status-warning); }
.kartograf-root .chat-feature-row.compact { padding: calc(var(--space-sm) - var(--space-2xs) / 2) var(--space-sm); }
.kartograf-root .chat-feature-row > div:first-child { min-width: 0; }
.kartograf-root .chat-feature-row p,
.kartograf-root .chat-feature-callout p { margin: calc(var(--space-2xs) * 1.5) 0; color: var(--ui-text-secondary); }
.kartograf-root .chat-feature-callout { display: flex; flex-direction: column; gap: var(--space-xs); padding: calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .chat-feature-progress { display: flex; flex-direction: column; gap: calc(var(--space-xs) + var(--space-2xs)); }
@media (max-width: 760px) {
    .kartograf-root .chat-feature-head,
    .kartograf-root .chat-feature-row { align-items: stretch; flex-direction: column; }
    .kartograf-root .chat-feature-grid.two,
    .kartograf-root .chat-feature-grid.three { grid-template-columns: 1fr; }
}
.kartograf-root .k-chat-reportmenu { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: calc(var(--space-2xs) * 1.5); padding: calc(var(--space-2xs) * 1.5) var(--space-2xs); }
.kartograf-root .k-chat-act.k-reported { color: var(--ui-status-success); text-decoration: none; }
.kartograf-root .k-chat-searchbar { flex-shrink: 0; display: flex; align-items: center; gap: calc(var(--space-xs) + var(--space-2xs)); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-sm-md);
    border-bottom: 1px solid var(--ui-border); }
.kartograf-root .k-chat-searchinput { flex: 1; font-size: var(--ui-font-size-sm-md); color: var(--ui-text-primary); background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border); border-radius: calc((var(--radius-md) + var(--radius-xl)) / 2); padding: var(--space-xs) calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .k-chat-searchinput:focus { outline: none; border-color: var(--ui-ring); }
.kartograf-root .k-chat-searchclear { color: var(--ui-text-secondary); font-size: var(--ui-font-size-sm); }
.kartograf-root .k-chat-searchmeta { font-size: var(--ui-font-size-xs); color: var(--ui-text-secondary); padding: var(--space-2xs) var(--space-2xs) calc(var(--space-xs) + var(--space-2xs)); align-self: center; }
.kartograf-root .k-chat-v2-surface .k-chat-searchresult { align-self: stretch; margin: var(--space-xs) 0; padding: var(--space-2xs) var(--space-xs); background: transparent;
    border: none; border-radius: 0; }
.kartograf-root .k-chat-searchresult .k-chat-msg-text { white-space: pre-wrap; word-break: break-word; }
.kartograf-root .k-chat-searchresult mark { background: var(--ui-status-warning); color: var(--ui-surface-subtle); border-radius: calc((var(--radius-xs) + var(--radius-sm)) / 2); padding: 0 var(--space-2xs); }
.kartograf-root .k-chat-voicepicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: calc(var(--space-2xs) * 1.5);
    padding: var(--space-xs) calc(var(--space-xs) + var(--space-2xs)); background: var(--ui-surface-muted); border: 1px solid var(--ui-border); border-radius: var(--radius-md); }
.kartograf-root .k-chat-ttserror { flex-shrink: 0; padding: var(--space-xs) var(--space-sm-md); font-size: var(--ui-font-size-sm); color: var(--ui-error); }
.kartograf-root .k-chat-grouperror { padding: var(--space-xs) var(--space-2xs) 0; font-size: var(--ui-font-size-sm); color: var(--ui-error); }
.kartograf-root .k-chat-online { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-status-success);
    display: inline-block; flex-shrink: 0; margin-right: calc(var(--space-2xs) / 2); }
.kartograf-root .k-chat-mentions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) + var(--space-2xs) / 2); padding: calc(var(--space-xs) + var(--space-2xs) / 2) var(--space-sm-md);
    border-top: 1px solid var(--ui-border); background: var(--ui-surface-muted); }
.kartograf-root .k-chat-mention-item { font-size: var(--ui-font-size-sm); font-weight: 700; color: var(--ui-status-accent);
    padding: var(--space-2xs) calc(var(--space-sm) + var(--space-2xs) / 2); border-radius: var(--radius-lg); border: 1px solid var(--ui-border-hover); background: var(--ui-surface); }
.kartograf-root .k-chat-mention-item:hover { border-color: var(--ui-status-warning); }
.kartograf-root .k-chat-attachments { display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) + var(--space-2xs) / 2); margin-top: var(--space-xs); }
.kartograf-root .k-chat-att-img { max-width: 180px; max-height: 140px; border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); border: 1px solid var(--ui-border); display: block; }
.kartograf-root .k-chat-att-file { font-size: var(--ui-font-size-sm); color: var(--ui-status-accent); text-decoration: underline; }
.kartograf-root .k-chat-pending { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) + var(--space-2xs) / 2); padding: calc(var(--space-xs) + var(--space-2xs) / 2) var(--space-sm-md); }
.kartograf-root .k-chat-pending-item { font-size: var(--ui-font-size-xs); color: var(--ui-text-secondary); background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border); border-radius: calc((var(--radius-md) + var(--radius-lg)) / 2); padding: var(--space-2xs) var(--space-sm); }
.kartograf-root .k-chat-attach { display: grid; place-items: center; width: 30px; height: 36px; color: var(--ui-text-secondary); }
.kartograf-root .k-chat-attach:hover { color: var(--ui-action-primary); }
.kartograf-root .k-chat-fileinput { display: none; }
.kartograf-root .k-chat-leave { font-size: var(--ui-font-size-xs); color: var(--ui-text-secondary); text-decoration: underline; }
.kartograf-root .k-chat-leave:hover { color: var(--ui-error); }
.kartograf-root .k-chat-newchatbar { flex-shrink: 0; display: flex; justify-content: flex-end; padding: calc(var(--space-xs) + var(--space-2xs) / 2) var(--space-sm-md) 0; gap: var(--space-sm-md); }
.kartograf-root .k-chat-newchat { font-size: var(--ui-font-size-xs); font-family: var(--ui-font-display); font-weight: 700; color: var(--ui-status-warning); }
.kartograf-root .k-chat-newchat:hover { color: var(--ui-action-primary); }
.kartograf-root .k-chat-newchatbar .k-chat-newchat + .k-chat-newchat { margin-left: 0; }
.kartograf-root .k-chat-newchatlist { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) + var(--space-2xs) / 2); padding: calc(var(--space-xs) + var(--space-2xs) / 2) var(--space-sm-md);
    border-bottom: 1px solid var(--ui-border); }
/* Full-only: gruppe-oprettelse (navn + multi-select af venner). */
.kartograf-root .k-chat-groupform { flex-shrink: 0; display: flex; flex-direction: column; gap: calc(var(--space-xs) + var(--space-2xs)); padding: var(--space-sm) var(--space-sm-md);
    border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-muted); }
.kartograf-root .k-chat-groupfriends { display: flex; flex-direction: column; gap: calc(var(--space-2xs) * 1.5); max-height: 160px; overflow-y: auto; }
.kartograf-root .k-chat-groupfriend { display: flex; align-items: center; gap: calc(var(--space-sm) - var(--space-2xs) / 2); font-size: var(--ui-font-size-sm-md); color: var(--ui-text-primary); }
.kartograf-root .k-chat-groupfriend input { accent-color: var(--ui-status-warning); }
.kartograf-root .k-chat-groupactions { display: flex; justify-content: flex-end; }
.kartograf-root .k-chat-groupbtn { font-family: var(--ui-font-display); font-size: var(--ui-font-size-sm); font-weight: 700; color: var(--ui-surface-subtle);
    background: var(--ui-status-warning); border: 1px solid var(--ui-border-hover); border-radius: calc((var(--radius-md) + var(--radius-xl)) / 2); padding: var(--space-xs) calc(var(--space-sm-md) + var(--space-2xs)); cursor: pointer; }
.kartograf-root .k-chat-groupbtn:hover { background: var(--ui-action-primary); }
.kartograf-root .k-chat-groupbtn:disabled { opacity: .5; cursor: default; }
/* Full-only: søge-scope-toggle + globale træffere med trådnavn. */
.kartograf-root .k-chat-searchscope { flex-shrink: 0; font-family: var(--ui-font-display); font-size: var(--ui-font-size-xs); font-weight: 700;
    color: var(--ui-text-secondary); background: var(--ui-surface-muted); border: 1px solid var(--ui-border-hover); border-radius: calc((var(--radius-md) + var(--radius-xl)) / 2);
    padding: calc(var(--space-2xs) * 1.5) calc(var(--space-sm) + var(--space-2xs)); cursor: pointer; white-space: nowrap; }
.kartograf-root .k-chat-searchscope:hover { color: var(--ui-action-primary); border-color: var(--ui-action-primary); }
.kartograf-root .k-chat-searchscope.active { color: var(--ui-surface-subtle); background: var(--ui-status-warning); border-color: var(--ui-status-warning); }
.kartograf-root .k-chat-searchresult-global { display: flex; flex-direction: column; gap: var(--space-2xs); text-align: left; width: 100%; cursor: pointer; }
.kartograf-root .k-chat-v2-surface .k-chat-searchresult-global:hover { color: var(--ui-action-primary); }
.kartograf-root .k-chat-searchresult-thread { font-family: var(--ui-font-display); font-size: var(--ui-font-size-xs); font-weight: 700; color: var(--ui-status-warning); }
.kartograf-root .k-chat-threadbar { flex-shrink: 0; padding: var(--space-sm) var(--space-sm-md); border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 62%, transparent); }
.kartograf-root .k-chat-threadsel { width: 100%; font-family: var(--ui-font-display); font-size: var(--ui-font-size-md); color: var(--ui-text-primary);
    background: var(--ui-surface); border: 1px solid color-mix(in srgb, var(--ui-border-hover) 70%, transparent); border-radius: var(--radius-full); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-sm-md); cursor: pointer; }
.kartograf-root .k-chat-loading { margin: auto; }
.kartograf-root .k-chat-loadolder { flex-shrink: 0; align-self: center; margin: 0 0 calc(var(--space-sm) + var(--space-2xs)); padding: var(--space-xs) calc(var(--space-sm-md) + var(--space-2xs));
    font-family: var(--ui-font-display); font-size: var(--ui-font-size-sm); font-weight: 700; color: var(--ui-text-secondary);
    background: var(--ui-surface-muted); border: 1px solid var(--ui-border-hover); border-radius: calc((var(--radius-md) + var(--radius-xl)) / 2); cursor: pointer; }
.kartograf-root .k-chat-loadolder:hover { color: var(--ui-action-primary); }
.kartograf-root .k-chat-loadolder:disabled { opacity: .5; cursor: default; }
.kartograf-root .k-chat-msg { margin-bottom: var(--space-sm-md); max-width: 92%; }
.kartograf-root .k-chat-msg.mine { align-self: flex-end; }
.kartograf-root .k-chat-msg-meta { display: flex; align-items: baseline; gap: calc(var(--space-xs) + var(--space-2xs)); margin-bottom: var(--space-2xs); padding: 0 var(--space-2xs); }
.kartograf-root .k-chat-msg.mine .k-chat-msg-meta { justify-content: flex-end; }
.kartograf-root .k-chat-msg-author { font-family: var(--ui-font-display); font-weight: 700; font-size: var(--ui-font-size-sm-md); color: var(--ui-action-primary); }
.kartograf-root .k-chat-msg.mine .k-chat-msg-author { color: var(--ui-status-success); }
.kartograf-root .k-chat-msg-time { font-size: var(--ui-font-size-xs); color: var(--ui-text-secondary); }
.kartograf-root .k-chat-v2-surface .k-chat-msg-text { background: transparent; border: none; border-radius: 0;
    padding: calc(var(--space-2xs) / 2) var(--space-2xs); color: var(--ui-text-primary); font-size: var(--ui-font-size-md); line-height: var(--ui-leading-snug); white-space: pre-wrap; word-break: break-word; }
.kartograf-root .k-chat-v2-surface .k-chat-msg.mine .k-chat-msg-text { background: transparent; border-color: transparent; }
.kartograf-root .k-chat-compose { flex-shrink: 0; display: flex; gap: calc(var(--space-xs) + var(--space-2xs)); padding: calc(var(--space-sm) + var(--space-2xs)) var(--space-sm-md) var(--space-sm-md);
    border-top: 1px solid color-mix(in srgb, var(--ui-border) 62%, transparent); align-items: center; }
.kartograf-root .k-chat-input { flex: 1; font-family: inherit; font-size: var(--ui-font-size-md); color: var(--ui-text-primary);
    background: var(--ui-surface); border: 1px solid color-mix(in srgb, var(--ui-border-hover) 70%, transparent); border-radius: var(--radius-full); padding: var(--space-sm) calc(var(--space-sm-md) + var(--space-2xs)); }
.kartograf-root .k-chat-input:focus { outline: none; border-color: var(--ui-ring); }
.kartograf-root .k-chat-send { display: grid; place-items: center; width: 38px; height: 36px; border: none;
    border-radius: var(--radius-full); background: var(--ui-action-primary); color: var(--ui-action-primary-text); cursor: pointer; }
.kartograf-root .k-chat-send:disabled { opacity: .45; cursor: default; }
.kartograf-root .k-chat-toolbtn { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 34px;
    border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent); border-radius: var(--radius-full); background: var(--ui-surface); color: var(--ui-text-secondary);
    cursor: pointer; }
.kartograf-root .k-chat-toolbtn:hover { color: var(--ui-action-primary); border-color: var(--ui-action-primary); }
.kartograf-root .k-chat-slot { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.kartograf-root .k-chat-slot.k-hidden { display: none; }
.kartograf-root .k-chat-msg-text.k-deleted { font-style: italic; color: var(--ui-text-secondary); background: transparent;
    border-style: dashed; }
.kartograf-root .k-chat-msg-actions { display: flex; gap: calc(var(--space-sm) + var(--space-2xs)); margin-top: calc(var(--space-2xs) * 1.5); padding: 0 var(--space-2xs);
    opacity: 0; transition: opacity .12s ease; }
.kartograf-root .k-chat-msg:hover .k-chat-msg-actions { opacity: 1; }
.kartograf-root .k-chat-msg.mine .k-chat-msg-actions { justify-content: flex-end; }
.kartograf-root .k-chat-act { font-size: var(--ui-font-size-xs); color: var(--ui-text-secondary); text-decoration: underline; }
.kartograf-root .k-chat-act:hover { color: var(--ui-action-primary); }
.kartograf-root .k-chat-edit { display: flex; gap: var(--space-xs); align-items: center; }
.kartograf-root .k-chat-iconbtn { display: grid; place-items: center; width: 30px; height: 30px; border: none;
    border-radius: var(--ui-radius); background: var(--ui-surface-muted); color: var(--ui-text-secondary); cursor: pointer; }
.kartograf-root .k-chat-iconbtn:hover { color: var(--ui-action-primary); }
.kartograf-root .k-chat-typing { flex-shrink: 0; padding: calc(var(--space-2xs) * 1.5) calc(var(--space-sm-md) + var(--space-2xs) / 2); font-size: var(--ui-font-size-sm); font-style: italic;
    color: var(--ui-text-secondary); }
.kartograf-root .k-chat-modebar { flex-shrink: 0; display: flex; align-items: center; gap: calc(var(--space-xs) + var(--space-2xs)); padding: var(--space-xs) var(--space-sm-md) 0; }
.kartograf-root .k-chat-modelabel { font-size: var(--ui-font-size-xs); font-family: var(--ui-font-display); font-weight: 700; color: var(--ui-text-secondary); }
.kartograf-root .k-chat-modesel { font-size: var(--ui-font-size-sm); color: var(--ui-text-primary); background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border-hover); border-radius: var(--radius-lg); padding: var(--space-2xs) var(--space-sm); cursor: pointer; max-width: 190px; }
.kartograf-root .k-chat-input.k-as-dm { border-color: var(--ui-status-warning); }
.kartograf-root .k-chat-msg.k-mode-dm .k-chat-msg-author { color: var(--ui-status-warning); }
.kartograf-root .k-chat-v2-surface .k-chat-msg.k-mode-dm .k-chat-msg-text { border-color: transparent; }
.kartograf-root .k-chat-structured { margin-top: calc(var(--space-xs) + var(--space-2xs)); max-width: min(100%, 34rem); }
.kartograf-root .k-chat-msg.mine .k-chat-structured { margin-left: auto; }
.kartograf-root .k-chat-sources { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space-xs) + var(--space-2xs) / 2); margin-top: calc(var(--space-xs) + var(--space-2xs) / 2);
    font-size: var(--ui-font-size-xs); color: var(--ui-text-secondary); }
.kartograf-root .k-chat-msg.mine .k-chat-sources { justify-content: flex-end; }
.kartograf-root .k-chat-sources-label { font-family: var(--ui-font-display); font-weight: 700; color: var(--ui-text-primary); }
.kartograf-root .k-chat-source { border: 1px solid var(--ui-border); border-radius: var(--radius-full); padding: calc(var(--space-2xs) / 2) calc(var(--space-sm) - var(--space-2xs) / 2);
    background: var(--ui-surface-muted); color: var(--ui-text-secondary); }

/* --- Forenet chat: Full-layout (samme KartografChatPanel i et KWindow) ---
   Panelet wrappes altid i .k-chat-panelroot. I dock'en (Compact) er wrapperen transparent
   (display:contents) saa dock-flexet er UAENDRET. I et vindue (.k-chat-full) bliver den en flex-
   kolonne der fylder vinduet: .k-chat-body vokser+scroller, compose forbliver fastlaast nederst. */
.kartograf-root .k-chat-panelroot { display: contents; }
.kartograf-root .kwin-body .chat-conv-host { height: 100%; padding: 0; display: flex; flex-direction: column; min-height: 0; }
/* Compact: konversations-kolonnen er transparent saa dock'ens flex er HELT uaendret. */
.kartograf-root .k-chat-panelroot:not(.k-chat-full) .k-chat-col { display: contents; }

/* Full: 3-zone-grid [sidebar | konversation | side-rude]. Side-ruden vises kun naar et vaerktoej er valgt. */
.kartograf-root .k-chat-panelroot.k-chat-full {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
    flex: 1 1 auto; min-height: 0; gap: calc(var(--space-sm) + var(--space-2xs));
}
.kartograf-root .k-chat-panelroot.k-chat-full .k-chat-col {
    min-width: 0; min-height: 0; display: flex; flex-direction: column;
    grid-column: 2; border: 1px solid var(--ui-border); border-radius: var(--radius-md); background: var(--ui-surface-muted);
    overflow: hidden;
}
.kartograf-root .k-chat-panelroot.k-chat-full .k-chat-body { flex: 1 1 auto; min-height: 0; }
.kartograf-root .k-chat-panelroot.k-chat-full .k-chat-msg { max-width: 72%; }

/* Full: traad-liste-sidebar (venstre kolonne) */
.kartograf-root .k-chat-sidebar {
    grid-column: 1; min-height: 0; overflow: auto; padding: var(--space-sm);
    border: 1px solid var(--ui-border); border-radius: var(--radius-md); background: var(--ui-surface-muted);
    display: flex; flex-direction: column; gap: var(--space-xs);
}
.kartograf-root .k-chat-sidehead {
    margin: var(--space-2xs) var(--space-xs) calc(var(--space-xs) + var(--space-2xs)); color: var(--ui-text-secondary); font-size: calc((var(--ui-font-size-sm) + var(--ui-font-size-sm-md)) / 2); font-weight: 700; text-transform: uppercase;
}
.kartograf-root .k-chat-sideempty { padding: var(--space-sm); color: var(--ui-text-secondary); font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2); }
.kartograf-root .k-chat-sidethread {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
    border: 1px solid transparent; border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); padding: var(--space-sm); background: transparent;
    color: inherit; text-align: left; cursor: pointer;
}
.kartograf-root .k-chat-sidethread:hover { border-color: var(--ui-border); }
.kartograf-root .k-chat-sidethread.active { border-color: var(--ui-status-warning); background: var(--ui-surface); }
.kartograf-root .k-chat-sidethread-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartograf-root .k-chat-sideunread {
    min-width: 20px; height: 20px; padding: 0 calc(var(--space-xs) + var(--space-2xs)); border-radius: var(--radius-full); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ui-status-warning); color: var(--ui-surface-subtle); font-weight: 700; font-size: calc((var(--ui-font-size-sm) + var(--ui-font-size-sm-md)) / 2);
}

/* Full: offline-/sync-banner */
.kartograf-root .k-chat-offline {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-sm-md); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
    color: var(--ui-text-secondary); font-weight: 700;
}
.kartograf-root .k-chat-offline-sync {
    min-height: 28px; padding: 0 calc(var(--space-sm) + var(--space-2xs)); cursor: pointer; color: var(--ui-text-secondary);
    background: var(--ui-surface-muted); border: 1px solid var(--ui-border-hover); border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); font-weight: 700;
}
.kartograf-root .k-chat-offline-sync:hover:not(:disabled) { color: var(--ui-action-primary); border-color: var(--ui-action-primary); }
.kartograf-root .k-chat-offline-sync:disabled { opacity: 0.5; cursor: default; }

/* Full: Fastgjorte/Filer vaerktoejslinje */
.kartograf-root .k-chat-tools { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) + var(--space-2xs)); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-sm-md) 0; }
.kartograf-root .k-chat-tool {
    min-height: 28px; padding: 0 calc(var(--space-sm) + var(--space-2xs)); cursor: pointer; color: var(--ui-text-secondary);
    background: var(--ui-surface-muted); border: 1px solid var(--ui-border-hover); border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); font-weight: 700; font-size: var(--ui-font-size-sm);
}
.kartograf-root .k-chat-tool:hover { color: var(--ui-action-primary); border-color: var(--ui-action-primary); }
.kartograf-root .k-chat-tool.active { color: var(--ui-action-primary-text); background: var(--ui-action-primary); border-color: var(--ui-action-primary); }

/* Full: side-rude (hoejre kolonne) med Fastgjorte/Filer */
.kartograf-root .k-chat-sidepane {
    grid-column: 3; width: 240px; min-height: 0; overflow: auto; padding: var(--space-sm);
    border: 1px solid var(--ui-border); border-radius: var(--radius-md); background: var(--ui-surface-muted);
    display: flex; flex-direction: column; gap: calc(var(--space-xs) + var(--space-2xs));
}
.kartograf-root .k-chat-sideitem {
    display: flex; flex-direction: column; gap: var(--space-2xs); border: 1px solid var(--ui-border); border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2);
    padding: calc(var(--space-sm) - var(--space-2xs) / 2) var(--space-sm); background: var(--ui-surface); color: inherit; text-align: left;
    text-decoration: none; cursor: pointer;
}
.kartograf-root .k-chat-sideitem:hover { border-color: var(--ui-status-warning); }
.kartograf-root .k-chat-sideitem-author { color: var(--ui-text-secondary); font-weight: 700; font-size: var(--ui-font-size-sm-md);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartograf-root .k-chat-sideitem-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Markdown-værktøjslinje + preview (kun Full-layout) + saneret markdown-rendering --- */
.kartograf-root .k-chat-formatbar { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) + var(--space-2xs) / 2);
    padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-sm-md) 0; }
.kartograf-root .k-chat-fmt { font-size: var(--ui-font-size-sm); min-width: 30px; height: 26px; padding: 0 var(--space-sm); cursor: pointer;
    color: var(--ui-text-secondary); background: var(--ui-surface-muted); border: 1px solid var(--ui-border-hover); border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2); }
.kartograf-root .k-chat-fmt:hover { color: var(--ui-action-primary); border-color: var(--ui-action-primary); }
.kartograf-root .k-chat-fmt.active { color: var(--ui-action-primary-text); background: var(--ui-action-primary); border-color: var(--ui-action-primary); }
.kartograf-root .k-chat-preview { flex-shrink: 0; margin: calc(var(--space-xs) + var(--space-2xs)) var(--space-sm-md) 0; max-height: 120px; overflow: auto;
    padding: var(--space-sm) calc(var(--space-sm) + var(--space-2xs)); font-size: var(--ui-font-size-md); line-height: var(--ui-leading-snug); color: var(--ui-text-primary);
    background: var(--ui-surface-muted); border: 1px solid var(--ui-border); border-radius: var(--radius-md); }
.kartograf-root .k-chat-md blockquote { margin: var(--space-xs) 0; padding-left: calc(var(--space-sm) + var(--space-2xs) / 2); border-left: 3px solid var(--ui-status-warning);
    color: var(--ui-text-secondary); }
.kartograf-root .k-chat-md code { font-family: var(--ui-font-mono); font-size: var(--ui-font-size-sm); padding: calc(var(--space-2xs) / 2) var(--space-xs);
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--radius-sm); }
.kartograf-root .k-chat-md li { margin-left: var(--space-md); list-style: disc; }

.kartograf-root .k-empty { text-align: center; color: var(--ui-text-secondary); padding: calc(var(--space-xl) - var(--space-2xs)) calc(var(--space-sm) + var(--space-2xs));
    font-style: italic; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }

/* Kartograf inline-edit primitiver (KInlineField / KInlineSelect) */
.kartograf-root .k-inline { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-xs) 0; }
.kartograf-root .k-inline-label { font-size: var(--ui-font-size-xs); letter-spacing: .04em; color: var(--ui-text-secondary); }
.kartograf-root .k-inline-value { font-family: var(--ui-font-display); font-weight: 600; font-size: var(--ui-font-size-lg);
    color: var(--ui-text-primary); cursor: pointer; display: inline-flex; align-items: center; gap: calc(var(--space-xs) + var(--space-2xs)); border-radius: calc((var(--radius-xs) + var(--radius-sm)) / 2); }
.kartograf-root .k-inline-value.multiline { font-family: var(--ui-font-sans); font-weight: 400; font-size: var(--ui-font-size-md);
    line-height: 1.48; white-space: pre-wrap; word-break: break-word; display: block; }
.kartograf-root .k-inline-value.empty { color: var(--ui-text-secondary); font-weight: 400; font-style: italic; }
.kartograf-root .k-inline-value:hover { color: var(--ui-status-warning); }
.kartograf-root .k-visibility-control .k-inline-label { display: inline-flex; align-items: center; gap: calc(var(--space-xs) + var(--space-2xs)); }
.kartograf-root .k-visibility-control .k-inline-value { cursor: default; }
.kartograf-root .k-visibility-control .k-inline-value:hover { color: var(--ui-text-primary); }
.kartograf-root .k-inline-pencil { opacity: 0; color: var(--ui-text-secondary); }
.kartograf-root .k-inline-value:hover .k-inline-pencil { opacity: .7; }
.kartograf-root .k-inline-edit { display: flex; align-items: flex-start; gap: calc(var(--space-xs) + var(--space-2xs)); }
.kartograf-root .k-inline-edit .mud-input-control { min-width: 220px; }
.kartograf-root .k-inline-unit { font-size: var(--ui-font-size-sm); font-weight: 400; color: var(--ui-text-secondary); margin-left: var(--space-2xs); }
/* KToggle — bool inline-felt som V2-chip */
.kartograf-root .k-toggle { align-self: flex-start; font-family: var(--ui-font-display); font-weight: 600; font-size: var(--ui-font-size-sm-md);
    padding: calc(var(--space-2xs) / 2) var(--space-sm-md); border-radius: calc((var(--radius-md) + var(--radius-xl)) / 2); border: 1px solid var(--ui-border-hover); }
.kartograf-root .k-toggle.on { background: var(--ui-status-success); color: var(--ui-surface-subtle); border-color: var(--ui-status-success); }
.kartograf-root .k-toggle.off { background: var(--ui-surface-muted); color: var(--ui-text-secondary); }
.kartograf-root .k-toggle.k-clickable:hover { border-color: var(--ui-status-warning); }

/* Kartograf indholdssektioner (brev/grid) — genbruges af /v2-modulsider */
.kartograf-root .k-page { max-width: 1100px; }
.kartograf-root .k-page.k-character-sheet-page {
    width: 100%;
    max-width: none;
    min-width: 0;
}
.kartograf-root .k-sect { font-family: var(--ui-font-display); font-weight: 700; font-size: var(--ui-font-size-xl);
    border-bottom: 1px dashed var(--ui-border); padding-bottom: calc(var(--space-xs) + var(--space-2xs)); margin: calc(var(--space-sm-md) + var(--space-2xs)) 0 var(--space-sm); }
.kartograf-root .k-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin: calc(var(--space-sm) + var(--space-2xs)) 0; }
.kartograf-root .k-statbox { border: 1px solid var(--ui-border); border-radius: var(--radius-sm); background: var(--ui-surface);
    padding: calc(var(--space-sm) + var(--space-2xs) / 2) calc(var(--space-sm) - var(--space-2xs) / 2); text-align: center; }
.kartograf-root .k-statbox b { font-family: var(--ui-font-display); font-weight: 700; font-size: calc((var(--ui-font-size-lg) + var(--ui-font-size-2xl)) / 2); display: block; }
.kartograf-root .k-statbox span { font-size: var(--ui-font-size-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-secondary); }
/* Kompakt/diskret statgrid-variant (fx Verdensoverblik) — smaa inline-piller i stedet for store bokse */
.kartograf-root .k-statgrid--mini { display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) + var(--space-2xs)); margin: calc(var(--space-xs) + var(--space-2xs)) 0 calc(var(--space-sm) + var(--space-2xs)); }
.kartograf-root .k-statgrid--mini .k-statbox { display: inline-flex; align-items: baseline; gap: calc(var(--space-xs) + var(--space-2xs) / 2);
    padding: var(--space-2xs) calc(var(--space-sm) + var(--space-2xs) / 2); background: transparent; border-radius: var(--radius-full); text-align: left; }
.kartograf-root .k-statgrid--mini .k-statbox b { display: inline; font-size: var(--ui-font-size-sm-md); }
.kartograf-root .k-statgrid--mini .k-statbox span { font-size: var(--ui-font-size-3xs); }

/* Foldbart afsnit (native <details>) med drejende pil — genbruges af /v2-vinduer */
.kartograf-root .k-collapse { margin: calc(var(--space-sm) + var(--space-2xs)) 0; }
.kartograf-root summary.k-collapse-sum { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
    gap: calc(var(--space-xs) + var(--space-2xs)); user-select: none; font-weight: 700; font-size: var(--ui-font-size-xs); letter-spacing: .06em;
    text-transform: uppercase; color: var(--ui-text-secondary); }
.kartograf-root summary.k-collapse-sum::-webkit-details-marker { display: none; }
.kartograf-root summary.k-collapse-sum::before { content: "\25B8"; font-size: var(--ui-font-size-xs); transition: transform .15s ease; }
.kartograf-root details.k-collapse[open] > summary.k-collapse-sum::before { transform: rotate(90deg); }
.kartograf-root summary.k-collapse-sum.k-sect { display: flex; text-transform: none; letter-spacing: 0;
    font-size: var(--ui-font-size-xl); color: var(--ui-text-primary); }
.kartograf-root .k-collapse-body { margin-top: var(--space-sm); }
/* Skjul selv indholdet naar panelet er lukket — native <details>-collapse er ikke paalidelig
   i app-shell'en, saa vi haandhaever det eksplicit (ellers vises indholdet altid). */
.kartograf-root details.k-collapse:not([open]) > .k-collapse-body { display: none; }

.kartograf-root .k-lrow { display: flex; align-items: center; gap: calc(var(--space-sm) + var(--space-2xs)); padding: var(--space-sm) var(--space-xs);
    border-bottom: 1px dashed var(--ui-border); cursor: pointer; }
.kartograf-root .k-lrow:hover { background: color-mix(in srgb, var(--ui-action-primary) 7%, var(--ui-surface)); }
.kartograf-root .k-lrow .nm { font-family: var(--ui-font-display); font-weight: 600; font-size: var(--ui-font-size-lg); }
.kartograf-root .k-lrow .sub { font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); }
.kartograf-root .k-tag { font-size: var(--ui-font-size-3xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--ui-status-warning); color: var(--ui-status-warning); border-radius: calc((var(--radius-xs) + var(--radius-sm)) / 2); padding: calc(var(--space-2xs) / 2) calc(var(--space-xs) + var(--space-2xs)); }
.kartograf-root .k-lrow-main { flex: 1; min-width: 0; }
/* Tidslinjen: farveindikatorer for tidsaldre + nuvaerende kalenderdato */
.kartograf-root .k-era-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: calc((var(--radius-xs) + var(--radius-sm)) / 2);
    border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-swatch); }
.kartograf-root .k-datecard { display: flex; align-items: baseline; gap: calc(var(--space-sm) + var(--space-2xs)); flex-wrap: wrap;
    font-family: var(--ui-font-display); padding: var(--space-sm) 0; }
.kartograf-root .k-datecard .big { font-size: calc((var(--ui-font-size-2xl) + var(--ui-font-size-3xl)) / 2); font-weight: 700; color: var(--ui-text-primary); }
.kartograf-root .k-datecard .lbl { font-size: var(--ui-font-size-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-status-warning); }
.kartograf-root .k-toprow { display: flex; align-items: flex-start; gap: calc(var(--space-sm-md) + var(--space-2xs)); }
.kartograf-root .k-toprow-main { flex: 1; min-width: 0; }
.kartograf-root .k-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-lg); }
@media (max-width: 768px) { .kartograf-root .k-twocol, .kartograf-root .k-statgrid { grid-template-columns: 1fr; } }
.kartograf-root .k-areas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-xs) 0 var(--space-sm); }

/* === Nexus V2-komponenter (charter/gauges/faner/traer/tags), scopet === */
.kartograf-root .desc { font-family:var(--ui-font-display);font-style:italic;font-size:calc((var(--ui-font-size-md) + var(--ui-font-size-xl)) / 2);line-height:var(--ui-leading-snug);color:var(--ui-text-primary);margin-bottom:calc(var(--space-sm) + var(--space-2xs)) }
.kartograf-root .sect { font-family:var(--ui-font-display);font-weight:700;font-size:calc((var(--ui-font-size-md) + var(--ui-font-size-lg)) / 2);border-bottom:1px dashed var(--ui-border);padding-bottom:calc(var(--space-xs) + var(--space-2xs) / 2);margin:calc(var(--space-sm-md) - var(--space-2xs) / 2) 0 calc(var(--space-sm) - var(--space-2xs) / 2);display:flex;align-items:baseline;gap:var(--space-sm) }
.kartograf-root .sect .n { font-size:var(--ui-font-size-xs);color:var(--ui-status-warning);font-family:var(--ui-font-sans);font-weight:600 }
.kartograf-root .lrow { display:flex;align-items:center;gap:calc(var(--space-sm) + var(--space-2xs));padding:calc(var(--space-xs) + var(--space-2xs)) var(--space-xs);border-bottom:1px dashed var(--ui-border);border-radius:calc((var(--radius-xs) + var(--radius-sm)) / 2) }
.kartograf-root .lrow:last-child { border-bottom:none }
.kartograf-root .lrow.click { cursor:pointer }
.kartograf-root .lrow.click:hover { background:color-mix(in srgb, var(--ui-action-primary) 8%, var(--ui-surface)) }
.kartograf-root .lrow .pic { width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ui-border-hover);display:grid;place-items:center;
  font-family:var(--ui-font-display);font-weight:700;font-size:var(--ui-font-size-sm-md);background:var(--ui-background-deep);color:var(--ui-status-warning);flex-shrink:0 }
.kartograf-root .lrow .nm { font-family:var(--ui-font-display);font-weight:600;font-size:calc((var(--ui-font-size-md) + var(--ui-font-size-lg)) / 2);line-height:1.15 }
.kartograf-root .lrow .nm a { color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .12s ease,color .12s ease }
.kartograf-root .lrow .nm a:hover { color:var(--ui-status-warning);border-bottom-color:currentColor }
.kartograf-root .lrow .sub { font-size:calc((var(--ui-font-size-xs) + var(--ui-font-size-sm)) / 2);color:var(--ui-text-secondary) }
.kartograf-root .lrow .arr { margin-left:auto;color:var(--ui-text-secondary);font-size:var(--ui-font-size-xs) }
.kartograf-root .lrow.click:hover .arr { color:var(--ui-status-warning) }
.kartograf-root .deity-mark-img { width:100%;height:100%;object-fit:contain;display:block }
.kartograf-root .deity-media-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--space-sm) + var(--space-2xs));margin:var(--space-sm) 0 var(--space-sm-md) }
.kartograf-root .deity-media-tile { display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:calc(var(--space-sm) + var(--space-2xs));
  border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);padding:var(--space-sm) }
.kartograf-root .deity-media-preview { width:54px;height:54px;border:1px solid var(--ui-border-hover);border-radius:var(--radius-sm);display:grid;place-items:center;overflow:hidden;background:var(--ui-surface-muted) }
.kartograf-root .deity-media-preview img { width:100%;height:100%;object-fit:contain;display:block }
.kartograf-root .deity-media-copy { display:flex;flex-direction:column;min-width:0;gap:var(--space-2xs) }
.kartograf-root .deity-media-copy strong { font-family:var(--ui-font-display);font-size:var(--ui-font-size-md);font-weight:600;color:var(--ui-text-primary) }
.kartograf-root .deity-media-copy span { font-size:var(--ui-font-size-sm);color:var(--ui-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.kartograf-root .deity-upload-action { position:relative;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ui-border-hover);
  border-radius:var(--ui-radius);background:var(--ui-surface-muted);cursor:pointer;overflow:hidden }
.kartograf-root .deity-upload-action:hover { border-color:var(--ui-action-primary);background:color-mix(in srgb, var(--ui-action-primary) 8%, var(--ui-surface-muted)) }
.kartograf-root .deity-upload-input { position:absolute;inset:0;opacity:0;cursor:pointer;font-size:calc(var(--ui-font-size-3xl) * 4) }
.kartograf-root .deity-gift-create { display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,1.4fr) auto;gap:var(--space-sm);align-items:center;margin-top:var(--space-sm) }
@media (max-width: 768px) {
  .kartograf-root .deity-media-grid,
  .kartograf-root .deity-gift-create { grid-template-columns:1fr }
  .kartograf-root .deity-media-tile { grid-template-columns:54px minmax(0,1fr) auto }
}
.kartograf-root /* window tabs (karakterark m.fl.) */
.wtabs { display:flex;gap:var(--space-2xs);border-bottom:1px solid var(--ui-border);margin:calc(var(--space-sm) + var(--space-2xs)) 0 calc(var(--space-sm) + var(--space-2xs)) }
.kartograf-root .wt { font-family:var(--ui-font-display);font-weight:600;font-size:calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2);color:var(--ui-text-secondary);padding:calc(var(--space-xs) + var(--space-2xs) / 2) calc(var(--space-sm-md) - var(--space-2xs) / 2) calc(var(--space-sm) - var(--space-2xs) / 2);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:calc(var(--space-2xs) / -2);white-space:nowrap }
.kartograf-root .wt:hover { color:var(--ui-text-primary) }
.kartograf-root .wt.active { color:var(--ui-action-primary);border-bottom-color:var(--ui-action-primary) }
.kartograf-root .wpane { display:none }
.kartograf-root .wpane.active { display:block }
.kartograf-root /* overbliks-koncepter */
.trow { display:flex;align-items:center;gap:calc(var(--space-sm) - var(--space-2xs) / 2);padding:var(--space-xs) var(--space-2xs);border-bottom:1px dashed var(--ui-border);font-size:calc((var(--ui-font-size-sm) + var(--ui-font-size-sm-md)) / 2) }
.kartograf-root .twist { width:14px;text-align:center;cursor:pointer;color:var(--ui-status-warning);font-size:var(--ui-font-size-xs);user-select:none }
.kartograf-root .twist.leaf { color:var(--ui-border-hover);cursor:default }
.kartograf-root .tdot { width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block }
.kartograf-root .tname { font-family:var(--ui-font-display);font-weight:600;font-size:calc((var(--ui-font-size-md) + var(--ui-font-size-lg)) / 2);cursor:pointer }
.kartograf-root .tname:hover { color:var(--ui-status-warning);text-decoration:underline }
.kartograf-root .ttype { font-size:var(--ui-font-size-3xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-status-warning);
  border:1px solid var(--ui-status-warning);border-radius:calc((var(--radius-xs) + var(--radius-sm)) / 2);padding:calc(var(--space-2xs) / 2) calc(var(--space-xs) + var(--space-2xs));white-space:nowrap;flex-shrink:0 }
.kartograf-root .ttype.set { color:var(--ui-status-accent);border-color:var(--ui-status-accent) }
.kartograf-root .tmeta { color:var(--ui-text-secondary);font-size:var(--ui-font-size-xs);margin-left:auto;white-space:nowrap }
.kartograf-root .tactions { display:inline-flex;align-items:center;gap:var(--space-xs);flex-shrink:0 }
.kartograf-root .tree-add-btn { width:24px;height:24px;display:inline-grid;place-items:center;border:1px solid var(--ui-border-hover);border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--ui-surface) 78%, transparent);color:var(--ui-text-secondary);font-family:var(--ui-font-sans);font-size:calc((var(--ui-font-size-md) + var(--ui-font-size-lg)) / 2);font-weight:700;line-height:var(--ui-leading-none);cursor:pointer;padding:0 }
.kartograf-root .tree-add-btn:hover { color:var(--ui-action-primary);border-color:var(--ui-action-primary);background:color-mix(in srgb, var(--ui-action-primary) 8%, var(--ui-surface)) }
.kartograf-root .territory-create-btn { margin-left:auto }
.kartograf-root .territory-children-header { display:flex;align-items:center;gap:var(--space-sm) }
.kartograf-root .territory-children-header > span { min-width:0 }
.kartograf-root .tree-create-pop { display:inline-flex;gap:calc(var(--space-xs) + var(--space-2xs));align-items:center;margin:var(--space-xs) 0 calc(var(--space-xs) + var(--space-2xs));padding:calc(var(--space-xs) + var(--space-2xs) / 2);border:1px solid var(--ui-border);
  border-radius:var(--radius-sm);background:var(--ui-surface);box-shadow:var(--ui-shadow-md) }
.kartograf-root .tree-create-choice { border:1px solid var(--ui-border-hover);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--ui-surface) 82%, transparent);color:var(--ui-text-primary);
  font-family:var(--ui-font-sans);font-size:calc((var(--ui-font-size-xs) + var(--ui-font-size-sm)) / 2);font-weight:600;line-height:var(--ui-leading-tight);padding:calc(var(--space-xs) + var(--space-2xs) / 2) var(--space-sm);cursor:pointer;white-space:nowrap }
.kartograf-root .tree-create-choice:hover { color:var(--ui-action-primary);border-color:var(--ui-action-primary) }
.kartograf-root .k-clickable { cursor:pointer }
.kartograf-root .k-flex1 { flex:1;min-width:0 }
.kartograf-root .k-w64 { width:64px;flex:0 0 64px }
.kartograf-root .ktitle-assign { display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-xs);flex-wrap:wrap }
.kartograf-root .k-pcnpc { display:inline-flex;border:1px solid var(--ui-border-hover);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0 }
.kartograf-root .k-pcnpc span,
.kartograf-root .k-pcnpc button { font-size:var(--ui-font-size-xs);font-weight:600;padding:calc(var(--space-2xs) * 1.5) calc(var(--space-sm) + var(--space-2xs) / 2);cursor:pointer;color:var(--ui-text-secondary);background:transparent;border:0;font-family:var(--ui-font-sans);line-height:var(--ui-leading-tight) }
.kartograf-root .k-pcnpc span.active,
.kartograf-root .k-pcnpc button.active { background:var(--ui-action-primary);color:var(--ui-action-primary-text) }
.kartograf-root .k-pcnpc button:focus-visible { outline:2px solid var(--ui-ring);outline-offset:-2px }
.kartograf-root .ktitle-unlink { color:var(--ui-text-secondary);font-size:var(--ui-font-size-sm-md);align-self:flex-start;padding:var(--space-2xs) var(--space-xs) }
.kartograf-root .ktitle-unlink:hover { color:var(--ui-error) }
.kartograf-root .ktitle-edit { color:var(--ui-text-secondary);font-size:var(--ui-font-size-sm-md);align-self:flex-start;padding:var(--space-2xs) var(--space-xs) }
.kartograf-root .ktitle-edit:hover { color:var(--ui-status-warning) }
.kartograf-root .ktitle-picker { position:relative;min-width:220px }
.kartograf-root .ktitle-trigger { width:100%;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  color:var(--ui-text-primary);background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--radius-sm);padding:calc(var(--space-xs) + var(--space-2xs) / 2) calc(var(--space-sm) - var(--space-2xs) / 2);
  font-family:var(--ui-font-sans);font-size:calc((var(--ui-font-size-xs) + var(--ui-font-size-sm)) / 2);text-align:left;cursor:pointer }
.kartograf-root .ktitle-trigger:hover,
.kartograf-root .ktitle-trigger:focus-visible { border-color:var(--ui-ring);outline:none }
.kartograf-root .ktitle-trigger span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.kartograf-root .ktitle-menu { position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:35;max-height:320px;overflow:auto;
  border:1px solid var(--ui-border-hover);border-radius:var(--radius-sm);background:var(--ui-surface);box-shadow:var(--ui-shadow-lg);
  padding:calc(var(--space-xs) + var(--space-2xs)) }
.kartograf-root .ktitle-menu-cascading { right:auto;width:min(680px,calc(100vw - 3rem));max-height:min(360px,calc(100vh - 12rem));
  display:grid;grid-template-columns:minmax(180px,240px) minmax(220px,1fr);overflow:hidden;padding:0 }
.kartograf-root .ktitle-category-list { overflow-y:auto;border-right:1px solid var(--ui-border);padding:calc(var(--space-xs) + var(--space-2xs)) }
.kartograf-root button.ktitle-category-option { width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  padding:var(--space-sm);border:0;border-radius:calc((var(--radius-xs) + var(--radius-sm)) / 2);background:transparent;color:var(--ui-text-primary);font-family:var(--ui-font-sans);font-size:var(--ui-font-size-sm);text-align:left;cursor:pointer }
.kartograf-root button.ktitle-category-option span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.kartograf-root button.ktitle-category-option:hover,
.kartograf-root button.ktitle-category-option.active { background:color-mix(in srgb, var(--ui-action-primary) 10%, var(--ui-surface));color:var(--ui-action-primary) }
.kartograf-root .ktitle-submenu { overflow-y:auto;padding:calc(var(--space-xs) + var(--space-2xs)) }
.kartograf-root .ktitle-submenu-title { padding:calc(var(--space-sm) - var(--space-2xs) / 2) var(--space-sm) var(--space-xs);font-size:var(--ui-font-size-2xs);font-weight:700;text-transform:uppercase;color:var(--ui-status-warning) }
.kartograf-root .ktitle-submenu-empty { display:flex;align-items:center;min-height:120px;color:var(--ui-text-secondary);font-family:var(--ui-font-sans);font-size:var(--ui-font-size-sm) }
.kartograf-root .ktitle-select-group { display:block;padding:calc(var(--space-sm) - var(--space-2xs) / 2) var(--space-sm) var(--space-xs);font-size:var(--ui-font-size-2xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ui-status-warning) }
.kartograf-root button.ktitle-select-option { display:block;width:100%;padding:calc(var(--space-sm) - var(--space-2xs) / 2) var(--space-sm) calc(var(--space-sm) - var(--space-2xs) / 2) calc(var(--space-md) + var(--space-2xs));border:0;border-radius:calc((var(--radius-xs) + var(--radius-sm)) / 2);background:transparent;
  color:var(--ui-text-primary);font-family:var(--ui-font-display);font-size:var(--ui-font-size-md);text-align:left;cursor:pointer }
.kartograf-root .ktitle-submenu button.ktitle-select-option { padding-left:var(--space-sm) }
.kartograf-root button.ktitle-select-option:hover,
.kartograf-root button.ktitle-select-option.selected { background:color-mix(in srgb, var(--ui-action-primary) 10%, var(--ui-surface));color:var(--ui-action-primary) }
.kartograf-pop .ktitle-select-group { display:block;font-size:var(--ui-font-size-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-status-warning) }
.kartograf-pop .ktitle-select-option { display:block;padding-left:var(--space-sm-md);font-family:var(--ui-font-display);font-size:var(--ui-font-size-md);color:var(--ui-text-primary) }
.kartograf-root .k-mapsheet-sm { height:240px }
.kartograf-root .tsearch { flex:1 }
.kartograf-root .k-dot--success { background:var(--ui-status-success) }
.kartograf-root .k-dot--accent { background:var(--ui-status-accent) }
.kartograf-root .k-dot--warning { background:var(--ui-status-warning) }
.kartograf-root .k-dot--error { background:var(--ui-status-error) }
.kartograf-root .k-dot--faint { background:var(--ui-border-hover) }
@media (max-width: 680px) {
  .kartograf-root .ktitle-menu-cascading { width:min(92vw,420px);grid-template-columns:1fr;max-height:min(420px,calc(100vh - 10rem)) }
  .kartograf-root .ktitle-category-list { max-height:170px;border-right:0;border-bottom:1px solid var(--ui-border) }
}
.kartograf-root .addrow { display:flex;gap:calc(var(--space-xs) + var(--space-2xs));align-items:center;padding:var(--space-sm);border:1px dashed var(--ui-border-hover);border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--ui-status-warning) 4%, var(--ui-surface));margin:var(--space-sm) 0;flex-wrap:wrap }
.kartograf-root .ainp { font-family:var(--ui-font-sans);font-size:calc((var(--ui-font-size-xs) + var(--ui-font-size-sm)) / 2);color:var(--ui-text-primary);background:var(--ui-surface);
  border:1px solid var(--ui-border);border-radius:calc((var(--radius-xs) + var(--radius-sm)) / 2);padding:calc(var(--space-xs) + var(--space-2xs) / 2) calc(var(--space-sm) - var(--space-2xs) / 2);min-width:0 }
.kartograf-root .ainp:focus { outline:none;border-color:var(--ui-ring) }
.kartograf-root .btnx { display:inline-block;font-size:calc((var(--ui-font-size-xs) + var(--ui-font-size-sm)) / 2);font-weight:600;border-radius:var(--radius-sm);padding:calc(var(--space-xs) + var(--space-2xs)) var(--space-sm-md);cursor:pointer;
  border:1px solid var(--ui-border-hover);color:var(--ui-text-secondary);margin:0 }
.kartograf-root .btnx:hover { color:var(--ui-action-primary);border-color:var(--ui-action-primary) }
.kartograf-root .tkids { display:none }
.kartograf-root .tnode.open > .tkids { display:block }
.kartograf-root .tlegend { display:flex;align-items:center;gap:calc(var(--space-sm) - var(--space-2xs) / 2);font-size:calc((var(--ui-font-size-2xs) + var(--ui-font-size-xs)) / 2);color:var(--ui-text-secondary);margin:calc(var(--space-xs) + var(--space-2xs)) 0 }
/* klik-til-rediger overskrift */
.kartograf-root .k-name-view { display:inline-block;border-radius:var(--radius-sm);padding:calc(var(--space-2xs) / 2) var(--space-xs);margin:calc(var(--space-2xs) / -2) calc(var(--space-xs) * -1);cursor:pointer }
.kartograf-root .k-name-view:hover { background:color-mix(in srgb, var(--ui-action-primary) 9%, var(--ui-surface));box-shadow:var(--ui-shadow-underline) var(--ui-action-primary)}
.kartograf-root .k-name-edit { display:block;width:100%;color:var(--ui-text-primary);background:var(--ui-surface);
  border:1px solid var(--ui-status-warning);border-radius:var(--radius-sm);padding:var(--space-2xs) calc(var(--space-xs) + var(--space-2xs));outline:none }
.kartograf-root .k-subtle { font-size:var(--ui-font-size-sm);color:var(--ui-text-secondary) }
.kartograf-root .statgrid { display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--space-sm) - var(--space-2xs) / 2);margin:var(--space-sm) 0 }
.kartograf-root .statbox { border:1px solid var(--ui-border);border-radius:var(--radius-sm);background:var(--ui-surface);padding:var(--space-sm) calc(var(--space-xs) + var(--space-2xs));text-align:center }
.kartograf-root .statbox b { font-family:var(--ui-font-display);font-weight:700;font-size:var(--ui-font-size-lg);display:block;line-height:1.1 }
.kartograf-root .statbox span { font-size:calc((var(--ui-font-size-3xs) + var(--ui-font-size-2xs)) / 2);color:var(--ui-text-secondary);letter-spacing:.06em;text-transform:uppercase }
/* Genstands-billede som klikbar firkant i sidehovedets Leading-felt (afløser .k-item-media-blokken). */
.kartograf-root .k-item-mark-col { display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);flex-shrink:0 }
.kartograf-root .k-item-mark { position:relative;width:60px;height:60px;flex-shrink:0;border-radius:calc((var(--radius-sm) + var(--radius-md)) / 2);overflow:hidden;
  display:grid;place-items:center;background:var(--ui-surface-subtle);background-size:cover;background-position:center;background-repeat:no-repeat;
  border:2px solid var(--ui-border-hover);box-shadow:var(--ui-shadow-stamp)}
.kartograf-root label.k-item-mark { cursor:pointer }
.kartograf-root label.k-item-mark:hover { border-color:var(--ui-action-primary);box-shadow:var(--ui-shadow-stamp-hover)}
.kartograf-root .k-item-mark-glyph { font-family:var(--ui-font-display);font-weight:700;font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-none);color:var(--ui-status-warning) }
.kartograf-root .k-item-mark--item { border-color: var(--ui-action-secondary); }
.kartograf-root .k-item-mark--item .k-item-mark-glyph { color: var(--ui-action-secondary); }

/* Browser administration and diagnostics: component layout without inline Mud styles. */
.user-rulesets-select { min-width: 250px; }
.browser-debug-log { white-space: pre-wrap; font-family: var(--ui-font-mono); }
.user-admin-filter-row { flex-wrap: wrap; }
.user-admin-search { flex: 1; }
.user-admin-filter-role { min-width: 200px; }
.user-admin-filter-account { min-width: 170px; }
.user-admin-filter-compact { min-width: 160px; }
.kartograf-root .k-item-mark-hint { position:absolute;left:0;right:0;bottom:0;padding:var(--space-2xs) 0;text-align:center;font-size:calc((var(--ui-font-size-3xs) + var(--ui-font-size-2xs)) / 2);font-weight:600;
  color:var(--ui-action-secondary-text);background:color-mix(in srgb, var(--ui-chrome-deep) 66%, transparent);opacity:0;transition:opacity .15s }
.kartograf-root label.k-item-mark:hover .k-item-mark-hint { opacity:1 }
.kartograf-root .k-hidden-file { position:absolute;width:1px;height:1px;padding:0;margin:calc(var(--space-2xs) / -2);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.kartograf-root .k-img-clear { background:none;border:none;padding:0;cursor:pointer;font-size:calc((var(--ui-font-size-2xs) + var(--ui-font-size-xs)) / 2);font-weight:600;color:var(--ui-text-secondary) }
.kartograf-root .k-img-clear:hover:not(:disabled) { color:var(--ui-error) }
.kartograf-root .k-img-clear:disabled { opacity:.5;cursor:default }

/* ===================================================================== */
/* Nexus V2 — tomt 2D workspace (/v2): canvas-flade + vinduer */
/* Alt scopet under .kartograf-root; rører ikke det klassiske workspace.        */
/* ===================================================================== */
/* Fladen har ingen permanent vaerktoejslinje. Baggrunden er gennemsigtig, saa shell'ens
   desk-farve gaar igennem; et svagt gitter giver struktur. */
.kartograf-root .kws-canvas { position:relative; flex:1 1 auto; min-width:0; max-width:100%; overflow:visible; min-height:calc(100vh - 110px);
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--ui-text-primary) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ui-text-primary) 5%, transparent) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px; }
.kartograf-root .kws-motto { position:absolute; inset:auto var(--space-xl) var(--space-xl) auto; max-width:26rem; pointer-events:none;
  color:color-mix(in srgb, var(--ui-text-secondary) 48%, transparent); font-family:var(--ui-font-display); font-style:italic;
  text-align:right; letter-spacing:.04em; z-index:var(--ui-z-base); }

.kartograf-root .realm-overview-workspace { display:flex; flex-direction:column; gap:var(--space-md); margin-top:var(--space-lg); }
.kartograf-root .realm-overview-resultbar { display:flex; justify-content:space-between; gap:var(--space-sm); color:var(--ui-text-secondary); }
.kartograf-root .realm-date-dialog__summary { display:flex; flex-direction:column; gap:var(--space-xs); padding:var(--space-sm) var(--space-md);
  border:1px solid var(--ui-border); border-radius:var(--radius-md); background:var(--ui-surface-muted); }
.kartograf-root .realm-date-dialog__summary span { color:var(--ui-text-secondary); }

@media (max-width: 760px) {
  .kartograf-root .k-shell-main {
    position: relative;
  }

  .kartograf-root .k-dock-shell {
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    width: 56px !important;
    margin: 0 !important;
    max-height: calc(100% - 16px) !important;
  }

  .kartograf-root .k-dock {
    width: 56px;
  }

  .kartograf-root .k-chat {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    width: min(316px, calc(100vw - 80px)) !important;
    height: calc(100% - 16px) !important;
    margin: 0 !important;
    box-sizing: border-box;
    z-index: 1250;
  }

  .kartograf-root .k-chat.collapsed {
    width: 42px !important;
  }

  .k-shell-body:has(> .kws-canvas) {
    flex: 1 1 auto !important;
    min-width: 0;
    margin: 0 calc(var(--space-3xl) + var(--space-2xs)) 0 calc(var(--space-3xl) + var(--space-md));
    padding: var(--space-sm) !important;
  }

  .kartograf-root .kws-canvas {
    min-width:0;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100%;
  }
}

/* Én-vindues-fanen (/v2/vindue, Feature 27): skallen i StandaloneWindow-chrome har ingen header og
   ingen reol; kroppen giver hele fladen til vinduets indhold, og chat-docken (.k-chat) ligger som paa
   bordet til hoejre — sammenfoldet fra start. Indholdet baerer .kwin-body, saa de eksisterende
   vinduesregler (kort uden ramme, timeline, bestiarium) gaelder uaendret. */
.kartograf-root.k-layout-standalone .k-shell-body { padding: 0; display: flex; flex-direction: column; }
.kartograf-root .k-standalone { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kartograf-root .k-standalone-bar { display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--ui-border-hover);
  background: var(--ui-surface-muted); flex-shrink: 0; }
.kartograf-root .k-standalone-board { margin-left: auto; }
.kartograf-root .k-standalone-body { flex: 1; min-height: 0; overflow: auto; }
.kartograf-root .k-standalone-unknown { margin: var(--space-lg); }

/* Rige-vælger (flydende bar øverst på bordet) */
.kartograf-root .k-realmbar { position:absolute; top:12px; left:16px; z-index:5; display:flex; align-items:center; gap:var(--space-sm);
  background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:var(--radius-md); padding:calc(var(--space-xs) + var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs));
  box-shadow:var(--ui-shadow-sm); }
.kartograf-root .k-realmbar-label { font-size:var(--ui-font-size-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--ui-status-warning); font-weight:800; }
.kartograf-root .k-realmbar-select { min-width:170px; }

/* Nexus V2 vindue */
.kartograf-root .kwin { position:absolute; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ui-surface);
  border:1px solid var(--ui-border); border-radius:var(--radius-xl);
  box-shadow:var(--ui-shadow-window); }
.kartograf-root .kwin.maximized { inset:8px !important; width:auto !important; height:auto !important; }
@media (max-width: 760px) {
  .kartograf-root .kwin {
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:calc(100vw - 16px);
  }
}
.kartograf-root .kwin-bar { display:flex; align-items:center; gap:calc(var(--space-sm) + var(--space-2xs) / 2); padding:calc(var(--space-sm) - var(--space-2xs) / 2) calc(var(--space-sm) + var(--space-2xs)); cursor:move; user-select:none;
  min-height:44px; background:var(--ui-action-secondary); border-bottom:1px solid color-mix(in srgb, var(--ui-action-secondary-text) 18%, transparent); color:var(--ui-action-secondary-text); }
.kartograf-root .kwin-seal { width:23px; height:23px; flex-shrink:0; border-radius:var(--radius-sm); display:grid; place-items:center;
  font-size:var(--ui-font-size-sm); color:var(--ui-chrome-accent); border:1px solid var(--ui-status-warning); background:transparent; }
.kartograf-root .kwin-title { flex:1; min-width:0; font-family:var(--ui-font-sans); font-weight:800; font-size:var(--ui-font-size-sm-md);
  color:var(--ui-action-secondary-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kartograf-root .kwin-ctrls { display:flex; align-items:center; gap:calc(var(--space-2xs) * 1.5); flex-shrink:0; }
.kartograf-root .kwin-btn { width:22px; height:22px; display:grid; place-items:center; cursor:pointer; font-size:var(--ui-font-size-sm);
  line-height:var(--ui-leading-none); color:color-mix(in srgb, var(--ui-action-secondary-text) 82%, transparent); background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); }
.kartograf-root .kwin-btn:hover { color:var(--ui-action-secondary-text); border-color:color-mix(in srgb, var(--ui-action-secondary-text) 24%, transparent); background:color-mix(in srgb, var(--ui-action-secondary-text) 12%, transparent); }
.kartograf-root .kwin-btn-close:hover { color:var(--ui-action-secondary-text); border-color:transparent; background:var(--ui-error); }
.kartograf-root .kwin-body { flex:1; min-height:0; overflow:auto; }
/* Indhold i vindue: flad k-card-rammen, lad vindueschrome vaere rammen */
.kartograf-root .kwin-body .k-card { border:none; border-radius:0; box-shadow:none; background:transparent; max-width:none; margin:0; }
.kartograf-root .kwin-body .timeline-v2-page { height:100%; overflow:hidden; }
.kartograf-root .kwin-body .timeline-v2-page .timeline-v2-pane.active { display:flex; flex:1 1 auto; min-height:0; overflow:hidden; }

/* Resize-haandtag */
.kartograf-root .kwin-rz { position:absolute; z-index:2; }
.kartograf-root .kwin-rz-e  { top:0; right:0; width:6px; height:100%; cursor:ew-resize; }
.kartograf-root .kwin-rz-w  { top:0; left:0; width:6px; height:100%; cursor:ew-resize; }
.kartograf-root .kwin-rz-s  { left:0; bottom:0; width:100%; height:6px; cursor:ns-resize; }
.kartograf-root .kwin-rz-se { right:0; bottom:0; width:13px; height:13px; cursor:nwse-resize; }
.kartograf-root .kwin-rz-sw { left:0; bottom:0; width:13px; height:13px; cursor:nesw-resize; }
.kartograf-root .kwin-drag-overlay { position:fixed; inset:0; z-index:9999; cursor:grabbing; }

/* =====================================================================
   NEXUS V2 PRIMITIVES (UI-V2-planens fase 4b) — KPageHeader, KEyebrow, KToolbar, KCardGrid/KCard,
   KPanel, KTabs, KButton, KEmptyState, KStat/KStatGrid, KTag.
   Kun --ui-*, --space-* og --radius-*, saa primitives foelger dark mode via dark-saettet.
   Scopet til .kartograf-root og .kartograf-pop (dialoger/popovers kan huse primitives).
   Nye V2-views bygges af disse — aldrig af de gamle lensbrev-/segl-/voks-/maaleur-klasser
   (V2LegacyExpressionGuardTests' klasse-ratchet gaar til 0 i fase 4d).
   ===================================================================== */
/* Eyebrow */
.kartograf-root .k-eyebrow, .kartograf-pop .k-eyebrow { display: inline-block; font-family: var(--ui-font-sans); font-size: var(--ui-font-size-xs);
    letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ui-action-primary); line-height: var(--ui-leading-snug); }

/* Page header */
.kartograf-root .k-pagehead, .kartograf-pop .k-pagehead { display: flex; flex-direction: column; gap: 0; margin: 0 0 var(--space-md);
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); overflow: hidden; }
.kartograf-root .k-pagehead__body, .kartograf-pop .k-pagehead__body { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.kartograf-root .k-pagehead__main, .kartograf-pop .k-pagehead__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.kartograf-root .k-pagehead__leading, .kartograf-pop .k-pagehead__leading { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
/* Maerke (bogstav/glyf/tegn) som Leading-felt i KPageHeader. */
.kartograf-root .k-mark, .kartograf-pop .k-mark { position: relative; width: 52px; height: 60px; flex-shrink: 0; display: grid; place-items: center;
    font-family: var(--ui-font-display); font-weight: 700; font-size: calc((var(--ui-font-size-2xl) + var(--ui-font-size-3xl)) / 2); color: var(--ui-border-hover); background: var(--ui-surface-muted);
    border: 2px solid var(--ui-border-hover); border-radius: var(--radius-md); overflow: hidden; }
.kartograf-root .k-mark--sm, .kartograf-pop .k-mark--sm { width: 40px; height: 48px; font-size: var(--ui-font-size-xl); margin: 0 auto; }
.kartograf-root .k-mark--accent, .kartograf-pop .k-mark--accent { color: var(--ui-status-accent); border-color: var(--ui-status-accent); }
.kartograf-root .k-mark--gold, .kartograf-pop .k-mark--gold { color: var(--ui-status-warning); border-color: var(--ui-status-warning); }
.kartograf-root .k-mark--error, .kartograf-pop .k-mark--error { color: var(--ui-status-error); border-color: var(--ui-status-error); }
.kartograf-root .k-mark img, .kartograf-pop .k-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Flag-felt (territorie/bosaettelse) som Leading: stiplet ramme uden flag, billede med overlay naar sat */
.kartograf-root .k-flag, .kartograf-pop .k-flag { width: 52px; height: 64px; border: 1.5px dashed var(--ui-border-hover); border-radius: var(--radius-sm); display: grid; place-items: center;
    text-align: center; color: var(--ui-text-secondary); font-size: calc((var(--ui-font-size-md) + var(--ui-font-size-lg)) / 2); line-height: 1.1; cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden;
    background-size: cover; background-position: center; background-repeat: no-repeat; }
.kartograf-root .k-flag span, .kartograf-pop .k-flag span { font-size: var(--ui-font-size-3xs); letter-spacing: 0; text-transform: none; }
.kartograf-root .k-flag .k-flag__symbol, .kartograf-pop .k-flag .k-flag__symbol { font-size: var(--ui-font-size-xl); }
.kartograf-root .k-flag:hover, .kartograf-pop .k-flag:hover { border-color: var(--ui-action-primary); color: var(--ui-action-primary); }
.kartograf-root .k-flag.has-flag, .kartograf-pop .k-flag.has-flag { border-style: solid; color: var(--ui-action-secondary-text); }
.kartograf-root .k-flag.has-flag::before, .kartograf-pop .k-flag.has-flag::before { content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ui-action-secondary) 8%, transparent), color-mix(in srgb, var(--ui-action-secondary) 52%, transparent)); }
.kartograf-root .k-flag.has-flag span, .kartograf-pop .k-flag.has-flag span { position: relative; z-index: 1; }
.kartograf-root .k-flag.has-flag .k-flag__symbol, .kartograf-pop .k-flag.has-flag .k-flag__symbol { opacity: 0; }
.kartograf-root .k-flag.has-flag:hover .k-flag__symbol, .kartograf-pop .k-flag.has-flag:hover .k-flag__symbol { opacity: 1; }
/* Detaljevisningernes sidehoved: taettere end sidens hero */
.kartograf-root .k-detail-head .k-pagehead__body, .kartograf-pop .k-detail-head .k-pagehead__body { padding: var(--space-sm) var(--space-md); }
.kartograf-root .k-detail-head .k-pagehead__title, .kartograf-pop .k-detail-head .k-pagehead__title { font-size: var(--ui-font-size-3xl); }
.kartograf-root .k-pagehead__row, .kartograf-pop .k-pagehead__row { display: flex; align-items: flex-start; gap: var(--space-md); }
.kartograf-root .k-pagehead__title-wrap, .kartograf-pop .k-pagehead__title-wrap { flex: 1 1 auto; min-width: 0; }
.kartograf-root .k-pagehead__title, .kartograf-pop .k-pagehead__title { margin: 0; font-family: var(--ui-font-display); font-weight: 700; font-size: var(--ui-font-size-4xl);
    line-height: 1.1; color: var(--ui-text-primary); overflow-wrap: anywhere; }
.kartograf-root .k-pagehead__actions, .kartograf-pop .k-pagehead__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.kartograf-root .k-pagehead__meta, .kartograf-pop .k-pagehead__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center;
    font-size: var(--ui-font-size-sm-md); color: var(--ui-text-secondary); }
.kartograf-root .k-pagehead__meta b, .kartograf-pop .k-pagehead__meta b { font-family: var(--ui-font-display); color: var(--ui-text-primary); font-weight: 700; }
.kartograf-root .k-pagehead__text, .kartograf-pop .k-pagehead__text { font-size: var(--ui-font-size-md); line-height: var(--ui-leading-normal); color: var(--ui-text-primary); max-width: 72ch; }
/* Hero-variant: billede med overlay, lys tekst oven paa */
.kartograf-root .k-pagehead--hero, .kartograf-pop .k-pagehead--hero { position: relative; min-height: 180px; justify-content: flex-end; border-color: transparent;
    color: var(--ui-action-secondary-text); }
.kartograf-root .k-pagehead__hero, .kartograf-pop .k-pagehead__hero { position: absolute; inset: 0; background-size: cover; background-position: center; }
.kartograf-root .k-pagehead__hero::after, .kartograf-pop .k-pagehead__hero::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ui-action-secondary) 10%, transparent), color-mix(in srgb, var(--ui-action-secondary) 88%, transparent)); }
.kartograf-root .k-pagehead--hero .k-pagehead__body, .kartograf-pop .k-pagehead--hero .k-pagehead__body { position: relative; }
.kartograf-root .k-pagehead--hero .k-button--ghost, .kartograf-pop .k-pagehead--hero .k-button--ghost { color: var(--ui-action-secondary-text);
    border-color: color-mix(in srgb, var(--ui-action-secondary-text) 45%, transparent); }
.kartograf-root .k-pagehead--hero .k-button--ghost:not(:disabled):hover, .kartograf-pop .k-pagehead--hero .k-button--ghost:not(:disabled):hover { color: var(--ui-action-secondary-text);
    border-color: var(--ui-action-secondary-text); background: color-mix(in srgb, var(--ui-action-secondary-text) 12%, transparent); }
.kartograf-root .k-pagehead--hero .k-pagehead__title, .kartograf-root .k-pagehead--hero .k-pagehead__meta, .kartograf-root .k-pagehead--hero .k-pagehead__meta b,
.kartograf-root .k-pagehead--hero .k-pagehead__text, .kartograf-root .k-pagehead--hero .k-eyebrow,
.kartograf-pop .k-pagehead--hero .k-pagehead__title, .kartograf-pop .k-pagehead--hero .k-pagehead__meta, .kartograf-pop .k-pagehead--hero .k-pagehead__meta b,
.kartograf-pop .k-pagehead--hero .k-pagehead__text, .kartograf-pop .k-pagehead--hero .k-eyebrow { color: var(--ui-action-secondary-text); }

/* Toolbar */
.kartograf-root .k-toolbar, .kartograf-pop .k-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface-muted); }
.kartograf-root .k-toolbar__search, .kartograf-pop .k-toolbar__search { flex: 1 1 220px; min-width: 160px; }
.kartograf-root .k-toolbar__filters, .kartograf-root .k-toolbar__sort, .kartograf-root .k-toolbar__extra,
.kartograf-pop .k-toolbar__filters, .kartograf-pop .k-toolbar__sort, .kartograf-pop .k-toolbar__extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.kartograf-root .k-toolbar__primary, .kartograf-pop .k-toolbar__primary { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }

/* Card grid + card */
.kartograf-root .k-cardgrid, .kartograf-pop .k-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); margin: 0 0 var(--space-md); }
.kartograf-root .k-cardgrid--dense, .kartograf-pop .k-cardgrid--dense { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-sm); }
.kartograf-root .k-cardgrid--wide, .kartograf-pop .k-cardgrid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.kartograf-root .k-kcard, .kartograf-pop .k-kcard { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0;
    padding: var(--space-md); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-text-primary);
    box-shadow: var(--ui-shadow-sm); transition: border-color var(--ui-motion-fast), box-shadow var(--ui-motion-fast), transform var(--ui-motion-fast); }
.kartograf-root .k-kcard--clickable, .kartograf-pop .k-kcard--clickable { cursor: pointer; }
.kartograf-root .k-kcard--clickable:hover, .kartograf-root .k-kcard--clickable:focus-visible,
.kartograf-pop .k-kcard--clickable:hover, .kartograf-pop .k-kcard--clickable:focus-visible { border-color: var(--ui-border-hover); box-shadow: var(--ui-shadow-md); transform: translateY(-1px); outline: none; }
.kartograf-root .k-kcard--clickable:focus-visible, .kartograf-pop .k-kcard--clickable:focus-visible { box-shadow: var(--ui-shadow-ring-2) var(--ui-ring); }
.kartograf-root .k-kcard--selected, .kartograf-pop .k-kcard--selected { border-color: var(--ui-action-primary); box-shadow: var(--ui-shadow-inset-1) var(--ui-action-primary); }
.kartograf-root .k-kcard__kind, .kartograf-pop .k-kcard__kind { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.kartograf-root .k-kcard__title, .kartograf-pop .k-kcard__title { margin: 0; font-family: var(--ui-font-display); font-weight: 700; font-size: var(--ui-font-size-xl); line-height: var(--ui-leading-tight); overflow-wrap: anywhere; }
.kartograf-root .k-kcard__meta, .kartograf-pop .k-kcard__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); font-size: calc((var(--ui-font-size-sm) + var(--ui-font-size-sm-md)) / 2); color: var(--ui-text-secondary); }
.kartograf-root .k-kcard__body, .kartograf-pop .k-kcard__body { font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2); line-height: 1.45; }
.kartograf-root .k-kcard__actions, .kartograf-pop .k-kcard__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-xs); }

/* Panel */
.kartograf-root .k-panel, .kartograf-pop .k-panel { margin: 0 0 var(--space-md); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.kartograf-root .k-panel__head, .kartograf-pop .k-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--ui-border); }
.kartograf-root .k-panel__heading, .kartograf-pop .k-panel__heading { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.kartograf-root .k-panel__title, .kartograf-pop .k-panel__title { margin: 0; font-family: var(--ui-font-display); font-weight: 700; font-size: var(--ui-font-size-lg); line-height: 1.25; color: var(--ui-text-primary); }
.kartograf-root .k-panel__actions, .kartograf-pop .k-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.kartograf-root .k-panel__body, .kartograf-pop .k-panel__body { padding: var(--space-md); }
.kartograf-root .k-panel--flush .k-panel__body, .kartograf-pop .k-panel--flush .k-panel__body { padding: 0; }
.kartograf-root .k-panel--plain, .kartograf-pop .k-panel--plain { border: none; background: transparent; border-radius: 0; }
.kartograf-root .k-panel--plain .k-panel__head, .kartograf-pop .k-panel--plain .k-panel__head { padding: 0 0 var(--space-xs); border-bottom: 1px dashed var(--ui-border); }
.kartograf-root .k-panel--plain .k-panel__body, .kartograf-pop .k-panel--plain .k-panel__body { padding: var(--space-sm) 0 0; }

/* Tabs */
.kartograf-root .k-tabs, .kartograf-pop .k-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 0 var(--space-md); border-bottom: 1px solid var(--ui-border); }
.kartograf-root .k-tabs__tab, .kartograf-pop .k-tabs__tab { appearance: none; border: none; border-bottom: 2px solid transparent; margin-bottom: calc(var(--space-2xs) / -2); background: transparent;
    font-family: var(--ui-font-display); font-weight: 600; font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2); color: var(--ui-text-secondary); padding: var(--space-xs) var(--space-sm) var(--space-sm);
    cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-xs); transition: color var(--ui-motion-fast), border-color var(--ui-motion-fast); }
.kartograf-root .k-tabs__tab:hover, .kartograf-pop .k-tabs__tab:hover { color: var(--ui-text-primary); }
.kartograf-root .k-tabs__tab:focus-visible, .kartograf-pop .k-tabs__tab:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
.kartograf-root .k-tabs__tab--active, .kartograf-pop .k-tabs__tab--active { color: var(--ui-action-primary); border-bottom-color: var(--ui-action-primary); }
.kartograf-root .k-tabs__badge, .kartograf-pop .k-tabs__badge { font-family: var(--ui-font-sans); font-size: var(--ui-font-size-xs); font-weight: 700; padding: 0 calc(var(--space-xs) + var(--space-2xs)); border-radius: var(--radius-full);
    background: var(--ui-surface-muted); color: var(--ui-text-secondary); border: 1px solid var(--ui-border); }

/* Button */
.kartograf-root .k-button, .kartograf-pop .k-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
    min-height: 36px; padding: var(--space-xs) var(--space-md); border-radius: var(--ui-radius); border: 1px solid transparent; cursor: pointer;
    font-family: var(--ui-font-sans); font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2); font-weight: 600; line-height: var(--ui-leading-tight); text-decoration: none; white-space: nowrap;
    transition: background-color var(--ui-motion-fast), border-color var(--ui-motion-fast), color var(--ui-motion-fast); }
.kartograf-root .k-button:focus-visible, .kartograf-pop .k-button:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
.kartograf-root .k-button:disabled, .kartograf-pop .k-button:disabled { opacity: .5; cursor: default; }
.kartograf-root .k-button--small, .kartograf-pop .k-button--small { min-height: 28px; padding: var(--space-2xs) var(--space-sm); font-size: calc((var(--ui-font-size-sm) + var(--ui-font-size-sm-md)) / 2); }
.kartograf-root .k-button--primary, .kartograf-pop .k-button--primary { background: var(--ui-action-primary); color: var(--ui-action-primary-text); border-color: var(--ui-action-primary); }
.kartograf-root .k-button--primary:not(:disabled):hover, .kartograf-pop .k-button--primary:not(:disabled):hover { background: color-mix(in srgb, var(--ui-action-primary) 86%, var(--ui-text-primary)); }
.kartograf-root .k-button--ghost, .kartograf-pop .k-button--ghost { background: transparent; color: var(--ui-text-primary); border-color: var(--ui-border-hover); }
.kartograf-root .k-button--ghost:not(:disabled):hover, .kartograf-pop .k-button--ghost:not(:disabled):hover { color: var(--ui-action-primary); border-color: var(--ui-action-primary);
    background: color-mix(in srgb, var(--ui-action-primary) 8%, transparent); }
.kartograf-root .k-button--danger, .kartograf-pop .k-button--danger { background: var(--ui-error); color: var(--ui-error-text); border-color: var(--ui-error); }
.kartograf-root .k-button--danger:not(:disabled):hover, .kartograf-pop .k-button--danger:not(:disabled):hover { background: color-mix(in srgb, var(--ui-error) 86%, var(--ui-text-primary)); }
.kartograf-root .k-button__icon, .kartograf-pop .k-button__icon { flex: 0 0 auto; }

/* Empty state */
.kartograf-root .k-empty, .kartograf-pop .k-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm);
    padding: var(--space-xl) var(--space-lg); border: 1px dashed var(--ui-border-hover); border-radius: var(--ui-radius); background: var(--ui-surface-muted); color: var(--ui-text-secondary); }
.kartograf-root .k-empty__icon, .kartograf-pop .k-empty__icon { width: 40px; height: 40px; color: var(--ui-action-primary); opacity: .8; }
.kartograf-root .k-empty__title, .kartograf-pop .k-empty__title { font-family: var(--ui-font-display); font-weight: 700; font-size: var(--ui-font-size-xl); color: var(--ui-text-primary); }
.kartograf-root .k-empty__text, .kartograf-pop .k-empty__text { font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2); line-height: var(--ui-leading-normal); max-width: 52ch; }
.kartograf-root .k-empty__action, .kartograf-pop .k-empty__action { margin-top: var(--space-xs); }

/* Stat */
.kartograf-root .k-statgrid2, .kartograf-pop .k-statgrid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-sm); margin: 0 0 var(--space-md); }
.kartograf-root .k-statgrid2--dense, .kartograf-pop .k-statgrid2--dense { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.kartograf-root .k-stat, .kartograf-pop .k-stat { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); border-top: 3px solid var(--ui-border-hover); }
.kartograf-root .k-stat__value, .kartograf-pop .k-stat__value { font-family: var(--ui-font-display); font-weight: 700; font-size: var(--ui-font-size-2xl); line-height: 1.1; color: var(--ui-text-primary); }
.kartograf-root .k-stat__label, .kartograf-pop .k-stat__label { font-size: calc((var(--ui-font-size-2xs) + var(--ui-font-size-xs)) / 2); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-text-secondary); }
.kartograf-root .k-stat__detail, .kartograf-pop .k-stat__detail { font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); }
.kartograf-root .k-statgrid2--dense .k-stat, .kartograf-pop .k-statgrid2--dense .k-stat { flex-direction: row; align-items: baseline; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-top-width: 1px; }
.kartograf-root .k-statgrid2--dense .k-stat__value, .kartograf-pop .k-statgrid2--dense .k-stat__value { font-size: calc((var(--ui-font-size-sm-md) + var(--ui-font-size-md)) / 2); }
.kartograf-root .k-statgrid2--dense .k-stat__label, .kartograf-pop .k-statgrid2--dense .k-stat__label { font-size: calc((var(--ui-font-size-3xs) + var(--ui-font-size-2xs)) / 2); }
.kartograf-root .k-stat--success, .kartograf-pop .k-stat--success { border-top-color: var(--ui-status-success); }
.kartograf-root .k-stat--warning, .kartograf-pop .k-stat--warning { border-top-color: var(--ui-status-warning); }
.kartograf-root .k-stat--accent, .kartograf-pop .k-stat--accent { border-top-color: var(--ui-status-accent); }
.kartograf-root .k-stat--error, .kartograf-pop .k-stat--error { border-top-color: var(--ui-status-error); }
.kartograf-root .k-stat--info, .kartograf-pop .k-stat--info { border-top-color: var(--ui-status-info); }

/* Tag */
.kartograf-root .k-tag, .kartograf-pop .k-tag { display: inline-flex; align-items: center; gap: var(--space-xs); padding: calc(var(--space-2xs) / 2) var(--space-sm); border-radius: var(--radius-full);
    border: 1px solid var(--ui-border); background: var(--ui-surface-muted); color: var(--ui-text-secondary);
    font-family: var(--ui-font-sans); font-size: var(--ui-font-size-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: var(--ui-leading-relaxed); white-space: nowrap; }
.kartograf-root .k-tag__dot, .kartograf-pop .k-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-border-hover); flex: 0 0 auto; }
.kartograf-root .k-tag--success, .kartograf-pop .k-tag--success { color: var(--ui-status-success); border-color: color-mix(in srgb, var(--ui-status-success) 45%, transparent); background: color-mix(in srgb, var(--ui-status-success) 10%, var(--ui-surface)); }
.kartograf-root .k-tag--warning, .kartograf-pop .k-tag--warning { color: var(--ui-status-warning); border-color: color-mix(in srgb, var(--ui-status-warning) 45%, transparent); background: color-mix(in srgb, var(--ui-status-warning) 12%, var(--ui-surface)); }
.kartograf-root .k-tag--accent, .kartograf-pop .k-tag--accent { color: var(--ui-status-accent); border-color: color-mix(in srgb, var(--ui-status-accent) 45%, transparent); background: color-mix(in srgb, var(--ui-status-accent) 10%, var(--ui-surface)); }
.kartograf-root .k-tag--error, .kartograf-pop .k-tag--error { color: var(--ui-status-error); border-color: color-mix(in srgb, var(--ui-status-error) 45%, transparent); background: color-mix(in srgb, var(--ui-status-error) 10%, var(--ui-surface)); }
.kartograf-root .k-tag--info, .kartograf-pop .k-tag--info { color: var(--ui-status-info); border-color: color-mix(in srgb, var(--ui-status-info) 45%, transparent); background: color-mix(in srgb, var(--ui-status-info) 10%, var(--ui-surface)); }
.kartograf-root .k-tag--success .k-tag__dot, .kartograf-pop .k-tag--success .k-tag__dot { background: var(--ui-status-success); }
.kartograf-root .k-tag--warning .k-tag__dot, .kartograf-pop .k-tag--warning .k-tag__dot { background: var(--ui-status-warning); }
.kartograf-root .k-tag--accent .k-tag__dot, .kartograf-pop .k-tag--accent .k-tag__dot { background: var(--ui-status-accent); }
.kartograf-root .k-tag--error .k-tag__dot, .kartograf-pop .k-tag--error .k-tag__dot { background: var(--ui-status-error); }
.kartograf-root .k-tag--info .k-tag__dot, .kartograf-pop .k-tag--info .k-tag__dot { background: var(--ui-status-info); }

@media (max-width: 640px) {
    .kartograf-root .k-pagehead__row, .kartograf-pop .k-pagehead__row { flex-direction: column; }
    .kartograf-root .k-pagehead__title, .kartograf-pop .k-pagehead__title { font-size: calc((var(--ui-font-size-2xl) + var(--ui-font-size-3xl)) / 2); }
    .kartograf-root .k-toolbar__primary, .kartograf-pop .k-toolbar__primary { margin-left: 0; width: 100%; }
}