/* Prodistrict — shared design system for the dashboards, marketing site, and admin.
   Tokens and structure ported from the original prototype (same palette, same Public Sans /
   Source Serif / IBM Plex Mono pairing, same sidebar+topbar app shell) so the real build finally
   looks like the product it was designed to be, not a bare HTML form. */

:root{
  --bg:#F7F7F5; --surface:#FFFFFF; --surface-2:#EFEFEC;
  --border:#DDDDD8; --border-strong:#BFBFB8;
  --ink:#101010; --ink-soft:#47473F; --ink-faint:#7A7A70;
  --accent:#111111; --accent-strong:#000000; --accent-soft:#ECECE7; --accent-ink:#FFFFFF;
  --success:#1F7A54; --success-soft:#DFF0E7;
  --warning:#9C6B12; --warning-soft:#F7ECD9;
  --critical:#B23A2E; --critical-soft:#F8E2DF;
  --brand-pro:#B8860B;
  --ink-rgb:16,16,16;
  --shadow: 0 1px 2px rgba(16,16,16,.06), 0 6px 20px -8px rgba(16,16,16,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111110; --surface:#191917; --surface-2:#222220;
    --border:#333330; --border-strong:#47473F;
    --ink:#F5F5F2; --ink-soft:#C7C7BE; --ink-faint:#8F8F85;
    --accent:#F5F5F2; --accent-strong:#FFFFFF; --accent-soft:#282824; --accent-ink:#111110;
    --success:#4CAF7D; --success-soft:#16301F;
    --warning:#D9A441; --warning-soft:#332711;
    --critical:#E1685C; --critical-soft:#3A1E1B;
    --brand-pro:#E8B84B;
    --ink-rgb:245,245,242;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -10px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#111110; --surface:#191917; --surface-2:#222220;
  --border:#333330; --border-strong:#47473F;
  --ink:#F5F5F2; --ink-soft:#C7C7BE; --ink-faint:#8F8F85;
  --accent:#F5F5F2; --accent-strong:#FFFFFF; --accent-soft:#282824; --accent-ink:#111110;
  --success:#4CAF7D; --success-soft:#16301F;
  --warning:#D9A441; --warning-soft:#332711;
  --critical:#E1685C; --critical-soft:#3A1E1B;
  --brand-pro:#E8B84B;
  --ink-rgb:245,245,242;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -10px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif; font-weight:700; text-wrap:balance; margin:0;}
p{margin:0;}
p.sub, .sub{color:var(--ink-faint); font-size:13px; margin:0 0 16px;}
.prose{font-family:'Source Serif 4', Georgia, 'Times New Roman', serif;}
.mono{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric:tabular-nums;}
a{color:var(--accent);}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

/* ---------- app shell: sidebar + topbar ---------- */
.shell{display:flex; min-height:100vh;}
.rail{
  width:230px; flex:0 0 230px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:18px 12px; gap:16px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:9px; padding:2px 6px 4px; text-decoration:none;}
.brand-mark{width:30px;height:30px; display:flex; align-items:center; justify-content:center; color:var(--accent); flex:0 0 auto;}
.brand-mark svg{width:100%; height:100%; display:block;}
.brand-name{font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
.brand-pro{color:var(--brand-pro);}
nav.primary{display:flex; flex-direction:column; gap:2px; margin-top:2px;}
.nav-eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); padding:10px 10px 4px;}
.nav-item{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; cursor:pointer; color:var(--ink-soft); font-size:13.5px; font-weight:500; border:1px solid transparent; text-decoration:none; background:none; width:100%; text-align:left; font-family:inherit;}
.nav-item:hover{background:var(--surface-2); color:var(--ink);}
.nav-item.active{background:var(--accent-soft); color:var(--accent-strong); font-weight:600;}
.nav-icon{width:16px; text-align:center; opacity:.85; font-size:14px;}
.nav-badge{margin-left:auto; background:var(--critical); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:1px 6px; font-family:'IBM Plex Mono';}
.rail-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--border); font-size:11.5px; color:var(--ink-faint); display:flex; flex-direction:column; gap:6px;}
.rail-foot a{color:var(--ink-faint);}

main.content{flex:1; min-width:0; padding:26px 32px 60px; max-width:1080px;}
.topbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.page-eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--accent); font-weight:700; margin-bottom:4px;}
.page-title{font-size:24px;}
.page-sub{color:var(--ink-faint); font-size:13.5px; margin-top:4px; max-width:64ch;}

@media(max-width:900px){
  .rail{position:fixed; z-index:20; transform:translateX(-100%); transition:.2s; box-shadow:var(--shadow);}
  .rail.open{transform:translateX(0);}
  main.content{padding:18px 16px 50px;}
  .menu-toggle{display:inline-flex !important;}
}
.menu-toggle{display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:7px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:16px;}

