:root{
  --bg:#0F1113;--surface:#16191C;--surface2:#1C2024;--line:#2A2F35;--line2:#363C43;
  --gold:#C8A951;--gold-soft:rgba(200,169,81,.12);--text:#E9E7E4;--muted:#8C9299;--muted2:#5F666D;
  --green:#4FA97F;--amber:#D9A441;--red:#C0574A;--blue:#5E8FBA;--purple:#8F7AB8;--radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:13.5px/1.55 'Segoe UI',system-ui,-apple-system,sans-serif;display:flex;min-height:100vh}
h1{font-size:21px;font-weight:600;color:var(--gold);letter-spacing:.02em}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--gold);font-weight:600}
a{color:inherit;text-decoration:none}
.sidebar{width:230px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:20px;border-bottom:1px solid var(--line)}
.logo{display:block;width:132px;height:auto}
.brand a{display:block;line-height:0}
.sub{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2)}
.nav{padding:12px 0}
.nav .label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);padding:14px 20px 6px}
.nav a{display:block;padding:8px 20px;color:var(--muted);font-size:13px;font-weight:500;border-left:2px solid transparent}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.025)}
.nav a.on{color:var(--gold);background:var(--gold-soft);border-left-color:var(--gold)}
.build{padding:0 20px 12px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);opacity:.7}
.who{margin-top:auto;padding:14px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}
.who b{display:block;color:var(--text);font-size:12px}
.who span{font-size:10px;text-transform:capitalize}
.avatar{width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#8A7538);color:#171308;display:grid;place-items:center;font-weight:700}
.main{flex:1;min-width:0;padding:26px 30px 60px;max-width:1500px}
.head{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.desc{font-size:12px;color:var(--muted);margin-top:4px}
.spacer{flex:1}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.g21{grid-template-columns:2fr 1fr}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2,.g21{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.card .ch{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card .cb{padding:16px}
.card .cb.flush{padding:0}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
.kpi .k{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted2)}
.kpi .v{font-size:23px;font-weight:600;margin-top:7px;line-height:1.1}
.kpi .v.gold{color:var(--gold)}.kpi .v.red{color:var(--red)}
.kpi .d{font-size:11px;color:var(--muted);margin-top:6px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{text-align:left;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--surface2);white-space:nowrap}
tbody td{padding:10px 14px;border-bottom:1px solid rgba(42,47,53,.6);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.click:hover{background:rgba(200,169,81,.05)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{text-align:right}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted)}
.sub2{font-size:11px;color:var(--muted);display:block}
.pill{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2.5px 8px;border-radius:11px;white-space:nowrap}
.green{background:rgba(79,169,127,.14);color:var(--green)}
.amber{background:rgba(217,164,65,.14);color:var(--amber)}
.red{background:rgba(192,87,74,.16);color:var(--red)}
.blue{background:rgba(94,143,186,.15);color:var(--blue)}
.grey{background:rgba(140,146,153,.13);color:var(--muted)}
.gold{background:var(--gold-soft);color:var(--gold)}
.purple{background:rgba(143,122,184,.16);color:var(--purple)}
.alert{display:flex;gap:11px;padding:11px 14px;border-radius:var(--radius);font-size:12px;border:1px solid;margin-bottom:10px}
.alert.a-high{background:rgba(192,87,74,.07);border-color:rgba(192,87,74,.3);color:#e5a99f}
.alert.a-medium{background:rgba(217,164,65,.07);border-color:rgba(217,164,65,.3);color:#e8cd94}
.alert.a-low{background:rgba(94,143,186,.07);border-color:rgba(94,143,186,.3);color:#a9c7e0}
.alert b{color:#fff}
.btn{display:inline-block;background:var(--surface2);border:1px solid var(--line2);color:var(--text);font:600 12px inherit;padding:7px 14px;border-radius:var(--radius);cursor:pointer}
.btn:hover{border-color:#8A7538;color:var(--gold)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#171308}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:12.5px}
.dl dt{color:var(--muted2);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.dl dd{font-weight:500}
.foot{font-size:11px;color:var(--muted2);font-style:italic;padding:12px 16px;border-top:1px solid var(--line)}
.missing{color:var(--muted2);font-style:italic}
tbody tr.tot td{border-top:1px solid var(--line2);background:var(--surface2);border-bottom:0}
input[type=date],input[type=month]{color-scheme:dark}

.login{margin:auto;max-width:340px;padding-top:14vh}
.login input{width:100%;padding:10px 12px;margin-bottom:10px;background:var(--surface2);border:1px solid var(--line2);border-radius:var(--radius);color:var(--text);font:14px inherit}
input,select{background:var(--surface2);border:1px solid var(--line2);border-radius:4px;color:var(--text);font:12.5px inherit;padding:5px 7px}
input:focus,select:focus{outline:none;border-color:var(--gold)}
input::placeholder{color:var(--muted2);font-style:italic}
label{display:block}

/* ============================================================
   NARROW SCREENS
   Tenants reach this on a phone far more often than on a desktop —
   a statement is something you check standing in a queue. The fixed
   sidebar takes 230px of a 390px screen, so below 820px it becomes a
   horizontal bar across the top and the tables reflow to stacked rows.
   ============================================================ */
@media (max-width: 820px) {
  body{display:block}

  .sidebar{
    position:static;width:auto;height:auto;
    flex-direction:column;border-right:0;border-bottom:1px solid var(--line);
  }
  .brand{padding:14px 16px 12px;display:flex;align-items:baseline;gap:10px}
  .logo{width:104px}
  .sub{font-size:8.5px}
  .nav{display:flex;flex-wrap:wrap;gap:2px;padding:0 10px 10px}
  .nav .label{display:none}            /* section headings cost a line each */
  .nav a{
    padding:7px 12px;border-left:0;border-radius:14px;
    background:var(--surface2);font-size:12px;
  }
  .nav a.on{background:var(--gold-soft);border-left:0}
  .who{margin-top:0;padding:10px 16px;border-top:1px solid var(--line)}

  .main{padding:16px 14px 48px}
  h1{font-size:18px}
  .head{gap:10px;margin-bottom:14px}
  .grid.g4,.grid.g3,.grid.g2,.grid.g21{grid-template-columns:1fr}
  .kpi .v{font-size:20px}

  /* Tables become stacked rows. Each cell carries its own label, so a
     figure is never orphaned from the column it belonged to. */
  table thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tbody tr{
    border-bottom:1px solid var(--line);padding:10px 2px;
  }
  tbody tr:last-child{border-bottom:0}
  tbody td{
    border-bottom:0;padding:3px 0;display:flex;gap:12px;align-items:baseline;
  }
  tbody td::before{
    content:attr(data-label);flex:0 0 38%;
    font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);
  }
  tbody td:not([data-label])::before{content:none}
  tbody td.num{text-align:left;justify-content:space-between}
  .sub2{margin-top:2px}

  /* Capture form: the wide input grid is genuinely a desktop job, so say
     so rather than shipping something unusable on a phone. */
  .capture-wide{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .capture-wide table,.capture-wide tbody,.capture-wide tr,.capture-wide td{display:table-cell}
  .capture-wide table{display:table;min-width:900px}
  .capture-wide tbody{display:table-row-group}
  .capture-wide tr{display:table-row}
  .capture-wide thead{display:table-header-group}
  .capture-wide td::before{content:none}
}

@media (max-width: 460px) {
  tbody td{display:block}
  tbody td::before{display:block;margin-bottom:1px}
  tbody td.num{text-align:left}
  .btn{padding:8px 14px}          /* comfortable tap target */
}

h2.sect{font:600 12px/1 inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin:22px 0 10px}
summary.ch{cursor:pointer;list-style:none}
summary.ch::-webkit-details-marker{display:none}
summary.ch::before{content:'\25B8';color:var(--muted2);margin-right:9px;font-size:11px;transition:transform .12s}
details[open]>summary.ch::before{content:'\25BE'}
summary.ch:hover h2{color:var(--gold)}

.fl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px}
textarea{background:var(--surface2);border:1px solid var(--line2);border-radius:var(--radius);color:var(--text);font:12.5px inherit;padding:9px 11px;resize:vertical}
textarea:focus{outline:none;border-color:var(--gold)}
.choice{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--line2);border-radius:var(--radius);padding:8px 13px;font-size:12.5px;cursor:pointer}
.choice:hover{border-color:#8A7538}
.choice input{accent-color:var(--gold)}

/* .field, .field label and .field .hint are defined once, in the forms block
   further down. They used to be defined twice with different values; the
   second copy won and the first was dead weight that made every change look
   like it had no effect. */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
.fgrid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.fgrid,.fgrid.g3{grid-template-columns:1fr}}
.fsec{font:600 11px/1 inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:22px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.fsec:first-child{margin-top:0}
.actions{display:flex;gap:10px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- forms
   Two things make a long form unreadable: hints of wildly different lengths
   dragging grid rows out of alignment, and every field being the same width
   regardless of what goes in it. Both are handled here rather than by each
   screen inventing its own spacing. */

/* Column counts come from the space actually available, not from the width of
   the window. A media query cannot see the 300px sidebar, so `min-width:1100px`
   meant a 1200px laptop got two 440px columns while a 1080px one got a single
   stack — the same screen reported as "still one long line". auto-fit measures
   the container instead and is right at every width without being told. */
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:14px;align-items:start}

/* Each column is its own stack. Without this the cards flow row by row and a
   short card on the left drags a gap under the tall one beside it. */
.fcol{display:grid;gap:14px;align-content:start}

.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

/* A section heading has to be unmistakably not a field label: both are small
   uppercase grey text, and at a glance the page turns into one undifferentiated
   column. The gold rule and the darker band are what separate them. */
.fcard>h3{margin:0;padding:11px 16px 11px 13px;font:700 11px/1 inherit;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);background:var(--bg);
  border-bottom:1px solid var(--line);border-left:3px solid var(--gold)}
.fcard>.fb{padding:16px}

/* A row of fields, again sized by the room it has rather than by the window. */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 16px}
.frow.one{grid-template-columns:1fr}
.frow.three{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

.field{margin-bottom:14px;min-width:0}
/* Sentence case, not uppercase. A label and a section heading set in the same
   dim uppercase grey are the reason the page read as one undifferentiated
   column — the headings are the shouty ones now, and the labels are quiet. */
.field label{display:block;font-size:11.5px;letter-spacing:0;text-transform:none;
  color:var(--muted);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;font-size:13.5px;
  background:var(--surface2);border:1px solid var(--line2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field .hint{font-size:10.5px;color:var(--muted2);margin-top:4px;line-height:1.45}

/* A field whose guidance is long enough to unbalance a row gets the row to
   itself rather than leaving a hole beside it. */
.field.wide{grid-column:1 / -1}

/* The save bar follows you down a long form. Opaque rather than a fade — a
   translucent bar over a text field reads as a rendering fault, and the point
   of it is to be unmistakably the thing you press. */
.sticky-save{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);
  box-shadow:0 -10px 18px -10px rgba(0,0,0,.65);
  padding:14px 0;margin-top:14px;display:flex;gap:10px;align-items:center;z-index:5}