:root{
  --bg:#F4F7F6; --surface:#FFFFFF; --surface-2:#EBF0EE;
  --ink:#19262A; --ink-2:#4E5F64; --ink-3:#7C8C90;
  --line:#D5DEDB; --grid:#E4EBE8; --grid-strong:#C9D4D0;
  /* Five colours, one meaning each (27 Sept): sky = press here, coral = your voice,
     sage = what you work on, honey = worth keeping, slate = what he takes. */
  --visits:#56648A; --tests:#56648A; --medication:#56648A; --supplement:#56648A; --diet:#56648A; --therapy:#56648A; --practice:#3F7F6B; --observation:#C6533A;
  --flag-high:#B7392B; --flag-low:#A67B2C; --flag-ok:#4E5F64;
  --unknown:#EEF2F0; --hatch:#C9D4D0;
  --focus:#1D6E9E;
  --accent:#1D6E9E; --calm:#3F7F6B; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sel:#19262A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101718; --surface:#161F21; --surface-2:#1C272A;
    --ink:#E4ECEA; --ink-2:#A7B8BB; --ink-3:#758689;
    --line:#2B383B; --grid:#1F2B2E; --grid-strong:#324044;
    --visits:#9AA9C9; --tests:#9AA9C9; --medication:#9AA9C9; --supplement:#9AA9C9; --diet:#9AA9C9; --therapy:#9AA9C9; --practice:#7FC4AD; --observation:#E5795F;
    --flag-high:#E76F5E; --flag-low:#D3A653; --flag-ok:#A7B8BB;
    --unknown:#151D1F; --hatch:#2B383B;
    --focus:#8ECDF2; --sel:#E4ECEA;
  --accent:#8ECDF2; --calm:#7FC4AD;
  }
}
:root[data-theme="dark"]{
  --bg:#101718; --surface:#161F21; --surface-2:#1C272A;
  --ink:#E4ECEA; --ink-2:#A7B8BB; --ink-3:#758689;
  --line:#2B383B; --grid:#1F2B2E; --grid-strong:#324044;
  --visits:#9AA9C9; --tests:#9AA9C9; --medication:#9AA9C9; --supplement:#9AA9C9; --diet:#9AA9C9; --therapy:#9AA9C9; --practice:#7FC4AD; --observation:#E5795F;
  --flag-high:#E76F5E; --flag-low:#D3A653; --flag-ok:#A7B8BB;
  --unknown:#151D1F; --hatch:#2B383B;
  --focus:#8ECDF2; --sel:#E4ECEA;
  --accent:#8ECDF2; --calm:#7FC4AD;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding-block:36px 64px;padding-inline:20px}
/* Pages a visitor sees signed out sit at the landing's width, so the text starts under the logo. */
.wrap.front{max-width:1040px}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-.01em}
h1 em{font-style:italic;font-weight:400}
h2{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:24px;line-height:1.2}
h3{font-size:15px;font-weight:600}
p{margin:0}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.measure{max-width:64ch}

/* header */
header.top{display:grid;gap:14px;margin-bottom:28px}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--ink-2);font-size:14px}
.meta b{color:var(--ink);font-weight:500}
.notice{border-left:3px solid var(--observation);padding:10px 14px;background:var(--surface);color:var(--ink-2);font-size:14px;max-width:78ch}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--ink-2);margin:18px 0 10px}
.legend .k{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:14px;height:8px;border-radius:2px;display:inline-block}
.legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.legend .dia{width:9px;height:9px;transform:rotate(45deg);display:inline-block;border-radius:1px}
.legend .sq{width:9px;height:9px;display:inline-block;border-radius:2px}
.legend .hatch{width:14px;height:8px;display:inline-block;background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,transparent 2px 5px);border:1px solid var(--grid-strong)}

