/* =======================================================================
   Symptom Tracker - clinical stylesheet
   Zero-build, classic CSS. Runs from file://.

   Design language: a serious medical report / data dashboard.
   - border-radius: 0 EVERYWHERE. The only exceptions are fully-circular
     interactive controls in the Chat view (avatar, mic button, slider knob).
   - 1px hairline borders; thin chart axes; flat surfaces, no drop shadows.
   - Calm clinical palette. Green = improvement, AMBER (#d98a3d) = regression
     (never red - we never alarm or shame a sicker patient), slate = neutral.
   - Strong alignment, even spacing, tidy grids, visual symmetry.

   The Chat view (landing, transcript, sliders), the top bar, the left rail
   and the toast all keep the exact class names app.js uses; they are merely
   restyled sharp/professional here. The Reports view adds the .report-scoped
   clinical system further down.
   ======================================================================= */

:root{
  /* surfaces & ink */
  --bg:#eceff2;
  --surface:#ffffff;
  --surface-2:#f1f5f7;
  --surface-3:#e7eef2;
  --ink:#15212b;
  --ink-2:#46555f;
  --ink-3:#73838d;

  /* brand / interactive accent (kept calm + clinical) */
  --accent:#1f7a6e;
  --accent-2:#176257;
  --accent-soft:#e7f1ef;

  /* semantic - green good, AMBER regression (never red), slate neutral */
  --good:#2e9e6b;
  --good-ink:#1d7a52;
  --good-bg:#e6f4ec;
  --warn:#d98a3d;
  --warn-ink:#a85f1e;
  --warn-bg:#f8ecdf;
  --neutral:#73838d;
  --neutral-bg:#eef2f5;

  /* lines */
  --line:#d4dde3;
  --line-strong:#b7c4cc;

  /* charts (global so app.js inline `var(--chart-line)` resolves everywhere) */
  --chart-line:#1f7a6e;
  --grid:#edf2f5;
  --axis:#c2ced5;

  /* type */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
}

/* -----------------------------------------------------------------------
   Global reset to the clinical look: square corners + flat surfaces app-wide.
   SVG internals are exempt (chart dots use the `r` attribute, not radius).
   Circular Chat controls re-opt-in to a radius explicitly below.
   ----------------------------------------------------------------------- */
*{box-sizing:border-box;}
*:not(svg):not(svg *){border-radius:0;box-shadow:none;}

html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1{font-size:23px;line-height:1.2;margin:0 0 4px;letter-spacing:-.01em;color:var(--ink);font-weight:700;}
h2{font-size:18px;margin:0 0 10px;letter-spacing:-.005em;color:var(--ink);font-weight:700;}
h3{font-size:15px;margin:0 0 8px;color:var(--ink);font-weight:700;}
h4{font-size:12px;margin:18px 0 10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;}
p{margin:0 0 12px;}
.muted{color:var(--ink-2);}
.small{font-size:13.5px;}
.hint{color:var(--ink-3);font-size:13px;}

.app{display:flex;height:100vh;overflow:hidden;background:var(--bg);}

/* ---------------------------------------------------------------- sidebar */
.sidebar{
  width:96px;flex:0 0 96px;background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;
  padding:16px 8px;gap:6px;
}
.brand{
  width:42px;height:42px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:20px;margin-bottom:12px;
}
.nav-btn{
  width:80px;min-height:74px;border:1px solid transparent;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:var(--ink-2);cursor:pointer;transition:background .12s,color .12s,border-color .12s;
  padding:10px 6px;font-family:inherit;
}
.nav-btn:hover{background:var(--surface-2);color:var(--ink);}
.nav-btn.is-active{background:var(--accent-soft);color:var(--accent-2);border-color:var(--line);}
.nav-btn__icon{width:24px;height:24px;display:block;}
.nav-btn__icon svg{width:24px;height:24px;}
.nav-btn__label{font-size:12.5px;font-weight:600;letter-spacing:.01em;}

/* ------------------------------------------------------------------- main */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;border-bottom:1px solid var(--line);background:var(--surface);
}
.topbar__hi{font-weight:700;font-size:16px;color:var(--ink);}
.topbar__date{color:var(--ink-3);font-size:13px;}
.demo-pill{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--accent-2);
  background:var(--accent-soft);border:1px solid var(--line);padding:5px 11px;
}
.view{flex:1;overflow:auto;padding:28px;}

