:root{
  color-scheme:light dark;
  --paper:#FDFBF8; --card:#ffffff; --card-2:#f1efe8;
  --ink:#142336; --ink-2:#44556e; --ink-3:#7a8798;
  --rule:#e2e0d8; --rule-2:#eeece5;
  --deep:#195093; --deep-soft:#e4edf8;
  --brass:#9a7434; --brass-soft:#f0e8d8;
  --alert:#a8452f; --alert-soft:#f6e2dd;
  --edit:#ccd3dd;
  --shadow:0 1px 2px rgba(20,35,54,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1620; --card:#17202c; --card-2:#1f2a38;
    --ink:#eef2f7; --ink-2:#aab8c9; --ink-3:#7c8a9c;
    --rule:#2a3645; --rule-2:#202b38;
    --deep:#6ea8e8; --deep-soft:#13243a;
    --brass:#d3b071; --brass-soft:#2c2415;
    --alert:#e08a72; --alert-soft:#341c16;
    --edit:#38485c; --shadow:0 1px 2px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --paper:#0f1620; --card:#17202c; --card-2:#1f2a38;
  --ink:#eef2f7; --ink-2:#aab8c9; --ink-3:#7c8a9c;
  --rule:#2a3645; --rule-2:#202b38;
  --deep:#6ea8e8; --deep-soft:#13243a;
  --brass:#d3b071; --brass-soft:#2c2415;
  --alert:#e08a72; --alert-soft:#341c16;
  --edit:#38485c; --shadow:0 1px 2px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
img{max-width:100%;display:block}
[hidden]{display:none!important}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px;margin:0 auto;padding:36px 22px 96px}

/* ---------- masthead ---------- */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);display:flex;flex-wrap:wrap;gap:5px 16px;margin-bottom:16px;
}
h1{
  font-family:"Manrope",system-ui,-apple-system,sans-serif;font-weight:600;
  font-size:clamp(32px,5.4vw,48px);line-height:1.06;letter-spacing:-.022em;
  margin:0 0 14px;text-wrap:balance;
}
.headline{
  font-family:"Manrope",system-ui,-apple-system,sans-serif;font-size:clamp(19px,2.5vw,23px);
  line-height:1.45;color:var(--ink-2);font-weight:400;margin:0 0 30px;max-width:62ch;
  text-wrap:pretty;
}

/* ---------- view bar: who you are, what you're seeing ---------- */
.viewbar{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:start;
  border:1px solid var(--rule);background:var(--card);
  padding:14px 16px;margin:0 0 26px;font-size:14.5px;color:var(--ink-2);
}
.viewbar.owner{border-left:3px solid var(--deep)}
.viewbar.preview{border-left:3px solid var(--brass);background:var(--brass-soft)}
.viewbar b{color:var(--ink);font-weight:600}
.rolechip{
  grid-column:1;grid-row:1;justify-self:start;margin-top:2px;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px;background:var(--deep-soft);color:var(--deep);white-space:nowrap;
}
.rolechip.client{background:var(--card-2);color:var(--ink-3)}
.rolechip.preview{background:var(--brass);color:var(--card)}
.vbtext{grid-column:2;min-width:0;max-width:68ch}
.vbacts{grid-column:2;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:560px){ .viewbar{grid-template-columns:minmax(0,1fr)} .vbtext,.vbacts{grid-column:1} }
.vbtn{
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:7px 13px;border:1px solid var(--rule);background:var(--card);
  color:var(--ink-2);cursor:pointer;text-decoration:none;white-space:nowrap;
}
.vbtn:hover{border-color:var(--deep);color:var(--deep)}

/* ---------- phase rail ---------- */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 42px}
.leg{background:var(--card);border:1px solid var(--rule-2);border-top:3px solid var(--rule);padding:13px 14px;box-shadow:var(--shadow)}
.leg.done{border-top-color:var(--deep)}
.leg.now{border-top-color:var(--brass);background:var(--brass-soft)}
.leg .tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.leg.done .tag{color:var(--deep)} .leg.now .tag{color:var(--brass)}
.leg .nm{font-family:"Manrope",system-ui,-apple-system,sans-serif;font-size:18px;font-weight:600;line-height:1.2;
  text-wrap:balance;hyphens:none}
