/* Kids Hub, design system v2 ("next level" / modern product look).
   Mobile-first, then scaled up for tablet/desktop. Real photography
   instead of illustration-heavy chrome. Class names are kept stable from
   v1 so templates didn't need to be rewritten, only the tokens, shell
   layout, and nav/login markup changed. */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap');

:root{
  /* ---- neutrals (product surface) ---- */
  --bg: #F6F7F5;
  --cream: #F6F7F5;           /* legacy alias, kept for templates */
  --cream-deep: #EEF0EB;
  --page-bg: #F6F7F5;
  --surface: #FFFFFF;
  --surface-2: #F1F3EE;
  --ink: #16211A;
  --ink-soft: #57604F;
  --ink-faint: #8A9182;
  --line: #E4E7DE;
  --line-strong: #D3D8C9;

  /* ---- brand: forest + warm accent (kept var names from v1) ---- */
  --coral: #D9642F;
  --coral-deep: #B84F22;
  --coral-light: #FBE3D3;
  --gold: #C98A1F;
  --gold-deep: #9A6B15;
  --gold-light: #F6E7C6;
  --teal: #16794F;
  --teal-deep: #0E5C3B;
  --teal-light: #DCEEE2;
  --sage: #5C7A45;
  --sage-deep: #445C32;
  --sage-light: #E5EEDC;
  --pink: #C15B6A;
  --pink-deep: #9E4453;
  --pink-light: #F5DEE1;

  --brand: var(--teal);
  --brand-deep: var(--teal-deep);
  --brand-light: var(--teal-light);

  /* Semantic ink/border tones for the tinted status colours. These used to be
     hardcoded hexes scattered through the file; they're tokens now so the dark
     theme below can restate them in one place. */
  --coral-ink: #8a3f1c;
  --coral-line: #f0c1a2;
  --coral-tint: #FCEBD4;
  --gold-ink: #7A5A22;
  --gold-line: #e6cf9a;
  --teal-line: #bfe0cd;

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;

  --shadow-card: 0 1px 2px rgba(20,30,20,0.04), 0 10px 24px -16px rgba(20,30,20,0.18);
  --shadow-pop: 0 2px 6px rgba(20,30,20,0.05), 0 22px 44px -20px rgba(20,30,20,0.28);
  --shadow-warm: 0 14px 32px -16px rgba(20,30,20,0.30);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background: var(--page-bg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari inflates text in some rotations unless this is pinned. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Belt and braces against a stray wide child causing a sideways scroll on a
   phone. The intentionally-scrollable strips (.subnav, .photo-strip,
   .filter-row, .tbl-wrap) do their own overflow and are unaffected. */
body{ overflow-x: hidden; }
a{ color: var(--teal-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1, h2, h3, .brand-name, .btn, button{ font-family: 'Inter', sans-serif; letter-spacing:-0.01em; }

/* ---------- App shell ---------- */
.appshell{
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
}
@media (min-width: 900px){
  .appshell{ min-height: 100vh; }
}

.topbar{
  padding: 10px 20px;
  /* Sits under the iPhone status bar / notch when viewport-fit=cover is on. */
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  position: sticky; top:0; z-index: 30;
}
.topbar::after, .topbar::before{ content:none; }
.brand{ display:flex; align-items:center; gap:10px; position:relative; z-index:2; }
.brand-mark{
  width:32px; height:32px; border-radius:9px;
  background: var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; box-shadow: 0 4px 10px -4px rgba(14,92,59,0.55);
}
.brand-name{ font-size:17px; font-weight:800; letter-spacing:-0.02em; color: var(--ink); }
.user-chip{
  display:flex; align-items:center; gap:8px; position:relative; z-index:2;
  background: var(--surface-2);
  padding:4px 6px 4px 5px; border-radius:999px;
  font-size:12.5px; font-weight:600; color: var(--ink);
  border: 1px solid var(--line);
}
.user-chip .dot-avatar{
  width:25px; height:25px; border-radius:50%;
  background: var(--teal); color:#fff;
  font-family:'Inter', sans-serif; font-size:11.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.user-chip b{ font-weight:700; }
.user-chip a{ color: var(--ink-faint); margin-left:6px; font-weight:600; }
.user-chip a:hover{ color: var(--coral-deep); }

.subnav{
  display:flex; gap:4px; padding: 0 16px; overflow-x:auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position:sticky; top:57px; z-index:29;
  -ms-overflow-style: none; scrollbar-width: none;
}
.subnav::-webkit-scrollbar{ display:none; }
.subnav a{
  flex-shrink:0; font-size:13px; font-weight:700; color: var(--ink-soft);
  padding:12px 12px 10px; border-radius:0; border-bottom: 2px solid transparent;
}
.subnav a.active{ color: var(--teal-deep); border-bottom-color: var(--teal); }
.subnav a:hover{ text-decoration:none; color: var(--ink); }

.wrap{ padding: 18px 0 56px; max-width: 720px; margin:0 auto; }
.foot{ text-align:center; color: var(--ink-faint); font-size:.72rem; padding:1.6rem 1.2rem 2.2rem; font-weight:500; max-width:720px; margin:0 auto; }

h1{ color:var(--ink); font-size:1.45rem; margin:.3rem 0 .3rem; font-weight:800; letter-spacing:-0.02em; padding:0 20px; }
h2{ color:var(--ink); font-size:1.1rem; margin:0 0 .4rem; font-weight:800; }
h3{ margin: 0 0 10px; font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-faint); }
.muted{ color: var(--ink-soft); font-size:.92rem; padding: 0 20px; font-weight:500; line-height:1.5; }

.flash{
  margin: 10px 20px 0; background: var(--teal-light); border:1px solid var(--teal-line); color: var(--teal-deep);
  padding:.7rem 1rem; border-radius: var(--radius-sm); font-size:.88rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.flash.error{ background: var(--coral-light); border-color:var(--coral-line); color:var(--coral-ink); }

/* ---------- login (full-bleed photo, glass card) ---------- */
.login-shell{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background: var(--ink);
  margin: -18px 0 -56px; /* cancel .wrap's vertical padding so the photo runs edge-to-edge */
  padding: 40px 20px;
}
.login-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.login-photo img{ width:100%; height:100%; object-fit:cover; display:block; object-position:50% 55%; }
/* The poster and the video stack in the same place. The video sits on top at
   opacity 0 and fades in once it's actually playing, so the poster is what
   shows on a slow link, a blocked autoplay, or a browser without the codec. */
.login-photo .login-poster,
.login-photo .login-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.login-photo .login-video{ opacity:0; transition: opacity .9s ease; }
.login-photo .login-video.ready{ opacity:1; }
.login-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(14,30,20,0.35) 0%, rgba(14,30,20,0.2) 45%, rgba(14,30,20,0.4) 100%);
}
.login-main{
  position:relative; z-index:1; width:100%; display:flex; align-items:center; justify-content:center;
}
.login-box{
  width:100%; max-width:380px; background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-radius: var(--radius-xl); padding:1.75rem 1.6rem 2rem;
  box-shadow: var(--shadow-pop);
  text-align:left;
}
.login-box .login-logo{
  width:44px; height:44px; border-radius:12px; object-fit:cover; display:block;
  box-shadow: 0 8px 18px -6px rgba(14,92,59,0.35); margin-bottom:14px;
}
.login-box h1{ padding:0; margin:0 0 .25rem; font-size:1.5rem; }
.login-box .muted{ padding:0; margin:0 0 1.4rem; }
.login-box form{ display:flex; flex-direction:column; gap:1rem; text-align:left; }
.login-box .btn.wide{ margin-top:.3rem; }
.login-foot-note{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(20,30,20,0.14);
  font-size:11.5px; color: var(--ink-soft); font-weight:600; display:flex; align-items:center; gap:6px;
}

label{ font-size:.83rem; font-weight:700; color:var(--ink-soft); display:flex; flex-direction:column; gap:.4rem; }
input, select, textarea{
  font-size:1rem; padding:.65rem .8rem; border:1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family:'Inter', inherit; background:var(--surface); color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-light); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:.68rem 1.15rem; border-radius: var(--radius-sm); border:1.5px solid var(--line);
  background: var(--surface); color:var(--ink); font-weight:700; font-size:.88rem; cursor:pointer;
  text-align:center; text-decoration:none; transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ border-color: var(--teal); text-decoration:none; }
.btn:active{ transform: scale(0.98); }
.btn.primary{ background: var(--teal); border-color: var(--teal); color:#fff; box-shadow: 0 8px 18px -8px rgba(14,92,59,0.55); }
.btn.primary:hover{ background: var(--teal-deep); border-color: var(--teal-deep); }
.btn.danger{ color:var(--coral-ink); border-color:var(--coral-line); background: var(--coral-light); }
.btn.wide{ width:100%; }
.btn.sm{ padding:.36rem .8rem; font-size:.76rem; border-radius: 8px; }
.btn[disabled]{ opacity:.6; cursor:default; transform:none; }
.btngrid{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.8rem 20px; }

/* ---------- hero (hub home) ---------- */
.hero{
  margin: 0 20px 6px; position:relative; height:200px;
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-warm);
}
.hero img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(10,20,14,0.78) 0%, rgba(10,20,14,0.12) 55%, rgba(10,20,14,0) 75%);
}
.hero-text{ position:absolute; left:20px; bottom:16px; color:#fff; z-index:2; }
.hero-text .eyebrow{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.88; margin-bottom:2px; }
.hero-text h1{ margin:0; padding:0; font-size:21px; font-weight:800; letter-spacing:-0.02em; color:#fff; }

.section-label{ padding: 26px 20px 10px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }

/* ---------- kid card / module tile ---------- */
.kid-card{
  margin: 0 20px 16px; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow:hidden; padding: 18px;
}
.kid-card-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.module-tile + .module-tile,
.module-tile + .placeholder-tile,
.module-tile.empty + .module-tile{ margin-top:10px; }
.kid-avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line-strong); flex-shrink:0;
}
.kid-card.teal .kid-avatar, .kid-card[data-color="teal"] .kid-avatar{ box-shadow: 0 0 0 2px var(--teal-light); }
.kid-card.pink .kid-avatar, .kid-card[data-color="pink"] .kid-avatar{ box-shadow: 0 0 0 2px var(--pink-light); }
.kid-meta h2{ margin:0 0 2px; font-size:18px; font-weight:800; letter-spacing:-0.01em; }
.kid-meta p{ margin:0; font-size:13px; color: var(--ink-soft); font-weight:600; }

