/* SeenSilver Home only (loaded by index.html after site.css). 2026-10-20 Direction A "Command centre" (SITE-BRIEF-05, James q386).
   Dark glass hero, drifting grid, example dashboard, terminal check. Scoped under body.dA. Motion is off under prefers-reduced-motion.
   Removal: drop this file, home.js and the home-hero-A.html include in build.js. */
:root{--mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;--ok:#6FD3A8;--warn:#F0B35A;--bad:#FF8F80;--gold2:#D3B27C;--panel:rgba(16,27,46,.78)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabn{font-variant-numeric:tabular-nums}
.dA .hero-A{padding:20px 0 40px;background:#0A111F url(grain.svg);border-bottom:1px solid rgba(184,147,90,.35)}
.dA .hero-A::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,#B8935A,transparent);opacity:.7}
.dA .gridwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(85% 75% at 62% 40%,#000 25%,transparent 100%);mask-image:radial-gradient(85% 75% at 62% 40%,#000 25%,transparent 100%)}
.dA .gridbg{position:absolute;inset:-32px;background-image:linear-gradient(rgba(184,147,90,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(184,147,90,.16) 1px,transparent 1px);background-size:32px 32px;will-change:transform;animation:gridA 7s linear infinite}
@keyframes gridA{to{transform:translate3d(32px,32px,0)}}
.dA .scan{position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(184,147,90,.10) 60%,rgba(211,178,124,.35) 100%);border-bottom:1px solid rgba(211,178,124,.55);transform:translate3d(0,-140px,0);will-change:transform;animation:scanA 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes scanA{0%{transform:translate3d(0,-140px,0);opacity:0}8%{opacity:1}70%{opacity:.9}100%{transform:translate3d(0,720px,0);opacity:0}}
.dA .hero-A.is-off .gridbg,.dA .hero-A.is-off .scan,.dA .hero-A.is-off .eyebrow::before{animation-play-state:paused}
.dA .heroA-grid{display:grid;gap:26px;grid-template-columns:1fr;position:relative}
.dA .heroA-grid::before{content:"";position:absolute;right:-8%;top:50%;width:70%;aspect-ratio:1;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(184,147,90,.28),transparent);pointer-events:none;z-index:0}
.dA .hero-in,.dA .dash{z-index:1}
.dA .hero .eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--mono);letter-spacing:.1em;font-size:12px}
.dA .hero .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#6FD3A8;box-shadow:0 0 0 0 rgba(111,211,168,.6);animation:pingA 2.2s ease-out infinite}
@keyframes pingA{70%{box-shadow:0 0 0 9px rgba(111,211,168,0)}100%{box-shadow:0 0 0 0 rgba(111,211,168,0)}}
.dA h1 .ch{opacity:0}.dA h1 .ch.on{opacity:1}
.dA h1 .caret{display:inline-block;width:0;height:.9em;vertical-align:-.08em;position:relative;animation:blinkA .8s steps(2) infinite}
.dA h1 .caret::after{content:"";position:absolute;left:.04em;top:0;width:.07em;height:100%;background:var(--gold2)}
@keyframes blinkA{50%{opacity:0}}
.dA h1 .w{display:inline-block;white-space:nowrap}
/* dashboard */
.dA .dash{position:relative;background:var(--panel);border:1px solid rgba(184,147,90,.4);border-radius:14px;padding:14px 14px 10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);color:#F2F4F7}
.dA .dash::before,.dA .dash::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--gold2);pointer-events:none}
.dA .dash::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.dA .dash::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 14px 0}
.dA .dash-top{display:flex;align-items:center;gap:10px;font:600 13px var(--sans);letter-spacing:.04em;margin-bottom:12px}
.ex-t{margin-left:auto;color:var(--gold2);font:600 11.5px/1.2 var(--mono);letter-spacing:.06em;white-space:nowrap}
.dash-dots{display:inline-flex;gap:5px}.dash-dots i{width:8px;height:8px;border-radius:50%;background:#2B3A57}.dash-dots i:first-child{background:#B8935A}
.dA .kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dA .kpi{position:relative;background:rgba(255,255,255,.035);border:1px solid rgba(184,147,90,.2);border-radius:10px;padding:10px 10px 8px;display:grid;grid-template-columns:1fr auto;align-items:end;row-gap:2px;overflow:hidden}
.dA .kl{grid-column:1/-1;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#C9CCD3}
.dA .kv{font:500 30px/1.05 var(--serif);color:#F2F4F7}
.dA .kd{font:600 12px var(--mono);color:#6FD3A8;align-self:center;justify-self:end}
.dA .spark{grid-column:1/-1;width:100%;height:auto;margin-top:4px;overflow:visible}
.dA .sp-line{fill:none;stroke:var(--gold2);stroke-width:1.3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawA 1.6s .5s ease-out forwards}
.dA .sp-area{fill:rgba(184,147,90,.14);opacity:0;animation:fadeA .8s 1.3s forwards}
@keyframes drawA{to{stroke-dashoffset:0}}@keyframes fadeA{to{opacity:1}}
.dA .chart{position:relative;margin-top:10px;background:rgba(255,255,255,.03);border:1px solid rgba(184,147,90,.2);border-radius:10px;padding:10px 10px 6px}
.dA .chart-h,.dA .feed-h{display:flex;align-items:center;gap:8px;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#C9CCD3;margin-bottom:6px}
.dA .feed-h{margin:12px 0 0}
.dA .chart svg{display:block;width:100%;height:auto}
.dA .cgrid path{stroke:rgba(184,147,90,.18);stroke-width:.8;stroke-dasharray:3 4;fill:none}
.dA .c-line{fill:none;stroke:var(--gold2);stroke-width:1.7;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:round;animation:drawA 2.4s .4s ease-out forwards}
.dA .c-area{opacity:0;animation:fadeA 1s 1.8s forwards}
.dA .c-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#F2DDB0;box-shadow:0 0 12px 2px rgba(211,178,124,.9);opacity:0;animation:fadeA .4s 2.6s forwards}
.dA .cwrap{position:relative}
.dA .feed{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;min-height:92px;overflow:hidden}
.dA .feed li{display:flex;gap:12px;align-items:center;font:13.5px/1.2 var(--mono);color:#E4E6EB;padding:6px 8px;border-left:2px solid #B8935A;background:rgba(255,255,255,.03);animation:inA .5s ease-out}
.dA .feed li time{color:var(--gold2);min-width:46px}
.dA .feed li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes inA{from{opacity:0;transform:translateY(-8px)}}
.dash-note{margin:10px 0 0;font:12px/1.4 var(--mono);color:#B4BCCB}
/* dashboard real-result view: only after a real check, only when WORKER_URL is set (Jane's condition) */
.dA .dash-real[hidden]{display:none}
.dA .dash-real .kv{font-size:34px}
.dA .dash-real .kv.p{color:var(--ok)}.dA .dash-real .kv.w{color:var(--warn)}.dA .dash-real .kv.f{color:var(--bad)}
.dA .dash-real .term-line{margin:0 0 10px;font-size:13px}
.dA .dash-real .rows{margin-top:10px}
.dA .dash-real .btn{width:100%;margin-top:12px;background:#B8935A;border-color:#B8935A;color:#0E1726}
.dA .dash-real .small-link{display:block;margin-top:10px;font:13px var(--mono);color:var(--gold2)}
/* instant website check: terminal panel */
.dA .check{background:var(--bg)}
.dA .chk-head{margin-bottom:18px}
.dA .term{position:relative;background:#0A111F url(grain.svg);border:1px solid rgba(184,147,90,.45);border-radius:14px;color:#E4E6EB;overflow:hidden;box-shadow:0 28px 60px -30px rgba(10,17,31,.9)}
.dA .term::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(184,147,90,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(184,147,90,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.dA .term-bar{position:relative;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(184,147,90,.3);font:12px var(--mono);color:#C9CCD3;background:rgba(255,255,255,.03)}
.dA .term-body{position:relative;padding:16px 14px;font-family:var(--mono)}
.dA .prompt{display:grid;grid-template-columns:1fr;gap:10px}
.dA .prompt label{font:600 13px var(--mono);color:var(--gold2)}
.dA .ps{color:var(--gold2);margin-right:6px}
.dA .prompt input{width:100%;min-height:50px;background:#060B15;color:#F2F4F7;border:1px solid rgba(184,147,90,.5);border-radius:8px;padding:0 14px;font:16px var(--mono);caret-color:var(--gold2)}
.dA .prompt input::placeholder{color:#8993A6}
.dA .prompt input:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(184,147,90,.3)}
.dA .prompt input:disabled,.dA .term .btn:disabled{opacity:.55;cursor:not-allowed}
.dA .term .btn{background:#B8935A;border-color:#B8935A;color:#0E1726;font-family:var(--mono);font-size:15px;justify-self:start}
.dA .term .btn.ghost{background:transparent;color:#F2F4F7;border-color:rgba(242,244,247,.6)}
.dA .bar{height:3px;background:rgba(184,147,90,.2);margin:14px 0 4px;border-radius:2px;overflow:hidden;position:relative}
.dA .bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,#B8935A,#F2DDB0);animation:barA 1.3s ease-in-out infinite}
@keyframes barA{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.dA .term-line{position:relative;margin:12px 0 10px;font:14px/1.5 var(--mono);color:#E4E6EB;overflow-wrap:anywhere}
.dA .term-line .caret{display:inline-block;width:8px;height:15px;background:var(--gold2);vertical-align:-2px;margin-left:4px;animation:blinkA .8s steps(2) infinite}
.dA .term-line.err{color:#FFD2CB}
.dA .rows{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.dA .rows li{display:grid;grid-template-columns:62px 1fr;column-gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed rgba(184,147,90,.22);font:13.5px/1.35 var(--mono);animation:inA .35s ease-out both;animation-delay:calc(var(--i,0)*45ms)}
.dA .rows .bd{grid-row:1/3;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-align:center;padding:4px 0;border-radius:4px;border:1px solid currentColor;text-transform:uppercase}
.dA .rows .nm{color:#F2F4F7;font-weight:700;overflow-wrap:anywhere}.dA .rows .ms{color:#C9CCD3;font-size:12.5px;grid-column:2;overflow-wrap:anywhere}
.dA .rows .val{display:block;margin-top:2px;color:var(--gold2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dA .rows [data-status="pass"] .bd{color:var(--ok)}.dA .rows [data-status="warn"] .bd{color:var(--warn)}.dA .rows [data-status="fail"] .bd{color:var(--bad)}.dA .rows [data-status="na"] .bd{color:#B4BCCB}
.dA .verdict{margin-top:16px;padding:14px;border:1px solid rgba(184,147,90,.5);border-radius:10px;background:rgba(184,147,90,.1);font-family:var(--sans)}
.dA .verdict p{margin:0 0 12px;color:#F2F4F7;font-size:16.5px}
.dA .verdict .btn{font-family:var(--sans);font-size:16px;width:100%}
.dA .check-note{color:#B4BCCB;font:12.5px/1.5 var(--mono);margin:12px 0 0}
.dA .soon-box{margin:6px 0 0;padding:14px;border:1px dashed rgba(184,147,90,.5);border-radius:10px;font:14px/1.55 var(--mono);color:#F2F4F7}
.dA .soon-box a{color:var(--gold2)}
/* states are set by home.js with the hidden attribute: idle | soon | loading | result | error */
.dA [hidden]{display:none!important}
@media (min-width:720px){
  .dA .hero-A{padding:44px 0 56px}
  .dA .heroA-grid{grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
  .dA .kv{font-size:34px}
  .dA .prompt{grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px}
  .dA .term-body{padding:22px}
  .dA .rows li{grid-template-columns:70px 190px 1fr}
  .dA .rows .bd{grid-row:auto}.dA .rows .ms{grid-column:auto}
  .dA .verdict{display:flex;align-items:center;justify-content:space-between;gap:20px}
  .dA .verdict p{margin:0}.dA .verdict .btn{width:auto;flex:none}
}
@media (max-width:719px){.dA .hero h1{font-size:clamp(34px,9.4vw,46px)}.dA .scan{display:none}}
@media (prefers-reduced-motion:reduce){
  .dA .gridbg,.dA .scan,.dA .eyebrow::before,.dA h1 .caret,.dA .term-line .caret,.dA .bar i{animation:none}
  .dA .scan{display:none}
  .dA .sp-line,.dA .c-line{animation:none;stroke-dashoffset:0}.dA .sp-area,.dA .c-area,.dA .c-dot{animation:none;opacity:1}
  .dA .feed li,.dA .rows li{animation:none}
  .dA .bar i{width:100%}
}
/* fix: rows must shrink inside the panel at 390; real-result panel in the hero always uses the two-column row */
.dA .term-body,.dA .rows{min-width:0}
.dA .rows li{grid-template-columns:62px minmax(0,1fr)}
.dA .dash-real .rows li{grid-template-columns:62px minmax(0,1fr)}
.dA .dash-real .rows .bd{grid-row:1/3}.dA .dash-real .rows .ms{grid-column:2}
@media (min-width:720px){.dA .rows li{grid-template-columns:70px 190px minmax(0,1fr)}.dA .dash-real .rows li{grid-template-columns:62px minmax(0,1fr)}.dA #check .rows .nm{grid-column:auto}}
