/* ============================================================
   wave-ai.css — WaveLabs AI Dashboard UI
   Design system tokens + layout shell + section cards.
   Isolated from all existing Smartwaves CSS. Do not import
   this file into the LineOne-based layout or vice versa.
   ============================================================ */

/* ---------- Webfont ----------
   Aspekta Variable (OFL, Ivo Dolenc) — one file carries weight 100–900, so
   display and body are the same face at different weights. Funnel Display and
   Funnel Sans are retired: the Tennstrøm system stands on Aspekta with the
   Helvetica stack behind it. */
@font-face {
    font-family: "Aspekta";
    src: url("/fonts/tennstrom/AspektaVF.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* ── Tennstrøm ──────────────────────────────────────────────────────
       Lin is the canvas, ink the text, skogsgrønn the dark working surface,
       fosfor the signal. Ratios in the comments are from the design system's
       tokens/colors.css, measured against the surface named.

       Fosfor is never a surface under text — it is a dot, a 2px edge and a
       segment. Where a filled surface needs text, the fill is ink or skog.
       The wl-* names are kept so 678 classes keep working; only the values
       and the roles behind them have moved. */

    /* Brand — the signal */
    --wl-wave: #3EA764;             /* fosfor-300 · FILL ONLY (3.5:1 as text) */
    --wl-wave-dark: #2F8B51;        /* fosfor-400 · hover, closed relay. Fill. */
    --wl-wave-deep: #16522E;        /* fosfor-500 · the accent TEXT — 7.2:1 ✓AAA */
    --wl-wave-darkest: #0E3A1F;     /* fosfor-600 · deepest fill, carries lin at 11.6:1 */
    --wl-wave-soft: #8FCCA5;        /* fosfor-200 · the one fosfor surface that
                                       bears ink (9.2:1 ✓AAA). Marketing/hero only. */
    --wl-wave-dim: rgba(62, 167, 100, 0.12);
    --wl-wave-dim2: rgba(62, 167, 100, 0.06);
    --wl-wave-ring: rgba(62, 167, 100, 0.20);

    /* Foundation */
    --wl-pampas: #E3E3DF;           /* lin — the canvas. Cool and grey, not warm. */
    --wl-pampas-100: #EFEFEC;       /* card */
    --wl-pampas-200: #E9E9E5;       /* nested */
    --wl-pampas-300: #DBDBD6;       /* sunk */
    --wl-ink: #1C1C1A;              /* 13.3:1 on lin */
    --wl-skog: #33423A;             /* skogsgrønn — brand surface, and valid text at 8.2:1 */
    --wl-lin: #E3E3DF;              /* text on skog — 8.2:1 ✓AAA, in both themes */
    --wl-petroleum: #33423A;

    /* Semantic — every one has a FILL and a TEXT variant, and they are never
       swapped. The fill is saturated enough to read at 6px; the text is dark
       enough for AAA. --wl-danger is a dot; --wl-danger-text is a sentence. */
    --wl-success: #2F8B51;          /* fill */
    --wl-warning: #C8871F;          /* oker · fill */
    --wl-danger:  #C6453A;          /* rust · fill */
    --wl-measure: #5BB0E0;          /* måleblå · fill */
    --wl-success-text: #16522E;     /* 7.2:1 ✓AAA */
    --wl-warning-text: #5C3D07;     /* 7.7:1 ✓AAA */
    --wl-danger-text:  #7A2118;     /* 7.9:1 ✓AAA */
    --wl-measure-text: #0E4463;     /* 8.1:1 ✓AAA */

    /* Foreground roles.
       No alpha on text anywhere: half-transparent text composites to a ratio
       nobody verified. fg-2 and fg-3 sit close on purpose — at AAA they must —
       so hierarchy is carried by size and letter-spacing, not by lightness. */
    --fg-1: var(--wl-ink);          /* 13.3:1 ✓AAA */
    --fg-2: #3A3F39;                /* 8.4:1 ✓AAA */
    --fg-3: #444942;                /* 7.2:1 ✓AAA */
    --fg-muted: #6B6F68;            /* 4.0:1 — NOT text. Disabled, decoration, icon. */
    --fg-accent: var(--wl-wave-deep);
    /* Background roles */
    --bg-canvas: var(--wl-pampas);
    --bg-card: var(--wl-pampas-100);
    --bg-nested: var(--wl-pampas-200);
    /* Borders — transparent ink, so they inherit the surface's temperature.
       All three are under 3:1 and therefore decorative; a border that carries
       meaning uses --border-strong. */
    --border-1: rgba(28, 28, 26, 0.07);
    --border-2: rgba(28, 28, 26, 0.13);
    --border-3: rgba(28, 28, 26, 0.24);
    --border-strong: #6B6F68;       /* 4.0:1 ✓ */
    /* Type */
    --font-display: "Aspekta", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-sans: "Aspekta", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Every number that changes is set in mono with tabular-nums, so digits
       do not jump. Mono stays the system stack. */
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale.

       One base and everything relative to it. The base is the browser's own
       size, so a reader who has set larger text in the OS or the browser now
       gets it — with px, which is what every size here used to be, that
       preference was silently ignored.

       Sizes were also drifting: 23 distinct values across 278 declarations,
       35 of them on half a pixel, which is what happens when each component is
       nudged by eye instead of picked off a scale. Nine steps replace them.

       Line heights are unitless throughout, so they follow these without any
       further adjustment. */
    --text-3xs: 0.625rem;    /* 10px — micro badges only */
    --text-2xs: 0.75rem;     /* 12px */
    --text-xs: 0.8125rem;    /* 13px */
    --text-sm: 0.875rem;     /* 14px */
    --text-md: 0.9375rem;    /* 15px */
    --text-lg: 1rem;         /* 16px */
    --text-xl: 1.125rem;     /* 18px */
    --text-2xl: 1.375rem;    /* 22px */
    --text-3xl: 1.625rem;    /* 26px */
    --text-4xl: 2.125rem;    /* 34px */
    /* Spacing (4pt base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    /* Radius */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;
    /* Elevation (product: bg-contrast only; no drop-shadows) */
    --elev-modal: 0 12px 32px rgba(10, 10, 9, 0.08), 0 4px 8px rgba(10, 10, 9, 0.04);
    /* Radius extra */
    --r-xl: 16px;
    /* Motion */
    --ease-product: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-hover: 120ms;
    --dur-panel: 280ms;
    /*Text Color*/
    --wl-darkblue: #0E1117;

    /* ════════════════════════════════════════════════════════════════════
       The design system's own names.

       Everything below is `TS Design System/tokens/*.css`, added rather than
       renamed: 721 wl-* classes are built on the short names above, and a
       rename would be a large diff that changes nothing on screen. New work
       should reach for these; the short names stay as aliases pointing at the
       same values, so the two can never disagree.
       ════════════════════════════════════════════════════════════════════ */

    /* ── Palette pieces the portal had no name for ─────────────────────── */

    /* The one fosfor value that may sit under text — ink on it is 9.2:1 ✓AAA.
       Marketing and hero metrics only, one per view. Everywhere else fosfor is
       a dot, a 2px edge and a segment, never a surface under text. */
    --ts-fosfor-flate: #8FCCA5;

    /* Fill on light, valid text only on skog-900. Never a signal colour:
       2.5:1 on lin carries neither text nor "active". */
    --ts-salvie-lys: #ABB7AA;

    --ts-lin-50: #F7F7F5;

    /* The operative dark surfaces, named. Distinct from --wl-skog #33423A,
       which is the brand surface for marketing bands and carries no semantic
       colour at all. Product UI is built from these four. */
    --ts-skog-900: #131B16;
    --ts-skog-800: #16201A;
    --ts-skog-700: #1A241E;
    --ts-skog-600: #212D25;

    /* ── Scrims. Alpha belongs to surfaces, never to text. ─────────────── */
    --scrim-modal:  rgba(28, 28, 26, 0.42);
    --scrim-subtle: rgba(28, 28, 26, 0.06);

    /* Focus. fosfor-300 is 1.9:1 on lin and cannot carry a focus ring alone. */
    --focus-ring: #16522E;

    /* ── Spacing, the full 4pt scale ───────────────────────────────────── */
    --space-1: 4px;    --space-2: 8px;    --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;   --space-6: 24px;   --space-8: 32px;  --space-10: 40px;
    --space-12: 48px;  --space-16: 64px;  --space-20: 80px; --space-24: 96px;
    --space-30: 120px; --space-40: 160px;

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 8px;
    --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

    /* ── Elevation. Product uses contrast; only the modal uses a shadow. ── */
    --elev-0: none;
    --elev-1: 0 1px 2px rgba(10,10,9,0.04), 0 1px 3px rgba(10,10,9,0.06);
    --elev-2: 0 4px 12px rgba(10,10,9,0.06), 0 2px 4px rgba(10,10,9,0.04);
    --elev-3: 0 12px 32px rgba(10,10,9,0.08), 0 4px 8px rgba(10,10,9,0.04);

    /* ── Motion, with the division of labour the system states ─────────── */
    --ease-material: cubic-bezier(0.4, 0, 0.2, 1);      /* product UI */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* marketing reveals */
    /* Mechanical parts only — a wheel, a stroke, a knob, a knock. Never a
       surface, an opacity or a panel. */
    --ease-spring:   cubic-bezier(0.34, 1.45, 0.5, 1);

    --dur-trans:  250ms;
    --dur-mech:   420ms;
    --dur-reveal: 700ms;
    --dur-pulse:  1500ms;
}

/* The scale's anchor. 100% means "whatever the reader chose", which is the
   whole point of moving off px — do not pin this to a pixel value. */
html { font-size: 14px; }

/* ============================================================
   DARK THEME TOKENS
   Applied when <html data-wl-theme="dark"> (set by JS).
   All other tokens (brand, radius, motion) stay unchanged.
   ============================================================ */
[data-wl-theme="dark"] {
    /* ── The operative surfaces ─────────────────────────────────────────
       Not the brand surface. Skogsgrønn #33423A is for marketing bands, where
       only fg-1 and fg-2 are legal and no semantic colour is; product UI is
       built from skog-600…900, where every text colour clears AAA against the
       LIGHTEST of them — which is the one that matters. */
    --wl-pampas:     #16201A;       /* skog-800 · everything rests on this */
    --wl-pampas-100: #1A241E;       /* skog-700 · card, active row */
    --wl-pampas-200: #131B16;       /* skog-900 · deepest — timeline, tiles */
    --wl-pampas-300: #212D25;       /* skog-600 · lifted surface, hover */
    --wl-ink: #E3E3DF;
    --wl-skog: #33423A;

    /* The fills hold on a dark surface; the text variants have to lighten.
       All four verified against skog-600, the lightest operative tone. */
    --wl-wave-deep: #8FCCA5;        /* accent text — 7.7–9.4:1 ✓AAA */
    --wl-wave-darkest: #3EA764;
    --wl-success-text: #8FCCA5;     /* 7.7:1 on skog-600 ✓ */
    --wl-warning-text: #E8B45F;     /* 7.6:1 ✓ */
    --wl-danger-text:  #F4A199;     /* 7.1:1 ✓ */
    --wl-measure-text: #9BD0F0;     /* 8.6:1 ✓ */

    /* Foreground roles. fg-2 and fg-3 are the same value here: on the dark
       surface the hierarchy is carried entirely by the type. */
    --fg-1: #E3E3DF;                /* 11.1–13.9:1 ✓ */
    --fg-2: #CFD6CD;                /* 9.7–12.1:1 ✓ */
    --fg-3: #CFD6CD;
    --fg-muted: #7E8C82;            /* NOT text. Disabled, decoration, icon. */
    --fg-accent: var(--wl-wave-deep);
    /* Background roles */
    --bg-canvas: var(--wl-pampas);
    --bg-card: var(--wl-pampas-100);
    --bg-nested: var(--wl-pampas-200);
    /* Borders — flat skog tones on dark, so they hold their temperature. */
    --border-1: #202B23;
    --border-2: #2E3D33;
    --border-3: #3D5044;
    --border-strong: #7E8C82;       /* 4.1:1 on skog-800 ✓ */
    /* Elevation */
    --elev-modal: 0 12px 32px rgba(0, 0, 0, 0.40), 0 4px 8px rgba(0, 0, 0, 0.24);

    /* Scrims and focus, dark. The focus ring lightens to fosfor-300: it is a
       graphic against skog-800 at 5.2:1, not text. */
    --scrim-modal:  rgba(4, 8, 5, 0.62);
    --scrim-subtle: rgba(227, 227, 223, 0.06);
    --focus-ring:   #3EA764;

    /* Salvie is fill in dark too — 6.9:1 on skog-600 is under the bar for text. */
    --ts-salvie-lys: #ABB7AA;
}

/* ── Theme-toggle button ─────────────────────────────────────────────────── */
.wl-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    background: transparent;
    cursor: pointer;
    color: var(--fg-3);
    transition: color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product);
    flex: none;
}

.wl-theme-btn:hover {
    color: var(--fg-1);
    background: var(--bg-nested);
    border-color: var(--border-2);
}

.wl-theme-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: opacity 140ms ease;
}

/* Show the right icon based on current theme */
.wl-theme-btn .wl-theme-icon-dark  { display: block; }
.wl-theme-btn .wl-theme-icon-light { display: none;  }

[data-wl-theme="dark"] .wl-theme-btn .wl-theme-icon-dark  { display: none;  }
[data-wl-theme="dark"] .wl-theme-btn .wl-theme-icon-light { display: block; }

/* ── Dark-mode surface adjustments ──────────────────────────────────────── */

/* Input / select backgrounds look better with a slight lift in dark mode */
[data-wl-theme="dark"] .wl-form-input,
[data-wl-theme="dark"] .wl-form-select,
[data-wl-theme="dark"] .wl-form-textarea {
    background: var(--bg-canvas);
    color: var(--fg-1);
}

/* Admin validation summary in dark mode */
[data-wl-theme="dark"] .wl-validation-summary {
    background: rgba(232, 125, 111, 0.12);
    border-color: rgba(232, 125, 111, 0.30);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
.wave-shell *, .wave-shell *::before, .wave-shell *::after {
   /* box-sizing: border-box;
    margin: 0;
    padding: 0;*/
}

.wave-shell {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--fg-1);
    background: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -0.005em;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */

/* Sidebar */
.wl-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-nested);
    border-right: 1px solid var(--border-1);
    padding: 16px 12px 12px;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

.wl-sb-head {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px 8px 10px;
}

/* The symbol and the wordmark, side by side — the sanctioned combination from
   the Identitet «Kombinasjoner» card. Both are the delivered vectors, never
   re-set in a typeface, and both are masks over --fg-1 rather than <img>, so
   one cached file each covers lin and skog with no negative variant to keep
   in step.

   Proportion is the card's: the visible weave sits at roughly 1.5x the
   wordmark's cap height. The mark's 21 points occupy only the middle ~54% of
   its 120-unit viewBox, which is why the box is three times the wordmark's
   height and still reads as the smaller of the two. */
.wl-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}

/* The wordmark is still a mask — one colour, one cached file, inverts with the
   theme for free. The mark cannot be, because it is two-tone; it is an inline
   SVG instead and takes its colours the ordinary way. */
.wl-lockup-word {
    display: block;
    flex: none;
    width: 113px;
    height: 18px;
    background-color: var(--fg-1);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("/img/tennstrom/logo-wordmark-currentcolor.svg");
    mask-image: url("/img/tennstrom/logo-wordmark-currentcolor.svg");
    transition: background-color var(--dur-hover) var(--ease-product);
}

.wl-lockup-mark {
    display: block;
    flex: none;
    width: 54px;
    height: 54px;
    color: var(--fg-1);
    transition: color var(--dur-hover) var(--ease-product);
}

/* The weave takes the text colour rather than naming one, so it follows the
   palette wherever the palette goes. Today that is ink on lin and nothing else
   — the Tennstrøm re-point defines no dark tokens — but currentColor costs
   nothing and means the mark needs no attention on the day it does. */
.wl-mark-weave { fill: currentColor; }

/* The stroke is the signal and holds fosfor in both themes — it is a graphic
   and not a surface under text, so rule 1 does not bind here. --wl-wave is
   fosfor-300, the fill-only member of the ramp. */
.wl-mark-stroke { fill: var(--wl-wave); }

.wl-lockup:hover .wl-lockup-mark { color: var(--wl-wave-deep); }
.wl-lockup:hover .wl-lockup-word { background-color: var(--wl-wave-deep); }

/* A tooltip that explains a control, for the few that need explaining.

   Not the browser's own: `title` waits about a second, cannot be styled, and
   never appears for anyone using a keyboard. This one shows on focus as well
   as hover, so it is reachable by tabbing.

   It opens downwards and spans the item's own width rather than sitting
   beside it, because the sidebar is 240px with overflow-x: hidden — anything
   reaching to the right is simply cut off. A tooltip nobody can read is worse
   than none, since it also swallows the hover. */
.wl-tip { position: relative; }

.wl-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    z-index: 40;

    padding: 9px 11px;
    border-radius: 9px;
    background: var(--wl-skog);
    color: var(--wl-lin);
    border: 1px solid var(--wl-skog);

    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;

    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;

    /* Delayed on the way in so that running the pointer down the menu does
       not flash a tooltip at every item, and instant on the way out. */
    transition: opacity 120ms var(--ease-product) 380ms,
                transform 120ms var(--ease-product) 380ms;
}

/* The notch. Drawn as a rotated square so it takes the bubble's colour. */
.wl-tip::before {
    content: "";
    position: absolute;
    top: calc(100% + 3px);
    left: 18px;
    width: 8px;
    height: 8px;
    z-index: 41;
    background: var(--wl-skog);
    transform: rotate(45deg) translateY(-2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms var(--ease-product) 380ms;
}

.wl-tip:hover::after, .wl-tip:hover::before,
.wl-tip:focus-visible::after, .wl-tip:focus-visible::before {
    opacity: 1;
    transition-delay: 380ms;
}

.wl-tip:hover::after, .wl-tip:focus-visible::after { transform: translateY(0); }

/* Nobody wants a tooltip they cannot dismiss on a touchscreen, where there
   is no hover to leave. */
@media (hover: none) {
    .wl-tip::after, .wl-tip::before { display: none; }
}

/* ── The My Agents help icon ─────────────────────────────────────────

   A tooltip on the whole heading fired whenever the pointer crossed it,
   dropping the bubble over the dashboards listed underneath. The bubble
   still hangs from the heading, because a 240px sidebar with overflow-x
   hidden gives a 14px icon nowhere to anchor a readable one — but only the
   icon triggers it now. */
.wl-sb-ai-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;

    width: 14px;
    height: 14px;
    margin-left: 6px;

    border: 1px solid currentColor;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    opacity: .45;
    cursor: help;
    transition: opacity 120ms var(--ease-product);
}

.wl-sb-ai-help:hover,
.wl-sb-ai-help:focus-visible { opacity: 1; }

/* Suppress the inherited whole-heading trigger. More specific than the
   generic .wl-tip:hover rule, so this wins. */
.wl-sb-ai-head.wl-tip:hover::after,
.wl-sb-ai-head.wl-tip:hover::before,
.wl-sb-ai-head.wl-tip:focus-visible::after,
.wl-sb-ai-head.wl-tip:focus-visible::before { opacity: 0; }

