/* ============================================================
   The website, wearing the app's clothes.

   This file deliberately defines no colours. Every token — --bg,
   --panel, --line, --ink, --dim, --accent, --gold, --ok, --bad,
   --radius, --font — comes from web/shared/theme.css, which the deploy
   script copies to /assets/theme.css and every page loads first. The
   site is not styled *like* the app; it is styled *by* the app's
   stylesheet, so a palette change on the iPad reaches halqa.education
   the next time the site is deployed and cannot drift in between.

   That matters here more than it sounds: before this, five pages each
   carried their own hand-copied palette, and all five had already
   drifted from the app (a teal accent against the app's blue) and from
   each other. The same class of bug this project has been bitten by
   twice elsewhere.

   theme.css also brings the shapes with it — .card, .btn, .pill and
   --radius are the app's, unmodified. What is below is only what a
   website needs and a play surface does not: a header, prose widths,
   a hero, and the card grid the library sits on.
   ============================================================ */

/* theme.css sets height:100% for full-screen play surfaces. A document
   that scrolls wants the opposite. */
html, body { height: auto; min-height: 100%; }
body { line-height: 1.65; }

.page { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem 5rem; }
.page.wide { max-width: 68rem; }

/* ---- beta banner -------------------------------------------- */

/* Above the header rather than inside it, and deliberately not sticky:
   the invitation is worth one look on arrival, not a strip following
   someone down every page. Colour is mixed from --accent so it belongs
   to whatever palette the app is wearing, in either scheme. */
.beta-banner {
  display: flex; align-items: center; justify-content: center;
  gap: .55rem; flex-wrap: wrap;
  padding: .6rem 1.25rem;
  text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 13%, var(--bg));
  border-bottom: 1px solid var(--line);
  font-size: .93rem; line-height: 1.4; text-align: center;
}
.beta-banner:hover { background: color-mix(in srgb, var(--accent) 20%, var(--bg)); }
.beta-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.beta-tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  padding: .18rem .45rem; border-radius: calc(var(--radius) / 2);
  background: var(--accent); color: var(--bg); white-space: nowrap;
}
.beta-go { font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ---- header ------------------------------------------------ */

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .inner {
  max-width: 68rem; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .01em; margin-right: auto;
}
.brand .mark { width: 30px; height: 30px; border-radius: 8px; display: block; }
.site-nav { display: flex; gap: .35rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--dim); text-decoration: none; font-size: .93rem;
  padding: .35rem .7rem; border-radius: 999px; border: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); background: var(--panel2); }
.site-nav a[aria-current="page"] {
  color: var(--ink); background: var(--panel); border-color: var(--line);
}

/* ---- prose -------------------------------------------------- */

h1 { font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; letter-spacing: 0; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1.05rem; }
a { color: var(--accent); }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin-bottom: .4rem; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
/* Sample output — a log excerpt on /privacy, so far the only one. Scrolls
   inside itself: these lines are wide and the page must not be. */
pre { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius);
      padding: .9rem 1rem; overflow-x: auto; line-height: 1.5; margin: 1rem 0; }
pre code { font-size: .82em; white-space: pre; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.lede { font-size: 1.15rem; color: var(--dim); margin: 0 0 2rem; max-width: 44ch; }
.sub { color: var(--dim); font-size: 1.1rem; margin: 0 0 2.5rem; }
.lead { font-size: 1.12rem; }
.hero { padding: clamp(2.5rem, 8vw, 5rem) 0 1rem; }
.hero .mark { width: 76px; height: 76px; border-radius: 18px; display: block; margin-bottom: 1.6rem; }

/* theme.css gives .card a margin suited to a stack of play controls.
   Documents lay them out on a grid, which owns the spacing instead. */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) { .grid.three { grid-template-columns: repeat(3, 1fr); } }
.grid .card { margin: 0; height: 100%; display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.3rem; }

.note {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem; margin: 2rem 0; color: var(--dim);
}
.note strong { color: var(--ink); }

/* ---- icons -------------------------------------------------- */
/* Drawn in the app mark's language: round-capped strokes on a 24-unit
   grid, currentColor, with the gold reserved for one accent stroke —
   the same role it plays in the logo. */
/* Stroke and fill are set here rather than as attributes on each <svg>,
   because <use> renders the symbol into a shadow tree: attributes on the
   referencing element do not reach it, but *inherited CSS properties*
   do. Same reason there is no `.icon .accent` rule — a class selector
   cannot match inside that shadow tree, so the gold stroke is set inline
   on the accent element itself, where var(--gold) still resolves against
   the inherited custom property. */
.icon {
  width: 26px; height: 26px; display: block; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.card-head { display: flex; align-items: center; gap: .6rem; }
.card-head h3 { margin: 0; font-size: 1.08rem; }

/* ---- library ------------------------------------------------ */

.badge {
  align-self: flex-start; font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700; padding: .25rem .6rem;
  border-radius: 999px; border: 1px solid;
}
.badge.data { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge.code { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1rem; font-size: .86rem; margin: .3rem 0 0; }
/* Two columns of label-and-value need about 140px each before the values
   start wrapping mid-phrase. Below that, one column. */
@media (max-width: 26rem) { .facts { grid-template-columns: 1fr; } }
.facts div { display: flex; justify-content: space-between; gap: .5rem; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; }
.tags { font-size: .78rem; color: var(--dim); margin: .1rem 0 0; }
.btn-row { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.card .btn { align-self: flex-start; padding: .55rem 1rem; font-size: .95rem; text-decoration: none; }
.card > .btn { margin-top: auto; }
/* Shows the whole address when the clipboard is refused, so the button
   turning into a long URL does not blow the card's width open. */
.btn.copy { font-weight: 600; max-width: 100%; overflow-wrap: anywhere; text-align: left; }

/* ---- footer ------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line); margin-top: 4rem; padding-top: 1.5rem;
  color: var(--dim); font-size: .9rem;
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;
}
.site-foot a { color: var(--dim); }
.site-foot .sep { opacity: .45; }