/* =========================================================================
   portfolio.css — UI kit styles
   Consumes colors_and_type.css tokens. Adds layout, server/monitor visuals,
   cable, ambient effects, boot sequence, status bar.
   ========================================================================= */

html, body { margin: 0; padding: 0; height: 100vh; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  overflow: hidden;                 /* viewport-locked, no scroll */
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ==== Selection / cursor lockdown (only active on .secure root) ==== */
.secure, .secure * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.secure input, .secure textarea { -webkit-user-select: text; user-select: text; }

/* =========================================================================
   AMBIENT EFFECTS — page-wide background
   ========================================================================= */

/* 3D BREATHING GRID — perspective floor + ceiling grid that pulses.
   Sits behind everything, behind the server rack and monitor. */
.fx-bg3d {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 50%;
}
.fx-bg3d::before,
.fx-bg3d::after {
  content: "";
  position: absolute;
  left: -50%; right: -50%;
  height: 220vh;
  width: 200%;
  background-image:
    linear-gradient(to right,  rgba(220, 38, 38, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(220, 38, 38, 0.22) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 65%);
  transform-origin: 50% 50%;
  animation: bg3d-breathe 9s ease-in-out infinite;
  will-change: transform, opacity;
}
/* Floor — receding down */
.fx-bg3d::before {
  top: 50%;
  transform: rotateX(70deg) translateY(0);
}
/* Ceiling — receding up (mirrors floor) */
.fx-bg3d::after {
  bottom: 50%;
  transform: rotateX(-70deg) translateY(0);
  opacity: 0.55;
}
@keyframes bg3d-breathe {
  0%, 100% {
    background-position: 0 0;
    opacity: 0.6;
  }
  50% {
    background-position: 0 35px;
    opacity: 1;
  }
}

/* SCANLINES (page-wide) — kept but very subtle. Disabled when bg3d is on. */
.fx-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.fx-flicker {
  position: fixed; inset: 0; pointer-events: none; z-index: 201;
  background: rgba(220, 38, 38, 0.012);
  animation: crt-flicker 6s infinite var(--ease-linear);
}
@keyframes crt-flicker {
  0%, 96%, 100% { opacity: 1; }
  97%   { opacity: 0.85; }
  97.5% { opacity: 1; }
  98%   { opacity: 0.92; }
}

.fx-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 202;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0,0,0,0.45) 100%);
}

.fx-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 203;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}

.fx-glitch {
  position: fixed; inset: 0; pointer-events: none; z-index: 204;
  animation: glitch-pulse 11s infinite var(--ease-linear);
}
@keyframes glitch-pulse {
  0%, 99% { opacity: 0; transform: translate3d(0,0,0); filter: none; }
  99.2%   { opacity: 1; transform: translate3d(-2px,0,0); filter: hue-rotate(20deg); }
  99.4%   { opacity: 1; transform: translate3d(2px,0,0); filter: hue-rotate(-20deg); }
  99.6%   { opacity: 0; transform: translate3d(0,0,0); filter: none; }
}

[data-theme="light"] .fx-scanlines,
[data-theme="light"] .fx-flicker,
[data-theme="light"] .fx-vignette,
[data-theme="light"] .fx-noise,
[data-theme="light"] .fx-glitch { opacity: 0; }

/* =========================================================================
   STATUS BAR — top + bottom system chrome
   ========================================================================= */

.statusbar {
  position: fixed; left: 0; right: 0; height: 28px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-1);
  display: flex; align-items: center;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: var(--z-overlay);
  gap: var(--sp-5);
}
.statusbar.top    { top: 0; }
.statusbar.bottom {
  bottom: 0; top: auto;
  border-bottom: none;
  border-top: 1px solid var(--line-1);
}
.statusbar .sb-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.statusbar .sb-item strong { color: var(--text); font-weight: 500; }
.statusbar .sb-sep { color: var(--line-2); }
.statusbar .sb-spacer { flex: 1; }
.statusbar .sb-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--led-green);
  box-shadow: var(--glow-green);
}
.statusbar .sb-dot.amber { background: var(--led-amber); box-shadow: var(--glow-amber); }
.statusbar .sb-dot.red   { background: var(--led-red);   box-shadow: var(--glow-red); }

