/* printers.css — 3D printer page: flat device bays, framed live feed, status readout.
   Flat & polished look (no Win98 bevels), matching the site's pixel aesthetic. */

/* ===== LAYOUT: device bays (left) + stream/readout stage (right) ===== */
.printer-layout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  /* The readout text trips mobile "font boosting" (inflated text) despite the global
     100% rule, so opt the whole printer page out explicitly — same fix as the console
     and Who Am I page. */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}
.printer-bays {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;                 /* room for the connection label above each button */
}
.printer-stage {
  flex: 1;
  min-width: 0;
}
/* Single-printer pages: the nav dropdown replaces the bay column, so hide it and
   let the stream stage fill the width. */
.printer-single .printer-bays { display: none; }
/* With the bay column gone, let the feed grow to the full stage width at 16:9
   (the 250px height cap was sized for the narrower multi-bay layout). */
.printer-single .stream-container { max-height: none; }

/* ===== DEVICE BAYS (printer selector) ===== */
.printer-bay {
  box-sizing: border-box;
  position: relative;
  min-width: 96px;
  padding: 5px 8px 6px;
  background: #efeaf0;
  border: 1px solid #b9a9b8;
  cursor: pointer;
  font-family: regular;
  font-size: var(--font-body);
  color: #202020;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.printer-bay:hover { background: #f6f1f7; border-color: #a892a7; }
.printer-bay.active {
  background: #fff;
  border-color: #000080;
  box-shadow: inset 0 0 0 1px #000080;
}

/* Connection status — plain text sitting just above the button's top-left. */
.bay-conn {
  position: absolute;
  left: 1px;
  bottom: 100%;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  color: #808080;
  line-height: 1;
}
.bay-conn .conn-dot {
  width: 5px; height: 5px; flex: 0 0 auto;
  background: #9a9a9a;
}
.bay-conn.online { color: #128a3e; }
.bay-conn.online .conn-dot { background: #22c55e; box-shadow: 0 0 3px #22c55e; }
.bay-conn.offline { color: #b23b3b; }
.bay-conn.offline .conn-dot { background: #cf4a4a; }

.bay-icon-img {
  width: 32px; height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}
.bay-icon-emoji { font-size: 22px; line-height: 32px; }
.bay-brand { color: #808080; line-height: 1.05; white-space: nowrap; }
.bay-model { color: #000080; line-height: 1.1; white-space: nowrap; margin-top: -2px; }
.bay-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #808080;
  text-transform: uppercase;
}

/* Status LED (blocky, matches the pixel dot in the feed overlay). */
.bay-led, .pr-led {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: #9a9a9a;                 /* idle grey */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}
.bay-status.printing, .pr-status.printing { color: #128a3e; }
.bay-status.heating,  .pr-status.heating  { color: #cc6a00; }
.bay-status.paused,   .pr-status.paused   { color: #9a7b00; }
.printing .bay-led, .printing .pr-led { background: #22c55e; box-shadow: 0 0 4px #22c55e; animation: bay-pulse 1.4s ease-in-out infinite; }
.heating  .bay-led, .heating  .pr-led { background: #ff9922; box-shadow: 0 0 4px #ff9922; }
.paused   .bay-led, .paused   .pr-led { background: #ffd23f; }
@keyframes bay-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ===== LIVE FEED (framed monitor) ===== */
.stream-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 250px;
  background: #000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);   /* subtle depth, no hard border */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #808080;
  font-size: var(--font-body);
  margin-bottom: 10px;
  overflow: hidden;
}

/* ===== STREAM OVERLAY (hugs the video content rect, not the container) ===== */
.stream-overlay {
  position: absolute;
  display: none;          /* shown by JS only when a frame is live */
  pointer-events: none;
  z-index: 2;
}
.stream-ov-tl {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.stream-ov-bl {
  position: absolute;
  bottom: 6px;
  left: 6px;
}
.stream-ov-tl,
.stream-ov-bl {
  font-family: regular;
  font-size: var(--font-body);
  color: #fff;
  white-space: nowrap;
  /* Continuous outline: stroke drawn behind the fill so it never thins the glyphs. */
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
    -1px  0   0 #000,                1px  0   0 #000,
    -1px  1px 0 #000, 0  1px 0 #000, 1px  1px 0 #000;
}
.ov-live {
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}
/* Blocky "pixel" circle (5x5 grid) to match the pixel font. */
.ov-dot {
  width: 6px;
  height: 6px;
  background: transparent;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><rect x='0' y='1' width='5' height='3' fill='%23ff2020'/><rect x='1' y='0' width='3' height='1' fill='%23ff2020'/><rect x='1' y='4' width='3' height='1' fill='%23ff2020'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000)
          drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
  animation: ov-blink 1s steps(1, end) infinite;
}
@keyframes ov-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ===== STREAM MESSAGE (black mask for Loading / Offline / no stream) ===== */
.stream-message {
  position: absolute;
  inset: 0;
  display: flex;          /* toggled to none by JS once live */
  align-items: center;
  justify-content: center;
  background: #000;
  color: #c0c0c0;
  font-family: regular;
  font-size: var(--font-body);
  text-align: center;
  z-index: 3;
}

/* ===== STREAM IMAGE ===== */
.stream-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stream-img.visible { display: block; }

/* ===== STATUS READOUT ===== */
.printer-readout {
  border: 1px solid #b9a9b8;
  background: #efeaf0;
  padding: 8px 10px;
  font-family: regular;
  font-size: var(--font-body);
  color: #202020;
}
.pr-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pr-name {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
}
.pr-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #808080;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Status bar: always visible below the feed. Fills + shows % while printing;
   otherwise shows the state (or an "unreadable" message) centered on an empty bar. */
.pr-bar {
  position: relative;
  height: 16px;
  margin: 0 0 4px;
  background: #e2d6e2;
  border: 1px solid #b9a9b8;
  overflow: hidden;
}
.pr-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  /* chunky pixel segments */
  background: repeating-linear-gradient(90deg, #22c55e 0, #22c55e 5px, #1ba54e 5px, #1ba54e 6px);
  transition: width 0.3s;
}
.pr-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: #3a2f3a;
  white-space: nowrap;
  /* crisp light outline so it stays legible over the green fill */
  text-shadow: 1px 0 #eae3ea, -1px 0 #eae3ea, 0 1px #eae3ea, 0 -1px #eae3ea;
}

.pr-meta { margin-top: 6px; }
.pr-meta .label { color: #000080; }

/* Grey build-volume line between the stream and the readout. */
.printer-buildvol {
  color: #808080;
  font-family: regular;
  font-size: var(--font-body);
  margin: 6px 2px 4px;
}
/* Relative "started printing Xh Xm ago" — its own line, right-aligned. */
.pr-ago { color: #808080; text-align: right; margin-top: 2px; }

/* ===== PRINTER PAGE: status / currently-printing / recent prints / about ===== */
.pp-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.pp-box {
  flex: 1 1 0;                 /* each ~half the content width */
  min-width: 0;
  box-sizing: border-box;
  background: #efeaf0;
  border: 1px solid #b9a9b8;
  padding: 8px 10px;
  font-family: regular;
  font-size: var(--font-body);
  color: #202020;
}
.pp-box-title {
  font-family: heading; font-weight: bold; font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 6px;
  border-bottom: 1px solid #cbb9ca;
  padding-bottom: 3px;
}
.pp-k { color: #000080; }
.pp-v { color: #202020; }
.pp-unspec { color: #9a9a9a; font-style: italic; }

.pp-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 0; }
.pp-stat--bar { flex-direction: column; align-items: stretch; gap: 3px; }

/* Cell grid (2 on top, 3 on bottom in the status box; 4 across in About) */
.pp-cells { display: flex; gap: 6px; margin-bottom: 6px; }
.pp-cells:last-child { margin-bottom: 0; }
.pp-cell {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: #e4dbe4; border: 1px solid #cbb9ca; padding: 4px 6px;
}
.pp-cell .pp-k { color: #808080; }
.pp-cell .pp-v { color: #202020; font-weight: bold; }

/* Make the status-box cells fill its full height (it's stretched to match the taller
   "currently printing" box): the two rows grow to share the leftover height, and each
   cell centers its label/value so the vertical padding stays even. */
.pp-status-box { display: flex; flex-direction: column; }
.pp-status-box .pp-cells { flex: 1 1 0; }
/* Title pinned to the top with an underline; value pinned to the bottom. */
.pp-status-box .pp-cell { justify-content: space-between; }
.pp-status-box .pp-cell .pp-k { border-bottom: 1px solid #cbb9ca; padding-bottom: 3px; }

/* Dotted leader between a label and its value (filament "Loaded"). */
.pp-stat--leader { align-items: baseline; }
.pp-leader { flex: 1 1 auto; border-bottom: 1px dotted #9a8fa0; margin: 0 6px 4px; }

/* Grey [unspecified] must win over the bold navy item-name styling. */
.pp-item.pp-unspec { color: #9a9a9a; font-family: regular; font-weight: normal; }

/* Filament: its own full-width segment with a 64x64 icon on the left. */
.pp-filament {
  display: flex; gap: 12px; align-items: center;
  box-sizing: border-box;
  background: #efeaf0; border: 1px solid #b9a9b8;
  padding: 8px 10px; margin-bottom: 10px;
  font-family: regular; font-size: var(--font-body); color: #202020;
}
.pp-fil-icon {
  flex: 0 0 auto; width: 64px; height: 64px;
  background: #d8ccd7 center/contain no-repeat;
  border: 1px solid #b9a9b8; image-rendering: pixelated;
}
.pp-fil-info { flex: 1 1 auto; min-width: 0; }

.pp-cur { display: flex; gap: 10px; align-items: flex-start; }
.pp-thumb {
  flex: 0 0 auto; width: 96px; height: 96px;
  object-fit: contain; background: #12121a;
  border: 1px solid #b9a9b8; image-rendering: auto;
}
.pp-thumb[hidden] { display: none; }
.pp-cur-info { flex: 1 1 auto; min-width: 0; }
.pp-item { font-family: heading; font-weight: bold; font-size: var(--font-heading); color: #000080; }
.pp-file { color: #808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 5px; }
.pp-metrics { display: flex; gap: 16px; margin: 4px 0; }
.pp-metric { display: flex; flex-direction: column; }
.pp-metric .pp-k { color: #808080; }

.pp-bar {
  position: relative; display: block; height: 14px; margin: 4px 0;
  background: #e2d6e2; border: 1px solid #b9a9b8;
  overflow: hidden; image-rendering: pixelated;
}
.pp-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(90deg, #34b063 0, #34b063 5px, #1f7a42 5px, #1f7a42 6px);
  transition: width 0.3s;
}
.pp-bar-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #3a2f3a; text-transform: uppercase;
  text-shadow: 1px 0 #eae3ea, -1px 0 #eae3ea, 0 1px #eae3ea, 0 -1px #eae3ea;
}

.pp-section-title {
  font-family: heading; font-weight: bold; font-size: var(--font-heading);
  color: #000080; margin: 4px 0 6px;
}
.pp-section-title--row { display: flex; align-items: baseline; justify-content: space-between; }
/* Disabled "see more": the homepage panel-more look, but greyed + non-navigating. */
.panel-more--disabled { color: #9a9a9a; cursor: default; }
.panel-more--disabled:hover { text-decoration: none; }

/* Prints / Models archive page (stub) */
.prints-page { padding: 4px 2px; color: #202020; font-family: regular; font-size: var(--font-body); }
.prints-intro { color: #444; margin-bottom: 8px; }
.prints-soon { color: #808080; }

.pp-recent { display: flex; gap: 8px; margin-bottom: 12px; }
.pp-recent-empty { color: #808080; padding: 6px 2px; }
.pp-tile {
  /* Always sized as one of three columns (8px gap), so a single print still occupies a
     third of the row and stays left-aligned rather than stretching to full width. */
  flex: 0 0 calc((100% - 16px) / 3); min-width: 0; box-sizing: border-box;
  background: #efeaf0; border: 1px solid #b9a9b8; padding: 6px;
  font-size: var(--font-body);
}
.pp-tile-thumb {
  display: block; width: 100%; height: 84px;
  object-fit: cover; background: #12121a; border: 1px solid #b9a9b8;
  image-rendering: auto; margin-bottom: 4px;
}
.pp-tile-thumb--none { background: #d8ccd7; }
.pp-tile-info { min-width: 0; }
.pp-tile-name { font-weight: bold; color: #000080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tile-file { color: #808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tile-status { text-transform: uppercase; color: #808080; margin: 2px 0; }
.pp-tile-status.st-completed { color: #128a3e; }
.pp-tile-status.st-failed { color: #b23b3b; }
.pp-tile-status.st-cancelled { color: #9a7b00; }
.pp-tile-row { display: flex; justify-content: space-between; color: #808080; }
.pp-tile-date { color: #9a8fa0; margin-top: 3px; }

.pp-about {
  background: #efeaf0; border: 1px solid #b9a9b8; padding: 8px 10px; margin-bottom: 10px;
  font-family: regular; font-size: var(--font-body); color: #202020;
}
.pp-about-name { font-family: heading; font-weight: bold; font-size: var(--font-heading); color: #000080; }
.pp-about-desc { color: #444; margin: 3px 0 6px; }
.pp-about-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }