/* Hallmark · product samples: the UtilityCloud webclient (uc-frontend apps/webclient) rebuilt 1:1 from its own tokens, faces and radii; scoped to .app */
:root {
  --app-canvas: oklch(0.975 0.004 268); --app-bg: oklch(1 0 0); --app-fg: oklch(0.205 0.02 268);
  --app-card: oklch(1 0 0); --app-muted: oklch(0.967 0.005 268); --app-muted-fg: oklch(0.51 0.018 268);
  --app-secondary: oklch(0.962 0.006 268); --app-accent: oklch(0.955 0.012 273);
  --app-primary: oklch(0.51 0.211 273.1); --app-primary-fg: oklch(0.99 0.005 273); --app-primary-solid: oklch(0.51 0.211 273.1);
  --app-border: oklch(0.925 0.006 268); --app-input: oklch(0.885 0.009 268);
  --app-success: oklch(0.5 0.125 155); --app-success-subtle: oklch(0.97 0.025 155); --app-warning: oklch(0.54 0.13 65); --app-warning-subtle: oklch(0.97 0.04 75); --app-destructive: oklch(0.55 0.205 25); --app-destructive-subtle: oklch(0.97 0.02 25);
  --app-chart-1: oklch(0.55 0.2 273); --app-chart-2: oklch(0.68 0.13 230); --app-chart-3: oklch(0.7 0.12 175); --app-chart-4: oklch(0.78 0.14 75);
  --app-sidebar-fg: oklch(0.37 0.02 268); --app-sidebar-accent: oklch(0.94 0.008 268);
  --app-wattson: oklch(0.64 0.12 280); --app-wattson-fg: oklch(0.99 0.005 273);
  --app-elev-panel: 0 0 0 1px oklch(0.3 0.03 268 / 0.06), 0 1px 2px 0 oklch(0.3 0.03 268 / 0.05), 0 4px 16px -4px oklch(0.3 0.03 268 / 0.06);
  --app-elev-raised: 0 0 0 1px oklch(0.3 0.03 268 / 0.07), 0 1px 2px 0 oklch(0.3 0.03 268 / 0.06);
  --app-font: "Inter", ui-sans-serif, system-ui, sans-serif; --app-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --app-radius: 10px;
  --app-ring-a: hsl(249 64% 73%); --app-ring-b: hsl(258 100% 87%); --app-ring-c: hsl(234 36% 45%);
  --app-elev-card: 0 1px 2px oklch(0.3 0.03 268 / 0.05); --app-elev-float: 0 24px 48px -24px oklch(0.3 0.05 268 / 0.25);
}

[data-mode="dark"] {
  --app-canvas: oklch(0.17 0.01 268); --app-bg: oklch(0.2 0.011 268); --app-fg: oklch(0.965 0.004 268);
  --app-card: oklch(0.225 0.012 268); --app-muted: oklch(0.265 0.012 268); --app-muted-fg: oklch(0.715 0.016 268);
  --app-secondary: oklch(0.27 0.012 268); --app-accent: oklch(0.28 0.02 273);
  --app-primary: oklch(0.66 0.165 274); --app-primary-solid: oklch(0.55 0.2 274);
  --app-border: oklch(0.32 0.012 268); --app-input: oklch(0.36 0.012 268);
  --app-success: oklch(0.74 0.14 158); --app-success-subtle: oklch(0.3 0.05 158); --app-warning: oklch(0.8 0.13 75); --app-warning-subtle: oklch(0.3 0.05 75); --app-destructive: oklch(0.7 0.17 22); --app-destructive-subtle: oklch(0.3 0.06 22);
  --app-chart-1: oklch(0.68 0.16 273); --app-chart-2: oklch(0.74 0.12 230); --app-chart-3: oklch(0.76 0.12 175); --app-chart-4: oklch(0.82 0.13 75);
  --app-sidebar-fg: oklch(0.8 0.012 268); --app-sidebar-accent: oklch(0.24 0.012 268);
  --app-elev-panel: 0 0 0 1px oklch(0.4 0.01 268 / 0.5), 0 8px 24px -8px oklch(0.05 0.01 268 / 0.4);
  --app-elev-raised: 0 0 0 1px oklch(0.4 0.01 268 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --app-canvas: oklch(0.17 0.01 268); --app-bg: oklch(0.2 0.011 268); --app-fg: oklch(0.965 0.004 268);
    --app-card: oklch(0.225 0.012 268); --app-muted: oklch(0.265 0.012 268); --app-muted-fg: oklch(0.715 0.016 268);
    --app-secondary: oklch(0.27 0.012 268); --app-accent: oklch(0.28 0.02 273);
    --app-primary: oklch(0.66 0.165 274); --app-primary-solid: oklch(0.55 0.2 274);
    --app-border: oklch(0.32 0.012 268); --app-input: oklch(0.36 0.012 268);
    --app-success: oklch(0.74 0.14 158); --app-success-subtle: oklch(0.3 0.05 158); --app-warning: oklch(0.8 0.13 75); --app-warning-subtle: oklch(0.3 0.05 75); --app-destructive: oklch(0.7 0.17 22); --app-destructive-subtle: oklch(0.3 0.06 22);
    --app-chart-1: oklch(0.68 0.16 273); --app-chart-2: oklch(0.74 0.12 230); --app-chart-3: oklch(0.76 0.12 175); --app-chart-4: oklch(0.82 0.13 75);
    --app-sidebar-fg: oklch(0.8 0.012 268); --app-sidebar-accent: oklch(0.24 0.012 268);
    --app-elev-panel: 0 0 0 1px oklch(0.4 0.01 268 / 0.5), 0 8px 24px -8px oklch(0.05 0.01 268 / 0.4);
    --app-elev-raised: 0 0 0 1px oklch(0.4 0.01 268 / 0.45);
  }

}

