/* =============================================================================
   analytics.css — Greenhouse Command Center
   -----------------------------------------------------------------------------
   Design language
   ---------------
   Two measurements drive this whole product: pH and EC. So they get fixed
   colours everywhere — pH is always teal, EC is always blue. In a stat card,
   on a chart line, in a table cell, on an axis. You should never have to read
   a legend to know which is which.

   The signature device is the SPEC RAIL: a small horizontal gauge showing
   where a value sits inside its target band. The same band is drawn behind
   every chart line. Card and chart speak the same visual language, so
   "is this in range?" is answered by shape, not by arithmetic.

   Everything else stays deliberately quiet.
   ============================================================================= */

/* ---------- Tokens ------------------------------------------------------- */

:root {
    /* Surfaces — cool slate, slightly cooler and deeper than stock GitHub dark */
    --surface-0: #0a0e13;
    --surface-1: #111820;
    --surface-2: #18212b;
    --surface-3: #202b36;

    /* Lines */
    --line: #263039;
    --line-soft: #1c242d;
    --line-strong: #35434f;

    /* Ink */
    --ink: #e8eff5;
    --ink-mid: #9fb0be;
    --ink-dim: #6b7d8c;

    /* Measurement colours — semantic, never reassigned */
    --ph: #2dd4a7;
    --ph-soft: rgba(45, 212, 167, 0.13);
    --ec: #4d9fff;
    --ec-soft: rgba(77, 159, 255, 0.13);

    /* Status */
    --ok: #3fb950;
    --warn: #d9a441;
    --alert: #f0616d;
    --ok-soft: rgba(63, 185, 80, 0.12);
    --warn-soft: rgba(217, 164, 65, 0.12);
    --alert-soft: rgba(240, 97, 109, 0.12);

    /* Type */
    --font-display: "IBM Plex Serif", Georgia, serif;
    --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
    --font-data: "IBM Plex Mono", "SF Mono", Menlo, monospace;

    /* Rhythm */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --gap: 16px;

    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ---------- Base --------------------------------------------------------- */

body.bg-dark {
    background: var(--surface-0) !important;
    color: var(--ink);
    font-family: var(--font-body);
    /* A faint vertical gradient keeps a long scroll from reading as flat black */
    background-image: linear-gradient(180deg, #0d141b 0%, var(--surface-0) 520px);
    background-attachment: fixed;
}

.cc-shell {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 18px 72px;
}

/* Every number in the product is monospaced and tabular so columns of
   figures line up on the decimal point. */
.num {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ---------- Masthead ----------------------------------------------------- */

.cc-masthead {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 0 20px;
    border-bottom: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.cc-back {
    color: var(--ink-dim);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.cc-back:hover,
.cc-back:focus-visible {
    color: var(--ink);
    border-color: var(--line-strong);
}

.cc-title-block { margin-right: auto; }

.cc-eyebrow {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 0 0 3px;
}

.cc-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}

.cc-synced {
    font-family: var(--font-data);
    font-size: 0.66rem;
    color: var(--ink-dim);
    text-align: right;
    line-height: 1.5;
}

.cc-synced strong { color: var(--ink-mid); font-weight: 500; }

/* ---------- Verdict banner — the thesis of the page ---------------------- */

.verdict {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    margin-top: 22px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface-1);
    position: relative;
    overflow: hidden;
}

/* A 3px status spine down the left edge — the fastest read on the page */
.verdict::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ink-dim);
}

.verdict[data-status="ok"]::before    { background: var(--ok); }
.verdict[data-status="warn"]::before  { background: var(--warn); }
.verdict[data-status="alert"]::before { background: var(--alert); }
.verdict[data-status="ok"]    { background: linear-gradient(90deg, var(--ok-soft), transparent 42%), var(--surface-1); }
.verdict[data-status="warn"]  { background: linear-gradient(90deg, var(--warn-soft), transparent 42%), var(--surface-1); }
.verdict[data-status="alert"] { background: linear-gradient(90deg, var(--alert-soft), transparent 42%), var(--surface-1); }

.verdict-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--ink-dim);
    flex-shrink: 0;
}

.verdict[data-status="ok"]    .verdict-dot { background: var(--ok); }
.verdict[data-status="warn"]  .verdict-dot { background: var(--warn); }
.verdict[data-status="alert"] .verdict-dot { background: var(--alert); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 97, 109, 0.55); }
    60%      { box-shadow: 0 0 0 9px rgba(240, 97, 109, 0); }
}

.verdict-text { flex: 1; min-width: 200px; }

.verdict-headline {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--ink);
}

.verdict-sub {
    font-size: 0.78rem;
    color: var(--ink-mid);
    margin: 0;
}

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

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: var(--gap);
    margin-top: var(--gap);
}

.kpi {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 15px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi-label {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.kpi-value {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.kpi-value .unit {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--ink-dim);
    margin-left: 4px;
    letter-spacing: 0;
}

.kpi-value.is-ph    { color: var(--ph); }
.kpi-value.is-ec    { color: var(--ec); }
.kpi-value.is-ok    { color: var(--ok); }
.kpi-value.is-warn  { color: var(--warn); }
.kpi-value.is-alert { color: var(--alert); }

.kpi-note {
    font-size: 0.68rem;
    color: var(--ink-dim);
    line-height: 1.35;
}

/* ---------- SPEC RAIL — the signature element ---------------------------- */
/* Track = full plotted range. Shaded segment = the in-spec band.
   The needle marks the actual value. In-band reads calm; outside the
   band the needle turns red and sits visibly off the shaded zone.        */

.rail {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: visible;
    margin-top: 2px;
}

/* Three zones: amber shoulders either side of a green core. The bare track
   showing at each end is the out-of-range region. */
.rail-band {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--ink-dim);
    opacity: 0.4;
}

.rail-band.is-ok   { background: var(--ok); opacity: 0.5; }
.rail-band.is-warn { background: var(--warn); opacity: 0.42; }

/* Rounding every band rather than just the outer two: the needle is also a
   <span>, so :last-of-type would match it instead of the final band. */
.rail-band { border-radius: 2px; }

.rail-needle {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background: var(--ink);
    transform: translateX(-1px);
    transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.rail-needle.is-warn  { background: var(--warn); box-shadow: 0 0 7px rgba(217, 164, 65, 0.75); }
.rail-needle.is-alert { background: var(--alert); box-shadow: 0 0 7px rgba(240, 97, 109, 0.8); }

.rail-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-data);
    font-size: 0.55rem;
    color: var(--ink-dim);
    margin-top: 5px;
}

/* ---------- Control bar -------------------------------------------------- */

.control-bar {
    background: rgba(17, 24, 32, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    position: sticky;
    top: 10px;
    z-index: 900;
    margin-top: var(--gap);
    box-shadow: var(--shadow);
}

.filter-label {
    display: block;
    font-family: var(--font-data);
    font-size: 0.58rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 5px;
    letter-spacing: 0.14em;
}

.custom-dark-input {
    background: var(--surface-0) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-data) !important;
    font-size: 0.8rem !important;
    padding: 7px 10px !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.custom-dark-input:focus {
    border-color: var(--ec) !important;
    box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.16) !important;
    outline: none;
}

/* Make the native date/select glyphs legible on a dark field */
.custom-dark-input::-webkit-calendar-picker-indicator {
    filter: invert(0.72);
    cursor: pointer;
}

select.custom-dark-input option { background: var(--surface-1); color: var(--ink); }

.btn-apply {
    width: 100%;
    background: var(--ec);
    border: 1px solid var(--ec);
    color: #06101d;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    border-radius: var(--r-sm);
    padding: 8px 14px;
    transition: filter 0.15s, opacity 0.15s;
}

.btn-apply:hover:not(:disabled) { filter: brightness(1.12); }
.btn-apply:disabled { opacity: 0.55; cursor: progress; }
.btn-apply:focus-visible { outline: 2px solid var(--ec); outline-offset: 2px; }

/* Targets drawer */
.targets-toggle {
    background: none;
    border: none;
    color: var(--ink-dim);
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 10px 0 0;
    cursor: pointer;
    transition: color 0.15s;
}

.targets-toggle:hover { color: var(--ink-mid); }
.targets-toggle:focus-visible { outline: 2px solid var(--ec); outline-offset: 3px; border-radius: 4px; }
.targets-toggle .chev { display: inline-block; transition: transform 0.25s; }
.targets-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.targets-drawer {
    display: none;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}

.targets-drawer.show { display: block; }

.targets-help {
    font-size: 0.75rem;
    color: var(--ink-dim);
    line-height: 1.7;
    margin: 0 0 14px;
}

.target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
}

.target-metric { min-width: 0; }

/* Label left, input right — four boundaries read top to bottom as low to high */
.target-row {
    display: grid;
    grid-template-columns: 1fr 86px;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.target-row label {
    font-size: 0.72rem;
    color: var(--ink-mid);
    margin: 0;
}

.target-row input { text-align: right; }

.target-legend {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 9px;
    color: var(--ink-dim);
}

.target-legend.is-ph { color: var(--ph); }
.target-legend.is-ec { color: var(--ec); }

/* Plain-English restatement of the thresholds, so the drawer explains itself */
/* Three sets side by side, the one being edited highlighted */
.spec-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.spec-summary-set {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--surface-0);
    transition: border-color 0.15s;
}

