/* Palette drawn from the Silverberg Investments mark, not a generic dashboard.
   ink      #0F1F5A   Silverberg navy, from the wordmark
   accent   #0E43A9   Silverberg blue, from the tower-mark gradient
   paper    #F5F7FA   cool off-white, complements navy
   rule     #D7DEE8
   hazard   #E0A800   amber, at risk  (unchanged - status colour, not a brand colour)
   signal   #B3271B   overdue or breached  (unchanged - status colour)
   go       #1B6252   compliant  (unchanged - status colour)
   chalk    #55607A   secondary text, navy-grey
*/
:root{
  --ink:#0F1F5A; --accent:#0E43A9; --paper:#F5F7FA; --card:#FFFFFF; --rule:#D7DEE8;
  --hazard:#E0A800; --signal:#B3271B; --go:#1B6252; --chalk:#55607A;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Roboto Mono", Consolas, monospace;
  --gap:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.env-banner{
  position:sticky; top:0; z-index:200; text-align:center;
  padding:7px 12px; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; background:#E0A800; color:#3D2E00;
}
h2{font-size:19px; letter-spacing:-.01em; margin:0 0 6px}
h3{font-size:15px; text-transform:uppercase; letter-spacing:.09em; color:var(--chalk);
   margin:36px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--rule)}
.lede{max-width:62ch; color:var(--chalk); margin:0 0 22px}
em{font-style:normal; box-shadow:inset 0 -.45em 0 rgba(224,168,0,.32)}