/* --------------------------------------------------------------- generic */
.section-head{margin-bottom:22px;}
.link-btn{
  border:0;background:transparent;color:var(--accent-2);font-weight:600;
  cursor:pointer;font-size:14px;padding:6px 0;margin-bottom:8px;font-family:inherit;
}
.link-btn:hover{color:var(--accent);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-weight:600;font-size:13.5px;padding:9px 14px;cursor:pointer;font-family:inherit;
  transition:border-color .12s,background .12s;
}
.btn svg{width:16px;height:16px;}
.btn:hover{border-color:var(--line-strong);background:var(--surface-2);}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2);}

/* ---------------------------------------------------- chat landing cards */
.cards{display:flex;flex-direction:column;gap:12px;max-width:620px;}
.big-card{
  display:flex;align-items:center;gap:16px;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);padding:18px 20px;cursor:pointer;
  font-family:inherit;transition:border-color .12s,background .12s;
}
.big-card:hover{border-color:var(--line-strong);background:var(--surface-2);}
.big-card__icon{
  flex:0 0 auto;width:48px;height:48px;background:var(--surface-3);color:var(--accent-2);
  display:grid;place-items:center;border:1px solid var(--line);
}
.big-card__icon svg{width:24px;height:24px;}
.big-card--primary .big-card__icon{background:var(--accent);color:#fff;border-color:var(--accent);}
.big-card__body{flex:1;display:flex;flex-direction:column;gap:3px;}
.big-card__title{font-weight:700;font-size:16.5px;color:var(--ink);}
.big-card__sub{color:var(--ink-2);font-size:13.5px;line-height:1.45;}
.big-card__chev{color:var(--ink-3);}
.big-card__chev svg{width:20px;height:20px;}

/* ------------------------------------------------------- chat transcript */
.chat{max-width:720px;margin:0 auto;display:flex;flex-direction:column;height:100%;}
.chat__who{display:flex;align-items:center;gap:12px;padding:6px 2px 14px;border-bottom:1px solid var(--line);}
.chat__avatar{
  width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:17px;
}
.chat__name{font-weight:700;color:var(--ink);}
.chat__status{color:var(--ink-3);font-size:13px;}
.chat__log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:18px 2px;}
.bubble{max-width:78%;padding:11px 15px;font-size:15px;line-height:1.5;border:1px solid transparent;}
.bubble--jane{align-self:flex-start;background:var(--surface);border-color:var(--line);color:var(--ink);}
.bubble--you{align-self:flex-end;background:var(--accent);color:#fff;border-color:var(--accent);}
.chat__compose{display:flex;gap:10px;align-items:center;padding:14px 0 4px;border-top:1px solid var(--line);}
.mic-btn{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--accent-2);cursor:pointer;display:grid;place-items:center;
  transition:border-color .12s,background .12s;
}
.mic-btn:hover{border-color:var(--line-strong);background:var(--surface-2);}
.mic-btn svg{width:21px;height:21px;}
#msg{flex:1;border:1px solid var(--line);padding:12px 16px;font-size:15px;font-family:inherit;outline:none;background:var(--surface);color:var(--ink);}
#msg:focus{border-color:var(--accent);}
.send-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:600;padding:12px 20px;cursor:pointer;font-size:14px;font-family:inherit;}
.send-btn:hover{background:var(--accent-2);border-color:var(--accent-2);}

/* chat header + live-AI affordances */
.chat__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);}
.chat__head .chat__who{border-bottom:0;padding-bottom:14px;}
.ai-chip{
  flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 12px;cursor:pointer;margin-bottom:14px;
  transition:border-color .12s,background .12s,color .12s;
}
.ai-chip:hover{border-color:var(--line-strong);background:var(--surface-2);}
.ai-chip.is-on{color:#15803d;border-color:#15803d44;background:#15803d12;}
.key-panel{border:1px solid var(--line);background:var(--surface-2);padding:14px 16px;margin-top:12px;}
.key-panel p{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--ink-2);}
.key-panel__row{display:flex;gap:8px;align-items:center;}
.key-panel__row input{flex:1;border:1px solid var(--line);padding:9px 12px;font-size:13px;font-family:inherit;outline:none;background:var(--surface);color:var(--ink);}
.key-panel__row input:focus{border-color:var(--accent);}
.bubble--typing{display:inline-flex;gap:5px;align-items:center;}
.bubble--typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);display:inline-block;animation:blink 1.2s infinite both;}
.bubble--typing span:nth-child(2){animation-delay:.2s;}
.bubble--typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
.mic-btn.is-live{background:var(--accent);color:#fff;border-color:var(--accent);animation:micpulse 1.1s infinite;}
@keyframes micpulse{0%{box-shadow:0 0 0 0 var(--accent-soft);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}

/* --------------------------------------------------------- manual sliders */
.sliders{display:flex;flex-direction:column;gap:8px;max-width:680px;}
.slider-row{
  display:grid;grid-template-columns:200px 1fr 54px;align-items:center;gap:18px;
  background:var(--surface);border:1px solid var(--line);padding:13px 18px;
}
.slider-row--quick{grid-template-columns:240px 1fr 54px;max-width:680px;}
.slider-row__label{font-weight:600;font-size:15px;color:var(--ink);}
.slider-row__val{font-family:var(--mono);font-weight:700;font-size:20px;text-align:right;color:var(--accent-2);font-variant-numeric:tabular-nums;}
.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:linear-gradient(to right,var(--accent) var(--pct,50%),var(--surface-3) var(--pct,50%));
  outline:none;cursor:pointer;border:1px solid var(--line);
}
/* circular thumbs are the only rounded items here - they are interactive knobs */
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer;}
.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer;}
.slider::-moz-range-track{height:6px;background:var(--surface-3);}
.slider::-moz-range-progress{height:6px;background:var(--accent);}
.quick-toggle{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-weight:600;color:var(--ink-2);cursor:pointer;}
.quick-toggle input{width:17px;height:17px;accent-color:var(--accent);}
.manual__actions{margin-top:20px;}

