/* SPDX-License-Identifier: GPL-2.0-or-later */
/* ==========================================================================
   The SchOS site — layout only
   --------------------------------------------------------------------------
   Everything here is *arrangement*: where things sit, how wide they get, when
   they stack. Not one colour, shadow, radius, type size or duration is stated
   in this file — those come from Niveus, which is the whole point of the
   split. A hex value in here means the system is missing a token, and the
   answer is to add one rather than to work around it.

   The one exception is `--nv-brand`, which is declared in the pages: it is
   SCH_ACCENT from include/gfx/theme.h, and it is an input to the system rather
   than a restatement of it.
   ========================================================================== */

/* --- The page shell -------------------------------------------------------- */

.shell {
  max-inline-size: var(--nv-layout-max-width);
  margin-inline: auto;
  padding-inline: var(--nv-layout-gutter);
}

.section {
  padding-block: var(--nv-space-20);
}

.section__head {
  max-inline-size: var(--nv-measure);
  margin-block-end: var(--nv-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
}

/* A closing remark under a figure. Narrower than the figure, so it reads as
   commentary on it rather than as the next section. */
.section__note {
  max-inline-size: var(--nv-measure);
  margin-block-start: var(--nv-space-5);
}

/* The flag in the bar. Deliberately small: the site is about an operating
   system, and the flag is a statement, not a subject. */
.pride img {
  display: block;
  block-size: var(--nv-space-4);
  inline-size: auto;
  border-radius: var(--nv-radius-xs);
}

@media (max-width: 60rem) {
  .appearance { display: none; }
}

/* --- Hero ------------------------------------------------------------------ */

/* The band behind the hero, lit the way the Graphite wallpaper is: a light
   from the upper left, and a pool of the accent on the surface the window
   stands on. Mixed from the system's own tokens rather than from the picture,
   so it follows the brand and the appearance instead of fighting the copy. */
.heroband {
  background:
    radial-gradient(ellipse 45% 38% at 68% 62%,
      color-mix(in oklab, var(--nv-color-accent) 45%, transparent), transparent 72%),
    radial-gradient(ellipse 60% 70% at 18% 0%,
      color-mix(in oklab, var(--nv-color-text-primary) 7%, transparent), transparent 70%),
    var(--nv-color-background);
  padding-block-end: var(--nv-space-12);
}

.hero__tile {
  flex: none;
}

.hero__slogan {
  max-inline-size: 22ch;
}

.hero {
  display: grid;
  gap: var(--nv-space-12);
  padding-block: var(--nv-space-16) var(--nv-space-8);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: 5fr 7fr;
    gap: var(--nv-space-14);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-5);
  align-items: flex-start;
}

.hero__title {
  display: flex;
  align-items: center;
  gap: var(--nv-space-4);
  font-size: clamp(var(--nv-font-size-4xl), 7vw, var(--nv-font-size-5xl));
}

.hero__mark {
  inline-size: 1.15em;
  block-size: 1.15em;
}

/* --- Wallpapers ----------------------------------------------------------- */

/* Two across, not auto-fit: four of anything at three per row leaves one
   alone on the last, which reads as an afterthought. */
.walls,
#docs .nv-card-grid {
  display: grid;
  gap: var(--nv-space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 48rem) {
  .walls,
  #docs .nv-card-grid { grid-template-columns: 1fr; }
}

.wall {
  margin: 0;
  overflow: hidden;
}

.wall__img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.wall__caption {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-2);
  padding: var(--nv-space-4) var(--nv-space-5) var(--nv-space-5);
}

/* --- The console ----------------------------------------------------------- */
/*
   A terminal is a window into the machine, so it is drawn as one: a solid
   .nv-window whose body is a recess the log is typed into. The traffic lights
   are decoration here -- nothing on this page can be closed -- so they are
   spans, hidden from assistive tech, rather than buttons that do nothing.
*/

.console {
  min-inline-size: 0;
}

.console__log {
  margin: 0;
  padding: var(--nv-space-4);
  min-block-size: 18rem;
  overflow-x: auto;
  white-space: pre;
  line-height: var(--nv-line-height-relaxed);
  background: var(--nv-color-surface-inset);
  box-shadow: var(--nv-elevation-inset-sm);
}