/* chart + detail */
.board{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
@media (max-width:860px){.board{grid-template-columns:1fr}}
.chart-wrap{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow-x:auto;overflow-y:hidden}
.chart-inner{display:flex;width:max-content}
.chart-wrap svg{display:block;flex:none}
.chart-wrap svg.labels{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:4px 0 8px -6px rgba(0,0,0,.25)}
.chart-wrap svg text{font-family:"IBM Plex Sans",system-ui,sans-serif;fill:var(--ink)}
.chart-wrap svg .ax{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--ink-3)}
.chart-wrap svg .yr{font-weight:600;fill:var(--ink-2)}
.chart-wrap svg .lane-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-3);font-weight:500}
.chart-wrap svg .rlabel{font-size:12.5px;fill:var(--ink)}
.chart-wrap svg .rlabel.dim{fill:var(--ink-2)}
.chart-wrap svg .glab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;fill:var(--ink-3)}
.chart-wrap svg .item{cursor:pointer;outline:none}
.chart-wrap svg .item:focus-visible .hit{stroke:var(--focus);stroke-width:2}
.chart-wrap svg .item.sel .hit{stroke:var(--sel);stroke-width:1.5}
.chart-wrap svg.plot .item.sel .hit{stroke:none;fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.chart-wrap svg .hit{fill:transparent;stroke:transparent}
.chart-wrap svg .gl{stroke:var(--grid);stroke-width:1}
.chart-wrap svg .gl.q{stroke:var(--grid-strong)}
.chart-wrap svg .lane-rule{stroke:var(--line)}
.chart-wrap svg .today{stroke:var(--ink-2);stroke-dasharray:2 3}
.chart-wrap svg .known{stroke:var(--observation);stroke-width:1.5}

.detail{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px 18px;position:sticky;top:12px;display:grid;gap:10px;min-height:220px;max-height:calc(100vh - 24px);overflow-y:auto;align-content:start}
@media (max-width:860px){.detail{position:static}}
.detail .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--ink-2)}
.detail .tag i{width:10px;height:10px;border-radius:2px;display:inline-block}
.detail h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:20px;line-height:1.2}
.detail .when{color:var(--ink-2);font-size:13px}
.detail p{color:var(--ink);font-size:14px}
.detail .sub{color:var(--ink-2);font-size:13px}
.detail ul{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px}
.detail .empty{color:var(--ink-3);font-size:14px}
.phases{display:grid;gap:6px;font-size:13.5px}
.phases div{display:grid;grid-template-columns:64px 1fr;gap:10px}
.phases .d{color:var(--ink-3)}
.results{width:100%;border-collapse:collapse;font-size:13px}
.results td{padding:4px 0;border-top:1px solid var(--grid);vertical-align:top}
.results td.v{text-align:right;white-space:nowrap;padding-left:10px}
.results td.r{color:var(--ink-3);text-align:right;white-space:nowrap;padding-left:10px}
.results .f-high{color:var(--flag-high);font-weight:500}
.results .f-low{color:var(--flag-low);font-weight:500}
.results .f-low-normal{color:var(--flag-low)}
.results .delta{color:var(--ink-3);font-size:12px}
.src{font-size:12px;color:var(--ink-3);word-break:break-word}

/* story */
section.story{margin-top:44px}
.story-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.story-head p{color:var(--ink-2);font-size:14px}
.month{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
@media (max-width:640px){.month{grid-template-columns:1fr;gap:8px}}
.month .mh{font-family:"Source Serif 4",Georgia,serif;font-size:19px;line-height:1.2;color:var(--ink)}
.month .mh small{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:12px;color:var(--ink-3);margin-top:2px}
.ev-list{display:grid;gap:14px}
.ev{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start}
.ev .pip{width:10px;height:10px;margin-top:6px;border-radius:50%}
.ev .pip.test{border-radius:1px;transform:rotate(45deg) scale(.9)}
.ev .pip.intervention{border-radius:2px;height:6px;width:14px;margin-top:8px;margin-left:-2px}
.ev .pip.observation{border-radius:2px}
.ev .body{display:grid;gap:4px;max-width:72ch}
.ev .t{font-weight:600;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.ev .t .d{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:12px;color:var(--ink-3)}
.ev .s{color:var(--ink-2);font-size:14px}
.ev .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chip{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.chip.pos{background:color-mix(in srgb,var(--supplement) 18%,transparent);color:var(--ink)}
.chip.mixed{background:color-mix(in srgb,var(--diet) 22%,transparent);color:var(--ink)}
.ev details{font-size:14px;color:var(--ink-2)}
.ev summary{cursor:pointer;color:var(--ink-2);font-size:13px;list-style:none;display:inline-flex;gap:6px;align-items:center}
.ev summary::before{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--ink-3)}
.ev details[open] summary::before{content:"–"}
.ev details > :not(summary){margin-top:8px}
.ev ul{margin:0;padding-left:18px;display:grid;gap:3px}

/* tail */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media (max-width:700px){.two{grid-template-columns:1fr}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px 20px;display:grid;gap:10px}
.box ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14px;color:var(--ink-2)}
footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13px;display:grid;gap:6px}
@media (prefers-reduced-motion:no-preference){.chart-wrap svg .bar,.chart-wrap svg .pt{transition:opacity .15s}}
/* add entry */
[hidden]{display:none!important}
.btn{font:inherit;font-size:14px;font-weight:500;padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--ink-3)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.quiet{border-color:transparent;color:var(--ink-2)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar .hint{font-size:13px;color:var(--ink-3)}
dialog.entry{border:1px solid var(--line);border-radius:8px;padding:0;background:var(--surface);color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
dialog.entry::backdrop{background:rgba(10,16,18,.45)}
dialog.entry form{display:grid;gap:14px;padding:20px 22px 22px}
dialog.entry h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:20px}
.field{display:grid;gap:5px}
.field label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:100%}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.field .help{font-size:12px;color:var(--ink-3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}
.check{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.check input{width:auto}
.kinds{display:flex;flex-wrap:wrap;gap:6px}
.kinds label{font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--ink-2)}
.kinds input{position:absolute;opacity:0;width:0;height:0}
.kinds input:checked + span{color:var(--ink);font-weight:500}
.kinds label:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.kinds label:has(input:focus-visible){outline:2px solid var(--focus)}
.actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap}
.actions .status{margin-right:auto;font-size:13px;color:var(--ink-2)}
.actions .status.err{color:var(--flag-high)}

