/* LuraHosting Looking Glass — "field telemetry instrument" theme.
   Light magnesium faceplate, engraved labels, amber CRT readout. CSP-clean. */

@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/space-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/space-mono-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#e7eaec; --paper-hi:#f1f3f4; --paper-lo:#d7dde0;
  --ink:#16242c; --ink-soft:#54646d;
  --hair:#b7c1c6; --hair-soft:#cbd2d6;
  --signal:#cf4a1a; --signal-deep:#a4380f;
  --ok:#2f7d5b;
  --screen:#0b1115; --screen-edge:#05080a;
  --amber:#e9ab46; --amber-hi:#ffc673; --amber-dim:#7f6a40; --amber-body:#d9b774;
  --fd:"Space Grotesk",system-ui,sans-serif;
  --fm:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--fd); line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(180deg,#eceeef,var(--paper) 220px);
}

/* -------------------------------- masthead ------------------------------- */
.masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  max-width:1120px; margin:0 auto; padding:28px clamp(18px,4vw,40px) 18px;
  border-bottom:1px solid var(--hair);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand-mark{display:block; color:var(--ink)}
.brand-name{font-weight:700; letter-spacing:.34em; font-size:16px; padding-left:2px}
.masthead-meta{display:flex; flex-direction:column; align-items:flex-end; gap:7px}
.eyebrow{font-family:var(--fm); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft)}
.status{display:flex; gap:8px}
.status-item{font-family:var(--fm); font-size:11px; letter-spacing:.08em; color:var(--ink-soft);
  border:1px solid var(--hair); padding:3px 9px; border-radius:2px; background:var(--paper-hi)}
.status-secure{color:var(--signal-deep); border-color:#e0b9a8}
.status-secure::before{content:"● "; font-size:9px; vertical-align:1px}

/* -------------------------------- console -------------------------------- */
.console{
  position:relative; max-width:1120px; margin:26px auto; padding:clamp(22px,3.4vw,40px);
  background:var(--paper-hi);
  border:1px solid var(--hair);
  box-shadow:0 1px 0 #fff inset, 0 22px 60px -40px rgba(20,34,44,.55);
}
.console::before{ /* graticule */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, var(--hair) .8px, transparent .9px);
  background-size:24px 24px; opacity:.16;
}
.reg{position:absolute; width:13px; height:13px; pointer-events:none; color:var(--signal)}
.reg::before,.reg::after{content:""; position:absolute; background:currentColor}
.reg::before{width:13px; height:1px} .reg::after{width:1px; height:13px}
.reg-tl{top:9px; left:9px} .reg-tr{top:9px; right:9px}
.reg-tr::after{right:0} .reg-bl{bottom:9px; left:9px} .reg-bl::before{bottom:0}
.reg-br{bottom:9px; right:9px} .reg-br::before{bottom:0} .reg-br::after{right:0}

.lead{position:relative; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--hair)}
.lead-line{margin:0; font-weight:500; font-size:clamp(20px,2.5vw,27px); letter-spacing:-.01em; max-width:30ch}
.lead-sub{margin:8px 0 0; font-family:var(--fm); font-size:13px; color:var(--ink-soft); max-width:62ch}

.grid{position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(20px,3vw,40px); align-items:start}
@media (max-width:880px){ .grid{grid-template-columns:1fr; gap:26px} }

/* ---------------------------------- zones -------------------------------- */
.zone{margin-bottom:24px}
.zone:last-child{margin-bottom:0}
.zone-row{display:flex; gap:22px; align-items:flex-start}
.zone-col{flex:1} .zone-col-narrow{flex:0 0 auto}
.zone-label{display:flex; align-items:center; gap:7px; font-family:var(--fm); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:11px}
.tick{width:7px; height:7px; background:var(--signal); display:inline-block; transform:translateY(.5px)}

/* origins */
.origins{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair-soft)}
.origins-loading{font-family:var(--fm); font-size:13px; color:var(--ink-soft); padding:14px 2px}
.origin{
  display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:12px; width:100%;
  text-align:left; background:none; border:0; border-bottom:1px solid var(--hair-soft);
  padding:12px 6px; cursor:pointer; color:var(--ink); font-family:var(--fd);
  transition:background .12s;
}
.origin:hover{background:var(--paper)}
.origin.is-active{background:var(--paper)}
.origin-mark{width:11px; height:11px; border:1px solid var(--ink-soft); border-radius:50%}
.origin.is-active .origin-mark{border-color:var(--signal); background:radial-gradient(circle,var(--signal) 0 45%,transparent 46%)}
.origin-body{min-width:0}
.origin-city{font-weight:500; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.origin-coords{font-family:var(--fm); font-size:11px; color:var(--ink-soft); letter-spacing:.02em; margin-top:2px}
.origin-code{font-family:var(--fm); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--ink-soft);
  border:1px solid var(--hair); padding:2px 6px; border-radius:2px; background:var(--paper-hi)}
.origin.is-pending .origin-mark{border-style:dashed; border-color:var(--signal)}

/* switches (probe / family) */
.switch{display:inline-flex; border:1px solid var(--hair); background:var(--paper); border-radius:2px; overflow:hidden}
.opt{appearance:none; background:none; border:0; border-left:1px solid var(--hair);
  font-family:var(--fm); font-size:13px; letter-spacing:.04em; color:var(--ink-soft);
  padding:9px 16px; cursor:pointer; transition:color .12s,background .12s; position:relative}
.opt:first-child{border-left:0}
.opt:hover{color:var(--ink)}
.opt.is-active{color:var(--ink); background:var(--paper-hi); box-shadow:inset 0 -2px 0 var(--signal)}