.leg .wn{font-size:13px;color:var(--ink-3);margin-top:4px}

/* ---------- sections ---------- */
h2{font-family:"Manrope",system-ui,-apple-system,sans-serif;font-weight:600;font-size:25px;margin:0 0 4px;letter-spacing:-.016em}
.sublede{color:var(--ink-3);font-size:14.5px;margin:0 0 16px;max-width:72ch;text-wrap:pretty}
section{margin-bottom:44px}
.sechead{border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:18px}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.panel{background:var(--card);border:1px solid var(--rule-2);box-shadow:var(--shadow);padding:16px 18px}
.panel h3{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.panel.hot{border-left:3px solid var(--alert)}
.panel.hot h3{color:var(--alert)}
ul.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.plain li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--ink-3);margin-top:8px}
.panel.hot .dot{background:var(--alert)}
.panel.next .dot{background:var(--brass)}
.panel.now .dot{background:var(--deep)}
li.hidden-line .dot{background:var(--brass);box-shadow:0 0 0 2px var(--brass-soft)}
li.hidden-line{opacity:.72}

/* ---------- decisions ---------- */
.dec{display:flex;flex-direction:column;gap:11px}
.decrow{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--rule-2);border-left:3px solid var(--brass);box-shadow:var(--shadow);padding:14px 16px}
.decrow.done{border-left-color:var(--deep);opacity:.62}
.chk{flex:0 0 auto;width:19px;height:19px;margin-top:2px;padding:0;border-radius:50%;
  border:1.5px solid var(--rule);background:var(--card);cursor:default}
.editable .chk{cursor:pointer}
.editable .chk:hover{border-color:var(--deep)}
.chk.on{background:var(--deep);border-color:var(--deep)}
.chk:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.decbody{flex:1 1 auto;min-width:0}
.dectitle{font-weight:600;font-size:16px;line-height:1.35}
.decrow.done .dectitle{text-decoration:line-through;text-decoration-color:var(--rule)}
.decwhy{font-size:14px;color:var(--ink-2);margin-top:3px}
.decby{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-top:7px}
.decrow.done .decby{color:var(--deep)}

/* ---------- bid board (owner / pro only) ---------- */
.rows{display:flex;flex-direction:column;gap:9px}
.trow{background:var(--card);border:1px solid var(--rule-2);border-left:3px solid var(--rule);
  box-shadow:var(--shadow);padding:13px 16px}
.trow.crit{border-left-color:var(--alert)}
.trow.settled{border-left-color:var(--deep)}
.trowtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.tname{font-family:"Manrope",system-ui,-apple-system,sans-serif;font-weight:600;font-size:19px;line-height:1.2;flex:1 1 auto;min-width:170px}
.critflag{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--alert);border:1px solid var(--alert);padding:1px 5px;white-space:nowrap}
.pill{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;white-space:nowrap;border:1px solid transparent;font-family:inherit}
select.pill{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:20px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 7px) calc(50% + 1px);
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
select.pill:disabled{cursor:default;background-image:none;padding-right:8px;opacity:1}
.s-out{background:var(--deep-soft);color:var(--deep)}
.s-notbid{background:var(--card-2);color:var(--ink-3)}
.s-rebid,.s-overdue{background:var(--alert-soft);color:var(--alert)}
.s-overdue{border-color:var(--alert)}
.s-awarded{background:var(--deep-soft);color:var(--deep)}
.s-complete{background:var(--deep);color:var(--card)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 20px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--rule-2)}
.meta dt{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.meta dd{margin:0;font-size:14px;line-height:1.4}
.meta dd.mono{font-variant-numeric:tabular-nums;font-weight:600}
.meta dd.hot{color:var(--alert)}
.tnote{margin-top:10px;font-size:13.5px;color:var(--ink-2);line-height:1.5;
  padding-left:11px;border-left:2px solid var(--rule);white-space:pre-wrap}

/* ---------- build sequence (owner / pro only) ---------- */
.phase{margin-bottom:22px;background:var(--card);border:1px solid var(--rule-2);box-shadow:var(--shadow)}
.phasehead{display:flex;align-items:baseline;gap:12px;padding:12px 16px;background:var(--card-2);
  border-bottom:1px solid var(--rule-2);flex-wrap:wrap}
.phasenum{font-size:12px;font-weight:700;color:var(--alert);letter-spacing:.06em}
.phasehead h3{font-family:"Manrope",system-ui,-apple-system,sans-serif;font-weight:600;font-size:19px;margin:0;flex:1 1 auto}
.window{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.steps{list-style:none;margin:0;padding:6px 16px 14px}
.steps li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px}
.steps li:last-child{border-bottom:0}
.mark{flex:0 0 auto;width:16px;height:16px;margin-top:3px;padding:0;
  border:1.5px solid var(--rule);background:var(--paper);cursor:default}
.editable .mark{cursor:pointer}
.editable .mark:hover{border-color:var(--deep)}
.mark:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.mark.done{background:var(--deep);border-color:var(--deep)}
.mark.run{background:var(--brass);border-color:var(--brass)}
.steps li.gate{background:var(--alert-soft);margin:5px -16px;padding:9px 16px;border-bottom:0}
.steps li.gate .mark{border-radius:50%;border-color:var(--alert);background:var(--paper)}
.steps li.gate .mark.done{background:var(--alert)}
.steps li.gate .txt{color:var(--alert);font-weight:600}
.steps li.isdone .txt{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--rule)}
.txt{flex:1 1 auto}
.who{color:var(--ink-3);font-size:13px;padding-left:12px;white-space:nowrap}

