/**
 * ChicagoFLF
 * Designed by Robin Casady and Susan Kare
 * License: SIL Open Font License 1.1
 * Source: https://usemodify.com/fonts/chicago/
 */
@font-face {
  font-family: 'ChicagoFLF';
  font-style: normal;
  font-weight: 700;
	src: url('assets/Chicagoflf-2OEe.ttf') format('woff');
}

@font-face {
  font-family: 'Silom';
  font-style: normal;
  font-weight: 700;
  src: local('Silom'), url('assets/SilomBol.woff') format('woff');
}

dl, dd, dt,
div, span,
button {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

:root {
  /*
   * Slightly muted options
   * --blue: #4f8acb; 
   * --red: #cb4f4f;
   * --yellow: #daca63;
   * */

  --blue: #3488f0;
  --green: #50f034;
  --red: #ec5d5d;
  --yellow: #f1df6c;
  --white: #d8dfd8;

  --padding: 4px;
  --border: 2px;

	--darken: 0.15;
  --bg: rgb(from var(--blue) calc(r * var(--darken)) calc(g * var(--darken)) calc(b * var(--darken)) / 100%);
  --fg: var(--white);
  --faded-color: rgb(from var(--fg) r g b / 20%);
	--pixel-bleed: rgb(from var(--fg) r g b / 40%);

  --button-tag: 6;

}

html {
  background-color: var(--bg);
  color: var(--fg);

  font-family: 'ChicagoFLF', 'Silom', 'Courier New', monospace, sans-serif;
  height: 100%;
}

body {
  height: 100%;
	padding: var(--padding);
}

body > * {
  margin-bottom: 1rem;
}

section {
  margin: var(--padding);
  margin-bottom: 1rem;
	width: fit-content;
}

section.dialog {
  border-width: var(--border);
  border-style: solid;
  padding: var(--padding);
  background-color: var(--faded-color);
  width: fit-content;
}

section.dialog > header {
	/* Header text color is the background, so set blend mode to 'screen' to allow crt effects/noise to show */
  mix-blend-mode: screen;

  background-color: var(--fg);
  color: var(--bg);

  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: calc((var(--padding) / 2) - 1px);
  padding-bottom: calc((var(--padding) / 2) - 1px);
  margin-bottom: var(--padding);
}

.modal {

  border-style: double;
  border-width: calc(var(--border) * 2);
  width: fit-content;
  font-size: 3em;
  text-align: center;
  /* A touch of an outline on the text */
  -webkit-text-stroke: 0.5px rgb(from var(--blue) calc(r * 1.2) calc(g * 1.2) calc(b * 1.2) / 100%);

  padding: 0.33em;
}

.terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 10;

  /* clip crt rendering effects to inside the border -- the glass */
  border-radius: calc(var(--bezel-radius-1) - var(--bezel-thickness)) / calc(var(--bezel-radius-2) - var(--bezel-thickness));

  /* mouse events should never go to this overlay element */
  pointer-events: none;

  /* Scanlines */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.30) 0px,
    rgba(0, 0, 0, 0.30) 0.25px,
    transparent 1.25px,
    transparent 0.25rem
    );
}

/* Apple Safari  -- requires svg filters be defined in the DOM already */
@supports (font: -apple-system-body) {
  .terminal::after {
    filter: url('#wiggling');
  }
}

/* Other browsers seem to support svg data urls ... but also not supporting DOM-sourced svg filters?*/
@supports not (font: -apple-system-body) {
  .terminal::after {
    filter: url('#wiggling');
  }
  .terminal::after {
    filter: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg">\
        <filter id="wiggling" >\
          <feTurbulence type="noise" baseFrequency="0.02 0.1" seed="10000" numOctaves="1" result="turbulence"/>\
          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="50" xChannelSelector="G" yChannelSelecto\r="A" result="displacementMap" />\
          <feGaussianBlur in="displacementMap" stdDeviation="1" id="soften" />\
          <feComposite in="SourceGraphic" in2="soften" operator="over" />\
        </filter>\
      </svg>#wiggling')
      opacity(80%)
    ;
  }
}

.terminal button, .terminal section {
  text-shadow: 
		var(--pixel-bleed) 0px -0.25rem 0.25em,
		var(--pixel-bleed) 0px 0.25rem 0.25em;
  box-shadow: 
    var(--pixel-bleed) 0.25px 0.25px 16px,
    inset var(--pixel-bleed) 0.25px 0.25px 8px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-3-gap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: var(--border) solid var(--fg);

  /* Small border between grid cells */
  gap: var(--border);
  background-color: var(--fg);
}

.blue {
  --fg: var(--blue);
}

.red {
  --fg: var(--red);
} 

.yellow {
  --fg: var(--yellow);
}

.green {
  --fg: var(--green);
}

.red, .blue, .yellow, .green {
  --faded-color: rgb(from var(--fg) r g b / 20%);
	--pixel-bleed: rgb(from var(--fg) r g b / 40%);

  color: var(--fg);
  border-color: var(--fg);
}


.frosted {
	background-color: var(--faded-color);
}


.card {
  padding: var(--padding);
  background-color: var(--bg);
}

.status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1em;
  align-content: start;
}


.card.status > .entity,
.card.status > .state {
  font-size: 1.10em;
}

