:root{
  --rail-fg:#CFDDDA;
  --rail-fg-dim:#7FA39D;
  --rail-fg-strong:#FFFFFF;
  --petrol:#0F312E;
  --petrol-700:#17453F;
  --petrol-500:#2A5F58;
  --canvas:#EDEFEC;
  --surface:#FFFFFF;
  --rule:#D6DBD5;
  --rule-soft:#E6E9E4;
  --text:#1B211F;
  --muted:#5F6B66;
  --signal:#C97400;
  --signal-soft:#FBF1E2;
  --positive:#2E6B4F;
  --danger:#9B3226;
  --focus:#1E7F74;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);
  color:var(--text);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--focus)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- prototype strip ---------- */
.proto{
  background:#241F1A;color:#EFE7DA;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:7px 16px;font-size:12.5px;
}
.proto b{font-weight:700;letter-spacing:.01em}
.proto span{color:#A79885}
.proto .sw{display:flex;gap:0;margin-left:auto;border:1px solid #4A4038;border-radius:4px;overflow:hidden}
.proto .sw button{background:transparent;border:0;color:#C8BCAB;padding:5px 13px;cursor:pointer;font-size:12.5px}
.proto .sw button+button{border-left:1px solid #4A4038}
.proto .sw button[aria-pressed="true"]{background:#EFE7DA;color:#241F1A;font-weight:600}

/* ---------- frame ---------- */
.frame{display:flex;min-height:calc(100vh - 34px)}
.rail{
  width:236px;flex:0 0 236px;background:var(--petrol);color:var(--rail-fg);
  display:flex;flex-direction:column;
}
.brand{padding:20px 20px 18px;border-bottom:1px solid var(--petrol-700)}
.brand .mark{
  display:block;font-weight:800;font-size:17px;color:var(--rail-fg-strong);
  font-stretch:112%;letter-spacing:-.01em;line-height:1.15;
}
.brand .sub{display:block;font-size:12px;color:var(--rail-fg-dim);margin-top:3px}
.nav{padding:12px 10px;flex:1}
.nav button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:transparent;border:0;color:var(--rail-fg);padding:8px 10px;border-radius:4px;
  cursor:pointer;font-size:14px;margin-bottom:1px;
}
.nav button:hover{background:var(--petrol-700)}
.nav button[aria-current="page"]{background:var(--petrol-700);color:var(--rail-fg-strong);font-weight:600}
.nav .pill{
  margin-left:auto;background:var(--signal);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;text-align:center;border-radius:9px;padding:1px 6px;
}
.nav .grp{font-size:11.5px;color:var(--rail-fg-dim);padding:14px 10px 5px;font-weight:600}
.who{padding:14px 20px;border-top:1px solid var(--petrol-700);font-size:12.5px}
.who .n{color:var(--rail-fg-strong);font-weight:600;display:block}
.who .r{color:var(--rail-fg-dim)}

.main{flex:1;min-width:0;padding:26px 34px 60px}
.head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.head h1{
  margin:0;font-size:25px;font-weight:700;font-stretch:110%;letter-spacing:-.015em;line-height:1.1;
}
.head p{margin:5px 0 0;color:var(--muted);font-size:13.5px;max-width:62ch}
.head .act{margin-left:auto;display:flex;gap:8px}

/* ---------- controls ---------- */
.btn{
  background:var(--petrol);color:#fff;border:1px solid var(--petrol);
  padding:8px 15px;border-radius:4px;cursor:pointer;font-weight:600;font-size:14px;
}
.btn:hover{background:var(--petrol-700)}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--rule)}
.btn.ghost:hover{background:#F4F6F3}
.btn.quiet{background:transparent;border-color:transparent;color:var(--focus);padding:6px 8px}
.btn.quiet:hover{background:#E5EDEB}
.btn.warn{background:var(--surface);color:var(--danger);border-color:#E0C4BF}
.btn.sm{padding:5px 11px;font-size:13px}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{
  background:var(--surface);border:1px solid var(--rule);color:var(--muted);
  padding:5px 12px;border-radius:16px;cursor:pointer;font-size:13px;
}
.chip[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff;font-weight:600}

.field{display:block;margin-bottom:14px}
.field .lbl{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.field .hint{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.inp{
  width:100%;padding:8px 10px;border:1px solid var(--rule);border-radius:4px;background:#fff;
}
.inp:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 3px rgba(30,127,116,.14)}

/* ---------- latest posting band ---------- */
.latest{
  background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--signal);
  border-radius:3px;padding:18px 20px;margin-bottom:26px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.latest .per{
  font-size:31px;font-weight:800;font-stretch:108%;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.latest .per small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:5px;font-stretch:100%}
.latest .mid{flex:1;min-width:180px}
.latest .mid strong{display:block;font-size:15.5px}
.latest .mid span{color:var(--muted);font-size:13px}
.latest .amt{text-align:right;font-variant-numeric:tabular-nums}
.latest .amt b{display:block;font-size:22px;font-weight:700}
.latest .amt span{font-size:12.5px;color:var(--muted)}
.winddown{
  background:#E7EFEE;border:1px solid #C6D9D6;border-left:5px solid var(--focus);
  border-radius:3px;padding:18px 20px;margin-bottom:26px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.winddown .per{
  font-size:25px;font-weight:800;font-stretch:108%;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;color:#154A45;
}
.winddown .per small{display:block;font-size:12.5px;font-weight:600;color:#40706A;letter-spacing:0;margin-top:5px;font-stretch:100%}
.winddown .mid{flex:1;min-width:220px}
.winddown .mid strong{display:block;font-size:15.5px;color:#154A45}
.winddown .mid span{color:#3D6A65;font-size:13px;display:block;max-width:66ch}

/* ---------- ledger ---------- */
.yr{
  display:flex;align-items:baseline;gap:10px;margin:24px 0 8px;
  font-size:13px;font-weight:700;color:var(--muted);
}
.yr::after{content:"";flex:1;height:1px;background:var(--rule)}
.ledger{background:var(--surface);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.row{
  display:grid;grid-template-columns:120px 1fr 128px 96px auto;gap:16px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--rule-soft);
}
.row:last-child{border-bottom:0}
.row:hover{background:#FAFBF9}
.row.new{background:var(--signal-soft);box-shadow:inset 3px 0 0 var(--signal)}
.row .per{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.row .nm{min-width:0}
.row .nm strong{display:block;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .nm span{font-size:12.5px;color:var(--muted)}
.row .ty{font-size:13px;color:var(--muted)}
.row .dt{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.row .go{display:flex;gap:4px;justify-content:flex-end}
.tagnew{
  display:inline-block;background:var(--signal);color:#fff;font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:3px;margin-left:7px;vertical-align:1px;
}
.ext{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:3px;font-size:10px;font-weight:700;color:#fff;flex:0 0 30px;
}
.ext.pdf{background:#8C3A2E}
.ext.xlsx{background:#2E6B4F}
.rowflex{display:flex;align-items:center;gap:11px;min-width:0}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--rule);border-radius:3px}
.tbl th{
  text-align:left;font-size:12.5px;font-weight:700;color:var(--muted);
  padding:10px 14px;border-bottom:1px solid var(--rule);
}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--rule-soft);font-size:14px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#FAFBF9}
.num{font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.dot.on{background:var(--positive)}
.dot.off{background:#B7BFBA}
.dot.wait{background:var(--signal)}

/* ---------- panels / stats ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:18px 20px}
.panel h2{margin:0 0 3px;font-size:15px;font-weight:700}
.panel .sub{margin:0 0 14px;color:var(--muted);font-size:13px}
.stats{display:flex;gap:0;background:var(--surface);border:1px solid var(--rule);border-radius:3px;margin-bottom:22px;flex-wrap:wrap}
.stat{flex:1;min-width:150px;padding:16px 20px;border-right:1px solid var(--rule-soft)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12.5px;color:var(--muted)}
.stat.alert b{color:var(--signal)}

.empty{
  background:var(--surface);border:1px dashed var(--rule);border-radius:3px;
  padding:44px 28px;text-align:center;
}
.empty strong{display:block;font-size:16px;margin-bottom:6px}
.empty p{margin:0 auto 16px;color:var(--muted);max-width:46ch;font-size:13.5px}

.note{
  background:#E7EFEE;border:1px solid #C6D9D6;border-radius:3px;
  padding:11px 14px;font-size:13px;color:#1F4B46;margin-bottom:18px;
}
.note b{font-weight:700}

/* ---------- modal ---------- */
.veil{
  position:fixed;inset:0;background:rgba(20,32,30,.5);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:40;
}
.veil.open{display:flex}
.modal{
  background:var(--surface);border-radius:5px;width:100%;max-width:560px;
  max-height:90vh;overflow:auto;box-shadow:0 18px 50px rgba(10,25,22,.3);
}
.modal header{padding:18px 22px 14px;border-bottom:1px solid var(--rule)}
.modal header h2{margin:0;font-size:18px;font-weight:700}
.modal header p{margin:4px 0 0;color:var(--muted);font-size:13px}
.modal .body{padding:20px 22px}
.modal footer{padding:14px 22px;border-top:1px solid var(--rule);display:flex;gap:8px;justify-content:flex-end}
.drop{
  border:1px dashed var(--rule);border-radius:4px;padding:26px;text-align:center;
  color:var(--muted);font-size:13.5px;background:#FAFBF9;margin-bottom:16px;
}
.check{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px;font-size:14px}
.check input{margin-top:3px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--petrol);color:#fff;padding:11px 18px;border-radius:4px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.matrix td:first-child{font-weight:600}
.yes{color:var(--positive);font-weight:700}
.no{color:#B7BFBA}

/* tablet: keep the rail, tighten everything */
@media (max-width:1100px){
  .rail{width:200px;flex:0 0 200px}
  .main{padding:22px 22px 60px}
  .row{grid-template-columns:104px 1fr 96px auto;gap:12px}
  .row .dt{display:none}
}
/* phone and small tablet: stacked, thumb-sized */
@media (max-width:820px){
  body{font-size:16px}
  .frame{flex-direction:column;min-height:0}
  .rail{width:100%;flex:none;position:sticky;top:0;z-index:30}
  .brand{padding:14px 16px 12px;display:flex;align-items:baseline;gap:8px}
  .brand .mark{font-size:15px}
  .brand .sub{margin-top:0;font-size:11.5px}
  .nav{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;-webkit-overflow-scrolling:touch}
  .nav button{width:auto;white-space:nowrap;margin-bottom:0;padding:9px 14px;min-height:42px;font-size:14.5px}
  .nav .grp{display:none}
  .who{display:none}
  .main{padding:18px 14px 56px}

  .head{margin-bottom:16px}
  .head h1{font-size:22px}
  .head .act{margin-left:0;width:100%;flex-direction:column}
  .head .act .btn{width:100%;min-height:46px}

  .latest{padding:16px;gap:14px}
  .latest .per{font-size:25px}
  .latest .amt{text-align:left}
  .latest .btn{width:100%;min-height:48px;font-size:16px}

  .chips{gap:7px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .chip{white-space:nowrap;padding:8px 15px;min-height:40px}

  /* ledger rows restack: period label on top, file and action below */
  .row{
    grid-template-columns:1fr auto;
    grid-template-areas:"per per" "nm nm" "go go";
    row-gap:9px;padding:14px 15px;
  }
  .row>:nth-child(1){grid-area:per;font-size:12.5px;color:var(--muted);font-weight:600}
  .row>:nth-child(1)::before{content:"Period ending "}
  .row>:nth-child(2){grid-area:nm}
  .row>:nth-child(3),.row>:nth-child(4){display:none}
  .row>:nth-child(5){grid-area:go;justify-content:stretch;gap:8px}
  .row .go .btn{flex:1;min-height:46px;font-size:15px}
  .row .go .btn.quiet{flex:0 0 84px;border:1px solid var(--rule);background:var(--surface)}
  .row .nm strong{white-space:normal;font-size:16px;line-height:1.3}

  /* wide admin tables scroll sideways rather than crush */
  .tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .tbl td,.tbl th{padding:13px 14px}
  .tbl .btn.sm{min-height:40px;padding:8px 12px}

  .stat{min-width:50%;border-right:0;border-bottom:1px solid var(--rule-soft);padding:14px 16px}
  .panel{padding:16px}
  .inp{padding:11px 12px;min-height:46px}
  .btn{min-height:44px}
  .check{margin-bottom:14px;font-size:15px}
  .modal{max-width:none;border-radius:5px 5px 0 0;max-height:94vh;align-self:flex-end}
  .veil{padding:0;align-items:flex-end}
  .modal footer{position:sticky;bottom:0;background:var(--surface)}
  .modal footer .btn{flex:1;min-height:48px}
  .proto{font-size:12px;padding:8px 12px}
  .proto span{display:none}
  .proto .sw{margin-left:0;width:100%;flex-wrap:wrap}
  .proto .sw button{flex:1;min-height:38px}
}

/* ---------- additions for the live application ---------- */
.nav .navlink{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;text-decoration:none;
  background:transparent;border:0;color:var(--rail-fg);padding:8px 10px;border-radius:4px;
  font-size:14px;margin-bottom:1px;
}
.nav .navlink:hover{background:var(--petrol-700)}
.nav .navlink[aria-current="page"]{background:var(--petrol-700);color:var(--rail-fg-strong);font-weight:600}
.who .signout{margin-top:8px}
.who .signout .btn{color:var(--rail-fg-dim);padding:4px 0}
.who .signout .btn:hover{background:transparent;color:var(--rail-fg-strong);text-decoration:underline}

.flash{
  background:#E7EFEE;border:1px solid #C6D9D6;color:#1F4B46;
  border-radius:3px;padding:11px 14px;font-size:14px;margin-bottom:18px;
}
.flash.bad{background:#F7EBE9;border-color:#E0C4BF;color:#7E2A20}

.gate{max-width:440px;margin:0 auto;padding:52px 20px}
.gate .card{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:28px}
.gate h1{margin:0 0 4px;font-size:22px;font-weight:700;font-stretch:110%;letter-spacing:-.015em}
.gate .lead{margin:0 0 22px;color:var(--muted);font-size:14px}
.gate .co{font-weight:800;font-size:17px;color:var(--petrol);font-stretch:112%;margin-bottom:20px;display:block}
.gate .foot{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
.gate .btn{width:100%;min-height:46px;font-size:15px}
body.plain{background:var(--canvas)}

.pill{margin-left:auto;background:var(--signal);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;text-align:center;border-radius:9px;padding:1px 6px}

.stage-row{display:grid;grid-template-columns:1fr 200px 150px 130px;gap:12px;align-items:end;
  padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.stage-row:last-child{border-bottom:0}
.stage-row .field{margin-bottom:0}
.filename{font-weight:600;font-size:14px;word-break:break-all}
.filemeta{font-size:12.5px;color:var(--muted)}
.matched{color:var(--positive);font-size:12.5px;font-weight:600}
.unmatched{color:var(--signal);font-size:12.5px;font-weight:600}
@media (max-width:820px){.stage-row{grid-template-columns:1fr;gap:8px}}

.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.06em;
  background:#F4F6F3;border:1px solid var(--rule);border-radius:3px;padding:9px 12px;
  display:block;word-break:break-all}
.passcode{font-size:24px;font-weight:700;letter-spacing:.14em;text-align:center;
  background:#F4F6F3;border:1px dashed var(--rule);border-radius:4px;padding:16px}
.state{font-size:12.5px;font-weight:600}
.state.ok{color:var(--positive)}
.state.wait{color:var(--signal)}
.state.bad{color:var(--danger)}
.state.off{color:var(--muted)}

/* ---------- branding ---------- */
.logo{max-height:34px;max-width:180px;display:block}
.logo-lg{max-height:52px;max-width:240px;margin:0 auto 18px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.swatch{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--rule);
  border-radius:4px;padding:7px 11px;cursor:pointer;font-size:13px}
.swatch:hover{background:#F4F6F3}
.swatch i{width:14px;height:14px;border-radius:3px;display:block}
.colorrow{display:flex;gap:10px;align-items:center}
.colorrow input[type=color]{width:52px;height:44px;padding:2px;border:1px solid var(--rule);
  border-radius:4px;background:#fff;cursor:pointer}
.colorrow input[type=text]{flex:1}
.brandprev{border:1px solid var(--rule);border-radius:4px;overflow:hidden;display:flex;min-height:132px}
.brandprev .pv-rail{width:132px;background:var(--petrol);padding:14px 12px}
.brandprev .pv-mark{color:var(--rail-fg-strong);font-weight:800;font-size:13px;line-height:1.2}
.brandprev .pv-sub{color:var(--rail-fg-dim);font-size:10.5px;margin-top:3px}
.brandprev .pv-item{color:var(--rail-fg);font-size:12px;padding:5px 7px;border-radius:3px;margin-top:9px}
.brandprev .pv-item.on{background:var(--petrol-700);color:var(--rail-fg-strong);font-weight:600}
.brandprev .pv-body{flex:1;background:var(--canvas);padding:14px}
.brandprev .pv-card{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--signal);
  border-radius:3px;padding:10px 12px;font-size:12.5px}
.brandprev .pv-tag{display:inline-block;background:var(--signal);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:3px;margin-left:6px}
.brandprev .pv-btn{display:inline-block;background:var(--petrol);color:var(--rail-fg-strong);font-size:12px;
  font-weight:600;padding:7px 13px;border-radius:4px;margin-top:10px}
.contrastnote{font-size:12.5px;color:var(--muted);margin-top:6px}