/* Vigil — Risk & Health Scanner. Ultra-minimal, terminal-leaning. */
:root{
  --bg:#06080f; --panel:#0c1018; --line:rgba(255,255,255,.09);
  --txt:#e7ecf5; --muted:#7e8aa3; --faint:#48526a;
  --accent:#5cffb1; --accent2:#3da0ff;
  --crit:#ff5470; --high:#ff9f45; --med:#ffd24a; --low:#5cffb1;
  --r:14px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--txt);background:var(--bg);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;overflow-wrap:break-word;
}
h1{font-size:clamp(1.3rem,1.05rem+1.1vw,1.6rem);font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.muted{color:var(--muted)} .small{font-size:.82rem}
em{font-style:normal;color:var(--faint);font-size:.82em;font-weight:400}

/* top bar */
.bar{display:flex;align-items:center;gap:12px;height:54px;
  padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
  border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(6,8,15,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-weight:600}
.brand-logo{width:24px;height:24px;border-radius:6px;object-fit:cover}
.brand-name{letter-spacing:.02em}
.bar-tag{color:var(--muted);font-size:.8rem;border-left:1px solid var(--line);padding-left:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);margin-left:auto}
.dot.live{background:var(--accent);box-shadow:0 0 0 0 rgba(92,255,177,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,255,177,.5)}70%{box-shadow:0 0 0 7px rgba(92,255,177,0)}100%{box-shadow:0 0 0 0 rgba(92,255,177,0)}}

/* stage / views */
.stage{max-width:760px;margin:0 auto;
  padding:clamp(24px,4vw,48px) max(18px,env(safe-area-inset-right)) clamp(56px,8vh,96px) max(18px,env(safe-area-inset-left))}
.view{display:none;animation:fade .3s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* card / form */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:28px}
.field{display:block;margin:18px 0}
.field>span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:7px;font-weight:500}
input,textarea{width:100%;background:#070a12;border:1px solid var(--line);border-radius:10px;
  color:var(--txt);padding:11px 13px;font-family:var(--mono);font-size:.9rem;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(61,160,255,.15)}
input::placeholder,textarea::placeholder{color:var(--faint)}

.checks{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:18px 0;
  display:flex;flex-wrap:wrap;gap:10px 20px}
.checks legend{font-size:.82rem;color:var(--muted);padding:0 6px}
.checks label{display:flex;align-items:center;gap:7px;font-size:.88rem;cursor:pointer}
.checks input{width:auto;padding:0;accent-color:var(--accent)}

.adv{margin:18px 0;border:1px solid var(--line);border-radius:10px;padding:0 14px}
.adv[open]{padding-bottom:8px}
.adv summary{cursor:pointer;font-size:.82rem;color:var(--muted);padding:12px 0;list-style:none;user-select:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"+ ";color:var(--accent)}
.adv[open] summary::before{content:"− "}
.adv .field{margin:6px 0 14px}
label.inline{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--txt);margin-bottom:6px;cursor:pointer}
label.inline input{width:auto;padding:0;accent-color:var(--accent)}