/* ---------- the app shell slice ---------- */
.app { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; border-radius: var(--radius-card); background: var(--app-canvas); color: var(--app-fg); font: 400 14px/1.5 var(--app-font); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-align: left; overflow: hidden; outline: 1px solid var(--color-rule-strong); outline-offset: -1px; }

.app__rail { display: grid; align-content: start; justify-items: center; gap: var(--space-2xs); padding-top: var(--space-xs); color: var(--app-sidebar-fg); }

.app__tenant { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--space-sm); border-radius: var(--app-radius); background: var(--app-primary-solid); color: var(--app-primary-fg); font-weight: 600; font-size: 14px; }

.app__rail i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; }

.app__rail i.is-on { background: var(--app-bg); color: var(--app-primary); box-shadow: var(--app-elev-raised); }

.app__rail svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); min-width: 0; }

.app__page { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 14px; background: var(--app-bg); box-shadow: var(--app-elev-panel); overflow: hidden; }

.app__top { display: flex; align-items: center; gap: var(--space-sm); height: 56px; padding: 0 20px; border-bottom: 1px solid var(--app-border); }

.app__search { flex: 1; max-width: 22rem; display: flex; align-items: center; gap: var(--space-xs); height: 32px; padding: 0 10px; border: 1px solid var(--app-input); border-radius: 8px; color: var(--app-muted-fg); font-size: 13px; }

.app__search svg, .app__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app__help { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; margin-left: auto; border: 1.5px solid transparent; border-radius: var(--app-radius); background-image: linear-gradient(var(--app-bg), var(--app-bg)), conic-gradient(from var(--app-ring-angle), var(--app-ring-a), var(--app-ring-b), var(--app-ring-c), var(--app-ring-b), var(--app-ring-a)); background-origin: border-box; background-clip: padding-box, border-box; color: var(--app-primary); font-size: 13px; font-weight: 500; animation: app-ring 6s linear infinite; }

.app__help[data-open] { background-image: linear-gradient(color-mix(in oklab, var(--app-primary) 16%, var(--app-bg)), color-mix(in oklab, var(--app-primary) 16%, var(--app-bg))), conic-gradient(from var(--app-ring-angle), var(--app-ring-a), var(--app-ring-b), var(--app-ring-c), var(--app-ring-b), var(--app-ring-a)); }
/* the ring turns like the Ask AI button in the product's top bar */
@property --app-ring-angle { syntax: "<angle>"; inherits: false; initial-value: 40deg; }
@keyframes app-ring { from { --app-ring-angle: 40deg; } to { --app-ring-angle: 400deg; } }
@media (prefers-reduced-motion: reduce) { .app__help { animation: none; } }

.app__icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--app-muted-fg); }

.app__avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--app-primary-solid); color: var(--app-primary-fg); font-size: 11px; font-weight: 600; }

.app__content { display: grid; align-content: start; gap: var(--space-md); padding: 20px var(--space-lg); min-width: 0; }

.app-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.app-title b { font-size: 20px; font-weight: 600; color: var(--app-fg); }
.app-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-sm); border-radius: var(--app-radius); background: var(--app-primary-solid); color: var(--app-primary-fg); font-size: 13px; font-weight: 500; }

.app-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--app-secondary); color: var(--app-muted-fg); font-size: 11.5px; font-weight: 500; white-space: nowrap; }

.app-badge--ok { background: var(--app-success-subtle); color: var(--app-success); }

.app-badge--warn { background: var(--app-warning-subtle); color: var(--app-warning); }

.app__tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--app-border); font-size: 13px; color: var(--app-muted-fg); }

.app__tabs span { padding-bottom: var(--space-xs); border-bottom: 2px solid transparent; white-space: nowrap; }

.app__tabs span.is-on { color: var(--app-fg); font-weight: 500; border-bottom-color: var(--app-primary); }

.app-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }

.app-table th { padding: var(--space-xs) 10px; border-bottom: 1px solid var(--app-border); background: var(--app-muted); color: var(--app-muted-fg); font-weight: 500; font-size: 12px; text-align: left; white-space: nowrap; }