/* The cursor the boot log types behind. */
#bootlog::after {
  content: "";
  display: inline-block;
  inline-size: 0.6em;
  block-size: 1em;
  vertical-align: text-bottom;
  background: var(--nv-color-accent);
  animation: console-blink 1.1s steps(2, start) infinite;
}

/* Only the boot log types; a finished transcript is as tall as it is. */
.console__log:not(#bootlog) { min-block-size: 0; }

@keyframes console-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #bootlog::after { animation: none; }
}

/* --- Origin, as steps ------------------------------------------------------- */
/*
   The rail is not decoration: these steps happened in this order, and the
   order is the claim the section makes. A grid would lose it. .nv-steps cuts
   the rail into the surface and lights what is done; all this adds is the
   measure, because a step is a paragraph and not a label.
*/

.origin .nv-steps__body {
  max-inline-size: var(--nv-measure);
  padding-block-end: var(--nv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-1);
}

.origin .nv-steps__title {
  font-size: var(--nv-font-size-lg);
}

.origin .nv-steps__text {
  font-size: var(--nv-font-size-md);
  color: var(--nv-color-text-secondary);
}

/* --- The stack -------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
}

.stack__layer {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--nv-space-4);
  align-items: baseline;
  padding: var(--nv-space-3) var(--nv-space-5);
  border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
}

.stack__layer:last-child { border-block-end: 0; }

.stack__name {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  font-family: var(--nv-font-family-mono);
  color: var(--nv-color-text-primary);
}

/* The three seams the section is about. They are the argument, so they carry
   the accent ground; everything else is the arrangement between them. */
.stack__layer--seam {
  background: var(--nv-color-accent-subtle);
  box-shadow: inset var(--nv-border-width-strong) 0 0 var(--nv-color-accent);
}

@media (max-width: 48rem) {
  .stack__layer {
    grid-template-columns: 1fr;
    gap: var(--nv-space-1);
  }
}

/* --- Hybrid: what a driver needs -------------------------------------------- */

.needs {
  display: grid;
  gap: var(--nv-space-4);
  margin-block-end: var(--nv-space-8);
}

@media (min-width: 48rem) {
  .needs { grid-template-columns: repeat(2, 1fr); }
}

/* --- PSOGM ------------------------------------------------------------------ */

.crash {
  display: grid;
  gap: var(--nv-space-8);
  align-items: center;
  padding: var(--nv-space-12);
}

@media (min-width: 48rem) {
  .crash { grid-template-columns: auto 1fr; }
}

/* The bed's label is a caption for the whole region, not the first cell of
   its grid. */
.crash .nv-bed__label {
  grid-column: 1 / -1;
}

.crash__mark {
  inline-size: var(--nv-space-20);
  block-size: auto;
}

.crash__copy {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-4);
}

/* --- The closing band -------------------------------------------------------- */

/* Padded here for the same reason .figure is: a card's padding lives on its
   parts, and this band has none -- it is a mark, some copy and two buttons. */
.getband {
  display: grid;
  gap: var(--nv-space-8);
  align-items: center;
  padding: var(--nv-space-8);
}

@media (min-width: 48rem) {
  .getband { grid-template-columns: auto 1fr; }
}

.getband__mark {
  inline-size: var(--nv-space-20);
  block-size: auto;
  justify-self: center;
}

.getband__copy {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-4);
  align-items: flex-start;
}

/* --- Cards ------------------------------------------------------------------- */

/* A feature's tile belongs beside its title, not above it. A flex row rather than
   `display: inline`, so the two stay aligned whatever the title does. */
.nv-card__title:has(.nv-tile) {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
}

.nv-card__title .nv-tile {
  flex: none;
}

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

.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-5);
  padding-block: var(--nv-space-8) var(--nv-space-16);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-space-2) var(--nv-space-6);
  align-items: baseline;
  justify-content: space-between;
  padding-block-start: var(--nv-space-6);
}

.pride-note {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
}

.pride-note img {
  block-size: var(--nv-space-4);
  inline-size: auto;
  border-radius: var(--nv-radius-xs);
}

