/* Health Watcher styles.
   Colour roles come from theme.css, which is generated from the validated palette.
   Type is a system stack on purpose: the report has to open from a folder with no
   network, so a downloaded webfont would be a blank wordmark exactly when it matters. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

:root {
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
             "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display",
                  "Segoe UI Semibold", "Segoe UI", Inter, Roboto, sans-serif;
}

/* ---------- brand ---------- */

.ww-brandmark {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
}
.ww-brandmark:hover { text-decoration: none; }
.ww-brandmark:hover .ww-wordmark b { color: var(--series-1); }
.ww-logo-mark { flex: 0 0 auto; color: var(--series-1); display: block; }
.ww-wordmark {
  font-family: var(--font-display);
  font-size: 19.5px; line-height: 1.1; letter-spacing: -0.021em; white-space: nowrap;
}
.ww-wordmark b { font-weight: 680; color: var(--ink); }
.ww-wordmark span { font-weight: 380; color: var(--ink-2); margin-left: 0.28em; }

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

.ww-shell { display: flex; min-height: 100vh; align-items: flex-start; }

.ww-nav {
  position: sticky;
  top: 0;
  flex: 0 0 268px;
  width: 268px;
  height: 100vh;
  overflow-y: auto;
  /* The bug button is fixed to the bottom-left corner, over this column. The bottom
     padding is what keeps the last thing in the sidebar out from under it. */
  padding: 28px 20px 96px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.ww-brand { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 2px; }
.ww-brand-sub { font-size: 13px; color: var(--muted); margin: 0 0 24px; }

.ww-brand-link { display: block; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 2px; text-decoration: none; }
.ww-brand-link:hover { text-decoration: underline; }

/* ---------- unit switch ----------
   Both unit variants are rendered into the page; only one is ever displayed. Default
   (no data-units stamp) is kilograms, so the page reads correctly before any script
   runs and with JavaScript disabled. */

.ww-u-imp { display: none; }
:root[data-units="stlb"] .ww-u-kg { display: none; }
:root[data-units="stlb"] .ww-u-imp { display: inline; }
:root[data-units="stlb"] div.ww-u-imp { display: block; }

.ww-units {
  display: flex; gap: 2px; margin: 0 0 20px; padding: 3px;
  background: var(--gap); border: 1px solid var(--border); border-radius: 9px;
}
.ww-units button {
  flex: 1 1 0; padding: 6px 8px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.ww-units button:hover { color: var(--ink); }
.ww-units button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}

/* ---------- person switcher ---------- */

.ww-people { display: flex; flex-direction: column; gap: 4px; margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ww-person {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 7px; text-decoration: none;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.ww-person:hover { background: var(--gap); color: var(--ink); }
.ww-person.is-current { background: var(--band); color: var(--ink); }
.ww-person.is-empty { font-weight: 500; }
.ww-person-note { font-size: 11.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }

/* ---------- landing ---------- */

.ww-landing { max-width: 1100px; margin: 0 auto; padding-top: 56px; }
.ww-person-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.ww-person-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px 18px;
}
.ww-person-card:hover { border-color: var(--series-1); }
.ww-person-card.is-empty { border-style: dashed; display: flex; flex-direction: column; }
.ww-person-card.is-empty .ww-person-card-meta { margin-bottom: 18px; }
.ww-person-card.is-empty .ww-person-card-foot { margin-top: auto; }
.ww-person-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ww-person-card-name { font-size: 22px; font-weight: 660; letter-spacing: -0.01em; }
.ww-person-card-weight { font-size: 22px; font-weight: 660; letter-spacing: -0.02em; }
.ww-person-card-meta { font-size: 13.5px; color: var(--muted); }
.ww-person-card-chart { margin: 14px 0 10px; }
.ww-person-card-chart .ww-spark { width: 100%; height: auto; }
.ww-person-card-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; }
.ww-person-card-foot .ww-muted { font-weight: 400; }
.ww-theme-toggle.ww-theme-inline { width: auto; margin-top: 32px; padding: 8px 16px; }

/* ---------- setup instructions ---------- */

.ww-steps { margin: 0 0 14px; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.ww-steps li { margin-bottom: 7px; }
.ww-code {
  margin: 0 0 10px; padding: 13px 15px; border-radius: 9px; overflow-x: auto;
  background: var(--gap); border: 1px solid var(--border);
  font: 13.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--ink);
}
code { overflow-wrap: anywhere; font: 0.92em ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--gap); padding: 1px 5px; border-radius: 4px; }

.ww-nav-group { margin-bottom: 22px; }
.ww-nav-group h3 {
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin: 0 0 8px; padding-left: 10px;
}
.ww-nav a {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 7px 10px; border-radius: 7px; text-decoration: none;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.35;
}
.ww-nav a:hover { background: var(--gap); color: var(--ink); }
.ww-nav a[aria-current="page"] { background: var(--band); color: var(--ink); font-weight: 600; }
.ww-nav a .ww-nav-note { font-size: 12px; color: var(--muted); font-weight: 400; white-space: nowrap; }

.ww-main { flex: 1 1 auto; min-width: 0; padding: 36px 40px 96px; max-width: 1500px; }

/* Mobile lives in mobile.css, loaded with a media attribute so desktop never sees
   it. Do not add width-based rules here. */

/* ---------- headings ---------- */

.ww-page-head { margin-bottom: 26px; }
.ww-page-head h1 { font-size: 30px; font-weight: 660; letter-spacing: -0.02em; margin: 0 0 6px; }
.ww-page-head p { margin: 0; color: var(--ink-2); font-size: 15.5px; max-width: 78ch; }

h2.ww-section { font-size: 20px; font-weight: 640; letter-spacing: -0.01em; margin: 40px 0 4px; }
h2.ww-section:first-of-type { margin-top: 28px; }
.ww-section-note { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; max-width: 82ch; }

/* ---------- cards ---------- */