/* ---------- app chrome ---------- */
/* A visitor who is not signed in gets the landing's header (shared/_front_nav), at the landing's width. */
.frontbar{max-width:1040px;margin:0 auto;padding-inline:20px}
.frontbar header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.frontbar .brand{display:inline-flex;align-items:center;gap:10px;font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:21px;color:var(--ink);text-decoration:none;white-space:nowrap}
.frontbar .brand .sprout{width:28px;height:28px;flex:0 0 auto}
.frontbar nav.links{display:flex;gap:22px;align-items:center;font-size:15px}
.frontbar nav.links a{color:var(--ink-2);text-decoration:none}
.frontbar nav.links a:hover,.frontbar nav.links a[aria-current="page"]{color:var(--ink)}
@media (max-width:560px){.frontbar nav.links{gap:16px}.frontbar nav.links a.hide-sm{display:none}.frontbar .brand .name{font-size:19px}}
/* Full-width bar, contents lined up with .wrap below it: the logo sits over the first letter of the page. */
.topbar{display:flex;align-items:center;gap:16px;padding:10px max(20px, calc((100% - 1140px) / 2));border-bottom:1px solid var(--line);background:var(--surface);overflow-x:auto;scrollbar-width:none}
.topbar .brand .sprout{width:24px;height:24px;flex:0 0 auto}
.topbar .brand{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:20px;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.topbar .navlink{color:var(--ink-2);text-decoration:none;font-size:14px;white-space:nowrap}
@media (max-width:560px){.topbar .brand{font-size:0;gap:0}.topbar .brand .sprout{width:26px;height:26px}}
.topbar .navlink:hover{color:var(--ink)}
.topbar .who{margin-left:auto;color:var(--ink-2);font-size:14px}
.topbar form{margin:0}
.btn.small{padding:5px 10px;font-size:13px}
.btn.danger{color:var(--flag-high)}
.flash{max-width:1180px;margin:14px auto 0;padding:0 20px}
.flash.notice{color:var(--ink-2)}
.flash.alert{color:var(--flag-high)}
.flash > *{display:block}
.title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.title-row h1{flex:1 1 auto}
.lede{color:var(--ink-2);font-size:16px;max-width:64ch}
/* A lede right under the page title gets room to breathe (the gift page read as one block). */
.title-row + .lede{margin-top:14px}
.title-row + .lede + p{margin-top:10px}
.muted{color:var(--ink-3)}
.mt{margin-top:40px}
ul.plain{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:16px}
code{font-family:"IBM Plex Mono",monospace;font-size:12.5px;background:var(--surface-2);padding:1px 5px;border-radius:3px}

/* sign in */
.signin{max-width:380px;margin:24px 0 0;display:grid;gap:14px}
.signin h1{font-size:40px}

/* forms (server-rendered) */
.form{display:grid;gap:14px;max-width:680px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.form.inline{max-width:680px;margin-top:12px;grid-template-columns:1fr auto auto;align-items:end;gap:12px}
@media (max-width:600px){.form.inline{grid-template-columns:1fr}}
.field .label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.field input[type=date]{max-width:220px}
.kinds .kind{font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--ink-2);text-decoration:none;background:var(--surface)}
.kinds .kind:hover{border-color:var(--ink-3);color:var(--ink)}
.kinds .kind:has(input:checked){border-color:var(--ink);background:var(--surface-2);color:var(--ink);font-weight:500}
.kinds .kind input{position:absolute;opacity:0;width:0;height:0}
.kinds .kind:has(input:focus-visible){outline:2px solid var(--focus)}
.add-row{display:grid;gap:8px;margin:-8px 0 28px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.add-row .help{font-size:12.5px;color:var(--ink-3)}
.ev .t .edit{font-size:12px;color:var(--ink-3);text-decoration:none;border-bottom:1px dotted var(--ink-3)}
.ev .t .edit:hover{color:var(--ink)}
.detail .tag{justify-content:space-between;width:100%}
.detail .edit-link{font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;font-weight:400}
.chip.neg{background:color-mix(in srgb,var(--observation) 18%,transparent);color:var(--ink)}
table.access{border-collapse:collapse;width:100%;max-width:680px;font-size:14px}
table.access td{padding:8px 0;border-top:1px solid var(--grid);vertical-align:middle}
table.access td.r{text-align:right}
table.access form{margin:0;display:inline}

/* ---------- voice notes ---------- */
.add-voice{display:grid;gap:8px;margin-bottom:6px}
.add-voice .waiting{font-size:14px;color:var(--observation);text-decoration:none;font-weight:500}
.recorder{display:grid;gap:12px;padding:16px 18px;background:var(--surface-2);border-radius:8px}
.rec-main{display:flex;align-items:center;gap:16px}
.rec-btn{width:64px;height:64px;border-radius:50%;border:2px solid var(--observation);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none}
.rec-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rec-btn:disabled{opacity:.5;cursor:default}
.rec-dot{width:26px;height:26px;border-radius:50%;background:var(--observation);transition:border-radius .2s,transform .2s}
.is-recording .rec-dot{border-radius:5px;transform:scale(.8)}
@media (prefers-reduced-motion:no-preference){.is-recording .rec-btn{animation:pulse 1.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--observation) 40%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
.rec-text{display:grid;gap:2px}
.rec-state{font-family:"Source Serif 4",Georgia,serif;font-size:19px}
.rec-time{font-size:13px;color:var(--ink-3)}
.rec-opts{display:flex;gap:14px;flex-wrap:wrap}
.field.small{display:grid;gap:3px;font-size:12px;color:var(--ink-2)}
.field.small input,.field.small select{width:auto;padding:5px 8px;font-size:13px}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.err{color:var(--flag-high);font-size:13.5px}
.notes{display:grid;gap:16px}
.note{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:grid;gap:10px}
.note.done{opacity:.85}
.note-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px}
.note-head audio{height:32px;max-width:260px}
.note-head form{margin:0;margin-left:auto}
.transcript{font-size:14px;color:var(--ink-2)}
.transcript summary{cursor:pointer}
.transcript p{margin-top:6px;white-space:pre-wrap}
.proposal{border-top:1px solid var(--grid);padding-top:12px;display:grid;gap:8px;position:relative}
.proposal form{display:grid;gap:10px;margin:0}
.proposal.word{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.proposal.word .word-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}
.proposal.word .word-field{font-weight:600;min-width:8rem}
.proposal.word .heard{color:var(--ink-3);font-size:13px}
.chip.kind-word{background:var(--surface-2);color:var(--calm);border-color:var(--calm)}
.proposal-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.proposal .compact{width:auto;padding:4px 8px;font-size:13px}
.proposal .discard{position:absolute;right:0;bottom:0}
.proposal .actions{justify-content:flex-start;padding-right:110px}
.chip.kind-observation{background:color-mix(in srgb,var(--observation) 18%,transparent)}
.chip.kind-visit{background:color-mix(in srgb,var(--visits) 20%,transparent)}
.chip.kind-test{background:color-mix(in srgb,var(--tests) 20%,transparent)}
.chip.kind-start,.chip.kind-change,.chip.kind-stop{background:color-mix(in srgb,var(--supplement) 20%,transparent)}

/* step by step (workflow view) */
.count{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;color:var(--ink-3);vertical-align:middle;margin-left:6px}
.quietlink{font-size:13px;color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line)}
.quietlink:hover{color:var(--ink);border-color:var(--ink-3)}
section.running{margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:8px}
.card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:6px;padding:14px 16px 12px;display:grid;gap:6px;align-content:start}
.card.lane-medication{border-left-color:var(--medication)}
.card.lane-supplement{border-left-color:var(--supplement)}
.card.lane-diet{border-left-color:var(--diet)}
.card.lane-therapy{border-left-color:var(--therapy)}
.card.lane-practice{border-left-color:var(--practice)}
.card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.lane-tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.card .d{font-size:12px;color:var(--ink-3)}
.card h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:18px;line-height:1.2}
.card .dur{font-size:13px;color:var(--ink-2)}
.dose{font-size:14px;color:var(--ink);display:flex;gap:8px;align-items:baseline}
.dose .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500;flex:none}
.card .why{font-size:13.5px;color:var(--ink-2)}
.card-foot{display:flex;gap:14px;margin-top:4px;flex-wrap:wrap}
.planned{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}

