/* ==========================================================================
   Solar Battery Optimiser — shared page primitives

   Everything below builds on the MudBlazor palette (Components/Theme.cs) or on
   the --sbo-* semantic series colours that MainLayout writes into :root for the
   active theme. No hard-coded light or dark values.
   ========================================================================== */

/* ---------------------------------------------------------------- layout */

.sbo-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sbo-split-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 960px) {
    .sbo-split-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------------------------------------------------------------- banner */

.sbo-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Demo-mode strip under the app bar (docs/PLAN_DEMO_SITE.md): passive note, a link out. */
.sbo-demo-banner {
    padding: 8px 24px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.sbo-demo-banner a {
    font-weight: 700;
}

.sbo-banner-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.sbo-banner-icon .mud-icon-root {
    font-size: 1.125rem;
}

.sbo-banner b {
    font-weight: 700;
}

.sbo-banner-warn {
    background: color-mix(in srgb, var(--sbo-warn) 12%, transparent);
    border-color: color-mix(in srgb, var(--sbo-warn) 40%, transparent);
}

.sbo-banner-warn .sbo-banner-icon {
    color: var(--sbo-warn);
}

.sbo-banner-alert {
    background: color-mix(in srgb, var(--sbo-alert) 12%, transparent);
    border-color: color-mix(in srgb, var(--sbo-alert) 40%, transparent);
}

.sbo-banner-alert .sbo-banner-icon {
    color: var(--sbo-alert);
}

.sbo-banner-info {
    background: color-mix(in srgb, var(--sbo-load) 12%, transparent);
    border-color: color-mix(in srgb, var(--sbo-load) 40%, transparent);
}

.sbo-banner-info .sbo-banner-icon {
    color: var(--sbo-load);
}

.sbo-banner-action {
    margin-left: auto;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- card */

.sbo-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
}

.sbo-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sbo-card-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.sbo-card-sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-disabled);
}

.sbo-card-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sbo-card-body {
    padding: 24px;
}

/* ---------------------------------------------------------------- KPI */

.sbo-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
}

/* The dashboard's KPI row: the SoC tile carries the gauge plus its stored/
   headroom readout and needs more room than the other four. */
.sbo-kpi-row-hero {
    grid-template-columns: minmax(280px, 1.35fr) repeat(4, minmax(0, 1fr));
}

@media (max-width: 1279px) {
    .sbo-kpi-row-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sbo-kpi-row-hero > .sbo-kpi:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 599px) {
    .sbo-kpi-row-hero {
        grid-template-columns: 1fr;
    }
}

.sbo-kpi {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sbo-kpi-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sbo-kpi-label .mud-icon-root {
    font-size: 0.9375rem;
    flex: 0 0 auto;
}

.sbo-kpi-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.sbo-kpi-value-sm {
    font-size: 1.25rem;
}

.sbo-kpi-unit {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 3px;
}

.sbo-kpi-foot {
    font-size: 0.71875rem;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* A pill in a KPI foot must never escape its tile. In the dashboard's
   five-tile hero row (viewport 1280px up to about 1445px) the plain tiles
   shrink to ~152-195px while a single-line chip is ~156px wide - the row's
   minmax(0, 1fr) columns have no floor, unlike the prototype's
   minmax(215px, 1fr) auto-fit. Letting the chip fold to two lines keeps the
   pill inside its border at every width; wider layouts still render it on
   one line because no fold is needed. */
.sbo-kpi-foot .sbo-chip {
    white-space: normal;
    text-align: center;
}

.sbo-t-charge { color: var(--sbo-charge); }
.sbo-t-solar  { color: var(--sbo-solar); }
.sbo-t-load   { color: var(--sbo-load); }
.sbo-t-price  { color: var(--sbo-price); }
.sbo-t-warn   { color: var(--sbo-warn); }
.sbo-t-alert  { color: var(--sbo-alert); }
.sbo-t-mute   { color: var(--sbo-hold); }

/* Staleness dot. Tones are set by the caller from the reading's age. */
.sbo-stale-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sbo-charge);
    flex: 0 0 auto;
}

.sbo-stale-dot-warn  { background: var(--sbo-warn); }
.sbo-stale-dot-alert { background: var(--sbo-alert); }

/* ---------------------------------------------------------------- gauge */

.sbo-gauge-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sbo-gauge-box {
    position: relative;
    width: 104px;
    height: 104px;
    flex: 0 0 auto;
}

.sbo-gauge {
    width: 104px;
    height: 104px;
    display: block;
}

.sbo-gauge-mid {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    pointer-events: none;
}

.sbo-gauge-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.sbo-gauge-num span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 1px;
}

.sbo-gauge-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sbo-gauge-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.sbo-gauge-meta-key {
    color: var(--mud-palette-text-disabled);
}

/* ---------------------------------------------------------------- chips */

.sbo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 7px;
    border: 1px solid;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 0.6875rem;
    line-height: 1.5;
    white-space: nowrap;
}

.sbo-chip .mud-icon-root {
    font-size: 0.6875rem;
}

.sbo-chip-ok    { background: color-mix(in srgb, var(--sbo-charge) 14%, transparent); color: var(--sbo-charge); border-color: color-mix(in srgb, var(--sbo-charge) 35%, transparent); }
.sbo-chip-warn  { background: color-mix(in srgb, var(--sbo-warn) 14%, transparent);   color: var(--sbo-warn);   border-color: color-mix(in srgb, var(--sbo-warn) 35%, transparent); }
.sbo-chip-alert { background: color-mix(in srgb, var(--sbo-alert) 14%, transparent);  color: var(--sbo-alert);  border-color: color-mix(in srgb, var(--sbo-alert) 35%, transparent); }
.sbo-chip-load  { background: color-mix(in srgb, var(--sbo-load) 14%, transparent);   color: var(--sbo-load);   border-color: color-mix(in srgb, var(--sbo-load) 35%, transparent); }
.sbo-chip-solar { background: color-mix(in srgb, var(--sbo-solar) 14%, transparent);  color: var(--sbo-solar);  border-color: color-mix(in srgb, var(--sbo-solar) 35%, transparent); }
.sbo-chip-mute  { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); border-color: var(--mud-palette-lines-default); }

/* ---------------------------------------------------------------- stats */

.sbo-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
}

/* Plan economics is cut as three columns on purpose: the fourth stat and the
   savings trend chart then share row two, filling the gap auto-fit would leave
   beside "Saved" at whatever width the card happens to render. */
