/* ==========================================================
   App shell + pages on top of Basecoat (shadcn tokens).
   Basecoat provides .btn .card .badge .table .input .tabs
   .dialog .alert .sidebar .toast; this file adds the layout,
   brand colours and the app's own components.
   ========================================================== */

:root {
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --default-font-family: var(--font-sans);

    /* Brand: calm blue on shadcn neutrals */
    --primary: oklch(0.546 0.215 262.9);
    --primary-foreground: oklch(0.985 0 0);
    --ring: oklch(0.707 0.165 254.6);
    --sidebar-primary: var(--primary);

    /* Status */
    --good: oklch(0.627 0.17 149.2);
    --good-bg: oklch(0.962 0.044 156.7);
    --mid: oklch(0.705 0.16 70);
    --mid-fg: oklch(0.47 0.12 62);
    --mid-bg: oklch(0.973 0.071 103.2);
    --bad: oklch(0.577 0.215 27.3);
    --bad-bg: oklch(0.971 0.013 17.4);
    --info-bg: oklch(0.97 0.014 254.6);

    --sidebar-width: 16.5rem;
    --page-max: 72rem;
}

.dark {
    --primary: oklch(0.623 0.188 259.8);
    --primary-foreground: oklch(0.985 0 0);
    --ring: oklch(0.488 0.217 264.4);
    --good: oklch(0.723 0.17 149.6);
    --good-bg: oklch(0.32 0.06 155 / 0.45);
    --mid: oklch(0.795 0.16 86);
    --mid-fg: oklch(0.86 0.13 90);
    --mid-bg: oklch(0.42 0.08 75 / 0.35);
    --bad: oklch(0.704 0.191 22.2);
    --bad-bg: oklch(0.4 0.1 25 / 0.35);
    --info-bg: oklch(0.38 0.1 262 / 0.35);
}