/* ---------- photos ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
figure{margin:0;background:var(--card);border:1px solid var(--rule-2);box-shadow:var(--shadow)}
figure img{width:100%;height:auto}
figcaption{padding:10px 12px;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.slot{border:1.5px dashed var(--rule);background:transparent;box-shadow:none;min-height:150px;
  display:flex;flex-direction:column;justify-content:center;padding:18px 16px;text-align:center}
.slot .sn{font-family:"Manrope",system-ui,-apple-system,sans-serif;font-size:16px;font-weight:600;color:var(--ink-2)}
.slot .sd{font-size:13px;color:var(--ink-3);margin-top:5px;line-height:1.4}

/* ---------- editing ---------- */
.ed{outline:none}
.editable .ed{
  text-decoration:underline dashed 1px var(--edit);
  text-underline-offset:4px;
  text-decoration-skip-ink:none;
  cursor:text;
}
.editable .ed:hover{text-decoration-color:var(--deep);background:var(--deep-soft)}
.editable .ed:focus{
  text-decoration:underline solid 1px var(--deep);
  background:var(--deep-soft);box-shadow:0 0 0 3px var(--deep-soft);
}
.ed.empty::before{content:attr(data-ph);color:var(--ink-3)}
/* In the ledger an empty field is a real target: a box with its label in it,
   still full size while focused, so a new unpriced line can take a number.
   A bare dash collapsed to nothing the moment it was clicked. */
.editable .ledger .ed{display:inline-block;min-width:1.2em;min-height:1.35em}
.editable .ledger .ed.empty{
  min-width:6.5em;padding:1px 6px;border:1px dashed var(--edit);text-decoration:none;font-style:italic;
}
.editable .ledger td.n .ed.empty{min-width:7em;text-align:right}
.editable .ledger .ed:focus{min-width:7em;padding:1px 6px}
.editable .tnote.ed{display:block;min-height:1.4em}

footer{margin-top:52px;padding-top:18px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-3);max-width:70ch}
footer p{margin:0 0 8px}

#saver{position:fixed;right:16px;bottom:16px;z-index:50;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:8px 13px;border:1px solid var(--rule);
  background:var(--card);color:var(--ink-3);box-shadow:0 2px 10px rgba(0,0,0,.14)}
#saver.saving{border-color:var(--brass);color:var(--brass)}
#saver.saved{border-color:var(--deep);color:var(--deep)}
#saver.warn{border-color:var(--alert);color:var(--alert)}

.gate-msg{max-width:520px;margin:14vh auto;padding:0 22px;text-align:left}
.gate-msg h1{font-size:34px}
.gate-msg p{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:560px){
  .steps li{flex-wrap:wrap}
  .who{padding-left:27px;width:100%}
}

