/* ================================================================
    Atlas — data components on top of Team's "Gilt" design system
    (assets/css/app.css, unchanged). Tokens: --c-* from app.css.
   ================================================================ */

:root {
    /* Chart series — validated with the dataviz palette checker against the
       chart surface (light #fff / dark #1c1a17). Fixed, not the user accent:
       an accent change must not break the comparison contrast. */
    --chart-cur: #c28034;   /* current period */
    --chart-ref: #6B6460;   /* reference period (N-1), drawn dashed */
}
:root[data-theme="dark"] {
    --chart-cur: #c28034;
    --chart-ref: #6f6862;
}

/* ── Utilities ─────────────────────────────────────────────── */
[x-cloak] { display: none !important; }
.spin { animation: atlas-spin 900ms linear infinite; }
@keyframes atlas-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ── Navigation: "phase N" tag on sections not built yet ───── */
.nav-soon {
    margin-left: auto;
    font: 600 9.5px/1 var(--font-mono);
    letter-spacing: .6px;
    padding: 3px 6px;
    border-radius: 6px;
    color: var(--c-muted);
    background: var(--c-muted-bg);
}
.nav-item.is-soon .nav-item__label { opacity: .75; }
.sidebar-collapsed .nav-soon { display: none; }

/* ── Language switch ───────────────────────────────────────── */
.locale-switch { display: flex; align-items: center; gap: 10px; margin: 0; }
.locale-switch__icon { font-size: 16px; color: var(--c-muted); }
.locale-switch__tabs { padding: 2px; }
.locale-switch__tabs .seg-tabs__item { padding: 4px 12px; font: 600 11.5px/1.2 var(--font-mono); letter-spacing: .5px; border: 0; cursor: pointer; }

/* ── Section heading inside a page ─────────────────────────── */
.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 12px; }
.section-head__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; letter-spacing: -.1px; }
.section-head__title .material-icons-round { font-size: 18px; color: var(--c-accent); }
.section-head__sub { font-size: 12.5px; color: var(--c-muted); }

/* ── KPI tile ──────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi-grid > .kpi--lg { grid-column: 1 / -1; } }

.kpi {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-dim);
}
:root[data-theme="dark"] .kpi { background: var(--c-surface-2); }
.kpi__label {
    display: flex; align-items: center; gap: 4px;
    font: 600 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .9px; color: var(--c-muted);
}
.kpi__hint { font-size: 13px; opacity: .55; cursor: help; }
.kpi__value { font: 700 24px/1.1 var(--font-mono); letter-spacing: -.6px; font-variant-numeric: tabular-nums; color: var(--c-text); }
.kpi--lg .kpi__value { font-size: 28px; }
.kpi__deltas { display: flex; flex-wrap: wrap; gap: 4px 10px; }

.kpi-delta {
    display: inline-flex; align-items: center; gap: 3px;
    font: 600 12px/1.2 var(--font-mono); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kpi-delta__base { color: var(--c-muted); font-weight: 500; margin-right: 2px; }
.kpi-delta__icon { font-size: 13px; }
.kpi-delta--good { color: var(--c-success); }
.kpi-delta--bad  { color: var(--c-danger); }
.kpi-delta--flat { color: var(--c-muted); }

/* ── Restaurant pulse card ─────────────────────────────────── */
.pulse-card { padding: 18px 20px 14px; }
.pulse-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pulse-card__title { font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.pulse-card__sub { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.pulse-card__src {
    font: 600 10px/1 var(--font-mono); letter-spacing: .8px; color: var(--c-muted);
    padding: 4px 7px; border-radius: 6px; border: 1px solid var(--c-border);
}
.pulse-card__strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    margin: 14px 0 6px; padding: 10px 0 0; border-top: 1px solid var(--c-border-dim);
    font-size: 13px; color: var(--c-muted);
}
.pulse-stat strong { color: var(--c-text); font: 700 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.pulse-card__vs { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--c-muted-2); }

/* ── Charts ────────────────────────────────────────────────── */
.chart { width: 100%; }
.chart--md { height: 200px; }
.chart--lg { height: 300px; }
.chart-tools { display: flex; justify-content: flex-end; margin-top: 2px; }
.chart-tools__btn {
    font-size: 11.5px; font-weight: 500; color: var(--c-muted);
    background: none; border: 0; padding: 4px 2px; cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--c-border-hi); text-underline-offset: 3px;
}
.chart-tools__btn:hover { color: var(--c-accent); }
.chart-table-wrap { max-height: 280px; overflow: auto; margin-top: 6px; border: 1px solid var(--c-border-dim); border-radius: 12px; }
.chart-table { font-size: 12.5px; }