.module-tile{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:1.5px solid transparent; cursor:pointer;
  border-radius: var(--radius-md); padding:15px; text-decoration:none; color:#fff;
  background: var(--teal);
  min-height:72px; box-shadow: 0 10px 20px -12px rgba(14,92,59,0.55);
  transition: transform .14s ease, box-shadow .14s ease;
}
.module-tile:hover{ text-decoration:none; transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(14,92,59,0.6); }
.module-tile:active{ transform: scale(0.98); }
.tile-icon{
  width:42px; height:42px; border-radius:11px; background: rgba(255,255,255,0.20);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px;
}
.tile-body{ flex:1; min-width:0; }
.tile-body .tile-title{ display:block; font-family:'Inter', sans-serif; font-size:15.5px; font-weight:800; margin:0 0 3px; color:#fff; letter-spacing:-0.01em; }
.tile-body .tile-sub{ display:block; font-size:12px; color:rgba(255,255,255,0.85); margin:0; font-weight:500; }
.live-stat{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; background: rgba(255,255,255,0.18);
  padding: 4px 10px 4px 8px; border-radius:999px; font-size:11.5px; font-weight:700; color:#fff;
}
.live-dot{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.3); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.chev{ color:rgba(255,255,255,0.8); flex-shrink:0; font-size:19px; }

.module-tile.empty, .placeholder-tile{
  display:flex; align-items:center; gap:14px; border-radius: var(--radius-md); padding:15px; min-height:72px;
  border: 1.5px dashed var(--line-strong); background: var(--surface-2); color: var(--ink-soft);
}
.placeholder-icon, .module-tile.empty .tile-icon{
  width:42px; height:42px; border-radius:11px; background: var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; color: inherit;
  border: 1px solid var(--line);
}
.placeholder-text{ display:flex; flex-direction:column; gap:3px; }
.placeholder-text .p-title, .module-tile.empty .tile-title{ font-family:'Inter', sans-serif; font-weight:800; font-size:15px; color: var(--ink); display:block; }
.placeholder-text .p-sub, .module-tile.empty .tile-sub{ font-size:12.5px; font-weight:500; color: var(--ink-faint); display:block; }
.empty-badge{
  margin-top:8px; display:inline-block; background: var(--gold-light); color: var(--gold-deep);
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 10px; border-radius:999px;
}

/* ---------- khione dashboard: back row + profile header ---------- */
.back-row{ display:flex; align-items:center; gap:8px; margin: 4px 20px 12px; }
.back-btn{
  width:32px; height:32px; border-radius:10px; background: var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink);
  font-weight:700;
}
.back-btn:hover{ text-decoration:none; border-color: var(--teal); }
.back-crumb{ font-size:12.5px; font-weight:600; color: var(--ink-soft); }

