/* Vantage: Bone. Oura-register warm minimalism: bone ground, white cards,
   air instead of lines, soft diffuse shadows, ink pills, bronze as a quiet
   data accent. Switzer speaks calmly at size; Fraunces italic only in the
   lockup and the pull quote.
   Variants preserved: style-solid.css, style-nightglass.css, style-paperink.css. */
/* Neutrals: Oura register. Quiet greige, no green or yellow cast; the warmth
   lives in the bronze, not the greys (Carrie 2026-07-14). */
:root {
  --paper: #F6F5F2;
  --card: #FDFDFC;
  --ink: #1C1B19;
  --muted: #76726B;
  --faint: #A6A29B;
  --line: #EAE8E3;
  --bronze: #9A7142;        /* the metal: links, rings, data moments */
  --bronze-soft: #C9AC7F;
  --track: #ECEAE5;
  --rust: #A34433;          /* the one urgent accent: Cancelling only */
  --shadow: 0 1px 2px rgba(29, 27, 23, 0.04), 0 12px 32px rgba(29, 27, 23, 0.06);
  --serif: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Serif = Tiempos stand-in until the Klim license (logo uses Tiempos).
     Source Serif 4 is the closest free skeleton; Newsreader/Sentient are the
     alternates. Used only where a human speaks. */
  --thrive-serif: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 0 20px 90px; }

a { color: var(--bronze); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Header: quiet, airy, no rule. */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 26px 0 6px;
}
/* Lockup: app colors (Carrie recolors the logo to match). */
.wordmark { font-size: 22px; letter-spacing: 0; }
.wordmark .tw { font-family: var(--thrive-serif); font-style: italic; font-weight: 500;
  color: var(--muted); margin-right: 2px; }
.wordmark .vw { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); }
.wordmark .dot { display: inline-block; width: .17em; height: .17em; border-radius: 50%;
  background: var(--bronze); margin-left: 3px; }
.byline { font-size: 12px; color: var(--faint); }

/* Manager navigation: quiet text tabs, same idiom as the filters. */
.topnav { display: flex; gap: 22px; padding: 14px 0 2px; }
.topnav a { font-size: 13.5px; font-weight: 600; color: var(--faint); padding-bottom: 6px; }
.topnav a:hover { color: var(--muted); text-decoration: none; }
.topnav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--bronze); }

/* The day brief: the software's one human sentence, in the human voice. */
.brief { font-family: var(--thrive-serif); font-style: italic; font-size: 18px;
  line-height: 1.5; color: var(--ink); margin: 10px 0 4px; }
.brief a { font-style: italic; }

