/* Zenoratech Site Health Check
   Screen: the brand dark palette. Print: flips to ink-light so a report can go
   straight onto letterhead. Tokens mirror zenoratech.in/style.css. */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root{
  --bg:#090c14; --bg2:#0d1120; --surface:#111827; --surface2:#1a2236;
  --border:rgba(255,255,255,.08);
  --accent:#00d4ff; --accent2:#7c3aed; --accent3:#f59e0b;
  --text:#f1f5f9; --text-muted:#94a3b8; --text-dim:#64748b;
  --good:#22c55e; --mid:#f59e0b; --bad:#ef4444;
  --radius:16px; --radius-sm:10px;
  --display:'Syne',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* DM Sans is loaded at 300/400/500 only, so every bold sits on Syne. */
strong,b,h1,h2,h3,h4,th{font-family:var(--display); font-weight:700}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:900px; margin:0 auto; padding:0 20px}

/* ---------- Public landing ---------- */

.topbar{border-bottom:1px solid var(--border); padding:18px 0}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--text)}
.logo span{color:var(--accent)}
.topbar a.back{font-size:14px; color:var(--text-muted)}

.hero{padding:64px 0 40px}
.hero h1{font-size:clamp(30px,6vw,46px); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; max-width:16ch}
.hero p.lede{font-size:clamp(17px,2.4vw,19px); color:var(--text-muted); max-width:56ch; margin:0 0 8px}

.panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px; margin:28px 0;
}
.panel h2{font-size:20px; margin:0 0 6px}
.panel p.hint{color:var(--text-muted); font-size:15px; margin:0 0 20px}

.field{margin-bottom:16px}
.field label{display:block; font-size:14px; color:var(--text-muted); margin-bottom:7px}
.field input, .field select{
  width:100%; padding:14px 16px; font:inherit; color:var(--text);
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.field input:focus{border-color:var(--accent); outline:none}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}

.btn{
  display:inline-block; border:0; cursor:pointer; font-family:var(--display); font-weight:700;
  font-size:16px; padding:15px 32px; border-radius:50px; color:#04121a;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:transform .15s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn[disabled]{opacity:.55; cursor:progress; transform:none}
.btn-ghost{
  background:transparent; color:var(--text); border:1px solid var(--border);
  padding:13px 28px; font-size:15px;
}
.btn-full{width:100%}

.note{font-size:13px; color:var(--text-dim); margin-top:14px}
.error{
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35);
  color:#fca5a5; padding:14px 16px; border-radius:var(--radius-sm); margin:0 0 20px; font-size:15px;
}
.whatcheck{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:12px}
.whatcheck div{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px}
.whatcheck h3{font-size:15px; margin:0 0 4px}
.whatcheck p{font-size:14px; color:var(--text-muted); margin:0}

/* ---------- Report ---------- */

.report{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; margin:28px 0}

.rep-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--border)}
.rep-kicker{font-size:13px; color:var(--text-dim); margin:0 0 6px}
.rep-title{font-size:26px; margin:0 0 4px; letter-spacing:-.01em; word-break:break-word}
.rep-url{font-size:14px; color:var(--text-muted); margin:0; word-break:break-all}
.rep-brand{text-align:right; flex-shrink:0}
.rep-brandname{font-family:var(--display); font-weight:800; font-size:17px; margin:0}
.rep-date{font-size:13px; color:var(--text-dim); margin:4px 0 0}

.scorepanel{display:flex; gap:32px; align-items:center; padding:28px 0; border-bottom:1px solid var(--border)}
@media(max-width:600px){.scorepanel{flex-direction:column; gap:18px; text-align:center}}
.ring{position:relative; width:150px; height:150px; flex-shrink:0}
.ring svg{width:150px; height:150px; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:12; stroke-linecap:round}
.ring-bg{stroke:var(--surface2)}
.ring-fg{stroke:var(--good)}
.ring-c{stroke:var(--mid)} .ring-d,.ring-e{stroke:var(--bad)}
.ring-num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring-num strong{font-size:46px; line-height:1; font-family:var(--display); font-weight:800}
.ring-num span{font-size:12px; color:var(--text-dim); margin-top:5px}
.verdict-line{font-family:var(--display); font-weight:600; font-size:20px; line-height:1.35; margin:0 0 14px; max-width:36ch}
.tally{list-style:none; display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:0 0 12px; font-size:14px; color:var(--text-muted)}
.tally li{display:flex; align-items:center; gap:7px}
.dot{width:9px; height:9px; border-radius:50%}
.d-pass{background:var(--good)} .d-warn{background:var(--mid)} .d-fail{background:var(--bad)}
.psi-line{font-size:14px; color:var(--text-muted); margin:0}

