/*
  cib-04.css — RBF-ART Contact Integrity Board.

  Palette discipline, taken from the brief and worth keeping:
    cyan     interface furniture and powered signal
    amber    heat, warning, and the active tool tip. Nothing else.
    copper   unpowered traces and pads
    cream    silkscreen
    green    the substrate itself
  Violet appears once, on the protocol code, matching the other artifact pages.

  Two site-wide traps this page has to defend against, both documented from
  earlier builds: the global h1{line-height:0.95} crushes a second heading
  line, and a reading-measure cap on article children strands non-prose
  elements in a narrow column. Both are handled at the top of this file.
*/

main{grid-template-columns:1fr;}
article{max-width:none;min-width:0;}
article > p{max-width:none;}

.cib-code{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.1em;
  color:var(--violet);
  margin:0 0 4px;
}
.cib-h1{font-size:clamp(1.8rem,4vw,2.35rem);}
/* h1 carries line-height:0.95 site-wide, far too tight for the second line */
.cib-h1 .sub{margin-top:13px;line-height:1.2;}
.cib-expansion{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 1.4em;
}
.cib-note{
  border-left:1px solid var(--line);
  padding-left:18px;
  margin:1.4em 0 1.6em;
  max-width:none;
}
.cib-note p{max-width:none;margin:0;}
.cib-operating{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  line-height:1.8;
  color:var(--ink-soft);
  border:1px solid var(--line);
  background:rgba(69,211,232,0.03);
  padding:14px 16px;
  margin:0 0 1.8em;
  max-width:none;
}

/* ============================================================
   SHARED CONTROLS
   ============================================================ */

.cib-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(19,29,48,0.9);
  border:1px solid var(--line);
  padding:11px 16px;
  min-height:44px;
  border-radius:2px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.cib-btn:hover:not(:disabled){border-color:var(--line-strong);background:rgba(69,211,232,0.08);}