.app-table th:first-child { border-radius: 8px 0 0 0; } 
.app-table th:last-child { border-radius: 0 8px 0 0; }
.app-table td { padding: 9px 10px; border-bottom: 1px solid var(--app-border); white-space: nowrap; }

.app-table .r { text-align: right; }

.app-table tr.is-flag td { background: color-mix(in oklab, var(--app-destructive) 7%, var(--app-bg)); }

.app__view[hidden] { display: none; }

/* ---------- the Wattson panel (WattsonPanel.tsx) ---------- */
.wa { display: flex; flex-direction: column; width: 400px; min-width: 0; border-radius: 14px; background: var(--app-card); color: var(--app-fg); box-shadow: var(--app-elev-panel); overflow: hidden; font: 400 14px/1.5 var(--app-font); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-align: left; }

.wa__head { display: flex; align-items: center; gap: var(--space-xs); padding: 10px var(--space-xs) 10px 14px; border-bottom: 1px solid var(--app-border); }

.wa__mark { width: 28px; height: 28px; flex: none; color: var(--app-primary); fill: currentColor; }

.wa__who { flex: 1; min-width: 0; }

.wa__who b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }

.wa__who span { display: block; font-size: 11px; color: color-mix(in oklab, var(--app-fg) 70%, transparent); }

.wa__tools { display: flex; gap: var(--space-2xs); color: var(--app-muted-fg); }

.wa__tools i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }

.wa__tools svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wa__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); min-height: 0; padding: var(--space-md); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--app-border) transparent; font-size: 14px; }

.wa__body > :first-child { margin-top: auto; }

.wa__composer { display: flex; gap: var(--space-xs); padding: var(--space-sm); border-top: 1px solid var(--app-border); }

.wa__input { flex: 1; min-height: 40px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--app-input); border-radius: var(--app-radius); color: var(--app-muted-fg); font-size: 14px; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.wa__input.is-typing { color: var(--app-fg); border-color: color-mix(in oklab, var(--app-primary) 55%, transparent); }

.wa__input.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--app-fg); }

.wa__send { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--app-radius); background: var(--app-accent); color: var(--app-card); transition: background-color var(--dur-short) var(--ease-out); }

.wa__send.is-ready { background: var(--app-wattson); color: var(--app-wattson-fg); }

.wa__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wa-welcome { display: flex; flex-direction: column; align-items: center; padding: var(--space-sm) var(--space-2xs); text-align: center; }

.wa-welcome__tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--app-radius); background: var(--app-primary-solid); color: var(--app-primary-fg); }

.wa-welcome__tile svg { width: 40px; height: 40px; fill: currentColor; }

.wa-welcome b { margin-top: var(--space-md); font-size: 17px; font-weight: 700; }

.wa-welcome p { margin-top: var(--space-xs); font-size: 13px; }

.wa-welcome ul { display: grid; gap: 10px; width: 100%; margin-top: 20px; list-style: none; }

.wa-welcome li { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--app-border); border-radius: var(--radius-pill); color: var(--app-muted-fg); font-size: 13px; }

.wa-user { align-self: flex-end; max-width: 85%; padding: var(--space-xs) var(--space-sm); border-radius: 12px 12px 2px 12px; background: var(--app-primary-solid); color: var(--app-primary-fg); font-size: 14px; }

.wa-turn { display: flex; flex-direction: column; gap: var(--space-xs); }

.wa-meta { font-size: 12px; color: var(--app-muted-fg); }

.wa-status { display: flex; align-items: center; gap: var(--space-xs); font-size: 14px; color: var(--app-muted-fg); }

.wa-status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--app-primary); animation: wa-pulse 1.2s var(--ease-in-out) infinite; }

@keyframes wa-pulse { 50% { opacity: 0.35; } }
.wa-prose { line-height: 1.625; }

.wa-prose > * + * { margin-top: 10px; }

.wa-prose ol { margin-top: 10px; }

.wa-prose ol, .wa-prose ul { padding-left: 20px; }

.wa-prose a, .wa-cite { color: var(--app-primary); text-decoration: underline; text-underline-offset: 2px; }

.wa-cite { font-size: 0.85em; vertical-align: 0.1em; }

.wa-word { opacity: 0; }

.wa-word.is-in { opacity: 1; transition: opacity var(--dur-short) var(--ease-out); }

.wa-block { opacity: 1; transform: none; }

.wa-block.is-pending { opacity: 0; transform: translateY(6px); }

.wa-block.is-in { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }

.wa-card { padding: var(--space-sm); border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-card); box-shadow: var(--app-elev-card); }

.wa-card > b { display: block; margin-bottom: var(--space-xs); font-size: 14px; font-weight: 600; }

.wa-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }

.wa-table th { padding: 6px var(--space-xs); border-bottom: 1px solid var(--app-border); color: var(--app-muted-fg); font-weight: 500; text-align: left; white-space: nowrap; }