/* And drive it from the icon instead. Shorter delay than the menu tooltips:
   hovering a question mark is already a deliberate act, so the pause that
   stops bubbles flashing down a menu is just latency here. */
.wl-sb-ai-head.wl-tip:has(.wl-sb-ai-help:hover)::after,
.wl-sb-ai-head.wl-tip:has(.wl-sb-ai-help:hover)::before,
.wl-sb-ai-head.wl-tip:has(.wl-sb-ai-help:focus-visible)::after,
.wl-sb-ai-head.wl-tip:has(.wl-sb-ai-help:focus-visible)::before {
    opacity: 1;
    transition-delay: 100ms;
}

.wl-sb-ai-head.wl-tip:has(.wl-sb-ai-help:hover)::after,
.wl-sb-ai-head.wl-tip:has(.wl-sb-ai-help:focus-visible)::after {
    transform: translateY(0);
}

/* The notch points at the icon rather than at the start of the row. */
.wl-sb-ai-head.wl-tip::before { left: auto; right: 34px; }

/* Workspace / store selector */
.wl-sb-ws {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--fg-1);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product);
    text-align: left;
    appearance: none;
    border: 1px solid var(--border-2);
}

.wl-sb-ws:hover {
    background: var(--wl-pampas);
    border-color: var(--border-2);
}

/* The chain's monogram on a flat surface. It replaced a radial-gradient blob:
   gradients are out under this design system, and a blob carried no
   information — the initials at least say whose estate you are looking at. */
.wl-sb-ws-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-skog);
    color: var(--wl-lin);
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.02em;
}

/* The readout: key over value, which is this system's product signature. One
   line could not say whether the thing named was a chain or a shop, and with a
   shop selected it could not say which chain it belonged to. */
.wl-sb-ws-read {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.wl-sb-ws-k {
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-3);
    line-height: 1.3;
}

.wl-sb-ws-name {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-sb-ws-name--none { color: var(--fg-3); font-weight: 500; }

/* The chain a shop sits in. Present only when a shop is selected — on a chain
   it would repeat the value directly above it. */
.wl-sb-ws-in {
    font-size: var(--text-2xs);
    color: var(--fg-3);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-sb-ws svg {
    width: 12px;
    height: 12px;
    color: var(--fg-3);
    flex: none;
}

/* Nav section label */
.wl-sb-section {
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--fg-3);
    padding: 18px 10px 6px;
}

/* Nav link */
.wl-sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-md);
    letter-spacing: -0.005em;
    color: var(--fg-2);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
    text-align: left;
}

.wl-sb-link svg {
    width: 16px;
    height: 16px;
    flex: none;
    opacity: 0.8;
}

.wl-sb-link:hover {
    background: rgba(10, 10, 9, 0.04);
    color: var(--fg-1);
    text-decoration: none;
}

.wl-sb-link--active {
    background: var(--bg-card);
    color: var(--fg-1);
    font-weight: 500;
}

.wl-sb-link--sm {
    padding: 6px 10px;
    font-size: var(--text-sm);
    color: var(--fg-3);
}

/* Reports sits at the same level as Dashboards and Work but is a plain link,
   not a collapsible group, so it never picked up .wl-sb-group-head and read a
   step lighter than its two neighbours. This lends it that head's metrics. */
.wl-sb-link--head {
    padding: 7px 10px;
    gap: 8px;
    font-weight: 500;
}

.wl-sb-link--head svg { width: 14px; height: 14px; }

.wl-sb-link--sm:hover {
    color: var(--fg-1);
}

/* Badge count */
.wl-sb-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: rgba(10, 10, 9, 0.08);
    color: var(--fg-1);
    font-size: var(--text-2xs);
    font-weight: 500;
    font-feature-settings: "tnum";
}

/* An explicit `display` beats the browser's own `[hidden] { display: none }`,
   so these two need saying out loud. Without them a badge with nothing to
   report still draws an empty pill, and the Reports entry — written to stay
   hidden until the API says reports exist — was on screen the whole time. */
.wl-sb-badge[hidden],
.wl-sb-link[hidden] { display: none; }


/* AI dashboards group card */
.wl-sb-ai-card {
    background: rgba(62, 167, 100, 0.08);
    border: 1px solid rgba(22, 82, 46, 0.12);
    border-radius: var(--r-lg);
    padding: 6px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Kept for anything still using the plain label. */
.wl-sb-ai-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--wl-wave-deep);
    padding: 6px 8px 4px;
}

/* The card's head is a group head wearing the card's own voice — accent text
   and the signal dot — rather than the muted grey the other group heads use. */
.wl-sb-ai-head {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--wl-wave-deep);
    padding: 5px 8px;
}

.wl-sb-ai-head:hover {
    background: rgba(62, 167, 100, 0.10);
    color: var(--wl-wave-deep);
}

/* Inside a 6px-padded card the group body's 22px rail would push the items off
   centre, and the card is already the indent. */
.wl-sb-group-body--flush { padding-left: 0; }
.wl-sb-group[open] > .wl-sb-group-body--flush { padding-bottom: 2px; }

.wl-sb-ai-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--wl-wave);
    box-shadow: 0 0 0 3px rgba(62, 167, 100, 0.18);
    flex: none;
}

.wl-sb-ai-card .wl-sb-link {
    font-size: var(--text-md);
    color: var(--wl-wave-deep);
}

.wl-sb-ai-card .wl-sb-link svg {
    color: var(--wl-wave-deep);
    opacity: 1;
}

.wl-sb-ai-card .wl-sb-link:hover {
    background: rgba(62, 167, 100, 0.14);
    color: var(--fg-1);
}

.wl-sb-ai-card .wl-sb-link--active {
    background: var(--bg-card);
    color: var(--fg-1);
    font-weight: 500;
}

/* Data dashboards collapsible group */
.wl-sb-group {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wl-sb-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--fg-2);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-sb-group-head svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.wl-sb-group-chev {
    margin-left: auto;
    width: 14px;
    height: 14px;
    transition: transform 200ms var(--ease-product);
}

.wl-sb-group-head:hover {
    background: rgba(10, 10, 9, 0.04);
    color: var(--fg-1);
}

.wl-sb-group-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms var(--ease-product);
}

/* Child, not descendant, on all four of these. Staff holds a nested group now,
   and a descendant selector would have opened the inner body the moment the
   outer one opened — the inner [open] attribute never consulted. */
.wl-sb-group[open] > .wl-sb-group-body {
    max-height: 280px;
    padding-top: 2px;
    padding-bottom: 4px;
}

.wl-sb-group[open] > .wl-sb-group-head .wl-sb-group-chev {
    transform: rotate(90deg);
}

.wl-sb-group-body .wl-sb-link {
    padding: 6px 10px;
    font-size: var(--text-sm);
    color: var(--fg-3);
}

.wl-sb-group-body .wl-sb-link:hover {
    color: var(--fg-1);
}

/* Each dashboard category on its own surface.
 *
 * A flat list of headings and links asked the eye to infer the grouping from
 * spacing alone, and with five categories and a dozen links it stopped
 * reading. The surface does the grouping instead: one lift above the sidebar,
 * the same card convention used everywhere else — contrast between background
 * layers rather than a shadow.
 *
 * The sidebar is --bg-nested, so a category sits on --bg-card, one step
 * lighter. The relationship holds in dark, where the same two tokens are
 * skog-900 and skog-700. */
.wl-sb-sec {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 3px 4px 5px;
}

.wl-sb-sec + .wl-sb-sec { margin-top: 6px; }

/* A category with nothing in it yet keeps the surface — dropping it entirely
   put three of the five outside the system the surfaces exist to create. The
   outline stays and the fill goes, which reads as reserved space rather than
   as a group that happens to be empty. */
.wl-sb-sec--empty {
    background: none;
    border-style: dashed;
    border-color: var(--border-2);
    padding-bottom: 3px;
}

/* The cards are the indent now, so the body's rail comes off — otherwise every
   surface starts 22px in and the column looks broken rather than nested. */
.wl-sb-group-body--sections { padding-left: 4px; padding-right: 2px; }

/* A heading inside a collapsible group — the dashboard categories.
 *
 * All-caps with letter-spacing is the system's label treatment, and it is the
 * right one for a key over a value. It is the wrong one here: these are five
 * headings a reader scans to choose between, and caps slow that down by
 * removing the word shapes. Sentence case with the weight instead, an icon to
 * give each one a silhouette, and a rule to separate the header from the list
 * it heads. */
.wl-sb-subsection {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 6px;
    margin-bottom: 3px;
    border-bottom: 1px solid var(--border-2);
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--fg-1);
}

.wl-sb-subsection svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--fg-3);
}

.wl-sb-subsection:first-child { padding-top: 2px; }
.wl-sb-sec .wl-sb-subsection { padding: 4px 8px 3px; }
.wl-sb-sec .wl-sb-empty { padding: 2px 8px 3px; }

/* A named category with nothing in it yet. Said plainly rather than left blank,
   so the heading reads as a promise rather than a rendering fault. */
.wl-sb-empty {
    padding: 4px 10px 5px;
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--fg-3);
}

/* Groups holding categories rather than a handful of links need more room than
   the shared cap allows; without this the list is silently clipped when open. */
.wl-sb-group--tall[open] > .wl-sb-group-body {
    max-height: 760px;
}

/* Must come after the rule above, not before: same specificity, so order is
   what decides. Five surfaces with their own padding run taller than the
   shared cap, and an overflow here is clipped silently rather than scrolled. */
.wl-sb-group--tall[open] > .wl-sb-group-body--sections { max-height: 900px; }

/* A visible group badge takes the free space, so it and the chevron travel to
   the right edge together. When it is hidden it takes nothing, and the
   chevron's own `margin-left: auto` is what puts it there - see the sibling
   rule below. */
.wl-sb-badge--group {
    margin-left: auto;
    margin-right: 2px;
}

/* A group head ends with a chevron, so its badge is pushed in by the chevron's
   width plus the row gap. A plain link has no chevron, so its badge sits flush
   right and the two badges land on different vertical lines — Reports against
   Work is exactly that. Reserving the chevron's space on badged links without
   one puts every badge in the column on the same edge.

   Scoped to top-level links: the ones inside a group body sit on their own
   indent and line up with each other already. */
.wl-sb-nav > .wl-sb-link > .wl-sb-badge,
.wl-sidebar > .wl-sb-link > .wl-sb-badge { margin-right: 24px; }

/* Only when the badge is actually showing.

   Every group carries a badge element now, most of them hidden, and matching on
   the element rather than on its visibility stripped the chevron's auto margin
   everywhere - leaving it tucked against the heading text instead of against the
   right edge. A hidden badge occupies no space, so there is nothing to make room
   for and the chevron must keep pushing itself right. */
.wl-sb-group-head .wl-sb-badge--group:not([hidden]) ~ .wl-sb-group-chev {
    margin-left: 0;
}


/* Sidebar footer */
.wl-sb-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wl-sb-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    background: transparent;
    border: 0;
    color: var(--fg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
    flex: none;
}

.wl-sb-icon-btn:hover {
    background: rgba(10, 10, 9, 0.06);
    color: var(--fg-1);
}

.wl-sb-icon-btn svg {
    width: 16px;
    height: 16px;
}

.wl-sb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 4px 8px 4px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-product);
    min-width: 0;
}

.wl-sb-user:hover {
    background: rgba(10, 10, 9, 0.04);
}

.wl-sb-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    background: #DCD9D0;
    color: var(--fg-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: -0.005em;
    flex: none;
}

.wl-sb-user-meta {
    min-width: 0;
    flex: 1;
}

.wl-sb-user-name {
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-sb-user-role {
    font-size: var(--text-xs);
    color: var(--fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Topbar */
.wl-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    flex-shrink: 0;
    padding: 0 24px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-1);
}

.wl-tb-crumb {
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--fg-1);
    letter-spacing: -0.005em;
}

.wl-tb-crumb-sep {
    color: var(--fg-3);
    margin: 0 4px;
}

/* The current chain or store, beside the breadcrumb.

   Deliberately quieter than the crumb: the crumb says what you are looking at,
   this says whose it is, and the second only matters once you have read the
   first. The name still carries full-contrast text — it is the part somebody
   checks before trusting a figure, so it is not allowed to be decoration. */
.wl-tb-scope {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--border-1);
    min-width: 0;
}

.wl-tb-scope svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--fg-3);
}

.wl-tb-scope-name {
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-tb-scope-of {
    font-size: var(--text-2xs);
    color: var(--fg-3);
    white-space: nowrap;
}

/* Below this the header has to choose, and the page title wins. */
@media (max-width: 720px) {
    .wl-tb-scope-of { display: none; }
}

.wl-tb-spacer {
    flex: 1;
}

.wl-tb-btn {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--fg-2);
    background: transparent;
    border: 0;
    padding: 6px 10px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-tb-btn:hover {
    background: rgba(10, 10, 9, 0.06);
    color: var(--fg-1);
}

.wl-tb-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    background: transparent;
    border: 0;
    color: var(--fg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-tb-icon-btn:hover {
    background: rgba(10, 10, 9, 0.06);
    color: var(--fg-1);
}

.wl-tb-icon-btn svg {
    width: 16px;
    height: 16px;
}

/* Wave active indicator pill */
.wl-tb-wave-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: var(--text-sm);
    letter-spacing: -0.005em;
    color: var(--wl-wave-deep);
    padding: 4px 10px 4px 8px;
    background: rgba(62, 167, 100, 0.14);
    border-radius: var(--r-pill);
}

.wl-tb-wave-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--wl-wave);
    box-shadow: 0 0 0 3px rgba(62, 167, 100, 0.20);
    flex: none;
    animation: wlPulse 1.6s ease-in-out infinite;
}

@keyframes wlPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Main content area */
.wl-main-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.wl-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    background: var(--bg-canvas);
    position: relative;
}

.wl-content-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================================
   SLIDING PANELS
   ============================================================ */
.wl-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 10, 9, 0.20);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-panel) var(--ease-product);
}

.wl-panel-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.wl-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border-1);
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--dur-panel) var(--ease-product);
    overflow: hidden;
}

.wl-panel.open {
    transform: translateX(0);
}

.wl-panel--wide {
    width: 480px;
}

.wl-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.wl-panel-title {
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--fg-1);
    flex: 1;
    letter-spacing: -0.005em;
}

.wl-panel-close {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

/* A head action sits beside the close button and matches it, so the two read as
   one row of controls rather than a link that wandered into the header. Its own
   class rather than reusing .wl-panel-close, because .wl-btn-shaped anchors take
   the user agent's link blue unless a colour is set. */
.wl-panel-head-action {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    color: var(--fg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-panel-head-action svg { width: 15px; height: 15px; }

.wl-panel-head-action:hover {
    background: rgba(10, 10, 9, 0.06);
    color: var(--fg-1);
}

[data-wl-theme="dark"] .wl-panel-head-action:hover { background: rgba(255, 255, 255, 0.08); }

.wl-panel-close:hover {
    background: rgba(10, 10, 9, 0.06);
    color: var(--fg-1);
}

.wl-panel-close svg {
    width: 14px;
    height: 14px;
}

.wl-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* ============================================================
   DASHBOARD SECTION CARDS
   ============================================================ */

/* Base card */
.wl-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    overflow: hidden;
}

.wl-card-pad {
    padding: 20px;
}

/* Section header (eyebrow + title) */
.wl-section-eyebrow {
    font-size: var(--text-lg);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 4px;
}

.wl-section-title {
    font-weight: 600;
    font-size: var(--text-2xl);
    color: var(--fg-1);
    letter-spacing: -0.005em;
}

.wl-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

/* "How did Tennstrøm calculate this?" ghost button */
.wl-how-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--fg-3);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--dur-hover) var(--ease-product);
    white-space: nowrap;
    flex-shrink: 0;
}

.wl-how-btn:hover {
    color: var(--wl-wave-deep);
}

.wl-how-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── KPI Strip ────────────────────────────────────────────── */
.wl-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.wl-kpi-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 16px;
}

.wl-kpi-label {
    font-size: var(--text-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    margin-bottom: 6px;
}

.wl-kpi-value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--fg-1);
    letter-spacing: -0.025em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.wl-kpi-unit {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--fg-3);
    margin-left: 2px;
}

.wl-kpi-change {
    margin-top: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.wl-kpi-change--positive { color: var(--wl-success-text); }
.wl-kpi-change--negative { color: var(--wl-danger-text); }
.wl-kpi-change--neutral  { color: var(--fg-3); }

/* ── Insight Summary (Wave AI narrative) ─────────────────── */
.wl-insight-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-left: 3px solid var(--wl-wave);
    border-radius: var(--r-md);
    padding: 20px;
}

.wl-insight-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.wl-wave-w {
    width: 20px;
    height: 20px;
    border-radius: var(--r-pill);
    background: var(--wl-skog);
    color: var(--wl-lin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex: none;
}

.wl-insight-agent-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-3);
}

.wl-insight-headline {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    line-height: 1.3;
}

.wl-insight-body {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--fg-2);
   /* max-width: 72ch;*/
}

.wl-insight-bullets {
    margin-top: 12px;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wl-insight-bullets li {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--fg-2);
}

.wl-insight-footer {
    margin-top: 10px;
    font-size: var(--text-sm);
    color: var(--fg-3);
    font-style: italic;
}

/* ── Priority Cards ──────────────────────────────────────── */
.wl-priority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.wl-priority-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product);
}

/* Priority type indicators */
.wl-priority-card--alert {
    border-color: rgba(232, 125, 111, 0.30);
}
.wl-priority-card--alert:hover {
    border-color: rgba(232, 125, 111, 0.55);
    background: rgba(232, 125, 111, 0.03);
}

.wl-priority-card--opportunity {
    border-color: var(--border-1);
}
.wl-priority-card--opportunity:hover {
    border-color: rgba(62, 167, 100, 0.30);
    background: var(--wl-wave-dim2);
}

.wl-priority-card--suggestion {
    border-color: var(--border-1);
}
.wl-priority-card--suggestion:hover {
    border-color: rgba(49, 188, 164, 0.30);
    background: rgba(49, 188, 164, 0.03);
}

.wl-priority-type-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.wl-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    flex: none;
}

.wl-priority-dot--alert {
    background: var(--wl-danger);
}
.wl-priority-dot--alert.ping {
    position: relative;
}
.wl-priority-dot--alert.ping::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--r-pill);
    background: var(--wl-danger);
    opacity: 0.4;
    animation: wlPing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes wlPing {
    75%, 100% { transform: scale(1.9); opacity: 0; }
}

.wl-priority-dot--opportunity {
    background: var(--wl-wave);
}
.wl-priority-dot--suggestion {
    background: var(--wl-success);
}

.wl-priority-type-label {
    font-size: var(--text-sm);
    font-weight: 500;
}
.wl-priority-type-label--alert      { color: var(--wl-danger-text); }
.wl-priority-type-label--opportunity { color: var(--wl-wave-deep); }
.wl-priority-type-label--suggestion  { color: var(--wl-success-text); }

/* A status mark is a 6px dot and caps text in the colour — never a filled
   capsule.

   Not only a stylistic rule. The tint these carried was a surface nobody
   verified: it sits over the panel and is always lighter than it, so
   danger-text on a 16% rust tint composites to 6.9:1 and drops out of AAA.
   With the fill gone the text sits on the panel it was measured against. */