section.flow{margin-top:44px}
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:10px 0}
.step .rail{position:relative;height:100%;min-height:26px}
.step .rail::before{content:"";position:absolute;left:5px;top:-10px;bottom:-10px;width:2px;background:var(--grid)}
.steps .step:first-child .rail::before{top:14px}
.steps .step:last-child .rail::before{bottom:auto;height:14px}
.step .dot{position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--lane);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--lane)}
.step.type-stop .dot{background:var(--bg)}
.step.type-change .dot{width:8px;height:8px;left:2px;top:9px}
.step.type-test .dot{border-radius:2px;transform:rotate(45deg) scale(.85)}
.step.type-observation .dot{border-radius:2px}
.step .body{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px;display:grid;gap:5px;max-width:76ch}
.step.type-change .body,.step.type-observation .body{background:transparent;border-color:transparent;padding-block:4px}
.step .t{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.step .t .title{font-weight:600}
.step .t .d{font-size:12px;color:var(--ink-3)}
.step .t .edit{font-size:12px;color:var(--ink-3)}
.step .s{color:var(--ink-2);font-size:14px}
.step .after{font-size:13px;color:var(--ink-3)}
.step .after .still{color:var(--supplement);font-weight:500}
.step .decisions{margin:2px 0 0;padding-left:18px;display:grid;gap:3px;font-size:14px;color:var(--ink-2)}
.step .results{font-size:14px;border-collapse:collapse}
.step .results td{padding:2px 0}
.step .sub{font-size:13px;color:var(--ink-3)}
.step .chips{display:flex;gap:6px;flex-wrap:wrap}
.chip.kind-stop{background:color-mix(in srgb,var(--flag-high) 14%,transparent)}
.chip.kind-change{background:color-mix(in srgb,var(--diet) 20%,transparent)}

section.open{margin-top:44px;display:grid;gap:14px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.three{grid-template-columns:1fr}}
.box a{color:inherit}
.stopped{font-size:14px;color:var(--ink-2)}
.stopped summary{cursor:pointer;color:var(--ink-3);font-size:13px}
.stopped ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}