/* ---------- back-compat for simpler pages (admin, notice-of-award) ---------- */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
header.top{padding:14px 28px; border-bottom:1px solid var(--border); background:var(--surface);}
header.top a{color:var(--ink); text-decoration:none; font-weight:700;}

/* ---------- marketing topbar (public pages) ---------- */
header.site-top{
  display:flex; align-items:center; justify-content:space-between; padding:14px 28px;
  border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:10;
}
header.site-top nav{display:flex; align-items:center; gap:22px;}
header.site-top nav a{color:var(--ink-soft); text-decoration:none; font-size:13.5px; font-weight:600;}
header.site-top nav a:hover{color:var(--ink);}

/* ---------- primitives ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:32px 20px 80px;}
.wrap-narrow{max-width:680px;}
.grid{display:grid; gap:14px;}
.g-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.g-2{grid-template-columns:1fr 1fr;}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
@media(max-width:820px){.g-2, .g-3{grid-template-columns:1fr;}}

.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:var(--shadow); margin-bottom:16px;}
.card-flat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px;}

.stat{padding:16px;}
.stat-label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:600;}
.stat-value{font-family:'IBM Plex Mono'; font-size:24px; font-weight:600; margin-top:6px;}
.stat-hint{font-size:11.5px; color:var(--ink-faint); margin-top:3px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-size:13.5px; font-weight:600; padding:10px 16px; cursor:pointer; text-decoration:none; transition:.12s;}
.btn:hover{background:var(--accent-strong); border-color:var(--accent-strong);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.ghost{background:transparent; color:var(--accent-strong); border-color:var(--border-strong);}
.btn.ghost:hover{border-color:var(--accent); background:var(--accent-soft);}
.btn.critical{background:var(--critical); border-color:var(--critical);}
.btn.critical:hover{background:#96281f; border-color:#96281f;}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:7px;}
.btn-block{width:100%;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.01em;}
.pill-success{background:var(--success-soft); color:var(--success);}
.pill-warning{background:var(--warning-soft); color:var(--warning);}
.pill-critical{background:var(--critical-soft); color:var(--critical);}
.pill-neutral{background:var(--surface-2); color:var(--ink-soft);}
.pill-accent{background:var(--accent-soft); color:var(--accent-strong);}

label{display:block; font-size:12.5px; font-weight:600; margin:12px 0 4px; color:var(--ink-soft);}
label.checkbox{display:flex; align-items:center; gap:8px; font-weight:400; margin:6px 0;}
label.checkbox input{width:auto;}
input,select,textarea{
  width:100%; padding:9px 10px; border:1px solid var(--border-strong); border-radius:8px;
  font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
textarea{font-family:'Source Serif 4', Georgia, serif; resize:vertical; min-height:70px;}
.field-hint{font-size:11px; color:var(--ink-faint); font-weight:400;}
.form-row{display:flex; gap:12px;}
.form-row > *{flex:1;}
@media(max-width:640px){.form-row{flex-direction:column; gap:0;}}

.notice{background:var(--accent-soft); border:1px solid var(--border); color:var(--ink-soft); border-radius:10px; padding:11px 14px; font-size:12.5px; line-height:1.55; margin-bottom:16px;}
.notice b{color:var(--ink);}
.notice.warn{background:var(--warning-soft);}
.notice.critical{background:var(--critical-soft); color:var(--critical);}
.error{background:var(--critical-soft); border:1px solid var(--critical); color:var(--critical); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:16px; display:none;}
.hidden{display:none !important;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--border);}
td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:last-child td{border-bottom:none;}

.kv{display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:5px 0; border-bottom:1px dashed var(--border);}
.kv:last-child{border-bottom:none;}
.kv > span:first-child{color:var(--ink-faint);}
.kv > span:last-child{font-weight:600; text-align:right;}

.role-toggle{display:flex; gap:8px; margin-bottom:16px;}
.role-toggle button{flex:1; padding:11px; border-radius:9px; border:1px solid var(--border); background:var(--surface); font-weight:600; cursor:pointer; color:var(--ink-soft); font-size:13.5px;}
.role-toggle button.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong);}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:18px; flex-wrap:wrap;}
.tab{padding:9px 4px; margin-right:18px; font-size:13px; font-weight:600; color:var(--ink-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:none; border-left:none; border-right:none;}
.tab.active{color:var(--accent-strong); border-bottom-color:var(--accent);}

.pro-card{display:flex; flex-direction:column; gap:9px;}
.pro-head{display:flex; gap:12px; align-items:flex-start;}
.seal{width:40px;height:40px; border-radius:50%; border:1.5px dashed var(--success); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:15px; transform:rotate(-8deg); flex:0 0 auto; background:var(--success-soft);}
.seal.pending{border-color:var(--warning); color:var(--warning); background:var(--warning-soft);}
.pro-name{font-size:14.5px; font-weight:700;}
.pro-disc{font-size:11.5px; color:var(--ink-faint);}
.rating{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.chip-row{display:flex; flex-wrap:wrap; gap:5px;}
.chip{font-size:10.5px; background:var(--surface-2); color:var(--ink-soft); padding:3px 8px; border-radius:6px; border:1px solid var(--border);}

.badge-trusted{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:99px; background:var(--success-soft); color:var(--success); letter-spacing:.02em;}
.badge-featured{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; background:var(--accent); color:var(--accent-ink); letter-spacing:.03em; text-transform:uppercase;}

.empty{border:1.5px dashed var(--border-strong); border-radius:12px; padding:30px 20px; text-align:center; color:var(--ink-faint); font-size:13px;}

.doc{border:1.5px solid var(--ink); border-radius:10px; padding:22px; position:relative; background:var(--surface);}
.doc-stamp{position:absolute; top:16px; right:18px; border:2px solid var(--critical); color:var(--critical); border-radius:8px; padding:5px 10px; font-family:'IBM Plex Mono'; font-size:11px; font-weight:700; transform:rotate(6deg); letter-spacing:.04em;}

.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;}
.photo-thumb{position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--border); aspect-ratio:1;}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

footer.site-foot{border-top:1px solid var(--border); padding:28px; text-align:center; color:var(--ink-faint); font-size:12.5px; margin-top:40px;}
footer.site-foot a{color:var(--ink-faint); margin:0 8px;}

/* ---------- toast (replaces native alert()) ---------- */
.toast-stack{position:fixed; bottom:20px; right:20px; z-index:1100; display:flex; flex-direction:column; gap:8px; max-width:360px;}
@media(max-width:640px){.toast-stack{left:16px; right:16px; max-width:none;}}
.toast{
  background:rgb(var(--ink-rgb)); color:var(--bg); border-radius:10px; padding:12px 14px;
  box-shadow:var(--shadow); display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5;
  animation:toast-in .15s ease-out;
}
.toast span{flex:1;}
.toast-close{background:none; border:none; color:var(--bg); opacity:.7; cursor:pointer; font-size:16px; line-height:1; padding:0 0 0 4px; flex:0 0 auto;}
.toast-close:hover{opacity:1;}
@keyframes toast-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- in-page confirm/prompt modal (replaces native confirm()/prompt()) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;}
.modal-card{max-width:440px; width:100%; margin:0;}
.modal-msg{white-space:pre-wrap; font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 14px;}
.modal-card .btn-row{margin-top:4px; justify-content:flex-end;}
.modal-card input, .modal-card textarea{margin-bottom:4px;}

