/* checkmysite.pro — console stylesheet */
:root{
  --field:#080a0c; --panel:#0c1013; --bone:#e9e7e0;
  --name:#b3bbbf; --sub:#7b858a; --dim:#7b858a; --ghost:#2b3237;
  --rule:#1b2226; --alert:#ff4b26; --live:#39e0d0; --warn:#ffa62e;
  --wash:rgba(57,224,208,0.05); --wash-on:rgba(57,224,208,0.11);
  --head:'Jost',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --pad:clamp(14px,2.4vw,30px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{background:var(--field);color:var(--bone);font-family:var(--mono);font-size:11px;-webkit-font-smoothing:antialiased;}
.m{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;}

.chassis{position:fixed;inset:clamp(8px,1.4vw,18px);border:1px solid var(--rule);display:grid;grid-template-rows:auto 1fr auto auto;grid-template-columns:34px 1fr;}
.brk{position:absolute;width:11px;height:11px;border:1px solid var(--bone);pointer-events:none;z-index:5;}
.brk.tl{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.brk.tr{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.brk.bl{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.brk.br{bottom:-1px;right:-1px;border-left:0;border-top:0;}

.rail{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px;padding:0 var(--pad);border-bottom:1px solid var(--rule);background:var(--panel);}
.rail .id{color:var(--bone);letter-spacing:0.22em;}
.rail .id b{font-weight:700;}
.rail .id .tld{color:var(--live);}
.rail .meta{display:flex;gap:clamp(10px,2vw,26px);color:var(--dim);}
.pulse{display:inline-flex;align-items:center;gap:6px;color:var(--live);}
.pulse i{width:5px;height:5px;background:var(--live);border-radius:50%;animation:bp 1.6s ease-in-out infinite;}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:680px){.rail .meta .hide{display:none;}}

.side{border-right:1px solid var(--rule);background:var(--panel);display:flex;align-items:center;justify-content:center;position:relative;}
.side span{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--dim);letter-spacing:0.5em;font-size:9px;text-transform:uppercase;}
.ticks{position:absolute;top:12px;bottom:12px;left:0;width:6px;}
.ticks i{position:absolute;left:0;width:5px;height:1px;background:var(--ghost);}

.stage{overflow:auto;padding:var(--pad);display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px);}
.stage::-webkit-scrollbar{width:2px;}
.stage::-webkit-scrollbar-thumb{background:var(--ghost);}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:clamp(10px,1.8vh,18px);}
.host{font-family:var(--head);font-weight:100;font-size:clamp(24px,4.2vw,48px);letter-spacing:-0.03em;line-height:1;}
.host .t{color:var(--sub);}
.reads{display:flex;gap:clamp(20px,4vw,44px);}
.read{text-align:right;}
.read .v{font-family:var(--head);font-weight:100;font-size:clamp(34px,5.6vw,70px);line-height:0.82;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;}
.read .v.hot{color:var(--alert);}
.read .k{color:var(--sub);margin-top:7px;font-size:9px;letter-spacing:0.24em;}

/* ── channel strip: each channel is a control you can select ─── */
.ch{width:100%;text-align:left;background:none;border:0;border-left:1px solid transparent;font:inherit;color:inherit;cursor:pointer;
    display:grid;grid-template-columns:142px 1fr 34px 74px;gap:clamp(8px,1.6vw,18px);align-items:center;
    padding:clamp(5px,0.9vh,8px) 0 clamp(5px,0.9vh,8px) 10px;margin-left:-10px;
    opacity:0;transform:translateY(3px);transition:opacity .18s,transform .18s,border-color .12s,background .12s;}
.ch.up{opacity:1;transform:none;}
.ch:hover,.ch:focus-visible{outline:none;border-left-color:var(--live);background:var(--wash);}
.n b{display:block;color:var(--name);font-weight:400;font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;line-height:1.3;}
.ch .g{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.n i{display:block;font-style:normal;color:var(--sub);font-size:9px;letter-spacing:0.06em;text-transform:lowercase;margin-top:3px;}
.ch.hot .n b{color:var(--bone);}
.meter{display:flex;gap:2px;height:13px;}
.seg{flex:1;background:var(--ghost);transition:background .1s;}
.seg.on{background:var(--bone);}
.ch.hot .seg.on{background:var(--alert);}
.ch.mid .seg.on{background:var(--warn);}
.ch .v{text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:var(--bone);}
.ch.hot .v{color:var(--alert);}
.ch .f{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:transparent;white-space:nowrap;}
.ch.hot .f{color:var(--alert);}
.ch.mid .f{color:var(--warn);}
@media(max-width:680px){.ch{grid-template-columns:112px 1fr 30px;}.ch .f{display:none;}}

.flag{border-top:1px solid var(--rule);padding-top:clamp(10px,1.8vh,18px);display:grid;grid-template-columns:142px 1fr;gap:clamp(8px,1.6vw,18px);opacity:0;transition:opacity .3s;}
.flag.up{opacity:1;}
.flag .k{color:var(--alert);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;}
.flag h2{font-family:var(--head);font-weight:200;font-size:clamp(16px,2.2vw,25px);letter-spacing:-0.02em;color:var(--bone);}
.flag .d{color:var(--dim);font-size:11px;line-height:1.8;margin-top:8px;max-width:62ch;}
.flag .fix{margin-top:10px;border-left:1px solid var(--alert);padding-left:12px;font-size:10.5px;line-height:1.9;color:var(--bone);word-break:break-all;}
@media(max-width:680px){.flag{grid-template-columns:1fr;gap:8px;}}

/* ── annunciator: the readout line, part of the chassis ─────── */
.ann{grid-column:1/3;border-top:1px solid var(--rule);background:var(--panel);padding:11px var(--pad);min-height:62px;display:flex;flex-direction:column;justify-content:center;gap:5px;}
.ann .k{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--live);transition:color .12s;}
.ann .k.hot{color:var(--alert);}
.ann .k em{font-style:normal;color:var(--sub);letter-spacing:0.06em;text-transform:lowercase;margin-left:10px;}
.ann .g{font-size:11px;line-height:1.6;color:var(--name);max-width:96ch;}
@media(max-width:680px){.ann{min-height:74px;}.ann .g{font-size:10.5px;}}

.cmd{grid-column:1/3;border-top:1px solid var(--rule);transition:border-color .15s;background:var(--panel);height:46px;display:flex;align-items:center;gap:12px;padding:0 var(--pad);}
.cmd .p{color:var(--live);font-size:13px;}
.cmd input{flex:1;background:none;border:none;outline:none;color:var(--bone);font-family:var(--mono);font-size:12.5px;letter-spacing:0.04em;caret-color:var(--live);}
.cmd input::placeholder{color:var(--ghost);}
.cmd .go{color:var(--sub);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;white-space:nowrap;}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}.ch,.flag{opacity:1!important;transform:none!important;}}