.wa-table td { padding: 6px var(--space-xs); border-bottom: 1px solid var(--app-border); }

.wa-table tr:last-child td { border-bottom: 0; }

.wa-table .r { text-align: right; white-space: nowrap; }

.wa-sources { margin-top: var(--space-2xs); padding: 10px var(--space-sm); border-radius: var(--app-radius); background: color-mix(in oklab, var(--app-muted) 50%, transparent); font-size: 12px; }

.wa-sources p { margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--app-muted-fg); }

.wa-sources ul { display: grid; gap: var(--space-2xs); list-style: none; }

.wa-sources li { display: flex; gap: 6px; }

.wa-sources li span { color: var(--app-muted-fg); font-variant-numeric: tabular-nums; }

.wa-sources li a { white-space: nowrap; color: var(--app-primary); text-decoration: underline; text-underline-offset: 2px; }

.wa-feedback { display: flex; gap: var(--space-3xs); margin-left: calc(-1 * var(--space-xs)); }

.wa-feedback span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-xs); border-radius: 8px; color: var(--app-muted-fg); font-size: 12px; font-weight: 500; }

.wa-feedback svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wa-choice { display: grid; gap: var(--space-xs); padding: var(--space-sm); border: 1px solid var(--app-border); border-left: 3px solid var(--app-wattson); border-radius: var(--app-radius); }

.wa-choice > b { font-size: 13px; font-weight: 700; }

.wa-choice__opt { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--app-border); border-radius: 8px; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }

.wa-choice__opt b { font-size: 13px; font-weight: 600; }

.wa-choice__opt span { font-size: 12px; color: var(--app-muted-fg); }

.wa-choice__opt.is-on { border-color: var(--app-primary); background: color-mix(in oklab, var(--app-primary) 8%, transparent); color: var(--app-primary); }

.wa-nav { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--app-muted-fg); }

.wa-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-xs); }

.wa-kpi { display: flex; flex-direction: column; gap: var(--space-2xs); }

.wa-kpi small { font-size: 12px; color: var(--app-muted-fg); }

.wa-kpi b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

.wa-kpi em { display: flex; align-items: center; gap: var(--space-2xs); font-style: normal; font-size: 12px; color: var(--app-muted-fg); }

.wa-kpi em strong { color: var(--app-fg); font-weight: 500; font-variant-numeric: tabular-nums; }

.wa-kpi em svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wa-chart { display: grid; gap: var(--space-xs); }

.wa-chart > b { font-size: 13px; font-weight: 600; text-align: center; }

.wa-chart svg { width: 100%; height: auto; overflow: visible; }

.wa-chart .s1 { fill: var(--app-chart-1); } 
.wa-chart .s2 { fill: var(--app-chart-3); } .wa-chart .s3 { fill: var(--app-chart-2); } .wa-chart .s4 { fill: var(--app-chart-4); }
.wa-chart text { fill: var(--app-muted-fg); font: 400 9px var(--app-font); }

.wa-chart line { stroke: var(--app-border); }

.wa-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-sm); font-size: 11px; color: var(--app-muted-fg); }

.wa-legend i { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2xs); border-radius: 2px; }

.wa-legend .s1 { background: var(--app-chart-1); } 
.wa-legend .s2 { background: var(--app-chart-3); } .wa-legend .s3 { background: var(--app-chart-2); } .wa-legend .s4 { background: var(--app-chart-4); }
.wa-bar { transform-box: fill-box; transform-origin: bottom; }

.wa-timeline { position: relative; display: grid; gap: var(--space-sm); padding-left: 22px; list-style: none; }

.wa-timeline::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 4.5px; width: 1px; background: var(--app-border); }

.wa-timeline li { position: relative; display: grid; gap: 1px; }

.wa-timeline li::before { content: ""; position: absolute; top: 6px; left: -22px; width: 10px; height: 10px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--app-fg) 45%, transparent); }

.wa-timeline li.ok::before { background: var(--app-success); } 
.wa-timeline li.warn::before { background: var(--app-warning); } .wa-timeline li.info::before { background: var(--app-primary); }
.wa-timeline small { font-size: 12px; color: var(--app-muted-fg); font-variant-numeric: tabular-nums; }

.wa-timeline b { font-size: 14px; font-weight: 500; }

.wa-timeline span { font-size: 12px; color: var(--app-muted-fg); }

.wa-ticket { display: grid; gap: var(--space-sm); margin-top: var(--space-xs); padding: var(--space-md); border: 1px solid var(--app-border); border-left: 3px solid var(--app-primary); border-radius: 14px; background: var(--app-card); }

.wa-ticket__head { display: flex; align-items: center; gap: var(--space-xs); font-weight: 600; }

.wa-ticket__head svg, .wa-ticket__from svg, .wa-ticket__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--app-primary); }

.wa-ticket label { display: block; margin-bottom: var(--space-2xs); font-size: 12px; font-weight: 500; color: var(--app-muted-fg); }