/* ---------- the money ----------
   Chart colours are NOT the brand accents. --deep and --brass are deliberately
   muted for text and rules, and they fail a categorical-palette chroma floor:
   as adjacent fills they read as two greys. These are the same hues re-stepped
   to pass (validated light and dark: lightness band, chroma, CVD separation,
   normal-vision separation, contrast vs the card surface).
   Deuteranope separation sits at dE 7.2, which is legal ONLY with a second
   encoding — hence the 2px gaps and a direct label on every segment. Do not
   remove either and do not "tidy" these back to var(--deep)/var(--brass). */
:root{ --spent:#195093; --future:#845011; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --spent:#4f93d9; --future:#ae7a3e; }
}
:root[data-theme="dark"]{ --spent:#4f93d9; --future:#ae7a3e; }

/* Contingency is NOT a third hue. A neutral grey next to the brown measured
   dE 9.8 to normal vision — under the 15 floor, so full-colour readers cannot
   reliably tell them apart, and direct labels do not excuse that one. It is
   the SAME brown carrying a 45-degree hatch instead: two validated colours,
   and the texture says "provisional money" better than a colour could. */
.hatch{
  background-color:var(--future);
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.40) 0 4px, rgba(255,255,255,0) 4px 9px);
}

.money{background:var(--card);border:1px solid var(--rule-2);box-shadow:var(--shadow);padding:22px 22px 18px}
.hero{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.hero .big{
  font-family:"Manrope",system-ui,-apple-system,sans-serif;font-weight:600;font-size:clamp(31px,5.2vw,44px);letter-spacing:-.022em;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.hero .cap{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.vchip{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  padding:4px 11px;border-radius:2px;font-variant-numeric:tabular-nums;
}
.vchip.over{background:var(--alert-soft);color:var(--alert)}
.vchip.under{background:var(--deep-soft);color:var(--deep)}
.vsub{font-size:13.5px;color:var(--ink-2);margin:10px 0 20px;max-width:60ch}

/* composition bar: 2px surface gaps, 4px rounded outer ends */
.barwrap{position:relative;margin:0 0 10px}
.bar{display:flex;gap:2px;height:34px;align-items:stretch}
.bar .seg{position:relative;border-radius:1px;min-width:2px}
.bar .seg:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}
.bar .seg:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}
.seg.spent{background:var(--spent)}
.seg.future{background:var(--future)}

.target{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--ink);opacity:.8}
.targetlab{
  position:absolute;top:-24px;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
}
.barkey{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0}
.barkey .k{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.barkey .sw{width:11px;height:11px;border-radius:2px;flex:none}
.barkey b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2);margin-top:22px}
.tiles .t{background:var(--card);padding:13px 14px}
.tiles dt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
.tiles dd{margin:0;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tiles dd small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-top:2px}
.owneronly{border-left:3px solid var(--brass)}
.owneronly dt{color:var(--brass)}

/* ledger table */
.ledger{width:100%;border-collapse:collapse;font-size:14px}
.ledger th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:0 10px 8px;border-bottom:1px solid var(--rule);
}
.ledger th.n,.ledger td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger td{padding:9px 10px;border-bottom:1px solid var(--rule-2);vertical-align:top}
.ledger tr.grp td{
  background:var(--card-2);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);padding:9px 10px;
}
.ledger tr.sum td{font-weight:700;border-top:1px solid var(--rule);border-bottom:none;background:transparent}
.ledger .vend{color:var(--ink-3);font-size:12.5px;display:block}
.ledger .note{color:var(--ink-3);font-size:12.5px;display:block;margin-top:3px;max-width:52ch}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:560px){
  .ledger{min-width:520px}
  .hero .big{font-size:32px}
}
.ledger tr.derived td{
  background:var(--card-2);color:var(--ink-2);font-style:italic;
  border-bottom:1px solid var(--rule);
}
.ledger tr.derived td.n{font-style:normal;font-weight:600}

