/* The parts of an /explain lesson that site.css does not draw: the working of
 * a worked example, the drawings (column sums, ladders, factor trees) and the
 * table of primes. Everything else on these pages (the rail, the rule, the
 * steps, the examples' frame, the FAQ, the call to action) is site.css.
 *
 * Colour comes from the page's area, `body.area-N` in site.css: --v is the
 * area's colour for fills and rules, --t its text version (>= 7:1 on white,
 * so white text on it is >= 7:1 too). Square corners, no shadows. The
 * drawings are pinned `dir="ltr"` in the markup, because they are column work
 * derived from the written numeral; everything around them uses logical
 * sides so an Arabic page mirrors. */

/* Worked examples ---------------------------------------------------------- */

/* The working is arithmetic read left to right even on an Arabic page.
 * `pre-wrap` keeps runs of spaces, which a hand-typed column is made of, and
 * still wraps a long line on a phone. */
.ex .work,
.ex .setup {
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
  unicode-bidi: isolate;
}

.ex .work { line-height: 1.45; margin-bottom: .5rem; }
.ex .setup { color: var(--ink-2); margin-bottom: .4rem; }
.ex .verdict { margin-bottom: 0; }

/* The drawings: numbers stay selectable text that scales with the reader's
 * font size rather than becoming a picture of numbers. */
.column-work,
.ladder,
.factor-tree {
  margin: .4rem 0 .7rem;
  overflow-x: auto;
}

/* Column working: long multiplication and long division -------------------
 *
 * One table cell per digit, so the columns are the place values and stay
 * lined up however the font renders. The point never gets a cell of its own,
 * which would shove every digit to its left out of its column: it hangs off
 * the end edge of the digit before it, in the gap, as the app draws it. */

.column-work table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
}

.column-work td {
  position: relative;
  width: 1.15em;
  padding: .1rem .06em;
  text-align: center;
  line-height: 1.3;
}

/* The ×, the + and the divisor, before the digits. */
.column-work td.lead {
  width: auto;
  min-width: 1.15em;
  padding-inline-end: .3em;
  text-align: end;
  color: var(--ink-2);
}

.column-point {
  position: absolute;
  inset-inline-end: -.16em;
  bottom: .05rem;
  font-weight: 700;
  color: var(--t);
}

/* The line drawn before a sum: under the factors, and under the last partial
 * product. It spans the lead column too, so the × sits above the line. */
.column-work tr.ruled td { border-top: 2px solid var(--ink); }

/* The answer, and the quotient over the bar: what the working was for. */
.column-work tr.answer td:not(.lead),
.column-work tr.quotient td:not(.lead) { color: var(--t); }

/* The 0 a partial product starts with because it is a row of tens: a
 * placeholder, not a digit anybody multiplied. */
.column-work td.placeholder { color: var(--ink-2); opacity: .5; }

/* A 0 written in front of the answer so the point has somewhere to go
 * (0.4 × 0.3 = 0.12). Orange, as in the app, darkened to text strength. */
.column-work td.added { color: var(--rail-detail-text) !important; }

/* Column addition and subtraction: the carries, and the new values of the
 * digits an exchange changed, written small above their columns. Orange, as
 * the app draws its carries. */
.column-work td.carry,
.column-work td.exchange {
  font-size: .6em;
  line-height: 1;
  vertical-align: bottom;
  color: var(--rail-detail-text);
}

/* A digit that gave up a ten, crossed out but still readable. */
.column-subtract td.lent {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--ink-2);
}

/* The bus stop: a bar over the dividend, closed beside the divisor. */
.column-divide tr.dividend td:not(.lead) { border-top: 2px solid var(--ink); }
.column-divide tr.dividend td:nth-child(2) { border-inline-start: 2px solid var(--ink); }
.column-divide tr.dividend td.lead { color: var(--ink); }

/* What is taken away at each step, underlined to the width of the number. */
.column-divide td.under { border-bottom: 2px solid var(--ink); }
.column-minus { color: var(--ink-2); }

/* The ladder ---------------------------------------------------------------- */