/* ── production additions ─────────────────────────────────────── */
.host .t{color:var(--sub);}
.flag .fix[hidden]{display:none;}

/* itemized report, revealed by `report` or after email */
.items{border-top:1px solid var(--rule);padding-top:clamp(12px,2vh,20px);display:none;}
.items.on{display:block;}
.items .ih{color:var(--sub);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:10px;}
.item{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid rgba(27,34,38,0.5);}
.item:last-child{border-bottom:none;}
.item .s{font-size:11px;line-height:1.5;}
.item.pass .s{color:var(--sub);}
.item.warn .s{color:var(--warn);}
.item.fail .s{color:var(--alert);}
.item .b{color:var(--bone);font-size:11px;}
.item .d{color:var(--dim);font-size:10.5px;line-height:1.7;margin-top:2px;}
.item .w{color:var(--sub);font-size:10px;line-height:1.7;margin-top:3px;}

/* compare */
.cmp{border-top:1px solid var(--rule);padding-top:clamp(12px,2vh,20px);}
.cmp[hidden]{display:none;}
.cmp-row{display:grid;grid-template-columns:110px 1fr 56px 1fr;gap:12px;align-items:center;padding:7px 0;}
.cmp-row .cn{color:var(--sub);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;}
.cmp-row .cv{font-size:11px;text-align:center;color:var(--dim);font-variant-numeric:tabular-nums;}
.cmp-row .cv b{color:var(--bone);font-weight:700;}
.cmp-hosts{display:grid;grid-template-columns:110px 1fr 56px 1fr;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:6px;}
.cmp-hosts .hh{font-family:var(--head);font-weight:200;font-size:clamp(13px,1.8vw,18px);color:var(--bone);letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmp-hosts .hh.win{color:var(--live);}
.cmp-verdict{color:var(--dim);font-size:11px;line-height:1.8;padding-top:12px;max-width:70ch;}
.cmp-verdict b{color:var(--bone);font-weight:400;}
@media(max-width:680px){.cmp-row{grid-template-columns:84px 1fr 44px 1fr;}.cmp-hosts{grid-template-columns:84px 1fr 44px 1fr;}}

/* spec plate — the terms, in the instrument's own fine print */
.spec{border-top:1px solid var(--rule);margin-top:auto;padding-top:14px;
  color:var(--sub);font-family:var(--mono);font-size:9.5px;line-height:1.9;
  letter-spacing:0.1em;max-width:78ch;}

/* command feedback + offer line */
.cmd input.err{color:var(--alert);}
.ann .g a,.ann .g b{color:var(--live);font-weight:400;text-decoration:none;}
.ann .g .cta{color:var(--bone);border:1px solid var(--rule);padding:2px 8px;margin-inline-start:8px;cursor:pointer;background:none;font:inherit;letter-spacing:inherit;}
.ann .g .cta:hover{border-color:var(--live);color:var(--live);background:var(--wash);}


/* ══ tech visuals ═══════════════════════════════════════════════════════
   Instrument furniture only: everything here is telemetry, not decoration. */

/* 01 · scan button — now a real control with a hover state */
.cmd .go{background:none;border:1px solid transparent;padding:7px 12px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;font-family:var(--mono);}
.cmd .go:hover,.cmd .go:focus-visible{color:var(--live);border-color:var(--live);outline:none;
  background:var(--wash);}
.cmd .go:active{background:var(--wash-on);}

/* 02 · grid substrate — faint plotting-paper behind the stage only */
.stage{position:relative;}
.stage::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:44px 44px;opacity:0.22;}
.stage > *{position:relative;}