.wl-priority-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-3xs);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wl-priority-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.wl-priority-badge--high   { color: var(--wl-danger-text); }
.wl-priority-badge--medium { color: var(--wl-warning-text); }
.wl-priority-badge--low    { color: var(--wl-success-text); }

.wl-priority-headline {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--fg-1);
    line-height: 1.35;
    margin-bottom: 6px;
}

.wl-priority-body {
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--fg-3);
    flex: 1;
    margin-bottom: 12px;
}

.wl-priority-action {
    width: 100%;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-hover) var(--ease-product);
}

.wl-priority-action--alert {
    background: rgba(232, 125, 111, 0.12);
    border: 1px solid rgba(232, 125, 111, 0.30);
    color: var(--wl-danger-text);
}
.wl-priority-action--alert:hover {
    background: rgba(232, 125, 111, 0.20);
}

.wl-priority-action--opportunity {
    background: var(--wl-wave-dim);
    border: 1px solid rgba(62, 167, 100, 0.30);
    color: var(--wl-wave-deep);
}
.wl-priority-action--opportunity:hover {
    background: rgba(62, 167, 100, 0.20);
}

.wl-priority-action--suggestion {
    background: rgba(49, 188, 164, 0.10);
    border: 1px solid rgba(49, 188, 164, 0.28);
    color: var(--wl-success-text);
}
.wl-priority-action--suggestion:hover {
    background: rgba(49, 188, 164, 0.18);
}

.wl-priority-how {
    margin-top: 8px;
    display: flex;
    justify-content: center;
}

/* ── Data Table ───────────────────────────────────────────── */
.wl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.wl-table th {
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 0 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-1);
}

.wl-table td {
    padding: 10px 12px;
    color: var(--fg-2);
    border-bottom: 1px solid var(--border-1);
    line-height: 1.4;
}

.wl-table tr:last-child td {
    border-bottom: none;
}

/* ── Sortable headings ────────────────────────────────────────────────────
   Added by wave-tables.js, and only to tables it actually wired up — a heading
   that looks clickable on a table with one row is a lie. */
.wl-table--sortable .wl-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--dur-hover) var(--ease-product);
}

.wl-table--sortable .wl-th-sort:hover { color: var(--fg-1); }
.wl-table--sortable .wl-th-sort:focus-visible { outline: 2px solid var(--wl-wave); outline-offset: 2px; }

/* The arrow holds its space whether or not it is showing, so headings do not
   shift sideways the first time a column is sorted. */
.wl-table--sortable .wl-th-sort::after {
    content: "↕";
    display: inline-block;
    width: 1em;
    margin-left: 4px;
    opacity: 0;
    font-size: 1.1em;
    line-height: 1;
    transition: opacity var(--dur-hover) var(--ease-product);
}

.wl-table--sortable .wl-th-sort:hover::after { opacity: .45; }
.wl-table--sortable .wl-th-sort[aria-sort]::after { opacity: 1; color: var(--wl-wave-deep); }
.wl-table--sortable .wl-th-sort[aria-sort="ascending"]::after  { content: "↑"; }
.wl-table--sortable .wl-th-sort[aria-sort="descending"]::after { content: "↓"; }

.wl-table tr:hover td {
    background: var(--bg-nested);
}

.wl-table-row--positive td { background: rgba(49, 188, 164, 0.04); }
.wl-table-row--negative td { background: rgba(232, 125, 111, 0.04); }
.wl-table-row--warning  td { background: rgba(245, 198, 116, 0.05); }

.wl-table caption {
    font-size: var(--text-xs);
    color: var(--fg-3);
    text-align: left;
    padding: 10px 12px 0;
    caption-side: bottom;
}

/* ── Chart section ────────────────────────────────────────── */
.wl-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.wl-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.wl-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--fg-3);
}

.wl-chart-legend-line {
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
}

.wl-chart-container {
    position: relative;
    width: 100%;
}

.wl-chart-caption {
    margin-top: 8px;
    font-size: var(--text-xs);
    color: var(--fg-3);
    font-style: italic;
}

/* Wave AI annotation bubble within chart */
.wl-chart-wave-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    background: var(--wl-wave-dim2);
    border-radius: var(--r-sm);
    padding: 10px 12px;
}

.wl-chart-wave-note-w {
    width: 16px;
    height: 16px;
    border-radius: var(--r-pill);
    background: var(--wl-skog);
    color: var(--wl-lin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xs);
    font-weight: 700;
    flex: none;
    margin-top: 1px;
}

.wl-chart-wave-note-text {
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--fg-2);
    flex: 1;
}

/* ============================================================
   REASONING PANEL CONTENT
   ============================================================ */
.wl-reasoning-section {
    margin-bottom: 20px;
}

.wl-reasoning-label {
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 8px;
}

.wl-reasoning-summary {
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--fg-2);
}

.wl-conf-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.wl-conf-track {
    flex: 1;
    height: 4px;
    background: var(--bg-nested);
    border-radius: 3px;
    overflow: hidden;
}

.wl-conf-fill {
    height: 100%;
    background: var(--wl-wave);
    border-radius: 3px;
    transition: width 0.6s var(--ease-product);
}

.wl-conf-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-2);
    white-space: nowrap;
}

/* Tool call entry */
.wl-tool-call {
    font-size: var(--text-xs);
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 10px 12px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.wl-tool-call-name {
    color: var(--wl-wave-deep);
    font-weight: 500;
}

.wl-tool-call-args {
    color: var(--fg-3);
}

.wl-tool-call-result {
    color: var(--wl-success-text);
    margin-top: 4px;
    padding-left: 12px;
    border-left: 2px solid rgba(49, 188, 164, 0.30);
}

.wl-tool-call-timing {
    color: var(--fg-3);
    font-size: var(--text-2xs);
}

/* Observation bullets */
.wl-obs-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl-obs-list li {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--fg-2);
    padding-left: 14px;
    position: relative;
    list-style:none;
}

.wl-obs-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--wl-wave);
}

/* Limitations */
.wl-limitations {
    background: rgba(245, 198, 116, 0.08);
    border: 1px solid rgba(245, 198, 116, 0.20);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--fg-2);
}

/* ============================================================
   GENERATING / LOADING STATE
   ============================================================ */
.wl-loading-banner {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-left: 3px solid var(--wl-wave);
    border-radius: var(--r-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}


/* ── The window filter ──────────────────────────────────────────────────
   Date, optional times, and the named windows as pills. Shared by the
   transaction timeline and the zone dashboard.

   Lived in one page's inline <style> until the second page reused the class
   names and got no styling at all — the markup and the behaviour were shared,
   the appearance was not, and the pills rendered as bare text. Anything two
   screens both use belongs here. */

.wl-tl-filter { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.wl-tl-filter .wl-form-field { min-width: 130px; }
.wl-tl-filter .wl-form-input { width: auto; }
.wl-tl-filter .wl-form-select { width: auto; min-width: 150px; }

.wl-tl-custom { display: flex; gap: 12px; }
.wl-tl-custom[hidden] { display: none; }

.wl-tl-presets { display: flex; gap: 6px; padding-bottom: 2px; }

.wl-tl-preset {
    font-size: var(--text-sm);
    padding: 6px 11px;
    border-radius: var(--r-pill);
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    color: var(--fg-2);
    font-family: var(--font-sans);
}

.wl-tl-preset:hover { color: var(--fg-1); border-color: var(--fg-accent); }

/* Which window is in force. Without it, hiding the time fields would leave
   nothing on screen saying what is being shown. */
.wl-tl-preset--on {
    background: var(--fg-accent);
    border-color: var(--fg-accent);
    color: var(--bg-card);
    font-weight: 600;
}

.wl-tl-summary {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
    padding-bottom: 8px;
}

/* Inline actions inside the summary line. */
.wl-tl-jump,
.wl-tl-outside {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.wl-tl-jump { color: var(--fg-accent); }
.wl-tl-outside { color: var(--wl-warning-text); }

/* ── Navigation progress ────────────────────────────────────────────────
   Feedback for the gap between clicking something and the next page painting.

   Two stages on purpose. The bar answers "did my click register?" and has to be
   quick; the spinner answers "is this broken?" and only earns its place once the
   wait is long enough for that doubt to form. Showing both at once would make
   every fast navigation flash a modal-looking overlay. */

.wl-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 2147483000;      /* above panels, modals and the camera viewer */
    background: var(--wl-wave, #3EA764);
    /* no glow — fosfor is edge and dot */
    opacity: 0;
    pointer-events: none;
    transition: width 220ms ease-out, opacity 160ms ease-out;
}

/* Creeps toward the right but never arrives: the page load is the only thing
   that can honestly finish it, and a bar that sits at 100% while nothing has
   happened is a lie the reader notices. */
.wl-nav-progress--on {
    opacity: 1;
    width: 88%;
    transition: width 9s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 120ms ease-out;
}

.wl-nav-progress--done {
    opacity: 0;
    width: 100%;
    transition: width 140ms ease-out, opacity 260ms ease-out 100ms;
}

.wl-nav-veil {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    place-items: center;
    background: rgba(10, 10, 9, 0.10);
    animation: wlNavVeilIn 180ms ease-out both;
}

.wl-nav-veil[hidden] { display: none; }

.wl-nav-veil-in {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 19px;
    border-radius: var(--r-lg, 14px);
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    /* flat — the scrim carries the veil */
    font-size: var(--text-md);
    color: var(--fg-1);
}

@keyframes wlNavVeilIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* The bar still creeps, because it is the thing that says work is happening;
   the veil simply appears rather than fading in. */
@media (prefers-reduced-motion: reduce) {
    .wl-nav-veil { animation: none; }
}

/* ── The mark, loading ──────────────────────────────────────────────────
   G6 «Noder» from the logo exploration: the same 21 points as the mark — an
   outer ring of ten, an inner ring of four, and the Ø-stroke of seven through
   the centre — at the delivered geometry (C=60, s=13, R=26, r=4.6).

   The weave sits at rest and the signal travels the stroke, bottom-left to
   top-right, which is the direction the stroke is drawn. Only the stroke
   moves: the weave is the constant, the signal is what changes. */
.wl-noder { width: 34px; height: 34px; flex: none; color: var(--fg-muted); }
.wl-noder circle { fill: currentColor; }

.wl-noder .wl-noder-strek circle {
    fill: var(--wl-wave);
    opacity: 0.28;
    animation: wlNoder 1.6s var(--ease-product) infinite;
}

/* Seven steps, one per point, so the signal reads as travelling rather than
   blinking. The delays run with the stroke, not against it. */
.wl-noder .wl-noder-strek circle:nth-child(1) { animation-delay: 0ms; }
.wl-noder .wl-noder-strek circle:nth-child(2) { animation-delay: 90ms; }
.wl-noder .wl-noder-strek circle:nth-child(3) { animation-delay: 180ms; }
.wl-noder .wl-noder-strek circle:nth-child(4) { animation-delay: 270ms; }
.wl-noder .wl-noder-strek circle:nth-child(5) { animation-delay: 360ms; }
.wl-noder .wl-noder-strek circle:nth-child(6) { animation-delay: 450ms; }
.wl-noder .wl-noder-strek circle:nth-child(7) { animation-delay: 540ms; }

@keyframes wlNoder {
    0%, 65%, 100% { opacity: 0.15; }
    22%           { opacity: 1; }
}

/* The system allows one pulsing element per screen, and while this is on
   screen it is that element. Reduced motion gets the stroke lit and still —
   the mark still reads, it simply does not travel. */
@media (prefers-reduced-motion: reduce) {
    .wl-noder .wl-noder-strek circle { animation: none; opacity: 1; }
}

.wl-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(62, 167, 100, 0.20);
    border-top-color: var(--wl-wave);
    border-radius: var(--r-pill);
    animation: wlSpin 0.9s linear infinite;
    flex: none;
}

@keyframes wlSpin {
    to { transform: rotate(360deg); }
}

.wl-loading-text {
    font-size: var(--text-md);
    color: var(--fg-2);
}

.wl-loading-text strong {
    color: var(--fg-1);
    font-weight: 600;
}

/* Skeleton placeholder */
.wl-skeleton {
    background: var(--bg-nested);
    background-size: 200% 100%;
    animation: wlSkeleton 1.4s ease infinite;
    border-radius: var(--r-sm);
}

@keyframes wlSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   EMPTY / ERROR STATES
   ============================================================ */
.wl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.wl-empty-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--fg-1);
    margin-bottom: 6px;
}

.wl-empty-body {
    font-size: var(--text-md);
    color: var(--fg-3);
    max-width: 40ch;
}

/* ============================================================
   META / FOOTER row
   ============================================================ */
.wl-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--text-xs);
    color: var(--fg-3);
    padding: 8px 0;
    border-top: 1px solid var(--border-1);
    flex-wrap: wrap;
}

.wl-meta-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    color: var(--fg-2);
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
.wave-shell ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.wave-shell ::-webkit-scrollbar-track {
    background: transparent;
}

.wave-shell ::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 4px;
}

.wave-shell ::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 10, 9, 0.22);
}

/* ============================================================
   UTILITY
   ============================================================ */
.wl-divider {
    height: 1px;
    background: var(--border-1);
    border: none;
    margin: 0;
}

.wl-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: var(--text-2xs);
    font-weight: 500;
}

.wl-tag--neutral {
    background: rgba(10, 10, 9, 0.06);
    color: var(--fg-2);
}

.wl-tag--wave {
    background: rgba(62, 167, 100, 0.14);
    color: var(--wl-wave-deep);
}

/* Focus ring */
.wave-shell *:focus-visible {
    outline: 2px solid var(--wl-wave);
    outline-offset: 2px;
}

/* Selection */
.wave-shell ::selection {
    background: var(--wl-wave-soft);
    color: var(--wl-ink);
}

/* ============================================================
   STORE / CHAIN PICKER DROPDOWN
   ============================================================ */
.wl-picker-wrap {
    position: relative;
}

.wl-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--elev-modal);
    z-index: 200;
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: 360px;
}

.wl-picker-dropdown.open {
    display: flex;
}

.wl-picker-search {
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.wl-picker-search input {
    width: 100%;
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--fg-1);
    outline: none;
    transition: border-color var(--dur-hover) var(--ease-product);
}

.wl-picker-search input:focus {
    border-color: var(--wl-wave);
}

.wl-picker-search input::placeholder {
    color: var(--fg-3);
}

.wl-picker-list {
    overflow-y: auto;
    flex: 1;
}

.wl-picker-chain-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 4px;
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-product);
}

.wl-picker-chain-label:hover {
    background: rgba(10, 10, 9, 0.04);
    color: var(--fg-1);
}

.wl-picker-chain-label--active {
    color: var(--wl-wave-deep);
}

.wl-picker-store-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 24px;
    font-size: var(--text-md);
    color: var(--fg-2);
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-picker-store-item:hover {
    background: rgba(10, 10, 9, 0.04);
    color: var(--fg-1);
}

.wl-picker-store-item--active {
    color: var(--fg-1);
    font-weight: 500;
}

.wl-picker-check {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--wl-wave-deep);
    flex: none;
}

/* Loading state inside picker */
.wl-picker-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    font-size: var(--text-sm);
    color: var(--fg-3);
}

/* ============================================================
   ASK WAVE — FLOATING FAB + CHIP STRIP
   ============================================================ */

/* The fixed bottom-right launcher area */
.wl-ask-fab-area {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

    /* The closed chips keep their space — they are hidden with opacity so they
       can slide — which makes this box about 200px tall at all times, sitting
       over whatever the page keeps in that corner. Transparent to the pointer,
       so only the fab and the chips themselves take clicks. */
    pointer-events: none;
}

/* Pre-defined question chips (shown when FAB is activated) */
.wl-ask-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 220ms var(--ease-product),
                transform 220ms var(--ease-product);
}

.wl-ask-chips.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.wl-ask-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-1);
    cursor: pointer;
    /* flat — no elevation on chips */
    transition: border-color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
    white-space: nowrap;
}

.wl-ask-chip:hover {
    border-color: var(--wl-wave);
    background: rgba(62, 167, 100, 0.08);
    color: var(--wl-wave-deep);
}

/* The main Ask Wave FAB button */
.wl-ask-fab {
    /* Its parent is transparent to the pointer; this is one of the two things
       in there that is meant to be clicked. */
    pointer-events: auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--wl-skog);
    border: none;
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--wl-lin);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(30, 61, 77, 0.22), 0 2px 4px rgba(10, 10, 9, 0.06);
    transition: background var(--dur-hover) var(--ease-product), box-shadow var(--dur-hover) var(--ease-product);
    letter-spacing: -0.005em;
}

    .wl-ask-fab:hover {
        background: var(--wl-wave-dark);
        /* no lift on hover — the colour change carries it */
    }

.wl-ask-fab svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.wl-ask-fab .wl-ask-fab-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--wl-wave-darkest);
    flex: none;
}

/* ============================================================
   ASK WAVE CHAT PANEL
   ============================================================ */

/* Panel sits above the FAB area (z-index 60) so bubbles are never obscured */
#wl-ask-panel {
    z-index: 70;
}

.wl-ask-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wl-bubble {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 88%;
}

.wl-bubble--wave {
    align-self: flex-start;
}

.wl-bubble--user {
    align-self: flex-end;
}

.wl-bubble-label {
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--fg-3);
    padding: 0 4px;
}

.wl-bubble-body {
    padding: 10px 14px;
    border-radius: var(--r-lg);
    font-size: var(--text-md);
    line-height: 1.55;
}

.wl-bubble--wave .wl-bubble-body {
    background: rgba(62, 167, 100, 0.10);
    border: 1px solid rgba(62, 167, 100, 0.22);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
    color: var(--fg-1);
}

.wl-bubble--user .wl-bubble-body {
    background: rgba(10, 10, 9, 0.05);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
    color: var(--fg-1);
}

/* Typing / thinking indicator */
.wl-bubble-thinking {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(62, 167, 100, 0.08);
    border: 1px solid rgba(62, 167, 100, 0.18);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
}

.wl-thinking-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--wl-wave);
    animation: wlThinkingBounce 1.2s ease-in-out infinite;
}

.wl-thinking-dot:nth-child(2) { animation-delay: 0.16s; }
.wl-thinking-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes wlThinkingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40%            { transform: translateY(-5px); opacity: 1; }
}

/* Chat input area */
.wl-ask-input-area {
    flex-shrink: 0;
    padding: 14px 20px 20px;
    border-top: 1px solid var(--border-1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wl-ask-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.wl-ask-textarea {
    flex: 1;
    resize: none;
    background: var(--bg-nested);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    padding: 9px 12px;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--fg-1);
    outline: none;
    min-height: 38px;
    max-height: 120px;
    overflow-y: auto;
    transition: border-color var(--dur-hover) var(--ease-product);
}

.wl-ask-textarea:focus {
    border-color: var(--wl-wave);
}

.wl-ask-textarea::placeholder {
    color: var(--fg-3);
}

.wl-ask-send {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--wl-ink);
    border: none;
    color: var(--wl-pampas-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    transition: background var(--dur-hover) var(--ease-product);
}

.wl-ask-send:hover {
    background: #222221;
}

.wl-ask-send:disabled {
    background: rgba(10, 10, 9, 0.15);
    cursor: not-allowed;
}

.wl-ask-send svg {
    width: 15px;
    height: 15px;
}

.wl-ask-hint {
    font-size: var(--text-2xs);
    color: var(--fg-3);
    text-align: center;
}

/* Empty chat state */
.wl-ask-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 12px;
    flex: 1;
}