/* masthead ---------------------------------------------------------------- */
.masthead{
  display:flex; flex-wrap:wrap; gap:var(--gap); align-items:flex-end;
  justify-content:space-between;
  padding:22px 24px 18px; background:var(--ink); color:var(--paper);
}
.masthead-brand{display:flex; align-items:center; gap:14px}
.masthead-logo{
  background:var(--paper); padding:6px 12px; border-radius:3px;
  display:flex; align-items:center;
}
.masthead-logo img{display:block; height:36px; width:auto}
.masthead-mark{display:flex; flex-direction:column; gap:2px}
.masthead-rule{width:44px; height:5px; background:var(--accent); margin-bottom:8px}
.masthead-title{font-size:20px; font-weight:650; letter-spacing:-.015em}
.masthead-sub{font-size:12px; color:#9AA5A1; letter-spacing:.02em}
.project-picker{display:flex; flex-direction:column; gap:5px; font-size:11px;
  text-transform:uppercase; letter-spacing:.11em; color:#9AA5A1}
.project-picker select{
  min-width:270px; padding:9px 11px; font:inherit; font-size:14px; letter-spacing:0;
  text-transform:none; color:var(--ink); background:var(--paper);
  border:0; border-radius:2px;
}
.masthead-right{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap}
.user-badge{display:flex; align-items:center; gap:10px; font-size:12.5px; color:#C8CEE0}
.btn--small{padding:6px 11px; font-size:12px; border-color:#3A4166; color:var(--paper)}
.btn--small:hover{background:var(--paper); color:var(--ink)}

/* login screen -------------------------------------------------------------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--ink); padding:24px;
}
.login-screen[hidden]{display:none}
.login-card{
  background:var(--card); border-radius:4px; padding:32px 32px 28px;
  width:100%; max-width:380px; text-align:center;
}
.login-logo{display:inline-flex; margin:0 auto 18px; padding:8px 14px}
.login-logo img{height:44px}
.login-card h2{margin:0 0 4px}
.login-card .lede{margin:0 0 22px; text-align:center; max-width:none}
.login-card .form{grid-template-columns:1fr}
.login-card .field--wide{grid-column:auto}
.login-card .actions{flex-direction:column; align-items:stretch}
.login-card .btn{width:100%}

/* tabs -------------------------------------------------------------------- */
.tabs{display:flex; gap:2px; padding:0 24px; background:var(--ink); overflow-x:auto}
.tab{
  appearance:none; border:0; cursor:pointer; white-space:nowrap;
  padding:11px 17px; font:inherit; font-size:13px; font-weight:550;
  color:#9AA5A1; background:#1E242A; border-radius:3px 3px 0 0;
}
.tab:hover{color:var(--paper)}
.tab.is-current{background:var(--paper); color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--hazard); outline-offset:-2px}

/* alert banner ------------------------------------------------------------- */
.alert-banner{
  margin:0; padding:12px 24px; background:#FFF4D6; border-bottom:1px solid #E0A800;
  font-size:13.5px; color:#5C4700; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.alert-banner strong{color:#B3271B}
.alert-banner button{
  color:var(--ink); font-weight:600; text-decoration:none; cursor:pointer;
  background:#FFFFFF; border:1px solid #E0A800; border-radius:3px; font:inherit; font-size:13.5px;
  padding:8px 14px; white-space:nowrap; flex-shrink:0;
  min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center;
}
.alert-banner button:hover{background:#FFF9E6}
.alert-status{
  background:var(--card); border:1px solid var(--rule); border-radius:3px;
  padding:16px 18px; font-size:13.5px; max-width:560px; margin-bottom:14px;
}
.alert-status p{margin:0 0 6px}
.alert-status .k{color:var(--chalk)}

main{padding:28px 24px 8px; max-width:1180px}
.view{display:none}
.view.is-current{display:block}

/* summary strip ----------------------------------------------------------- */
.summary{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); margin-bottom:26px}
.report-controls{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:6px}
.report-controls label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink)}
.report-controls select{padding:8px 10px; font:inherit; font-size:13px; border:1px solid var(--rule); border-radius:2px; min-width:260px}
#reportsView h3{margin-top:30px}
#reportsView h3 .k{font-weight:400; color:var(--chalk); font-size:13px}
#reportMadeTable tfoot td, #reportReceivedTable tfoot td{font-weight:700; border-top:2px solid var(--ink)}
.stat{background:var(--card); padding:13px 15px}
.stat-label{font-size:10px; text-transform:uppercase; letter-spacing:.11em; color:var(--chalk)}
.stat-value{font-size:21px; font-weight:600; margin-top:3px; letter-spacing:-.02em}
.stat--alert .stat-value{color:var(--signal)}
.stat--warn  .stat-value{color:#9A7400}

/* claim cards ------------------------------------------------------------- */
.claims{display:flex; flex-direction:column; gap:14px}
.claim{
  background:var(--card); border:1px solid var(--rule); border-left:5px solid var(--rule);
  padding:16px 18px;
}
.claim[data-state="Overdue"], .claim[data-state="Breached"]{border-left-color:var(--signal)}
.claim[data-state="At risk"]{border-left-color:var(--hazard)}
.claim[data-state="On track"], .claim[data-state="Compliant"]{border-left-color:var(--go)}

.claim-head{display:flex; flex-wrap:wrap; gap:12px; align-items:baseline;
  justify-content:space-between}
.claim-no{font-size:16px; font-weight:650}
.claim-no small{font-weight:400; color:var(--chalk); margin-left:9px; font-size:13px}
.claim-amount{font-size:17px; font-weight:600}
.claim-amount small{display:block; text-align:right; font-size:11px; font-weight:400;
  color:var(--chalk); letter-spacing:.05em; text-transform:uppercase}

.badge{display:inline-block; padding:2px 8px; border-radius:2px; font-size:11px;
  font-weight:650; letter-spacing:.05em; text-transform:uppercase}
.badge--go{background:#DCEBE6; color:var(--go)}
.badge--warn{background:#FBEFCC; color:#8A6800}
.badge--alert{background:#F6DDDA; color:var(--signal)}
.badge--flat{background:#E9EDEB; color:var(--chalk)}

/* the signature element: one tick per business day left on the s76 clock ---- */
.clock{margin:14px 0 4px}
.clock-label{font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--chalk); margin-bottom:6px}
.clock-ticks{display:flex; gap:3px; align-items:flex-end; height:20px}
.tick{flex:0 0 12px; height:10px; background:#E3E8E6}
.tick.is-left{height:20px; background:var(--go)}
.clock[data-state="At risk"] .tick.is-left{background:var(--hazard)}
.clock[data-state="Overdue"] .tick.is-left,
.clock[data-state="Breached"] .tick.is-left{background:var(--signal)}
.clock-caption{font-size:12.5px; color:var(--chalk); margin-top:8px; max-width:78ch}

.meta{display:grid; gap:2px 26px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:14px; padding-top:13px; border-top:1px solid var(--rule); font-size:13px}
.meta div{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.meta dt, .meta .k{color:var(--chalk)}
.meta .v{font-weight:550; font-variant-numeric:tabular-nums}
.meta .v--alert{color:var(--signal)}

.claim-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}

.schedule-reasons{
  margin-top:14px; padding:12px 14px; background:#F5F7FA; border-radius:3px; font-size:13px;
}
.schedule-reasons strong{display:block; color:var(--ink); margin-bottom:4px}
.schedule-reasons p{margin:0}
.schedule-reasons--shortfall{background:#F6DDDA}
.schedule-reasons--shortfall strong{color:var(--signal)}
.schedule-pdf-block:not(:empty){margin-top:14px; padding-top:14px; border-top:1px solid var(--rule)}

/* modal ---------------------------------------------------------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,31,90,.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  background:var(--card); border-radius:4px; padding:26px 28px; width:100%;
  max-width:560px; max-height:90vh; overflow-y:auto;
}
.modal h3{margin:0 0 18px}
.modal .field{margin-bottom:14px}
.modal-subject{margin:4px 0 0; font-weight:600; font-size:14px}
.modal-iframe{
  width:100%; height:320px; border:1px solid var(--rule); border-radius:3px;
  margin-top:4px; background:#fff;
}
.modal .actions{margin-top:16px}
.schedule-pdf{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px}
.schedule-pdf .k{color:var(--chalk); font-size:12px}
.attachments-block{margin-top:14px; padding-top:14px; border-top:1px solid var(--rule)}
.attachments-list{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.attachment{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; padding:6px 0;
}
.attachment a{color:var(--accent); font-weight:600; text-decoration:none}
.attachment a:hover{text-decoration:underline}
.attachment .k{color:var(--chalk); font-size:12px}
.attachment-remove{
  appearance:none; border:0; background:none; color:var(--signal); cursor:pointer;
  font-size:16px; line-height:1; padding:0 4px; margin-left:auto;
}
.attachment-remove:hover{background:#F6DDDA; border-radius:3px}
.attachment-upload{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px}
.attachment-upload select{padding:5px 8px; font:inherit; font-size:12.5px; border:1px solid var(--rule); border-radius:2px}
.attachment-upload input[type=file]{font-size:12.5px; max-width:220px}

/* forms ------------------------------------------------------------------- */
.contract-upload{
  background:#F5F7FA; border:1px dashed var(--rule); border-radius:3px;
  padding:16px 18px; max-width:900px; margin-bottom:18px;
}
.contract-upload h4{margin:0 0 4px}
.contract-upload input[type=file]{font-size:12.5px; margin-right:8px}
.contract-evidence{margin-top:12px; font-size:12.5px}
.contract-evidence .field-row{
  display:flex; gap:10px; padding:6px 0; border-top:1px solid var(--rule);
  align-items:baseline;
}
.contract-evidence .field-row:first-child{border-top:0}
.contract-evidence .field-name{width:150px; flex-shrink:0; font-weight:600; color:var(--ink)}
.contract-evidence .field-value{width:140px; flex-shrink:0}
.contract-evidence .field-quote{color:var(--chalk); font-style:italic}
.contract-evidence .field-value[data-found="false"]{color:#9AA5A1}

.form{display:grid; gap:16px 20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  background:var(--card); border:1px solid var(--rule); padding:20px; max-width:900px}
.field{display:flex; flex-direction:column; gap:5px}
.field--wide{grid-column:1/-1}
label{font-size:12px; font-weight:600; letter-spacing:.02em}
input, select, textarea{
  font:inherit; padding:9px 11px; border:1px solid var(--rule); border-radius:2px;
  background:#fff; color:var(--ink); width:100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--ink); outline-offset:1px
}
textarea{resize:vertical}
.hint{font-size:12px; color:var(--chalk); margin:0}
.check{flex-direction:row; align-items:center; gap:9px}
.check input{width:auto}
.check label{font-weight:400; font-size:13px}
.actions{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; align-items:center}

.btn{appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:2px; border:1px solid var(--ink); background:#fff;
  color:var(--ink)}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn--go{background:var(--ink); color:var(--paper)}
.btn--go:hover{background:#000}
.form-msg{font-size:13px}
.form-msg[data-tone="error"]{color:var(--signal); font-weight:550}
.form-msg[data-tone="ok"]{color:var(--go); font-weight:550}

/* tables ------------------------------------------------------------------ */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:0}
.grid{width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--rule); font-size:13.5px}
.grid th, .grid td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--rule); white-space:nowrap}
.grid th{font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--chalk); background:#EEF1F0}
.grid .num, .grid td.num{text-align:right; font-variant-numeric:tabular-nums}
.grid tbody tr:last-child td{border-bottom:0}

.empty{padding:40px 20px; text-align:center; color:var(--chalk);
  border:1px dashed var(--rule); background:var(--card)}

.result{background:var(--card); border:1px solid var(--rule); padding:18px;
  margin-top:20px; max-width:900px}
.result h4{margin:0 0 4px; font-size:14px}
.result p{margin:0 0 14px; font-size:13px; color:var(--chalk)}
.result .big{font-size:20px; font-weight:650; color:var(--ink); letter-spacing:-.02em}

.colophon{margin-top:40px; padding:20px 24px 32px; border-top:1px solid var(--rule);
  font-size:12px; color:var(--chalk); max-width:78ch}
.colophon p{margin:0 0 6px}

@media (max-width:640px){
  main{padding:20px 16px}
  .masthead{padding:18px 16px 14px}
  .tabs{padding:0 16px}
  .project-picker select{min-width:0; width:100%}
  .form{padding:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}