/* =========================================================================
   NAV HEADER (top, below status bar)
   ========================================================================= */

.nav {
  position: fixed; top: 28px; left: 0; right: 0;
  height: 56px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line-1);
  display: flex; align-items: center;
  padding: 0 var(--sp-5);
  z-index: 90;
}
.nav-logo { display: flex; align-items: center; gap: 12px; color: var(--text); }
.nav-logo svg { width: 28px; height: 28px; }
.nav-logo .nm {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text);
}
.nav-logo .nm strong { color: var(--accent); font-weight: 600; }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-mech);
  display: flex; align-items: center; gap: 6px;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}
.theme-toggle .dot {
  width: 8px; height: 8px; background: var(--text-muted);
}
.theme-toggle:hover .dot { background: var(--accent); }

/* =========================================================================
   BTN — brutalist button
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-mech);
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.btn:active { transform: translate(1px, 1px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.btn-primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #000;
}
.btn-ghost {
  border-color: transparent;
  color: var(--text-dim);
}
.btn-ghost:hover {
  border-color: var(--line-2);
  color: var(--text);
}

/* =========================================================================
   CARD / PANEL — sharp brutalist surfaces
   ========================================================================= */

.panel {
  background: var(--card);
  border: 1px solid var(--line-1);
  position: relative;
}
.panel-hd {
  border-bottom: 1px solid var(--line-1);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-dim);
}
.panel-hd .dot {
  width: 8px; height: 8px; background: var(--led-green); box-shadow: var(--glow-green);
}
.panel-bd { padding: var(--sp-4); }

/* Corner tick marks (gives terminal-frame look) */
.tick-frame { position: relative; }
.tick-frame::before,
.tick-frame::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--accent); pointer-events: none;
}
.tick-frame::before { top: -1px; left: -1px;   border-right: none; border-bottom: none; }
.tick-frame::after  { bottom: -1px; right: -1px; border-left: none;  border-top: none;    }

/* =========================================================================
   LED — physical lights used on chrome / cards / nav
   ========================================================================= */
.led {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--led-off);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset;
}
.led.on.green { background: var(--led-green); box-shadow: var(--glow-green); }
.led.on.red   { background: var(--led-red);   box-shadow: var(--glow-red);   }
.led.on.amber { background: var(--led-amber); box-shadow: var(--glow-amber); }
.led.on.blue  { background: var(--led-blue);  box-shadow: 0 0 6px rgba(59,130,246,0.7); }
.led.blink    { animation: led-blink 1.6s infinite var(--ease-linear); }
.led.blink-fast { animation: led-blink 0.45s infinite var(--ease-linear); }
@keyframes led-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0.2; }
}

/* =========================================================================
   HERO — fills the viewport between the two fixed status bars
   ========================================================================= */

.hero {
  position: fixed;
  top: 84px;                       /* statusbar top (28) + nav (56) */
  bottom: 28px;                    /* statusbar bottom */
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-head {
  flex: 0 0 auto;
  padding: 14px var(--sp-5) 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: end;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
}
.hero-sub {
  margin: 6px 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  border-left: 1px solid var(--line-1);
  padding-left: 12px;
  line-height: 1.65;
  white-space: nowrap;
}
.hero-id strong { color: var(--accent); font-weight: 500; }

/* =========================================================================
   STAGE — 2-column: vertical server rack on left, monitor on right
   Fills the remaining vertical space below the hero head.
   ========================================================================= */

.stage-2col {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(220px, 22vw, 320px) 1fr;
  gap: 0;
  border-top: 1px solid var(--line-1);
  padding: 18px var(--sp-5) 18px;
  position: relative;
  background:
    linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-1) 60%, var(--bg-0) 100%);
  overflow: hidden;
}
.stage-2col::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(220,38,38,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(220,38,38,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
}

/* =========================================================================
   RACK CHASSIS — vertical frame that holds the 5 servers
   Looks like a small server rack with side rails, header plate and footer.
   ========================================================================= */

.rack-chassis {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--hw-rack-bg);
  border: 1px solid var(--hw-rack-frame);
  /* Left + right vertical rails with bolt holes */
  box-shadow:
    inset 14px 0 0 0 var(--hw-rack-rail),
    inset -14px 0 0 0 var(--hw-rack-rail),
    0 12px 24px rgba(0,0,0,0.5);
  z-index: 2;
}