.spec-summary-set.is-active { border-color: var(--ec); }

.spec-summary-title {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-mid);
    margin-bottom: 2px;
}

.spec-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.spec-summary-name {
    font-family: var(--font-data);
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 26px;
}

.spec-summary-name.is-ph { color: var(--ph); }
.spec-summary-name.is-ec { color: var(--ec); }

.chip-ok, .chip-warn, .chip-alert {
    font-family: var(--font-data);
    font-size: 0.63rem;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Chip strip above the flagged-samples table */
.flagged-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.flagged-summary:empty { margin-bottom: 0; }

.chip-ok    { background: var(--ok-soft);    color: var(--ok);    border-color: rgba(63, 185, 80, 0.35); }
.chip-warn  { background: var(--warn-soft);  color: var(--warn);  border-color: rgba(217, 164, 65, 0.35); }
.chip-alert { background: var(--alert-soft); color: var(--alert); border-color: rgba(240, 97, 109, 0.35); }

/* ---------- Widgets ------------------------------------------------------ */

.analytics-widget {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-top: 22px;
}

/* Header is a real <button> so it is keyboard reachable */
.widget-header {
    width: 100%;
    background: var(--surface-2);
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: none;
    border-bottom: 1px solid transparent;
    text-align: left;
    transition: background 0.18s;
}

.widget-header:hover { background: var(--surface-3); }
.widget-header:focus-visible { outline: 2px solid var(--ec); outline-offset: -2px; }
.widget-header[aria-expanded="true"] { border-bottom-color: var(--line); }

.widget-heading {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}

.widget-sub {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--ink-dim);
    margin-top: 2px;
}

.toggle-icon {
    color: var(--ink-dim);
    font-size: 0.7rem;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}

.widget-header[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }

.widget-content { display: none; padding: 20px; }
.widget-content.show { display: block; animation: fade-in 0.3s ease; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Table -------------------------------------------------------- */

.leaderboard-table { width: 100%; border-collapse: collapse; }

.leaderboard-table th {
    font-family: var(--font-data);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}

.leaderboard-table th:first-child { text-align: left; padding-left: 14px; }

.leaderboard-table td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
    font-size: 0.86rem;
    color: var(--ink-mid);
}

.leaderboard-table tbody tr { transition: background 0.14s; }
.leaderboard-table tbody tr:hover { background: var(--surface-2); }
.leaderboard-table tbody tr:last-child td { border-bottom: none; }

.cell-size {
    text-align: left !important;
    padding-left: 14px !important;
    color: var(--ink) !important;
    font-weight: 600;
}

/* Size chip — a 3px colour key per crop size, reused as a chart accent */
.size-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.size-chip::before {
    content: "";
    width: 3px;
    height: 17px;
    border-radius: 2px;
    background: var(--chip, var(--ink-dim));
    flex-shrink: 0;
}