.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; padding:26px 0; border-bottom:1px solid var(--border)}
.cat-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.cat-label{font-size:15px}
.cat-pct{font-family:var(--display); font-weight:700; font-size:15px}
.bar{height:7px; background:var(--surface2); border-radius:4px; overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:4px}
.t-good{background:var(--good)} .t-mid{background:var(--mid)} .t-bad{background:var(--bad)}
.cat-note{font-size:13px; color:var(--text-dim); margin:8px 0 0}

.fixes{padding:28px 0; border-bottom:1px solid var(--border)}
.fixes h2, .full h2{font-size:21px; margin:0 0 4px}
.fixes-sub{color:var(--text-muted); font-size:14px; margin:0 0 22px}
.fixlist{list-style:none; padding:0; margin:0; counter-reset:none}
.fixlist li{padding:18px 0; border-top:1px solid var(--border)}
.fixlist li:first-child{border-top:0; padding-top:0}
.fix-head{display:flex; gap:14px; align-items:flex-start}
.fix-n{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:14px; color:var(--accent);
}
.fix-head h3{font-size:16px; margin:0 0 4px}
.fix-found{font-size:14px; color:var(--text-muted); margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:9px}
.fix-body{font-size:15px; color:var(--text-muted); margin:10px 0 0 42px; max-width:68ch}
@media(max-width:600px){.fix-body{margin-left:0}}