/* --- Reveal on scroll -------------------------------------------------------- */
/*
   app.js adds .is-revealed. Without the script every section is simply
   visible, which is the only acceptable failure mode for decoration.
*/

.section[data-reveal] {
  opacity: 0;
  translate: 0 var(--nv-travel-md);
  transition:
    opacity var(--nv-duration-slow) var(--nv-ease-entrance),
    translate var(--nv-duration-slow) var(--nv-ease-entrance);
}

.section[data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
}

/* --- Cards that are entirely a link ------------------------------------------ */
/*
   The whole card is the target -- `.nv-card--interactive` says so by lifting
   under the pointer -- so an underline on the title is a second affordance for
   the same thing, and it reads as a link *inside* a link.
*/

.nv-card__link {
  text-decoration: none;
}

/* --- Command blocks ----------------------------------------------------------- */
/*
   A command is the one thing on these pages that must be copied exactly, so it
   gets a recess of its own rather than sitting in the card's own material.
   `white-space: pre` and not `pre-wrap`: a wrapped shell command is a command
   that can be mistyped.
*/

.cmd {
  margin: 0;
  padding: var(--nv-space-3) var(--nv-space-4);
  overflow-x: auto;
  white-space: pre;
  line-height: var(--nv-line-height-relaxed);
  background: var(--nv-color-surface-inset);
  border-radius: var(--nv-radius-nested-md);
  box-shadow: var(--nv-elevation-inset-sm);
}

/* --- The documentation reader ------------------------------------------------ */
/*
   Index, document, contents. Three columns that become one on a narrow screen,
   in that order of importance: the document is the page, the index is how you
   got there, and the contents panel is a convenience.
*/

.docshell {
  /* Wider than the rest of the site: the document column carries tables and
     diagrams that the prose measure would squeeze, and both side panels have
     to fit beside it. */
  max-inline-size: calc(var(--nv-layout-max-width) + 16rem);
  margin-inline: auto;
  padding-inline: var(--nv-layout-gutter);
  padding-block: var(--nv-space-8) var(--nv-space-16);
  display: grid;
  /* minmax(0, ...) even with one column: a code block is white-space: pre,
     and an auto column grows to its longest line -- which on a phone made
     the whole page wider than the screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nv-space-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .docshell {
    grid-template-columns: 15rem minmax(0, 1fr) 14rem;
    gap: var(--nv-space-10);
  }
}

@media (max-width: 64rem) {
  .docshell__rail { display: none; }

  /* One column: the index stops following the reader and folds away, so
     the document is the first thing on the screen rather than the fortieth. */
  .docshell__aside {
    position: static;
    max-block-size: none;
  }
}

/* Both panels follow the reader down the page, under the bar rather than
   behind it. */
.docshell__aside,
.docshell__rail {
  position: sticky;
  inset-block-start: var(--nv-space-16);
  max-block-size: calc(100vh - var(--nv-space-24));
  overflow-y: auto;
}

/* A vertical nav that is a panel in a page, not the chrome of an app: no
   surface of its own, and no full-height rule down its edge. */
.docnav {
  position: static;           /* the column is what sticks, not the nav */
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  inline-size: 100%;          /* the sidebar component is a fixed 15rem */
  block-size: auto;
}

.docnav .nv-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: var(--nv-space-px);
  margin-block-end: var(--nv-space-5);
}

/* A nav item in a bar is one line by definition; a document title is not. The
   contents panel is 14rem wide and some headings are longer than that, so they
   wrap rather than being cut off mid-word -- a truncated entry is a
   destination you cannot recognise. */
.docnav .nv-nav__item {
  justify-content: flex-start;
  inline-size: 100%;
  white-space: normal;
  block-size: auto;
  min-block-size: var(--nv-control-height-sm);
  padding-block: var(--nv-space-1-5);
  text-align: start;
}

/* A contents panel is a shape: depth reads as indentation. */
.toc-lvl3 .nv-nav__item { padding-inline-start: var(--nv-space-5); }
.toc-lvl4 .nv-nav__item { padding-inline-start: var(--nv-space-8); }

/* --- The document itself ----------------------------------------------------- */

