/* ============================================
   Atronics Labs / Jessie — Design Tokens
   ============================================ */

:root {
  /* Surfaces — cream base with pure white cards */
  --bg: #FBF8EE;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-inset: #F3EFE1;

  /* Ink — pure near-black to match logo */
  --ink-1: #0A0A0A;
  --ink-2: #1F1F1F;
  --ink-3: #4A4A52;
  --ink-4: #7A7A82;
  --ink-5: #B8B8BE;

  /* Hairlines — stronger, more visible outline aesthetic */
  --line-1: rgba(10, 10, 10, 0.14);
  --line-2: rgba(10, 10, 10, 0.28);
  --line-3: rgba(10, 10, 10, 0.48);
  --line-strong: #0A0A0A;

  /* Accent (tweakable) — Atronics Lime brand.
     Two tokens:
       --accent       = the pure lime fill/graphic color (#D4FF3A). Use for
                        chip fills, dots on dark bg, large graphic elements,
                        button backgrounds. NEVER use as text color on cream.
       --accent-fg    = the foreground-safe accent used as TEXT color. On
                        light slides this is a deep olive-lime (legible on
                        cream). On dark slides it flips to pure lime. Set
                        by scope below. */
  --accent: #D4FF3A;
  --accent-on-light: #3D5200;    /* deep olive-lime for text on cream */
  --accent-on-dark:  #D4FF3A;    /* pure lime for text on near-black */
  --accent-ink:      #0A0A0A;    /* on lime chip fills use black text */
  --accent-tint:     rgba(212, 255, 58, 0.22);
  --accent-tint-2:   rgba(212, 255, 58, 0.35);
  /* Default foreground accent for the light context (root). */
  --accent-fg: var(--accent-on-light);

  /* Signal colors — muted, clinical */
  --sig-red: #B42318;
  --sig-red-tint: rgba(180, 35, 24, 0.08);
  --sig-amber: #B54708;
  --sig-amber-tint: rgba(181, 71, 8, 0.08);
  --sig-green: #067647;
  --sig-green-tint: rgba(6, 118, 71, 0.08);

  /* Type */
  --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11", "tnum" 0;
}

/* Keep the roomy desktop canvas the design was drawn at, but only enforce it
   on genuinely large screens. Below this, the responsive rules further down
   take over so nothing forces horizontal scroll on tablet/phone. */
@media (min-width: 1200px) {
  html, body { min-width: 1440px; }
}

/* Never let anything cause horizontal scroll on small screens. */
@media (max-width: 1199px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* Serif utility */
.serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Tabular numerals for deltas */
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================
   Layout Shell
   ============================================ */

.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-elevated);
  border-right: 1px solid var(--line-1);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.side-nav__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-1);
}

.side-nav__wordmark {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
}

.side-nav__sub {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}

.side-nav__section-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 20px 12px 8px;
  font-weight: 600;
}

.side-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.side-nav__item:hover { background: var(--bg-inset); color: var(--ink-1); }
.side-nav__item.is-active {
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.side-nav__item.is-active .side-nav__num { color: var(--accent); }

.side-nav__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  width: 20px;
  letter-spacing: 0.02em;
}

.side-nav__foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line-1);
  font-size: 11px;
  color: var(--ink-4);
  line-height: 1.5;
}

/* ============================================
   Main
   ============================================ */

.main {
  min-width: 0;
}

.section {
  padding: 80px 72px;
  border-bottom: 1px solid var(--line-1);
  scroll-margin-top: 0;
}
.section--dark {
  background: #0A0A0A;
  color: #E9E7DF;
  border-bottom-color: rgba(255,255,255,0.06);
  /* Dark section: pure lime for accent text */
  --accent-fg: var(--accent-on-dark);
}
.section--warm {
  background: var(--bg-elevated);
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 20px;
}
.section--dark .section__eyebrow { color: rgba(255,255,255,0.55); }

.section__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.section__title {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 22ch;
  text-wrap: pretty;
}

.section__lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 60ch;
  margin: 0 0 48px;
}
.section--dark .section__lede { color: rgba(255,255,255,0.65); }

/* ============================================
   Delta — the core visual language
   ============================================ */

.delta {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.delta__from {
  color: var(--ink-4);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-5);
}

.delta__arrow {
  color: var(--accent-fg);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.7em;
  transform: translateY(-0.08em);
}

.delta__to {
  color: var(--ink-1);
  font-weight: 500;
}

.delta--xl { font-size: 128px; line-height: 1; }
.delta--lg { font-size: 72px; line-height: 1; }
.delta--md { font-size: 40px; line-height: 1; }
.delta--sm { font-size: 22px; line-height: 1; }

.chip-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ============================================
   Phone frame (bare screen, no bezel)
   ============================================ */