/* Bolt-hole dot pattern down the left and right rails */
.rack-chassis::before,
.rack-chassis::after {
  content: "";
  position: absolute;
  top: 36px; bottom: 36px;
  width: 4px;
  background-image:
    radial-gradient(circle, var(--hw-rack-bolt) 0 1.5px, transparent 1.5px);
  background-size: 4px 14px;
  background-repeat: repeat-y;
  pointer-events: none;
  opacity: 0.85;
}
.rack-chassis::before { left: 5px; }
.rack-chassis::after  { right: 5px; }

.rack-chassis-hd,
.rack-chassis-ft {
  background: var(--hw-rack-cap);
  padding: 6px 22px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.rack-chassis-hd {
  border-bottom: 1px solid var(--hw-rack-frame);
}
.rack-chassis-ft {
  border-top: 1px solid var(--hw-rack-frame);
}
/* Tiny bracket decorations on the header plate */
.rack-chassis-hd::before,
.rack-chassis-ft::before {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  background: var(--accent);
  top: 50%; transform: translateY(-50%);
}
.rack-chassis-hd::before { left: 8px; }
.rack-chassis-ft::before { left: 8px; background: var(--led-green); box-shadow: var(--glow-green); }

/* =========================================================================
   RACK COLUMN — five servers, evenly distributed in available height
   Sits INSIDE the rack chassis with extra padding for the rails.
   ========================================================================= */

.rack-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  padding: 8px 22px;
  perspective: 1400px;
  perspective-origin: 70% 50%;
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
}

/* =========================================================================
   SERVER — isometric 3D rack chassis
   Built with CSS 3D transforms.
   ========================================================================= */