/* ---------- change log: what git used to give for free ---------- */
.clog{margin-top:18px;border-top:1px solid var(--rule-2);padding-top:12px}
.clog summary{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;list-style:none;
}
.clog summary::-webkit-details-marker{display:none}
.clog summary::before{content:"▸ ";color:var(--ink-3)}
.clog[open] summary::before{content:"▾ "}
.clog ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.clog li{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-2);
  padding-bottom:7px;border-bottom:1px solid var(--rule-2)}
.clog li:last-child{border-bottom:0}
.cwhen{color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:112px}
.cwhat{font-weight:600;color:var(--ink);flex:0 0 auto}
.cval{color:var(--ink-3);flex:1 1 240px;min-width:0;overflow-wrap:anywhere}

/* a line paid past what it is worth */
.ledger td.n.over{color:var(--alert);font-weight:600}

/* status picker inside the ledger table */
.statuspick{
  font-family:inherit;font-size:13px;color:var(--ink-2);background:transparent;
  border:1px solid transparent;border-radius:2px;padding:2px 4px;max-width:130px;
}
.editable .statuspick{border-color:var(--rule-2);cursor:pointer}
.editable .statuspick:hover{border-color:var(--deep);color:var(--deep)}
.statuspick:disabled{appearance:none;-webkit-appearance:none;padding-left:0}

/* a refusal you cannot miss */
#flash{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:640px;
  margin:0 auto;padding:13px 16px;font-size:14px;line-height:1.45;cursor:pointer;
  border:1px solid var(--alert);border-left-width:3px;background:var(--alert-soft);
  color:var(--ink);box-shadow:var(--shadow);
}
#flash b{color:var(--alert)}
#flash .fpath{display:block;margin-top:3px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
#flash .fx{
  display:block;margin-top:7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---------- payments ---------- */
.ledger td.c,.ledger th.c{text-align:center;width:1%;white-space:nowrap}
.ledger td.derived{color:var(--ink-2)}
.addbtn{
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:8px 14px;margin:0 0 14px;border:1px solid var(--rule);background:var(--card);
  color:var(--ink-2);cursor:pointer;
}
.addbtn:hover{border-color:var(--deep);color:var(--deep)}
.wv{
  width:19px;height:19px;padding:0;border-radius:50%;border:1.5px solid var(--rule);
  background:var(--card);cursor:pointer;
}
.editable .wv:hover{border-color:var(--deep)}
.wv.on{background:var(--deep);border-color:var(--deep)}
.wv:disabled{cursor:default}
.del{
  font-family:inherit;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border:1px solid transparent;background:transparent;color:var(--ink-3);cursor:pointer;
}
.del:hover{border-color:var(--alert);color:var(--alert)}
.pays td{vertical-align:middle}

/* remove / add on the journal lists */
.plain li{position:relative}
.rm{
  font-family:inherit;font-size:17px;line-height:1;padding:0 4px;margin-left:4px;
  border:0;background:transparent;color:var(--rule);cursor:pointer;
  opacity:0;transition:opacity .12s;
}
.plain li:hover .rm,.decrow:hover .rm,.rm:focus-visible{opacity:1}
.rm:hover{color:var(--alert)}
.addli{list-style:none}
.addline{
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:4px 0;border:0;background:transparent;color:var(--ink-3);cursor:pointer;
}
.addline:hover{color:var(--deep)}
.decrow{position:relative}
.decrow .rm{position:absolute;top:10px;right:10px;margin:0}
.dec .addbtn{margin-top:12px}

/* ---------- the bar across the top of every page ---------- */
.thnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0 13px;margin:0 0 22px;border-bottom:1px solid var(--rule);
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.thnav .nv{color:var(--ink-3);text-decoration:none;white-space:nowrap}
.thnav a.nv:hover{color:var(--deep)}
.thnav .nv.brand{color:var(--ink-2)}
.thnav .nv.on{color:var(--ink);cursor:default}
.thnav .nvsep{color:var(--rule);font-weight:400}
.thnav .nvgap{flex:1 1 auto}
.thnav .nvwho{color:var(--ink-3);font-weight:600;letter-spacing:.06em;text-transform:none;font-size:12.5px}
.thnav button.nv.out{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;border:1px solid var(--rule);background:var(--card);
  color:var(--ink-3);padding:5px 10px;cursor:pointer}
