/* TOSEMU project page
 *
 * Black on white with a green accent, and the furniture GEM was made of:
 * a menu bar, windows with close boxes and scroll bars, dialogs with a hard
 * drop shadow, and dither fills where the ST would have had them. The dithers
 * are checkerboards built from a pair of 45deg gradients, the same trick the
 * VDI played with a 16x16 pattern - at 1px they read as grey, which is exactly
 * what a 50% fill looked like on a mono monitor.
 */

:root {
  color-scheme: light dark;

  --paper:      #ffffff;
  --ink:        #000000;
  --green:      #00a651;   /* black is readable on it; used as a fill  */
  --link:       #00803e;   /* darker, so it is readable as text        */
  --term-bg:    #000000;
  --term-ink:   #4dff9e;
  --on-green:   #000000;
  --code-bg:    #e3f3ea;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "DejaVu Sans Mono", monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui,
          sans-serif;

  --measure: 34rem;
  --wide: 62rem;
  --bar-h: 34px;        /* the sticky menu bar, its bottom rule included */

  /* 50% dither, 1px cells - grey at arm's length, pixels up close */
  --dither:
    linear-gradient(45deg, var(--ink) 25%, #0000 25% 75%, var(--ink) 75%) 0 0/2px 2px,
    linear-gradient(45deg, var(--ink) 25%, #0000 25% 75%, var(--ink) 75%) 1px 1px/2px 2px;

  /* the desktop behind the window: the same fill in green at 3px, which is
     TOSEMU_SCALE's default. Muted, because a window has to sit on top of it. */
  --green-desk: #8ad9b0;
  --dither-desk:
    linear-gradient(45deg, var(--green-desk) 25%, #0000 25% 75%, var(--green-desk) 75%) 0 0/6px 6px,
    linear-gradient(45deg, var(--green-desk) 25%, #0000 25% 75%, var(--green-desk) 75%) 3px 3px/6px 6px;

  /* a lighter fill, for standing in and for large areas */
  --dots: radial-gradient(circle at 1px 1px, var(--ink) 1px, #0000 0) 0 0/6px 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0b0f0c;
    --ink:      #e8f5ec;
    --green:    #00e676;
    --link:     #00e676;
    --term-bg:  #000000;
    --term-ink: #4dff9e;
    --code-bg:  #10241a;
    --green-desk: #145c39;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--green); color: var(--on-green); }

a { color: var(--link); text-underline-offset: 2px; }

a:focus-visible,
.btn:focus-visible,
.menubar a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* A section's top margin collapses out of it, so its border edge sits level
   with the heading - and the sticky bar would then cover the heading when
   the menu jumps to it. Hold the target clear of the bar, with some air. */
section[id] { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }

/* ------------------------------------------------------------------ *
 * The menu bar. GEM highlighted a menu title by inverting it; here it
 * fills with the accent instead, which is the same gesture in colour.
 * ------------------------------------------------------------------ */

.menubar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.menubar-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.menubar-inner::-webkit-scrollbar { display: none; }

.menu-name {
  font: 700 0.78rem/1 var(--mono);
  letter-spacing: 0.16em;
  display: flex;
  align-items: center;
  padding: 0.6rem 1.1rem 0.6rem 0;
}

.menubar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menubar a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.6rem 0.85rem;
  color: var(--ink);
  text-decoration: none;
  font: 0.78rem/1 var(--mono);
  letter-spacing: 0.06em;
}

.menubar a:hover { background: var(--green); color: var(--on-green); }

/* ------------------------------------------------------------------ *
 * The desktop, with a window sitting on it
 * ------------------------------------------------------------------ */

.desktop {
  background: var(--dither-desk), var(--paper);
  border-bottom: 2px solid var(--ink);
  padding: 3.5rem 0 4rem;
}

.win-hero { max-width: 38rem; }

.hero-body { padding: 2rem 2.25rem 2.4rem; }

.eyebrow {
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}

h1 {
  font: 700 clamp(2.4rem, 9vw, 3.8rem)/1 var(--mono);
  letter-spacing: 0.06em;
  margin: 0 0 0.9rem;
}

.tagline {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  margin: 0 0 1.8rem;
  max-width: 28rem;
}

/* centre, rather than stretch: the default button gives up 6px of height
   to the margin its ring sits in, and a stretched sibling would be taller */
.cta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

/* ---- GEM buttons: a box, and a ring around the default one ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: 700 0.78rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn-default {
  margin: 3px;
  background: var(--green);
  color: var(--on-green);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

.btn-default:hover { background: var(--ink); color: var(--green); }

/* ------------------------------------------------------------------ *
 * Headings, prose, code
 * ------------------------------------------------------------------ */

h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* the rule drops below the text when it has to */
  gap: 0.85rem;
  font: 700 1.05rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 3.75rem 0 1.4rem;
}

/* the ruled fill of a GEM mover bar, run out to the margin */
h2::after {
  content: "";
  flex: 1 0 4rem;
  height: 10px;
  background: repeating-linear-gradient(
    to bottom, var(--ink) 0 2px, #0000 2px 4px);
}

h3 {
  font: 700 0.8rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

p { margin: 0 0 1.15rem; }

.prose p, .prose ul { max-width: var(--measure); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 0.05em 0.3em;
}

pre {
  background: var(--term-bg);
  color: var(--term-ink);
  border: 2px solid var(--ink);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  /* wider than the prose: a command line is as long as it is */
  max-width: min(100%, 42rem);
  margin: 0 0 1.5rem;
}

pre code {
  background: none;
  box-shadow: none;
  padding: 0;
  color: inherit;
  font-size: 0.84rem;
  line-height: 1.6;
}

.aside {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.94rem;
}

.aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 6px;
  background: var(--dither), var(--paper);
}

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

.win {
  border: 2px solid var(--ink);
  background: var(--paper);
}

.win-bar {
  display: flex;
  align-items: stretch;
  height: 26px;
  border-bottom: 2px solid var(--ink);
  background: var(--dither), var(--paper);
}

.win-title {
  margin: 0 auto;               /* centred, dither showing either side */
  padding: 0 0.9em;
  background: var(--paper);
  display: flex;
  align-items: center;
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
}

/* close box: a filled square in a box. full box: a hollow one. */
.gadget {
  flex: 0 0 26px;
  background: var(--paper);
  display: grid;
  place-items: center;
}

.gadget.close { border-right: 2px solid var(--ink); }
.gadget.full  { border-left: 2px solid var(--ink); }

.gadget::before { content: ""; width: 9px; height: 9px; }
.gadget.close::before { background: var(--ink); }
.gadget.full::before  { box-shadow: inset 0 0 0 2px var(--ink); }

.win-inner { display: flex; align-items: stretch; }

.win-body { flex: 1; min-width: 0; padding: 1.5rem; }
.win-body.flush { padding: 0; }

.win-body img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;   /* ST pixels stay square */
}

/* ---- the scroll bar down the right hand side ---- */

.win-scroll {
  flex: 0 0 20px;
  border-left: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
}

.win-scroll .arrow {
  flex: 0 0 20px;
  background: var(--paper);
  display: grid;
  place-items: center;
}

.win-scroll .arrow.up   { border-bottom: 2px solid var(--ink); }
.win-scroll .arrow.down { border-top: 2px solid var(--ink); }

.win-scroll .arrow::before { content: ""; border-style: solid; }

.win-scroll .arrow.up::before {
  border-width: 0 5px 7px 5px;
  border-color: transparent transparent var(--ink) transparent;
}

.win-scroll .arrow.down::before {
  border-width: 7px 5px 0 5px;
  border-color: var(--ink) transparent transparent transparent;
}

.win-scroll .track {
  flex: 1;
  position: relative;
  min-height: 3rem;
  background: var(--dither), var(--paper);
}

.win-scroll .thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  height: 38%;
  background: var(--paper);
}

/* ------------------------------------------------------------------ *
 * Dialogs - a box with the hard drop shadow GEM put under one
 * ------------------------------------------------------------------ */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 2.75rem;
  max-width: var(--measure);
}

@media (min-width: 52rem) {
  .compare { max-width: none; }
}

.dlg {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 1.15rem 1.35rem 1.35rem;
  box-shadow: 7px 7px 0 var(--ink);
}

.dlg-accent { box-shadow: 7px 7px 0 var(--green); }

.dlg h3 {
  margin: -1.15rem -1.35rem 1.15rem;
  padding: 0.6rem 1.35rem;
  border-bottom: 2px solid var(--ink);
}

.dlg-accent h3 { background: var(--green); color: var(--on-green); }

.dlg ul { margin: 0; padding-left: 1.1rem; }
.dlg li { margin-bottom: 0.45rem; font-size: 0.94rem; }
.dlg li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Video
 * ------------------------------------------------------------------ */

.video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dither), var(--paper);
  overflow: hidden;
}

