/* Journal-only presentation layer.
   The route intentionally keeps SubstanceSearch's shared layout, theme tokens,
   typography and ss-* components. PW-inspired behavior stays page-scoped. */

.jr-page {
  padding: var(--space-6) var(--gutter) var(--space-8);
  /* Base --text-muted (#888 light) lands at 2.9-3.5:1 on this page's bright
     elevated surfaces at the smallest sizes; darken it to pass 4.5:1. */
  --text-muted: #636363;
  /* Month-strip heat tiers 0..6 as computed by heatTier() in the journal
     template: 0 = none (grey stub), then green, yellow, orange, red-orange,
     red, dark red. Literal hexes, tuned so every adjacent pair clears
     dE 15 on the timeline card (--bg-elevated: #fff / #2a2a2a); the semantic
     tokens (--success, --warning, --danger) sit 3-10 dE from their neighbours
     and would collapse the ramp, so do not substitute or round them. Fills
     only — never put text on them (yellow and orange are under 3:1 here). */
  --jr-heat-0: #dddddd;
  --jr-heat-1: #2b7c37;
  --jr-heat-2: #d7c814;
  --jr-heat-3: #f88b1c;
  --jr-heat-4: #ed3a07;
  --jr-heat-5: #a9141c;
  --jr-heat-6: #650d17;
  --jr-heat-edge: rgba(0, 0, 0, .3);
}
body.dark .jr-page {
  --text-muted: #9b9b9b;
  /* the grey stub must stay visible on the #2a2a2a card: --tint-2 (#373737)
     and --border (#333) both vanish there, so it is a literal too */
  --jr-heat-0: #444444;
  --jr-heat-1: #348f4f;
  --jr-heat-2: #f5e648;
  --jr-heat-3: #fea408;
  --jr-heat-4: #fe603d;
  --jr-heat-5: #d0001c;
  --jr-heat-6: #842d3e;
  --jr-heat-edge: rgba(255, 255, 255, .3);
}

.jr-page-head {
  margin-bottom: var(--space-6);
}

.jr-page-copy { min-width: 0; }
.jr-page-head h1 { margin: 0 0 var(--space-2); }
.jr-intro { max-width: 44rem; margin: 0; }

/* The dynamic Journal roots need to stay unwrapped for their delegated event
   listeners, so cards are applied to stable children instead. */
