/* cross_check.css — Cross-Check (/combos) page styles.
   Extracted from the former inline <style> in cross_check.html and migrated
   onto the shared ui.css framework (ss- components + design tokens).

   ACCENT: the page is scoped to the Cross-Check brand teal
   (--accent-crosscheck), matching the nav button and the homepage promo.
   --accent-rgb is re-declared so rgba(var(--accent-rgb), …) tints go teal,
   and --focus-ring is re-derived here because custom properties resolve
   var() at the element that defines them (body would keep it pink). */

.cc-wrap {
  --accent: var(--accent-crosscheck);
  --accent-rgb: 20, 184, 166;
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
  max-width: var(--page-narrow);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) 4rem;
}
body.dark .cc-wrap { --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
.cc-wrap h1 { margin-bottom: .25rem; }
.cc-sub { color: var(--text-muted); margin-top: 0; line-height: 1.55; }

.cc-hint { font-size: var(--fs-small); color: var(--text-muted); }

/* ── Session log (keyword-locked, on-device, encrypted) ── */
.cc-log { border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: .85rem 1rem; margin: 1rem 0 .4rem;
  background: color-mix(in srgb, var(--accent-crosscheck) 5%, transparent); }
.cc-log-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .55rem; }
.cc-log-title { font-weight: 700; font-size: var(--fs-label); letter-spacing: .01em; }
.cc-log-badge { font-size: var(--fs-small); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: .08rem .5rem; white-space: nowrap; }
.cc-log-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cc-log-key { flex: 1 1 15rem; min-width: 0; padding: .5rem .7rem; }
.cc-log .cc-hint { display: block; margin-top: .5rem; line-height: 1.45; }

.cc-log-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .5rem; }
.cc-log-status { font-size: .9rem; font-weight: 600; color: var(--success); }
.cc-log-lockbtn { flex: 0 0 auto; }
.cc-log-day { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: .6rem 0 .15rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--border); }
.cc-log-day:first-of-type { margin-top: .2rem; }
.cc-log-day + .cc-log-item { border-top: 0; }
.cc-log-empty { font-size: .9rem; color: var(--text-muted); line-height: 1.5; padding: .2rem 0 .1rem; }
.cc-log-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem 0; border-top: 1px solid var(--border); }
.cc-log-item-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cc-log-when { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); }
.cc-log-subs { font-size: .95rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; }
.cc-log-item-actions { display: flex; gap: .4rem; flex: 0 0 auto; }
.cc-log-mini { padding: .3rem .6rem; font-size: .82rem; }
.cc-log-del:hover { color: var(--danger); border-color: var(--danger); }
.cc-log-jrlink { font-size: .9rem; line-height: 1.5; margin: .2rem 0 0; color: var(--text-muted); }

/* ── Session Journal page (/journal) — cards, notes, share controls ── */
.jr-card { padding: .6rem 0 .7rem; border-top: 1px solid var(--border); }
.cc-log-day + .jr-card { border-top: 0; }
.jr-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.jr-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.jr-shared-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--success); border: 1px solid var(--success); border-radius: 999px;
  padding: .02rem .45rem; margin-left: .4rem; vertical-align: middle; white-space: nowrap; }
.jr-note-preview { display: block; font-size: .85rem; color: var(--text-muted); font-style: italic;
  margin-top: .15rem; line-height: 1.45; overflow-wrap: anywhere; }
.jr-note-edit { margin-top: .5rem; }
.jr-note-edit textarea { width: 100%; min-height: 4.5rem; resize: vertical;
  font: inherit; font-size: .92rem; color: var(--text); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: .5rem .6rem; }
.jr-share { border: 1px dashed var(--border); border-radius: var(--radius-md);
  padding: .55rem .65rem; margin-top: .55rem; }
.jr-share-head { font-size: .88rem; font-weight: 600; }
.jr-share-exp { font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); margin-left: .35rem; }
.jr-share-link { font-family: var(--font-mono); font-size: .76rem; color: var(--text-muted);
  word-break: break-all; margin: .35rem 0 .1rem; line-height: 1.45; }
.cc-watch-note { margin-top: .55rem; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }

/* ── PW Journal archive (import, browser, analytics) ── */
.jr-pw { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.jr-pw-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .5rem; }
.jr-pw-lead { font-size: .88rem; line-height: 1.55; color: var(--text-muted); margin: .3rem 0 .6rem; }
.jr-pw-file { font-size: .88rem; max-width: 100%; }
.jr-pw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: .5rem; margin: .6rem 0 .9rem; }
.jr-tile { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: .5rem .6rem; }
.jr-tile b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.jr-tile span { font-size: .72rem; color: var(--text-muted); }
.jr-tile--wide { grid-column: 1 / -1; }
.jr-tile--wide b { font-size: .95rem; }
.jr-pw-chart { margin: .9rem 0; }
.jr-pw-chart-title { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: .9rem 0 .4rem; }
/* Stacked timeline chart (PW-style "Your Stats"): each bucket is a column of
   per-substance / per-route segments; colors are inlined from the same tables
   as the dots. */
.jr-chart-tabs { display: flex; justify-content: space-between; align-items: center;
  gap: .4rem .8rem; flex-wrap: wrap; margin-bottom: .45rem; }
.jr-chips { display: flex; gap: .25rem; flex-wrap: wrap; }
.jr-chip { font-size: .74rem; padding: .18rem .62rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  cursor: pointer; }
.jr-chip-on { border-color: var(--accent-crosscheck); color: var(--text);
  background: rgba(127, 127, 127, .12); font-weight: 600; }
.jr-chartrow { display: flex; align-items: flex-start; }
/* overflow-y is EXPLICITLY hidden: overflow-x:auto alone forces computed
   overflow-y to auto, and a 1px subpixel-rounding overflow of the axis row
   then draws a pointless full-height vertical scrollbar on Windows. */
.jr-sbars-wrap { overflow-x: auto; overflow-y: hidden; flex: 1 1 auto;
  min-width: 0; scrollbar-width: thin; padding-bottom: 2px; }
.jr-sbars-in { min-width: 100%; width: max-content; position: relative; }
/* horizontal gridlines at the nice-scale ticks, behind the bars */
.jr-grid { position: absolute; left: 0; right: 0; top: 0; height: 132px;
  pointer-events: none; }
.jr-grid i { position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid rgba(127, 127, 127, .18); }
.jr-sbars { display: flex; align-items: flex-end; gap: 2px; height: 132px;
  border-bottom: 1px solid var(--border); position: relative; }
.jr-sbar { flex: 1 0 6px; min-width: 4px; height: 100%; display: flex;
  align-items: flex-end; cursor: pointer; }
/* dashed separator through the plot at week/month starts, like the app */
.jr-sbar-mark { border-left: 1px dashed rgba(127, 127, 127, .3);
  margin-left: -1px; }
.jr-sbar-sel { outline: 2px solid var(--accent-crosscheck); outline-offset: -2px;
  border-radius: 3px; }
.jr-sbar-fill { width: 100%; display: flex; flex-direction: column-reverse;
  border-radius: 3px 3px 0 0; overflow: hidden; }
