/* Layout: a tablet at the door. One dark bar on top (who's holding it, the two tabs, crisis), one working column below. The private hand-off replaces the whole screen. */
:root{
  --bg:#f8f2e4; --surface:#ffffff; --ink:#2b1f14; --muted:#75654f; --line:#e3d9c4; --soft:#f2eadb;
  --bar:#2b1f14; --bar-ink:#e9dcc2; --lamp:#f2c96b;
  --accent:#b85a1f; --accent-ink:#ffffff; --accent-text:#9a4815; --field-line:#8f7d62;
  --good:#1f6b4a; --good-bg:#e3efe8; --wait:#8a5a10; --wait-bg:#fbefd6; --no:#6d5a48; --no-bg:#eee5d6;
  --private:#5a3f86; --private-bg:#f3eefa; --private-ink:#2a1d40;
  --crisis:#a83a63; --crisis-ink:#ffffff;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#191310; --surface:#251c16; --ink:#f1e6d2; --muted:#b5a48a; --line:#3b2f25; --soft:#2e241c;
  --bar:#0f0b08; --bar-ink:#d9c9a8; --lamp:#f2c96b;
  --accent:#e08a46; --accent-ink:#1a120c; --accent-text:#e08a46; --field-line:#7d6b55;
  --good:#7fcaa3; --good-bg:#1f3529; --wait:#f0c070; --wait-bg:#3a2d16; --no:#cdbba3; --no-bg:#33291f;
  --private:#c4aef0; --private-bg:#231c33; --private-ink:#ece4fb;
  --crisis:#f08aa9; --crisis-ink:#1a0c12; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#191310; --surface:#251c16; --ink:#f1e6d2; --muted:#b5a48a; --line:#3b2f25; --soft:#2e241c;
  --bar:#0f0b08; --bar-ink:#d9c9a8; --lamp:#f2c96b;
  --accent:#e08a46; --accent-ink:#1a120c; --accent-text:#e08a46; --field-line:#7d6b55;
  --good:#7fcaa3; --good-bg:#1f3529; --wait:#f0c070; --wait-bg:#3a2d16; --no:#cdbba3; --no-bg:#33291f;
  --private:#c4aef0; --private-bg:#231c33; --private-ink:#ece4fb;
  --crisis:#f08aa9; --crisis-ink:#1a0c12; color-scheme:dark}

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.45}
*{box-sizing:border-box}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;line-height:1.15}
h1{font-size:clamp(26px,4vw,34px)} h2{font-size:22px} h3{font-size:18px}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:14px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}

.proto{background:var(--soft);color:var(--muted);font-size:13px;text-align:center;padding-block:6px;padding-inline:16px}

.bar{background:var(--bar);color:var(--bar-ink);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:10px;padding-inline:16px}
.brand{font-family:var(--display);font-weight:700;font-size:20px;color:var(--lamp)}
.site{font-size:13px}
.tabs{display:flex;gap:6px;flex:1 1 auto}
.tab{min-height:44px;padding:8px 14px;border:0;border-radius:10px;background:transparent;color:var(--bar-ink);font-weight:600}
.tab[aria-selected="true"]{background:#4a3a2a;color:#fff}
.who{font-size:13px}
.clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--lamp);font-size:14px}
.crisis-btn{min-height:44px;padding:8px 16px;border:0;border-radius:10px;background:var(--crisis);color:var(--crisis-ink);font-weight:700}

main{max-width:1100px;margin:0 auto;padding-block:22px 48px;padding-inline:16px;display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stack{display:flex;flex-direction:column;gap:12px}
.grid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
@media (min-width:821px){.grid2>aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}}

.btn{min-height:48px;padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:700}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.quiet{background:transparent}
.btn.big{min-height:60px;font-size:19px;padding:12px 26px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.chip{min-height:42px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:15px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.say{border-left:4px solid var(--lamp);background:var(--soft);padding:14px 16px;border-radius:0 12px 12px 0;font-family:var(--display);font-size:20px;line-height:1.4}
.say small{display:block;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

label.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{min-height:50px;padding:10px 12px;border:1px solid var(--field-line);border-radius:10px;background:var(--surface);font-size:19px;color:var(--ink)}

/* steps */
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.dot{width:24px;height:24px;border-radius:12px;border:2px solid var(--line);margin-top:2px}
.dot{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;line-height:1}
.dot.done::after{content:'\2713';color:var(--bg)}
.dot.not_today::after{content:'\2026';color:var(--wait)}
.dot.declined::after{content:'\2013';color:var(--no)}
.dot.stalled{background:var(--wait-bg);border-color:var(--wait)}
.dot.stalled::after{content:'!';color:var(--wait)}
.sbtn[aria-pressed="true"].s-stalled{background:var(--wait-bg);border-color:var(--wait);color:var(--wait)}
.dot.private::after{content:'\2713';color:var(--private-bg)}
.sbtn[aria-pressed="true"]::before{content:'\2713\00a0'}
.dot.done{background:var(--good);border-color:var(--good)}
.dot.not_today{background:var(--wait-bg);border-color:var(--wait)}
.dot.declined{background:var(--no-bg);border-color:var(--no)}
.dot.private{background:var(--private);border-color:var(--private)}
.step .q{font-weight:600}
.step .why{font-size:13px;color:var(--muted)}
.status{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sbtn{min-height:44px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:15px}
.sbtn[aria-pressed="true"].s-done{background:var(--good);border-color:var(--good);color:var(--bg)}
.sbtn[aria-pressed="true"].s-not_today{background:var(--wait-bg);border-color:var(--wait);color:var(--wait)}
.sbtn[aria-pressed="true"].s-declined{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.note{font-size:14px;margin-top:6px;color:var(--muted)}
.note.wait{color:var(--wait)} .note.no{color:var(--no)}
.extra{margin-top:10px;display:flex;flex-direction:column;gap:10px}

.private-row{background:var(--private-bg);border-radius:12px;padding:14px;border:0;margin-top:4px}
.private-row .q{color:var(--private-ink)}
.lock{display:inline-flex;align-items:center;gap:6px;color:var(--private);font-weight:700;font-size:14px}

.spots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.spot{min-height:76px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:2px}
.spot strong{font-size:16px}
.spot span{font-size:13px;color:var(--muted)}
.spot[aria-pressed="true"]{border:2px solid var(--accent);background:var(--soft)}
.caution{background:var(--wait-bg);color:var(--wait);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}
.okay{background:var(--good-bg);color:var(--good);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}

.pet{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px dashed var(--line);border-radius:12px}

.side h3{margin-bottom:6px}
.tally{display:flex;gap:18px;flex-wrap:wrap}
.tally div{display:flex;flex-direction:column}
.tally b{font-family:var(--display);font-size:30px;font-variant-numeric:tabular-nums;line-height:1}
.tally span{font-size:13px;color:var(--muted)}
ul.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

/* beds board */
.board{width:100%;border-collapse:collapse;font-size:15px}
.board th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.board td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.board td.num{font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--muted);margin-right:4px}
.tag.open{background:var(--good-bg);color:var(--good)}
.masked{color:var(--muted);font-style:italic}
.scroll{overflow-x:auto}

/* private hand-off: the whole screen belongs to the person */
.private-screen{min-height:100vh;min-height:100dvh;background:var(--private-bg);color:var(--private-ink);padding-block:28px 48px;padding-inline:16px}
.private-screen .inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.private-screen h1{color:var(--private-ink)}
.private-screen .btn.primary{background:var(--private);border-color:var(--private);color:var(--private-bg)}
.private-screen .chip[aria-pressed="true"]{background:var(--private);border-color:var(--private);color:var(--private-bg)}
.pin{display:flex;gap:12px}
.pin span{width:52px;height:60px;border-radius:12px;border:2px solid var(--private);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}
.keys{display:grid;grid-template-columns:repeat(3,72px);gap:10px}
.keys button{height:60px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:22px;font-weight:700}

.overlay{position:fixed;inset:0;background:rgba(10,6,4,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.overlay .card{max-width:480px;width:100%}
.phone{font-size:28px;font-family:var(--display);font-weight:700;user-select:all}

@media (prefers-reduced-motion:no-preference){.fade{animation:fade .25s ease-out}@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}}
  .map-spot{fill:var(--ink);font-weight:700;font-family:var(--body)} .map-place{fill:var(--muted);font-family:var(--body)} .map-safety{fill:var(--crisis);font-weight:700;font-family:var(--body)}

/* the office: lists of things waiting on the director or operator */
textarea{min-height:90px;font-size:17px;resize:vertical;width:100%}
select{font-size:17px}
.queue{display:flex;flex-direction:column;gap:0}
.item{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.item .head b{font-size:17px}
.empty{color:var(--muted);font-style:italic}
.count{display:inline-block;min-width:24px;padding:0 7px;border-radius:999px;background:var(--lamp);color:var(--bar);font-size:13px;font-weight:800;text-align:center;margin-left:6px}
.tag.late,.tag.danger{background:var(--wait-bg);color:var(--wait)}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
legend{font-size:14px;font-weight:700;color:var(--muted);margin-bottom:4px;padding:0}
.warn-bar{background:var(--wait-bg);color:var(--wait);font-weight:700;text-align:center;padding:10px 16px}
@media (max-width:600px){.tabs{flex-wrap:wrap}.tab{padding:8px 10px}}
/* the site library: the manual and protocols, and the links to them beside the work */
.refs{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;border-top:1px dashed var(--line);padding-top:10px;margin-top:2px}
.refs .chip{min-height:36px;padding:6px 12px;font-size:14px;text-align:left}
.refs b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.crisis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.crisis .card{padding:14px}
.libsec{border-top:1px solid var(--line);padding:10px 0}
.libsec:first-of-type{border-top:0}
.libsec>summary{cursor:pointer;font-weight:700;font-size:17px;min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.libsec[open]>summary{color:var(--accent-text)}
.doc-body{max-width:72ch;line-height:1.55}
.doc-body h3{font-size:16px;margin:16px 0 4px}
.doc-body p,.doc-body li{margin:6px 0}
.doc-body ol,.doc-body ul{padding-left:22px}
.draftnote{background:var(--wait-bg);color:var(--wait);border-radius:10px;padding:10px 14px;font-weight:600}
input[type=search]{width:100%}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}