.profile-strip{
  display:flex; align-items:center; gap:14px; margin: 0 20px 18px; padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--teal);
  color:#fff; box-shadow: var(--shadow-warm); position:relative; overflow:hidden;
}
.profile-strip::after{ content:none; }
.profile-strip img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.7); flex-shrink:0; position:relative; z-index:2; }
.profile-strip h1{ margin:0 0 4px; padding:0; font-size:20px; color:#fff; position:relative; z-index:2; }
.profile-strip .sub{ font-size:12.5px; color:rgba(255,255,255,0.88); font-weight:600; position:relative; z-index:2; display:flex; gap:8px; flex-wrap:wrap; }
.profile-strip .sub span{ background: rgba(255,255,255,0.16); padding:3px 10px; border-radius:999px; }

/* ---------- quick actions ---------- */
.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding: 0 20px 20px; }
.qa-btn{
  border:1.5px solid transparent; cursor:pointer; border-radius: var(--radius-md); padding: 18px 16px; min-height:104px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left;
  color:#fff; box-shadow: 0 10px 20px -12px rgba(0,0,0,0.28); text-decoration:none; font-family:inherit;
  transition: transform .12s ease;
}
.qa-btn:hover{ text-decoration:none; transform: translateY(-2px); }
.qa-btn:active{ transform: scale(0.97); }
.qa-btn.primary{ background: var(--coral); }
.qa-btn.secondary{ background: var(--gold); color:#fff; }
.qa-icon{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:21px; background: rgba(255,255,255,0.22); }
.qa-btn > span{ display:flex; flex-direction:column; }
.qa-btn .qa-title{ display:block; font-family:'Inter', sans-serif; font-size:15px; font-weight:800; line-height:1.2; margin-top:10px; letter-spacing:-0.01em; }
.qa-btn.primary .qa-title, .qa-btn.secondary .qa-title{ color:#fff; }
.qa-btn .qa-hint{ display:block; font-size:11.5px; font-weight:600; opacity:.85; margin-top:2px; }

.content-block{ padding: 4px 20px 20px; }
.block-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; padding:0; }
.block-head h3{ margin:0; }
.block-head .see-all{ font-size:12px; font-weight:700; color: var(--teal-deep); }

/* ---------- today's log ---------- */
.log-list{ display:flex; flex-direction:column; gap:9px; }
.log-item{ display:flex; gap:12px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-md); padding:13px 14px; align-items:flex-start; transition: border-color .15s ease; }
.log-item:hover{ border-color: var(--line-strong); }
.log-time{ font-family:'Inter', sans-serif; font-weight:700; font-size:12.5px; color: var(--ink-soft); width:60px; flex-shrink:0; padding-top:3px; }
.log-icon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.log-icon.pee{ background: var(--teal-light); }
.log-icon.poop{ background: var(--sage-light); }
.log-icon.mira{ background: var(--gold-light); }
.log-icon.tried{ background: var(--pink-light); }
.log-body{ flex:1; min-width:0; }
.log-title{ font-weight:700; font-size:14px; color: var(--ink); margin:0 0 2px; }
.log-detail{ font-size:12.5px; color: var(--ink-soft); font-weight:500; line-height:1.45; margin:0; }
.log-actions{ display:flex; gap:6px; flex-shrink:0; margin-left:auto; }
.log-actions form{ display:inline; }

.badge-good{ display:inline-block; background: var(--teal-light); color: var(--teal-deep); font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:999px; margin-top:5px; }
.pill{ display:inline-block; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:5px; vertical-align:1px; }
.pill.yes{ background: var(--teal-light); color: var(--teal-deep); }
.pill.no{ background: var(--surface-2); color: var(--ink-faint); }
.pill.warn{ background: var(--pink-light); color: var(--pink-deep); }
.pill.bad{ background: var(--coral-light); color:var(--coral-ink); }
.pill.ideal{ background: var(--teal-light); color: var(--teal-deep); }

/* ---------- 7-day summary ---------- */
.week-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding:18px 16px 16px; }
.week-grid{ display:flex; justify-content:space-between; gap:6px; }
.day-col{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.day-label{ font-size:10.5px; font-weight:700; color: var(--ink-faint); text-transform:uppercase; }
.day-label.today{ color: var(--coral-deep); }
.day-stack{
  display:flex; flex-direction:column; align-items:center; gap:4px; background: var(--surface-2); border-radius:12px;
  padding:9px 4px; width:100%; min-height:70px; justify-content:center; position:relative; border:1.5px solid transparent;
}
.day-stack.flag{ border-color: var(--gold); background: var(--gold-light); }
.day-stack .n{ font-family:'Inter', sans-serif; font-weight:800; font-size:15px; color: var(--teal-deep); line-height:1; }
.day-stack .p{ font-size:10px; font-weight:700; color: var(--sage-deep); }
.day-stack.flag .p{ color: var(--ink-faint); }
/* Before tracking started, days aren't zeros, they're unknowns. */
.day-stack.untracked{ opacity:.5; }
.day-stack.untracked .n{ color: var(--ink-faint); }
.day-stack.untracked .p{ color: var(--ink-faint); }
.flag-dot{
  position:absolute; top:-6px; right:-4px; width:16px; height:16px; background: var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:800;
}
.week-legend{ display:flex; gap:14px; justify-content:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:10.5px; font-weight:700; color: var(--ink-soft); }
.week-legend span{ display:flex; align-items:center; gap:4px; }
.legend-dot{ width:8px; height:8px; border-radius:50%; }

.gentle-flag, .flag-banner{
  margin-top:12px; background: var(--gold-light); border-radius: var(--radius-sm); padding:12px 14px;
  display:flex; gap:10px; align-items:flex-start;
}
.gentle-flag .gf-ico, .flag-banner .fic{ font-size:18px; flex-shrink:0; }
.gentle-flag p, .flag-banner p{ margin:0; font-size:12.5px; font-weight:600; color:var(--gold-ink); line-height:1.5; }

/* ---------- link row / bottom nav links ---------- */
.link-row, .nav-links{ display:flex; gap:12px; padding: 18px 20px 8px; }
.link-btn, .nav-link-btn{
  flex:1; text-align:center; padding:13px 10px; border-radius: var(--radius-md); font-weight:700; font-size:13px;
  border:1px solid var(--line); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none;
}
.link-btn:hover, .nav-link-btn:hover{ text-decoration:none; border-color: var(--teal); }
.link-btn.doc, .nav-link-btn{ background: var(--teal-light); color: var(--teal-deep); border-color: transparent; }
.link-btn.ref{ background: var(--coral-light); color: var(--coral-deep); border-color: transparent; }

/* ---------- places-we-love photo strip ---------- */
.photo-strip-wrap{ padding: 6px 0 8px; }
.photo-strip{
  display:flex; gap:12px; overflow-x:auto; padding: 0 20px 6px; scroll-snap-type:x proximity;
  -ms-overflow-style:none; scrollbar-width:none;
}
.photo-strip::-webkit-scrollbar{ display:none; }
.photo-chip{
  flex-shrink:0; width:150px; scroll-snap-align:start; border-radius: var(--radius-md); overflow:hidden;
  position:relative; height:110px; box-shadow: var(--shadow-card);
}
.photo-chip img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.photo-chip:hover img{ transform: scale(1.06); }
.photo-chip::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(10,20,14,0.65) 0%, rgba(10,20,14,0) 55%); }
.photo-chip span{ position:absolute; left:9px; bottom:8px; color:#fff; font-size:11px; font-weight:700; z-index:2; }

/* ---------- generic cards (forms, history, summary, reference) ---------- */
.card{ margin: 0 20px 16px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding:18px; }
.card h3{ margin-top:0; }
table{ width:100%; border-collapse:collapse; font-size:.85rem; }
th, td{ padding:.55rem .55rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th{ background: var(--surface-2); color: var(--ink-soft); font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; position:sticky; top:0; }
tr:nth-child(even) td{ background: var(--surface-2); }
.tbl-wrap{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--line); margin: 0 20px 16px; }
.tbl-wrap table{ margin:0; }
.tbl-wrap .card{ margin:0; border:none; box-shadow:none; border-radius:0; }

.flagrow{ background: var(--coral-light) !important; }
.flag-list{ display:flex; gap:.3rem; flex-wrap:wrap; }
.flag{ background: var(--coral-light); color:var(--coral-ink); font-size:.7rem; padding:.15rem .55rem; border-radius:999px; font-weight:800; }

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr; gap:.85rem; }
@media(min-width:560px){ .form-grid.two{ grid-template-columns:1fr 1fr; } }
fieldset{ border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.9rem; margin:0 0 .85rem; }
legend{ font-weight:700; color: var(--ink-soft); font-size:.8rem; padding:0 .35rem; text-transform:uppercase; letter-spacing:.03em; }
.radiorow{ display:flex; gap:1rem; flex-wrap:wrap; }
.radiorow label{ flex-direction:row; align-items:center; gap:.4rem; font-weight:500; font-size:.9rem; color:var(--ink); }
.radiorow input{ width:auto; }
form.card{ margin: 0 20px 16px; }

