/*
 * letx.css -- the "let X = ..." field and the letters that spend it.
 *
 * Lifted out of layouts.php so the admin's wording page can preview the real
 * thing. It had been showing a hand-copied restatement, pinned to px because
 * the original is in em, and a copy of a style is a style that has already
 * started drifting -- this page has done exactly that three times over with
 * icon filenames, boost captions and the un-rotate glyph.
 *
 * TWO SCOPES, ONE SET OF RULES. The card puts these inside .slot; the admin
 * preview has no slots and marks its panel .letx-scope instead. Listing both
 * selectors keeps the card's markup untouched -- there is no reason to add a
 * class to every slot on every card to satisfy a preview.
 *
 * The colours come from --letx-bg and --letx-glow, set per layout on the card
 * element, so a layout that has chosen its own keeps it. The fallbacks here are
 * the defaults the editor starts from.
 */
/* WHERE X IS DEFINED, AND EVERYWHERE IT IS SPENT.
   The definition is a field, like a boost line — it is a clause, and a clause
   takes a background. Each loose X afterwards is a single letter, and a
   background on one letter is a blob; what a letter can carry is a HALO, in
   the same colour, which says "this is the thing that was defined" without
   changing the word's shape or its place on the line. */
/* Per word, for the reason set out above the boost band. */
.slot .letx-def, .letx-scope .letx-def{padding:0}
.slot .letx-seg, .letx-scope .letx-seg{background:var(--letx-bg,rgba(255,213,74,.42));padding:.03em 0}
.slot .letx-seg.band-first, .letx-scope .letx-seg.band-first{border-top-left-radius:.3em;border-bottom-left-radius:.3em;
  padding-left:.26em}
.slot .letx-seg.band-last, .letx-scope .letx-seg.band-last{border-top-right-radius:.3em;border-bottom-right-radius:.3em;
  padding-right:.26em}
/* A CHIP, NOT A HALO.
   The halo was three stacked glows around a white letter that was ALSO
   carrying the rules box's black rim, and the two fought: a bright edge and a
   dark edge on the same glyph is a smudge, and the letter it was meant to
   pick out came out less readable than the words either side of it.
   A single letter cannot carry a glow — there is not enough of it to glow —
   but it can sit on something, and the card already speaks that language:
   C2 and D1 are dark ink on a solid chip and nobody has to squint at those.
   So the variable gets the same, in the field's own colour. Solid, because
   the point is contrast; dark ink, because the colour is a light one; and no
   text shadow, because the chip is the contrast and a rim on top of it is the
   smudge all over again. */
/* SMALLER, AND ONLY AS BIG AS THE LETTER.
   The chip is right — dark ink on a solid ground, the same language as C2 and
   D1 — but it was padded .18em either side of a single character, so a chip
   meant to mark one letter came out wider than the letter and read as a blob of
   colour with an X in it. Beside "+" on a counter it dominated the whole token.
   A chip marks; it does not announce. Tighter on both axes, a shade smaller
   than the running text so it sits IN the line rather than on top of it, and
   the ground slightly softened — at .95 the gold was brighter than the white
   type around it, which is backwards for something that is not the sentence. */
.slot .letx-var, .letx-scope .letx-var{font-weight:800;color:#2a1c00;
  background:var(--letx-glow,rgba(255,213,74,.88));
  border-radius:.18em;padding:0 .1em;font-size:.94em;
  line-height:1;text-shadow:none}