.server-cell {
  display: grid;
  grid-template-columns: clamp(110px, 11vw, 150px) 1fr;
  gap: 12px;
  align-items: center;
  flex: 1 1 0;
  min-height: 0;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-base) var(--ease-mech);
  padding: 0 4px;
}
.server-cell::before {
  /* active marker — small bracket on the left rail */
  content: "";
  position: absolute;
  left: -16px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 12px;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-mech);
}
.server-cell:hover::before {
  background: var(--text-faint);
}
.server-cell.active::before {
  background: var(--accent);
  box-shadow: var(--glow-red);
}
.server-cell:hover {
  /* (border replaced by ::before marker on rack rail) */
}
.server-cell.active {
  /* (border replaced by ::before marker on rack rail) */
}
.server-cell .cell-label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 0; /* allow grid item to shrink below content's min-content width */
}
.server-cell .cell-label .lab-id { color: var(--accent); font-size: 10px; }
.server-cell .cell-label .lab-nm {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.server-cell .cell-label .lab-sub {
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: var(--tracking-widest);
  margin-top: 2px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.server-cell:hover .cell-label .lab-nm,
.server-cell.active .cell-label .lab-nm { color: var(--accent-bright); }

.server-cell::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -2px;
  width: 110px;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}

.server {
  position: relative;
  width: 140px; height: 84px;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateY(-32deg);
  transition: transform var(--dur-slow) var(--ease-mech);
}
.server-cell:hover .server,
.server-cell.active .server {
  transform: rotateX(18deg) rotateY(-26deg) translateZ(20px);
}

/* Faces */
.s-face {
  position: absolute;
  background: var(--hw-server-face-a);
  border: 1px solid var(--hw-server-edge);
}
.s-front {
  width: 92px; height: 76px;
  left: 24px; top: 4px;
  transform: translateZ(28px);
  background: linear-gradient(to bottom, var(--hw-server-face-a), var(--hw-server-face-b));
  border: 1px solid var(--hw-server-edge);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.s-right {
  width: 56px; height: 76px;
  left: 88px; top: 4px;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: var(--hw-server-side);
  border-color: var(--line-1);
}
.s-top {
  width: 92px; height: 56px;
  left: 24px; top: 4px;
  transform: rotateX(90deg) translateZ(28px);
  background: var(--hw-server-top);
  border-color: var(--line-1);
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 6px,
    rgba(0,0,0,0.25) 6px,
    rgba(0,0,0,0.25) 7px
  );
}

/* Rack units inside front face — five 1U slots, ~18px each */
.s-unit {
  flex: 1;
  border-bottom: 1px solid var(--hw-unit-border);
  display: grid;
  grid-template-columns: 12px 1fr 22px;
  align-items: center;
  padding: 0 4px;
  gap: 3px;
  background: var(--hw-unit-b);
  position: relative;
  min-height: 0;
}
.s-unit:last-child { border-bottom: none; }
.s-unit:nth-child(odd) { background: var(--hw-unit-a); }
.s-unit .u-led { width: 4px; height: 4px; border-radius: 50%; background: var(--led-off); }
.s-unit .u-vent {
  height: 5px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.5) 0px,
    rgba(0,0,0,0.5) 1px,
    transparent 1px,
    transparent 3px
  );
  border: 1px solid var(--hw-unit-border);
}
.s-unit .u-bay {
  height: 12px;
  border: 1px solid var(--hw-unit-border);
  background: var(--hw-unit-bay);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 2px;
  font-family: var(--font-mono);
  font-size: 5px;
  color: var(--hw-unit-text);
  letter-spacing: 0.5px;
}

.s-unit.power .u-led { background: var(--led-green); box-shadow: var(--glow-green); }
.s-unit.disk  .u-led { background: var(--led-amber); box-shadow: var(--glow-amber); animation: led-blink 0.6s infinite var(--ease-linear); }
.s-unit.net   .u-led { background: var(--led-blue);  box-shadow: 0 0 5px rgba(59,130,246,0.7); animation: led-blink 0.3s infinite var(--ease-linear); }
.s-unit.alert .u-led { background: var(--led-red);   box-shadow: var(--glow-red); animation: led-blink 1.2s infinite var(--ease-linear); }
.s-unit.idle  .u-led { background: var(--led-off); }

.s-unit .u-screen {
  height: 10px;
  background: var(--hw-unit-screen);
  border: 1px solid var(--hw-unit-border);
  font-family: var(--font-mono);
  font-size: 5px;
  color: var(--accent);
  letter-spacing: 0.3px;
  padding: 0 2px;
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
}

/* Network jack on the RIGHT edge of the front face — points toward monitor */
.s-jack {
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 14px;
  background: var(--hw-unit-screen);
  border: 1px solid var(--hw-server-edge);
  z-index: 5;
}
.s-jack::before {
  content: "";
  position: absolute; left: 2px; top: 3px;
  width: 4px; height: 8px;
  background: var(--accent-deep);
  border: 1px solid var(--accent-dim);
}
.server-cell:hover .s-jack::before,
.server-cell.active .s-jack::before {
  background: var(--accent);
  box-shadow: var(--glow-red);
}

/* =========================================================================
   MONITOR — military rugged display
   Fills the right column with no aspect-ratio constraint.
   ========================================================================= */

.monitor-stage {
  position: relative;
  display: flex; align-items: stretch; justify-content: stretch;
  padding: 0 0 0 32px;
  z-index: 2;
  min-height: 0;
}