/* =======================================================================
   CLINICAL REPORT - scoped to .report.
   A serious medical-report surface: hairlines, tabular mono numbers,
   uppercase tracked labels, tidy even grids, controlled chart sizing.
   ======================================================================= */
.report{
  --r-ink:#15212b; --r-ink-2:#46555f; --r-ink-3:#73838d;
  --r-line:#d4dde3; --r-line-strong:#b7c4cc;
  --r-surface:#ffffff; --r-surface-2:#f3f7f9; --r-surface-3:#e9f0f3;
  --r-good:#2e9e6b; --r-good-ink:#1d7a52; --r-good-bg:#e6f4ec;
  --r-warn:#d98a3d; --r-warn-ink:#a85f1e; --r-warn-bg:#f8ecdf;
  --r-neutral:#73838d; --r-neutral-bg:#eef2f5;
  --r-accent:#1f7a6e; --r-grid:#edf2f5; --r-axis:#c2ced5;
  max-width:1320px;margin:0 auto;color:var(--r-ink-2);
}
/* overview + key patterns side by side, full width */
.report .cols2{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start;margin-bottom:18px;}
.report .cols2 .overview,.report .cols2 .card{margin-bottom:0;height:100%;}
.report .card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.report .card__head h2{margin:0;}
.report .card__head .btn{flex:0 0 auto;}
/* belt-and-braces: flat + square inside the report too (SVG internals exempt) */
.report, .report *:not(svg):not(svg *){border-radius:0;box-shadow:none;}

/* typography ---------------------------------------------------------- */
.report h1{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--r-ink);margin:0 0 4px;}
.report h2{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--r-ink);margin:0 0 4px;}
.report h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--r-ink-3);margin:22px 0 10px;}
.report p{font-size:14px;color:var(--r-ink-2);line-height:1.55;}
.report strong{color:var(--r-ink);font-weight:700;}
.report .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--r-ink);}
.report .muted{color:var(--r-ink-3);}
.report .hint{color:var(--r-ink-3);font-size:12.5px;}

/* header bar ---------------------------------------------------------- */
.report .report__bar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--r-line-strong);padding-bottom:14px;margin-bottom:24px;
}
.report .report__bar .muted{color:var(--r-ink-3);font-size:12.5px;}
.report .report__actions{display:flex;gap:10px;flex-shrink:0;}
.report .report__actions .btn{border:1px solid var(--r-line);background:var(--r-surface);color:var(--r-ink);font-size:13px;padding:8px 13px;}
.report .report__actions .btn:hover{border-color:var(--r-line-strong);background:var(--r-surface-2);}

/* overview + generic card -------------------------------------------- */
.report .overview{background:var(--r-surface);border:1px solid var(--r-line);padding:20px 24px;margin-bottom:24px;}
.report .overview p{font-size:14.5px;}
.report .overview p:last-child{margin-bottom:0;}
.report .disclaimer{
  display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--r-ink-2);
  background:var(--r-surface-3);border:1px solid var(--r-line);border-left:3px solid var(--r-accent);
  padding:11px 14px;margin-top:16px;
}
.report .disclaimer svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;color:var(--r-accent);}
.report .card{background:var(--r-surface);border:1px solid var(--r-line);padding:20px 24px;margin-bottom:24px;}
.report .card > h2{margin-bottom:4px;}
.report .section-sub{color:var(--r-ink-3);font-size:12.5px;margin:0 0 16px;}
.report .symptoms-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px;}