.wa-ticket__field { padding: var(--space-xs) var(--space-sm); border-radius: var(--app-radius); background: color-mix(in oklab, var(--app-muted) 50%, transparent); line-height: 1.625; }

.wa-ticket__from { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--app-muted-fg); }

.wa-ticket__actions { display: flex; justify-content: flex-end; gap: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--app-border); }

.wa-ticket__actions :is(span, button) { display: inline-flex; align-items: center; gap: var(--space-2xs); height: 28px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; }

.wa-ticket__actions .is-primary { background: var(--app-primary-solid); color: var(--app-primary-fg); }

.wa-ticket__done { display: flex; align-items: center; gap: 6px; padding-top: var(--space-sm); border-top: 1px solid var(--app-border); font-size: 14px; font-weight: 500; }

.wa-ticket__done svg { color: var(--app-success); }

@media (prefers-reduced-motion: reduce) {
  .wa-status::before { animation: none; }

  .wa-word { opacity: 1; }

  .wa-block.is-pending { opacity: 1; transform: none; }

}

/* ---------- the demo wrapper on the marketing page ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }

.demo > *, .demo__stage { min-width: 0; }

.demo__asks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

.demo__asks > p:first-child { flex-basis: 100%; max-width: none; font-size: var(--text-sm); color: var(--color-ink-2); }

.demo__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); flex: 1; }

.demo__chip { display: inline-flex; align-items: center; white-space: nowrap; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1.2 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }

.demo__chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

.demo__chip[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }

.demo__chip:active { transform: translateY(1px); }

.demo__chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.demo__stage { margin: 0; }

.demo__stage .app { height: clamp(32rem, calc(100dvh - 26rem), 40rem); }

.demo__stage .app__main, .demo__stage .app__page { min-height: 0; }

.demo__stage .wa { height: 100%; min-height: 0; }


.app__help .wa__mark { width: 22px; height: 22px; }

.app-head { display: grid; gap: var(--space-sm); padding: 14px var(--space-md); border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--app-fg) 10%, transparent); }

.app-head__row { display: flex; align-items: center; gap: var(--space-xs); }

.app-head__row b { font-size: 16px; font-weight: 600; }

.app-head__type, .app-head__flag { display: grid; place-items: center; width: 24px; height: 24px; color: var(--app-muted-fg); }

.app-head__flag { color: var(--app-destructive); }

.app-head svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app-head__dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; font-size: 13px; }

.app-head__dl dt, .app-kv dt { color: var(--app-muted-fg); font-size: 12px; }

.app-head__dl dd, .app-kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }

.app-card { display: grid; gap: var(--space-xs); padding: 18px 20px; border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--app-fg) 10%, transparent); }

.app-card > b { font-size: 14px; font-weight: 500; }

.app-kv { margin: 0; display: grid; }

.app-kv > div { display: grid; grid-template-columns: minmax(7rem, 2fr) 3fr; gap: var(--space-md); padding: 9px 0; border-top: 1px solid var(--app-border); font-size: 13px; }

.app-kv > div:first-child { border-top: 0; }

.app__view { animation: app-view var(--dur-long) var(--ease-out); }

@keyframes app-view { from { opacity: 0; transform: translateY(4px); } }
.app-table tr.is-flag td:first-child { box-shadow: inset 2px 0 0 var(--app-destructive); }

.wa-block.is-in .wa-bar { animation: wa-grow 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }

@keyframes wa-grow { from { transform: scaleY(0); } }
@media (max-width: 75rem) {
  .demo__stage .app { grid-template-columns: minmax(0, 1fr); padding: var(--space-xs); }

  .demo__stage .app__rail { display: none; }

}
@media (max-width: 60rem) {
  .demo__stage .app { height: auto; }

  .demo__stage .app__main { grid-template-columns: minmax(0, 1fr); }

  .demo__stage .app__page { display: none; }

  .demo__stage .wa { width: 100%; height: 30rem; }

  .demo__asks > p { flex-basis: 100%; }

}
@media (prefers-reduced-motion: reduce) { .app__view, .wa-block.is-in .wa-bar { animation: none; } }
.wa-ticket__actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wa-ticket__actions :is(span, button) { white-space: nowrap; }
.wa .wa-ticket__actions button { padding: 0 12px; border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.wa-ticket__actions button:hover { background: var(--app-muted); }
.wa-ticket__actions button.is-primary { background: var(--app-primary-solid); color: var(--app-primary-fg); }
.wa-ticket__actions button.is-primary:hover { background: color-mix(in oklab, var(--app-primary-solid) 88%, black); }
.wa-ticket__actions button:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.wa-ticket__done.is-off { color: var(--app-muted-fg); }
.wa-ticket__done.is-off svg { color: var(--app-muted-fg); }

@media (max-width: 60rem) {
  .demo__chips { flex-direction: column; align-items: stretch; }
  .demo__chip { justify-content: flex-start; padding-block: var(--space-xs); border-radius: var(--radius-card); white-space: normal; text-align: left; }
}
.demo__after { padding-bottom: var(--space-xl); }


/* the product panels are live markup, not image slots: no placeholder fill behind their rounded corners, and their outline and shadow are not clipped */
.demo__stage[data-slot], .wa-hero__panel[data-slot] { background: none; overflow: visible; }
.wa-hero__panel .wa { border: 1px solid var(--app-border); }
/* the four customer facts share two rows, so a label that wraps never pushes its value below the others */
.app-head__dl { grid-template-rows: auto auto; row-gap: 0; }
.app-head__dl > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.app-head__dl dt { align-self: end; line-height: 1.35; }
/* Inter's contextual alternates lift the first asterisks of a masked ID; keep every mask glyph on one height */
.app-head__dl dd { font-feature-settings: "cv02", "cv03", "cv04", "cv11", "calt" 0; }