/* ---------- stat grid (doctor summary) ---------- */
.stat-section{ margin: 0 20px 16px; }
.stat-grid{ display:grid; grid-template-columns:1fr; gap:.55rem; }
@media(min-width:560px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-sm); padding:.6rem .9rem; font-size:.86rem; font-weight:500; }
.stat b{ color: var(--ink); font-size:1.05rem; font-family:'Inter', sans-serif; font-weight:800; margin-left:.6rem; }
.stat .note{ display:block; flex-basis:100%; font-size:.72rem; color: var(--ink-faint); font-weight:500; margin-top:.3rem; }

/* ---------- bristol chart ---------- */
.bristol-grid{ display:grid; gap:.55rem; }
.bristol-row{ display:grid; grid-template-columns:2.6rem 1fr 1fr; gap:.75rem; align-items:center; padding:.55rem .65rem; border-radius: var(--radius-sm); border:1px solid var(--line); }
.bristol-row .num{ font-weight:800; text-align:center; border-radius:8px; padding:.35rem 0; font-family:'Inter', sans-serif; }
.bristol-row.red .num{ background: var(--coral-light); color:var(--coral-ink); }
.bristol-row.green .num{ background: var(--teal-light); color: var(--teal-deep); }
.bristol-row.yellow .num{ background: var(--gold-light); color: var(--gold-deep); }

.rule-list, .flag-doc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.rule-list li, .flag-doc-list li{ padding:.65rem .8rem; border-radius: var(--radius-sm); border:1px solid var(--line); font-size:.9rem; font-weight:500; }
.flag-doc-list li{ background: var(--coral-light); border-color:var(--coral-line); color:var(--coral-ink); }

/* ---------- desktop scale-up ---------- */
@media (min-width: 900px){
  .wrap{ max-width: 880px; padding-top:28px; }
  .foot{ max-width:880px; }
  h1{ font-size:1.7rem; }
  .hero{ height:260px; }
  .hero-text h1{ font-size:28px; }
  .topbar{ padding:14px 32px; }
  .subnav{ padding:0 28px; }
  .quick-actions{ grid-template-columns: repeat(2, minmax(0,260px)); }
  .kid-card{ padding:22px; }
  .photo-strip{ padding:0 32px 6px; }
  .photo-chip{ width:190px; height:130px; }
}
@media (min-width: 1180px){
  .wrap{ max-width: 1080px; }
  .foot{ max-width:1080px; }
}

/* ---------- toast-y saving state ---------- */
.btn.is-saving{ opacity:.75; pointer-events:none; }

/* ================= v3 additions: calendar, bills, vault, plans ============= */

.brand-mark-img{ width:32px; height:32px; border-radius:9px; flex-shrink:0; display:block; }

/* profile strip when there's an emoji instead of a kid photo */
.strip-emoji{
  width:54px; height:54px; border-radius:16px; background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; font-size:27px; flex-shrink:0;
  position:relative; z-index:2;
}

/* family-wide tiles on the hub home */
.family-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 20px; }
.family-tile{
  display:flex; flex-direction:column; gap:3px; padding:16px 14px; min-height:118px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); text-decoration:none; color:var(--ink);
  transition: transform .14s ease, border-color .14s ease;
}
.family-tile:hover{ text-decoration:none; transform:translateY(-2px); border-color:var(--teal); }
.family-tile:active{ transform:scale(.98); }
.family-tile.urgent{ border-color:var(--gold); background:linear-gradient(180deg,var(--gold-light) 0%,var(--surface) 62%); }
.ft-icon{
  width:38px; height:38px; border-radius:11px; background:var(--teal-light);
  display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:6px;
}
.family-tile.urgent .ft-icon{ background:rgba(255,255,255,.75); }
.ft-title{ font-weight:800; font-size:14.5px; letter-spacing:-.01em; }
.ft-sub{ font-size:11.5px; color:var(--ink-faint); font-weight:500; line-height:1.35; }
.ft-stat{ font-size:11.5px; color:var(--teal-deep); font-weight:700; line-height:1.35; }
.family-tile.urgent .ft-stat{ color:var(--gold-deep); }