.jr-sbar-fill i { display: block; min-height: 0; }
/* x-tick labels: one cell per bar, labels only on tick buckets */
.jr-xax { display: flex; gap: 2px; margin-top: .15rem; height: 1.05rem; }
.jr-xc { flex: 1 0 6px; min-width: 4px; position: relative; overflow: visible; }
.jr-xc b { position: absolute; left: 0; top: 0; font-weight: 400;
  font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
/* y-axis labels: fixed gutter right of the scrolling plot */
.jr-ylab { flex: none; display: flex; flex-direction: column;
  justify-content: space-between; height: 132px; padding-left: .4rem;
  font-size: .68rem; color: var(--text-muted); text-align: right;
  font-variant-numeric: tabular-nums; }
.jr-clear { margin-left: .45rem; vertical-align: middle;
  color: var(--accent-crosscheck); border-color: var(--accent-crosscheck); }
/* PW-style window-scoped ranked list under the chart: color strip + faintly
   tinted row (color-mix degrades to no tint on old engines), values right. */
.jr-rlist { margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.jr-rrow { display: flex; align-items: center; gap: .55rem; padding: .42rem .6rem;
  border-radius: 8px; }
.jr-rstrip { flex: none; width: 4px; align-self: stretch; border-radius: 2px; }
.jr-rname { font-weight: 600; font-size: .88rem; min-width: 0; overflow-wrap: anywhere; }
.jr-rval { margin-left: auto; text-align: right; font-size: .84rem;
  font-variant-numeric: tabular-nums; flex: none; max-width: 60%; }
.jr-rsub { display: block; font-size: .74rem; color: var(--text-muted);
  overflow-wrap: anywhere; }
.jr-legend { display: flex; flex-wrap: wrap; gap: .15rem .75rem; margin-top: .45rem; }
.jr-leg { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
/* Per-substance color swatch (import analytics bars, table, chips). The color
   itself is inlined from the user's own PW palette (or the stable fallback
   set); the inset ring keeps pale colors visible on the light theme and the
   dark-theme lift keeps deep colors from sinking into the background. */
.jr-dot { display: inline-block; width: .58em; height: .58em; border-radius: 50%;
  margin-right: .34em; vertical-align: -0.02em; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
body.dark .jr-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
body.dark .jr-dot,
body.dark .jr-sbar-fill i, body.dark .jr-rstrip { filter: brightness(1.14) saturate(1.05); }
.jr-pw-tablewrap { overflow-x: auto; margin: .5rem 0; }
.jr-pw-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.jr-pw-table th { text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); padding: .3rem .55rem .3rem 0; }
.jr-pw-table td { padding: .32rem .55rem .32rem 0; border-top: 1px solid var(--border);
  white-space: nowrap; }
.jr-pw-table td:first-child { white-space: normal; }
.jr-pw-month { border: 1px solid var(--border); border-radius: var(--radius-md);
  margin: .45rem 0; background: var(--bg-alt); }
.jr-pw-month summary { cursor: pointer; padding: .5rem .7rem; font-weight: 600;
  font-size: .92rem; list-style-position: inside; }
.jr-pw-month[open] summary { border-bottom: 1px solid var(--border); }
.jr-pw-mcount { font-weight: 400; font-size: .78rem; color: var(--text-muted); margin-left: .4rem; }
.jr-pw-mbody { padding: .2rem .7rem .5rem; }
.jr-pw-exp { padding: .55rem 0 .6rem; border-top: 1px solid var(--border); }
.jr-pw-exp:first-child { border-top: 0; }
.jr-pw-exp-head { display: flex; flex-direction: column; gap: .1rem; }
/* Ingestions: compact PW-style rows — a colored left bar, when it was
   taken, the name, then "dose route contains:" with one line per resolved
   component. Hairline-separated, no cards inside cards, no dose dots. */
.jr-pw-ings { display: flex; flex-direction: column; margin-top: .15rem; }
.jr-ingc { position: relative; padding: .42rem 0 .48rem .75rem; border-top: 1px solid var(--border); }
.jr-ingc:first-child { border-top: 0; }
.jr-ingc::before { content: ''; position: absolute; left: 0; top: .5rem; bottom: .5rem;
  width: 3px; border-radius: 999px; background: var(--c, var(--border)); }
.jr-ingc-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .76rem; color: var(--text-muted); }
.jr-ingc-when { font-family: var(--font-mono); }
.jr-ingc-top .jr-src-tag { margin: 0; align-self: center; }
.jr-ingc-top .jr-ing-tag { margin-left: auto; }
.jr-ingc-name { font-weight: 700; font-size: .95rem; line-height: 1.3; margin-top: .08rem;
  overflow-wrap: anywhere; }
.jr-ingc-as { font-weight: 400; font-size: .74rem; color: var(--text-muted); }
.jr-ingc-dose { font-size: .84rem; font-variant-numeric: tabular-nums; }
.jr-ingc-dose .jr-ing-contains { font-style: normal; }
.jr-ingc-comp { display: flex; align-items: center; gap: .4rem; font-size: .82rem;
  color: var(--text-muted); padding: .1rem 0 0 .85rem; }
.jr-ingc-note { font-size: .8rem; color: var(--text-muted); font-style: italic;
  margin-top: .12rem; overflow-wrap: anywhere; }
.jr-ing-for { color: var(--text-muted); font-weight: 400; }
.jr-ing-tag { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: 0 .35rem; vertical-align: middle; }
.jr-ing-contains { color: var(--text-muted); }
.jr-pw-exp-title { font-weight: 600; font-size: .9rem; margin: .2rem 0 0 .75rem; }
.jr-actions--tight { margin-top: .25rem; }
.jr-actions--tight .cc-log-mini { white-space: nowrap; }
.jr-pw-ingnotes { font-size: .8rem; color: var(--text-muted); margin-top: .35rem;
  line-height: 1.5; overflow-wrap: anywhere; }
.jr-pw-footer { font-size: .78rem; color: var(--text-muted); margin: .8rem 0 .2rem; }

/* ── Journal code creation (Mullvad-style generated codes) ── */
.jr-lock-error { color: var(--danger); font-size: .88rem; margin: .45rem 0 0; line-height: 1.5; }
/* Two peer entry paths — starting fresh is not a footnote under a code box. */
.jr-start { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .1rem 0 .6rem; }
.jr-start-btn { flex: 1 1 12rem; }
.jr-start-or { font-size: .82rem; color: var(--text-muted); flex: 0 0 auto; }
.jr-code-import { margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed var(--border); }
/* Where a timeline entry came from, in one glance. */
.jr-src-tag { align-self: flex-start; font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 .4rem; margin-bottom: .12rem; }
.jr-src-cc { color: var(--accent); border-color: var(--accent); }
.jr-pw-exp--cc { border-left: 2px solid var(--accent); padding-left: .55rem; }

/* ── Day cards (PW-Journal-style list unit) ── */
.jr-day { border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-alt); margin: .5rem 0; overflow: hidden; }
.jr-day > summary { display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem; cursor: pointer; list-style: none; }
.jr-day > summary::-webkit-details-marker { display: none; }
.jr-day > summary::after { content: '\203A'; color: var(--text-muted);
  font-size: 1.15rem; transition: transform .15s; margin-left: .1rem; }
.jr-day[open] > summary::after { transform: rotate(90deg); }
.jr-day-strip { display: flex; flex-direction: column; align-self: stretch;
  width: 5px; border-radius: 999px; overflow: hidden; flex: 0 0 auto; min-height: 2.3rem; }
.jr-day-strip i { flex: 1 1 auto; background: var(--border); }
.jr-day-main { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1 1 auto; }
.jr-day-date { font-weight: 700; font-size: .95rem; }
.jr-day-subs { font-size: .8rem; color: var(--text-muted); line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jr-day-count { font-size: .78rem; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.jr-day-body { padding: .2rem .75rem .65rem; border-top: 1px solid var(--border); }

/* day chart — drawn to its measured width, so it never scrolls */
.jr-day-chartwrap { overflow: hidden; margin: .5rem 0 .2rem; border-radius: var(--radius-sm); }
.jr-day-chartwrap svg { display: block; max-width: 100%; height: auto; }
.jr-dm { stroke: var(--bg-elevated, var(--bg)); stroke-width: 2; }
.jr-dg { stroke: var(--border); stroke-width: 1; }
.jr-db { stroke: var(--text-muted); stroke-opacity: .55; stroke-width: 1; }
.jr-dt { fill: var(--text-muted); font-size: 11px; text-anchor: middle; }
.jr-dnow { stroke: var(--text); stroke-width: 2; }
.jr-dt-now { fill: var(--text); font-weight: 700; }
.jr-day-chartnote { font-size: .74rem; color: var(--text-muted); margin: .15rem 0 .3rem; }

/* dose-strength dots: each filled dot = one common dose; sub-dose = a half
   dot; the exact multiple is visible text beside them (mobile has no hover) */
.jr-dots { display: inline-flex; align-items: center; gap: .3rem;
  vertical-align: middle; margin-left: .45rem; }
.jr-dgrid { display: inline-grid; grid-template-columns: repeat(4, 8px); gap: 2px; }
.jr-dgrid i { width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1px solid var(--text-muted); opacity: .75; }
.jr-dgrid i.on { background: var(--text); border-color: var(--text); opacity: .9; }
.jr-dgrid i.half { background: linear-gradient(90deg, var(--text) 50%, transparent 50%);
  border-color: var(--text); opacity: .9; }
.jr-dgrid b { font-size: .7rem; color: var(--text-muted); line-height: 7px; }
.jr-dx { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

/* cumulative-dose block */
.jr-day-cumhead { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); margin: .7rem 0 .3rem; }
.jr-day-cum { display: flex; flex-direction: column; }
.jr-cum-row { display: flex; align-items: center; gap: .45rem;
  padding: .4rem 0; border-top: 1px solid var(--border); font-size: .86rem; }
.jr-cum-row:first-child { border-top: 0; }
.jr-cum-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.jr-cum-qty { color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.jr-cum-row .jr-dots { margin-left: .2rem; flex: 0 0 auto; }
.jr-create { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--border); }
.jr-code-lead { font-size: .88rem; line-height: 1.55; color: var(--text-muted); margin: .6rem 0 .5rem; }
.jr-code { font-family: var(--font-mono); font-size: clamp(1.05rem, 3.6vw, 1.45rem);
  font-weight: 700; letter-spacing: .08em; text-align: center; user-select: all;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: .7rem .5rem; margin: 0 0 .55rem; overflow-wrap: anywhere; }

/* ── Substance rows (accordion cards: collapsed chip ↔ expanded editor) ── */
#cc-rows { margin: .4rem 0; }
.cc-acwrap { position: relative; flex: 1 1 auto; }
.cc-ac-item { justify-content: space-between; }     /* alias column hugs the right edge of .ss-suggest-item */
.cc-ac-alias { color: var(--text-muted); font-size: var(--fs-small); text-align: right; }
.cc-dose { width: 66px; flex: 0 0 auto; padding: .6rem .4rem; }
.cc-dosetag { flex: 0 0 auto; min-width: 0; font-size: var(--fs-label); font-weight: 700; line-height: 1.15; color: var(--text-muted); }
.cc-now { flex: 0 0 auto; height: 2.375rem; }       /* match the 38px input row height */
/* Curated dose-danger rows in the editor (PW-style "Risk of death above 10g").
   Red = death, amber = severe harm; .cc-dw-hit marks a row the ENTERED dose
   reaches. Chips get a compact ☠ pill via .cc-chip-dw. */
.cc-dw { margin-top: .5rem; }
.cc-dw:empty { display: none; }
.cc-dw-row { padding: .4rem .6rem; border-left: 3px solid; border-radius: var(--radius-sm); font-size: var(--fs-label); line-height: 1.4; }
.cc-dw-row + .cc-dw-row { margin-top: 3px; }
.cc-dw-danger { background: var(--danger-bg); border-left-color: var(--danger); color: var(--danger-ink); }
.cc-dw-warning { background: var(--warning-bg); border-left-color: var(--warning); color: var(--warning-ink); }
.cc-dw-roa { opacity: .7; font-size: .9em; }
.cc-dw-flag { display: block; font-weight: 700; margin-top: .15rem; }
.cc-dw-hit { outline: 2px solid var(--danger); outline-offset: -2px; }
.cc-dw-warning.cc-dw-hit { outline-color: var(--warning); }
.cc-chip-dw { color: var(--danger); font-weight: 700; }
.cc-chip-dw-warn { color: var(--warning); }
/* "Also past:" line inside the combined dose callout — lesser findings the
   same dose passed on its way to the most severe one. */
.cc-dw-also { display: block; margin-top: .35rem; font-size: .92em; opacity: .85; }
/* "Time taken" is now a single native time picker (clock wheel) — a big, easy
   mobile tap target that opens the OS time wheel, sitting next to "now". */
.cc-datefield { flex: 1 1 8rem; min-width: 7.5rem; padding: .5rem .4rem; height: 2.375rem; font-size: var(--fs-input-mobile); }
.cc-timeclock { flex: 1 1 5rem; min-width: 4.5rem; padding: .5rem .5rem; height: 2.375rem; font-size: var(--fs-input-mobile); }
.cc-card { display: flex; align-items: stretch; gap: .4rem; margin-bottom: .5rem; }
.cc-card.cc-open { display: block; border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: .85rem; background: rgba(var(--accent-rgb), .06); }
.cc-chip { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-alt); color: inherit; cursor: pointer; text-align: left; font: inherit; }
.cc-chip:hover { border-color: var(--accent); }
.cc-chip-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.cc-chip-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; overflow: hidden; }
.cc-chip-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-chip-empty { color: var(--text-muted); font-weight: 400; }
.cc-chip-meta { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-chip-edit { flex: 0 0 auto; font-size: 1.45rem; line-height: .55; color: var(--text-muted); padding: 0 .3rem; align-self: center; }
.cc-chip:hover .cc-chip-edit { color: var(--accent); }
.cc-ed-top { display: flex; gap: .5rem; align-items: stretch; }
.cc-ed-top .cc-acwrap { flex: 1 1 auto; }
.cc-done { flex: 0 0 auto; }
.cc-egrid { display: flex; flex-wrap: wrap; gap: .7rem .9rem; margin-top: .75rem; }
.cc-efield { display: flex; flex-direction: column; gap: .3rem; font-size: var(--fs-small); color: var(--text-muted); flex: 1 1 30%; }
.cc-elabel { font-weight: 600; }
.cc-inwrap { display: flex; align-items: center; gap: .35rem; }
.cc-field-error { color: var(--danger); font-size: .88rem; line-height: 1.45; }  /* inline date-entry refusal (#65) */
.ss-input.cc-datefield[aria-invalid="true"] { border-color: var(--danger); }
.cc-doseunit { font-size: var(--fs-body-sm); color: var(--text-muted); min-width: 1.4rem; }
.cc-roa { padding: .55rem .5rem; font-size: var(--fs-input-mobile); }
.cc-roa-other { width: 100%; margin-top: .35rem; padding: .55rem .5rem; font-size: var(--fs-input-mobile); }   /* free-text route name shown when "Other" is selected */
.cc-ed-foot { margin-top: .75rem; }
/* The open editor's inputs stay at 16px at every width — iOS focus-zoom guard */
.cc-open .cc-dose { width: auto; flex: 1 1 56px; min-width: 50px; font-size: var(--fs-input-mobile); }
.cc-open .cc-name { font-size: var(--fs-input-mobile); }

/* ── Controls ── */
.cc-controls { display: flex; gap: .6rem; margin: .3rem 0 1rem; }

/* ── Summary + timeline ── */
.cc-summary { font-size: .95rem; color: var(--text-muted); margin: .4rem 0 1rem; line-height: 1.5; }
.cc-timeline-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .8rem .6rem .2rem; margin-bottom: 1.2rem; overflow-x: auto; }
#cc-timeline svg { display: block; }
.cc-empty { color: var(--text-muted); text-align: center; padding: 1.5rem; margin: 0; }
.cc-legend { padding: .2rem .4rem .6rem; }          /* layout on top of .ss-legend */
.cc-sw-est { background: transparent; border: 1.5px dashed var(--text-muted); }
.cc-sw-risk { background: rgba(192, 57, 43, .4); }  /* matches the SVG overlap band fill */
.cc-sw-now { background: var(--text); width: 3px; border-radius: 1px; }

/* ── Pair cards ── */
.cc-pair-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: .7rem; }
.cc-banner-sm { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem; color: #fff; }
.cc-banner-caution { color: var(--combo-caution-ink); }  /* dark ink on the yellow Caution banner, like .combo-pill-caution */
.cc-banner-sm .cc-pair { font-weight: 700; }
.cc-status { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: var(--fs-small); }
.cc-body { padding: .8rem 1rem; }
.cc-timing { font-size: var(--fs-body-sm); margin: 0 0 .55rem; }
.cc-note { margin: 0 0 .6rem; line-height: 1.5; font-size: .95rem; }
/* Structural companion to .ss-callout--danger/--warning/--neutral banners */
.cc-flag { margin: .45rem 0; }
.cc-flag strong { display: block; margin-bottom: .12rem; }
.cc-flag p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; }
.cc-attr { font-size: var(--fs-small); color: var(--text-muted); margin-top: 1rem; }
.cc-fade { opacity: .85; }
.cc-muted { color: var(--text-muted); }