.jr-page .cc-log.jr-shell {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.jr-lock-card {
  max-width: 42rem;
  margin: 0 auto;
}

.jr-page .cc-log-head,
.jr-page .jr-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.jr-page .cc-log-head { margin-bottom: var(--space-4); }
.jr-page .cc-log-title { font-size: var(--fs-h4); }
.jr-page .cc-log-badge {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  background: var(--tint-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.jr-page .jr-start {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0;
}

.jr-page .jr-start-or {
  width: 100%;
  color: var(--text-muted);
  text-align: center;
  font-size: var(--fs-small);
}

.jr-field-label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight: 600;
}

.jr-page .cc-log-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.jr-page .jr-create {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-color: var(--border);
}
/* the divider only exists while the generated-code panel is showing —
   collapsed, it was a stray line under the two buttons */
.jr-page .jr-create:has(> #jr-code-panel[style*="none"]) { margin-top: 0; padding-top: 0; border-top: 0; }

.jr-page .jr-code {
  padding: var(--space-4);
  border-color: var(--border);
  background: var(--bg-alt);
}

.jr-page .cc-hint {
  display: block;
  margin-top: var(--space-4);
  line-height: 1.5;
}

.jr-page .jr-lock-error { color: var(--danger); }

/* Why the page locked itself (a status, not an error), and the stay-open
   consent row: chips reuse the Overview's .jr-chip (2.25rem touch height),
   wrapping at phone width; the hint is the one-line contract they sign. */
.jr-page .jr-lock-note { margin: 0 0 var(--space-3); color: var(--text); font-size: var(--fs-body-sm); line-height: 1.5; }
.jr-page .jr-resume {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.jr-page .jr-resume-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight: 600;
}
.jr-page .jr-resume-hint { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }

/* the third, quiet entry path: a backup file made while unlocked */
.jr-page .jr-restore {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.jr-page .jr-restore-label {
  display: block;
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight: 600;
}
.jr-page .jr-restore-label .jr-pw-file { margin-top: var(--space-2); font-weight: 400; }
.jr-page .jr-restore .jr-code-lead { margin: var(--space-3) 0 var(--space-2); }
.jr-page .jr-restore .jr-lock-error { margin: var(--space-2) 0 0; }

/* the download fallback sits inside the utility bar, full width */
.jr-page .jr-backup-box {
  flex: 1 1 100%;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.jr-page .jr-backup-lead { margin: 0 0 var(--space-2); color: var(--text-dim); font-size: var(--fs-body-sm); line-height: 1.5; }
.jr-page .jr-backup-box textarea { width: 100%; font-family: var(--font-mono); font-size: var(--fs-micro); resize: vertical; }

/* Open-journal utility strip and section cards. A plain card in the flow:
   nothing on this page follows the scroll. */
.jr-utility-bar {
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
  border-color: var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}

.jr-page .cc-log-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
}

.jr-utility-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.jr-open-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-tint);
}

.jr-page #jr-hint .jr-note-preview {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--info-ink);
  border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
  border-radius: var(--radius-md);
  background: var(--info-bg);
}

/* Direct entry reuses Cross-Check's familiar editor controls, scoped inside
   a normal Journal card and backed by the encrypted vault rather than the
   checker's plaintext in-progress builder. */
.jr-experience-section[hidden] { display: none; }
.jr-experience-section {
  margin-bottom: var(--space-5);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: var(--shadow-sm);
}
.jr-experience-section .jr-section-head { margin-bottom: var(--space-2); }
.jr-experience-section h2 {
  margin: var(--space-1) 0 0;
  color: var(--text);
  font-size: var(--fs-h3);
}
.jr-experience-lead {
  max-width: 48rem;
  margin: 0 0 var(--space-4);
  color: var(--text-dim);
  line-height: 1.55;
}
/* Add-experience rows are Cross-Check's accordion — collapsed .cc-chip rows
   with ONE open .cc-card.cc-open editor; every .cc-chip* / .cc-ed-* rule
   comes from cross_check.css, linked ahead of this file. Only the list
   spacing, the chip focus ring and the Done button are the Journal's. */
.jr-experience-row { margin-bottom: var(--space-3); }
.jr-page .jr-experience-row:not(.cc-open) { margin-bottom: var(--space-2); }
.jr-page .jr-experience-row .cc-chip:focus-visible { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); }
.jr-page .jr-experience-row .cc-done { min-height: 2.375rem; white-space: nowrap; }
.jr-experience-row .cc-ed-top { align-items: center; }
.jr-experience-row .cc-ed-foot {
  display: flex;
  justify-content: flex-end;
}
.jr-experience-remove { color: var(--danger); }
.jr-experience-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--text-dim);
}
.jr-experience-note textarea {
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}
.jr-optional { color: var(--text-muted); font-weight: 400; }
.jr-experience-error {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  color: var(--danger-ink);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--radius-md);
  background: var(--danger-bg);
}
.jr-experience-actions { margin-top: var(--space-4); }
.jr-experience-private {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.jr-section {
  margin-top: var(--space-4);
  scroll-margin-top: 5rem;
}

.jr-page .jr-pw {
  margin: 0;
  padding: 0;
  border: 0;
}

.jr-page .jr-pw-lead { color: var(--text-dim); }

.jr-page #jr-pw-import {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}

.jr-page .jr-pw-file { width: 100%; color: var(--text-dim); }

.jr-generated-head { margin: var(--space-6) 0 var(--space-3); }
.jr-generated-head h2,
.jr-session-section h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-h3);
}

/* Section heads are the title alone (plus a phone-only jump link between
   History and Overview): no mono kickers, badges or hint lines above them.
   Chart and cumulative labels are sentence-case, not tracked uppercase. */
.jr-page .jr-pw-chart-title,
.jr-page .jr-day-cumhead {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-dim);
}

