/* HomeCircle member app. One phone-width column, dark evening mood, mustard only for the next thing to do.
   System fonts only: nothing is loaded from outside. No handwritten faces (founder, 14 Nov 2026). */
:root{
  --bg:#15100c; --surface:#211912; --raised:#2c2219; --line:#3d3024;
  --text:#f4ebdc; --muted:#b3a593; --accent:#deaf5f; --accent-ink:#2a1a0c;
  --good:#8fc49a; --rest:#c98f7a;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#0c0907;color:var(--text);font-family:var(--body);font-size:15px;line-height:1.5;display:flex;flex-direction:column;align-items:center}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.demo{width:100%;max-width:430px;display:flex;gap:8px;align-items:center;padding:8px 16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.demo label{font-weight:600}
.demo select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit}
.demo .tag{margin-left:auto;border:1px dashed var(--line);border-radius:99px;padding:2px 10px}
.shell{flex:1;min-height:0;width:100%;max-width:430px;background:var(--bg);display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line)}
header.top{display:flex;align-items:center;gap:10px;padding:14px 18px 10px}
.logo{width:44px;height:44px;flex:none;display:block}
.top .who{margin-left:auto;font-size:13px;color:var(--muted)}
.banner{margin:0 18px 6px;padding:10px 12px;border:1px solid rgba(201,143,122,.5);border-radius:10px;color:var(--rest);font-size:14px}
main{flex:1;min-height:0;overflow-y:auto;padding:6px 18px 28px;display:flex;flex-direction:column;gap:16px}
h1{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;margin:8px 0 0;text-wrap:balance}
p{margin:0}
.sub{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.hero{background:radial-gradient(120% 90% at 85% 0%,rgba(222,175,95,.28),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(107,52,25,.55),transparent 65%),var(--raised);border-color:#4a3a29;padding:20px}
.hero h2{font-family:var(--display);font-weight:600;font-size:24px;margin:0;line-height:1.2}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;margin:0}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.split{justify-content:space-between}
.row.top{flex-wrap:nowrap;align-items:flex-start}
.btn{border:1px solid var(--line);background:transparent;border-radius:99px;padding:10px 18px;font-weight:600;font-size:14px;text-decoration:none;color:var(--text);display:inline-block}
.btn.primary,.btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:7px 14px;font-size:13px}
.btn.fixed{flex:none}
.btn.quiet{border:0;padding:4px 0;color:var(--muted);font-weight:500;text-decoration:underline}
.pill{font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.good{color:var(--good);border-color:rgba(143,196,154,.4)}
.pill.rest{color:var(--rest);border-color:rgba(201,143,122,.4)}
.pill.now{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.dots{display:flex;gap:6px}
.dots i{flex:1;height:6px;border-radius:99px;background:var(--line)}
.dots i.done{background:var(--accent)} .dots i.next{background:rgba(222,175,95,.45)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding-bottom:18px;position:relative}
.steps li:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.steps .n{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted);background:var(--bg);font-variant-numeric:tabular-nums}
.steps li.done .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.steps li.now .n{border-color:var(--accent);color:var(--accent)}
.steps .t{font-weight:600} .steps .d{color:var(--muted);font-size:14px}
.steps .body{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.people li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.people li:last-child{border-bottom:0}
.av{width:34px;height:34px;border-radius:50%;background:var(--raised);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--accent);flex:none}
.people .nm{font-weight:600;flex:1}
.plan .what{font-weight:600;font-size:16px;overflow-wrap:anywhere}
.plan .meta{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
form{display:flex;flex-direction:column;gap:10px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:600}
input[type=text],textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;font-size:16px;width:100%}
textarea{min-height:70px;resize:vertical}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.note{font-size:13px;color:var(--muted)}
nav.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 11px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none}
nav.tabs a[aria-current=page]{color:var(--accent)}
nav.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.btn{transition:background-color .15s,border-color .15s}}