/* SOA Terminal Frame — same bezel / screen / scanlines as the stateoftheark.ca homepage.
   The bezel stays put and fills the window; the blog scrolls inside the screen. */

html:has(body.soa-framed) { height: 100%; overflow: hidden; }

body.soa-framed {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0b0d radial-gradient(ellipse at 50% 30%, #2a2722 0%, #121110 55%, #070707 100%) fixed;
}

/* ---------- VT terminal bezel ---------- */
.soa-terminal {
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
  left: 16px; right: 16px; bottom: 16px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 38px 42px 0;
  border-radius: 30px 30px 22px 22px;
  /* well-used moulded ABS: grain + specks + mottling, scuffs, worn patch by the power light,
     sun-yellowing (strongest on top) over aged beige. Edge grime is in ::before. No image files. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.13'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .19 0 0 0 0 .14 4.5 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='.35'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='27' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 4.5 0 0 -3.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)' opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 1.2 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='420' viewBox='0 0 1000 420' preserveAspectRatio='none'%3E%3Cpath d='M247 11L260 12' stroke='rgba(255,255,255,0.36)' stroke-width='0.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M233 25L256 34' stroke='rgba(255,255,255,0.36)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M942 392L987 392' stroke='rgba(255,255,255,0.23)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M106 408L118 405' stroke='rgba(60,45,25,0.37)' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M207 22L233 29' stroke='rgba(255,255,255,0.20)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M621 397L640 400' stroke='rgba(255,255,255,0.27)' stroke-width='0.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M328 26L373 17' stroke='rgba(60,45,25,0.32)' stroke-width='0.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M137 389L180 405' stroke='rgba(255,255,255,0.34)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M37 411L88 428' stroke='rgba(60,45,25,0.36)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M943 19L972 26' stroke='rgba(255,255,255,0.31)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M962 22L1010 26' stroke='rgba(255,255,255,0.31)' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M301 40L325 38' stroke='rgba(255,255,255,0.23)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M259 36L272 34' stroke='rgba(60,45,25,0.23)' stroke-width='0.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M420 390L456 407' stroke='rgba(255,255,255,0.39)' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M648 33L678 45' stroke='rgba(60,45,25,0.38)' stroke-width='0.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M343 406L380 411' stroke='rgba(60,45,25,0.36)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M906 370L947 353' stroke='rgba(60,45,25,0.21)' stroke-width='0.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(ellipse 150px 30px at 90% 95%, rgba(55,40,20,.22), transparent 70%),
    linear-gradient(180deg, rgba(200,150,50,.22) 0%, rgba(200,150,50,.08) 45%, rgba(200,150,50,.03) 100%),
    linear-gradient(180deg, #e0d6bd 0%, #d0c3a3 45%, #b8aa88 100%);
  isolation: isolate;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -6px 14px rgba(0,0,0,.25),
    0 30px 60px rgba(0,0,0,.75),
    0 6px 14px rgba(0,0,0,.5);
  z-index: 1;
}
/* ---------- well-used weathering ---------- */
.soa-terminal::before {             /* grime collected toward the edges and corners */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='420' preserveAspectRatio='none'%3E%3Cfilter id='k' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .24 0 0 0 0 .14 0 0 2.2 0 -1.0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23k)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: .7;
  -webkit-mask: radial-gradient(ellipse at 50% 45%, transparent 40%, #000 90%);
          mask: radial-gradient(ellipse at 50% 45%, transparent 40%, #000 90%);
}
.soa-terminal > .soa-recess, .soa-terminal > .soa-chin { position: relative; z-index: 1; }
.soa-terminal > .soa-recess {             /* dirty ring where the screen surround meets the case */
  box-shadow: inset 0 6px 16px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.25),
              0 0 0 2px rgba(60,46,25,.28), 0 0 6px 3px rgba(60,46,25,.12);
}
.soa-terminal .soa-chin { color: #5f5644; }
.soa-terminal .soa-chin .soa-vents {           /* dust packed into the vent slots */
  background: repeating-linear-gradient(90deg, #827a66 0, #827a66 3px, rgba(35,28,16,.6) 3px, rgba(35,28,16,.6) 7px);
}

.soa-recess {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, #1c1b19, #2e2c28);
  box-shadow: inset 0 6px 16px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.4);
}
.soa-screen {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 22px / 34px;
  /* keeps the screen colour you set in the Customizer */
  background: var(--body-background, #1b140c);
}
/* tube shading, scanlines and glass glare, drawn over everything but never blocking clicks */
.soa-screen::before, .soa-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  border-radius: inherit;
}
.soa-screen::before {
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
}
.soa-screen::after {
  background:
    radial-gradient(ellipse at 30% 12%, rgba(255,255,255,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.95), inset 0 0 18px rgba(0,0,0,.9);
}
.soa-screen-content {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 6px 24px;
  text-shadow: 0 0 4px rgba(255,170,60,.45);
  scrollbar-width: thin;
  scrollbar-color: #6b4a1c transparent;
}
.soa-screen-content::-webkit-scrollbar { width: 8px; }
.soa-screen-content::-webkit-scrollbar-thumb { background: #6b4a1c; border-radius: 4px; }
.soa-screen-content::-webkit-scrollbar-track { background: transparent; }

/* the theme page sits on the screen, not on its own background */
.soa-screen-content #page { background: transparent; }

/* sidebar Search button + Post Comment button: amber text on black, amber outline;
   hover/focus flips to black on amber like the homepage menu */
body.soa-framed .widget.widget_search .wp-block-search__inside-wrapper .wp-block-search__button,
body.soa-framed .wp-block-search__button,
body.soa-framed #commentform input[type="submit"] {
  color: var(--primary-color, #ffaa3c);
  background: #000000;
  border: 1px solid var(--primary-color, #ffaa3c);
  opacity: 1;
}
body.soa-framed .widget.widget_search .wp-block-search__inside-wrapper .wp-block-search__button:hover,
body.soa-framed .widget.widget_search .wp-block-search__inside-wrapper .wp-block-search__button:focus,
body.soa-framed .wp-block-search__button:hover,
body.soa-framed .wp-block-search__button:focus,
body.soa-framed #commentform input[type="submit"]:hover,
body.soa-framed #commentform input[type="submit"]:focus {
  color: #000000;
  background: var(--primary-color, #ffaa3c);
  opacity: 1;
}

/* theme's "....." loading screen: fill the glass instead of the whole window,
   underneath the scanlines and tube shading so it looks drawn on the CRT */
body.soa-framed .soa-screen-content #loader {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  z-index: 40;
  background-color: var(--body-background, #1b140c);
}

/* theme's back-to-top button, moved onto the screen by terminal-frame.js */
.soa-screen > a.terminal-blog-scroll-to-top {
  position: absolute;
  right: 36px;
  bottom: 30px;
  z-index: 60; /* above the tube shading so it stays readable */
}

/* ---------- chin: vents + ON LINE LED ---------- */
.soa-chin {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: .25em;
  line-height: 1;
  color: #6f675a;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.soa-chin .soa-vents {
  width: 180px; height: 10px;
  background: repeating-linear-gradient(90deg, #8f8776 0, #8f8776 3px, transparent 3px, transparent 7px);
  border-radius: 2px;
  opacity: .7;
}
.soa-chin .soa-power { display: flex; align-items: center; gap: 10px; }
.soa-chin .soa-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ffcc33;
  box-shadow: 0 0 6px #ffb800, 0 0 12px rgba(255,184,0,.6);
  transition: background .3s, box-shadow .3s;
}
.soa-chin .soa-led.off {
  background: #4a3a00;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}

/* ---------- power-on flicker (first page of each visit) ---------- */
.soa-screen-content.soa-reveal { animation: soa-crt-on .7s ease-out both; }
@keyframes soa-crt-on {
  0%   { transform: scale(1, .004); filter: brightness(4); opacity: 0; }
  40%  { transform: scale(1, .004); filter: brightness(4); opacity: 1; }
  75%  { transform: scale(1, 1);    filter: brightness(1.6); }
  100% { transform: none;           filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .soa-screen-content.soa-reveal { animation: none; }
}

/* ---------- smaller windows: thinner bezel ---------- */
@media (max-width: 782px) {
  .soa-terminal {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
    left: 8px; right: 8px; bottom: 8px;
    padding: 16px 16px 0;
    border-radius: 20px 20px 16px 16px;
  }
  .soa-recess { padding: 8px; border-radius: 18px; }
  .soa-screen { border-radius: 14px / 22px; }
  .soa-chin { padding: 10px 6px 12px; font-size: 10px; }
  .soa-chin .soa-vents { width: 90px; }
}

@media print {
  html:has(body.soa-framed), body.soa-framed { height: auto; overflow: visible; background: none; }
  .soa-terminal, .soa-recess, .soa-screen, .soa-screen-content { all: unset; display: block; }
  .soa-screen::before, .soa-screen::after, .soa-chin, .soa-terminal::before { display: none; }
}