/* www.winsth.com, the Amiga look (amiga.html and error_pages/404/amiga.html).
   The page imitates the Workbench 1.3 screen of an Amiga 500: four colours, the Topaz font and tall hires pixels.

   Sizes are in Amiga pixels. --u is the width of one pixel and --v its height; a hires pixel is twice as tall as it
   is wide, so --v is always 2 x --u. Write sizes as calc(N * var(--u)) across and calc(N * var(--v)) down.
   The script does the same when it moves windows, so a window keeps its place when --u changes.

   Topaz is the Kickstart 1.x font remade by dMG of TrueSchool (fonts/Topaz_a500_v1.0.ttf, GPL with font exception,
   see fonts/Topaz-README.txt). A character is 8 x 8 Amiga pixels, so font-size 16 x --u gives exactly that. */

@font-face {
  font-family: "Topaz a500";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/Topaz_a500_v1.0.ttf") format("truetype");
}

/* Phones get 1 CSS pixel per Amiga pixel, computers 2, very large screens 3. */
:root {
  --u: 1px;
  --v: 2px;
  /* The Workbench 1.3 palette */
  --blue: #0055aa;
  --white: #ffffff;
  --black: #000022;
  --orange: #ff8800;
  --guru-red: #ff0000;
}
@media (min-width: 720px) and (min-height: 560px) {
  :root { --u: 2px; --v: 4px; }
}
@media (min-width: 1800px) and (min-height: 1100px) {
  :root { --u: 3px; --v: 6px; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  /* Black is what shows behind the screen when it is dragged down. */
  background: #000;
  color: var(--white);
  font-family: "Topaz a500", monospace;
  font-size: calc(16 * var(--u));
  line-height: calc(8 * var(--v));
}
button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
h1, h2, p, ul { margin: 0; padding: 0; font: inherit; }

/* The Workbench mouse pointer, and the sleeping cloud while a window opens. */
.wb-screen, .wb-screen * { cursor: url("../img/wb/pointer.svg") 0 0, default; }
html.wb-busy .wb-screen, html.wb-busy .wb-screen * { cursor: url("../img/wb/busy.svg") 16 12, wait; }

.wb-screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--blue);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Special > Redraw: the screen goes blank for a moment. */
.wb-screen.wb-redraw > * { visibility: hidden; }

/* ---- Screen title bar --------------------------------------------------------------------------- */

.wb-screen-title {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 0;
  display: flex;
  height: calc(10 * var(--v));
  background: var(--white);
  color: var(--blue);
  touch-action: none;
}
/* The menus are drawn on top of every window. */
.wb-screen-title.menus-open { z-index: 1000; }
.wb-screen-text {
  flex: 1;
  min-width: 0;
  padding: var(--v) calc(3 * var(--u)) 0;
  white-space: pre;
  overflow: hidden;
}
.wb-screen-title .gad {
  width: calc(23 * var(--u));
  border-left: calc(2 * var(--u)) solid var(--blue);
}

/* ---- Gadgets: the glyph is an SVG mask in the gadget's text colour ------------------------------ */

.gad { position: relative; flex: none; }
.gad::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--glyph) center / 100% 100% no-repeat;
  mask: var(--glyph) center / 100% 100% no-repeat;
}
.gad-close { --glyph: url("../img/wb/close.svg"); }
.gad-front { --glyph: url("../img/wb/front.svg"); }
.gad-back { --glyph: url("../img/wb/back.svg"); }
.gad-up { --glyph: url("../img/wb/up.svg"); }
.gad-down { --glyph: url("../img/wb/down.svg"); }
.gad-left { --glyph: url("../img/wb/left.svg"); }
.gad-right { --glyph: url("../img/wb/right.svg"); }
.gad-size { --glyph: url("../img/wb/size.svg"); }

/* ---- Menus (right mouse button) ----------------------------------------------------------------- */

