/**
 * 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;
  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%);

  --button-tag: 6;

	--pixel-bleed: rgb(from var(--fg) r g b / 40%);
  --pixel-bleed-offset: 0.10rem;
  --pixel-bleed-size: 0.40rem;
}

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 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 > .scanlines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;

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

  border-radius: calc(var(--bezel-radius-1) - var(--bezel-thickness)) / calc(var(--bezel-radius-2)*1.5 - var(--bezel-thickness));

	/* Scanlines */
	background: repeating-linear-gradient(
		to bottom,
		rgba(0,0,0,0.1) 0rem,
		rgba(0,0,0,0.1) 0.15rem,
		rgb(from var(--white) r g b / 10%) 0.2rem
	);

	box-shadow:
		inset rgb(from var(--bg) r g b / 80%) 12px 12px 16px,
		inset rgb(from var(--bg) r g b / 80%) -12px -12px 16px;
}

.terminal > .scanlines-off {
	/* Scanlines */
	background-color: #FFF;
	mix-blend-mode: overlay;
}

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

/* Other browsers seem to support svg data urls ... but also not supporting DOM-sourced svg filters?*/
@supports not (font: -apple-system-body) {
  .terminal > .glass .dirty {
    filter: url('#dirty-overlay');
  }
}

/* Define local pixel-bleed-size */
@property --bleed-factor {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.terminal .phosphor {
	filter: url('#phosphor-wobble');
}

.terminal .phosphor button, .terminal .phosphor section {
	--bleed-current: calc(var(--pixel-bleed-size) * var(--bleed-factor));

  text-shadow: 
		var(--pixel-bleed) 0px calc(-1 * var(--bleed-current)) var(--bleed-current),
		var(--pixel-bleed) 0px var(--bleed-current) var(--bleed-current);

  box-shadow: 
    0 0 calc(1 * var(--bleed-current)),
    inset 0 0 calc(1 * var(--bleed-current));

  /* animation: phosphor-pulse 300ms ease-in both;  */
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

@keyframes phosphor-pulse {
  0% { --bleed-factor: 0.8; }
  100% { --bleed-factor: 1.2; }
}

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

.grid-3-gap.show {
  display: grid;
  width: 90%;
  margin: auto;
}

.grid-3-gap {
  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 {
  --faded-color: rgb(from var(--fg) 
  calc(r * 0.25) 
  calc(g * 0.25) 
  calc(b * 0.25) 
  / 100%);
  padding: var(--padding);
	background-color: var(--faded-color);
}

}

.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) * 5.5);
  --bezel-thickness: 20px;
	width: fit-content;

  /* To allow the glass effects to position themselves absolutely */
  position: relative;

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

  box-shadow: 
		/* Give some contrast to the outside edge of the bezel */
		black 0px 0px 5px,
		/* A touch of contrast for the outside of the border */
		white 0px 0px 2px,

		/* 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;

  align-content: center;

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


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

.terminal .glass {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;

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

  border-radius: calc(var(--bezel-radius-1) - var(--bezel-thickness)) / calc(var(--bezel-radius-2)*1.5 - var(--bezel-thickness));

}

.terminal .glass > .lighting, .terminal .glass > .dirty {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
  border-radius: calc(var(--bezel-radius-1) - var(--bezel-thickness)) / calc(var(--bezel-radius-2)*1.5 - var(--bezel-thickness));
}

.terminal .glass > .lighting {
	box-shadow:
		/* top+left bezel highlight */
		inset rgb(from var(--bg) r g b / 80%) 3px 3px 5px,
		/* bottom+right bezel highlight */
		inset var(--fg) -2px -2px 2px, 

		/* 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,
		*/
		inset rgb(from var(--white) r g b / 100%) 2px 2px 32px,

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

.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);
}