/* Months remain lazy; the newest one is opened by the controller. They read
   as a calendar: a real heading, "N days · M doses", a heat strip of the
   month's days — one bottom-aligned cell per day whose colour AND height step
   through seven tiers by heatTier's ladder for that day's intake count (grey
   stub for none, green at the low end, dark red for the month's heaviest
   days) — and the day cards' chevron. Height is the
   redundant channel: a protan reader cannot tell green from red-orange, so
   the ladder is mandatory, not decorative. */
.jr-page .jr-pw-month {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.jr-page .jr-pw-month + .jr-pw-month { border-top: 1px solid var(--border); }
.jr-page .jr-pw-month > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  list-style: none;
  color: var(--text);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fast);
}
.jr-page .jr-pw-month > summary::-webkit-details-marker { display: none; }
.jr-page .jr-pw-month > summary:hover { background: var(--tint-1); }
.jr-page .jr-pw-month > summary::after {
  content: '›';
  flex: 0 0 auto;
  margin-left: var(--space-1);
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--t-fast);
}
.jr-page .jr-pw-month[open] > summary::after { transform: rotate(90deg); }
.jr-page .jr-pw-month[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.jr-page .jr-pw-mmain { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.jr-page .jr-pw-mname { font-size: var(--fs-h4); font-weight: 700; line-height: 1.2; }
.jr-page .jr-pw-msub { color: var(--text-muted); font-size: var(--fs-small); }
.jr-page .jr-pw-mstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  align-items: end;
  width: 11rem;
  height: 1rem;
  flex: 0 0 auto;
}
/* Heights are eighths of the 1rem strip (4, 6, 8 … 16px at a 16px root) so
   every tier top lands on a whole pixel and each step is exactly 2px; the
   zero tier is a short but visible stub so the calendar grid still reads.
   Every filled cell also wears a faint inset edge (--jr-heat-edge): four of
   the fills sit under 3:1 on the card (light yellow/orange, dark red/dark
   red), and the silhouette — the height channel — must read regardless. */
.jr-page .jr-pw-mstrip i { display: block; box-sizing: border-box; border-radius: 1px; height: 25%; background: var(--jr-heat-0); }
.jr-page .jr-pw-mstrip i.jr-heat-0 { height: 25%; background: var(--jr-heat-0); }
.jr-page .jr-pw-mstrip i.jr-heat-1 { height: 37.5%; background: var(--jr-heat-1); }
.jr-page .jr-pw-mstrip i.jr-heat-2 { height: 50%; background: var(--jr-heat-2); }
.jr-page .jr-pw-mstrip i.jr-heat-3 { height: 62.5%; background: var(--jr-heat-3); }
.jr-page .jr-pw-mstrip i.jr-heat-4 { height: 75%; background: var(--jr-heat-4); }
.jr-page .jr-pw-mstrip i.jr-heat-5 { height: 87.5%; background: var(--jr-heat-5); }
.jr-page .jr-pw-mstrip i.jr-heat-6 { height: 100%; background: var(--jr-heat-6); }
/* today: a ring normally; the transparent outline is what forced-colors repaints */
.jr-page .jr-pw-mstrip i:not(.jr-heat-0) { box-shadow: inset 0 0 0 1px var(--jr-heat-edge); }
.jr-page .jr-pw-mstrip i[data-today] { box-shadow: 0 0 0 1px var(--text-muted); outline: 1px solid transparent; }
.jr-page .jr-pw-mstrip i[data-today]:not(.jr-heat-0) { box-shadow: 0 0 0 1px var(--text-muted), inset 0 0 0 1px var(--jr-heat-edge); }
.jr-page .jr-pw-mbody { padding: 0; }

/* PW-inspired day rows expressed through the site's neutral surfaces. */
.jr-page .jr-day {
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.jr-page .jr-day > summary {
  min-height: 4.75rem;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--t-fast);
}

.jr-page .jr-day > summary:hover { background: var(--tint-1); }
.jr-page .jr-day > summary::after { color: var(--text-muted); font-size: 1.5rem; transform: none; }
.jr-page .jr-day-strip { width: 4px; min-height: 3rem; border-radius: var(--radius-pill); }
.jr-page .jr-day-main { gap: var(--space-1); }
.jr-page .jr-day-date { color: var(--text); font-size: var(--fs-body); }
.jr-page .jr-day-subs { color: var(--text-dim); font-size: var(--fs-small); }
.jr-page .jr-day-count { color: var(--text-muted); font-size: var(--fs-label); }
/* a watcher's totals-only day (beyond the full-entry days of a long share):
   the day row's anatomy without a disclosure — there is nothing to open */
.jr-page .jr-day-sum {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 4.75rem;
  padding: var(--space-3) var(--space-2);
}
.jr-page .jr-day-sum .jr-day-subs { color: var(--text-muted); }

/* Opened days expand IN PLACE — the site's language is inline disclosure
   (accordions, tap-popovers), never pop-out windows. The open card simply
   elevates within the flow. */
.jr-page .jr-day[open] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.jr-page .jr-day[open] > summary {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
}
.jr-page .jr-day[open] > summary::after { transform: rotate(90deg); }
.jr-page .jr-day[open] .jr-day-body {
  padding: var(--space-3) var(--space-4) var(--space-5);
  border: 0;
}

/* Day-detail chart, experiences, and cumulative totals. */
.jr-page .jr-day-chartwrap {
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  /* The chart fits its container: it is drawn to the wrap's measured inner
     width and redrawn on resize, so there is nothing to scroll. */
  overflow: hidden;
  /* NOT display:none while empty — the wrap is inserted empty precisely so
     its width can be measured before the SVG is drawn into it. */
}
.jr-page .jr-day-chartnote { margin: 0 var(--space-1) var(--space-4); }
/* The live readout: one plain sentence under the chart — deliberately not a
   live region (it ticks every 20 s). */
.jr-page .jr-day-live {
  margin: 0 var(--space-1) var(--space-2);
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.jr-page .jr-day-live b { color: var(--text); font-weight: 600; }

/* Experiences are flat hairline sections, not cards inside the day card:
   the ingestion rows carry their own colored bars, so a second frame and
   a second accent bar only cost vertical space. */
.jr-page .jr-pw-exp {
  position: relative;
  margin: 0;
  padding: var(--space-1) 0 var(--space-2);
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
}
.jr-page .jr-pw-exp:first-of-type { border-top: 0; }
.jr-page .jr-src-tag { background: var(--tint-1); }
.jr-page .jr-pw-ings { margin-top: 0; }

/* "+ Add a dose" lives under the chart it draws on — the PW app's Add
   ingestion, expanding IN PLACE into the same inline editor rows use. */
.jr-page .jr-day-add { margin: 0 0 var(--space-3); }
.jr-page .jr-day-addbtn { width: 100%; justify-content: flex-start; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); }
.jr-page .jr-day-add .jr-inged { margin-left: 0; }

.jr-page .jr-day-cumhead { margin: var(--space-5) var(--space-1) var(--space-2); }
.jr-page .jr-day-cum {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
.jr-page .jr-cum-row { min-height: 3rem; border-color: var(--border); }

/* Overview analytics stay secondary and use standard nested-card treatment. */
.jr-overview-panel {
  scroll-margin-top: 5rem;
  margin-top: var(--space-8);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.jr-overview-panel .jr-generated-head { margin: 0 0 var(--space-4); }
.jr-page .jr-pw-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.jr-page .jr-tile { min-width: 0; padding: var(--space-3); background: var(--bg-elevated); }
.jr-page .jr-tile b { font-size: var(--fs-h4); }
.jr-page .jr-tile--wide { grid-column: 1 / -1; }

.jr-page .jr-pw-chart {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

/* Overview buckets share the card width at EVERY size — no horizontal
   scrollbar. Each bar is a button spanning its whole column (gap included),
   so on a 375px phone a 26-week bar still has a ~14px-wide, full-height
   tap target even though the visible fill is thin. */
.jr-page .jr-sbars-wrap { overflow-x: hidden; padding-bottom: 0; }
.jr-page .jr-sbars-in { width: 100%; min-width: 0; }
.jr-page :is(.jr-sbar, .jr-xc) { flex: 1 1 0; min-width: 0; }
.jr-page .jr-xc:last-child b { right: 0; left: auto; }

.jr-page .jr-chips {
  gap: var(--space-2);
  overflow: visible;
  flex-wrap: wrap;
  padding-bottom: 0;
}
.jr-page .jr-chip { min-height: 2.25rem; padding: var(--space-2) var(--space-3); }
/* dark ink on the fixed teal: ~5.7:1, theme-independent (white was 2.5:1) */
.jr-page .jr-chip-on { color: #04332e; border-color: var(--accent); background: var(--accent); }
.jr-page .jr-rrow { background: var(--bg-elevated); }

.jr-page .jr-pw-tablewrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.jr-page .jr-pw-table { min-width: 38rem; }
.jr-page .jr-pw-table th:first-child,
.jr-page .jr-pw-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: var(--space-2);
  background: var(--bg-elevated);
}

.jr-library-meta {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--tint-1);
}

/* Saved sessions retain their management actions but follow normal cards. */
.jr-session-section { margin-top: var(--space-6); }
.jr-session-section > .jr-section-head { margin-bottom: var(--space-3); }
.jr-page .cc-log-empty {
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--tint-1);
}
.jr-page .cc-log-day { margin-top: var(--space-5); }
.jr-page .jr-card {
  margin: var(--space-2) 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}
.jr-page .jr-actions { gap: var(--space-2); margin-top: var(--space-2); }
.jr-page .cc-log-del { color: var(--danger); background: var(--danger-tint); }
.jr-page .cc-log-del:hover { color: #fff; border-color: var(--danger); background: var(--danger); }
.jr-page .jr-share { background: var(--info-bg); border-color: var(--info); }
.jr-page .jr-share-link { color: var(--info-ink); }

/* Live journal share box (host, under the utility bar) and the watcher
   banner (the only chrome a watcher sees above the timeline). */
.jr-page .jr-live { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); }
.jr-page .jr-live-fp {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
}
.jr-page .jr-live-note,
.jr-page .jr-live-msg { margin: var(--space-2) 0 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-dim); }
/* the window chips inside the share box (arming and live alike) */
.jr-page .jr-live-range-lead { margin-bottom: var(--space-1); }
.jr-page .jr-live-chips { margin: 0 0 var(--space-2); }
/* live only: a chip tapped but not applied — the line says the link is unchanged until Apply */
.jr-page .jr-live-pending { color: var(--text); font-weight: 600; }
.jr-page .jr-live-msg { color: var(--text); }
.jr-watch { margin: 0 0 var(--space-4); padding: var(--space-4); border-color: var(--info); background: var(--info-bg); }
.jr-watch-title { font-weight: 700; font-size: var(--fs-h4); }
.jr-watch p { margin: var(--space-2) 0 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-dim); }
.jr-watch .jr-watch-warn { color: var(--warning-text); }
.jr-watch .jr-watch-stale { margin: var(--space-2) 0 0; }

