/* 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; }

/* ── Session-start row ── */
.cc-startrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.cc-startrow label { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.cc-start { width: auto; padding: .45rem .6rem; }   /* sizing on top of .ss-input */
.cc-hint { font-size: var(--fs-small); color: var(--text-muted); }

/* ── 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 */
/* "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-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 */
.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-start { 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; }
}