.monitor-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 0 0 24px;
  display: flex;
  flex-direction: column;
}

.monitor {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: #0a0a0a;
  border: 8px solid #1a1a1a;
  outline: 2px solid #2a2a2a;
  box-shadow:
    inset 0 0 0 2px #050505,
    0 24px 60px rgba(0,0,0,0.6),
    0 0 0 1px var(--accent-deep);
  padding: 32px 22px 38px;
  display: flex; flex-direction: column;
}
.monitor-bezel-top {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 14px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-faint);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.monitor-bezel-top .bz-item { display: flex; align-items: center; gap: 4px; }
.monitor-bezel-bot {
  position: absolute;
  bottom: 12px; left: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
.monitor-bezel-bot .brand {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: var(--tracking-widest);
}
.monitor-bezel-screw {
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle at 30% 30%, #444, #111);
  border: 1px solid #050505;
  border-radius: 50%;
}
.monitor-bezel-screw.tl { top: 10px; left: 10px; }
.monitor-bezel-screw.tr { top: 10px; right: 10px; }
.monitor-bezel-screw.bl { bottom: 10px; left: 10px; }
.monitor-bezel-screw.br { bottom: 10px; right: 10px; }

/* Mounting bracket on the LEFT side (cable enters from the left where the
   server column is). */
.monitor-wrap::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 110px;
  background: linear-gradient(to right, #0a0a0a, #2a2a2a);
  border: 1px solid #050505;
  border-right: none;
}

/* Cable jack on the LEFT edge of the monitor */
.monitor-jack {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 18px;
  background: #050505;
  border: 1px solid var(--line-2);
  z-index: 6;
}
.monitor-jack::before {
  content: "";
  position: absolute; left: 3px; top: 4px;
  width: 6px; height: 10px;
  background: var(--accent-deep);
  border: 1px solid var(--accent-dim);
}
.monitor.live .monitor-jack::before {
  background: var(--accent);
  box-shadow: var(--glow-red);
}

/* Screen content */
.monitor-screen {
  flex: 1;
  background: #030303;
  border: 1px solid #1f1f1f;
  position: relative;
  overflow: hidden;
}
/* (CRT curvature + scanlines intentionally removed — plain screen) */

.screen-content {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: var(--t-base);
  line-height: 1.6;
  color: #e2e2e2;                /* high-contrast body, terminal-style */
  overflow: auto;
}

/* Subtle fade/rise on every screen swap — content div is freshly mounted
   each time activeId changes, so this replays automatically. */
.screen-content > div {
  animation: screenFadeIn 320ms var(--ease-mech);
}
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .screen-content > div { animation: none; }
}
.screen-content::-webkit-scrollbar { width: 6px; }
.screen-content::-webkit-scrollbar-thumb { background: var(--accent-dim); }
.screen-content::-webkit-scrollbar-track { background: #0a0a0a; }

/* Screen text utilities used by Monitor content templates
   scr-dim / scr-faint brightened from #888880 / #5a5a55 — the originals sat
   below 4.5:1 contrast against the always-dark CRT screen background and
   read as illegible at the small terminal type sizes used here. */
.scr-accent { color: var(--accent-bright); }
.scr-prompt { color: var(--accent); }
.scr-key    { color: #f5f5f0; font-weight: 500; }
.scr-dim    { color: #b0b0a8; }
.scr-faint  { color: #8f8f88; }
.scr-ok     { color: var(--led-green); }
.scr-warn   { color: var(--led-amber); }

/* =========================================================================
   CABLE OVERLAY — animated SVG connecting active server to monitor
   ========================================================================= */

.cable-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: visible;
}
.cable-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(220,38,38,0.8))
          drop-shadow(0 0 2px rgba(239,68,68,1));
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}
.cable-path.connected {
  animation: cable-draw var(--dur-cable) var(--ease-mech) forwards;
}
.cable-path-bg {
  fill: none;
  stroke: #2a0a0a;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.6;
}
@keyframes cable-draw {
  to { stroke-dashoffset: 0; }
}
.cable-packet {
  fill: #ffffff;
  filter: drop-shadow(0 0 8px rgba(239,68,68,1))
          drop-shadow(0 0 4px rgba(255,255,255,0.9));
}

/* Empty monitor state */
.monitor-empty {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;
  height: 100%;
  color: var(--text-dim);
  gap: 14px;
}
.monitor-empty .nopg {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
.monitor-empty .blink-cursor {
  display: inline-block;
  width: 10px; height: 18px;
  background: var(--accent);
  margin-left: 4px;
  animation: cursor-blink 1s steps(2, start) infinite;
  vertical-align: middle;
}
@keyframes cursor-blink {
  to { visibility: hidden; }
}

/* =========================================================================
   BOOT SEQUENCE — full-screen BIOS-style POST
   ========================================================================= */

.boot {
  position: fixed; inset: 0;
  background: #030303;
  z-index: 9000;
  display: flex; flex-direction: column;
  padding: 40px 48px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
}
.boot.done { animation: boot-fade 600ms var(--ease-mech) forwards; }
@keyframes boot-fade {
  to { opacity: 0; pointer-events: none; }
}
.boot-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-1);
  margin-bottom: 18px;
}
.boot-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}
.boot-head .corner {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.boot-lines {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: pre;
}
.boot-line .lbl {
  display: inline-block; width: 280px;
  color: var(--text-dim);
}
.boot-line .ok  { color: var(--led-green); }
.boot-line .err { color: var(--led-red); }
.boot-line .info { color: var(--text); }
.boot-progress {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 18px;
  align-items: center;
}
.boot-bar {
  height: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  position: relative;
}
.boot-bar-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 80ms linear;
}
.boot-pct { color: var(--accent); font-size: 12px; letter-spacing: var(--tracking-wider); }
.boot-foot {
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-faint);
  display: flex; justify-content: space-between;
}