.wl-ask-empty-w {
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--wl-skog);
    color: var(--wl-lin);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The mark on a skog disc. The weave inherits the lin the disc already sets,
   so it reads as the logo rather than as a light-on-dark inversion of it, and
   the stroke keeps its fosfor. Inset a little: the mark is drawn to the edges
   of its own viewBox and would otherwise touch the rim. */
.wl-ask-empty-mark {
    width: 26px;
    height: 26px;
    display: block;
}

.wl-ask-empty-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--fg-1);
    text-align: center;
}

.wl-ask-empty-body {
    font-size: var(--text-sm);
    color: var(--fg-3);
    text-align: center;
    max-width: 28ch;
}

/* ============================================================
   LANGUAGE SELECTOR (topbar)
   ============================================================ */

.wl-lang-wrap {
    position: relative;
}

/* The trigger button */
.wl-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product);
    white-space: nowrap;
    line-height: 1;
}

.wl-lang-btn:hover {
    border-color: var(--border-3);
    color: var(--fg-1);
    background: rgba(10, 10, 9, 0.04);
}

.wl-lang-flag {
    /* flag-icon renders at 4:3 ratio relative to font-size */
    font-size: var(--text-xl);
    line-height: 1;
    vertical-align: middle;
    border-radius: 2px;
    overflow: hidden;
    flex: none;
}

.wl-lang-code {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.wl-lang-chev {
    width: 12px;
    height: 12px;
    flex: none;
    color: var(--fg-3);
    transition: transform 200ms var(--ease-product);
}

/* Rotate chevron when open */
.wl-lang-dropdown.open ~ .wl-lang-btn .wl-lang-chev,
.wl-lang-btn[aria-expanded="true"] .wl-lang-chev {
    transform: rotate(180deg);
}

/* Dropdown panel */
.wl-lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--elev-modal);
    z-index: 200;
    overflow: hidden;
    display: none;
    flex-direction: column;
    padding: 4px;
}

.wl-lang-dropdown.open {
    display: flex;
}

/* Each language option */
.wl-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--fg-2);
    cursor: pointer;
    text-align: left;
    transition: background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-lang-option:hover {
    background: rgba(10, 10, 9, 0.05);
    color: var(--fg-1);
}

.wl-lang-option--active {
    color: var(--fg-1);
    font-weight: 500;
}

.wl-lang-option-flag {
    font-size: var(--text-2xl);
    line-height: 1;
    vertical-align: middle;
    border-radius: 2px;
    overflow: hidden;
    flex: none;
}

.wl-lang-option-label {
    flex: 1;
}

.wl-lang-option-check {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--wl-wave-deep);
}

/* ============================================================
   SUPPLEMENTARY — picker button resets + FAB open state
   ============================================================ */

/* When .wl-picker-chain-label and .wl-picker-store-item are
   rendered as <button> elements, reset browser defaults        */
button.wl-picker-chain-label,
button.wl-picker-store-item {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    text-align: left;
}

button.wl-picker-chain-label {
    padding: 8px 12px 6px;
}

/* Active chain highlight */
.wl-picker-chain-label--active,
button.wl-picker-chain-label--active {
    color: var(--wl-wave-deep);
    background: rgba(62, 167, 100, 0.07);
}

/* Active store highlight */
.wl-picker-store-item--active,
button.wl-picker-store-item--active {
    color: var(--wl-wave-deep);
    background: rgba(62, 167, 100, 0.07);
    font-weight: 500;
}

/* FAB — open state (chips expanded) */
.wl-ask-fab--open {
    background: #253f4e;
    box-shadow: 0 0 0 3px rgba(62, 167, 100, 0.18),
                0 6px 20px rgba(30, 61, 77, 0.28);
}

/* Code snippets inside chat bubbles */
.wl-bubble-body code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--text-xs);
    background: rgba(10, 10, 9, 0.06);
    border: 1px solid var(--border-1);
    border-radius: 3px;
    padding: 1px 4px;
}

/* ============================================================
   PANEL HEADER ICON
   ============================================================ */
.wl-panel-head-icon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--fg-3);
}

/* ============================================================
   TASKS PANEL
   ============================================================ */

/* Tab bar */
.wl-tasks-tabs {
    display: flex;
    gap: 2px;
    padding: 12px 16px 0;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.wl-tasks-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-3);
    cursor: pointer;
    transition: color var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product);
    white-space: nowrap;
}

.wl-tasks-tab:hover {
    color: var(--fg-1);
}

.wl-tasks-tab--active {
    color: var(--fg-1);
    border-bottom-color: var(--wl-wave-deep);
}

.wl-tasks-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--fg-3);
}

.wl-tasks-tab--active .wl-tasks-tab-badge {
    background: rgba(62, 167, 100, 0.12);
    border-color: rgba(62, 167, 100, 0.25);
    color: var(--wl-wave-deep);
}

.wl-tasks-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    margin-bottom: 8px;
    align-self: center;
    padding: 5px 11px;
    border-radius: var(--r-md);
    background: var(--wl-skog);
    border: none;
    color: var(--wl-lin);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--dur-hover) var(--ease-product);
}
.wl-tasks-new-btn:hover { opacity: 0.85; }

/* Panel body */
.wl-tasks-body {
    display: flex;
    flex-direction: column;
    padding: 12px 0 0;
    overflow: hidden;
}

/* Loading state */
.wl-tasks-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    font-size: var(--text-sm);
    color: var(--fg-3);
}

.wl-tasks-loading .wl-loading-spinner {
    width: 16px;
    height: 16px;
}

/* Scrollable task list */
#wl-tasks-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Empty state */
.wl-tasks-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--fg-3);
}

.wl-tasks-empty-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 10px;
    color: var(--fg-3);
    opacity: 0.5;
}

/* Task card */
.wl-task-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur-hover) var(--ease-product);
}

.wl-task-card:hover {
    border-color: var(--border-2);
}

.wl-task-card--overdue {
    border-left: 3px solid var(--c-danger, #e05);
}

.wl-task-card--today {
    border-left: 3px solid var(--wl-wave-deep);
}

.wl-task-card--done {
    opacity: 0.65;
}

/* Card summary row (always visible) */
.wl-task-summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 10px;
    cursor: pointer;
}

.wl-task-check-btn {
    flex: none;
    margin-top: 1px;
    width: 18px;
    height: 18px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border-3);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product);
    flex-shrink: 0;
}

.wl-task-check-btn:hover {
    border-color: var(--wl-wave);
    background: rgba(62, 167, 100, 0.08);
}

.wl-task-check-btn--done {
    background: var(--wl-skog);
    border-color: var(--wl-wave);
    color: var(--wl-lin);
}

.wl-task-check-btn svg {
    width: 11px;
    height: 11px;
    display: none;
}

.wl-task-check-btn--done svg {
    display: block;
}

.wl-task-main {
    flex: 1;
    min-width: 0;
}

.wl-task-title {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--fg-1);
    line-height: 1.35;
    margin: 0 0 4px;
}

.wl-task-card--done .wl-task-title {
    text-decoration: line-through;
    color: var(--fg-3);
}

.wl-task-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.wl-task-due {
    font-size: var(--text-xs);
    color: var(--fg-3);
}

.wl-task-due--overdue {
    color: var(--c-danger, #e05);
    font-weight: 500;
}

.wl-task-due--today {
    color: var(--wl-wave-deep);
    font-weight: 500;
}

/* Priority badge */
.wl-task-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wl-task-priority--1 { background: rgba(100,100,100,0.1);  color: var(--fg-3); }        /* Low    */
.wl-task-priority--2 { background: rgba(230,170,30,0.12);  color: #a07000; }             /* Medium */
.wl-task-priority--3 { background: rgba(230,110,30,0.12);  color: #b04500; }             /* High   */
.wl-task-priority--4 { background: rgba(220,40,40,0.12);   color: #c00; }                /* Urgent */

.wl-task-category {
    font-size: var(--text-2xs);
    color: var(--fg-3);
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
}

.wl-task-agent {
    font-size: var(--text-2xs);
    color: var(--wl-wave-deep);
    display: flex;
    align-items: center;
    gap: 3px;
}

.wl-task-expand-btn {
    flex: none;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
    border-radius: var(--r-sm);
    transition: background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-task-expand-btn:hover {
    background: rgba(10, 10, 9, 0.05);
    color: var(--fg-2);
}

.wl-task-expand-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 200ms var(--ease-product);
}

.wl-task-card--expanded .wl-task-expand-btn svg {
    transform: rotate(180deg);
}

/* Expanded detail section */
.wl-task-detail {
    display: none;
    padding: 0 12px 12px 40px;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--border-1);
    padding-top: 10px;
}

.wl-task-card--expanded .wl-task-detail {
    display: flex;
}

.wl-task-desc {
    font-size: var(--text-sm);
    color: var(--fg-2);
    line-height: 1.55;
    margin: 0 0 4px;
}

.wl-task-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wl-task-field-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.wl-task-field-input {
    background: var(--bg-nested);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 6px 9px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--fg-1);
    outline: none;
    width: 100%;
    transition: border-color var(--dur-hover) var(--ease-product);
}

.wl-task-field-input:focus {
    border-color: var(--wl-wave);
}

.wl-task-priority-row {
    display: flex;
    gap: 6px;
}

.wl-task-priority-opt {
    flex: 1;
    padding: 5px 0;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border-1);
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product);
}

.wl-task-priority-opt[data-priority="1"] { color: var(--fg-3); }
.wl-task-priority-opt[data-priority="2"] { color: #a07000; }
.wl-task-priority-opt[data-priority="3"] { color: #b04500; }
.wl-task-priority-opt[data-priority="4"] { color: #c00; }

.wl-task-priority-opt:hover,
.wl-task-priority-opt--selected {
    border-color: currentColor;
    background: rgba(currentColor, 0.06);
}

.wl-task-priority-opt--selected[data-priority="1"] { background: rgba(100,100,100,0.08); border-color: #888; }
.wl-task-priority-opt--selected[data-priority="2"] { background: rgba(230,170,30,0.10);  border-color: #a07000; }
.wl-task-priority-opt--selected[data-priority="3"] { background: rgba(230,110,30,0.10);  border-color: #b04500; }
.wl-task-priority-opt--selected[data-priority="4"] { background: rgba(220,40,40,0.10);   border-color: #c00; }

.wl-task-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.wl-task-save-btn {
    padding: 6px 14px;
    border-radius: var(--r-md);
    background: var(--wl-ink);
    border: none;
    color: var(--wl-pampas-100);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product);
}

.wl-task-save-btn:hover { background: #222; }
.wl-task-save-btn:disabled { background: rgba(10,10,9,0.15); cursor: not-allowed; }

.wl-task-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--r-md);
    background: transparent;
    border: 1.5px solid var(--wl-wave);
    color: var(--wl-wave);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}
.wl-task-complete-btn:hover {
    background: var(--wl-skog);
    color: var(--wl-lin);
}
.wl-task-complete-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ============================================================
   REPORTS PANEL
   ============================================================ */

.wl-reports-body {
    overflow-y: auto;
    padding: 16px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wl-reports-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wl-reports-section-head {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-1);
}

.wl-report-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur-hover) var(--ease-product);
}

.wl-report-card:hover {
    border-color: var(--border-2);
}

/* Link-style card for StructuredReport outputs (opens full-page renderer) */
.wl-report-card--link {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    cursor: pointer;
}
.wl-report-card--link:hover {
    background: var(--bg-nested);
    text-decoration: none;
}
.wl-report-card--link .wl-report-title-row {
    align-items: center;
}
.wl-report-card--link .wl-report-title {
    color: var(--fg-1);
}
.wl-report-open-icon {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--fg-3);
    transition: transform var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}
.wl-report-card--pending {
    opacity: 0.6;
    cursor: default;
}
.wl-report-card--pending:hover {
    background: var(--bg-card);
    border-color: var(--border-1);
}

.wl-report-card--link:hover .wl-report-open-icon {
    color: var(--wl-wave-deep);
    transform: translateX(2px);
}

.wl-report-summary {
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wl-report-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.wl-report-title {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--fg-1);
    line-height: 1.35;
    flex: 1;
}

.wl-report-expand-btn {
    flex: none;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
    border-radius: var(--r-sm);
    transition: background var(--dur-hover) var(--ease-product);
}

.wl-report-expand-btn:hover {
    background: rgba(10, 10, 9, 0.05);
}

.wl-report-expand-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 200ms var(--ease-product);
}

.wl-report-card--expanded .wl-report-expand-btn svg {
    transform: rotate(180deg);
}

.wl-report-desc {
    font-size: var(--text-sm);
    color: var(--fg-3);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-report-card--expanded .wl-report-desc {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.wl-report-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.wl-report-agent {
    font-size: var(--text-2xs);
    color: var(--wl-wave-deep);
    font-weight: 500;
}

.wl-report-category {
    font-size: var(--text-2xs);
    color: var(--fg-3);
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
}

.wl-report-date {
    font-size: var(--text-2xs);
    color: var(--fg-3);
    margin-left: auto;
}

.wl-report-content {
    display: none;
    padding: 0 14px 14px;
    font-size: var(--text-sm);
    color: var(--fg-2);
    line-height: 1.65;
    border-top: 1px solid var(--border-1);
    padding-top: 12px;
    white-space: pre-wrap;
}

.wl-report-card--expanded .wl-report-content {
    display: block;
}

.wl-reports-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--fg-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PAGES  — shared styles for WaveAgentTemplates list + edit
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page scaffold ───────────────────────────────────────────────────────── */

.wl-admin-page {
    max-width: 1060px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.wl-admin-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.wl-admin-page-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

.wl-admin-page-sub {
    font-size: var(--text-md);
    color: var(--fg-3);
    margin: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.wl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

/* An <a class="wl-btn"> otherwise keeps the UA's link colour: .wl-btn sets no
   colour of its own, and a <button> only looks right because it inherits. */
a.wl-btn { color: var(--fg-1); }

.wl-btn--primary {
    background: var(--wl-skog);
    color: var(--wl-lin);
    border-color: transparent;
}

.wl-btn--primary:hover {
    background: var(--wl-wave-deep);
}

.wl-btn--ghost {
    background: transparent;
    color: var(--fg-2);
    border-color: var(--border-2);
}

.wl-btn--ghost:hover {
    color: var(--fg-1);
    background: rgba(10,10,9,.04);
}

/* ── Alert banners ───────────────────────────────────────────────────────── */

.wl-admin-alert {
    padding: 11px 16px;
    border-radius: var(--r-lg);
    font-size: var(--text-md);
    margin-bottom: 16px;
}

.wl-admin-alert--ok {
    background: rgba(62, 167, 100,.10);
    border: 1px solid rgba(62, 167, 100,.30);
    color: var(--wl-wave-deep);
}

.wl-admin-alert--err {
    background: rgba(220,40,40,.08);
    border: 1px solid rgba(220,40,40,.20);
    color: #c00;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.wl-admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-xl);
    color: var(--fg-3);
    font-size: var(--text-md);
    text-align: center;
}

.wl-admin-empty svg {
    width: 40px;
    height: 40px;
    opacity: .35;
}

.wl-admin-empty a {
    color: var(--wl-wave-deep);
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.wl-admin-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.wl-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-md);
}

.wl-admin-table thead {
    background: var(--bg-nested);
}

.wl-admin-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fg-3);
    border-bottom: 1px solid var(--border-1);
}

.wl-admin-table td {
    padding: 11px 14px;
    color: var(--fg-2);
    border-bottom: 1px solid var(--border-1);
    vertical-align: middle;
}

.wl-admin-table tbody tr:last-child td {
    border-bottom: none;
}

.wl-admin-table tbody tr:hover td {
    background: var(--bg-nested);
}

/* ── Cell helpers ────────────────────────────────────────────────────────── */

.wl-admin-link {
    color: var(--fg-1);
    font-weight: 500;
    text-decoration: none;
}

.wl-admin-link:hover {
    color: var(--wl-wave-deep);
    text-decoration: underline;
}

.wl-admin-cell-sub {
    font-size: var(--text-xs);
    color: var(--fg-3);
    margin-top: 2px;
}

.wl-admin-cell-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--text-sm);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.wl-admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    background: rgba(10,10,9,.06);
    color: var(--fg-2);
}

.wl-admin-badge--type {
    background: rgba(62, 167, 100,.12);
    color: var(--wl-wave-deep);
}

/* ── Row action buttons ──────────────────────────────────────────────────── */

.wl-admin-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--fg-3);
    text-decoration: none;
    transition: background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-admin-row-action svg {
    width: 15px;
    height: 15px;
}

.wl-admin-row-action:hover {
    background: var(--bg-nested);
    color: var(--fg-1);
}

.wl-admin-row-action--danger:hover {
    background: rgba(220,40,40,.08);
    color: #c00;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DYNAMIC DASHBOARD NAV — sidebar agent items
   ═══════════════════════════════════════════════════════════════════════════ */

.wl-sb-dash-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: var(--text-xs);
    color: var(--fg-3);
}

/* The generated <a> tags share .wl-sb-link styling; we just add extras */
.wl-sb-dash-item {
    justify-content: flex-start;
    gap: 8px;
}

.wl-sb-dash-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Small pill showing output count — doubles as a passive history indicator */
.wl-sb-dash-count {
    flex: none;
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--wl-wave-deep);
    background: var(--wl-wave-dim);
    padding: 1px 6px;
    border-radius: var(--r-pill);
    line-height: 1.6;
}

[data-wl-theme="dark"] .wl-sb-dash-count {
    color: var(--wl-wave);
    background: rgba(62, 167, 100,.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD PAGE — history button + historical badge
   ═══════════════════════════════════════════════════════════════════════════ */

.wl-dash-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 7px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-3);
    transition: color var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product);
}

.wl-dash-history-btn:hover {
    color: var(--wl-wave-deep);
    border-color: var(--wl-wave);
    background: var(--wl-wave-dim);
}

.wl-dash-history-btn svg {
    width: 13px;
    height: 13px;
    flex: none;
}

[data-wl-theme="dark"] .wl-dash-history-btn:hover {
    color: var(--wl-wave);
}

.wl-dash-historical-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(245,198,116,.18);
    border: 1px solid rgba(245,198,116,.35);
    color: #8B5E1B;
}

[data-wl-theme="dark"] .wl-dash-historical-badge {
    background: rgba(245,198,116,.12);
    color: #E8B84B;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD HISTORY PANEL — list of past outputs
   ═══════════════════════════════════════════════════════════════════════════ */

.wl-dash-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.wl-dash-hist-item {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    text-decoration: none;
    transition: border-color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product);
}

.wl-dash-hist-item:hover {
    border-color: var(--wl-wave);
    background: var(--wl-wave-dim2);
}

.wl-dash-hist-item--latest {
    border-color: rgba(62, 167, 100,.30);
    background: rgba(62, 167, 100,.05);
}