/* Chart hover labels (wattson-demo.js): a column hit area per month on bar charts, segments on donuts */
.wa-chart, .wa-donut { position: relative; }
.wa-hit { fill: transparent; }
.wa-chart svg .wa-bar, .wa-donut .seg { transition: opacity var(--dur-short) var(--ease-out); }
.wa-chart svg.is-hovering .wa-bar:not(.is-hot) { opacity: 0.35; }
.wa-tip { position: absolute; z-index: 2; padding: 2px 8px; border-radius: 6px; background: var(--app-fg); color: var(--app-bg); font: 500 11px/1.4 var(--app-font); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
.wa-tip.is-on { opacity: 1; translate: 0 0; }
.wa-donut svg.is-hovering .seg:not(.is-hot) { opacity: 0.35; }
.wa-donut .seg { cursor: default; }
@media (prefers-reduced-motion: reduce) { .wa-tip { transition: none; translate: none; } }

/* Live composer: the field is a real input with example-question suggestions (wattson-demo.js) */
.wa__composer { position: relative; }
input.wa__input { min-width: 0; background: var(--app-card); color: var(--app-fg); font: inherit; font-size: 14px; outline: none; transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
input.wa__input::placeholder { color: var(--app-muted-fg); opacity: 1; }
input.wa__input:focus { border-color: color-mix(in oklab, var(--app-primary) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--app-primary) 14%, transparent); }
input.wa__input.is-typing::after { content: none; }
@media (pointer: coarse) { input.wa__input { font-size: 16px; } }
button.wa__send { border: 0; padding: 0; cursor: pointer; }
button.wa__send:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wa__suggest { position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: calc(100% - var(--space-2xs)); z-index: 3; display: grid; gap: 2px; max-height: 16rem; margin: 0; padding: var(--space-2xs); overflow-y: auto; list-style: none; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-card); box-shadow: var(--app-elev-panel); text-align: left; animation: wa-suggest-in 160ms var(--ease-out); }
.wa__suggest[hidden] { display: none; }
.wa__suggest li { display: grid; gap: 1px; padding: 6px var(--space-xs); border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.4; color: var(--app-fg); }
.wa__suggest li small { font-size: 11px; font-weight: 500; color: var(--app-muted-fg); }
.wa__suggest li mark { background: none; color: inherit; font-weight: 600; }
.wa__suggest li:hover, .wa__suggest li.is-active { background: var(--app-muted); }
.wa__suggest .wa__suggest-empty { cursor: default; color: var(--app-muted-fg); }
.wa__suggest .wa__suggest-empty:hover { background: none; }
@keyframes wa-suggest-in { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .wa__suggest { animation: none; } }

/* Clickable customer page (wattson-demo.js): tabs, three sample customers, and the views behind each tab */
:root { --app-info: oklch(0.5 0.11 237); --app-info-subtle: oklch(0.96 0.025 235); --app-chart-cmp: oklch(0.77 0.017 250); }
[data-mode="dark"] { --app-info: oklch(0.78 0.1 230); --app-info-subtle: oklch(0.3 0.05 235); --app-chart-cmp: oklch(0.44 0.02 260); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) { --app-info: oklch(0.78 0.1 230); --app-info-subtle: oklch(0.3 0.05 235); --app-chart-cmp: oklch(0.44 0.02 260); }
}
.app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.app button:focus-visible, .app [data-pick]:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.app__rail button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.app__rail button:hover { background: var(--app-sidebar-accent); }
.app__rail button.is-on { background: var(--app-bg); color: var(--app-primary); box-shadow: var(--app-elev-raised); }
.app__rail button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app__find { position: relative; flex: 1; max-width: 22rem; display: flex; }
.app__find .app__search { flex: 1; max-width: none; cursor: text; transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.app__find .app__search:hover { border-color: color-mix(in oklab, var(--app-primary) 35%, var(--app-input)); }
.app__find .app__search:focus-within { border-color: color-mix(in oklab, var(--app-primary) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--app-primary) 14%, transparent); }
.app__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--app-fg); font: inherit; font-size: 13px; outline: none; }
.app__search input::placeholder { color: var(--app-muted-fg); opacity: 1; }
.app__search input::-webkit-search-cancel-button { display: none; }
@media (pointer: coarse) { .app__search input { font-size: 16px; } }
.app-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 4; display: grid; gap: 2px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-card); box-shadow: var(--app-elev-panel), var(--app-elev-float); }
.app-menu[hidden] { display: none; }
.app-menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; outline: none; }
.app-menu li:hover, .app-menu li:focus-visible { background: var(--app-muted); }
.app-menu li.is-active { background: var(--app-muted); }
.app-menu li.is-current b { color: var(--app-primary); }
.app-menu .app-menu__head, .app-menu .app-menu__empty { padding: 6px 10px 2px; font-size: 11.5px; font-weight: 500; color: var(--app-muted-fg); cursor: default; }
.app-menu li.app-menu__head:hover, .app-menu li.app-menu__empty:hover { background: none; }
.app-menu .app-menu__empty { padding-block: 8px; }
.app-menu mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--app-primary) 50%, transparent); text-underline-offset: 2px; }
.app-menu svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--app-muted-fg); }
.app-menu b { display: block; font-size: 13px; font-weight: 500; }
.app-menu small { display: block; font-size: 12px; color: var(--app-muted-fg); }

