/* ============================================================
   H.O.R.I.Z.O.N. INTRANET — classified terminal theme (blue)
   Pure CSS, no frameworks. ARG mockup for fozmu.news.
   ============================================================ */

:root{
  --bg:#08111f;
  --bg-panel:#0a1626;
  --bg-soft:#0c1c2e;
  --line:#74c0f4;
  /* "line-NN" = muted tiers. Raised opacities so secondary text stays legible. */
  --line-22:#7bbdf055;
  --line-33:#8cc6f26b;
  --line-44:#9ccffa7a;
  --line-11:#7bbdf03a;
  --line-55:#a6d4fa99;
  --line-77:#bfe1fbc4;
  --line-0a:#7bbdf024;
  --text:#9fd0f7;
  --text-bright:#d4ecff;
  --red:#ff7a7a;
  --yellow:#f5d870;
  --green:#74f0bf;
  --mono:'Courier New',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* CRT scanlines + vignette overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 3px,
      rgba(0,10,20,0.10) 4px,
      rgba(0,0,0,0) 5px
    );
  mix-blend-mode:multiply;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background:radial-gradient(ellipse at center,transparent 65%,rgba(0,2,8,0.30) 100%);
}

a{color:var(--text-bright);text-decoration:none}
a:hover{text-decoration:underline}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- shell ---------- */
.hz{min-height:100vh;display:flex;flex-direction:column}

.hz-header{
  background:var(--bg-panel);border-bottom:1px solid var(--line-22);
  padding:10px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:50;
}
.hz-logo{
  color:var(--text-bright);font-size:15px;font-weight:bold;letter-spacing:4px;
  white-space:nowrap;
}
.hz-logo .glitch{position:relative;display:inline-block}
.hz-status{font-size:11px;color:var(--line-77);text-align:right}
.hz-status .sep{color:var(--line-33)}

.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.cursor::after{content:"_";animation:blink 1s steps(1) infinite;color:var(--text-bright)}

/* ---------- nav ---------- */
.hz-nav{
  background:var(--bg-panel);border-bottom:1px solid var(--line-11);
  padding:0 12px;display:flex;gap:0;flex-wrap:wrap;position:sticky;top:41px;z-index:49;
}
.hz-nav a{
  background:none;border:none;color:var(--line-55);
  font-family:var(--mono);font-size:11px;padding:10px 16px;cursor:pointer;
  letter-spacing:1px;border-bottom:2px solid transparent;white-space:nowrap;
}
.hz-nav a.active{color:var(--text-bright);border-bottom:2px solid var(--line)}
.hz-nav a:hover{color:var(--text-bright);text-decoration:none}
.hz-nav .spacer{flex:1}
.hz-nav .logout{color:var(--red)}
.hz-nav .logout:hover{color:#ff7b7b}

/* ---------- body / layout ---------- */
.hz-body{padding:20px;max-width:1100px;width:100%;margin:0 auto;flex:1}

.hz-crumbs{font-size:10px;color:var(--line-33);letter-spacing:2px;margin-bottom:14px}
.hz-crumbs b{color:var(--line-55)}

.hz-alert{
  background:var(--bg-soft);border:1px solid var(--line-44);
  padding:10px 16px;margin-bottom:16px;font-size:12px;
  display:flex;align-items:center;gap:10px;color:var(--text-bright);
  flex-wrap:wrap;
  box-shadow:0 0 24px -8px var(--line-44) inset;
}
.hz-alert-dot{
  width:8px;height:8px;background:var(--line);border-radius:50%;
  animation:blink 1s infinite;flex-shrink:0;box-shadow:0 0 8px var(--line);
}
.hz-alert .sep{color:var(--line-33)}

/* ---------- stat grid ---------- */
.hz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.hz-card{
  background:var(--bg-panel);border:1px solid var(--line-22);padding:14px;position:relative;overflow:hidden;
}
.hz-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-44),transparent);
}
.hz-card-label{font-size:10px;color:var(--line-55);letter-spacing:2px;margin-bottom:6px}
.hz-card-value{font-size:22px;color:var(--text-bright);font-weight:bold;line-height:1.1}
.hz-card-sub{font-size:10px;color:var(--line-33);margin-top:4px}

/* ---------- sections ---------- */
.hz-section{margin-bottom:24px}
.hz-section-title{
  font-size:10px;color:var(--line-55);letter-spacing:3px;
  border-bottom:1px solid var(--line-11);padding-bottom:6px;margin-bottom:12px;
}

.hz-row{
  border-bottom:1px solid var(--line-0a);padding:10px 0;
  display:flex;align-items:flex-start;gap:12px;
}
.hz-row:last-child{border-bottom:none}
.hz-row-id{font-size:10px;color:var(--line-33);min-width:90px;flex-shrink:0;padding-top:2px}
.hz-row-content{flex:1;min-width:0}
.hz-row-title{font-size:12px;color:var(--text-bright);margin-bottom:3px}
.hz-row-meta{font-size:10px;color:var(--line-55)}
.hz-row-meta .sep{color:var(--line-33)}

/* ---------- badges ---------- */
.hz-badge{
  display:inline-block;font-size:9px;padding:2px 6px;letter-spacing:1px;
  border:1px solid;margin-left:6px;vertical-align:middle;white-space:nowrap;
}
.badge-red{border-color:var(--red);color:var(--red)}
.badge-yellow{border-color:var(--yellow);color:var(--yellow)}
.badge-green{border-color:var(--green);color:var(--green)}
.badge-gray{border-color:var(--line-33);color:var(--line-55)}

