/*
 * Manuel Calzolari - AmigaShell style
 *
 * Palette: the classic 4-colour AmigaOS Workbench set.
 */

:root {
  --blue: #0055aa;
  --white: #ffffff;
  --black: #000022;
  --orange: #ff8800;
  /* console row height: every gap is a multiple of this */
  --line: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/*
 * Base structure
 */

html {
  height: 100%;
}

body {
  display: flex;
  min-height: 100%;
  margin: 0;
  padding: 16px;
  background-color: var(--blue);
  color: var(--white);
  /* only VT323 gives the measured layout; the generic keyword is the closest
     fallback and lets each platform pick its own monospace */
  font-family: "VT323", monospace;
  /* the size the reference uses in the title bar */
  font-size: 21px;
  line-height: var(--line);
}


/*
 * Links
 */

a {
  color: var(--orange);
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus-visible,
a:active {
  text-decoration: underline;
}


/*
 * Window
 */

.win {
  position: relative;
  width: 100%;
  max-width: 620px;
  /* stays fully visible when taller than the viewport */
  margin: auto;
  border: 0 solid var(--white);
  /* the title bar is the window's top edge */
  border-width: 0 2px 2px;
  background: var(--blue);
}


/*
 * Window title bar
 */

.win__bar {
  display: flex;
  /* clips the title when the bar is squeezed narrow */
  overflow: hidden;
  height: 20px;
  background: var(--white);
  color: var(--blue);
}

.win__title {
  padding: 0 4px 0 2px;
  /* caps land on the same row as the reference */
  line-height: 17px;
  white-space: nowrap;
}

/* Drag bar: two 4px rules, stopping 3px short of the gadget divider */
.win__drag {
  flex: 1 1 auto;
  min-width: 8px;
  background-image:
    linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-size: calc(100% - 3px) 4px;
  background-position: 0 4px, 0 12px;
}

/* Gadgets: 22px cells divided by 2px rules. ::after is the nearer window. */
.win__gadget {
  position: relative;
  box-sizing: content-box;
  flex: 0 0 auto;
  width: 22px;
  border-left: 2px solid var(--blue);
}

.win__gadget::before,
.win__gadget::after {
  content: "";
  position: absolute;
}

/* Back: this window (outlined) drawn behind the other one */
.win__gadget--back::before {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 12px;
  border: 2px solid var(--blue);
  background: var(--white);
}

.win__gadget--back::after {
  left: 6px;
  top: 6px;
  width: 14px;
  height: 12px;
  background: var(--black);
}

/* Front: this window (outlined) drawn in front of the other one */
.win__gadget--front {
  border-right: 2px solid var(--blue);
  /* 1px of bar left showing past the divider */
  margin-right: 1px;
}

.win__gadget--front::before {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 12px;
  background: var(--black);
}

.win__gadget--front::after {
  left: 6px;
  top: 4px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--blue);
  background: var(--white);
}


/*
 * Window sizing gadget
 */

/* White field in the bottom-right corner, imagery in blue */
.win__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 16px;
  background: var(--white);
}

.win__resize::before,
.win__resize::after {
  content: "";
  position: absolute;
  border: 2px solid var(--blue);
}

.win__resize::before {
  left: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
}

.win__resize::after {
  left: 6px;
  top: 6px;
  width: 8px;
  height: 10px;
}


/*
 * Shell session: the console content inside the window
 */

.shell {
  /* 4px + the sizing gadget's 16px */
  padding: 2px 4px 20px;
  overflow-wrap: break-word;
}

/* one blank row after each */
.shell__line,
.shell__name,
.shell__bio {
  margin: 0 0 var(--line);
}

.shell__line {
  white-space: nowrap;
}

.shell__name {
  font-size: 2em;
  font-weight: normal;
  /* one grid row; the 42px ink overflows it by design */
  line-height: var(--line);
}

.shell__line--end {
  margin: var(--line) 0 0;
}

/* Steady block - the Amiga console cursor did not blink.
   1ch is exactly one character cell in a monospace font. */
.shell__cursor {
  display: inline-block;
  width: 1ch;
  height: 1em;
  background: var(--orange);
  vertical-align: -.15em;
}


/*
 * Contacts
 */

.contacts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contacts__row {
  display: flex;
  gap: 1ch;
}

.contacts__key {
  flex: 0 0 auto;
  /* longest key is 8ch, so + the 1ch gap = a 2-space separator */
  width: 9ch;
}

.contacts__value {
  min-width: 0;
  overflow-wrap: anywhere;
}


/*
 * Playback: hidden up front, revealed by the typing script
 */

/* Keeps the command hidden until it has been typed */
.js .shell__cmd {
  clip-path: inset(-50% 100% -50% 0);
  animation: rescue-unclip 0s 3s forwards;
}

.js .shell__cmd.is-typed {
  clip-path: none;
}

/* Held back until the webfont has loaded (see the font gate in js/main.js) */
.js .win {
  visibility: hidden;
}

.js .win.is-ready {
  visibility: visible;
}

.js .reveal,
.js .shell__line--end {
  visibility: hidden;
}

.js .reveal.is-on,
.js .shell__line--end.is-on {
  visibility: visible;
}


/*
 * Rescue
 */

/* The gates above are only ever lifted by main.js, so if it fails to load the
   page would stay blank for good. These lift them anyway after a delay;
   main.js cancels them on its first line, so they only fire if it never ran. */

@keyframes rescue-visible {
  to {
    visibility: visible;
  }
}

@keyframes rescue-unclip {
  to {
    clip-path: none;
  }
}

.js .win,
.js .reveal,
.js .shell__line--end {
  animation: rescue-visible 0s 3s forwards;
}

.js.is-alive .win,
.js.is-alive .reveal,
.js.is-alive .shell__line--end,
.js.is-alive .shell__cmd {
  animation: none;
}


/*
 * Small screens
 */

@media (max-width: 480px) {
  body {
    padding: 10px;
  }
}