.wb-menus { display: flex; flex: 1; }
.wb-menus[hidden] { display: none; }
.menu { position: relative; }
.menu-title {
  display: block;
  height: 100%;
  padding: var(--v) calc(8 * var(--u)) 0;
}
.menu-items {
  display: none;
  position: absolute;
  left: 0;
  top: calc(10 * var(--v));
  min-width: calc(112 * var(--u));
  padding: var(--v) calc(2 * var(--u));
  list-style: none;
  background: var(--white);
  color: var(--blue);
  border: solid var(--black);
  border-width: var(--v) calc(2 * var(--u));
}
.menu.open .menu-title { background: var(--black); color: var(--orange); }
.menu.open .menu-items { display: block; }
.menu-item {
  position: relative;
  padding: 0 calc(4 * var(--u));
  white-space: nowrap;
}
/* The highlighted item is drawn in complement colours, as Intuition did. */
.menu-item.hl { background: var(--black); color: var(--orange); }
/* Disabled items are ghosted with a dot pattern. */
.menu-item[aria-disabled]::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--white) 25%, transparent 0 50%, var(--white) 0 75%, transparent 0) 0 0 / calc(2 * var(--u)) calc(2 * var(--v));
}

/* ---- Icons -------------------------------------------------------------------------------------- */

.icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v);
  color: var(--white);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.icon canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.icon span { white-space: nowrap; background: var(--blue); }
.icon:focus { outline: none; }
.icon:focus-visible span { outline: var(--u) dashed var(--orange); }

/* The disk icons on the backdrop, from the top right corner like Workbench puts them.
   A phone is too narrow for that next to the Winsth window, so there they sit below it. */
.desk-icon { position: absolute; right: calc(12 * var(--u)); }
#icon-disk { top: calc(76 * var(--v)); }
#icon-ram { top: calc(106 * var(--v)); }
#icon-clock { top: calc(136 * var(--v)); }
@media (min-width: 720px) and (min-height: 560px) {
  #icon-disk { top: calc(16 * var(--v)); }
  #icon-ram { top: calc(46 * var(--v)); }
  #icon-clock { top: calc(76 * var(--v)); }
}

/* ---- Windows ------------------------------------------------------------------------------------ */

/* A window: title bar on top, the contents with the vertical scroller on the right, the horizontal scroller at the bottom.
   The script adds the gadgets and scrollers. Active window: white title bar. Inactive: blue. */
.win {
  position: absolute;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(18 * var(--u));
  grid-template-rows: calc(10 * var(--v)) minmax(0, 1fr) calc(9 * var(--v));
  background: var(--blue);
  border: solid var(--white);
  border-width: 0 calc(2 * var(--u)) var(--v) calc(2 * var(--u));
  --line: var(--white);
}
.win.active { --line: var(--blue); }
/* Without the script, closed windows open as page anchors (#win-myweblog). */
.win[hidden] { display: none; }
.win:target { display: grid; z-index: 20; }

.win-title {
  grid-column: 1 / 3;
  display: flex;
  border-top: var(--v) solid var(--white);
  border-bottom: var(--v) solid var(--white);
  background: var(--blue);
  color: var(--white);
  touch-action: none;
}
.win.active .win-title { background: var(--white); color: var(--blue); }
.win-title .gad-close { width: calc(20 * var(--u)); border-right: calc(2 * var(--u)) solid var(--line); }
.win-title .gad-back,
.win-title .gad-front { width: calc(23 * var(--u)); border-left: calc(2 * var(--u)) solid var(--line); }
.win-name {
  flex: 1;
  min-width: 0;
  padding-left: calc(4 * var(--u));
  white-space: nowrap;
  overflow: hidden;
}

.win-body {
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: end;
  align-content: start;
  column-gap: calc(12 * var(--u));
  padding: calc(3 * var(--v)) calc(8 * var(--u));
}

/* Scrollers: only for the look, the contents always fit */
.win-vbar {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  border-left: calc(2 * var(--u)) solid var(--white);
}
.win-hbar {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  border-top: var(--v) solid var(--white);
}
.win-prop {
  flex: 1;
  margin: var(--v) calc(2 * var(--u));
  padding: var(--v) calc(2 * var(--u));
  border: solid var(--white);
  border-width: var(--v) calc(2 * var(--u));
}
.win-prop::before { content: ""; display: block; height: 100%; background: var(--white); }
.win-vbar .gad { height: calc(8 * var(--v)); border-top: var(--v) solid var(--white); }
.win-hbar .gad { width: calc(16 * var(--u)); border-left: calc(2 * var(--u)) solid var(--white); }
.win > .gad-size {
  grid-column: 2;
  grid-row: 3;
  border-top: var(--v) solid var(--white);
  border-left: calc(2 * var(--u)) solid var(--white);
  touch-action: none;
}

