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

.crt::before {
  content: "";
  position: fixed;

	/* mouse events should never go to this overlay element */
	pointer-events: none;
  inset: 0;
  mix-blend-mode: normal;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.20) 0px,
    rgba(0, 0, 0, 0.20) 0.5px,
    transparent 1px,
    transparent 0.25rem
    );

	filter: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="wiggling" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">\
        <feTurbulence type="turbulence" baseFrequency="0.02 0.1" numOctaves="3" seed="1" stitchTiles="noStitch" result="turbulence" />\
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="G" yChannelSelector="A" result="displacementMap" />\
      </filter>\
    </svg>#wiggling')
		blur(0.2px)
		opacity(80%)
		;
}

.crt::after {
  content: "";
  position: fixed;

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

  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.20) 0px,
    rgba(0, 0, 0, 0.20) 0.5px,
    transparent 1px,
    transparent 0.25rem
    );

}

.crt * {
  text-shadow: 
		var(--pixel-bleed) 0px -0.25rem 0.25em,
		var(--pixel-bleed) 0px 0.25rem 0.25em;
}

.crt button, .crt section {
  box-shadow: 
    /* Outer box glow */
    var(--pixel-bleed) 0.25px 0.25px 8px,
    /* Inner glow */
    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;
}

button.tab {
  width: 8em;
}

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

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

button:hover, button:focus, button:focus-visible {
  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;
}