.wl-dash-hist-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.wl-dash-hist-date {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--fg-1);
}

.wl-dash-hist-latest-badge {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wl-wave-deep);
    background: var(--wl-wave-dim);
    padding: 2px 7px;
    border-radius: var(--r-pill);
}

[data-wl-theme="dark"] .wl-dash-hist-latest-badge {
    color: var(--wl-wave);
}

.wl-dash-hist-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wl-dash-hist-status {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 1px 7px;
    border-radius: var(--r-pill);
}

.wl-dash-hist-status--active     { background: rgba(49,188,164,.12); color: #1a7a68; }
.wl-dash-hist-status--generating { background: rgba(62, 167, 100,.10); color: var(--wl-wave-deep); }
.wl-dash-hist-status--expired    { background: rgba(245,198,116,.12); color: #8B5E1B; }
.wl-dash-hist-status--failed     { background: rgba(232,125,111,.12); color: #a04035; }

[data-wl-theme="dark"] .wl-dash-hist-status--active     { color: #3EA764; background: rgba(62, 167, 100,.12); }
[data-wl-theme="dark"] .wl-dash-hist-status--generating { color: var(--wl-wave); }
[data-wl-theme="dark"] .wl-dash-hist-status--expired    { color: #E8B84B; background: rgba(245,198,116,.12); }
[data-wl-theme="dark"] .wl-dash-hist-status--failed     { color: #E87D6F; background: rgba(232,125,111,.12); }

.wl-dash-hist-model,
.wl-dash-hist-sections {
    font-size: var(--text-xs);
    color: var(--fg-3);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.wl-dash-hist-until {
    font-size: var(--text-xs);
    color: var(--fg-3);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOLLOW-UP QUESTION STRIP  — in-dashboard contextual Ask Wave chips
   ═══════════════════════════════════════════════════════════════════════════ */

.wl-followup-strip {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: var(--wl-wave-dim2);
    border: 1px solid var(--wl-wave-ring);
    border-radius: var(--r-xl);
    margin-top: 4px;
}

.wl-followup-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wl-wave-deep);
    white-space: nowrap;
    padding-top: 2px;
    flex-shrink: 0;
}

[data-wl-theme="dark"] .wl-followup-label {
    color: var(--wl-wave);
}

.wl-followup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wl-followup-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-1);
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
    white-space: nowrap;
}

.wl-followup-chip:hover {
    border-color: var(--wl-wave);
    background: var(--wl-wave-dim);
    color: var(--wl-wave-deep);
}

[data-wl-theme="dark"] .wl-followup-chip:hover {
    color: var(--wl-wave);
}

/* ============================================================
   STORE DATA INPUT PANEL  (.wl-kpi-*)
   ============================================================ */

/* Panel header badge (overdue count) */
.wl-panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: rgba(232, 125, 111, 0.15);
    color: var(--wl-danger-text);
    font-size: var(--text-2xs);
    font-weight: 600;
    margin-left: 2px;
}

/* Status section header label */
.wl-kpi-status-section {
    padding: var(--sp-4) var(--sp-5) 0;
    border-bottom: 1px solid var(--border-1);
    padding-bottom: var(--sp-4);
}

.wl-kpi-status-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--fg-3);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}

/* Status row: icon + name + type badge + status */
.wl-kpi-status-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-1);
}

.wl-kpi-status-row:last-child { border-bottom: none; }

.wl-kpi-status-icon {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Status icons */
.wl-kpi-icon-ok      { color: var(--wl-success-text); }
.wl-kpi-icon-due     { color: var(--wl-warning-text); }
.wl-kpi-icon-overdue { color: var(--wl-danger-text); }

.wl-kpi-status-name {
    flex: 1;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--fg-1);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-kpi-type-badge {
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--r-pill);
    background: var(--bg-nested);
    color: var(--fg-3);
    border: 1px solid var(--border-2);
    flex: none;
}

.wl-kpi-status-val {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-3);
    flex: none;
    white-space: nowrap;
}

.wl-kpi-status-val.overdue { color: var(--wl-danger-text); font-weight: 600; }
.wl-kpi-status-val.due     { color: #c49a00;           font-weight: 600; }

/* ── What has been filled in ──────────────────────────────────────────────
   A per-row button into the history, and the view it opens. The view replaces
   the status list in the same panel rather than stacking a second one. */

.wl-kpi-history-view { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* These three swap with el.hidden, and .wl-kpi-entry-section sets display:flex —
   an author display beats the user agent's [hidden]{display:none}, so without
   this the "hidden" half stays on screen underneath the other. Scoped to the
   three rather than declared globally: a blanket [hidden] rule in a stylesheet
   this large would change pages nobody is looking at. */
.wl-kpi-status-section[hidden],
.wl-kpi-entry-section[hidden],
.wl-kpi-history-view[hidden] { display: none !important; }

.wl-kpi-hist-btn {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--r-sm, 6px);
    background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    /* Quiet until wanted: the row is about status, and a bright control beside
       every one of them would compete with the thing that is actually urgent. */
    opacity: .55;
    transition: opacity var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-kpi-hist-btn svg { width: 14px; height: 14px; }

.wl-kpi-status-row:hover .wl-kpi-hist-btn { opacity: 1; }
.wl-kpi-hist-btn:hover  { color: var(--fg-1); background: var(--bg-nested); }
.wl-kpi-hist-btn:focus-visible { opacity: 1; outline: 2px solid var(--wl-wave); outline-offset: 1px; }

.wl-kpi-hist-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--sp-3);
    padding: 5px 10px;
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--fg-3);
    cursor: pointer;
}

.wl-kpi-hist-back svg { width: 12px; height: 12px; }
.wl-kpi-hist-back:hover { color: var(--fg-1); }

.wl-kpi-hist-entry {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-1);
}

.wl-kpi-hist-entry:last-child { border-bottom: none; }

.wl-kpi-hist-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.wl-kpi-hist-period { font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); }
.wl-kpi-hist-meta   { font-size: var(--text-2xs, var(--text-xs)); color: var(--fg-3); text-align: right; }

.wl-kpi-hist-val {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 3px 0;
    font-size: var(--text-xs);
    color: var(--fg-2);
}

/* Tabular so a column of numbers reads as a column. */
.wl-kpi-hist-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
    white-space: nowrap;
}

.wl-kpi-hist-empty { font-size: var(--text-xs); color: var(--fg-3); padding: var(--sp-3) 0; }
.wl-kpi-status-val.ok      { color: var(--fg-3); }

/* Form entry section */
.wl-kpi-entry-section {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    flex: 1;
    overflow-y: auto;
}

/* Select dropdown */
.wl-kpi-select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-nested);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--fg-1);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    transition: border-color var(--dur-hover) var(--ease-product);
}

.wl-kpi-select:focus {
    outline: none;
    border-color: var(--wl-wave-deep);
}

/* Form field group */
.wl-kpi-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.wl-kpi-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wl-kpi-field-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.wl-kpi-field-required {
    color: var(--wl-danger-text);
    font-size: var(--text-xs);
}

.wl-kpi-field-unit {
    font-size: var(--text-xs);
    color: var(--fg-3);
    font-weight: 400;
    margin-left: 4px;
}

.wl-kpi-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    background: var(--bg-card);
    transition: border-color var(--dur-hover) var(--ease-product);
    overflow: hidden;
}

.wl-kpi-input-wrap:focus-within {
    border-color: var(--wl-wave-deep);
}

.wl-kpi-field-input {
    flex: 1;
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: var(--fg-1);
    font-feature-settings: "tnum";
    outline: none;
    -moz-appearance: textfield;
}

.wl-kpi-field-input::-webkit-outer-spin-button,
.wl-kpi-field-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.wl-kpi-unit-suffix {
    padding: 0 var(--sp-3) 0 0;
    font-size: var(--text-sm);
    color: var(--fg-3);
    flex: none;
}

.wl-kpi-help-text {
    font-size: var(--text-xs);
    color: var(--fg-3);
    line-height: 1.4;
}

/* Date context strip (shown for daily/weekly forms) */
.wl-kpi-date-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    color: var(--fg-3);
}

.wl-kpi-date-strip strong {
    color: var(--fg-1);
    font-weight: 500;
}

/* Month/year selector strip */
.wl-kpi-period-strip {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.wl-kpi-period-select {
    padding: 4px 8px;
    background: var(--bg-nested);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--fg-1);
    cursor: pointer;
    outline: none;
}

/* Submit button */
.wl-kpi-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    background: var(--wl-wave-deep);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product),
                transform var(--dur-hover) var(--ease-product);
    width: 100%;
    justify-content: center;
    letter-spacing: -0.01em;
}

.wl-kpi-submit-btn:hover { background: var(--wl-wave-darkest); }
.wl-kpi-submit-btn:active { transform: translateY(1px); }

.wl-kpi-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wl-kpi-submit-hint {
    font-size: var(--text-xs);
    color: var(--fg-3);
    text-align: center;
    margin-top: var(--sp-2);
}

/* Success toast */
.wl-kpi-toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(49, 188, 164, 0.10);
    border: 1px solid rgba(49, 188, 164, 0.30);
    border-radius: var(--r-md);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--wl-success-text);
}

.wl-kpi-toast svg { flex: none; }

/* Empty state */
.wl-kpi-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--fg-3);
}

.wl-kpi-empty-title {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--fg-2);
}

.wl-kpi-empty-sub {
    font-size: var(--text-sm);
    color: var(--fg-3);
    line-height: 1.5;
}

[data-wl-theme="dark"] .wl-kpi-select {
    background-color: var(--bg-nested);
    color: var(--fg-1);
}

/* ============================================================
   WAVE FEED PANEL  (.wl-feed-*)
   ============================================================ */

/* Tab bar */
.wl-feed-tabs {
    display: flex;
    gap: 2px;
    padding: 0 var(--sp-4) 0;
    border-bottom: 1px solid var(--border-1);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.wl-feed-tabs::-webkit-scrollbar { display: none; }

.wl-feed-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 10px 9px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-3);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-hover) var(--ease-product);
    font-family: var(--font-sans);
    margin-bottom: -1px;
}
.wl-feed-tab:hover { color: var(--fg-1); }
.wl-feed-tab--active {
    color: var(--fg-1);
    border-bottom-color: var(--wl-wave-deep);
    font-weight: 600;
}

.wl-feed-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: rgba(232, 125, 111, 0.18);
    color: var(--wl-danger-text);
    font-size: var(--text-3xs);
    font-weight: 700;
}
.wl-feed-tab-badge:empty { display: none; }

.wl-feed-body { padding: 0; }

/* ── Feed section header ─────────────────────────────────── */
.wl-feed-section-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--fg-3);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
    border-bottom: 1px solid var(--border-1);
}

/* ── Alert / Tip card ────────────────────────────────────── */
.wl-feed-card {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-1);
    transition: background var(--dur-hover) var(--ease-product);
}
.wl-feed-card:hover { background: var(--bg-nested); }
.wl-feed-card.acknowledged { opacity: 0.55; }

.wl-feed-card-top {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.wl-feed-card-title {
    flex: 1;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.wl-feed-card-summary {
    font-size: var(--text-sm);
    color: var(--fg-2);
    line-height: 1.55;
    margin-bottom: var(--sp-3);
}

/* Priority badge */
.wl-feed-priority {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    flex: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.wl-feed-priority-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: none;
}
.wl-feed-priority--urgent { background: rgba(232,125,111,0.15); color: var(--wl-danger-text); }
.wl-feed-priority--urgent .wl-feed-priority-dot { background: var(--wl-danger); }
.wl-feed-priority--high   { background: rgba(220,130, 60,0.13); color: #c06010; }
.wl-feed-priority--high   .wl-feed-priority-dot { background: #E08040; }
.wl-feed-priority--medium { background: rgba(245,198,116,0.15); color: #9a7200; }
.wl-feed-priority--medium .wl-feed-priority-dot { background: var(--wl-warning); }
.wl-feed-priority--low    { background: rgba(49,188,164,0.10);  color: var(--wl-success-text); }
.wl-feed-priority--low    .wl-feed-priority-dot { background: var(--wl-success); }
.wl-feed-priority--info   { background: var(--bg-nested);        color: var(--fg-3); }
.wl-feed-priority--info   .wl-feed-priority-dot { background: var(--fg-muted); opacity: 0.5; }

/* Meta row: agent name + time */
.wl-feed-card-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.wl-feed-card-agent {
    font-size: var(--text-xs);
    color: var(--fg-3);
    display: flex;
    align-items: center;
    gap: 4px;
}
.wl-feed-card-time { font-size: var(--text-xs); color: var(--fg-3); }

/* Key metrics strip */
.wl-feed-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.wl-feed-metric {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    padding: 3px 8px;
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    border-radius: var(--r-pill);
    color: var(--fg-2);
}
.wl-feed-metric-key { color: var(--fg-3); font-weight: 500; }
.wl-feed-metric-val { font-weight: 600; color: var(--fg-1); font-feature-settings: "tnum"; }

/* Recommended actions */
.wl-feed-actions-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: var(--sp-3);
}
.wl-feed-action-item {
    font-size: var(--text-sm);
    color: var(--fg-2);
    padding-left: var(--sp-4);
    position: relative;
    line-height: 1.5;
}
.wl-feed-action-item::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--wl-wave-deep);
    font-size: var(--text-xs);
}

/* Reasoning trace (expandable) */
.wl-feed-reasoning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--wl-wave-deep);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    margin-bottom: var(--sp-2);
    transition: color var(--dur-hover) var(--ease-product);
}
.wl-feed-reasoning-toggle:hover { color: var(--wl-wave); }
.wl-feed-reasoning-toggle svg {
    transition: transform var(--dur-hover) var(--ease-product);
    flex: none;
}
.wl-feed-reasoning-toggle.open svg { transform: rotate(90deg); }

.wl-feed-reasoning-body {
    display: none;
    font-size: var(--text-sm);
    color: var(--fg-3);
    line-height: 1.6;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    white-space: pre-wrap;
}
.wl-feed-reasoning-body.open { display: block; }

/* Action buttons */
.wl-feed-card-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.wl-feed-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
    border: 1px solid var(--border-2);
    background: var(--bg-card);
    color: var(--fg-2);
}
.wl-feed-btn:hover { background: var(--bg-nested); color: var(--fg-1); }
.wl-feed-btn svg { flex: none; }

.wl-feed-btn--primary {
    background: var(--wl-wave-deep);
    color: #fff;
    border-color: var(--wl-wave-deep);
}
.wl-feed-btn--primary:hover { background: var(--wl-wave-darkest); color: #fff; }

.wl-feed-btn--done {
    color: var(--wl-success-text);
    border-color: rgba(49,188,164,0.30);
    background: rgba(49,188,164,0.08);
    cursor: default;
}

.wl-feed-ack-by {
    font-size: var(--text-xs);
    color: var(--fg-3);
    margin-left: auto;
}

/* ── Brief / Research list item ──────────────────────────── */
.wl-feed-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product);
}
.wl-feed-list-item:hover { background: var(--bg-nested); }

.wl-feed-list-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--wl-wave-deep);
}
.wl-feed-list-icon.daily      { background: var(--wl-wave-dim); }
.wl-feed-list-icon.management { background: rgba(62,100,180,0.10); color: #3e64b4; }
.wl-feed-list-icon.research   { background: rgba(130,80,200,0.10); color: #8250c8; }

.wl-feed-list-body { flex: 1; min-width: 0; }
.wl-feed-list-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-feed-list-sub {
    font-size: var(--text-xs);
    color: var(--fg-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.wl-feed-list-badge {
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: var(--bg-nested);
    border: 1px solid var(--border-2);
    color: var(--fg-3);
}

/* ── Agent runs ──────────────────────────────────────────── */
.wl-feed-run {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border-1);
}
.wl-feed-run-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    padding: 2px 0;
}
.wl-feed-run-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}
.wl-feed-run-dot.success { background: var(--wl-success); }
.wl-feed-run-dot.failed  { background: var(--wl-danger); }
.wl-feed-run-name {
    flex: 1;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--fg-1);
    letter-spacing: -0.005em;
}
.wl-feed-run-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-xs);
    color: var(--fg-3);
}
.wl-feed-run-body {
    display: none;
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    color: var(--fg-3);
    line-height: 1.55;
}
.wl-feed-run-body.open { display: block; }
.wl-feed-run-expand {
    color: var(--fg-3);
    transition: transform var(--dur-hover) var(--ease-product);
    flex: none;
}
.wl-feed-run-head.open .wl-feed-run-expand { transform: rotate(90deg); }

/* ── Empty state ─────────────────────────────────────────── */
.wl-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--fg-3);
    font-size: var(--text-md);
}
.wl-feed-empty svg { opacity: 0.4; }

/* ============================================================
   MODALS  (.wl-modal-*)
   ============================================================ */

.wl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,10,9,0.40);
    z-index: 500;
}

.wl-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 501;
    width: min(520px, calc(100vw - 32px));
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--r-xl);
    box-shadow: var(--elev-modal);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

/* Same trap as .wl-sp-overlay below: `hidden` only hides through the UA
   stylesheet's display:none, and the author `display: flex` above outranks it
   whatever the specificity. Every modal in the product sets the attribute and
   nothing else, so without this they all sit open on page load. */
.wl-modal[hidden] { display: none; }

.wl-modal--reader {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
}

.wl-modal-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.wl-modal-title {
    flex: 1;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-modal-body {
    padding: var(--sp-5);
    overflow-y: auto;
    flex: 1;
}

.wl-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border-1);
    flex-shrink: 0;
}

.wl-modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: var(--sp-4);
}
.wl-modal-field:last-child { margin-bottom: 0; }

.wl-modal-row {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.wl-modal-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-2);
}

/* One box for every form control in the app, modal or page.

   This had drifted into two styles: .wl-modal-input carried the whole box
   while .wl-form-input set only a font, so the fields using the page class
   fell back to the browser's own input — its border, its padding, no focus
   colour — beside labels that followed the design system. Two rules for one
   thing is how that happens, so there is now one.

   Form controls opt out of inheritance by default: every browser hands an
   input its own font and size regardless of the page around it, which is why
   the font is named here rather than inherited. The camera viewer, the receipt
   and the navigation veil all mount on document.body, outside .wave-shell
   where the app font is set, so `inherit` would give a control inside one of
   those the browser default instead. */
.wl-modal-input,
.wl-modal-textarea,
.wl-form-input,
.wl-form-select,
.wl-form-textarea,
textarea.wl-form-input {
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-nested);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--fg-1);
    outline: none;
    transition: border-color var(--dur-hover) var(--ease-product);
    resize: vertical;
}
.wl-modal-input:focus,
.wl-modal-textarea:focus,
.wl-form-input:focus,
.wl-form-select:focus,
.wl-form-textarea:focus { border-color: var(--wl-wave-deep); }

/* A labelled field in the policy action editor. The controls need the width
   said out loud: a form control does not stretch to its parent on its own, so
   an input and a textarea in the same column ended up two different widths. */
.wl-pol-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.wl-pol-field > input,
.wl-pol-field > select,
.wl-pol-field > textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Channel and recipients belong on one line; the recipients box takes the slack. */
.wl-pol-row { display: flex; gap: 8px; }
.wl-pol-row > .wl-pol-field { flex: 1; min-width: 0; }
.wl-pol-row > .wl-pol-field:first-child { flex: 0 0 auto; }