.sbo-stat-strip-econ {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .sbo-stat-strip-econ {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The trend cell takes the two columns next to "Saved" and stretches to match
   the row height the stat cells set. */
.sbo-stat-econ-trend {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 8px 12px 6px;
    background: var(--mud-palette-background-gray);
}

.sbo-stat-econ-trend .sbo-label {
    margin: 0;
}

.sbo-stat-econ-trend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sbo-stat-econ-trend .sbo-seg {
    padding: 1px;
    gap: 1px;
    border: 0;
    background: transparent;
}

.sbo-stat-econ-trend .sbo-seg-item {
    padding: 1px 5px;
    font-size: 0.625rem;
}

.sbo-stat {
    background: var(--mud-palette-background-gray);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sbo-stat-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.sbo-stat-note {
    font-size: 0.65625rem;
    color: var(--mud-palette-text-disabled);
}

/* ---------------------------------------------------------------- table */

.sbo-table-wrap {
    overflow-x: auto;
}

.sbo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78125rem;
}

.sbo-table th {
    text-align: left;
    padding: 8px 16px;
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 0.625rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sbo-table td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

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

.sbo-t-right {
    text-align: right;
}

.sbo-t-dim {
    color: var(--mud-palette-text-disabled);
}

/* A row that selects something elsewhere on the page, e.g. a chart. */
.sbo-row-click {
    cursor: pointer;
    transition: background 120ms ease;
}

.sbo-row-click:hover {
    background: var(--mud-palette-action-default-hover);
}

.sbo-row-sel,
.sbo-row-sel:hover {
    background: color-mix(in srgb, var(--sbo-charge) 12%, transparent);
}

.sbo-row-sel td {
    box-shadow: inset 2px 0 0 var(--sbo-charge);
}

/* ---------------------------------------------------------------- chart bits */

.sbo-chart {
    width: 100%;
}

.sbo-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.sbo-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 3px 2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    transition: color 150ms ease, opacity 150ms ease;
}

.sbo-legend-item:hover {
    color: var(--mud-palette-text-primary);
}

.sbo-legend-item[aria-pressed="false"] {
    opacity: 0.42;
}

.sbo-legend-swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    flex: 0 0 auto;
    background-color: currentColor;
}

/* Dashed swatch pairs with a dashed forecast series, so the chart stays
   readable without relying on colour alone. */
.sbo-legend-swatch-dash {
    background-image: repeating-linear-gradient(90deg,
        currentColor 0 4px, transparent 4px 7px) !important;
    background-color: transparent !important;
}

/* Dotted swatch pairs with the corrected (bias-adjusted) forecast series -
   dotted reads as "derived", distinct from the raw forecast's dashes. */
.sbo-legend-swatch-dot {
    background-image: repeating-linear-gradient(90deg,
        currentColor 0 2px, transparent 2px 5px) !important;
    background-color: transparent !important;
}

/* ------------------------------------------------- segmented control (ranges) */

.sbo-seg {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
}

.sbo-seg-item {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

.sbo-seg-item:hover {
    color: var(--mud-palette-text-primary);
}

.sbo-seg-item[aria-pressed="true"] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-on-primary);
}

/* ---------------------------------------------------------------- chrome */

/* Brand block at the top of the drawer: gradient mark plus a two-line wordmark. */
.sbo-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 20px;
}

/* tnkrgy brand lockup; the mark itself lives in WattshiftLogo.razor so
   theme vars drive the gradient, and the svg keeps the favicon's geometry. */
.sbo-brand-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.sbo-brand-art {
    flex: 0 0 auto;
    display: block;
}

.sbo-brand-text {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}

.sbo-brand-name {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.sbo-brand-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    /* Must fit the drawer's text column: 232px drawer − 24px drawer padding
       − 16px brand padding − 48px mark − 10px gap = 133px track, and the
       drawer's overflow-y:auto clips at 142px from the text's left edge.
       Measured JetBrains Mono advance 0.632em → 23 chars at 9px + 0.02em
       ≈ 135px (the old 9.5px + 0.08em measured 155px and sliced the final
       letter at the drawer edge). */
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

.sbo-brand-sub {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-disabled);
}

/* Nav items are plain anchors so the active state can be styled exactly as the
   prototype does: a soft charge background with charge-coloured text, not an
   emerald left bar. */
.sbo-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sbo-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    transition: background 160ms cubic-bezier(.2, .8, .2, 1), color 160ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-nav-item:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.sbo-nav-item[aria-current="page"] {
    background: color-mix(in srgb, var(--sbo-charge) 14%, transparent);
    color: var(--sbo-charge);
}

/* Pinned to the bottom of the drawer, above the nav. */
.sbo-drawer-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sbo-drawer-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbo-drawer-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71875rem;
    color: var(--mud-palette-text-secondary);
}

/* App bar: page title and subtitle on the left, controls on the right. */
.sbo-appbar-titles {
    min-width: 0;
    flex: 1 1 auto;
}

.sbo-page-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbo-page-sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-disabled);
}

/* The site switcher doubles as the current-site readout. */
.sbo-site-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms cubic-bezier(.2, .8, .2, 1),
                background 160ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-site-switch:hover {
    border-color: var(--mud-palette-lines-strong);
    background: var(--mud-palette-action-default-hover);
}

.sbo-site-tz {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-disabled);
}

/* Name plus initials avatar. */
.sbo-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.sbo-user-name {
    font-size: 0.75rem;
    font-weight: 600;
}

.sbo-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* Square icon button matching the prototype's 34px control. */
.sbo-icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 160ms cubic-bezier(.2, .8, .2, 1),
                color 160ms cubic-bezier(.2, .8, .2, 1),
                border-color 160ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-icon-btn:hover {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

/* Pages that bring their own single wrapper (plan history, settings, logs).
   Same column and gap as the shell content, so sections never touch. */
.sbo-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------------------------------------------------------------- shell */

/* The framed app shell, exactly as prototypes/portal-v2.html stages it: a
   padded stage with breathing room from the browser edges, and the app inside
   a rounded frame with a border all the way around. The frame fills the
   viewport height and the main column scrolls inside it, so the app bar and
   drawer are always in view and nothing is viewport-fixed. */

.sbo-stage {
    /* A real height, not min-height: with min-height the stage grew to its
       content (the dashboard is taller than the window), which stretched
       .sbo-app - and with it the absolutely-positioned assistant drawer -
       past the fold, so the composer sat hundreds of pixels below the
       screen. height keeps the frame at exactly the viewport; only
       .sbo-main scrolls. */
    height: 100dvh;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sbo-viewport {
    width: 100%;
    max-width: 1440px;
    flex: 1;
    min-height: 0;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-strong);
    background: var(--mud-palette-background);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sbo-app {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

/* Drawer: an in-flow 232px column, full height of the frame. */
.sbo-drawer {
    width: 232px;
    flex: 0 0 232px;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

/* Main column scrolls inside the frame; the app bar sticks to its top so
   page content slides under it, never behind a viewport-fixed element. */
.sbo-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.sbo-appbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    min-height: 56px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    z-index: 20;
}

.sbo-appbar-spacer {
    flex: 1;
}

.sbo-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

/* Backdrop behind the mobile drawer overlay. Rendered always; shown only on
   the mobile layout with the drawer open. It is a button so it is reachable
   without a pointer: activating it closes the navigation. */
.sbo-backdrop {
    position: absolute;
    inset: 0;
    z-index: 25;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, #000 45%, transparent);
    cursor: pointer;
    display: none;
}

/* Hamburger exists only below the drawer breakpoint; the desktop drawer is
   always in flow and has no toggle. */
.sbo-nav-toggle {
    display: none;
}

@media (max-width: 900px) {
    .sbo-nav-toggle {
        display: grid;
    }

    .sbo-drawer {
        position: absolute;
        z-index: 30;
        height: 100%;
        box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .45);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1),
                    visibility 0s linear 220ms;
    }

    .sbo-drawer-open .sbo-drawer {
        transform: none;
        visibility: visible;
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1),
                    visibility 0s;
    }

    .sbo-drawer-open .sbo-backdrop {
        display: block;
    }
}