/* ── Today side cards ──────────────────────────────────────── */
.today-card--warn .today-card__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.today-card__sub .status-dot { margin-right: 8px; }

.roadmap-mini { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.roadmap-mini__item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-text); }
.roadmap-mini__phase {
    flex-shrink: 0; width: 28px; text-align: center;
    font: 600 10px/1 var(--font-mono); letter-spacing: .5px; color: var(--c-muted);
    padding: 4px 0; border-radius: 6px; background: var(--c-muted-bg);
}
.roadmap-mini__icon { font-size: 17px; color: var(--c-accent); }

/* ── Settings › Sources ────────────────────────────────────── */
.source-list { display: flex; flex-direction: column; }
.source-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
    padding: 12px 20px; border-top: 1px solid var(--c-border-dim);
    transition: background var(--tr-slow);
}
.source-row:first-child { border-top: 0; }
.source-row.is-flash { background: var(--c-accent-dim); }
.source-row__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; font-weight: 600; }
.source-row__name .status-dot::before { width: 8px; height: 8px; }
.source-row__outlet { font-weight: 500; color: var(--c-muted); }
.source-row__id { font: 500 11px/1 var(--font-mono); color: var(--c-muted-2); }
.source-row__msg { margin-top: 3px; font-size: 12.5px; color: var(--c-muted); overflow-wrap: anywhere; }
.source-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }
.source-row__btn.htmx-request .material-icons-round { animation: atlas-spin 900ms linear infinite; }
@media (max-width: 640px) {
    .source-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
    .source-row__meta { display: none; }
}

/* ── Settings › Outlets (mapping) ──────────────────────────── */
.outlet-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 400px) { .outlet-map { grid-template-columns: 1fr; } }
.outlet-map__card { padding: 18px 20px; }
.outlet-map__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.outlet-map__swatch { width: 12px; height: 34px; border-radius: 6px; background: var(--c-accent); flex-shrink: 0; }
.outlet-map__swatch[data-accent-swatch="gilt"]   { background: #c28034; }
.outlet-map__swatch[data-accent-swatch="ocean"]  { background: #1f6fb2; }
.outlet-map__swatch[data-accent-swatch="forest"] { background: #2c7a4b; }
.outlet-map__swatch[data-accent-swatch="plum"]   { background: #7a4aa8; }
.outlet-map__swatch[data-accent-swatch="coral"]  { background: #d2553a; }
.outlet-map__swatch[data-accent-swatch="slate"]  { background: #4b5a6b; }
.outlet-map__name { font-size: 15px; font-weight: 650; }
.outlet-map__type { font-size: 12px; color: var(--c-muted); }
.outlet-map__type code { font-family: var(--font-mono); font-size: 11px; }
.outlet-map__fields { display: flex; flex-direction: column; gap: 12px; }
.outlet-map__fields .form-label { display: flex; align-items: center; gap: 8px; }
.ref-suggested {
    font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px;
    padding: 3px 6px; border-radius: 6px; color: var(--c-accent); background: var(--c-accent-dim);
}
.sticky-actions {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; justify-content: flex-end;
    margin-top: 16px; padding: 12px 0;
    background: linear-gradient(to top, var(--c-bg) 60%, transparent);
}

/* ================================================================
    Phase 1 — data pages (Restaurants)
   ================================================================ */

/* Cards side by side in a grid: no stacked-card spacing from app.css. */
.grid > .data-card + .data-card { margin-top: 0; }

.kpi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .kpi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .kpi-grid--4 > .kpi--lg { grid-column: 1 / -1; } }

/* ── Page head: outlet switch + freshness ──────────────────── */
.resto-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.resto-head__sync { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--c-muted); }
.resto-head__sync-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 10px; border: 1px solid var(--c-border); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.resto-head__sync-btn:hover:not(:disabled) { color: var(--c-text); border-color: var(--c-accent); }
.resto-head__sync-btn:disabled { opacity: .6; cursor: wait; }
.resto-head__sync-btn .material-icons-round { font-size: 15px; }
.outlet-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.outlet-dot--mandadelaos       { background: #2c7a4b; }
.outlet-dot--gaspardrestaurant { background: #d2553a; }

/* ── Context bar: period + comparison ──────────────────────── */
.ctx-bar {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 14px; margin-bottom: 14px;
    border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-border-dim);
}
.ctx-bar__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ctx-bar__periods, .ctx-bar__cmp { max-width: 100%; }
.ctx-bar__vs { padding: 0 6px 0 10px; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted); }
.ctx-bar__range { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--c-muted); }
.ctx-bar__range .material-icons-round { font-size: 15px; }
.ctx-bar__range strong { color: var(--c-text); font-weight: 600; }
.ctx-bar__sep { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; }
.ctx-bar__align { margin-left: auto; font-size: 11.5px; color: var(--c-muted-2); }
@media (max-width: 640px) {
    .ctx-bar__periods { flex-wrap: wrap; border-radius: 14px; }
    .ctx-bar__align { margin-left: 0; width: 100%; }
}

.ctx-custom { position: relative; }
.ctx-custom > summary { list-style: none; }
.ctx-custom > summary::-webkit-details-marker { display: none; }
.ctx-custom__pop {
    position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
    width: 240px; padding: 14px; border-radius: 14px;
    display: flex; flex-direction: column; gap: 6px;
}
@media (max-width: 640px) { .ctx-custom__pop { position: fixed; left: 16px; right: 16px; top: 140px; width: auto; } }

/* ── Section tab strip (scrolls on narrow screens) ──────────── */
.tab-strip-wrap { overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; border-bottom: 1px solid var(--c-border-dim); }
.tab-strip-wrap::-webkit-scrollbar { display: none; }
.tab-strip { display: flex; gap: 2px; width: max-content; }
.tab-strip__item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 12px 11px;
    font-size: 13px; font-weight: 500; color: var(--c-muted); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--tr-fast), border-color var(--tr-fast);
}
.tab-strip__item .material-icons-round { font-size: 17px; }
.tab-strip__item:hover { color: var(--c-text); }
.tab-strip__item.active { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-accent); }
.tab-strip__item.active .material-icons-round { color: var(--c-accent); }

/* ── Insight (rules finding) ───────────────────────────────── */
.insight-strip { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.insight {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border-dim);
}
.insight--critical { border-color: rgba(192,57,43,0.3); }
/* Severity reads from the icon tile + label, as in Team's .notice. */
.insight__icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; color: var(--c-muted); background: var(--c-muted-bg);
}
.insight--critical .insight__icon { color: var(--c-danger);  background: var(--c-danger-bg); }
.insight--warning  .insight__icon { color: var(--c-warning); background: var(--c-warning-bg); }
.insight--info     .insight__icon { color: var(--c-info);    background: var(--c-info-bg); }
.insight--critical .insight__sev { color: var(--c-danger); }
.insight--warning  .insight__sev { color: var(--c-warning); }
.insight--info     .insight__sev { color: var(--c-info); }
.insight__main { min-width: 0; flex: 1; }
.insight__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--c-muted); }
.insight__sev { font: 600 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .7px; }
.insight__title { margin-top: 2px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.insight__body { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); }
.insight__link {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 10px; color: var(--c-muted);
    transition: background var(--tr-fast), color var(--tr-fast);
}
.insight__link:hover { background: var(--c-accent-dim); color: var(--c-accent); }

/* ── Horizontal bars (distributions in a card) ─────────────── */
.hbars { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hbars__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 12.5px; }
.hbars__label { color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbars__track { height: 8px; border-radius: 4px; background: var(--c-muted-bg); overflow: hidden; }
.hbars__fill { display: block; height: 100%; border-radius: 4px; background: var(--chart-cur); }
.hbars__value { text-align: right; }

/* ── Marketing: SEO app (opportunities, health, reviews) ───── */
.opp-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.opp-list__item { padding-bottom: 10px; border-bottom: 1px solid var(--c-border-dim); }
.opp-list__item:last-child { padding-bottom: 0; border-bottom: 0; }
.opp-list__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 13px; }
.opp-list__type { padding: 1px 7px; border-radius: 999px; font: 600 10px/1.6 var(--font-ui); letter-spacing: .3px; text-transform: uppercase; color: var(--c-info); background: var(--c-info-bg); }
.opp-list__text { margin: 3px 0 0; font-size: 12.5px; color: var(--c-muted); }
.opp-list__action { display: flex; gap: 4px; margin: 3px 0 0; font-size: 12.5px; }
.opp-list__action .material-icons-round { font-size: 15px; color: var(--c-accent); margin-top: 1px; }
.hub-facts { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.hub-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.hub-facts dt { color: var(--c-muted); }
.hub-facts dd { margin: 0; text-align: right; }
.hub-facts__bad { color: var(--c-danger); font-weight: 600; }
.sev { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; font: 600 10.5px/1.7 var(--font-ui); text-align: center; color: var(--c-muted); background: var(--c-muted-bg); }
.sev--error   { color: var(--c-danger);  background: var(--c-danger-bg); }
.sev--warning { color: var(--c-warning); background: var(--c-warning-bg); }
.sev--notice  { color: var(--c-info);    background: var(--c-info-bg); }
.sev--ok      { color: var(--c-success); background: var(--c-success-bg); }
.review-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.review-list__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.review-list__stars { color: var(--c-warning); letter-spacing: 1px; }
.review-list__off { color: var(--c-border-hi); }
.review-list__text { margin: 3px 0 0; font-size: 12.5px; }

/* ── Tables: rank movement, emphasis rows ──────────────────── */
.rank-move { display: inline-flex; align-items: center; gap: 1px; font: 600 11.5px/1 var(--font-mono); color: var(--c-muted); }
.rank-move .material-icons-round { font-size: 14px; }
.rank-move--up   { color: var(--c-success); }
.rank-move--down { color: var(--c-danger); }
.rank-move--new  { padding: 3px 6px; border-radius: 6px; font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--c-info); background: var(--c-info-bg); }
.ga-table .row-strong td { font-weight: 600; background: var(--c-surface-2); }
.ga-table tr.is-missing td { background: var(--c-danger-bg); }
.ga-table tr.is-flagged td:first-child { box-shadow: inset 3px 0 0 var(--c-warning); }

/* ── Upcoming: day strip + flags ───────────────────────────── */
.upcoming-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .upcoming-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .upcoming-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.upcoming-day {
    position: relative; display: flex; flex-direction: column; gap: 2px;
    padding: 12px; border-radius: 14px; text-decoration: none; color: var(--c-text);
    background: var(--c-surface); border: 1px solid var(--c-border-dim);
    transition: border-color var(--tr-fast);
}
.upcoming-day:hover { border-color: var(--c-accent); }
.upcoming-day.is-today { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-dim); }
.upcoming-day__date { font: 600 10.5px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted); }
.upcoming-day__covers { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.upcoming-day__sub, .upcoming-day__n1 { font-size: 11.5px; color: var(--c-muted); }
.upcoming-day__flag { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 2px; font: 600 11px/1 var(--font-mono); color: var(--c-warning); }
.upcoming-day__flag .material-icons-round { font-size: 14px; }
.upcoming-comment { max-width: 60ch; overflow-wrap: anywhere; }
.flag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.flag {
    display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px;
    font-size: 11px; font-weight: 600; background: var(--c-muted-bg); color: var(--c-muted);
}
.flag .material-icons-round { font-size: 13px; }
.flag--group       { background: var(--c-info-bg);    color: var(--c-info); }
.flag--allergy     { background: var(--c-danger-bg);  color: var(--c-danger); }
.flag--diet        { background: var(--c-success-bg); color: var(--c-success); }
.flag--celebration { background: var(--c-purple-bg);  color: var(--c-purple); }
.flag--vip         { background: var(--c-warning-bg); color: var(--c-warning); }

/* ── Today: alerts, agenda ─────────────────────────────────── */
.agenda-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--c-border-dim); }
.agenda-row:first-child { border-top: 0; padding-top: 0; }
.agenda-row__name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.agenda-row__num { font: 700 20px/1 var(--font-mono); text-align: right; }
.agenda-row__sub { grid-column: 1 / -1; font-size: 12px; color: var(--c-muted); }

