:root{
  --paper:#F0EFE7; --paper2:#E8E8DA; --sheet:#FCFBF4;
  --ink:#1F231D; --faint:#575D52; --line:#D1D3C4; --grid:#DDDFCF;
  --pine:#164832; --pine-deep:#0D2A1E; --pine-ink:#EFF3EC; --pine-text:#14523A;
  --pen:#C23A11; --pen-deep:#A33008; --tape:#F2CD4E; --tape-ink:#2A2408; --ok:#2E6B4F; --okbg:#E3EFE7;
  --shadow:0 20px 44px -24px rgba(23,28,20,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181B16; --paper2:#1D211A; --sheet:#242820;
    --ink:#E9EBE2; --faint:#A6AC9C; --line:#3A3F34; --grid:#262A22;
    --pine:#2C5F48; --pine-deep:#0E2B20; --pine-ink:#EAF2EC; --pine-text:#8CC6A8;
    --pen:#F26A3E; --pen-deep:#F08A5F; --tape:#D9BD4B; --tape-ink:#231E06; --ok:#7CBD97; --okbg:#1E3328;
    --shadow:0 20px 44px -22px rgba(0,0,0,.65);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#181B16; --paper2:#1D211A; --sheet:#242820;
  --ink:#E9EBE2; --faint:#A6AC9C; --line:#3A3F34; --grid:#262A22;
  --pine:#2C5F48; --pine-deep:#0E2B20; --pine-ink:#EAF2EC; --pine-text:#8CC6A8;
  --pen:#F26A3E; --pen-deep:#F08A5F; --tape:#D9BD4B; --tape-ink:#231E06; --ok:#7CBD97; --okbg:#1E3328;
  --shadow:0 20px 44px -22px rgba(0,0,0,.65);
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); margin:0; font:400 17px/1.6 Archivo, "Helvetica Neue", Arial, sans-serif}
.band{width:100%}
.band>.in{max-width:1080px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.band-alt{background:var(--paper2); background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:28px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h1,h2,h3{line-height:1.06; text-wrap:balance; margin:0}
h1{font-size:clamp(2rem,4.6vw,3rem); font-weight:830; font-stretch:122%; letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,2.6vw,1.7rem); font-weight:780; font-stretch:114%}
h3{font-size:1.1rem; font-weight:680; font-stretch:106%}
p{margin:0}
a{color:inherit}
.faint{color:var(--faint)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; font:620 1.02rem/1.1 Archivo, Arial, sans-serif; font-stretch:104%; text-decoration:none; background:var(--pine); color:var(--pine-ink); border:1.5px solid var(--pine); padding:12px 22px; border-radius:7px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.btn:hover{filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(16,40,28,.6)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; filter:none}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.big{min-height:56px; font-size:1.1rem; width:100%}
:is(.btn,a,summary,input,select,textarea,button,label):focus-visible{outline:3px solid var(--pen); outline-offset:2px; border-radius:4px}
.hl{background:var(--tape); color:var(--tape-ink); padding:.04em .18em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
/* header */
.top{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line)}
.top .in{display:flex; align-items:center; gap:16px; padding-block:12px; flex-wrap:wrap}
.wordmark{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.wordmark b{font:800 1.28rem/1 Archivo, Arial, sans-serif; font-stretch:122%; letter-spacing:.015em}
.cityline{color:var(--faint); font-size:.9rem; border-left:1.5px solid var(--line); padding-left:14px}
.top nav{margin-left:auto; display:flex; gap:4px 18px; align-items:center; flex-wrap:wrap; font-size:.97rem}
.top nav a{text-decoration:none; color:var(--faint); padding:6px 2px}
.top nav a:hover{color:var(--ink)}
@media (max-width:640px){ .hide-sm{display:none} .cityline{display:none} }
/* footer */
footer.band{background:var(--pine-deep); color:var(--pine-ink); font-size:.88rem; margin-top:56px}
footer .in{padding-block:28px 40px; display:flex; flex-direction:column; gap:10px}
footer a{color:var(--pine-ink)}
/* cards + forms */
.card{background:var(--sheet); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:clamp(20px,3vw,30px)}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label,.lbl{font-weight:620; font-size:.94rem}
.field .opt{color:var(--faint); font-weight:400}
.field input,.field select,.field textarea{font:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:6px; padding:12px; width:100%; min-height:48px}
.field textarea{min-height:88px; resize:vertical}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px}
.err{color:var(--pen-deep); font-weight:620; font-size:.95rem}
.okbox{background:var(--okbg); border:1px solid var(--ok); border-radius:8px; padding:14px 16px}
.kicker{color:var(--faint); max-width:46em}
/* ---------- Level Bids (shared by /bids, /post-a-job, /contractors, /job, /bid) ---------- */
.pen-note{font-family:Caveat,"Comic Sans MS",cursive; font-weight:600; color:var(--pen-deep); font-size:1.2rem; line-height:1.15}
.seal{display:inline-flex; align-items:center; gap:6px; background:var(--okbg); color:var(--ok); border:1.5px solid var(--ok); border-radius:999px; padding:3px 10px 3px 7px; font-size:.82rem; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.seal svg{width:16px; height:16px; flex:none}
.tag{display:inline-block; background:var(--tape); color:var(--tape-ink); font-weight:700; font-size:.78rem; padding:2px 8px; border-radius:999px; letter-spacing:.02em}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); background:var(--paper); border-radius:999px; padding:8px 14px 8px 10px; font-size:.95rem; cursor:pointer; user-select:none}
.chips label:has(input:checked){border-color:var(--pine); background:var(--okbg); color:var(--pine-text); font-weight:620}
.chips input{accent-color:var(--pine); width:16px; height:16px; margin:0}
.choice{position:relative; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:start; border:1.5px solid var(--line); border-radius:9px; padding:14px 16px; background:var(--paper); cursor:pointer}
.choice:has(input:checked){border-color:var(--pine); background:var(--okbg); box-shadow:inset 0 0 0 1px var(--pine)}
.choice input{margin:5px 0 0; accent-color:var(--pine); width:18px; height:18px}
.choice .ttl{font-weight:680; font-stretch:106%; font-size:1.02rem}
.choice .sub{grid-column:2; color:var(--faint); font-size:.92rem}
.agree{display:flex; gap:12px; align-items:flex-start; font-size:.95rem; cursor:pointer; line-height:1.5}
.agree input{width:20px; height:20px; margin-top:3px; accent-color:var(--pine); flex:none}
.drop{border:2px dashed var(--line); border-radius:10px; padding:24px 18px; text-align:center; background:var(--paper); cursor:pointer; transition:border-color .15s, background .15s; display:block}
.drop.over,.drop:hover{border-color:var(--pine); background:var(--okbg)}
.drop input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.drop b{display:block; font-size:1.02rem}
.drop span{color:var(--faint); font-size:.9rem}
.drop svg{width:36px; height:36px; color:var(--pine-text); margin-bottom:4px}
.filelist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.filelist li{display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:8px 12px; font-size:.93rem}
.filelist li .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filelist li .sz{color:var(--faint); white-space:nowrap}
.filelist li button{background:none; border:1px solid var(--line); border-radius:6px; padding:4px 10px; cursor:pointer; color:var(--ink); font:inherit; font-size:.85rem}
.progress{height:8px; background:var(--line); border-radius:999px; overflow:hidden; display:none}
.progress i{display:block; height:100%; width:0; background:var(--pine); transition:width .2s}
.steps{display:flex; gap:6px 22px; flex-wrap:wrap; color:var(--faint); font-size:.92rem; margin-top:6px}
.steps span b{color:var(--pine-text); font-stretch:112%; margin-right:6px}
.layout{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr); gap:28px; align-items:start; padding-block:22px 40px}
@media (max-width:860px){ .layout{grid-template-columns:1fr} .side{position:static !important} }
.side{position:sticky; top:84px; display:flex; flex-direction:column; gap:14px}
.side .card{padding:20px 22px}
.side h3{font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:700}
.promise{display:flex; flex-direction:column; gap:9px; font-size:.93rem}
.promise div{display:flex; gap:10px; align-items:flex-start}
.promise svg{flex:none; width:20px; height:20px; color:var(--pine-text); margin-top:2px}
.form{display:flex; flex-direction:column; gap:20px}
.fsec{display:flex; flex-direction:column; gap:16px}
.fsec h2{display:flex; align-items:center; gap:12px}
.fsec h2 .num{flex:none; width:32px; height:32px; border-radius:50%; background:var(--pine); color:var(--pine-ink); display:inline-flex; align-items:center; justify-content:center; font-size:1rem; font-stretch:110%}
.fine{color:var(--faint); font-size:.88rem}
.okmsg{color:var(--ok); font-weight:640}
/* bid cards */
.bidcard{background:var(--sheet); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:clamp(18px,2.6vw,26px); display:flex; flex-direction:column; gap:14px; position:relative}
.bidcard.won{border:2px solid var(--pine)}
.bidcard.lost{opacity:.72}
.bidcard .bhead{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap}
.bidcard .bhead .who{display:flex; flex-direction:column; gap:6px; min-width:0}
.bidcard .bhead .who b{font-size:1.15rem; font-stretch:110%; font-weight:720}
.bidcard .bhead .who span{color:var(--faint); font-size:.9rem}
.bidcard .total{text-align:right; font-variant-numeric:tabular-nums}
.bidcard .total b{display:block; font-size:1.7rem; font-weight:810; font-stretch:116%; line-height:1.05}
.bidcard .total small{color:var(--faint); font-size:.85rem}
.bidcard table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.95rem}
.bidcard td{padding:6px 2px; border-bottom:1px dashed var(--line); vertical-align:top}
.bidcard td:last-child{text-align:right; white-space:nowrap}
.bidcard tr.sum td{border-bottom:none; font-weight:680; padding-top:8px}
.bidcard dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:.93rem}
.bidcard dt{color:var(--faint); white-space:nowrap}
.bidcard dd{margin:0}
.bidcard .acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.bidcard .stampnote{position:absolute; right:14px; top:-14px; transform:rotate(-4deg); border:2.5px solid var(--pen); color:var(--pen); border-radius:7px; font-stretch:118%; font-weight:780; font-size:.95rem; letter-spacing:.04em; padding:5px 11px; background:var(--sheet)}
.bidcard .stampnote.ok{border-color:var(--pine); color:var(--pine-text)}
.verif{display:flex; flex-wrap:wrap; gap:6px; font-size:.82rem; color:var(--faint)}
.verif span{border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.verif span.y{color:var(--ok); border-color:var(--ok)}
.status{display:flex; gap:14px; align-items:flex-start; background:var(--sheet); border:1px solid var(--line); border-left:5px solid var(--pine); border-radius:8px; padding:16px 18px}
.status.warn{border-left-color:var(--pen)}
.status b{display:block; font-size:1.08rem}
.status p{color:var(--faint); font-size:.95rem; margin-top:2px}
.btn.sm{min-height:40px; padding:8px 14px; font-size:.92rem}
.btn.pen{background:var(--pen); border-color:var(--pen); color:#fff}
.hidden{display:none !important}
/* line items editor */
.lines-ed{display:flex; flex-direction:column; gap:8px}
.lines-ed .row{display:grid; grid-template-columns:1fr 150px 40px; gap:8px; align-items:center}
.lines-ed input{font:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:6px; padding:10px 12px; min-height:46px; width:100%}
.lines-ed input.amt{text-align:right; font-variant-numeric:tabular-nums}
.lines-ed button.x{background:none; border:1px solid var(--line); border-radius:6px; min-height:46px; cursor:pointer; color:var(--faint); font:inherit}
.lines-ed .tot{display:grid; grid-template-columns:1fr 150px 40px; gap:8px; font-variant-numeric:tabular-nums; font-size:.98rem}
.lines-ed .tot span:nth-child(2){text-align:right; padding-right:12px}
.lines-ed .tot.grand{font-weight:760; font-size:1.12rem; border-top:2px solid var(--ink); padding-top:8px}
@media (max-width:520px){ .lines-ed .row,.lines-ed .tot{grid-template-columns:1fr 120px 36px} }
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.photos a{display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); aspect-ratio:4/3; position:relative}
.photos img{width:100%; height:100%; object-fit:cover; display:block}
.photos a span{position:absolute; inset:auto 0 0 0; background:rgba(31,35,29,.78); color:#fff; font-size:.75rem; padding:4px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.photos a.doc{display:flex; align-items:center; justify-content:center; color:var(--pine-text); font-weight:640; font-size:.9rem; text-decoration:none; padding:12px; text-align:center}