/* target */
.target{display:flex; gap:10px; margin-top:2px}
.target-input{
  flex:1; min-width:0; font-family:var(--fm); font-size:15px; color:var(--ink);
  background:var(--paper-lo); border:1px solid var(--hair);
  box-shadow:inset 0 1px 2px rgba(20,34,44,.12); border-radius:2px; padding:13px 14px; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.target-input::placeholder{color:#90a0a8}
.target-input:focus{border-color:var(--signal); box-shadow:inset 0 1px 2px rgba(20,34,44,.12),0 0 0 3px rgba(207,74,26,.16)}
.target-input.is-invalid{border-color:var(--signal); box-shadow:0 0 0 3px rgba(207,74,26,.16)}
.measure{
  appearance:none; flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fd); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper-hi); background:var(--signal); border:1px solid var(--signal-deep); border-radius:2px;
  padding:0 20px; cursor:pointer; transition:background .12s, transform .04s;
}
.measure:hover{background:var(--signal-deep)}
.measure:active{transform:translateY(1px)}
.measure:disabled{background:#bfc3c4; border-color:#aeb4b5; color:#eef0f1; cursor:not-allowed}
.measure-arrow{font-size:12px; transform:translateY(.5px)}
.measure.is-running{color:transparent; position:relative}
.measure.is-running::after{content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.link-action{display:inline-block; margin-top:10px; background:none; border:0; cursor:pointer;
  font-family:var(--fm); font-size:12px; color:var(--ink-soft); padding:2px 0}
.link-action:hover{color:var(--signal-deep)}
.note{margin:9px 0 0; font-family:var(--fm); font-size:11.5px; color:var(--ink-soft)}

/* --------------------------------- readout ------------------------------- */
.readout{position:sticky; top:18px}
@media (max-width:880px){ .readout{position:static} }
.screen{
  position:relative; overflow:hidden; background:radial-gradient(120% 100% at 50% 0%,#10171c,var(--screen));
  border:1px solid var(--screen-edge); border-radius:4px; padding:18px 20px 16px;
  box-shadow:inset 0 0 0 1px rgba(233,171,70,.06), inset 0 2px 26px rgba(0,0,0,.6), 0 18px 40px -30px rgba(20,34,44,.7);
}
.scanlines{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(233,171,70,.05) 0 1px, transparent 1px 3px); opacity:.5}
.screen-head{display:flex; align-items:center; gap:10px; position:relative}
.screen-label{font-family:var(--fm); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber-dim)}
.screen-cmd{flex:1; min-width:0; font-family:var(--fm); font-size:11px; color:var(--amber-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85}
.live{display:inline-flex; align-items:center; gap:6px; font-family:var(--fm); font-size:11px;
  letter-spacing:.08em; color:var(--amber-dim)}
.live-dot{width:7px; height:7px; border-radius:50%; background:#3a3320; box-shadow:none}
.live[data-on="true"]{color:var(--amber)}
.live[data-on="true"] .live-dot{background:var(--amber-hi); box-shadow:0 0 8px var(--amber); animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.gauge{display:flex; align-items:baseline; gap:14px; position:relative; padding:14px 0 12px;
  margin-top:8px; border-bottom:1px solid rgba(233,171,70,.14)}
.gauge-value{font-family:var(--fd); font-weight:700; font-size:clamp(46px,8vw,82px); line-height:.9;
  color:var(--amber-hi); letter-spacing:-.02em; text-shadow:0 0 18px rgba(255,198,115,.25); font-variant-numeric:tabular-nums}
.gauge-side{display:flex; flex-direction:column; gap:3px; padding-bottom:6px}
.gauge-unit{font-family:var(--fm); font-size:15px; color:var(--amber)}
.gauge-label{font-family:var(--fm); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-dim)}

.screen-output{position:relative; margin:14px 0 0; font-family:var(--fm); font-size:12.5px; line-height:1.62;
  color:var(--amber-body); white-space:pre-wrap; word-break:break-word; max-height:300px; overflow:auto; tab-size:4;
  text-shadow:0 0 10px rgba(217,183,116,.12)}
.screen-output::-webkit-scrollbar{width:8px} .screen-output::-webkit-scrollbar-thumb{background:rgba(233,171,70,.2)}
.screen-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
  padding-top:11px; border-top:1px solid rgba(233,171,70,.14)}
.screen-meta{font-family:var(--fm); font-size:11.5px; color:var(--amber-dim); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.copy{appearance:none; background:none; color:var(--amber); border:1px solid rgba(233,171,70,.4);
  font-family:var(--fm); font-size:11px; padding:4px 11px; border-radius:2px; cursor:pointer; flex:0 0 auto}
.copy:hover{background:rgba(233,171,70,.12)}

/* acquiring sweep */
.screen.is-running::after{content:""; position:absolute; left:0; right:0; height:36px; top:-36px;
  background:linear-gradient(180deg, transparent, rgba(255,198,115,.13), transparent);
  animation:sweep 1.15s linear infinite; pointer-events:none}
@keyframes sweep{from{transform:translateY(0)}to{transform:translateY(420px)}}

/* -------------------------------- colophon ------------------------------- */
.colophon{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  max-width:1120px; margin:0 auto; padding:22px clamp(18px,4vw,40px) 40px;
  font-family:var(--fm); font-size:11.5px; color:var(--ink-soft); letter-spacing:.04em}
.colophon-rule{width:34px; height:1px; background:var(--hair)}

::selection{background:rgba(207,74,26,.22)}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px}
.measure:focus-visible,.opt:focus-visible{outline-offset:-2px}

@media (max-width:560px){
  .masthead{flex-direction:column; align-items:flex-start; gap:14px}
  .masthead-meta{align-items:flex-start}
  .zone-row{flex-direction:column; gap:18px}
}

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