/* ══ Phase 2 — intelligence ══════════════════════════════════ */

/* ── Insight actions (follow / explain / dismiss) ──────────── */
.insight__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.insight__btn {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
    font: inherit; font-size: 12px; font-weight: 500; line-height: 1; color: var(--c-text);
    background: transparent; border: 1px solid var(--c-border); border-radius: 999px; cursor: pointer;
    transition: border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.insight__btn .material-icons-round { font-size: 15px; color: var(--c-accent); }
.insight__btn:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-accent-dim); }
.insight__btn:disabled { opacity: .55; cursor: wait; }
.insight__btn--primary { border-color: var(--c-accent); }
.insight__btn--quiet { border-color: transparent; color: var(--c-muted); }
.insight__btn--quiet:hover:not(:disabled) { color: var(--c-text); background: var(--c-muted-bg); border-color: transparent; }
.chip--followed {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    color: var(--c-success); background: var(--c-success-bg);
}
.chip--followed .material-icons-round { font-size: 15px; }

/* ── Explain (AI answer, inline) ───────────────────────────── */
.explain-loading { display: none; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--c-muted); }
.explain-loading .material-icons-round { font-size: 16px; color: var(--c-accent); }
.explain-slot.htmx-request .explain-loading { display: flex; }
.explain-slot.htmx-request > .explain { opacity: .5; }
.explain-bar { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.explain-slot--period .explain { margin: 0 0 16px; }
.explain {
    margin-top: 10px; padding: 14px 16px; border-radius: 12px;
    background: var(--c-surface-2); border: 1px solid var(--c-border-dim);
    font-size: 13px; line-height: 1.55;
}
.explain--error { display: flex; align-items: center; gap: 8px; color: var(--c-muted); }
.explain__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.explain__badge { display: inline-flex; align-items: center; gap: 4px; font: 600 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .7px; color: var(--c-accent); }
.explain__badge .material-icons-round { font-size: 14px; }
.explain__meta { font-size: 11.5px; color: var(--c-muted); }
.explain__close { margin-left: auto; width: 26px; height: 26px; }
.explain__summary { font-size: 13.5px; color: var(--c-text); max-width: 80ch; }
.explain__h { margin: 12px 0 6px; font: 600 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted); }
.explain__causes { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.explain__causes li { display: flex; align-items: baseline; gap: 8px; }
.explain__checks { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; list-style: disc; }
.explain__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 11.5px; color: var(--c-muted); }
.explain__verified, .explain__unverified { display: inline-flex; align-items: center; gap: 4px; }
.explain__verified .material-icons-round, .explain__unverified .material-icons-round { font-size: 14px; }
.explain__verified { color: var(--c-success); }
.explain__unverified { color: var(--c-warning); }
.conf {
    flex-shrink: 0; min-width: 58px; text-align: center; padding: 2px 6px; border-radius: 6px;
    font: 600 9.5px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .5px;
}
.conf--high   { color: var(--c-text);  background: var(--c-muted-bg); }
.conf--medium { color: var(--c-muted); background: var(--c-muted-bg); }
.conf--low    { color: var(--c-muted-2); border: 1px dashed var(--c-border); }

/* ── Proposed actions (brief, explain) ─────────────────────── */
.proposals { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.proposal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--c-border-dim); }
.proposal:first-child { border-top: 0; }
.proposal__main { min-width: 0; flex: 1; }
.proposal__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.proposal__why { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.proposal__role { color: var(--c-muted-2); }
.proposal__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font-size: 11.5px; color: var(--c-muted-2); }
.proposal__do { flex-shrink: 0; }
@media (max-width: 560px) { .proposal { flex-wrap: wrap; } .proposal__do { margin-left: 72px; } }