.doc {
  max-inline-size: none;      /* the column already sets the measure */
}

.doc > * + * {
  margin-block-start: var(--nv-space-4);
}

.doc h1,
.doc h2,
.doc h3,
.doc h4 {
  margin-block-start: var(--nv-space-8);
  scroll-margin-block-start: var(--nv-space-20);
}

.doc h2 {
  padding-block-end: var(--nv-space-2);
  border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
}

/* A code block is a small window: a raised strip naming the language, with
   the copy key on it, over the recess the code sits in. */
.codeframe {
  margin: 0;
  border-radius: var(--nv-radius-md);
  overflow: hidden;
  background: var(--nv-color-surface-elevated);
  box-shadow: var(--nv-elevation-1);
}

.codeframe__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nv-space-1) var(--nv-space-1) var(--nv-space-1) var(--nv-space-4);
  border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
}

.codeframe__lang {
  font-family: var(--nv-font-family-mono);
  font-size: var(--nv-font-size-xs);
  letter-spacing: var(--nv-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--nv-color-text-tertiary);
}

.codeframe .doc__pre {
  border-radius: 0;
}

.doc__pre {
  margin: 0;
  padding: var(--nv-space-4);
  overflow-x: auto;
  white-space: pre;
  line-height: var(--nv-line-height-relaxed);
  background: var(--nv-color-surface-inset);
  border-radius: var(--nv-radius-md);
  box-shadow: var(--nv-elevation-inset-sm);
}

.doc blockquote {
  margin-inline: 0;
  padding: var(--nv-space-1) var(--nv-space-5);
  border-inline-start: var(--nv-border-width-strong) solid var(--nv-color-accent-border);
  color: var(--nv-color-text-secondary);
}

.doc ul,
.doc ol {
  padding-inline-start: var(--nv-space-6);
}

.doc li + li {
  margin-block-start: var(--nv-space-2);
}

/* --- The feature rail --------------------------------------------------------- */
/*
   One declaration, because the component already does the rest: the equal
   heights are the flex default, the snapping, the hidden scrollbar and the
   fade that marks which end has more behind it are all .nv-scroller's. The
   only thing it cannot know is how wide a card of *this* content wants to be,
   and 18rem is a line where these carry a paragraph.
*/

.features {
  --nv-scroller-item: 21rem;
}

/* --- The reader's furniture ----------------------------------------------- */

/* Where this document sits, and how long it is. */
.dochead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-2) var(--nv-space-4);
  padding-block-end: var(--nv-space-4);
  border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
}

.doc > .dochead + * {
  margin-block-start: var(--nv-space-6);
}

/* Previous and next, as two keys. */
.docpager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nv-space-4);
  margin-block-start: var(--nv-space-12);
}

.docpager__key {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-1);
  padding: var(--nv-space-4) var(--nv-space-5);
  text-decoration: none;
  color: inherit;
}

.docpager__key--next {
  text-align: end;
  align-items: flex-end;
  grid-column: 2;
}

@media (max-width: 40rem) {
  .docpager { grid-template-columns: 1fr; }
  .docpager__key--next { grid-column: auto; }
}

/* The filter well above the index. */
.docfind {
  margin-block-end: var(--nv-space-5);
}

.docfind .nv-input {
  inline-size: 100%;
}

/* Reading progress: a hairline of accent under the bar, growing from the
   left. Transform rather than width, so it costs a composite and no layout. */
.readbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  block-size: var(--nv-border-width-strong);
  margin-block-end: calc(var(--nv-border-width-strong) * -1);
}

.readbar span {
  display: block;
  block-size: 100%;
  background: var(--nv-color-accent);
  box-shadow: 0 0 var(--nv-space-2) var(--nv-color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* The contents entry for the section being read. */
#toc .nv-nav__item[aria-current="location"] {
  color: var(--nv-color-accent-text);
}

/* The index's fold. Open on a wide screen, where it is a column; closed on a
   narrow one (docs.js), where it would push the document out of view. */
.docindex > summary {
  display: none;
}

@media (max-width: 64rem) {
  .docindex > summary {
    display: flex;
    margin-block-end: var(--nv-space-3);
  }
}