/* 03 · scanline — a hairline sweeps the stage while working */
.scanline{position:absolute;left:0;right:0;top:0;height:1px;background:var(--live);
  box-shadow:none;opacity:0;pointer-events:none;z-index:3;}
.chassis.busy .scanline{opacity:0.7;animation:sweep 1.15s cubic-bezier(.6,.05,.4,.95) infinite;}
@keyframes sweep{0%{top:0;}100%{top:100%;}}

/* 04 · trace — a live polyline under the two big numerals */
.trace{display:block;width:100%;height:26px;margin-top:10px;opacity:0.85;}
.trace polyline{fill:none;stroke:var(--ghost);stroke-width:1;}
.trace.hot polyline{stroke:var(--alert);}
.trace.ok polyline{stroke:var(--live);}

/* 05 · channel hover — the meter answers the pointer */
.ch{position:relative;}
.ch::after{content:attr(data-ch);position:absolute;inset-inline-end:100%;top:50%;
  transform:translateY(-50%);color:transparent;font-size:8px;letter-spacing:.3em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;}
.ch:hover .seg.on,.ch:focus-visible .seg.on{filter:brightness(1.35);}
.ch:hover .n b,.ch:focus-visible .n b{color:var(--live);}
.ch.hot:hover .n b,.ch.hot:focus-visible .n b{color:var(--alert);}

/* 06 · segment shimmer on the pulse dot's rhythm while scanning */
.chassis.busy .seg{animation:segidle 1.6s ease-in-out infinite;}
.chassis.busy .seg:nth-child(3n){animation-delay:.2s;}
.chassis.busy .seg:nth-child(3n+1){animation-delay:.45s;}
@keyframes segidle{0%,100%{opacity:1;}50%{opacity:.55;}}

@media(prefers-reduced-motion:reduce){
  .chassis.busy .scanline{animation:none;opacity:0;}
  .chassis.busy .seg{animation:none;}
}


/* ══ art ════════════════════════════════════════════════════════════════ */

/* 07 · blueprint render — the lily as a botanical X-ray, ambient in the stage */
.schematic{position:absolute;inset-inline-end:clamp(-30px,2vw,44px);top:50%;
  transform:translateY(-52%);width:min(56vh,440px);height:auto;
  pointer-events:none;z-index:0;opacity:0.8;}
/* the render is RGBA with the field knocked out — no mask needed, and none
   wanted: a mask centred on the frame clipped the blossom, which sits high
   and right of centre. */
