/* theme.css and data-page.css are loaded as separate <link> tags in the
   HTML (parallel, render-blocking) instead of @import chains — a chained
   import painted the page unstyled on slow connections. Load order:
   theme -> data-page -> this file. */
/* ---------------------------------------------------------------
   Self-diag module — explorer hero + tabs (Body stats in trend
   columns / Activity / Food & Water). Page chrome from data-page.css;
   data rows carry .crt-heavy like the other modules.
   ------------------------------------------------------------- */

:root {
  /* Full width like bookshelf/newsletters — the explorer and metric
     tables use the room. */
  --page-max: none;
  /* Trend semantics — muted to sit inside the phosphor palette. */
  --good: #79c98e;
  --stable: #d6b46a;
  --attention: #d98a8a;
}

body { -webkit-font-smoothing: antialiased; }

.ascii-banner { font-size: min(16px, calc((100vw - 2.5rem) / 18)); }
.toolbar-meta .sync-label { color: var(--text-muted); }

/* Public beta marker in the tagline */
.beta-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--stable);
  border-radius: 4px;
  color: var(--stable);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  vertical-align: 1px;
}

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

main { max-width: var(--page-max); margin: 0 auto; padding: 1.4rem 2rem 4rem; }
@media (max-width: 640px) { main { padding: 1rem 1.25rem 3rem; } }

.dim { color: var(--text-faint); }
.unit { color: var(--text-faint); font-size: 0.82em; font-weight: 400; }

/* ---------- Row sparklines: monthly dots, toned per row ----------
   Neutral = accent; body-stat rows take their trend-group colour and
   food rows their ok/bad status colour via c-* classes. */
.spark { display: block; width: 100%; height: 100%; }
.spark-line { stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: none; }
.spark-dot { fill: var(--accent); }
.spark.c-good .spark-area, .spark.c-ok .spark-area { fill: color-mix(in srgb, var(--good) 9%, transparent); }
.spark.c-stable .spark-area { fill: color-mix(in srgb, var(--stable) 9%, transparent); }
.spark.c-attention .spark-area, .spark.c-bad .spark-area { fill: color-mix(in srgb, var(--attention) 9%, transparent); }
.spark.c-good .spark-line, .spark.c-ok .spark-line { stroke: var(--good); }
.spark.c-good .spark-dot,  .spark.c-ok .spark-dot  { fill: var(--good); }
.spark.c-stable .spark-line { stroke: var(--stable); }
.spark.c-stable .spark-dot  { fill: var(--stable); }
.spark.c-attention .spark-line, .spark.c-bad .spark-line { stroke: var(--attention); }
.spark.c-attention .spark-dot,  .spark.c-bad .spark-dot  { fill: var(--attention); }

/* =====================================================================
   EXPLORER — the hero
   ===================================================================== */

.explorer-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem 1.1rem;
  background-color: color-mix(in srgb, var(--bg-elevated) 45%, var(--bg));
}
.explorer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.explorer-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); position: relative; z-index: 11; }
.explorer-controls { display: flex; gap: 0.6rem; align-items: stretch; }

/* Stat chips: boxed, labelled, unmissable (the flat text row was hard
   to parse — you had to think about which number was which). */
.explorer-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.chip {
  display: flex; flex-direction: column; gap: 0.05rem;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.7rem; background-color: var(--bg-elevated);
  min-width: 4.2rem;
}
.chip-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.chip-val { font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; position: relative; z-index: 11; }
.chip-latest .chip-val { color: var(--accent); }
.chip-delta.up .chip-val { color: var(--good); }
.chip-delta.down .chip-val { color: var(--attention); }
.chip-delta.flat .chip-val { color: var(--text-muted); }
.chip-target { border-style: dashed; }
.chip-target .chip-val { color: var(--text-muted); }
.chip-num.val-good { color: var(--good); }
.chip-num.val-bad { color: var(--attention); }

.exp-legend {
  position: relative; z-index: 11;
  margin: 0.5rem 0 0 3.4rem;
  font-size: 0.64rem;
  color: var(--text-faint);
}
/* trend figure in the same colour as the trendline itself */
.exp-legend .lg-trend { color: var(--text-muted); }