.tag{font-family:var(--display); font-weight:600; font-size:11px; padding:3px 9px; border-radius:20px; white-space:nowrap}
.tag.t-pass{background:rgba(34,197,94,.15); color:#4ade80}
.tag.t-warn{background:rgba(245,158,11,.15); color:#fbbf24}
.tag.t-fail{background:rgba(239,68,68,.15); color:#f87171}
.tag.t-skip{background:var(--surface2); color:var(--text-dim)}

.full{padding:28px 0 8px}
.checktable{width:100%; border-collapse:collapse; font-size:14px; margin-top:16px}
.checktable td,.checktable th{padding:9px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border)}
.grouprow th{font-size:13px; color:var(--accent); padding-top:20px; letter-spacing:.01em}
.c-status{width:104px}
.c-label{width:38%}
.c-found{color:var(--text-muted)}
@media(max-width:600px){.checktable, .checktable tbody, .checktable tr, .checktable td{display:block; width:auto}
  .checktable tr{padding:10px 0; border-bottom:1px solid var(--border)}
  .checktable td{border:0; padding:2px 0}}

.rep-foot{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:26px; padding-top:24px; border-top:1px solid var(--border);
}
.foot-lead{font-family:var(--display); font-weight:700; font-size:18px; margin:0 0 5px}
.foot-sub{font-size:14px; color:var(--text-muted); margin:0; max-width:42ch}
.foot-contact{font-size:14px; color:var(--text-muted); text-align:right}
.foot-contact p{margin:0 0 3px}
@media(max-width:600px){.foot-contact{text-align:left}}
.disclaimer{font-size:12px; color:var(--text-dim); margin:22px 0 0; line-height:1.5}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 28px}

/* ---------- Admin ---------- */

.leadtable{width:100%; border-collapse:collapse; font-size:14px}
.leadtable th{font-size:13px; color:var(--text-dim); text-align:left; padding:10px; border-bottom:1px solid var(--border)}
.leadtable td{padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:top}
.leadtable tr:hover td{background:var(--bg2)}
.pill{font-family:var(--display); font-weight:700; font-size:13px; padding:4px 11px; border-radius:20px}
.p-good{background:rgba(34,197,94,.15); color:#4ade80}
.p-mid{background:rgba(245,158,11,.15); color:#fbbf24}
.p-bad{background:rgba(239,68,68,.15); color:#f87171}
.empty{text-align:center; padding:48px 20px; color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- Print ---------- */

@media print{
  @page{margin:14mm 12mm}
  html,body{background:#fff!important; color:#111!important; font-size:11pt}
  .topbar,.actions,.hero,.panel,.note,nav,.no-print{display:none!important}
  a{color:#111!important; text-decoration:none!important}
  .wrap{max-width:none; padding:0}
  .report{background:#fff!important; border:0!important; padding:0!important; margin:0!important; border-radius:0!important}
  .rep-head,.scorepanel,.cats,.fixes,.full,.rep-foot{border-color:#ddd!important}
  .rep-title,.verdict-line,.fix-head h3,.fixes h2,.full h2,.foot-lead,.rep-brandname,.ring-num strong{color:#111!important}
  .rep-url,.rep-date,.rep-kicker,.cat-note,.fix-found,.fix-body,.c-found,.foot-sub,.foot-contact,.psi-line,.tally,.fixes-sub,.disclaimer{color:#444!important}
  .ring-bg{stroke:#e5e5e5!important}
  .bar{background:#eee!important}
  .fix-n{background:#f0f0f0!important; color:#111!important; border:1px solid #ddd}
  .grouprow th{color:#111!important; border-bottom:1px solid #999!important}
  .checktable td{border-bottom:1px solid #eee!important}
  .tag{border:1px solid #bbb!important; background:#fff!important; color:#111!important}
  .fixes{page-break-before:auto}
  .full{page-break-before:always}
  .fixlist li,.cat,.rep-foot{page-break-inside:avoid}
}

/* Lighthouse score row */
.lh{list-style:none; display:flex; flex-wrap:wrap; gap:16px; padding:0; margin:0 0 12px}
.lh li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-muted)}
.lh-n{
  font-family:var(--display); font-weight:700; font-size:13px; min-width:34px;
  text-align:center; padding:3px 7px; border-radius:20px;
}
.s-good{background:rgba(34,197,94,.15); color:#4ade80}
.s-mid{background:rgba(245,158,11,.15); color:#fbbf24}
.s-bad{background:rgba(239,68,68,.15); color:#f87171}
@media print{
  .lh li{color:#444!important}
  .lh-n{border:1px solid #bbb!important; background:#fff!important; color:#111!important}
}

/* Critical issues — deliberately above the score, not inside it */
.critical{
  border:1px solid rgba(239,68,68,.35); background:rgba(239,68,68,.07);
  border-radius:var(--radius-sm); padding:20px 22px; margin:22px 0 0;
}
.critical h2{font-size:18px; margin:0 0 4px; color:#f87171}
.critical-sub{font-size:13px; color:var(--text-muted); margin:0 0 14px}
.critical ul{list-style:none; padding:0; margin:0}
.critical li{
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline;
  padding:8px 0; border-top:1px solid rgba(239,68,68,.18);
}
.critical li:first-child{border-top:0}
.critical li strong{font-size:15px}
.critical li span{font-size:14px; color:var(--text-muted)}

/* Severity tags */
.tag.sv-critical{background:rgba(239,68,68,.15); color:#f87171}
.tag.sv-high{background:rgba(249,115,22,.15); color:#fb923c}
.tag.sv-medium{background:rgba(245,158,11,.15); color:#fbbf24}
.tag.sv-low{background:var(--surface2); color:var(--text-muted)}

/* Affected pages / evidence */
.affected{list-style:none; padding:0; margin:10px 0 0 42px; display:flex; flex-wrap:wrap; gap:7px}
.affected li{
  font-size:12.5px; color:var(--text-muted); background:var(--bg2);
  border:1px solid var(--border); border-radius:6px; padding:3px 9px;
  max-width:100%; overflow-wrap:anywhere;
}
.affected li.more{background:transparent; border-color:transparent; color:var(--text-dim)}
@media(max-width:600px){.affected{margin-left:0}}

/* Findings grouped by service */
.services{padding:28px 0; border-top:1px solid var(--border)}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:18px}
.svc{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px}
.svc h3{font-size:15px; margin:0 0 2px}
.svc-count{font-size:12.5px; color:var(--accent); margin:0 0 10px}
.svc ul{list-style:none; padding:0; margin:0}
.svc li{font-size:13.5px; color:var(--text-muted); padding:3px 0}
.svc li.more{color:var(--text-dim)}

@media print{
  .critical{border:1.5px solid #999!important; background:#fff!important}
  .critical h2{color:#111!important}
  .critical li{border-top-color:#eee!important}
  .critical li span,.critical-sub{color:#444!important}
  .affected li{background:#fff!important; border-color:#ddd!important; color:#444!important}
  .svc{background:#fff!important; border-color:#ddd!important}
  .svc h3{color:#111!important}
  .svc-count{color:#444!important}
  .svc li{color:#444!important}
  .services{page-break-inside:avoid}
}