/* Where each window opens the first time */
#win-winsth { left: calc(4 * var(--u)); top: calc(14 * var(--v)); width: calc(340 * var(--u)); height: calc(54 * var(--v)); }
#win-ram { left: calc(300 * var(--u)); top: calc(62 * var(--v)); width: calc(220 * var(--u)); height: calc(50 * var(--v)); }
#win-trash { left: calc(200 * var(--u)); top: calc(78 * var(--v)); width: calc(200 * var(--u)); height: calc(50 * var(--v)); }
#win-myweblog { left: calc(20 * var(--u)); top: calc(72 * var(--v)); width: calc(232 * var(--u)); height: calc(52 * var(--v)); }
#win-n56avcon { left: calc(50 * var(--u)); top: calc(88 * var(--v)); width: calc(232 * var(--u)); height: calc(52 * var(--v)); }
#win-nkvtext { left: calc(80 * var(--u)); top: calc(104 * var(--v)); width: calc(232 * var(--u)); height: calc(52 * var(--v)); }
#win-myweblog-readme { left: calc(140 * var(--u)); top: calc(40 * var(--v)); width: calc(300 * var(--u)); height: calc(72 * var(--v)); }
#win-n56avcon-readme { left: calc(170 * var(--u)); top: calc(56 * var(--v)); width: calc(300 * var(--u)); height: calc(72 * var(--v)); }
#win-nkvtext-readme { left: calc(200 * var(--u)); top: calc(72 * var(--v)); width: calc(300 * var(--u)); height: calc(72 * var(--v)); }
/* The Clock sits left of the disk icons, measured from the right edge so it stays near them on any screen width.
   A phone has no room there, so it goes below the Winsth window. */
#win-clock { left: calc(4 * var(--u)); top: calc(72 * var(--v)); width: calc(176 * var(--u)); height: calc(90 * var(--v)); }
@media (min-width: 720px) and (min-height: 560px) {
  #win-clock { left: auto; right: calc(96 * var(--u)); top: calc(88 * var(--v)); }
}

/* ReadMe windows: text instead of icons */
.win-readme .win-body { display: block; padding: calc(2 * var(--v)) calc(4 * var(--u)); }
.win-text { white-space: pre-line; user-select: text; -webkit-user-select: text; }

/* Clock window: the face fills the window above the date and time line. The script sizes the canvas in whole
   Amiga pixels to fit the face box, so the face stays crisp when the window is sized. */
.win-clock .win-body { display: flex; flex-direction: column; align-items: stretch; padding: calc(2 * var(--v)) calc(4 * var(--u)); }
.clock-face { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.clock-face canvas {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.clock-text { text-align: center; white-space: nowrap; overflow: hidden; }

/* The outline that follows the pointer while a window is moved or sized (1.3 did not move the window itself).
   "difference" turns white into the complement of what is below it, like Intuition's XOR drawing. */
.wb-outline {
  position: absolute;
  z-index: 999;
  border: solid var(--white);
  border-width: var(--v) var(--u);
  mix-blend-mode: difference;
  pointer-events: none;
}

/* ---- 404: Guru Meditation ----------------------------------------------------------------------- */

.guru-page { background: #000; }
.guru {
  display: block;
  min-height: 100%;
  padding-top: calc(4 * var(--v));
  color: var(--guru-red);
  text-decoration: none;
  text-align: center;
  cursor: url("../img/wb/pointer.svg") 0 0, default;
}
.guru-box {
  display: block;
  max-width: calc(640 * var(--u));
  margin: 0 auto;
  padding: calc(6 * var(--v)) calc(12 * var(--u));
  border: solid var(--guru-red);
  border-width: calc(4 * var(--v)) calc(8 * var(--u));
  animation: guru-blink 1.6s steps(1) infinite;
}
.guru-box span { display: block; white-space: pre-wrap; }
.guru-box span + span { margin-top: calc(4 * var(--v)); }
.guru-hint { display: block; margin-top: calc(12 * var(--v)); padding: 0 calc(8 * var(--u)); }
@keyframes guru-blink {
  50% { border-color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  .guru-box { animation: none; }
}