:root{
  /* Layout: fixed left rail for the seven pages, scrolling work area on the right.
     Document numbers and dates are set in mono, like a deliverables register. */
  --bg:#f2f4f7; --surface:#ffffff; --surface-2:#e8ecf2; --line:#d2d9e3;
  --ink:#16202d; --ink-2:#56647a;
  --accent:#1b5fa8; --accent-ink:#ffffff; --accent-soft:#dbe8f6;
  --good:#1c7448; --good-soft:#dcf0e5; --warn:#935800; --warn-soft:#f8e9cc; --crit:#b3261e; --crit-soft:#f9dedb;
  --plan:#8a6d1c; --actual:#1b5fa8;
  --font-display:'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --radius:6px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10161e; --surface:#18212c; --surface-2:#222d3b; --line:#324052;
    --ink:#e6ebf2; --ink-2:#9aa8bb;
    --accent:#6fb0f2; --accent-ink:#0c1620; --accent-soft:#1d3552;
    --good:#5fcf95; --good-soft:#163526; --warn:#f0b34c; --warn-soft:#3b2c0f; --crit:#ff8a80; --crit-soft:#47201d;
    --plan:#a8862f; --actual:#3d8ee0; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10161e; --surface:#18212c; --surface-2:#222d3b; --line:#324052;
  --ink:#e6ebf2; --ink-2:#9aa8bb;
  --accent:#6fb0f2; --accent-ink:#0c1620; --accent-soft:#1d3552;
  --good:#5fcf95; --good-soft:#163526; --warn:#f0b34c; --warn-soft:#3b2c0f; --crit:#ff8a80; --crit-soft:#47201d;
  --plan:#a8862f; --actual:#3d8ee0; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--font-body)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{display:grid;grid-template-columns:232px 1fr;height:100%}
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;padding:18px 12px;overflow:auto}
.brand{font:600 19px/1.1 var(--font-display);letter-spacing:.02em;padding:0 8px}
.brand small{display:block;font:400 11px var(--font-mono);color:var(--ink-2);margin-top:4px;letter-spacing:0}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{all:unset;cursor:pointer;padding:8px 10px;border-radius:var(--radius);color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;gap:8px}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--accent-soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.nav .lock{font:400 10px var(--font-mono);color:var(--ink-2)}
.navhead{font:500 11px var(--font-mono);color:var(--ink-2);padding:8px 10px 2px;text-transform:uppercase;letter-spacing:.06em}
.who{margin-top:auto;border-top:1px solid var(--line);padding:12px 8px 0;display:flex;flex-direction:column;gap:6px}
.who label{font:500 11px var(--font-mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.who p{margin:0;font-size:12px;color:var(--ink-2)}
select,input[type=text],input[type=email],textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:7px 9px;width:100%}
.main{overflow:auto;min-width:0}
.wrap{max-width:1180px;margin:0 auto;padding:22px 24px 48px;display:flex;flex-direction:column;gap:18px}
.crumbs{font:400 12px var(--font-mono);color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumbs button{all:unset;cursor:pointer;color:var(--accent);text-decoration:underline}
.proto{margin-left:auto;background:var(--warn-soft);color:var(--warn);border-radius:99px;padding:2px 10px;font:500 11px var(--font-mono)}
h1{font:600 28px/1.15 var(--font-display);margin:0;text-wrap:balance}
h2{font:600 17px/1.2 var(--font-display);margin:0;letter-spacing:.01em}
.sub{color:var(--ink-2);margin:4px 0 0}
.mono{font-family:var(--font-mono);font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.grid{display:grid;gap:14px}
.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.pcard{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--accent)}
.pcard:hover{border-color:var(--accent)}
.pcard h2{font-size:19px}
.bars{display:grid;grid-template-columns:52px 1fr 52px;gap:6px 10px;align-items:center;font-size:12.5px}
.bar{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px}
.bar .a{background:var(--actual)} .bar .p{background:var(--plan)}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 9px;font:500 11.5px var(--font-mono);white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.pill.good{background:var(--good-soft);color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.crit{background:var(--crit-soft);color:var(--crit)} .pill.acc{background:var(--accent-soft);color:var(--ink)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.facts div{display:flex;flex-direction:column;gap:2px}
.facts dt,.lbl{font:500 11px var(--font-mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:0;font-weight:500}
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font:500 11px var(--font-mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-2)}
tr.grp td{background:var(--surface-2);font:600 12px var(--font-mono)}
.empty{color:var(--ink-2);padding:14px 10px;font-size:13px}
.sec{display:flex;flex-direction:column;gap:8px}
.sec>.row h2{display:flex;gap:8px;align-items:center}
.stripe{border-left:3px solid var(--line)} .stripe.crit{border-left-color:var(--crit)} .stripe.warn{border-left-color:var(--warn)} .stripe.acc{border-left-color:var(--accent)}
.btn{all:unset;box-sizing:border-box;cursor:pointer;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);padding:8px 14px;font-weight:600;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.sm{padding:4px 9px;font-size:12px}
.btn.danger{background:var(--crit);color:#fff}
.btn:hover{filter:brightness(1.08)}
.link{all:unset;cursor:pointer;color:var(--accent);text-decoration:underline;font:400 12.5px var(--font-mono)}
.ms{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mscard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;border-top:3px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mscard.done{border-top-color:var(--good)} .mscard.late{border-top-color:var(--crit)} .mscard.next{border-top-color:var(--accent)}
.mscard b{font:600 20px var(--font-display)}
.mscard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12.5px}
.mscard dt{color:var(--ink-2)} .mscard dd{margin:0;font-family:var(--font-mono);font-size:12px}
.big{height:14px;border-radius:7px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs button{all:unset;cursor:pointer;padding:8px 14px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.chip{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:99px;padding:1px 8px;font:400 11px var(--font-mono);color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:4px;padding:6px 9px;font:400 12px var(--font-mono);white-space:nowrap;display:none;z-index:2}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid;vertical-align:middle;margin-right:6px}
.legend i.sq{width:12px;height:10px;border:0;border-radius:2px}
.gantt{min-width:920px;font-size:12px}
.grow{display:grid;grid-template-columns:300px 1fr;border-bottom:1px solid var(--line);min-height:26px;align-items:center}
.grow.h{position:sticky;top:0;background:var(--surface);z-index:1}
.grow .lab{padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{position:relative;height:26px}
.track .gb{position:absolute;top:7px;height:12px;border-radius:3px;background:var(--accent-soft);border:1px solid var(--accent);overflow:hidden}
.track .gb i{display:block;height:100%;background:var(--accent)}
.track .gb.cr{background:var(--crit-soft);border-color:var(--crit)} .track .gb.cr i{background:var(--crit)}
.track .now{position:absolute;top:0;bottom:0;border-left:1px dashed var(--ink-2)}
.track .mo{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);padding-left:4px;font:400 11px var(--font-mono);color:var(--ink-2);line-height:26px}
.modal{position:fixed;inset:0;background:rgba(10,15,22,.55);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:10;overflow:auto}
.modal form{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px;width:100%;max-width:480px;display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12.5px;font-weight:500}
.err{color:var(--crit);font-size:12.5px;min-height:1em}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:var(--radius);font-size:13px;z-index:20;max-width:90vw}
.note{font-size:12.5px;color:var(--ink-2)}
.app.out{grid-template-columns:1fr;grid-template-rows:1fr}.app.out .rail{display:none}
.login{max-width:400px;margin:6vh auto 0;display:flex;flex-direction:column;gap:14px}
.co{display:flex;align-items:center;gap:14px}
.co img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:3px}
.co b{font:600 22px/1.15 var(--font-display);display:block}
.ann img{max-width:100%;max-height:340px;border-radius:var(--radius);display:block}
.ann p{margin:0;white-space:pre-wrap;max-width:70ch}
@media (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .rail{border-right:0;border-bottom:1px solid var(--line);padding:12px;gap:10px}
  .nav{flex-direction:row;flex-wrap:wrap}.navhead{display:none}
  .who{margin-top:0}
  .wrap{padding:16px}
}
@media (prefers-reduced-motion:no-preference){.bar i{transition:width .3s}}

details.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
details.form>summary{cursor:pointer;font-weight:600}
details.form[open]>summary{margin-bottom:12px}
form.stack{display:flex;flex-direction:column;gap:12px;max-width:560px}
input[type=password],input[type=number],input[type=date]{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:7px 9px;width:100%}
.flash{border-radius:var(--radius);padding:10px 14px;font-weight:500}
.flash.ok{background:var(--good-soft);color:var(--good)} .flash.err{background:var(--crit-soft);color:var(--crit)}
.nav a{padding:8px 10px;border-radius:var(--radius);color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;gap:8px;text-decoration:none}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
a.pcard{text-decoration:none;color:inherit}
a{color:var(--accent)}
.crumbs a{color:var(--accent)}
.tabs a{padding:8px 14px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs a[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
a.btn{text-decoration:none;display:inline-block}
td form{display:inline}
label.cb{display:inline-flex;gap:5px;align-items:center;font:400 11.5px var(--font-mono);margin-right:8px;white-space:nowrap}
.printhead{display:none}
@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){
    --bg:#fff; --surface:#fff; --surface-2:#eef1f5; --line:#c9d1dc; --ink:#111822; --ink-2:#4a5669;
    --accent:#1b5fa8; --accent-ink:#fff; --accent-soft:#dbe8f6;
    --good:#1c7448; --good-soft:#dcf0e5; --warn:#935800; --warn-soft:#f8e9cc; --crit:#b3261e; --crit-soft:#f9dedb;
    --plan:#8a6d1c; --actual:#1b5fa8; color-scheme:light;
  }
  @page{size:A4 portrait;margin:14mm 12mm}
  html,body{height:auto;background:#fff}
  body{font-size:11px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .app{display:block;height:auto}
  .rail,.noprint,.crumbs,.flash{display:none !important}
  .main{overflow:visible}
  .wrap{max-width:none;padding:0;gap:12px}
  .printhead{display:flex;flex-direction:column;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:10px}
  .card{break-inside:avoid}
  .tblwrap{overflow:visible;break-inside:auto}
  table{font-size:10.5px} th,td{padding:5px 7px} tr{break-inside:avoid} td.num{white-space:nowrap}
  thead{display:table-header-group}
  h2{break-after:avoid}
  a{color:inherit;text-decoration:none}
}