/* Keep the form dialog a stable height across tabs (tallest tab sets it; shorter
   tabs top-align their content instead of shrinking the dialog). */
.witanalytics-dialog-tab {
    height: 430px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Monospace inputs for the HTML/JSON editors. */
.witanalytics-code textarea,
.witanalytics-code input {
    font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

/* =============================================================================
   WitAnalytics design pass v0.3 — product-level tokens and components.
   Density contract (D-028): card padding 16px, grid gap 12px, radius 12px,
   table row 40px, KPI card 96px, StatsHeader 48px. Numbers: tabular figures
   (D-027). Series colours (D-023): navy #2e3c5d bars, #2C8C1C visitor line.
   Surfaces ride on the Mud palette vars so the dark theme mostly follows.
   ========================================================================== */
:root {
    --wa-navy: #2e3c5d;
    --wa-vis: #2C8C1C;
    --wa-lime: #50FE30;
    --wa-amber: #B9791C;
    --wa-radius: 12px;
    --wa-gap: 12px;
    --wa-border: var(--mud-palette-lines-default, #dfe3ea);
    --wa-surface: var(--mud-palette-surface, #fff);
    --wa-mute: var(--mud-palette-text-secondary, #5a6474);
}

.wa-num { font-variant-numeric: tabular-nums; }

/* ---- Full-height screen composition: the page never ends in dead space (F-01).
   Overview: top half = toolbar + KPI + chart, bottom half = the panel grid.
   --wa-chrome ≈ app bar + content padding + page title. ---- */
/* app bar 64 + m3-content padding 24+24 + page title ~40 (measured in the shell's
   m3-tokens.css — do not guess this value). */
:root { --wa-chrome: 156px; }
.wa-screen { display: flex; flex-direction: column; min-height: calc(100vh - var(--wa-chrome)); min-width: 0; }
.wa-screen-top { flex: 1 1 50%; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.wa-screen-fill { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.wa-chart-card { flex: 1; display: flex; flex-direction: column; min-height: 260px; min-width: 0; }
.wa-chart-body { flex: 1; min-height: 200px; display: flex; flex-direction: column; min-width: 0; }
.wa-chart-body .wa-chart-wrap { flex: 1; min-height: 0; }
.wa-screen .wa-grid2 { flex: 1 1 50%; grid-auto-rows: 1fr; min-height: 300px; }

/* ---- StatsHeader v2 (D-004/D-005/D-006): 48px sticky toolbar ---- */
.wa-toolbar {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 48px;
    padding: 4px 8px;
    margin: 0 0 var(--wa-gap);
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 10px;
}
.wa-toolbar-sep { width: 1px; height: 20px; background: var(--wa-border); margin: 0 2px; }
.wa-stamp { font-size: 12px; color: var(--wa-mute); }
.wa-spacer { flex: 1; }
.wa-live-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--wa-mute); }
.wa-pulse {
    width: 8px; height: 8px; border-radius: 50%; background: var(--wa-vis);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--wa-vis) 22%, transparent);
    animation: wa-pulse 2s ease-out infinite;
}
@keyframes wa-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--wa-vis) 35%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- KPI strip (D-007): five equal 96px cards, sparkline on the floor ---- */
.wa-kpis {
    display: grid;
    /* minmax(0,1fr): grid items must be allowed to shrink below content size,
       or the page stops scaling down with the window. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--wa-gap);
    margin: 0 0 var(--wa-gap);
}
.wa-kpi {
    position: relative;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius);
    padding: 12px 14px 0;
    min-height: 96px;
    overflow: hidden;
    display: block;
    color: inherit;
    text-decoration: none;
}
.wa-kpi.wa-kpi-live { border-color: color-mix(in oklab, var(--wa-vis) 34%, var(--wa-surface)); }
.wa-kpi-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--wa-mute); font-weight: 500;
}
.wa-kpi-val { font-size: 28px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.wa-kpi-sub { font-size: 11.5px; color: var(--wa-mute); }
.wa-kpi-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; opacity: .5; pointer-events: none; }
.wa-spark { width: 100%; height: 100%; display: block; }
.wa-spark-fill { fill: color-mix(in oklab, var(--wa-navy) 14%, transparent); stroke: none; }
.wa-spark-line { fill: none; stroke: var(--wa-navy); stroke-width: 1.4; opacity: .55; }

/* ---- Cards and panels (16px padding, 12px radius) ---- */
.wa-card {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius);
    padding: 16px;
    margin: 0 0 var(--wa-gap);
}
.wa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.wa-card-head h4, .wa-panel-head h4 { font-size: 14px; font-weight: 500; margin: 0; }
.wa-bucket { font-size: 11px; color: var(--wa-mute); font-weight: 400; letter-spacing: .04em; }
.wa-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wa-gap); }
/* Grid items default to min-height:auto (content) — they must be allowed to
   shrink so the equal 1fr rows, not the row stacks, decide the height. */