html, body { background: var(--background); color: var(--foreground); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
code, kbd, .cell-strong { display: block; font-weight: 500; }
.cell-sub { display: block; font-size: .75rem; color: var(--muted-foreground); font-weight: 400; }
td.num .cell-sub { text-align: right; }
.good-dot { background: var(--good); margin-right: .125rem; }
.code-sm { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted-foreground); }
.text-good { color: var(--good); }
.text-bad { color: var(--bad); }
[class^="icon-"], [class*=" icon-"] { line-height: 1; display: inline-block; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.app-only-dark { display: none !important; }
.dark .app-only-dark { display: inline-block !important; }
.dark .app-only-light { display: none !important; }

/* ---------------------------------------------------------- shell */
.app-main { min-height: 100dvh; display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .5rem;
    height: 3.5rem; padding: 0 1rem;
    background: color-mix(in oklab, var(--background) 85%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.app-topbar-sep { width: 1px; height: 1rem; background: var(--border); margin: 0 .25rem; }
.app-crumbs { display: flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--muted-foreground); min-width: 0; }
.app-crumbs a { color: var(--muted-foreground); text-decoration: none; }
.app-crumbs a:hover { color: var(--foreground); }
.app-crumbs span:last-child { color: var(--foreground); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-crumbs i { font-size: .75rem; }
.app-topbar-end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.app-search {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 2.25rem; padding: 0 .5rem 0 .75rem; min-width: 15rem;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--card); color: var(--muted-foreground); font-size: .875rem; cursor: pointer;
}
.app-search:hover { background: var(--accent); }
.app-search .kbd { margin-left: auto; }
.app-content { flex: 1; padding: 1.5rem 1rem 3rem; }
.app-bare { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 1rem; }

/* Sidebar header: brand + account switcher */
.sidebar nav > header { display: grid; gap: .5rem; padding: .75rem .5rem .25rem; }
.app-brand { display: flex; align-items: center; gap: .625rem; padding: .25rem .5rem; text-decoration: none; color: var(--sidebar-foreground); }
.app-brand-mark { width: 2rem; height: 2rem; flex: none; display: block; }
.app-brand-mark img { display: block; width: 100%; height: 100%; }
.app-brand-text { display: grid; line-height: 1.15; }
.app-brand-text strong { font-size: .875rem; font-weight: 600; }
.app-brand-text small { font-size: .75rem; color: var(--muted-foreground); }
.app-switcher-btn {
    display: flex; align-items: center; gap: .625rem; width: 100%; text-align: left;
    padding: .5rem; border: 1px solid var(--sidebar-border); border-radius: var(--radius-lg);
    background: var(--background); color: var(--sidebar-foreground); cursor: pointer;
}
.app-switcher-btn:hover { background: var(--sidebar-accent); }
.app-switcher-btn > i { margin-left: auto; color: var(--muted-foreground); }
.app-switcher-avatar, .avatar-sq {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--radius-md);
    display: grid; place-items: center; font-weight: 600; font-size: .8125rem;
    background: var(--info-bg); color: var(--primary);
}
.avatar-sq.lg { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; border-radius: var(--radius-lg); }
.app-switcher-text { display: grid; min-width: 0; line-height: 1.2; }
.app-switcher-text strong { font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-switcher-text small { font-size: .75rem; color: var(--muted-foreground); }
.sidebar [role="group"] h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar ul a i { font-size: 1rem; }

/* Sidebar footer: user */
.sidebar nav > footer { padding: .5rem; border-top: 1px solid var(--sidebar-border); display: grid; gap: .25rem; }
.app-user { display: flex; align-items: center; gap: .625rem; padding: .375rem .5rem; min-width: 0; }
.app-user-avatar { width: 2rem; height: 2rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; display: grid; place-items: center; background: var(--secondary); font-weight: 600; font-size: .8125rem; }
.app-user-text { display: grid; min-width: 0; line-height: 1.2; }
.app-user-text strong { font-size: .8125rem; font-weight: 600; }
.app-user-text small { font-size: .75rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user-actions { display: flex; gap: .125rem; padding: 0 .25rem; }
.app-lang { font-size: .6875rem; font-weight: 700; letter-spacing: .02em; }

/* Account switcher dialog */
.app-switcher > div { padding: 0; gap: 0; width: min(36rem, calc(100vw - 2rem)); max-height: min(32rem, 80dvh); display: flex; flex-direction: column; overflow: hidden; }
.app-switcher-search { display: flex; align-items: center; gap: .5rem; padding: 0 .875rem; border-bottom: 1px solid var(--border); }
.app-switcher-search > i { color: var(--muted-foreground); }
.app-switcher-input { flex: 1; height: 3rem; border: 0; outline: 0; background: transparent; color: var(--foreground); font: inherit; font-size: .9375rem; }
.app-switcher-input::-webkit-search-cancel-button { display: none; }
.app-switcher-list { list-style: none; margin: 0; padding: .375rem; overflow-y: auto; flex: 1; }
.app-switcher-list li { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: var(--radius-md); cursor: pointer; font-size: .875rem; }
.app-switcher-list li[aria-selected="true"] { background: var(--accent); }
.app-switcher-list li small { color: var(--muted-foreground); font-family: var(--font-mono); font-size: .75rem; }
.app-switcher-list li .app-switcher-avatar { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
.app-switcher-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-switcher-list li i { color: var(--primary); }
.app-switcher-empty { padding: 2rem; text-align: center; color: var(--muted-foreground); margin: 0; }
.app-switcher-foot { display: flex; align-items: center; gap: 1rem; padding: .5rem .875rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--muted-foreground); }
.app-switcher-foot .kbd { margin-right: .125rem; }
.app-switcher-foot a { margin-left: auto; color: var(--foreground); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }

/* ---------------------------------------------------------- page */
.page { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.page > *, .ws-head > div, .tabs, .tabs [role="tabpanel"] > * { min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.page-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0; }
.page-sub { margin: .375rem 0 0; color: var(--muted-foreground); }
.meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .375rem; font-size: .8125rem; color: var(--muted-foreground); }
.meta span, .meta a { display: inline-flex; align-items: center; gap: .375rem; }
.meta a { color: var(--muted-foreground); text-decoration: none; }
.meta a:hover { color: var(--foreground); }
.eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card-flush { padding-bottom: 0; overflow: hidden; }
.card-flush:not(:has(> header)) { padding-top: 0; }
.card-flush:not(:has(> header)) > .table-container { border-top: 0; }
.card-flush > .table-container, .card-flush > .empty-mini { border-top: 1px solid var(--border); }
.card.dashed { border-style: dashed; box-shadow: none; }
.card > header h2 i { color: var(--primary); margin-right: .375rem; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.stat { gap: .375rem; padding: 1.25rem; }
.stat-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--muted-foreground); }
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: .9375rem; font-weight: 500; color: var(--muted-foreground); margin-left: .25rem; }
.stat-hint { font-size: .75rem; color: var(--muted-foreground); }
.stat-link { font-size: .75rem; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.stat-warn .stat-label i { color: var(--bad); }

/* Onboarding */
.onboard { flex-direction: row; align-items: center; gap: 1.25rem; padding: 1.5rem; background: linear-gradient(135deg, var(--info-bg), var(--card) 60%); }
.onboard-icon { width: 3rem; height: 3rem; border-radius: 999px; display: grid; place-items: center; background: var(--background); color: var(--primary); font-size: 1.375rem; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
.onboard-body { flex: 1; min-width: 0; }
.onboard-body h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 .25rem; }
.onboard-body p { margin: 0; color: var(--muted-foreground); }
.onboard-steps { list-style: none; padding: 0; margin: .875rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; }
.onboard-steps li { display: inline-flex; align-items: center; gap: .5rem; }
.onboard-steps span { width: 1.375rem; height: 1.375rem; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 600; background: var(--primary); color: var(--primary-foreground); }

/* Rows (list items inside cards) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--border); }
.row-link, .row-plain { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; color: inherit; text-decoration: none; min-width: 0; }
.row-link { margin: 0 -.75rem; padding: .75rem; border-radius: var(--radius-md); }
.rows > li + li .row-link { border-radius: var(--radius-md); }
.row-link:hover { background: var(--accent); }
.row-main { flex: 1; min-width: 0; display: grid; }
.row-main strong { font-weight: 500; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main small { font-size: .8125rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; gap: .375rem; flex-shrink: 0; font-size: .75rem; }
.row-chev { color: var(--muted-foreground); }
.chips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* Score pill */
.pill { display: inline-grid; place-items: center; min-width: 2.25rem; height: 1.5rem; padding: 0 .375rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.mid { background: var(--mid-bg); color: var(--mid-fg); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.none { background: var(--muted); color: var(--muted-foreground); }

/* Empty states */
.empty-mini { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem 1rem; color: var(--muted-foreground); font-size: .875rem; text-align: center; }
.empty-mini.ok { color: var(--good); justify-content: flex-start; padding: .25rem 0; }
.empty-hero { align-items: center; text-align: center; padding: 3rem 1.5rem; gap: .75rem; }
.empty-hero h2 { font-size: 1.375rem; font-weight: 700; margin: 0; }
.empty-hero p { max-width: 34rem; margin: 0; }
.empty-hero-icon { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; background: var(--info-bg); color: var(--primary); font-size: 1.5rem; }
.checks { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .5rem; text-align: left; }
.checks li { display: flex; gap: .625rem; align-items: flex-start; }
.checks i { color: var(--good); margin-top: .2rem; }

/* Toolbar, segmented control, search input */
.toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.toolbar.sticky { position: sticky; top: 3.5rem; z-index: 10; background: var(--background); padding: .75rem 0; margin-top: -.25rem; }
.toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.toolbar-count { margin-left: auto; font-size: .8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.input-icon { position: relative; flex: 1; min-width: 14rem; max-width: 24rem; }
.input-icon i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.input-icon .input { padding-left: 2.25rem; width: 100%; }
.seg { display: inline-flex; padding: .1875rem; gap: .125rem; border-radius: var(--radius-md); background: var(--muted); flex-wrap: wrap; }
.seg-btn { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem; border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--muted-foreground); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; }
.seg-btn:hover { color: var(--foreground); }
.seg-btn.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.count-pill { margin-left: .125rem; min-width: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: color-mix(in oklab, currentColor 18%, transparent); font-size: .75rem; font-variant-numeric: tabular-nums; }
.switch-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; cursor: pointer; }

/* Tables */
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr[hidden] { display: none; }
.table .muted td { color: var(--muted-foreground); }
.table tr.row-current td { background: var(--info-bg); }
.cell-account { display: flex; align-items: center; gap: .625rem; color: inherit; text-decoration: none; min-width: 12rem; }
.cell-account strong { display: block; font-weight: 500; }
.cell-account small { display: block; font-size: .75rem; color: var(--muted-foreground); font-family: var(--font-mono); }
.cell-account:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cell-account .avatar-sq { width: 1.875rem; height: 1.875rem; }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-skel { display: inline-block; width: 3.5rem; height: .875rem; }
.code-sm { font-size: .75rem; color: var(--muted-foreground); }

/* ---------------------------------------------------------- workspace */
.ws-head { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.tabs > nav[role="tablist"] { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs > nav[role="tablist"]::-webkit-scrollbar { display: none; }
.tabs [role="tab"] .count { margin-left: .375rem; padding: 0 .4375rem; border-radius: 999px; background: var(--muted); font-size: .6875rem; font-weight: 600; color: var(--muted-foreground); }
.tab-link { display: inline-flex; align-items: center; gap: .375rem; padding: 0 .75rem; font-size: .875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.tab-link:hover { color: var(--foreground); }
.tab-link i { font-size: .75rem; }
.tabs [role="tabpanel"] { display: grid; gap: 1rem; padding-top: 1rem; }
.tabs [role="tabpanel"][hidden] { display: none; }

.progress-card .progress-head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }
.progress-card .progress-head > i { font-size: 1.25rem; color: var(--primary); margin-top: .125rem; }
.progress-card .progress-head p { margin: .125rem 0 0; font-size: .875rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.steps li { display: flex; align-items: center; gap: .625rem; font-size: .875rem; color: var(--muted-foreground); }
.steps li.active { color: var(--foreground); font-weight: 500; }
.steps li.active i { color: var(--primary); }
.steps li.done i { color: var(--good); }

.grid-health { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kpis .stat { justify-content: center; }
.kpis .stat-value { font-size: 1.375rem; }
.health { display: flex; align-items: center; gap: 2rem; }

.ring { position: relative; flex-shrink: 0; }
.ring-lg { width: 8.5rem; height: 8.5rem; }
.ring-sm { width: 2.75rem; height: 2.75rem; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: var(--muted); }
.ring-value { stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring.good .ring-value { stroke: var(--good); }
.ring.mid .ring-value { stroke: var(--mid); }
.ring.bad .ring-value { stroke: var(--bad); }
.ring.none .ring-value { stroke: transparent; }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-lg .ring-label strong { font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.ring-label span { font-size: .75rem; color: var(--muted-foreground); }

.bars { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: .625rem; }
.bars li { display: grid; grid-template-columns: 8.5rem 1fr 3.5rem; align-items: center; gap: .75rem; font-size: .8125rem; }
.bar-label { color: var(--muted-foreground); }
.bar { height: .375rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: inherit; }
.bar-fill.good { background: var(--good); }
.bar-fill.mid { background: var(--mid); }
.bar-fill.bad { background: var(--bad); }
.bar-empty { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); }
.bar-value { text-align: right; font-weight: 600; font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Goal card */
.goal.needs-input { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); }
.goal-value { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .25rem 0 0; font-size: 1rem; color: var(--foreground) !important; }
.goal-text { margin: 0; color: var(--muted-foreground); font-style: italic; }
.goal-form { display: grid; gap: 1rem; padding-top: .5rem; }
.goal-form[hidden] { display: none; }
.goal-types { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.goal-types legend { width: 100%; margin-bottom: .5rem; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span { display: inline-flex; align-items: center; height: 2rem; padding: 0 .875rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8125rem; cursor: pointer; background: var(--background); }
.chip-radio span:hover { background: var(--accent); }
.chip-radio input:checked + span { border-color: var(--primary); background: var(--info-bg); color: var(--primary); font-weight: 600; }
.chip-radio input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.field-stack { display: grid; gap: .375rem; min-width: 0; }
.field-stack .textarea, .field-stack .input { width: 100%; }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .75rem; }
.example { border: 1px dashed var(--border); background: transparent; border-radius: var(--radius-md); padding: .25rem .625rem; color: var(--muted-foreground); font: inherit; font-size: .75rem; text-align: left; cursor: pointer; }
.example:hover { border-color: var(--primary); color: var(--primary); }
.form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* AI card */
.ai-card { background: linear-gradient(180deg, var(--info-bg), var(--card) 65%); }
.ai-summary { font-size: 1rem; line-height: 1.7; margin: 0 0 .75rem; }
.ai-steps { margin: 0 0 .75rem; padding-left: 1.25rem; display: grid; gap: .375rem; }
.ai-fit { display: flex; gap: .5rem; margin: 0; }

/* Severity */
.dot { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.dot.critical { background: var(--bad); }
.dot.important { background: var(--mid); }
.dot.opportunity { background: var(--primary); }
.sev { display: inline-flex; align-items: center; gap: .375rem; height: 1.375rem; padding: 0 .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.sev.critical { background: var(--bad-bg); color: var(--bad); }
.sev.important { background: var(--mid-bg); color: var(--mid-fg); }
.sev.opportunity { background: var(--info-bg); color: var(--primary); }

/* Findings + recommendations */
.finding > header h2 { font-size: 1.0625rem; line-height: 1.35; }
.finding-meta { display: flex; align-items: center; gap: .625rem; margin-bottom: .375rem; }
.finding[hidden] { display: none; }
.fix { display: flex; gap: .5rem; margin: 0 0 .75rem; font-size: .875rem; }
.fix i { color: var(--primary); margin-top: .2rem; }
.evidence { font-size: .8125rem; }
.evidence summary { cursor: pointer; color: var(--primary); font-weight: 500; }
.evidence ul { margin: .5rem 0 0; padding-left: 1.25rem; color: var(--muted-foreground); display: grid; gap: .25rem; }
.recs { display: grid; gap: .5rem; }
.rec { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.rec:hover { border-color: color-mix(in oklab, var(--foreground) 18%, var(--border)); }
.rec.is-applied { opacity: .6; }
.rec-check { padding-top: .125rem; font-size: 1.125rem; }
.rec-what { font-weight: 600; font-size: .875rem; margin: 0 0 .5rem; }
.rec-dl { display: grid; gap: .25rem; margin: 0 0 .625rem; font-size: .8125rem; }
.rec-dl div { display: flex; gap: .5rem; flex-wrap: wrap; }
.rec-dl dt { color: var(--muted-foreground); min-width: 7rem; font-weight: 400; }
.rec-dl dd { margin: 0; flex: 1; min-width: 10rem; }
.rec-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.rec-tags .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rec-note { display: flex; gap: .5rem; margin: .5rem 0 0; font-size: .8125rem; color: var(--mid-fg); }
.rec-note i { margin-top: .15rem; }
.rec-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.badge.risk-low { background: var(--good-bg); color: var(--good); border-color: transparent; }
.badge.risk-medium { background: var(--mid-bg); color: var(--mid-fg); border-color: transparent; }
.badge.risk-high { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.hidden-recs { padding: 1rem 1.5rem; }
.hidden-recs summary { cursor: pointer; font-weight: 600; font-size: .875rem; }

/* Tracking */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.checklist li { display: flex; gap: .75rem; }
.checklist li > i { font-size: 1.125rem; margin-top: .125rem; }
.checklist li.critical > i { color: var(--bad); }
.checklist li.important > i { color: var(--mid); }
.checklist li.opportunity > i { color: var(--primary); }
.checklist strong { font-size: .875rem; }
.checklist p { margin: .25rem 0; font-size: .875rem; color: var(--muted-foreground); }
.checklist .fix { color: var(--foreground); margin: .25rem 0; }
.soon { display: flex; gap: 1rem; align-items: flex-start; }
.soon > i { font-size: 1.5rem; color: var(--muted-foreground); }
.soon p { margin: .25rem 0 0; font-size: .875rem; }

/* Alerts with an icon-font icon (Basecoat expects an <svg>) */
.alert:has(> i[class^="icon-"]) { display: flex; gap: .75rem; align-items: flex-start; }
.alert > i[class^="icon-"] { font-size: 1rem; margin-top: .125rem; flex-shrink: 0; }
.alert > i[class^="icon-"] + section { flex: 1; min-width: 0; }
.alert > section > p, .alert > section > h2 { margin: 0; }

/* Dialogs */
.dialog-sm { width: min(28rem, calc(100vw - 2rem)); }
.reasons { border: 0; padding: 0; margin: 0; display: grid; gap: .625rem; }
.reasons .label { display: flex; align-items: center; gap: .625rem; font-weight: 400; cursor: pointer; }

/* Performance tab */
.perf-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.perf-custom { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.perf-custom[hidden] { display: none; }
.perf-custom .input { width: auto; height: 2.125rem; }
.perf-dates { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.perf-body { display: grid; gap: 1rem; min-height: 12rem; transition: opacity .15s; }
.perf-body.is-loading { opacity: .55; pointer-events: none; }
.perf-skel { display: grid; gap: .75rem; }
.perf-skel .skeleton { height: 2.5rem; border-radius: var(--radius-md); }
.perf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); overflow: hidden; }
.perf-kpis > div { display: grid; gap: .25rem; padding: .875rem 1rem; border-right: 1px solid var(--border); }
.perf-kpis > div:last-child { border-right: 0; }
.perf-kpis span { font-size: .75rem; color: var(--muted-foreground); }
.perf-kpis strong { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.perf-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.perf-table th[data-sort]:hover { color: var(--foreground); }
.perf-table th[aria-sort="descending"]::after { content: " ↓"; }
.perf-table th[aria-sort="ascending"]::after { content: " ↑"; }
.perf-table td { white-space: nowrap; }
.perf-table td:first-child:not(.col-act), .perf-table td.col-act + td { white-space: normal; min-width: 14rem; max-width: 26rem; }
.perf-table .col-act { width: 2.5rem; padding-right: 0; }
.perf-table th[hidden], .perf-table td[hidden] { display: none; }
/* status switch: green = live, gray = paused, white knob */
.st-switch { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 999px; background: #c9cdd3; cursor: pointer; transition: background-color .15s; vertical-align: middle; }
.st-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .15s; }
.st-switch[aria-checked="true"] { background: #22a55a; }
.st-switch[aria-checked="true"]::after { transform: translateX(1rem); }
.st-switch:hover { filter: brightness(.95); }
.st-switch:focus-visible { outline: 2px solid var(--ring, var(--primary)); outline-offset: 2px; }
.st-switch:disabled { cursor: progress; opacity: .55; }
.dark .st-switch { background: #4b5058; }
.dark .st-switch[aria-checked="true"] { background: #22a55a; }
.drill { color: inherit; text-decoration: none; }
.drill:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.cell-sub .drill { color: var(--muted-foreground); }
.cell-sub .drill:hover { color: var(--primary); }

/* drill-down chips + selection bar */
.perf-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.25rem 0 .75rem; }
.chip { display: inline-flex; align-items: center; gap: .25rem; height: 1.875rem; padding: 0 .25rem 0 .75rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8125rem; background: var(--background); }
.chip-x { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.chip-x:hover { background: var(--muted); color: var(--foreground); }
.sel-bar { position: sticky; top: .5rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; margin-bottom: .75rem; border: 1px solid var(--primary); border-radius: var(--radius-lg); background: var(--background); box-shadow: 0 4px 12px rgb(0 0 0 / .06); }
.sel-bar strong { font-size: .875rem; margin-right: .25rem; }

/* column chooser */
.col-menu { position: relative; }
.col-menu > summary { list-style: none; }
.col-menu > summary::-webkit-details-marker { display: none; }
.col-menu-panel { position: absolute; right: 0; top: calc(100% + .375rem); z-index: 20; min-width: 14rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--popover, var(--background)); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.col-menu-list { display: grid; gap: .125rem; max-height: 22rem; overflow: auto; margin-bottom: .25rem; }
.col-menu-list .label { padding: .375rem .5rem; border-radius: var(--radius-md); font-weight: 400; cursor: pointer; }
.col-menu-list .label:hover { background: var(--muted); }

/* search term dialog */
.dialog-md { width: min(36rem, calc(100vw - 2rem)); }
.term-form { display: grid; gap: 1rem; }
.term-opt { display: grid; gap: .375rem; border: 0; padding: 0; margin: 0; }
.term-opt legend { font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; }
.term-opt .label { font-weight: 400; }
.term-list ul { margin: 0; padding: .5rem .75rem; max-height: 10rem; overflow: auto; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: .8125rem; display: grid; gap: .25rem; }
.small { font-size: .8125rem; }

/* change log (history tab) */
.change-what { display: flex; flex-direction: column; gap: .125rem; }
.change-arrow { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.change-arrow i { color: var(--muted-foreground); font-size: .875rem; }
.row-reverted td { color: var(--muted-foreground); }
.row-reverted .change-what strong { text-decoration: line-through; }
.section-title { font-size: .9375rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.section-title:first-child { margin-top: 0; }
.perf-table tr[hidden] { display: none; }
.perf-table .row-paused td { color: var(--muted-foreground); }
.cell-ad strong { font-weight: 500; }
.match { font-size: .6875rem; font-weight: 500; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 .3rem; margin-left: .25rem; vertical-align: middle; }
.status { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; }
.status.off { color: var(--muted-foreground); }
.status.off .dot { background: var(--muted-foreground); opacity: .5; }
.qs { display: inline-flex; align-items: center; gap: .5rem; }
.qs-dots { display: inline-flex; gap: .1875rem; }
.qs-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--muted); }
.qs-dot.good { background: var(--good); }
.qs-dot.mid { background: var(--mid); }
.qs-dot.bad { background: var(--bad); }
.badge.strength-excellent, .badge.strength-good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.badge.strength-average { background: var(--mid-bg); color: var(--mid-fg); border-color: transparent; }
.badge.strength-poor { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.table-note { margin: 0; padding: .625rem 1rem; font-size: .75rem; border-top: 1px solid var(--border); }
.empty-mini .btn { margin-left: .5rem; }

/* Narrow pages, links, reports, errors */
.page-narrow { max-width: 52rem; }
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.link-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.card > footer p { margin: 0; font-size: .8125rem; }
.evidence-errors { margin: 0; padding-left: 1.25rem; font-size: .8125rem; }
.raw-report { padding: 1rem 1.5rem; }
.raw-report summary { cursor: pointer; font-weight: 600; font-size: .875rem; }
.raw-report pre { white-space: pre-wrap; font-size: .75rem; max-height: 26rem; overflow: auto; margin: .75rem 0 0; color: var(--muted-foreground); }
.error-box { max-width: 28rem; margin: 4rem auto; text-align: center; display: grid; gap: .75rem; justify-items: center; }
.error-code { font-size: 3.5rem; font-weight: 700; letter-spacing: -.04em; color: var(--muted-foreground); line-height: 1; }
.error-box h1 { font-size: 1.5rem; margin: 0; }
.error-box p { margin: 0; }

/* Login */
.login { width: min(25rem, 100%); }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-bottom: 1.5rem; text-align: center; }
.login-brand .app-brand-mark { width: 2.75rem; height: 2.75rem; font-size: 1.375rem; border-radius: var(--radius-lg); }
.login-brand h1 { font-size: 1.375rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.login-brand p { margin: 0; color: var(--muted-foreground); font-size: .875rem; }
.login .card > section { display: grid; gap: 1rem; }
.login .btn { width: 100%; }
.login-or { display: flex; align-items: center; gap: .75rem; color: var(--muted-foreground); font-size: .75rem; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .625rem; font-size: .8125rem; color: var(--muted-foreground); }
.login-steps li { display: flex; gap: .625rem; }
.login-steps span { width: 1.25rem; height: 1.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--muted); color: var(--foreground); font-size: .6875rem; font-weight: 600; flex-shrink: 0; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-health { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
    .app-search { min-width: 0; width: 2.25rem; padding: 0; justify-content: center; }
    .app-search span, .app-search .kbd { display: none; }
    .health { flex-direction: column; align-items: stretch; gap: 1.25rem; }
    .ring-lg { margin: 0 auto; }
    .onboard { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .app-content { padding: 1rem 1rem 2.5rem; }
    .page-title { font-size: 1.375rem; }
    .stats, .kpis { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .stat { padding: 1rem; }
    .stat-value { font-size: 1.375rem; }
    .bars li { grid-template-columns: 6.5rem 1fr 3.25rem; }
    .form-row { grid-template-columns: 1fr; }
    .rec { grid-template-columns: 1.25rem minmax(0, 1fr); }
    .rec-actions { grid-column: 2; flex-direction: row; align-items: center; }
    .toolbar.sticky { position: static; }
    .toolbar-end { margin-left: 0; }
    .input-icon { max-width: none; }
    #accTable th:nth-child(3), #accTable td:nth-child(3), #accTable th:nth-child(6), #accTable td:nth-child(6) { display: none; }
}

/* ---------- performance table: edits, paging, compare, chart ---------- */
:root { --chart-1: #2563eb; --chart-2: #c2410c; }
.dark { --chart-1: #3b82f6; --chart-2: #ea580c; }
.perf-table th[data-sort-key] { cursor: pointer; user-select: none; white-space: nowrap; }
.perf-table th[data-sort-key]:hover { color: var(--foreground); }
.perf-table th[aria-sort="descending"]::after { content: " ↓"; }
.perf-table th[aria-sort="ascending"]::after { content: " ↑"; }
.edit-cell { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .375rem; margin: -.125rem -.375rem; border: 1px dashed transparent; border-radius: var(--radius-sm, 4px); background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.edit-cell i { font-size: .75rem; color: var(--muted-foreground); opacity: 0; transition: opacity .1s; }
.edit-cell:hover, .edit-cell:focus-visible { border-color: var(--border); background: var(--muted); }
.edit-cell:hover i, .edit-cell:focus-visible i, .perf-table tr:hover .edit-cell i { opacity: 1; }
button.qs { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .625rem 1rem; border-top: 1px solid var(--border); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.pager-size { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.pager-size .select { height: 2rem; width: auto; padding-block: 0; }
.pager-nav { display: inline-flex; align-items: center; gap: .5rem; }
.perf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.perf-actions p { margin: 0; font-size: .8125rem; max-width: 52rem; }
.delta { font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.delta.good { color: var(--good); }
.delta.bad { color: var(--bad); }
.delta.neutral { color: var(--muted-foreground); }
.compare-note { font-size: .75rem; margin: .375rem 0 0; }
.toggle-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
#perfChartBtn.active { background: var(--muted); }
.perf-chart { padding: .75rem 1rem 1rem; margin-bottom: .75rem; }
.perf-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.perf-chart-legend { display: flex; gap: 1rem; font-size: .8125rem; color: var(--muted-foreground); }
.perf-chart-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.perf-chart-body { position: relative; min-height: 220px; }
.perf-chart-body svg { display: block; overflow: visible; }
.perf-chart-body .grid { stroke: var(--border); stroke-width: 1; }
.perf-chart-body .axis { fill: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.perf-chart-body .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.perf-chart-body .line.cur { stroke: var(--chart-1); }
.perf-chart-body .line.prev { stroke: var(--chart-2); stroke-dasharray: 5 4; }
.perf-chart-body .hair { stroke: var(--muted-foreground); stroke-width: 1; opacity: .5; }
.perf-chart-body .dot { stroke: var(--card); stroke-width: 2; }
.perf-chart-body .dot.cur { fill: var(--chart-1); }
.perf-chart-body .dot.prev { fill: var(--chart-2); }
.perf-chart-body .hit { fill: transparent; cursor: crosshair; }
.key { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--chart-1); vertical-align: middle; }
.key.prev { border-top: 2px dashed var(--chart-2); }
.chart-tip { position: absolute; top: .5rem; z-index: 5; display: grid; gap: .25rem; padding: .5rem .625rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover, var(--card)); box-shadow: 0 4px 12px rgb(0 0 0 / .1); font-size: .8125rem; pointer-events: none; white-space: nowrap; }
.chart-tip > div { display: flex; align-items: center; gap: .5rem; }
.chart-tip strong { font-variant-numeric: tabular-nums; }
.input-affix { display: flex; align-items: center; gap: .5rem; }
.input-affix .input { flex: 1; }
.dot.bad-dot { background: var(--bad); }
.dialog-lg { width: min(52rem, calc(100vw - 2rem)); }
.loc-campaigns { display: grid; gap: .25rem; max-height: 10rem; overflow: auto; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.loc-campaigns .label { font-weight: 400; }
.loc-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; max-height: 12rem; overflow: auto; }
.loc-pick { width: 100%; text-align: left; padding: .5rem .625rem; border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; font-size: .875rem; cursor: pointer; }
.loc-pick:hover { background: var(--muted); }
.loc-chosen { display: flex; flex-wrap: wrap; gap: .5rem; }
.loc-chosen:empty { display: none; }
.assets-body { display: grid; gap: 1.25rem; max-height: 65vh; overflow: auto; }
.asset-group h3 { font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; }
.asset-group ul { margin: 0; padding-left: 1.125rem; display: grid; gap: .25rem; font-size: .875rem; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.asset-img { margin: 0; position: relative; }
.asset-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--muted); }
.asset-img .badge { position: absolute; left: .25rem; bottom: .25rem; }
.asset-video { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; }
@media (max-width: 640px) { .pager-size { margin-left: 0; } }

/* ---------- login + clients ---------- */
.login-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.5rem; letter-spacing: .5em; text-align: center; }
.login-resend { display: flex; justify-content: space-between; margin-top: .5rem; }
.login-note { display: flex; gap: .375rem; align-items: flex-start; margin: .625rem 0 0; }
.login-admin { margin-top: 1rem; font-size: .8125rem; }
.login-admin summary { cursor: pointer; color: var(--muted-foreground); }
.login-admin .form { margin-top: .75rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .25rem; }
.chip-sm { display: inline-block; padding: .125rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; white-space: nowrap; }
.row-actions { display: inline-flex; gap: .25rem; align-items: center; }
.how-card h2 { font-size: .9375rem; font-weight: 600; margin: 0 0 .5rem; }
.how-card ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .375rem; font-size: .875rem; color: var(--muted-foreground); }
.cl-accounts { max-height: 16rem; }
.cl-accounts .label[hidden] { display: none; }
.term-form > label.label { flex-direction: column; align-items: stretch; gap: .375rem; }

/* quality score dialog */
.qs-body { display: grid; gap: 1.25rem; max-height: 70vh; overflow: auto; }
.qs-body h3 { font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; }
.qs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.qs-list li { display: flex; gap: .625rem; align-items: flex-start; }
.qs-list li > div { display: grid; gap: .125rem; }
.qs-list li > i { margin-top: .125rem; }
.qs-list small { font-size: .8125rem; }
.qs-list .pill { min-width: 9.5rem; justify-content: center; }
.qs-actions { margin: 0; padding-left: 1.25rem; display: grid; gap: .375rem; font-size: .875rem; }
.qs-speed { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.text-mid { color: var(--mid); }

/* RSA editor */
.dialog-xl { width: min(68rem, calc(100vw - 2rem)); }
.ad-editor { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; max-height: 68vh; overflow: auto; }
.ad-editor h3 { font-size: .875rem; font-weight: 600; margin: .75rem 0 .5rem; display: flex; align-items: center; gap: .375rem; }
.ad-editor h3:first-child { margin-top: 0; }
.ad-list { margin: 0; padding-left: 1.5rem; display: grid; gap: .375rem; font-size: .8125rem; color: var(--muted-foreground); }
.ad-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem 10.5rem auto; gap: .375rem; align-items: center; }
.ad-row .select { height: 2.25rem; font-size: .8125rem; }
.ad-count { font-size: .75rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--muted-foreground); }
.ad-paths { display: flex; align-items: center; gap: .375rem; font-size: .875rem; }
.ad-paths .input { width: 9rem; }
.ad-ai { border-left: 1px solid var(--border); padding-left: 1.25rem; }
.ad-ai h4 { font-size: .8125rem; font-weight: 600; margin: 1rem 0 .375rem; }
.ad-ideas { display: grid; gap: .25rem; }
.ad-idea { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .375rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: inherit; font: inherit; font-size: .8125rem; text-align: left; cursor: pointer; }
.ad-idea:hover { border-color: var(--primary); }
.ad-idea span { flex: 1; }
.ad-idea small { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ad-idea.is-flagged { opacity: .65; }
.ad-idea.is-flagged i { color: var(--mid); }
.ad-note { margin-right: auto; display: flex; gap: .375rem; align-items: center; }
.ad-edit-btn { margin-top: .375rem; }
@media (max-width: 860px) { .ad-editor { grid-template-columns: 1fr; } .ad-ai { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1rem; } .ad-row { grid-template-columns: minmax(0, 1fr) 3rem; } .ad-row .select { grid-column: 1; } }
/* Basecoat caps dialog content width; let the wider variants through. */
dialog.dialog > .dialog-md { width: min(36rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
dialog.dialog > .dialog-lg { width: min(52rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
dialog.dialog > .dialog-xl { width: min(68rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }

/* site tag scan */
.site-scan { margin-top: 1rem; }
.site-scan-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.site-scan-head h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
.site-scan-head p { max-width: 36rem; margin: 0; }
.site-scan-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.site-scan-form .input { width: 16rem; }
.scan-list { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .75rem; }
.scan-list li { display: flex; gap: .625rem; align-items: flex-start; }
.scan-list li > i { margin-top: .1875rem; }
.scan-list li > div { display: grid; gap: .125rem; }
.scan-list small { font-size: .8125rem; }
.scan-fix { color: var(--foreground); }
.scan-pages { margin: .5rem 0; }
.scan-pages ul { margin: .5rem 0 0; padding-left: 1.25rem; display: grid; gap: .25rem; }
.login-legal { text-align: center; margin: .75rem 0 0; }
.login-legal a { color: inherit; }