.actions{margin-top:22px;display:flex;gap:12px}
.actions.center{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#04130c;
  font-weight:600;padding:11px 20px;border-radius:10px;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.92rem;transition:transform .12s,filter .12s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.foot{margin-top:18px;text-align:center}

/* terminal */
.term{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#04060c}
.term-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:#0a0e16}
.tb-dots{display:flex;gap:6px}
.tb-dots i{width:11px;height:11px;border-radius:50%;background:#2a3142;display:block}
.tb-title{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.tb-status{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em}
.tb-status.run{color:var(--accent2)} .tb-status.done{color:var(--accent)} .tb-status.fail{color:var(--crit)}
.term-body{margin:0;padding:18px;font-family:var(--mono);font-size:.83rem;line-height:1.7;
  white-space:pre-wrap;word-break:break-word;height:min(60dvh,520px);min-height:240px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;color:#cfd8ea}
.term-body .c-dim{color:var(--faint)}
.term-body .c-ok{color:var(--accent)}
.term-body .c-info{color:var(--accent2)}
.term-body .c-crit{color:var(--crit)} .term-body .c-high{color:var(--high)}
.term-body .c-med{color:var(--med)} .term-body .c-low{color:var(--low)}
.term-body .c-head{color:#fff;font-weight:600}
.cursor{display:inline-block;width:8px;height:1em;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* report */
.report{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:26px 28px}
.rep-head{display:flex;align-items:center;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px}
.score{position:relative;width:104px;height:104px;flex:none}
.score svg{transform:rotate(-90deg)}
.score-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-mid b{font-size:1.7rem;font-weight:700;font-family:var(--mono)}
.score-mid span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.rep-head-meta h2{margin:0 0 4px;font-size:1.25rem;font-weight:600}
.rep-head-meta p{margin:0;color:var(--muted);font-size:.86rem}
.grade{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.78rem;padding:3px 10px;border-radius:999px;border:1px solid var(--line)}

.sev-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.sev-chip{flex:1;min-width:110px;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.sev-chip b{display:block;font-size:1.5rem;font-family:var(--mono);line-height:1}
.sev-chip span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sev-chip.s-critical b{color:var(--crit)} .sev-chip.s-high b{color:var(--high)}
.sev-chip.s-medium b{color:var(--med)} .sev-chip.s-low b{color:var(--low)}

.rep-sec{margin-bottom:24px}
.rep-sec h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:600;margin:0 0 12px}
.finding{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:9px;
  display:flex;gap:13px;align-items:flex-start}
.finding .pill{font-family:var(--mono);font-size:.68rem;padding:3px 8px;border-radius:6px;flex:none;
  text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.pill.s-critical{background:rgba(255,84,112,.16);color:var(--crit)}
.pill.s-high{background:rgba(255,159,69,.16);color:var(--high)}
.pill.s-medium{background:rgba(255,210,74,.16);color:var(--med)}
.pill.s-low{background:rgba(92,255,177,.14);color:var(--low)}
.pill.s-info{background:rgba(61,160,255,.16);color:var(--accent2)}
.finding-body{flex:1;min-width:0}
.finding-body b{font-weight:600;font-size:.92rem}
.finding-body .meta{font-family:var(--mono);font-size:.76rem;color:var(--faint);margin-top:3px}
.finding-body .fix{font-size:.84rem;color:var(--muted);margin-top:6px}

.asset-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.asset-line:last-child{border-bottom:0}
.asset-line .host{font-family:var(--mono);word-break:break-all}
.asset-line .stat{font-family:var(--mono);font-size:.8rem;color:var(--muted);flex:none}

/* ============================================================
   RESPONSIVE — mobile · tablet · laptop · desktop, both orientations
   ============================================================ */

/* Touch devices: larger, comfier tap targets */
@media (hover:none) and (pointer:coarse){
  .btn{padding:13px 22px}
  .checks label,.adv summary,label.inline{min-height:30px}
  .checks input,.checks input + *,.adv summary{padding-top:2px;padding-bottom:2px}
}

/* ---- Phones (portrait & small) : ≤600px ---- */
@media (max-width:600px){
  .card{padding:20px}
  .report{padding:20px 18px}
  .actions{flex-direction:column}
  .actions .btn{width:100%;justify-content:center}
  .rep-head{gap:16px}
  .rep-sec h3{margin-bottom:10px}
}

/* ---- Very small phones : ≤380px ---- */
@media (max-width:380px){
  .bar{gap:8px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .bar-tag{display:none}
  .card{padding:16px}
  .report{padding:16px 14px}
  .checks{flex-direction:column;gap:10px}
  .sev-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sev-chip{min-width:0}
  .score{width:84px;height:84px}
  .score svg{width:84px;height:84px}
  .score-mid b{font-size:1.4rem}
  .rep-head{flex-direction:column;text-align:center}
  .rep-head-meta{width:100%}
}

/* ---- Landscape phones / short viewports : limited height ---- */
@media (max-height:500px) and (orientation:landscape){
  .bar{position:static}
  .stage{padding-top:18px;padding-bottom:32px}
  .term-body{height:auto;min-height:0;max-height:62dvh}
  .card{padding:18px 22px}
}

/* ---- Tablets : 601px–1024px ---- */
@media (min-width:601px) and (max-width:1024px){
  .stage{max-width:720px}
}

/* Tablet landscape gets a touch more room */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .stage{max-width:820px}
}

/* ---- Laptops & desktops : ≥1025px ---- */
@media (min-width:1025px){
  .stage{max-width:840px}
  .card{padding:32px}
  .report{padding:30px 34px}
}

/* ---- Large desktops : ≥1600px ---- */
@media (min-width:1600px){
  .stage{max-width:920px}
}

/* Honour reduced-motion preferences across the UI */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}