/* ── Watch mode (shared-session viewer) ── */
.cc-watch-banner { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), .08); border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.cc-watch-title { font-weight: 700; font-size: var(--fs-h4); margin-bottom: .2rem; }
.cc-watch-banner p { margin: .2rem 0 .7rem; color: var(--text-muted); line-height: 1.5; }
.cc-watchlist { margin-bottom: 1rem; }
.cc-wl-head { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }
.cc-wl-item { padding: .42rem .2rem; border-bottom: 1px solid var(--border); font-size: .98rem; }
.cc-wl-when { color: var(--text-muted); font-size: var(--fs-body-sm); margin-left: .3rem; }
.cc-wl-noamt { font-style: italic; }   /* "dose unknown" — amount was left blank */
/* Watcher "Logged this session" — tappable cards (sorted earliest first) that
   expand to the dose-tier ladder + a link to the full substance page. */
.cc-wl-card { margin-bottom: .5rem; }
.cc-wl-row { width: 100%; display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--bg-alt); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cc-wl-row:hover { border-color: var(--accent); }
.cc-wl-row--plain, .cc-wl-row--plain:hover { cursor: default; border-color: var(--border); }
.cc-wl-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.cc-wl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.cc-wl-name { font-weight: 700; font-size: 1rem; }
.cc-wl-meta { font-size: var(--fs-small); color: var(--text-muted); }
.cc-wl-tier { font-weight: 700; }
.cc-wl-caret { flex: 0 0 auto; color: var(--text-muted); font-size: .9rem; transition: transform .15s ease; }
.cc-wl-card.cc-wl-open .cc-wl-caret { transform: rotate(90deg); }
.cc-wl-detail { display: none; padding: .55rem .85rem .15rem; }
.cc-wl-card.cc-wl-open .cc-wl-detail { display: block; }
.cc-wl-tiers { font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.8; margin-bottom: .5rem; }
.cc-wl-tiers .cc-wl-ton { font-weight: 700; }
.cc-wl-link { display: inline-block; font-size: var(--fs-body-sm); font-weight: 600; }
.cc-livestatus { font-size: .92rem; margin-top: .5rem; line-height: 1.45; }
.cc-live-warn { color: var(--warning-text); }
.cc-live-danger { color: var(--danger); font-weight: 600; }
.cc-live-ok { color: var(--success); }

