/* History screen — Milestone F10.1 (History & Trends Foundation).
   Deliberately reuses this project's existing F7/F8 visual language rather
   than introducing a new component system: .card/.card--standard,
   .observation-list/.observation-row/.observation-row__meta/
   .observation-row__note (today.css), and .section-headline are all shared,
   unchanged component classes — this file adds only the small number of
   rules genuinely specific to History's own layout (the screen shell, the
   per-day heading, the small category icon prefix, and Physio's own list
   shape, which does not fit the single-line rating-row pattern the other
   three categories share). */

.history-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Matches today-screen's own top clearance (F7.2.1) — the other "normal
     padded screen" convention in the app. */
  padding-top: var(--space-3);
  padding-bottom: var(--space-4);
}

.history-header__helper {
  color: var(--color-text-secondary);
  margin: var(--space-0-5) 0 0;
}

.history-screen__state {
  color: var(--color-text-secondary);
}

/* F11 production-fix: a small heading identifying this section as
   specifically the daily-observations (General/Movement/Itchiness/Physio)
   dataset — distinct from the Diary section above it (diary.css's own
   .diary-section__heading, matched here for visual consistency: same
   size/weight, so the two read as sibling sections of History, not one
   continuous unlabelled block). No other layout change — .history-screen's
   existing flex gap already spaces this section from its siblings. */
.history-observations {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.history-observations__heading {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.history-day-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.history-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.history-day__heading {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

/* A small inline icon ahead of each category's meta line — the same
   category icon set Home's Journey grid already uses (icons.js), scaled
   down to sit inline with text rather than in its own circular tile (that
   tile treatment is specific to Home's grid layout; History's rows read
   top-to-bottom, so a plain inline icon is the calmer fit here). */
.history-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: var(--space-0-5);
  color: var(--color-text-muted);
  vertical-align: -3px;
}

.history-row__icon svg {
  width: 16px;
  height: 16px;
}

.history-row__count {
  font-style: italic;
}

/* Physio renders as its own small list (completion/event history, not a
   single-line rating — F10.1 brief), not the shared .observation-row shape
   the other three categories use. */
.history-physio-list {
  margin: var(--space-0-5) 0 0;
  padding-left: calc(16px + var(--space-0-5) + var(--space-2));
  color: var(--color-text-secondary);
  font-size: 14px;
}

.history-physio-list__item {
  margin: 2px 0;
}

/* --- Recent Trends (Milestone F10.2) ---------------------------------------
   A compact secondary section, not a replacement for the chronological list
   above — reuses .card/.card--standard exactly like a history-day card, so
   it reads as one more calm card in the same visual language rather than a
   distinct "dashboard" component. */

.trend-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.trend-section__heading {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.trend-section__category {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.trend-section__category + .trend-section__category {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}

.trend-section__label {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.trend-section__state,
.trend-section__single {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.trend-section__scale {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Scales to its container's width via viewBox + width:100% — never a fixed
   pixel width, so it can never force horizontal page scroll on a narrow
   mobile viewport regardless of how many recent observations exist. */
.trend-chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.trend-chart__line--movement {
  stroke: var(--category-movement);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trend-chart__point--movement {
  fill: var(--category-movement);
}

.trend-chart__point--itchiness {
  fill: var(--category-itchiness);
}

/* A STATUS_NONE Itchiness point is deliberately a hollow ring, not a filled
   dot — visually distinct from an observed-severity point sitting on its own
   baseline row below the divider, never implying a position on the 1-5
   severity scale (see history-view.js's buildItchinessTrendMarkup). */
.trend-chart__point--none {
  fill: var(--color-card);
  stroke: var(--category-itchiness);
  stroke-width: 2;
}

.trend-chart__divider {
  stroke: var(--color-divider);
  stroke-width: 1;
}