:root{
  --paper:#F5F4EF; --surface:#FFFFFF; --ink:#15171A; --muted:#5C6166; --rule:#E0DDD4;
  --accent:#1E6E4E; --accent-ink:#FFFFFF; --accent-soft:#E3EEE9;
  --good:#1E7A46; --good-soft:#E4F2E9; --warn:#9A5F00; --warn-soft:#FBF0DC;
  --bad:#B3261E; --bad-soft:#FBE7E5; --thin:#FFF3D6; --thin-ink:#7A4B00;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --side:#0B120E; --side-ink:#E6EEE9; --side-muted:#8FA39A; --side-active:#1E6E4E; --mint:#6FCF9B;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#111315; --surface:#1A1D20; --ink:#ECEDEE; --muted:#9BA1A6; --rule:#2C3035;
    --accent:#5FB597; --accent-ink:#0C1512; --accent-soft:#16261F;
    --good:#5CC48A; --good-soft:#15261C; --warn:#E0A64A; --warn-soft:#2A2112;
    --bad:#F07A70; --bad-soft:#2E1715; --thin:#2B2310; --thin-ink:#F1C878;
  }
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
::selection{background:var(--accent); color:var(--accent-ink)}
.wrap{max-width:78rem; margin:0 auto; padding-inline:clamp(16px,3vw,32px)}

.shell{display:grid; grid-template-columns:15rem minmax(0,1fr); min-height:100vh;
       background:linear-gradient(to right, var(--side) 15rem, var(--paper) 15rem)}
.side{background:var(--side); color:var(--side-ink); padding:20px 14px; display:flex; flex-direction:column; gap:6px;
      position:sticky; top:0; height:100vh; overflow-y:auto}
.brand{font-weight:700; letter-spacing:-.01em; font-size:1.1rem; color:#fff; text-decoration:none; padding:0 10px}
.company{color:var(--side-muted); font-size:.82rem; padding:0 10px 10px; border-bottom:1px solid #1E2A24}
.side nav{display:flex; flex-direction:column; gap:2px; margin-top:8px}
.side nav a{display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:6px;
            text-decoration:none; color:var(--side-ink); font-weight:500; font-size:.92rem}
.side nav a:hover{background:#15201A}
.side nav a[aria-current="page"]{background:var(--side-active); color:#fff}
.side nav a.sub-link{padding-left:22px; font-size:.86rem; color:var(--side-muted)}
.side nav a.sub-link[aria-current="page"]{color:#fff}
.side .group{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--side-muted); padding:12px 10px 2px}
.side .count{background:var(--mint); color:var(--side); border-radius:999px; font-size:.72rem; font-weight:700; padding:1px 7px; margin-left:8px}
.who{display:flex; gap:10px; align-items:center; min-height:32px}
.page{min-width:0}
header.top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 16px; padding:14px clamp(16px,3vw,32px);
           border-bottom:1px solid var(--rule); background:var(--surface); font-weight:600}
header.top .muted{color:var(--muted); font-weight:500}
.asof{font-size:.8rem; color:var(--muted); font-weight:500}
.auth-box{display:flex; justify-content:center; padding-block:32px}
.auth-box > *{margin-inline:auto}
@media (max-width:900px){
  .shell{grid-template-columns:1fr; background:var(--paper)}
  .side{position:static; height:auto; padding:14px}
  .side nav{flex-direction:row; flex-wrap:wrap; gap:4px}
  .side .group{display:none}
  .side nav a.sub-link{padding-left:10px}
  .company{border:0; padding-bottom:0}
}

main{padding-block:28px 56px; display:flex; flex-direction:column; gap:24px}
h1{font-size:1.6rem; letter-spacing:-.02em; margin:0; line-height:1.2}
h2{font-size:1.1rem; margin:0}
.lede{color:var(--muted); max-width:62ch; margin:6px 0 0}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:20px; overflow-x:auto}
.row{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:12px}
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:14px 16px}
.stat b{display:block; font-size:1.6rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{color:var(--muted); font-size:.82rem}

.tablewrap{overflow-x:auto; border:1px solid var(--rule); border-radius:10px; background:var(--surface)}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{padding:10px 12px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top}
thead th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
         font-weight:600; background:var(--paper); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right}
td.nowrap{white-space:nowrap}
.grid td.num{padding:0}
.grid td.num a{display:block; padding:10px 12px; text-decoration:none; color:var(--ink); font-weight:600}
.grid td.num a:hover{background:var(--accent-soft)}
.grid td.thin{background:var(--thin)}
.grid td.thin a{color:var(--thin-ink)}
.grid td.thin a::after{content:" thin"; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; opacity:.8}
.grid th[scope=row]{font-weight:600; white-space:nowrap}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--muted)}
.swatch{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px; border:1px solid var(--rule)}