.ww-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px 16px;
  margin-bottom: 20px;
}
.ww-card-title { font-size: 15px; font-weight: 620; margin: 0 0 2px; }
.ww-card-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }

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

.ww-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.ww-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 15px;
}
.ww-tile-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.ww-tile-value { font-size: 27px; font-weight: 660; letter-spacing: -0.02em; line-height: 1.1; }
/* "11 st 11.2 lb" is a longer string than "74.95 kg" and wraps at the default size. */
:root[data-units="stlb"] .ww-tile-value { font-size: 23px; }
.ww-tile-value .ww-unit { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.ww-tile-note { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

.ww-delta-loss { color: var(--success-text); }
.ww-delta-gain { color: var(--status-critical); }

/* ---------- callout ---------- */

.ww-callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--status-warning);
  border-radius: 10px;
  background: var(--surface);
  padding: 18px 22px;
  margin: 0 0 22px;
}
.ww-callout.is-good { border-left-color: var(--status-good); }
.ww-callout.is-watch { border-left-color: var(--status-warning); }
.ww-callout.is-concerning { border-left-color: var(--status-critical); }
.ww-callout h3 { margin: 0 0 8px; font-size: 16px; font-weight: 640; display: flex; align-items: center; gap: 8px; }
.ww-callout p { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); max-width: 84ch; }
.ww-callout p:last-child { margin-bottom: 0; }
.ww-callout strong { color: var(--ink); }

.ww-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 620; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-2);
}
.ww-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ww-badge-good { color: var(--success-text); }
.ww-badge-watch { color: var(--status-serious); }
.ww-badge-concerning { color: var(--status-critical); }

/* ---------- charts ---------- */

.ww-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ww-chart-wrap { position: relative; }

.ww-grid { stroke: var(--grid); stroke-width: 1; }
.ww-axis { stroke: var(--axis); stroke-width: 1; }
.ww-zero { stroke: var(--axis); stroke-width: 1.5; stroke-dasharray: 2 3; }
.ww-axis-label { fill: var(--muted); font-size: 12.5px; }
.ww-axis-y { text-anchor: end; }
.ww-axis-x { text-anchor: middle; }
.ww-axis-rot { text-anchor: end; }
.ww-axis-title { fill: var(--muted); font-size: 12.5px; }
/* A second scale down the right of the Overview graph, and whose each one is. */
.ww-axis-y2 { text-anchor: start; }
.ww-axis-name { fill: var(--muted); font-size: 11.5px; font-weight: 700; }
.ww-axis-name.is-line-1 { fill: var(--series-1); }
.ww-axis-name.is-line-2 { fill: var(--series-2); }

.ww-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ww-line-thin { stroke-width: 1.75; }
.ww-line-1, .ww-line-lean { stroke: var(--series-1); }
.ww-line-2, .ww-line-fat { stroke: var(--series-2); }
.ww-line-3 { stroke: var(--series-3); }
.ww-line-4 { stroke: var(--series-4); }

.ww-trend { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.85; }
.ww-goal { stroke: var(--status-good); stroke-width: 1.5; stroke-dasharray: 6 4; }
.ww-goal-label { fill: var(--success-text); font-size: 12.5px; font-weight: 600; text-anchor: end; }

.ww-dot { stroke: var(--surface); stroke-width: 1.5; }
.ww-dot-1 { fill: var(--series-1); }
.ww-dot-2 { fill: var(--series-2); }
.ww-dot-3 { fill: var(--series-3); }
.ww-dot-4 { fill: var(--series-4); }

/* A reading read off a photograph, not exported from the app: hollow, so it never
   passes for an authoritative measurement at a glance. */
.ww-dot-provisional { fill: var(--surface); stroke-width: 2; }
.ww-dot-provisional.ww-dot-1 { stroke: var(--series-1); }
.ww-dot-provisional.ww-dot-2 { stroke: var(--series-2); }

.ww-area-lean { fill: var(--series-1); opacity: 0.20; }
.ww-area-fat { fill: var(--series-2); opacity: 0.30; }

.ww-direct-label { font-size: 13px; font-weight: 620; text-anchor: end; }
.ww-label-lean, .ww-label-1 { fill: var(--series-1); }
.ww-label-fat, .ww-label-2 { fill: var(--series-2); }
.ww-label-3 { fill: var(--series-3); }
.ww-label-4 { fill: var(--series-4); }
.ww-direct-label[x] { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ww-label-1, .ww-label-2, .ww-label-3, .ww-label-4 { text-anchor: start; }
.ww-label-lean, .ww-label-fat { text-anchor: end; }

.ww-band { fill: var(--status-good); opacity: 0.10; }
.ww-rug { stroke: var(--muted); stroke-width: 1; opacity: 0.55; }
.ww-rug-label { fill: var(--muted); font-size: 11.5px; }

.ww-bar-loss { fill: var(--series-1); }
.ww-bar-gain { fill: var(--series-2); }
.ww-bar-lean { fill: var(--series-1); }
.ww-bar-fat  { fill: var(--series-2); }
.ww-bar-value { fill: #ffffff; font-size: 14px; font-weight: 600; text-anchor: middle; }
.ww-bar-total { fill: var(--ink); font-size: 16px; font-weight: 660; text-anchor: middle; }

.ww-spark { width: 120px; height: 30px; }
.ww-spark path { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ww-spark-loss path { stroke: var(--series-1); }
.ww-spark-gain path { stroke: var(--series-2); }

.ww-cell-empty { fill: var(--surface); stroke: var(--grid); stroke-width: 1; }
.ww-cell-value { font-size: 13px; font-weight: 600; }
.ww-chart-empty .ww-empty-text { fill: var(--muted); font-size: 15px; }
.ww-mini .ww-axis-label { font-size: 10px; }
.ww-mini .ww-empty-text { font-size: 12px; }

/* ---------- legend ---------- */

.ww-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.ww-legend li { display: flex; align-items: center; gap: 7px; }
.ww-legend .ww-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ww-swatch-1 { background: var(--series-1); }
.ww-swatch-2 { background: var(--series-2); }
.ww-swatch-3 { background: var(--series-3); }
.ww-swatch-4 { background: var(--series-4); }
.ww-swatch-band { background: var(--status-good); opacity: 0.35; }
.ww-swatch-trend { background: repeating-linear-gradient(90deg, var(--muted) 0 5px, transparent 5px 9px); height: 3px; border-radius: 0; }

/* ---------- tooltip ---------- */

.ww-tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 6px 22px rgba(0,0,0,.16); z-index: 20; white-space: nowrap;
}
.ww-tip.is-on { opacity: 1; }
.ww-tip-date { color: var(--muted); font-size: 12px; }
.ww-tip-value { font-weight: 650; font-size: 15px; }
.ww-tip-extra { color: var(--ink-2); font-size: 12.5px; }
.ww-crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.ww-crosshair.is-on { opacity: .75; }
.ww-focus-dot { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; }
.ww-focus-dot.is-on { opacity: 1; }

/* ---------- tables ---------- */

.ww-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table.ww-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ww-table th, .ww-table td { padding: 9px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--grid); }
.ww-table th:first-child, .ww-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
.ww-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); border-bottom: 1px solid var(--axis);
}
.ww-table thead th[data-sort] { cursor: pointer; user-select: none; }
.ww-table thead th[data-sort]:hover { color: var(--ink); }
.ww-table thead th[aria-sort] { color: var(--ink); }