@media (max-width: 640px) {
    .sbo-stage {
        padding: 10px;
    }

    .sbo-appbar {
        padding: 10px 12px;
        gap: 6px;
    }

    .sbo-content {
        padding: 16px;
        gap: 16px;
    }

    /* The prototype drops the page subtitle and the user name at narrow
       widths but keeps the page title. The site switcher goes down to its
       home icon and chevron, and the account chip to just the initials
       circle — without that the title truncates to one or two letters,
       because the pills sit at their min-content and the title soaks the
       entire overflow. */
    .sbo-page-sub,
    .sbo-user-name,
    .sbo-site-name {
        display: none;
    }

    .sbo-site-switch {
        gap: 4px;
        padding: 5px 8px;
    }

    .sbo-site-switch .sbo-site-tz {
        display: none;
    }

    .sbo-user {
        gap: 0;
        padding: 4px;
    }
}

/* ---------------------------------------------------------------- fields */

.sbo-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.sbo-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sbo-field label {
    font-size: 0.75rem;
    font-weight: 600;
}

.sbo-field .sbo-help {
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--mud-palette-text-disabled);
}

.sbo-inp {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    transition: border-color 160ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 160ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-inp:focus {
    outline: none;
    border-color: var(--sbo-load);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbo-load) 18%, transparent);
}

.sbo-inp[aria-invalid="true"] {
    border-color: var(--sbo-alert);
}

.sbo-text {
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
    font-size: 0.8125rem;
    margin: 0;
}

.sbo-form-error {
    color: var(--sbo-alert);
    font-size: 0.6875rem;
    line-height: 1.35;
    min-height: 1em;
}

.sbo-form-note {
    color: var(--mud-palette-text-disabled);
    font-weight: 400;
    font-size: 0.6875rem;
    margin-left: 6px;
}

.sbo-field-wide {
    grid-column: 1 / -1;
}

.sbo-key-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    flex-wrap: wrap;
}

.sbo-key-text {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    padding: 4px 8px;
    background: var(--mud-palette-surface);
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* ---------------------------------------------------------------- states */

.sbo-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
}

.sbo-state-icon {
    color: var(--mud-palette-text-disabled);
}

.sbo-state-text {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.sbo-state-note {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-disabled);
}

/* A shimmering placeholder block, so a loading page keeps its shape instead of
   collapsing and then jumping when the data lands. */
.sbo-skeleton {
    background: linear-gradient(90deg,
        var(--mud-palette-background-gray) 25%,
        var(--mud-palette-action-default-hover) 37%,
        var(--mud-palette-background-gray) 63%);
    background-size: 400% 100%;
    animation: sbo-shimmer 1.4s ease infinite;
    border-radius: 10px;
}

@keyframes sbo-shimmer {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

/* ---------------------------------------------------------------- logs */

.sbo-log-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Step pills share one width - the longest step name (carried by the row
   container as --sbo-step-w, in ch) plus fixed padding - so the log column
   lines up regardless of step name length. 20px = padding 2x9 + border 2x1. */
.sbo-log-row .sbo-chip {
    box-sizing: border-box;
    min-width: calc(var(--sbo-step-w, 0ch) + 20px);
    justify-content: center;
}

.sbo-log-row:last-child {
    border-bottom: 0;
}

.sbo-log-time {
    flex: 0 0 auto;
    min-width: 64px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.sbo-log-msg {
    font-size: 0.78125rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

/* Selectable cycle in the log sidebar. */
.sbo-log-cycle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 0.78125rem;
    text-align: left;
    cursor: pointer;
    transition: background 160ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-log-cycle:hover {
    background: var(--mud-palette-action-default-hover);
}

.sbo-log-cycle[aria-current="true"] {
    background: color-mix(in srgb, var(--sbo-charge) 14%, transparent);
}

/* Site-details house colour: presets, a native picker, and a default swatch. */
.sbo-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sbo-swatch {
    appearance: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.sbo-swatch-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sbo-swatch);
}

.sbo-swatch[aria-pressed="true"] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.sbo-swatch-input {
    appearance: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.sbo-swatch-input::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.sbo-swatch-input::-webkit-color-swatch {
    border: 0;
    border-radius: 5px;
}

/* Input with a fixed prefix or suffix, e.g. "$0.18" or "85%". */
.sbo-affix {
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    overflow: hidden;
}

.sbo-affix:focus-within {
    border-color: var(--sbo-load);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbo-load) 18%, transparent);
}

.sbo-affix .sbo-inp {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sbo-affix .sbo-inp:focus {
    border: 0;
    box-shadow: none;
}

.sbo-affix-pre,
.sbo-affix-suf {
    padding: 0 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

.sbo-inp-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Cycle Logs: a fixed-width cycle list beside a flexible log panel. */
.sbo-logs-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 899px) {
    .sbo-logs-layout {
        grid-template-columns: 1fr;
    }
}

/* The cycle list grows with the selected range (up to 90 days), so it scrolls
   beside the log rather than pushing the page length past it. */
.sbo-logs-list .sbo-card-body {
    max-height: min(72vh, 760px);
    overflow-y: auto;
}

.sbo-log-cycle {
    flex-wrap: wrap;
}

.sbo-log-cycle-time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
}

.sbo-log-cycle .sbo-chip {
    margin-left: auto;
}

/* Table-cell fields drop the label's top margin so the row stays compact. */
.sbo-field-compact {
    margin-top: 0;
}

/* Visually hidden but still announced, for icon-only and header-labelled controls. */
.sbo-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;
}

.sbo-tbl-wrap {
    overflow-x: auto;
}

.sbo-table input.sbo-inp {
    min-width: 96px;
}

.sbo-table .sbo-affix {
    min-width: 0;
}

/* A quiet, borderless button for in-card and in-row actions. */
.sbo-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--sbo-line);
    border-radius: var(--sbo-r-sm);
    background: var(--sbo-surface-2);
    color: var(--sbo-t-body);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.sbo-btn-ghost:hover:not(:disabled) {
    background: var(--sbo-surface-3);
    border-color: var(--sbo-line-strong);
}

.sbo-btn-ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sbo-btn-ghost.sbo-t-alert:hover:not(:disabled) {
    color: var(--sbo-alert);
    border-color: var(--sbo-alert);
}

/* Live 24-hour coverage read-out under the tariff window table. */
.sbo-tariff-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* The save bar sits below the last card, sticky so long forms stay reachable. */
.sbo-settings-save {
    position: sticky;
    bottom: 16px;
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 0;
}

/* ---------- SboMenu ----------
   Owns its own DOM instead of relying on a portal, so it needs to escape the
   app bar's own stacking and clipping. The panel is positioned against the
   wrapper, and the scrim sits between the panel and the page. */
.sbo-menu {
    position: relative;
    display: inline-flex;
}

.sbo-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    z-index: 1181;
    min-width: 210px;
    max-width: min(280px, calc(100vw - 32px));
    padding: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--sbo-surface-2, var(--mud-palette-surface));
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.28);
}

