/* Vault UI — "C2: Quiet Elevation" (design.md, founder-locked 2026-08-16).
   Loaded AFTER demo.css (see base.html) — this file overrides demo.css's
   shared tokens (--accent, --border, --text-*, --radius, --font, ...) for
   vault pages only, since demo.css itself stays untouched (still serves the
   extraction demo unchanged). New C2-only tokens are prefixed --v-. */

/* ── Fonts: self-hosted Manrope, same pattern as apps/marketing/fonts ──── */

@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/Manrope-Regular-Latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/Manrope-Medium-Latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/Manrope-SemiBold-Latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Palette + shared-token overrides (vault pages only) ────────────────── */

:root {
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg: #ffffff;
  --surface: #f0f5f6;
  --border: #b2cfd3;
  --border-strong: #b2cfd3;

  --text-primary: #12181f;
  --text-secondary: #3e4a57;
  /* Was demo.css's #888888 (3.54:1 on white, fails AA). Darkened for vault
     pages only so every vault-panel-title/small-label use of --text-muted
     clears AA 4.5:1, instead of propagating the known pre-existing failure
     (see design.md "Vault trend chart" contrast section) into a brand-new
     visual pass. */
  --text-muted: #5a6673;

  --accent: #1a7395;
  --slate: #46565f;
  --font-mono: var(--font);
  --accent-light: #e0eced;

  --radius: 14px;
}

html, body {
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* C2-only tokens (new markup introduced by this pass) */
:root {
  --v-accent-tint-strong: #d1e2e5;
  --v-card-shadow: 0 1px 3px rgba(18, 24, 31, .06), 0 4px 12px rgba(18, 24, 31, .05);
  --v-radius-group: 16px;
  --v-row-pad: 12px 16px;
  --v-group-gap: 18px;
  --v-green-bg: #e8f5e9;
  --v-green: #2e7d32;
}

/* ── Header + nav ─────────────────────────────────────────────────────── */

/* Shown on every vault page until real data is allowed (CTO-152). The DB only
   accepts hypothetical profiles, but nothing stops a tester typing their real
   medicines into one, so the page has to say so. */
.vault-test-banner {
  margin: 0;
  padding: 8px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.vault-main {
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .vault-main {
    padding: 16px;
  }
}

.vault-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--v-group-gap);
}

.vault-panel-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text-primary);
}

.vault-panel-title--sm {
  font-size: 14px;
}

.vault-panel-subtitle {
  margin-top: 32px;
  margin-bottom: 4px;
}

.vault-empty {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Grouped-card primitives (Add screen, med rows, form containers) ────
   Ported directly from the C2 mockup (docs/planning/product/mockups/
   c-var-2.html): a "group" is a floating white card with soft elevation
   (no border), rows inside it are hairline-divided, last row loses its
   divider. */

.group-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: var(--v-group-gap) 2px 8px;
}

.group-label:first-child {
  margin-top: 0;
}

.group {
  background: var(--bg);
  border-radius: var(--v-radius-group);
  box-shadow: var(--v-card-shadow);
  overflow: hidden;
}

.g-row {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: var(--v-row-pad);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

.group .g-row:last-child {
  border-bottom: none;
}

.g-row:hover {
  background: var(--surface);
}

.g-row-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--v-accent-tint-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.g-row-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.g-row-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.g-row-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.g-row-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 1px;
  line-height: 1.45;
}

.g-row-chev {
  flex: none;
  color: var(--border-strong);
  font-size: 18px;
  line-height: 1;
}

/* "Coming soon" card (photo ingest, disabled by default — VAULT_PHOTO_
   INGEST_ENABLED gate, CTO-081). Founder flagged the prior pill as
   oversized/awkward; this is a small chip sized to its text, aligned
   inline with the row's heading, not a full-width banner. */

.soon-card {
  margin-top: 14px;
  background: var(--accent-light);
  border: 1.5px dashed var(--v-accent-tint-strong);
  border-radius: var(--v-radius-group);
  padding: 15px 16px;
  display: flex;
  gap: 13px;
  align-items: center;
}

.soon-card-icon {
  background: var(--bg);
}

.soon-card-txt h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.soon-card-txt p {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.45;
}