/* Which column is sorted, and which way, has to be obvious — an aria attribute alone
   tells a screen reader and nobody else. */
.ww-table thead th[data-sort]::after {
  content: "\2195";                 /* up-down arrow: this column can be sorted */
  margin-left: 6px; font-size: 11px; opacity: 0.30;
}
.ww-table thead th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
.ww-table thead th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }
.ww-table thead th[aria-sort] {
  background: var(--band); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--series-1);
}

/* ---------- filtering a table ---------- */

.ww-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.ww-filter-field { display: grid; gap: 4px; }
.ww-filter-field span {
  font-size: 11.5px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.ww-filter-field input {
  font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--plane); color: var(--ink);
}
.ww-filter-field input[type=search] { min-width: 220px; }
.ww-filter-count { font-size: 13px; color: var(--muted); margin-left: auto; }
.ww-row-hidden { display: none; }
.ww-table tbody tr:hover td { background: var(--gap); }
.ww-table tbody tr:last-child td { border-bottom: 0; }
.ww-table .ww-year-row td { background: var(--band); font-weight: 620; }
.ww-num-loss { color: var(--success-text); }
.ww-num-gain { color: var(--status-critical); }
.ww-muted { color: var(--muted); }

/* ---------- misc ---------- */

.ww-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.ww-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ww-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 10px; }
.ww-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.ww-panel-name { font-size: 14px; font-weight: 620; }
.ww-panel-value { font-size: 15px; font-weight: 650; }
.ww-panel-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.ww-note { font-size: 13.5px; color: var(--muted); margin-top: 10px; max-width: 84ch; }
.ww-footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.ww-footer a { color: var(--ink-2); }