.sbo-menu-right .sbo-menu-panel {
    right: 0;
}

.sbo-menu-left .sbo-menu-panel {
    left: 0;
}

.sbo-menu-panel:focus {
    outline: none;
}

.sbo-menu-item {
    display: flex;
    align-items: center;
    /* flex-start, not center: MudBlazor's button reset centres button content,
       which left button items (Report a bug, Sign out) horizontally centred
       while anchor items (Profile, Site settings) sat left. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* Groups the support/session items apart from the navigation items above. */
.sbo-menu-item-separated {
    margin-top: 10px;
}

.sbo-menu-item:hover:not(:disabled) {
    background: var(--mud-palette-action-default-hover);
}

.sbo-menu-item.is-selected {
    color: var(--sbo-charge);
    font-weight: 600;
}

.sbo-menu-item:disabled {
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

.sbo-menu-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chevron is decoration; the site's name and zone carry the meaning. */
.sbo-site-switch .sbo-site-tz {
    margin-left: 2px;
}

/* Daily error heatmap: calendar grid, week columns x weekday rows. The
   grid-template-columns count comes from the component via --hm-weeks. */
.sbo-hm-grid {
    display: grid;
    /* minmax(0, 1fr) stops the week-label text from widening the tracks and
       overflowing the card on phones; the labels position themselves.
       The cap keeps a short history (one week column) from rendering
       giant stretched blocks - the calendar hugs its content instead. */
    grid-template-columns: 2.4em repeat(var(--hm-weeks), minmax(12px, 64px));
    gap: 3px;
    justify-content: center;
}

.sbo-hm-week {
    position: relative;
    height: 1em;
}

.sbo-hm-week span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    line-height: 1.2;
    color: var(--mud-palette-text-disabled);
}

/* Wide screens show a label every other week (hm-k2); phones hide the
   every-other labels because the centred text would touch, and fall back to
   every third (hm-k3). */
@media (max-width: 640px) {
    .sbo-hm-week:not(.hm-k3) span { visibility: hidden; }
    .sbo-hm-week span { font-size: 9px; }
}

.sbo-hm-row {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    line-height: 1;
    color: var(--mud-palette-text-disabled);
    display: flex;
    align-items: center;
}

/* Cells are wide rectangles (3:1) rather than squares: seven weekday rows of
   squares dominated the card vertically, and the interest is per-day colour,
   not per-day area. 90 days is ~13 weeks, which keeps each cell legible down
   to 375px. Hover lifting ties into the site's interactive-card language. */
.sbo-hm-cell {
    aspect-ratio: 3;
    border-radius: 3px;
    min-height: 8px;
    transition: filter 0.12s ease;
}

.sbo-hm-cell:hover {
    filter: brightness(1.2);
}

.sbo-hm-0   { background: var(--sbo-charge); }
.sbo-hm-1   { background: color-mix(in srgb, var(--sbo-charge) 65%, transparent); }
.sbo-hm-2   { background: var(--sbo-warn); }
.sbo-hm-3   { background: color-mix(in srgb, var(--sbo-alert) 80%, transparent); }
.sbo-hm-4   { background: var(--sbo-alert); }
.sbo-hm-gap { background: color-mix(in srgb, var(--mud-palette-lines-default) 40%, transparent); }

@media (max-width: 640px) {
    .sbo-hm-grid {
        gap: 2px;
        grid-template-columns: 2em repeat(var(--hm-weeks), minmax(10px, 28px));
    }
    .sbo-hm-cell { border-radius: 2px; }
}

/* ----------------------------------------------------------------- marketing */
/* Public-facing landing page (/). Lives outside the framed app shell - a slim
   sticky nav, full-bleed sections, and a footer. No raw hex; everything via
   --mud-palette-* and --sbo-*. */

.sbo-marketing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.sbo-marketing-page {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 640px) {
    .sbo-marketing-page { padding: 0 16px; }
}

/* ---- nav ---- */

.sbo-marketing-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background) 92%, transparent);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

@media (max-width: 640px) {
    .sbo-marketing-nav { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
}

.sbo-marketing-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.sbo-marketing-links {
    display: flex;
    gap: 22px;
    margin-left: auto;
}

.sbo-marketing-links a {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 4px 0;
    transition: color 160ms cubic-bezier(.2,.8,.2,1);
}

.sbo-marketing-links a:hover { color: var(--mud-palette-text-primary); }

@media (max-width: 720px) {
    .sbo-marketing-links { display: none; }
}

.sbo-marketing-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbo-marketing-link-secondary {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 10px;
    transition: color 160ms, background 160ms;
}

/* The demo is the strongest "show, don't tell" we have — the nav carries it too,
   tinted with the brand cyan so it reads as an invitation, not a menu item. */
.sbo-marketing-link-demo {
    color: var(--sbo-load);
    font-weight: 600;
}

.sbo-marketing-link-demo:hover {
    background: color-mix(in srgb, var(--sbo-load) 12%, transparent);
}

.sbo-marketing-link-secondary:hover {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
}

/* Sign in is now the only auth link in the header, so it stays visible on small
   phones — the old rule hid it because it sat next to "Start free". */

/* ---- shared button styles ---- */

.sbo-btn-marketing-primary,
.sbo-btn-marketing-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background 160ms, border-color 160ms, transform 160ms, color 160ms, box-shadow 160ms;
    cursor: pointer;
}

.sbo-btn-marketing-primary {
    /* The brand's blue accent - the cyan stop of the logo's
       charge -> load gradient. Picked over var(--sbo-charge) (green)
       for visual contrast against the green features and
       tariff bands further down the page. */
    background: var(--sbo-load);
    color: #04121A;
    border-color: var(--sbo-load);
}

.sbo-btn-marketing-primary:hover {
    background: color-mix(in srgb, var(--sbo-load) 86%, #04121A 14%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--sbo-load) 25%, transparent);
}

.sbo-btn-marketing-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.sbo-btn-marketing-primary-large {
    padding: 16px 30px;
    font-size: 1rem;
}

.sbo-btn-marketing-secondary {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

/* The demo button: same quiet frame, but tinted with the brand cyan and carrying the
   play glyph - "watch it work", the second-strongest CTA on the page. */
.sbo-btn-marketing-demo {
    border-color: color-mix(in srgb, var(--sbo-load) 45%, var(--mud-palette-lines-default));
    color: color-mix(in srgb, var(--sbo-load) 75%, var(--mud-palette-text-primary));
}

.sbo-btn-marketing-demo:hover {
    border-color: var(--sbo-load);
    background: color-mix(in srgb, var(--sbo-load) 10%, transparent);
}

.sbo-btn-marketing-secondary:hover {
    background: var(--mud-palette-background-gray);
    border-color: var(--sbo-load);
}

/* ---- hero ---- */

.sbo-marketing-hero {
    padding: 64px 0 56px;
}

.sbo-marketing-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
}

@media (max-width: 900px) {
    .sbo-marketing-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .sbo-marketing-hero { padding: 40px 0 32px; }
}

.sbo-marketing-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sbo-charge) 14%, transparent);
    color: var(--sbo-charge);
    margin-bottom: 24px;
}

