/* rikAI grammar pages — /grammar/〜.
   Loads on top of style.css: nav, footer, sentence lab, waitlist and every
   colour token come from there. This file only adds what a grammar page
   needs that the home page doesn't: the point's masthead, the structure
   card, and the stack of worked example sentences.

   All rules are scoped under .gpage so nothing here can reach the home
   page or the tech page. */

.gpage {
  --gmaxw: 820px;    /* prose measure — narrower than the home page's 1080 */
  --gwide: 1280px;   /* the split section, which needs room for two columns */
  --gtop: 88px;      /* sticky offset: the nav is ~70px, plus breathing room */
}

/* ── shell ────────────────────────────────────────────────────────── */

.gpage .gwrap {
  max-width: var(--gmaxw);
  margin: 0 auto;
  padding: 0 24px;
}

.gpage .gwrap-wide { max-width: var(--gwide); }

.gpage .gsec { padding: 54px 0 0; }

/* ── the split: what it means, beside what it looks like ──────────── */

/* The two halves answer different questions and the reader moves between
   them constantly — the rule on the left, the sentence on the right that
   proves it. Side by side, that comparison costs no scrolling. */
.gpage .gsplit {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;   /* the prose is capped at 62ch either
                                             way, so the width it gives up costs
                                             it nothing and buys the sentences a
                                             line they would otherwise wrap */
  gap: 0 56px;
  padding-top: 54px;
  align-items: stretch;   /* the left cell must span the whole row, or the
                             sticky child has no height to travel through */
}

.gpage .gsplit-left,
.gpage .gsplit-right { min-width: 0; }  /* long sentences can't widen the grid */

.gpage .gsplit .gsec { padding-top: 0; }
.gpage .gsplit .gsec + .gsec { padding-top: 30px; }

/* Pinned, so the explanation is still on screen at the eighth sentence.

   It has no scrollbar of its own, deliberately. Capping the height and
   letting the pane scroll internally looks like the safe way to handle a
   long point, but a scroll container takes the wheel before the page does:
   put the pointer over the explanation on a short window and the first turn
   of the wheel moves the explanation, not the sentences. That reads as a
   stuck page, and it only happens on some windows and some points, which
   makes it worse — it reads as a bug rather than a rule.

   So the pane is never a scroller — nothing is capped, nothing is clipped,
   and the wheel always belongs to the page. Instead the anchor moves.

   Both anchors are the one expression below. While the pane fits, --gtop is
   the smaller value and it pins under the nav, as before. When the pane is
   taller than the space it has, the second value goes negative, which pins
   it by its bottom edge: the pane rides up with the page until the end of
   the prose is on screen, then holds there for the rest of the sentences.

   It has to be a negative top and not `bottom`. A bottom-anchored sticky
   holds an element coming up from below — it does nothing for one leaving
   through the top, which is the direction that matters here.

   --stick-h is the pane's own height, measured by grammar.js. Without it the
   second value is far larger than --gtop, so the pane just pins to the top:
   a page with no JS gets the old behaviour, minus the wheel trap. */
.gpage .gstick {
  position: sticky;
  top: min(var(--gtop), calc(100vh - var(--stick-h, 0px) - 28px));
}

/* ── the left column runs a step tighter than the rest of the page ──
   A pinned pane is only worth pinning if all of it is on screen at once:
   the reader should scroll anywhere and see the examples move against a
   fixed explanation, never scroll a second time inside the explanation. */
.gpage .gsplit-left .gsec + .gsec { padding-top: 22px; }
.gpage .gsplit-left .gsec-head { margin-bottom: 12px; }
.gpage .gsplit-left .gsec-head h2 { font-size: clamp(19px, 1.6vw, 21px); }

.gpage .gsplit-left .stab { padding: 10px 15px; font-size: 11.5px; }
.gpage .gsplit-left .sline { padding: 14px 20px; }

.gpage .gsplit-left .sform {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
}

.gpage .gsplit-left .snote { font-size: 13px; margin-top: 10px; }

.gpage .gsplit-left .gprose p { font-size: 14.5px; line-height: 1.62; }
.gpage .gsplit-left .gprose p + p { margin-top: 9px; }

/* One column below this: two half-width columns stop being readable long
   before they stop fitting, and a pinned pane on a phone is just clutter. */
