:root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --border: #e6e9ef;
    --border-strong: #d4d9e2;
    --text: #1f2733;
    --muted: #6b7686;
    --accent: #2563eb;
    --green: #22c55e;
    --blue: #3b82f6;
    --red: #ef4444;
    --amber: #f59e0b;
    --purple: #8b5cf6;
    --teal: #14b8a6;
    --banner: #161e2e;
    --banner-2: #1f2940;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1, h2, h3 { color: var(--text); }
a { color: var(--accent); }
h1:focus { outline: none; }

.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

/* ───────── Topbar: dark banner ───────── */
.topbar { position: sticky; top: 0; z-index: 1000; }
.topbar-banner { background: linear-gradient(180deg, var(--banner), var(--banner-2)); color: #fff; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-mark {
    width: 36px; height: 36px; border-radius: 9px;
    background: #fff;
    display: grid; place-items: center; padding: 4px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { font-weight: 700; font-size: 1.02rem; color: #fff; }
.topbar-inner { position: relative; }
.topbar-center { cursor: help; user-select: none; position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }
@media (max-width: 900px) { .topbar-center { position: static; transform: none; } }
.beta-badge { padding: .1rem .5rem; border-radius: 999px; background: #f5b301; color: #1b2233; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.version-label { margin-left: .5rem; font-size: .7rem; color: #9aa6bd; }
.brand-sub { font-size: .7rem; color: #9aa6bd; letter-spacing: .02em; }

.topbar-right { display: flex; align-items: center; gap: .9rem; }
.active-customer { display: flex; align-items: center; gap: .5rem; }
.ac-label { color: #9aa6bd; font-size: .85rem; }

/* tabs bar (light) */
.topbar-tabsbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.tabs { display: flex; gap: .25rem; }
/* M-009 R6: page actions (export buttons) sit in .tabs-actions, a sibling of nav.tabs so they stay
   outside the "Vyer" landmark. Under 628px the tabs and the actions cannot share a row (the tabs
   alone need about 488px unwrapped), so the actions wrap to their own right-aligned row and
   nav.tabs keeps the full row width it had before M-009. Tab rules at 359.98px are unchanged. */
.topbar-tabsrow { display: flex; align-items: center; }
.tabs-actions { margin-left: auto; display: flex; align-items: center; }
.tabs-actions-pending { visibility: hidden; }
.tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .8rem .95rem; font-size: .9rem; text-decoration: none;
    color: var(--muted); border-bottom: 2px solid transparent;
}
.tab i { font-size: .95rem; }
.tab-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-disabled { opacity: .5; cursor: not-allowed; }
.tab-new { font-size: .6rem; background: var(--purple); color: #fff; border-radius: 6px; padding: .05rem .3rem; font-weight: 700; }

/* ───────── Customer picker ───────── */
.customer-picker { position: relative; }
.cp-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 8px; padding: .4rem .75rem; font-weight: 600; cursor: pointer;
}
.cp-toggle:hover { background: rgba(255,255,255,.16); }
.cp-current { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1002;
    width: 320px; background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.18); overflow: hidden;
}
.cp-search { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-bottom: 1px solid var(--border); color: var(--muted); }
.cp-search input { flex: 1; background: transparent; border: 0; color: var(--text); outline: none; }
.cp-list { list-style: none; margin: 0; padding: .3rem; max-height: 320px; overflow-y: auto; }
.cp-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: transparent; border: 0; color: var(--text); text-align: left;
    padding: .5rem .6rem; border-radius: 7px; cursor: pointer;
}
.cp-item:hover { background: #f1f5fb; }
.cp-item.selected { color: var(--accent); font-weight: 600; }
.cp-item-text { display: flex; flex-direction: column; min-width: 0; }
.cp-item-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-item-name { font-size: .78rem; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-empty { color: var(--muted); padding: .6rem; text-align: center; }
.cp-backdrop { position: fixed; inset: 0; z-index: 1001; }
.user-menu .cp-panel { width: 240px; right: 0; left: auto; padding: .3rem; }
.um-email { color: var(--text); padding: .5rem .6rem 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-role { padding: 0 .6rem .4rem; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.user-menu a.cp-item { text-decoration: none; }
.um-logout { margin: 0; }

/* ───────── Page head ───────── */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.65rem; font-weight: 800; margin: 0; }
.lead-sub { color: var(--muted); margin: .25rem 0 0; max-width: 640px; }
.freshness {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    background: #eff5ff; border: 1px solid #d6e4ff; color: #3155a6;
    border-radius: 999px; padding: .35rem .7rem; font-size: .8rem;
}
.freshness-sep { color: var(--muted); }
.loading { display: flex; align-items: center; gap: .8rem; color: var(--muted); padding: 2rem 0; }

/* ───────── Periodväljaren i sidhuvudet (R-09) ───────── */
/* Kontrollen står under färskhetspillen och speglar dess form: samma pillhöjd och samma
   ikon-etikett-värde-ordning, men klickbar. Pillen är ett faktum, knappen är ett val. */
.page-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }

/* M-009 R6: export buttons sit in .tabs-actions on the tab bar (sibling of nav.tabs), published
   by the Närvaro page through PortalState.PageActions; .tabs-actions centers the pill vertically
   on the tab row. They form one segmented pill with the same border, radius, shadow and height
   as the period picker pill (.pp-toggle). The icons are tinted with the badge palette
   (badge-success/badge-danger foregrounds): with no text label, the file-type color is what
   tells Excel from PDF at a glance. */
.page-head-exports {
    display: inline-flex; flex: none;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
    box-shadow: var(--shadow); overflow: hidden;
}
.kw-export-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 30px; padding: 0;
    background: transparent; border: 0; font-size: .95rem; line-height: 1; cursor: pointer;
    transition: background-color .12s ease;
}
.kw-export-icon-btn + .kw-export-icon-btn { border-left: 1px solid var(--border); }
.kw-export-excel { color: #15803d; }
.kw-export-pdf { color: #b91c1c; }
.kw-export-icon-btn:hover:not([aria-disabled="true"]) { background: var(--surface-2); }
.kw-export-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Busy: the export is running, so the cursor says "wait", not "forbidden". */
.kw-export-icon-btn[aria-disabled="true"] { opacity: .45; cursor: progress; }
@media (pointer: coarse) { .kw-export-icon-btn { width: 48px; height: 44px; } }

.period-picker { position: relative; }
.pp-toggle {
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
    border-radius: 999px; padding: .35rem .7rem; font-size: .8rem; cursor: pointer;
    box-shadow: var(--shadow); transition: border-color .12s ease, background-color .12s ease;
}
/* Närvaro only (.page-head-right-narvaro, set in NarvaroPaGoogle.razor): its long label may wrap.
   The Trafik page uses .page-head-right too, but its toggle must stay on one line, so these rules
   are scoped to the modifier. The toggle wraps between its parts (flex-wrap), not inside the value,
   so a narrow screen reads "Senaste 30 dagarna jämfört med" / "Föreg. 30 dagar" instead of two
   ragged text columns. */
.page-head-right-narvaro .pp-toggle { max-width: 100%; white-space: normal; text-align: left; flex-wrap: wrap; row-gap: .15rem; }
.page-head-right-narvaro .pp-toggle-value { white-space: nowrap; }
.pp-toggle:hover:not([disabled]) { background: var(--surface-2); }
.pp-toggle.open { border-color: var(--accent); }
.pp-toggle[disabled] { opacity: .55; cursor: not-allowed; }
.pp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-toggle > .bi-arrow-left-right { color: var(--muted); font-size: .8rem; }
.pp-toggle-label { color: var(--muted); }
.pp-toggle-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-caret { color: var(--muted); font-size: .7rem; }

.pp-backdrop { position: fixed; inset: 0; z-index: 1001; }
.pp-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1002; text-align: left;
    /* Höjden följer fönstret så årsrutnätet inte klipps mitt i ett år på vanliga skärmar,
       men panelen får aldrig växa utanför viewporten på en låg. */
    width: 280px; max-height: min(520px, calc(100vh - 140px)); overflow-y: auto; padding: .5rem;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 12px; box-shadow: 0 14px 34px rgba(16,24,40,.2);
}
.pp-panel:focus { outline: none; }

/* Förvalen: en rad var, med sitt datumintervall dämpat till höger — bredden finns här, till
   skillnad från i månadsrutnätet, så intervallet får stå utskrivet. */
.pp-preset {
    width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
    background: transparent; border: 0; color: var(--text); font-size: .85rem;
    border-radius: 8px; padding: .42rem .55rem; cursor: pointer; text-align: left;
}
.pp-preset:hover:not([disabled]) { background: #f1f5fb; }
.pp-preset.selected { background: var(--accent); color: #fff; font-weight: 600; }
.pp-preset.selected .pp-preset-range { color: rgba(255,255,255,.8); }
.pp-preset[disabled] { opacity: .4; cursor: not-allowed; }
.pp-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.pp-preset-range { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }

.pp-months { border-top: 1px solid var(--border); margin-top: .45rem; padding-top: .5rem; }
.pp-section-head { color: var(--muted); font-size: .76rem; margin: 0 .55rem .4rem; }
.pp-year + .pp-year { margin-top: .5rem; }
.pp-year-label { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; margin: 0 .55rem .3rem; }
.pp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.pp-cell {
    background: transparent; border: 0; color: var(--text); font-size: .82rem;
    border-radius: 7px; padding: .38rem 0; text-align: center; cursor: pointer;
    transition: background-color .12s ease;
}
.pp-cell:hover { background: #f1f5fb; }
.pp-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.pp-cell.selected { background: var(--accent); color: #fff; font-weight: 600; }
.pp-cell.selected:hover { background: var(--accent); }
.pp-cell-empty { color: var(--muted); opacity: .3; cursor: default; }
.pp-empty { color: var(--muted); font-size: .82rem; padding: .5rem .55rem; }

/* Custom date-range section (T-005/T-009): same panel-section rhythm as .pp-months (border-top +
   .pp-section-head), native date inputs styled to match .pp-cell/.pp-preset instead of the
   browser default look. */
.pp-custom { border-top: 1px solid var(--border); margin-top: .45rem; padding-top: .55rem; }
.pp-custom.selected .pp-section-head { color: var(--accent); font-weight: 600; }
.pp-custom-inputs { display: flex; align-items: center; gap: .4rem; padding: 0 .55rem; margin-bottom: .5rem; }
.pp-custom-input {
    flex: 1 1 0; min-width: 0; color: var(--text); background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: 7px; padding: .32rem .4rem;
    font-size: .8rem; font-variant-numeric: tabular-nums; font-family: inherit;
}
.pp-custom-input:hover { border-color: var(--muted); }
.pp-custom-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pp-custom-sep { flex: none; color: var(--muted); font-size: .8rem; }
.pp-custom-apply {
    display: block; width: calc(100% - 1.1rem); margin: 0 .55rem .45rem;
    background: var(--accent); color: #fff; border: 0; border-radius: 7px;
    padding: .38rem .6rem; font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: background-color .12s ease;
}
.pp-custom-apply:hover:not([disabled]) { background: #1d4ed8; }
.pp-custom-apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-custom-apply[disabled] { background: var(--border); color: var(--muted); cursor: not-allowed; }
.pp-custom-hint { color: var(--muted); font-size: .74rem; line-height: 1.35; padding: 0 .55rem; }

/* Trafik period row (TrafikOchBesok.razor only; the Närvaro page has no period text row since M-009).
   Do not delete: Trafik still uses both rules. */
.compare-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.4rem 0 1rem; }
.compare-text { color: var(--muted); font-size: .85rem; font-weight: 600; }

/* R-09/M-011 rearrange: the period picker and the comparison selector sit side by side, under the
   freshness pill above — same row rhythm as .page-head-right's own gap, just switched to a row so
   the two controls read as one group instead of stacking as two separate lines. */
.tc-period-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

/* M-011 T-009: the comparison-period selector, next to <PeriodPicker> inside .tc-period-row. */
.tc-compare-label {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; color: var(--muted); white-space: nowrap;
}
.tc-compare-label > select {
    /* Left/vertical padding only — .form-select's own right padding reserves room for its
       background-image chevron; overriding it here made the chevron sit on top of the text. */
    width: auto; height: auto; padding-top: .35rem; padding-bottom: .35rem; padding-left: .7rem; font-size: .8rem;
    /* M-011 fix (design review finding 2): matches .pp-toggle's pill shape/border/shadow instead of
       Bootstrap's default squared select, so it reads as one control family with the period picker
       next to it rather than two different UI kits. */
    border-radius: 999px; border-color: var(--border-strong); box-shadow: var(--shadow); background-color: var(--surface);
}
.tc-compare-label > select:hover:not(:disabled) { background-color: var(--surface-2); }
.tc-compare-label > select:disabled { opacity: .55; }
/* Finding 1: .freshness alone is white-space: nowrap and its sentence overflows at phone width —
   the notes below .compare-row need to wrap. Overrides .freshness's inline-flex with a block-level
   flex box sized to its content, so margin-left: auto can push it to the right instead of it
   sitting flush left like running text. */
.tc-compare-note { display: flex; width: fit-content; white-space: normal; margin: 0 0 1rem auto; }
/* M-011 fix: a soft-fail note reused .freshness verbatim, so it looked identical to the
   informational "Data t.o.m. …" pill above it (finding 9) — an amber tint marks it as a notice,
   not routine freshness info, without a markup/behavior change. */
.tc-compare-note { background: #fdf2e2; border-color: #f3ddb0; color: #92660c; }

/* ───────── KPI cards ───────── */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
/* Ecommerce template: 5 cards, 3 + 2 layout (spec §5). The first three cards span 2 of 6 columns
   each (fill row 1); the last two span 3 each (fill row 2's width). */
.kpi-row-ecom { grid-template-columns: repeat(6, 1fr); }
.kpi-row-ecom > .kpi-card:nth-child(-n+3) { grid-column: span 2; }
.kpi-row-ecom > .kpi-card:nth-child(n+4) { grid-column: span 3; }
.kpi-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 1.05rem 1.15rem; border-left: 4px solid var(--accent); box-shadow: var(--shadow);
}
.kpi-imp { border-left-color: var(--purple); }
.kpi-pos { border-left-color: var(--teal); }
.kpi-cnt { border-left-color: var(--amber); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
/* Direct child only: an icon nested in the label (the ConversionsInfoTip) must not become a chip. */
.kpi-head > i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .95rem; flex: none; }
.kpi-label { display: inline-flex; align-items: center; }
.kpi-imp .kpi-head > i { background: #f1ecfd; color: var(--purple); }
.kpi-pos .kpi-head > i { background: #e6f7f4; color: var(--teal); }
.kpi-cnt .kpi-head > i { background: #fdf2e2; color: var(--amber); }
/* Trafik och besök: the same accent-border + tinted-chip pattern, one hue per metric family —
   volume (blue, purple), engagement (teal), outcome (green), time (amber). Tints are the ones
   already used elsewhere in this file. */
.kpi-sessions { border-left-color: var(--blue); }
.kpi-new-users { border-left-color: var(--purple); }
.kpi-conversions { border-left-color: var(--green); }
.kpi-revenue { border-left-color: var(--amber); }
.kpi-purchases { border-left-color: var(--teal); }
.kpi-sessions .kpi-head > i { background: #e8eefb; color: var(--blue); }
.kpi-new-users .kpi-head > i { background: #f1ecfd; color: var(--purple); }
.kpi-conversions .kpi-head > i { background: #dcfce7; color: var(--green); }
.kpi-revenue .kpi-head > i { background: #fdf2e2; color: var(--amber); }
.kpi-purchases .kpi-head > i { background: #e6f7f4; color: var(--teal); }
.kpi-value { font-size: 2rem; font-weight: 800; margin: .4rem 0 .25rem; letter-spacing: -.01em; }
.kpi-delta { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
/* M-009 R2: the Narvaro card titles are long ("... senaste 30 dagarna") and may wrap to 3 lines;
   the delta may wrap to 2. Reserve both so values align across the row and card heights stay
   equal with and without a reference. Scoped: the Trafik cards keep their single-line head.
   3 x (.74rem * 1.25) = 2.775rem; 2 x (.82rem * 1.3) = 2.132rem. */
.kpi-imp .kpi-head, .kpi-pos .kpi-head, .kpi-cnt .kpi-head { align-items: flex-start; line-height: 1.25; min-height: 2.775rem; }
.kpi-imp .kpi-head > span, .kpi-pos .kpi-head > span, .kpi-cnt .kpi-head > span { padding-right: .5rem; }
.kpi-imp .kpi-delta, .kpi-pos .kpi-delta, .kpi-cnt .kpi-delta { line-height: 1.3; min-height: 2.132rem; align-items: flex-start; }
.delta-good { color: #16a34a; }
.delta-bad { color: #dc2626; }

/* T-008: info affordance next to "Konverteringar" wherever it appears (spec.md §5) — keyboard-
   focusable, native title tooltip, no JS. */
.info-tip { display: inline-flex; color: var(--muted); cursor: help; margin-left: .3rem; }
.info-tip:hover, .info-tip:focus-visible { color: var(--accent); outline: none; }
.info-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
/* Only the remainder row ("Övriga …") is not expandable — source/event rows are, so they keep
   the default pointer cursor from .kw-row. */
.tc-table .kw-row.tc-remainder { cursor: default; }
/* T-007: the source/medium and events cards stack, spaced like the chart card. */
.tc-card { margin-bottom: 1.4rem; }
/* M-011 fix: narrow viewports — five/six columns (name + 3-4 metrics + chevron) do not fit
   .kw-table's default padding in a phone-width card, unlike the four-column keyword table. Trims
   padding and font size the same way .kw-table already does for col-prio/col-exp at 900px
   (finding 7: the tables scrolled sideways inside their card at 390px). Still a partial mitigation
   — see Dok/TrafikOchBesok.md for the open follow-up on full LayoutCheck coverage of these tables. */
@media (max-width: 480px) {
    .tc-table.kw-table thead th, .tc-table .kw-row td, .tc-table tfoot td { padding-left: .5rem; padding-right: .5rem; font-size: .82rem; }
    .tc-table .kw-name, .tc-table .tc-medium { white-space: normal; }
}
/* Totals row under the source/medium and events tables. */
.tc-table tfoot td { font-weight: 600; border-top: 1px solid var(--border); padding: .6rem 1rem; }
/* Empty-state text inside a T-007 card. */
.tc-empty { margin: 1rem; }
/* Nested per-source/per-event detail table (T-007). M-011 fix (design review finding 4): framed as
   its own panel — border/radius/background and an inset margin from the colspan td's edges — instead
   of a borderless table whose columns don't line up with the parent's, which read as "a table
   dropped into another table". Left at .kw-detail-row > td's own padding: 0 (shared with Närvaro's
   .kw-detail, which relies on it for K-009's mobile-width fix) — the margin below does the inset
   instead. Font size raised from .78rem to .85rem so it keeps a visible step above .kw-delta's
   .72rem without collapsing into the .78rem it used to share with it. */
.tc-subtable {
    width: calc(100% - 2rem); margin: .6rem 1rem 1rem; font-size: .85rem;
    border: 1px solid var(--border); border-radius: 8px; border-collapse: collapse; overflow: hidden;
    background: var(--surface);
}
.tc-subtable td, .tc-subtable th { padding: .45rem 1rem; }
.tc-subtable .col-num { text-align: right; }
.tc-subtable thead th {
    text-align: left; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.tc-subtable thead th.col-num { text-align: right; }
.tc-subtable tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }

/* T-009: traffic chart card. Reuses .kw-card/.kw-toolbar/.kw-tabs/.kw-tab so the metric selector
   is the same segmented control as the keyword tabs on Närvaro. The inner plot drops its own
   border (the card already has one) and takes the toolbar's horizontal padding. */
.tc-chart-card { margin-bottom: 1.4rem; }
.metric-selector-group { display: flex; align-items: center; gap: .5rem; }
.metric-selector-group > .info-tip { margin-left: 0; }
.tc-chart-card .kd-chart { padding: 0 1rem .6rem; }
.tc-chart-card .kd-chart-plot { border: 0; }
.tc-chart-card .kd-chart-msg { border: 0; background: var(--surface-2); }
.metric-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
/* M-011 fix (design review finding 5): the source/medium and events cards now open with a
   .kw-toolbar heading (below), same as Närvaro, so their hint is no longer the card's first
   child — the rule that special-cased its top border for the toolbar-less layout is dead. */
.tc-table-title { margin: 0; font-size: .95rem; font-weight: 600; }

/* ───────── Keyword card / table ───────── */
.kw-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.kw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; flex-wrap: wrap; }
.kw-tabs { display: flex; gap: .35rem; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .25rem; }
.kw-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 1px solid transparent; color: var(--muted);
    border-radius: 7px; padding: .4rem .7rem; font-size: .85rem; cursor: pointer;
}
.kw-tab:hover { color: var(--text); }
.kw-tab.active { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.kw-tab .cnt { background: rgba(16,24,40,.06); color: var(--muted); border-radius: 999px; padding: 0 .4rem; font-size: .72rem; }
.kw-tab.active .cnt { background: #e8eefb; color: var(--accent); }
/* R-07: fliktalets andra tal (antal Borta-rader) — mindre och dämpat, ingen bakgrund. */
.kw-tab .cnt-gone { color: var(--muted); font-size: .65rem; }
.kw-toolbar-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kw-search { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: .35rem .6rem; color: var(--muted); }
.kw-search input { background: transparent; border: 0; color: var(--text); outline: none; min-width: 200px; }
/* .kw-export-excel/.kw-export-pdf live in .page-head-exports (on the tab bar, M-009 R6) as
   icon buttons — see .kw-export-icon-btn above. Their own visual style (size, border, aria-disabled) lives there;
   the class names stay so existing tests keep targeting the same selectors. */
/* Round-4 fix: same aria-disabled rule as .kw-pin below — switching from the native disabled
   attribute to aria-disabled (so keyboard focus survives an export starting) dropped the
   browser's/Bootstrap's built-in disabled styling, leaving a busy button looking clickable. */
.kw-pdf-dialog-create[aria-disabled="true"] { opacity: .5; cursor: default; }

/* T-004 step 7: PDF options dialog — Blazor-state driven (no Bootstrap JS bundle is loaded). */
/* Same surface language as the KPI and keyword cards: 12px radius, --border hairlines, the
   page's --accent instead of Bootstrap's default blue. */
.kw-pdf-dialog .modal-dialog { max-width: 420px; margin: 3.5rem auto; padding: 0 16px; }
.kw-pdf-dialog .modal-content { border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.18); }
.kw-pdf-dialog .modal-header { padding: 1rem 1.25rem .5rem; border-bottom: 0; }
.kw-pdf-dialog .modal-title { font-size: 1.05rem; font-weight: 700; }
.kw-pdf-dialog .modal-body { padding: .25rem 1.25rem .75rem; }
.kw-pdf-dialog .modal-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 12px 12px; gap: .5rem; }
.kw-pdf-dialog .modal-footer > * { margin: 0; }
.kw-pdf-dialog .btn-primary { background: var(--accent); border-color: var(--accent); }
.kw-pdf-dialog .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.kw-pdf-opt-group { border: 0; margin: 0; padding: .6rem 0 0; min-width: 0; }
.kw-pdf-opt-group + .kw-pdf-opt-group { margin-top: .75rem; }
/* Same muted small-caption style as the period picker's section heads (.pp-section-head). */
.kw-pdf-opt-group legend { float: none; width: auto; color: var(--muted); font-size: .78rem; font-weight: 600; margin: 0 0 .15rem; padding: 0; }
.kw-pdf-opt-group label { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; cursor: pointer; }
.kw-pdf-opt-group input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* M-011 T-010 step 5: traffic admin config dialog — reuses .kw-pdf-opt-group's fieldset/legend/
   label styling as-is (finding 16); .tc-admin-btn itself needs no rules, .kw-export-icon-btn
   already covers size/hit-area/hover/focus/aria-disabled. */
.tc-admin-dialog .kw-pdf-opt-group input[type="radio"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* A real GA4 property can have many events — cap the checklist height instead of growing the dialog.
   M-011 fix (design review finding 8): framed with a border so the scroll area reads as its own
   panel instead of a bare OS scrollbar with no visible edge. */
.tc-admin-dialog .tc-admin-events {
    max-height: 260px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px; padding: .25rem .75rem; background: var(--surface-2);
}
.tc-admin-event-raw { color: var(--muted); font-size: .78rem; }
.kw-pdf-opt-group .kw-pdf-opt-locked { color: var(--muted); cursor: default; }
.kw-pdf-opt-group .kw-pdf-opt-locked input[type="checkbox"] { cursor: default; }
.kw-hint { color: #3155a6; background: #eff5ff; font-size: .82rem; padding: .55rem 1rem; display: flex; align-items: center; gap: .4rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.kw-table-wrap { overflow-x: auto; container-type: inline-size; }
.kw-table { width: 100%; border-collapse: collapse; }
.kw-table thead th {
    text-align: left; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .65rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; background: var(--surface-2);
}
.kw-table th.col-num { text-align: right; }
/* T-001: sorterbara kolumnrubriker. Knappens text är nollställd som .kw-row-btn (samma
   mönster, U-009). Riktningsikonen är absolutpositionerad i stället för inline-flex: en
   ikon i normalt flöde ökar rubrikcellens min-content-bredd, och eftersom .kw-table
   saknar table-layout: fixed (U-016/I1) sprider auto-layout om den extra bredden till
   sökordskolumnen och ger ojämn radhöjd (I3) och horisontell scroll (I4) — uppmätt i
   integrationen. Ikonen är absolut och därmed alltid ur flödet (utanför tabellens
   intrinsic-width-beräkning) oavsett vilket element den positioneras mot, så cellens —
   och därmed kolumnens — mått ändras inte trots att den nu positioneras mot knappen
   (se kommentaren nedan). */
.kw-sort-btn {
    display: inline-block;
    position: relative;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
    cursor: pointer;
}
.kw-sort-btn:focus { outline: none; }
.kw-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kw-sort-btn i.bi {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: .85em;
}
/* Ikonen positioneras mot knappen (inte mot th) så den hamnar intill rubriktexten oavsett
   kolumnens textriktning (F-1-ui-1), och saknar pointer-events: none så att klick på ikonen
   själv bubblar till knappens @onclick i stället för att falla igenom till th (F-1-requirements-1). */
.kw-table th:not(.col-num) .kw-sort-btn i.bi { left: 100%; margin-left: .35rem; }
.kw-table th.col-num .kw-sort-btn i.bi { right: 100%; margin-right: .35rem; }
/* Traffic tables (TrafficSourceTable): every sortable header keeps a muted up/down icon even when
   it isn't the active sort, so sortability is visible before the first click, not just after. */
.kw-sort-btn i.bi-arrow-down-up.kw-sort-hint { opacity: .45; }
/* Prio-kolumnen: 180px är baslinjen och får inte växa (varje px över tas från
   sökordskolumnen). Smalare cellpadding ger 164px innehåll, så att den bredaste
   badgen ryms på en rad utan nowrap (U-002). */
.kw-table .col-prio, .kw-table th.col-prio { width: 180px; padding-left: .5rem; padding-right: .5rem; }
/* M-004: col-exp holds the 32px pin plus the 16px chevron plus the cell padding, with real slack
   so neither of them is squeezed. Do not widen it to 84px: the name column then wraps at 780px
   and the layout check (I3) fails. */
.kw-table .col-exp, .kw-table th.col-exp { width: 64px; padding-left: .25rem; padding-right: .25rem; white-space: nowrap; text-align: center; color: var(--muted); }
.kw-pin { width: 32px; height: 32px; padding: 0; margin-right: 0; border: 0; background: transparent; color: var(--muted); border-radius: 6px; vertical-align: middle; cursor: pointer; }
.kw-pin.watched { color: #b45309; }
/* R-5: a pending write uses aria-disabled, not disabled, so the button keeps keyboard focus. */
.kw-pin[aria-disabled="true"] { opacity: .5; cursor: default; }
.kw-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* R-5: the live region is always in the DOM (it must exist before the text is inserted) and holds
   one line of height, so an appearing message never shifts the table. The region owns the
   reserved line; the error span is the only one shown on screen — a saved/removed confirmation is
   sr-only (see .sr-only below), announced to screen readers without ever showing visible text. */
.kw-watch-live { font-size: .875rem; line-height: 1.25rem; min-height: 1.25rem; padding: 0 .25rem; }
.kw-watch-error { color: #b45309; }
/* Kept for viewport/assistive tooling that ignores .sr-only clipping; has no effect on layout. */
.kw-watch-status { color: var(--muted); }
/* Visually hidden but readable by screen readers/aria-live — standard sr-only clip pattern. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* M-004: the pin (32px hit area) widened col-exp; narrow viewports take it back from cell padding. */
@media (max-width: 900px) {
    .kw-table thead th:not(.col-prio):not(.col-exp), .kw-row td:not(.col-prio):not(.col-exp) { padding-left: .75rem; padding-right: .75rem; }
}
/* Coarse pointers: 44px pin plus the chevron plus padding, with the same slack as above. */
@media (pointer: coarse) { .kw-pin { width: 44px; height: 44px; } .kw-table .col-exp, .kw-table th.col-exp { width: 76px; } }
.kw-row { cursor: pointer; border-bottom: 1px solid var(--border); }
.kw-row:hover { background: #f8fafd; }
.kw-row.open { background: #eff5ff; }
.kw-row td { padding: .6rem 1rem; vertical-align: middle; }
.kw-name { font-weight: 500; display: flex; align-items: center; gap: .55rem; }
/* Sökordsknappen (U-009): raden togglas av <tr>:s @onclick; knappen ger bara Enter/mellanslag
   och aria-expanded. Nollställd så att radhöjden är identisk med förr (U-002). */
.kw-row-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    border-radius: 4px;
}
.kw-row-btn:focus { outline: none; }
.kw-row-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Fokusmarkering på hela raden — bara vid tangentbordsfokus (:focus-visible), så att ett
   musklick inte tänder den. :focus-within hade tänt på klick också. */
.kw-row:has(.kw-row-btn:focus-visible) { background: #f8fafd; }
.kw-row:has(.kw-row-btn:focus-visible) td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
/* R-07: delta/tillstånd-underraden under varje talcell. Glyfens egen span
   (.delta-good/.delta-bad) bär färgen så att .kw-delta:s dämpade färg inte skriver över den. */
.kw-delta { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); white-space: nowrap; line-height: 1.2; margin-top: .1rem; }
.kw-empty { text-align: center; color: var(--muted); padding: 1.5rem; }
.brand-tag { font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; background: #f1ecfd; color: #7c3aed; border-radius: 5px; padding: .05rem .3rem; }

/* dots */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-success { background: var(--green); }
.dot-info { background: var(--blue); }
.dot-danger { background: var(--red); }
.dot-secondary { background: var(--muted); }
.dot-watch { background: var(--amber); }

/* prio badge */
.prio-badge {
    display: inline-flex; align-items: center;
    border: 1px solid transparent; border-radius: 999px; padding: .25rem .5rem; font-size: .78rem; font-weight: 600;
}
.badge-success { background: #dcfce7; color: #15803d; border-color: #bbe8cb; }
.badge-info { background: #dbeafe; color: #1d4ed8; border-color: #bfd6fb; }
.badge-danger { background: #fee2e2; color: #b91c1c; border-color: #f6caca; }
.badge-secondary { background: #f1f3f6; color: #4b5563; border-color: #d8dde5; }

/* detail panel */
/* M-011 fix: scoped to the direct child only — an unscoped "td" descendant selector also matched
   .tc-subtable's own cells nested inside the colspan td (TrafficSourceTable/TrafficEventTable's
   accordion), zeroing their intended .tc-subtable td padding. */
.kw-detail-row > td { padding: 0 !important; background: var(--surface-2); border-bottom: 1px solid var(--border); }
/* K-009: den expanderade radens detaljpanel klippte grafen på mobil. .kw-detail ligger i
   <td colspan="5"> och sträckte sig lika brett som .kw-table (572,5px vid 390px, mätt med
   playwright-cli mot HEAD 9957955) — tabellens kolumner är fredade (task.md) så den kan inte
   göras smalare, och .kw-table-wrap { overflow-x: auto } är den enda skrollbehållaren, så
   panelen hamnade i wrapens dolda skrollområde (wrapens clientWidth var bara 364px). Fixen
   frikopplar panelens bredd från tabellens: .kw-table-wrap får container-type: inline-size (rad
   170) så 100cqw här löser mot wrapens synliga bredd, inte mot förfadern till den. position:
   sticky; left: 0 håller panelen kvar vid wrapens vänsterkant om användaren skrollar tabellen i
   sidled (dess containing block förblir td:n, 572,5px, så sticky har utrymme att skjuta i). box-
   sizing: border-box är nödvändigt eftersom panelen har padding: 1.1rem 1.2rem — med content-box
   hade bredden blivit 100cqw + padding och stuckit ut igen. Vid ≥628px (LayoutCheck I4) skrollar
   wrapen aldrig i sidled och reglerna saknar mätbar verkan (uppmätt identiskt med föremätningen
   vid 780/1280px), så de läggs som basregler i stället för i ett media-block. */
.kw-detail {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; padding: 1.1rem 1.2rem;
    position: sticky; left: 0; max-width: 100cqw; box-sizing: border-box;
}
.kd-label, .kd-stat-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; font-weight: 600; }
.kd-landing { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; }
.kd-url { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kd-url a { word-break: break-all; }
.copy-btn { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 7px; padding: .2rem .5rem; font-size: .78rem; cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
/* F-4-ui-1: raden bar tre kort och rymdes på en rad. R-12:s fjärde kort ("Mot
   referensperioden") sköt ut det sista utanför viewporten vid 390px och gav horisontell scroll.
   Korten wrappar nu i stället, och min-width: 0 hindrar att ett långt värde spränger sin kolumn.
   flex-basis 8rem ger två kort per rad på mobil och alla fyra på en rad när bredden räcker, utan
   brytpunkt och utan att röra de tre befintliga kortens utseende på stor skärm. */
.kd-stats { display: flex; gap: 1rem; flex-wrap: wrap; }
.kd-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; flex: 1 1 8rem; min-width: 0; }
.kd-stat-value { font-size: 1.45rem; font-weight: 800; }
.kd-stat-sub { font-size: .78rem; display: flex; align-items: center; gap: .35rem; margin-top: .15rem; }
.kd-stat-sub .dot { width: 7px; height: 7px; }
.status-good { color: #16a34a; } .status-good .dot { background:#16a34a; }
.status-mid { color: #d97706; } .status-mid .dot { background:#d97706; }
.status-bad { color: #dc2626; } .status-bad .dot { background:#dc2626; }

/* position chart (P6) */
.kw-detail > .kd-chart { grid-column: 1 / -1; }
.kd-chart { display: flex; flex-direction: column; gap: .8rem; }
.chart-delta { display: inline-flex; align-items: center; gap: .35rem; }
/* U-007: etiketterna flyttade ut ur SVG:n till ett HTML-lager (.chart-labels) i CSS-pixlar, så att
   texten inte längre skalar med grafens bredd. .kd-chart-plot bär kortstilen som tidigare låg på
   .kd-chart-svg; .kd-chart-canvas omsluter SVG:n exakt (ingen padding/ram) så att procentpositionerna
   i .chart-labels stämmer mot samma viewBox-koordinater som SVG:ns geometri. */
.kd-chart-plot {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .4rem;
    container-type: inline-size;
}
.kd-chart-canvas { position: relative; }
.kd-chart-svg { display: block; width: 100%; height: auto; aspect-ratio: 900 / 200; overflow: visible; }
.chart-grid line { stroke: var(--border); stroke-width: 1; }
.chart-labels { position: absolute; inset: 0; pointer-events: none; }
.chart-label { position: absolute; color: var(--muted); font-size: .72rem; line-height: 1; white-space: nowrap; }
.chart-ylabel { transform: translate(-100%, -50%); }
.chart-xlabel { margin-top: .3rem; }
.chart-xlabel-mid { transform: translateX(-50%); }
.chart-xlabel-end { transform: translateX(-100%); }
/* Glesning (U-007): etiketten bär sin nivå, containern avgör. Trösklarna är i em som i U-010 så
   att de följer användarens teckenstorlek; vid 16px: 40em = 640px, 24em = 384px. */
@container (max-width: 40em) { .chart-xlabel[data-level="0"] { display: none; } }
@container (max-width: 24em) { .chart-xlabel[data-level="1"] { display: none; } }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart-dot { fill: var(--accent); stroke: #ffffff; stroke-width: 1.5; }
.chart-gap { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 3; }
.kd-chart-msg { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.kd-chart-loading { color: var(--muted); }
.kd-chart-empty { color: var(--muted); }
/* R-12: referensperiodens serie — dämpad och streckad, ritad under den nuvarande kurvan. */
.chart-line-ref { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.chart-dot-ref { fill: var(--muted); stroke: #ffffff; stroke-width: 1.5; opacity: .7; }
.chart-ref-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.chart-reflabel { transform: translate(-100%, -100%); }
.kd-chart-note { color: var(--muted); font-size: .82rem; margin: -.3rem 0 .6rem; }
/* T-007: provisional tail on TrafficChart (spec.md §6) — dashed and lighter than the final line,
   same treatment family as .chart-line-ref/.chart-dot-ref above but on the accent color, since a
   provisional point is still this same metric's own series, not a separate reference period. */
.chart-line-provisional { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; opacity: .55; }
.chart-dot-provisional { fill: var(--accent); stroke: #ffffff; stroke-width: 1.5; opacity: .55; }

/* empty pick */
.empty-pick { text-align: center; padding: 5rem 1rem; color: var(--muted); }
.empty-pick i { font-size: 2.5rem; color: var(--accent); }
.empty-pick h2 { margin-top: .8rem; color: var(--text); }

/* L-003: 900px är den avsedda brytpunkten för detaljpanelen — .kw-detail går här från
   basregelns 1.6fr 1fr (rad 267) till en kolumn. K-009:s granskning fällde ett fynd om att
   kravtexten påstod "samma tvåkolumnsindelning" ner till 780px, vilket aldrig stämt (panelen
   var enkolumn redan i baslinjen); L-003 avgjorde att brytpunkten ligger kvar och att det var
   kravtexten som var fel, inte koden. Blocket styr även .kpi-row (basregel rad 133, tre
   kolumner). */
@media (max-width: 900px) {
    .kpi-row { grid-template-columns: 1fr; }
    .kw-detail { grid-template-columns: 1fr; }
    /* Finding 10: the span rules above (.kpi-row-ecom > .kpi-card:nth-child(...)) have higher
       specificity than .kpi-row's reset, so without this the ecom cards would try to span
       nonexistent columns in the one-column grid. */
    .kpi-row-ecom { grid-template-columns: 1fr; }
    .kpi-row-ecom > .kpi-card:nth-child(n) { grid-column: auto; }
}

/* Sidhuvudet är annars en nowrap-rad. Tröskeln är i em, inte px, för att den ska
   skala med användarens standardteckenstorlek precis som badgetexten gör — vid 16px
   ligger den på 600px, vid 18px på 675px. 37,5em ≈ 600px täcker hela det band
   (414–600px) där rubriken annars kläms mot sitt min-content (105px) och sidhuvudet
   blir upp till 322,8px högt (U-010). Tröskeln måste hållas under 640px vid 16px:
   ett ovillkorligt flex-wrap på basregeln (rad 108) bryter redan vid 948px eftersom
   flex utlöser radbrytning på .lead-subs hypotetiska bredd (max-width 640px), inte
   den krympta — det föll i U-003 och är varför regeln bara gäller i det här
   blocket. U-022: färskhetspillen (tidigare badgen, kortare text sedan tasken) får
   bryta text (white-space: normal) enbart här, som skydd om användarens
   teckenstorlek är stor nog för att pillens max-content inte längre ryms på egen
   rad vid 320px viewport (vid 18px mäter pillen 2026-09-08 ca 204px bred, klart
   under 320px, men ingen övre gräns för teckenstorlek är satt). */
@media (max-width: 37.5em) {
    .page-head { flex-wrap: wrap; }
    .page-head .freshness { white-space: normal; }
    /* M-009 R5: the pill now carries two facts ("Data t.o.m." and "Aktuell period"). At 320px it
       wraps between its parts, not inside them; the dates never break. A 16px radius stays a full
       pill on one line and becomes a rounded box on two, where 999px would squeeze the text.
       The picker rule is Närvaro only (.page-head-right-narvaro); the Trafik toggle keeps 999px. */
    .page-head .freshness, .page-head-right-narvaro .pp-toggle { flex-wrap: wrap; row-gap: .15rem; border-radius: 16px; }
    .page-head .freshness strong { white-space: nowrap; }
    /* R-09: sidhuvudets högerkolumn hamnar under rubriken när .page-head bryter — färskhetspillen
       och periodknappen vänsterställs då med resten av innehållet i stället för att hänga kvar
       mot en högerkant som inte längre finns. Popovern begränsas till viewportbredden av samma
       skäl som .cp-panel (U-019). */
    .page-head-right { align-items: flex-start; width: 100%; }
    .pp-panel { width: min(280px, calc(100vw - 24px)); right: auto; left: 0; }
}

/* U-019: topbaren (branding + kundväljare + inloggningsindikation) sprängde viewporten på
   mobil — .topbar-inner hade ingen brytpunkt medan .page-head (U-010) och .compare-bar (R-09)
   redan fått var sin. Gränsen ligger på 628px eftersom kravet (task.md) uttryckligen säger att
   topbaren är oförändrad från och med 628px, samma tröskel som LayoutCheck I4 mäter mot.
   Raden får bryta till två (flex-wrap) i stället för att krympas till en, och kundväljarens
   .cp-panel begränsas till viewportbredden så den inte sticker utanför vänsterkanten.
   F-1-requirements-2/F-1-ui-1 (runda 1): .cp-panel ärvde basregelns `right: 0`, vilket
   förankrade panelen i knappens *högerkant* — men på mobil är knappen smal och sitter längst
   till vänster i .topbar-right (justify-content: space-between), så en högerförankrad panel
   av full bredd hamnade till största delen utanför vänster viewportkant. Panelen förankras
   därför i stället från vänster under brytpunkten. */
@media (max-width: 627.98px) {
    .topbar-inner { height: auto; min-height: 60px; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; row-gap: .4rem; }
    .topbar-right { flex: 1 1 100%; justify-content: space-between; gap: .5rem; min-width: 0; }
    .active-customer { min-width: 0; }
    .ac-label { display: none; }
    .customer-picker { min-width: 0; }
    .cp-toggle { min-width: 0; }
    .cp-current { max-width: 160px; }
    .cp-panel { left: 0; right: auto; width: min(320px, calc(100vw - 24px)); }
    .topbar-tabsrow { flex-wrap: wrap; }
    .tabs-actions { flex: 1 1 100%; justify-content: flex-end; padding: .35rem 0 .5rem; }
}

/* K-007: flikraden (.topbar-tabsbar) sprängde viewporten under 349px — vid 320px gav
   basreglernas padding/gap document.documentElement.scrollWidth = 349px (uppmätt med
   playwright-cli: tre .tab med padding .8rem .95rem och .tabs gap .25rem, sista flikens
   right = 348.9px). Kravet (task.md) säger uttryckligen att flikraden ska vara oförändrad
   vid 390px och 430px, så gränsen måste ligga under 390px; 359.98px ger marginal utan att
   närma sig 390. Flikarna krymps genom mindre horisontell padding och mindre mellanrum —
   de finns kvar som element, ordningen och etiketterna (inkl. .tab-new) är oförändrade. */
@media (max-width: 359.98px) {
    .tabs { gap: 0; }
    .tab { padding: .8rem .4rem; gap: .3rem; }
    .tab i { font-size: .85rem; }
    .tab-new { padding: .05rem .25rem; }
}

/* error boundary */
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Ett fel inträffade."; }