.cib-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.cib-btn:disabled{opacity:0.36;cursor:default;}
.cib-btn-primary{border-color:var(--cyan);color:var(--cyan-glow);}
.cib-btn-ghost{background:transparent;}
.cib-btn-gold{
  border-color:var(--gold);
  color:var(--bg);
  background:linear-gradient(90deg,var(--gold),var(--gold-dim));
}
.cib-btn-gold:hover:not(:disabled){background:linear-gradient(90deg,#F0BC68,var(--gold));}
.cib-btn-link{color:var(--ink-soft);}
.cib-btn-link:hover{color:var(--ink);}
.cib-iron-g{transform-origin:center;}
.cib-key{
  font-size:0.62rem;
  border:1px solid var(--line);
  padding:1px 5px;
  border-radius:2px;
  color:var(--ink-soft);
}

/* the solder feed is the one control that must never be hunted for */
.cib-btn-feed{
  border-color:var(--gold);
  color:var(--gold);
  min-width:150px;
  touch-action:none;
}
.cib-btn-feed.on{background:rgba(232,169,74,0.22);color:#FFD79A;border-color:#F0BC68;}
.cib-btn-test.cib-armed{border-color:var(--teal);color:var(--teal);animation:cib-armed 2.4s ease-in-out infinite;}
@keyframes cib-armed{0%,100%{box-shadow:0 0 0 0 rgba(70,224,166,0);}50%{box-shadow:0 0 0 3px rgba(70,224,166,0.14);}}
.cib-btn-main{border-color:var(--gold);color:var(--gold);}
.cib-btn-main[hidden]{display:none;}

/* ============================================================
   STAGE
   ============================================================ */

.cib-stage{margin:0 0 2em;}

.cib-boot{
  border:1px solid var(--line);
  background:rgba(5,12,10,0.86);
  padding:28px 22px;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cib-boot[hidden]{display:none;}
.cib-boot-lines{font-family:'IBM Plex Mono', monospace;font-size:0.8rem;letter-spacing:0.08em;}
.cib-boot-line{margin:0 0 8px;color:var(--teal);}
.cib-boot-line::before{content:'> ';color:var(--ink-soft);}

.cib-resume{
  border:1px solid var(--line-strong);
  background:rgba(19,29,48,0.9);
  padding:24px 20px;
  text-align:center;
}
.cib-resume[hidden]{display:none;}
.cib-resume-title{
  font-family:'Big Shoulders',sans-serif;font-weight:800;
  font-size:1.5rem;letter-spacing:0.03em;margin:0 0 6px;color:var(--gold);
}
.cib-resume-sig{font-family:'IBM Plex Mono',monospace;font-size:0.82rem;color:var(--cyan);margin:0 0 10px;}
.cib-resume-note{font-size:0.94rem;color:var(--ink-soft);margin:0 0 18px;}
.cib-resume-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.cib-rig{
  border:1px solid var(--line);
  background:rgba(9,16,26,0.72);
  padding:14px;
  /* Dragging the board used to sweep a text selection across every label it
     passed. The rig is a control surface, not prose — selection is switched
     off here and switched back on for the parts that are genuinely readable. */
  -webkit-user-select:none;
  user-select:none;
}
.cib-manual,.cib-diag,.cib-complete,.cib-master{-webkit-user-select:text;user-select:text;}
.cib-rig[hidden]{display:none;}

/* ---- status strip ---- */
.cib-hud{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
  margin-bottom:12px;
}
.cib-hud-cell{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cib-hud-phase{margin-left:auto;text-align:right;}
.cib-hud-label{
  font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-soft);
}
.cib-hud-value{
  font-family:'IBM Plex Mono',monospace;font-size:0.82rem;letter-spacing:0.05em;color:var(--cyan);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cib-hud-phase .cib-hud-value{color:var(--ink);}
.cib-manual-btn{flex:0 0 auto;}

/* ---- mode banner ----
   Names the current mode and the single action it wants. During sorting the
   tool dock is entirely disabled, so without this there is nothing on screen
   saying what the board is waiting for. */
.cib-mode{
  display:flex;
  flex-direction:column;
  gap:3px;
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  background:rgba(69,211,232,0.06);
  padding:10px 14px;
  margin-bottom:12px;
}
.cib-mode-name{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cyan);
}
.cib-mode-hint{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  line-height:1.5;
  color:var(--ink);
}
.cib-mode[data-mode="soldering"],
.cib-mode[data-mode="rework"]{border-left-color:var(--gold);background:rgba(232,169,74,0.07);}
.cib-mode[data-mode="soldering"] .cib-mode-name,
.cib-mode[data-mode="rework"] .cib-mode-name{color:var(--gold);}
.cib-mode[data-mode="activation"],
.cib-mode[data-mode="assembly"]{border-left-color:var(--teal);background:rgba(70,224,166,0.07);}
.cib-mode[data-mode="activation"] .cib-mode-name,
.cib-mode[data-mode="assembly"] .cib-mode-name{color:var(--teal);}

/* ---- zone indicators ---- */
.cib-zonebar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.cib-zchip{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  background:rgba(19,29,48,0.8);
  padding:9px 10px;min-height:44px;
  cursor:pointer;text-align:left;
  font-family:'IBM Plex Mono',monospace;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.cib-zchip:hover:not(:disabled){background:rgba(69,211,232,0.07);}
.cib-zchip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.cib-zchip:disabled{opacity:0.4;cursor:default;}
.cib-zchip.active{border-color:var(--cyan);border-left-color:var(--cyan);background:rgba(69,211,232,0.1);}
.cib-zchip[data-state="ready"]{border-left-color:var(--gold);}
.cib-zchip[data-state="verified"]{border-left-color:var(--teal);}
.cib-zchip-id{font-size:0.94rem;font-weight:600;color:var(--ink);}
.cib-zchip-title{font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.cib-zchip-state{font-size:0.62rem;letter-spacing:0.1em;color:var(--cyan);}
.cib-zchip[data-state="verified"] .cib-zchip-state{color:var(--teal);}
.cib-zchip[data-state="ready"] .cib-zchip-state{color:var(--gold);}

/* ============================================================
   VIEWPORT
   ============================================================ */

.cib-work{position:relative;}
.cib-viewport{
  position:relative;
  width:100%;
  aspect-ratio:1240 / 840;
  background:#060D0A;
  border:1px solid var(--line);
  overflow:hidden;
  touch-action:none;          /* scoped to the board only, never the page */
  cursor:crosshair;
}
.cib-viewport.cib-soldering{cursor:none;}
#cib-board{display:block;width:100%;height:100%;}
/* the browser's own long-press menu was eating the "hold the iron here" gesture */
.cib-viewport{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}

.cib-cover{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#16202C,#0B1219);
  border-bottom:2px solid rgba(120,205,225,0.3);
  display:flex;align-items:center;justify-content:center;
  transform-origin:top center;
  transition:transform 0.75s cubic-bezier(.5,.05,.2,1), opacity 0.75s ease;
  z-index:3;
}
.cib-cover[hidden]{display:none;}
.cib-cover-label{
  font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--ink-soft);
}
.cib-cover.cib-cover-open{transform:rotateX(-104deg);opacity:0;}

.cib-zoomdock{
  position:absolute;right:8px;bottom:8px;z-index:4;
  display:flex;gap:5px;
  opacity:0.72;
  transition:opacity 0.2s ease;
}
.cib-zoomdock:hover,.cib-zoomdock:focus-within{opacity:1;}
.cib-zoombtn{
  min-width:44px;min-height:44px;
  font-family:'IBM Plex Mono',monospace;font-size:0.9rem;
  color:var(--ink);background:rgba(6,13,10,0.86);
  border:1px solid var(--line);border-radius:2px;cursor:pointer;
}
.cib-zoombtn-wide{min-width:96px;font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;}
.cib-zoombtn:hover{border-color:var(--line-strong);background:rgba(69,211,232,0.12);}
.cib-zoombtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

.cib-toast{
  position:absolute;left:10px;top:10px;right:10px;z-index:5;
  margin:0;padding:9px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.06em;
  background:rgba(6,13,10,0.92);border:1px solid var(--line);
  color:var(--ink);
  opacity:0;transform:translateY(-6px);
  transition:opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
}
.cib-toast.on{opacity:1;transform:translateY(0);}
.cib-toast[data-tone="good"]{border-color:rgba(70,224,166,0.6);color:var(--teal);}
.cib-toast[data-tone="warn"]{border-color:rgba(232,169,74,0.6);color:var(--gold);}

/* ---- manual, an overlay so opening it never reflows the board ---- */
.cib-manual{
  position:absolute;top:0;right:0;bottom:0;
  width:min(380px,86%);
  background:rgba(8,15,24,0.97);
  border-left:1px solid var(--line-strong);
  transform:translateX(101%);
  transition:transform 0.3s ease;
  z-index:6;
  display:flex;flex-direction:column;
  visibility:hidden;
}
.cib-manual.on{transform:translateX(0);visibility:visible;}
.cib-manual-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--cyan);
}
.cib-manual-close{
  background:none;border:1px solid var(--line);color:var(--ink);
  min-width:34px;min-height:34px;font-size:1.1rem;line-height:1;cursor:pointer;border-radius:2px;
}
.cib-manual-body{padding:14px;overflow-y:auto;}
.cib-manual-body h3{
  font-family:'IBM Plex Mono',monospace;font-size:0.64rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);margin:16px 0 5px;
}
.cib-manual-body h3:first-child{margin-top:0;}
.cib-manual-body p{font-size:0.88rem;line-height:1.6;color:var(--ink-soft);margin:0;max-width:none;}
.cib-manual-keys b{color:var(--ink);}
.cib-opt{
  display:flex;align-items:center;gap:9px;
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.05em;
  color:var(--ink);margin:10px 0 2px;cursor:pointer;min-height:34px;
}
.cib-opt input{width:17px;height:17px;accent-color:var(--cyan);}
.cib-opt-note{font-size:0.76rem !important;margin:0 0 6px 26px !important;}

/* ============================================================
   TOOL DOCK
   ============================================================ */

.cib-controls{margin-top:12px;}
/* A visible build stamp. When something "does not seem to work", the first
   question is always whether the new files are actually live, and guessing
   at that wastes a round trip. */
.cib-build{
  font-family:'IBM Plex Mono',monospace;font-size:0.56rem;letter-spacing:0.14em;
  color:var(--ink-soft);opacity:0.5;text-align:right;margin:6px 0 0;max-width:none;
}
/* One row, no wrapping. Buttons share the width and shrink their padding
   rather than spilling onto a second line, which pushed the iron readout
   below the fold exactly when it mattered most. */
.cib-dockrow{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap;margin-bottom:8px;}
.cib-dockrow-actions{gap:8px;}
.cib-dockrow-actions .cib-btn{flex:1 1 0;min-width:0;padding:10px 8px;font-size:0.68rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cib-tools{display:flex;gap:6px;flex-wrap:nowrap;flex:1 1 auto;min-width:0;}
.cib-tools .cib-tool{flex:1 1 0;min-width:0;padding:0 8px;}
.cib-tool{
  font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);background:rgba(19,29,48,0.85);
  border:1px solid var(--line);border-radius:2px;
  padding:0 14px;min-height:44px;cursor:pointer;
}
.cib-tool:hover:not(:disabled){border-color:var(--line-strong);color:var(--ink);}
.cib-tool:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.cib-tool:disabled{opacity:0.35;cursor:default;}
.cib-tool.on{border-color:var(--cyan);color:var(--cyan-glow);background:rgba(69,211,232,0.12);}
.cib-tool.cib-gold-tool.on{border-color:var(--gold);color:var(--gold);background:rgba(232,169,74,0.12);}

.cib-iron-avatar{margin-left:auto;width:132px;flex:0 0 auto;}
.cib-iron-avatar svg{width:100%;height:auto;display:block;}
.cib-iron-grip{fill:#2A3444;stroke:rgba(120,205,225,0.35);stroke-width:1;}
.cib-iron-ring{fill:#46586B;}
.cib-iron-shaft{fill:#8A96A2;}
.cib-iron-tip{fill:#B9865A;transition:fill 0.2s ease;}
.cib-iron-avatar[data-heat="WARMING"] .cib-iron-tip{fill:#C98B45;}
.cib-iron-avatar[data-heat="RECEPTIVE"] .cib-iron-tip{fill:var(--gold);}
.cib-iron-avatar[data-heat="READY"] .cib-iron-tip{fill:#FFD79A;}
.cib-iron-avatar[data-heat="OVERHEATING"] .cib-iron-tip{fill:#E8724A;}
.cib-iron-avatar.cib-gold-iron .cib-iron-grip{fill:#6B4F1C;stroke:var(--gold);}
.cib-iron-avatar.cib-gold-iron .cib-iron-shaft{fill:var(--gold);}

.cib-work .cib-readout{margin-top:8px;}
.cib-readout{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  border:1px solid var(--line);background:rgba(5,12,10,0.6);padding:10px 12px;
}
.cib-read-cell{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cib-read-label{
  font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-soft);
}
.cib-read-value{
  font-family:'IBM Plex Mono',monospace;font-size:0.8rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cib-read-value[data-tone="idle"]{color:var(--ink-soft);}
.cib-read-value[data-tone="ok"]{color:var(--cyan);}
.cib-read-value[data-tone="good"]{color:var(--teal);}
.cib-read-value[data-tone="bad"]{color:var(--gold);}

/* ---- held-component preview ---- */
.cib-ghost{
  display:flex;align-items:center;gap:14px;
  border:1px dashed var(--line-strong);background:rgba(69,211,232,0.05);
  padding:8px 14px;margin-bottom:10px;
}
.cib-ghost[hidden]{display:none;}
.cib-ghost-svg{width:120px;height:84px;flex:0 0 auto;}
.cib-ghost-label{
  margin:0;font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;
  text-transform:uppercase;
}
.cib-ghost-label[data-tone="good"]{color:var(--teal);}
.cib-ghost-label[data-tone="warn"]{color:var(--gold);}

/* ============================================================
   TRAYS
   ============================================================ */

.cib-trays{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
.cib-tray{border:1px solid var(--line);background:rgba(19,29,48,0.55);padding:10px 12px;}
.cib-tray-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:'IBM Plex Mono',monospace;margin-bottom:9px;
}
.cib-tray-name{font-size:0.82rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--cyan);}
.cib-tray-count{font-size:0.64rem;letter-spacing:0.08em;color:var(--ink-soft);}
.cib-chipstrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.cib-tray-empty{
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;line-height:1.7;
  color:var(--ink-soft);margin:0;max-width:none;
}

.cib-chip{
  flex:0 0 auto;width:146px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid var(--line);background:rgba(9,16,26,0.9);
  padding:8px 8px 10px;border-radius:2px;cursor:pointer;
  transition:border-color 0.18s ease, background 0.18s ease;
}
.cib-chip:hover{border-color:var(--line-strong);background:rgba(69,211,232,0.07);}
.cib-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.cib-chip.sel{border-color:var(--gold);background:rgba(232,169,74,0.1);}
.cib-chip-art{width:120px;height:66px;}
.cib-chip-ref{font-family:'IBM Plex Mono',monospace;font-size:0.76rem;color:var(--cyan);letter-spacing:0.06em;}
.cib-chip-label{
  font-family:'Source Serif 4',Georgia,serif;font-size:0.72rem;line-height:1.3;
  color:var(--ink);text-align:center;
}
.cib-chip-fp{
  font-family:'IBM Plex Mono',monospace;font-size:0.56rem;letter-spacing:0.1em;
  color:var(--ink-soft);text-align:center;
}

.cib-zonetrays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.cib-zonetray{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  border:1px dashed var(--line);background:rgba(9,16,26,0.6);
  padding:10px;min-height:64px;cursor:pointer;text-align:left;
  font-family:'IBM Plex Mono',monospace;
  transition:border-color 0.18s ease, background 0.18s ease;
}
.cib-zonetray:hover:not(:disabled){border-color:var(--cyan);background:rgba(69,211,232,0.08);}
.cib-zonetray:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.cib-zonetray:disabled{opacity:0.4;cursor:default;}
.cib-zonetray-id{font-size:0.94rem;font-weight:700;letter-spacing:0.1em;color:var(--cyan);}
.cib-zonetray-title{font-size:0.66rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);}
.cib-zonetray-count{font-size:0.66rem;color:var(--ink);}

/* ---- diagnostic panel ---- */
.cib-diag{border:1px solid var(--line);border-left:3px solid var(--cyan);background:rgba(5,12,10,0.6);padding:11px 14px;}
.cib-diag-title{
  font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 4px;max-width:none;
}
.cib-diag-body{font-size:0.9rem;line-height:1.65;color:var(--ink-soft);margin:0;max-width:none;}

/* ============================================================
   THE BOARD ITSELF
   ============================================================ */

.cib-substrate{stroke:rgba(120,205,225,0.16);stroke-width:1;}
.cib-wear rect{fill:#DCE8DE;}
.cib-mount-hole{fill:#0A1410;stroke:#8A6A46;stroke-width:1.4;}
.cib-mount-bore{fill:#04080A;}

.cib-zone-plate{fill:rgba(255,255,255,0.012);}
.cib-zone-outline{fill:none;stroke:rgba(120,205,225,0.18);stroke-width:1;stroke-dasharray:6 5;}
.cib-zone-label{
  font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;letter-spacing:1.8px;
  fill:rgba(233,228,212,0.86);
}
.cib-silk-note{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1px;
  fill:rgba(217,210,190,0.3);
}
.cib-silk-ref{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.6px;
  fill:rgba(226,220,200,0.62);
}
.cib-zone-verified .cib-zone-outline{stroke:rgba(70,224,166,0.45);stroke-dasharray:none;}
.cib-zone-verified .cib-zone-plate{fill:rgba(70,224,166,0.035);}
.cib-zone-sweep .cib-zone-outline{stroke:rgba(69,211,232,0.85);stroke-dasharray:none;}

/* traces: dim copper base, cyan overlay revealed by dashoffset */
.cib-trace-base{fill:none;stroke:#8A5F3B;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;}
.cib-trace-base.cib-rail{stroke-width:6;}
.cib-trace-live{
  fill:none;stroke:var(--cyan);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(69,211,232,0.55));
}
.cib-trace-live.cib-rail{stroke-width:6;}
.cib-trace-fault{stroke:#E8724A;filter:drop-shadow(0 0 3px rgba(232,114,74,0.6));}

.cib-via{fill:#0C1A14;stroke:#A5714A;stroke-width:2;}
.cib-via-bore{fill:#05090B;}
.cib-anchor{fill:#0C1A14;stroke:#8A5F3B;stroke-width:2;}
.cib-anchor-out{stroke:#A5714A;}

/* footprints */
.cib-fp-outline{fill:none;stroke:rgba(226,220,200,0.35);stroke-width:1.2;}
.cib-fp-mark{fill:none;stroke:rgba(226,220,200,0.55);stroke-width:1.6;}
.cib-fp-flash .cib-fp-outline,
.cib-fp-flash .cib-fp-mark{stroke:var(--gold);stroke-width:2.4;}
.cib-fp-flash .cib-silk-ref{fill:var(--gold);}

/* pads */
.cib-pad{fill:#C08A52;stroke:#E0B078;stroke-width:1;}
.cib-pad-bore{fill:#0A1410;}
.cib-heat-halo{fill:none;stroke:var(--gold);stroke-width:3;}
.cib-joint[data-heat="warming"] .cib-heat-halo{stroke:#C98B45;}
.cib-joint[data-heat="adequate"] .cib-heat-halo{stroke:var(--gold);}
.cib-joint[data-heat="ready"] .cib-heat-halo{stroke:#FFD79A;stroke-width:3.6;}
.cib-joint[data-heat="over"] .cib-heat-halo{stroke:#E8724A;stroke-width:4.4;}
.cib-joint[data-heat="ready"] .cib-pad{fill:#D9A874;stroke:#FFE7C0;}
.cib-joint[data-heat="over"] .cib-pad{fill:#7A5236;stroke:#553424;}

/* solder */
.cib-blob{fill:url(#cib-solder-grad);stroke:#6E7C85;stroke-width:0.7;}
.cib-joint[data-quality="cold"] .cib-blob{fill:#8D949A;stroke:#5C6469;}
.cib-joint[data-quality="overheated"] .cib-blob{fill:#9BA3A8;stroke:#4A3428;}
.cib-joint[data-quality="overheated"] .cib-pad{fill:#7A5236;stroke:#4A3123;}
.cib-joint[data-quality="excess"] .cib-blob{stroke:#8E9AA2;stroke-width:1.1;}
.cib-bridge{stroke:#B6C3CB;stroke-width:7;stroke-linecap:round;fill:none;}
.cib-joint[data-quality="bridged"] .cib-bridge{stroke:#C6D2D8;}

.cib-joint-ring{fill:none;stroke:transparent;stroke-width:1.6;}
.cib-joint[data-quality="clean"] .cib-joint-ring{stroke:var(--teal);}
.cib-joint[data-quality="cold"] .cib-joint-ring,
.cib-joint[data-quality="insufficient"] .cib-joint-ring,
.cib-joint[data-quality="excess"] .cib-joint-ring,
.cib-joint[data-quality="overheated"] .cib-joint-ring,
.cib-joint[data-quality="bridged"] .cib-joint-ring{stroke:var(--gold);}
.cib-joint-fault .cib-joint-ring{stroke:#E8724A;stroke-width:2.6;}
.cib-joint-pulse .cib-joint-ring{stroke:var(--cyan-glow);stroke-width:3;opacity:1 !important;}

/* components */
.cib-lead{stroke:#9AA5AC;stroke-width:3;}
.cib-body{fill:#1D2A38;stroke:#5C6C7A;stroke-width:1.2;}
.cib-body-inner{fill:#16202B;stroke:rgba(120,205,225,0.14);stroke-width:1;}
.cib-band{stroke:none;}
.cib-stripe{fill:#E9E4D8;}
.cib-polarity-band{fill:#0D131A;stroke:none;opacity:0.9;}
.cib-polarity-mark{font-family:'IBM Plex Mono',monospace;font-size:13px;fill:#E9E4D8;text-anchor:middle;}
.cib-flat-face{stroke:#9AA5AC;stroke-width:1.6;}
.cib-pin1-dot{fill:#E9E4D8;}
.cib-sensor-ring{fill:none;stroke:rgba(143,114,232,0.55);stroke-width:1.4;}
.cib-sensor-core{fill:var(--violet);}
.cib-key-notch{fill:none;stroke:#E9E4D8;stroke-width:1.6;}
.cib-fam-resistor .cib-body{fill:#2B2118;stroke:#7A6248;}
.cib-fam-capacitor .cib-body{fill:#1B2734;stroke:#6A7C8C;}
.cib-fam-diode .cib-body{fill:#181C22;stroke:#6E7680;}
.cib-fam-transistor .cib-body{fill:#14181D;stroke:#666E77;}
.cib-fam-relay .cib-body{fill:#1A2029;stroke:#69747F;}
.cib-fam-transducer .cib-body{fill:#1B1830;stroke:var(--violet);}
.cib-part-ref{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.6px;
  fill:rgba(233,243,245,0.8);
}
.cib-placed{pointer-events:none;}
.cib-state-placed .cib-body{stroke-dasharray:4 3;}

/* hub */
.cib-hub-plate{fill:#0C1A14;stroke:rgba(120,205,225,0.3);stroke-width:1.4;}
.cib-hub-ring{fill:none;stroke:rgba(120,205,225,0.16);stroke-width:1;}
.cib-hub-quad{fill:none;stroke:rgba(120,205,225,0.16);stroke-width:5;stroke-linecap:round;}
.cib-hub-quad.on{stroke:var(--teal);filter:drop-shadow(0 0 4px rgba(70,224,166,0.6));}
.cib-hub-mark{font-family:'Big Shoulders',sans-serif;font-weight:900;font-size:26px;fill:rgba(233,243,245,0.55);}
.cib-hub-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px;fill:rgba(120,205,225,0.5);}

/* ============================================================
   TOOL CURSORS
   The tool in hand becomes the pointer, so switching between IRON and
   DESOLDER is visible without looking away from the board. Fine-pointer
   devices only — a cursor means nothing under a fingertip — and the hotspot
   sits at the very tip, so what you aim with is what makes contact.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .cib-rig[data-tool="iron"] .cib-viewport{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20transform%3D%27rotate%28-45%2016%2016%29%27%3E%3Crect%20x%3D%2714%27%20y%3D%2712.5%27%20width%3D%2716%27%20height%3D%277%27%20rx%3D%272.5%27%20fill%3D%27%2523122031%27%20stroke%3D%27%252345D3E8%27%20stroke-width%3D%271.6%27%2F%3E%3Crect%20x%3D%2711.5%27%20y%3D%2713.5%27%20width%3D%272.6%27%20height%3D%275%27%20rx%3D%271%27%20fill%3D%27%252345D3E8%27%2F%3E%3Cpath%20d%3D%27M11.5%2014.4%20L5%2015.6%20L5%2016.4%20L11.5%2017.6%20Z%27%20fill%3D%27%2523E8A94A%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2716%27%20r%3D%272%27%20fill%3D%27%2523FFE04A%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 4 28, crosshair;}
  .cib-rig[data-tool="desolder"] .cib-viewport{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20transform%3D%27rotate%28-45%2016%2016%29%27%3E%3Crect%20x%3D%2714%27%20y%3D%2712%27%20width%3D%2716%27%20height%3D%278%27%20rx%3D%272.5%27%20fill%3D%27%2523122031%27%20stroke%3D%27%252345D3E8%27%20stroke-width%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M14%2016%20L6%2016%27%20stroke%3D%27%252393AAB9%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%274.5%27%20cy%3D%2716%27%20r%3D%272.4%27%20fill%3D%27none%27%20stroke%3D%27%252393AAB9%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 4 28, crosshair;}
  .cib-rig[data-tool="place"] .cib-viewport{cursor:copy;}
  .cib-rig[data-tool="inspect"] .cib-viewport{cursor:help;}
  .cib-rig .cib-viewport.cib-soldering{cursor:none;}
}

/* ---- main power: the hub spins, and current leaves it in gold ----
   A deliberate, single exception to this file's palette rule that amber is
   heat only. Nothing else on the board is ever this yellow, which is exactly
   why it reads as live current at the one moment it appears. */
.cib-hub-rotor{transform-box:view-box;}

@keyframes cib-hub-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.cib-hub-live .cib-hub-rotor{animation:cib-hub-spin 7s linear infinite;}
.cib-hub-surging .cib-hub-rotor{animation-duration:1.05s;}

.cib-hub-surging .cib-hub-plate{
  stroke:#FFE04A;
  filter:drop-shadow(0 0 10px rgba(255,224,74,0.6));
}
.cib-hub-surging .cib-hub-ring{stroke:rgba(255,224,74,0.85);}
.cib-hub-surging .cib-hub-quad.on{
  stroke:#FFE04A;
  filter:drop-shadow(0 0 7px rgba(255,224,74,0.85));
}
.cib-hub-surging .cib-hub-mark,
.cib-hub-surging .cib-hub-sub{
  fill:#FFF3C4;
  animation:cib-hub-charge 0.5s ease-in-out infinite alternate;
}
@keyframes cib-hub-charge{
  from{opacity:0.75;}
  to{opacity:1;}
}

/* The travelling pulse. Two strokes: a wide soft bloom under a bright core,
   so it reads as light rather than as a thick yellow line. */
.cib-trace-surge{
  fill:none;
  stroke:#FFE04A;
  stroke-width:5.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(255,224,74,0.9)) drop-shadow(0 0 12px rgba(255,196,60,0.5));
  pointer-events:none;
}
.cib-layer-surge{pointer-events:none;}

.cib-hub-live .cib-hub-plate{stroke:var(--cyan);}
.cib-hub-live .cib-hub-mark{fill:var(--cyan-glow);}
.cib-hub-live .cib-hub-ring{stroke:rgba(69,211,232,0.7);animation:cib-hub-osc 3.4s ease-in-out infinite;}
@keyframes cib-hub-osc{0%,100%{opacity:0.45;}50%{opacity:1;}}

/* high-contrast: replace subtle pad shimmer with explicit rings */
body.cib-hc .cib-pad{stroke:#FFFFFF;stroke-width:1.8;}
body.cib-hc .cib-joint-ring{stroke-width:2.6;}
body.cib-hc .cib-fp-outline{stroke:rgba(255,255,255,0.7);stroke-width:1.8;}
body.cib-hc .cib-trace-base{stroke:#C08A52;}
body.cib-hc .cib-silk-ref{fill:rgba(255,255,255,0.9);}

/* ============================================================
   COMPLETION
   ============================================================ */

.cib-complete{
  border:1px solid var(--teal);
  background:rgba(70,224,166,0.05);
  padding:26px 22px;margin-top:16px;text-align:center;
}
.cib-complete[hidden]{display:none;}
.cib-c-head{
  font-family:'Big Shoulders',sans-serif;font-weight:900;
  font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.05;letter-spacing:0.02em;
  color:var(--teal);margin:0 0 6px;max-width:none;
}
.cib-c-sub{font-size:1rem;color:var(--ink-soft);margin:0 0 20px;max-width:none;}
.cib-c-fields{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin:0 0 20px;text-align:left;
}
.cib-c-fields > div{border:1px solid var(--line);padding:9px 11px;}
.cib-c-fields dt{
  font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 3px;
}
.cib-c-fields dd{
  font-family:'IBM Plex Mono',monospace;font-size:0.78rem;letter-spacing:0.05em;
  color:var(--cyan);margin:0;word-break:break-word;
}
.cib-c-ok{color:var(--teal) !important;}
.cib-c-sentence{
  font-family:'Source Serif 4',Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,2.4vw,1.32rem);line-height:1.6;
  color:var(--ink);margin:0 auto 14px;max-width:620px;
}
.cib-c-metrics,.cib-c-count{
  font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.06em;
  color:var(--ink-soft);margin:0 0 6px;max-width:none;
}
.cib-c-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;}

/* ---- GMSI-06 drawer ---- */
.cib-master{
  border:1px solid var(--gold);background:rgba(232,169,74,0.06);
  padding:24px 20px;margin-top:14px;text-align:center;
}
.cib-master[hidden]{display:none;}
.cib-drawer{
  position:relative;max-width:340px;margin:0 auto 16px;height:110px;overflow:hidden;
  border:1px solid rgba(232,169,74,0.4);
}
.cib-drawer-face{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(160deg,#1B222C,#0C1219);
  border-bottom:2px solid rgba(232,169,74,0.5);
  transition:transform 0.9s cubic-bezier(.4,.05,.2,1);
}
.cib-drawer-open .cib-drawer-face{transform:translateY(106%);}
.cib-drawer-inner{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%, rgba(232,169,74,0.18), rgba(5,7,13,0));
}
.cib-master-iron{width:220px;height:auto;}
.cib-master-iron rect{fill:#6B4F1C;stroke:var(--gold);stroke-width:1.2;}
.cib-mi-ring{fill:var(--gold-dim) !important;}
.cib-mi-shaft{fill:var(--gold);}
.cib-mi-tip{fill:#F4D79A;}
.cib-master-status{
  font-family:'Big Shoulders',sans-serif;font-weight:900;
  font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:0.03em;line-height:1.1;
  color:var(--gold);margin:0 0 4px;max-width:none;
}
.cib-master-code{
  font-family:'IBM Plex Mono',monospace;font-size:0.74rem;letter-spacing:0.1em;
  color:var(--ink-soft);margin:0 0 12px;max-width:none;
}
.cib-master-line{
  font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:1.06rem;
  color:var(--ink);margin:0 auto 16px;max-width:520px;
}

/* ============================================================
   PAGE BLURBS
   ============================================================ */

.cib-blurb-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.8em 0 1.4em;}
.cib-blurb{border:1px solid var(--line);background:rgba(69,211,232,0.03);padding:14px 16px;}
.cib-blurb-label{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 6px;max-width:none;
}
.cib-blurb p{font-size:0.92rem;line-height:1.65;color:var(--ink-soft);margin:0;max-width:none;}

/* ============================================================
   RESPONSIVE

   Panels are recomposed rather than shrunk. The board stays the dominant
   object at every width, which is why the trays and dock stack under it
   instead of the whole interface scaling down.
   ============================================================ */

@media (max-width:1023px){
  .cib-iron-avatar{width:108px;}
  .cib-chip{width:132px;}
}

@media (max-width:767px){
  .cib-rig{padding:10px;}
  .cib-hud{gap:10px;}
  .cib-hud-phase{margin-left:0;text-align:left;}
  .cib-manual-btn{width:100%;}
  .cib-zonebar{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* On a phone the board, the trays and the parts strip cannot all fit on
     screen at once, and scrolling between them turned the game into a memory
     test. The board and its instruction banner stick to the top instead, so
     whatever you are choosing from below, the thing you are choosing FOR
     stays in view. Height is capped in vh rather than by aspect ratio so the
     lower half of the screen is always free for the trays; the SVG viewBox
     letterboxes on its own. */
  .cib-work{
    position:sticky;
    top:0;
    z-index:6;
    background:rgba(9,16,26,0.97);
    padding-bottom:8px;
    margin-left:-10px;
    margin-right:-10px;
    padding-left:10px;
    padding-right:10px;
  }
  .cib-viewport{aspect-ratio:auto;height:42vh;min-height:210px;}
  .cib-mode{padding:8px 10px;margin-bottom:8px;}
  .cib-mode-name{font-size:0.74rem;}
  .cib-mode-hint{font-size:0.68rem;}

  /* The manual is a full-screen sheet on a phone rather than a panel squeezed
     inside a 42vh board. */
  .cib-manual{position:fixed;inset:0;width:100%;border-left:0;z-index:60;}
  .cib-iron-avatar{display:none;}
  /* Everything below the board was too tall to see the iron readout while
     soldering, and the parts were a scroll away in placement mode. The
     controls are recomposed: readout rides with the sticky board, the trays
     come BEFORE the tool dock, and every control loses height. */
  .cib-controls{display:flex;flex-direction:column;margin-top:8px;}
  .cib-trays{order:1;margin-bottom:8px;}
  .cib-dockrow{order:2;gap:6px;margin-bottom:6px;}
  .cib-dockrow-actions{order:3;display:flex;flex-wrap:wrap;gap:6px;}
  .cib-ghost{order:4;}
  .cib-diag{order:5;}

  .cib-tools .cib-tool{min-height:36px;font-size:0.6rem;padding:0 4px;letter-spacing:0.04em;}
  .cib-dockrow-actions .cib-btn{min-height:38px;font-size:0.6rem;padding:8px 6px;letter-spacing:0.04em;}
  /* FEED SOLDER is the control you reach for on every single contact.
     LIFT IRON is occasional. Size them by how often they are used, not by
     how important they sound. */
  /* These need the same two-class specificity as the desktop rule above
     (`.cib-dockrow-actions .cib-btn`), or that rule wins even inside this
     media query — media queries add no specificity. That is exactly what
     squeezed FEED SOLDER down to a clipped sliver. */
  .cib-dockrow-actions .cib-btn-feed{
    flex:1 1 100%;min-width:100%;min-height:62px;
    font-size:0.9rem;letter-spacing:0.12em;order:-1;padding:12px;
  }
  .cib-dockrow-actions .cib-btn-test,
  .cib-dockrow-actions .cib-btn-main{flex:1 1 100%;min-width:100%;min-height:42px;font-size:0.66rem;}
  .cib-dockrow-actions #cib-lift,
  .cib-dockrow-actions #cib-rotate{
    flex:1 1 calc(50% - 3px);min-width:0;min-height:34px;font-size:0.56rem;padding:7px 6px;
  }

  /* The readout is the thing you are watching when the iron is down, so it
     travels with the board rather than sitting under the buttons. */
  .cib-readout{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;padding:6px 8px;margin:0 0 6px;
  }
  .cib-read-cell{flex-direction:column;align-items:flex-start;gap:0;}
  .cib-read-label{font-size:0.5rem;letter-spacing:0.08em;}
  .cib-read-value{font-size:0.66rem;}

  /* the zoom controls were covering a quarter of the board */
  .cib-zoomdock{right:6px;bottom:6px;gap:4px;}
  .cib-zoombtn{min-width:30px;min-height:30px;font-size:0.72rem;padding:0 6px;}
  .cib-zoombtn-wide{min-width:54px;font-size:0.5rem;padding:0 6px;}
  .cib-zonetrays{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cib-blurb-row{grid-template-columns:1fr;}
  .cib-c-actions .cib-btn{flex:1 1 100%;}
}

@media (max-width:419px){
  .cib-zchip-title{display:none;}
  .cib-chip{width:118px;}
  .cib-chip-art{width:100px;height:56px;}
  .cib-chip-label{font-size:0.66rem;}
  .cib-zonetray-title{display:none;}
  .cib-zoombtn-wide{min-width:72px;font-size:0.56rem;}
}

@media (prefers-reduced-motion: reduce){
  .cib-cover,.cib-drawer-face,.cib-manual,.cib-toast{transition:none;}
  .cib-btn-test.cib-armed,.cib-hub-live .cib-hub-ring{animation:none;}
  .cib-hub-live .cib-hub-rotor,
  .cib-hub-surging .cib-hub-rotor,
  .cib-hub-surging .cib-hub-mark,
  .cib-hub-surging .cib-hub-sub{animation:none;}
}