.ladder table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 700;
}

.ladder td {
  padding: .15rem .5rem;
  text-align: end;
  line-height: 1.35;
}

/* The rule the child draws down the page: one border on the divisor column,
 * so it is exactly as tall as the ladder and needs no measuring. */
.ladder-divisor {
  border-inline-start: 2px solid var(--ink);
  text-align: start !important;
  min-width: 2.5rem;
  color: var(--t);
}

/* The last line is what is left when the dividing stops. It has no divisor,
 * so the rule stops with the numbers rather than hanging past them. */
.ladder-divisor-last { border-inline-start-color: transparent; }

/* The factor tree ------------------------------------------------------------ */

.factor-tree svg { max-width: 100%; height: auto; display: block; }

.factor-tree line {
  stroke: var(--ink);
  stroke-width: 2;
}

.factor-tree text {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
}

/* Hollow while it still splits, solid once it is prime: the ring a child
 * draws round a leaf that will not break down any further. */
.tree-composite circle { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.tree-composite text { fill: var(--ink); }
.tree-prime circle { fill: var(--t); }
.tree-prime text { fill: #fff; }

/* Figures: fraction bars, shapes and angles ------------------------------
 *
 * Hand-drawn SVG in the content files (see `figure_problems` in
 * build_explain.py). They name their parts by class and never by colour, so
 * a fraction bar on the fractions pages and a triangle on the shapes pages
 * each take their area's colour, the way a prime in a factor tree does.
 *   fill   a shaded part: the area's colour, outlined
 *   empty  an unshaded part: white, outlined
 *   mark   a line with no fill: an edge, an angle arc, a tick on equal sides
 *   label  text, in ink
 *   accent text or a line in the area's colour */

.figure {
  margin: .4rem 0 .7rem;
  overflow-x: auto;
}

.figure svg { max-width: 100%; height: auto; display: block; }
.figure .fill { fill: var(--v); stroke: var(--ink); stroke-width: 2; }
.figure .empty { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.figure .mark { fill: none; stroke: var(--ink); stroke-width: 2; }
.figure .label { fill: var(--ink); font-family: var(--font); font-size: 18px; font-weight: 700; }
.figure .accent { fill: none; stroke: var(--t); stroke-width: 3; }
.figure text.accent { fill: var(--t); stroke: none; font-family: var(--font); font-size: 18px; font-weight: 700; }

/* The table of primes --------------------------------------------------------
 *
 * A hundred square: the primes filled in the area's colour, so a prime looks
 * the same here as at the end of a branch of the tree, and 1 left bare as
 * neither. Ten columns have to fit a phone, so the cells shrink with the
 * viewport rather than the table scrolling sideways. */

.prime-table table {
  border-collapse: collapse;
  width: 100%;
  max-width: 32rem;
  font-variant-numeric: tabular-nums;
  font-size: clamp(.75rem, 3.2vw, .95rem);
  font-weight: 700;
}

.prime-table caption {
  caption-side: bottom;
  text-align: start;
  padding-top: .4rem;
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink-2);
}

.prime-table td {
  border: 1px solid var(--line);
  text-align: center;
  padding: .4rem 0;
}

.prime-table-prime { background: var(--t); color: #fff; }
.prime-table { margin-bottom: .8rem; }
/* Grey, as the caption says: neither prime nor composite. 4.5:1 on white. */
.prime-table-one { color: #767676; font-weight: 400; }
.prime-table-list { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* The other sections, after a section page's own list: smaller than the
 * Explain home's entries, which are the page. */
.areas.more { margin-top: 0; }
.areas.more a { font-size: 1.15rem; }

/* A drawing is pinned left to right inside, but on a right-to-left page it
 * still starts where the text starts, on the right. Physical on purpose: the
 * box it sits in is `dir="ltr"`, so a logical margin would point the wrong way. */
[dir="rtl"] .column-work > table,
[dir="rtl"] .ladder > table,
[dir="rtl"] .factor-tree > svg,
[dir="rtl"] .figure > svg,
[dir="rtl"] .prime-table > table { margin-left: auto; }