@media (max-width: 1040px) {
  .gpage .gwrap-wide { max-width: var(--gmaxw); }

  .gpage .gsplit {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }

  .gpage .gsplit .gsec,
  .gpage .gsplit .gsec + .gsec { padding-top: 54px; }

  /* Nothing to pin against in one column. `top` is ignored on a static box,
     so the measurement in grammar.js is simply inert below this width. */
  .gpage .gstick { position: static; }
}

.gpage .gsec-head { margin-bottom: 24px; }

.gpage .gsec-head h2 {
  font-size: clamp(21px, 2.4vw, 25px);
  margin-top: 6px;
}

/* ── breadcrumb ───────────────────────────────────────────────────── */

.gpage .gcrumb {
  padding: 26px 0 0;
  font-size: 12.5px;
  color: var(--paper-dim);
  letter-spacing: 0.04em;
}

.gpage .gcrumb a { color: var(--ai-light); }
.gpage .gcrumb a:hover { color: var(--gold); }
.gpage .gcrumb .sep { margin: 0 8px; opacity: 0.5; }
.gpage .gcrumb [aria-current] { color: var(--paper-dim); }

/* ── the point itself ─────────────────────────────────────────────── */

.gpage .gp-hero { padding: 30px 0 8px; }

.gpage .gp-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.gpage .gp-level {
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(201, 161, 90, 0.1);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 9px;
}

.gpage .gp-kind {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ai-light);
}

.gpage .gp-form {
  font-family: var(--display);
  font-size: clamp(38px, 7vw, 62px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

/* Romaji inside the headline rather than only under it. The <h1> used to hold
   nothing but kana, so a page about you ni naru had no headline matching the
   words anyone searches for. Keyboard spelling here — "you ni naru", not
   "yō ni naru" — since that is what gets typed; the macron transcription keeps
   its place in .gp-romaji below. */
.gpage .gp-h1-romaji {
  display: block;
  font-size: clamp(19px, 2.8vw, 27px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-top: 12px;
}

/* The reading, inline in the headline: 遠慮（えんりょ）. Smaller and quieter
   than the headword so the kanji still reads as the title, but real text in
   the <h1> rather than a caption underneath — that is the line search results
   quote, and someone who typed the kana needs to see it in it. */
.gpage .gp-h1-kana {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold);
  white-space: nowrap;
}

.gpage .gp-romaji {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.14em;
  margin-top: 4px;
}

/* The keyboard spelling, because that is the one people type into a search
   box. The macron above is the better transcription and stays first. */
.gpage .gp-alt {
  color: var(--paper-dim);
  letter-spacing: 0.1em;
}

.gpage .gp-en {
  font-family: var(--display);
  font-size: clamp(19px, 2.3vw, 23px);
  color: var(--paper);
  margin-top: 20px;
  line-height: 1.5;
}

.gpage .gp-en .sep { color: var(--gold); margin: 0 10px; opacity: 0.7; }

.gpage .gp-lede {
  color: var(--paper-dim);
  font-size: 16px;
  margin-top: 16px;
  max-width: 60ch;
}

/* ── structure card ───────────────────────────────────────────────── */

.gpage .struct {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.gpage .struct-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ink-line);
}

.gpage .stab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin: 0;
  padding: 13px 20px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.gpage .stab:hover { color: var(--paper); }

.gpage .stab[aria-selected="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.gpage .sline { display: none; padding: 26px 24px; }
.gpage .sline.is-on { display: block; }

.gpage .sform {
  font-family: var(--display);
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.6;
}

/* the slot the learner fills in vs. the fixed parts they type verbatim */
.gpage .sform .slot {
  color: var(--ai-light);
  border-bottom: 1px dashed color-mix(in srgb, var(--ai-light) 55%, transparent);
}

.gpage .sform .fixed { color: var(--gold); }
.gpage .sform .plus { color: var(--paper-dim); margin: 0 8px; font-size: 0.8em; }

.gpage .snote {
  color: var(--paper-dim);
  font-size: 14px;
  margin-top: 14px;
  max-width: 56ch;
}

/* ── prose ────────────────────────────────────────────────────────── */

.gpage .gprose p {
  color: var(--paper-dim);
  font-size: 15.5px;
  max-width: 62ch;
}

.gpage .gprose p + p { margin-top: 16px; }

.gpage .gprose b { color: var(--paper); font-weight: 500; }
.gpage .gprose .ja { font-family: var(--display); color: var(--gold); }

/* ── worked examples ──────────────────────────────────────────────── */

.gpage .ex {
  border-top: 1px solid color-mix(in srgb, var(--ink-line) 70%, transparent);
  padding: 34px 0 4px;
}

.gpage .ex:first-of-type { border-top: 0; padding-top: 8px; }

.gpage .ex-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* the label says what this sentence demonstrates — these are cases, not
   steps, so they are named rather than numbered */
.gpage .ex-pattern {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-light);
}

.gpage .ex-reg {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 2px 10px;
  flex: none;
}

/* the home page lab is a two-column feature; here it is the whole width */
.gpage .sentence-lab.solo {
  display: block;
  padding: 0;
}

/* Tall enough for the longest word panel on the page, so moving from word to
   word never resizes the card and shifts the sentence you're reading. */
.gpage .solo .sl-card { min-height: 218px; }

.gpage .ex-en {
  color: var(--paper-dim);
  font-size: 15px;
  margin-top: 12px;
  max-width: 60ch;
}

.gpage .ex-en::before {
  content: "→";
  color: var(--gold);
  margin-right: 8px;
  opacity: 0.75;
}

/* the grammar point's own words, underlined solid in every sentence */
.gpage .tok.gp {
  border-bottom-color: var(--gold);
  color: color-mix(in srgb, var(--gold) 88%, var(--paper));
}

/* ── the Anki button ──────────────────────────────────────────────
   On the page it is a demo, so the click answers with where the real
   thing lives. The label is a sentence rather than a word, so the pill
   stops being a pill and wraps inside the column it sits in. */
.gpage .anki-add.added {
  border-radius: 14px;
  max-width: 100%;
  padding: 9px 14px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  cursor: default;
}

/* ── contrast + related ───────────────────────────────────────────── */

.gpage .ccards { display: grid; gap: 16px; }

.gpage .ccard {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-left: 2px solid var(--shu);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.gpage .ccard h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.gpage .ccard h3 .ja { color: var(--gold); }
.gpage .ccard p { color: var(--paper-dim); font-size: 14.5px; }

.gpage .rel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.gpage .rcard {
  display: block;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.gpage .rcard:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  transform: translateY(-2px);
}

.gpage .rcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gpage .rcard-ja {
  font-family: var(--display);
  font-size: 19px;
  color: var(--gold);
}

.gpage .rcard-lv {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  flex: none;
}

.gpage .rcard p {
  color: var(--paper-dim);
  font-size: 13px;
  margin-top: 6px;
}

/* ── also asked ───────────────────────────────────────────────────── */
/* The same questions people are already typing into a search box, answered
   short. Deliberately quieter than .ccard — this is the tail of the page,
   not the argument of it. */

.gpage .qa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.gpage .qitem {
  background: var(--ink-soft);
  padding: 20px 22px;
}

.gpage .qitem h3 {
  font-size: 15.5px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.gpage .qitem h3 .ja { color: var(--gold); }

.gpage .qitem p {
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1.65;
}

.gpage .qitem p .ja { color: var(--ai-light); }

/* An answer that hands off to another point links out of the paragraph. */
.gpage .qitem p a {
  color: var(--ai-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ai-light) 40%, transparent);
}

.gpage .qitem p a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* ── funnel back to the app ───────────────────────────────────────── */

.gpage .gcta {
  margin: 62px 0 0;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 34px 30px;
  text-align: center;
}

.gpage .gcta h2 { font-size: clamp(21px, 2.6vw, 26px); }

.gpage .gcta p {
  color: var(--paper-dim);
  font-size: 15px;
  margin: 12px auto 0;
  max-width: 52ch;
}

.gpage .gcta .wait { margin-top: 22px; }

.gpage .gcta-links {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--paper-dim);
}

.gpage .gcta-links a { color: var(--ai-light); }
.gpage .gcta-links a:hover { color: var(--gold); }

.gpage .gtail { padding-bottom: 90px; }

/* ── mobile ───────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .gpage .gwrap { padding: 0 20px; }
  .gpage .gsec { padding-top: 44px; }
  .gpage .gp-hero { padding-top: 22px; }

  .gpage .ex-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .gpage .sline { padding: 22px 20px; }
  .gpage .qitem { padding: 18px 20px; }
  .gpage .gcta { padding: 28px 20px; }
  .gpage .gtail { padding-bottom: 70px; }
}