/* key findings - ruled rows with square dots ------------------------- */
.report .keys{margin:0;padding:0;list-style:none;}
.report .keys li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;padding:12px 0;border-bottom:1px solid var(--r-line);}
.report .keys li:last-child{border-bottom:0;padding-bottom:0;}
.report .kdot{width:8px;height:8px;margin-top:6px;flex:0 0 auto;background:var(--r-neutral);}
.report .kdot--neutral{background:var(--r-neutral);}

/* symptom grid - even 2 columns; expanded card spans the full width -- */
.report .srows{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.report .srow{background:var(--r-surface);border:1px solid var(--r-line);}
.report .srow.is-open{grid-column:1 / -1;}
.report .srow__head{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;width:100%;
  border:0;background:transparent;cursor:pointer;padding:14px 16px;text-align:left;font-family:inherit;
}
.report .srow__head:hover{background:var(--r-surface-2);}
.report .srow__id{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.report .srow__name{font-size:14.5px;font-weight:700;color:var(--r-ink);line-height:1.2;}
.report .srow__now{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:16px;font-weight:700;color:var(--r-ink);text-align:right;}
.report .srow__now small{color:var(--r-ink-3);font-weight:600;font-size:11px;}
/* caret drawn in CSS (no SVG) so collapsed rows paint nothing chart-like */
.report .srow__chev{
  width:8px;height:8px;border-right:1.5px solid var(--r-ink-3);border-bottom:1.5px solid var(--r-ink-3);
  transform:rotate(-45deg);transition:transform .15s;margin-right:4px;justify-self:center;
}
.report .srow.is-open .srow__chev{transform:rotate(45deg);}
.report .srow__chev svg{display:none;}   /* CSS draws the caret; hide app.js's injected SVG so they don't double up */
.report .srow__detail{display:none;border-top:1px solid var(--r-line);padding:18px 20px 22px;background:var(--r-surface-2);}
.report .srow.is-open .srow__detail{display:block;}

/* trend badge - sharp hairline chip --------------------------------- */
.report .badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border:1px solid currentColor;background:transparent;white-space:nowrap;}
.report .badge--improving{color:var(--r-good-ink);}
.report .badge--worsening{color:var(--r-warn-ink);}
.report .badge--stable{color:var(--r-neutral);}

/* stat tiles - even 4-col grid, mono values ------------------------- */
.report .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px;}
.report .tile{background:var(--r-surface);border:1px solid var(--r-line);padding:11px 13px;}
.report .tile__k{font-size:10px;color:var(--r-ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.report .tile__v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:700;color:var(--r-ink);line-height:1.25;}
.report .tile__v small{font-size:11px;color:var(--r-ink-3);font-weight:600;font-family:var(--font);}
.report .tile__v .up{color:var(--r-warn);}     /* worsening = amber, never red */
.report .tile__v .down{color:var(--r-good);}    /* improving = green */

/* detail prose / event / change-point caption ----------------------- */
.report .detail__text{font-size:14px;color:var(--r-ink-2);max-width:74ch;margin:16px 0 0;line-height:1.6;}
.report .detail__event{
  display:flex;gap:8px;align-items:flex-start;font-size:13px;background:var(--r-surface);
  border:1px solid var(--r-line);border-left:3px solid var(--r-accent);color:var(--r-ink-2);
  padding:10px 13px;max-width:74ch;margin-top:10px;
}
.report .detail__event svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;color:var(--r-accent);}
.report .detail__cp{font-size:13px;color:var(--r-ink-2);margin:8px 0 0;}

/* charts - controlled max sizes so nothing renders oversized --------- */
.report .chart-box{max-width:560px;margin:0;}
.report .chart-box--wide{max-width:100%;}
.report .chart{width:100%;height:auto;display:block;max-height:210px;}
.report .grid-line{stroke:var(--r-grid);stroke-width:1;}
.report .axis-line{stroke:var(--r-axis);stroke-width:1;}
.report .axis-tick{stroke:var(--r-axis);stroke-width:1;}
.report .axis-label{fill:var(--r-ink-3);font-size:10px;font-family:var(--font);}
.report .axis-label--y{text-anchor:end;}
.report .axis-label--yr{text-anchor:start;}
.report .axis-label--x{text-anchor:middle;}
.report .axis-cap{fill:var(--r-ink-3);font-size:10px;font-family:var(--font);text-anchor:middle;}
.report .chart-line{stroke-width:1.5;fill:none;stroke:var(--c,var(--r-accent));stroke-linejoin:round;stroke-linecap:round;}
.report .chart-line.dash{stroke-dasharray:4 3;}
.report .chart-dot{r:2;fill:var(--c,var(--r-accent));}
.report .chart-mark{stroke:var(--r-neutral);stroke-width:1;stroke-dasharray:4 3;}
.report .chart-mark-lbl{fill:var(--r-ink-3);font-size:9px;font-family:var(--font);text-anchor:middle;}
.report .chart-band{fill:var(--r-warn);opacity:.07;}

