@font-face { font-family:"Aldrich"; src:url("./aldrich-400.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Armata"; src:url("./armata-400.woff2") format("woff2"); font-display:swap; }
:root { --ink:#080e14; --navy:#0d1d29; --panel:#102634; --paper:#f3e5c3; --muted:#9aaca9; --cyan:#73e5f1; --yellow:#f9c401; --orange:#f8781e; --red:#ff3320; --green:#63d595; --line:rgba(115,229,241,.2); --display:"Aldrich","Avenir Next",sans-serif; --body:"Armata","Avenir Next",sans-serif; --mono:"SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; }
body { margin:0; min-width:320px; overflow:hidden; color:var(--paper); background:var(--ink); font:14px/1.35 var(--body); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background:linear-gradient(rgba(8,14,20,.7),rgba(8,14,20,.96)),url("./saintcon-appsec-hero.png") center/cover; }
a { color:inherit; }
button { font:inherit; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:100; padding:.6rem .9rem; color:var(--ink); background:var(--paper); }
.skip-link:focus { top:.6rem; }
.scanlines { position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.1; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.28) 3px 4px); }
.topbar { position:relative; z-index:20; height:58px; display:flex; align-items:center; gap:1.5rem; padding:6px clamp(12px,2vw,30px); border-bottom:1px solid var(--line); background:rgba(7,19,31,.96); }
.brand { display:flex; align-items:center; gap:.65rem; margin-right:auto; text-decoration:none; }
.brand img { width:58px; height:40px; object-fit:contain; }
.brand strong,.brand small { display:block; line-height:1.05; }
.brand strong { font:clamp(.75rem,1vw,.95rem) var(--display); letter-spacing:.03em; text-transform:uppercase; }
.brand small { margin-top:.22rem; color:var(--cyan); font:.52rem var(--mono); letter-spacing:.11em; }
.network,.text-link,.eyebrow,.range-control span,.range-control button,.range-control p,.metrics span,.metrics small,.track-number,.track-stats small,.activity-heading,.activity-name b,.signal-card time,.signal-card span,.signal-card b,footer { font-family:var(--mono); text-transform:uppercase; letter-spacing:.09em; }
.network,.text-link { color:var(--muted); font-size:.58rem; }
.network i { display:inline-block; width:7px; height:7px; margin-right:.4rem; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.offline .network i { background:var(--red); box-shadow:0 0 10px var(--red); }
.text-link { color:var(--paper); text-underline-offset:4px; }
.dashboard-shell { position:relative; z-index:1; height:calc(100vh - 84px); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:clamp(6px,1vh,11px); padding:clamp(8px,1.25vh,14px) clamp(10px,1.4vw,24px); }
.overview { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:2rem; }
.eyebrow { margin:0; color:var(--yellow); font-size:clamp(.48rem,.55vw,.62rem); }
h1,h2,h3 { margin:0; font-family:var(--display); text-transform:uppercase; }
h1 { margin-top:2px; font-size:clamp(2rem,3.4vw,3.8rem); line-height:.88; letter-spacing:-.045em; }
h1 span { color:transparent; -webkit-text-stroke:1px var(--cyan); text-shadow:0 0 24px rgba(115,229,241,.18); }
.lede { margin:5px 0 0; color:#bfcbc8; font-size:clamp(.67rem,.85vw,.9rem); }
.range-control { width:clamp(310px,27vw,430px); padding:7px 9px; border:1px solid var(--line); background:rgba(8,20,29,.9); }
.range-control > span { color:var(--cyan); font-size:.5rem; }
.range-control div { display:grid; grid-template-columns:repeat(4,1fr); margin:4px 0; }
.range-control button { min-height:26px; padding:2px; border:1px solid var(--line); border-right:0; color:var(--muted); background:transparent; cursor:pointer; font-size:.52rem; }
.range-control button:last-child { border-right:1px solid var(--line); }
.range-control button[aria-pressed="true"] { color:var(--ink); background:var(--cyan); }
.range-control p { margin:0; color:#829693; font-size:.46rem; }
.metrics { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); background:rgba(7,20,29,.86); }
.metrics article { min-width:0; min-height:62px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; align-items:center; padding:7px clamp(8px,1vw,16px); border-right:1px solid var(--line); }
.metrics article:last-child { border-right:0; }
.metrics span,.metrics small { color:var(--muted); font-size:clamp(.42rem,.48vw,.54rem); }
.metrics small { align-self:end; white-space:nowrap; }
.metrics strong { grid-row:1/3; grid-column:2; color:var(--cyan); font:clamp(1.7rem,2.4vw,2.8rem)/1 var(--display); }
.metrics .rate strong { color:var(--yellow); }
.tracks { min-height:0; display:flex; flex-direction:column; }
.section-heading { height:30px; display:flex; align-items:center; gap:1rem; flex:0 0 auto; }
.section-heading h2 { font-size:clamp(.9rem,1.35vw,1.45rem); }
.track-grid { min-height:0; flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(5px,.6vw,10px); }
.track-card { --accent:var(--cyan); min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 70%,transparent); background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 6%,rgba(13,29,41,.96)),rgba(7,20,29,.96)); }
.track-heading { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:7px 10px; border-bottom:1px solid var(--line); }
.track-number { display:block; overflow:hidden; color:var(--accent); font-size:clamp(.42rem,.47vw,.52rem); white-space:nowrap; text-overflow:ellipsis; }
.track-heading h3 { margin-top:2px; font-size:clamp(.95rem,1.35vw,1.45rem); line-height:1; }
.track-rate { color:var(--accent); font:clamp(1.2rem,1.8vw,2rem)/1 var(--display); }
.track-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:5px 8px 4px; }
.track-stats span { display:flex; align-items:baseline; gap:4px; min-width:0; border-right:1px solid var(--line); padding-left:7px; }
.track-stats span:first-child { padding-left:0; }
.track-stats span:last-child { border-right:0; }
.track-stats strong { color:var(--accent); font:clamp(.85rem,1.15vw,1.25rem) var(--display); }
.track-stats small { overflow:hidden; color:var(--muted); font-size:clamp(.36rem,.4vw,.45rem); white-space:nowrap; }
.track-progress { height:3px; margin:0 8px 4px; overflow:hidden; background:rgba(255,255,255,.08); }
.track-progress i { display:block; width:var(--progress); height:100%; background:var(--accent); box-shadow:0 0 9px var(--accent); }
.activity-heading { display:grid; grid-template-columns:minmax(0,1fr) 34px 34px; padding:3px 8px; color:#718682; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.4rem; }
.activity-heading span:not(:first-child) { text-align:right; }
.activity-list { min-height:0; flex:1; display:flex; flex-direction:column; }
.activity-row { position:relative; min-height:20px; flex:1 1 0; display:grid; grid-template-columns:minmax(0,1fr) 34px 34px; align-items:center; gap:2px; padding:2px 8px; overflow:hidden; border-bottom:1px solid rgba(115,229,241,.1); }
.activity-row:last-child { border-bottom:0; }
.activity-name { min-width:0; display:flex; align-items:center; gap:6px; }
.activity-name b { flex:0 0 auto; color:var(--accent); font-size:clamp(.38rem,.4vw,.45rem); }
.activity-name span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:clamp(.5rem,.58vw,.66rem); }
.activity-row > strong { text-align:right; color:var(--paper); font:clamp(.58rem,.68vw,.75rem) var(--display); }
.activity-row .complete-count { color:var(--accent); }
.activity-progress { position:absolute; bottom:0; left:0; width:var(--progress); height:1px; background:var(--accent); }
.signal-strip { min-height:62px; display:grid; grid-template-columns:145px minmax(0,1fr); gap:8px; }
.signal-heading { display:flex; flex-direction:column; justify-content:center; padding:7px 10px; border-left:2px solid var(--cyan); background:rgba(7,20,29,.86); }
.signal-heading h2 { font-size:clamp(.78rem,1vw,1.05rem); }
.signal-list { min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.empty-signal { grid-column:1/-1; display:grid; place-items:center; margin:0; color:var(--muted); border:1px solid var(--line); background:rgba(7,20,29,.86); font:.52rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.signal-card { min-width:0; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr; gap:1px 7px; padding:6px 8px; border:1px solid var(--line); border-left:2px solid var(--cyan); background:rgba(7,20,29,.9); }
.signal-card.completed { border-left-color:var(--green); }
.signal-card time,.signal-card span,.signal-card b { color:var(--muted); font-size:.42rem; }
.signal-card span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.signal-card b { color:var(--cyan); text-align:right; }
.signal-card.completed b { color:var(--green); }
.signal-card strong { grid-column:1/-1; align-self:end; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:clamp(.5rem,.58vw,.65rem) var(--display); text-transform:uppercase; }
footer { position:relative; z-index:20; height:26px; display:flex; justify-content:space-between; align-items:center; padding:0 clamp(12px,2vw,30px); border-top:1px solid var(--line); color:#617a82; background:var(--ink); font-size:.42rem; }
@media (max-height:760px) {
  .topbar { height:50px; }
  .brand img { width:48px; height:34px; }
  .dashboard-shell { height:calc(100vh - 72px); padding:6px 10px; gap:5px; }
  .lede { display:none; }
  .metrics article { min-height:52px; padding:4px 8px; }
  .section-heading { height:24px; }
  .track-heading { min-height:40px; padding:4px 7px; }
  .track-stats { padding:3px 6px; }
  .activity-heading { padding:2px 6px; }
  .activity-row { min-height:16px; padding:1px 6px; }
  .signal-strip { min-height:52px; }
  footer { height:22px; }
}
@media (max-width:900px) {
  body { height:auto; min-height:100%; overflow:auto; }
  .network,.text-link { display:none; }
  .dashboard-shell { height:auto; min-height:calc(100vh - 84px); display:block; }
  .overview { grid-template-columns:1fr; gap:8px; }
  .range-control { width:100%; margin-top:8px; }
  .metrics { grid-template-columns:repeat(2,1fr); margin:8px 0; }
  .metrics article { border-bottom:1px solid var(--line); }
  .metrics article:nth-child(2n) { border-right:0; }
  .metrics article:last-child { grid-column:1/-1; }
  .track-grid { grid-template-columns:1fr; }
  .track-card { min-height:310px; margin-bottom:7px; }
  .section-heading { height:auto; padding:8px 0; }
  .signal-strip { grid-template-columns:1fr; margin-top:8px; }
  .signal-list { grid-template-columns:1fr 1fr; }
  footer { height:auto; min-height:30px; }
}
@media (prefers-reduced-motion:reduce) { .scanlines { display:none; } }