/* FireHub Portal — Level-1 alignment layer (2026-09-18, v0_1).
 * Drop-in for firehub-portal: copy to public/shared/portal-level1.css and load it AFTER
 * /shared/brand.css and /shared/gated.css (see 0001-portal-level1-link.patch).
 *
 * Presentation only. It changes no route, auth, Supabase, RLS, NDA, form behaviour or copy.
 * The ported components are ~97 % token-driven (partner-hub 115 var() / 3 hex, investor-room 111 / 3),
 * so redefining the tokens they consume converges the whole gated surface on the final public site's
 * Level-1 system (semantic colour, structural radius grammar, calm surfaces) without touching a
 * single component file. Typography stays as decided 2026-08-11 (Inter body · Satoshi display/CTA ·
 * JetBrains Mono technical only). --maxw 1880px (operational width, 2026-08-12) stays.
 */

:root {
  /* ---------- brand tokens (brand.css names) → Level 1 ---------- */
  --navy-950: #0a1b2d; --navy-900: #102a43; --navy-800: #1b3a5b; --navy-700: #2a4a6b; --navy-600: #3d5f80;
  --navy-500: #576a7c; --navy-400: #8499b0; --navy-300: #b8c5cf; --navy-200: #dce3e8; --navy-100: #eef2f5; --navy-50: #f6f8f8;
  /* orange = FireHub activity; fire-600 is used as small text → ≥ 4.5:1 on white */
  --fire-600: #b35200; --fire-500: #ff8d00; --fire-400: #ffa53a; --fire-300: #ffd3a3; --fire-200: #ffe3c2; --fire-50: #fff3e5;
  /* green only means confirmed / documented; text green ≥ 4.5:1 */
  --safe: #0f7a45; --safe-50: #e9f6ef;
  --warn: #b45309; --warn-50: #fff3e5;
  --danger: #b91c1c; --danger-50: #fee2e2;
  --paper: #faf8f4; --paper-2: #f3efe7; --paper-3: #ebe6db;
  --ink: var(--navy-900); --ink-soft: var(--navy-700); --ink-quiet: var(--navy-500);
  /* structural radius grammar (Visual Consolidation v0_3 §1.16): tight on structural surfaces */
  /* Pål 10.10: in the family of the FireHub app (Figma 09.10): cards 12, boxes and buttons 8, fields 4 */
  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px;
  --ring: 0 0 0 1px var(--navy-100);
  --shadow-sm: 0 1px 0 rgba(16,42,67,.04), 0 1px 2px rgba(16,42,67,.05);
  --shadow: 0 14px 34px rgba(16,42,67,.06);
  --shadow-lg: 0 24px 60px rgba(16,42,67,.12), 0 2px 6px rgba(16,42,67,.06);
  --accent: var(--fire-500); --accent-strong: var(--fire-600); --accent-wash: var(--fire-50);

  /* ---------- legacy gated names (gated.css) → Level 1 ---------- */
  --orange: var(--fire-500); --orange-strong: var(--fire-600); --orange-wash: var(--fire-50); --orange-line: #f3d6b0;
  --green: var(--safe); --green-strong: #0f6b46; --green-wash: var(--safe-50); --green-line: #cfe9db;
  /* Siden er hvit, som på nettstedet; den varme #faf8f4 er en BOLK
     (--surface-2: .acc-row, .mat-card, fliser, tabellstriper), ikke sideflaten. */
  --bg: #ffffff; --surface: #ffffff; --surface-2: var(--paper);
  --line: var(--navy-200); --line-2: var(--navy-100);
  --r-sm: 4px; --r: 8px; --r-lg: 12px;
  --chip-green-bg: #e9f6ef; --chip-green-line: #cfe9db;
  --chip-gray-bg: #f3f6f7; --chip-gray-line: #dce3e8;
  --chip-orange-bg: #fff3e5; --chip-orange-line: #f3d6b0;

  /* ---------- status colours (UX contract, Pål 04.10): one new blue for information / in progress ----------
     Orange = primary action, navy = current task, blue = info/in progress, green = done, warn = attention, red = blocking.
     Text colours are ≥ 4.5:1 on white and on their own wash. Never use these as decoration. */
  --info: #1d5f99; --info-wash: #ebf3fa; --info-line: #bcd4ea;
  --current: var(--navy-900); --current-wash: var(--navy-50); --current-line: var(--navy-300);
  --warn-line: #f0cf9c; --danger-line: #f3b9b9;

  /* ---------- UI Foundation LOCKED v0.2/v0.3, the values with names of their own (Partner UI, Pål 13.10) ----------
     New names only: they change nothing until a component reads them. The names FOC already had (--bg, --ink, --line, --r …)
     get the foundation values inside .fh-v03 below, page by page. Source: FireHub_UIUX_Foundation_LOCKED_v0_2_EN.md §3 to §11. */
  /* §3 canvas, surfaces, text, borders, focus */
  --fh-canvas: #F7F7F4; --fh-surface: #FFFFFF; --fh-surface-subtle: #F2F3F0; --fh-surface-hover: #ECEEEA;
  --fh-surface-selected: #FFF3E5; --fh-surface-sunken: #EEEFEA; --fh-scrim: rgba(20, 24, 28, .42);
  --fh-text: #1A1D21; --fh-text-2: #4F565F; --fh-text-muted: #66707A; --fh-text-disabled: #9AA1A8; --fh-text-inverse: #FFFFFF;
  --fh-border-subtle: #E7E8E4; --fh-border: #DADDD8; --fh-border-strong: #BFC5BF;
  --fh-focus: #1E6FE8;
  /* §4 orange by role: the brand anchor for identity, the action colour for the one primary button (white text 4.55:1) */
  --fh-brand: #FF8D00; --fh-brand-soft: #FFF3E5; --fh-brand-border: #FFD7AE; --fh-brand-text: #9A4100;
  --fh-action: #C45400; --fh-action-hover: #AD4700; --fh-action-pressed: #933C00;
  /* §5 workflow status: background, text, border, dot */
  --st-open-bg: #F1F3F4; --st-open-text: #4F5963; --st-open-line: #DCE1E4; --st-open-dot: #6F7A84;
  --st-progress-bg: #EDF4FC; --st-progress-text: #245B9E; --st-progress-line: #C8DCF3; --st-progress-dot: #3977D7;
  --st-review-bg: #F2EEFB; --st-review-text: #5A4694; --st-review-line: #D9CEF3; --st-review-dot: #7657C8;
  --st-scheduled-bg: #EBF7F6; --st-scheduled-text: #246F68; --st-scheduled-line: #C6E5E2; --st-scheduled-dot: #2B8F86;
  --st-hold-bg: #FFF6DE; --st-hold-text: #74520D; --st-hold-line: #EEDAA5; --st-hold-dot: #C78C17;
  --st-done-bg: #EBF7F1; --st-done-text: #176B49; --st-done-line: #C7E6D6; --st-done-dot: #1F9D68;
  --st-overdue-bg: #FDEEEE; --st-overdue-text: #943838; --st-overdue-line: #F2CCCC; --st-overdue-dot: #C94D4D;
  --st-closed-bg: #F4F5F5; --st-closed-text: #66707A; --st-closed-line: #E1E4E5; --st-closed-dot: #8C959E;
  /* §6 severity, its own system (never the status colours' logic; blue is never Medium) */
  --sev-low-fg: #246F68; --sev-low-bg: #EBF7F6; --sev-medium-fg: #74520D; --sev-medium-bg: #FFF6DE;
  --sev-high-fg: #A44F22; --sev-high-bg: #FFF0E9; --sev-critical-fg: #943838; --sev-critical-bg: #FDEEEE;
  /* §9 elevation, §10 motion, §11 layers */
  --sh-1: 0 1px 2px rgba(19, 25, 30, .04); --sh-2: 0 8px 24px rgba(19, 25, 30, .08); --sh-3: 0 24px 64px rgba(19, 25, 30, .18);
  --fh-motion-fast: 120ms; --fh-motion-standard: 160ms; --fh-motion-overlay: 200ms; --fh-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --layer-base: 0; --layer-sticky: 100; --layer-popover: 200; --layer-drawer: 300; --layer-modal: 400; --layer-toast: 500; --layer-tooltip: 600;
}

/* Sideflaten er hvit fra første maling — også før Angular har startet, der
   bare brand.css gjelder (den satte #faf8f4 på body). */
body { background: #fff; }

/* ---------- global component language owned by gated.css (no encapsulation → safe to refine here) ---------- */
/* Buttons in the app's family (Pål 10.10, Figma 09.10): 8 px corners. The size of the foundation in all of FOC (Pål 14.10, svar 2 B,
   not area by area): 40 px on a computer (the small one 36, the full-width one 44), 13 px semibold; on a phone 44 px and 14 px
   (mobile.css keeps every target 44 px up to 768). Inside .fh-v03 the same values come from the role tokens below. */
.btn { border-radius: 8px; min-height: 40px; padding: 8px 16px; gap: 8px; font-size: 13px; line-height: 16px; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; gap: 8px; }
.btn-block { min-height: 44px; gap: 8px; }
@media (max-width: 600px) {
  .btn { min-height: 44px; font-size: 14px; line-height: 18px; }
  .btn-sm { min-height: 44px; font-size: 14px; }
}
/* The primary button (K14 B, Pål 13.10: all of FOC): the foundation's action colour #C45400 with white text (4.55:1), darker on
   hover and when pressed. #FF8D00 stays the brand anchor (logo, active tab, small accents), never a filled button. The one disabled
   style is VIS-12 in fh-ui.css. */
.btn-primary { background: var(--fh-action); border-color: var(--fh-action); color: var(--fh-text-inverse); box-shadow: none; }
.btn-primary:hover { background: var(--fh-action-hover); border-color: var(--fh-action-hover); }
.btn-primary:active:not(:disabled) { background: var(--fh-action-pressed); border-color: var(--fh-action-pressed); }
.btn-ghost { border-color: var(--navy-200); }
.btn-ghost:hover { background: var(--navy-50); border-color: var(--navy-300); }
/* The rest of the one .btn family (foundation §13, Partner UI spec §2), no second button system: .btn-ghost = secondary (bordered),
   .btn-tertiary = a text button, .btn-danger = destructive (white on the danger colour). */
.btn-tertiary { background: transparent; border-color: transparent; color: var(--ink); }
.btn-tertiary:hover { background: var(--navy-50); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn-danger:hover:not(:disabled) { background: var(--danger); filter: brightness(.9); }
/* Status chips: hard-coded attention colour → semantic token (≥ 4.5:1). */
.sb-pill.o { color: #9a4100; }
.sb-pill.n { color: var(--navy-600); }
/* NDA state surfaces keep the left rule; the rule reads as FireHub activity, never as a status. */
#ndaPanel, #ndaStatus { border-left-color: var(--fire-500); }
/* Focus visibility for every interactive element (foundation §3, Partner UI Pål 13.10): a 2 px blue ring with an offset, the same
   beside the orange button, never an orange glow. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--fh-focus); outline-offset: 2px; }

/* ---------- reduced motion: composed final states, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- UI Foundation LOCKED v0.3, scoped (lane 1, Pål 12.10 svar 13 A: «fargene fra UI Foundation v0.3») ----------
 * One page at a time while the rest of FOC keeps the tokens above: a page that has moved wraps itself in .fh-v03 and every
 * shared building block inside it (fh-stat-tile, fh-line-chart, .btn, .fh-chip …) reads the foundation values through the same
 * token names. When all of FOC moves, these values become the :root ones and the class goes. Pages that have moved:
 * /admin/likviditet, /admin/lan, the partner area (fh-partner-hub) and a partner's own /konto (Partner UI, Pål 13.10).
 * A page host that fills the window adds .fh-v03-page, so the body behind it is the canvas too.
 * The old names take the foundation values here; the role tokens (--r-status, --fs-label …) exist only here, and the shared
 * blocks read them with their old value as the fallback, so a page outside .fh-v03 looks as before. */
.fh-v03 {
  --v03-canvas: var(--fh-canvas);
  --bg: var(--fh-canvas); --surface: var(--fh-surface); --surface-2: var(--fh-surface-subtle); --paper: var(--fh-surface-subtle);
  --ink: var(--fh-text); --ink-soft: var(--fh-text-2); --ink-quiet: var(--fh-text-muted);
  --line: var(--fh-border); --line-2: var(--fh-border-subtle); --line-strong: var(--fh-border-strong);
  --orange: var(--fh-brand); --orange-strong: var(--fh-action); --orange-wash: var(--fh-brand-soft); --orange-line: var(--fh-brand-border);
  --info: var(--st-progress-text); --info-wash: var(--st-progress-bg); --info-line: var(--st-progress-line);
  --green: var(--st-done-text); --green-strong: var(--st-done-text); --green-wash: var(--st-done-bg); --green-line: var(--st-done-line);
  --warn: var(--st-hold-text); --warn-50: var(--st-hold-bg); --warn-line: var(--st-hold-line);
  --danger: var(--st-overdue-text); --danger-50: var(--st-overdue-bg); --danger-line: var(--st-overdue-line);
  /* §8 geometry: status 6, controls 8, cards 10, overlays 12 (K15 A) */
  --r-status: 6px; --r-control: 8px; --r-card: 10px; --r-overlay: 12px;
  --r-sm: var(--r-control); --r: var(--r-card); --r-lg: var(--r-card); --radius-sm: var(--r-control); --radius: var(--r-card); --radius-lg: var(--r-overlay);
  /* §9 elevation 0 to 3 */
  --shadow-sm: var(--sh-1); --shadow: var(--sh-2); --shadow-lg: var(--sh-3);
  /* §10 motion */
  --fh-t-fast: var(--fh-motion-fast); --fh-t: var(--fh-motion-standard); --fh-t-slow: var(--fh-motion-overlay); --fh-ease-out: var(--fh-motion-ease);
  /* §12 type: Inter everywhere, headings and figures too (K1 A); the shared scale */
  --fh-display: 'Inter', system-ui, sans-serif; --fh-display-tracking: -0.01em;
  --fs-page: 28px; --lh-page: 34px; --fs-section: 20px; --lh-section: 28px; --fs-card: 14px; --lh-card: 20px;
  --fs-body: 14px; --lh-body: 21px; --fs-small: 13px; --lh-small: 18px; --fs-label: 12px; --lh-label: 16px; --fs-meta: 12px; --lh-meta: 16px;
  --fs-th: 12px; --lh-th: 16px; --fs-td: 13px; --lh-td: 18px; --fs-button: 13px; --lh-button: 16px; --fs-kpi: 24px; --lh-kpi: 30px;
  /* §8 controls: 40 px, compact 36 px (44 px on a phone, below) */
  --control-h: 40px; --control-h-sm: 36px;
  /* §5 status labels (fh-status-chip): the neutral label is Open; the action tone's text is the accessible brand text */
  --chip-h: 28px; --chip-pad: 0 9px; --chip-fs: var(--fs-label); --chip-dot: 6px; --chip-gap: 6px; --chip-w: 128px;
  --chip-bg: var(--st-open-bg); --chip-line: var(--st-open-line); --chip-text: var(--st-open-text); --chip-dot-c: var(--st-open-dot); --chip-action-text: var(--fh-brand-text);
  /* §5 and §13 tables: the status column 128 px, quiet uppercase headers, the hover surface of a row that opens something */
  --chip-table-w: 128px; --th-track: .04em; --row-hover: var(--fh-surface-hover);
  /* §12 and §13 forms: labels 12/600 (13 on a phone), quiet uppercase; segmented controls and filter chips with control corners */
  --label-w: 600; --label-track: .04em; --seg-r: var(--r-control); --seg-r-in: 6px;
  /* §12 KPI cards (fh-stat-tile): label 12/600 uppercase, the figure 24/30 700 Inter with tabular figures, never broken inside the number
     (it follows its box, 15cqi, and keeps the currency with the number) */
  --stat-label-fs: var(--fs-label); --stat-label-track: .04em; --stat-label-case: uppercase;
  --stat-value-fs: min(var(--fs-kpi), 15cqi); --stat-value-lh: 1.25; --stat-value-w: 700; --stat-box-bg: var(--fh-surface-subtle);
  /* §9 and §11 dialogs: the overlay corners (--r-overlay), elevation 3 (--shadow-lg) and the scrim; the title is a section title */
  --dialog-scrim: var(--fh-scrim); --dialog-h-fs: var(--fs-section);
  /* §2 and §15 empty, loading and error: a solid card (no dashed frame), the title a card title 14/650, the text 14/21; the skeleton on the hover surface */
  --empty-pad: 16px 20px; --empty-border-style: solid; --empty-line: var(--line); --empty-shadow: var(--sh-1); --empty-h-fs: var(--fs-card); --empty-p-fs: var(--fs-body); --empty-p-lh: var(--lh-body); --sk-bg: var(--fh-surface-hover);
  /* K8 B (Pål 13.10): the «?» and «i» popovers (fh-guide) are dark: the primary text colour as the surface, white text, the light border colour for the second line */
  --popover-bg: var(--fh-text); --popover-line: var(--fh-text); --popover-accent: var(--fh-text); --popover-text: var(--fh-text-inverse); --popover-text-2: var(--fh-border);
  /* fh-line-chart tones: s2 #3F6F9D, s3 #7A68B0, s4 #D39A2C, s6 #2B8F86 (the v0.3 chart palette) */
  --navy-400: #3F6F9D; --fire-300: #D39A2C; --chart-3: #7A68B0; --chart-6: #2B8F86;
  background: var(--v03-canvas);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
}
/* §12 on a phone: page title 24, section 18, label and metadata 13, button 14, KPI 22; the targets 44 px. */
@media (max-width: 600px) {
  .fh-v03 {
    --fs-page: 24px; --lh-page: 30px; --fs-section: 18px; --lh-section: 25px; --fs-label: 13px; --lh-label: 18px; --fs-meta: 13px; --lh-meta: 18px;
    --fs-th: 13px; --fs-button: 14px; --lh-button: 18px; --fs-kpi: 22px; --lh-kpi: 28px; --control-h: 44px; --control-h-sm: 44px; --chip-fs: 13px;
    --stat-value-fs: var(--fs-kpi);
  }
}
@media (prefers-reduced-motion: reduce) { .fh-v03 { --fh-t-fast: 0ms; --fh-t: 0ms; --fh-t-slow: 0ms; } }
:root[data-reduced-motion] .fh-v03 { --fh-t-fast: 0ms; --fh-t: 0ms; --fh-t-slow: 0ms; }
:where(.fh-v03-page) { display: block; }
body:has(.fh-v03-page) { background: var(--fh-canvas); }
/* Buttons in the foundation's geometry (§8, §12): 40 px (compact 36, phone 44), 8 px corners, 13 px semibold (14 on a phone);
   secondary is white with the border, hover strengthens the border and the surface; the size never changes on hover or focus. */
.fh-v03 .btn { min-height: var(--control-h); padding: 8px 16px; gap: 8px; border-radius: var(--r-control); font-size: var(--fs-button); line-height: var(--lh-button); }
.fh-v03 .btn-sm { min-height: var(--control-h-sm); padding: 6px 12px; }
.fh-v03 .btn-block { min-height: 44px; }
.fh-v03 .btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.fh-v03 .btn-ghost:hover:not(:disabled) { background: var(--fh-surface-hover); border-color: var(--line-strong); }
.fh-v03 .btn-tertiary:hover:not(:disabled) { background: var(--fh-surface-hover); }
/* Fields in the foundation's geometry (§3, §8, §13): 40 px, 8 px corners, 14 px text (16 on a phone, mobile.css, so iOS does not
   zoom), the quiet border that the pointer strengthens, the blue focus ring (above) and never an orange glow; a field the form has
   marked (aria-invalid, with fh-missing beside it) has the danger border. */
.fh-v03 :is(.f input:not([type=checkbox]):not([type=radio]):not([type=range]), .f select, .f textarea) { min-height: var(--control-h); padding: 8px 12px; font-size: var(--fs-body); border-color: var(--line); border-radius: var(--r-control); }
.fh-v03 .f textarea { min-height: 84px; }
@media (hover: hover) and (pointer: fine) {
  .fh-v03 :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):not(:disabled):not(:focus):hover { border-color: var(--line-strong); }
}
.fh-v03 :is(input, select, textarea)[aria-invalid=true] { border-color: var(--danger); }