/* behavioural driver block ------------------------------------------ */
.report .driver{border:1px solid var(--r-line);background:var(--r-surface);padding:14px 16px;margin-bottom:14px;}
.report .driver__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.report .driver__title{font-weight:700;font-size:14px;color:var(--r-ink);}
.report .driver__assoc{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:var(--r-ink-2);border:1px solid var(--r-line);padding:3px 8px;white-space:nowrap;}
.report .legend{display:flex;gap:16px;margin:2px 0 8px;font-size:12.5px;color:var(--r-ink-2);flex-wrap:wrap;}
.report .legend__item{display:inline-flex;align-items:center;gap:6px;}
.report .legend__sw{width:16px;height:2px;display:inline-block;}
.report .legend__sw.dash{background-image:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px);height:2px;}
.report .driver__stat{font-size:13.5px;color:var(--r-ink-2);margin:8px 0 4px;line-height:1.55;}
.report .driver__note{font-size:13px;color:var(--r-ink-2);margin:0;line-height:1.55;}
.report .no-pattern{font-size:13.5px;color:var(--r-ink-2);font-style:italic;}
.report .lag-note{font-size:13px;color:var(--r-ink-2);margin:8px 0 0;line-height:1.55;}
.report .lag-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--r-ink-3);border:1px solid var(--r-line);padding:1px 5px;margin-right:6px;white-space:nowrap;}

/* cross-symptom co-occurrence - the headline block ------------------ */
.report .xsym{border:1px solid var(--r-line);background:var(--r-surface);margin:0 0 4px;}
.report .xsym__head{padding:11px 14px;border-bottom:1px solid var(--r-line);}
.report .xsym__title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--r-ink-3);}
.report .xsym__lead{font-size:13.5px;color:var(--r-ink-2);padding:11px 14px;border-bottom:1px solid var(--r-line);margin:0;line-height:1.55;}
.report .xsym__lead strong{color:var(--r-ink);}
.report .xsym__cols{display:grid;grid-template-columns:1fr 1fr;}
.report .xsym__col{padding:11px 14px;}
.report .xsym__col + .xsym__col{border-left:1px solid var(--r-line);}
.report .xsym__cap{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;}
.report .xsym__cap--pos{color:var(--r-warn-ink);}   /* moved together (toward worse) - amber */
.report .xsym__cap--neg{color:var(--r-good-ink);}   /* moved oppositely - green */
.report .xsym__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:7px 0;border-bottom:1px solid var(--r-line);font-size:13px;}
.report .xsym__row:last-child{border-bottom:0;}
.report .xsym__name{color:var(--r-ink);display:inline-flex;align-items:baseline;gap:7px;}
.report .xsym-strength{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--r-ink-3);}
.report .xsym__r{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--r-ink-3);text-align:right;}
.report .xsym__bar{grid-column:1 / -1;height:3px;background:var(--r-surface-3);}
.report .xsym__bar > i{display:block;height:100%;background:var(--r-neutral);}
.report .xsym__none{font-size:13px;color:var(--r-ink-3);margin:0;}
.report .xsym__foot{font-size:12px;color:var(--r-ink-3);padding:11px 14px;border-top:1px solid var(--r-line);margin:0;line-height:1.5;}

/* bad-day profile --------------------------------------------------- */
.report .profile{border:1px solid var(--r-line);background:var(--r-surface);padding:12px 14px;margin:14px 0;}
.report .profile__lead{font-size:13.5px;color:var(--r-ink-2);margin:0 0 9px;line-height:1.55;}
.report .profile__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px;}
.report .profile__chip{font-size:12.5px;border:1px solid var(--r-line);background:var(--r-surface-2);padding:4px 9px;color:var(--r-ink);display:inline-flex;gap:8px;align-items:baseline;}
.report .profile__chip .num{font-size:11.5px;color:var(--r-ink-3);}
.report .profile__meta{font-size:12px;color:var(--r-ink-3);margin:0;line-height:1.5;}

/* quotes ------------------------------------------------------------ */
.report .quotes{display:flex;flex-direction:column;gap:10px;}
.report .quote{margin:0;border:1px solid var(--r-line);border-left:3px solid var(--r-accent);background:var(--r-surface);padding:10px 14px;}
.report .quote p{margin:0 0 3px;font-style:italic;font-size:13.5px;color:var(--r-ink-2);line-height:1.5;}
.report .quote cite{color:var(--r-ink-3);font-size:12px;font-style:normal;}

