/* FamilyStork — mobile-first, works at 360px, 44px touch targets */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-var.woff2') format('woff2');
  font-weight: 500 700; font-style: normal; font-display: swap;
}
/* THE FAMILY BONES (Rob 2026-10-06: "I like the look of Own & Maintain better"): the ShopProp brand.css recipe — Cormorant
   Garamond display + Poppins UI, square corners, the small uppercase button, roomy hairline cards, slate text. Only the
   palette and the logo are Family Stork's own. Poppins is self-hosted (latin, 400–700): no font request leaves the site. */
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Palette: EXACT Show & Disclose brand.css tokens (Rob-locked 2026-08-10) —
   slate text, slate primary, editorial gold accent, S&D greens/danger/warn.
   Type is the family's: Cormorant Garamond display + Poppins UI (brand.css). */
/* Family Stork green brand (matches the marketing site + videos):
   ink #0a0f0c · deep spring green #1e7d4f · body gray-green #59645d · white. */
:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --ink: #0a0f0c;          /* strong text / headings */
  --slate: #59645d;        /* body / gray-green */
  --slate-hover: #4a544d;
  --muted: #7c857e;        /* secondary */
  --hint: #7f8a83;         /* tertiary — dark enough to read, quiet enough to recede */
  --line: #e8ece9;         /* divider / hairline */
  --bg-alt: #f2f8f4;       /* soft green tint section */
  --accent: #1e7d4f;       /* primary CTA / links / accents */
  --accent-dark: #196b43;  /* primary hover */
  --accent-soft: #e8f3ec;  /* soft green fill */
  --warm: #1e7d4f;         /* was gold — now green accent */
  --gold: #3ba36b;         /* was gold-soft — now on-dark green */
  --gold-bg: #f2f8f4;      /* was gold-bg — now soft green tint */
  --sage: #1e7d4f;         /* accent-text */
  --sage-bg: #e8f3ec;      /* accent-bg */
  /* legacy aliases many app rules reference with gold/slate fallbacks; define
     them here so those rules go green instead of falling back to gold. */
  --rust: #1e7d4f;
  --coal: #0a0f0c;
  --cream: #f2f8f4;
  --amber: #D68F00;        /* warn (functional, unchanged) */
  --danger: #C41E3A;       /* danger (functional, unchanged) */
  --danger-soft: #FBE9EC;
  --radius: 0;             /* square corners — the family standard (brand.css) */
  --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--slate);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, .brand, .brand-big { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -0.005em; line-height: 1.15; color: var(--ink); }
