/* Monitor bezel: 3x3 knit of sliced SVG metal (assets/frame/*), CRT screen behind. */
.mon {
  --fc: 48px;                       /* corner tile = 96 svg units */
  --lip: calc(var(--fc) * 0.667);   /* material depth = 64 units */
  position: relative; display: block; aspect-ratio: 4 / 3.35; color: var(--ink);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.65));
}
.mon .screen {
  position: absolute; inset: calc(var(--lip) - 1px); overflow: hidden; background: #000;
  border-radius: calc(var(--fc) * 0.25); box-shadow: inset 0 0 0 1px #000;
}
.mon .screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) contrast(1.06) brightness(0.88);
  transform: scale(1.04); transition: transform 0.7s var(--spring), filter 0.3s;
}
.mon .glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,0.75) 100%),
    linear-gradient(118deg, transparent 18%, rgba(255,255,255,0.13) 26%, rgba(255,255,255,0.03) 34%, transparent 40%);
  mix-blend-mode: normal;
}
.mon .glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 26px 8px rgba(0,0,0,0.8), inset 0 0 2px 1px rgba(255,255,255,0.08);
}
.mon .frame {
  position: absolute; inset: 0; display: grid; pointer-events: none;
  grid-template: var(--fc) 1fr var(--fc) / var(--fc) 1fr var(--fc);
}
.mon .frame i { display: block; background-repeat: no-repeat; background-size: 100% 100%; }
.mon .frame .tl { background-image: url(/assets/frame/corner-tl.svg?v=5); }
.mon .frame .tr { background-image: url(/assets/frame/corner-tr.svg?v=5); }
.mon .frame .bl { background-image: url(/assets/frame/corner-bl.svg?v=5); }
.mon .frame .br { background-image: url(/assets/frame/corner-br.svg?v=5); }
/* round: whole tiles only, so edge stripes meet the corner arcs */
.mon .frame .t { background: url(/assets/frame/edge-t.svg?v=5) 0 0 / auto 100% round; }
.mon .frame .b { background: url(/assets/frame/edge-b.svg?v=5) 0 0 / auto 100% round; }
.mon .frame .l { background: url(/assets/frame/edge-l.svg?v=5) 0 0 / 100% auto round; }
.mon .frame .r { background: url(/assets/frame/edge-r.svg?v=5) 0 0 / 100% auto round; }
.mon .frame .hole { background: none; }

/* Badge hangs half off the bottom bezel so its label can be read at thin bezel sizes. */
.mon .plate {
  --ph: max(calc(var(--lip) * 1.05), 22px);
  position: absolute; left: 50%; bottom: calc(var(--ph) * -0.45); translate: -50% 0;
  height: var(--ph); width: min(calc(var(--ph) * 5), 78%);
  background: url(/assets/frame/plate.svg?v=5) center / 100% 100% no-repeat;
  display: grid; place-items: center; pointer-events: none;
}
.mon .plate .label {
  max-width: 68%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; translate: -3% 0;
  font: 700 calc(var(--ph) * 0.3)/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); text-shadow: 0 0 6px var(--amber-glow), 0 -1px 0 #000;
}
.mon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 45%, transparent 60%) -150% 0 / 200% 100% no-repeat;
  transition: opacity 0.2s;
}
.mon:hover::after, .mon:focus-visible::after { opacity: 1; animation: sheen 1.1s var(--snap) forwards; }
@keyframes sheen { to { background-position: 150% 0; } }

.mon:hover .screen img, .mon:focus-visible .screen img { transform: scale(1.09); filter: saturate(1.25) contrast(1.1) brightness(1.02); }
.mon:hover .screen, .mon:focus-visible .screen { box-shadow: inset 0 0 0 2px #000, 0 0 24px rgba(255,153,0,0.25); }
@media (prefers-reduced-motion: reduce) { .mon::after { display: none; } }