/* activity charts --------------------------------------------------- */
.report .act-card{background:var(--r-surface);border:1px solid var(--r-line);padding:14px 16px;margin-bottom:16px;}
.report .act-card:last-child{margin-bottom:0;}
.report .act-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.report .act-card__name{font-weight:700;font-size:14px;color:var(--r-ink);}

/* questions - ruled rows, square marker ----------------------------- */
.report .questions{margin:0;padding:0;list-style:none;}
.report .questions li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--r-ink-2);padding:12px 0;border-bottom:1px solid var(--r-line);}
.report .questions li:last-child{border-bottom:0;padding-bottom:0;}
.report .questions li::before{content:"?";flex:0 0 auto;width:20px;height:20px;background:var(--r-surface-3);color:var(--r-accent);font-weight:800;display:grid;place-items:center;font-size:12px;margin-top:1px;border:1px solid var(--r-line);}

/* overall wellbeing score ------------------------------------------- */
.report .score{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.report .score__num{font-family:var(--mono);font-size:46px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--r-accent);font-variant-numeric:tabular-nums;}
.report .score__meta{display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--r-ink-2);}
.report .score__chart{flex:1;min-width:320px;}
.report .score__delta{font-weight:700;}
.report .score__delta.up{color:var(--r-good);}     /* wellbeing rose = good = green */
.report .score__delta.down{color:var(--r-warn);}   /* wellbeing fell = amber, never red */

/* ----------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:#fff;padding:13px 20px;font-size:14.5px;font-weight:500;
  border:1px solid var(--ink);opacity:0;transition:opacity .25s,transform .25s;z-index:50;
  max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* --------------------------------------------------------- responsive */
@media (max-width:880px){
  .slider-row{grid-template-columns:130px 1fr 44px;gap:12px;}
}
@media (max-width:760px){
  .report .srows{grid-template-columns:1fr;}
  .report .tiles{grid-template-columns:repeat(2,1fr);}
  .report .xsym__cols{grid-template-columns:1fr;}
  .report .xsym__col + .xsym__col{border-left:0;border-top:1px solid var(--r-line);}
}

/* ---- best/worst panel · full patterns · sessions · activity grid ---- */
/* trend section: chart fills the left; best/worst sits at the right edge & matches the chart height */
.report .trend-row{display:flex;gap:20px;align-items:stretch;flex-wrap:wrap;}
.report .trend-main{flex:1 1 420px;min-width:300px;display:flex;flex-direction:column;}
.report .trend-main>h4{margin-top:0;}
.report .trend-main .chart-box{max-width:none;flex:1;}
.report .trend-main .chart{max-height:300px;}
.report .bestworst{flex:0 0 300px;display:flex;flex-direction:column;gap:10px;}
.report .bestworst>h4{margin-top:0;}
/* key dates area - sits in the right panel, pinned to the bottom for symmetry */
.report .keydates{margin-top:auto;border:1px solid var(--r-line);border-left:3px solid var(--r-accent);background:var(--r-surface);padding:11px 13px;}
.report .keydates__h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--r-ink-2);margin-bottom:6px;}
.report .keydates__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--r-line);}
.report .keydates__row:last-child{border-bottom:0;}
.report .keydates__d{font-family:var(--mono);color:var(--r-ink);font-weight:700;flex:0 0 auto;}
.report .keydates__t{color:var(--r-ink-2);text-align:right;}

/* key dates now lives in the stat-tile row, spanning the freed best/worst slots */
.report .tiles .keydates{grid-column:span 2;margin-top:0;}
/* best/worst cards fill the right panel height to match the chart */
.report .bestworst .bw{flex:1;}

/* lifestyle overlay grid - 2 columns of 3, charts only (no prose) */
.report .overlay-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.report .overlay-grid .driver{margin-bottom:0;}
.report .overlay-grid .chart{max-width:none;}

/* plan of action - 2-col cards */
.report .plan{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.report .plan li{border:1px solid var(--r-line);border-left:3px solid var(--r-good);background:var(--r-surface);padding:13px 15px;}
.report .plan__t{font-weight:700;font-size:14px;color:var(--r-ink);margin-bottom:4px;}
.report .plan__f{font-size:13px;color:var(--r-ink-2);margin-bottom:6px;line-height:1.5;}
.report .plan__a{font-size:13px;color:var(--r-ink);line-height:1.5;}
.report .plan__note{font-size:12px;color:var(--r-ink-3);margin:14px 0 0;font-style:italic;}

/* summary box - sits in the stat-tile row, same size as key dates */
.report .tiles .summary{grid-column:span 2;border:1px solid var(--r-line);background:var(--r-surface);padding:11px 13px;}
.report .summary__h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--r-ink-2);margin-bottom:6px;}
.report .summary p{font-size:12.5px;color:var(--r-ink-2);margin:0;line-height:1.5;}