.prio {
    flex-shrink: 0; min-width: 62px; text-align: center; padding: 3px 7px; border-radius: 6px;
    font: 600 9.5px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .5px;
}
.prio--high   { color: var(--c-danger);  background: var(--c-danger-bg); }
.prio--medium { color: var(--c-warning); background: var(--c-warning-bg); }
.prio--low    { color: var(--c-muted);   background: var(--c-muted-bg); }
.prio-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c-muted-2); }
.prio-dot--high   { background: var(--c-danger); }
.prio-dot--medium { background: var(--c-warning); }

/* ── Morning brief ─────────────────────────────────────────── */
.brief { padding: 18px 20px; }
.brief__head { display: flex; align-items: flex-start; gap: 12px; }
.brief__icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-accent); background: var(--c-accent-dim);
}
.brief__icon .material-icons-round { font-size: 20px; }
.brief__title { font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.brief__meta { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.brief__regen { flex-shrink: 0; height: 32px; }
.brief__regen .material-icons-round { font-size: 17px; }
.brief__busy { display: none; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--c-muted); }
.brief__busy .material-icons-round { font-size: 16px; color: var(--c-accent); }
.brief.htmx-request .brief__busy { display: flex; }
.brief.htmx-request .brief__summary, .brief.htmx-request .brief__cols, .brief.htmx-request .proposals { opacity: .45; }
.brief__summary { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--c-text); max-width: 75ch; }
.brief__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 16px; }
@media (max-width: 760px) { .brief__cols { grid-template-columns: 1fr; } }
.brief__h { margin-bottom: 8px; font: 600 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted); }
.brief__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.brief__item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.brief__item strong { font-weight: 600; }
.brief__item-icon { flex-shrink: 0; font-size: 17px; margin-top: 1px; color: var(--c-muted); }
.brief__item--critical .brief__item-icon { color: var(--c-danger); }
.brief__item--warning  .brief__item-icon { color: var(--c-warning); }
.brief__item--info     .brief__item-icon { color: var(--c-info); }
.brief__item--good     .brief__item-icon { color: var(--c-success); }
.brief__empty { margin-top: 12px; font-size: 13px; color: var(--c-muted); }
.brief__error { margin-top: 6px; font-size: 11.5px; overflow-wrap: anywhere; }
.brief__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border-dim); font-size: 11.5px; color: var(--c-muted-2); }

/* ── Today: next actions ───────────────────────────────────── */
.next-actions { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.next-actions__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--c-border-dim); text-decoration: none; color: var(--c-text); font-size: 13px; }
.next-actions li:first-child .next-actions__row { border-top: 0; padding-top: 0; }
.next-actions__row:hover .next-actions__title { color: var(--c-accent); }
.next-actions__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-actions__due { flex-shrink: 0; font: 500 11.5px/1 var(--font-mono); color: var(--c-muted); }
.is-overdue { color: var(--c-danger) !important; font-weight: 600; }

/* ── Actions page ──────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-border-dim); }
.stat__v { font: 700 24px/1.1 var(--font-mono); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.stat__k { font: 600 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted); }
.stat--bad .stat__v { color: var(--c-danger); }
.actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.actions-bar > .seg-tabs:first-child { margin-right: auto; }
.seg-tabs--sm .seg-tabs__item { padding: 5px 10px; font-size: 12px; gap: 5px; }

.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-row { border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border-dim); scroll-margin-top: 90px; }
.action-row--overdue { border-color: rgba(192,57,43,0.3); }
.action-row:target { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-dim); }
.action-row--closed .action-row__title { color: var(--c-muted); }
.action-row__head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
    background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.action-row__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.action-row__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.action-row__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--c-muted); }
.action-row__meta .outlet-dot { display: inline-block; margin-right: 5px; vertical-align: 1px; }
.action-row__due { flex-shrink: 0; font: 500 11.5px/1.2 var(--font-mono); color: var(--c-muted); text-align: right; }
.action-row__chev { flex-shrink: 0; color: var(--c-muted); transition: transform var(--tr-fast); }
.action-row__chev.is-open { transform: rotate(180deg); }
.action-row__body { padding: 0 14px 14px 88px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) {
    .action-row__head { flex-wrap: wrap; }
    .action-row__main { flex-basis: calc(100% - 90px); }
    .action-row__body { padding-left: 14px; }
}
.action-row__why { font-size: 13px; line-height: 1.55; color: var(--c-text); max-width: 75ch; }
.action-row__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12px; }
.action-row__links a { display: inline-flex; align-items: center; gap: 4px; color: var(--c-accent); text-decoration: none; }
.action-row__links .material-icons-round { font-size: 15px; }
.action-row__note p { margin-top: 4px; font-size: 13px; white-space: pre-line; }

.status-pill, .impact-pill {
    flex-shrink: 0; padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    color: var(--c-muted); background: var(--c-muted-bg);
}
.status-pill--in_progress { color: var(--c-info); background: var(--c-info-bg); }
.status-pill--done        { color: var(--c-success); background: var(--c-success-bg); }
.impact-pill--better { color: var(--c-success); background: var(--c-success-bg); }
.impact-pill--worse  { color: var(--c-danger);  background: var(--c-danger-bg); }

.impact { padding: 12px 14px; border-radius: 12px; background: var(--c-surface-2); }
.impact__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
@media (max-width: 760px) { .impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.impact__grid > div { display: flex; flex-direction: column; gap: 2px; }
.impact__k { font-size: 11px; color: var(--c-muted); }
.impact__v { font: 700 15px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.impact__v--better { color: var(--c-success); }
.impact__v--worse  { color: var(--c-danger); }
.impact__note { margin-top: 6px; font-size: 12px; color: var(--c-muted); }

.action-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.action-form__note { grid-column: 1 / -2; }
.action-form__save { display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .action-form { grid-template-columns: 1fr 1fr; } .action-form__note, .action-form__save { grid-column: 1 / -1; } }

.history { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.history li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.history__when { min-width: 90px; font-family: var(--font-mono); color: var(--c-muted-2); }

/* ── Settings › Rules ──────────────────────────────────────── */
.rules-table td { vertical-align: middle; }
.rules-table td:first-child { min-width: 260px; max-width: 380px; }
.rules-table__group th {
    padding: 18px 20px 8px; font: 600 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .8px;
    color: var(--c-accent); background: transparent; text-align: left;
}
.rule-input { position: relative; display: block; min-width: 120px; }
.rule-input .ga-input { width: 100%; padding-right: 52px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rule-input .ga-input::placeholder { color: var(--c-muted-2); }
.rule-input__unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--font-mono); color: var(--c-muted); pointer-events: none; }
.rule-input--set .ga-input { border-color: var(--c-accent); }