.demo__stage .app__content { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--app-border) transparent; }
.app__tabs button { padding-bottom: var(--space-xs); border-bottom: 2px solid transparent; white-space: nowrap; color: var(--app-muted-fg); transition: color var(--dur-short) var(--ease-out); }
.app__tabs button:hover { color: var(--app-fg); }
.app__tabs button.is-on { color: var(--app-fg); font-weight: 500; border-bottom-color: var(--app-primary); }
.app__tabs button:focus-visible { outline-offset: -2px; border-radius: 4px 4px 0 0; }
.app__view { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }

.app-card { align-content: start; }
.app-head__dl { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr); }
.app-toggles { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.app .app-toggles button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--app-border); color: var(--app-muted-fg); font-size: 12.5px; font-weight: 500; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.app .app-toggles button::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px currentColor; }
.app .app-toggles button[aria-pressed="true"] { background: color-mix(in oklab, var(--app-primary) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--app-primary) 25%, transparent); color: var(--app-primary); }
.app .app-toggles button[aria-pressed="true"]::before { background: currentColor; }
.app-badge { gap: 4px; }
.app-tone--success { background: var(--app-success-subtle); color: var(--app-success); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--app-success) 18%, transparent); }
.app-tone--warning { background: var(--app-warning-subtle); color: var(--app-warning); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--app-warning) 20%, transparent); }
.app-tone--danger { background: var(--app-destructive-subtle); color: var(--app-destructive); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--app-destructive) 18%, transparent); }
.app-tone--info { background: var(--app-info-subtle); color: var(--app-info); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--app-info) 18%, transparent); }
.app-badge--outline { background: none; color: var(--app-fg); box-shadow: inset 0 0 0 1px var(--app-border); }
.app-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.app-link { color: var(--app-primary); font-weight: 500; }
.app-sub { color: var(--app-muted-fg); font-size: 12px; }

.app-colls { display: grid; list-style: none; margin: 0; padding: 0; }
.app-colls > li { display: grid; gap: 2px; padding-block: 10px; border-top: 1px solid var(--app-border); }
.app-colls > li:first-child { padding-top: 0; border-top: 0; }
.app-coll__top { display: flex; align-items: center; gap: var(--space-xs); font-size: 13px; }
.app-kv--s { margin-top: 4px; }
.app-kv--s > div { padding: 5px 0; border-top: 0; font-size: 12.5px; }

.app-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: 13px; }
.app-bar__end { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; color: var(--app-muted-fg); }
.app-bar__note, .app-bar__label { color: var(--app-muted-fg); }
.app-period { padding-inline: 4px; color: var(--app-fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.app-filter { display: flex; align-items: center; gap: 6px; width: 12rem; height: 30px; padding: 0 8px; border: 1px solid var(--app-input); border-radius: 8px; color: var(--app-muted-fg); }
.app-filter:focus-within { border-color: color-mix(in oklab, var(--app-primary) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--app-primary) 14%, transparent); }
.app-filter svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-filter input { flex: 1; min-width: 0; border: 0; background: none; color: var(--app-fg); font: inherit; font-size: 13px; outline: none; }
.app-filter input::placeholder { color: var(--app-muted-fg); opacity: 1; }
.app-filter input::-webkit-search-cancel-button { display: none; }
@media (pointer: coarse) { .app-filter input { font-size: 16px; } }
.app-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--app-muted); }
.app .app-seg button { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; color: var(--app-muted-fg); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.app .app-seg button:hover { color: var(--app-fg); }
.app .app-seg button[aria-pressed="true"] { background: var(--app-bg); color: var(--app-fg); box-shadow: var(--app-elev-raised); }
.app-seg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app-scroll { min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--app-border) transparent; }
.app-table td small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--app-muted-fg); }
.app-table--rows td { vertical-align: top; }
.app-table td.app-wrap { min-width: 6.5rem; white-space: normal; }
.app-id { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.app-table tr.app-group td { padding: 10px; background: color-mix(in oklab, var(--app-muted) 60%, transparent); }
.app-table tr.app-group td > * { vertical-align: middle; }
.app-table tr.app-group b { margin-right: var(--space-xs); font-weight: 600; }
.app-table tr.app-group span:last-child:not(.app-group__icon) { font-size: 12px; color: var(--app-muted-fg); }
.app-group__icon { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--space-xs); border-radius: 7px; background: color-mix(in oklab, var(--app-primary) 10%, transparent); color: var(--app-primary); }
.app-group__icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-table tfoot td { padding: 9px 10px; border-bottom: 0; font-weight: 600; }
.app-table tr[hidden] { display: none; }
.app-empty td { padding: var(--space-md) 10px; color: var(--app-muted-fg); text-align: center; }