.jr-privacy {
  margin-top: var(--space-4);
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 5rem;
}
.jr-privacy > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.75rem;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}
.jr-privacy > summary::-webkit-details-marker { display: none; }
.jr-privacy > summary::after {
  content: '\203A';
  margin-left: auto;
  color: var(--text-muted);
  font-size: 1.35rem;
  transition: transform var(--t-fast);
}
.jr-privacy[open] > summary::after { transform: rotate(90deg); }
.jr-privacy-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--tint-2);
}
.jr-privacy b { display: block; color: var(--text); }
.jr-privacy small { display: block; color: var(--text-muted); font-size: var(--fs-label); }
.jr-privacy p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--text-dim); font-size: var(--fs-body-sm); }
.jr-page .jr-privacy .jr-privacy-actions { margin: 0; padding: 0 var(--space-4) var(--space-4); }

/* Journal sync (only rendered where sync is, or was, switched on). The chips,
   the question card and the notes reuse .jr-chip, .ss-card and
   .jr-note-preview. The ONE new visual is the highlight on the create
   panel's two-chip choice when "open my journal" is pressed before choosing:
   the open buttons are never disabled, so the page has to show what is
   missing instead. */
.jr-page .jr-sync-choice { margin: var(--space-4) 0 var(--space-2); padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); scroll-margin-top: 5rem; }
.jr-page .jr-sync-choice--need { border-color: var(--warning-text); background: var(--tint-2); }
.jr-page .jr-sync-choice .jr-resume-hint { display: block; }
.jr-page .jr-sync-choice--need .jr-resume-hint { color: var(--warning-text); font-weight: 600; }
.jr-page .jr-sync-chipwrap { display: inline-flex; min-width: 0; }
.jr-page #jr-sync-chip { white-space: normal; text-align: left; }
.jr-page .jr-sync-ask { margin: 0 0 var(--space-4); scroll-margin-top: 5rem; }
.jr-page .jr-sync-ask-text { margin: 0 0 var(--space-3); color: var(--text-dim); font-size: var(--fs-body-sm); line-height: 1.55; }
.jr-page .jr-sync-ask-text b { color: var(--text); }
.jr-page .jr-privacy .jr-sync-msg { color: var(--text); }
.jr-page .jr-privacy .jr-privacy-actions p { padding: 0; margin: var(--space-2) 0 0; }
.jr-page .jr-privacy .jr-privacy-actions .jr-field-label { display: block; margin: 0 0 var(--space-2); color: var(--text-dim); font-size: var(--fs-body-sm); font-weight: 400; line-height: 1.5; }
.jr-page .jr-sync-copy { font-style: normal; }
/* .ss-btn and .jr-chip set a display of their own, which beats the UA's
   [hidden] rule: a control that does not apply right now must really be gone */