label{display:block; font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
select,input[type=file]{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:8px 10px}
input[type=text],input[type=email],input[type=tel],textarea{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:8px 10px; width:100%}
textarea{min-height:6rem; resize:vertical}
select{max-width:100%}
select:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn{display:inline-flex; align-items:center; gap:6px; font:inherit; font-weight:600; border-radius:6px; padding:9px 14px; cursor:pointer; text-decoration:none; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.check{display:flex; gap:8px; align-items:center; font-size:.9rem; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:500}

.chip{display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap}
.chip.good{background:var(--good-soft); color:var(--good)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.bad{background:var(--bad-soft); color:var(--bad)}
.chip.muted{background:var(--paper); color:var(--muted); border:1px solid var(--rule)}
.sub{display:block; color:var(--muted); font-size:.8rem}
.mono{font-family:var(--mono); font-size:.85rem}
.also{color:var(--accent); font-size:.8rem; font-weight:600}

.limits{border-left:3px solid var(--rule); padding:4px 0 4px 16px; color:var(--muted); font-size:.85rem}
.limits h2{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.limits ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; max-width:80ch}
.notice{border-radius:8px; padding:12px 14px; font-size:.9rem}
.notice.bad{background:var(--bad-soft); color:var(--bad)}
.notice.good{background:var(--good-soft); color:var(--good)}
.htmx-request .tablewrap{opacity:.55; transition:opacity .2s}

.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:16px}
.plan{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:22px; display:flex; flex-direction:column; gap:12px}
.plan.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.plan.off{opacity:.6}
.plan .price{font-size:2rem; font-weight:700; letter-spacing:-.02em}
.plan .price span{font-size:.9rem; font-weight:500; color:var(--muted)}
.plan ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:.92rem}
.plan form{margin-top:auto}
.plan .btn{width:100%; justify-content:center}

/* dispatcher: properties and work orders */
.uploads{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:16px}
.uploads .card{display:flex; flex-direction:column; gap:12px}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:16px; align-items:start}
.form-grid .wide{grid-column:1 / -1}
.board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(15rem,1fr); gap:12px; overflow-x:auto; padding-bottom:8px}
.col{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; min-height:8rem}
.col h2{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between}
.wo{display:block; border:1px solid var(--rule); border-radius:8px; padding:10px; text-decoration:none; color:var(--ink); background:var(--paper)}
.wo:hover{border-color:var(--accent)}
.detail{display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:16px; align-items:start}
.facts{display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:12px 0 0}
.facts dt{color:var(--muted); font-size:.85rem}
.facts dd{margin:0}
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.timeline li{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:10px 12px}

/* public pages: owners and tenants, no sign-in */
header.pub{background:var(--side); padding:16px clamp(16px,3vw,32px); display:flex; align-items:baseline; gap:12px}
header.pub .brand{padding:0}
header.pub .by{color:var(--side-muted); font-size:.85rem}
.wrap.narrow{max-width:44rem}
.honey{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* work order page */
h3{font-size:.95rem; margin:0}
.btn.small{padding:5px 10px; font-size:.82rem}
.btn.danger{background:var(--bad); border-color:var(--bad); color:#fff}
.wo-layout{display:grid; grid-template-columns:minmax(0,1fr) 22rem; gap:20px; align-items:start}
.wo-main{display:flex; flex-direction:column; gap:20px; min-width:0}
.wo-panel{display:flex; flex-direction:column; gap:12px}
.wo-panel > h2{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.card.act{display:flex; flex-direction:column; gap:10px; padding:16px}
.card.act.urgent{border-color:var(--bad)}
.check.pick{align-items:flex-start; color:var(--ink); font-size:.9rem}
.check.pick input{margin-top:4px}
.warn-text{color:var(--warn)}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(7rem,1fr)); gap:8px; margin-top:10px}
.thumbs img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--rule); background:var(--paper)}
.quotes{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:12px; margin-top:10px}
.quote{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:2px}
.quote.best{border-color:var(--good); box-shadow:0 0 0 1px var(--good)}
.quote .amount{font-weight:700; font-variant-numeric:tabular-nums}
.assign{padding:12px 0; border-top:1px solid var(--rule); align-items:flex-end}
input[type=date]{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:8px 10px; width:100%}
@media (max-width:1100px){ .wo-layout{grid-template-columns:minmax(0,1fr)} }

.letter{white-space:pre-wrap; font:inherit; margin:0}
ul.plain{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px}
.card.quote.best{display:flex; flex-direction:column}
input[type=file]{max-width:100%}
.facts dd,.timeline li,.quote,.card p{overflow-wrap:anywhere}

/* vendors and properties */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.tabs a{padding:8px 14px; text-decoration:none; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs a[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent)}
.filters{gap:12px}
.grid .onlist{display:block; font-size:.68rem; font-weight:500; color:var(--muted); white-space:nowrap}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:12px}
.cards .card{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink)}
.cards a.card:hover{border-color:var(--accent)}
.kb dt{font-weight:600; margin-top:10px}
.kb dd{margin:2px 0 0; color:var(--muted)}

/* command center */
a.stat{text-decoration:none; color:var(--ink)}
a.stat:hover{border-color:var(--accent)}
ul.needs{list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column}
ul.needs li{padding:10px 0; border-top:1px solid var(--rule)}
ul.needs li:first-child{border-top:0}