.sbo-marketing-h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

/* Name-test variant lockup: sits between the pill and the H1. The wordmark
   itself is swapped in MarketingLayout; this slot is the hero-level name. */
.sbo-marketing-hero-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: -8px 0 14px;
}

.sbo-marketing-hero-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sbo-marketing-hero-brand-decode {
    font-size: 0.78rem;
    color: var(--mud-palette-text-disabled);
}

.sbo-marketing-h1-em {
    color: var(--sbo-charge);
}

.sbo-marketing-lede {
    color: var(--mud-palette-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.5;
    max-width: 36em;
    margin: 0 0 32px;
}

.sbo-marketing-hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.sbo-marketing-hero-note {
    color: var(--mud-palette-text-disabled);
    font-size: 0.8125rem;
}

.sbo-marketing-hero-meta {
    color: var(--mud-palette-text-disabled);
    font-size: 0.75rem;
    line-height: 1.5;
    max-width: 36em;
    margin: 0;
}

.sbo-marketing-inline-link {
    color: var(--sbo-load);
    text-decoration: none;
}

.sbo-marketing-inline-link:hover { text-decoration: underline; }

/* hero: real dashboard screenshot in a browser frame */

.sbo-marketing-hero-shot {
    min-width: 0;
}

.sbo-marketing-browser {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.sbo-marketing-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sbo-marketing-browser-bar > span:not(:last-child) {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.sbo-marketing-browser-url {
    margin-left: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    color: var(--mud-palette-text-disabled);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline capture of the real "what's this?" button, used in the copy where it
   used to say "(?)". Two images; the theme attribute App.razor sets picks one. */
.sbo-help-inline {
    display: inline-block;
    vertical-align: -0.32em;
    margin: 0 0.15em;
    line-height: 0;
}

.sbo-help-inline-img {
    display: inline-block;
    height: 1.45em;
    width: auto;
    border-radius: 0.3em;
}

/* Light is the landing's default; dark swaps in when the visitor's stored
   preference (or the toggle) sets the attribute. */
.sbo-help-inline-img-dark { display: none; }
html[data-sbo-theme="dark"] .sbo-help-inline-img { display: none; }
html[data-sbo-theme="dark"] .sbo-help-inline-img-dark { display: inline-block; }

/* Direct child only: the inline help-button capture lives deeper, inside the
   mock browser bar, and must keep its own small size. */
.sbo-marketing-browser > img {
    display: block;
    width: 100%;
    height: auto;
}

/* Same fit as the imgs: without it the video renders at its intrinsic 1440px and the
   frame's overflow:hidden crops the right side — exactly where the (?) button is. */
.sbo-marketing-browser .sbo-marketing-help-loop {
    display: block;
    width: 100%;
    height: auto;
}

/* Hero screenshot carousel: stacked frames crossfading in place. The slider keeps the
   frame's aspect ratio so the page never reflows between slides, and the dark backing
   hides the swap (every screenshot is the dark theme). */
.sbo-hero-slider {
    position: relative;
    aspect-ratio: 1440 / 900;
    background: #0B1220;
}

.sbo-marketing-browser .sbo-hero-slide {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 500ms ease;
}

.sbo-marketing-browser .sbo-hero-slide-on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sbo-marketing-browser .sbo-hero-slide {
        transition: none;
    }
}

/* The picks are quiet green dots - the screen's name lives in the browser-bar label
   above and each dot carries its own aria-label/title. */
.sbo-hero-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 14px auto 0;
}

.sbo-hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--sbo-charge) 45%, transparent);
    background: transparent;
    cursor: pointer;
    transition: background 160ms, border-color 160ms;
}

.sbo-hero-dot:hover {
    border-color: var(--sbo-charge);
}

.sbo-hero-dot-on {
    background: var(--sbo-charge);
    border-color: var(--sbo-charge);
}

@media (prefers-reduced-motion: reduce) {
    .sbo-hero-dot {
        transition: none;
    }
}

.sbo-marketing-hero-shot-note {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin: 10px 2px 0;
}

/* ---- stat strip ---- */

.sbo-marketing-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding: 32px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin: 24px 0 64px;
}

@media (max-width: 720px) {
    /* Three tiles stack one-per-row on narrow screens, not 2+1. */
    .sbo-marketing-stats { grid-template-columns: 1fr; gap: 20px; margin: 16px 0 40px; }
}

.sbo-marketing-stat {
    text-align: left;
}

.sbo-marketing-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
    margin-bottom: 6px;
}

.sbo-marketing-stat-label {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.sbo-marketing-stat-note {
    color: var(--mud-palette-text-disabled);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* ---- sections ---- */

.sbo-marketing-section {
    padding: 64px 0;
}

.sbo-marketing-section-head {
    max-width: 38em;
    margin: 0 auto 40px;
    text-align: center;
}

.sbo-marketing-section-head .sbo-label {
    margin-bottom: 12px;
    color: var(--mud-palette-text-secondary);
}

.sbo-marketing-h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}

.sbo-marketing-section-lede {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
}

/* breathing room between a section head's lede paragraphs */
.sbo-marketing-section-lede + .sbo-marketing-section-lede {
    margin-top: 14px;
}

.sbo-marketing-pill-warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sbo-warn) 22%, transparent);
    color: var(--sbo-warn);
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
}

.sbo-marketing-pill-warn-inline {
    font-size: 0.5625rem;
    padding: 2px 6px;
    margin-left: 8px;
}

/* ---- features ---- */

.sbo-marketing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* The flow cards are a pipeline (plan -> buy -> hold -> learn), not a
   six-up feature wall: the opener and the closer each take two tracks so
   the grid reads as deliberately shaped rather than tiled. Collapses to a
   single column on phones. */
@media (min-width: 640px) {
    .sbo-marketing-feature-lead,
    .sbo-marketing-feature-wide {
        grid-column: span 2;
    }
}

.sbo-marketing-feature {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 22px;
    background: var(--mud-palette-surface);
    transition: border-color 180ms;
}

/* Step number on the "how it works" pipeline cards: the brand's mono face,
   quiet but present. */
.sbo-marketing-feature-num {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--sbo-charge) 55%, var(--mud-palette-text-primary));
}

.sbo-marketing-feature:hover {
    border-color: color-mix(in srgb, var(--sbo-charge) 60%, var(--mud-palette-lines-default));
}

.sbo-marketing-feature-icon {
    color: var(--sbo-charge);
    margin-bottom: 12px;
    font-size: 1.4rem;
}

.sbo-marketing-feature-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.sbo-marketing-feature-body {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}

/* ---- AI showcase: real screenshots in browser frames ---- */