/* ---------- redacted ---------- */
.redacted{
  background:var(--line);color:var(--line);user-select:none;padding:0 4px;
  border-radius:1px;animation:redact-flicker 6s infinite;
}
@keyframes redact-flicker{
  0%,97%,100%{background:var(--line);color:var(--line)}
  98%{background:#2a5a85;color:#2a5a85}
}

/* ---------- login ---------- */
.hz-login{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:16px;padding:40px 16px;text-align:center;
}
.hz-login-logo{
  width:200px;max-width:62%;height:auto;margin-bottom:2px;
  filter:drop-shadow(0 0 22px #74c0f455);
  animation:logo-flicker 5s infinite;
}
@keyframes logo-flicker{
  0%,100%{opacity:1}
  96%{opacity:1}
  97%{opacity:.55;filter:drop-shadow(0 0 22px #74c0f4aa)}
  98%{opacity:1}
}
/* header inline logo mark */
.hz-mark{height:22px;width:auto;vertical-align:middle;margin-right:8px;filter:drop-shadow(0 0 6px #74c0f455)}
/* footer studio mark */
.hz-foot-mark{height:30px;width:auto;vertical-align:middle;opacity:.75}
.hz-foot-credit{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.hz-login-box{
  background:var(--bg-panel);border:1px solid var(--line-44);padding:32px;width:100%;max-width:360px;
  box-shadow:0 0 40px -12px var(--line-44);
}
.hz-login-title{color:var(--text-bright);letter-spacing:4px;font-size:14px;text-align:center;margin-bottom:8px}
.hz-login-note{font-size:10px;color:var(--line-55);text-align:center;margin-bottom:22px;letter-spacing:1px}
.hz-login-label{font-size:10px;color:var(--line-55);letter-spacing:2px;margin-bottom:6px;text-align:left}
.hz-login input{
  background:var(--bg);border:1px solid var(--line-33);color:var(--text-bright);
  font-family:var(--mono);font-size:13px;padding:9px 10px;width:100%;margin-bottom:16px;outline:none;
}
.hz-login input:focus{border-color:var(--line);box-shadow:0 0 10px -4px var(--line)}
.hz-login-btn{
  background:var(--line);color:#000;border:none;font-family:var(--mono);
  font-size:12px;font-weight:bold;letter-spacing:2px;padding:11px;width:100%;cursor:pointer;
}
.hz-login-btn:hover{background:var(--text-bright)}
.hz-login-btn:disabled{opacity:.6;cursor:wait}
.hz-error{color:var(--red);font-size:11px;text-align:center;margin-top:8px;display:none;letter-spacing:1px}
.hz-ok{color:var(--green);font-size:11px;text-align:center;margin-top:8px;display:none;letter-spacing:2px}
.hz-foot-warn{font-size:10px;color:var(--line-22);letter-spacing:2px}

/* boot log under login */
.hz-boot{font-size:10px;color:var(--line-33);letter-spacing:1px;max-width:360px;width:100%;text-align:left;white-space:pre-wrap;min-height:48px}

/* ---------- personnel / object cards ---------- */
.hz-card-block{background:var(--bg-panel);border:1px solid var(--line-11);padding:14px;margin-bottom:10px}
.hz-card-block.classified{border-color:#e84f4f33}
.hz-block-name{font-size:13px;color:var(--text-bright);margin-bottom:4px}
.hz-block-meta{font-size:10px;color:var(--line-55);margin-bottom:8px}
.hz-kv{display:flex;gap:8px;font-size:11px;margin-bottom:3px}
.hz-kv-key{color:var(--line-55);min-width:96px;flex-shrink:0}
.hz-kv-val{color:var(--text)}

.hz-object-id{font-size:10px;color:var(--line-55);letter-spacing:2px;margin-bottom:4px}

/* ---------- restricted / 404 ---------- */
.hz-restricted{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 20px;gap:18px;
}
.hz-restricted .lock{font-size:60px;color:var(--red);line-height:1;text-shadow:0 0 24px #e84f4f66}
.hz-restricted h1{font-size:26px;letter-spacing:6px;color:var(--red);animation:glitch-shift .9s infinite}
.hz-restricted .code{font-size:12px;color:var(--line-55);letter-spacing:3px}
.hz-restricted .msg{font-size:12px;color:var(--text);max-width:440px}
@keyframes glitch-shift{
  0%,100%{transform:translate(0,0);text-shadow:0 0 24px #e84f4f66}
  92%{transform:translate(-2px,1px);text-shadow:2px 0 #4fa8e8,-2px 0 #e84f4f}
  96%{transform:translate(2px,-1px);text-shadow:-2px 0 #4fa8e8,2px 0 #e84f4f}
}

/* ---------- footer ---------- */
.hz-footer{
  border-top:1px solid var(--line-11);padding:12px 20px;font-size:10px;
  color:var(--line-33);letter-spacing:1px;text-align:center;
}
.hz-footer .blink{color:var(--line-55)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .hz-grid{grid-template-columns:1fr 1fr}
  .hz-header{flex-direction:column;align-items:flex-start;gap:6px}
  .hz-status{text-align:left}
  .hz-nav{top:auto;position:static}
  .hz-row{flex-direction:column;gap:2px}
  .hz-row-id{padding-top:0}
}
@media(max-width:420px){
  .hz-grid{grid-template-columns:1fr}
  .hz-kv{flex-direction:column;gap:0}
  .hz-kv-key{min-width:0}
}

/* subtle global flicker */
@keyframes screen-flicker{
  0%,100%{opacity:1}
  98.5%{opacity:1}
  99%{opacity:.93}
}
.hz{animation:screen-flicker 7s infinite}