.ww-appearance {
  display: flex; gap: 2px; margin: 8px 0 22px; padding: 3px;
  background: var(--gap); border: 1px solid var(--border); border-radius: 9px;
}
.ww-appearance button {
  flex: 1; font: inherit; font-size: 12.5px; font-weight: 550; padding: 6px 4px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.ww-appearance button:hover { color: var(--ink); }
.ww-appearance button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
.ww-appearance-label {
  margin: 18px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.ww-appearance + .ww-appearance-note {
  margin: 7px 0 0; font-size: 12px; color: var(--muted);
}

.ww-theme-toggle {
  margin-top: 20px; width: 100%; padding: 7px 10px; font: inherit; font-size: 13.5px;
  background: transparent; color: var(--ink-2); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer;
}
.ww-theme-toggle:hover { background: var(--gap); color: var(--ink); }

.ww-version { margin: 14px 0 0; text-align: center; font-size: 12px;
  color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.ww-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ww-pill { font-size: 13px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); background: var(--surface); }

.ww-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; font-size: 14.5px; }
.ww-dl dt { color: var(--muted); }
.ww-dl dd { margin: 0; }

@media print {
  .ww-nav, .ww-appearance {
  display: flex; gap: 2px; margin: 8px 0 22px; padding: 3px;
  background: var(--gap); border: 1px solid var(--border); border-radius: 9px;
}
.ww-appearance button {
  flex: 1; font: inherit; font-size: 12.5px; font-weight: 550; padding: 6px 4px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.ww-appearance button:hover { color: var(--ink); }
.ww-appearance button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
.ww-appearance-label {
  margin: 18px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.ww-appearance + .ww-appearance-note {
  margin: 7px 0 0; font-size: 12px; color: var(--muted);
}

.ww-theme-toggle { display: none; }
  .ww-main { max-width: none; padding: 0; }
  .ww-card, .ww-tile, .ww-panel, .ww-table-wrap { break-inside: avoid; }
  body { background: #fff; }
}

/* ---------- unmeasured stretches in the monthly table ---------- */

/* A gap is a fact about the data, so it gets a row rather than being left as silence
   between two months. Without this a 148-day gap hid a 16 kg rise entirely. */
.ww-row-gap td {
  background: var(--gap);
  font-size: 13.5px;
  color: var(--ink-2);
  padding-top: 9px;
  padding-bottom: 9px;
}
.ww-gap-mark {
  display: inline-block; width: 26px; height: 0; vertical-align: middle;
  margin-right: 9px; border-top: 2px dashed var(--axis);
}
.ww-gap-detail { color: var(--muted); margin-left: 8px; }

/* ---------- fixed-length windows ---------- */

.ww-window-grid {
  display: grid; gap: 18px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.ww-window {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 18px 20px 20px;
}
.ww-window.is-thin { border-style: dashed; }
.ww-window-head h2 { font-size: 16px; font-weight: 640; margin: 0; letter-spacing: -0.01em; }
.ww-window-span { font-size: 12.5px; color: var(--muted); margin: 3px 0 12px; }
.ww-window-value { font-size: 30px; font-weight: 680; letter-spacing: -0.02em; margin: 0; }
.ww-window-sub { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 14px; }
.ww-window-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
  margin: 14px 0 0; font-size: 13.5px;
}
.ww-window-facts dt { color: var(--muted); }
.ww-window-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.ww-window-warn { border-left: 3px solid var(--status-warning); padding-left: 11px; }
.ww-empty-small { padding: 22px 12px; font-size: 14px; }
.ww-table tr.is-current td { background: var(--band); }
.ww-mini-note { font-size: 10.5px; opacity: 0.7; }

/* ---------- expandable metric panels ---------- */

/* <details> rather than a modal: works with JavaScript off, keyboard-navigable for
   free, and survives the report being opened straight off a disk. */
details.ww-panel { padding: 0; }
details.ww-panel > summary.ww-panel-summary {
  padding: 15px 16px 12px; cursor: pointer; list-style: none; display: block;
  border-radius: 11px; position: relative;
}
details.ww-panel > summary.ww-panel-summary::-webkit-details-marker { display: none; }
details.ww-panel > summary.ww-panel-summary:hover { background: var(--gap); }
details.ww-panel > summary.ww-panel-summary:focus-visible {
  outline: 2px solid var(--series-1); outline-offset: 2px;
}
details.ww-panel[open] { grid-column: 1 / -1; }
details.ww-panel[open] > summary.ww-panel-summary {
  border-bottom: 1px solid var(--border); border-radius: 11px 11px 0 0;
}

.ww-panel-more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--series-1);
}
.ww-panel-more-close { display: none; }
details.ww-panel[open] .ww-panel-more-open { display: none; }
details.ww-panel[open] .ww-panel-more-close { display: inline; }
.ww-panel-chevron { transition: transform 120ms ease; }
details.ww-panel[open] .ww-panel-chevron { transform: rotate(180deg); }

.ww-panel-detail { padding: 18px 20px 22px; }
.ww-panel-what { font-size: 15px; color: var(--ink); margin: 0 0 16px; max-width: 76ch; }
.ww-panel-subhead {
  font-size: 13px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted); margin: 24px 0 10px;
}
.ww-panel-table { border-collapse: collapse; margin: 18px 0 0; font-size: 14px; }
.ww-panel-table th, .ww-panel-table td { padding: 6px 18px 6px 0; text-align: left; }
.ww-panel-table th { font-weight: 500; color: var(--muted); white-space: nowrap; }
.ww-panel-table td { font-variant-numeric: tabular-nums; }
.ww-panel-note { border-left: 3px solid var(--border); padding-left: 12px; margin-top: 20px; }
.ww-panel-hint { margin-bottom: 16px; }

/* Open panels go full width, so the grid must not stretch the closed ones to match. */
.ww-panel-grid { align-items: start; }

/* The summary's thumbnail is drawn on a narrow viewBox for a one-column card. Stretched
   across a full-width open panel its axis labels balloon, so hide it once the detail's
   properly-scaled chart is on screen. */
details.ww-panel[open] > summary .ww-chart.ww-mini { display: none; }


/* ---------- version chip ---------- */

/* Top-left, beside the logo, on every screen. A screenshot with a version on it can be
   placed in time; one without cannot. Clicking reaches the changelog. */
.ww-vchip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--gap);
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
  text-decoration: none; white-space: nowrap; vertical-align: middle;
}
.ww-vchip:hover {
  background: var(--band); color: var(--ink);
  border-color: var(--series-1); text-decoration: none;
}
.ww-vchip:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }

.ww-brand-sub .ww-vchip { margin-right: 7px; }
/* Sidebar anchors are display:block for the nav rows; the chip is not one of them. */
.ww-nav a.ww-vchip { display: inline-block; width: auto; padding: 2px 8px; }

/* Keeps the last thing in the sidebar clear of the fixed bug button, whether or not the
   column is long enough to scroll. */
.ww-nav-safe { height: 76px; }

/* ---------- changelog ---------- */

