/* Layout: app shell — left rail of modules, city bar on top, working canvas. Statute-book type on a cool paper ground. */
:root{
  --paper:#f5f6f8; --sheet:#ffffff; --ink:#18202e; --ink-2:#465166; --ink-3:#6e7891; --rule:#dde1e8; --rule-2:#c9cfda;
  --accent:#2340a0; --accent-ink:#ffffff; --accent-soft:#e7ecfb; --mark:#fff2b8;
  --conflict:#b3261e; --conflict-soft:#fbe9e7; --gap:#9a5b00; --gap-soft:#fdf1dc; --review:#46536b; --review-soft:#eceff4;
  --aligned:#1d6b3a; --aligned-soft:#e3f2e8; --na:#7a8296; --na-soft:#f0f1f4;
  --f-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:6px; --shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 16px rgba(20,30,60,.05);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0f131b; --sheet:#161b25; --ink:#e7ebf3; --ink-2:#b4bccc; --ink-3:#8790a4; --rule:#273042; --rule-2:#334058;
  --accent:#8ea6ff; --accent-ink:#0d1430; --accent-soft:#1d2747; --mark:#4a3f12;
  --conflict:#ff8a80; --conflict-soft:#3a1715; --gap:#f0b45c; --gap-soft:#3a2a10; --review:#b4bfd6; --review-soft:#232b3a;
  --aligned:#7fd39c; --aligned-soft:#14301f; --na:#8d95a8; --na-soft:#1d222c; --shadow:none; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0f131b; --sheet:#161b25; --ink:#e7ebf3; --ink-2:#b4bccc; --ink-3:#8790a4; --rule:#273042; --rule-2:#334058;
  --accent:#8ea6ff; --accent-ink:#0d1430; --accent-soft:#1d2747; --mark:#4a3f12;
  --conflict:#ff8a80; --conflict-soft:#3a1715; --gap:#f0b45c; --gap-soft:#3a2a10; --review:#b4bfd6; --review-soft:#232b3a;
  --aligned:#7fd39c; --aligned-soft:#14301f; --na:#8d95a8; --na-soft:#1d222c; --shadow:none; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font:15px/1.55 var(--f-body); margin:0}
a{color:var(--accent)} a:hover{text-decoration-thickness:2px}
button,select,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
h1,h2,h3{font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; text-wrap:balance; margin:0}
h1{font-size:1.9rem; line-height:1.15} h2{font-size:1.35rem; line-height:1.25} h3{font-size:1.05rem; font-family:var(--f-body); font-weight:600}
.mono,code{font-family:var(--f-mono); font-size:.86em}
.muted{color:var(--ink-3)} .small{font-size:.84rem}
.eyebrow{font:600 .7rem/1 var(--f-body); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* shell */
.app{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh}
.rail{border-right:1px solid var(--rule); background:var(--sheet); padding:20px 14px; position:sticky; top:env(safe-area-inset-top,0px); height:100vh; overflow:auto; display:flex; flex-direction:column; gap:22px}
.brand{display:flex; gap:10px; align-items:center; padding:0 6px}
.brand-mark{width:30px; height:30px; border-radius:5px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font:700 15px/1 var(--f-display)}
.brand-name{font:600 1.05rem/1.1 var(--f-display)} .brand-sub{font-size:.72rem; color:var(--ink-3)}
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{all:unset; cursor:pointer; padding:8px 10px; border-radius:var(--r); display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--ink-2); font-size:.92rem}
.nav button:hover{background:var(--paper); color:var(--ink)}
.nav button[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.nav .count{font:500 .72rem/1 var(--f-mono); color:var(--ink-3)}
.rail-foot{margin-top:auto; font-size:.74rem; color:var(--ink-3); padding:0 6px; display:flex; flex-direction:column; gap:6px}
.ai-pill{display:inline-flex; gap:6px; align-items:center; font-size:.74rem; color:var(--ink-2)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--na); flex:none} .dot.on{background:var(--aligned)} .dot.off{background:var(--gap)}

.main{min-width:0; display:flex; flex-direction:column}
.citybar{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--rule); padding:10px 28px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.citybar label{font-size:.78rem; color:var(--ink-3)}
.cityselect{appearance:none; border:1px solid var(--rule-2); background:var(--sheet); border-radius:var(--r); padding:7px 34px 7px 12px; font-weight:600; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size:5px 5px; background-repeat:no-repeat}
.chips-cities{display:flex; gap:6px; flex-wrap:wrap}
.cchip{all:unset; cursor:pointer; font-size:.78rem; padding:4px 9px; border-radius:99px; border:1px solid var(--rule); color:var(--ink-2); background:var(--sheet)}
.cchip[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600}
.asof{margin-left:auto; font-size:.75rem; color:var(--ink-3)}
.content{padding:26px 28px 60px; display:flex; flex-direction:column; gap:22px; max-width:1240px; width:100%}

/* blocks */
.panel{background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow); min-width:0}
.panel-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.grid{display:grid; gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.head{display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap}
.lede{max-width:68ch; color:var(--ink-2); margin:.4rem 0 0}
.kv{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 14px; font-size:.88rem}
.kv dt{color:var(--ink-3)} .kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
.tally{display:flex; gap:10px; flex-wrap:wrap}
.tile{flex:1 1 120px; border:1px solid var(--rule); border-radius:var(--r); padding:10px 12px; background:var(--sheet); cursor:pointer; text-align:left}
.tile:hover{border-color:var(--rule-2)}
.tile .n{font:600 1.7rem/1 var(--f-display); font-variant-numeric:tabular-nums}
.tile .l{font-size:.78rem; color:var(--ink-2); margin-top:4px}
.tile.conflict .n{color:var(--conflict)} .tile.gap .n{color:var(--gap)} .tile.review .n{color:var(--review)} .tile.aligned .n{color:var(--aligned)} .tile.na .n{color:var(--na)}

/* status chips */
.chip{display:inline-flex; align-items:center; gap:5px; font:600 .7rem/1 var(--f-body); letter-spacing:.03em; text-transform:uppercase; padding:4px 7px; border-radius:4px; white-space:nowrap}
.s-conflict{background:var(--conflict-soft); color:var(--conflict)} .s-gap{background:var(--gap-soft); color:var(--gap)}
.s-review{background:var(--review-soft); color:var(--review)} .s-aligned{background:var(--aligned-soft); color:var(--aligned)} .s-na{background:var(--na-soft); color:var(--na)}
.tag{display:inline-flex; font:500 .72rem/1.25 var(--f-body); padding:3px 7px; border-radius:4px; border:1px solid var(--rule); color:var(--ink-2); max-width:100%; overflow-wrap:anywhere}
.tag.risk{border-color:var(--conflict); color:var(--conflict)}
.tag.conf-verified{border-color:var(--aligned); color:var(--aligned)} .tag.conf-mirror,.tag.conf-staff_report,.tag.conf-snippet{border-color:var(--gap); color:var(--gap)}
.billno{font:600 .82rem/1 var(--f-mono); color:var(--accent)}

/* findings */
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.filters select,.filters input{max-width:100%; min-width:0; border:1px solid var(--rule-2); background:var(--sheet); border-radius:var(--r); padding:6px 9px; font-size:.85rem}
.flist{display:flex; flex-direction:column; gap:10px}
.finding{border:1px solid var(--rule); border-radius:var(--r); background:var(--sheet); border-left:4px solid var(--na)}
.finding.conflict{border-left-color:var(--conflict)} .finding.gap{border-left-color:var(--gap)} .finding.review{border-left-color:var(--review)} .finding.aligned{border-left-color:var(--aligned)}
.finding summary{list-style:none; cursor:pointer; padding:12px 14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:start}
.finding summary::-webkit-details-marker{display:none}
.finding .ftitle{font-weight:600; line-height:1.35}
.finding .fmeta{grid-column:2/4; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.finding .fbody{padding:0 14px 14px; display:flex; flex-direction:column; gap:14px; border-top:1px dashed var(--rule)}
.reviewed-badge{font-size:.72rem; color:var(--aligned); font-weight:600}
.compare{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px}
.compare > div{border:1px solid var(--rule); border-radius:var(--r); padding:10px 12px; min-width:0}
.compare h4{margin:0 0 6px; font:600 .72rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.compare ul{margin:0; padding-left:18px} .compare li{margin:.2rem 0}
blockquote.code{margin:6px 0 0; padding:8px 10px; border-left:3px solid var(--rule-2); background:var(--paper); font:13px/1.5 var(--f-mono); overflow-wrap:anywhere}
.cite{font:500 .8rem/1.3 var(--f-mono)}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{border:1px solid var(--rule-2); background:var(--sheet); border-radius:var(--r); padding:7px 12px; font-size:.85rem; cursor:pointer; display:inline-flex; gap:6px; align-items:center}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.btn:disabled{opacity:.55; cursor:not-allowed}
.chain{display:flex; flex-wrap:wrap; gap:6px; align-items:stretch}
.node{border:1px solid var(--rule-2); border-radius:5px; padding:6px 9px; font-size:.78rem; background:var(--paper); max-width:240px; min-width:0}
.node b{display:block; font:600 .64rem/1.2 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px}
.arrow{align-self:center; color:var(--ink-3); font-size:.9rem}
.draft{border:1px solid var(--rule-2); border-radius:var(--r); background:var(--paper); padding:12px 14px; white-space:pre-wrap; font:13px/1.6 var(--f-mono); position:relative; overflow-wrap:anywhere}
.stamp{display:inline-block; border:1.5px solid var(--conflict); color:var(--conflict); font:700 .66rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; padding:4px 7px; border-radius:3px; transform:rotate(-1.5deg); margin-bottom:8px}

/* timeline */
.tl{position:relative; padding:34px 6px 8px}
.tl-bar{height:4px; background:var(--rule); border-radius:2px; position:relative}
.tl-fill{position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:2px}
.tl-pt{position:absolute; top:-6px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--sheet); border:3px solid var(--accent)}
.tl-pt.future{border-color:var(--rule-2)}
.tl-today{position:absolute; top:-30px; transform:translateX(-50%); font:600 .7rem/1 var(--f-body); color:var(--accent); white-space:nowrap}
.tl-today::after{content:""; position:absolute; left:50%; top:16px; height:22px; border-left:2px dashed var(--accent)}
.tl-labels{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:16px}
.tl-labels div{font-size:.78rem; min-width:0} .tl-labels b{display:block; font-size:.82rem}

table{border-collapse:collapse; width:100%; font-size:.86rem}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule); vertical-align:top}
th{font:600 .7rem/1.2 var(--f-body); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.scroll{overflow-x:auto}
td.cell-c{color:var(--conflict); font-weight:600} td.cell-a{color:var(--aligned); font-weight:600} td.cell-u{color:var(--ink-3)} td.cell-l{color:var(--gap); font-weight:600}
tr.me td{background:var(--accent-soft)}

.range{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.range input{width:min(360px,100%); accent-color:var(--accent)}
.bignum{font:600 1.5rem/1 var(--f-display); font-variant-numeric:tabular-nums}

.cal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.cal .month{border:1px solid var(--rule); border-radius:var(--r); padding:10px}
.cal ol{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.cal li{font-size:.84rem; display:flex; justify-content:space-between; gap:8px}
.cal li.last{font-weight:700; color:var(--accent)}

/* chat */
.chat{display:flex; flex-direction:column; gap:12px}
.msgs{display:flex; flex-direction:column; gap:12px; max-height:min(62vh,640px); overflow:auto; padding-right:4px}
.msg{max-width:78ch; padding:10px 14px; border-radius:var(--r); line-height:1.55; overflow-wrap:anywhere}
.msg.user{align-self:flex-end; background:var(--accent-soft); color:var(--ink)}
.msg.ai{align-self:flex-start; background:var(--sheet); border:1px solid var(--rule)}
.msg.ai p{margin:.35rem 0} .msg.ai ul{margin:.35rem 0; padding-left:20px}
.ref{all:unset; cursor:pointer; font:600 .72rem/1 var(--f-mono); color:var(--accent); background:var(--accent-soft); padding:2px 5px; border-radius:3px; margin:0 1px}
.composer{display:flex; gap:8px} .composer textarea{flex:1; min-width:0; border:1px solid var(--rule-2); border-radius:var(--r); padding:9px 11px; resize:vertical; min-height:46px; background:var(--sheet)}
.suggest{display:flex; gap:6px; flex-wrap:wrap}
.trace{font:12px/1.5 var(--f-mono); color:var(--ink-2); border:1px dashed var(--rule-2); border-radius:var(--r); padding:8px 10px; background:var(--paper); max-height:220px; overflow:auto}
.trace div{white-space:pre-wrap; overflow-wrap:anywhere}
.notice{font-size:.8rem; color:var(--ink-2); border:1px solid var(--rule); background:var(--paper); border-radius:var(--r); padding:8px 10px}

.arch{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-items:stretch}
.arch .col{border:1px solid var(--rule); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:6px; background:var(--paper); min-width:0}
.arch .col h4{margin:0; font:600 .7rem/1.2 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.arch .item{font-size:.8rem; background:var(--sheet); border:1px solid var(--rule); border-radius:4px; padding:5px 7px}
.loopnote{grid-column:1/-1; border:1px dashed var(--accent); border-radius:var(--r); padding:8px 10px; font-size:.82rem; color:var(--ink-2)}
.toast{position:fixed; bottom:calc(16px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:var(--r); font-size:.85rem; z-index:20}
.empty{padding:20px; text-align:center; color:var(--ink-3); border:1px dashed var(--rule-2); border-radius:var(--r)}

@media (max-width: 980px){
  .g3,.arch{grid-template-columns:repeat(2,minmax(0,1fr))} .g-main{grid-template-columns:minmax(0,1fr)} .cal{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; height:auto; border-right:0; border-bottom:1px solid var(--rule); padding:12px 16px; gap:10px}
  .nav{flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:4px}
  .nav button{white-space:nowrap}
  .rail-foot{display:none}
  .citybar{padding:10px 16px; position:static}
  .content{padding:18px 16px 50px}
  .g2,.g3,.compare,.arch{grid-template-columns:minmax(0,1fr)}
  .tl-labels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chips-cities{display:none}
  .finding summary{display:flex; flex-wrap:wrap; gap:6px 10px}
  .finding .ftitle{flex-basis:100%; order:2} .finding .billno{order:1; margin-left:auto} .finding .fmeta{order:3}
  h1{font-size:1.5rem}
}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }
/* v2 workspace */
.rolebox{display:flex; flex-direction:column; gap:6px; padding:0 6px}
.nav .count.badge{background:var(--accent); color:var(--accent-ink); border-radius:99px; padding:3px 7px}
.board{display:grid; grid-template-columns:repeat(7,minmax(150px,1fr)); gap:10px; overflow-x:auto; padding-bottom:6px}
.bcol{background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); padding:8px; display:flex; flex-direction:column; gap:8px; min-width:0}
.bhead{display:flex; justify-content:space-between; font:600 .72rem/1.2 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.bempty{padding:6px 2px}
.mcard{all:unset; cursor:pointer; display:flex; flex-direction:column; gap:4px; border:1px solid var(--rule); border-radius:5px; padding:8px; background:var(--paper)}
.mcard:hover,.mcard:focus-visible{border-color:var(--accent)}
.mtop{display:flex; justify-content:space-between; gap:6px; align-items:center; flex-wrap:wrap}
.mtitle{font-size:.84rem; font-weight:600; line-height:1.3}
.stepper{display:flex; gap:4px; flex-wrap:wrap}
.step{flex:1 1 110px; font:600 .74rem/1.2 var(--f-body); padding:8px 10px; border-radius:4px; background:var(--na-soft); color:var(--ink-3)}
.step.done{background:var(--aligned-soft); color:var(--aligned)} .step.cur{background:var(--accent); color:var(--accent-ink)}
.versions{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.vchip{all:unset; cursor:pointer; font-size:.74rem; padding:4px 8px; border:1px solid var(--rule-2); border-radius:4px; color:var(--ink-2)}
.vchip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600}
.draftedit{width:100%; border:1px solid var(--rule-2); border-radius:var(--r); padding:10px 12px; background:var(--paper); font:13px/1.6 var(--f-mono); resize:vertical}
.diff del{background:var(--conflict-soft); color:var(--conflict); text-decoration:line-through}
.diff ins{background:var(--aligned-soft); color:var(--aligned); text-decoration:underline}
.timeline{list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--rule); display:flex; flex-direction:column; gap:10px; max-height:420px; overflow:auto}
.timeline li{position:relative} .timeline li::before{content:""; position:absolute; left:-20px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--accent)}
.sel,#note{width:100%; border:1px solid var(--rule-2); border-radius:var(--r); padding:7px 9px; background:var(--sheet); margin:4px 0 6px}
.pipe{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media (max-width:760px){ .rolebox{padding:0} .board{grid-template-columns:repeat(7,minmax(200px,1fr))} }

.welcome{border-color:var(--accent); background:linear-gradient(0deg,var(--sheet),var(--sheet)) padding-box}
.tour{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.tour li{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.tour .btn{min-width:180px; justify-content:center}

/* edition: city position + 2027 watch */
.position{border-left:3px solid var(--accent); background:var(--paper); padding:10px 12px; border-radius:0 var(--r) var(--r) 0}
.watch-list{display:grid; gap:10px}
.watch-item{border:1px solid var(--rule); border-radius:var(--r); padding:10px 12px; display:flex; flex-direction:column; gap:4px; background:var(--sheet)}

/* sign-in gate (Azure deployment) */
html,body{min-height:100%}
.gate{min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--paper)}
.gate-card{width:min(420px,100%); background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow)}
.gate-card .brand{padding:0}
.gate-card form{display:flex; flex-direction:column; gap:8px}
.gate-card input{border:1px solid var(--rule-2); border-radius:var(--r); padding:11px 12px; font:600 1.05rem/1 var(--f-mono); letter-spacing:.08em; background:var(--paper); text-transform:uppercase}
.gate-card .btn.primary{justify-content:center; padding:10px 12px}

.home{width:min(860px,100%); display:flex; flex-direction:column; gap:18px}
.home h1{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.home-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.home-card{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:8px; background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); color:var(--ink)}
.home-card:hover,.home-card:focus-visible{border-color:var(--accent); outline:none}
.home-card b{font:600 1.15rem/1.25 var(--f-display)}
.home-card .go{margin-top:auto; color:var(--accent); font-weight:600}
.row-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
@media (max-width:640px){ .home-grid{grid-template-columns:minmax(0,1fr)} }