.phone {
  width: 340px;
  height: 720px;
  background: var(--bg-card);
  border-radius: 40px;
  box-shadow:
    0 1px 2px rgba(14,17,22,0.04),
    0 24px 60px -20px rgba(14,17,22,0.18),
    0 8px 20px -8px rgba(14,17,22,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone__status {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.phone__status-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone__screen {
  flex: 1;
  padding: 12px 24px 28px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.phone__caption {
  text-align: center;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}

/* ============================================
   Tablet frame
   ============================================ */

.tablet {
  width: 100%;
  max-width: 1180px;
  aspect-ratio: 4 / 3;
  background: var(--bg-card);
  border-radius: 28px;
  box-shadow:
    0 1px 2px rgba(14,17,22,0.04),
    0 30px 80px -24px rgba(14,17,22,0.22),
    0 10px 24px -10px rgba(14,17,22,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-1);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
  text-decoration: none;
  line-height: 1;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--ink-1);
  color: var(--bg-elevated);
}
.btn--primary:hover { background: #000; }

.btn--accent {
  background: var(--accent);
  color: white;
}

.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover { background: var(--bg-inset); }

.btn--full { width: 100%; }
.btn--lg { padding: 18px 24px; font-size: 16px; }

/* ============================================
   Status pills
   ============================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.pill--red { background: var(--sig-red-tint); color: var(--sig-red); }
.pill--red .pill__dot { background: var(--sig-red); }
.pill--amber { background: var(--sig-amber-tint); color: var(--sig-amber); }
.pill--amber .pill__dot { background: var(--sig-amber); }
.pill--green { background: var(--sig-green-tint); color: var(--sig-green); }
.pill--green .pill__dot { background: var(--sig-green); }
.pill--neutral { background: var(--bg-inset); color: var(--ink-3); }
.pill--neutral .pill__dot { background: var(--ink-4); }

/* ============================================
   Timeline (shared)
   ============================================ */

.tl {
  position: relative;
  padding-left: 32px;
}
.tl::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  border-left: 1.5px dashed var(--line-3);
}
.tl__row {
  position: relative;
  padding-bottom: 28px;
}
.tl__row:last-child { padding-bottom: 0; }
.tl__dot {
  position: absolute;
  left: -32px;
  top: 6px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--line-3);
}
.tl__dot--accent {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.tl__dot--sig {
  background: var(--sig-red);
  border-color: var(--sig-red);
  box-shadow: 0 0 0 4px var(--sig-red-tint);
}
.tl__time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.tl__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 6px;
}
.tl__body {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ============================================
   Card
   ============================================ */

.card {
  background: var(--bg-card);
  border: 1.5px solid var(--ink-1);
  border-radius: var(--r-lg);
  padding: 24px;
}

/* Utility */
.stack { display: flex; flex-direction: column; }
.row { display: flex; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.mono { font-family: var(--mono); }
.text-ink-3 { color: var(--ink-3); }
.text-ink-4 { color: var(--ink-4); }
.text-accent { color: var(--accent); }
.uc { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 600; }

/* Hide scrollbar utility */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { scrollbar-width: none; }

/* ============================================
   Continuity motif — the dotted horizontal thread
   ============================================ */

.continuity {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.continuity__line {
  flex: 1;
  border-top: 1.5px dashed var(--line-3);
}

/* SVG stroke helper */
.stroke-accent { stroke: var(--accent); }

/* ============================================
   Motion — check-in confirmations fade/slide in
   Used by the patient-app check-in outcome banners.
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   RESPONSIVE LAYER  (tablet + phone)
   Added for the mobile pass. Desktop (>=1200px) is untouched — every rule here
   lives inside a max-width media query. Targets stable hooks only
   (.shell, .side-nav, .section, .phone, .tablet, section IDs, SVG diagrams).
   ============================================================================ */

/* ---------- TABLET & DOWN (<=1199px): collapse the sidebar to a top bar ---- */
@media (max-width: 1199px) {
  .shell {
    display: block;                 /* drop the 260px | 1fr grid */
  }

  .side-nav {
    position: sticky;
    top: 0;
    height: auto;
    width: 100%;
    z-index: 50;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-right: none;
    border-bottom: 1px solid var(--line-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }

  /* Brand stays put on the left; nav items become a horizontal scroll strip */
  .side-nav__brand {
    margin: 0 8px 0 0;
    padding: 0 12px 0 0;
    border-bottom: none;
    border-right: 1px solid var(--line-1);
    flex-shrink: 0;
    gap: 2px;
  }
  .side-nav__wordmark { font-size: 20px; }
  .side-nav__sub { font-size: 9px; }

  /* The "Prototype" label and the confidential footer are desktop-rail chrome
     that doesn't belong in a horizontal bar — hide on tablet/phone. */
  .side-nav__section-label,
  .side-nav__foot { display: none; }

  .side-nav__item {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
  }
  .side-nav__num { display: none; }

  /* Section padding tightens as the viewport narrows */
  .section { padding: 56px 40px; }
  .section__title { font-size: 44px; max-width: none; }
  .section__lede { font-size: 17px; max-width: none; }

  /* The 3-lane Epic architecture diagram (Patient → Jessie → Epic) is cramped
     below the desktop canvas — stack the lanes into a top-to-bottom flow, which
     matches the diagram's own left-to-right reading order. */
  .rgrid-lanes { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ---------- PHONE (<=768px) ------------------------------------------------ */
@media (max-width: 768px) {
  .section { padding: 44px 20px; }

  .section__title { font-size: 32px; line-height: 1.06; }
  .section__lede  { font-size: 15px; margin-bottom: 32px; }
  .section__eyebrow { font-size: 10px; margin-bottom: 14px; }

  /* Generic: any 2+ column inline grid inside a section stacks on phone.
     Inline styles win over classes, so we need !important here. The
     .rgrid / .rgrid-* helper classes (added in the JSX) are the primary,
     surgical hooks; this is a safety net for un-hooked grids. */
  .main [style*="grid-template-columns"].rgrid,
  .main .rgrid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Phone mockup frame — never wider than the viewport, keep aspect */
  .phone {
    width: 100%;
    max-width: 340px;
    height: auto;
    aspect-ratio: 340 / 720;
    margin: 0 auto;
  }
  .phone__screen { overflow-y: auto; }

  /* Tablet mockup frame — the care-team dashboard + patient-detail views are
     intentionally wide, side-by-side layouts ("two columns, never merged").
     Rather than reflow and break that fidelity, we let the tablet keep a
     comfortable min width and scroll horizontally *within its own wrapper*. */
  .tablet-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;            /* let it bleed to the section edges */
    padding: 0 20px 8px;
    scrollbar-width: thin;
  }
  .tablet-scroll .tablet {
    min-width: 720px;           /* keeps the dashboard readable; swipe to see all */
  }

  /* Section-scoped: force the known two/three-column section bodies to stack.
     These IDs are stable (set in JSX). We target their DIRECT grid child. */
  #sarah  .rgrid,
  #loop   .rgrid,
  #access .rgrid,
  #engine .rgrid { grid-template-columns: 1fr !important; }

  /* rgrid-2 stays two-up (e.g. stat pairs) but with a tighter gap. */
  .rgrid-2 { gap: 16px !important; }

  /* rgrid-3 (3-up card rows) reflow to a single column on phone. */
  .rgrid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* rgrid-4 (e.g. the 4-beat story strip) reflow to a single column on phone. */
  .rgrid-4 { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* rgrid-4to2 (compact 4-up stat/vital cells) become 2-up on phone. */
  .rgrid-4to2 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* rgrid-6to2 (the six-step path strip) becomes 2-up on phone. */
  .rgrid-6to2 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* rgrid-devices (device → arrow → device) stacks vertically on phone. */
  .rgrid-devices { grid-template-columns: 1fr !important; gap: 12px !important; justify-items: center; }
  .rgrid-devices > * { width: 100%; }

  /* Orbital engine hover-detail panel: on touch there is no hover, so this
     floating panel only ever shows filler text and its absolute `bottom:-140`
     offset creates an awkward overlap + void. Hide it on phone; the six node
     labels in the diagram already carry the meaning. */
  .orbital-detail { display: none !important; }

  /* rgrid-label (160px label + body rows) stack with a tight gap. */
  .rgrid-label { grid-template-columns: 1fr !important; gap: 6px !important; }

  /* Patient-app screen navigator: horizontal scroll instead of overflow. */
  .screen-nav {
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .screen-nav::-webkit-scrollbar { display: none; }
  .screen-nav > button { flex-shrink: 0; }

  /* SVG diagrams (orbital engine, multi-access, architecture) become fluid */
  .main svg[viewBox] { max-width: 100%; height: auto; }

  /* Long mono strings inside architecture nodes / status banners must wrap
     rather than get clipped by their card on narrow screens. */
  #access div, #engine .rgrid div { overflow-wrap: anywhere; }

  /* Buttons: comfortable tap targets, full width where it reads as a CTA */
  .btn--lg { padding: 16px 20px; font-size: 15px; }

  /* Big serif display numbers/deltas shouldn't overflow small screens */
  .delta--xl { font-size: 84px; }
  .delta--lg { font-size: 56px; }

  /* Timelines / cards padding trims */
  .card { padding: 18px; }
}

/* ---------- SMALL PHONE (<=430px) ----------------------------------------- */
@media (max-width: 430px) {
  .section { padding: 40px 16px; }
  .section__title { font-size: 28px; }
  .side-nav { padding: 10px 14px; }
  .side-nav__item { padding: 7px 10px; font-size: 12.5px; }
  .delta--xl { font-size: 66px; }
  .delta--lg { font-size: 48px; }

  /* Compact architecture card clusters: reflow so labels aren't squished.
     3-up minis -> single column; 2-up node pairs -> single column. */
  .rgrid-3to1 { grid-template-columns: 1fr !important; }
  .rgrid-2to1 { grid-template-columns: 1fr !important; }
}

/* ---------- VERY SMALL PHONE (<=360px) ------------------------------------ */
@media (max-width: 360px) {
  .section { padding: 36px 14px; }
  .section__title { font-size: 25px; }
}