.schematic .sc-frame circle,.schematic .sc-frame line{fill:none;stroke:var(--rule);stroke-width:1;}
.schematic .sc-petals path{fill:none;stroke:var(--ghost);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:700;stroke-dashoffset:0;}
.schematic .sc-core{fill:none;stroke:var(--sub);stroke-width:1;}
.schematic .sc-notes line{stroke:var(--ghost);stroke-width:1;}
.schematic .sc-notes text{fill:var(--ghost);font-family:var(--mono);font-size:8.5px;
  letter-spacing:0.18em;text-transform:uppercase;}
/* on boot, the petals draw themselves once */
.schematic.draw{animation:scfade 1.6s cubic-bezier(.4,0,.2,1) both;}
@keyframes scfade{from{opacity:0;transform:translateY(-50%) scale(0.985);}to{opacity:0.8;transform:translateY(-52%) scale(1);}}
.schematic.draw .sc-petals path{animation:scdraw 2.4s cubic-bezier(.5,0,.3,1) both;}
.schematic.draw .sc-petals path:nth-child(2){animation-delay:.15s;}
.schematic.draw .sc-petals path:nth-child(3){animation-delay:.3s;}
.schematic.draw .sc-petals path:nth-child(4){animation-delay:.45s;}
.schematic.draw .sc-petals path:nth-child(5){animation-delay:.6s;}
.schematic.draw .sc-petals path:nth-child(6){animation-delay:.75s;}
@keyframes scdraw{from{stroke-dashoffset:700;}to{stroke-dashoffset:0;}}
/* while scanning, the whole drawing recedes so telemetry owns the stage */
.chassis.busy .schematic{opacity:0.28;transition:opacity .4s;}
@media(max-width:760px){.schematic{display:none;}}

/* 08 · guide — dashed trace flowing into the command bar */
.guide{grid-column:1/3;justify-self:center;width:min(520px,92%);height:64px;
  margin:-58px 0 -6px;pointer-events:none;z-index:4;position:relative;
  transition:opacity .5s;}
.guide .g-trace{fill:none;stroke:var(--live);stroke-width:1;opacity:0.75;
  stroke-dasharray:5 7;animation:gflow 1.1s linear infinite;}
.guide .g-head{fill:none;stroke:var(--live);stroke-width:1;opacity:0.75;
  animation:gblink 1.6s ease-in-out infinite;}
.guide .g-label{fill:var(--sub);font-family:var(--mono);font-size:9px;
  letter-spacing:0.22em;text-transform:uppercase;}
@keyframes gflow{to{stroke-dashoffset:-24;}}
@keyframes gblink{0%,100%{opacity:0.75;}50%{opacity:0.25;}}
.guide.off{opacity:0;}

@media(prefers-reduced-motion:reduce){
  .guide .g-trace,.guide .g-head{animation:none;}
  .schematic.draw .sc-petals path{animation:none;stroke-dashoffset:0;}
}


/* 09 · mode selector — a two-position switch on the command bar */
.cmd .mode{display:flex;border:1px solid var(--rule);}
.mode-b{font-family:var(--mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--sub);background:none;border:none;padding:7px 11px;cursor:pointer;
  transition:color .15s,background .15s;}
.mode-b + .mode-b{border-inline-start:1px solid var(--rule);}
.mode-b:hover,.mode-b:focus-visible{color:var(--live);background:var(--wash);}
.mode-b.on{color:var(--live);background:var(--wash-on);}
.mode-b:focus-visible{outline:1px solid var(--live);outline-offset:-1px;}
.cmd .vs{color:var(--ghost);font-size:9px;letter-spacing:0.2em;padding:0 2px;white-space:nowrap;}
.cmd input#in2{flex:1;background:none;border:none;outline:none;color:var(--bone);
  font-family:var(--mono);font-size:12.5px;letter-spacing:0.04em;caret-color:var(--live);min-width:0;}
.cmd input#in2::placeholder{color:var(--ghost);}
.cmd input#in{min-width:0;}
.cmd:focus-within{border-top-color:rgba(57,224,208,0.4);}
@media(max-width:560px){.cmd{gap:8px;padding:0 12px;}.mode-b{padding:7px 8px;letter-spacing:0.1em;}.cmd .go{padding:7px 8px;}}