.chip-soon {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn-extract {
  background: var(--accent);
  border-radius: var(--radius);
  padding: 12px 22px;
  font-weight: 600;
}

.btn-extract:hover {
  opacity: .92;
}

/* A flat, quiet action — matches the mockup's "Related ›" summary link:
   no border, no fill, just accent-colored text. Used for the Source/
   Related buttons on the medications list (htmx contract unchanged —
   this is a class/style-only change, hx-get/hx-target/hx-swap and the
   button element itself are untouched in the templates). */
.btn-source {
  border: none;
  background: transparent;
  padding: 4px 2px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--accent);
  border-radius: 0;
}

.btn-source:hover {
  background: transparent;
  text-decoration: underline;
}

.btn-source + .btn-source {
  margin-left: 12px;
}

.vital-back-link {
  color: var(--text-muted);
  font-weight: 500;
}

.vital-back-link:hover {
  color: var(--accent);
}

/* ── Related/citation panels — flat, no fill, colored left-border lines
   only (C2's distinguishing citation register: docs/planning/product/
   mockups/c-var-2.html .rel-line). Legal/clinical copy inside is byte-
   identical (packages/vault/relations_view.py) — only the container/line
   styling changes here. ───────────────────────────────────────────── */

.vault-evidence-box,
.vault-relations-box {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg);
  border: none;
  border-radius: var(--v-radius-group);
  box-shadow: var(--v-card-shadow);
  font-size: 13px;
}

.vault-evidence-title,
.vault-relations-group-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.vault-relations-tier1 .vault-relations-group-title {
  color: var(--accent);
}

.vault-evidence-snippet,
.vault-relations-box li {
  list-style: none;
  margin-left: 0;
  font-size: 12.5px;
  color: var(--text-primary);
  padding: 7px 10px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface);
  border-radius: 6px;
  margin-bottom: 6px;
  line-height: 1.5;
}

.vault-evidence-snippet {
  border-left-color: var(--accent);
}

.vault-relations-tier1 li {
  border-left-color: var(--v-green);
}

.vault-relations-tier2 li {
  border-left-color: var(--accent);
}

.vault-relations-group + .vault-relations-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.vault-relations-tier2-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}

.vault-relations-disclaimer {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.vault-relations-nlm-disclaimer {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.vault-relations-attribution {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}

.vault-relations-attribution a {
  color: var(--text-muted);
}

.vault-evidence-empty,
.vault-relations-empty {
  color: var(--text-muted);
  box-shadow: none;
  background: var(--surface);
}

/* ── Photo ingest (the confirm screen is in vault-confirm.css) ────────── */

.vault-synthetic-banner {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--accent-light);
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Vitals quick-form ────────────────────────────────────────────────── */

.vault-add-vital-cta {
  padding: 16px;
  margin-bottom: 20px;
  border: none;
  border-radius: var(--v-radius-group);
  box-shadow: var(--v-card-shadow);
  background: var(--bg);
}

.vault-add-vital-cta .btn-extract {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 8px;
}

.vital-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.vital-tile {
  display: block;
  padding: 18px 12px;
  text-align: center;
  border: none;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--v-card-shadow);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.vital-tile:hover {
  color: var(--accent);
}

/* Forms: grouped card, flat rows, label-above-value (no boxed inputs —
   the row's own hairline divider does the separation), matching the
   mockup's "Add a medication" screen. Template markup (`<label>Text
   <input .../></label>`) is unchanged — this is a CSS-only reskin of the
   existing structure. */

.vital-entry-form,
.vault-entry-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 420px;
  background: var(--bg);
  border-radius: var(--v-radius-group);
  box-shadow: var(--v-card-shadow);
  padding: 4px 18px;
}

.vital-entry-form label,
.vault-entry-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.vital-entry-form label:last-of-type,
.vault-entry-form label:last-of-type {
  border-bottom: none;
}

.vital-entry-form input,
.vault-entry-form input,
.vault-entry-form select {
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
}

.vital-entry-form .btn-extract,
.vault-entry-form .btn-extract {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 20px 0 4px;
}

.vault-checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  text-transform: none !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}

.vault-checkbox-label input[type="checkbox"] {
  width: auto;
  padding: 0;
}

.vital-bp-fields {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.vital-bp-slash {
  font-size: 20px;
  color: var(--text-muted);
  padding-bottom: 10px;
}

.vital-saved-banner {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--accent-light);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-primary);
}

/* Vitals category palette — unchanged from CTO-108 (one hue per clinical
   category, colorblind-safe, all AA-passing on the new white/surface
   pair). See design.md "Vault trend chart" for the full contrast table. */
:root {
  --vital-bp-systolic: #1a7395;
  --vital-bp-diastolic: #46565f;
  --vital-cardio: #1a7395;
  --vital-metabolic: #1a7395;
  --vital-respiratory: #1a7395;
  --vital-febrile: #1a7395;
  --vital-structural: #1a7395;
}

