/* Yantrik Labs — the front page.
 *
 * A file rather than a <style> block: the site is served under
 * `Content-Security-Policy: default-src 'self'`, which permits a stylesheet
 * this origin serves and refuses one written into the page. Inline, none of
 * this applied — the logo tile grew from 128px to the height of the window and
 * the page rendered as unstyled markup, with nothing said about why.
 */

:root {
  --accent: #7d7de6;
  --bg: #0a0a0f;
  --panel: #101018;
  --fg: #eef0f6;
  --muted: #8b90a3;
  --line: rgba(255, 255, 255, .10);
  --glow: rgba(125, 125, 230, .20);
}
[data-theme="light"] {
  --bg: #f6f5f9;
  --panel: #ffffff;
  --fg: #161722;
  --muted: #6a6d7d;
  --line: rgba(0, 0, 0, .10);
  --glow: rgba(125, 125, 230, .16);
}

* { box-sizing: border-box; }
html { height: 100%; }

/* Centred when the page fits, scrollable when it does not.
 *
 * This was `height: 100%` + `place-items: center` + `overflow: hidden`, which
 * centres well on a desktop and is a trap on a phone. Once the content is
 * taller than the viewport a centred grid item overflows equally off BOTH ends,
 * and `overflow: hidden` removes the only way to reach either — the logo was
 * cut off the top, the install command and the school link off the bottom, and
 * no scrollbar suggested there was anything more. Opening the `<details>` made
 * it worse, because the page grew in a direction nobody could follow.
 *
 * Rows of `1fr auto` keep the centring: a `1fr` track is `minmax(auto, 1fr)`,
 * so it never shrinks below its own content, and the body grows and scrolls
 * instead of clipping. The footer is the second row rather than fixed.
 */
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  /* dvh discounts the mobile browser chrome that vh counts in; the vh line
   * stays as the fallback for engines without it. */
  min-height: 100vh;
  min-height: 100dvh;
  transition: background .4s ease, color .4s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(46rem 46rem at 50% 40%, var(--glow), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* `min-width: 0` and `width: 100%` are both load-bearing, and neither works
 * without the other.
 *
 * A grid item's automatic minimum size is its MIN-CONTENT, and the min-content
 * here is the install command: `white-space: nowrap`, about 400px, plus the
 * Copy button. That floor propagated all the way out to the column track, so on
 * a 390px phone this box laid out 525px wide and took the page sideways with
 * it. `max-width` never entered into it — it caps a width, it does not ask for
 * one, and the width being used was an intrinsic one it had no say over.
 *
 * `min-width: 0` drops that floor so the track can be the viewport; `width:
 * 100%` then fills the track so `max-width` has something to cap. The command
 * scrolls inside its own box (see `.cmd code`) instead of widening the page. */
main {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  width: 100%;
  min-width: 0;
  max-width: 40rem;
}

/* logo medallion — a fixed dark tile so the shaded crystal always reads */
.mark {
  width: 128px;
  height: 128px;
  margin: 0 auto 2.3rem;
  padding: 15px;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 15%, #16162400, #0d0d14 70%), #0d0d14;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px -20px var(--glow), inset 0 1px 0 rgba(255,255,255,.05);
}
.mark svg { display: block; width: 100%; height: 100%; }
.mark .frame { fill: #45456a; }          /* yantra board + beams, recessive */
.mark .spin { transform-origin: 50% 50%; }

.kicker {
  font-size: .8rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
  padding-left: .42em;
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.tagline {
  margin: 1.1rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  color: var(--muted);
}

.install { margin: 2.3rem 0 0; }
.install .hint { margin: 0 0 .7rem; color: var(--muted); font-size: .9rem; }
.install .hint strong { color: var(--fg); font-weight: 640; }
.cmd {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .55rem .55rem .55rem 1rem;
}
.cmd code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: .92rem;
  color: var(--fg);
  white-space: nowrap;
  overflow-x: auto;
  /* `overflow-x: auto` alone did nothing here: a flex item's min-width defaults
   * to `auto`, which is its content, so this refused to shrink and the whole
   * command — wider than a phone — pushed the page sideways instead of
   * scrolling inside its own box. The command stays on one line because it is
   * meant to be copied whole; only the box it sits in scrolls. */
  min-width: 0;
}
.cmd code::before { content: "$ "; color: var(--muted); }
.cmd button {
  flex: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: .3rem .7rem;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.cmd button:hover { border-color: var(--accent); color: var(--accent); }
.install .sub { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }
.install .sub code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: var(--fg);
}

/* The way back off. Subordinate on purpose: quieter type, no accent, and shut
 * until asked — the page's job is the way in, and a delete command drawn with
 * the same weight as the install one is a way for the wrong line to be copied
 * by someone who was skimming. */
.undo { margin: 1.6rem 0 0; }
.undo summary {
  color: var(--muted);
  font-size: .82rem;
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s ease;
}
.undo summary::-webkit-details-marker { display: none; }
/* Its own marker, so the rotation is ours and does not depend on what a
 * browser draws for a disclosure triangle. */
.undo summary::before {
  content: "›";
  display: inline-block;
  transition: transform .2s ease;
}
.undo[open] summary::before { transform: rotate(90deg); }
.undo summary:hover { color: var(--fg); }
.undo .cmd { margin: .8rem 0 0; padding: .45rem .45rem .45rem .85rem; }
.undo .cmd code { font-size: .82rem; }
.undo .sub { font-size: .8rem; }
/* The five, listed rather than run together in a sentence: they are a menu the
 * script is about to show, and a menu reads as a menu. */
.five {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: inline-block;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.75;
}
.five b { color: var(--fg); font-weight: 620; }
.five code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: var(--fg);
}

/* The way in for someone who does not yet want to install anything. */
.learn {
  margin: 2.6rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.learn a {
  text-decoration: none;
  color: var(--fg);
  font-size: 1.02rem;
  font-weight: 620;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.learn a:hover { color: var(--accent); border-color: var(--accent); }
.learn span { color: var(--muted); font-size: .85rem; }
.learn strong { color: var(--fg); font-weight: 620; }

.toggle {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.toggle:hover { border-color: var(--accent); color: var(--accent); }
.toggle svg { width: 20px; height: 20px; }
.toggle .moon { display: none; }
[data-theme="dark"] .toggle .moon { display: block; }
[data-theme="dark"] .toggle .sun { display: none; }

/* In the layout, not fixed over it. Pinned to the bottom of the viewport it sat
 * on top of whatever the page's last element was as soon as the two met — on a
 * phone that was the school link, the one thing down there worth tapping. As
 * the second grid row it follows the content and gets out of its way.
 * `position: relative` only to sit above the fixed glow in ::before. */
footer {
  position: relative;
  z-index: 1;
  padding: 2rem 1rem 1.4rem;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
}

/* ---- narrow ------------------------------------------------------------
 * The stylesheet had no media query at all. Everything above is fluid enough
 * to survive one, but the fixed sizes — the 128px medallion, the 2rem gutter,
 * the 42px toggle at 1.1rem of inset — were chosen against a desktop window and
 * eat a phone's screen before the first word is read. */
@media (max-width: 30rem) {
  main { padding: 1.6rem 1.1rem 0; }

  .mark {
    width: 96px;
    height: 96px;
    padding: 12px;
    border-radius: 22px;
    margin-bottom: 1.7rem;
  }

  /* .42em of tracking on a 12px line is most of a phone's width spent on one
   * word; it stays wide enough to read as a kicker and narrow enough to fit. */
  .kicker { font-size: .72rem; letter-spacing: .28em; padding-left: .28em; }

  .install { margin-top: 1.8rem; }
  .cmd { padding: .5rem .5rem .5rem .8rem; }
  .cmd code { font-size: .82rem; }
  .learn { margin-top: 2rem; padding-top: 1.3rem; }

  .toggle {
    top: .7rem;
    right: .7rem;
    width: 38px;
    height: 38px;
  }

  footer { padding: 1.6rem 1rem 1.2rem; }
}