/* calendar */
.cal-when{ width:74px; display:flex; flex-direction:column; gap:1px; }
.cw-main{ font-weight:700; font-size:12px; color:var(--ink); }
.cw-time{ font-size:11px; color:var(--ink-faint); font-weight:600; }
.log-icon.cat-birthday{ background:var(--pink-light); }
.log-icon.cat-holiday{ background:var(--gold-light); }
.log-icon.cat-school{ background:var(--teal-light); }
.log-icon.cat-break{ background:var(--sage-light); }
.log-icon.cat-appt{ background:var(--coral-light); }
.log-icon.cat-sports{ background:var(--gold-light); }
.log-icon.cat-trip{ background:var(--teal-light); }
.log-icon.cat-other{ background:var(--surface-2); }
.ev-link{ display:inline-block; margin-top:5px; font-size:11.5px; font-weight:700; }
.ev-source{ display:block; margin-top:4px; font-size:10.5px; color:var(--ink-faint); font-weight:500; }

.deadline-card{
  display:flex; align-items:center; gap:13px; padding:14px;
  border-radius:var(--radius-md); background:var(--surface);
  border:1.5px solid var(--gold); text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-card);
}
.deadline-card:hover{ text-decoration:none; border-color:var(--gold-deep); }
.deadline-card.urgent{ background:linear-gradient(135deg,var(--coral-tint) 0%,var(--surface) 70%); border-color:var(--coral); }
.dl-count{
  width:54px; height:54px; border-radius:14px; background:var(--gold); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0;
}
.deadline-card.urgent .dl-count{ background:var(--coral); }
.dl-n{ font-size:19px; font-weight:800; line-height:1; }
.dl-l{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.dl-body{ flex:1; min-width:0; }
.dl-title{ margin:0 0 2px; font-weight:800; font-size:14.5px; }
.dl-sub{ margin:0; font-size:12px; color:var(--ink-soft); font-weight:600; }
.dl-note{ margin:4px 0 0; font-size:11.5px; color:var(--ink-faint); font-weight:500; }

.filter-row{ display:flex; gap:7px; overflow-x:auto; padding:0 20px 10px;
  -ms-overflow-style:none; scrollbar-width:none; }
.filter-row::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;
}
.chip:hover{ text-decoration:none; border-color:var(--teal); }
.chip.on{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* bills */
.bill-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px; box-shadow:var(--shadow-card); }
.bill-card.overdue{ border-color:var(--coral); background:linear-gradient(180deg,var(--coral-light) 0%,var(--surface) 55%); }
.bill-card.soon{ border-color:var(--gold); }
.bill-top{ display:flex; gap:12px; align-items:flex-start; }
.bill-main{ flex:1; min-width:0; }
.bill-amt{ font-size:17px; font-weight:800; color:var(--ink); white-space:nowrap; }
.bill-claimed{ margin:5px 0 0; font-size:11.5px; font-weight:700; color:var(--teal-deep); }
.bill-actions{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.bill-actions form{ display:inline; }
.paid-row{ opacity:.72; }
.danger-card{ margin:0 20px 16px; text-align:center; }

/* streaming vault */
.stream-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px; box-shadow:var(--shadow-card); }
.stream-top{ display:flex; gap:12px; align-items:flex-start; }
.stream-badge{
  width:40px; height:40px; border-radius:11px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; flex-shrink:0;
}
.stream-main{ flex:1; min-width:0; }
.stream-hint{ margin:3px 0 0; font-size:12px; color:var(--ink-soft); font-weight:500; }
.cred-row{ display:flex; flex-direction:column; gap:8px; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line); }
.cred{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cred-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); width:64px; flex-shrink:0; }
.cred-val{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--surface-2); padding:5px 10px; border-radius:7px; word-break:break-all;
  border:1px solid var(--line); flex:1; min-width:0; }

/* notices */
.notice{ display:flex; gap:11px; align-items:flex-start; background:var(--teal-light);
  border:1px solid var(--teal-line); border-radius:var(--radius-md); padding:14px; margin:0 20px; }
.notice.warn{ background:var(--gold-light); border-color:var(--gold-line); }
.notice-ico{ font-size:19px; flex-shrink:0; }
.notice p{ margin:0 0 6px; font-size:13px; line-height:1.55; color:var(--ink); font-weight:500; }
.notice p:last-child{ margin-bottom:0; }
.notice code{ background:rgba(255,255,255,.7); padding:1px 5px; border-radius:4px; font-size:12px; }

/* plans */
.plan-card{ display:flex; align-items:center; gap:13px; padding:15px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  text-decoration:none; color:var(--ink); }
.plan-card:hover{ text-decoration:none; border-color:var(--teal); }
.plan-card.open{ border-left:4px solid var(--gold); }
.plan-card.approved{ border-left:4px solid var(--teal); }
.plan-card.declined{ border-left:4px solid var(--ink-faint); opacity:.8; }
.plan-status{ font-size:23px; flex-shrink:0; }
.plan-body{ flex:1; min-width:0; }
.plan-title{ margin:0 0 2px; font-weight:800; font-size:15px; }
.plan-sub{ margin:0; font-size:12px; color:var(--ink-soft); font-weight:500; }
.plan-pill{ display:inline-block; margin-top:7px; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:999px;
  background:var(--gold-light); color:var(--gold-deep); }
.plan-pill.urgent{ background:var(--coral-light); color:var(--coral-ink); }
.plan-pill.done{ background:var(--surface-2); color:var(--ink-faint); }