.app-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.app-sum { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 12px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--app-fg) 10%, transparent); }
.app-sum small { font-size: 12px; color: var(--app-muted-fg); }
.app-sum b { overflow: hidden; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.app-sum span { font-size: 12px; color: var(--app-muted-fg); }
.app-sum .is-bad { color: var(--app-destructive); font-weight: 500; }
.app-sum .is-warn { color: var(--app-warning); font-weight: 500; }
.app-sum .is-ok { color: var(--app-success); font-weight: 500; }

.app-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.app-total small { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--app-muted-fg); }
.app-total b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.app-total span { font-size: 14px; color: var(--app-muted-fg); font-variant-numeric: tabular-nums; }
.app-chart { position: relative; display: grid; gap: var(--space-xs); }
.app-chart svg { width: 100%; height: auto; overflow: visible; }
.app-chart .cur { fill: var(--app-chart-1); }
.app-chart .cmp { fill: var(--app-chart-cmp); }
.app-chart .is-part { opacity: 0.35; }
.app-chart text { fill: var(--app-muted-fg); font: 400 10px var(--app-font); font-variant-numeric: tabular-nums; }
.app-chart line { stroke: var(--app-border); }
.app-chart .wa-bar { transition: opacity var(--dur-short) var(--ease-out); }
.app-chart svg.is-hovering .wa-bar:not(.is-hot) { opacity: 0.3; }
.app-chart svg.is-hovering .wa-bar.is-part.is-hot { opacity: 0.5; }
.app-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-md); font-size: 12px; color: var(--app-muted-fg); }
.app-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.app-legend .cur { background: var(--app-chart-1); }
.app-legend .cmp { background: var(--app-chart-cmp); }
.app-legend .is-part { opacity: 0.35; }

.wa-table td:first-child { white-space: nowrap; }
.app-nid { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.app-nid > span { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.app .app-nid__eye { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-block: -3px; border-radius: 6px; color: var(--app-muted-fg); transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.app .app-nid__eye:hover { color: var(--app-fg); background: var(--app-muted); }
.app-nid__eye svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-nid__eye .i-eye-off, .app-nid__eye[aria-pressed="true"] .i-eye { display: none; }
.app-nid__eye[aria-pressed="true"] .i-eye-off { display: block; }
.app-ap { display: grid; gap: 4px; }
.app-ap__label { font-size: 13px; font-weight: 500; }
.app-ap__wrap { position: relative; max-width: 36rem; }
.app .app-ap__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--app-input); border-radius: 8px; background: var(--app-bg); font-size: 13px; text-align: left; transition: border-color var(--dur-short) var(--ease-out); }
.app .app-ap__btn:hover, .app .app-ap__btn[aria-expanded="true"] { border-color: color-mix(in oklab, var(--app-primary) 45%, var(--app-input)); }
.app-ap__btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.app-ap__btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--app-muted-fg); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-ap__pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 4; width: 100%; padding: 8px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-card); box-shadow: var(--app-elev-panel), var(--app-elev-float); }
.app-ap__pop[hidden] { display: none; }
.app-ap__search { width: auto; margin-bottom: 6px; }
.app-ap__list { display: grid; max-height: 14rem; overflow-y: auto; }
.app-ap__list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.app-ap__list label:hover { background: var(--app-muted); }
.app-ap__list label[hidden] { display: none; }
.app-ap__list input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--app-primary-solid); }
.app-ap__none { padding: 6px 8px; font-size: 13px; color: var(--app-muted-fg); }
.app-ap__none[hidden] { display: none; }
.app-note { padding: var(--space-lg) 0; font-size: 13px; color: var(--app-muted-fg); text-align: center; }
.app-total em { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--app-muted-fg); }
.wa__body > .wa-welcome:only-child { margin-block: auto; }
.wa-chart .is-part, .wa-legend .is-part { opacity: 0.35; }