/* ===========================================================================
   Manifold — the look of the pages *beside* the front one (Help, About,
   Contact).

   `site.css` is the front page's own stylesheet, and it came from the design
   with its styling in inline attributes, so it defines almost no classes. These
   three pages are written by hand and wear classes, which is why the chrome
   they share lives here rather than there.

   Built out of the app's tokens (`tokens.css`), so the page and a screenshot of
   the program agree in both faces. Every element wears a class and the class
   carries the look — the rule the app states for itself, and the reason the
   design this came from was re-expressed rather than pasted: a prototype keeps
   its styling in inline attributes because the medium requires it.
   =========================================================================== */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  /* The whole page answers a theme change the way the app's chrome does. */
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
body[dir="rtl"] { font-family: var(--font-ui); }

::selection { background: var(--selection); }


.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* **A backdrop here is one still thing, not six that follow the scroll.** The
   front page is a display and earns its six motifs; these are documents, so each
   has a single wash and a single glyph, the same construction on all three and
   only the glyph differing. The content is lifted above it. */
main, header, footer { position: relative; z-index: 1; }
/* **And it scrolls away with the page.** Pinned to the viewport, the light from
   above followed the reader down the document and stopped being *from above* at
   all — it was simply a tint on the screen. Absolute, drawn across the first
   screenful of the *page*, it is where it says it is and the reader leaves it
   behind. `body` is the box it is measured against. */
body { position: relative; }

/* ---- The bar ----
   Glass, like the app's: the page runs *under* it, because a bar with only flat
   colour behind it has nothing to frost. */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px) saturate(1.6);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.top .wrap { display: flex; align-items: center; gap: 20px; padding-block: 12px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.01em; text-decoration: none; color: var(--text);
}
.mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(140deg, var(--math-accent), var(--accent));
  color: #fff; font-size: 12px; font-weight: 700;
}
.top nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.top nav a, .chip {
  color: var(--text-muted); text-decoration: none; font-size: 14px;
  padding: 6px 10px; border-radius: var(--radius-control);
  /* The app's `.ui-btn` motion, said once for both: `--dur-fast`, and the
     transform on `--ease-spring`. Without the transform in this list the press
     below snapped, which is the whole of what "it does not animate like the app"
     means. */
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.top nav a:hover, .chip:hover {
  background: var(--control-hover); color: var(--text);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.top nav a:active, .chip:active { transform: translateY(0) scale(0.97); box-shadow: none; }

/* A control the reader presses: the app's shape, the app's hover, the app's
   answer to a press. Never a hover the neighbours do not have. */
.chip {
  border: 1px solid var(--border); background: none; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.4;
}


/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-control);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 550; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--control-hover); border-color: var(--glass-rim); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
/* **The white is said again here**, exactly as the app has to say it: the base
   hover sets `color` and is the more specific selector, so a primary button
   loses its own colour the moment the pointer arrives without this. */
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; box-shadow: var(--shadow-md); }

/* ---- Sections ---- */
.hero { padding: 96px 0 72px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 14px;
}
h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 20px; }
h2 { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
h3 { font-size: 17px; margin: 0 0 6px; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--text-muted); max-width: 60ch; margin: 0 0 28px; }
.note { color: var(--text-muted); font-size: 15px; max-width: 62ch; }
section { padding: 72px 0; border-top: 1px solid var(--border-soft); }
section:first-of-type { border-top: 0; }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 28px; }
.card {
  /* **A box is a surface, not an outline.** A line round every card is a page
     drawn as a form; the surface and the shadow already say where the card ends,
     and the page reads as paper rather than as a table of fields. */
  background: var(--surface); border: 0;
  border-radius: var(--radius-lg); padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card p { margin: 0; color: var(--text-muted); font-size: 14.5px; }
.card .glyph { color: var(--math-accent); font-size: 20px; line-height: 1; margin-bottom: 10px; display: block; }

/* A list of things taken as read: dense, quiet, and not competing with the
   things above it that are the point. */
.taken { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.taken li {
  font-size: 13px; color: var(--text-muted);
  border: 0; border-radius: 999px; padding: 4px 11px;
  background: var(--surface);
}

/* ---- The paper, for showing what the app shows ---- */
.paper {
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--paper-shadow);
  padding: 26px 30px; color: var(--text);
  font-family: var(--font-body);
}
.paper[dir="rtl"] { font-family: var(--font-body-he); }

/* ---- Downloads ---- */
.downloads { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 26px 0; }
.dl {
  display: grid; gap: 6px; align-content: start;
  background: var(--surface); border: 0; border-radius: var(--radius-lg);
  padding: 18px 20px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.dl:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dl strong { font-size: 16.5px; }
.dl span { font-size: 14px; color: var(--text-muted); }
.dl em { font-size: 12.5px; color: var(--text-faint); font-style: normal; }

.needs { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14.5px; }
.needs td { padding: 9px 0; border-top: 1px solid var(--border-soft); vertical-align: top; }
.needs td:first-child { color: var(--text); font-weight: 550; padding-inline-end: 24px; white-space: nowrap; }
.needs td:last-child { color: var(--text-muted); }

pre {
  background: var(--surface-alt); border: 0;
  border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto;
  font-size: 13.5px; line-height: 1.6;
}
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

footer { border-top: 1px solid var(--border); padding: 28px 0 56px; color: var(--text-faint); font-size: 13.5px; }
footer a { color: var(--text-muted); }

/* ---- Arriving ----
   The app's own gesture: a thing arrives rather than appearing. The starting
   state is written by `site.js`, not here — the same mechanism the front page
   uses, so there is one of them rather than two, and a page whose script fails
   shows its words rather than a blank sheet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }

/* **The picture of the app wears the face the reader is in.** A light screenshot
   on a dark page is a photograph of a different program; the app has two faces
   and the page shows the matching one. */
.shot {
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--paper-shadow);
  transition: opacity var(--dur-base) var(--ease-out);
}