.wl-modal-btn-secondary {
    padding: 8px 16px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    background: var(--bg-card);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--fg-2);
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product);
}
.wl-modal-btn-secondary:hover { background: var(--bg-nested); }

/* Reader body — rendered markdown content */
.wl-reader-body {
    font-size: var(--text-md);
    color: var(--fg-1);
    line-height: 1.7;
}
.wl-reader-body h1,
.wl-reader-body h2 { font-family: var(--font-display); letter-spacing: -0.015em; margin: var(--sp-5) 0 var(--sp-3); }
.wl-reader-body h1 { font-size: var(--text-3xl); font-weight: 700; }
.wl-reader-body h2 { font-size: var(--text-2xl); font-weight: 600; }
.wl-reader-body h3 { font-size: var(--text-xl); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }
.wl-reader-body p  { margin: 0 0 var(--sp-3); color: var(--fg-2); }
.wl-reader-body strong { font-weight: 600; color: var(--fg-1); }
.wl-reader-body ul,
.wl-reader-body ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-3); color: var(--fg-2); }
.wl-reader-body li { margin-bottom: var(--sp-1); line-height: 1.6; }
.wl-reader-body hr { border: none; border-top: 1px solid var(--border-2); margin: var(--sp-5) 0; }
.wl-reader-body blockquote {
    border-left: 3px solid var(--wl-wave);
    margin: var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-4);
    color: var(--fg-3);
    background: var(--bg-nested);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Period label chip — shown above HTML management brief content */
.wl-reader-period-label {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-wave);
    background: color-mix(in srgb, var(--wl-wave) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--wl-wave) 25%, transparent);
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: var(--sp-4);
}

/* HTML management brief content — tables, nested headings, etc. */
.wl-reader-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin: var(--sp-3) 0 var(--sp-4);
}
.wl-reader-body th {
    text-align: left;
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 10px;
    border-bottom: 2px solid var(--border-2);
}
.wl-reader-body td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-2);
    color: var(--fg-2);
}
.wl-reader-body tr:last-child td { border-bottom: none; }
.wl-reader-body tbody tr:hover td { background: var(--bg-nested); }

/* Suggested actions section at bottom of reader */
.wl-reader-actions {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-2);
}
.wl-reader-actions-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    margin-bottom: var(--sp-3);
}
.wl-reader-actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.wl-priority-action--brief {
    font-size: var(--text-sm);
}

/* Print button in reader */
.wl-reader-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    background: var(--bg-nested);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-2);
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product);
    flex: none;
}
.wl-reader-print-btn:hover { background: var(--bg-canvas); color: var(--fg-1); }

/* @@media print — clean printout */
@@media print {
    .wave-shell > *:not(#wl-reader-modal) { display: none !important; }
    #wl-reader-modal {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-height: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    .wl-modal-head { border: none; padding-bottom: 8px; }
    .wl-reader-print-btn,
    .wl-panel-close { display: none !important; }
}

li{
    list-style: initial;
}

strong {
    font-weight: 600;
    background: #D8FBF5;
}

[data-wl-theme="dark"] strong {
    font-weight: 600;
    color: #D8FBF5;
    background: none;
}

/* ── Ask Wave — rich response blocks ─────────────────────────────── */

/* Outer wrapper injected after the assistant's text bubble */
.wl-chat-rich-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Align with Wave bubbles (not full-width like user messages) */
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Each individual section inside the rich block */
.wl-chat-section {
    animation: wl-section-in 260ms var(--ease-product) both;
}

@@keyframes wl-section-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* KPIStrip inside chat: allow wrap on narrow panels */
.wl-chat-rich-block .wl-kpi-strip {
    flex-wrap: wrap;
    gap: 8px;
}

/* Priority grid in chat: max 2 columns (panel is narrower than the dashboard) */
.wl-chat-rich-block .wl-priority-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Charts: slightly shorter in the narrow panel */
.wl-chat-rich-block .wl-chart-host canvas {
    max-height: 180px !important;
}

.card {
    background-color: var(--bg-card);
}
/* ══════════════════════════════════════════════════════════════════════
   ADMIN FORM LAYOUT  —  shared by every /Admin edit page
   Previously these lived only in WaveAgentTemplateEdit.cshtml's inline
   <style>. Promoted here so admin pages share one definition.
   ══════════════════════════════════════════════════════════════════════ */

/* The bottom padding clears the Ask fab, which is fixed to this corner of the
   viewport: at 60px the gap between Save and the fab measured 17px, close
   enough to read as a collision. See .wl-ask-fab-area. */
.wl-admin-edit { max-width: 860px; margin: 0 auto; padding-bottom: 104px; }
.wl-admin-edit--wide { max-width: 1040px; }
.wl-admin-edit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.wl-admin-edit-head-left { display: flex; align-items: center; gap: 14px; }
.wl-admin-edit-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--fg-1); letter-spacing: -.02em; margin: 0; }
.wl-admin-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--fg-3); text-decoration: none; border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 5px 10px; transition: color var(--dur-hover) var(--ease-product), background var(--dur-hover) var(--ease-product); }
.wl-admin-back:hover { color: var(--fg-1); background: rgba(10,10,9,.04); }
[data-wl-theme="dark"] .wl-admin-back:hover { background: rgba(238,234,231,.06); }

.wl-form-section { background: var(--bg-card); border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: 24px; margin-bottom: 16px; }
.wl-form-section-head { font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border-1); }

.wl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.wl-form-grid--full { grid-template-columns: 1fr; }
.wl-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.wl-form-field { display: flex; flex-direction: column; gap: 5px; }
.wl-form-field--full { grid-column: 1/-1; }
.wl-form-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }
.wl-form-label span { color: var(--c-danger,#e05); margin-left: 2px; }
.wl-form-hint { font-size: var(--text-xs); color: var(--fg-3); margin-top: 3px; line-height: 1.5; }
.wl-form-error { font-size: var(--text-xs); color: var(--c-danger,#e05); margin-top: 3px; }
.wl-form-row { display: flex; gap: 10px; align-items: flex-start; }
.wl-form-row > .wl-form-select { flex: 0 0 40%; }

.wl-admin-save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 0 0; }
.wl-admin-save-bar--split { justify-content: space-between; }

@media (max-width: 720px) {
    .wl-form-grid, .wl-form-grid--3 { grid-template-columns: 1fr; }
}

/* ── Checkbox pickers (roles, functional areas) ──────────────────── */

.wl-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.wl-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--border-1); border-radius: var(--r-lg); background: var(--bg-nested); cursor: pointer; transition: border-color var(--dur-hover) var(--ease-product), background var(--dur-hover) var(--ease-product); }
.wl-check:hover { border-color: var(--border-2); }
.wl-check:has(input:checked) { border-color: var(--wl-wave); background: var(--wl-wave-dim); }
.wl-check:has(input:focus-visible) { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.wl-check input { margin: 2px 0 0; accent-color: var(--wl-wave-dark); width: 15px; height: 15px; flex: none; cursor: pointer; }
.wl-check-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-check-name { font-size: var(--text-md); font-weight: 600; color: var(--fg-1); line-height: 1.3; }
.wl-check-desc { font-size: var(--text-xs); color: var(--fg-3); line-height: 1.45; }
.wl-check--locked { opacity: .5; cursor: not-allowed; }
.wl-check--locked input { cursor: not-allowed; }

.wl-area-note { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-lg); background: rgba(245,198,116,.12); border: 1px solid rgba(245,198,116,.30); font-size: var(--text-sm); color: var(--fg-2); line-height: 1.5; margin-bottom: 14px; }
.wl-area-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--wl-warning-text); }
.wl-area-note b { color: var(--fg-1); font-weight: 600; }

/* ── Table cell chips (roles / areas in a listing) ───────────────── */

.wl-cell-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wl-cell-chip { display: inline-flex; align-items: center; font-size: var(--text-2xs); font-weight: 600; padding: 2px 7px; border-radius: var(--r-sm); background: var(--bg-nested); border: 1px solid var(--border-1); color: var(--fg-2); white-space: nowrap; }
.wl-cell-chip--area { background: var(--wl-wave-dim); border-color: rgba(62, 167, 100,.28); color: var(--wl-wave-deep); }
.wl-cell-chip--muted { opacity: .65; font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════
   SETTINGS MENU  —  topbar cog, admin entry points
   ══════════════════════════════════════════════════════════════════════ */

.wl-settings-wrap { position: relative; }

.wl-settings-btn.open,
.wl-settings-btn[aria-expanded="true"] {
    background: rgba(10, 10, 9, 0.06);
    color: var(--fg-1);
}
[data-wl-theme="dark"] .wl-settings-btn.open,
[data-wl-theme="dark"] .wl-settings-btn[aria-expanded="true"] {
    background: rgba(238, 234, 231, 0.08);
}
.wl-settings-btn svg { transition: transform var(--dur-hover) var(--ease-product); }
.wl-settings-btn[aria-expanded="true"] svg { transform: rotate(45deg); }

.wl-settings-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 228px;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--elev-modal);
    z-index: 200;
    overflow: hidden;
    display: none;
    flex-direction: column;
    padding: 4px;
}

.wl-settings-dropdown.open { display: flex; }

.wl-settings-section {
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 9px 10px 5px;
}
.wl-settings-section:not(:first-child) {
    border-top: 1px solid var(--border-1);
    margin-top: 4px;
}

.wl-settings-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--fg-2);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}

.wl-settings-item:hover { background: rgba(10, 10, 9, 0.05); color: var(--fg-1); }
[data-wl-theme="dark"] .wl-settings-item:hover { background: rgba(238, 234, 231, 0.06); }

.wl-settings-item--active { color: var(--fg-1); font-weight: 500; background: var(--wl-wave-dim); }
.wl-settings-item--active:hover { background: var(--wl-wave-dim); }

.wl-settings-item svg { width: 15px; height: 15px; flex: none; color: var(--fg-3); }
.wl-settings-item:hover svg,
.wl-settings-item--active svg { color: var(--wl-wave-deep); }

.wl-settings-item-label { flex: 1; min-width: 0; }
.wl-settings-item-sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--fg-3);
    line-height: 1.35;
    margin-top: 1px;
}

/* ── Expandable group inside the settings menu ───────────────────── */

.wl-settings-group { display: flex; flex-direction: column; }

.wl-settings-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--fg-2);
    cursor: pointer;
    text-align: left;
    transition: background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}
.wl-settings-group-head:hover { background: rgba(10, 10, 9, 0.05); color: var(--fg-1); }
[data-wl-theme="dark"] .wl-settings-group-head:hover { background: rgba(238, 234, 231, 0.06); }
.wl-settings-group-head svg { width: 15px; height: 15px; flex: none; color: var(--fg-3); }
.wl-settings-group-head:hover svg { color: var(--wl-wave-deep); }

.wl-settings-group-chev {
    margin-left: auto;
    width: 13px !important;
    height: 13px !important;
    transition: transform 200ms var(--ease-product);
}
.wl-settings-group[open] > .wl-settings-group-head > .wl-settings-group-chev { transform: rotate(180deg); }

.wl-settings-group-body { display: none; flex-direction: column; padding-left: 12px; margin-left: 11px; border-left: 1px solid var(--border-1); }
.wl-settings-group[open] > .wl-settings-group-body { display: flex; }
.wl-settings-group-body .wl-settings-item { padding: 7px 10px; font-size: var(--text-sm); }

/* ── Appearance + language inside the settings menu ──────────────── */

/* Same icon-swap trick as .wl-theme-btn, scoped to the menu item. */
.wl-settings-theme .wl-theme-icon-dark  { display: block; }
.wl-settings-theme .wl-theme-icon-light { display: none;  }
[data-wl-theme="dark"] .wl-settings-theme .wl-theme-icon-dark  { display: none;  }
[data-wl-theme="dark"] .wl-settings-theme .wl-theme-icon-light { display: block; }

/* Sub-label reflects the mode currently in effect. */
.wl-settings-theme .wl-theme-label-light { display: inline; }
.wl-settings-theme .wl-theme-label-dark  { display: none;   }
[data-wl-theme="dark"] .wl-settings-theme .wl-theme-label-light { display: none;   }
[data-wl-theme="dark"] .wl-settings-theme .wl-theme-label-dark  { display: inline; }

/* Language options reuse .wl-settings-item, so neutralise the standalone
   dropdown styling that .wl-lang-option carries from the old header picker. */
.wl-settings-group-body .wl-lang-option { width: 100%; }
.wl-settings-group-body .wl-lang-option-flag { font-size: var(--text-xl); border-radius: 2px; flex: none; }
.wl-settings-group-body .wl-lang-option-check { width: 13px; height: 13px; flex: none; color: var(--wl-wave-deep); margin-left: auto; }

/* ── Image crop boxes (chain / store branding) ───────────────────── */

.wl-crop-box {
    background: var(--bg-nested);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 8px;
    min-height: 96px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 6px;
}
.wl-crop-box img { max-width: 100%; display: block; }
.wl-crop-box:empty::after,
.wl-crop-box img[src=""] { content: ""; }

/* Cropper renders its own chrome; keep it inside the rounded box. */
.wl-crop-box .cropper-container { max-width: 100%; }

/* ── Opening hours editor ────────────────────────────────────────── */

.wl-oh-table { display: flex; flex-direction: column; gap: 6px; }

.wl-oh-row {
    display: grid;
    grid-template-columns: 104px 118px 14px 118px auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    background: var(--bg-nested);
    transition: opacity var(--dur-hover) var(--ease-product);
}
.wl-oh-row--off { opacity: .62; }

.wl-oh-day { font-size: var(--text-md); font-weight: 600; color: var(--fg-1); }
.wl-oh-sep { color: var(--fg-3); text-align: center; }
.wl-oh-row .wl-form-input { padding: 6px 9px; font-variant-numeric: tabular-nums; }
.wl-oh-row .wl-form-input:disabled { opacity: .5; cursor: not-allowed; }

.wl-oh-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--fg-2);
    white-space: nowrap;
    cursor: pointer;
}
.wl-oh-flag input { accent-color: var(--wl-wave-dark); width: 14px; height: 14px; cursor: pointer; }

@media (max-width: 760px) {
    .wl-oh-row { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
    .wl-oh-day { grid-column: 1 / -1; }
    .wl-oh-sep { display: none; }
}

/* ── Dashboard period selector ───────────────────────────────────── */

.wl-period-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
}

/* ── Summarise ────────────────────────────────────────────────────────────
   Lives in the filter bar because it summarises what the filters selected.
   Pushed to the far end: the controls on the left change what the dashboard
   shows, and this one asks about whatever they settled on. */
.wl-period-summarise {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* The signifier the Ask button uses, so the two read as the same faculty.
   Still at rest, pulsing while it works — the animation means something is
   happening rather than something is here. */
.wl-dsum-dot { animation: none; }
.wl-period-summarise--busy .wl-dsum-dot { animation: wlPulse 1.6s ease-in-out infinite; }

.wl-period-summarise[disabled] { opacity: .65; cursor: default; }

/* ── The panel it opens ───────────────────────────────────────────────── */
.wl-dsum { margin-bottom: 14px; }

.wl-dsum-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 10px;
}

.wl-dsum-note { font-size: var(--text-2xs); color: var(--fg-3); }

/* Three bullet bars under a headline and two body lines — the shape of the
   answer, so the panel does not change size when the words arrive. */
.wl-dsum-skel-lines { display: flex; flex-direction: column; gap: 10px; }
.wl-dsum-skel-lines .wl-skel-bar { height: 9px; }

.wl-period-seg { display: inline-flex; background: var(--bg-nested); border-radius: 999px; padding: 3px; gap: 2px; }
.wl-period-btn {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 6px 13px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-hover) var(--ease-product), color var(--dur-hover) var(--ease-product);
}
.wl-period-btn:hover { color: var(--fg-1); }
.wl-period-btn--active { background: var(--wl-skog); color: var(--wl-lin); }
.wl-period-btn:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

.wl-period-custom { display: inline-flex; align-items: center; gap: 6px; }
.wl-period-custom .wl-form-input { width: auto; padding: 6px 9px; font-size: var(--text-sm); }
.wl-period-dash { color: var(--fg-3); }

.wl-period-compare {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-sm);
    color: var(--fg-2);
    text-decoration: none;
    cursor: pointer;
    padding: 5px 10px 5px 6px;
    border-radius: 999px;
    border: 1px solid var(--border-1);
    transition: border-color var(--dur-hover) var(--ease-product), color var(--dur-hover) var(--ease-product);
}
.wl-period-compare:hover { border-color: var(--border-2); color: var(--fg-1); }
.wl-period-compare--on { border-color: var(--wl-wave-ring); background: var(--wl-wave-dim); color: var(--fg-1); }
.wl-period-compare:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

.wl-period-check {
    width: 15px; height: 15px; flex: none;
    border-radius: 4px;
    border: 1.5px solid var(--border-2);
    display: grid; place-items: center;
    background: var(--bg-card);
}
.wl-period-compare--on .wl-period-check { background: var(--wl-skog); border-color: var(--wl-wave); color: var(--wl-lin); }
.wl-period-check svg { width: 10px; height: 10px; }

.wl-period-label {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wl-period-compare-label { color: var(--fg-3); margin-left: 4px; }

@media (max-width: 720px) {
    .wl-period-label { margin-left: 0; width: 100%; }
}

/* ── Demo data toggle + banner ───────────────────────────────────── */

.wl-period-demo {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); color: var(--fg-3); text-decoration: none;
    padding: 5px 11px; border-radius: 999px;
    border: 1px dashed var(--border-2);
    transition: color var(--dur-hover) var(--ease-product), border-color var(--dur-hover) var(--ease-product);
}
.wl-period-demo:hover { color: var(--fg-1); border-color: var(--fg-muted); }
.wl-period-demo svg { width: 13px; height: 13px; flex: none; }
.wl-period-demo--on {
    background: rgba(245,198,116,.16);
    border-color: var(--wl-warning);
    border-style: solid;
    color: var(--fg-1);
    font-weight: 600;
}
.wl-period-demo--on svg { color: var(--wl-warning-text); }
.wl-period-demo:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

.wl-demo-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 15px; margin-bottom: 16px;
    border-radius: var(--r-lg);
    background: rgba(245,198,116,.12);
    border: 1px solid rgba(245,198,116,.34);
    font-size: var(--text-sm); line-height: 1.5; color: var(--fg-2);
}
.wl-demo-banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--wl-warning-text); }
.wl-demo-banner b { color: var(--fg-1); font-weight: 600; }

/* ── Demo mode: topbar badge + settings switch ───────────────────── */

.wl-tb-demo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--wl-warning);
    background: rgba(245,198,116,.18);
    color: var(--fg-1);
    font-family: var(--font-sans);
    font-size: var(--text-sm); font-weight: 600; letter-spacing: -.005em;
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-product);
}
.wl-tb-demo:hover { background: rgba(245,198,116,.30); }
.wl-tb-demo:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.wl-tb-demo svg { width: 13px; height: 13px; flex: none; color: var(--wl-warning-text); }
.wl-tb-demo-x { color: var(--fg-3); font-size: var(--text-xs); margin-left: 2px; }

