/* Dashboard layout: section tabs, the chat rail / chat tab, and the phone pass (375-430px).
   Loaded last on index.html, after its inline styles, viewer.css and chat.css. Uses the brand tokens (brand/tokens.css).
   Structure only: no data or render logic lives here. */

/* ---------- Header + section tabs ---------- */
.topbar { z-index: 30; }
.tabbar { border-top: 1px solid var(--line); }
.tabbar-inner { max-width: 1480px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.tabbar-inner::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; scroll-snap-align: start; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--rapha-accent); border-bottom-color: var(--rapha-accent); }
.tab:focus-visible { outline: 2px solid var(--rapha-accent); outline-offset: -4px; border-radius: 6px; }
.tab-n { font-size: 11px; font-weight: 700; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
  background: var(--high-soft); color: var(--high); }
.tab-n[hidden] { display: none; }

/* ---------- Panels ---------- */
.tab-panel { display: grid; gap: 20px; min-width: 0; }
.tab-panel[hidden] { display: none; }
.main [id] { scroll-margin-top: calc(var(--hdr, 110px) + 12px); }
.wear-row, .tab-panel > .row { align-items: start; }
.card-head h2 { flex: none; }
#whoop-card:empty { display: none; }
.wear-row:has(#whoop-card:empty), .wear-row:has(> .card[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* ---------- Overview: Highlights carousel, one-line check-in, stat tiles as links (overview.js) ---------- */
.highlights[hidden], .checkin-mini:empty { display: none; }
.hl-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 24px) / 3)); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; margin: -2px; overscroll-behavior-x: contain; }
.hl-track::-webkit-scrollbar { display: none; }
.hl-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.hl-card.refer { background: var(--high-soft); border-color: #f3d2bf; }
.hl-card h3 { font-size: 15px; line-height: 1.35; margin: 0; }
.hl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-test { display: inline-flex; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--ink-2); }
.hl-next { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.hl-next b { color: var(--ink); }
.hl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.hl-arrows { display: inline-flex; gap: 4px; }
.card-head a.link-btn, .checkin-mini a.link-btn { text-decoration: none; }
.hl-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer; }
.hl-arrow:disabled { opacity: .35; cursor: default; }
.hl-arrow:not(:disabled):hover { background: var(--surface-2); }

.checkin-mini { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; }
.ci-mini-txt { flex: 1 1 200px; font-size: 14px; }
.checkin-mini .btn { padding: 6px 14px; }

/* Symptoms: the chart is the page; the head wraps as whole items instead of squeezing */
.sym-head { flex-wrap: wrap; row-gap: 6px; }
.sym-head .sym-desc { flex: 1 1 260px; min-width: 0; }
.sym-head .link-btn, .sym-head .seg { flex: none; white-space: nowrap; }

/* "Edit schedule" sheet (checkin-sheet.js): a dialog holding the full check-in card */
.ci-sheet { width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: 16px;
  background: transparent; overflow: visible; }