.wa-grid2 > * { min-height: 0; }
.wa-panel {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius);
    padding: 12px 14px 6px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.wa-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.wa-panel-foot { border-top: 1px solid var(--wa-border); margin-top: auto; padding: 8px 4px 4px; }
.wa-panel-foot a { font-size: 12px; color: var(--wa-navy); text-decoration: none; font-weight: 500; }
.wa-panel-foot a:hover { text-decoration: underline; }
.wa-panel-empty {
    padding: 18px 8px 14px; text-align: center;
    flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.wa-panel-empty b { display: block; font-size: 13px; font-weight: 500; }
.wa-panel-empty span { font-size: 12px; color: var(--wa-mute); }

/* ---- Segmented switch (D-014) ---- */
.wa-seg { display: inline-flex; border: 1px solid var(--wa-border); border-radius: 8px; overflow: hidden; font-size: 11px; }
.wa-seg button {
    font: inherit; background: none; border: 0; padding: 4px 10px;
    color: var(--wa-mute); cursor: pointer;
}
.wa-seg button.on { background: color-mix(in oklab, var(--wa-navy) 10%, var(--wa-surface)); color: var(--wa-navy); font-weight: 500; }
.wa-seg button:focus-visible { outline: 2px solid var(--wa-navy); outline-offset: -2px; }

/* ---- Breakdown rows (D-011): the bar is the row background ----
   The list may SHRINK with its panel and scroll internally — a fixed row stack
   was the layout's hidden min-height (the "stops scaling" floor). In
   content-driven contexts (drill-down pages) the overflow never engages. ---- */
.wa-rows { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wa-row { flex: none; }
.wa-row {
    position: relative; display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 8px; border-radius: 6px; font-size: 13px;
    overflow: hidden; background: none; border: 0; color: inherit; text-align: left;
    width: 100%; font-family: inherit;
}
.wa-row:focus-visible { outline: 2px solid var(--wa-navy); outline-offset: -2px; }
.wa-row-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: color-mix(in oklab, var(--wa-navy) 8%, transparent);
    border-radius: 6px; pointer-events: none;
}
.wa-row-key {
    position: relative; flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 7px;
}
.wa-row-num { position: relative; font-variant-numeric: tabular-nums; font-weight: 500; }
.wa-row-pct { position: relative; width: 44px; text-align: right; color: var(--wa-mute); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---- Chart card, custom legend and hover overlay (D-032..D-036) ---- */
.wa-legend { display: flex; gap: 12px; font-size: 12px; color: var(--wa-mute); align-items: center; }
.wa-lg { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 4px; color: inherit; font: inherit; cursor: pointer; }
.wa-lg::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--wa-navy); }
.wa-lg.vis::before { border-radius: 999px; height: 3px; width: 14px; background: var(--wa-vis); }
.wa-lg.off { opacity: .38; }
.wa-lg:focus-visible { outline: 2px solid var(--wa-navy); outline-offset: 1px; }
.wa-chart-wrap { position: relative; outline: none; min-width: 0; min-height: 0; overflow: hidden; }
.wa-chart-abs { position: absolute; inset: 0; }
/* The rendered SVG must never dictate layout size — it fills the resolved box. */
.wa-chart-abs svg, .wa-chart-abs .mud-chart { max-width: 100%; height: 100%; width: 100%; }
.wa-zones { position: absolute; display: flex; top: 0; bottom: 24px; }
.wa-zone { flex: 1; }
.wa-crosshair {
    position: absolute; top: 4px; bottom: 24px; width: 0;
    border-left: 1px dashed color-mix(in oklab, var(--wa-navy) 40%, transparent);
    pointer-events: none;
}
.wa-tip {
    position: absolute; top: 6px; transform: translateX(-50%);
    background: #141B2B; color: #E4EAF2; border-radius: 9px; padding: 8px 11px;
    font-size: 11.5px; min-width: 140px; pointer-events: none; z-index: 5;
    box-shadow: 0 4px 14px rgba(15, 22, 38, .24);
}
.wa-tip b { display: block; font-weight: 500; margin-bottom: 5px; opacity: .78; }
.wa-tip span { display: flex; align-items: center; gap: 6px; line-height: 1.9; }
.wa-tip span em { font-style: normal; margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; padding-left: 12px; }
.wa-tip i { width: 8px; height: 8px; border-radius: 2px; background: #7C8CB4; flex: none; }
.wa-tip i.vis { border-radius: 999px; height: 3px; width: 11px; background: var(--wa-lime); }

/* ---- Realtime (D-006). Fills the window on small viewports; caps at roughly
   half the window when maximized on a tall monitor. ---- */
.wa-screen-rt { display: flex; flex-direction: column; min-height: calc(100vh - var(--wa-chrome)); }
@media (min-height: 980px) {
    .wa-screen-rt { min-height: 50vh; }
}
.wa-rt { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--wa-gap); flex: 1; min-height: 0; }
.wa-rt-big { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 16px 20px; margin: 0; }
.wa-rt-num { font-size: 60px; font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wa-rt-cap { font-size: 14px; margin-top: 8px; }
.wa-rt-sub { font-size: 12px; color: var(--wa-mute); }
.wa-rt-side { display: flex; flex-direction: column; gap: var(--wa-gap); min-height: 0; }
.wa-rt-side .wa-panel { flex: 1; }

/* ---- Refresh dim (D-024) ---- */
.wa-refreshing { opacity: .6; transition: opacity .15s; }

/* ---- Flags and unknown glyph (D-013) ---- */
.wa-flag { font-style: normal; font-size: 14px; flex: none; line-height: 1; }
.wa-flag-zz {
    width: 16px; height: 16px; border-radius: 4px; font-size: 10px;
    background: color-mix(in oklab, var(--wa-navy) 10%, var(--wa-surface));
    color: var(--wa-mute); display: inline-grid; place-items: center;
}

/* ---- Status chips (D-018) ---- */
.wa-chip {
    font-size: 11px; font-weight: 500; border-radius: 999px; padding: 3px 10px;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.wa-chip.live { background: color-mix(in oklab, var(--wa-vis) 14%, var(--wa-surface)); color: #1E6B1E; }
.wa-chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wa-vis); }
.wa-chip.wait { background: color-mix(in oklab, var(--wa-amber) 16%, var(--wa-surface)); color: #7A4C0A; }
.wa-chip.off { background: color-mix(in oklab, var(--wa-navy) 8%, var(--wa-surface)); color: var(--wa-mute); }
/* Verified-wrong (snippet missing / wrong id / unreachable) — an actionable fault,
   distinct from the merely-quiet amber of "never reported". */
.wa-chip.bad { background: color-mix(in oklab, #C62828 14%, var(--wa-surface)); color: #B3261E; }

/* ---- Settings (D-022): one card per concern, same density contract as the
   dashboard cards. Constrained width — a full-bleed text box reads as a form
   field nobody owns. ---- */
.wa-settings { max-width: 720px; }
.wa-settings-lede { margin: 2px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--wa-mute); }
.wa-settings-lede b { color: var(--mud-palette-text-primary); font-weight: 500; }
.wa-settings-input textarea { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
.wa-settings-foot { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.wa-settings-hint { font-size: 11.5px; line-height: 1.45; color: var(--wa-mute); max-width: 46ch; }

/* Status cell: chip plus the one-line reason it says that. */
.wa-status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.wa-status-hint { font-style: normal; font-size: 11.5px; color: var(--wa-mute); line-height: 1.3; }
.wa-page-hint { color: var(--wa-mute); max-width: 78ch; }

/* ---- Websites table cells (D-017) ---- */
.wa-site-cell { display: flex; flex-direction: column; line-height: 1.4; }
.wa-site-cell b { font-weight: 500; }
.wa-site-cell em { font-style: normal; color: var(--wa-mute); font-size: 12px; }
.wa-dash { color: var(--wa-mute); font-size: 12px; }
.wa-row-spark { width: 132px; height: 30px; }

/* ---- Install panel (D-019) ---- */
.wa-install-lede { font-size: 13px; color: var(--wa-mute); margin: 0 0 10px; }
.wa-snip {
    background: #141B2B; border-radius: 10px; padding: 12px 14px;
    display: flex; gap: 12px; align-items: flex-start;
}
.wa-snip code {
    background: none; border: 0; color: #D8E4F2; font-size: 12px; line-height: 1.6;
    white-space: pre-wrap; word-break: break-all; flex: 1; padding: 0;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
.wa-install-id { font-size: 12px; color: var(--wa-mute); margin: 10px 0 0; display: flex; align-items: center; gap: 8px; }
.wa-id-chip {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px;
    background: color-mix(in oklab, var(--wa-navy) 8%, var(--wa-surface));
    border: 1px solid var(--wa-border); border-radius: 6px; padding: 3px 8px;
    color: inherit; cursor: pointer;
}
.wa-id-chip:hover { border-color: var(--wa-navy); }
.wa-verify {
    display: flex; gap: 12px; align-items: flex-start; margin-top: 12px;
    padding: 12px 14px; border-radius: 10px;
    background: color-mix(in oklab, var(--wa-navy) 4%, var(--wa-surface));
    border: 1px solid var(--wa-border);
}
.wa-verify b { display: block; font-size: 13px; font-weight: 500; }
.wa-verify em { font-style: normal; font-size: 12px; color: var(--wa-mute); }
.wa-verify.ok {
    background: color-mix(in oklab, var(--wa-vis) 8%, var(--wa-surface));
    border-color: color-mix(in oklab, var(--wa-vis) 26%, var(--wa-surface));
}
.wa-spin {
    width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 2px;
    border: 2px solid var(--wa-border); border-top-color: var(--wa-navy);
    animation: wa-spin 0.9s linear infinite;
}
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-ok {
    width: 17px; height: 17px; border-radius: 50%; background: var(--wa-vis); color: #fff;
    display: grid; place-items: center; font-size: 11px; flex: none; margin-top: 1px;
}

/* ---- Realtime minute ticker (D-030) ---- */
.wa-rt-ticker { width: 100%; max-width: 460px; margin-top: 18px; }
.wa-ticker { width: 100%; height: 44px; display: block; }
.wa-tick-bar { fill: var(--wa-navy); opacity: .55; }
.wa-rt-axis { display: flex; font-size: 10.5px; color: var(--wa-mute); margin-top: 3px; }

/* ---- Product empty state (D-021/D-025) ---- */
.wa-empty {
    background: var(--wa-surface); border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius); padding: 40px 24px 34px; text-align: center;
}
.wa-empty h4 { font-size: 17px; font-weight: 500; margin: 12px 0 6px; }
.wa-empty p { font-size: 13px; color: var(--wa-mute); max-width: 46ch; margin: 0 auto 16px; }

/* ---- Responsive floor (D-031) ---- */
@media (max-width: 900px) {
    .wa-kpis { grid-template-columns: repeat(2, 1fr); }
    .wa-grid2, .wa-rt { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-pulse { animation: none; }
    .wa-spin { animation: none; }
}

/* ── Catalogue vocabulary rows ─────────────────────────────────────────────
   The key leads and is monospace: it is the string that must match the
   product's code exactly, while the display name beside it is for humans and
   can be anything. Actions stay hidden until the row is hovered so a column of
   twenty entries reads as a list rather than a wall of buttons. */

.wl-vocab-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem .25rem;
    border-radius: 6px;
    min-height: 2rem;
}

.wl-vocab-row:hover {
    background: rgba(128, 128, 128, .1);
}

.wl-vocab-text {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
    flex: 1;
}

.wl-vocab-key {
    font-family: Consolas, Menlo, monospace;
    font-size: .8rem;
    white-space: nowrap;
}

.wl-vocab-name {
    font-size: .8rem;
    opacity: .65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-vocab-trailing {
    font-family: Consolas, Menlo, monospace;
    font-size: .75rem;
    opacity: .55;
    white-space: nowrap;
}

.wl-vocab-actions {
    display: flex;
    gap: .1rem;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.wl-vocab-row:hover .wl-vocab-actions,
.wl-vocab-row:focus-within .wl-vocab-actions {
    opacity: 1;
}

/* The issue preview. Pre-wrapped rather than scrolled sideways: the operator
   is reading it to catch a wrong term or a missing feature, and a payload that
   needs horizontal scrolling to read is one that gets skimmed. */
.wl-payload {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.78rem;
    line-height: 1.45;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Drop target for licence and request files. Dashed rather than solid so it
   reads as "put something here" instead of as a card that failed to load. */
.wl-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.wl-dropzone.wl-drop-active {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* The issue form. Two columns so the preview sits beside the form rather than
   below it — pressing Preview must not move anything the operator is reading.
   The panel scrolls internally so the dialog keeps a fixed height whatever the
   product's vocabulary looks like. */
.wl-issue {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.75rem;
    align-items: start;
    min-width: 820px;
}

.wl-issue-full {
    grid-column: 1 / -1;
}

.wl-issue-column {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

/* Reserves the preview's place, so the dialog does not grow on first Preview. */
.wl-issue-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.25rem;
    min-height: 220px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
}

/* One column on anything narrower than a laptop; the grid would otherwise
   squeeze both halves past the point where the labels fit. */
@media (max-width: 960px) {
    .wl-issue {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}

/* Filter bars. The controls are a group and should read as one: fixed widths
   and no flex growth, wrapping together when the window is narrow. Left to
   themselves, MudSelect and MudTextField each claim an equal share of the row
   and the group falls apart into scattered boxes. */
.wl-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.wl-toolbar > * {
    flex: 0 0 auto;
}

.wl-toolbar-search {
    width: 340px;
}

.wl-toolbar-select {
    width: 160px;
}

@media (max-width: 720px) {
    .wl-toolbar-search {
        width: 100%;
    }
}

.wl-toolbar-action {
    width: 200px;
}

.wl-toolbar-pagesize {
    width: 110px;
    flex: 0 0 auto;
}