/* Test loggers (testing-schedule.html), 2 Oct 2026: one data logger per registered test,
   modeled on a bench data logger (Graphtec GL260 style). Drawn by test-loggers.js. */

.lg-section { background:#e9e6e1; padding:3rem 0 3.5rem; }
.lg-inner { max-width:var(--max-width, 1200px); margin:0 auto; padding:0 2rem; }
.lg-intro { max-width:820px; color:#2d4053; font-size:1rem; line-height:1.7; margin:.4rem 0 1.6rem; }
@media (max-width:560px) { .lg-inner { padding:0 1rem; } }

/* terminal block */
.lg { position:relative; padding-top:36px; }
.lg-term { position:absolute; top:0; left:7%; height:46px; display:flex; gap:3px; padding:3px 6px 0; background:linear-gradient(#5b6068, #3b3f45); border-radius:4px 4px 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.lg-screw { width:58px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.lg-screw i { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f1f1ec, #b9b6a8 55%, #6f6c60); box-shadow:0 1px 2px rgba(0,0,0,.6); position:relative; }
.lg-screw i::before, .lg-screw i::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; margin:-1px 0 0 -5.5px; background:#5a574c; }
.lg-screw i::after { transform:rotate(90deg); }
.lg-screw b { font:700 8.5px/1 'IBM Plex Mono', monospace; color:#e7e9ec; letter-spacing:.04em; white-space:nowrap; }

/* body */
.lg-body { position:relative; background:linear-gradient(#5a5f66, #2b2e33 9%, #23262a 92%, #3a3e44); border-radius:14px; padding:8px 8px 10px; box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.lg-top { display:flex; align-items:center; gap:1rem; padding:0 .4rem 8px; }
.lg-vent { flex:1; height:6px; background:repeating-linear-gradient(90deg, #111 0 7px, transparent 7px 11px); opacity:.7; border-radius:2px; max-width:55%; }
.lg-leds { margin-left:auto; display:flex; gap:.9rem; }
.lg-led { display:flex; align-items:center; gap:.3rem; font:700 .56rem 'IBM Plex Sans', sans-serif; letter-spacing:.06em; color:#d9dde2; text-transform:uppercase; }
.lg-led i { width:9px; height:9px; border-radius:50%; background:#2a2e33; box-shadow:inset 0 1px 2px rgba(0,0,0,.7); }
.lg-led.power i { background:#47e06a; box-shadow:0 0 6px #47e06a; }
.lg-led.on-amber i { background:#ffb020; box-shadow:0 0 6px #ffb020; }
.lg-led.blink i { background:#ffb020; box-shadow:0 0 6px #ffb020; animation:lgBlink 1.2s steps(2, start) infinite; }
.lg-led.res-green i { background:#3ddc5a; box-shadow:0 0 7px #3ddc5a; } .lg-led.res-yellow i { background:#ffd21f; box-shadow:0 0 7px #ffd21f; } .lg-led.res-red i { background:#ff3b30; box-shadow:0 0 7px #ff3b30; }
@keyframes lgBlink { to { visibility:hidden; } }

.lg-face { display:grid; grid-template-columns:minmax(0, 1fr) 132px; gap:10px; background:linear-gradient(160deg, #15171a, #07080a 60%); border-radius:10px; padding:10px 10px 8px; box-shadow:inset 0 0 0 1px #000, inset 0 2px 10px rgba(0,0,0,.8); }
@media (max-width:560px) { .lg-face { grid-template-columns:minmax(0, 1fr); padding:10px; } .lg-hdr { font-size:.56rem; gap:.3rem; } .lg-leds { gap:.5rem; } .lg-led { font-size:.5rem; } .lg-vent { display:none; } .lg-body { padding:8px; } }
.lg-brand { font:800 1.05rem/1 'IBM Plex Sans', sans-serif; letter-spacing:.14em; color:#e9ecef; text-align:center; margin:2px 0 8px; }
.lg-brand sup { font-size:.6em; letter-spacing:0; }
.lg-model { margin-top:8px; display:flex; align-items:center; justify-content:center; gap:.55rem; font:500 .78rem 'IBM Plex Sans', sans-serif; color:#c9ced4; text-align:left; }
.lg-model img { flex:0 0 auto; border-radius:50%; }
.lg-model b { display:block; font-weight:700; font-size:.9rem; color:#fff; letter-spacing:.02em; }
.lg-model small { display:block; font-size:.72rem; color:#aab2bb; line-height:1.3; }

/* LCD */
.lg-lcd { background:#000; border:3px solid #26292d; border-radius:4px; box-shadow:0 0 0 1px #000; font-family:'IBM Plex Mono', monospace; color:#e8e8e8; overflow:hidden; }
.lg-hdr { display:flex; align-items:center; gap:.4rem; background:#3a3f46; padding:2px 6px; font-size:.66rem; color:#fff; white-space:nowrap; }
.lg-hdr .md { background:#5b636d; padding:0 .4rem; border-radius:2px; }
.lg-hdr .id { color:#ffe14d; }
.lg-hdr .clk { margin-left:auto; color:#cfe; }
.lg-main { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); min-height:150px; }
.lg-plot { border-right:1px solid #333; padding:2px; }
.lg-plot svg { display:block; width:100%; height:auto; }
.lg-read { display:flex; flex-direction:column; font-size:.7rem; }
.lg-read .ttl { background:#1d4fa8; color:#fff; text-align:center; padding:1px 0; letter-spacing:.06em; }
.lg-big { margin:3px; border:2px solid #e53935; padding:2px 4px; text-align:right; }
.lg-big .k { display:block; text-align:left; font-size:.55rem; color:#ffb3b0; }
.lg-big .v { display:block; font-size:1.25rem; font-weight:600; color:#fff; line-height:1.1; }
.lg-big .u { font-size:.55rem; color:#ddd; }
.lg-row { display:grid; grid-template-columns:10px minmax(0, 1fr) auto; gap:4px; align-items:center; padding:1px 4px; border-top:1px solid #1d1d1d; }
.lg-row .c { width:10px; height:10px; display:block; }
.lg-row .k { color:#bfc4c9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-row .v { color:#fff; font-weight:600; }
.lg-foot { display:flex; align-items:center; gap:.35rem; background:#111; border-top:1px solid #333; padding:2px 6px; font-size:.64rem; color:#9aa3ad; }
.lg-foot .lamp { width:22px; height:9px; border-radius:2px; border:1px solid #444; background:#1c1c1c; }
.lg-foot .lamp.on.green { background:#3ddc5a; } .lg-foot .lamp.on.yellow { background:#ffd21f; } .lg-foot .lamp.on.red { background:#ff3b30; }
.lg-foot .rule { margin-left:auto; color:#cfd6dd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* keys */
.lg-keys { display:grid; grid-template-columns:1fr 1fr; gap:7px; align-content:start; }
.lg-key { all:unset; box-sizing:border-box; cursor:pointer; text-align:center; font:700 .6rem/1 'IBM Plex Sans', sans-serif; letter-spacing:.04em; color:#f2f4f6; text-transform:uppercase;
          padding:.5rem .25rem; border-radius:6px; background:linear-gradient(#3b3f45, #202327); border:1px solid #000; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.6); }
.lg-key:hover { background:linear-gradient(#474c53, #2a2d32); }
.lg-key:active { transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 1px rgba(0,0,0,.6); }
.lg-key:focus-visible, .lg-pad button:focus-visible, .lg-start:focus-visible { outline:2px solid #4fa3ff; outline-offset:2px; }
.lg-key.wide { grid-column:1 / -1; }
.lg-key.red { color:#ff6b6b; }
.lg-key[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.lg-pad { grid-column:1 / -1; position:relative; width:118px; height:118px; transform:scale(.92); margin:2px auto; border-radius:50%; background:radial-gradient(circle, #2a2d32 0 55%, #1a1c20 56%); box-shadow:inset 0 0 0 2px #000, 0 2px 4px rgba(0,0,0,.6); }
.lg-pad button { all:unset; position:absolute; cursor:pointer; color:#e9ecef; font-size:.75rem; width:34px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:linear-gradient(#3b3f45, #23262a); border:1px solid #000; }
.lg-pad .up { top:6px; left:42px; } .lg-pad .dn { bottom:6px; left:42px; } .lg-pad .lt { left:5px; top:44px; width:30px; height:30px; } .lg-pad .rt { right:5px; top:44px; width:30px; height:30px; }
.lg-pad .ent { left:36px; top:36px; width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #2f6fd6, #123d85); font:700 .55rem 'IBM Plex Sans', sans-serif; letter-spacing:.04em; }
.lg-start { all:unset; box-sizing:border-box; grid-column:1 / -1; cursor:pointer; text-align:center; padding:.55rem .3rem; border-radius:10px; font:800 .64rem/1.2 'IBM Plex Sans', sans-serif; letter-spacing:.06em; color:#9fd0ff;
            background:linear-gradient(#2f4f78, #182a42); border:1px solid #000; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.6); }
.lg-start small { display:block; font-weight:600; font-size:.55rem; color:#d7e6f5; letter-spacing:.02em; }

/* details drawer: the record's prediction and outcomes */
.lg-drawer { background:#1d2027; border-radius:0 0 10px 10px; margin:0 10px; padding:0 1.1rem; max-height:0; overflow:hidden; transition:max-height .45s ease, padding .45s ease; box-shadow:inset 0 6px 8px -6px rgba(0,0,0,.8); }
.lg.open .lg-drawer { max-height:2600px; padding:1.1rem; }
.lg-drawer .rcard-body { max-height:none !important; padding:0 !important; overflow:visible; }

/* the record's own content styles (moved with the cards from validation.html) */
.lg-drawer a { color:#f1e303; text-decoration:underline; } .lg-drawer a:hover { color:#fff; }
.pred-note { background:rgba(255,193,7,.1); border-left:3px solid #ffc107; padding:.875rem; border-radius:0 6px 6px 0; font-size:.8rem; color:rgba(255,255,255,.95); line-height:1.7; margin-bottom:.9rem; }
.pred-note strong { color:#ffe033; }
.sp-note { margin:0 0 .9rem; padding:.8rem 1rem; border-left:3px solid #8fa0b0; background:rgba(255,255,255,.06); border-radius:0 6px 6px 0; font-size:.84rem; line-height:1.7; color:rgba(255,255,255,.92); }
.sp-note strong { color:#dfe6ee; }
.oc3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:.65rem; }
@media (max-width:760px) { .oc3 { grid-template-columns:1fr; } }
.op { padding:.875rem; border-radius:7px; border:none; }
.op.g { background:#1e7e34; } .op.y { background:#ffc107; } .op.r { background:#8B0000; }
.op-h { display:flex; align-items:center; gap:5px; margin-bottom:.45rem; }
.op-h .op-dot { width:7px; height:7px; border-radius:50%; }
.op.g .op-dot, .op.r .op-dot { background:rgba(255,255,255,.6); } .op.y .op-dot { background:rgba(0,0,0,.35); }
.op-h strong { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.op.g .op-h strong, .op.r .op-h strong { color:#fff; } .op.y .op-h strong { color:#1a1000; }
.op p { font-size:.82rem; line-height:1.65; margin:0; }
.op.g p, .op.r p { color:rgba(255,255,255,.92); } .op.y p { color:rgba(0,0,0,.82); }
.op .sp-line { margin:.55rem 0 0; padding-top:.45rem; border-top:1px dashed rgba(255,255,255,.35); font-size:.78rem !important; line-height:1.6; }
.op.y .sp-line { border-top-color:rgba(0,0,0,.3); }
.tag { display:inline-flex; align-items:center; gap:3px; font-size:.75rem; font-weight:700; padding:.18rem .5rem; border-radius:8px; margin-top:.45rem; }
.tag img { width:11px; height:11px; opacity:.85; }
.op.g .tag { background:rgba(0,0,0,.18); color:#fff; } .op.g .tag img, .op.r .tag img { filter:brightness(0) invert(1); }
.op.y .tag { background:rgba(0,0,0,.12); color:#1a1000; }
.op.r .tag { background:rgba(0,0,0,.2); color:#fff; }
.op.y a { color:#1a1000; }
.rev-note { font-size:.72rem; line-height:1.55; color:rgba(255,255,255,.85); border-top:1px solid rgba(255,255,255,.2); margin-top:.5rem; padding-top:.5rem; }
.sp-foot { margin:.9rem 0 0; display:grid; gap:.45rem; font-size:.8rem; line-height:1.65; color:rgba(255,255,255,.88); }
.sp-foot p { margin:0; } .sp-foot strong { color:#dfe6ee; }
.lg-src { display:none; }

/* ── the rack (2 Oct 2026): a steel cabinet with perforated mounting rails, a header plate,
      and shelves screwed to the rails, two loggers per shelf ── */
.lg-rack { position:relative; background:linear-gradient(90deg, #15171a, #202328 50%, #15171a); border-radius:8px; padding:0 36px 0;
           box-shadow:0 14px 32px rgba(0,0,0,.35), inset 0 0 0 3px #0c0d0f, inset 0 0 0 4px #3a3e44; }
.lg-rack::before, .lg-rack::after { content:""; position:absolute; top:0; bottom:0; width:24px; z-index:0;
           background:radial-gradient(circle at 50% 50%, #0b0c0e 0 3px, transparent 3.5px) center top / 24px 22px repeat-y,
                      linear-gradient(90deg, #8d949c, #d3d8dd 35%, #a7aeb6 65%, #6f767e); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); }
.lg-rack::before { left:6px; } .lg-rack::after { right:6px; }
.lg-rack-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; margin:0 -32px; padding:14px 0;
           background:linear-gradient(#41464d, #2b2f34); border-bottom:2px solid #0c0d0f; border-radius:6px 6px 0 0; }
.lg-plate { font:700 .72rem 'IBM Plex Mono', monospace; letter-spacing:.18em; color:#d8dde2; padding:.35rem 1rem; border-radius:3px;
           background:linear-gradient(#5a6068, #3c4148); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.5); text-align:center; }
.lg-plate sup { letter-spacing:0; }
.lg-shelf { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.6rem; align-items:end; padding:28px 14px 0; margin:0 -32px; padding-left:40px; padding-right:40px; gap:1.2rem; }
.lg-shelf::after { content:""; grid-column:1 / -1; height:16px; margin:0 -40px; background:linear-gradient(#b9c0c7, #7d848c 40%, #50565d); border-top:1px solid #e4e8ec; box-shadow:0 6px 10px rgba(0,0,0,.55); }
.lg-shelf .lg { align-self:end; }
.lg-ear { position:absolute; bottom:0; width:34px; height:62px; background:linear-gradient(90deg, #9aa1a9, #cfd4d9 50%, #8a9199); border:1px solid #2a2d31; border-radius:3px;
          display:flex; flex-direction:column; justify-content:space-around; align-items:center; z-index:2; }
.lg-ear.l { left:2px; } .lg-ear.r { right:2px; }
.lg-ear i { width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f4f5f6, #8f969d 60%, #4d5359); box-shadow:0 1px 1px rgba(0,0,0,.6); position:relative; }
.lg-ear i::before { content:""; position:absolute; left:2px; right:2px; top:50%; height:2px; margin-top:-1px; background:#3c4146; transform:rotate(-30deg); }
.lg-rack-head .lg-ear { bottom:auto; top:50%; transform:translateY(-50%); height:42px; }
.lg-rack-foot { position:relative; z-index:1; height:30px; margin:22px -32px 0; border-radius:0 0 6px 6px; background:linear-gradient(#2b2f34, #191b1e);
           border-top:2px solid #0c0d0f; box-shadow:inset 0 6px 0 -4px #41464d; }
.lg-rack-foot::before { content:""; position:absolute; left:20%; right:20%; top:11px; height:8px; background:repeating-linear-gradient(90deg, #0a0b0d 0 10px, transparent 10px 15px); opacity:.8; }
@media (max-width:1060px) { .lg-shelf { grid-template-columns:minmax(0, 1fr); gap:2.4rem; } }
@media (max-width:560px) {
  .lg-rack { padding:0 18px; }
  .lg-rack::before, .lg-rack::after { width:12px; left:3px; background-size:12px 16px; }
  .lg-rack::after { left:auto; right:3px; }
  .lg-rack-head, .lg-shelf, .lg-rack-foot { margin-left:-16px; margin-right:-16px; }
  .lg-shelf { padding-left:20px; padding-right:20px; }
  .lg-shelf::after { margin:0 -20px; }
  .lg-ear { width:16px; height:44px; } .lg-ear i { width:8px; height:8px; }
  .lg-plate { font-size:.56rem; letter-spacing:.1em; padding:.3rem .5rem; }
}

/* a logger switched off, in an empty bay */
.lg-off .lg-pad .pad { position:absolute; color:#5b6066; font-size:.75rem; width:34px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:linear-gradient(#2e3136, #1c1e22); border:1px solid #000; }
.lg-off .lg-pad .up { top:6px; left:42px; } .lg-off .lg-pad .dn { bottom:6px; left:42px; } .lg-off .lg-pad .lt { left:5px; top:44px; width:30px; height:30px; } .lg-off .lg-pad .rt { right:5px; top:44px; width:30px; height:30px; }
.lg-off .lg-pad .ent { left:36px; top:36px; width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #26364f, #141c29); font:700 .55rem 'IBM Plex Sans', sans-serif; }
.lg-off .lg-key, .lg-off .lg-start { cursor:default; color:#6b7178; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 3px rgba(0,0,0,.6); }
.lg-off .lg-key:hover { background:linear-gradient(#3b3f45, #202327); }
.lg-off .lg-key.red { color:#7a4545; }
.lg-off .lg-start { background:linear-gradient(#232a33, #15191f); color:#5f6b78; }
.lg-off .lg-start small { color:#5f6b78; }
.lg-off .lg-brand, .lg-off .lg-model, .lg-off .lg-model b { color:#7d848c; }
.lg-off .lg-led { color:#6d737a; }
.lg-off .lg-screw b { color:transparent; }
.lg-dark { height:237px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #050506 0%, #0b0c0e 45%, #16181c 50%, #08090a 56%, #050506 100%); }
.lg-dark span { font:600 .62rem 'IBM Plex Mono', monospace; letter-spacing:.25em; color:#2a2e33; }
@media (max-width:1060px) { .lg-off { display:none; } }

/* phones: readable labels and keys big enough to press (2 Oct 2026 phone audit) */
@media (max-width: 560px) {
  .lg-led { font-size: .66rem; }
  .lg-screw b { font-size: 10px; }
  .lg-hdr { font-size: .66rem !important; }
  .lg-read { font-size: .78rem; }
  .lg-big .k, .lg-big .u, .lg-start small { font-size: .7rem; }
  .lg-foot { font-size: .72rem; }
  .lg-key, .lg-start { font-size: .76rem; min-height: 42px; display: flex; align-items: center; justify-content: center; }
  .lg-start { flex-direction: column; }
  .lg-pad { transform: scale(1.18); margin: 14px auto; }
  .lg-pad .ent { font-size: .62rem; }
  .lg-model b { font-size: .95rem; } .lg-model small { font-size: .78rem; }
  .lg-main { grid-template-columns: minmax(0, 1fr); }
  .lg-plot { border-right: 0; border-bottom: 1px solid #333; }
}