.ci-sheet::backdrop { background: rgba(20, 24, 22, .45); }
.ci-sheet > .card { max-height: min(88vh, 900px); overflow: auto; margin: 0; border-radius: 16px; padding-top: 18px; }
.ci-sheet > .card .card-head { flex-wrap: wrap; row-gap: 8px; padding-right: 40px; }
.ci-sheet-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 640px) {
  .ci-sheet { width: 100vw; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .ci-sheet > .card { max-height: 92dvh; border-radius: 16px 16px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .ci-sheet-close { width: 44px; height: 44px; }
  .sym-head .sym-desc { flex-basis: 100%; order: 3; }
}

.stat-link { position: relative; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s; }
.stat-link:hover { border-color: var(--rapha-accent-line); box-shadow: 0 2px 10px rgba(15, 118, 110, .12); }
.stat-link:active { transform: translateY(1px); background: var(--surface-2); }
.stat-link:focus-visible { outline: 2px solid var(--rapha-accent); outline-offset: 2px; }
.stat-go { position: absolute; top: 12px; right: 14px; color: var(--rapha-accent); font-weight: 700; font-size: 15px; }
.stat-link .eyebrow { padding-right: 18px; }

@media (hover: none), (max-width: 640px) { .hl-arrows { display: none; } }
@media (max-width: 640px) {
  .hl-track { grid-auto-columns: 84%; margin: -2px -14px; padding: 2px 14px; scroll-padding: 0 14px; }
  .checkin-mini { padding: 10px 12px; }
  .ci-mini-txt { flex-basis: 100%; }
  .checkin-mini .btn { flex: 1; }
  .fg-hint { display: none; }
  /* Flagged chips: 36px tall with an invisible 44px hit area, so a test's chips stay compact */
  #flagged-card .fg-chip { min-height: 36px; padding: 6px 10px; position: relative; }
  #flagged-card .fg-chip::after { content: ""; position: absolute; inset: -4px 0; }
}

/* ---------- Insights tab (insights.js) ---------- */
.ins-list { display: grid; }
.ins-item { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.ins-item:first-child { border-top: 0; padding-top: 0; }
.ins-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ins-head h3 { flex: 1 1 260px; font-size: 15px; }
.ins-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ins-trend, .ins-reviewed { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.ins-trend.ok { background: var(--ok-soft); color: var(--ok); }
.ins-trend.bad { background: var(--high-soft); color: var(--high); }
.ins-reviewed { background: var(--rapha-accent-soft); color: var(--rapha-accent); }

/* Long source ids and URLs wrap inside their card instead of widening the page */
.srcs ul { grid-template-columns: minmax(0, 1fr); }
.srcs li { flex-wrap: wrap; min-width: 0; }
.srcs li > *, .wu, .pop .t, .pop .id { overflow-wrap: anywhere; }
.srcs li .id { white-space: normal; }
.signal { grid-template-columns: minmax(0, 1fr); }
/* Signal titles and their confidence pill: the pill keeps one line and drops under a long title instead of squeezing */
.signal > div:first-child, .tsig-head { flex-wrap: wrap; row-gap: 6px; }
.signal > div:first-child > h3, .tsig-head h3 { flex: 1 1 240px; min-width: 0; }
.conf, .ins-trend, .ins-reviewed, .hl-test { white-space: nowrap; flex: none; }
.cite { max-width: 100%; }
@media (max-width: 640px) { .cite { white-space: normal; text-align: left; } }

/* ---------- Chat: rail from 1100px, its own tab below ---------- */
.chat-fab { display: none; }
@media (min-width: 1100px) {
  .tab-chat { display: none; }
}
@media (max-width: 1099px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; position: static; }
  body[data-tab=chat] .main { display: none; }
  body[data-tab=chat] .rail { display: block; height: calc(100dvh - var(--hdr, 110px) - 32px); min-height: 420px; }
  .chat-fab { position: fixed; z-index: 35; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
    background: var(--rapha-accent); color: #fff; font-weight: 650; font-size: 15px; text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 118, 110, .35), 0 2px 6px rgba(0, 0, 0, .12); }
  .chat-fab:hover { background: var(--rapha-accent-hover); }
  body[data-tab=chat] .chat-fab { display: none; }
  .main { padding-bottom: 72px; }  /* room for the floating button */
}

/* ---------- Grids that the inline styles leave too wide ---------- */
@media (max-width: 1280px) { .tests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .tests, .row-2-1, .row-1-1, .overview, .flagged-grid { grid-template-columns: minmax(0, 1fr); }
  .card-head { flex-wrap: wrap; row-gap: 6px; }
  .markers { max-height: none; overflow: visible; padding-right: 0; }
}

/* ---------- Phones (up to ~640px) ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }
  .layout { padding: 12px 12px 24px; gap: 12px; }
  .main, .tab-panel, .row { gap: 12px; }
  .card { padding: 14px; border-radius: 12px; }

  /* Header: one row (brand mark, patient), tabs underneath */
  .topbar-inner { flex-wrap: nowrap; padding: 8px 12px; gap: 10px; }
  .brand-name { display: none; }
  .patient { margin-left: 0; padding-left: 10px; min-width: 0; }
  .patient-meta { min-width: 0; }
  .patient-meta b, .patient-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .topbar .spacer { display: none; }
  .tabbar-inner { padding: 0 4px; gap: 0; }
  .tab { padding: 0 12px; font-size: 14.5px; }

  /* Type: nothing below 12px, body copy 14-16px */
  .small, .muted.small, .vendor, .marker .ref, .tl-month, .tl-protocol span, .wu-meta, .srcs li { font-size: 12px; }
  .eyebrow, .bullets .area, .status, .pop .k { font-size: 11.5px; }
  .wu, .takeaways li, .sum-list { font-size: 15px; }
  .marker .name, .marker .val { font-size: 14px; }
  .howdoing { padding: 18px 16px; }
  .howdoing h2 { font-size: 20px; margin-bottom: 14px; }
  .bullets li { font-size: 15px; grid-template-columns: 30px 1fr; gap: 10px; }
  .bullets .ic { width: 30px; height: 30px; margin-top: 12px; }
  .bullets .next { font-size: 13.5px; }
  .standing { padding: 16px; }
  .standing-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat .v { font-size: 22px; }
  .view-note { padding: 12px; gap: 10px; }
  .wu-meta { flex-wrap: wrap; row-gap: 4px; }
  /* Signal titles: the confidence pill goes under the title instead of squeezing it */
  .tsig-head, .signal > div:first-child { flex-wrap: wrap; row-gap: 6px; }
  .tsig-head h3, .signal > div:first-child > h3 { flex: 1 1 100%; font-size: 15px; }
  .signal > div:first-child > .spacer { display: none; }
  .conf { white-space: nowrap; }
  .view-note .grow { min-width: 0; flex-basis: 100%; }

  /* Tap targets: 44px */
  .btn, .seg button, .chip, .fg-chip, .fg-more, .suggest button, .ch-new, .ch-title, .whoop .wd-item button,
  .whoop .wh-foot button, .whoop .wh-connect { min-height: 44px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; font-size: 14.5px; }
  .link-btn { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
  .seg { padding: 3px; }
  .seg button { padding: 6px 12px; font-size: 13.5px; }
  .chip { padding: 6px 12px; font-size: 13px; }
  .fg-list { gap: 8px; }
  .fg-chip { padding: 8px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
  .cite { font-size: 12px; padding: 2px 8px; line-height: 1.6; }
  .ch-acts button { width: 44px; height: 44px; }
  /* Small inline controls inside dense rows: a 44px hit area without taller rows */
  .marker .pv-mk-btn, .marker .mi-link, .marker .name.pv-open, .readmore > summary, .srcs summary { position: relative; }
  .marker .pv-mk-btn::after, .marker .mi-link::after, .readmore > summary::after, .srcs summary::after { content: ""; position: absolute; inset: -14px -8px; }
  .marker .pv-mk-btn { font-size: 13px; padding: 2px 0; }
  .ch-open { min-height: 44px; }
  .tl-event .lbl { font-size: 11px; }

  /* Wide content scrolls inside its card, never the page */
  .timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 8px 14px 4px; }
  .tl-track { min-width: 620px; }
  .tl-legend { display: none; }
  /* Protocol table: each supplement becomes a two-line row (name + dose, then when + last 7 days) */
  table.supps, table.supps tbody { display: block; }
  table.supps thead { display: none; }
  table.supps tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.supps td { display: block; padding: 0; border: 0; font-size: 14px; }
  table.supps td:nth-child(2) { text-align: right; font-weight: 600; }
  table.supps td:nth-child(3) { color: var(--ink-2); font-size: 13.5px; }
  table.supps td:nth-child(4) { align-self: center; }
  table.supps .why { font-size: 12px; }
  body .pr-row { grid-template-columns: minmax(0, 1fr); }
  body .pr-row small { font-size: 12px; }
  body .pr-taps button { min-height: 44px; flex: 1; font-size: 14px; }
  body .pr-foot { font-size: 12px; }
  .metric-row, .whoop .wh-row { grid-template-columns: 84px minmax(0, 1fr) 64px; }


  /* Chat tab: input at 16px so iOS doesn't zoom; suggestions scroll sideways */
  body[data-tab=chat] .layout { padding: 8px 8px 0; }
  body[data-tab=chat] .rail { height: calc(100dvh - var(--hdr, 110px) - 8px); }
  body[data-tab=chat] .chat { border-radius: 12px 12px 0 0; }
  .chat-head { padding: 10px 12px; }
  .chat-head > .muted.small { display: none; }
  .chat-body { padding: 12px; }
  .msg { font-size: 15px; max-width: 96%; }
  .chat-foot { padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  .suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px 8px; padding: 0 10px; }
  .suggest::-webkit-scrollbar { display: none; }
  .suggest button { flex: none; font-size: 13px; padding: 6px 12px; }
  .input input { font-size: 16px; min-height: 46px; }
  .input button { min-height: 46px; min-width: 64px; }
  .ci-form input[type=time], .ci-form input[type=text], .ci-form select { font-size: 16px; min-height: 44px; }

  /* Citation popovers: a bottom sheet instead of a floating box */
  .pop { position: fixed !important; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none;
    max-height: 72vh; overflow: auto; z-index: 1200; border-radius: 16px 16px 0 0; padding: 18px 16px max(18px, env(safe-area-inset-bottom));
    font-size: 14px; box-shadow: 0 -12px 40px rgba(0, 0, 0, .22); }
  .pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: -8px auto 12px; }
  .pop .q { max-height: 40vh; }
  .pop .q.value { font-size: 16px; }
  .pop a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Check-in form modal: full screen */
  .ci-modal { padding: 0; z-index: 1100; }
  .ci-modal .sheet { max-width: none; height: 100dvh; border-radius: 0; }
  .ci-modal .bar { min-height: 52px; }
}

/* ---------- PDF viewer + Explain panel (viewer.js): a full-screen sheet on phones and tablets ---------- */
.pv-backdrop { z-index: 1100; }
@media (max-width: 900px) {
  .pv { width: 100%; height: 100dvh; }
  .pv-head { padding: 8px 12px; gap: 8px; }
  .pv-head h3 { font-size: 15px; flex: 1 1 60%; min-width: 0; }
  .pv-head .spacer { display: none; }
  .pv-head #pv-orig { display: inline-flex; align-items: center; min-height: 44px; }
  .pv-close { width: 44px; height: 44px; font-size: 20px; order: -1; }
  .pv-head .pv-explain-btn.in-head { width: 100%; min-height: 44px; font-size: 14px; }
  .pv-doc { padding: 8px; }
  .pv-explain-btn { font-size: 13px; padding: 8px 12px; max-width: 70vw; }
  .pv-panel { padding: 14px 14px max(14px, env(safe-area-inset-bottom)); }
  .pv-main.with-panel { grid-template-rows: minmax(0, 45fr) minmax(0, 55fr); }
}