.cruise-hero{ margin:0 20px 16px; position:relative; height:190px; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-warm); }
.cruise-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.cruise-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(8,26,18,.86) 0%,rgba(8,26,18,.25) 60%,rgba(8,26,18,.1) 100%); }
.cruise-hero-text{ position:absolute; left:18px; right:18px; bottom:15px; color:#fff; z-index:2; }
.cruise-hero-text .eyebrow{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; opacity:.9; margin-bottom:3px; }
.cruise-hero-text h1{ margin:0 0 3px; padding:0; font-size:21px; color:#fff; }
.cruise-hero-text p{ margin:0; font-size:12.5px; font-weight:600; opacity:.92; }

.decision-banner{ display:flex; gap:12px; align-items:center; margin:0 20px 16px; padding:14px;
  border-radius:var(--radius-md); background:var(--gold-light); border:1.5px solid var(--gold); }
.decision-banner.urgent{ background:var(--coral-light); border-color:var(--coral); }
.decision-banner.settled{ background:var(--teal-light); border-color:var(--teal); }
.decision-banner.settled.declined{ background:var(--surface-2); border-color:var(--line-strong); }
.db-ico{ font-size:23px; flex-shrink:0; }
.db-title{ margin:0 0 2px; font-weight:800; font-size:14.5px; }
.db-sub{ margin:0; font-size:12px; color:var(--ink-soft); font-weight:500; line-height:1.5; }

.fact-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
@media(min-width:520px){ .fact-grid{ grid-template-columns:1fr 1fr; } }
.fact{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; }
.f-l{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.f-v{ font-size:13.5px; font-weight:800; text-align:right; }

.highlight-card{ display:flex; gap:12px; align-items:flex-start; background:var(--teal-light);
  border:1px solid var(--teal-line); border-radius:var(--radius-md); padding:14px; }
.hc-ico{ font-size:21px; flex-shrink:0; }
.hc-title{ margin:0 0 3px; font-weight:800; font-size:14px; }
.hc-sub{ margin:0; font-size:12.5px; color:var(--ink-soft); font-weight:500; line-height:1.5; }

.itin{ display:flex; flex-direction:column; gap:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.itin-row{ display:flex; gap:13px; padding:12px 14px; border-bottom:1px solid var(--line); }
.itin-row:last-child{ border-bottom:none; }
.itin-date{ width:52px; flex-shrink:0; font-size:10.5px; color:var(--ink-faint);
  font-weight:600; text-align:center; line-height:1.35; }
.itin-date b{ font-size:13px; color:var(--ink); font-weight:800; }
.itin-body{ flex:1; min-width:0; }
.itin-port{ margin:0 0 2px; font-weight:800; font-size:14px; }
.itin-time{ margin:0; font-size:12px; color:var(--ink-soft); font-weight:500; }

.respond-grid{ display:grid; grid-template-columns:1fr; gap:9px; margin-top:12px; }
@media(min-width:520px){ .respond-grid{ grid-template-columns:repeat(3,1fr); } }
.respond-grid .btn{ width:100%; }

@media (min-width:900px){
  .family-grid{ grid-template-columns:repeat(4,1fr); }
  .cruise-hero{ height:250px; }
  .cruise-hero-text h1{ font-size:27px; }
}

/* ==================== touch / iPhone tuning ==============================
   Scoped to coarse pointers so it applies on any phone or tablet regardless
   of width, and leaves the tighter desktop sizing alone. Apple's minimum
   comfortable target is 44x44pt, which is what these bring everything up to. */
@media (pointer: coarse) {
  .btn, .link-btn, .nav-link-btn, .chip, .qa-btn,
  button[type="submit"], .reveal-btn{
    min-height: 44px;
  }
  .btn.sm{
    min-height: 40px; padding:.5rem .9rem; font-size:.8rem;
  }
  /* Small inline links get real height so the tap area matches the 44pt
     minimum even though the text itself is short. */
  .user-chip a, .ev-link, .see-all a, .block-head .see-all a{
    display:inline-flex; align-items:center; min-height:44px;
    padding:0 8px; margin:-8px 0;
  }
  .ev-link{ margin-top:0; }
  .brand{ min-height:44px; }
  .back-btn{ width:44px; height:44px; border-radius:12px; font-size:17px; }
  .subnav a{ padding:14px 13px 12px; }
  .log-actions .btn.sm{ min-width:56px; }
  /* Anything under ~11px is a squint on a phone. */
  .dl-l{ font-size:11px; }
  .pill, .badge-good, .empty-badge, .plan-pill{ font-size:11.5px; padding:3px 10px; }
  .ev-source{ font-size:11.5px; }
  .day-label{ font-size:11.5px; }
  .day-stack .p{ font-size:11.5px; }
  .week-legend{ font-size:11.5px; }
  .cred-label{ font-size:11.5px; }
  .eyebrow, .itin-date{ font-size:11.5px; }
  .foot{ font-size:.8rem; }
  .tile-body .tile-sub, .ft-sub, .ft-stat{ font-size:12.5px; }
  /* Comfortable bottom clearance above the home indicator. */
  .wrap{ padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* iOS Safari's dynamic address bar makes 100vh taller than the visible area,
   which pushed the login card partly off-screen. dvh tracks the real viewport;
   the vh line above it is the fallback for browsers without dvh. */
.login-shell{ min-height:100vh; min-height:100dvh; }
@supports (padding: max(0px)) {
  .login-main{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
}

/* auth extras */
.passkey-btn{ margin-top:.7rem; background:var(--surface); border-color:var(--line-strong); }
.passkey-msg{ margin:.6rem 0 0; font-size:12px; color:var(--ink-soft); font-weight:600; min-height:1em; }
.login-links{ margin-top:1rem; font-size:12.5px; font-weight:600; }
.login-links a{ color:var(--teal-deep); }

/* settings clock */
.clock-card{ border-radius:var(--radius-md); padding:16px; border:1.5px solid var(--teal);
  background:var(--teal-light); }
.clock-card.warn{ border-color:var(--gold); background:var(--gold-light); }
.clock-now{ display:flex; flex-direction:column; gap:3px; }
.cl-label{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); }
.cl-value{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.cl-zone{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.tech-details{ margin-top:14px; }
.tech-details summary{ font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
  padding:8px 0; }

/* on/off toggle switch (potty reminders, etc.) */
.switch{ position:relative; display:inline-block; width:46px; height:27px; }
.switch input{ opacity:0; width:0; height:0; }
.switch-track{ position:absolute; inset:0; background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:999px; cursor:pointer; transition:background .15s ease; }
.switch-track::before{ content:""; position:absolute; width:19px; height:19px; left:2px; top:2.5px;
  background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s ease; }
.switch input:checked + .switch-track{ background:var(--teal); border-color:var(--teal); }
.switch input:checked + .switch-track::before{ transform:translateX(19px); }

@media print{
  .topbar, .subnav, .btngrid, .foot, form, .nav-links, .link-row, .photo-strip-wrap{ display:none !important; }
  body{ background:#fff; }
  .appshell{ box-shadow:none; max-width:none; }
  .card, .stat{ border:1px solid #999; }
}


/* ==========================================================================
   Dark theme
   --------------------------------------------------------------------------
   The whole app is drawn from the token block at the top of this file, so
   going dark is almost entirely a matter of restating those tokens. The few
   places that used a literal hex now use a token too, which is why this block
   is short rather than a second stylesheet.

   The naming convention makes the inversion mechanical: `X-light` is always a
   tinted *background*, `X-deep` is always *ink* on that background, and `X` is
   the solid brand fill. So in dark mode the -light tones become deep tints and
   the -deep tones become bright text, and every badge, pill and button that
   was built on that convention follows automatically.

   `data-theme` is written onto <html> by the inline script in base.html before
   the first paint, so there's no flash of the light theme on load. That script
   resolves "follow my system setting" into a concrete light/dark value, which
   is why there's no prefers-color-scheme media query here.
   ========================================================================== */

html[data-theme="dark"]{
  /* Makes native UI — scrollbars, and importantly the datetime-local picker
     on the bathroom form — render dark instead of a glaring white panel. */
  color-scheme: dark;

  --bg: #101613;
  --cream: #101613;
  --cream-deep: #0B0F0D;
  --page-bg: #0B100E;
  --surface: #19211D;
  --surface-2: #232E28;
  --ink: #E9F0EA;
  --ink-soft: #A6B3A8;
  --ink-faint: #7A887E;
  --line: #2B3831;
  --line-strong: #3C4C43;

  --coral: #E0723B;
  --coral-deep: #F09265;
  --coral-light: #3B241A;
  --coral-ink: #F2AE8A;
  --coral-line: #5A3626;
  --coral-tint: #2C1E15;

  --gold: #D9A233;
  --gold-deep: #EFC163;
  --gold-light: #332912;
  --gold-ink: #E9C67F;
  --gold-line: #55441F;

  --teal: #1E8A5C;
  --teal-deep: #63CFA0;
  --teal-light: #15291F;
  --teal-line: #234533;

  --sage: #6E8F52;
  --sage-deep: #99BC79;
  --sage-light: #1C2617;

  --pink: #C9697A;
  --pink-deep: #E8A0AC;
  --pink-light: #2E1C20;

  /* A 4% black shadow is invisible on a dark surface; these go much deeper so
     cards still read as lifted off the page. */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.34), 0 10px 24px -16px rgba(0,0,0,0.62);
  --shadow-pop: 0 2px 6px rgba(0,0,0,0.38), 0 22px 44px -20px rgba(0,0,0,0.70);
  --shadow-warm: 0 14px 32px -16px rgba(0,0,0,0.60);
}

/* The photo-and-video login hero is deliberately identical in both themes: it
   is already a dark scene with white text sitting on it. */

/* Theme toggle in the top bar. */
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  border:0; border-radius:50%;
  background:transparent; cursor:pointer;
  font-size:15px; line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.theme-btn:hover{ background:var(--surface-2); }

/* Printing is for the doctor. Force the light palette regardless of what the
   screen is set to, otherwise a dark-mode summary prints as pale grey text. */
@media print{
  html, html[data-theme="dark"]{
    color-scheme: light;
    --bg:#fff; --cream:#fff; --cream-deep:#fff; --page-bg:#fff;
    --surface:#fff; --surface-2:#F4F5F2;
    --ink:#111; --ink-soft:#333; --ink-faint:#666;
    --line:#CCC; --line-strong:#AAA;
    --coral-ink:#8a3f1c; --coral-line:#f0c1a2; --coral-tint:#FCEBD4;
    --gold-ink:#7A5A22; --gold-line:#e6cf9a; --teal-line:#bfe0cd;
    --teal-deep:#0E5C3B;
    --shadow-card:none; --shadow-pop:none; --shadow-warm:none;
  }
}