/* ---------- marketing: image bands, inverted sections ---------- */
/* Real stock photography, always rendered through a grayscale filter so every photo sits inside
   the same black-and-white palette as the rest of the page rather than importing its own colors. */
.img-mono{filter:grayscale(1) contrast(1.08);}
:root{--bg-rgb:247,247,245;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg-rgb:17,17,16;}}
:root[data-theme="dark"]{--bg-rgb:17,17,16;}
.section-invert{background:rgb(var(--ink-rgb)); color:var(--bg);}
.section-invert .sub, .section-invert p{color:rgba(var(--bg-rgb),.72);}
.section-invert h1, .section-invert h2, .section-invert h3{color:var(--bg);}
.section-invert .btn{background:var(--bg); border-color:var(--bg); color:rgb(var(--ink-rgb));}
.section-invert .btn:hover{background:var(--surface-2); border-color:var(--surface-2);}
.section-invert .btn.ghost{background:transparent; color:var(--bg); border-color:rgba(var(--bg-rgb),.4);}
.section-invert .btn.ghost:hover{background:rgba(var(--bg-rgb),.08); border-color:var(--bg);}

/* A photographic hero always sits under a dark scrim so white text stays legible — that's a
   fixed treatment, not a theme-relative one, so it deliberately doesn't use the --ink-rgb token
   (which flips light/dark with the page theme and would invert this to a white scrim). */
.hero-photo{
  position:relative; overflow:hidden; min-height:520px; display:flex; align-items:center;
  background:#0A0A0A;
}
.hero-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.55;
}
.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.82) 100%);
}
.hero-photo .hero-inner{position:relative; z-index:2; padding:80px 28px; max-width:760px; margin:0 auto; text-align:center;}
.hero-photo h1{color:#fff; font-size:40px; line-height:1.14; margin-bottom:16px;}
.hero-photo p.lead{color:rgba(255,255,255,.82); font-family:'Source Serif 4', Georgia, serif; font-size:18px; max-width:58ch; margin:0 auto 28px;}
.hero-photo .eyebrow{color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.1em; font-size:11.5px; font-weight:700; margin-bottom:14px;}

.photo-band{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--border);}
.photo-band img{width:100%; height:100%; object-fit:cover; display:block;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;}
@media(max-width:820px){.split{grid-template-columns:1fr;}}