/* trend header: title + overlay dropdown */
.report .trend-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.report .trend-head h4{margin:0;}
.report .ovl{position:relative;}
.report .ovl__btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--r-ink);background:var(--r-surface);border:1px solid var(--r-line);padding:7px 11px;cursor:pointer;}
.report .ovl__btn:hover{border-color:var(--r-line-strong);}
.report .ovl__car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--r-ink-3);}
.report .ovl__panel{position:absolute;right:0;top:calc(100% + 4px);z-index:8;min-width:230px;max-height:264px;overflow-y:auto;background:var(--r-surface);border:1px solid var(--r-line-strong);}
.report .ovl__grp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--r-ink-3);padding:9px 13px 4px;border-top:1px solid var(--r-line);}
.report .ovl__grp:first-child{border-top:0;}
.report .ovl__opt{padding:8px 13px;font-size:13px;color:var(--r-ink-2);cursor:pointer;}
.report .ovl__opt:hover{background:var(--r-surface-3);color:var(--r-ink);}
.report .ovl__opt.is-sel{color:var(--r-accent);font-weight:700;}

/* full pattern analysis - collapsible dropdowns */
.report .fp{display:flex;flex-direction:column;gap:8px;}
.report .fp__d{border:1px solid var(--r-line);background:var(--r-surface);}
.report .fp__sum{display:flex;align-items:center;gap:10px;cursor:pointer;padding:11px 14px;font-weight:700;font-size:13.5px;color:var(--r-ink);list-style:none;}
.report .fp__sum::-webkit-details-marker{display:none;}
.report .fp__count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--r-ink-3);border:1px solid var(--r-line);padding:0 7px;}
.report .fp__sum::after{content:"+";color:var(--r-ink-3);font-weight:700;width:12px;text-align:center;}
.report .fp__d[open] .fp__sum::after{content:"-";}
.report .fp__d .fp__list{margin:0;padding:0 14px 10px;list-style:none;}
.report .fp__d .fp__list li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:13px;color:var(--r-ink-2);padding:7px 0;border-top:1px solid var(--r-line);}
.report .fp__d .fp__r{font-family:var(--mono);font-size:12px;color:var(--r-ink-3);flex:0 0 auto;}

/* manual: big live overall score + per-symptom note boxes */
.manual-score{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);background:var(--surface);padding:14px 18px;max-width:760px;margin-bottom:14px;}
.manual-score__k{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:3px;}
.manual-score__v{font-size:40px;font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;}
.manual-score__out{font-size:18px;font-weight:600;color:var(--ink-3);margin-left:2px;}
.sliders,.slider-row--quick{max-width:860px;}
.slider-row{grid-template-columns:170px 1fr 48px 210px;}
.slider-note{border:1px solid var(--line);background:var(--surface);font-family:inherit;font-size:14px;padding:8px 10px;outline:none;}
.slider-note:focus{border-color:var(--accent);}

@media (max-width:760px){
  .report .overlay-grid,.report .plan{grid-template-columns:1fr;}
  .slider-row{grid-template-columns:120px 1fr 40px;}
  .slider-note{display:none;}
}
.report .bw{border:1px solid var(--r-line);border-left:3px solid var(--r-neutral);background:var(--r-surface);padding:12px 14px;display:flex;flex-direction:column;}
.report .bw--best{border-left-color:var(--r-good);}
.report .bw--worst{border-left-color:var(--r-warn);}
.report .bw__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.report .bw__label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--r-ink-2);}
.report .bw__val{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--r-ink);}
.report .bw__val small{font-size:11px;color:var(--r-ink-3);font-weight:600;}
.report .bw__date{font-size:12px;color:var(--r-ink-3);margin:3px 0 6px;}
.report .bw__desc{font-size:12.5px;color:var(--r-ink-2);margin:0 0 8px;line-height:1.45;}
.report .bw__ctx{font-size:12px;color:var(--r-ink-2);line-height:1.55;}
.report .bw__quote{font-size:12.5px;font-style:italic;color:var(--r-ink-2);margin:auto 0 0;padding-top:9px;border-top:1px solid var(--r-line);}

/* wellbeing hero: number/meta on the left, graph fills the right */
.report .hero .score{align-items:stretch;gap:30px;}
.report .score__left{flex:0 0 220px;display:flex;flex-direction:column;justify-content:center;}
.report .score__cap{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--r-ink-3);margin-bottom:4px;}
.report .score__outof{font-family:var(--font);font-size:17px;font-weight:600;color:var(--r-ink-3);margin-left:2px;}
.report .chart-box--wide .chart{max-height:260px;}
.report .act-grid .chart-box{max-width:none;}

/* (background dimming on expand removed) */

/* keep driver overlay charts from blowing up at full width */
.report .driver .chart{max-width:760px;}

.report .keys__more{margin-top:14px;padding-top:13px;border-top:1px solid var(--r-line);}

.report .act-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.report .act-grid .act-card{margin-bottom:0;}

.report .fp{display:flex;flex-direction:column;gap:16px;}
.report .fp__tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--r-accent);margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid var(--r-line);}
.report .fp__list{margin:0;padding:0;list-style:none;}
.report .fp__list li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:13.5px;color:var(--r-ink-2);padding:7px 0;border-bottom:1px solid var(--r-line);}
.report .fp__list li:last-child{border-bottom:0;}
.report .fp__r{font-family:var(--mono);font-size:12px;color:var(--r-ink-3);flex:0 0 auto;}

.report .sessions{display:flex;flex-direction:column;gap:12px;}
.report .sess{border:1px solid var(--r-line);border-left:3px solid var(--r-accent);background:var(--r-surface);padding:13px 15px;}
.report .sess__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px;flex-wrap:wrap;}
.report .sess__title{font-weight:700;font-size:14px;color:var(--r-ink);}
.report .sess__note{font-size:13.5px;color:var(--r-ink-2);margin:0 0 6px;}

/* full report: wide pattern box (left) + thin charts column (right) */
.report .fullgrid{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start;margin-top:18px;}
.report .fullgrid .card{margin-bottom:0;}
.report .sidecharts .mini{margin-bottom:16px;}
.report .sidecharts .mini:last-child{margin-bottom:0;}
.report .mini__name{font-size:12px;font-weight:700;color:var(--r-ink);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.report .sidecharts .chart-box{max-width:none;}
@media (max-width:900px){ .report .fullgrid{grid-template-columns:1fr;} }

.report .hero__med{font-size:13.5px;color:var(--r-ink-2);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--r-line);}

@media (max-width:1000px){
  .report .cols2{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .report .trend-main,.report .bestworst{flex:1 1 100%;}
  .report .act-grid{grid-template-columns:1fr;}
  .report .score__left{flex:1 1 100%;}
}

/* ------------------------------------------------------------- print */
@media print{
  .report .trend-row{display:block;}
  .report .act-grid{grid-template-columns:1fr;}
  .report .bw,.report .sess,.report .fp__group{break-inside:avoid;}
  .sidebar,.topbar,.no-print,.report__actions{display:none !important;}
  body{background:#fff;font-size:12px;}
  .app{display:block;height:auto;}
  .view{overflow:visible;padding:0;}
  .report{max-width:none;}
  .report .srows{grid-template-columns:1fr;}     /* single column reads better on paper */
  .report .srow{grid-column:1 / -1;}
  .report .srow__detail{display:block !important;} /* expand everything for the printed record */
  .report .srow__chev{display:none;}
  .report .xsym__cols{grid-template-columns:1fr;}
  .report .srow,.report .driver,.report .xsym,.report .profile,
  .report .act-card,.report .card,.report .tile,.report .chart-box,.report .quote{break-inside:avoid;}
}

/* ---------- login / signup ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth__card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:32px 28px;box-shadow:0 12px 40px rgba(21,33,43,.10);text-align:center;}
.auth__brand{width:46px;height:46px;margin:0 auto 14px;border-radius:13px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;}
.auth__title{font-size:21px;margin:0 0 4px;color:var(--ink);}
.auth__sub{font-size:13.5px;color:var(--ink-3);margin:0 0 22px;}
.auth__form{display:flex;flex-direction:column;gap:11px;text-align:left;}
.auth__input{width:100%;box-sizing:border-box;padding:13px 14px;font-size:15px;font-family:var(--font);
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:11px;outline:none;}
.auth__input:focus{border-color:var(--accent);background:var(--surface);}
.auth__submit{margin-top:6px;width:100%;justify-content:center;padding:13px;font-size:15px;}
.auth__submit:disabled{opacity:.6;cursor:default;}
.auth__err{color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn);
  border-radius:9px;padding:9px 11px;font-size:13px;}
.auth__toggle{margin-top:16px;font-size:13.5px;}