/* ── Settings › AI ─────────────────────────────────────────── */
.ai-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.ai-usage dt { font-size: 11.5px; color: var(--c-muted); }
.ai-usage dd { margin: 2px 0 0; font: 700 18px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ai-privacy { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.5; }
.ai-privacy li { display: flex; gap: 8px; }
.ai-privacy .material-icons-round { flex-shrink: 0; font-size: 16px; color: var(--c-accent); margin-top: 1px; }

/* ── Phase 3: hotels ───────────────────────────────────────── */
.outlet-dot--maisondalabua { background: #7a4aa8; }
.outlet-dot--luangsaylodge { background: #c28034; }
.outlet-dot--mekongcruises { background: #1f7a8c; }
.tab-strip__item--off { opacity: .55; }
.pickup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.pickup-grid__label { font-size: 12px; color: var(--c-muted); }
.pickup-grid__value { margin-top: 4px; font: 700 20px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pickup-grid__value .kpi-delta { font-family: var(--font-ui); }
.pickup-grid__sub { margin-top: 3px; font-size: 12px; color: var(--c-muted); }
/* Paired bar: the period (accent) above its comparison (reference grey). */
.pair-bar { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.pair-bar__cur, .pair-bar__ref { display: block; height: 6px; border-radius: 0 3px 3px 0; min-width: 2px; }
.pair-bar__cur { background: var(--chart-cur); }
.pair-bar__ref { background: var(--chart-ref); opacity: .55; }
.tag-high { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font: 600 10.5px/1.6 var(--font-ui); color: var(--c-danger); background: var(--c-danger-bg); }
.today-hotels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

/* ── Phase 4 — Mekong Cruises ──────────────────────────────────────────────── */
.trip-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.trip-list__item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.trip-list__item .mono { font-variant-numeric: tabular-nums; }
.trip-list__pax { margin-left: auto; font: 600 12.5px/1 var(--font-mono); color: var(--c-danger); }

/* Marketing: small tag (brand query); outlet dots inside tables and lists */
.ga-table .outlet-dot, .trip-list .outlet-dot { display: inline-block; margin-right: 7px; vertical-align: 1px; flex-shrink: 0; }
.badge--muted { background: var(--c-muted-bg); color: var(--c-muted); height: 17px; padding: 0 6px; font-size: 9.5px; margin-left: 4px; vertical-align: 1px; }
.trip-list__pax--plain { color: var(--c-text); }
.ga-table.ga-table--wrap-head thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }

/* ── Phase 6 — Reviews, group, budgets ─────────────────────────────────────── */
/* Heat cells: the change, coloured by size (good / bad). Text stays the ink
   colour at every step so the number is always readable. */
.heat-table td.heat, .heat-table th { white-space: nowrap; }
.heat { --heat: transparent; background: var(--heat); font-variant-numeric: tabular-nums; }
.heat--none { color: var(--c-muted-2); }
.heat--p0 { --heat: var(--c-muted-bg); }
.heat--p1 { --heat: color-mix(in srgb, var(--c-success) 12%, transparent); }
.heat--p2 { --heat: color-mix(in srgb, var(--c-success) 24%, transparent); }
.heat--p3 { --heat: color-mix(in srgb, var(--c-success) 38%, transparent); }
.heat--m1 { --heat: color-mix(in srgb, var(--c-danger) 12%, transparent); }
.heat--m2 { --heat: color-mix(in srgb, var(--c-danger) 24%, transparent); }
.heat--m3 { --heat: color-mix(in srgb, var(--c-danger) 38%, transparent); }
.heat__link { display: block; color: inherit; text-decoration: none; }
.heat__link:hover .heat__delta { text-decoration: underline; }
.heat__delta { display: block; font: 600 12.5px/1.3 var(--font-mono); }
.heat__value { display: block; font-size: 11px; color: var(--c-muted); }
.heat-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 11px; color: var(--c-muted); }
.heat-legend__swatch { display: inline-block; width: 18px; height: 10px; border-radius: 3px; border: 1px solid var(--c-border-dim); }

/* Reviews waiting for a reply */
.review-list { display: flex; flex-direction: column; }
.review-list__item { padding: 14px 20px; border-top: 1px solid var(--c-border-dim); }
.review-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--c-muted); }
.review-list__meta .outlet-dot { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.review-list__title { margin-top: 6px; font-weight: 600; font-size: 13.5px; }
.review-list__text { margin-top: 4px; font-size: 13px; line-height: 1.55; max-width: 80ch; }
.review-list__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.review-stars { display: inline-flex; color: var(--c-warning); }
.review-stars .material-icons-round { font-size: 15px; }

/* Budget grid */
.budget-table th, .budget-table td { padding-left: 6px; padding-right: 6px; vertical-align: top; }
.budget-table__row { text-align: left; white-space: nowrap; font-weight: 500; }
.budget-input { width: 84px; min-height: 30px; padding: 4px 6px; text-align: right; font: 12.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.budget-input--proposal { border-style: dashed; color: var(--c-muted); }
.budget-table__actual { margin-top: 3px; font-size: 11px; }
.budget-table tbody + tbody { border-top: 2px solid var(--c-border-dim); }

.outlet-map__brand { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.outlet-map__logo { max-height: 44px; max-width: 120px; object-fit: contain; }
.outlet-map__color { width: 44px; height: 34px; padding: 0; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; background: none; }