/* Wellby · Apple Human Interface pass.
   Clarity: system type, one tint, real hierarchy. Deference: chrome recedes, content leads. Depth: materials and sheets, not stickers and gradients.
   Loaded last so it refines app.css / ui.css without rewriting them. */
:root {
  --bg: #F5F5F7; --surface: #fff; --stone: rgba(118,118,128,.10); --stone-2: rgba(118,118,128,.12);
  --ink: #1D1D1F; --body: #1D1D1F; --muted: #6E6E73; --tertiary: #86868B;
  --line: rgba(60,60,67,.14); --line-soft: rgba(60,60,67,.09);
  --tint: #0071E3; --tint-hover: #0077ED; --tint-soft: rgba(0,113,227,.10);
  --blue-ink: #0066CC; --pos: #248A3D; --pos-soft: rgba(52,199,89,.14); --err: #D70015; --err-soft: rgba(255,59,48,.12);
  --warn: #B25000; --warn-soft: rgba(255,149,0,.13);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Inter, system-ui, sans-serif;
  --ease: cubic-bezier(.25,.1,.25,1); --bounce: var(--ease);
  --shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 0 0 .5px rgba(0,0,0,.04);
  --material: rgba(251,251,253,.78);
  --r: 14px;
}
body { font-size: 15px; line-height: 1.47; letter-spacing: -.01em; color: var(--ink); font-feature-settings: "kern"; }
a { color: var(--blue-ink); text-decoration: none; } a:hover { text-decoration: underline; }
::selection { background: rgba(0,113,227,.22); }
:focus-visible { outline: 3px solid rgba(0,113,227,.45); outline-offset: 2px; }

/* Type scale: Large Title, Title 2, Headline, Footnote */
h1, h2, h3 { color: var(--ink); }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: 13px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--muted); margin-bottom: 8px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.num, .kpi .v, .mini b, .vcard .vv, .hb-v, .pill-n { font-variant-numeric: tabular-nums; }

/* Toolbar: one translucent material bar, full width, hairline under it */
.hdr { top: 0; margin-top: 0; padding: 0; }
.bar { max-width: none; height: 52px; border: 0; border-bottom: .5px solid var(--line); border-radius: 0; box-shadow: none; padding: 0 max(16px, calc((100vw - 1240px) / 2)); background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); gap: 20px; }
.logo { font-family: Figtree, var(--sans); font-size: 19px; }
.logo .mark { width: 26px; height: 26px; }
.logo:hover .mark { animation: none; }
.agency { font-size: 13px; border-left: .5px solid var(--line); }
.bar nav { gap: 4px; }
.bar nav a { font-size: 13px; padding: 6px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; letter-spacing: -.005em; }
.bar nav a:hover { background: none; color: var(--ink); text-decoration: none; }
.bar nav a.on { background: none; color: var(--ink); font-weight: 600; }
.me { font-size: 13px; }
.me button { background: none; color: var(--tint); height: 30px; padding: 0 6px; font-weight: 500; border-radius: 6px; }
.me button:hover { text-decoration: underline; }
.me select { height: 30px !important; border-radius: 8px; font-size: 13px; }
main#app { padding-top: 34px; }
.loading { color: var(--tertiary); font-size: 15px; }

/* Page headers: words first. Decorative art stays out of working screens. */
.hero-head { gap: 0; }
.hero-head > img, .kpi img, .vcard img, .hcard > .row img, .d-art, .notice.info img, .pcard.terr img { display: none !important; }
.eyebrow, .eyebrow.sky { display: block; background: none; color: var(--muted); padding: 0; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 2px; line-height: 1.3; }
.head { align-items: flex-end; }