h1 { font-size: 2.25rem; margin: 0 0 .5rem; }
h2 { font-size: 1.6rem; margin: 0 0 .6rem; }
h3 { font-size: 1.25rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.danger { color: var(--danger); }

.page { max-width: 860px; margin: 0 auto; padding: 16px 16px 64px; }
.page-title { margin-top: 12px; }
.crumbs { margin: 8px 0 0; font-size: .9rem; }
.crumbs a { text-decoration: none; color: var(--muted); }

/* top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-weight: 700; font-size: 1.1rem; color: var(--ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.brand-mark { color: var(--accent); }
.topnav { display: flex; align-items: center; gap: 14px; }
.topnav a, .topnav button { white-space: nowrap; }
.topnav a { text-decoration: none; color: var(--muted); padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.topnav a.on { color: var(--ink); font-weight: 600; }
/* phones: the full EKG wordmark can't share a row with four nav links —
   the gold stork mark alone carries the brand */
.logo-sm { display: none; }
@media (max-width: 640px) {
  .logo-lg, .brand-word { display: none; }
  .logo-sm { display: inline-block; height: 34px; vertical-align: -11px; }
  .topbar { padding: 8px 12px; }
  .topnav { gap: 12px; }
}
.logout-form { display: inline; }

/* cards & forms */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin: 14px 0;
}
@media (max-width: 600px) { .card { padding: 20px 16px; } }
label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
input, select, textarea {
  display: block; width: 100%;
  margin-top: 4px; padding: 11px 12px;
  font-size: 1rem; font-family: inherit;
  color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  background: #fff;
  min-height: 44px;
}
textarea { min-height: 60px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.grid-form .form-error, .grid-form button, .grid-form .manual-note-field { grid-column: 1 / -1; }
@media (max-width: 480px) { .grid-form { grid-template-columns: 1fr; } }
.form-error { color: var(--danger); font-size: .9rem; min-height: 1.2em; margin: 4px 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 12px 24px;
  font-size: 12px; font-weight: 500; font-family: 'Poppins', system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 0; border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  cursor: pointer; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-small { font-size: 11px; letter-spacing: 1px; padding: 10px 16px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-danger-outline { border-color: var(--danger); color: var(--danger); background: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.linklike {
  background: none; border: none; padding: 10px 6px;
  color: var(--accent); font: inherit; cursor: pointer; min-height: 44px;
}
.linklike.danger { color: var(--danger); }

/* auth */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 48px 8px; }
.auth-hero { text-align: center; margin-bottom: 20px; }
.brand-big { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
.tagline { color: var(--muted); margin: 6px 0 0; }
.auth-card h1 { font-size: 1.2rem; }
.auth-switch { text-align: center; font-size: .9rem; color: var(--muted); }

/* persons grid */
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 14px 0; }
.person-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; text-decoration: none; color: var(--ink);
}
.person-card:hover { border-color: var(--accent); }
.person-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px;
  background: var(--accent-soft); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; overflow: hidden;
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-card h3 { margin: 0; font-size: 1.05rem; }
.person-card p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }

/* person header: photo + identity on top, actions on their own full row */
.person-header { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.person-photo {
  width: 112px; height: 112px; border-radius: 50%; flex: 0 0 112px;
  border: 3px solid var(--gold-bg); box-shadow: var(--shadow);
  background: var(--accent-soft); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-meta { min-width: 0; flex: 1; }
.person-meta h1 { font-size: 2.1rem; margin-bottom: 2px; }
.person-meta p { margin: 0; }
.person-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) {
  .person-header { flex-direction: column; text-align: center; }
  .person-actions { justify-content: center; }
}

/* upload */
.upload-zone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
#doc-status-list { margin-top: 8px; }
.doc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: .92rem; min-height: 44px;
}
.doc-row a { text-decoration: none; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "See what we found →" — the obvious ready affordance once a doc is read */
.doc-row a.doc-cta { flex: 0 0 auto; color: var(--accent); font-weight: 700; white-space: nowrap; overflow: visible; margin-left: auto; }
.chip {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem; font-weight: 500; padding: 3px 10px; border-radius: 0;
  text-transform: uppercase; letter-spacing: .03em; flex: 0 0 auto;
}
.chip-pending { background: #f2f8f4; color: #1e7d4f; }
.chip-processing { background: #f2f8f4; color: #1e7d4f; }
.chip-done { background: var(--accent-soft); color: var(--accent-dark); }
.chip-failed, .chip-rejected { background: var(--danger-soft); color: var(--danger); }
.manual-entry { margin-top: 12px; }
.manual-entry summary { cursor: pointer; color: var(--accent); min-height: 44px; display: flex; align-items: center; }

/* timeline */
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.timeline-head select { width: auto; min-width: 140px; }
.timeline { margin: 12px 0; }
.tl-group-date {
  font-size: .8rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 6px;
}
.tl-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px; margin: 8px 0;
  display: flex; gap: 12px; align-items: flex-start;
  /* the action buttons drop under the text when the row is narrow (phone at
     Safari page zoom read one word per line, Rob 2026-09-23) */
  flex-wrap: wrap;
}
.tl-icon { font-size: 1.2rem; flex: 0 0 auto; margin-top: 1px; }
.tl-body { flex: 1 1 180px; min-width: 0; }
.tl-title { font-weight: 600; }
.tl-sub { font-size: .88rem; color: var(--muted); }
.tl-sub a { color: var(--muted); }
.tl-edited { font-size: .72rem; color: var(--amber); font-weight: 700; text-transform: uppercase; }
.tl-actions { flex: 0 0 auto; display: flex; gap: 2px; margin-left: auto; }
.tl-actions button { background: none; border: none; cursor: pointer; font-size: .95rem; padding: 8px; min-width: 36px; min-height: 36px; color: var(--muted); }
.lab-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .88rem; }
.lab-table td, .lab-table th { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.lab-flag-high, .lab-flag-low, .lab-flag-abnormal { color: var(--danger); font-weight: 700; }

/* document page */
.doc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .doc-split { grid-template-columns: 1fr; } }
.doc-viewer iframe { width: 100%; height: 70vh; border: none; border-radius: 0; }
.doc-viewer img { max-width: 100%; border-radius: 0; }
.extract-section { margin-bottom: 14px; }
.extract-section h3 { margin: 0 0 4px; font-size: .95rem; }
.extract-kv { font-size: .9rem; margin: 2px 0; }
.extract-kv .k { color: var(--muted); }

/* chat */
.chat-shell { display: flex; flex-direction: column; height: calc(100vh - 160px); min-height: 420px; padding: 0; overflow: hidden; }
.chat-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.chat-head h1 { font-size: 1.15rem; margin: 0; }
.chat-head p { margin: 2px 0 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px 16px; }
.msg { max-width: 85%; margin: 8px 0; padding: 10px 14px; border-radius: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.msg-user { background: var(--accent); color: var(--ink); margin-left: auto; border-bottom-right-radius: 4px; }
.msg-assistant { background: var(--accent-soft); border-bottom-left-radius: 4px; }
.msg-error { background: var(--danger-soft); color: var(--danger); }
.chat-suggestions { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.suggestion {
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 12px 14px; font: inherit; font-size: .92rem; color: var(--accent-dark);
  cursor: pointer; min-height: 44px;
}
.suggestion:hover { border-color: var(--accent); }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-input textarea { flex: 1; margin: 0; max-height: 120px; }
.disclaimer {
  margin: 0; padding: 8px 14px 12px; font-size: .75rem; color: var(--muted); text-align: center;
}
.typing { color: var(--muted); font-style: italic; }

/* emergency management */
.em-link-box {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0;
}
.em-link-box input { flex: 1; min-width: 200px; font-size: .85rem; }

/* emergency public page */
.em-body { background: #fff; }
.em-page { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }
.em-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.em-brand { font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 0; }
.em-header h1 { font-size: 1.7rem; margin: 2px 0; }
.em-allergy {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger); border-radius: 0;
  padding: 12px 14px; font-size: 1.05rem; margin: 14px 0;
}
.em-allergy.none { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
.em-section { margin: 20px 0; }
.em-section h2 { border-bottom: 2px solid var(--line); padding-bottom: 4px; }
.em-section table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.em-section td, .em-section th { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.em-section tr.flagged td { color: var(--danger); }
.em-section .none { color: var(--muted); }
.em-recent { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.em-recent li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.em-date { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.em-type { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--accent-dark); margin-right: 6px; }
.em-footer { font-size: .78rem; margin-top: 28px; }

/* landing page */
.landing { background: var(--bg); }
.land-nav {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1020px; margin: 0 auto; padding: 14px 20px;
}
.land-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
  max-width: 1020px; margin: 0 auto; padding: 28px 20px 40px;
}
.land-hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px;
}
.land-hero h1 em { color: var(--accent); font-style: normal; }
.land-sub { font-size: 1.08rem; color: var(--muted); max-width: 34rem; }
.land-cta { margin-top: 22px; }
.land-cta.center { text-align: center; margin-top: 28px; }
.btn-big { font-size: 1.08rem; padding: 14px 26px; }
.land-hero-photo img {
  width: 100%; border-radius: 0; box-shadow: 0 12px 32px rgba(36,49,59,.18);
  transform: rotate(1.5deg);
}
.photo-cap { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 10px; }
.land-story {
  background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.land-story {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center;
  padding: 48px 20px;
}
.land-story > div { max-width: 520px; }
.land-story-photo { justify-self: end; }
.land-story-photo img {
  width: 100%; border-radius: 0; box-shadow: 0 8px 24px rgba(36,49,59,.15);
  transform: rotate(-1.5deg);
}
.land-story-copy h2 { font-size: 1.6rem; margin-bottom: 12px; }
.land-story-copy p { margin: 0 0 14px; font-size: 1.02rem; }
.land-features { max-width: 1020px; margin: 0 auto; padding: 48px 20px 8px; }
.land-features h2, .land-steps h2 { text-align: center; font-size: 1.5rem; margin-bottom: 24px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.feature { margin: 0; }
.feature-icon { font-size: 1.8rem; margin-bottom: 8px; }
.feature h3 { margin: 0 0 8px; font-size: 1.05rem; }
.feature h3 em { color: var(--accent); font-style: normal; }
.feature p { margin: 0; font-size: .95rem; color: var(--muted); }
.land-steps { max-width: 720px; margin: 0 auto; padding: 40px 20px 56px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-n {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.land-footer {
  border-top: 1px solid var(--line); text-align: center;
  padding: 28px 20px 40px; color: var(--muted);
}
@media (max-width: 760px) {
  .land-hero { grid-template-columns: 1fr; padding-top: 12px; }
  .land-hero-photo { order: -1; max-width: 420px; margin: 0 auto; }
  .land-story { grid-template-columns: 1fr; }
  .land-story-photo { justify-self: center; max-width: 420px; }
  .feature-grid { grid-template-columns: 1fr; }
}

@media print {
  .noprint { display: none !important; }
  .em-page { padding: 0; max-width: none; }
  body { font-size: 12px; background: #fff; }
}

.story-allpersons { color: var(--accent-dark); font-weight: 600; }

/* insurance band on landing */
.land-insurance { max-width: 1020px; margin: 0 auto; padding: 8px 20px 8px; }
.ins-band { display: flex; gap: 20px; align-items: flex-start; background: var(--accent-soft); border-color: var(--accent); padding: 24px; }
.ins-band-icon { font-size: 2.2rem; line-height: 1; }
.ins-band h2 { margin: 0 0 8px; font-size: 1.3rem; }
.ins-band p { margin: 0 0 10px; }
@media (max-width: 600px) { .ins-band { flex-direction: column; gap: 8px; } }

/* doctor visit prep */
.vp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-head h2 { margin: 0; }
.vp-content {
  white-space: pre-wrap; font-family: inherit; font-size: .97rem;
  background: var(--accent-soft); border-radius: 0; padding: 16px; margin-top: 12px;
  overflow-wrap: break-word;
}

/* person greeting card — the person says hi, grounded in the record */
.greeting-card { display: flex; gap: 14px; align-items: flex-start; background: var(--accent-soft); }
.greeting-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 48px;
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.greeting-avatar img { width: 100%; height: 100%; object-fit: cover; }
.greeting-text { white-space: pre-wrap; font-size: 1.02rem; line-height: 1.6; }

/* care team */
.invite-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.invite-fresh { margin-top: 12px; padding: 12px 14px; background: var(--accent-soft); border-radius: 0; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); min-height: 44px; flex-wrap: wrap; }
.team-row:first-child { border-top: none; }
.team-who { flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* join page */
.join-wrap { max-width: 440px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.join-photo {
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--accent-soft); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
  box-shadow: 0 10px 28px rgba(19,16,16,.18);
}
.join-photo img { width: 100%; height: 100%; object-fit: cover; }
.join-wrap h1 { font-size: 1.6rem; margin-bottom: 12px; }
.join-card { text-align: left; margin-top: 20px; }
.join-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.join-tab {
  flex: 1; min-height: 44px; border: 1.5px solid var(--line); background: #fff;
  border-radius: 0; font: inherit; font-weight: 600; cursor: pointer; color: var(--muted);
}
.join-tab.on { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }

/* google sign-in */
.btn-google { background: #fff; border: 1.5px solid var(--line); color: var(--ink); gap: 10px; }
.btn-google:hover { border-color: var(--ink); }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  color: var(--muted); font-size: .82rem;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* start flow — give your person a voice */
.start-wrap { max-width: 460px; margin: 0 auto; padding: 28px 22px 60px; text-align: center; }
.start-brand { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; display: inline-block; margin-bottom: 40px; }
.start-step { display: none; animation: stepin .35s ease; }
.start-step.on { display: block; }
@keyframes stepin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.start-kicker { font-family: 'Poppins', sans-serif; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 14px; }
.start-h { font-size: 1.9rem; line-height: 1.15; margin-bottom: 22px; }
.start-input {
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.7rem;
  text-align: center; border: none; border-bottom: 3px solid var(--line);
  border-radius: 0; padding: 8px 4px 12px; margin-bottom: 20px; background: transparent;
}
.start-input:focus { outline: none; border-bottom-color: var(--accent); }
.btn-big-start { font-size: 1.08rem; padding: 15px 26px; }
.start-alt { margin-top: 18px; }
.start-back { margin-top: 8px; }
.start-card { text-align: left; }
.start-dots { display: flex; gap: 8px; justify-content: center; margin-top: 34px; }
.start-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.start-dots .dot.on { background: var(--accent); }
.s-name-echo { color: var(--accent-dark); }
.btn .s-name-echo { color: inherit; }
.inline-add { padding: 0 4px; min-height: 0; font-size: .9em; }

/* diet card */
.food-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.food-row:first-child { border-top: none; }
.food-icon { flex: 0 0 auto; font-size: 1.1rem; }
.food-main { flex: 1; min-width: 0; }

/* memories + photo edit */
.memory-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.memory-row:first-child { border-top: none; }
.memory-text { flex: 1; font-size: .95rem; }
.person-photo-editable { cursor: pointer; position: relative; }
.person-photo-editable:hover { outline: 3px solid var(--accent); }
.chip-stored { background: var(--accent-soft); color: var(--accent-dark); }
.tl-time { font-family: 'Poppins', sans-serif; font-size: .78rem; color: var(--muted); font-weight: 400; }

/* album */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.album-grid-full { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.album-item { position: relative; display: block; aspect-ratio: 1; border-radius: 0; overflow: hidden; background: var(--accent-soft); }
.album-item img { width: 100%; height: 100%; object-fit: cover; }
.album-date {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-family: 'Poppins', sans-serif; font-size: .62rem; color: #fff;
  background: linear-gradient(transparent, rgba(19,16,16,.65)); padding: 12px 6px 4px; text-align: right;
}

/* records inbox + insurer linking */
.inbox-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.inbox-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inbox-addr { font-family: var(--mono, monospace); font-size: 0.85rem; word-break: break-all; background: var(--cream, #f2f8f4); color: var(--coal, #0a0f0c); padding: 6px 10px; border-radius: 0; }
.btn-small { padding: 6px 14px; min-height: 36px; font-size: 0.85rem; }
.insurer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.caregiver-head { display: flex; gap: 16px; align-items: center; }
.caregiver-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold, #1e7d4f); flex-shrink: 0; }
.caregiver-note { background: var(--cream, #f2f8f4); color: var(--coal, #0a0f0c); border-radius: 0; padding: 14px 16px; line-height: 1.55; }
#caregiver-note-form textarea { width: 100%; box-sizing: border-box; margin-bottom: 10px; font: inherit; padding: 10px; border-radius: 0; border: 1px solid rgba(0,0,0,0.2); }
.quick-add { display: flex; gap: 8px; margin-top: 10px; }
.quick-add input, .quick-add select { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 0; border: 1px solid rgba(0,0,0,0.22); }
.dna-inline { margin-top: 4px; }
.dna-inline .quick-add { flex-wrap: wrap; }
.dna-inline .quick-add label { display: contents; }

/* bigger, always-visible note card */
.note-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px; border-radius: 0; border: 1.5px solid rgba(0,0,0,0.25); min-height: 110px; resize: vertical; }
.note-form textarea:focus { outline: 2px solid var(--rust, #1e7d4f); border-color: transparent; }
.note-form select, .note-form input { font-size: 16px; }

/* hear-the-person speech buttons */
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.msg-speak { display: block; margin-top: 8px; background: none; border: 1px solid rgba(0,0,0,0.18); border-radius: 0; padding: 3px 10px; cursor: pointer; font-size: 0.95rem; line-height: 1.4; }
.msg-speak:active { transform: scale(0.96); }
.greeting-body .msg-speak { margin-top: 10px; }

/* medication logger */
.med-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.med-row:last-child { border-bottom: none; }
.med-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.med-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-give { background: var(--cream, #f2f8f4); color: var(--coal, #0a0f0c); border: 1.5px solid var(--rust, #1e7d4f); border-radius: 0; padding: 10px 16px; min-height: 44px; font-weight: 600; cursor: pointer; }
.btn-give.given { background: var(--rust, #1e7d4f); color: #fff; border-color: var(--rust, #1e7d4f); }
.med-stop { font-size: 0.8rem; }

/* person page tabs */
.person-tabs { display: flex; gap: 8px; position: sticky; top: 0; z-index: 20; background: var(--paper, #FFFFFF); padding: 10px 0; margin: 4px 0 12px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.person-tab { flex: 1; min-height: 44px; border: 1.5px solid rgba(0,0,0,0.15); background: transparent; color: var(--coal, #0a0f0c); border-radius: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 8px 6px; }
.person-tab.on { background: var(--coal, #0a0f0c); color: #fff; border-color: var(--coal, #0a0f0c); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

/* the hidden attribute must always win (generic input rule was overriding it) */
[hidden] { display: none !important; }

/* compact header actions: primary full-width, rest in a 2-col grid */
.person-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.person-actions .btn-primary { grid-column: 1 / -1; }
.person-actions .btn { padding: 10px 8px; font-size: 0.92rem; white-space: normal; overflow-wrap: anywhere; min-width: 0; line-height: 1.2; text-align: center; }

/* phone-first chat: fill the screen, bigger bubbles and input */
.chat-messages { font-size: 1rem; line-height: 1.55; }
@media (max-width: 600px) {
  .chat-shell { height: calc(100vh - 132px); height: calc(100dvh - 132px); min-height: 380px; border-radius: 0; }
  .msg { font-size: 1.06rem; max-width: 92%; padding: 12px 15px; }
  .chat-head { padding: 10px 14px 8px; }
  .chat-head h1 { font-size: 1.35rem; }
  .chat-head .muted.small { font-size: 0.8rem; }
  .chat-input { padding: 10px; }
  .chat-input textarea { font-size: 16px; padding: 12px; border-radius: 0; }
  .chat-input .btn { min-height: 48px; padding: 12px 20px; font-size: 1rem; }
  .crumbs { margin: 2px 0 6px; }
  .disclaimer { font-size: 0.68rem; padding: 6px 14px 10px; }
}

/* status chips under the greeting */
.status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.status-chips:empty { display: none; }
.chip-stat { background: var(--cream, #f2f8f4); color: var(--coal, #0a0f0c); border-radius: 0; padding: 7px 13px; font-size: 0.85rem; font-weight: 600; }
.chip-good { background: #E8F5EA; }
.chip-warn { background: #f2f8f4; }
.chip-alert { background: var(--danger-soft, #f7dfdb); color: var(--danger, #C41E3A); }

/* mobile-first chat: the conversation IS the screen */
.chat-back { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 1.5rem; text-decoration: none; color: inherit; border-radius: 50%; flex-shrink: 0; }
.chat-back:active { background: rgba(0,0,0,0.06); }
.chat-head { align-items: center; flex-wrap: nowrap; gap: 8px; }
.chat-head h1 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-intro { margin: 4px 4px 14px; line-height: 1.5; }
@media (max-width: 600px) {
  .chat-page .topbar { display: none; }
  .chat-page .page { padding: 6px 8px 0; }
  .chat-shell { height: calc(100vh - 80px); height: calc(100dvh - 80px); }
  .chat-head { padding: 6px 8px; }
  .chat-head h1 { font-size: 1.2rem; }
  .disclaimer { font-size: 0.6rem; line-height: 1.35; padding: 4px 12px 8px; }
}

/* recommendations card */
.recs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.recs-progress { font-size: 0.8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.recs-bar { height: 6px; border-radius: 0; background: rgba(0,0,0,0.08); margin: 8px 0 12px; overflow: hidden; }
.recs-bar-fill { height: 100%; border-radius: 0; background: var(--rust, #1e7d4f); transition: width 0.4s; }
.rec-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(0,0,0,0.06); min-height: 44px; }
.rec-row:last-child { border-bottom: none; }
.rec-row:active { background: rgba(0,0,0,0.03); }
.rec-icon { font-size: 1.3rem; flex-shrink: 0; }
.rec-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-go { margin-left: auto; color: var(--rust, #1e7d4f); font-weight: 700; flex-shrink: 0; }

/* high-priority alert banners + refused doses */
.alert-banner { border-radius: 0; padding: 12px 16px; margin-bottom: 10px; font-weight: 600; font-size: 0.92rem; line-height: 1.45; }
.alert-red { background: var(--danger-soft, #f7dfdb); color: var(--danger, #C41E3A); border: 1.5px solid var(--danger, #C41E3A); }
.alert-amber { background: #f2f8f4; color: #1e7d4f; border: 1.5px solid #1e7d4f; }
.med-refused { color: var(--danger, #C41E3A); }
.med-minor { display: flex; gap: 10px; align-items: center; }
.med-actions { flex-direction: column; align-items: flex-end; gap: 6px; }

/* alert polish: resolved pill, clear button, refusal tags, crisis grouping */
.alert-banner { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.alert-ok { background: #E8F5EA; color: #1A5420; border: 1.5px solid #2E7D32; font-weight: 500; }
.alert-clear { background: none; border: none; font-size: 1rem; cursor: pointer; color: inherit; opacity: 0.7; padding: 2px 6px; min-width: 32px; min-height: 32px; flex-shrink: 0; }
.skip-tags { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0 2px; }
.skip-tag { border: 1px solid rgba(0,0,0,0.2); background: var(--cream, #f2f8f4); color: var(--coal, #0a0f0c); border-radius: 0; padding: 7px 12px; font-size: 0.82rem; cursor: pointer; min-height: 34px; }
.skip-tag:active { background: var(--fawn, #e8ece9); }
.med-row { flex-wrap: wrap; }
.btn-crisis { border: 1.5px solid var(--danger, #C41E3A) !important; color: var(--danger, #C41E3A) !important; background: var(--danger-soft, #f7dfdb) !important; }

/* due-dose highlighting */
.med-row-due { background: #f2f8f4; border-radius: 0; padding-left: 10px; padding-right: 10px; }
.med-due { color: #1e7d4f; font-weight: 700; }
.btn-give.due { background: var(--rust, #1e7d4f); color: #fff; animation: due-pulse 1.6s ease-in-out infinite; }
@keyframes due-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(169,114,75,0.45); } 50% { box-shadow: 0 0 0 8px rgba(169,114,75,0); } }
.reminder-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-reminder { border: 1.5px solid var(--rust, #1e7d4f); font-weight: 600; }
.btn-reminder.on, #push-enable.on { background: var(--rust, #1e7d4f); color: #fff; }
.med-cg { border: 1px solid rgba(0,0,0,0.2); background: transparent; color: var(--muted, #7c857e); border-radius: 0; padding: 5px 10px; font-size: 0.75rem; cursor: pointer; min-height: 30px; }
.med-cg.on { background: var(--cream, #f2f8f4); color: var(--coal, #0a0f0c); border-color: var(--rust, #1e7d4f); font-weight: 600; }

/* photo notes — little posts on the timeline */
.tl-photo { display: block; max-width: 240px; max-height: 240px; width: auto; border-radius: 0; margin: 8px 0 4px; border: 1px solid rgba(0,0,0,0.08); }
.note-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#note-photo-btn.on { background: var(--cream, #f2f8f4); border-color: var(--rust, #1e7d4f); font-weight: 600; }

/* the person's own reaction to a shared moment */
.tl-reaction { background: var(--cream, #f2f8f4); border-left: 3px solid var(--rust, #1e7d4f); border-radius: 0 10px 10px 0; padding: 8px 12px; margin: 6px 0 2px; font-style: italic; line-height: 1.5; }
.rel-chip { font-size: 0.78rem; }
.greeting-photo { display: block; max-width: 180px; max-height: 180px; border-radius: 0; margin-top: 10px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
/* phones: the five-link nav must fit 360px with the brand mark — tighter type,
   Blog steps back (still in the footer), and the nav itself scrolls as a last
   resort so the PAGE never scrolls sideways */
@media (max-width: 520px) {
  .topnav { gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a, .topnav button { font-size: 0.9rem; }
  .topnav a { padding: 10px 2px; }
  .topnav .nav-blog { display: none; }
}
@media (max-width: 380px) { .topnav { gap: 8px; } .topnav a, .topnav button { font-size: 0.85rem; } }
.med-instr { color: #1e7d4f; background: #f2f8f4; border-radius: 0; padding: 2px 8px; display: inline-block; margin-top: 2px; }
.inbox-review { background: #f2f8f4; border: 1.5px solid #1e7d4f; border-radius: 0; padding: 12px 14px; margin: 10px 0; }
.chip-inbox { background: #f2f8f4; color: #1e7d4f; }
.email-card { border: 1.5px solid var(--rust, #1e7d4f); background: #FFFFFF; }

/* help center */
.help-ask-card { border: 1.5px solid var(--rust, #1e7d4f); }
.help-messages { max-height: 320px; overflow-y: auto; margin: 8px 0; }
.help-messages:empty { display: none; }
.help-section summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.help-icon { font-size: 1.3rem; } .help-icon .ico { width: 20px; height: 20px; vertical-align: -4px; color: var(--warm, #1e7d4f); }
.help-body { line-height: 1.65; margin-top: 10px; white-space: pre-wrap; }
.chat-cam { padding: 10px 12px; min-height: 44px; flex-shrink: 0; }
.mail-item { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.mail-item:last-child { border-bottom: none; }
.mail-quote { margin: 8px 0; padding: 8px 12px; background: var(--cream, #f2f8f4); border-left: 3px solid #1e7d4f; border-radius: 0 8px 8px 0; font-style: italic; font-size: 0.92rem; line-height: 1.5; }
.mail-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.share-card { border: 1.5px dashed #1e7d4f; background: #FFFFFF; }
.tl-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.tl-pill { border: 1.5px solid rgba(0,0,0,0.15); background: transparent; border-radius: 0; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.tl-pill.on { background: var(--coal, #0a0f0c); color: #fff; border-color: var(--coal, #0a0f0c); }
.timeline-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.chip-inbox { background: #f2f8f4; color: #1e7d4f; font-weight: 700; }
.chip-processing { background: #e8f3ec; color: #59645d; }
.med-edit-form { width: 100%; display: grid; gap: 8px; padding: 10px 0 4px; }
.med-edit-form label { display: block; font-size: 0.85rem; color: var(--muted, #7c857e); }
.med-edit-form input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px; border-radius: 0; border: 1px solid rgba(0,0,0,0.22); margin-top: 3px; }
.skip-tag.on { background: var(--coal, #0a0f0c); color: #fff; border-color: var(--coal, #0a0f0c); }
.rel-name { font: inherit; font-size: 16px; padding: 7px 10px; border-radius: 0; border: 1px solid rgba(0,0,0,0.22); min-width: 150px; }
.doc-type { background: var(--fawn, #e8ece9); color: var(--coal, #0a0f0c); border-radius: 0; padding: 3px 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.compose-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.compose-chip { border: 1.5px solid rgba(0,0,0,0.15); background: transparent; border-radius: 0; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; min-height: 40px; }
.compose-chip.on { background: var(--cream, #f2f8f4); border-color: var(--accent, #1e7d4f); }
.tl-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.tl-media .tl-photo { margin: 0; max-width: 180px; max-height: 180px; }
video.tl-photo { background: #000; }
.lib-group { margin-bottom: 16px; }
.lib-who { font-weight: 700; margin-bottom: 4px; border-bottom: 1.5px solid var(--line, #e8ece9); padding-bottom: 6px; }
@media (max-width: 480px) { .person-tab { padding: 8px 8px; font-size: 0.9rem; } }
.intake-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.intake-sum { font-weight: 700; margin-bottom: 8px; font-size: 1.05rem; }

/* public moments feed: real social-feed sizing */
.pubfeed .tl-media { display: block; }
.pubfeed .tl-media .tl-photo { width: 100%; max-width: 100%; height: auto; max-height: none; border-radius: 0; margin: 0 0 8px; display: block; }
.pubfeed video.tl-photo { max-height: 70vh; width: 100%; }
.pub-check { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.pub-check input { width: 20px; height: 20px; accent-color: #1e7d4f; }
.intake-target { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line, #e8ece9); }

/* chat composer: big box, Ask button underneath */
.chat-input { flex-direction: column; align-items: stretch; gap: 8px; }
.chat-input textarea { width: 100%; box-sizing: border-box; min-height: 68px; max-height: 160px; font-size: 16px; padding: 12px; border-radius: 0; }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row .chat-cam { flex-shrink: 0; min-width: 54px; }
.chat-input-row #chat-send { flex: 1; min-height: 50px; font-size: 1.05rem; font-weight: 700; }

/* preventive-care card */
.well-sec { margin: 12px 0 4px; color: var(--ink, #0a0f0c); }
.well-sec > strong { display: block; margin-bottom: 6px; }
.well-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 0.92rem; line-height: 1.45; }
.well-item.well-attn { background: #f2f8f4; border-radius: 0; padding: 8px 10px; }
.well-dot { flex-shrink: 0; }
.well-foot { margin-top: 10px; }
.unexp-box { border: 1.5px solid #1e7d4f; border-radius: 0; padding: 12px; margin: 10px 0; background: #f2f8f4; }
.unexp-head { font-weight: 700; margin-bottom: 6px; }
.unexp-list { margin: 8px 0; font-size: 0.9rem; line-height: 1.6; }
.unexp-open { color: #C41E3A; font-weight: 600; }
.unexp-q { font-size: 0.9rem; line-height: 1.55; margin-top: 8px; }

.memorial-band { background: #0a0f0c; color: #3ba36b; border-radius: 0; padding: 12px 16px; margin-bottom: 14px; font-family: 'Cormorant Garamond', serif; font-size: 1.08rem; text-align: center; }

/* the whole-story keepsake page */
.story-content { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.13rem; line-height: 1.75; white-space: pre-wrap; }
@media print {
  header, .crumbs, .vp-head div, #story-meta, footer, .nav { display: none !important; }
  .card { border: none; box-shadow: none; padding: 0; }
  .story-content { font-size: 12.5pt; }
}

/* stork logo mark (EKG-to-stork) */
.logo-mark { height: 30px; width: auto; vertical-align: -9px; }
.logo-mark-big { display: block; height: 54px; margin: 0 auto 6px; }

/* topbar lockup: logo + name inline, never wrapping */
.brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* start flow: who-is-this-for chooser */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.who-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 10px; font: inherit; font-weight: 600; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 0; color: var(--ink);
}
.who-btn span { font-size: 2rem; }
.who-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.who-btn:last-child { grid-column: 1 / -1; }
/* the baby door leads: full width, already in the accent */
.who-btn-baby { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 12px; padding: 16px 14px; border-color: var(--accent); background: var(--accent-soft); min-height: 64px; }
.s-when { margin: 8px 0 0; }
.s-when .join-tab { min-height: 44px; }

/* password show/hide */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1.05rem;
  min-height: 36px; min-width: 40px; padding: 0; color: var(--muted);
}

/* daily quick log */
.quicklog-row { display: flex; gap: 8px; margin: 8px 0 4px; }
.quicklog-row input { flex: 1; margin-top: 0; }
.quicklog-row .btn { flex: 0 0 auto; }
#quicklog-status { min-height: 1.2em; margin: 4px 0 8px; }
#quicklog-status { white-space: pre-line; }

/* stork mark as avatar placeholder (round crops need containment, not cover) */
.person-avatar .avatar-mark, .greeting-avatar .avatar-mark {
  width: 72% !important; height: auto !important; object-fit: contain !important;
}

/* one-box confirmation chips */
.ql-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); border-radius: 0; padding: 3px 10px; margin: 2px 4px 2px 0; }
.ql-undo { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0 2px; font-size: .85rem; }
.ql-undo:hover { color: var(--danger); }
.trust-check { display: block; margin-top: 6px; }
.trust-check input { display: inline-block; width: auto; min-height: 0; margin-right: 6px; vertical-align: -2px; }

/* one-box composer: full-width writing field, actions row beneath (mobile-first).
   Framed so the thing you use all day reads as the primary action on the page. */
.quicklog-box { border-radius: 0; padding: 14px; }   /* its border, fill and (no) shadow follow the brand card recipe below */
.quicklog-box input#quicklog-input {
  width: 100%; min-height: 56px; font-size: 1.08rem; margin-top: 0;
  background: #fff; border: 1px solid var(--line, #e6dfd4); border-radius: 0; padding: 12px 14px;
}
.quicklog-box input#quicklog-input:focus {
  outline: none; border-color: var(--warm, #1e7d4f); box-shadow: 0 0 0 3px rgba(30,125,79,.14);
}
.quicklog-actions #quicklog-log { font-weight: 600; }
.quicklog-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.quicklog-actions .btn { min-width: 48px; }
.ql-spacer { flex: 1; }
.quicklog-actions #quicklog-log { min-width: 110px; }

/* same pattern for smaller entry forms (Should I eat this?, Log a past day) */
.composer { margin-top: 10px; }
.composer > input {
  width: 100%; min-height: 48px; font: inherit; font-size: 1.05rem;
  padding: 9px 12px; border-radius: 0; border: 1px solid rgba(0,0,0,0.22);
}
.composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.composer-actions .btn { min-height: 44px; min-width: 48px; white-space: nowrap; }
.composer-actions button[type=submit] { min-width: 96px; }
.composer-actions input[type=date] {
  font: inherit; padding: 8px 10px; border-radius: 0; border: 1px solid rgba(0,0,0,0.22); min-height: 44px;
}

/* medicine cabinet */
.cab-row { padding: 12px 0; border-top: 1px solid var(--line); }
.cab-row:first-child { border-top: none; }
.cab-info { margin-top: 8px; background: var(--bg-alt); border-radius: 0; padding: 10px 12px; }
.cab-info p { margin: 4px 0; }

/* nutrition page */
.nutri-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.nutri-num { font-size: 1.7rem; font-weight: 700; font-family: 'Cormorant Garamond', serif; color: var(--ink); }
.nutri-bars { display: flex; align-items: flex-end; gap: 4px; height: 84px; }
.nutri-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.nutri-bar { width: 100%; max-width: 26px; background: var(--accent); border-radius: 0 4px 0 0; }
.nutri-bar-day { font-size: .6rem; color: var(--muted); margin-top: 3px; }

/* food & goals dashboard (the ABYE room) */
.nutri-hero { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.nutri-hero-num { font-size: 2.2rem; font-weight: 700; font-family: 'Cormorant Garamond', serif; color: var(--ink); line-height: 1.1; }
.nutri-hero-unit { font-size: .8rem; font-family: 'Poppins', sans-serif; font-weight: 400; color: var(--muted); }
.nutri-hero-avg { margin: 2px 0 4px; }
.nutri-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.macro-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.macro-cell { flex: 1; min-width: 88px; background: var(--gold-bg); border: 1px solid var(--line); border-radius: 0; padding: 10px; text-align: center; }
.macro-cell b { display: block; font-size: 1rem; color: var(--ink); }
.macro-cell .macro-big { font-size: 1.3rem; }
.macro-cell span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.arch-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.arch-chip { border: 1.5px solid var(--line); background: transparent; border-radius: 0; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; min-height: 40px; color: var(--slate); }
.arch-chip.on { background: var(--gold-bg); border-color: var(--warm); color: var(--ink); }
.custom-macros { display: flex; gap: 8px; margin-top: 10px; }
.custom-macros input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 0; border: 1px solid rgba(0,0,0,0.22); }
.verdict-card { margin-top: 10px; border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; background: var(--bg-alt); }
.verdict-fits { background: var(--sage-bg); border-color: #dcebe1; }
.verdict-close, .verdict-treat { background: var(--gold-bg); }
.verdict-head { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.verdict-card .btn { margin-top: 8px; }
.lowlog-banner { margin-top: 10px; background: var(--gold-bg); border: 1px solid #ecdfc0; border-radius: 0; padding: 12px 14px; font-size: .9rem; }
.jl-day { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.jl-day summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-height: 36px; }
.jl-actions { display: inline-flex; gap: 6px; }
.jl-actions .linklike { font-size: .9rem; padding: 4px 6px; }
.cab-actions { display: inline-flex; gap: 10px; align-items: center; margin: 6px 0; }

/* heritage nodes on the family tree: warm ancestral styling, never ghosts */
.heritage-card { background: var(--gold-bg); border-color: var(--warm); }
.heritage-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; }

/* the family thread on posts */
.tl-thread { margin-top: 4px; }
.tl-comment { background: var(--bg-alt); border-radius: 0 10px 10px 10px; padding: 6px 10px; margin: 4px 0; font-size: .9rem; line-height: 1.45; }
.tl-thread .composer > input { min-height: 40px; font-size: .95rem; }

/* the gold badge: something new from someone else since you last looked */
.badge-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.card-badge {
  position: absolute; top: -4px; right: -4px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--warm); color: #fff;
  border-radius: 0; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}

/* multi-line composers (notes, edits): room to write a real sentence */
.composer > textarea {
  width: 100%; font: inherit; font-size: 1rem; line-height: 1.5;
  padding: 9px 12px; border-radius: 0; border: 1px solid rgba(0,0,0,0.22);
  resize: vertical; min-height: 76px;
}

/* an editing heritage card takes the whole row: full-width writing on any screen */
.person-grid .heritage-card.editing { grid-column: 1 / -1; }
.heritage-card.editing .person-avatar { display: none; }
.heritage-card.editing .tree-body { flex: 1 1 100%; }
.heritage-card.editing input, .heritage-card.editing textarea { font-size: 1.05rem; }

/* the add hub: three doors, one place */
.addhub-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.addhub-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  font: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 0;
  padding: 12px; cursor: pointer; min-height: 44px;
}
.addhub-btn strong { color: var(--ink); }
.addhub-btn.on { border-color: var(--warm); background: var(--gold-bg); }

/* Looking-ahead drawers and the More row */
.well-drawer { margin: 6px 0; }
.well-drawer summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.person-more summary { color: var(--muted); padding: 6px 0; cursor: pointer; }

/* provenance chips: who put this here, and is it confirmed */
.prov-chip { font-size: .68rem; padding: 1px 7px; border-radius: 0; vertical-align: 1px; white-space: nowrap; }
.prov-ai { background: var(--gold-bg); color: #8a6d3b; border: 1px solid var(--warm); }
.prov-ok { background: var(--sage-bg); color: var(--sage); }
.prov-user { background: var(--accent-soft); color: var(--muted); }
.prov-confirm { border: 1px solid var(--warm); background: #fff; border-radius: 0; cursor: pointer; font-size: .75rem; padding: 0 6px; min-height: 22px; }
.tl-menu { display: inline-block; position: relative; }
.tl-menu summary { list-style: none; cursor: pointer; padding: 2px 6px; }
/* the open menu is ONE anchored panel — items stack inside it, never on
   top of each other (the old `summary ~ *` piled every item at right:0) */
.tl-menu[open] .tl-menu-panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  display: flex; flex-direction: column; gap: 2px; min-width: 200px;
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 6px; box-shadow: var(--sh-float, 0 10px 40px rgba(10,15,12,.16));
}
.tl-menu-panel button, .tl-menu-panel a {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: 0; padding: 9px 12px; font: inherit; font-size: .88rem;
  color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: none;
}
.tl-menu-panel button:hover, .tl-menu-panel a:hover { background: var(--bg-alt); }
.tl-menu-panel .tl-menu-del { color: var(--danger); }
/* legacy standalone styling for any tl-menu-del outside a panel */
.tl-menu-del { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 8px 12px; cursor: pointer; color: var(--danger); font: inherit; font-size: .85rem; white-space: nowrap; box-shadow: var(--shadow); }

.tl-storyver summary { list-style: none; cursor: pointer; padding: 2px 0; color: var(--hint); font-size: .8rem; }

/* Insurance card scan — a prominent, camera-first affordance above the fields it fills */
.ins-scan { margin: 4px 0 18px; padding: 14px; border: 1.5px dashed var(--rust, #1e7d4f); border-radius: 0; background: var(--sage-bg, #e8f3ec); }
.ins-scan #ins-card-scan { min-height: 44px; font-weight: 700; }
.ins-scan-hint { margin: 8px 0 0; }
.ins-scan-status { margin: 10px 0 0; font-weight: 600; }
.ins-scan-status.ins-scan-ok { color: var(--sage, #1e7d4f); }
.ins-scan-status.ins-scan-warn { color: #a33; }

/* Photo intake: tell it what it is before it reads */
/* photo attached to the one composer: thumbnail chip inside the box */
.ql-attach { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 6px 8px; border: 1.5px solid var(--brand, #1e7d4f); border-radius: 0; background: var(--gold-bg, #f2f8f4); }
.ql-attach-img { width: 56px; height: 56px; object-fit: cover; border-radius: 0; flex: 0 0 auto; background: #fff; }
.ql-attach .small { flex: 1; min-width: 0; }
.ql-attach-x { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 1.05rem; color: var(--hint, #7f8a83); min-width: 44px; min-height: 44px; flex: 0 0 auto; }
#intake-snap.on { border-color: var(--brand, #1e7d4f); color: var(--brand, #1e7d4f); font-weight: 700; }

/* Insurance card image(s) on file */
.ins-cards { margin: 4px 0 14px; }
.ins-cards-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ins-card-thumb { display: block; border: 1px solid var(--line, #e8ece9); border-radius: 0; overflow: hidden; background: #fff; line-height: 0; }
.ins-card-thumb img { width: 160px; height: 100px; object-fit: cover; display: block; }

/* Records request generator */
.rr-fieldset { border: 1px solid var(--line, #e8ece9); border-radius: 0; padding: 10px 12px; margin: 0; }
.rr-fieldset legend { padding: 0 6px; font-weight: 600; font-size: .92rem; }
.rr-radio, .rr-check { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.rr-inline { margin-left: 8px; min-height: 36px; }
.rr-note { background: var(--sage-bg, #e8f3ec); border: 1px solid var(--rust, #1e7d4f); border-radius: 0; padding: 10px 12px; margin: 0 0 12px; }
.rr-subject { display: block; margin: 8px 0; }
.rr-subject input { width: 100%; }
#rr-body { width: 100%; font: inherit; line-height: 1.5; padding: 12px; border: 1px solid var(--line, #e8ece9); border-radius: 0; }
.rr-actions { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rr-req { border: 1px solid var(--line, #e8ece9); border-radius: 0; padding: 10px 12px; margin-bottom: 10px; }
.rr-req-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rr-status-wrap { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.rr-status { min-height: 40px; }

/* print-only: the letter alone, one clean page. The client hoists #rr-print-area
   to be a direct child of <body>, so hiding its siblings leaves nothing in flow. */
#rr-print-area { display: none; }
@media print {
  body > *:not(#rr-print-area) { display: none !important; }
  #rr-print-area { display: block; padding: 32px 40px; }
  .rr-print-head { font-size: 1.05rem; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 1px solid #333; }
  #rr-print-body { font: 12pt/1.55 Georgia, 'Times New Roman', serif; white-space: pre-wrap; word-wrap: break-word; }
}

/* Bill dispute assistant */
.bd-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bd-status { margin: 0; font-weight: 600; }
.bd-analysis { margin-top: 12px; padding: 12px; background: var(--gold-bg, #f2f8f4); border: 1px solid var(--line, #e8ece9); border-radius: 0; }
.bd-ground { align-items: flex-start; padding: 6px 0; }
.bd-ground input { margin-top: 4px; }
.bd-detail { display: block; }

/* Bill dispute — pick an existing bill */
.bd-existing { margin-top: 12px; }
.bd-existing-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line, #e8ece9); border-radius: 0; background: #fff; }
.bd-existing-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.bd-existing-name { font-weight: 600; overflow-wrap: anywhere; }
.bd-existing-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.bd-existing-actions .btn { min-height: 44px; }
/* phone: name on top, the two buttons side by side underneath (was a one-letter-wide column) */
@media (max-width: 600px) {
  .bd-existing-item { flex-direction: column; align-items: stretch; gap: 10px; }
  .bd-existing-actions { flex: 1 1 100%; }
  .bd-existing-actions .btn { flex: 1 1 0; }
}
.bd-existing-pick[disabled] { opacity: .6; cursor: default; }

/* Time capsule */
.cap-recipients { display: flex; flex-direction: column; gap: 4px; }
.cap-check { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.cap-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cap-photo-chip { display: inline-flex; align-items: center; padding: 6px 10px; min-height: 36px; border: 1px solid var(--line, #e8ece9); border-radius: 0; background: #fff; font-size: .9rem; }
.cap-photo-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 0; border: 1px solid var(--line, #e8ece9); }
.cap-card { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line, #e8ece9); border-radius: 0; background: #fff; }
.cap-card-open { border-color: var(--rust, #1e7d4f); background: var(--gold-bg, #faf7ef); }
.cap-card-head { font-size: 1.05rem; }
.cap-card-sub { margin: 2px 0 6px; }
.cap-card-msg { white-space: normal; line-height: 1.5; margin: 6px 0; }

/* Connect — health-system picker */
.org-search-label { display: block; font-weight: 600; margin-bottom: 4px; }
.org-search-label input { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line, #e8ece9); border-radius: 0; font: inherit; }
.org-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 340px; overflow-y: auto; }
.org-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line, #e8ece9); border-radius: 0; background: #fff; cursor: pointer; }
.org-hit:hover, .org-hit:focus-visible { border-color: var(--rust, #1e7d4f); background: var(--gold-bg, #faf7ef); }
.org-hit-name { font-weight: 600; word-break: break-word; }
.org-hit-host { word-break: break-all; }

/* Bill dispute — describe-it search */
.bd-search { display: flex; gap: 8px; margin-bottom: 10px; }
.bd-search input { flex: 1; min-width: 0; min-height: 42px; }
.bd-search .btn { flex: 0 0 auto; min-height: 42px; }

/* Family feed — news-feed style cards with inline replies */
.feed-card-wrap { border: 1.5px solid var(--rust, #1e7d4f); }
.feed-card { border: 1px solid var(--line, #e8ece9); border-radius: 0; padding: 12px 14px; margin: 10px 0; background: #fff; }
.feed-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.feed-icon { font-size: 1.1rem; }
.feed-body { margin: 6px 0 4px; line-height: 1.5; }
.feed-photo { max-width: 100%; border-radius: 0; margin: 6px 0; display: block; }
.feed-reply-toggle { display: inline-block; margin-top: 2px; }
.feed-thread { margin-top: 8px; border-top: 1px solid var(--line, #e8ece9); padding-top: 8px; }
.feed-comment { padding: 4px 0; line-height: 1.45; }
.feed-comments { margin-bottom: 8px; }
.feed-reply-box { display: flex; gap: 8px; }
.feed-reply-input { flex: 1; min-width: 0; min-height: 40px; }

/* Family circles */
.ql-circle { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 2px 22px; }
.feed-badge { display: inline-block; font-size: .72rem; padding: 1px 7px; border-radius: 0; background: var(--sage-bg, #e8f3ec); color: var(--rust, #1e7d4f); font-weight: 600; }
.feed-badge-all { background: #eef2f7; color: #4a5568; }

/* Feed roster reveal + clickable badges */
button.feed-badge { border: none; cursor: pointer; font: inherit; }
button.feed-badge:hover { filter: brightness(0.95); }
.feed-roster { background: var(--sage-bg, #e8f3ec); border: 1px solid var(--line, #e8ece9); border-radius: 0; padding: 8px 12px; margin: 8px 0; font-size: .9rem; }

/* Family feed chips + group management */
.feed-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.feed-chip { border: 1px solid var(--line, #e8ece9); background: #fff; border-radius: 0; padding: 5px 12px; font: inherit; font-size: .85rem; cursor: pointer; min-height: 34px; }
.feed-chip.on { background: var(--rust, #1e7d4f); color: #fff; border-color: var(--rust, #1e7d4f); }
.feed-chip-manage { margin-left: auto; color: var(--hint); }
.feed-badge-group { background: #eef2f7; color: #4a5568; }
.feed-groups-manage { background: var(--gold-bg, #f2f8f4); border: 1px solid var(--line, #e8ece9); border-radius: 0; padding: 12px; margin-bottom: 10px; }
.feed-group-edit { padding: 8px 0; border-top: 1px solid var(--line, #e8ece9); }
.feed-group-members { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }


/* ============================================================
   Dashboard visual polish — calmer, less boxy, clearer hierarchy.
   Scoped to .person-* and .tab-pane so marketing pages are untouched.
   ============================================================ */
.person-header.card {
  border: 1px solid var(--line);
  padding: 24px 26px;
  box-shadow: none;   /* brand bones (2026-10-06): a hairline, no shadow, like every other card */
}
.person-photo { width: 88px; height: 88px; flex-basis: 88px; border-width: 2px; }
.person-meta h1 { font-size: 1.72rem; letter-spacing: -0.01em; }
.person-actions { gap: 8px; margin-top: 16px; }
/* one hero action leads; the rest recede into quiet secondary chips */
.person-actions .btn-primary { font-size: 1.02rem; box-shadow: 0 6px 18px rgba(30,125,79,.22); }
.person-actions .btn:not(.btn-primary) {
  background: var(--bg-alt);
  border-color: transparent;
  color: var(--slate);
  font-weight: 600;
  box-shadow: none;
}
.person-actions .btn:not(.btn-primary):hover { background: var(--accent-soft); color: var(--ink); }
.person-actions .btn-crisis {
  background: var(--danger-soft) !important;
  border: 1px solid transparent !important;
  color: var(--danger) !important;
}
.person-more summary { color: var(--muted); font-weight: 600; }

/* tabs: soft, borderless pills instead of outlined boxes */
.person-tabs { border-bottom: none; gap: 6px; padding: 10px 0 8px; }
.person-tab { border: none; background: var(--bg-alt); color: var(--slate); }
.person-tab.on { background: var(--ink); color: #fff; }

/* dashboard content cards: drop the hairline boxes, soft shadow, more air */
.tab-pane .card {
  border: 1px solid var(--line);
  padding: 20px 22px;
  box-shadow: none;
}
.tab-pane > .card { margin-bottom: 14px; }
.tab-pane > .card:last-child { margin-bottom: 0; }
.tab-pane h2 { letter-spacing: -0.01em; }


/* ---- dashboard polish, pass 2: less green, calmer input, mobile tabs ---- */
/* the one-box quicklog: was a loud green-bordered green-filled block */
.quicklog-box {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
}
/* daily summary: white with a quiet accent stripe instead of a full green fill */
.tab-pane .greeting-card { background: #fff; border-left: 3px solid var(--accent); }
#greeting-eyebrow { color: var(--hint); font-weight: 700; }
/* a touch more rhythm between sections */
.tab-pane > .card, .tab-pane > .quicklog-box { margin-bottom: 16px; }
/* phones: 4 tabs scroll sideways instead of wrapping to two lines */
@media (max-width: 560px) {
  .person-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .person-tabs::-webkit-scrollbar { display: none; }
  .person-tab { flex: 0 0 auto; white-space: nowrap; padding: 9px 16px; }
}


/* ---- dashboard polish, pass 3: fix the "Do more" expander ---- */
/* it sat at half width inside the flex header, cramming its grids into the
   left column; span it full width so the sections lay out properly */
.person-more { flex-basis: 100%; width: 100%; margin-top: 2px; }
.person-more > summary { outline: none; }
.person-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }
.person-more .person-actions { margin-top: 4px; }
.person-more .do-more-h { margin-top: 14px; }


/* doctors: visible edit/remove buttons sit at the end of the row */
.doc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-view { flex: 1; min-width: 0; }
.doc-actions { display: inline-flex; gap: 6px; flex-shrink: 0; margin-left: auto; }


/* ---- dashboard polish, pass 4 ---- */
/* the clinician-only toggle was the 4th child of a space-between flex row and
   got crushed into a vertical sliver; give it its own full-width row */
.timeline-head label { flex-basis: 100%; margin-top: 2px; }
/* topbar: airy, slightly translucent */
.topbar { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* the first-run tip: a quiet aside, not a bordered green alert — but the
   whoami "tap to tell" banner keeps its attention style: it asks for action */
.alert-banner.alert-ok:not(.whoami-banner) { background: var(--bg-alt); border: none; color: var(--slate); font-weight: 500; }
.alert-banner.alert-ok:not(.whoami-banner) strong { color: var(--ink); }
/* insurance quick chip row sits flush with the cards */
#insurance-quick { display: flex; align-items: center; gap: 8px; }
#insurance-quick:empty { display: none; }


/* ============================================================
   Clarity pass 5 — reorganize the eye: one consistent header size,
   a real segmented tab bar, a compact person header on phones,
   and quieter secondary controls. IDs and structure untouched.
   ============================================================ */
/* every card header reads at the same calm size, everywhere in the app */
.card h2, .tab-pane h2 { font-size: 1.13rem; margin: 0 0 10px; line-height: 1.3; }
.card h2 .linklike { font-size: .85rem; font-weight: 600; }

/* the tab bar is the app's compass: bigger targets, unmissable active state,
   and a clean white shelf when it sticks */
.person-tabs { padding: 10px 0; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 14px -12px rgba(10,15,12,.35); }
.person-tab { min-height: 46px; font-size: .97rem; }
.person-tab.on { font-weight: 700; }

/* person header: compact on phones so Today starts above the fold */
@media (max-width: 560px) {
  .person-header.card { padding: 16px 16px 14px; }
  .person-photo { width: 68px; height: 68px; flex-basis: 68px; }
  .person-meta h1 { font-size: 1.35rem; }
  .person-actions { margin-top: 10px; }
  .tab-pane .card { padding: 16px; }
}

/* the one-box: the input is the hero — bigger type, roomier target */
.quicklog-box input#quicklog-input { min-height: 52px; font-size: 1.02rem; }
/* its secondary controls step back a size — but stay readable (AA):
   these are the sharing/privacy toggles, never let them fade out */
.quicklog-box .trust-check { font-size: .85rem; color: var(--muted); }

/* helper sentences under content never shout */
.card > p.muted.small { line-height: 1.5; }

/* med rows: clear separation, room to tap */
.med-row { padding: 9px 0; }

/* action rows wrap cleanly with even air */
.reminder-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* checkboxes and radios are never full-width form blocks — the generic
   input rule above was inflating any checkbox outside a .trust-check label
   (clinician-only toggle, doctor-share sections) into a giant empty box */
input[type="checkbox"], input[type="radio"] {
  display: inline-block; width: auto; min-height: 0;
  padding: 0; margin: 0 6px 0 0; vertical-align: -2px;
}
/* the 🌍 make-public checkbox keeps its deliberate 20px square */
.pub-check input[type="checkbox"] { width: 20px; height: 20px; }


/* ============================================================
   Pass 6 — best-in-class app feel.
   White surfaces on a soft ground, an iOS-grade segmented tab bar,
   Apple-Health-style timeline rows, tactile buttons, richer family
   cards. CSS only — structure, IDs, and logic untouched.
   ============================================================ */
/* the app sits on a soft ground, so every white card reads as a surface */
body { background: #f6f9f7; }
.topbar { border-bottom-color: rgba(10,15,12,.05); }
.person-header.card { background: linear-gradient(180deg, #fbfdfc 0%, #ffffff 60%); }

/* tab bar → floating segmented control: tinted track, active = raised white pill */
.person-tabs {
  background: rgba(232,238,234,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(10,15,12,.05);
  border-radius: 0; padding: 4px; gap: 4px;
  /* stick BELOW the site header, never over it (the header is sticky at top 0, z 10; person.js
     measures it into --topbar-h). Rob 2026-09-29: the tabs were hiding "Calendar" in the nav. */
  top: calc(var(--topbar-h, 0px) + 8px); z-index: 9; margin: 10px 0 16px;
  box-shadow: 0 2px 10px rgba(10,15,12,.05);
}
.person-tab { background: transparent; color: var(--slate); border-radius: 0; min-height: 44px; }
.person-tab.on {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 3px rgba(10,15,12,.14), 0 4px 12px rgba(10,15,12,.06);
}

/* timeline rows read like a health app: icon in a soft tile, calm text */
.tl-icon {
  width: 38px; height: 38px; flex: 0 0 38px; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); border-radius: 0; font-size: 1.05rem;
}
.tl-item { border-color: rgba(10,15,12,.05); }
@media (hover: hover) {
  .tl-item { transition: box-shadow .15s ease; }
  .tl-item:hover { box-shadow: 0 4px 14px rgba(10,15,12,.08); }
}

/* family cards invite the tap: lift on hover, a quiet chevron affordance */
.person-card { transition: transform .15s ease, box-shadow .15s ease; }
a.person-card::after { content: '›'; margin-left: auto; color: var(--hint); font-size: 1.35rem; line-height: 1; padding-left: 6px; flex: 0 0 auto; }
@media (hover: hover) {
  a.person-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,15,12,.10); }
}

/* buttons feel physical: gentle press, primary with a touch of light */
.btn { transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: scale(.985); }
.btn-primary {
  background: linear-gradient(180deg, #23935e, #1e7d4f);
  box-shadow: 0 1px 2px rgba(10,15,12,.15), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover { background: linear-gradient(180deg, #1f8a56, #196b43); }

/* keyboard users always see where they are */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .person-card, .tl-item { transition: none; }
  .btn:active, a.person-card:hover { transform: none; }
}

/* mobile quick-log dock: the one-box within thumb reach, chat-app style.
   Fixed pill at the bottom of the Today tab; tapping it scrolls to and
   focuses the real composer. Hidden whenever the composer is on screen. */
.ql-dock {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 30; min-height: 52px; border-radius: 0;
  background: #fff; border: 1.5px solid var(--line); color: var(--muted);
  font: inherit; font-size: 1rem; text-align: left; padding: 0 20px;
  box-shadow: 0 8px 30px rgba(10,15,12,.18); cursor: pointer;
}
.ql-dock:active { transform: scale(.99); }
@media (min-width: 701px) { .ql-dock { display: none !important; } }
body.has-qldock .page { padding-bottom: 130px; }

/* ============================================================
   Pass 7 — the high-end finish: type, depth, motion, detail.
   One shadow system, a finer avatar ring, editorial hairlines,
   and content that arrives gently. CSS only.
   ============================================================ */
::selection { background: rgba(30,125,79,.16); }
body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

/* one depth system: rest / floating */
:root {
  --sh-rest: 0 1px 2px rgba(10,15,12,.04), 0 8px 24px rgba(10,15,12,.05);
  --sh-float: 0 10px 40px rgba(10,15,12,.16);
}
.tab-pane .card, .quicklog-box, .person-header.card { box-shadow: var(--sh-rest); }
.ql-dock { box-shadow: var(--sh-float); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* the identity moment: a finer ring around the person */
.person-photo { border: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--line), 0 10px 26px rgba(10,15,12,.12); }

/* the daily summary reads editorial */
.greeting-text { font-size: 1.02rem; line-height: 1.62; color: var(--ink); }
#greeting-eyebrow { letter-spacing: .14em; }

/* timeline date labels: small caps with a hairline that runs out */
.tl-group-date { display: flex; align-items: center; gap: 10px; }
.tl-group-date::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* content arrives, gently — replays on tab switch, never on data refresh */
@keyframes fs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tab-pane.on > * { animation: fs-rise .38s cubic-bezier(.22,.9,.3,1) backwards; }
.tab-pane.on > *:nth-child(1) { animation-delay: .02s; }
.tab-pane.on > *:nth-child(2) { animation-delay: .06s; }
.tab-pane.on > *:nth-child(3) { animation-delay: .10s; }
.tab-pane.on > *:nth-child(4) { animation-delay: .14s; }
.tab-pane.on > *:nth-child(5) { animation-delay: .18s; }
.tab-pane.on > *:nth-child(6) { animation-delay: .22s; }
.tab-pane.on > *:nth-child(n+7) { animation: none; }
.person-grid > *:nth-child(-n+6) { animation: fs-rise .38s cubic-bezier(.22,.9,.3,1) backwards; }
.person-grid > *:nth-child(2) { animation-delay: .05s; }
.person-grid > *:nth-child(3) { animation-delay: .10s; }
.person-grid > *:nth-child(4) { animation-delay: .15s; }
.person-grid > *:nth-child(5) { animation-delay: .20s; }
.person-grid > *:nth-child(6) { animation-delay: .25s; }

/* segments glide, inputs ease */
.person-tab { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
input, select, textarea { transition: border-color .15s ease; }

/* quiet, thin scrollbars where rows overflow */
.person-tabs, .topnav { scrollbar-color: #c9d3cc transparent; }

@media (prefers-reduced-motion: reduce) {
  .tab-pane.on > *, .person-grid > * { animation: none !important; }
}

/* fullscreen check-in overlay: the card, bright on dark, one tap to close */
#card-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,15,12,.93); display: flex; align-items: center; justify-content: center; padding: 18px; cursor: pointer; }
#card-overlay img { max-width: 100%; max-height: 86vh; border-radius: 0; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#card-overlay iframe { width: 100%; height: 86vh; border: 0; border-radius: 0; background: #fff; }
.card-overlay-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 101; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 0; min-height: 44px; padding: 8px 18px; font: inherit; font-weight: 700; cursor: pointer; }

/* the day at a glance, under a food/exercise log: target · eaten · burned · room */

/* first-record reveal: the family's own document plays back what it built,
   one row at a time, each landing with its ✓ */
.fr-step { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.fr-step.in { opacity: 1; transform: none; }
.fr-done { color: var(--accent); font-weight: 800; opacity: 0; transition: opacity .3s ease .15s; margin-left: 4px; }
.fr-step.in .fr-done { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fr-step { transition: none; opacity: 1; transform: none; } .fr-done { opacity: 1; } }

/* day one: one screen, one button (views/pages.js firstStepPage). The doors
   My Family hides until the first record is in carry .fs-quiet; it beats the
   JS that un-hides them, so nothing can pop back in behind the family's back. */
.fs-quiet { display: none !important; }
.first-step { border: 1.5px solid var(--warm); background: linear-gradient(180deg, #f6fbf8, #fff); padding: 22px 20px 20px; }
.first-step-who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.first-step-who .person-photo { width: 64px; height: 64px; flex: 0 0 64px; }
.first-step-who h1 { font-size: 1.45rem; margin: 0; }
.first-step-who p { margin: 2px 0 0; }
.first-step-ask { font-size: 1.35rem; margin: 0 0 6px; }
.first-step-btn { display: block; width: 100%; min-height: 56px; font-size: 1.08rem; margin-top: 14px; }
.first-step-alt { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #e8ece9); }
#first-built { scroll-margin-top: 72px; }
@media (min-width: 700px) { .first-step { padding: 28px; } .first-step-btn { width: auto; min-width: 320px; } }

/* first-class portal connection on the record (door → live state) */
.connect-band { display: flex; flex-basis: 100%; width: 100%; box-sizing: border-box; align-items: center; gap: 12px; margin: 10px 0 0; padding: 12px 14px; min-height: 54px; border-radius: 0; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--ink); text-decoration: none; }
.connect-band:hover { background: #dcefe3; }
.connect-band .cb-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; }
.connect-band.on .cb-ico { background: #2E7D32; }
.connect-band.warn { border-color: #D68F00; background: #FFF6E5; }
.connect-band.warn .cb-ico { background: #D68F00; }
.connect-band .cb-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.connect-band b { font-size: .98rem; line-height: 1.25; }
.connect-band .cb-sub { font-size: .82rem; color: var(--slate); }
.connect-band .cb-go { margin-left: auto; color: var(--accent); font-size: 1.5rem; line-height: 1; }
.first-step-connect { display: inline-flex; min-height: 44px; align-items: center; }

/* first screen: the two other doors (forward an email, connect a portal) stacked under the upload button */
.first-step-alts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.first-step-alts .btn { width: 100%; }
@media (min-width: 600px) { .first-step-alts { flex-direction: row; } .first-step-alts .btn { flex: 1 1 0; } }

/* TruePrime Today / Calendar (docs/TRUEPRIME-CONTRACT.md §5) */
.tp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.tp-range { display: flex; gap: 8px; margin: 0 0 14px; }
.tp-range-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.tp-day { margin: 0 0 16px; }
.tp-day-h { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin: 0 0 6px; }
.tp-ev { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 0; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 0; background: var(--card); min-height: 54px; }
.tp-ev:hover { border-color: var(--accent); }
.tp-ev-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.tp-ev-time { flex: 0 0 74px; font-weight: 700; color: var(--accent); font-size: .92rem; }
.tp-ev-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tp-ev-title { font-weight: 600; overflow-wrap: anywhere; }
.tp-ev-del { flex: 0 0 auto; color: var(--slate); padding: 8px; }
.tp-apps { margin-top: 18px; }
.tp-app-list { list-style: none; margin: 8px 0 0; padding: 0; }
.tp-app { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.tp-app-name { font-weight: 600; flex: 1 1 160px; }
.tp-app.on .tp-app-state { color: #2E7D32; font-weight: 600; }
.tp-sheet-wrap { position: fixed; inset: 0; background: rgba(10,15,12,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 60; }
.tp-sheet { background: var(--card); border-radius: 0 18px 0 0; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; padding: 16px 18px 20px; box-shadow: var(--sh-float); }
.tp-sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.tp-sheet-head h2 { margin: 0; }
.tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-sheet .org-search-label { display: block; margin: 10px 0 0; font-weight: 600; font-size: .9rem; color: var(--slate); }
.tp-sheet input, .tp-sheet select { width: 100%; min-height: 44px; margin-top: 4px; font-size: 1rem; }
.tp-actions { display: flex; gap: 10px; margin-top: 14px; }
.tp-actions .btn { flex: 1 1 0; min-height: 48px; }
@media (min-width: 700px) { .tp-sheet-wrap { align-items: center; } .tp-sheet { border-radius: 0; } }
.tp-month { margin: 0 0 16px; }
.tp-month-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.tp-month-head h3 { margin: 0; font-size: 1.05rem; }
.tp-month-head .btn { min-width: 44px; min-height: 44px; }
.tp-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tp-wd { text-align: center; font-size: .72rem; letter-spacing: .06em; color: var(--slate); padding: 2px 0 4px; }
.tp-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 48px; padding: 5px 2px 4px; border: 1px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.tp-cell.empty { border-color: transparent; background: transparent; cursor: default; }
.tp-cell.today .tp-cell-n { color: var(--accent); font-weight: 700; }
.tp-cell.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tp-cell-n { font-size: .95rem; line-height: 1; }
.tp-dots { display: flex; gap: 2px; min-height: 6px; }
.tp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.tp-dot.voocie { background: #b8642a; } .tp-dot.om { background: #3b5e91; } .tp-dot.sl { background: #8a6d1f; } .tp-dot.personal { background: var(--slate); }
.tp-dot.more { width: auto; height: auto; background: none; font-size: .6rem; line-height: 6px; font-style: normal; color: var(--slate); }
.tp-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-share-opts { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.tp-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; min-height: 44px; cursor: pointer; }
.tp-opt input { margin-top: 4px; width: auto; min-height: 0; }
.tp-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tp-people { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; margin: 4px 0 6px; }
.tp-person { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; min-height: 44px; cursor: pointer; }
.tp-person input { margin-top: 4px; width: auto; min-height: 0; }
.tp-person:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tp-person-body { display: flex; flex-direction: column; min-width: 0; }
.tp-person-name { font-weight: 600; }
.tp-person-shares { color: var(--slate); }
.tp-person-shares .linklike { padding: 0 4px; }
.tp-share-link { background: var(--bg, #f6f8f6); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; overflow-wrap: anywhere; font-size: .9rem; }
.tp-cal { margin-top: 18px; }
.tp-cal-row { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 8px; }
.tp-cal-row .btn { display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 600px) { .tp-cal-row { flex-direction: row; } .tp-cal-row .btn { flex: 1 1 0; } }

/* 2026-09-28 nav icons (lib/icons.js) — neutral line icons instead of emoji in the person tabs */
.person-tab .ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; flex-shrink: 0; }
@media (max-width: 480px) { .person-tab .ico { margin-right: 3px; width: 16px; height: 16px; vertical-align: -3px; } }
/* 2026-09-28 calorie day at a glance: one bar (eaten vs target), words under it */
.ql-day { margin: 8px 0 2px; max-width: 420px; }
.ql-daybar { height: 8px; border-radius: 0; background: var(--bg-alt); overflow: hidden; }
.ql-daybar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 0; transition: width .3s ease; }
.ql-daybar i.over { background: #C41E3A; } /* same red as the emergency button */
.ql-dayline { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 5px; font-size: .85rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.ql-dayline i { font-style: normal; color: var(--hint); }
.ql-dayline b { color: var(--accent); }

/* 2026-10-01 connect page: the clinic search must LOOK like a search box (Rob: "hard to tell what box to type in") */
.org-search-big { font-size: 1.02rem; }
.org-step { display: inline-block; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; border-radius: 0; padding: 3px 9px; margin-right: 6px; vertical-align: 2px; }
.org-search-wrap { display: block; position: relative; margin-top: 8px; }
.org-search-wrap::before { content: "🔍"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.05rem; pointer-events: none; }
.org-search-label .org-search-wrap input { min-height: 54px; padding: 12px 14px 12px 44px; font-size: 1.05rem; border: 2px solid var(--accent); border-radius: 0; background: #fff; box-shadow: 0 2px 10px rgba(30,125,79,.12); }
.org-search-label .org-search-wrap input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 4px var(--accent-soft); }
.org-search-label .org-search-wrap input::placeholder { color: #7f8a83; }

/* 2026-10-01 item 1 of the dashboard cleanup (Christine: "way too wordy"): a card's explanation hides behind a ? next to its title */
.card-hint { display: none; }
.card-hint.show { display: block; }
.hint-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 8px; vertical-align: 2px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--slate); font: 700 .8rem/1 inherit; font-family: inherit; cursor: pointer; padding: 0; }
.hint-toggle:hover, .hint-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.hint-toggle::after { content: ""; position: absolute; inset: -10px; } /* 44 px tap target */
.hint-toggle { position: relative; }

/* 2026-10-01 dashboard cleanup item 2 (Christine: "colors blend together"): three layers on the record page.
   1 DATA on white cards (meds, timeline, follow-ups, doctors, history) — ink headings, soft shadow.
   2 TOOLS on soft grey (.card-tool: the one-box, setup, share, add records, email address, album, settings) — flat, no shadow.
   3 ONE warm accent for what needs the family's attention (due dose, follow-up, pending review) — amber, never green.
   Green stays for buttons and links only. Scoped to body.person-page so marketing/try pages are untouched. */
.person-page { background: #eef1ee; --warm: #c7870f; --warm-bg: #fff6e3; }
.person-page .card { background: #fff; border-color: #e1e6e2; box-shadow: none; }   /* brand bones: the record page cards carry no shadow either (2026-10-06) */
.person-page .card h2 { color: var(--ink); }
.person-page .card.card-tool { background: #f4f5f2; border-color: #e3e6e1; box-shadow: none; }
.person-page .card.card-tool h2 { color: var(--slate); font-weight: 600; }
.person-page .card.card-tool input, .person-page .card.card-tool textarea, .person-page .card.card-tool select { background: #fff; }
.person-page .tl-item, .person-page .bd-existing-item { background: #fff; border-color: #e1e6e2; }
/* the attention layer */
.person-page .alert-amber { background: var(--warm-bg); color: #6b4a00; border-color: var(--warm); }
.person-page .chip-warn { background: var(--warm-bg); color: #6b4a00; }
.person-page .btn-give.due { border: 2px solid var(--warm); box-shadow: 0 0 0 3px rgba(199,135,15,.15); }
.person-page .chip-pending, .person-page .chip-processing { background: var(--warm-bg); color: #6b4a00; }
.person-page .card[style*="var(--warm)"] { background: #fff; }
/* quieter status chips: tools-grey, not green */
.person-page .chip-stat { background: #eef1ee; }
.person-page .chip-good { background: var(--accent-soft); }

/* 2026-10-01 medications: compact rows (tap the name for the extras) and a one-line card on a quiet day */
.person-page .med-row:not(.open) .med-minor, .person-page .med-row:not(.open) [data-fixlast], .person-page .med-row:not(.open) .med-next, .person-page .med-row:not(.open) .med-instr { display: none; }
.person-page .med-info { cursor: pointer; }
.person-page .med-info > strong::after { content: " ⌄"; color: var(--hint); font-weight: 400; font-size: .85em; }
.person-page .med-row.open .med-info > strong::after { content: " ⌃"; }
.person-page .med-row { padding: 8px 0; }
.person-page .meds-summary { margin: 0 0 6px; color: var(--slate); }
.person-page .meds-summary:empty { display: none; }
.person-page .card.meds-folded #med-list, .person-page .card.meds-folded #med-quick, .person-page .card.meds-folded #med-snap, .person-page .card.meds-folded .card-hint { display: none; }

/* 2026-10-01 the "say it" line (port of the ShopProp 3.0 pattern; FS green instead of gold) */
.sayline { height: 24px; overflow: hidden; margin: 0 0 6px; font-size: .86rem; line-height: 24px; color: var(--slate); white-space: nowrap; text-overflow: ellipsis; }
.iconbtn.mic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; border-radius: 0; border: 1.5px solid var(--accent); background: var(--accent); color: #fff; font-size: 1.15rem; cursor: pointer; padding: 0; }
.iconbtn.mic:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.iconbtn.mic.on { background: #fff; color: var(--accent); animation: sayit-pulse 1.2s ease-in-out infinite; }
@keyframes sayit-pulse { 50% { box-shadow: 0 0 0 6px rgba(30,125,79,.18); } }
.quicklog-box textarea#quicklog-input { width: 100%; min-height: 56px; max-height: 120px; resize: none; font: inherit; font-size: 1.08rem; margin-top: 0; background: #fff; border: 1px solid var(--line, #e6dfd4); border-radius: 0; padding: 12px 14px; line-height: 1.4; }
.quicklog-box textarea#quicklog-input:focus { outline: none; border-color: var(--warm, #1e7d4f); box-shadow: 0 0 0 3px rgba(30,125,79,.14); }
.chat-input textarea { resize: none; }
.chat-page .chat-input { padding-bottom: calc(10px + var(--kb, 0px)); }

/* 2026-10-02 dashboard refinement (Codex review, Rob's ask): a shorter shared header, Records shortcuts, the "needs you" line */
.person-header.card { padding: 16px 20px 12px; }
.person-photo { width: 64px; height: 64px; flex-basis: 64px; }
.person-meta h1 { font-size: 1.45rem; }
.person-actions { margin-top: 8px; }
.connect-band { margin-top: 8px; padding: 9px 12px; min-height: 46px; }
.person-more summary { padding: 2px 0; }
@media (min-width: 561px) {
  /* three doors on one row once there is room: Ask leads, the two helpers beside it */
  .person-actions { grid-template-columns: 1.4fr 1fr 1fr; }
  .person-actions .btn-primary { grid-column: auto; }
  .person-more .person-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* photo beside the name on phones, not above it: ~80 px back for Today */
  .person-header { flex-direction: row; text-align: left; align-items: center; }
  .person-header.card { padding: 14px 14px 10px; }
  .person-photo { width: 56px; height: 56px; flex-basis: 56px; }
  .person-meta h1 { font-size: 1.3rem; }
  .person-actions { justify-content: stretch; margin-top: 6px; }
}
.rec-jumps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rec-jump { min-height: 44px; padding: 8px 14px; border-radius: 0; border: 1px solid rgba(10,15,12,.12); background: #fff; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.rec-jump:hover { background: var(--accent-soft); }
.rec-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#timeline-head, #wellness-card, #add-records-card, #files-card { scroll-margin-top: calc(var(--topbar-h, 0px) + 84px); outline: none; }
#timeline-head:focus-visible, #wellness-card:focus-visible, #add-records-card:focus-visible, #files-card:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 0; }
.attention-line a.linklike { text-decoration: none; }
.attention-line a.linklike:hover strong { text-decoration: underline; }
#dshare-scope { max-width: 100%; }
@media (max-width: 480px) { .connect-band .cb-sub-more { display: none; } .attention-line { padding: 10px 12px; } }
/* Care Team: the per-member "sees" dropdown never widens the page on phones (pre-existing 165 px overflow at 360, 2026-10-02) */
#team-list label { max-width: 100%; flex-wrap: wrap; }
#team-list select[data-scopes] { max-width: 100%; min-width: 0; }

/* Family home tiles (My Family) */
.home-tile { display: flex; gap: 12px; align-items: flex-start; }
.home-tile-ico { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.home-tile-body { min-width: 0; flex: 1; }
.home-tile-body a.linklike { display: inline-block; margin-top: 4px; min-height: 0; }

/* Help: the say-it mic sits in the question row at its fixed 44 px */
.quick-add .iconbtn.mic { flex: 0 0 44px; }

/* private preview of a share page: the banner says so, and the page is otherwise exactly what a link would show */
.em-preview-banner { background: #fff6e3; border: 1.5px solid #c7870f; color: #0a0f0c; border-radius: 0; padding: 10px 14px; margin: 0 0 14px; font-size: .95rem; line-height: 1.45; }
.em-preview-banner a { color: #1e7d4f; font-weight: 600; white-space: nowrap; }

/* More menu: the four group labels read as headings, not hints (Codex 2026-10-02 saw a flat list) */
.person-more .do-more-h { font-size: .8rem !important; color: var(--slate, #4b5a52) !important; letter-spacing: .04em !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rr-more > summary { cursor: pointer; font-weight: 600; }

/* NEEDS YOU card on Today */
.needs-card { padding: 10px 12px; }
.needs-head { margin: 0 0 6px; }
.needs-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid rgba(10,15,12,.06); font-weight: 500; }
.needs-row:first-of-type { border-top: none; }
.needs-ico { flex: 0 0 auto; }
.needs-body { flex: 1; min-width: 0; }
.needs-detail { display: block; font-weight: 400; }
.needs-door { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.needs-tag { font-size: .72rem; font-weight: 600; color: #1e7d4f; background: #e6f1ea; border-radius: 0; padding: 1px 8px; margin-left: 4px; white-space: nowrap; }

/* the Needs-you card is a block, not the banner's flex row; rows wrap on phones; nothing can widen the page */
.alert-banner.needs-card { display: block; max-width: 100%; overflow-wrap: anywhere; }
.needs-row { flex-wrap: wrap; }
.needs-head .muted { display: inline-block; }
.needs-door { white-space: normal; }
.tl-flash { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }
.needs-setup { margin-top: 8px; } .needs-setup > summary { cursor: pointer; } .needs-setup-row { font-weight: 400; } .needs-setup-only { background: #f4f5f2; border-radius: 0; padding: 8px 12px; margin-bottom: 10px; }

/* THE OPERATOR SHELL (2026-10-04, Rob: "slick tool bar on left, tools in the middle, chat on the side"). On a screen
   1024px or wider the record's page is three parts: a slim dark rail of sections and tools on the left (it opens to show
   its labels on hover or keyboard focus), the record's work in the middle, and the assistant as one conversation fixed on
   the right. Below 1024px the rail and the dock are empty and hidden and the page is exactly as before. The classes are
   set by /js/operator.js only once each part exists: has-dock (assistant drawn), has-rail (rail drawn). */
/* ICON PASS (Gemini review, 2026-10-06): card headers, the Needs rows and the assistant's plan titles carry the same
   18px line icons as the tabs and the rail, in the brand green; emoji stay only as the fallback when a bank is missing. */
h1 .ico { width: 28px; height: 28px; vertical-align: -5px; margin-right: 10px; color: var(--warm, #1e7d4f); flex-shrink: 0; }
h2 .ico, h3 .ico { width: 24px; height: 24px; vertical-align: -5px; margin-right: 8px; color: var(--warm, #1e7d4f); flex-shrink: 0; }
.card h2 .ico, .tab-pane h2 .ico { width: 20px; height: 20px; vertical-align: -4px; }
strong .ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; color: var(--warm, #1e7d4f); }
.btn .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.needs-ico .ico { width: 18px; height: 18px; vertical-align: -4px; color: var(--warm, #1e7d4f); }
#assistant-dock .as-head strong .ico { margin-right: 6px; }
/* the assistant's hint line in the dock wraps instead of clipping at the panel's width */
#assistant-dock .sayline { white-space: normal; height: auto; line-height: 1.35; padding: 2px 0; overflow: visible; text-overflow: clip; }
/* with one door the record card is the button alone: no second box around it */
body.one-door .quicklog-box { border: 0; background: none; box-shadow: none; padding: 0; }
body.one-door .quicklog-box:has(#ql-attach:not([hidden])) { border: 1px solid var(--line); background: #fff; padding: 14px; }   /* a photo attached: the caption box is a box again */
body.one-door .quicklog-box .quicklog-actions { margin-top: 0; }
body.one-door #intake-snap { min-width: 220px; }
/* ONE TEXT BOX on a wide screen (the assistant is docked): the record card is the photo / paper door; its words, mic and
   options are in the assistant's bar. A photo attached brings the caption field and Log back. */
body.one-door #quicklog-input, body.one-door #ql-line, body.one-door #ql-mic, body.one-door #quicklog-log, body.one-door .quicklog-box .trust-check, body.one-door #quicklog-circle, body.one-door #quicklog-audience { display: none; }
body.one-door .quicklog-box:has(#ql-attach:not([hidden])) #quicklog-input, body.one-door .quicklog-box:has(#ql-attach:not([hidden])) #quicklog-log, body.one-door .quicklog-box:has(#ql-attach:not([hidden])) .trust-check { display: block; }
body.one-door .quicklog-box:has(#ql-attach:not([hidden])) #quicklog-log { display: inline-flex; }
body.one-door #intake-snap::after { content: " Add a photo or paper"; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.op-opts { margin: -2px 0 6px; } .op-opts label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; } .op-opts select { min-height: 36px; margin-left: 6px; font-size: .9rem; }
#op-form #op-mic { flex: 0 0 44px; }
/* the work module when nothing is in progress: one quiet line with its counts, not an empty card above the fold */
#op-work.op-work-empty { padding: 12px 16px; }
#op-work.op-work-empty h2 { font-size: 1.1rem; margin: 0; }
#op-work.op-work-empty #op-board > div:first-child { margin-top: 8px !important; }
#op-work.op-work-empty .op-empty-hint { display: none; }
/* needs-you with nothing pressing (only quiet items, nothing overdue): a plain card, not the amber one */
.person-page .alert-amber.needs-card.needs-quiet { background: #fff; color: var(--ink); border-color: var(--line); }
/* only quiet items: one line, not a card of rows (Gemini review #3, 2026-10-07) — the head, then each item with its door;
   the detail sentence is folded away (the door says where it goes) */
.needs-card.needs-quiet { padding: 10px 14px; }
.needs-quiet .needs-head { display: inline; margin: 0 10px 0 0; }
.needs-quiet .needs-row { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin: 0 14px 0 0; border: 0; vertical-align: middle; }
.needs-quiet .needs-body { flex: 0 1 auto; }
.needs-quiet .needs-body strong { font-weight: 500; }
.needs-quiet .needs-detail { display: none; }
.needs-quiet .needs-door { min-height: 32px; }
.needs-quiet .needs-setup { margin-top: 6px; }
.person-header #insurance-quick { margin: 8px 0 0; flex-basis: 100%; }
.needs-card.needs-quiet .needs-head strong { color: var(--ink); }
#assistant-dock, #tool-rail { display: none; }
/* the phone's tool strip: the rail's doors as one scrolling row of icon + name under the tabs (built by operator.js
   buildRail when the rail is not drawn); empty, and so invisible, on wide hover screens */
#tool-strip { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px 0 8px; margin: -4px 0 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#tool-strip:empty { display: none; }
.apps-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.apps-row .strip-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .82rem; font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 0; }
.apps-row .strip-btn .ico { width: 18px; height: 18px; color: var(--warm, #1e7d4f); }
#tool-strip .strip-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .82rem; font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 0; }
#tool-strip .strip-btn .rail-ico { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--warm, #1e7d4f); }
#tool-strip .strip-btn .rail-ico svg { width: 18px; height: 18px; }
#tool-strip .strip-btn .rail-emo { font-size: 1rem; }
#tool-strip .strip-btn.rail-crisis { border-color: var(--danger, #C41E3A); color: var(--danger, #C41E3A); }
#tool-strip .strip-btn.rail-crisis .rail-ico { color: var(--danger, #C41E3A); }
@media (min-width: 1024px) {
  body.has-dock { --dock-w: 340px; --rail-w: 0px; --mid-max: 1240px; --mid-space: calc(100vw - var(--rail-w) - var(--dock-w) - 16px); }
  body.has-dock.has-rail { --rail-w: 64px; }
  /* one way to each place (Gemini review, 2026-10-07): with the rail drawn, the top bar drops the links the rail already
     carries (My Family = the rail's home, Help = its foot) and keeps the rest: My record (the signed-in person's own,
     not the record on screen), Calendar, Blog, Sign out. The phone has no rail and keeps every link. */
  body.has-rail .topnav a[href="/people"], body.has-rail .topnav a[href="/help"] { display: none; }
  body.has-dock main.page { max-width: none; width: min(var(--mid-max), calc(var(--mid-space) - 40px)); margin-left: calc(var(--rail-w) + max(20px, (var(--mid-space) - var(--mid-max)) / 2)); margin-right: 0; }
  body.has-dock footer { margin-left: calc(var(--rail-w) + max(20px, (var(--mid-space) - var(--mid-max)) / 2)) !important; margin-right: 0 !important; max-width: min(var(--mid-max), calc(var(--mid-space) - 40px)) !important; }
  body.has-dock #assistant-dock { display: block; position: fixed; top: 86px; bottom: 14px; right: 14px; width: var(--dock-w); z-index: 5; }

  /* the rail: its own column under nothing — it runs the full height, the top bar starts to its right */
  body.has-rail #tool-rail { display: flex; flex-direction: column; gap: 2px; position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); padding: 10px 10px 10px; background: #0d1611; overflow: hidden; z-index: 30; transition: width .14s ease, box-shadow .14s ease; }
  #tool-rail .rail-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; padding-bottom: 26px; -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent); }
  #tool-rail .rail-scroll::-webkit-scrollbar { display: none; }
  body.has-rail #tool-rail:hover, body.has-rail #tool-rail:focus-within { width: 236px; box-shadow: 14px 0 34px -16px rgba(10,15,12,.55); }
  #tool-rail .rail-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: #c9d6ce; font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
  #tool-rail .rail-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
  #tool-rail .rail-btn:focus-visible { outline: 2px solid #8fd3ad; outline-offset: -2px; }
  #tool-rail .rail-btn.on { background: var(--accent); color: #fff; }
  #tool-rail .rail-ico { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; font-weight: 700; font-family: Poppins, system-ui, sans-serif; }
  #tool-rail .rail-ico .ico { width: 20px; height: 20px; }
  #tool-rail .rail-note { font-size: 11px; color: #8fa397; margin-left: 4px; }
  #tool-rail .rail-h { display: block; padding: 10px 10px 2px; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #8fa397; }
  #tool-rail .rail-ico svg { width: 20px; height: 20px; }
  #tool-rail .rail-emo { filter: grayscale(1) brightness(1.7) contrast(.9); }
  #tool-rail .rail-btn:hover .rail-emo { filter: none; }
  #tool-rail .rail-label { opacity: 0; transition: opacity .12s ease; overflow: hidden; text-overflow: ellipsis; }
  #tool-rail:hover .rail-label, #tool-rail:focus-within .rail-label { opacity: 1; }
  #tool-rail .rail-sep { flex: 0 0 1px; margin: 6px 6px; background: rgba(255,255,255,.14); }
  #tool-rail .rail-app .rail-dot { flex: 0 0 7px; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #8fd3ad; opacity: 0; transition: opacity .12s ease; }   /* connected to this account */
  #tool-rail:hover .rail-app .rail-dot, #tool-rail:focus-within .rail-app .rail-dot { opacity: 1; }
  #tool-rail .rail-crisis .rail-emo { filter: none; }
  #tool-rail .rail-crisis { color: #ffb4ab; }
  #tool-rail .rail-crisis:hover { color: #ffd9d4; }
  body.has-rail .topbar { padding-left: calc(var(--rail-w) + 20px); }
  /* what the rail now carries is not repeated in the page */
  body.has-rail .person-tabs, body.has-rail .person-header > .person-actions, body.has-rail .person-header > .person-more { display: none !important; }
  body.has-rail .person-header.card { margin-bottom: 14px; }
}
/* the assistant: head, conversation, what it proposes, starters, the box — the conversation takes the room that is left */
#assistant-dock .as-panel { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--warm, #1e7d4f); border-radius: 0; box-shadow: 0 10px 30px -18px rgba(10,15,12,.35); overflow: hidden; }   /* the same hairline as every card (Gemini review, 2026-10-07) */
#assistant-dock .as-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 14px; border-bottom: 1px solid var(--line); background: var(--gold-bg, #f2f8f4); font-family: 'Cormorant Garamond', Cormorant, Georgia, serif; font-size: 1.15rem; }
#assistant-dock .as-head strong { font-weight: 500; white-space: nowrap; }
#assistant-dock .as-head .as-sub { font-style: italic; font-size: .9rem; color: var(--hint, #8a938c); margin: 0 auto 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1199px) { #assistant-dock .as-head .as-sub { display: none; } }
#assistant-dock #op-chips .btn .ico { width: 16px; height: 16px; flex: 0 0 16px; color: var(--warm, #1e7d4f); }
#assistant-dock .as-head a { text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-family: 'Poppins', system-ui, sans-serif; font-size: 12px; }
#assistant-dock .as-thread { flex: 1 1 0; min-height: 72px; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
#assistant-dock .as-empty { margin: auto 0; color: var(--slate); font-size: .95rem; line-height: 1.5; }
#assistant-dock .as-msg { max-width: 92%; padding: 9px 12px; border-radius: 0; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); }
#assistant-dock .as-you { align-self: flex-end; background: #eef1ee; color: var(--ink); }
#assistant-dock .as-stork { align-self: flex-start; background: var(--gold-bg, #f2f8f4); color: var(--ink); border-color: var(--warm, #1e7d4f); }
#assistant-dock .as-old { opacity: .78; font-size: .9rem; }
#assistant-dock .as-note { align-self: center; font-size: .7rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hint); padding: 2px 0; }
#assistant-dock .as-error { align-self: flex-start; background: #fff6e5; color: #7a4d00; border: 1px solid #f1dcae; }
#assistant-dock .as-open { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 2px; white-space: nowrap; }
#assistant-dock #op-plan { flex: 0 1 auto; max-height: 68%; overflow: auto; margin: 0 !important; padding: 0 12px 4px; }
#assistant-dock #op-instead { padding: 0 14px; }
#assistant-dock #op-starters { flex: 0 1 auto; min-height: 44px; overflow: auto; border-top: 1px solid var(--line); padding: 0 12px; }
#assistant-dock #op-starters[open] { max-height: 42%; padding-bottom: 10px; }
#assistant-dock #op-starters > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--slate); }
/* the jobs as one scrolling row of pills above the text box, not a stack (Gemini review, 2026-10-07) */
#assistant-dock #op-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
#assistant-dock #op-chips .btn { font-size: 13px; font-weight: 500; letter-spacing: .6px; text-transform: none; padding: 12px 14px; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.3; border: 1px solid var(--line); background: #fff; }
#assistant-dock #op-form { align-items: flex-end; flex-wrap: nowrap !important; }
#assistant-dock #op-form { flex: 0 0 auto; margin: 0 !important; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: #fbfdfc; }
#assistant-dock #op-form .iconbtn.mic { background: #fff; color: var(--ink); border: 1px solid var(--line); }
#assistant-dock #op-form .iconbtn.mic:hover { background: var(--gold-bg, #f2f8f4); border-color: var(--warm, #1e7d4f); }
#assistant-dock #op-text { border-radius: 0; }
/* THE PERSON'S OWN ARRANGEMENT of Today (lib/layout.js): a panel put away is not drawn; the work list is put away by a
   class on the body because on a phone its card also holds the request box, which always stays. */
.panel-off { display: none !important; }
body.panel-off-work #op-work, body.panel-off-work #op-board { display: none !important; }
#layout-note { margin: 14px 2px 0; }
#assistant-dock .as-thread .as-empty:first-child { margin: auto 0 8px; }
#assistant-dock .as-thread .as-hint { margin: 0 0 auto; font-size: .86rem; color: var(--hint); }
@media (min-width: 1500px) { body.has-dock.panel-off-work #tab-today.on { display: block; } }
/* ON A PHONE: ONE bar at the bottom opens the assistant over the page, full screen; Close returns to the page. It
   answers and files, so it takes the place of the older "Add information…" pill (hidden while this bar exists) — one
   door, not two (Rob 2026-10-05). It steps aside while a box on the page is being typed in. Shown only below 1024px,
   only once the assistant has loaded. */
#assistant-open, #assistant-close { display: none; }
@media (max-width: 1023.98px) {
  body.has-sheet #assistant-close { display: inline-flex; align-items: center; min-height: 44px; }
  /* the bar is the one door to ask on a phone: the header keeps what the bar cannot do (photos and papers, the emergency card) */
  body.has-ask .person-header > .person-actions > .btn-primary { display: none; }
  #assistant-open { display: flex; align-items: center; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 31; min-height: 54px; padding: 0 20px; border: 1.5px solid var(--accent); border-radius: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--slate); font: inherit; font-size: 1rem; text-align: left; box-shadow: 0 10px 30px rgba(10,15,12,.2); cursor: pointer; }
  #assistant-open .ao-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.has-ask .ql-dock { display: none !important; }
  body.has-ask .page { padding-bottom: 110px; }
  body.is-typing #assistant-open { display: none; }
  #assistant-open:focus-visible { outline: 3px solid #8fd3ad; outline-offset: 2px; }
  body.has-sheet { overflow: hidden; }
  body.has-sheet #assistant-open, body.has-sheet .ql-dock { display: none !important; }
  body.has-sheet #assistant-dock { display: block; position: fixed; inset: 0; height: 100dvh; z-index: 90; background: #fff; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  body.has-sheet #assistant-dock .as-panel { border: 0; border-radius: 0; box-shadow: none; }
  body.has-sheet #assistant-dock .as-head { gap: 10px; }
  body.has-sheet #assistant-dock .as-head strong { margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media print { #assistant-open { display: none !important; } }
@media (min-width: 1200px) { body.has-dock { --dock-w: 380px; } }
@media (min-width: 1600px) { body.has-dock { --dock-w: 420px; } }
/* a wide middle is filled, not stretched: Today is two fixed columns — the page's own cards on the left, the work list
   on the right beside the assistant that drives it. Fixed tracks, so no card changes column when another one grows. */
@media (min-width: 1500px) {
  body.has-dock #tab-today.on { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(39, auto) 1fr; column-gap: 16px; align-items: start; }
  body.has-dock #tab-today.on > * { grid-column: 1; min-width: 0; }
  body.has-dock #tab-today.on > #operator-slot { grid-column: 2; grid-row: 1 / -1; }
  body.has-dock #tab-today.on > #operator-slot > .card { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { body.has-rail #tool-rail, #tool-rail .rail-label { transition: none; } }
@media print { #assistant-dock, #tool-rail { display: none !important; } }


/* THE CARE PLAN (2026-10-12): folded card under Needs; rows reuse .needs-row; a status tint on the dot only */
.care-plan summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.care-plan summary::-webkit-details-marker { display: none; }
.care-plan summary::before { content: '▸'; color: var(--muted, #718096); }
.care-plan[open] summary::before { content: '▾'; }
.care-plan .cp-row .needs-ico { font-weight: 600; }
.care-plan .cp-overdue .needs-ico { color: var(--danger, #B83232); }
.care-plan .cp-due .needs-ico { color: var(--gold-deep, #B7935A); }
.care-plan .cp-done .needs-ico { color: var(--ok, #2F855A); }
.care-plan .cp-done strong { font-weight: 500; color: var(--muted, #718096); }

/* THE RECORDS EMAIL CHIP (2026-10-12): under the top bar on every signed-in page; the address wraps, Copy is 44px */
.inbox-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 16px; background: var(--bg-soft, #F7FAF8); border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.inbox-chip-who { color: var(--muted); white-space: nowrap; }
.inbox-chip-who a { color: inherit; text-decoration: none; }
.inbox-chip-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; word-break: break-all; user-select: all; -webkit-user-select: all; }
.inbox-chip-copy { min-height: 44px; min-width: 64px; }
.inbox-chip-hint { flex-basis: 100%; }
@media (min-width: 720px) { .inbox-chip { padding: 6px 16px; } .inbox-chip-hint { flex-basis: auto; margin-left: auto; } }
.person-card .card-addr { margin: 4px 0 0; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.person-card .card-addr code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; color: var(--ink); }
.person-card .card-addr button { min-height: 32px; padding: 0 6px; }

/* care plan edits (2026-10-12): the family hides a line, adds one, marks theirs done */
.care-plan .cp-ctl { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; white-space: nowrap; }
.care-plan .cp-ctl button { min-height: 32px; padding: 0 4px; }
.care-plan .cp-hidden, .care-plan .cp-add { margin-top: 8px; }
.care-plan .cp-hidden summary, .care-plan .cp-add summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.cp-add-form { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 6px; }
.cp-add-form label { display: flex; flex-direction: column; gap: 4px; }
.cp-add-form input, .cp-add-form select { min-height: 44px; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
@media (min-width: 720px) { .cp-add-form { grid-template-columns: 2fr 1fr 1fr 2fr auto; align-items: end; } }

/* visit prep, one per visit (2026-10-12) */
.vp-form { display: grid; grid-template-columns: 1fr; gap: 8px; }
.vp-form label { display: flex; flex-direction: column; gap: 4px; }
.vp-form input, .vp-form select { min-height: 44px; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.vp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vp-list .vp-item summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vp-note-label { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vp-note { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; width: 100%; box-sizing: border-box; }
@media (min-width: 720px) { .vp-form { grid-template-columns: 2fr 1.5fr 1fr 1.5fr; } .vp-form .vp-actions { grid-column: 1 / -1; } }

/* the Calendar (2026-10-12): a suggested item says so; one item into the phone's calendar */
.tp-pill { display: inline-block; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; margin-left: 6px; }
.tp-pill-suggested { border-color: var(--gold-deep, #B7935A); color: var(--gold-deep, #B7935A); }
.tp-ev { display: flex; align-items: flex-start; gap: 8px; }
.tp-ev .tp-ev-link { flex: 1 1 auto; min-width: 0; }
.tp-ev-ics { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

/* the records-email chip keeps clear of the rail and the assistant dock (Rob 2026-10-12: "records email is cut off") */
body.has-rail .inbox-chip { padding-left: calc(var(--rail-w) + 20px); }
body.has-dock .inbox-chip { padding-right: calc(var(--dock-w) + 28px); }
body.has-dock .inbox-chip-hint { flex-basis: 100%; margin-left: 0; }

/* STARTING POINTS (2026-10-12): the chooser and the picked journey's steps */
.jr-card .jr-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.jr-card .jr-head h2 { margin: 0; }
.jr-card .jr-head .rail-h { flex-basis: 100%; }
.jr-chips { display: grid; grid-template-columns: 1fr; gap: 8px; }
.jr-chip { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.jr-chip:hover, .jr-chip:focus-visible { border-color: var(--accent); }
.jr-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.jr-n { flex: 0 0 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; color: var(--muted); }
.jr-done .jr-n { color: var(--ok, #2F855A); border-color: var(--ok, #2F855A); }
.jr-done strong { color: var(--muted); font-weight: 500; }
.jr-later .jr-n { color: var(--muted); }
.jr-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-ctl { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.jr-ctl .btn-small { min-height: 36px; }
.jr-foot { margin-top: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.jr-folded { margin: 0 0 8px; }
@media (min-width: 720px) { .jr-chips { grid-template-columns: 1fr 1fr; } }

/* starting-point chips and steps: the record's label weight, not browser bold (Rob 2026-10-12: "does this font match") */
.jr-chip strong, .jr-step strong, .jr-first strong { font-weight: 600; font-size: .95rem; letter-spacing: 0; }
.jr-chip .muted.small, .jr-step .muted.small { font-size: .85rem; line-height: 1.4; }

/* what the last sync brought in, under the connect band (2026-10-14) */
.cb-new { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--ok, #2F855A); background: var(--bg-soft, #F7FAF8); border-radius: 0 6px 6px 0; line-height: 1.5; }

/* lab panels, named, with the expected range (2026-10-14) */
.lab-table .lab-panel-head th { text-align: left; padding: 12px 6px 4px; border-bottom: 2px solid var(--line); background: var(--bg-soft, #F7FAF8); }
.lab-panel-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.lab-out { color: var(--danger, #B83232); font-weight: 600; }
.lab-ref { color: var(--muted); white-space: nowrap; }
.tl-group-date { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tl-group-n { font-family: 'Poppins', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* a visit opens (2026-10-14) */
.tl-visit-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.tl-visit-open { min-height: 32px; }
.tl-visit-card { margin: 8px 0 4px; padding: 10px 12px; }

.inbox-chip-inbox { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; position: relative; }
.inbox-chip-inbox .ico { width: 18px; height: 18px; }
.inbox-chip-n { font-size: .72rem; font-weight: 600; background: var(--gold-deep, #B7935A); color: #fff; border-radius: 999px; padding: 0 6px; line-height: 1.5; }

/* RESULTS, READ (2026-10-16): the reading sits above the lab table; numbers from the record, words from the reading */
.lab-reading { margin: 8px 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand, #1F6B4E); border-radius: 8px; background: var(--bg-soft, #F7FAF8); }
.lab-reading .lab-read-headline { font-weight: 600; margin: 0 0 8px; }
.lab-reading .lab-urgent { color: var(--danger, #B83232); font-weight: 600; margin: 0 0 8px; }
.lab-read-item { padding: 8px 0; border-top: 1px solid var(--line); }
.lab-read-item .lab-read-head { font-weight: 600; }
.lab-read-item .lab-read-head .lab-read-nums { font-weight: 400; color: var(--muted); }
.lab-read-item .lab-ask { margin-top: 4px; }
.lab-read-foot { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lab-read-cta { margin: 6px 0 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lab-reading ol { margin: 6px 0 0 18px; padding: 0; }
.lab-reading ol li { margin: 2px 0; }
/* WHERE A JOB STANDS (lib/ladder.js, public/js/ladder.js): the stops of a job's kind in a row; reached in ink, the current one bold */
.job-ladder { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 6px 0 2px; padding: 0; list-style: none; }
.job-ladder li { display: inline-flex; align-items: center; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #5f6b66); opacity: .82; }
.job-ladder li::after { content: '›'; margin: 0 6px; color: var(--muted, #5f6b66); opacity: .6; }
@media (max-width: 400px) { .job-ladder li { font-size: .66rem; letter-spacing: .02em; } .job-ladder li::after { margin: 0 4px; } }
.job-ladder li:last-child::after { content: ''; }
.job-ladder li.reached { opacity: 1; color: var(--ink, #1f2a26); }
.job-ladder li.now { font-weight: 700; color: var(--warm, #1e7d4f); }
.job-ladder li.stop { opacity: 1; color: var(--muted, #5f6b66); text-transform: none; letter-spacing: 0; font-style: italic; }
.job-ladder li.why { opacity: 1; color: var(--muted, #5f6b66); text-transform: none; letter-spacing: 0; }
.job-ladder.stopped li.now { color: var(--muted, #5f6b66); }
/* a started booking's row and doors (public/js/appointments.js bkRow): every door 44 px, wrapping at 360 */
.bk-row .bk-doors .btn, .bk-row .bk-doors .linklike { min-height: 44px; }
.bk-row .bk-words { margin-top: 4px; }
.needs-body .job-ladder { margin: 4px 0 0; }
/* the Needs card re-tokens --warm to amber: the current stop there is ink, never the 2.8:1 amber (UI seat 2026-10-17) */
.person-page .needs-body .job-ladder li.now { color: var(--ink, #1f2a26); text-decoration: underline; text-decoration-color: #c7870f; text-underline-offset: 3px; }
@media (max-width: 400px) { .needs-body .job-ladder li { font-size: .72rem; } }

/* ---- Send it to Robl (lib/intake.js, reviews/tp-intake-20261018) ---- */
.robl-addr-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.robl-addr-text { font-size: 1.02rem; word-break: normal; overflow-wrap: normal; padding: 10px 12px; background: var(--bg, #f7faf8); border: 1px solid var(--line); border-radius: 12px; flex: 1 1 220px; }
.robl-upload { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.robl-upload input[type="text"] { min-height: 44px; }
.robl-item { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.robl-item.needs { border-color: #c9a227; background: #fffbea; }
.robl-item-body { flex: 1 1 220px; min-width: 0; }
.robl-item-title { font-weight: 600; overflow-wrap: anywhere; }
.robl-item-state { margin-top: 2px; }
.robl-item-doors { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.robl-item-doors .btn { min-height: 44px; }
.robl-onit { color: var(--slate); }
.robl-onit::before { content: "● "; color: #c9a227; }
.robl-needs { color: #8a6d00; font-weight: 600; }
.robl-folders, .robl-senders { list-style: none; padding: 0; margin: 8px 0 0; }
.robl-folders li, .robl-senders li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.robl-sender-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.robl-sender-form input { flex: 1 1 200px; min-height: 44px; }
.robl-code { width: 90px; min-height: 44px; }
.robl-move-opts { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.tp-robl-card .robl-count { font-size: 1.6rem; font-weight: 600; margin: 0; }
.robl-text-doors { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.robl-text-door { min-height: 44px; padding: 10px 6px; font-size: .92rem; }
.robl-title-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); }
.robl-inrow { color: #8a2a2a; margin-top: 4px; }
.tp-robl-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border: 1px solid #c9a227; background: #fffbea; border-radius: 12px; }
.tp-robl-line { margin: 10px 0 0; }
.robl-title-link { display: inline-block; min-height: 44px; padding: 10px 0; }