.ww-release {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 20px 22px; margin: 0 0 16px;
}
.ww-release.is-current { border-color: var(--series-1); border-width: 2px; }
.ww-release-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.ww-release-head h2 { font-size: 20px; font-weight: 680; letter-spacing: -0.02em; margin: 0; }
.ww-release-date { font-size: 13px; color: var(--muted); }
.ww-release-section {
  font-size: 12px; font-weight: 680; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.ww-release ul { margin: 0; padding-left: 20px; }
.ww-release li { margin-bottom: 7px; font-size: 14.5px; max-width: 84ch; }
.ww-release-section.is-security { color: var(--status-serious); }
.ww-release-section.is-fixed { color: var(--success-text); }

/* ---------- the version chip after an automatic update ---------- */

.ww-vchip.is-fresh {
  animation: ww-chip-flash 1.1s ease-in-out 4;
  border-color: var(--series-1);
}
@keyframes ww-chip-flash {
  0%, 100% { background: var(--gap); color: var(--ink-2); }
  50% { background: var(--series-1); color: #fff; border-color: var(--series-1); }
}

.ww-update-banner {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  max-width: min(360px, calc(100vw - 36px));
  padding: 13px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--series-1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
  font-size: 13.5px; color: var(--ink);
  animation: ww-banner-in 260ms ease-out;
}
.ww-update-banner span { color: var(--muted); }
.ww-update-banner a { color: var(--series-1); font-weight: 620; }
.ww-update-banner.is-going { opacity: 0; transition: opacity 900ms ease; }
@keyframes ww-banner-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* A flashing chip is the point, but not at the cost of making someone unwell. */
@media (prefers-reduced-motion: reduce) {
  .ww-vchip.is-fresh { animation: none; background: var(--band); color: var(--ink); }
  .ww-update-banner { animation: none; }
}

/* ---------- the hero chart ---------- */

.ww-hero-line { stroke: var(--series-1); }
.ww-hero-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2.5; }
.ww-hero-tag {
  font-size: 12px; font-weight: 600; fill: var(--ink-2);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round;
}
.ww-hero-tag.is-weight { font-size: 13.5px; font-weight: 700; fill: var(--ink); }
.ww-span-label {
  font-size: 11px; font-weight: 600; fill: var(--ink-2);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
}

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

.ww-hero-head { margin: 0 0 22px; }
.ww-hero-eyebrow {
  font-size: 12px; font-weight: 680; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.ww-hero-since {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px;
  font-size: 13px; color: var(--ink-2);
}
.ww-hero-since select {
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.ww-hero-since.ww-regen { margin-bottom: 12px; }
.ww-hero-since.ww-regen button { width: auto; font-size: 13px; padding: 6px 11px; }
.ww-hero-big {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px); font-weight: 720; letter-spacing: -0.035em;
  line-height: 1.04; margin: 0 0 10px; color: var(--ink);
}
.ww-hero-head.is-good .ww-hero-big { color: var(--success-text); }
.ww-hero-head.is-concerning .ww-hero-big { color: var(--status-critical); }
.ww-hero-sub { font-size: 16px; color: var(--ink-2); margin: 0; max-width: 70ch; }

/* Wins: the biggest improvements, as things you can click into. */
.ww-wins {
  display: grid; gap: 12px; margin: 0 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.ww-win {
  display: block; text-decoration: none; padding: 15px 16px 14px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  border-top: 3px solid var(--status-good);
}
.ww-win:hover { background: var(--gap); text-decoration: none; }
.ww-win-label {
  display: block; font-size: 12px; font-weight: 640; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.ww-win-value {
  display: block; font-size: 27px; font-weight: 690; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.05;
}
.ww-win-unit { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.ww-win-delta {
  display: block; margin-top: 6px; font-size: 14.5px; font-weight: 640;
  color: var(--success-text);
}
.ww-win-pct { font-weight: 500; color: var(--muted); margin-left: 4px; }
.ww-win-from { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ww-hero-losses { margin-bottom: 26px; }

/* Overlay picker */
.ww-overlays {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px;
}
.ww-overlays-label {
  font-size: 12px; font-weight: 680; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
.ww-overlay-chip {
  display: inline-flex; align-items: center; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 550; color: var(--ink-2);
}
.ww-overlay-chip:hover { border-color: var(--series-1); color: var(--ink); }
.ww-overlay-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Weight is the subject of the page, not one option among twelve. */
.ww-overlay-chip.is-subject { font-weight: 640; }
.ww-overlay-chip.is-subject.is-on { border-color: var(--series-1); border-width: 2px; }
/* A marked stretch carries the colour it is drawn in, so the chip and the shading on
   the chart are recognisably the same thing. */
.ww-overlay-chip.is-span.is-on { background: var(--span-colour); border-color: var(--axis); }
.ww-overlay-chip.is-on {
  background: var(--band); border-color: var(--series-1); color: var(--ink); font-weight: 620;
}
.ww-overlay-chip input:focus-visible + span { outline: 2px solid var(--series-1); outline-offset: 3px; }
.ww-overlays-note { font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.ww-overlays-sep {
  width: 1px; height: 20px; background: var(--border); margin: 0 6px;
}
/* A display option, not a metric: dashed, to match what it draws. */
.ww-overlay-chip.is-option { border-style: dashed; }
.ww-overlay-chip.is-option.is-on { border-style: solid; }
.ww-bridge { stroke-linejoin: round; }

.ww-analysis p { font-size: 15.5px; line-height: 1.6; max-width: 78ch; margin: 0 0 12px; }

/* Compact strip for windows and quarters */
.ww-strip {
  display: grid; gap: 10px; margin-bottom: 24px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ww-strip-item {
  display: block; text-decoration: none; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
}
a.ww-strip-item:hover { background: var(--gap); text-decoration: none; }
.ww-strip-item.is-thin { border-style: dashed; }
.ww-strip-label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.ww-strip-value { display: block; font-size: 21px; font-weight: 680; letter-spacing: -0.015em; }
.ww-strip-note { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---------- the day picker ---------- */

.ww-cal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ww-cal-bar .ww-spacer { flex: 1 1 auto; }
.ww-calendar {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ww-cal-month h4 {
  font-size: 13.5px; font-weight: 650; margin: 0 0 8px; color: var(--ink-2);
}
.ww-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ww-cal-dow {
  font-size: 10.5px; font-weight: 640; color: var(--muted); text-align: center;
  padding-bottom: 3px;
}
.ww-cal-pad { aspect-ratio: 1; }
.ww-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  position: relative; font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid transparent; border-radius: 7px;
  background: var(--gap); color: var(--ink-2);
}
.ww-cal-day:hover { border-color: var(--series-1); color: var(--ink); }
.ww-cal-day.has-reading::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--series-1);
}
.ww-cal-day.is-marked { background: var(--mark, var(--band)); color: var(--ink); font-weight: 600; }
.ww-cal-day.is-picked {
  background: var(--series-1); color: #fff; font-weight: 700; border-color: var(--series-1);
}
.ww-cal-day.is-picked::after { background: #fff; }
.ww-cal-legend { margin-top: 16px; }
.ww-cal-key-weighed { background: var(--series-1); }
.ww-cal-key-marked { background: var(--band); border: 1px solid var(--border); }
.ww-cal-key-picked { background: var(--series-1); }
.ww-span-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 7px; vertical-align: -1px; border: 1px solid var(--border);
}


/* ---------- upload, from inside the report ---------- */

.ww-nav-app { margin: 22px 0 0; }
.ww-nav-app h3 {
  font-size: 11.5px; font-weight: 680; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 7px;
}
.ww-nav-app-link {
  display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none;
  font-size: 14px; color: var(--ink-2);
}
.ww-nav-app-link:hover { background: var(--gap); color: var(--ink); text-decoration: none; }

.ww-report-upload {
  border: 1px solid var(--border); border-left: 3px solid var(--series-1);
  border-radius: 12px; background: var(--surface);
  padding: 15px 18px; margin: 0 0 24px;
}
.ww-report-upload-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin-bottom: 11px; }
.ww-report-upload-head span { font-size: 13px; color: var(--muted); }
.ww-report-upload-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ww-report-upload-row input[type=file] { flex: 1 1 220px; min-width: 0; font-size: 14px; }

/* ---------- the custom graph ---------- */

.ww-periods {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 14px;
  background: var(--gap); border: 1px solid var(--border); border-radius: 10px;
  width: fit-content; max-width: 100%;
}
.ww-periods button {
  font: inherit; font-size: 13.5px; font-weight: 560; padding: 7px 14px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
.ww-periods button:hover { color: var(--ink); }
.ww-periods button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); font-weight: 660;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.ww-explore-host { min-height: 420px; }
.ww-explore-svg { width: 100%; height: 420px; }
.ww-explore-summary {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 14px;
  font-size: 14px; color: var(--ink-2);
}
.ww-explore-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ww-explore-summary .is-good { color: var(--success-text); }
.ww-explore-summary .is-bad { color: var(--status-critical); }


/* ---------- the activity log ---------- */

/* A failed operation should be findable by eye in a long list, without colour being the
   only thing saying so — the row also carries the word "failed". */
.ww-row-bad td { background: color-mix(in srgb, var(--status-critical) 8%, transparent); }
.ww-cell-detail {
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-2);
}
/* A group header row: which value the rows under it share, and how many there are. */
.ww-group-row td {
  background: var(--band); font-weight: 700; letter-spacing: -0.01em;
  border-top: 2px solid var(--border);
}
.ww-group-row .ww-group-tally { font-weight: 500; color: var(--ink-2); margin-left: 10px; }


/* ---------- regenerate, in the sidebar under the version ---------- */

.ww-regen { margin: 0 0 18px; }
.ww-regen button {
  font: inherit; font-size: 13px; font-weight: 600; width: 100%;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  text-align: left;
}
.ww-regen button:hover { background: var(--band); color: var(--ink); }
/* While it works: the rebuild is a round trip, and a button that looks idle invites a
   second press that queues a second rebuild. */
.ww-regen button:disabled { opacity: 0.55; cursor: progress; }


/* ---------- the review queue ---------- */

.ww-review-card { display: grid; gap: 0; }
.ww-review-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 0 0;
}
.ww-read-error { color: var(--status-critical); }


/* ---------- a review card: picture on the left, what was read on the right ---------- */

.ww-review-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 18px 20px 16px; margin-bottom: 18px;
}
.ww-review-head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.ww-review-body {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start;
}
/* Two weigh-ins off one comparison screen belong beside each other, not one under the
   other — reading them as a pair is the whole point of the photo showing both. */
.ww-review-reads {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
/* A phone screenshot is tall and narrow, and at any generous size it pushes the values
   off the side of the card — which is the whole reason they are shown here. Small
   enough to sit beside the numbers; click it for the full size. */
.ww-review-shot {
  display: block; width: 150px; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative;
}
.ww-review-shot img {
  width: 150px; max-height: 190px; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid var(--border); display: block;
}
.ww-review-shot::after {
  content: "click to enlarge";
  display: block; padding-top: 5px; font-size: 11.5px; color: var(--muted);
  text-align: center;
}
.ww-review-shot:hover::after { color: var(--ink-2); }
.ww-review-read { min-width: 0; }

/* The full-size view. Sized to the window rather than the image, so a 2048px-tall
   screenshot is readable without scrolling the page behind it. */
.ww-lightbox { border: 0; padding: 0; background: none; max-width: 96vw; max-height: 96vh; }
.ww-lightbox::backdrop { background: rgba(0,0,0,0.78); }
.ww-lightbox img {
  display: block; max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: 10px; background: var(--surface);
}
.ww-lightbox form { display: flex; justify-content: center; padding-top: 10px; }

/* One weigh-in. A comparison screen produces two of these side by side. */
.ww-read-block {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--plane); margin: 0; min-width: 0;
}
.ww-read-block.is-done { opacity: 0.62; }
.ww-read-when {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 10px;
}
.ww-read-weight { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

/* Every value read, dense enough to take in at a glance. */
.ww-read-values {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 7px 14px; margin: 0 0 10px;
}
.ww-read-values div { display: grid; gap: 1px; }
.ww-read-values dt {
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted);
}
.ww-read-values dd {
  margin: 0; font-size: 15.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.ww-read-notes { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); max-width: 80ch; }
.ww-review-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }

/* What the approve dialog is about to add. */
.ww-confirm-list { display: grid; gap: 8px; margin: 16px 0 4px; }
.ww-confirm-list div {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline;
}
.ww-confirm-list dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.ww-confirm-list dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); }


/* ---------- the constant header ----------
   The same bar on the dashboard as on every app page. It was appearing on some screens
   and not others, which made the app feel like two apps. */

.ww-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 9px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ww-topbar .ww-brandmark { margin: 0 6px 0 0; text-decoration: none; }
.ww-topbar .ww-wordmark { font-size: 16px; }
.ww-topbar-where { font-size: 13.5px; color: var(--muted); }
.ww-topbar .ww-spacer { flex: 1 1 auto; }
.ww-topbar a.ww-tab {
  padding: 6px 11px; border-radius: 8px; text-decoration: none;
  font-size: 14px; font-weight: 550; color: var(--ink-2);
}
.ww-topbar a.ww-tab:hover { background: var(--gap); color: var(--ink); }
.ww-topbar .ww-regen { margin: 0; }
.ww-topbar .ww-regen button { width: auto; font-size: 13px; padding: 6px 11px; }

/* What has been spent this calendar month — the number that lines up with a bill. */
.ww-spend {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border); background: var(--gap);
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ww-spend:hover { border-color: var(--series-1); color: var(--ink); }
.ww-spend strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.ww-spend-when { color: var(--muted); }


/* ---------- the app body under the constant header ---------- */

/* The menu appears only inside somebody's data. Home has nothing to act on until you
   have picked whose, so it gets the full width and no menu. */
.ww-app.has-menu {
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px;
}
.ww-app-main { min-width: 0; grid-column: 2; }
.ww-app:not(.has-menu) .ww-app-main { grid-column: auto; }

.ww-sidemenu {
  position: absolute; width: 208px; padding: 28px 0 0 20px;
}
.ww-sidemenu .ww-nav-group { margin-bottom: 22px; }
.ww-sidemenu h3 {
  font-size: 11.5px; font-weight: 640; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 7px;
}
.ww-sidemenu a {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 6px 10px; border-radius: 8px; text-decoration: none;
  font-size: 14px; color: var(--ink-2);
}
.ww-sidemenu a:hover { background: var(--gap); color: var(--ink); }
.ww-sidemenu a[aria-current="page"] { background: var(--band); color: var(--ink); font-weight: 620; }
.ww-sidemenu .ww-nav-note { font-size: 12px; color: var(--muted); }


/* Header pieces that used to be styled by an inline block on the app pages only. The
   dashboard shares this header now, so they belong here with the rest of it — a class
   the markup names and the shared stylesheet does not define is how a header ends up
   present, correct and invisible. */
.ww-count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--status-serious); color: #fff;
  font-size: 11.5px; font-weight: 700; text-align: center;
}
.ww-signout button { font: inherit; border: 0; background: transparent; cursor: pointer; }


