/* Gatehaus · drawing-set look: paper, ink, one redline accent */
:root{
  --paper:#F4F3EF; --sheet:#FBFAF7; --tint:#ECEBE6; --ink:#161615; --muted:#5C5C57; --faint:#8A8A84;
  --line:#CFCEC7; --red:#C8391D; --red-soft:#F6E1DB; --good:#2B7A4B; --good-soft:#E1F0E6; --warn:#9A6410; --warn-soft:#F6ECD8;
  --f-body:"Archivo", Arial, system-ui, sans-serif; --f-mono:"IBM Plex Mono", "Courier New", monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--f-body)}
body{padding-block:0 48px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-weight:400;letter-spacing:-.5px;margin:0;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(28px,4vw,44px);font-weight:300}
h2{font-size:26px;font-weight:300}
h3{font-size:18px;font-weight:500}
p{margin:0}
a{color:var(--ink)}
.mono,.label{font-family:var(--f-mono)}
.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.label.red{color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:14px}
.loading{padding:40px 20px;font-family:var(--f-mono);color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* top bar */
.top{border-bottom:1px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:20px;letter-spacing:-.3px;text-decoration:none}
.brand i{display:inline-block;width:22px;height:22px;background:var(--ink);position:relative}
.brand i::after{content:"";position:absolute;left:9px;bottom:0;width:4px;height:9px;background:var(--red)}
.who{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;font-size:14px}

/* buttons, fields */
.btn{border:1px solid var(--ink);background:var(--sheet);padding:9px 16px;cursor:pointer;font-weight:500;font-size:15px}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{border-color:var(--line)}
.btn.link{border:0;background:none;padding:0;text-decoration:underline;text-underline-offset:3px;font-weight:400}
.btn:disabled{opacity:.4;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--sheet);border:1px solid var(--line);padding:10px 12px;font-size:16px;color:var(--ink);width:100%;border-radius:0}
.field textarea{min-height:70px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{margin-top:4px}
.sig input{font-family:"Brush Script MT","Segoe Script",cursive;font-size:24px;color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
form{display:grid;gap:14px}

/* sheets and blocks */
main{padding-block:28px}
.sheet{background:var(--sheet);border:1px solid var(--ink);padding:24px;display:grid;gap:18px;min-width:0}
.rule-top{border-top:1px solid var(--ink);padding-top:16px}
.note{padding:12px 14px;border-left:3px solid var(--ink);background:var(--tint);font-size:15px;display:grid;gap:4px}
.note.red{border-color:var(--red);background:var(--red-soft)}
.note.warn{border-color:var(--warn);background:var(--warn-soft)}
.note.good{border-color:var(--good);background:var(--good-soft)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;font:500 12px/20px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;white-space:nowrap}
.p-locked{color:var(--faint)} .p-active{color:var(--ink)} .p-review{color:var(--warn)} .p-signed{color:var(--good)} .p-red{color:var(--red)}
.summary{display:flex;flex-wrap:wrap;gap:12px 40px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;margin-bottom:22px}
.summary div{display:grid;gap:2px}
.summary b{font-weight:300;font-size:24px;letter-spacing:-.5px}
.summary span{font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--ink);margin-bottom:24px}
.tabs button{border:0;background:none;padding:12px 16px;cursor:pointer;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--red)}
.count{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;background:var(--red);color:#fff;font-size:11px;text-align:center}

/* project list */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{border-top:1px solid var(--ink);padding:16px 0;display:grid;gap:8px;text-decoration:none;color:inherit}
.card:hover h3{text-decoration:underline}

/* stages */
.stage-layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.stage-layout{grid-template-columns:minmax(0,1fr)}}
.track{list-style:none;margin:0;padding:0;display:grid}
.track button{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:12px 4px;border:0;border-top:1px solid var(--line);background:none;cursor:pointer}
.track li:last-child button{border-bottom:1px solid var(--line)}
.track button[aria-current="true"]{background:var(--sheet);box-shadow:inset 3px 0 0 var(--red)}
.track .code{font:500 12px var(--f-mono);color:var(--muted)}
.track .sub{display:block;font-size:12px;color:var(--muted)}
.track li.par{padding-left:16px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0}
.facts div{display:grid;gap:2px}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{margin:0}
table.reg{width:100%;border-collapse:collapse;font-size:15px}
table.reg th{text-align:left;font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px 8px 0;border-bottom:1px solid var(--ink)}
table.reg td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tablebox{overflow-x:auto}
.signbox{border:2px solid var(--red);padding:18px;display:grid;gap:12px;background:#fff}
.stamp{justify-self:start;border:3px double var(--good);color:var(--good);padding:10px 16px;transform:rotate(-1.5deg);display:grid;gap:2px;font:13px var(--f-mono)}
.stamp strong{font:600 20px var(--f-body);letter-spacing:.14em}
.num{font-variant-numeric:tabular-nums}
.right{text-align:right}

/* changes */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:24px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.vo{border-top:1px solid var(--ink);padding:16px 0;display:grid;gap:10px}
.vo-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.breakdown{display:grid;grid-template-columns:1fr auto;gap:2px 16px;font-size:15px;max-width:420px}
.breakdown .tot{font-weight:600;border-top:1px solid var(--line);padding-top:4px}
.preview{border:1px dashed var(--ink);padding:12px;display:grid;gap:4px}

/* timeline */
.gantt-wrap{overflow-x:auto;border:1px solid var(--ink);background:var(--sheet)}
.gantt{min-width:820px;display:grid;grid-template-columns:200px minmax(0,1fr);font-size:13px}
.gantt .lab{padding:7px 12px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt .row{position:relative;border-bottom:1px solid var(--line);height:34px}
.gantt .grp{grid-column:1/-1;padding:8px 12px 4px;font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--tint)}
.gantt .head{position:relative;height:28px;border-bottom:1px solid var(--ink)}
.tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);font:11px var(--f-mono);color:var(--muted);padding:7px 4px 0}
.bar{position:absolute;top:10px;height:14px}
.bar.base{top:6px;height:22px;border:1px dashed var(--faint)}
.bar.plan{background:var(--tint);border:1px solid var(--ink)}
.bar.done{background:var(--good-soft);border:1px solid var(--good)}
.seg-vo{background:var(--warn)} .seg-des{background:var(--ink)} .seg-cli{background:var(--red)}
.bar.buf{background:repeating-linear-gradient(135deg,var(--tint) 0 6px,var(--sheet) 6px 12px);border:1px solid var(--faint)}
.bar.bufused{background:var(--warn)} .bar.bufover{background:var(--red)}
.today{position:absolute;top:0;bottom:0;border-left:2px solid var(--red);pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;vertical-align:-2px;margin-right:6px}

/* auth */
.auth{max-width:440px;margin:40px auto;display:grid;gap:22px}
.auth .sheet{gap:14px}
.switch{display:flex;border:1px solid var(--ink)}
.switch button{flex:1;border:0;background:none;padding:10px;cursor:pointer;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;max-width:min(560px,calc(100vw - 32px));font-size:15px;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.2)}
#toast.err{background:var(--red)}
.copybox{font-family:var(--f-mono);font-size:13px;white-space:pre-wrap;background:var(--tint);border:1px solid var(--line);padding:12px;user-select:all}
footer.foot{margin-top:40px;border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--faint)}