/*
  omega-zero's site, laid out the way the kit's rules ask (kit/README.md): every size a whole
  number of art pixels (--u, 2px), every box and every word on a whole pixel, and only the --oz-*
  colours palette.js makes from the Theme colour, so the whole page turns with it.
*/
:root {
  color-scheme: dark;
  /* the room either side of the page, and how wide its column grows */
  --gutter: 16px;
  --max: 1000px;
  /* the bottom bar's height, its actions' notches rising 4 more over the page */
  --bar: calc(15 * var(--u));
  /* how wide a screen or a loop is shown at most: 640 pixels and its frame */
  --screen: calc(340 * var(--u));
}
* { box-sizing: border-box; }
/* a tab's part is hidden by omega-tabs; nothing on the page may show it again */
[hidden] { display: none !important; }

html { background-color: var(--oz-bg); scroll-padding-bottom: calc(30 * var(--u)); }
body {
  margin: 0;
  padding: calc(12 * var(--u)) 0 calc(48 * var(--u));
  color: var(--oz-cream);
  /* Pixel Code one face pixel to an art pixel, on a line of 14 so its capitals sit on whole
     pixels (rows 4 to 10) and a paragraph still reads */
  font: 400 calc(9 * var(--u)) / calc(14 * var(--u)) var(--oz-font);
  text-rendering: geometricPrecision;
}
/* Pixel Code has no bold of its own; the browser's would smear it off the grid */
h1, h2, h3, h4, strong, b, th { font-weight: 400; }
p, h3, figure { margin: 0; }
.dim { color: var(--oz-dim); }
/* a name to type exactly, in running text: the label colour, the page's font */
code { font: inherit; color: var(--oz-label); }

/* links in running text: the bright frame colour, underlined a pixel thick two pixels under the
   letters; cream under the pointer */
:is(p, li, figcaption) a {
  color: var(--oz-frame-hi);
  text-decoration: underline;
  text-decoration-thickness: var(--u);
  text-underline-offset: calc(2 * var(--u));
}
:is(p, li, figcaption) a:hover { color: var(--oz-cream); }
:is(p, li, figcaption) a:focus-visible, .skip:focus-visible, .bar-link:focus-visible, video.clip:focus-visible {
  outline: var(--u) solid var(--oz-cream);
  outline-offset: var(--u);
}

/* the shelf's backdrop behind everything, drifting unless the system asks for less motion */
.page-backdrop { position: fixed; inset: 0; z-index: -1; }

.sr-only {
  position: absolute;
  margin: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--gutter);
  top: calc(-20 * var(--u));
  z-index: 3;
  padding: var(--u) calc(4 * var(--u));
  background: var(--oz-dark);
  color: var(--oz-cream);
}
.skip:focus { top: var(--gutter); }

/* One column as wide as the window less the gutters, up to --max: its width rounded down to a
   whole art pixel and centred on one, so nothing in it lands between pixels. */
.column {
  --w: round(down, min(100% - 2 * var(--gutter), var(--max)), var(--u));
  width: var(--w);
  margin-left: round(down, (100% - var(--w)) / 2, var(--u));
}
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(24 * var(--u)); }
section, .part { min-width: 0; }

/* ---- the tabs, along the top ---- */
.masthead { margin-bottom: calc(14 * var(--u)); }
/* With scripts on, only the first part until omega-tabs has picked the one to show, so the page
   never shows every part for a moment; without scripts every part shows, one under the other. */
.js main > .part:not([role]):not(:first-child) { display: none; }
/* each part a column of its own blocks */
.part { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); align-content: start; }

/* a modal as tall as what is in it: its panels take their own height instead of sharing its */
omega-modal > omega-panel { flex: none; }

/* ---- HOME: the logo and what omega-zero is, the featured loop under it or, on a wide page,
   beside it ---- */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); }
@media (min-width: 1032px) {
  .home-top { grid-template-columns: minmax(0, 1fr) calc(250 * var(--u)); gap: calc(12 * var(--u)); }
}
.hero {
  display: grid;
  justify-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0 calc(4 * var(--u));
  text-align: center;
}
.logo { margin: 0 0 calc(4 * var(--u)); line-height: 0; }
/* the boot logo's own pixels, 2x2 as on the panel: as big as on the boot screen, or a smaller
   drawing of it on a phone (index.html picks which) */
.logo img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.tagline { max-width: calc(300 * var(--u)); }
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(6 * var(--u));
  padding: calc(2 * var(--u)) 0;
}
.prose .buttons, .author .buttons { justify-content: flex-start; }
/* buttons at the foot of a panel's well, their focus rings clear of its edge */
.panel-buttons { justify-content: flex-start; padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)); }

/* ---- the loops: the handheld in 3D, in a modal as wide as a screen ---- */
.loop {
  --lw: round(down, min(100%, var(--screen)), var(--u));
  width: var(--lw);
  display: grid;
  gap: calc(6 * var(--u));
  align-content: start;
}
/* the featured one centred on a whole pixel */
.loop-featured { margin-left: round(down, (100% - var(--lw)) / 2, var(--u)); }
.loop figcaption { color: var(--oz-label); }
.loop-featured figcaption { text-align: center; }
/* the video as wide as the well, rounded down to 4 pixels so its height at 4:3 is whole too */
video.clip {
  display: block;
  width: round(down, 100%, 4px);
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--oz-dark);
  cursor: pointer;
}