/* step by step: horizontal board */
.flow .story-head{align-items:center}
.flow .story-head .btn{margin-left:auto}
.flow .story-head p{flex-basis:100%}
.flow.horizontal .months{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:8px 0 18px;border-top:1px solid var(--line);
  scrollbar-width:thin}
.flow.horizontal .month{flex:0 0 300px;display:block;padding:0 14px 0 0;border-top:none;scroll-snap-align:start;position:relative}
.flow.horizontal .month + .month{padding-left:14px;border-left:1px dashed var(--grid-strong)}
.flow.horizontal .month .mh{position:sticky;left:0;font-size:17px;padding:8px 0 10px;margin-bottom:6px;border-bottom:2px solid var(--line)}
.flow.horizontal .month .mh small{display:inline;margin-left:8px}
.flow.horizontal .steps{gap:10px}
.flow.horizontal .step{grid-template-columns:1fr;padding:0}
.flow.horizontal .step .rail{display:none}
.flow.horizontal .step .body{max-width:none;border-left:3px solid var(--lane);background:var(--surface);border-color:var(--line);border-left-color:var(--lane);padding-block:9px}
.flow.horizontal .step.type-change .body,.flow.horizontal .step.type-observation .body{background:var(--surface-2);border-color:transparent;border-left-color:var(--lane)}
.flow.horizontal .step .t{flex-direction:column;gap:2px;align-items:flex-start}
.flow.horizontal .step .t .chip{order:-1}
.flow.horizontal .step .results{font-size:13px}
@media (max-width:640px){.flow.horizontal .month{flex-basis:82vw}}