.card.status > *:nth-child(2n) {
  justify-self: right;
}

.card.status > hr {
  grid-column-start: span 2;
  width: 100%;
  height: 0px;
  border: 1px dashed rgb(from var(--fg) r g b / 50%);
}

.card.status > dl {
  grid-column-start: span 2;
  width: 100%;
  font-size: 0.85em;

  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card.status > dl > dt {
}
.card.status > dl > dd {
  justify-self: right;
}

/*
.card.status > *:nth-child(2n) {
  justify-self: right;
}
*/

button {
  border: var(--border) solid var(--fg);
  color: var(--fg);
  padding: var(--padding);
  background-color: var(--faded-color);
  width: fit-content;

  border-style: solid;
  border-color var(--fg);

  /* make it align on the bottom? */
  --tag: calc(var(--border) * var(--button-tag));
  padding-left: var(--tag);

  text-align: end;
  vertical-align: bottom;

  transition-timing-function: steps(2, end);
  transition-duration: 100ms;
  transition-property: padding-left, padding-top, border-left-width, border-top-width, background-color, color;
}

button.up {
  padding-left: var(--padding);
  padding-top: calc(var(--tag) + var(--border));
}

button.priority {
  --fg: var(--yellow);
}

button:focus-visible, button:hover, button:focus {
  padding-left: var(--padding);
  border-left-width: calc(var(--tag) * 0.85);
  outline: none;
  background-color: rgb(from var(--bg) r g b / 20%);
  text-decoration: underline;
}

button.up:hover, button.up:focus {
  padding-top: var(--padding);
  border-left-width: var(--border);

  /* Vertical pixels are shorter than horizontal ones...? */
  border-top-width: var(--tag);
}

.progress {
  display: inline-flex;
}

.progress * {
  --progress: 0%;
  text-align: start;
  height: 1lh;
  overflow: hidden;
  word-break: break-all;

  width: var(--progress);

	/* XXX: Could use 'steps' here for the transition function... */
  transition: width 1s cubic-bezier(0.37, 0, 0.63, 1);

  /* transition: width 1s steps(10, jump-both); */
}

/* A hack to make the "typing" effect work on all characters of the content.
 * Without this, the first letter is smoothly scrolled instead of appearing instantly
 */
.progress *::before  {
  content: " ";
  display: inline-block;
}

.terminal {
  --bezel-radius-1: 75px;
  --bezel-radius-2: calc(var(--bezel-radius-1) * 2.5);
  --bezel-thickness: 20px;

  /* Nice chunky display bezel... */
  border: var(--bezel-thickness) solid #A0A098;

  /* Rounded weirdly */
  border-radius: var(--bezel-radius-1) / var(--bezel-radius-2);

  /* A touch of contrast for the outside of the border */
  outline: 0.5px solid white;

  box-shadow: 
  /* bottom+right bezel highlight */
  inset var(--fg) -2px -2px 1px, 
  /* top+left bezel highlight */
  inset rgb(from var(--bg) r g b / 80%) 4px 4px 5px,

  /* Give some contrast to the outside edge of the bezel */
  black 0px 0px 5px,

  /* Sharp, short outer glow */
  rgb(from var(--fg) r g b / 40%) -4px 0 8px,
  rgb(from var(--fg) r g b / 40%) 4px 0 8px,

  /* Wide outer glow */
  rgb(from var(--fg) r g b / 40%) -16px 0 32px,
  rgb(from var(--fg) r g b / 40%) 16px 0 32px,

  /* glass-ish shadowing */
  inset rgb(from var(--fg) r g b / 40%) 8px 8px 16px,
  inset rgb(from var(--fg) r g b / 40%) -8px -8px 16px,

  /* CRT glass glow, brighter towards the outside edges */
  inset rgb(from var(--fg) r g b / 25%) 8px 8px 128px;

  align-content: center;

  /* Pad away from the edge of the screen
   * Although... CRTs did use overscan...
   */
  padding: var(--padding);

  /* To allow the ::before and ::after overlay effects to position themselves absolutely */
  position: relative;

  /* Clip anything outside the 'screen' */
  overflow: hidden;
}

.terminal > * {
  align-self: center;
  justify-self: center;
}

.terminal > .content > section {
  transition-delay: 300ms;
  transition-property: opacity;
  transition-timing-function: steps(3, jump-both);
}

.terminal > .content > section:not(.show) {
  display: none;
}

.terminal > .content > section > div {
  opacity: 0%;
  visibility: hidden;
}


@keyframes glitchy-render {
  0% { opacity: 0; display: revert; }
  100% { opacity: 100%; display: revert; }
}

.show {
  visibility: revert;
  display: revert;
  animation: glitchy-render 300ms steps(3, jump-both);
}

/* Show the section contents slightly after presenting the section frame */
.terminal > .content > section.show > div {
  visibility: revert;
  display: revert;

  animation-name: glitchy-render;
  animation-duration: 300ms;
  animation-delay: 200ms;
  animation-fill-mode: forwards;
  animation-timing-function: steps(3, jump-both);
}

.terminal > .buttons {
  display: grid;
  width: 85%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.terminal > .buttons > button {
  width: initial;
  margin: var(--padding);
}