/* Small switch shown on the settings menu item */
.wl-settings-switch {
    width: 28px; height: 16px; flex: none;
    border-radius: 999px;
    background: var(--border-2);
    position: relative;
    transition: background var(--dur-hover) var(--ease-product);
}
.wl-settings-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg-card);
    transition: transform var(--dur-hover) var(--ease-product);
}
.wl-settings-switch--on { background: var(--wl-warning); }
.wl-settings-switch--on::after { transform: translateX(12px); }

/* ── Progressive dashboard loading ───────────────────────────────
   Placeholders that hold the space a section will occupy, so the page does not jump as
   sections land. Shapes are deliberately suggestive — a bar-chart silhouette, a row of KPI
   blocks — because a reader who can see what is coming waits more comfortably than one
   staring at grey rectangles. */

.wl-dash-slot { margin-bottom: 18px; }

.wl-skel-card {
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg, 14px);
    background: var(--bg-card);
    padding: 18px 20px;
}

.wl-skel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.wl-skel-title {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-lg); font-weight: 600; color: var(--fg-2);
}
.wl-skel-spin { width: 13px; height: 13px; flex: none; }

/* The shimmer that says "working", not "broken". */
@keyframes wl-skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

.wl-skel-bar, .wl-skel-col {
    display: block;
    background: var(--border-2);
    border-radius: 4px;
    animation: wl-skel-pulse 1.4s var(--ease-product, ease-in-out) infinite;
}

.wl-skel-kpis { display: flex; gap: 14px; flex-wrap: wrap; }
.wl-skel-kpi {
    flex: 1 1 140px; display: flex; flex-direction: column; gap: 8px;
    padding: 12px; border-radius: var(--r-sm, 8px); background: var(--bg-app);
}
.wl-skel-bar--sm  { width: 45%; height: 9px; }
.wl-skel-bar--lg  { width: 70%; height: 20px; }
.wl-skel-bar--row { width: 100%; height: 13px; margin-bottom: 9px; }

.wl-skel-chart {
    display: flex; align-items: flex-end; gap: 6px;
    height: 180px; padding-top: 8px;
}
.wl-skel-col { flex: 1; border-radius: 4px 4px 0 0; }

/* Stagger the columns so the shimmer travels across the chart instead of flashing at once. */
.wl-skel-col:nth-child(2n)   { animation-delay: .12s; }
.wl-skel-col:nth-child(3n)   { animation-delay: .24s; }
.wl-skel-col:nth-child(5n)   { animation-delay: .36s; }

.wl-skel-table { padding-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .wl-skel-bar, .wl-skel-col { animation: none; opacity: .6; }
}

/* ══════════════════════════════════════════════════════════════
   STORE PANEL (staff dashboard)

   Signage first: figures large enough to read from across the shop floor, tiles whose count
   is the pull, and detail hidden behind an overlay so the board itself stays calm.
   ══════════════════════════════════════════════════════════════ */

.wl-sp { display: flex; flex-direction: column; }

/* Everything below the hero: a padded column on the canvas. */
.wl-sp-body {
    display: flex; flex-direction: column; gap: 22px;
    padding: clamp(18px, 2.6vw, 32px);
}

/* ── Identity strip ───────────────────────────────────────── */
.wl-sp-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 14px clamp(18px, 2.6vw, 32px);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-2);
}
.wl-sp-store { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wl-sp-chain {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em;
    color: var(--fg-1);
}
.wl-sp-name { font-size: var(--text-lg); font-weight: 500; color: var(--fg-3); }

.wl-sp-strip-right { display: flex; align-items: center; gap: 18px; }

.wl-sp-weather {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--r-pill, 999px);
    border: 1px solid var(--border-2); background: var(--bg-card);
    color: var(--fg-1); font-family: var(--font-sans); font-size: var(--text-lg);
    cursor: pointer; transition: border-color var(--dur-hover) var(--ease-product);
}
.wl-sp-weather:hover { border-color: var(--wl-wave); }
.wl-sp-weather:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.wl-sp-wicon { width: 20px; height: 20px; flex: none; color: var(--fg-2); }
.wl-sp-weather-temp { font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-sp-weather-cond { color: var(--fg-3); font-size: var(--text-md); }

.wl-sp-when { text-align: right; }
.wl-sp-day { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); }
.wl-sp-time {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
    font-variant-numeric: tabular-nums; color: var(--fg-1);
}

/* ── Wave hero ────────────────────────────────────────────── */
.wl-sp-hero {
    display: flex; gap: 18px; align-items: flex-start;
    padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.6vw, 32px);
    /* The same wash the active tiles carry, so the band that speaks and the tiles that ask
       for something read as one family. */
    background: var(--bg-nested);
    border-bottom: 1px solid var(--border-2);
}
.wl-sp-hero-body { display: flex; flex-direction: column; gap: 6px; }
.wl-sp-hero-from {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--wl-wave-deep);
}
.wl-sp-hero-line {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(20px, 2.9vw, 30px); font-weight: 700;
    letter-spacing: -.025em; margin: 0; line-height: 1.2; color: var(--fg-1);
    text-wrap: balance;
}
.wl-sp-hero-sub { margin: 0; font-size: var(--text-lg); line-height: 1.6; color: var(--fg-2); max-width: 70ch; }

/* ── KPIs ─────────────────────────────────────────────────── */
.wl-sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.wl-sp-kpi {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px 20px; border-radius: var(--r-lg, 14px);
    background: var(--bg-card); border: 1px solid var(--border-1);
    /* No shadow: depth comes from bg-1 -> bg-2 -> bg-3, not elevation. */
}
.wl-sp-kpi-label {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--fg-3);
}
.wl-sp-kpi-figure { display: flex; align-items: baseline; gap: 6px; }
.wl-sp-kpi-value {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(30px, 4.5vw, 42px); font-weight: 700;
    letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.wl-sp-kpi-unit { font-size: var(--text-xl); font-weight: 600; color: var(--fg-3); }

.wl-sp-bar { height: 5px; border-radius: 3px; background: var(--border-2); overflow: hidden; }
.wl-sp-bar span { display: block; height: 100%; border-radius: 3px; }
.wl-sp-bar-good { background: var(--wl-success); }
.wl-sp-bar-warn { background: var(--wl-warning); }

.wl-sp-kpi-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: var(--text-sm); color: var(--fg-3);
}
.wl-sp-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.wl-sp-delta svg { width: 13px; height: 13px; }
.wl-sp-delta.is-good { color: var(--wl-success-text); }
.wl-sp-delta.is-bad  { color: var(--wl-danger-text); }

/* ── Tiles ────────────────────────────────────────────────── */
.wl-sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.wl-sp-tile {
    display: flex; flex-direction: column; gap: 6px; text-align: left;
    padding: 18px 20px; border-radius: var(--r-lg, 14px);
    background: var(--bg-card); border: 1px solid var(--border-1);
    font-family: var(--font-sans); cursor: pointer;
    /* No shadow: depth comes from bg-1 -> bg-2 -> bg-3, not elevation. */
    transition: border-color var(--dur-hover) var(--ease-product),
                transform var(--dur-hover) var(--ease-product);
}
.wl-sp-tile:hover { border-color: var(--border-2); transform: translateY(-2px); }
.wl-sp-tile:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

/* A tile carrying something outstanding lifts off the board: a wash of wave fading out
   halfway down, and a ring instead of a plain border. A clear tile keeps the plain card —
   the contrast between the two is what makes the eye land on the obligations, which works
   better than dimming the clear ones. */
.wl-sp-tile.has-pull {
    border-color: var(--wl-wave-ring);
    background: var(--bg-card);
}
.wl-sp-tile.has-pull:hover { border-color: var(--wl-wave); }

.wl-sp-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* The icon sits in its own chip, which fills with wave on an active tile — the strongest
   single signal on the board that this tile wants something. */
.wl-sp-tile-icon {
    width: 40px; height: 40px; flex: none;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--bg-nested); color: var(--fg-2);
    transition: background var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}
.wl-sp-tile-icon svg { width: 21px; height: 21px; }
.wl-sp-tile.has-pull .wl-sp-tile-icon { background: var(--wl-skog); color: var(--wl-lin); }
.wl-sp-count {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-4xl); font-weight: 800; line-height: 1; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; color: var(--fg-1);
}
.wl-sp-clear svg { width: 22px; height: 22px; color: var(--wl-success-text); }
.wl-sp-tile-name {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-xl); font-weight: 700; letter-spacing: -.012em; color: var(--fg-1);
}
.wl-sp-tile-hint { font-size: var(--text-sm); line-height: 1.35; color: var(--fg-3); }

/* The hint earns full contrast on a tile that wants something. */
.wl-sp-tile.has-pull .wl-sp-tile-hint { color: var(--fg-2); }

/* ── Footer ───────────────────────────────────────────────── */
.wl-sp-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    font-size: var(--text-sm); color: var(--fg-3);
    padding-top: 4px; border-top: 1px solid var(--border-1);
}
.wl-sp-fresh { display: inline-flex; align-items: center; gap: 7px; }
.wl-sp-pulse {
    width: 7px; height: 7px; border-radius: 50%; background: var(--wl-success);
    animation: wl-sp-pulse 2.4s ease-in-out infinite;
}
@keyframes wl-sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Drill-in overlay ─────────────────────────────────────── */
.wl-sp-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(10, 10, 9, .55);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
}

/* The `hidden` attribute only hides through the UA stylesheet's display:none, which any
   author `display` rule outranks — without this the overlay sits open on page load. */
.wl-sp-overlay[hidden] { display: none; }
@media (min-width: 768px) { .wl-sp-overlay { align-items: center; padding: 32px; } }

.wl-sp-sheet {
    width: 100%; max-width: 900px; max-height: 90vh;
    display: flex; flex-direction: column;
    background: var(--bg-canvas); border: 1px solid var(--border-2);
    border-radius: 16px 16px 0 0;
}
@media (min-width: 768px) { .wl-sp-sheet { border-radius: 16px; } }

.wl-sp-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-1);
}
.wl-sp-sheet-title {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--fg-1);
}
.wl-sp-close {
    width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px;
    background: transparent; color: var(--fg-3); cursor: pointer;
}
.wl-sp-close:hover { background: var(--bg-nested); color: var(--fg-1); }
.wl-sp-close svg { width: 18px; height: 18px; }

.wl-sp-sheet-body { padding: 20px 22px 28px; overflow-y: auto; }

.wl-sp-empty { font-size: var(--text-lg); color: var(--fg-3); padding: 20px 0; }
.wl-sp-note { font-size: var(--text-sm); color: var(--fg-3); margin: 12px 0 0; }

/* ── Lists inside panels ──────────────────────────────────── */
.wl-sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wl-sp-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; border-radius: var(--r-md, 12px);
    background: var(--bg-card); border: 1px solid var(--border-1);
}
.wl-sp-item--stacked { flex-direction: column; align-items: stretch; }
.wl-sp-item.is-done { opacity: .5; }
.wl-sp-item.is-done .wl-sp-item-title { text-decoration: line-through; }

/* ── Data to fill in ──────────────────────────────────────────────────────
   The one panel on the board that takes input rather than a tap. Two columns on
   a wall screen, one on anything narrow. */
.wl-sp-form-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 16px;
    margin: 10px 0 4px;
}

.wl-sp-form-field { display: flex; flex-direction: column; gap: 4px; }
.wl-sp-form-label { font-size: var(--text-sm); color: var(--fg-3); }
.wl-sp-form-req   { color: var(--wl-danger-text); }

.wl-sp-form-input { display: flex; align-items: center; gap: 8px; }

.wl-sp-form-input input {
    flex: 1; min-width: 0;
    background: var(--bg-nested);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md, 12px);
    padding: 10px 12px;
    font-family: var(--font-sans);
    /* Read at arm's length on a wall panel, and under 16px would make iOS zoom. */
    font-size: var(--text-lg);
    color: var(--fg-1);
    outline: none;
}

.wl-sp-form-input input:focus { border-color: var(--wl-wave); }
.wl-sp-form-input input[disabled] { opacity: .6; }

.wl-sp-form-unit { font-size: var(--text-sm); color: var(--fg-3); white-space: nowrap; }

.wl-sp-form-err { font-size: var(--text-sm); color: var(--wl-danger-text); margin: 6px 0 0; }

.wl-sp-item-main { flex: 1; min-width: 0; }
.wl-sp-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wl-sp-item-title { font-size: var(--text-xl); font-weight: 600; color: var(--fg-1); }
.wl-sp-item-body { font-size: var(--text-md); line-height: 1.6; color: var(--fg-2); margin: 0 0 8px; }
.wl-sp-item-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-3); }
.wl-sp-item-meta .is-overdue { color: var(--wl-danger-text); font-weight: 600; }
.wl-sp-item-image { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; }
.wl-sp-resolve { flex: none; align-self: center; }

.wl-sp-prose { max-height: 220px; overflow-y: auto; }
.wl-sp-prose img { max-width: 100%; height: auto; border-radius: 8px; }

.wl-sp-chip {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: var(--text-xs); font-weight: 600; background: var(--bg-nested); color: var(--fg-2);
}
/* Semantic chips lose the tint for the same reason as the priority badges:
   the fill was an unverified surface that lightened the panel underneath and
   took the text out of AAA. Dot plus colour, on the bare panel.

   The neutral chip above keeps its --bg-nested fill: that is a real surface in
   the matrix, and a chip with no status is not a status mark. */
.wl-sp-chip--urgent,
.wl-sp-chip--high,
.wl-sp-chip--agent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    background: none;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: var(--text-2xs);
}

.wl-sp-chip--urgent::before,
.wl-sp-chip--high::before,
.wl-sp-chip--agent::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.wl-sp-chip--urgent { color: var(--wl-danger-text); }
.wl-sp-chip--high   { color: var(--wl-warning-text); }
.wl-sp-chip--agent  { color: var(--wl-wave-deep); }

/* ── Sign-off rows ────────────────────────────────────────── */
.wl-sp-signrow {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid var(--border-1);
}
.wl-sp-signoffs { display: flex; flex-direction: column; gap: 8px; }
.wl-sp-signoff-count { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); }
.wl-sp-avatars { display: flex; gap: 5px; flex-wrap: wrap; }
.wl-sp-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: 700;
    background: var(--bg-nested); color: var(--fg-3);
    border: 1px solid var(--border-2);
}
.wl-sp-avatar.is-done {
    background: var(--wl-skog); color: var(--wl-lin); border-color: transparent;
}

.wl-sp-qr { display: flex; align-items: center; gap: 10px; max-width: 260px; }
.wl-sp-qr img { border-radius: 6px; background: #FBFAFA; padding: 4px; flex: none; }
.wl-sp-qr span { font-size: var(--text-sm); line-height: 1.45; color: var(--fg-3); }

/* ── Weather detail ───────────────────────────────────────── */
.wl-sp-weather-now { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.wl-sp-weather-now .wl-sp-wicon { width: 40px; height: 40px; color: var(--fg-2); }
.wl-sp-weather-now-temp {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-4xl); font-weight: 700; line-height: 1; color: var(--fg-1);
}
.wl-sp-weather-now-cond { font-size: var(--text-md); color: var(--fg-3); }
.wl-sp-weather-range { margin-left: auto; display: flex; flex-direction: column; gap: 2px;
                       font-size: var(--text-sm); color: var(--fg-3); text-align: right; }

.wl-sp-hours { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.wl-sp-hour {
    flex: 1 0 46px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 4px; border-radius: 10px; border: 1px solid transparent;
}
.wl-sp-hour.is-past { opacity: .45; }
.wl-sp-hour.is-now { border-color: var(--wl-wave); background: var(--wl-wave-dim); opacity: 1; }
.wl-sp-hour-temp { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.wl-sp-hour-bar { height: 46px; width: 8px; display: flex; align-items: flex-end;
                  background: var(--border-1); border-radius: 4px; overflow: hidden; }
.wl-sp-hour-bar span { display: block; width: 100%; background: var(--wl-wave-dark); border-radius: 4px; }
.wl-sp-hour .wl-sp-wicon { width: 16px; height: 16px; color: var(--fg-3); }
.wl-sp-hour-label { font-size: var(--text-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* ── Results panel ────────────────────────────────────────── */
.wl-sp-sellers { margin-top: 26px; }
.wl-sp-sellers-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.wl-sp-sellers-title {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-xl); font-weight: 700; margin: 0; color: var(--fg-1);
}
.wl-sp-series { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wl-sp-series-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); color: var(--fg-2); cursor: pointer;
}
.wl-sp-series-toggle input { accent-color: var(--wl-wave-deep); }
.wl-sp-sellers-chart { height: 340px; }

/* ── Full-screen panel chrome ─────────────────────────────── */

.wl-board {
    /* Resets the design system body padding: these bands run to the screen edge. */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-canvas);
    color: var(--fg-1);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

.wl-board-main { padding: 0; }

/* The panel fills the screen, so its own max-width goes: on a 55" board a 1180px column
   would leave two thirds of the wall empty. */
.wl-board-main .wl-sp { max-width: none; }

/* A hairline strip, not a banner: present enough that nobody mistakes generated figures
   for real ones, quiet enough that it does not become the first thing on the board. */
.wl-board-demo {
    padding: 3px 16px; text-align: center;
    background: rgba(245, 198, 116, .16);
    color: var(--fg-2);
    font-size: var(--text-2xs); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
}

/* Controls fade back until the screen is used — a board nobody is standing at should show
   figures, not buttons. */
.wl-board-controls {
    position: fixed; right: 18px; bottom: 18px; z-index: 40;
    display: flex; gap: 8px; opacity: .25;
    transition: opacity var(--dur-hover) var(--ease-product);
}
.wl-board-controls:hover, .wl-board-controls:focus-within { opacity: 1; }

.wl-board-ctl {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-2);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-card); color: var(--fg-2); cursor: pointer;
}
.wl-board-ctl:hover { color: var(--fg-1); border-color: var(--wl-wave); }
.wl-board-ctl svg { width: 18px; height: 18px; }

/* ── Sign-off avatars that are tappable ───────────────────── */
.wl-sp-avatar--action {
    font-family: var(--font-sans); cursor: pointer;
    transition: transform var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product);
}
.wl-sp-avatar--action:hover:not([disabled]) { border-color: var(--wl-wave); }
.wl-sp-avatar--action[disabled] { cursor: default; }
.wl-sp-avatar--action:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.wl-sp-avatar.is-picked { box-shadow: 0 0 0 3px var(--wl-wave-ring); border-color: var(--wl-wave); }

.wl-sp-avatars--lg { gap: 8px; }
.wl-sp-avatars--lg .wl-sp-avatar { width: 44px; height: 44px; font-size: var(--text-lg); }

.wl-sp-hint { font-size: var(--text-xs); color: var(--fg-3); }

/* ── Training taken on the board ──────────────────────────── */
.wl-sp-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 0 0 12px;
    color: var(--fg-3); font-family: var(--font-sans); font-size: var(--text-md); cursor: pointer;
}
.wl-sp-back:hover { color: var(--fg-1); }
.wl-sp-back svg { width: 13px; height: 13px; }

.wl-sp-training-body { max-height: none; margin-bottom: 18px; }
/* Training material needs room to breathe: each block is a separate thing to read, and
   they were running together. */
.wl-sp-resource {
    margin: 0 0 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border-1);
}
.wl-sp-resource:last-of-type { border-bottom: 0; }
.wl-sp-resource-title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 10px; color: var(--fg-1); }

.wl-sp-training-body { margin-bottom: 26px; }

/* An external link that looks like one: icon, destination, and the fact that it leaves. */
.wl-sp-extlink {
    display: inline-flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: var(--r-md, 12px);
    border: 1px solid var(--border-2); background: var(--bg-card);
    color: var(--fg-1); text-decoration: none;
    font-size: var(--text-lg); font-weight: 600;
    transition: border-color var(--dur-hover) var(--ease-product);
}
.wl-sp-extlink:hover { border-color: var(--wl-wave); }
.wl-sp-extlink svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--wl-wave-deep); }
.wl-sp-extlink-note { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--fg-3); margin-top: 2px; }

.wl-sp-video { position: relative; padding-bottom: 52%; height: 0; border-radius: 10px; overflow: hidden; }
.wl-sp-video iframe, .wl-sp-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.wl-sp-who { margin: 30px 0; padding-top: 24px; border-top: 1px solid var(--border-1); }
.wl-sp-quiz { padding-top: 24px; border-top: 1px solid var(--border-1); }

.wl-sp-question { margin-bottom: 18px; }
.wl-sp-question-text { font-size: var(--text-lg); font-weight: 600; margin: 0 0 10px; color: var(--fg-1); }
.wl-sp-options { display: flex; flex-direction: column; gap: 8px; }
.wl-sp-option {
    display: flex; align-items: center; gap: 10px; min-height: 46px;
    padding: 10px 14px; border: 1px solid var(--border-2); border-radius: 10px;
    font-size: var(--text-lg); color: var(--fg-2); cursor: pointer;
}
.wl-sp-option input { width: 18px; height: 18px; flex: none; accent-color: var(--wl-wave-deep); }
.wl-sp-option:has(input:checked) { border-color: var(--wl-wave); background: var(--wl-wave-dim); color: var(--fg-1); }

.wl-sp-result {
    margin: 14px 0 0; padding: 12px 14px; border-radius: 10px;
    background: var(--wl-wave-dim); color: var(--fg-1); font-size: var(--text-lg); font-weight: 500;
}

.wl-sp-open-training { align-self: flex-start; margin-bottom: 12px; }

/* ── Sales development ────────────────────────────────────── */
.wl-sp-daily { margin-top: 26px; }
.wl-sp-daily-chart { height: 320px; }

.wl-sp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-3); }
.wl-sp-key { display: inline-flex; align-items: center; gap: 6px; }
.wl-sp-key::before {
    content: ""; width: 16px; height: 0; flex: none;
    border-top-width: 2.4px; border-top-style: solid;
}
.wl-sp-key--rev::before   { border-color: var(--wl-wave); }
.wl-sp-key--revb::before  { border-color: var(--wl-wave); border-top-style: dashed; }
.wl-sp-key--prof::before  { border-color: #8FA6C4; }
.wl-sp-key--profb::before { border-color: #8FA6C4; border-top-style: dashed; }

/* ── Panel: theme and demo chips beside the weather ───────── */
.wl-sp-chip-btn {
    width: 38px; height: 38px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--border-2); background: var(--bg-card);
    color: var(--fg-2); cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-product),
                color var(--dur-hover) var(--ease-product);
}
.wl-sp-chip-btn:hover { border-color: var(--wl-wave); color: var(--fg-1); }
.wl-sp-chip-btn:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.wl-sp-chip-btn svg { width: 17px; height: 17px; }

/* Demo on: amber, because the board is not showing this store's real numbers. */
.wl-sp-chip-btn.is-on {
    border-color: var(--wl-warning);
    background: rgba(245, 198, 116, .18);
    color: var(--fg-1);
}

/* One icon per theme, swapped by the attribute the toggle sets. */
.wl-sp-icon-light { display: none; }
[data-wl-theme="dark"] .wl-sp-icon-dark { display: none; }
[data-wl-theme="dark"] .wl-sp-icon-light { display: inline; }

/* ── Full-screen state ────────────────────────────────────── */
.wl-board-fs-exit { display: none; }
.wl-board-ctl.is-on .wl-board-fs-enter { display: none; }
.wl-board-ctl.is-on .wl-board-fs-exit { display: inline; }

/* Idle controls are faint; in full screen they are the only way out, so they stay legible
   and name themselves. */
.wl-board-controls { align-items: center; }
.wl-board-controls.is-fullscreen { opacity: .85; }
.wl-board-controls.is-fullscreen .wl-board-ctl { border-color: var(--wl-wave); color: var(--fg-1); }

.wl-board-exit-label {
    display: none; order: -1;
    padding: 6px 10px; border-radius: 8px;
    background: var(--bg-card); border: 1px solid var(--border-2);
    font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); white-space: nowrap;
}
.wl-board-controls.is-fullscreen .wl-board-exit-label { display: inline-block; }

/* ── Demo switch, with the corner controls ────────────────── */

.wl-board-demo-switch {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 12px;
    border-radius: 10px; border: 1px solid var(--border-2);
    background: var(--bg-card); color: var(--fg-3);
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: .04em; cursor: pointer;
    transition: color var(--dur-hover) var(--ease-product),
                border-color var(--dur-hover) var(--ease-product);
}
.wl-board-demo-switch:hover { color: var(--fg-1); border-color: var(--border-2); }
.wl-board-demo-switch:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

/* The track carries the state, so the label can stay quiet. */
.wl-board-demo-track {
    width: 26px; height: 15px; flex: none; position: relative;
    border-radius: 999px; background: var(--border-2);
    transition: background var(--dur-hover) var(--ease-product);
}
.wl-board-demo-track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--bg-card);
    transition: transform var(--dur-hover) var(--ease-product);
}

.wl-board-demo-switch.is-on {
    border-color: var(--wl-warning);
    color: var(--fg-1);
}
.wl-board-demo-switch.is-on .wl-board-demo-track { background: var(--wl-warning); }
.wl-board-demo-switch.is-on .wl-board-demo-track::after { transform: translateX(11px); }

/* Skeletons inside a drill-in sheet: same placeholders the progressive dashboards use,
   spaced for the sheet rather than a full page. */
.wl-sp-skeletons { display: flex; flex-direction: column; gap: 12px; }
.wl-sp-skeletons .wl-skel-card { padding: 16px 18px; }
.wl-sp-skeletons .wl-skel-chart { height: 120px; }

/* The pulse stops claiming the board is live once a refresh has failed. */
.wl-sp-pulse.is-stale { background: var(--wl-warning); animation: none; }

/* ══════════════════════════════════════════════════════════════
   COMMUNICATION — tasks, information and training
   ══════════════════════════════════════════════════════════════ */

.wl-comm-tabs { margin-bottom: 18px; }

/* The count is why the tab is worth clicking, so it travels with the label. */
.wl-comm-tabcount {
    display: inline-block; margin-left: 5px;
    padding: 1px 6px; border-radius: 999px;
    background: var(--bg-nested); color: var(--fg-3);
    font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.wl-period-btn--active .wl-comm-tabcount { background: var(--wl-wave-dim); color: var(--wl-wave-deep); }

.wl-comm-title { font-weight: 600; color: var(--fg-1); }

.wl-comm-done { opacity: .55; }
.wl-comm-done .wl-comm-title { text-decoration: line-through; }

.wl-comm-overdue { color: var(--wl-danger-text); font-weight: 600; }

/* ── Cards for information and training ───────────────────── */
.wl-comm-list { display: flex; flex-direction: column; gap: 14px; }

.wl-comm-card {
    padding: 20px 22px; border-radius: var(--r-lg, 14px);
    background: var(--bg-card); border: 1px solid var(--border-1);
}
.wl-comm-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 10px;
}
.wl-comm-card-title {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-xl); font-weight: 700; letter-spacing: -.015em;
    margin: 0; color: var(--fg-1);
}
.wl-comm-card-meta { margin: 3px 0 0; font-size: var(--text-sm); color: var(--fg-3); }
.wl-comm-card-body { font-size: var(--text-lg); line-height: 1.6; color: var(--fg-2); margin: 0 0 14px; }

/* ── Progress ─────────────────────────────────────────────── */
.wl-comm-progress {
    display: flex; flex-direction: column; gap: 9px;
    padding-top: 14px; border-top: 1px solid var(--border-1);
}
.wl-comm-progress-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-comm-progress-count { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); }
.wl-comm-progress-note { font-size: var(--text-sm); color: var(--fg-3); }

/* ── Create dialog forms ──────────────────────────────────── */
.wl-comm-form .wl-form-section { margin-top: 22px; }

.wl-comm-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.wl-comm-row { display: flex; align-items: center; gap: 8px; }
.wl-comm-row .wl-form-input { flex: 1; min-width: 0; }
.wl-comm-row .wl-form-select { flex: 0 0 150px; }

.wl-comm-question {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; border-radius: var(--r-md, 12px);
    background: var(--bg-nested); border: 1px solid var(--border-1);
}
.wl-comm-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.wl-comm-option { display: flex; align-items: center; gap: 8px; }
.wl-comm-option input[type="radio"] { flex: none; accent-color: var(--wl-wave-deep); }

/* Priority chips reuse the store panel's, plus the two levels tasks add. */
.wl-sp-chip--medium { background: var(--bg-nested); color: var(--fg-2); }
.wl-sp-chip--low    { background: var(--bg-nested); color: var(--fg-3); }
.wl-sp-chip--normal { background: var(--bg-nested); color: var(--fg-2); }

/* Card actions sit below the progress row: what you can do about an item comes after
   seeing how it is doing. */
.wl-comm-card-actions {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border-1);
}
.wl-comm-card-actions .wl-admin-row-action { margin-left: auto; }

/* A task row opens the task. The pointer and hover say so before the click proves it.
   Named apart from .wl-comm-row, which is the flex row of form controls in the training
   dialog — sharing that name turned every <tr> into a flex container and detached the cells
   from the table columns entirely. */
.wl-comm-task-row { cursor: pointer; }
.wl-comm-task-row:hover { background: var(--bg-nested); }
.wl-comm-task-row .wl-form-select,
.wl-comm-task-row .wl-btn { cursor: default; }

/* The task modal's assignee hint — the class did not exist, since no field had one before. */
.wl-modal-hint {
    display: block; margin-top: 6px;
    font-size: var(--text-sm); line-height: 1.45; color: var(--fg-3);
}

/* "Include tasks created by me" — a scope switch above the tabs, quiet enough not to compete
   with them but close enough to read as part of the same control group. */
.wl-tasks-scope {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px 0;
    font-size: var(--text-sm); color: var(--fg-2); cursor: pointer;
}
.wl-tasks-scope input { accent-color: var(--wl-wave-deep); }

/* The assignee control sits in a 210px column. Left at the form control's full width it
   stretched that column and squeezed Priority, Due and Status out from under their own
   headers — the table still lined up, but nothing looked like it belonged to its heading. */
.wl-comm-assignee {
    max-width: 200px;
    font-size: var(--text-sm);
    padding-top: 6px; padding-bottom: 6px;
}

/* ── Policies ────────────────────────────────────────────────
   The policy editor holds a trigger, conditions and actions at once,
   so it needs more width than the task modal it otherwise matches. */
.wl-modal--wide {
    max-width: 780px;
    width: calc(100vw - 48px);
}

/* Checkbox with its label on one line, used for rule and store lists
   where there may be dozens stacked. */
.wl-form-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: var(--text-md);
    line-height: 1.45;
    cursor: pointer;
}

.wl-form-check input[type="checkbox"] {
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--wl-wave-dark);
    cursor: pointer;
}

/* ── Chat attachments ────────────────────────────────────────
   Cards under a reply for things the tools returned rather than the
   model composed — a transaction with its footage, a counting series. */
.wl-att-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wl-att {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--border-1);
    border-radius: 11px;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
}

.wl-att--link:hover {
    border-color: var(--wl-wave-dark);
    background: var(--wl-wave-dim);
}

.wl-att-icon {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--wl-wave-dim);
    color: var(--wl-wave-deep);
}

.wl-att-icon svg { width: 16px; height: 16px; }

.wl-att-body { flex: 1; min-width: 0; }

.wl-att-title {
    display: block;
    font-size: var(--text-md);
    font-weight: 600;
}

.wl-att-sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--fg-3);
    margin-top: 1px;
}

.wl-att-go {
    flex: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--wl-wave-deep);
}

/* The counting card stacks rather than sitting in a row. */
.wl-att--chart { flex-direction: column; align-items: stretch; gap: 3px; }

.wl-att-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 54px;
    margin-top: 9px;
}

/* Bars share the width however many there are, so an hour and a day both fit. */
.wl-att-bar {
    flex: 1;
    min-width: 2px;
    background: var(--wl-wave-dark);
    border-radius: 2px 2px 0 0;
    opacity: .85;
}

.wl-att-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-2xs);
    color: var(--fg-3);
    margin-top: 5px;
}

/* ── Camera viewer ───────────────────────────────────────────
   Opened over whatever the user was doing — the chat, a report — so
   they never lose their place to watch ten seconds of footage. */
.wl-cv {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
}

.wl-cv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 9, .62);
}

.wl-cv-panel {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(10, 10, 9, .28);
}

.wl-cv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-1);
}

.wl-cv-title { font-size: var(--text-lg); font-weight: 700; }
.wl-cv-sub   { font-size: var(--text-xs); color: var(--fg-3); margin-top: 2px; }

/* Same stacking rule as the Cameras page: children share one grid cell, or
   the video lands below the frame and overflow hides it entirely. */
.wl-cv-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0b0e13;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.wl-cv-frame > * { grid-area: 1 / 1; width: 100%; height: 100%; }
.wl-cv-frame img,
.wl-cv-frame video { object-fit: contain; }


/* Shown over the still while the stream is being built. Scrimmed rather than
   opaque so the frame stays faintly visible underneath — it is the same moment
   being loaded, and hiding it entirely reads as the picture having been lost. */
.wl-cv-loading {
    display: grid;
    place-items: center;
    background: rgba(11, 14, 19, .72);
    z-index: 2;
}

.wl-cv-loading[hidden] { display: none; }

.wl-cv-loading-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    padding: 20px;
    max-width: 330px;
}

.wl-cv-loading-t { font-size: var(--text-lg); font-weight: 600; color: #fff; }

.wl-cv-loading-s { font-size: var(--text-sm); line-height: 1.5; color: rgba(255, 255, 255, .62); }

.wl-cv-spin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .22);
    border-top-color: var(--wl-wave, #3EA764);
    animation: wlSpin 0.9s linear infinite;
    margin-bottom: 2px;
}

/* Honours a viewer who has asked for less motion: the spinner becomes a
   pulse rather than disappearing, so the wait is still visibly a wait. */
@media (prefers-reduced-motion: reduce) {
    .wl-cv-spin { animation: wl-sp-pulse 1.4s ease-in-out infinite; }
}

.wl-cv-placeholder {
    color: rgba(255, 255, 255, .55);
    font-size: var(--text-md);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 20px;
}

.wl-cv-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.wl-cv-status { font-size: var(--text-xs); color: var(--fg-3); }

/* Thumbnail on an attachment card. */
.wl-att-thumb {
    width: 64px;
    height: 36px;
    flex: none;
    border-radius: 6px;
    overflow: hidden;
    background: #0b0e13;
    display: grid;
    place-items: center;
}

.wl-att-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* The cards are buttons now, not links — reset what that brings with it. */
button.wl-att {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* ── Attachment card with two actions ────────────────────────
   The card stopped being one button when it gained a second action —
   a button cannot contain another. The body is the primary target,
   the actions sit beside it. */
.wl-att-main {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.wl-att-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* .wl-att-go is a button now as well as a label, so it needs resetting. */
button.wl-att-go {
    border: 1px solid var(--border-2);
    background: var(--bg-nested);
    border-radius: 999px;
    padding: 5px 11px;
    cursor: pointer;
}

button.wl-att-go:hover { border-color: var(--wl-wave-dark); }

/* The secondary action reads as secondary. */
.wl-att-go--quiet { color: var(--fg-2); }

/* ── Receipt ─────────────────────────────────────────────────
   Shares the camera viewer's modal frame; only the body differs. */
.wl-rc-panel { width: min(620px, 100%); }

.wl-rc-body {
    padding: 4px 16px 12px;
    overflow-y: auto;
    max-height: 60vh;
}

.wl-rc-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }

.wl-rc-table th {
    text-align: left;
    font-size: var(--text-2xs);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fg-3);
    font-weight: 700;
    padding: 9px 6px;
    border-bottom: 1px solid var(--border-1);
}

.wl-rc-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-1); }
.wl-rc-table tfoot td { border-bottom: 0; padding-top: 11px; }
.wl-rc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.wl-rc-group { display: block; font-size: var(--text-xs); color: var(--fg-3); margin-top: 1px; }

/* A returned line should be legible as one at a glance, without a legend. */
.wl-rc-returned td { color: var(--wl-danger-text); }

.wl-rc-empty { padding: 26px 8px; text-align: center; color: var(--fg-3); font-size: var(--text-md); }

/* ── Predefined Ask questions ────────────────────────────────────────────
   The list that stands in for a composer when a package sells the chat as a
   fixed set of questions. Laid out as a column of full-width buttons rather
   than chips: these are sentences, and a wrapped chip row reads as debris. */
.wl-ask-preset-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl-ask-preset {
    width: 100%;
    padding: 9px 12px;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--fg-1);
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-product),
                background var(--dur-hover) var(--ease-product);
}

.wl-ask-preset:hover {
    border-color: var(--wl-wave);
    background: var(--bg-card-hover, var(--bg-card));
}

/* ════════════════════════════════════════════════════════════════════════
   READOUT — the design system's signature in product.

   A label in 9.5px caps ABOVE the value in mono, always that order, often in
   a row with 1px dividers between. Copied value-for-value from
   `TS Design System/base/type.css` so the portal and the system cannot drift.

   Why mono for the value: every number that changes is set with tabular-nums
   so the digits do not jump as it updates. And why nowrap: a measured value
   and its unit are never broken across lines — which is also why a row of
   these wraps rather than shrinks. A flex item's min-width floors on its
   widest word, so "41 dager" would otherwise break to "41" / "dager".
   ════════════════════════════════════════════════════════════════════════ */

.wl-readout {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wl-readout__k {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-3);
    line-height: 1.2;
}

.wl-readout__v {
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
    line-height: 1.3;
}

/* fosfor-500 on light, fosfor-200 on dark — both carry text at AAA. */
.wl-readout__v--accent { color: var(--fg-accent); }

/* The row: thin dividers, wrapping rather than shrinking. */
.wl-readout-row {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.wl-readout-row > .wl-readout {
    flex: 1 1 auto;
    padding: 11px 13px;
    border-left: 1px solid var(--border-1);
}

.wl-readout-row > .wl-readout:first-child { border-left: none; }

/* ── Metrics ─────────────────────────────────────────────────────────────
   The display scale appears once per screen at most: one hero metric, and
   only where a single number is the point of the view. */

.wl-metric-xl {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

.wl-metric-l {
    font-family: var(--font-sans);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

.wl-metric {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.1;
    font-feature-settings: "tnum";
    white-space: nowrap;
}