.thnav button.nv.out:hover{border-color:var(--deep);color:var(--deep)}
@media (max-width:560px){ .thnav .nvwho{display:none} }
@media print{ .thnav{display:none!important} }

/* The mark in the masthead, in place of the words "TakeHold Media". Sized to
   the cap height of the nav text so the bar does not grow, and lifted in dark
   mode because the lockup is navy on cream and would otherwise sit in a pale
   slab. Falls back to the alt text if it will not load. */
.nv.brand{display:inline-flex;align-items:center;padding:0}
.brandmark{height:27px;width:auto;display:block}
/* Bigger than the cap height of the nav text, so the bar grows a little
   and the mark reads as the mark rather than another nav item. */
.nv.brand{margin-right:2px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brandmark{filter:invert(1) hue-rotate(180deg) saturate(.9) brightness(1.06)}
}
:root[data-theme="dark"] .brandmark{filter:invert(1) hue-rotate(180deg) saturate(.9) brightness(1.06)}

/* ---------- ledger tools + the line picker ----------
   The picker is a pop-up over the page: one list of categories and items,
   presets that tick parts of it, and a switch between build-stage order and
   trades A-Z. Everything uses the existing tokens, so dark mode comes free. */
.ledgerbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.ledgerbar .addbtn{margin:0 0 10px}
.addbtn.primary{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.addbtn.primary:hover{color:var(--paper);filter:brightness(1.08)}
.addbtn:disabled{opacity:.45;cursor:default}
.tierpick,.tier{
  display:inline-block;margin:5px 8px 0 0;font-family:inherit;font-size:12px;color:var(--ink-3);vertical-align:middle;
}
.tierpick{border:1px solid var(--rule);background:var(--card);padding:2px 4px;max-width:100%}

body.pkopen{overflow:hidden}
.pkveil{
  position:fixed;inset:0;z-index:50;background:rgba(10,18,28,.46);
  display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;
}
.picker{
  background:var(--paper);color:var(--ink);width:100%;max-width:880px;max-height:92vh;
  display:flex;flex-direction:column;border:1px solid var(--rule);box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.picker .pkhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 4px}
.picker .pkhead h2{margin:0;font-size:22px;letter-spacing:-.01em}
.pkclose{
  font:inherit;font-size:26px;line-height:1;width:36px;height:36px;border:1px solid transparent;
  background:transparent;color:var(--ink-3);cursor:pointer;
}
.pkclose:hover{border-color:var(--rule);color:var(--ink)}
.pkhint{color:var(--ink-3);font-size:14px;margin:4px 22px 12px;max-width:70ch}
.pkpresets{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;padding:0 22px}
.pkpreset{
  font-family:inherit;text-align:left;padding:9px 11px;border:1px solid var(--rule);
  background:var(--card);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:3px;
}
.pkpreset b{font-size:14px}
.pkpreset span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.pkpreset:hover{border-color:var(--deep)}
.pkpreset.on{border-color:var(--deep);background:var(--deep-soft);box-shadow:inset 3px 0 0 var(--deep)}
.pkview{display:flex;gap:0;margin:14px 22px 0;border-bottom:1px solid var(--rule)}
.pkview button{
  font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border:none;
  border-bottom:2px solid transparent;background:transparent;color:var(--ink-3);cursor:pointer;margin-bottom:-1px;
}
.pkview button.on{color:var(--deep);border-bottom-color:var(--deep)}
.pkbody{overflow:auto;padding:12px 22px 6px;flex:1 1 auto;min-height:120px}
.pkset{border:none;border-top:1px solid var(--rule-2);margin:0;padding:12px 0 10px}
.pkset:first-child{border-top:none}
.pklegend{display:flex;align-items:center;gap:10px;width:100%;padding:0}
.pklegend label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:15px}
.pkcount{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px;margin:8px 0 6px 24px}
.pkflat{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 14px}
.pk{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:14px;cursor:pointer;line-height:1.35}
.pk input,.pklegend input{margin-top:2px;width:16px;height:16px;accent-color:var(--deep);flex:none}
.pk span{flex:1}
.pk small{display:block;font-size:11.5px;color:var(--ink-3)}
.pk.have{color:var(--ink-3);cursor:default}
.pk.custom span{font-style:italic}
.pkx{font:inherit;font-size:16px;line-height:1;border:none;background:transparent;color:var(--ink-3);cursor:pointer;padding:0 4px}
.pkx:hover{color:var(--alert)}
.pkadd{display:flex;gap:8px;margin:6px 0 0 24px}
.pkadd input,.pktarget input,.pktarget select{
  font-family:inherit;font-size:13.5px;padding:7px 9px;border:1px solid var(--rule);
  background:var(--card);color:var(--ink);min-width:0;
}
.pkadd input{flex:1;max-width:340px}
.pkadd .addbtn{margin:0}
.pknewsec{margin:14px 0 8px;padding-top:12px;border-top:1px dashed var(--rule)}
.pkfoot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 22px 16px;
  border-top:1px solid var(--rule);background:var(--card-2);
}
.pkfoot .addbtn{margin:0}
.pktarget{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.pktarget input{width:150px}
.pksum{margin-left:auto;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .pkveil{padding:0}
  .picker{max-height:100vh;height:100%;border:none}
  .pkgrid,.pkadd{margin-left:0}
  .pkadd input{max-width:none}
  .pksum{margin-left:0;width:100%}
}

/* ---------- photos: add, remove, caption ---------- */
.grid figure{position:relative}
.phx{
  position:absolute;top:6px;right:6px;width:30px;height:30px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);background:rgba(15,22,32,.62);color:#fff;
  font:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.85;
}
.phx:hover,.phx:focus-visible{opacity:1;background:var(--alert);border-color:var(--alert)}
.editable figcaption .ed,.editable .slot .ed{display:inline-block;min-width:8em;min-height:1.3em}
.editable figcaption .ed.empty{font-style:italic}