.jr-page :is(.ss-btn, .jr-chip)[hidden] { display: none; }

.jr-page :is(summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* the privacy card clips outward shadows (overflow:hidden), so its summary
   needs an INSET indicator to stay visibly focused */
.jr-privacy > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  box-shadow: none;
}
/* chart bars are BUTTONS now (keyboard-reachable); neutralize UA chrome */
.jr-page .jr-sbar {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
}
/* revealEntry / ingEditReveal scroll targets keep a little air above them */
.jr-page .jr-day,
.jr-page .jr-inged,
.jr-page .jr-pw-month { scroll-margin-top: var(--space-4); }



/* Tap a dose row to edit it in place — the row is the target (the PW app's
   gesture) and the ⋮ at its right edge is the always-visible hint (phones
   have no hover); the editor opens as the row's next sibling, in the same
   field vocabulary as Add experience, one at a time. */
.jr-page .jr-ingc[data-ingedit] {
  cursor: pointer;
  transition: background var(--t-fast);
}
/* The ⋮ sits at the row's vertical centre — the name line's band, since a
   row is always top + name + dose — so only those lines give it room; the
   top line (when · tags) keeps its full width and does not wrap on phones. */
.jr-page .jr-ingc[data-ingedit] .jr-ingc-name,
.jr-page .jr-ingc[data-ingedit] .jr-ingc-dose,
.jr-page .jr-ingc[data-ingedit] .jr-ingc-comp,
.jr-page .jr-ingc[data-ingedit] .jr-ingc-note { padding-right: 1.4rem; }
.jr-page .jr-ingc[data-ingedit]:hover { background: var(--tint-1); }
/* transparent outline: invisible normally, repainted in the system colour under forced-colors */
.jr-page .jr-ingc[data-ingedit]:focus-visible { outline: 2px solid transparent; outline-offset: -2px; box-shadow: var(--focus-ring); }
.jr-page .jr-ingc--open { background: var(--tint-1); }
.jr-page .jr-ingc-pen {
  position: absolute;
  top: 50%;
  right: .2rem;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-muted);
}
.jr-page .jr-ingc[data-ingedit]:is(:hover, :focus-visible) .jr-ingc-pen,
.jr-page .jr-ingc--open .jr-ingc-pen { color: var(--accent); }
.jr-page .jr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.jr-page .jr-day-editing {
  margin-left: .35rem;
  padding: 0 .4rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.jr-page .jr-inged {
  position: relative;
  margin: .1rem 0 var(--space-3) .75rem;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-left: 3px solid var(--c, var(--accent));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated));
}
.jr-page .jr-inged-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.jr-page .jr-inged-head .jr-src-tag { margin: 0; }
.jr-page .jr-inged-title { font-weight: 700; color: var(--text); }
.jr-page .jr-inged .cc-acwrap {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.jr-page .jr-inged .cc-name,
.jr-page .jr-inged .cc-dose { font-size: var(--fs-input-mobile); }
.jr-page .jr-inged .cc-dose { width: auto; flex: 1 1 56px; min-width: 50px; }
/* Dose | Route side by side, time on its own line: about 380px tall on a
   375px phone instead of a full viewport of stacked fields. */
.jr-page .jr-inged .cc-egrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.jr-page .jr-inged .cc-efield { flex: none; min-width: 0; }
.jr-page .jr-inged .cc-efield--time,
.jr-page .jr-inged .jr-inged-est { grid-column: 1 / -1; }
.jr-page .jr-inged .cc-datefield { min-width: 6.5rem; flex: 1 1 6.5rem; }
.jr-page .jr-inged .cc-timeclock { min-width: 4.5rem; flex: 1 1 4.5rem; }
/* Dose grade (Threshold / Light / Common / Strong / Heavy) under the dose
   field of both editors and on a collapsed chip — Cross-Check's tag. The
   layout comes from cross_check.css's .cc-dosetag (this page loads both
   stylesheets); only the five tier colours live here, from the shared
   --tier-* tokens, which already carry light and dark values in ui.css. */
.jr-page .jr-dosetag--threshold { color: var(--tier-threshold); }
.jr-page .jr-dosetag--light { color: var(--tier-light); }
.jr-page .jr-dosetag--common { color: var(--tier-common); }
.jr-page .jr-dosetag--strong { color: var(--tier-strong); }
.jr-page .jr-dosetag--heavy { color: var(--tier-heavy); }
.jr-page .jr-inged-est {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  color: var(--text-dim);
}
.jr-page .jr-inged-name-ro { font-size: var(--fs-small); color: var(--text-muted); }
.jr-page .jr-inged-name-ro b { color: var(--text); }
.jr-page .jr-inged .jr-ingc-comp { padding-left: 0; }
.jr-page .jr-inged-note {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.jr-page .jr-inged-note textarea {
  width: 100%;
  min-height: 3.25rem;
  resize: vertical;
  font: inherit;
  font-size: var(--fs-input-mobile);
  line-height: 1.45;
}
.jr-page .jr-inged .jr-experience-error { margin-top: var(--space-3); }
.jr-page .jr-inged .jr-actions .ss-btn { min-height: 2.5rem; }
.jr-page .jr-inged-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.jr-page .jr-inged-foot .jr-actions { margin-top: 0; }
.jr-page .jr-inged-confirm {
  align-self: stretch;
  text-align: right;
  margin: 0 0 var(--space-2);
  color: var(--danger-ink);
  font-size: var(--fs-small);
  font-weight: 600;
}
.jr-page .jr-inged-hint {
  display: block;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.45;
}
.jr-page .jr-inghint .ss-btn { margin-left: .35rem; vertical-align: middle; font-style: normal; }

/* History and Overview side by side on wide screens — years of months in
   History no longer push the Overview below several screens of scrolling.
   The DOM order stays History -> Overview (the phone order); the Journal
   takes the site's wide page width to make room for two real columns. */
/* Phones and tablets: History and Overview are two views of one card, one
   at a time, switched by a segmented control (the PW app's Journal/Stats
   tabs) at the top of the card — in the flow, not following the scroll —
   and mirrored in the URL hash (#overview) so Back returns. Wide screens
   show both columns and hide the control. */
.jr-page .jr-pw-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 var(--space-4);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.jr-page .jr-pw-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-height: 3.1rem;
  padding: .45rem .5rem;
  border: 0;
  border-radius: calc(var(--radius-lg) - 4px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.jr-page .jr-pw-tab:hover { color: var(--text-dim); background: var(--tint-1); }
.jr-page .jr-pw-tab-l { font-size: var(--fs-body); font-weight: 700; line-height: 1.2; }
.jr-page .jr-pw-tab-s { font-size: var(--fs-micro); line-height: 1.2; opacity: .85; }
.jr-page .jr-pw-tab[aria-selected="true"] {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--accent);
}
.jr-page .jr-pw-tab[aria-selected="true"] .jr-pw-tab-s { color: var(--accent); opacity: 1; }
.jr-page .jr-pw-tab:focus-visible { outline: 2px solid transparent; outline-offset: -2px; box-shadow: var(--focus-ring); }
@media (max-width: 1023px) {
  .jr-page #jr-pw-view[data-tab="history"] .jr-overview-panel { display: none; }
  .jr-page #jr-pw-view[data-tab="overview"] .jr-history-feed { display: none; }
  .jr-page #jr-pw-view[data-tab="overview"] .jr-overview-panel { margin-top: 0; }
}
.jr-page .jr-history-feed { scroll-margin-top: 5rem; }
@media (min-width: 1024px) {
  .jr-page.cc-wrap { --page-max: var(--page-wide); max-width: var(--page-wide); }
  .jr-page #jr-pw-view {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-5);
    align-items: start;
  }
  .jr-page #jr-pw-view .jr-history-feed > .jr-generated-head,
  .jr-page #jr-pw-view .jr-overview-panel { margin-top: 0; }
  .jr-page #jr-pw-view .jr-pw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-page #jr-pw-view .jr-library-meta { grid-column: 1 / -1; }
  .jr-page .jr-pw-tabs { display: none; }
}

@media (max-width: 768px) {
  .jr-page { padding-top: var(--space-4); }
  .jr-page .jr-pw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .jr-page { padding-right: var(--space-2); padding-left: var(--space-2); }
  .jr-lock-card { padding: var(--space-4); }
  .jr-page .cc-log-form { grid-template-columns: 1fr; }
  .jr-utility-bar { align-items: stretch; flex-direction: column; }
  /* four actions now: Add takes its own row, the three ghost buttons share the next */
  .jr-utility-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .jr-utility-actions #jr-add-experience { grid-column: 1 / -1; }
  .jr-experience-section { padding: var(--space-4); }
  .jr-experience-section .jr-section-head { align-items: flex-start; }
  .jr-experience-note textarea { font-size: var(--fs-input-mobile); }
  /* chips keep name + meta on one line each at phone widths */
  .jr-page .jr-experience-row .cc-chip { padding: .6rem .7rem; gap: .5rem; }
  .jr-page .jr-experience-row .cc-done { padding-right: .8rem; padding-left: .8rem; }
  .jr-page .jr-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-page .jr-actions .ss-btn { width: 100%; min-height: 2.5rem; white-space: normal; }
  .jr-page .jr-day > summary { gap: var(--space-2); padding-right: var(--space-1); padding-left: var(--space-1); }
  .jr-page .jr-day-count { max-width: 4rem; overflow: hidden; text-overflow: ellipsis; }
  .jr-overview-panel { padding: var(--space-3); }
  .jr-page .jr-inged { margin-left: .5rem; padding: var(--space-2); }
  /* the month strip drops under the heading on phones */
  .jr-page .jr-pw-month > summary { flex-wrap: wrap; }
  .jr-page .jr-pw-mstrip { order: 3; flex: 1 1 100%; width: auto; margin-top: var(--space-1); }
  /* the two small per-experience buttons keep their own width — in the
     two-column grid "Open in Cross-Check" broke mid-word */
  .jr-page .jr-actions--tight { display: flex; }
  .jr-page .jr-actions--tight .ss-btn { width: auto; white-space: nowrap; }
}

@media (forced-colors: active) {
  .jr-open-dot,
  .jr-day-strip i,
  .jr-rstrip,
  .jr-dot,
  .jr-dgrid i,
  .jr-pw-mstrip i,
  .jr-sbar-fill i { forced-color-adjust: none; }
  /* the fills are kept (forced-color-adjust: none above), so a fill that
     matches the Canvas — dark red on a black scheme — would vanish; a
     system-colour edge keeps every silhouette, and today wears Highlight
     so it is not lost among CanvasText edges */
  .jr-pw-mstrip i { border: 1px solid CanvasText; box-shadow: none; }
  .jr-pw-mstrip i[data-today] { border-color: Highlight; box-shadow: 0 0 0 1px Highlight; }
}