:root{--ground:#F2F4F6;--card:#fff;--hover:#F1F6FD;--ink:#14202A;--muted:#5C6B7A;
      --line:#E1E7EB;--accent:#3B7ED6;--edge:#3B7ED6;--ctl:#C2D9F4;
      --shadow:0 1px 2px rgba(20,32,42,.05),0 2px 8px rgba(20,32,42,.04)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ground:#0F1418;--card:#181F25;--hover:#1E2836;--ink:#E9EEF2;--muted:#8FA0AD;
  --line:#26313A;--accent:#8CBCF5;--edge:#8CBCF5;--ctl:#35506E;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25)}}
*{box-sizing:border-box}
body{margin:0;padding:0 0 6rem;background:var(--ground);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:66rem;margin:0 auto;padding:2rem 1.25rem 0}
a{color:inherit;text-decoration:none}
h1{font-size:1.9rem;letter-spacing:-.025em;margin:0 0 1.4rem;font-weight:680}

/* header — one dark bar in both themes, so the page has a fixed anchor */
.top{position:sticky;top:0;z-index:10;background:#121B24;
  border-bottom:1px solid #223040}
.topin{max-width:66rem;margin:0 auto;padding:.78rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{color:#F4F7FA;font-weight:700;font-size:1.42rem;letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:.55rem}
.mark{width:1.6em;height:1.6em;flex:none;margin-top:-.04em}
.brand:hover{color:#fff}
.who{display:flex;align-items:center;gap:.7rem;font-size:.83rem;min-height:1.7rem}
.me{color:#C3CFDA}
.who button{font:inherit;font-size:.8rem;cursor:pointer;color:#EDF2F7;
  background:transparent;border:1px solid #35475A;border-radius:6px;
  padding:.2rem .65rem;line-height:1.5}
.who button:hover{border-color:#EDF2F7;color:#fff;background:#1D2A36}

.lane{margin:0 0 2.4rem}
.lane h2{font-size:1.15rem;margin:0 0 .8rem;font-weight:660;letter-spacing:-.01em}
.grid{display:flex;flex-direction:column;gap:.5rem}
.empty{color:var(--muted);font-size:.88rem;font-style:italic;
  border:1px dashed var(--line);border-radius:10px;padding:1rem;text-align:center}

.card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:.75rem 1rem;box-shadow:var(--shadow);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 1.5rem;align-items:center;
  transition:background .12s ease,border-color .12s ease}
.card:hover{background:var(--hover);border-color:var(--edge);cursor:pointer}
/* natively draggable, which cancels the pointer sequence a card drag
   needs — a real mouse press started a link drag instead */
.open{position:absolute;inset:0;z-index:1;border-radius:10px;
  -webkit-user-drag:none;user-drag:none}
.left{min-width:0}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:.28rem}

.name{font-weight:640;letter-spacing:-.01em;line-height:1.35;
  display:flex;align-items:baseline;gap:.42rem;flex-wrap:wrap}
.dot{color:var(--muted);font-weight:400}
.zip{font-weight:inherit}   /* separated by a dot, like the price */
.price{font-variant-numeric:tabular-nums;font-weight:660;white-space:nowrap}
.price.none{color:var(--muted);font-weight:400;font-size:.85rem}
.mkt{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;
  padding:.05rem .32rem;white-space:nowrap}
.spec{color:var(--muted);font-size:.88rem;margin:.12rem 0 0}
.card .spec a{position:relative;z-index:2}
.rf{color:var(--accent);font-weight:640;border-bottom:1px solid var(--line)}
.rf:hover{color:var(--accent);border-bottom-color:var(--accent)}
.ext{font-size:.72em;opacity:.6;margin-left:.1em}

.legs{display:flex;gap:.28rem;justify-content:flex-end;flex-wrap:wrap}
.leg{display:inline-flex;align-items:baseline;gap:.32rem;border-radius:6px;
  padding:.16rem .45rem;color:#fff;font-size:.78rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.leg b{font-weight:700}
.leg b i{font-style:normal;opacity:.5;padding:0 .05em}
.leg span{opacity:.85;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}
.sun{font-size:.74rem;padding:.08rem .42rem;border-radius:5px;
  border:1px solid currentColor;font-weight:600;white-space:nowrap}

/* the content column had no flex, so it shrank to the width of the text and
   the edit field inherited that. It takes the rest of the row now. */
.notes{grid-column:1/-1;margin:.6rem 0 0;padding-top:.55rem;
  border-top:1px solid var(--line);display:flex;gap:.55rem;align-items:flex-start}
.notes > div{flex:1;min-width:0}
.notelabel{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;
  padding:.04rem .32rem;white-space:nowrap;flex:none;margin-top:.15rem}
.note{color:var(--muted);font-size:.88rem;line-height:1.45;margin:0 0 .2rem}
.note:last-child{margin-bottom:0}

@media(max-width:46rem){
  .card{grid-template-columns:1fr;gap:.5rem}
  .right{align-items:flex-start}
  .legs{justify-content:flex-start}
}

/* detail */
.back{display:inline-block;margin-bottom:1.7rem;font-size:1.2rem;
  color:var(--accent);font-weight:640}
.back:hover{text-decoration:underline}
.dochead .name{font-size:1.45rem;font-weight:680;letter-spacing:-.02em}
.dochead .spec{font-size:1.08rem;margin-top:.45rem;line-height:1.5;color:var(--ink)}
.dochead .notes{margin-top:1.1rem}
/* an eyebrow above the address, not a pill orphaned beneath it */
.stagerow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0 0 .5rem}
.stage{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:.14rem .45rem}
.doc h2{font-size:1.45rem;margin:2.6rem 0 .6rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--line);font-weight:670;letter-spacing:-.015em}
.doc h3{font-size:1.12rem;margin:1.8rem 0 .45rem;font-weight:640}
.doc img{width:70%;max-width:100%;height:auto;display:block;margin:.4rem 0 1.4rem;
  border:1px solid var(--line);border-radius:8px;background:var(--card)}
@media(max-width:46rem){.doc img{width:100%}}

/* moving a property between stages */
.move{position:absolute;right:.55rem;bottom:.5rem;z-index:2;
  display:flex;gap:.35rem}
.arch{display:inline-flex;align-items:center;justify-content:center;padding:0;
  width:1.7rem;height:1.7rem;border-radius:6px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--muted);
  opacity:0;transition:opacity .12s,color .12s,background .12s}
.card:hover .arch,.arch:focus-visible{opacity:.75}
.arch:hover{opacity:1;color:#B4472E;border-color:var(--line);background:var(--card)}
.arch svg{width:1.05rem;height:1.05rem;display:block}

.gate{max-width:26rem;margin:6rem auto;text-align:center;color:var(--muted)}
.gate h1{color:var(--ink);margin:0 0 .6rem}
.gate p{color:var(--muted);margin:0 0 1.2rem}
.gate button{font:inherit;font-weight:640;padding:.6rem 1.3rem;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.gate button:hover{border-color:var(--accent);color:var(--accent)}

/* what changed since he last read the page */
.changes{margin:0 0 1.6rem;border:1px solid var(--line);border-radius:10px;
  background:var(--card);overflow:hidden}
.chead{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
.chead h2{margin:0;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.chead button{font:inherit;font-size:.78rem;padding:.2rem .6rem;cursor:pointer;
  border:1px solid var(--line);border-radius:5px;background:var(--hover);color:var(--ink)}
.chead .hint{font-size:.78rem;color:var(--muted)}
.chlist{display:flex;flex-direction:column}
.chg{display:flex;align-items:center;gap:.6rem;padding:0 .55rem 0 0;
  border-top:1px solid var(--line);color:inherit;
  background:rgba(17,148,136,.07);box-shadow:inset 3px 0 0 #119488}
.chg:first-child{border-top:0}
.chg:hover{background:rgba(17,148,136,.15)}
.chgmain{flex:1;min-width:0;display:grid;grid-template-columns:3.2rem 1fr auto;
  gap:.9rem;align-items:baseline;padding:.5rem .9rem;color:inherit}
/* the tick is the only thing that clears a row, so it is always present,
   just quiet until you go near it */
.tick{flex:none;width:1.6rem;height:1.6rem;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  opacity:.55;transition:opacity .12s}
.tick svg{width:1rem;height:1rem;display:block}
.chg:hover .tick{opacity:1}
.tick:hover{border-color:var(--accent);color:var(--accent);background:var(--hover)}
.tick:disabled{opacity:.3;cursor:default}
.chg .when{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.chg .what{font-weight:600}
.chg .how{color:var(--muted);font-size:.85rem;text-align:right}
.card.moved{box-shadow:inset 3px 0 0 #119488,var(--shadow)}
@media(max-width:600px){
  .chg{grid-template-columns:3.2rem 1fr;row-gap:.15rem}
  .chg .how{grid-column:2;text-align:left}
}

/* what moved, said on the card itself */
.moved-line{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35rem;
  margin:.55rem 0 0;padding-top:.55rem;border-top:1px solid var(--line)}
.moved-line .chip{font-size:.8rem;padding:.1rem .45rem;border-radius:4px;
  background:rgba(17,148,136,.13);color:#0C7A70}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .moved-line .chip{
  background:rgba(90,206,194,.18);color:#63D2C6}}

.doclist{border:1px solid var(--line);border-radius:10px;background:var(--card);
  overflow:hidden;margin:0 0 1.6rem}
.doclist .chg{padding:0 .55rem 0 0}
.doclist .chgmain{grid-template-columns:4.5rem 1fr;cursor:default}
.doclist .chg{background:none;box-shadow:none}
.doclist .chg:hover{background:none}
.doclist .chg.fresh{background:rgba(17,148,136,.15);
  box-shadow:inset 3px 0 0 #119488}
.doclist .mkt{color:var(--muted);font-weight:400;font-size:.85rem;margin-left:.4rem}


/* archive — present, collapsed, out of the way */
.archive{margin:2.4rem 0 0;border-top:1px solid var(--line);padding-top:1.1rem}
.archive summary{cursor:pointer;font-size:1.15rem;font-weight:660;
  letter-spacing:-.01em;color:var(--muted);list-style:none;
  display:inline-flex;align-items:center;gap:.45rem}
.archive summary::-webkit-details-marker{display:none}
.archive summary::before{content:"▸";font-size:.8em;transition:transform .15s}
.archive[open] summary::before{transform:rotate(90deg)}
.archive summary:hover{color:var(--ink)}
.archive .grid{margin-top:.9rem}
.archive .card{opacity:.72}
.archive .card:hover{opacity:1}

/* dragging a card between lanes */
body.dragging-now{cursor:grabbing;user-select:none;-webkit-user-select:none}
.card[data-slug]{touch-action:pan-y}
.card.dragging{opacity:.25}
.card.ghost{position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  margin:0;box-shadow:0 8px 24px rgba(20,32,42,.22);
  border-color:var(--accent);transform-origin:top left;opacity:.96}
.grid[data-drop]{border-radius:12px;transition:background .12s,box-shadow .12s}
.grid[data-drop].over{background:var(--hover);
  box-shadow:0 0 0 2px var(--accent) inset;padding:.35rem}
.grid[data-drop].over .empty{border-color:var(--accent);color:var(--accent)}


/* editing the note — the text is the field */
.note.editable{cursor:text;border-radius:6px;margin:-.15rem -.4rem;
  padding:.15rem .4rem;min-height:1.5em;transition:background .12s,box-shadow .12s}
.note.editable:hover{background:var(--hover)}
.note.editable:focus-visible{outline:none;background:var(--hover);
  box-shadow:0 0 0 2px var(--accent)}
.noteinput{display:block;width:100%;font:inherit;color:inherit;
  margin:-.15rem -.4rem;padding:.15rem .4rem;border:0;border-radius:6px;
  background:var(--hover);box-shadow:0 0 0 2px var(--accent);
  resize:none;overflow:hidden;min-height:1.6em}
.noteinput:focus{outline:none}

/* emptying the archive */
.emptybar{margin:.9rem 0 0;font-size:.83rem;color:var(--muted)}
.emptybar button{font:inherit;font-size:.8rem;font-weight:640;cursor:pointer;
  padding:.24rem .7rem;border-radius:6px;border:1px solid var(--line);
  background:var(--card);color:var(--muted)}
.emptybar #empty:hover{border-color:#B4472E;color:#B4472E}
.emptybar .confirm{display:inline-flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;color:var(--ink)}
.emptybar #yes{border-color:#B4472E;color:#fff;background:#B4472E}
.emptybar #yes:hover{background:#9C3C25;border-color:#9C3C25}
.emptybar #yes:disabled{opacity:.6;cursor:default}