.sbo-marketing-ai-shots {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sbo-marketing-ai-shots figure {
    margin: 0;
    min-width: 0;
}

.sbo-marketing-ai-shots figcaption {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin: 10px 2px 0;
    text-align: center;
}

.sbo-marketing-ai-cta {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

/* screenshot band after the feature cards */

.sbo-marketing-shots-band {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
    margin-top: 48px;
}

.sbo-marketing-shots-band figure { margin: 0; min-width: 0; }

.sbo-marketing-shots-band figcaption {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin-top: 10px;
}

.sbo-marketing-shots-mobile {
    display: block;
    width: min(240px, 100%);
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
}

@media (max-width: 900px) {
    .sbo-marketing-shots-band { grid-template-columns: 1fr; }
}

/* ---- pricing ---- */

.sbo-marketing-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .sbo-marketing-plans { grid-template-columns: 1fr; }
}

.sbo-marketing-plan {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 26px 22px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sbo-marketing-plan-popular {
    border-color: var(--sbo-charge);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sbo-charge) 50%, transparent);
}

.sbo-marketing-plan-popular-badge {
    position: absolute;
    top: -10px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sbo-charge);
    color: #04121A;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sbo-marketing-plan-head { margin-bottom: 4px; }

.sbo-marketing-plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.sbo-marketing-plan-tagline {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    margin: 0;
}

.sbo-marketing-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sbo-marketing-plan-currency {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.sbo-marketing-plan-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sbo-marketing-plan-period {
    color: var(--mud-palette-text-disabled);
    font-size: 0.875rem;
}

.sbo-marketing-plan .sbo-btn-marketing-primary,
.sbo-marketing-plan .sbo-btn-marketing-secondary {
    align-self: stretch;
    width: 100%;
}

.sbo-marketing-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sbo-marketing-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
}

.sbo-marketing-plan-features .sbo-marketing-plan-muted {
    color: var(--mud-palette-text-disabled);
}

.sbo-marketing-plan-check {
    color: var(--sbo-charge);
    font-size: 1rem;
}

.sbo-marketing-plan-x {
    color: var(--mud-palette-text-disabled);
    font-size: 1rem;
}

.sbo-marketing-pricing-note {
    text-align: center;
    margin: 32px auto 0;
    max-width: 42em;
}

/* ---- FAQ ---- */

.sbo-marketing-faq {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sbo-marketing-faq-item {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    overflow: hidden;
    transition: border-color 180ms;
}

.sbo-marketing-faq-item[open] {
    border-color: color-mix(in srgb, var(--sbo-charge) 50%, var(--mud-palette-lines-default));
}

.sbo-marketing-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background 160ms;
}

.sbo-marketing-faq-item summary::-webkit-details-marker { display: none; }

.sbo-marketing-faq-item summary:hover {
    background: var(--mud-palette-background-gray);
}

.sbo-marketing-faq-icon {
    color: var(--sbo-charge);
    font-size: 1.05rem;
}

.sbo-marketing-faq-body {
    padding: 0 20px 18px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.sbo-marketing-faq-body code {
    background: var(--mud-palette-background-gray);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* ---- final CTA ---- */

.sbo-marketing-final {
    padding: 64px 0 96px;
    text-align: center;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 32px;
}

.sbo-marketing-final .sbo-marketing-section-lede {
    margin-bottom: 28px;
}

/* ---- footer ---- */

.sbo-marketing-foot {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 24px 0;
    background: var(--mud-palette-background-gray);
}

.sbo-marketing-foot-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.sbo-marketing-foot-copy {
    color: var(--mud-palette-text-disabled);
    font-size: 0.75rem;
    margin-left: auto;
}

.sbo-marketing-foot-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sbo-marketing-foot-links a {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color 160ms;
}

.sbo-marketing-foot-links a:hover { color: var(--mud-palette-text-primary); }

@media (max-width: 640px) {
    .sbo-marketing-foot-inner { flex-direction: column; align-items: flex-start; }
    .sbo-marketing-foot-copy { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sbo-marketing-links a,
    .sbo-marketing-link-secondary,
    .sbo-marketing-foot-links a,
    .sbo-marketing-feature,
    .sbo-marketing-faq-item,
    .sbo-marketing-faq-item summary,
    .sbo-btn-marketing-primary,
    .sbo-btn-marketing-secondary {
        transition: none;
    }
}

/* ---------------------------------------------------------------- avatar */

.sbo-avatar {
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    background: var(--mud-palette-background-gray);
    color: var(--sbo-charge);  /* currentColor inside the symbol */
}

.sbo-avatar-sm  { width: 24px; height: 24px; }
.sbo-avatar-md  { width: 32px; height: 32px; }
.sbo-avatar-lg  { width: 64px; height: 64px; }
.sbo-avatar-xl  { width: 96px; height: 96px; }

.sbo-avatar > img,
.sbo-avatar > svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Initials fallback - we set color: #04121A on the parent so the sbo-num text
   sits cleanly on a coloured circle. The glyph size is set per tile size in
   px: the old 0.45em scaled off the INHERITED font-size (the app bar's), not
   the tile's width, so any typography change upstream shrank the initials
   into unreadability. */
.sbo-avatar-initials {
    color: #04121A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

.sbo-avatar-initials-text {
    color: #04121A;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sbo-avatar-sm .sbo-avatar-initials-text { font-size: 10px; }
.sbo-avatar-lg .sbo-avatar-initials-text { font-size: 26px; }
.sbo-avatar-xl .sbo-avatar-initials-text { font-size: 40px; }

/* ---------------------------------------------------------------- profile */

.sbo-profile-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.sbo-profile-header .sbo-text {
    margin: 0;
}

.sbo-profile-avatar-row {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.sbo-profile-avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sbo-profile-avatar-label {
    color: var(--mud-palette-text-disabled);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sbo-profile-avatar-section-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    font-weight: 600;
}

.sbo-profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 12px;
}

.sbo-profile-avatar-tile {
    background: var(--mud-palette-background-gray);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 8px 8px 4px;
    cursor: pointer;
    transition: border-color 160ms cubic-bezier(.2,.8,.2,1),
                background 160ms;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sbo-profile-avatar-tile:hover {
    background: color-mix(in srgb, var(--sbo-load) 12%, var(--mud-palette-background-gray));
}

.sbo-profile-avatar-tile-selected {
    border-color: var(--sbo-charge);
    background: color-mix(in srgb, var(--sbo-charge) 14%, var(--mud-palette-background-gray));
}

.sbo-profile-avatar-tile-name {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1;
    padding: 2px 0 4px;
}

.sbo-profile-avatar-upload {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sbo-profile-note {
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}

/* ------------------------------------------------------------- assistant */

/* Docked right beside the page above 720px (page stays interactive, Esc
   closes); full-screen below it, inside the framed shell. The backdrop only
   exists on mobile - on desktop the drawer is a pane, not a modal. */
.sbo-ai {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    box-shadow: -12px 0 32px -12px rgba(15, 23, 42, .4);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1),
                visibility 0s linear 240ms;
}

.sbo-ai-open {
    transform: none;
    visibility: visible;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1),
                visibility 0s linear 0s;
}

.sbo-ai-backdrop {
    position: absolute;
    inset: 0;
    z-index: 35;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, #000 45%, transparent);
    cursor: pointer;
    display: none;
}

.sbo-ai-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    min-height: 60px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--sbo-charge) 6%, transparent),
        transparent 75%);
}

.sbo-ai-titles { flex: 1; min-width: 0; }
.sbo-ai-title { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.sbo-ai-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Assistant identity badge: gradient disc with the sparkle glyph, echoing the
   FAB. Pulses a ring while a stream is in flight - the animated "working"
   signal the user asked for, visible next to both the title and each reply. */
.sbo-ai-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sbo-charge), var(--sbo-solar));
    color: #05171F;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--sbo-charge) 60%, transparent);
}