/* ---- SCREENS: one shown in the handheld, a row each to pick it ---- */
.viewer { align-items: start; gap: calc(12 * var(--u)); }
.shots { display: grid; gap: calc(16 * var(--u)); }
.shot { margin: 0; display: grid; gap: calc(6 * var(--u)); max-width: var(--screen); }
.shot omega-screen { width: 100%; }
.shot figcaption { color: var(--oz-label); }
/* with scripts on, the first screen only until site.js shows the one picked */
.js .shots:not(.ready) .shot:not(:first-child),
.js .shots.ready .shot:not(.on) { display: none; }
/* stacked, the picker no wider than the screen above it */
.picker-side { display: grid; gap: calc(6 * var(--u)); align-content: start; max-width: var(--screen); }
.picker { display: grid; }
.auto-buttons { justify-content: flex-start; }
/* each row is a button, reaching a pixel into the well's sides as a row does */
.picker button, .setting {
  all: unset;
  display: block;
  margin: 0 calc(-1 * var(--u));
  cursor: pointer;
}
.picker button:focus-visible, .setting:focus-visible { outline: var(--u) solid var(--oz-cream); }
@media (min-width: 1032px) {
  /* the screen at its own size, 640x480 and the bezel, the picker beside it */
  .viewer { grid-template-columns: var(--screen) minmax(0, 1fr); }
  .shots { gap: 0; }
}

/* ---- a modal and words beside it ---- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(12 * var(--u));
  align-items: start;
}
.prose { display: grid; gap: calc(7 * var(--u)); max-width: calc(300 * var(--u)); align-content: start; }
.prose h3 { color: var(--oz-frame-hi); text-transform: uppercase; }
.prose * + h3 { margin-top: calc(7 * var(--u)); }
.split > omega-modal { max-width: var(--screen); }
@media (min-width: 840px) {
  .split { grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr); gap: calc(16 * var(--u)); }
}
/* a loop and words beside it, once the loop can be shown at its own width */
@media (min-width: 840px) and (max-width: 1031px) {
  .split.split-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1032px) {
  .split.split-wide { grid-template-columns: var(--screen) minmax(0, 1fr); }
}
.settings { display: grid; }
.setting[aria-disabled="true"] { cursor: default; }

/* ---- the highlights: cards in whole-pixel columns, one, two or three across ---- */
.cards {
  --cols: 1;
  --gap: calc(2 * var(--u));
  display: grid;
  grid-template-columns: repeat(var(--cols),
    round(down, (100% - (var(--cols) - 1) * var(--gap)) / var(--cols), var(--u)));
  gap: var(--gap);
  padding-bottom: var(--u);
}
@media (min-width: 720px) { .cards { --cols: 2; } }
@media (min-width: 1032px) { .cards:not(.cards-four) { --cols: 3; } }

/* ---- steps and lists in a panel's well, on lines of 14 like the page's text ---- */
.steps {
  display: grid;
  gap: calc(7 * var(--u));
  padding: var(--u) 0 calc(2 * var(--u));
  line-height: calc(14 * var(--u));
}
.prose .steps { padding: 0; }
.steps ol, .steps ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(4 * var(--u));
}
.steps ol { counter-reset: step; }
/* the marker in the bright frame colour, three letters wide */
.steps li { position: relative; padding-left: calc(18 * var(--u)); }
.steps li::before { position: absolute; left: 0; color: var(--oz-frame-hi); }
.steps ol li::before { counter-increment: step; content: counter(step) "."; }
.steps ul li::before { content: "-"; }
.more { color: var(--oz-label); }

/* ---- CREDITS ---- */
.author {
  display: grid;
  gap: calc(7 * var(--u));
  padding: var(--u) 0 calc(2 * var(--u));
  line-height: calc(14 * var(--u));
}

/* ---- the end of every page: who made it, and slot's line last, small and grey ---- */
.page-footer {
  display: grid;
  gap: calc(4 * var(--u));
  margin-top: calc(24 * var(--u));
  color: var(--oz-label);
}
.page-footer .fine, .page-footer .fine a { color: var(--oz-dim); }
/* dark grey in Night, as dark as it can be and still read; the dim colour in the others */
:root[data-colour="night"] .page-footer .fine,
:root[data-colour="night"] .page-footer .fine a { color: var(--oz-band); }

/* ---- the bottom bar, along the window's bottom as on the handheld ---- */
.site-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--bar); }
/* the backdrop under the bar, fixed to the window like the page's so its pattern lines up */
.bar-strip { position: absolute; inset: 0; background-attachment: fixed; }
.bar-link { display: block; height: var(--bar); color: inherit; text-decoration: none; }
.bar-link:hover { outline: var(--u) solid var(--oz-dim); outline-offset: var(--u); }