h1 { font-family: var(--sans); font-size: 32px; font-weight: 650; letter-spacing: -0.025em; margin: 34px 0 4px; }
h2 { font-family: var(--sans); font-size: 19px; font-weight: 650; letter-spacing: -0.015em; margin: 36px 0 10px; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

/* Top strip: one calm white card. */
.strip {
  display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-end;
  background: var(--card);
  border-radius: 22px; padding: 24px 28px; margin: 20px 0 24px;
  box-shadow: var(--shadow);
}
.strip .stat { min-width: 110px; }
.strip .num { font-family: var(--sans); font-size: 38px; font-weight: 650; line-height: 1.02;
  letter-spacing: -0.02em; color: var(--ink); }
.strip .stat:last-child .num { color: var(--bronze); }
.strip .lbl { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.strip .trend { margin-top: 2px; }
.strip .trend.up { color: var(--bronze); font-weight: 600; }
.goalbar { position: relative; height: 6px; background: var(--track);
  border-radius: 3px; width: 170px; margin-top: 9px; }
.goalbar .fill { position: absolute; inset: 0 auto 0 0; background: var(--bronze); border-radius: 3px; }
.goalbar .mark60 { position: absolute; top: -4px; bottom: -4px; left: 60%; width: 2px;
  background: var(--ink); border-radius: 1px; }

/* Filters: quiet text tabs, not buttons. Active = bronze underline. */
.chips { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.chip.filter { padding: 8px 1px; font-size: 13.5px; font-weight: 600; background: none;
  border: none; border-radius: 0; color: var(--faint); letter-spacing: 0; }
.chip.filter:hover { color: var(--muted); text-decoration: none; }
.chip.filter.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--bronze); }
.chipgap { width: 14px; }

/* Sections: quiet labels, air does the separating. */
.section-h {
  font-family: var(--sans); font-size: 12px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  margin: 32px 0 12px;
}
.section-h .n { color: var(--bronze); }
.section-h.urgent { color: var(--rust); }

/* Member rows: soft white cards, generous air. */
.row {
  background: var(--card);
  border-radius: 18px;
  padding: 20px 22px 16px;
  margin: 0 0 12px;
  box-shadow: var(--shadow);
}
.rowgrid { display: grid; grid-template-columns: 1fr auto; gap: 2px 28px; align-items: start; }
.rowmain { min-width: 0; }
.rowside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 4px; }
.row .top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.row .name { font-family: var(--sans); font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.row .day { font-size: 13px; color: var(--faint); }
.row .suggest { font-size: 15px; margin-top: 6px; }
.row .meta { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.row .actions { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.row .actions .act { font-size: 13px; font-weight: 600; padding: 7px 0; white-space: nowrap; }
.row .actions details.log { flex: 1; min-width: 200px; }
.logged-now { background: var(--track); border-radius: 12px; padding: 11px 14px;
  font-size: 14px; color: var(--bronze); flex: 1; }

/* Chips */
.chip {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 11px; border-radius: 999px; border: none;
  background: var(--track); color: var(--muted); white-space: nowrap;
}
.chip.cancelling { background: var(--rust); color: #fff; }
.chip.no_first_visit { background: #EFE3D0; color: var(--bronze); }
.chip.quiet { background: var(--ink); color: var(--paper); }
.chip.drifting { background: #E4DFD3; color: var(--ink); }
.chip.behind_pace { background: #EFE3D0; color: var(--bronze); }
.chip.touchpoint { background: #EFE3D0; color: var(--bronze); }
.chip.on_track, .chip.frozen { color: var(--faint); }

/* Progress: rings. The month is a circle that fills as the habit forms. */
.ring {
  --p: 0; --size: 52px; --th: 5px; --hole: var(--card);
  position: relative; width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(var(--bronze) calc(var(--p) * 1%), var(--track) 0);
  display: grid; place-items: center; flex: none;
}
.ring::before { content: ""; position: absolute; inset: var(--th);
  background: var(--hole); border-radius: 50%; }
.ring > span { position: relative; font-weight: 650; font-size: 15px;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ring.full { background: conic-gradient(var(--bronze) 100%, var(--bronze) 0); }
.ring.full > span { color: var(--bronze); }
/* The advisor score ring, with the 60% line marked on the dial. */
.ring.score { --size: 88px; --th: 8px; --hole: var(--card); }
.ring.score > span { font-size: 21px; }
.ring .tick { position: absolute; inset: 0; transform: rotate(216deg); }
.ring .tick::after { content: ""; position: absolute; top: -2px; left: 50%;
  width: 2px; height: 12px; background: var(--ink); transform: translateX(-50%); border-radius: 1px; }
.bar-lbl { font-size: 11.5px; color: var(--faint); }
/* Milestone mini-rings: M1 M2 M3. */
.dots { display: flex; gap: 7px; align-items: center; }
.dot { --p: 0; width: 17px; height: 17px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--bronze-soft) calc(var(--p) * 1%), var(--track) 0); }
.dot::before { content: ""; position: absolute; inset: 4px; background: var(--card); border-radius: 50%; }
.dot.hit { background: var(--bronze); }
.dot.hit::before { inset: 5.5px; }
/* Legacy linear bar (member page milestone rows, goalbar fallbacks). */
.bar { position: relative; height: 6px; width: 130px; background: var(--track);
  border-radius: 3px; overflow: hidden; display: inline-block; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--bronze-soft); }
.bar .fill.full { background: var(--bronze); }

/* Member page: the three months, three rings. */
.mrings {
  display: flex; gap: 28px; flex-wrap: wrap; margin: 22px 0;
  background: var(--card); border-radius: 22px; padding: 26px 30px;
  box-shadow: var(--shadow);
}
.mring { text-align: center; }
.mring .ring { --size: 92px; --th: 8px; margin: 0 auto; }
.mring .ring > span { font-size: 24px; }
.mring .mlbl { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 10px; }
.mring .msub { font-size: 11.5px; color: var(--faint); margin-top: 1px; }

/* One-tap log sheet: ink pills, Oura CTA style. */
details.log > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--track); border: none; border-radius: 999px; padding: 8px 18px;
  transition: background .15s ease, color .15s ease;
}
details.log > summary:hover { background: #E2DDD0; }
details.log[open] > summary { background: var(--ink); color: var(--paper); }
details.log > summary::-webkit-details-marker { display: none; }
.sheet {
  background: var(--paper); border-radius: 16px; padding: 16px 18px; margin-top: 12px;
}
.sheet .hint { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
/* Selectors: one recessed track, options as quiet text; only the chosen one
   lifts out. Choosing should not look like pressing. */
.methods { display: flex; flex-wrap: wrap; gap: 2px; background: var(--track);
  border-radius: 14px; padding: 3px; }
.methods label { flex: 1 1 23%; min-width: 0; }
.methods button, .methods label span {
  display: block; text-align: center; font-size: 13.5px; font-weight: 550;
  padding: 10px 6px; cursor: pointer; width: 100%;
  background: transparent; color: var(--muted);
  border: none; border-radius: 11px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.methods button:hover, .methods label span:hover { color: var(--ink); }
.methods label input { position: absolute; opacity: 0; pointer-events: none; }
.methods label input:checked + span { background: var(--card); color: var(--ink);
  font-weight: 650; box-shadow: 0 1px 3px rgba(29,27,23,.10); }
.sheet .hint + .methods + .hint { margin-top: 12px; }
.sheet button.done {
  font-size: 15px; font-weight: 650; padding: 12px 28px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: none; border-radius: 999px;
  transition: background .15s ease;
}
.sheet button.done:hover { background: #3A362E; }
.commit-hint, .commit-days { display: none; }
.sheet:has(input[value="visit_committed"]:checked) .commit-hint { display: block; margin-top: 12px; }
.sheet:has(input[value="visit_committed"]:checked) .commit-days { display: flex; }
.commit-days label { flex: 1 1 12%; }
.commit-days label span { font-weight: 500; padding: 9px 2px; font-size: 12.5px; }
.sheet .aux { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.sheet select, .sheet input[type=text] {
  font-size: 14px; padding: 10px 12px; border: none; border-radius: 10px;
  background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(29,27,23,.05);
}
.sheet input[type=text] { flex: 1; min-width: 160px; }

/* Tables: minimal rules. */
table.roll { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
table.roll th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); }
table.roll td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
table.roll td.num, table.roll th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ok60 { color: var(--bronze); font-weight: 650; }
.under60 { color: var(--rust); font-weight: 650; }
.ly { display: block; font-size: 11px; color: var(--faint); }

/* Owner tiles */
.hero-tile {
  background: var(--card); border-radius: 24px; padding: 30px 32px; margin: 20px 0;
  box-shadow: var(--shadow);
}
.hero-tile .big { font-family: var(--sans); font-size: 42px; font-weight: 650;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.hero-tile .big::after { content: ""; display: block; width: 64px; height: 4px;
  background: var(--bronze); margin-top: 14px; border-radius: 2px; }
.hero-tile .cap { font-size: 13.5px; color: var(--muted); margin-top: 14px; max-width: 52ch; }
.funnel { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.funnel .cell { flex: 1; min-width: 104px; padding: 16px 18px;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow); border: none; }
.funnel .num { font-family: var(--sans); font-size: 24px; font-weight: 650; color: var(--ink); }
.funnel .lbl { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
/* The pull quote: the human voice, serif italic. */
.pull {
  font-family: var(--thrive-serif); font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.6; color: var(--ink);
  border-left: 3px solid var(--bronze-soft); padding: 4px 0 4px 20px; margin: 28px 0;
}
.pull .src { display: block; font-family: var(--sans); font-style: normal;
  font-size: 12px; color: var(--faint); margin-top: 8px; }

/* The punchcard: 90 days, three rows of 30, one row per membership month. */
.punchcard {
  background: var(--card); border-radius: 22px; padding: 24px 28px; margin: 16px 0;
  box-shadow: var(--shadow);
}
.pctitle { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.prow { display: flex; align-items: center; gap: 12px; margin: 7px 0; }
.plbl { font-size: 11px; font-weight: 600; color: var(--faint); width: 22px; flex: none; }
.pdots { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; flex: 1; }
.pd { width: 100%; aspect-ratio: 1; border-radius: 3.5px; background: var(--track); }
.pd.v { background: var(--bronze); }
.pd.today { box-shadow: 0 0 0 2px var(--ink); }
.pd.future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.pd.today.future { box-shadow: 0 0 0 2px var(--ink); background: var(--track); }

/* Member search */
.search { display: flex; gap: 12px; align-items: center; margin: 6px 0 4px; }
.search input[type=search] {
  flex: 1; max-width: 340px; font-size: 14px; padding: 10px 16px;
  border: none; border-radius: 999px; background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(29,27,23,.06);
}
.search input[type=search]::placeholder { color: var(--faint); }

/* Assignment controls: quiet select + small ink pill. */
.assign { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.assign select { font-size: 13.5px; padding: 8px 12px; border: none; border-radius: 10px;
  background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(29,27,23,.06); }
.assignbtn { font-size: 13px; font-weight: 600; padding: 8px 18px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: none; border-radius: 999px; }
.assignbtn:hover { background: #3A362E; }

/* The one-pager's agenda list. */
.agenda { margin: 12px 0; padding-left: 22px; }
.agenda li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.agenda strong { font-weight: 650; }
.agenda .who { font-size: 12.5px; color: var(--faint); margin-left: 8px; }
.agenda .fact { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 12px 0; }
.timeline li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.timeline .td { color: var(--faint); min-width: 88px; font-variant-numeric: tabular-nums; }
.timeline .visit { color: var(--bronze); font-weight: 600; }
.timeline .flag-ev { color: var(--rust); }
/* The advisor's own words: the one truly handwritten thing, set in the
   human voice (the notecard idea, translated). */
.timeline .note { font-family: var(--thrive-serif); font-style: italic; color: var(--ink); }

/* Collapse */
details.fold > summary { cursor: pointer; padding: 14px 2px; color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .strip { gap: 18px; padding: 18px 20px; }
  .methods label { flex: 1 1 46%; }
  .commit-days label { flex: 1 1 23%; }
  .rowgrid { grid-template-columns: 1fr; }
  .rowside { flex-direction: row; align-items: center; gap: 10px; padding-top: 8px; }
}

@media print {
  body { background: #fff; color: #000; }
  .noprint { display: none !important; }
  .strip, .hero-tile, .row, .funnel .cell { background: #fff; box-shadow: none; border: 1px solid #000; }
  a { color: #000; }
}