.sbo-ai-avatar-lg { width: 34px; height: 34px; }

.sbo-ai-avatar-busy { animation: sbo-ai-avatar-pulse 1.4s ease-in-out infinite; }

@keyframes sbo-ai-avatar-pulse {
    0%, 100% { box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--sbo-charge) 60%, transparent),
                           0 0 0 0 color-mix(in srgb, var(--sbo-solar) 45%, transparent); }
    50%      { box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--sbo-charge) 60%, transparent),
                           0 0 0 7px color-mix(in srgb, var(--sbo-solar) 0%, transparent); }
}

.sbo-ai-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding: 18px 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sbo-ai-loading,
.sbo-ai-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Consent gate */
.sbo-ai-gate { display: flex; flex-direction: column; gap: 15px; }
.sbo-ai-gate-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.sbo-ai-gate-copy { font-size: 0.875rem; color: var(--mud-palette-text-secondary); line-height: 1.6; }

.sbo-ai-caps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 0.85rem;
}

.sbo-ai-caps li { display: flex; align-items: center; gap: 10px; }
.sbo-ai-caps .mud-icon-root {
    font-size: 0.7rem;
    padding: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sbo-charge) 15%, transparent);
    color: var(--sbo-charge);
    flex: 0 0 auto;
}

.sbo-ai-privacy {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 11px 13px;
}

.sbo-ai-accept {
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--mud-palette-primary) 75%, transparent);
    transition: filter 180ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 180ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-ai-accept:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--mud-palette-primary) 85%, transparent); }
.sbo-ai-accept:disabled { opacity: .6; cursor: default; }

/* Small uppercase label above the post-consent suggestion cards. */
.sbo-ai-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Shortcut cards: stacked list of question chips, with an optional stat pill. */
.sbo-shortcut-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.sbo-shortcut {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    padding: 11px 13px;
    min-height: 44px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.825rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(.2, .8, .2, 1),
                background 180ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 180ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-shortcut:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
    background: var(--mud-palette-surface);
    box-shadow: 0 5px 14px -8px rgba(15, 23, 42, .45);
}

.sbo-shortcut:disabled { opacity: .55; cursor: default; }
.sbo-shortcut .sbo-chip { flex: 0 0 auto; }

.sbo-shortcut-sm {
    padding: 7px 12px;
    min-height: 34px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    background: transparent;
}

/* Transcript */
.sbo-ai-turn {
    display: flex;
    animation: sbo-ai-rise 240ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes sbo-ai-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.sbo-ai-turn-user { justify-content: flex-end; }

.sbo-ai-bubble {
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 16px 16px 4px 16px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: 0 3px 10px -6px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent);
}

/* Assistant turn: identity avatar + reply column. The avatar carries the
   busy pulse for the whole turn, so "working" is visible even after the
   first token lands. */
.sbo-ai-turn-assistant { align-items: flex-start; gap: 9px; }

.sbo-ai-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.sbo-ai-answer {
    font-size: 0.875rem;
    line-height: 1.62;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px 14px 14px 14px;
    padding: 10px 13px;
}

/* Markdown the reply is rendered as: tight paragraphs, scan-friendly lists, and
   tables that scroll sideways inside the narrow drawer rather than overflowing
   the bubble. */
.sbo-ai-answer :where(p, ul, ol, table, pre, blockquote) {
    margin: 0 0 0.55em;
}

.sbo-ai-answer :where(p, ul, ol, table, pre, blockquote):last-child { margin-bottom: 0; }

.sbo-ai-answer ul,
.sbo-ai-answer ol { padding-left: 1.2em; }

.sbo-ai-answer li { margin: 0.18em 0; }
.sbo-ai-answer li::marker { color: var(--mud-palette-primary); }

.sbo-ai-answer table {
    border-collapse: collapse;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-overflow-scrolling: touch;
}

.sbo-ai-answer :where(th, td) {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 3px 7px;
    text-align: left;
    white-space: nowrap;
}

.sbo-ai-answer th {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sbo-ai-answer td { font-variant-numeric: tabular-nums; }

.sbo-ai-answer tr:nth-child(even) td {
    background: color-mix(in srgb, var(--mud-palette-background-gray) 60%, white);
}

.sbo-ai-answer strong { font-weight: 650; color: var(--mud-palette-text-primary); }

.sbo-ai-answer code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-radius: 4px;
    padding: 1px 4px;
}

.sbo-ai-answer :where(h1, h2, h3, h4) {
    font-size: 0.95rem;
    font-weight: 650;
    margin: 0.2em 0 0.35em;
    line-height: 1.35;
}

.sbo-ai-answer blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 9px;
    color: var(--mud-palette-text-secondary);
}

.sbo-ai-caret {
    display: inline-block;
    width: 6px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--mud-palette-primary);
    animation: sbo-ai-blink 1s step-end infinite;
}

@keyframes sbo-ai-blink { 50% { opacity: 0; } }

/* Typing indicator: three-dot pulse while waiting for the first token. */
.sbo-ai-thinking {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px 14px 14px 14px;
    padding: 11px 13px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.sbo-ai-thinking-label { margin-left: 1px; }

.sbo-ai-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    animation: sbo-ai-bounce 1.2s ease-in-out infinite;
}

.sbo-ai-dot:nth-child(2) { animation-delay: .15s; }
.sbo-ai-dot:nth-child(3) { animation-delay: .3s; }

@keyframes sbo-ai-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.sbo-ai-copy {
    width: 30px;
    height: 30px;
    margin-left: 2px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 160ms, color 160ms, border-color 160ms;
}

.sbo-ai-copy:hover {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

.sbo-ai-followups { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; }

/* Error / upsell / setup banner above the input */
.sbo-ai-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 14px 10px;
    padding: 9px 10px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
    flex: 0 0 auto;
}

.sbo-ai-banner-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sbo-ai-banner-text a { color: inherit; font-weight: 600; }

.sbo-ai-banner-error {
    background: color-mix(in srgb, var(--sbo-alert) 12%, transparent);
    border-color: color-mix(in srgb, var(--sbo-alert) 40%, transparent);
    color: var(--sbo-alert);
}

.sbo-ai-banner-warn {
    background: color-mix(in srgb, var(--sbo-warn) 12%, transparent);
    border-color: color-mix(in srgb, var(--sbo-warn) 40%, transparent);
    color: var(--sbo-warn);
}

.sbo-ai-banner-upsell,
.sbo-ai-banner-setup {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    color: var(--mud-palette-text-primary);
}

.sbo-ai-banner .sbo-icon-btn { width: 26px; height: 26px; }

/* Input bar — pinned at the drawer's bottom (the stage height fix is what
   keeps that inside the visible screen). */
.sbo-ai-inputbar {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 11px 13px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 -10px 24px -18px rgba(15, 23, 42, .55);
    padding-bottom: max(11px, env(safe-area-inset-bottom));
}

.sbo-ai-input {
    flex: 1;
    min-width: 0;
    /* 16px: below that iOS zooms the viewport on focus. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 11px 14px;
    resize: none;
    max-height: 120px;
    outline: none;
    transition: border-color 180ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 180ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-ai-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
.sbo-ai-input::placeholder { color: var(--mud-palette-text-disabled); }

.sbo-ai-send {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    cursor: pointer;
    transition: filter 160ms cubic-bezier(.2, .8, .2, 1), opacity 160ms;
}

.sbo-ai-send:hover:not(:disabled) { filter: brightness(1.08); }
.sbo-ai-send:disabled { opacity: .4; cursor: default; }

.sbo-ai-stop { background: var(--sbo-alert); color: #fff; }

/* Floating action button - bottom-right, above the stage frame's padding.
   Min 56px touch target; pulses while the assistant is thinking. */
.sbo-ai-fab {
    position: fixed;
    right: max(40px, env(safe-area-inset-right));
    bottom: max(40px, env(safe-area-inset-bottom));
    z-index: 50;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sbo-charge), color-mix(in srgb, var(--sbo-charge) 55%, var(--sbo-solar)));
    color: #04121A;
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, .5);
    cursor: pointer;
    transition: transform 160ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 160ms cubic-bezier(.2, .8, .2, 1);
}

.sbo-ai-fab:hover { transform: translateY(-2px); }

.sbo-ai-fab-busy {
    animation: sbo-ai-fab-pulse 1.6s ease-in-out infinite;
}

@keyframes sbo-ai-fab-pulse {
    0%, 100% { box-shadow: 0 10px 24px -6px rgba(15, 23, 42, .5),
                           0 0 0 0 color-mix(in srgb, var(--sbo-charge) 45%, transparent); }
    50%      { box-shadow: 0 10px 24px -6px rgba(15, 23, 42, .5),
                           0 0 0 10px color-mix(in srgb, var(--sbo-charge) 0%, transparent); }
}

/* Mobile: full-screen dialog inside the frame, scrim behind. */
@media (max-width: 720px) {
    .sbo-ai {
        width: 100%;
        border-left: 0;
        box-shadow: none;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .sbo-ai-backdrop-open {
        display: block;
        backdrop-filter: blur(2px);
    }
    .sbo-ai-fab { right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* Reduced motion: no slide, no pulse - state is still carried by colour and
   the Stop button, never by animation alone. */
@media (prefers-reduced-motion: reduce) {
    .sbo-ai,
    .sbo-ai-open { transition: none; transform: none; }
    .sbo-ai:not(.sbo-ai-open) { display: none; }

    .sbo-ai-avatar-busy,
    .sbo-ai-fab-busy { animation: none; }
    .sbo-ai-caret { animation: none; }
    .sbo-ai-dot { animation: none; opacity: .7; }
    .sbo-ai-turn { animation: none; }
    .sbo-ai-body { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- habit: what's-this help mode */

/* The app-bar ? button turns help mode on; html[data-sbo-helpmode] then outlines
   every annotated region on hover and clicking one hands the region id to
   MainLayout, which opens the drawer with that question queued (js/help.js). */
html[data-sbo-helpmode="on"] [data-sbo-help]:hover {
    outline: 2px dashed color-mix(in srgb, var(--sbo-charge) 65%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
    cursor: help;
}

html[data-sbo-helpmode="on"] .sbo-kpi-row-hero [data-sbo-help]:hover {
    cursor: help;
}

/* Active mode signal on the ? button itself, so it is never colour alone. */
.sbo-help-btn-on {
    outline: 2px solid color-mix(in srgb, var(--sbo-charge) 65%, transparent);
    outline-offset: 1px;
}

/* Fixed hint bar, visible only while the mode is on. */
.sbo-helpbar {
    display: none;
    position: fixed;
    z-index: 1100;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 460px);
    padding: 8px 16px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 0.8rem;
    white-space: nowrap;
}

.sbo-helpbar-kbd {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    padding: 2px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    color: var(--mud-palette-text-disabled);
}

html[data-sbo-helpmode="on"] .sbo-helpbar { display: flex; }

@media (prefers-reduced-motion: reduce) {
    .sbo-helpbar { transition: none; }
}

/* Bug report sheet inside the assistant drawer — same visual family as the
   consent gate, with form affordances the gate doesn't need. */
.sbo-ai-bug-text {
    width: 100%;
    min-height: 5.5rem;
    resize: vertical;
    font-size: 0.875rem;
}

.sbo-ai-bug-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.sbo-ai-bug-opt {
    cursor: pointer;
    user-select: none;
}

.sbo-ai-bug-opt input { accent-color: var(--sbo-charge); }

.sbo-ai-bug-preview { margin-top: 2px; }

.sbo-ai-bug-done {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--sbo-charge) 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--sbo-charge) 8%, transparent);
    font-size: 0.85rem;
}

.sbo-ai-bug-done a { color: var(--sbo-charge); }

.sbo-ai-link {
    background: none;
    border: none;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}

/* Help topics: a compact chip row under the dynamic shortcuts. Deliberately a
   different class from .sbo-shortcut — the dynamic cards have a "max ~4" focus
   contract, and the help topics are a full ten-item index. */
.sbo-helptopics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.sbo-helptopic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.sbo-helptopic:hover {
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in srgb, var(--sbo-charge) 55%, transparent);
}

.sbo-helptopic:disabled {
    opacity: 0.5;
    cursor: default;
}

.sbo-helptopic-q {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    width: 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sbo-charge) 14%, transparent);
    color: var(--sbo-charge);
}

/* The old card-style help topic slots kept for any future reuse. */
.sbo-shortcut-help .sbo-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Screenshot picker on the bug sheet: a quiet label hides the native file input; the
   preview is a small thumbnail that cannot dominate the sheet. */
.sbo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sbo-ai-bug-shot {
    cursor: pointer;
}

.sbo-ai-bug-shot:hover .mud-icon-root,
.sbo-ai-bug-shot:hover span { color: var(--mud-palette-text-primary); }

.sbo-ai-bug-shot-row { gap: 10px; }

.sbo-ai-bug-shot-preview {
    max-height: 96px;
    max-width: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* ---------- Trial lock screen (spec 0001 §5) ---------- */
/* Fixed full-screen panel: an expired trial blocks the shell until the
   subscriber either subscribes or explicitly chooses to keep browsing
   read-only. Hidden on /choose-plan, where the plan step takes over. */
.sbo-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--mud-palette-background) 84%, transparent);
    backdrop-filter: blur(3px);
}

.sbo-lock-card {
    max-width: 460px;
    width: 100%;
    text-align: center;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 30px 26px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.sbo-lock-icon {
    font-size: 2.1rem;
    color: var(--mud-palette-warning);
}

.sbo-lock-title {
    margin: 10px 0 6px;
    font-size: 1.3rem;
    font-weight: 700;
}

.sbo-lock-body {
    margin: 0 0 20px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
}

.sbo-lock-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sbo-lock-actions button { width: 100%; }

/* ---------- Plan step: the tier carried in through ?plan= ---------- */
.sbo-plan-preselected {
    outline: 2px solid color-mix(in srgb, var(--sbo-load) 65%, transparent);
    outline-offset: 3px;
}