:root{--bg:#f4f4f1;--panel:#fff;--ink:#1c1c1c;--muted:#6b6b6b;--line:#d9d9d4;--accent:#8b2f1f;--accent-ink:#fff;--soft:#f7efe9;--ok:#2f7d4f;--warn:#b7791f;--err:#b42318;--link:#0b4a8b}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--link)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 11px}
button:hover{border-color:#999}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.primary:hover{filter:brightness(1.08)}
button.small{padding:3px 8px;font-size:12.5px}
button.link{border:none;background:none;color:var(--link);padding:0;text-decoration:underline}
button:disabled{opacity:.5;cursor:default}
input[type=text],input[type=search],input[type=password],select,textarea{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:#fff;width:100%}
textarea{min-height:80px;resize:vertical}
header.top{background:#fff;border-top:4px solid var(--accent);border-bottom:1px solid var(--line);padding:10px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:5}
header.top h1{font-size:17px;margin:0;letter-spacing:.2px}
header.top h1 span{color:var(--muted);font-weight:normal;font-size:13px;margin-left:8px}
header.top .grow{flex:1}
header.top select{width:auto;max-width:320px}
.saved{font-size:12px;color:var(--muted)}
main{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;padding:18px;max-width:1440px;margin:0 auto}
@media (max-width:1000px){main{grid-template-columns:1fr}aside{order:-1}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.card h2{font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.card h2 .step{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;align-items:center;justify-content:center}
.card h3{font-size:13.5px;margin:14px 0 6px;color:#333}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row>*{flex:0 0 auto}
.row .grow{flex:1 1 200px}
.hint{color:var(--muted);font-size:12.5px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.status{font-size:12.5px;padding:2px 8px;border-radius:10px;background:#eee;display:inline-block}
.status.ok{background:#e3f3e8;color:var(--ok)}.status.err{background:#fde8e6;color:var(--err)}.status.busy{background:#fff4d6;color:var(--warn)}
table.kv{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0}
table.kv th{text-align:left;font-weight:600;width:34%;padding:3px 8px 3px 0;vertical-align:top;color:#333}
table.kv td{padding:3px 0;vertical-align:top}
table.grid{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0}
table.grid th,table.grid td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
table.grid th{font-weight:600;background:#fafaf8}
.item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.item:last-child{border-bottom:none}
.item input[type=checkbox]{margin-top:4px}
.item .body{flex:1;min-width:0}
.item .title{font-weight:600}
.item .links a{margin-right:10px;font-size:12.5px}
.item img.thumb{width:80px;height:80px;object-fit:cover;border:1px solid var(--line);border-radius:4px}
.badge{display:inline-block;font-size:11.5px;background:#eee;border-radius:4px;padding:1px 6px;margin-right:4px;color:#333;vertical-align:middle}
.badge.red{background:#fde8e6;color:var(--err)}.badge.blue{background:#e3ecf8;color:#1d4ed8}.badge.green{background:#e3f3e8;color:var(--ok)}.badge.amber{background:#fff4d6;color:var(--warn)}
.candidates button{display:block;width:100%;text-align:left;margin:4px 0}
#map{height:320px;border-radius:8px;border:1px solid var(--line);background:#e9e9e6}
aside .card{position:sticky;top:64px}
.sources tr.src td{padding:8px 6px}
/* Every group of sources is its own table; fixed columns keep the buttons lined up from one group to the next. */
.sources table.grid{table-layout:fixed;width:100%}
.sources tr.src td:nth-child(2){width:92px}.sources tr.src td:nth-child(3){width:268px}
.sources .name{font-weight:600}
.sources .how{color:var(--muted);font-size:12.5px;margin-top:2px}
.sources input.srcnote{width:100%;margin-top:6px;padding:3px 6px;font-size:12.5px}
.sources select{width:auto;font-size:12.5px;padding:3px 6px}
.paste{border:2px dashed #b9b9b3;border-radius:10px;padding:16px;text-align:center;background:#fbfbf9;margin:8px 0}
.paste textarea{width:100%;min-height:54px;border:none;background:transparent;text-align:center;resize:none}
.paste:focus-within{border-color:var(--accent);background:var(--soft)}
.bookmarklet{display:inline-block;background:var(--soft);border:1px solid #e0c8bd;padding:6px 12px;border-radius:6px;color:var(--accent);font-weight:600;text-decoration:none;cursor:grab}
.records .rec{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;background:#fcfcfb}
.records .rec h4{margin:0;font-size:14px;display:inline}
.records details.rec>summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none;color:var(--ink)}
.records details.rec>summary::-webkit-details-marker{display:none}
.records details.rec>summary::before{content:'▸';color:var(--muted);font-size:12px}
.records details.rec[open]>summary::before{content:'▾'}
.records details.rec[open]>summary{margin-bottom:4px}
details.section>summary{list-style:none;display:flex;align-items:center;gap:6px;margin-top:14px}
details.section>summary::-webkit-details-marker{display:none}
details.section>summary::before{content:'▾';color:var(--muted);font-size:12px}
details.section:not([open])>summary::before{content:'▸'}
details.section>summary h3{margin:0}
.records .rec .fields{font-size:12.5px;color:#333;margin:4px 0}
details summary{cursor:pointer;color:var(--link);font-size:13px}
dialog{border:none;border-radius:12px;padding:0;width:min(760px,95vw);max-height:92vh;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog .dhead{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
dialog .dhead h3{margin:0;font-size:16px;flex:1}
dialog .dbody{padding:14px 18px;overflow:auto;max-height:calc(92vh - 130px)}
dialog .dfoot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.field{margin-bottom:10px}
.field label{display:block;font-size:12.5px;color:#444;margin-bottom:3px}
table.fields{width:100%;border-collapse:collapse;font-size:13px}
table.fields td{padding:2px 4px 2px 0}
table.fields input{padding:4px 6px}
table.fields td:first-child{width:36%}
.photos{display:flex;flex-wrap:wrap;gap:10px}
.photos figure{margin:0;width:150px}
.photos img{width:150px;height:110px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.photos input{font-size:12px;margin-top:3px}
#preview{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:9px 16px;border-radius:8px;opacity:0;transition:.25s;pointer-events:none;z-index:50;font-size:13.5px}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--err)}#toast.ok{background:var(--ok)}
/* --- brand and the landing page --- */
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
.brand img{width:30px;height:30px;border-radius:6px;flex:none}
.brand strong{display:block;font-size:17px;color:var(--accent);letter-spacing:.2px;line-height:1.15}
.brand strong em{font-style:normal;font-weight:500;color:var(--ink);margin-left:6px}
header.top.admin .brand strong em{color:#e6ddd3}
.brand small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.brand small:empty{display:none}
.brand.big img{width:44px;height:44px}
.brand.big strong{font-size:22px}
body.landing header.top,body.landing main{display:none}
#landing[hidden]{display:none}
#landing{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,#ece6df,var(--bg) 60%)}
.landing-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:12px;padding:26px 30px 22px;width:min(460px,100%);box-shadow:0 12px 40px rgba(60,40,30,.10)}
.landing-card .lede{color:#444;margin:14px 0 18px;font-size:14.5px}
.landing-card .field{margin-top:8px}
/* --- administration page: same bones, its own colour so nobody mistakes it for the research --- */
header.top.admin{background:#2e2a26;border-bottom-color:#2e2a26;color:#fff}
header.top.admin .brand strong{color:#fff}
header.top.admin .brand small{color:#c9bfb4}
header.top.admin .button{background:#fff;color:var(--accent);text-decoration:none;padding:5px 10px;border-radius:6px;border:1px solid var(--line)}
header.top.admin #whoami{color:#e6ddd3}
header.top.admin button,header.top.admin select{color:var(--ink)}
.envpill{background:#b7791f;color:#fff;font-weight:700;font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:999px;text-transform:uppercase}
.card h2 .grow{flex:1}
.card h2 label.small{font-weight:normal}
body.adminpage{background:#efeae4}
main.admin{grid-template-columns:200px minmax(0,1fr)}
.adminnav{display:flex;flex-direction:column;gap:4px;position:sticky;top:64px;align-self:start}
.adminnav button{text-align:left;padding:9px 12px;border-radius:8px;border:1px solid transparent;background:transparent;font-weight:600;color:#3a3530}
.adminnav button:hover{background:#fff;border-color:var(--line)}
.adminnav button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:900px){main.admin{grid-template-columns:1fr}.adminnav{flex-direction:row;flex-wrap:wrap;position:static}}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:700px){.settings-grid{grid-template-columns:1fr}}
.kbd{font-family:Menlo,Consolas,monospace;background:#eee;border-radius:3px;padding:0 4px;font-size:12px}
@media print{header.top,aside,.rail,.strip,.card:not(#reportCard),#reportCard>*:not(.cardbody),#reportCard .cardbody>*:not(#preview){display:none!important}#reportCard .cardbody{display:block!important}main{display:block;padding:0}#preview{height:auto;border:none}}

/* --- server-app additions --- */
.grouphead{font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;color:#8b2f1f;margin:14px 0 4px;font-weight:700}
.notice{background:#fff6e5;border:1px solid #e0b64c;border-radius:6px;padding:8px 10px;margin:8px 0}
.agebox{background:#f7f5f0;border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:10px 0}
.crit{border-top:1px solid var(--line);padding:8px 0}
.critline{display:flex;gap:12px;align-items:flex-start}
.critlabel{flex:1;min-width:0}
.critctl{flex:0 0 auto;max-width:340px}
.critctl select,.critctl input{width:210px}
.critctl .seg{flex-wrap:wrap}
.critnote{width:100%;min-height:38px;margin-top:5px;font-size:13px}
.evidence{color:#1e5c38;background:#f1f7f3;border-radius:4px;padding:3px 7px;margin-top:4px;display:inline-block}
pre.ordinance{white-space:pre-wrap;font:12px/1.45 Menlo,Consolas,monospace;background:#faf9f6;border:1px solid var(--line);padding:8px;max-height:340px;overflow:auto}
#publishedLinks{margin-top:8px}
.candidates button{display:block;width:100%;text-align:left;margin:4px 0}
dialog#loginDialog{width:min(380px,92vw)}

table.cases input[type=text]{width:100%;padding:3px 6px}
table.cases tr.current td,table.grid tr.current td{background:#f7efe9}
table.cases select{width:auto;padding:3px 6px}
dialog .dhead input[type=search]{margin-left:auto}

/* --- two-stage layout, ownership chain --- */
table.owners{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.owners th{text-align:left;font-weight:600;background:#fafaf8;padding:5px 6px;border-bottom:1px solid var(--line)}
table.owners td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.owners input[type=text]{width:100%;padding:3px 6px}
table.owners td.yrs{white-space:nowrap}
table.owners td.yrs input{width:58px;padding:3px 4px}
table.owners td.yrs .dash{display:inline-block;width:12px;text-align:center;color:var(--muted,#666)}
table.owners select{width:auto;padding:3px 6px}
.ownerlinks{margin-top:4px;font-size:12px}
.ownerlinks summary{cursor:pointer;color:var(--accent);list-style:none}
.ownerlinks summary::-webkit-details-marker{display:none}
.ownerlinks summary::before{content:'▸ ';color:var(--muted)}
.ownerlinks[open] summary::before{content:'▾ '}
.ownerlinklist{display:flex;flex-wrap:wrap;gap:2px 10px;min-width:0;margin-top:3px}
.ownerlinklist a{font-size:12px;white-space:nowrap}
.ownerbasis{color:var(--muted);font-size:12px}
.morebox{margin-top:10px}
.morebox summary{font-weight:600}
/* An open fold's contents sit inside a rule down its left side, so it is clear
   what belongs to it and where it ends; a fold inside a fold steps in again.
   The heading row covers the top of the rule and stays where it was. */
.morebox[open]{box-shadow:inset 2px 0 0 #c4c4bc;margin-left:4px;padding:0 0 6px 14px}
.morebox[open]>summary{margin-left:-18px;background:var(--panel);padding-bottom:4px}
.footerlinks{margin:8px 0 30px;color:var(--muted)}
.footerlinks a{margin-right:14px}
.photos figure select{width:100%;font-size:12px;margin-top:3px}
.atlasitem{display:flex;gap:12px;align-items:flex-start;margin:10px 0}.atlasimg{width:300px;min-height:120px;border:1px solid var(--line);border-radius:6px;background:#f4f1ea}
.mentions .mname{margin:10px 0}.mentions .mhit{border-left:3px solid var(--line);padding:4px 10px;margin:6px 0}
.mentions .passage{font-size:13px;margin:3px 0;color:#333}.mentions mark{background:#fff1a8;padding:0 2px}
.sbrow.sbout{opacity:.6}.sbrow.sbout .atlasimg{display:none}.sbkey{width:220px}
.maps figure{width:320px}.maps img{width:320px;height:auto;max-height:260px;object-fit:contain;background:#fff}.maps figure input{width:100%;font-size:12px;margin-top:3px}
table.grid.deadlines td{font-size:12.5px}
.countbadge{display:inline-block;background:#eee;border-radius:10px;padding:0 8px;font-size:12px;margin-left:6px}

/* --- step 3: this property, around it --- */
.answers{margin:2px 0 6px}
.answer{display:grid;grid-template-columns:160px minmax(0,1fr);gap:4px 14px;padding:8px 0;border-bottom:1px solid var(--line);align-items:start}
.answer:last-child{border-bottom:none}
.answer .k{color:#444;font-weight:600;font-size:13px;padding-top:2px}
.answer .k .src{font-weight:normal;margin-top:4px}
.answer .v .item{border-bottom:none;padding:2px 0 6px}
.answer .plain{padding-top:2px}
.nbr{padding:8px 0;border-bottom:1px solid var(--line)}
.nbr:last-child{border-bottom:none}
.nbrrec{display:flex;gap:8px;align-items:flex-start;padding:5px 0 0 2px;font-size:13px}
.nbrrec .links{margin-left:6px}
.nbrrec .links a{margin-right:10px;font-size:12.5px}
.nbrrec .links button{font-size:12px;padding:2px 8px}
@media (max-width:700px){.answer{grid-template-columns:1fr}}

/* --- the step rail and folded cards --- */
/* --stick is the height of whatever is pinned to the top of the window (the
   header, plus the strip when it shows), kept current by app.js. Jumps stop
   below it rather than under it. */
:root{--stick:60px;--headh:60px}
html{scroll-padding-top:calc(var(--stick) + 12px)}
main.case{grid-template-columns:208px minmax(0,1fr);max-width:1340px}
.propgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start;margin-top:14px}
.propgrid .propside[hidden]{display:none}
.propgrid:has(.propside[hidden]){grid-template-columns:1fr}
@media (max-width:820px){.propgrid{grid-template-columns:1fr}}
.rail{position:sticky;top:calc(var(--stick) + 8px);align-self:start;max-height:calc(100vh - var(--stick) - 16px);overflow:auto;font-size:13.5px}
.rail ol{list-style:none;margin:0;padding:0}
.rail a.step{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:7px;color:var(--ink);text-decoration:none;border:1px solid transparent}
.rail a.step:hover{background:#fff;border-color:var(--line)}
.rail a.step[aria-current=true]{background:#fff;border-color:var(--line);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.rail .n,.strip .n{flex:none;width:21px;height:21px;border-radius:50%;background:#e6e6e2;color:#555;font-size:11.5px;display:inline-flex;align-items:center;justify-content:center}
.rail .n{margin-top:1px}
.rail .n,.strip .n{position:relative}
.rail .done .n::after,.strip .done .n::after,.rail .attn .n::after,.strip .attn .n::after{position:absolute;right:-5px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:#fff;font-size:9px;font-weight:bold;line-height:12px;text-align:center;box-shadow:0 0 0 1px currentColor}
.rail .done .n::after,.strip .done .n::after{content:'\2713';color:var(--ok)}
.rail .attn .n::after,.strip .attn .n::after{content:'!';color:var(--warn)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;background:#fff;padding:3px 8px;font-size:12px;color:#444;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{background:#f3f3ef}
.seg button[aria-pressed="true"]{color:#fff}
.seg .seg-added[aria-pressed="true"]{background:var(--ok)}.seg .seg-none[aria-pressed="true"]{background:#6b6b6b}
.seg .seg-checked[aria-pressed="true"]{background:var(--link)}.seg .seg-na[aria-pressed="true"]{background:#9a9a94}
.rail .lbl{line-height:1.25}
.rail .sub{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.rail .done .n,.strip .done .n{background:var(--ok);color:#fff}
.rail .progress .n,.strip .progress .n{background:var(--accent);color:#fff}
.rail .attn .n,.strip .attn .n{background:var(--warn);color:#fff}
.rail .attn .sub{color:var(--warn)}
.rail .locked,.strip .locked{opacity:.45}
.rail .later,.strip .later{opacity:.6}
.rail .locked a.step,.strip a.locked{cursor:default}
.rail .stagehead{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 4px 9px}
.rail .stagehead:first-of-type{margin-top:0}
.rail .stagehead.current{color:var(--accent)}
.rail .force{margin:2px 0 4px 39px}
.rail .tally{margin:10px 9px 0;font-size:11.5px;color:var(--muted)}
.rail .bar{display:block;height:4px;border-radius:3px;background:#e6e6e2;margin-top:4px;overflow:hidden}
.rail .bar i{display:block;height:100%;background:var(--ok)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;margin:0 0 8px;padding:5px 9px;background:#fff;border:1px solid var(--accent);border-radius:6px}
.strip{display:none;background:#fff;border-bottom:1px solid var(--line);padding:6px 18px;position:sticky;top:var(--headh);z-index:4;overflow-x:auto;white-space:nowrap}
.strip a.step{display:inline-flex;gap:6px;align-items:center;padding:4px 10px 4px 5px;border-radius:999px;border:1px solid var(--line);margin-right:6px;color:var(--ink);text-decoration:none;font-size:12.5px}
.strip a.step[aria-current=true]{background:var(--soft);border-color:var(--accent)}
.strip .force{margin-left:4px}
body.landing .strip{display:none}
.card h2 .cardtoggle{all:unset;display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;border-radius:4px}
.card h2 .cardtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card h2 .cardtoggle::after{content:'▾';margin-left:auto;color:var(--muted);font-size:12px;font-weight:normal}
.card h2 .cardtoggle[aria-expanded=false]::after{content:'▸'}
.cardsum{color:var(--muted);font-size:12.5px;margin:-4px 0 0 30px}
.card.folded h2{margin-bottom:6px}
.card:not(.folded) .cardsum{margin-bottom:8px}
/* The rail and a readable case column need about 1100px. Below that the rail
   becomes the strip and the case takes the whole width. The page stops widening at
   1340px so lines of text stay a comfortable length on a large monitor. */
@media (max-width:1100px){main.case{grid-template-columns:minmax(0,1fr)}.rail{display:none}.strip{display:block}}