/* A real bug this caught: [hidden] is a user-agent rule, so any class of ours that sets
   display beats it. The spend chip ships hidden and showed anyway — empty — on a
   dashboard opened off a disk. */
[hidden] { display: none !important; }


/* The offer to update, when reloading outright would cost somebody their typing. It
   stays until answered — a banner that vanishes on its own is one you will miss. */
.ww-update-offer {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.ww-update-offer .ww-btn { font-size: 13.5px; padding: 7px 14px; }


/* ---------- pasting a screenshot in ---------- */

.ww-paste {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 9px; font-size: 13px;
}
.ww-paste-said { font-size: 13px; font-weight: 600; color: var(--status-good); }
.ww-paste-said.is-bad { color: var(--status-critical); font-weight: 500; }
.ww-paste-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ww-paste-preview img {
  width: 108px; max-height: 150px; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid var(--border);
}


/* The drawer button belongs to the phone layout; the mobile stylesheet turns it on. */
.ww-burger { display: none; }


/* Off-screen, not hidden: a paste needs a focused target and display:none cannot hold
   focus. Never typed into — it exists so Ctrl+V has somewhere to land. */
.ww-paste-catcher {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}


/* The way back to whoever's data you are in the middle of. First in the menu on every
   screen, because leaving via the main home screen and coming in again is not a way
   back — it is a detour. */
.ww-nav-dashboard { font-weight: 640; }
.ww-nav-home { padding-bottom: 12px; border-bottom: 1px solid var(--border); }


/* ---------- how far back the Overview chart goes ---------- */

.ww-range {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; margin: 0 0 14px;
  background: var(--gap); border: 1px solid var(--border); border-radius: 9px;
}
.ww-range button {
  font: inherit; font-size: 13px; font-weight: 560; padding: 6px 13px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.ww-range button:hover { color: var(--ink); }
.ww-range button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}


/* ---------- how the navigation reads ----------
   Headings carry the weight now that the icons are gone, and the items sit indented
   under them so the grouping is visible without them. */

.ww-nav .ww-nav-group h3,
.ww-sidemenu h3 {
  font-size: 12px; font-weight: 780; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 9px;                      /* the gap Pete asked for under the heading */
}
.ww-nav .ww-nav-group,
.ww-sidemenu .ww-nav-group { margin-bottom: 22px; }

/* Indented under their heading. */
.ww-nav .ww-nav-group a,
.ww-sidemenu a { margin-left: 10px; }
.ww-nav .ww-nav-group h3,
.ww-sidemenu h3 { margin-left: 0; }

/* Navigation out of here sits at the top, separated from the sections below it. */
.ww-nav-home { padding-bottom: 14px; border-bottom: 1px solid var(--border); }


/* The header is a frame, so it has to be one row and stay one row. It was wrapping to
   three on the dashboard — 140px of chrome before any data — because every item was
   allowed to claim its full width. Nothing wraps; the label that can afford to lose
   characters is the one that gives way. */
.ww-topbar { flex-wrap: nowrap; }
.ww-topbar-where {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The regenerate form is styled as a full-width sidebar block elsewhere; in a nowrap
   row that made it claim the whole bar and wrap its own label into a 120px-tall
   button. In the header it is exactly as wide as its text. */
.ww-topbar .ww-regen,
.ww-topbar .ww-regen button { width: auto; white-space: nowrap; }
.ww-topbar .ww-spacer { flex: 1 1 auto; }
.ww-topbar .ww-spend { white-space: nowrap; }


/* A frame has a fixed height, or it is not a frame. Left to size itself the bar went to
   140px on the dashboard — the regenerate form is styled as a full-width sidebar block
   elsewhere, and in a nowrap row it shrank to a sliver and wrapped its own label down
   the page. Pinning the height means no child can ever stretch it again, whatever gets
   added to it later. */
.ww-topbar { height: 52px; box-sizing: border-box; align-items: center; }
.ww-topbar > * { max-height: 38px; }
.ww-topbar .ww-regen { width: auto; flex: 0 0 auto; }
.ww-topbar .ww-regen button {
  width: auto; white-space: nowrap; height: 34px; padding: 0 12px; line-height: 32px;
}


/* Where you are. It was a faint background on the app menu and nothing at all on some
   pages — with the two menus now the same shape, the marker has to be the same too and
   has to be obvious. */
.ww-nav .ww-nav-group a[aria-current="page"],
.ww-sidemenu a[aria-current="page"] {
  background: var(--band); color: var(--ink); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--series-1);
  border-radius: 0 8px 8px 0;
}


/* ---------- a tighter sidebar ----------
   Smaller switches, less air between people, smaller gaps between groups: the point of
   the column is the links, and the more of them on screen at once the better. */

.ww-nav .ww-units, .ww-sidemenu .ww-units,
.ww-nav .ww-appearance, .ww-sidemenu .ww-appearance {
  display: inline-flex; gap: 2px; padding: 2px; margin: 0 4px 8px 0;
  background: var(--gap); border: 1px solid var(--border); border-radius: 8px;
}
.ww-nav .ww-units button, .ww-sidemenu .ww-units button,
.ww-nav .ww-appearance button, .ww-sidemenu .ww-appearance button {
  font: inherit; font-size: 11px; font-weight: 600; padding: 3px 8px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.ww-nav .ww-units button[aria-pressed="true"],
.ww-sidemenu .ww-units button[aria-pressed="true"],
.ww-nav .ww-appearance button[aria-pressed="true"],
.ww-sidemenu .ww-appearance button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

.ww-nav .ww-people, .ww-sidemenu .ww-people {
  display: grid; gap: 1px; margin: 0 0 10px;
}
.ww-nav .ww-people a, .ww-sidemenu .ww-people a {
  padding: 4px 10px; font-size: 13.5px;
}

.ww-nav .ww-nav-group, .ww-sidemenu .ww-nav-group { margin-bottom: 12px; }
.ww-nav .ww-nav-group h3, .ww-sidemenu h3 { margin-bottom: 5px; }
.ww-nav .ww-nav-group a, .ww-sidemenu a { padding: 4px 10px; font-size: 13.5px; }
.ww-nav-home { padding-bottom: 8px; }

/* When the dashboard was generated, beside whose it is. Small and grey: it is context,
   not content. */
.ww-topbar-when { font-size: 11.5px; color: var(--muted); margin-left: 8px; }


/* Desktop: the fold does not exist. The chips are one glance there. */
.ww-customise-toggle { display: none; }


/* ---------- hovering a reading on the Overview graph ---------- */

.ww-hover-guide { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.55; }
.ww-hover-dot { fill: var(--surface); stroke: var(--series-2); stroke-width: 2.4; }
.ww-hover-dot.is-first { stroke: var(--series-1); }

.ww-hover-tip {
  position: absolute; z-index: 20; pointer-events: none;
  min-width: 150px; max-width: 250px; padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.20);
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
.ww-hover-tip strong {
  display: block; font-size: 12.5px; color: var(--ink); margin-bottom: 4px;
}
.ww-hover-tip span { display: block; font-variant-numeric: tabular-nums; }

/* The highest and lowest of the main line, labelled with their real values. */
.ww-peak-dot { fill: var(--surface); stroke: var(--series-1); stroke-width: 2; }
.ww-peak-label {
  font-size: 11.5px; font-weight: 700; fill: var(--ink-2);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
}


/* What an update would change, listed before anyone presses anything. */
.ww-diff-list {
  margin: 0 0 10px; padding: 8px 12px; list-style: none;
  border-left: 3px solid var(--status-warning); background: var(--band);
  border-radius: 0 8px 8px 0; font-size: 13px; color: var(--ink-2);
}
.ww-diff-list li { font-variant-numeric: tabular-nums; }
.ww-btn:disabled { opacity: 0.55; cursor: not-allowed; }


/* ---------- "Uploading…" — the box that appears the moment Upload is pressed ---------- */

.ww-busy {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: rgba(0,0,0,0.38);
}
.ww-busy-card {
  width: min(380px, 100%); padding: 22px 24px 20px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.30); color: var(--ink);
}
.ww-busy-card p { margin: 0; }
.ww-busy-spinner {
  width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--series-1);
  animation: ww-busy-spin 0.9s linear infinite;
}
.ww-busy-title { font-size: 16px; font-weight: 700; }
.ww-busy-file {
  margin-top: 6px !important; font-size: 13.5px; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ww-busy-meta {
  margin-top: 4px !important; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ww-busy-bar {
  height: 6px; margin: 14px 0 12px; border-radius: 3px; overflow: hidden;
  background: var(--gap);
}
.ww-busy-bar span {
  display: block; width: 40%; height: 100%; border-radius: 3px;
  background: var(--series-1); animation: ww-busy-slide 1.4s ease-in-out infinite;
}
.ww-busy-note { font-size: 12.5px; color: var(--muted); }
@keyframes ww-busy-spin { to { transform: rotate(360deg); } }
@keyframes ww-busy-slide {
  0% { transform: translateX(-100%); } 100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .ww-busy-spinner, .ww-busy-bar span { animation: none; }
  .ww-busy-bar span { width: 100%; opacity: 0.5; }
}

/* ---------- highest & lowest reference lines ---------- */

.ww-extreme-line {
  stroke: var(--status-warning); stroke-width: 1.4; stroke-dasharray: 7 5; opacity: 0.85;
}
.ww-extreme-label {
  font-size: 11.5px; font-weight: 700; fill: var(--ink-2);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
}
.ww-extremes-window {
  font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}