/* LoadPulse design tokens - ONE source of truth for the portal.
   Accent, ink and neutral values are copied from the approved extension panel (extension content.css :root / html[data-lp-dark]).
   tests/09-design-system.test.js compares them against the extension so the two products cannot drift apart.
   Palette: ice-white, soft gray, graphite, with a discreet ice-silver accent (never a dominant blue). */
@font-face { font-family: "LP Poppins"; font-weight: 400; font-style: normal; src: url("fonts/Poppins-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "LP Poppins"; font-weight: 500; font-style: normal; src: url("fonts/Poppins-Medium.woff") format("woff"); font-display: swap; }
@font-face { font-family: "LP Poppins"; font-weight: 700; font-style: normal; src: url("fonts/Poppins-Bold.woff") format("woff"); font-display: swap; }

:root {
  /* colour: shared with the extension */
  --lp-card:#ffffff; --lp-ink:#0b0f1a; --lp-slate:#5a6478; --lp-deep:#1c2333; --lp-line:#d3d9e4; --lp-mist:#eef1f6; --lp-soft:#e3e8f0;
  --lp-acc:#0b0f1a; --lp-acc2:#2c3548; --lp-silver:#b9c3d3; --lp-on-acc:#ffffff; --lp-glow:rgba(54,86,111,.24);
  --lp-pos:#0e9f6e; --lp-neg:#e5334b;
  /* ice-silver accent (v4.5, same roles as the extension): --lp-ice on dark surfaces, --lp-sel for selection/hover, --lp-ice-ink for text/icons, --lp-focus for the focus ring */
  --lp-ice:#B9D6EA; --lp-sel:#EAF3FA; --lp-ice-ink:#36566F; --lp-focus:#36566F;
  /* colour: portal canvas and status tints */
  --lp-bg:#f4f6f9; --lp-warn:#b7791f; --lp-scrim:rgba(11,15,26,.38);
  --lp-pos-text:#09714e; --lp-neg-text:#c0233a; --lp-warn-text:#875409;   /* text-safe (AA) versions of the status colours */
  --lp-pos-bg:rgba(14,159,110,.10); --lp-neg-bg:rgba(229,51,75,.08); --lp-warn-bg:rgba(183,121,31,.10);
  /* type: Poppins 400 / 500 / 700 only (the three faces we ship) */
  --lp-font:"LP Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --lp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lp-fs-xs:12px; --lp-fs-sm:13px; --lp-fs-md:15px; --lp-fs-lg:17px; --lp-fs-xl:22px; --lp-fs-2xl:28px;
  --lp-w-regular:400; --lp-w-medium:500; --lp-w-bold:700;
  /* space (4px grid), radius, elevation, motion */
  --lp-s1:4px; --lp-s2:8px; --lp-s3:12px; --lp-s4:16px; --lp-s5:24px; --lp-s6:32px; --lp-s7:48px;
  --lp-r-sm:8px; --lp-r-md:10px; --lp-r-lg:14px; --lp-r-xl:20px; --lp-r-pill:999px;
  --lp-sh-1:0 1px 2px rgba(11,15,26,.06);
  --lp-sh-2:0 1px 2px rgba(11,15,26,.05), 0 8px 24px -12px rgba(11,15,26,.16);
  --lp-sh-3:0 8px 28px rgba(11,15,26,.2);
  --lp-dur:160ms; --lp-ease:cubic-bezier(.2,.8,.25,1);
  --lp-edge:#C4D5E2; --lp-ice-sh:0 1px 2px rgba(54,86,111,.08), 0 10px 26px -12px rgba(110,155,190,.42);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lp-card:#171b25; --lp-ink:#eef1f7; --lp-slate:#b0b9cd; --lp-deep:#d8deea; --lp-line:#2f3749; --lp-mist:#1d2230; --lp-soft:#262c3c;
  --lp-acc:#e9edf4; --lp-acc2:#aab5ca; --lp-silver:#4a5470; --lp-on-acc:#0b0d12; --lp-glow:rgba(210,222,245,.3);
  --lp-ice:#B9D6EA; --lp-sel:#202c39; --lp-ice-ink:#B9D6EA; --lp-focus:#B9D6EA;
  --lp-pos:#34d399; --lp-neg:#ff7a93; --lp-bg:#0d1017; --lp-warn:#f2c06b; --lp-scrim:rgba(3,5,9,.6);
  --lp-pos-text:#34d399; --lp-neg-text:#ff7a93; --lp-warn-text:#f2c06b;
  --lp-pos-bg:rgba(52,211,153,.12); --lp-neg-bg:rgba(255,122,147,.12); --lp-warn-bg:rgba(242,192,107,.12);
  --lp-sh-1:0 1px 2px rgba(0,0,0,.3); --lp-sh-2:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(0,0,0,.6); --lp-sh-3:0 10px 34px rgba(0,0,0,.55);
  --lp-edge:#4d6070; --lp-ice-sh:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(157,187,208,.30);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --lp-card:#171b25; --lp-ink:#eef1f7; --lp-slate:#b0b9cd; --lp-deep:#d8deea; --lp-line:#2f3749; --lp-mist:#1d2230; --lp-soft:#262c3c;
  --lp-acc:#e9edf4; --lp-acc2:#aab5ca; --lp-silver:#4a5470; --lp-on-acc:#0b0d12; --lp-glow:rgba(210,222,245,.3);
  --lp-ice:#B9D6EA; --lp-sel:#202c39; --lp-ice-ink:#B9D6EA; --lp-focus:#B9D6EA;
  --lp-pos:#34d399; --lp-neg:#ff7a93; --lp-bg:#0d1017; --lp-warn:#f2c06b; --lp-scrim:rgba(3,5,9,.6);
  --lp-pos-text:#34d399; --lp-neg-text:#ff7a93; --lp-warn-text:#f2c06b;
  --lp-pos-bg:rgba(52,211,153,.12); --lp-neg-bg:rgba(255,122,147,.12); --lp-warn-bg:rgba(242,192,107,.12);
  --lp-sh-1:0 1px 2px rgba(0,0,0,.3); --lp-sh-2:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(0,0,0,.6); --lp-sh-3:0 10px 34px rgba(0,0,0,.55);
  --lp-edge:#4d6070; --lp-ice-sh:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(157,187,208,.30);
  color-scheme: dark;
}

/* ===== v4.12 Frosted Silver (portal only; moved to the extension after approval) =====
   Additive tokens: nothing above changes, so the tokens shared with the extension stay identical. Surfaces are ICE-WHITE / SILVER, slightly translucent over a
   static soft gradient. Every translucent surface has an opaque twin (--lp-frost-solid*) used when backdrop-filter is unavailable, so legibility never
   depends on the blur. Graphite stays the colour of text, icons and primary buttons. */
:root {
  --lp-frost-base:#F3F8FC;
  --lp-frost-bg:radial-gradient(1400px 700px at 8% -10%, rgba(176,208,232,.55), transparent 62%), radial-gradient(1100px 640px at 100% 2%, rgba(255,255,255,.95), transparent 56%), radial-gradient(1000px 620px at 78% 62%, rgba(190,216,236,.50), transparent 66%), radial-gradient(900px 520px at 12% 88%, rgba(255,255,255,.80), transparent 62%), linear-gradient(180deg, #F8FBFE 0%, #E9F1F8 100%);
  --lp-frost-glow:radial-gradient(ellipse 30% 46% at 30% 48%, rgba(196,218,236,.72), transparent 70%), radial-gradient(ellipse 32% 46% at 70% 52%, rgba(150,190,224,.64), transparent 70%);
  --lp-frost-sheen:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 44%);
  --lp-frost-horizon:radial-gradient(900px 380px at 74% -4%, rgba(255,252,240,.90), transparent 62%), radial-gradient(1200px 360px at 50% 106%, rgba(255,255,255,.85), transparent 66%);
  --lp-frost-arc:radial-gradient(ellipse at 50% 100%, rgba(168,202,229,.55), rgba(168,202,229,0) 68%);
  --lp-frost-solid:#FBFDFF;  --lp-frost-solid-2:#F3F8FC;
  --lp-frost-surface:rgba(255,255,255,.74);  --lp-frost-surface-2:rgba(246,250,253,.80);  --lp-frost-menu:rgba(255,255,255,.97);
  --lp-frost-tint:rgba(234,243,250,.70);  --lp-frost-field:#FFFFFF;
  --lp-frost-edge:#AAC3D6;  --lp-frost-edge-soft:#CDDDEA;  --lp-frost-edge-strong:#8FB0C8;
  --lp-frost-hl:inset 0 1px 0 rgba(255,255,255,.95);
  --lp-frost-sh:0 1px 2px rgba(54,86,111,.06), 0 20px 50px -24px rgba(70,118,158,.36);
  --lp-frost-sh-hover:0 1px 2px rgba(54,86,111,.08), 0 22px 52px -22px rgba(70,118,158,.44);
  --lp-frost-sh-lg:0 28px 64px -24px rgba(70,118,158,.46);
  --lp-frost-blur:22px;
  --lp-frost-link:#1D5C8F;  --lp-frost-hl-line:rgba(255,255,255,.7);
  --lp-frost-nav-hover:rgba(54,86,111,.08);  --lp-frost-nav-sel:#2C3548;  --lp-frost-nav-sel-ink:#FFFFFF;
  --lp-frost-scrim:rgba(40,62,80,.30);
  --lp-ic-sm:16px; --lp-ic-md:18px; --lp-ic-lg:20px;   /* one set of icon sizes */
  --lp-gut:clamp(16px, 2.4vw, 40px); --lp-max:1440px;   /* page gutter and the comfortable maximum width of the content */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lp-frost-base:#0F131A;
  --lp-frost-bg:radial-gradient(1300px 640px at 6% -12%, rgba(200,214,226,.14), transparent 62%), radial-gradient(1000px 600px at 100% 4%, rgba(160,176,190,.10), transparent 58%), radial-gradient(1000px 600px at 76% 62%, rgba(170,186,200,.10), transparent 66%), radial-gradient(800px 480px at 10% 90%, rgba(150,165,180,.08), transparent 62%), linear-gradient(180deg, #13171F 0%, #0B0E14 100%);
  --lp-frost-glow:radial-gradient(ellipse 30% 46% at 30% 48%, rgba(205,218,230,.15), transparent 70%), radial-gradient(ellipse 32% 46% at 70% 52%, rgba(160,176,190,.12), transparent 70%);
  --lp-frost-sheen:linear-gradient(180deg, rgba(220,230,240,.07), rgba(220,230,240,0) 44%);
  --lp-frost-horizon:radial-gradient(900px 380px at 74% -4%, rgba(200,214,226,.12), transparent 62%), radial-gradient(1200px 360px at 50% 106%, rgba(170,186,200,.08), transparent 66%);
  --lp-frost-arc:radial-gradient(ellipse at 50% 100%, rgba(170,186,200,.12), rgba(170,186,200,0) 68%);
  --lp-frost-solid:#1A2029;  --lp-frost-solid-2:#151A22;
  --lp-frost-surface:rgba(30,36,46,.74);  --lp-frost-surface-2:rgba(23,28,37,.82);  --lp-frost-menu:rgba(27,33,43,.98);
  --lp-frost-tint:rgba(185,214,234,.06);  --lp-frost-field:#12161D;
  --lp-frost-edge:#3B4856;  --lp-frost-edge-soft:#2D3843;  --lp-frost-edge-strong:#5E7488;
  --lp-frost-hl:inset 0 1px 0 rgba(215,226,236,.16);
  --lp-frost-sh:0 1px 2px rgba(0,0,0,.35), 0 22px 52px -24px rgba(0,0,0,.70);
  --lp-frost-sh-hover:0 1px 2px rgba(0,0,0,.4), 0 16px 36px -14px rgba(0,0,0,.72);
  --lp-frost-sh-lg:0 28px 64px -24px rgba(0,0,0,.78);
  --lp-frost-blur:22px;
  --lp-frost-link:#9CC6E8;  --lp-frost-hl-line:rgba(215,226,236,.06);
  --lp-frost-nav-hover:rgba(185,214,234,.08);  --lp-frost-nav-sel:rgba(185,214,234,.16);  --lp-frost-nav-sel-ink:#E6F1F9;
  --lp-frost-scrim:rgba(4,7,12,.62);
} }
:root[data-theme="dark"] {
  --lp-frost-base:#0F131A;
  --lp-frost-bg:radial-gradient(1300px 640px at 6% -12%, rgba(200,214,226,.14), transparent 62%), radial-gradient(1000px 600px at 100% 4%, rgba(160,176,190,.10), transparent 58%), radial-gradient(1000px 600px at 76% 62%, rgba(170,186,200,.10), transparent 66%), radial-gradient(800px 480px at 10% 90%, rgba(150,165,180,.08), transparent 62%), linear-gradient(180deg, #13171F 0%, #0B0E14 100%);
  --lp-frost-glow:radial-gradient(ellipse 30% 46% at 30% 48%, rgba(205,218,230,.15), transparent 70%), radial-gradient(ellipse 32% 46% at 70% 52%, rgba(160,176,190,.12), transparent 70%);
  --lp-frost-sheen:linear-gradient(180deg, rgba(220,230,240,.07), rgba(220,230,240,0) 44%);
  --lp-frost-horizon:radial-gradient(900px 380px at 74% -4%, rgba(200,214,226,.12), transparent 62%), radial-gradient(1200px 360px at 50% 106%, rgba(170,186,200,.08), transparent 66%);
  --lp-frost-arc:radial-gradient(ellipse at 50% 100%, rgba(170,186,200,.12), rgba(170,186,200,0) 68%);
  --lp-frost-solid:#1A2029;  --lp-frost-solid-2:#151A22;
  --lp-frost-surface:rgba(30,36,46,.74);  --lp-frost-surface-2:rgba(23,28,37,.82);  --lp-frost-menu:rgba(27,33,43,.98);
  --lp-frost-tint:rgba(185,214,234,.06);  --lp-frost-field:#12161D;
  --lp-frost-edge:#3B4856;  --lp-frost-edge-soft:#2D3843;  --lp-frost-edge-strong:#5E7488;
  --lp-frost-hl:inset 0 1px 0 rgba(215,226,236,.16);
  --lp-frost-sh:0 1px 2px rgba(0,0,0,.35), 0 22px 52px -24px rgba(0,0,0,.70);
  --lp-frost-sh-hover:0 1px 2px rgba(0,0,0,.4), 0 16px 36px -14px rgba(0,0,0,.72);
  --lp-frost-sh-lg:0 28px 64px -24px rgba(0,0,0,.78);
  --lp-frost-blur:22px;
  --lp-frost-link:#9CC6E8;  --lp-frost-hl-line:rgba(215,226,236,.06);
  --lp-frost-nav-hover:rgba(185,214,234,.08);  --lp-frost-nav-sel:rgba(185,214,234,.16);  --lp-frost-nav-sel-ink:#E6F1F9;
  --lp-frost-scrim:rgba(4,7,12,.62);
}