/* ---------- documents ---------- */
.ledger.docs td{vertical-align:middle}
.docopen{font-size:12.5px;font-weight:600;color:var(--deep);margin-left:8px;white-space:nowrap}
.docsize{font-size:11.5px;color:var(--ink-3);margin-left:6px;white-space:nowrap}
.ledger.docs .note{margin-top:4px}
.ledger.docs td:first-child{white-space:nowrap}

/* ---------- "add to home screen" tip ---------- */
#ptohtip{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 12px;max-width:520px;margin:0 auto;
  background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:14px;line-height:1.4;
}
#ptohtip img{width:40px;height:40px;border-radius:10px;flex:none}
#ptohtip .tt{flex:1}
#ptohtip .tsteps{margin:6px 0 0;padding-left:18px}
#ptohtip .tsteps li{margin:3px 0}
#ptohtip .ta{font:inherit;font-weight:700;font-size:14px;padding:8px 14px;border-radius:8px;border:0;background:#195093;color:#fff;cursor:pointer}
#ptohtip .tx{font:inherit;font-size:22px;line-height:1;width:32px;height:32px;border:0;background:transparent;color:var(--ink-3);cursor:pointer}

/* ---------- GC pricing and change orders ---------- */
.ledger td.client,.ledger th.client{background:var(--deep-soft);font-weight:700}
.ledger tr.sum td.client{background:var(--deep-soft)}
.cotag{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--brass);margin-bottom:2px}
.ledger tr.cogrp td{background:var(--brass-soft);color:var(--brass)}
.ledger tr.drawrow td{background:color-mix(in srgb,var(--deep-soft) 55%,transparent)}
.gcnote{margin-top:-6px}
.gctiles .t:last-child dd{font-weight:800}
.tiles.gctiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.ledger .pf{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.ledger .pf.neg{color:var(--alert)}
.ledger .pfoot{font-size:11.5px;color:var(--ink-3);font-weight:500}
.ledger .allow{display:block;font-size:12px;color:var(--brass);margin-top:3px}
.ledger .ou{display:block;font-size:11.5px;font-weight:600}
.ledger .over{color:var(--alert)} .ledger .under{color:var(--deep)}
.ledger span.over,.ledger span.under{font-weight:700}
.draftchip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--brass-soft);color:var(--brass);margin-right:4px}
.lockstate{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--deep);margin:0 0 10px 4px}
.tiles.gctiles .t:last-child{grid-column:1/-1}