/* today */
.topbar .navlink.on{color:var(--ink);font-weight:500}
.topbar .navlink.inbox.has{color:var(--ink);font-weight:500}
.topbar .navlink .count{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:var(--observation);color:#fff;font-size:12px;font-weight:600;text-align:center;line-height:18px}
.topbar .navlink.say{color:var(--focus);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;line-height:1.3}
.topbar .navlink.say:hover{color:var(--focus);border-color:var(--focus)}
.topbar .navlink.say:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:640px){.topbar .navlink.say{padding:3px 9px;font-size:13px}}
.today-top .daynav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.today-top .daynav h1{font-size:clamp(30px,4vw,44px)}
.today-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:900px){.today-grid{grid-template-columns:1fr;gap:28px}}
.today-grid .col{display:grid;gap:36px}
.today-grid section{display:grid;gap:12px}
.today-grid .story-head{margin-bottom:0}
.empty-hint{max-width:56ch;font-size:14px}
.goal-list{display:grid;gap:8px}
.goal-row{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.goal-row.routine{background:transparent}
.goal-row.done{border-color:color-mix(in srgb,var(--supplement) 45%,var(--line))}
.goal-row.done .g-title{color:var(--ink-2)}
.goal-row form{margin:0}
.tick{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink-3);background:var(--surface);cursor:pointer;display:grid;place-items:center;font:inherit;font-size:16px;color:var(--bg);padding:0;transition:background .12s,border-color .12s}
.tick:hover{border-color:var(--ink)}
.tick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.goal-row.done .tick{background:var(--supplement);border-color:var(--supplement)}
.tick.static{cursor:default}
.g-title{font-weight:600;line-height:1.3;padding-top:5px}
.g-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;color:var(--ink-3);margin-top:3px}
.dots{display:inline-flex;gap:3px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line)}
.dots i.on{background:var(--supplement);border-color:var(--supplement)}
.src-tag{font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.g-note summary{cursor:pointer;color:var(--ink-3);font-size:13px;list-style:none}
.g-note summary::before{content:"+ "}
.g-note[open] summary::before{content:"– "}
.g-note p{margin-top:4px;color:var(--ink-2);font-size:13.5px;max-width:52ch}
.g-actions{padding-top:6px}
.quietbtn{font:inherit;font-size:12px;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:2px 4px}
.quietbtn:hover{color:var(--ink);text-decoration:underline}
.add-goal summary{cursor:pointer;font-size:14px;color:var(--ink-2)}
.add-goal[open] summary{margin-bottom:10px}
.goal-form,.routine-form{display:grid;gap:8px}
.gf-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gf-title{flex:1 1 220px}
.goal-form input,.goal-form select,.routine-form input,.review-form textarea{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.goal-form input:focus,.goal-form select:focus,.routine-form input:focus,.review-form textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.gf-note{width:100%}
.gf-target{width:64px}
.routine-form{grid-template-columns:1fr auto;align-items:center}
.from-running{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.from-running form{margin:0}
.chip-btn{font:inherit;font-size:13px;padding:4px 10px;border-radius:999px;border:1px dashed var(--ink-3);background:transparent;color:var(--ink-2);cursor:pointer}
.chip-btn:hover{border-style:solid;color:var(--ink)}
.week-grid{display:grid;grid-template-columns:minmax(120px,1fr) repeat(var(--cols),34px);gap:6px 4px;align-items:center;overflow-x:auto}
.wg-head{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.1}
.wg-head small{display:block;font-size:11px}
.wg-head.today{color:var(--ink);font-weight:500}
.wg-label{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.wg-cell{display:grid;place-items:center}
.wg-cell form{margin:0;display:contents}
.cell{width:26px;height:26px;border-radius:50%;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.cell i{width:14px;height:14px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:block}
.cell.on i{background:var(--supplement);border-color:var(--supplement)}
.cell:hover i{border-color:var(--ink-3)}
.cell.static,.cell.na{cursor:default}
.cell.na{width:26px;height:26px;display:block}
.notice-sec .kinds.compact{margin-top:6px}
.recent{display:grid;gap:12px;margin-top:6px}
.recent-ev{display:grid;gap:3px;padding-bottom:10px;border-bottom:1px solid var(--line)}
/* A line just kept from a spoken note arrives a little above its place, in the warm tint of "what we noticed", and settles: down onto the line, the colour draining out. Not a bounce — the record does not flinch at a bad evening. */
.recent-ev.landed{border-radius:8px;background:color-mix(in srgb,var(--observation) 16%,transparent)}
@media (prefers-reduced-motion:no-preference){@keyframes landed{0%{transform:translateY(-6px);background:color-mix(in srgb,var(--observation) 16%,transparent)}100%{transform:none;background:transparent}}.recent-ev.landed{animation:landed 1.6s cubic-bezier(.2,.7,.2,1) both}}
.recent-ev .t{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.recent-ev .title{font-weight:600;font-size:14px}
.recent-ev .title a{text-decoration:none}
.recent-ev .s{font-size:13.5px;color:var(--ink-2)}
.last-review{display:grid;gap:4px;padding:10px 14px;border-left:3px solid var(--diet);background:var(--surface);font-size:14px;color:var(--ink-2)}
.last-review .d{font-size:12px;color:var(--ink-3)}
.review-form{display:grid;gap:8px;justify-items:start}
.review-form textarea{width:100%;resize:vertical}
.chip.topic-play{background:color-mix(in srgb,var(--therapy) 18%,transparent)}
.chip.topic-speech,.chip.topic-social{background:color-mix(in srgb,var(--visits) 18%,transparent)}
.chip.topic-sleep{background:color-mix(in srgb,var(--medication) 18%,transparent)}
.chip.topic-food,.chip.topic-gut{background:color-mix(in srgb,var(--diet) 22%,transparent)}
.chip.topic-mood,.chip.topic-health{background:color-mix(in srgb,var(--observation) 16%,transparent)}
.chip.topic-daycare{background:color-mix(in srgb,var(--tests) 18%,transparent)}
.notice-sec .waiting{font-size:14px;color:var(--observation);text-decoration:none;font-weight:500}

/* people: handover, us, helper, me */
.handover{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:8px;margin-bottom:24px}
.ho-list{display:grid;gap:4px}
.ho-item{font-size:14px;color:var(--ink)}
.ho-item .who{color:var(--ink-3)}
.ho-item .mono{font-size:12px}
.us{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.us-text{flex:1 1 220px;display:grid;gap:2px}
.us .sub{font-size:14px;color:var(--ink-2)}
.us-nums{display:flex;gap:14px}
.us-num{display:grid;justify-items:center;gap:2px}
.us-num .n{font-size:26px;font-weight:300}
.us-num .l{font-size:11px;color:var(--ink-3)}
.us form{margin:0}
.owner-tag{color:var(--ink-2)}
label.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.linkbox{font-size:12px;width:100%;max-width:360px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.scale{display:flex;gap:8px}
.scale form{margin:0;flex:1}
.scale-btn{width:100%;min-height:48px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:16px;font-weight:500;cursor:pointer}
.scale-btn.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.today-practice{background:var(--calm);color:var(--bg);border-radius:16px;padding:22px;display:grid;gap:4px;justify-items:start}
.today-practice .light,.eyebrow.light{color:var(--bg);opacity:.85}
.tp-title{font-size:24px;font-weight:600}
.tp-meta{font-size:14px;opacity:.9}
.today-practice form{margin-top:8px}
.practice-list{display:grid;gap:6px;margin-top:12px}
.p-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px}
.p-row.done{border-color:color-mix(in srgb,var(--supplement) 45%,var(--line))}
.p-row form{margin:0}
.review-form .row{display:flex;gap:12px;align-items:center;justify-content:space-between;width:100%}
.recent-ev .t form{margin:0}

/* ask the record */
.ask-form{display:grid;gap:10px;justify-items:start;max-width:70ch;margin-bottom:28px}
.ask-form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);resize:vertical}
.ask-form textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.asked{display:grid;gap:20px;max-width:72ch}
.qa{display:grid;gap:8px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.qa .q{display:grid;gap:2px;font-weight:600;font-size:16px}
.qa .q .d{font-weight:400;font-size:12px;color:var(--ink-3)}
.qa .a{font-size:15.5px;line-height:1.55;color:var(--ink-2);border-left:3px solid var(--tests);padding-left:14px}
.qa .a.thinking{color:var(--ink-3);font-style:italic;border-left-color:var(--grid-strong)}
.qa .a.failed{border-left-color:var(--flag-high);color:var(--flag-high)}
.qa .a.outside{border-left-color:var(--diet)}
.cited{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cited .chip{text-decoration:none;font-size:13px;padding:4px 10px}
.cited .chip .sub{color:var(--ink-3);font-size:12px}
.qa-foot form{margin:0}

.foot { max-width: 1180px; margin: 48px auto 32px; padding: 0 20px; font-size: 13px; }
.foot.front { max-width: 1040px; }

/* the journal's recorder: same control, smaller, sits above the note box */
.recorder.compact{margin-bottom:12px}
.recorder.compact .rec-btn.small{width:44px;height:44px}
.recorder.compact .rec-btn.small .rec-dot{width:16px;height:16px}
.recorder.compact .rec-state{font-size:14px}

/* A tick proposed from something said out loud. Calm, not warm: it is not new
   information, it is bookkeeping the parent already did aloud. */

/* The one-time code. Wide letters so six digits can be checked at a glance
   against the phone the mail arrived on. */
.code-input{
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 26px; letter-spacing: 10px; text-align: center;
}

/* ---- How it's going: the graph, and the week-by-week table under it ---- */
.changes{max-width:960px;margin:0 auto;padding:24px 20px 60px}
.changes h1{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:28px;line-height:1.15}
.changes h2{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:32px 0 10px}
.changes .tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.changes .windows{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.changes .meta{margin:6px 0 20px}
.changes .foot{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.changes .empty{color:var(--ink-3);font-size:14px}

.graph{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 14px 10px}
.graph svg{display:block;overflow:visible}
.g-label{font-size:11.5px;fill:var(--ink-2);font-family:"IBM Plex Sans",sans-serif}
.g-sub{font-size:10.5px;fill:var(--ink-3);font-family:"IBM Plex Sans",sans-serif}
.g-grid{stroke:var(--grid);stroke-width:1}
.g-axis{stroke:var(--grid-strong);stroke-width:1}
.g-bar{fill:var(--tests)}
.g-bar:hover{fill:var(--focus);stroke:var(--surface);stroke-width:2}
.g-dot{stroke:var(--surface);stroke-width:1.5}
.g-band{opacity:.8}
.g-band.paused{opacity:.35}
.g-band-text{font-size:9px;fill:var(--bg);font-family:"IBM Plex Sans",sans-serif;font-weight:600;pointer-events:none}
.g-notch{stroke:var(--ink);stroke-width:2}
.g-notch.pause{stroke:var(--observation)}
.g-change{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:3 3}
.g-change.pause{stroke:var(--observation)}
.g-change-text{font-size:9.5px;fill:var(--ink-3);font-family:"IBM Plex Sans",sans-serif}
.g-step{fill:none;stroke:var(--tests);stroke-width:2;stroke-linejoin:round}
.g-pivot{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3}
.g-dot.before{fill:var(--ink-3)}
.g-dot.after{fill:var(--tests)}
.g-level{stroke-width:2}
.g-level.before{stroke:var(--ink-3)}
.g-level.after{stroke:var(--tests)}
.legend .swatch{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:4px}
.strands .lead,.compare .lead{max-width:70ch}
.strands .row,.compare .row,.words .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{display:flex;gap:8px;align-items:center;margin:14px 0}
.search-field{flex:1;max-width:44rem;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.hits{list-style:none;padding:0;margin:8px 0 18px;display:flex;flex-direction:column;gap:8px}
.hits .hit{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.hits .hit label{display:contents}
.hits.plain li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.hit-when{color:var(--ink-3);font-size:12px;min-width:7rem}
.hit-text{color:var(--ink-2);font-size:13.5px;flex-basis:100%}
.make-row{margin-top:10px;align-items:center;gap:10px;flex-wrap:wrap}
.thread-list{list-style:none;padding:0;margin:8px 0 18px;display:flex;flex-direction:column;gap:6px}
.thread-name{font-weight:600;font-size:16px;margin-right:10px}
.thread-head{display:flex;align-items:baseline;gap:16px}
.thread-head details summary{cursor:pointer;color:var(--ink-3);font-size:13px}
.h-small{font-size:15px;margin-top:22px}
.btn.tiny{padding:1px 7px;font-size:13px;line-height:1.4}
.danger-zone{margin-top:28px}
.danger-zone summary{cursor:pointer;color:var(--ink-3);font-size:13px}
.word-list{columns:3;column-gap:28px;padding-left:1.4rem;max-width:60rem}
.word-list li{break-inside:avoid;margin:4px 0;display:flex;gap:8px;align-items:baseline}
.add-word{gap:8px;align-items:center;margin:10px 0 18px;flex-wrap:wrap}
.pick{gap:16px;flex-wrap:wrap;align-items:flex-end;margin:12px 0 18px}
.pick .field{display:flex;flex-direction:column;gap:4px}
.sentences{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 18px 14px 34px;max-width:78ch;margin:14px 0}
.sentences li{margin:4px 0;color:var(--ink)}
.sentences li:last-child{color:var(--ink-2);font-size:14px;margin-top:10px}
@media (max-width:640px){.word-list{columns:1}.hit-when{min-width:0}}

.changes table.weeks{width:100%;border-collapse:collapse;font-size:14px}
.changes table.weeks th{text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:6px 8px;border-bottom:1px solid var(--line)}
.changes table.weeks td{padding:7px 8px;border-bottom:1px solid var(--grid);vertical-align:top}
.changes table.weeks .num{text-align:right;font-variant-numeric:tabular-nums}
.changes table.weeks th.num{text-align:right}
.changes table.weeks .best{color:var(--ink-2);max-width:340px}

@media print{
  .changes .tools,.topbar{display:none!important}
  .changes{padding:0;max-width:none}
  .graph{border:none;padding:0}
}

/* The four numbers, as a line the doctor can read at a glance. */
.brief .reading{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin:0 0 12px}
.brief .reading .r{font-size:14.5px;color:var(--ink-2)}
.brief .reading .r b{font-size:19px;color:var(--ink);font-family:"IBM Plex Mono",monospace;margin-right:3px}

/* The first page of a new family (journeys/welcome): two invites side by side, then the links to send. */
.welcome{max-width:820px;display:grid;gap:14px}
.welcome h1{font-size:34px;line-height:1.15}
.welcome-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
@media (max-width:700px){.welcome-two{grid-template-columns:minmax(0,1fr)}}
.welcome-two .card{border-left-width:1px;border-radius:12px;padding:18px;gap:10px}
.welcome-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.welcome-links li{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.welcome-link{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.welcome-link .linkbox{flex:1 1 240px;max-width:none}
.welcome-two .form{border:0;padding:0;background:none;max-width:none}
.tags-field .choice{display:inline-flex;gap:6px;align-items:center;margin-right:16px;cursor:pointer;font-size:14px}

/* A visitor's pages (signed out): the landing's warm ground instead of the app's cool one. */
:root[data-front]{--bg:#FAF7F2;--surface-2:#F2EDE5;--line:#E4DDD1;--grid:#EDE7DD}