.size-3            { --chip: #4d9fff; }
.size-5            { --chip: #2dd4a7; }
.size-bark         { --chip: #b07d4f; }
.size-auto40       { --chip: #d9a441; }
.size-pre-spaced   { --chip: #a78bfa; }
.size-spaced       { --chip: #f0616d; }
.size-potted-3     { --chip: #34d399; }
.size-spaced-potted{ --chip: #f59e0b; }
.size-waterfalls   { --chip: #38bdf8; }
.size-default      { --chip: #6b7d8c; }

.applied-val { color: var(--ok); font-weight: 700; }

/* pH / EC pair cell: two values, each keeping its measurement colour */
.pair { display: inline-flex; align-items: baseline; gap: 6px; }
.pair .v-ph { color: var(--ph); font-weight: 600; }
.pair .v-ec { color: var(--ec); font-weight: 600; }
.pair .sep  { color: var(--line-strong); }
.pair .v-ph.off, .pair .v-ec.off { color: var(--alert); }
.pair .v-ph.near, .pair .v-ec.near { color: var(--warn); }

.text-warn { color: var(--warn); font-weight: 600; }
.text-ok { color: var(--ink-dim); }

/* Out-of-spec cells get a soft wash, not a shout */
td.flag-warn  { background: var(--warn-soft); }
td.flag-alert { background: var(--alert-soft); }

.delta-up   { color: var(--alert); font-weight: 600; }
.delta-flat { color: var(--ink-mid); }
.delta-down { color: var(--ec); font-weight: 600; }

/* ---------- Charts ------------------------------------------------------- */

.chart-card-large {
    height: 430px;
    width: 100%;
    margin-bottom: 18px;
    background: var(--surface-0);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 14px;
    position: relative;
}

.chart-card-large:last-child { margin-bottom: 0; }

.chart-title {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 10px;
}

.chart-canvas-wrap { position: relative; height: calc(100% - 26px); }

/* ---------- OR2 per-house panels --------------------------------------- */
/* One block per house, holding a pH panel and an EC panel side by side. Two
   small charts read better here than one dual-axis chart: each keeps its own
   spec band, and the injected/received comparison stays the only thing to
   look for. */

.or2-panel-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.or2-house-block {
    background: var(--surface-0);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 14px 14px 8px;
}

.or2-house-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line-soft);
}

.or2-house-name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
}

.or2-house-note {
    font-family: var(--font-data);
    font-size: 0.63rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.or2-panel-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.chart-panel { height: 260px; }

.chart-panel .chart-title { margin-bottom: 6px; }

@media (max-width: 900px) {
    .or2-panel-pair { grid-template-columns: 1fr; }
    .chart-panel { height: 230px; }
}

/* Surfaces data that cannot be attributed to a real house */
.legacy-note {
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px dashed var(--line-strong);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
    background: var(--warn-soft);
    color: var(--ink-mid);
    font-size: 0.78rem;
    line-height: 1.65;
}

.legacy-note strong { color: var(--ink); }

/* ---------- Stat grid ---------------------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 11px;
}

.stat-card {
    background: var(--surface-0);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 12px 13px;
    border-left: 3px solid var(--line-strong);
}

.stat-card.border-info  { border-left-color: var(--ec); }
.stat-card.border-ph    { border-left-color: var(--ph); }
.stat-card.border-ok    { border-left-color: var(--ok); }
.stat-card.border-warn  { border-left-color: var(--warn); }
.stat-card.border-alert { border-left-color: var(--alert); }

.stat-label {
    font-family: var(--font-data);
    font-size: 0.57rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 5px;
}

.stat-value {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
}

.stat-value.is-ph { color: var(--ph); }
.stat-value.is-ec { color: var(--ec); }
.stat-sub { font-size: 0.63rem; color: var(--ink-dim); margin-top: 3px; }
.stat-sub .v-ph { color: var(--ph); }
.stat-sub .v-ec { color: var(--ec); }

/* ---------- Size filter buttons ------------------------------------------ */

.size-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-bottom: 16px;
}

.size-filter-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-mid);
    font-size: 0.73rem;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.size-filter-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.size-filter-btn:focus-visible { outline: 2px solid var(--ec); outline-offset: 2px; }

.size-filter-btn[aria-pressed="true"] {
    background: var(--ec);
    border-color: var(--ec);
    color: #06101d;
}

/* Secondary action — same silhouette as a size chip, but never "selected" */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-mid);
    font-size: 0.73rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn-ghost:hover { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:focus-visible { outline: 2px solid var(--ec); outline-offset: 2px; }

/* ---------- Empty / error states ----------------------------------------- */

.state-msg {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-dim);
    font-size: 0.85rem;
    line-height: 1.6;
}

.state-msg strong {
    display: block;
    color: var(--ink-mid);
    font-family: var(--font-display);
    font-size: 1rem;
    margin-bottom: 5px;
}

.state-msg.is-error strong { color: var(--alert); }

.state-msg .hint { font-size: 0.76rem; }

/* Skeleton shimmer while the first fetch is in flight */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s linear infinite;
    border-radius: var(--r-sm);
    height: 62px;
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ---------- Toast -------------------------------------------------------- */

.cc-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 130%);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--alert);
    color: var(--ink);
    font-size: 0.82rem;
    padding: 12px 18px;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
    z-index: 2000;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: min(520px, calc(100vw - 32px));
}

.cc-toast.show { transform: translate(-50%, 0); }

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 767px) {
    .cc-shell { padding: 0 12px 56px; }
    .control-bar { position: static; padding: 14px; }
    .cc-masthead { padding: 18px 0 14px; }
    .cc-title { font-size: 1.28rem; }
    .cc-synced { text-align: left; width: 100%; }
    .chart-card-large { height: 340px; padding: 11px; }
    .kpi-value { font-size: 1.45rem; }
    .leaderboard-table td { font-size: 0.8rem; padding: 11px 7px; }
    .verdict { padding: 15px 16px; }
}

/* ---------- Accessibility ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

::selection { background: rgba(77, 159, 255, 0.3); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--surface-0); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }