/* ============================================================
   Math Basics website: the rail layout (templates/rail.html).

   A cream rail beside a white page; the reading column is centred in the
   space to the right of the rail. Backgrounds are only white or the rail's
   cream. Colour sits in the foreground: each area of the Explain section has
   its own colour, from the app's operation colours, and the rail's details
   use the app's addition orange.

   Physical sides are never named: every border and padding that leans one
   way is a logical property, so the Arabic pages mirror the whole layout,
   rail on the right, by `dir="rtl"` alone.
   ============================================================ */

:root {
  /* Text. */
  --ink: #141414;           /* 18.4:1 on white, 17.7:1 on the rail */
  --ink-2: #383838;         /* 11.8:1 on white */
  --line: #cfcfcf;

  /* The rail: the app's cream hue (LightTheme backgroundPrimary #FFF9F0) at a
     lower saturation. */
  --rail-bg: #fcf9f6;
  --rail-edge: #e0d8ca;
  --rail-faint: rgb(20 20 20 / .2);
  --rail-rule: rgb(20 20 20 / .3);
  /* The rail's details, the app's addition orange. The bars are decoration
     (the current page is bold as well), so they keep the true orange; text in
     the colour uses it darkened to 7:1 on the cream. */
  --rail-detail: #FF9B71;
  --rail-detail-text: #933907;

  /* The three areas, from the app's operation colours (LightTheme.swift):
     division green, factoring indigo, multiplication cyan. --v* is the colour
     itself, for bars and squares; --t* is its text version, >= 7:1 on white. */
  --v1: #71983E; --t1: #406101;
  --v2: #4A47A3; --t2: #4a47a3;
  --v3: #279393; --t3: #066262;
  --v: var(--v1); --t: var(--t1);

  --font: Andika, system-ui, sans-serif;
}
.area-2 { --v: var(--v2); --t: var(--t2); }
.area-3 { --v: var(--v3); --t: var(--t3); }
/* Andika has no Arabic; the face the site used before carries it. */
:lang(ar) { --font: "Baloo Bhaijaan 2", Andika, system-ui, sans-serif; }

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 20px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: #fff; line-height: 1.65;
  display: grid; grid-template-columns: 17rem minmax(0, 1fr); min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--t); text-decoration-thickness: 2px; text-underline-offset: 3px; }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; line-height: 1.2; }

/* ---- The rail ---- */
.rail {
  position: sticky; top: 0; height: 100vh;
  background: var(--rail-bg); color: var(--ink); border-inline-end: 1px solid var(--rail-edge);
  display: flex; flex-direction: column; padding: 1.4rem 1.3rem 0;
}
.rail a { color: var(--ink); }
.mark { font-weight: 700; font-size: 1.25rem; text-decoration: none; margin-bottom: 1.4rem; display: block; }
.ctx { flex: 1; overflow-y: auto; margin: 0 -1.3rem; padding: 0 1.3rem; }
.ctx > summary { display: none; }
.back { display: inline-block; font-size: .85rem; margin-bottom: 1rem; }
.rail h2 { font-size: .85rem; font-weight: 700; margin: 0 0 .4rem; color: var(--rail-detail-text); }
.rail ul { list-style: none; margin-bottom: 1.4rem; }
.rail li a {
  display: block; text-decoration: none; font-size: .9rem; line-height: 1.35;
  padding-block: .32rem; padding-inline-start: .7rem; border-inline-start: 3px solid var(--rail-faint);
}
.rail li a:hover { border-inline-start-color: var(--rail-detail); text-decoration: underline; }
.rail li a[aria-current] { border-inline-start-color: var(--rail-detail); font-weight: 700; }

.fixed { border-top: 1px solid var(--rail-rule); margin: 0 -1.3rem; padding: 1rem 1.3rem 1.2rem; }
.app-link {
  display: block; background: #fff; font-weight: 700; text-decoration: none; padding: .6rem .9rem;
  border: 1px solid var(--ink); border-inline-start: 8px solid var(--rail-detail);
}
.app-link:hover, .app-link.is-current { text-decoration: underline; }
.small { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .8rem; font-size: .85rem; }
.small a[aria-current] { font-weight: 700; }
.lang { margin-top: .7rem; font-size: .85rem; position: relative; }
.lang > summary { cursor: pointer; list-style: none; display: inline-block; border: 1px solid var(--ink); padding: .2rem .6rem; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after { content: " ▾"; }
.lang[open] > summary::after { content: " ▴"; }
.lang ul {
  position: absolute; bottom: 2.2rem; inset-inline-start: 0; width: 15rem; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--ink); list-style: none; margin: 0; padding: .3rem 0; columns: 2; z-index: 10;
}
.lang li a { border: 0; padding: .2rem .8rem; font-size: .85rem; text-decoration: none; display: block; }
.lang li a:hover { text-decoration: underline; }
.lang li a[aria-current] { font-weight: 700; }

/* ---- The page: centred in the space beside the rail ---- */
main { padding: 3.2rem 3.6rem 2rem; width: 100%; max-width: 46rem; margin: 0 auto; }
h1 { font-size: 2.3rem; line-height: 1.15; margin-bottom: 1rem; }
h2 { font-size: 1.4rem; line-height: 1.25; margin: 2.6rem 0 .8rem; }
h3 { font-size: 1.1rem; margin: 1.6rem 0 .3rem; }
p { margin-bottom: 1rem; }
.lede { font-size: 1.15rem; color: var(--ink-2); }
.btn {
  display: inline-block; background: var(--t1); color: #fff; font-weight: 700;
  text-decoration: none; padding: .5rem 1.1rem;
}
.btn:hover { background: var(--ink); color: #fff; }

.foot { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--ink-2); }
.foot p { margin-bottom: .3rem; }
.foot a { color: var(--ink-2); }

/* ---- Lists of areas and lessons (Explain home, area pages, the index) ---- */
.areas { list-style: none; margin-top: 2.4rem; }
.areas li { display: grid; grid-template-columns: 1.1rem 1fr; column-gap: 1.2rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.areas li::before { content: ""; grid-row: 1 / 4; background: var(--v); }
.areas a { font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.areas p { margin: .3rem 0 0; }
.count { color: var(--ink-2); font-size: .9rem; }

.lessons { list-style: none; margin-top: 2rem; border-top: 4px solid var(--v); }
.lessons li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.lessons a { font-weight: 700; font-size: 1.1rem; }
.lessons p { margin: .1rem 0 0; color: var(--ink-2); }

/* ---- A lesson ---- */
.rule { border-inline-start: 8px solid var(--v); padding-block: .4rem; padding-inline-start: 1.2rem; margin: 2rem 0; }
.rule .label { color: var(--t); font-weight: 700; margin-bottom: .2rem; }
.rule p:last-child { font-size: 1.3rem; font-weight: 700; line-height: 1.4; margin: 0; }
.steps, .mistakes, .related { padding-inline-start: 1.4rem; }
.steps li, .mistakes li, .related li { margin-bottom: .5rem; }
.ex { border-top: 4px solid var(--v); padding-top: .7rem; margin: 1.4rem 0; }
.ex.no { border-top-color: var(--line); }
.ex .q { font-weight: 700; margin-bottom: .2rem; }
.ex .work { font-size: 1.7rem; margin-bottom: .2rem; }
.ex strong { color: var(--t); }
.ex.no strong { color: var(--ink); }
.faq details { border-top: 1px solid var(--line); padding: .7rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: .5rem 0 0; }
.cta { display: grid; grid-template-columns: 110px 1fr; gap: 1.6rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 4px solid var(--rail-detail); }
.cta h2 { margin-top: 0; }
.cta img { border: 1px solid var(--ink); }

/* ---- The index: the app page, today's home page content ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 2.4rem; align-items: center; }
.hero-video { width: 100%; border: 1px solid var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.ghost { font-weight: 700; }
.hero-note { color: var(--ink-2); font-size: .95rem; }
/* Each operation in its own colour from the app, set per item as --op. */
.ops { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.4rem 0 0; }
.ops li { display: flex; align-items: center; gap: .45rem; }
.ops li::before { content: ""; width: .8rem; height: .8rem; background: var(--op); }
.feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.2rem; }
.feats li { border-top: 4px solid var(--v1); padding-top: .5rem; margin-top: 1.2rem; }
.feats li:nth-child(3n+2) { border-top-color: var(--v2); }
.feats li:nth-child(3n) { border-top-color: var(--v3); }
.feats h3 { margin: 0 0 .2rem; }
.feats p { margin: 0; color: var(--ink-2); }
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
.shots img { border: 1px solid var(--ink); }
figcaption { font-size: .8rem; color: var(--ink-2); margin-top: .3rem; line-height: 1.35; }
.checks { list-style: none; }
.checks li { padding-inline-start: 1.6rem; position: relative; margin-bottom: .35rem; }
.checks li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--t2); font-weight: 700; }
.price { border-inline-start: 8px solid var(--v2); padding-block: .3rem; padding-inline-start: 1.2rem; }
.parents { display: grid; grid-template-columns: 1fr 9rem; gap: 2rem; align-items: start; }
.parents img { border: 1px solid var(--ink); }

/* ---- Phones: the rail becomes a header, its foot a bar along the bottom ---- */
@media (max-width: 860px) {
  html { font-size: 18px; }
  body { display: block; padding-bottom: 7.5rem; }
  .rail { position: static; height: auto; padding: 1rem 1.2rem .6rem; border-inline-end: 0; border-bottom: 1px solid var(--rail-edge); }
  .mark { margin-bottom: .4rem; }
  .ctx { margin: 0; padding: 0; overflow: visible; }
  .ctx > summary { display: inline-block; cursor: pointer; border: 1px solid var(--ink); padding: .15rem .7rem; font-size: .9rem; margin-bottom: .6rem; }
  .fixed {
    position: fixed; inset-inline: 0; bottom: 0; margin: 0; background: var(--rail-bg); z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .7rem 1.2rem;
  }
  .small, .lang { margin: 0; }
  main { padding: 1.6rem 1.2rem 2rem; }
  h1 { font-size: 1.9rem; }
  .feats, .parents, .hero { grid-template-columns: 1fr; }
  .hero-video { max-width: 14rem; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .cta { grid-template-columns: 80px 1fr; gap: 1rem; }
}

/* ============================================================
   Pages build_site.py renders, and the hand-written ones beside them.
   ============================================================ */

/* ---- The index: the "Math explained" strip under the operations ---- */
.areas.compact { margin-top: .6rem; }
.areas.compact li { grid-template-columns: .7rem 1fr; column-gap: .9rem; padding: .55rem 0; }
.areas.compact li:last-child { border-bottom: 1px solid var(--line); }
.areas.compact li::before { grid-row: auto; }
.areas.compact a { font-size: 1.1rem; }

/* ---- Support: the contact card ---- */
.contact { border-inline-start: 8px solid var(--rail-detail); padding-block: .3rem; padding-inline-start: 1.2rem; }
.contact h3 { margin-top: 0; }

/* ---- The privacy policies (privacy.html, privacy-android.html) ---- */
.policy ul, .links { padding-inline-start: 1.4rem; margin-bottom: 1rem; }
.policy li, .links li { margin-bottom: .35rem; }
.policy .meta { color: var(--ink-2); font-size: .9rem; }
.policy + .policy { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 4px solid var(--rail-detail); }

/* ---- Index: the pricing badge sits above its heading, as on the old home page ---- */
.price-badge { margin: 2.6rem 0 0; color: var(--t2); }
.price-badge + h2 { margin-top: .2rem; }

/* ---- Japanese: break headings at phrase boundaries, not inside a word ---- */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; }

/* ---- The index: the screenshot carousel ----
   Without the script: a row of screenshots you swipe. With it (.is-live): the
   old home page's carousel, one centred, the neighbours faded either side. */
.rolodex { margin-top: 1.4rem; }
.rolodex-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
.slide { flex: 0 0 11rem; scroll-snap-align: center; text-align: center; }
.slide figcaption { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; line-height: 1.3; min-height: 2.6em; }
.slide img { width: 100%; height: auto; border: 1px solid var(--ink); }
.rolodex.is-live { overflow: hidden; }
.rolodex.is-live .rolodex-track {
  display: block; position: relative; overflow: visible; padding: 0;
  height: calc(13rem * 1298 / 600 + 3.6rem);
}
.rolodex.is-live .slide {
  position: absolute; top: 0; left: 50%; width: 13rem; cursor: pointer;
  transform-origin: 50% 40%; transition: transform .5s ease, opacity .5s ease;
}
.rolodex.is-live .slide.is-center { cursor: default; }
.rolodex.is-live .slide:not(.is-center) figcaption { visibility: hidden; }
.rolodex-dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1rem; }
.rolodex-dots button { width: .7rem; height: .7rem; padding: 0; border: 1px solid var(--ink); background: #fff; cursor: pointer; }
.rolodex-dots button[aria-current="true"] { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .rolodex.is-live .slide { transition: none; } }
@media (max-width: 860px) {
  .rolodex.is-live .rolodex-track { height: calc(10.5rem * 1298 / 600 + 3.6rem); }
  .rolodex.is-live .slide { width: 10.5rem; }
}