/* =========================================================================
   CONTACT FORM — Netlify-backed brief form inside the contact screen
   ========================================================================= */

.cf-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cf-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #888880;
}
.cf-form input,
.cf-form textarea {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  color: #f5f5f0;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
  border-radius: 0;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
  transition: border-color var(--dur-fast) var(--ease-mech),
              box-shadow var(--dur-fast) var(--ease-mech);
}
.cf-form input::placeholder,
.cf-form textarea::placeholder {
  color: #5a5a55;
}
.cf-form input:focus,
.cf-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}
.cf-form textarea {
  min-height: 60px;
  font-family: var(--font-mono);
}
.cf-submit {
  align-self: flex-start;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 var(--accent-deep);
  transition: transform var(--dur-fast) var(--ease-mech),
              box-shadow var(--dur-fast) var(--ease-mech);
  margin-top: 4px;
}
.cf-submit:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  box-shadow: 4px 4px 0 0 var(--accent-deep);
}
.cf-submit:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--accent-deep);
}
.cf-submit:disabled {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  cursor: wait;
}

/* =========================================================================
   LIST ROW HOVER — credentials list + research/disclosures list
   ========================================================================= */

.list-row {
  transition: background var(--dur-fast) var(--ease-mech), padding-left var(--dur-fast) var(--ease-mech);
}
.list-row:hover {
  background: rgba(220, 38, 38, 0.06);
  padding-left: 6px;
}

/* =========================================================================
   CERT VERIFY BUTTON — inline in credentials screen
   ========================================================================= */

.cert-verify {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #3a3a36;
  color: #cccccc;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-mech);
  white-space: nowrap;
}
.cert-verify:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
  background: rgba(220, 38, 38, 0.08);
}

/* =========================================================================
   CURSOR — native defaults restored. No custom cursor or breathing pulse.
   ========================================================================= */
.cursor-pulse { display: none !important; }