.exp-grid-wrap { display: grid; grid-template-columns: 3rem 1fr; gap: 0.4rem; }
.exp-ylabels {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0.8rem 0; text-align: right;
  font-size: 0.62rem; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.exp-plot { position: relative; }
.exp-fg {
  position: absolute; inset: 0; z-index: 11; pointer-events: none;
}
.exp-fg .exp-svg { height: 100%; }
.exp-svg { display: block; width: 100%; height: 260px; overflow: visible; touch-action: pan-y; outline: none; }
.exp-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; }
.exp-line { stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.exp-line-b { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-dasharray: 4 3; }
.exp-bar { fill: color-mix(in srgb, var(--accent) 38%, transparent); }
.exp-bar-last { fill: var(--accent); }
.exp-weekend { fill: rgba(255, 255, 255, 0.015); }
.exp-target { fill: color-mix(in srgb, var(--good) 8%, transparent); }
.exp-target-edge { stroke: color-mix(in srgb, var(--good) 45%, transparent); stroke-width: 1.2; stroke-dasharray: 3 4; }
.exp-clip { fill: var(--accent); opacity: 0.85; }
.exp-trend { stroke: var(--text-muted); stroke-width: 1.8; stroke-dasharray: 7 5; }
.exp-cross { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.exp-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.exp-point { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }
.exp-point-zero { fill: var(--bg); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.4; }
.exp-point-sparse { fill: transparent; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; }



/* Floating crosshair tooltip (replaced the bottom readout line). */
/* compare mode */
/* Correlate button reuses the shared .tab-bar/.tab component (see
   renderTabs) so it matches the section tabs exactly — no bespoke styling. */
.cmp-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: 0.74rem; cursor: pointer;
  color: var(--text); background-color: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.2rem 0.7rem;
}
.cmp-chip:hover { border-color: var(--accent); }
.cmp-swatch { width: 0.6rem; height: 0.6rem; border-radius: 2px; display: inline-block; }
.cmp-x { color: var(--text-faint); }
.cmp-reset { color: var(--text-muted); border-style: dashed; }
.cmp-line { stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cmp-tip { flex-wrap: wrap; max-width: 60%; }
.cmp-tip-val { font-weight: 700; font-variant-numeric: tabular-nums; }

.exp-tip[hidden] { display: none; }
.exp-tip {
  position: absolute; z-index: 12;
  display: flex; gap: 0.5rem; align-items: baseline;
  padding: 0.25rem 0.6rem;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 6px;
  pointer-events: none; white-space: nowrap;
  font-size: 0.72rem;
}
.exp-tip::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  background-attachment: fixed;
}
.tip-date { color: var(--text-muted); }
.tip-val { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tip-b { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.exp-xlabels {
  display: flex; justify-content: space-between;
  margin: 0.35rem 0 0 3.4rem;
  font-size: 0.6rem; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.exp-xlabels.xlabels-grid { display: grid; text-align: center; }
.exp-xlabels.xlabels-abs { display: block; position: relative; height: 1.2em; }
.exp-xlabels.xlabels-abs span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
}
.exp-xlabels .x-jan { color: var(--text-muted); font-weight: 700; white-space: nowrap; }

/* =====================================================================
   TABS + metric tables
   ===================================================================== */

/* On a narrow phone the section tabs + Correlate can't share one line.
   Let the ROW wrap (Correlate drops to its own line as a whole) but never
   let the tab bar split its buttons across two rows — that looked broken. */
.tabs-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; margin: 1.2rem 0 1rem; }
.tabs-row .tab-bar { flex-wrap: nowrap; }
.section-tabs { margin: 0; }


/* Trend groups side by side (needs-attention first); stacks to one
   column when there's no room. */
.trend-cols {
  /* Compact columns spread across the chart width: each stat's label / 7d /
     target / sparkline stay together (fixed-ish column), and the free space
     goes BETWEEN the columns — not inside a row. Responsive: columns shrink a
     little, then wrap. */
  display: flex;
  flex-wrap: wrap;
  /* Always left-aligned: columns pack to the left with a normal gap and wrap
     when needed. No centre void, whether there are 2 or 3 columns (or a group
     wraps to the next row). */
  justify-content: flex-start;
  gap: 1.4rem 2.5rem;
  align-items: flex-start;
}
.trend-col { flex: 0 1 25rem; min-width: 0; }

/* small target line under a row label */
.m-sub {
  display: block;
  font-size: 0.6rem;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

.m-grid { display: flex; flex-direction: column; gap: 3px; }

.m-row {
  display: grid;
  /* label | 7d value | sparkline. The sparkline column carries most of the
     slack (1.8fr vs 1fr) so as the column widens the graph fills the space
     instead of leaving a big gap after the label. */
  /* label (1fr → same width on every row so 7d/target/sparkline line up,
     incl. the wider "Blood pressure" row) | 7d | sparkline (fills). */
  grid-template-columns: minmax(6.5rem, 1.2fr) 3.5rem minmax(120px, 1fr);
  align-items: center; column-gap: 0.6rem;
  padding: 0.42rem 0.7rem; border-radius: 6px;
}
.m-row.m-food {
  grid-template-columns: minmax(6.5rem, 1.2fr) 3.5rem 4.2rem minmax(110px, 1fr);
}
/* Personal records — a quiet full-width strip below the Move columns. */
.records-strip {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1.9rem;
  margin-top: 1.1rem; padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
}
.records-strip-label {
  align-self: center;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-faint); font-weight: 700;
}
.rec-item { display: flex; flex-direction: column; gap: 0.05rem; }
.rec-item-val { font-size: 0.92rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rec-item-label { font-size: 0.66rem; color: var(--text-muted); }
.rec-item-sub { font-size: 0.6rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.m-head { padding-top: 0.15rem; padding-bottom: 0.3rem; }
.m-head span {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.m-today, .m-avg, .m-target { text-align: right; font-variant-numeric: tabular-nums; }
.m-spark { text-align: center; height: 24px; display: flex; align-items: center; justify-content: center; }
.m-label { font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-today { font-size: 0.92rem; font-weight: 700; color: var(--text); }
/* one colour for ALL period columns — no more grey mystery */
.m-avg { font-size: 0.76rem; color: var(--text-muted); }
.m-target { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; }
.m-note { font-size: 0.66rem; color: var(--text-faint); padding: 0.3rem 0.7rem; }
.m-row.is-active { background-color: var(--bg-elevated); }
.m-row.is-active::before { opacity: 0.35; }
.sport-row { cursor: default; }

.m-cat {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.7rem 0 0.15rem; padding: 0.2rem 0.7rem;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
}
.cat-count { font-weight: 400; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.m-cat.trend-good { color: var(--good); }
.m-cat.trend-stable { color: var(--stable); }
.m-cat.trend-attention { color: var(--attention); }

/* status dot vs target (food & water) */
.dot {
  display: inline-block; width: 0.5rem; height: 0.5rem;
  border-radius: 50%; margin-right: 0.45rem; vertical-align: baseline;
}
.dot-ok { background: var(--good); }
.dot-bad { background: var(--attention); }
.dot-na { background: var(--border); }

/* per-year detail */
.year-tabs { margin-bottom: 0.9rem; }
.year-summary { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.9rem; }
.year-summary b { color: var(--text); }
.year-bars {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.8rem 1rem 0.5rem; margin-bottom: 1rem;
}
.yb-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 64px; }
.yb-col { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; height: 100%; justify-content: flex-end; }
.yb-bar {
  width: 60%; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent));
}
.yb-month { font-size: 0.58rem; color: var(--text-faint); }

.act-list { display: flex; flex-direction: column; gap: 3px; }
.act-row {
  display: grid; grid-template-columns: 8.5rem 1fr auto;
  align-items: center; gap: 0.8rem; padding: 0.42rem 0.7rem; border-radius: 6px;
}
.act-name { font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-bar-track {
  height: 8px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.act-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  border-radius: 999px;
}
.act-meta { font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 760px) {
  .m-row { grid-template-columns: minmax(5.5rem, 1fr) 3.2rem 100px; }
  .m-row.m-food { grid-template-columns: minmax(5.5rem, 1fr) 3.2rem 4.2rem 100px; }
  .act-row { grid-template-columns: 6.5rem 1fr; }
  .act-meta { grid-column: 2; text-align: right; }
  .exp-grid-wrap { grid-template-columns: 2.2rem 1fr; }
  .exp-xlabels { margin-left: 2.6rem; }
  .exp-xlabels.xlabels-grid span:not(.x-jan) { overflow: hidden; }
  .explorer-chips { gap: 0.4rem; }
}