/* Grouped content */
.card, .hcard, .pcard { border: 0; border-radius: var(--r); box-shadow: var(--shadow-sm); background: var(--surface); }
.card { padding: 20px; }
.kpi, .kpi.c1, .kpi.c2, .kpi.c3, .kpi.c4 { background: var(--surface); border: 0; min-height: 0; }
.kpi .l { font-size: 13px; color: var(--muted); }
.kpi .v { font-size: 34px; font-weight: 600; letter-spacing: -.03em; }
.kpi .d { font-weight: 500; }
.hcard { padding: 18px; }
.hcard:first-child { background: var(--surface); }
.hcard .name, .pname { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.rank, .hcard .rank, .trow .rank { background: var(--stone-2); color: var(--ink); font-weight: 600; }
.checklist { background: var(--surface); }
.pcard.terr { background: var(--surface); }
.notice { border-radius: 12px; background: var(--warn-soft); color: #7A3B00; }
.notice.info { background: var(--tint-soft); color: var(--ink); }

/* Reasons read as a sentence, not a row of pills */
.rchips { gap: 0; }
.rchip { background: none; padding: 0; font-size: 13px; color: var(--muted); border-radius: 0; }
.rchip + .rchip::before { content: "\00B7"; margin: 0 6px; color: var(--tertiary); }

/* Labels: quiet capsules; state carries a dot, not a color block */
.chip { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: var(--stone-2); color: var(--ink); }
.chip.st-Protect, .chip.st-Grow, .chip.st-Open, .chip.st-Healthy, .chip.st-Followup { background: var(--stone-2); color: var(--ink); padding-left: 7px; }
.chip[class*="st-"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: currentColor; }
.chip.st-Protect::before { background: #FF3B30; } .chip.st-Grow::before { background: #FF9500; } .chip.st-Open::before { background: #8E8E93; }
.chip.st-Healthy::before { background: #34C759; } .chip.st-Followup::before { background: #FFCC00; }

/* Buttons: one filled tint for the primary action; everything else recedes */
.btn { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; background: var(--stone-2); color: var(--tint); transition: background .15s var(--ease), opacity .15s; }
.btn:hover { background: rgba(118,118,128,.18); transform: none; text-decoration: none; }
.btn:active { opacity: .7; }
.btn.primary, .btn.dark { background: var(--tint); color: #fff; }
.btn.primary:hover, .btn.dark:hover { background: var(--tint-hover); }
.btn.ghost { background: none; color: var(--tint); }
.btn.ghost:hover { background: var(--stone); }
.btn.sm { height: 28px; padding: 0 11px; font-size: 13px; border-radius: 7px; }
.btn.wide { height: 44px; border-radius: 10px; font-size: 16px; font-weight: 600; }

/* Controls */
input, select, textarea { font-size: 15px; border: .5px solid rgba(60,60,67,.29); border-radius: 8px; padding: 8px 11px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--tint); box-shadow: 0 0 0 3.5px rgba(0,113,227,.25); }
label { font-size: 13px; font-weight: 500; color: var(--muted); }
.seg { background: rgba(118,118,128,.12); border-radius: 9px; padding: 2px; }
.seg button { font-size: 13px; font-weight: 500; color: var(--ink); border-radius: 7px; padding: 5px 12px; }
.seg button.on { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }

/* Lists and tables: hairlines, generous rows */
th { font-size: 12px; font-weight: 500; color: var(--muted); border-bottom: .5px solid var(--line); }
td { border-bottom: .5px solid var(--line-soft); padding: 12px; }
tr.click:hover td { background: rgba(118,118,128,.06); }
.plan li, .qrow, .trow, .checklist li, .steps li { border-top: .5px solid var(--line-soft); }
.bar-g { background: rgba(118,118,128,.16); }
.bar-g > i { background: var(--tint); }
.goal .bar-g > i { background: #34C759; }

/* Sheets and materials */
.drawer { top: 64px; right: 12px; bottom: 12px; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06); padding: 22px 24px 40px; }
.drawer h1 { font-size: 26px; font-weight: 700; }
.flowbox { background: #F9F9FB; border: 0; border-radius: 12px; }
.toast { background: rgba(30,30,32,.86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 12px; font-size: 14px; padding: 10px 16px; transition: transform .3s var(--ease), opacity .3s; }

/* Win-flow stages: a single segmented track */
.stages { gap: 2px; background: rgba(118,118,128,.10); padding: 2px; border-radius: 9px; }
.stages span { background: none; border-radius: 7px; font-size: 11px; font-weight: 500; padding: 5px 2px; color: var(--muted); }
.stages span.done { background: none; color: var(--pos); }
.stages span.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.steps li::before { width: 8px; height: 8px; background: rgba(118,118,128,.35); }
.steps li.done::before { background: #34C759; } .steps li.next::before { background: var(--tint); }

/* Board */
.bcol { background: rgba(118,118,128,.08); border-radius: 14px; }
.bcard { border: 0; border-radius: 10px; box-shadow: var(--shadow-sm); }
.bcard:hover { transform: none; box-shadow: 0 4px 14px rgba(0,0,0,.08); }

/* Map: floating panels are materials over the map */
body.mapmode .hdr { position: fixed; }
.mpanel, .mlegend, .purenote { background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 0; box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06); }
.mpanel { top: 64px; border-radius: 16px; }
.mpanel .ptitle h2 { font-size: 26px; font-weight: 700; }
.mpanel .pcard { box-shadow: none; background: rgba(255,255,255,.7); border-radius: 12px; }
.mtools { top: 64px; }
.mtools input { border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.08); border: .5px solid var(--line); }
.mtools .seg { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.mlegend { border-radius: 12px; }
.vcard { border: 0; border-radius: 12px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 .5px var(--line); min-height: 0; padding: 12px; }
.vcard:hover { transform: none; background: #fff; }
.vcard.on { box-shadow: inset 0 0 0 2px var(--tint); }
.vcard::before { display: none; }
.vcard .vv { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.opin span { background: var(--ink); }
.tgt span { background: var(--tint); color: #fff; }
.leaflet-control-zoom a { border-radius: 8px !important; }

/* Empty states keep one quiet illustration */
.empty img { width: 140px !important; opacity: .9; }

/* Sign-in */
.login-art { background: #1D1D1F; border-radius: 0; }
.login-art img { border-radius: 14px; }
.login-card h1 { font-size: 32px; font-weight: 700; }

/* Phone: tab bar with glyphs, like iOS */
@media (max-width: 720px) {
  .bar { height: 48px; padding: 0 14px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(251,251,253,.97); } /* a filter here would trap the fixed tab bar */
  .bar nav { background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--line); box-shadow: none; padding: 5px 0 calc(4px + env(safe-area-inset-bottom)); }
  .bar nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; padding: 2px 4px; color: #8E8E93; font-weight: 500; }
  .bar nav a.on { color: var(--tint); }
  .bar nav a::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  .bar nav a[data-view="today"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); }
  .bar nav a[data-view="map"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='.8' fill='%23000'/%3E%3C/svg%3E"); }
  .bar nav a[data-view="market"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E"); }
  .bar nav a[data-view="flows"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.5 6H14a4 4 0 0 1 0 8h-4a4 4 0 0 0 0 8'/%3E%3C/svg%3E"); }
  .bar nav a[data-view="results"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 20V12M12 20V5M19 20v-9'/%3E%3C/svg%3E"); }
  main#app { padding-top: 20px; }
  h1 { font-size: 30px; }
  .drawer { top: 0; right: 0; bottom: 0; border-radius: 0; }
  .mpanel { top: auto; border-radius: 16px 16px 0 0; }
  .mtools { top: 58px; }
  .btn { min-height: 44px; } .btn.sm { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }