/* arp!02 manual — structural base. Layout, responsive drawer, and TOC
   behavior live here; a skin file (loaded after this one) supplies fonts and
   colors by overriding the custom properties below. Behavior is skin-agnostic. */

:root {
  /* skins override these; values here are neutral fallbacks */
  --bg:#ffffff; --panel:#f5f5f2; --button:#e9e9e4;
  --ink:#222; --ink-soft:#666; --accent:#3b6; --accent-2:#b53;
  --border:#ddd;
  --landing-top: var(--ink);  /* very dark tone at the top of the landing gradient */
  --landing-high: #333;       /* deep tone in top 1/4 of  landing gradient */
  --landing-mid: #999;        /* mid tone near the center landing gradient */
  --landing-grad: linear-gradient(165deg, var(--landing-top) 1%, var(--landing-high) 19%, var(--landing-mid) 52%, var(--bg) 75%);
  --sidebar-w:17rem; --measure:46rem;
  --font-body: system-ui, sans-serif;
  --font-head: var(--font-body);
  --font-mono: ui-monospace, "DejaVu Sans Mono", monospace;
  /* heading colors default to ink; skins may tint them */
  --h1-color: var(--ink); --h2-color: var(--ink); --h3-color: var(--ink);
  --h2-rule: var(--border);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

img { image-rendering: pixelated; vertical-align: middle; max-width: 100%; }

/* Figures carry their own light panel (#E8EAE4) / button (#CECFC7) colors and
   ship with their pure-white page frame already made transparent, so they
   blend into the paper (light) or recede on dark with content legible in both.
   No per-mode image treatment is needed here. (Regeneration from PDF should be
   re-run through docs/figs-transparent.sh.) */

/* ---- layout ------------------------------------------------------------- */

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  overflow-y: auto;
  padding: 1.25rem 1rem 2rem;
  background: var(--panel);
  border-right: 1px solid var(--border);
}
.sidebar-brand {
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.95rem;
  margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.content {
  max-width: var(--measure);
  margin: 0 auto 0 var(--sidebar-w);
  padding: 2.5rem 1.5rem 6rem;
}
@media (min-width: 60rem) {
  .content { margin-left: max(var(--sidebar-w), calc(50% - var(--measure) / 2)); }
}

/* ---- sidebar TOC -------------------------------------------------------- */

.sidebar ul { list-style: none; margin: 0; padding-left: 0.75rem; }
.sidebar > ul { padding-left: 0; }
.sidebar li { margin: 0.15rem 0; }
.sidebar a {
  display: block; padding: 0.15rem 0.4rem;
  color: var(--ink-soft); text-decoration: none;
  font-size: 0.9rem; border-radius: 3px;
  border-left: 2px solid transparent;
}
.sidebar a:hover { color: var(--ink); background: rgba(127,127,127,0.12); }
.sidebar a.active {
  color: var(--accent); border-left-color: var(--accent);
  background: rgba(127,127,127,0.10);
}
.sidebar ul ul a { font-size: 0.84rem; }

/* ---- topbar + off-canvas (mobile) --------------------------------------- */

.topbar { display: none; }
.nav-scrim { display: none; }

@media (max-width: 59.99rem) {
  .topbar {
    display: flex; align-items: center; gap: 0.75rem;
    position: sticky; top: 0; z-index: 30;
    padding: 0.6rem 1rem;
    background: var(--panel); border-bottom: 1px solid var(--border);
  }
  .hamburger { font-size: 1.4rem; cursor: pointer; line-height: 1; user-select: none; }
  .topbar-title { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; }
  .content { margin-left: auto; padding-top: 1.5rem; }
  .sidebar {
    z-index: 40; transform: translateX(-100%);
    transition: transform 0.18s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.25);
  }
  .nav-toggle:checked ~ .sidebar { transform: translateX(0); }
  .nav-toggle:checked ~ .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(0,0,0,0.4);
  }
}

/* ---- document title (raw HTML <p> in the source, so it stays out of the
   TOC and doesn't inherit the .content h1 section-heading style) ----------- */

.doc-title {
  margin: 0 0 2.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
  font-family: var(--font-head);
  font-size: 2.2rem;       /* larger than the 1.8rem section headings: clearly the title */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
@media (max-width: 59.99rem) {
  .doc-title { font-size: 1.8rem; margin-bottom: 1.5rem; }
}

/* ---- content typography (colors/fonts come from the skin) --------------- */

.content h1, .content h2, .content h3 { font-family: var(--font-head); line-height: 1.25; }
.content h1 { font-size: 1.8rem; color: var(--h1-color); }
.content h2 {
  font-size: 1.35rem; margin-top: 2.5rem;
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--h2-rule);
  color: var(--h2-color);
}
.content h3 { font-size: 1.1rem; margin-top: 1.75rem; color: var(--h3-color); }
.content a { color: var(--accent); }

.content h1.doc-title {
  padding-bottom: 0rem;
  border: none;
  margin: 0rem;
  color: var(--accent-2);
  font-size: 230%;
  font-weight: 800;
}
.content table { border-collapse: collapse; margin: 1rem 0; width: 100%; }
.content th, .content td {
  border: 1px solid var(--border); padding: 0.4rem 0.6rem;
  text-align: left; vertical-align: middle;
}
.content th { background: var(--button); }

.content code {
  font-family: var(--font-mono); background: var(--button);
  padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.9em;
}
.content pre {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.9rem 1rem; overflow-x: auto;
}
.content pre code { background: none; padding: 0; }

.content blockquote {
  margin: 1rem 0; padding: 0.2rem 1rem;
  border-left: 3px solid var(--accent); color: var(--ink-soft);
}

/* ---- landing page (index.html; no sidebar, centered) -------------------- */

/* body fills the viewport, paints the gradient, and centers the column.
   Only the body gets min-height:100vh — putting it on the inner column too
   stacked two viewport heights and the padding overflowed (the scroll slack). */
body.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

/* the gradient is a translucent overlay laid OVER the video (which sits at
   z-index 0 below), so the screencast shows through faintly behind the full-
   page gradient. background-attachment:fixed keeps it aligned with main's
   matching backdrop below. Tune the gradient via --landing-grad above. */
body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--landing-grad);
  background-attachment: fixed;
  opacity: 0.85;   /* < 1 so the video peeks through; lower = more video */
}

/* the centered content column — no min-height, so it can't stack with body */
main.landing {
  position: relative;
  z-index: 2;                 /* above the gradient overlay (1) + video (0) */
  width: 100%;
  max-width: 36rem;   /* wide enough that a 4x (508px) logo isn't clamped */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

/* main's opaque backdrop: the same fixed gradient at FULL strength (so text
   sits on clean color with no video behind it). It's a viewport-tall band
   centered on the column — so on tall windows it extends well above and below
   the content instead of ending at it — and it's masked to fade into the video
   on all four edges (left/right AND top/bottom). On ::before so only the
   backdrop fades, never the logo/text. */
main.landing::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 100vh);        /* extend up/down beyond the content */
  transform: translateY(-50%);
  z-index: -1;
  background-image: var(--landing-grad);
  background-attachment: fixed;
  /* intersect an L/R fade with a top/bottom fade -> soft rectangle */
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 06%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 06%, #000 94%, transparent);
  mask-composite: intersect;
}

/* faint looping screencast, fixed behind everything; main's gradient masks it
   in the center, so it shows only in the gutters around the column */
.landing-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;                 /* behind the gradient overlay (1); faintness is
                                 controlled by the overlay's opacity above */
  pointer-events: none;
}
/* with no video, make the overlay fully opaque so the page is the plain gradient */
@media (prefers-reduced-motion: reduce) {
  .landing-bg { display: none; }
  body.landing::before { opacity: 1; }
}
@media (max-width: 40rem) {                  /* no gutters on phones */
  .landing-bg { display: none; }
  body.landing::before { opacity: 1; }
}

.landing button {
  background: var(--button);
}

/* Logo is the 127x114 base art. CSS can't snap a fluid width to integers, so
   we step through exact integer multiples at breakpoints; image-rendering
   (pixelated, set globally on img) keeps every step crisp — no blur. Each step
   is gated on viewport WIDTH (room across) *and* HEIGHT, so a big logo only
   appears when the column still fits one screen — otherwise it overflows the
   short axis and a scrollbar returns. (Height thresholds ~= logo + tagline +
   4 nav buttons + padding; tune if you change that content.) */
.landing-logo { width: 127px; height: auto; }                                          /* 1x */
@media (min-width: 22rem) and (min-height: 40rem) { .landing-logo { width: 254px; } }  /* 2x */
@media (min-width: 30rem) and (min-height: 48rem) { .landing-logo { width: 381px; } }  /* 3x */
@media (min-width: 40rem) and (min-height: 56rem) { .landing-logo { width: 508px; } }  /* 4x */

.landing-tagline {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0;
}

.landing-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 20rem;
}
.landing-links a {
  display: block;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-head);
}
.landing-links a:hover {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
}

/* brand in the manual/changelog sidebar links back to the landing */
.sidebar-brand a, .topbar-title a {
  color: inherit;
  color: var(--accent);
}

.sidebar-brand .pagetitle {
  color: var(--ink);
  font-size: 130%;
  padding-top: 0.2rem;
  margin-bottom: 0rem;
  padding-bottom: 0.0rem;
}

/* changelog version headings */
.cl-sep {
  color: var(--ink-soft);
  font-weight: 300;
}

.sidebar .cl-version {
  font-weight: bold;
  color: var(--accent-2);
}
.sidebar .cl-date {
  color: var(--ink-soft);
  font-size: 95%;
  font-style: italic;
}
.sidebar .cl-note { font-style: italic; color: var(--ink); }
.sidebar .cl-sep:nth-of-type(4) {
  visibility: hidden;
}
.sidebar .cl-note { display: block; margin-left: 0; font-size: 0.82rem; }
.active .cl-version, .active .cl-date, .active .cl-note { color: var(--accent); }


.content h2 .cl-date {
  color: var(--ink);
}
.content h2 .cl-version {
  color: var(--accent-2);
}
.content .cl-sep:nth-of-type(4) {
  color: var(--ink-soft);
}
.content h2 .cl-note {
  font-style: italic;
}