/* ── Share box ── */
.cc-sharebox { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .8rem 1rem; margin-bottom: 1.2rem; }
.cc-share-link { font-family: var(--font-mono); font-size: var(--fs-small); word-break: break-all; background: var(--bg-alt); padding: .5rem .6rem; border-radius: var(--radius-md); }
.cc-share-note { font-size: var(--fs-body-sm); color: var(--text-muted); margin: .6rem 0 0; line-height: 1.5; }
/* margin-bottom LONGHAND on purpose: the host-link label gets its top gap
   from .ss-mt-4 (ui.css loads first, so a `margin` shorthand here would
   zero it out). The old .2rem top always collapsed into the .85rem seal
   margin anyway. */
.cc-link-label { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: .35rem; line-height: 1.45; }
.cc-copybtn { margin-top: .4rem; }
.cc-host-link { border: 1px dashed var(--accent); }
.cc-endbtn { display: block; margin-top: .9rem; }

/* "This session is sealed" — green success callout with the serif header
   (deliberate recent UX work; preserve the anatomy). */
.cc-seal { margin: 0 0 .85rem; }
.cc-seal-script { display: block; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; letter-spacing: .01em; line-height: 1.3; }
.cc-seal-fp { display: inline-block; font-family: var(--font-mono); font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; margin: .18rem 0; color: var(--text); }
.cc-seal-sub { display: block; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; }

/* ── Mobile: the substance row packs 6 controls; reflow so the name + its
   autocomplete get a full-width line and the rest wrap underneath ── */
@media (max-width: 768px) {
  .cc-log-key, .jr-note-edit textarea { font-size: var(--fs-input-mobile); }  /* 16px inputs stop iOS focus-zoom */
  .cc-egrid { gap: .7rem; }
  .cc-efield { flex: 1 1 100%; }                    /* one editor field per line on phones — easy to tap */
  .cc-inwrap { flex-wrap: wrap; row-gap: .45rem; }  /* time input + unit + "now" wrap instead of clipping */
  .cc-time { flex: 1 1 90px; }
  .cc-dosetag:empty { display: none; }
  .cc-controls { flex-wrap: wrap; gap: .5rem; }
  .cc-controls button { flex: 1 1 calc(50% - .3rem); white-space: nowrap; padding: .65rem .4rem; }
}