/* ── Unified timeline + trend chart ───────────────────────────────────── */

.timeline-trend-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.timeline-trend-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--v-card-shadow);
}

.timeline-trend-link:hover {
  color: var(--accent);
}

.timeline-trend-link-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.timeline-date-group {
  margin-bottom: var(--v-group-gap);
}

.timeline-date-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.timeline-entry {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--v-card-shadow);
}

.timeline-entry-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: var(--v-accent-tint-strong);
}

.timeline-entry-icon svg {
  width: 16px;
  height: 16px;
}

.timeline-entry-icon--medication,
.timeline-entry-icon--condition,
.timeline-entry-icon--allergy {
  color: var(--text-secondary);
  background: var(--surface);
}

.timeline-entry-icon--vital {
  color: var(--accent);
}

.timeline-entry-body {
  flex: 1;
  min-width: 0;
}

.timeline-entry-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.timeline-entry-topic {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.timeline-entry-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-entry-detail {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.timeline-entry-trend-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.timeline-entry-trend-link:hover {
  text-decoration: underline;
}

.timeline-entry-source {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.source-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

.source-tag-self {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.source-tag-citation {
  background: var(--text-primary);
  color: #fff;
}

.timeline-entry-citation-snippet {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.timeline-entry-source-date {
  font-size: 11px;
  color: var(--text-secondary);
}

.trend-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trend-unit-badge {
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 2px 9px;
}

.trend-chart-svg {
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-top: 12px;
  border: none;
  border-radius: var(--v-radius-group);
  background: var(--bg);
  box-shadow: var(--v-card-shadow);
}

.trend-chart-gridline {
  stroke: var(--border);
  stroke-width: 1;
}

.trend-chart-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.trend-chart-axis-label {
  font-size: 10px;
  fill: var(--text-secondary);
}

.trend-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.trend-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trend-chart-note {
  margin-top: 12px;
}

.timeline-entry-detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timeline-sparkline {
  flex-shrink: 0;
  width: 56px;
  height: 20px;
}

/* ── Vault dashboard ──────────────────────────────────────────────────── */

.dashboard-empty {
  margin-bottom: 28px;
}

.dashboard-empty p {
  color: var(--text-secondary);
}

.dashboard-view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-left: auto;
}

.dashboard-view-all:hover {
  text-decoration: underline;
}

/* ── Mobile phone breakpoint (~640px) ────────────────────────────────────
   Broader than the 480px rule above (which only handles vault-main's
   padding + the dashboard grid collapse) -- this layers general phone
   fixes on top: the meds table becomes stacked cards, tap targets grow
   toward 44px (WCAG 2.5.8's 24px floor is the legal minimum, not a
   comfortable one), the header/nav stop competing for width, and forms
   go full-bleed. Covers common phones in portrait (~360-430 CSS-px).
   See design.md "Vault mobile-first pass" for the full rationale. */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden;
  }

  .vault-test-banner {
    padding: 8px 16px;
  }

  /* Horizontally-scrolling tab bar instead of wrapping/squishing four tabs
     into ~320-360px of width -- keeps every tab on one line and fully
     tappable; a standard, discoverable mobile pattern. */
  /* Meds table -> stacked cards. Same <table>/<tr>/<td> markup as desktop
     (kept for the hx-get/data-fact-id contract + existing tests) -- only
     `display` changes here. The header row is dropped from the
     accessibility tree (thead hidden) because every ambiguous cell
     already carries its own `aria-label` in _meds_list.html, independent
     of viewport width or whether thead is present -- no ARIA
     table-role reconstruction relied on, since that pattern is
     inconsistently supported by mobile screen readers (the actual
     target here). */
  /* Decorative sighted-user label only -- CSS generated content isn't
     reliably exposed to assistive tech, which is why the accessible name
     comes from `aria-label` on the cell instead (see comment above). */
  /* Tap-target growth (WCAG 2.5.8) beyond the 24px AA floor -- real
     thumbs on a phone want closer to 44px. */
  .btn-extract {
    min-height: 44px;
    padding: 10px 20px;
  }

  .timeline-trend-link {
    min-height: 40px;
    padding: 8px 12px;
  }

  .vault-checkbox-label {
    padding: 6px 0;
  }

  .vault-entry-form,
  .vital-entry-form {
    max-width: none;
  }

  .trend-header,
  .vault-panel-header {
    flex-wrap: wrap;
  }
}