.video-slot iframe,
.video-slot img.thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

.video-facade { cursor: pointer; display: block; }

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 5rem;
  height: 3.4rem;
  background: var(--green);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.play::before {
  content: "";
  border-style: solid;
  border-width: 0.62rem 0 0.62rem 1rem;
  border-color: transparent transparent transparent var(--on-green);
}

.video-facade:hover .play { background: var(--paper); }

.video-slot .empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: var(--paper);
  font: 0.8rem/1.6 var(--mono);
}

/* ------------------------------------------------------------------ *
 * Screenshots
 * ------------------------------------------------------------------ */

.shot { margin: 0 0 3.25rem; }

.shot figcaption {
  margin-top: 1rem;
  max-width: var(--measure);
  font-size: 0.94rem;
}

/* stand-in for a screenshot that is not committed yet */
.shot.missing img { display: none; }

.shot .placeholder {
  aspect-ratio: 16 / 9;
  background: var(--dots), var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
}

.shot .placeholder span {
  background: var(--paper);
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  font: 0.72rem/1.5 var(--mono);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ *
 * The eight fill patterns, as a divider
 * ------------------------------------------------------------------ */

.fillbar {
  display: flex;
  height: 30px;
  margin-top: 4.5rem;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.fillbar i { flex: 1; border-right: 2px solid var(--ink); }
.fillbar i:last-child { border-right: 0; }

.fillbar i:nth-child(1) { background: var(--ink); }
.fillbar i:nth-child(2) { background: var(--dither), var(--paper); }
.fillbar i:nth-child(3) { background: var(--dots), var(--paper); }
.fillbar i:nth-child(4) {
  background: repeating-linear-gradient(
    to bottom, var(--ink) 0 2px, #0000 2px 6px), var(--paper);
}
.fillbar i:nth-child(5) {
  background: repeating-linear-gradient(
    to right, var(--ink) 0 2px, #0000 2px 6px), var(--paper);
}
.fillbar i:nth-child(6) {
  background: repeating-linear-gradient(
    45deg, var(--ink) 0 2px, #0000 2px 6px), var(--paper);
}
.fillbar i:nth-child(7) {
  background:
    repeating-linear-gradient(to bottom, var(--ink) 0 2px, #0000 2px 8px),
    repeating-linear-gradient(to right, var(--ink) 0 2px, #0000 2px 8px),
    var(--paper);
}
.fillbar i:nth-child(8) { background: var(--green); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

footer {
  padding: 2.25rem 0 3.5rem;
  font-size: 0.9rem;
}

footer p { max-width: var(--measure); }
footer p:last-child { margin-bottom: 0; font-family: var(--mono); font-size: 0.82rem; }

/* ------------------------------------------------------------------ *
 * Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 40rem) {
  .desktop { padding: 2.25rem 0 2.75rem; }
  .hero-body { padding: 1.5rem 1.35rem 1.75rem; }
  h2 { margin-top: 2.75rem; }
  .dlg { box-shadow: 5px 5px 0 var(--ink); }
  .dlg-accent { box-shadow: 5px 5px 0 var(--green); }
  .win-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}