/* GENERERT av verktoy/one_kopi.py fra ONE/demo/kalender. Ikke rediger her: endre ONE. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson-next-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/assets/fonts/atkinson-mono-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
.one-flate {
  --np-skala: 1;
  --bg: #06141B;           /* appbakgrunnen, den mørkeste */
  --bg-2: #0B1A24;         /* sekundære områder: topplinja, sidefelt, bånd */
  --surface: #11212D;      /* kort, rutenett, lister — og vinduene og skuffene (målt 23.10: alle 16) */
  --surface-2: #172834;    /* mellomtrinnet: åpningsbåndet, rader på hover */
  --raised: #1E2F3D;       /* hevet: timekort, popovere, menyer, nedtrekk */
  --raised-2: #253745;     /* hover på en hevet flate */
  --logo-plate: #DDE1E0;   /* den lyse plata bak en leverandørlogo (Integrasjoner), 23.10 */
  --line-soft: #1B2C38;    /* timestreker og skillelinjer inne i en flate */
  --line: #253745;         /* kanten på et kort eller en liste */
  --line-strong: #374957;  /* kanten på en kontroll man skal se */
  --line-hover: #4A5C6A;
  --line-input: #6A7A84;   /* grensa på felt, brytere og bokser (3:1) */
  --text: #CCD0CF;
  --text-2: #9BA8AB;       /* sekundær: tjeneste, bil, undertekst */
  --text-3: #8A979E;       /* dempet: akse, etiketter, tidsstempler */
  --text-disabled: #5E6E78;
  --white: #E6E9E8;
  --accent: #CCD0CF;
  --accent-hover: #E6E9E8;
  --accent-ink: #06141B;
  --accent-muted: rgba(204, 208, 207, 0.12);
  --accent-border: rgba(204, 208, 207, 0.30);
  --accent-bg: var(--accent-muted);         /* valgt rad, valgt fane */
  --selected: rgba(204, 208, 207, 0.12);
  --focus: #CCD0CF;
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;
  --ok: #42C995;
  --ok-bg: rgba(155, 168, 171, 0.12);
  --ok-border: rgba(155, 168, 171, 0.30);
  --ok-hover: rgba(155, 168, 171, 0.18);
  --warn: #EAB76B;
  --warn-bg: rgba(155, 168, 171, 0.12);
  --warn-border: rgba(155, 168, 171, 0.30);
  --warn-hover: rgba(155, 168, 171, 0.18);
  --danger: #F07878;
  --danger-text: #FFD6D6;  /* tekst PÅ den tonede feilflata (10,6:1) */
  --danger-bg: rgba(155, 168, 171, 0.12);
  --danger-border: rgba(155, 168, 171, 0.30);
  --danger-hover: rgba(155, 168, 171, 0.18);
  --info: #CCD0CF;
  --status-arbeid: #8EC0EA;
  --status-booket: #6E93B8;
  --status-ankommet: #CCD0CF;
  --info-bg: rgba(204, 208, 207, 0.10);
  --info-border: rgba(204, 208, 207, 0.30);
  --ai: var(--text-2);
  --ai-bg: var(--neutral-bg);
  --ai-border: var(--neutral-border);
  --ai-hover: var(--fill-3);
  --neutral: #6A7A84;
  --neutral-bg: rgba(106, 122, 132, 0.14);
  --neutral-border: rgba(106, 122, 132, 0.32);
  --disabled-text: var(--text-disabled);
  --disabled-bg: #0E1C26;
  --chart-primary: #CCD0CF;
  --chart-secondary: #8C999D;
  --chart-positive: #CCD0CF;
  --chart-negative: #6A7A84;
  --chart-ai: var(--chart-secondary);
  --chart-1: #CCD0CF;      /* is-rampa: rangerte kategorier, størst først */
  --chart-2: #9BA8AB;
  --chart-3: #7A8A92;
  --chart-4: #5E6E78;
  --chart-5: #4A5C6A;
  --chart-rest: #253745;   /* «Resten» */
  --flyt-1: #CCD0CF;
  --flyt-2: #9BA8AB;
  --flyt-3: #7A8A92;
  --flyt-4: #5E6E78;
  --flyt-5: #4A5C6A;
  --flyt-rest: #374957;    /* «Resten» i strømmen */
  --flyt-andre: #8C999D;   /* «Andre veier» */
  --chart-grid: #1A2A35;   /* rutenettet bak grafene */
  --chart-axis: var(--text-3);
  --chart-fill: rgba(204, 208, 207, 0.18);  /* toppen av flaten under kurven */
  --chart-glow: rgba(204, 208, 207, 0.10);  /* sparsomt: et hint, ikke et lys (0,32 til 22.10) */
  --chart-hot: #E6E9E8;    /* det lyseste punktet: toppen, pekeren */
  --data: #BFC5C6;
  --data-2: var(--chart-secondary);
  --skilt-hvit: #FFFFFF;
  --skilt-svart: #121212;
  --skilt-bla: #1659DA;
  --skilt-rod: #E0303E;
  --skilt-kryss: #00205B;
  --overlay: rgba(6, 20, 27, 0.64);
  --overlay-soft: rgba(6, 20, 27, 0.36);
  --scrim: rgba(6, 20, 27, 0.78);
  --scrim-strong: rgba(6, 20, 27, 0.88);
  --scrim-kant: rgba(255, 255, 255, 0.18); /* ring og spor oppå bilde */
  --on-scrim: #FFFFFF;                     /* ikon og tekst oppå bilde, alle tema */
  --on-scrim-feil: #FFC4C4;                /* feiltekst oppå bilde, alle tema */
  --fill-1: rgba(255, 255, 255, 0.03);
  --fill-2: rgba(255, 255, 255, 0.05);
  --fill-3: rgba(255, 255, 255, 0.08);
  --fill-4: rgba(255, 255, 255, 0.11);
  --hatch: rgba(255, 255, 255, 0.045);      /* skravur: stengt, blokkert */
  --kunde-merke: var(--text);
  --kunde-merke-ink: var(--bg);
  --r-sm: 6px;
  --r-btn: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 100px;
  --elev-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-raised: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  --elev-pop: 0 18px 48px -16px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4);
  --elev-modal: 0 30px 80px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
  --elev-side: -24px 0 48px -28px rgba(0, 0, 0, 0.75);   /* skuff fra høyre */
  --elev-sheet: 0 -20px 48px -24px rgba(0, 0, 0, 0.85);  /* ark nedenfra */
  --elev-valgt: 0 1px 2px rgba(0, 0, 0, 0.4);            /* valgt segment */
  --skygge-farge: rgba(0, 0, 0, 0.6);  /* til skygger med egen geometri */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --dur-1: 120ms;          /* hover, trykk, farge */
  --dur-2: 180ms;          /* meny, nedtrekk, fane, toning inn */
  --dur-3: 240ms;          /* modal, skuff, ark */
  --ease: cubic-bezier(0.2, 0, 0, 1);       /* inn og ut, standard */
  --ease-ut: cubic-bezier(0.16, 1, 0.3, 1); /* det som ankommer */
  --ease-inn: cubic-bezier(0.4, 0, 1, 1);   /* det som forsvinner */
  --z-kalender: 4;
  --z-topp: 30;
  --z-skuff: 40;
  --z-ark: 45;
  --z-modal: 60;
  --z-varsel: 70;
  --navy: var(--bg);
  --navy2: var(--surface);
  --navy25: var(--surface-2);
  --navy3: var(--raised);
  --offwhite: var(--text);
  --silver: var(--text-2);
  --ice: var(--accent);
  --ice-fyll: var(--accent);
  --ice-tekst: var(--accent);
  --ice-bg: var(--accent-bg);
  --green: var(--ok);
  --green-bg: var(--ok-bg);
  --bad: var(--danger);
  --bad-text: var(--danger-text);
  --bad-bg: var(--danger-bg);
  --border-faint: var(--line-soft);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --border-hover: var(--line-hover);
  --fill-subtle: var(--fill-2);
  --np-font-display: "Atkinson Hyperlegible Next", "Inter", ui-sans-serif, system-ui, sans-serif;
  --np-font: "Atkinson Hyperlegible Next", "Inter", ui-sans-serif, system-ui, sans-serif;
  --np-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --v-halvfet: 640;
  --np-t-ui: calc(14px * var(--np-skala));
  --np-t-12: calc(12px * var(--np-skala));
}
.one-flate .np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  font-size: var(--np-t-ui);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.one-flate .np-btn.prim {
  background: var(--accent);
  color: var(--accent-ink);
}
.one-flate .np-btn.prim:hover {
  background: var(--accent-hover);
}
.one-flate .np-btn.sek {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.one-flate .np-meny-markor { position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: var(--r-md); background: var(--accent-muted); box-shadow: inset 0 0 0 1px var(--accent-border); pointer-events: none; opacity: 0; transition: opacity 250ms var(--ease); will-change: transform; }
.one-flate .np-meny-rad { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 13px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); font: inherit; font-size: calc(13.5px * var(--np-skala)); font-weight: 500; line-height: 1; cursor: pointer; transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.one-flate .np-meny-rad:hover { background: var(--fill-2); color: var(--text); }
.one-flate .np-meny-rad:active { transform: scale(0.985); }
.one-flate .np-meny-rad.valgt { color: var(--text); }
.one-flate .np-meny-nav .np-meny-rad.valgt:hover { background: none; }
.one-flate .np-meny-rad.valgt > .np-mi { color: var(--accent); }
.one-flate .np-mi { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.one-flate .np-mi .f, .one-flate .np-mi .omr { fill: transparent; }
.one-flate .np-mi .omr { stroke: none; }
.one-flate .valgt > .np-mi .f, .one-flate .valgt > .np-mi .omr { fill: var(--selected); }
.one-flate .np-mi .dag, .one-flate .np-mi .p, .one-flate .np-mi .pkt, .one-flate .np-mi .k { fill: currentColor; stroke: none; }