/*!
 * FLOW — the platform's design tokens. One file, read by every game.
 *
 * 2026-09-16. Jeff, after seeing the four games side by side: "please bring them
 * into alignment." The audit found three palettes and three type systems across
 * four games — WordAGE and Word² identical, Hive a cousin in a cooler grey, and
 * thruWord a different product in cream.
 *
 * WHAT IS SHARED AND WHAT IS NOT
 * ------------------------------
 * Shared: the page, the card, the ink, the rules, the shadow, the radii, the
 * type, and how a button looks.
 * NOT shared: one accent colour per game. Hive stays jade, WordAGE teal, Word²
 * teal-and-clay, thruWord rust. A player should be able to tell at a glance
 * which game they opened — they simply should not feel they have changed
 * websites. Uniform is not the goal; one hand is.
 *
 * WHY THE WARM GREY-GREEN AND NOT THE CREAM
 * -----------------------------------------
 * Two of the four already use it, so it is the least moving and the most
 * tested. thruWord's cream is the warmer of the two and arguably prettier, but
 * it is used by the one game whose front end cannot be rebuilt here — moving
 * three games to match the one that cannot move is the wrong way round.
 *
 * 2.14.22: THE WARM PAPER, AND ONE ACCENT EACH
 * --------------------------------------------
 * Jeff, 2026-09-30, "1-3 yes" to the share proposal's round two: ONE scheme
 * for all five, with a small accent each. The page moves from the grey-green
 * to the warm paper of the share cards and marks (#F5EFE4), so a player's
 * screen and the picture they send match. Every neutral below keeps the
 * contrast its grey-green twin had against the old page (measured, WCAG),
 * except the muted ink, which was 3.6:1 and is now 5.2:1 — it was under the
 * 4.5 line for small text and nobody had said so.
 * The accents, chosen so no two look alike (colour-blind simulation too) and
 * white text on each reads at 4.5:1 or better: thruWord rust #BD5036, Hive
 * #0E7C6B, Word² blue #1F5FA8, WordAGE brown #6B4A2E, OneOff plum #7A4A6E.
 * Word² and WordAGE both used the platform teal until now — the same colour.
 * A game's accent goes on its mark, its name, its main button, its share
 * card, and nowhere a meaning colour belongs: green is right, gold is worth
 * noticing, in every game.
 *
 * HOW THRUWORD GETS THESE
 * -----------------------
 * The other three are hand-written documents and set their own :root to these
 * values. thruWord's stylesheet is a BUILD ARTIFACT and Jeff's decision on
 * 2026-09-16 was that it is never hand-edited. So this file also maps the
 * platform tokens onto thruWord's own --fht-* names, loaded after its bundle's
 * stylesheet. Its source keeps its old values as the fallback they now are, and
 * the next real rebuild is where they should be replaced properly.
 */

:root {
  /* ---- surfaces */
  --flow-page:        #F5EFE4;   /* the page behind everything (2.14.22; was #E7E9E4) */
  --flow-surface:     #FCFBF8;   /* a card, a tile, a button at rest */
  --flow-surface-sunk:#FAF6EE;   /* a well: the inside of a track or a slot */

  /* ---- ink */
  --flow-ink:         #1A1814;   /* body and the words being played */
  --flow-muted:       #6B6356;   /* labels, counts, the furniture (5.2:1 on the page) */
  --flow-faint:       #A69E90;   /* a hint of a thing; never body text */

  /* ---- lines and lift */
  --flow-line:        #E3DACB;   /* every hairline in the platform */
  --flow-line-soft:   #EFE8DC;
  --flow-line-strong: #C6BBA7;   /* a border that is the whole of a shape */
  --flow-page-sunk:   #E7DDCB;   /* below the page: a well, a filled cell */
  --flow-key:         #DFD5C3;   /* a keyboard key at rest */
  --flow-key-down:    #CBBFAA;
  --flow-key-out:     #9C927F;   /* a letter ruled out */
  --flow-shadow:      0 1px 0 rgba(0,0,0,.04), 0 6px 20px rgba(20,30,28,.06);

  /* ---- shape. Three radii, no more. */
  --flow-r-sm:        10px;      /* a chip, an icon button, a nav control */
  --flow-r-md:        12px;      /* a button, a tile, a small card */
  --flow-r-lg:        20px;      /* a sheet */

  /* ---- type. Serif for the WORDS, sans for the furniture. That one rule is
     already doing more than anything else to make these four feel related. */
  --flow-display:     "Fraunces", Georgia, "Times New Roman", serif;
  --flow-sans:        "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- the accent. EVERY GAME OVERRIDES THIS and nothing else.
     The default is the platform teal, for a game that forgets to. */
  --flow-accent:      #0F9E95;
  --flow-accent-deep: #0B7B74;
  --flow-accent-soft: #DCEFEC;

  /* ---- states, shared: these mean the same thing everywhere */
  --flow-gold:        #D4922A;   /* rare, bonus, the thing worth noticing */
  --flow-good:        #3E9E4E;
  --flow-bad:         #C4553B;
}

/* ---------------------------------------------------------------- thruWord
   Its stylesheet is built, not written, so the platform reaches it by mapping
   onto the names its CSS already uses. Everything here is a token swap; not one
   rule of its layout is touched.

   The selectors match its own — .flow-fht-shell and .flow-fht-dialog-host, NOT
   :root. It declares its tokens there, which is more specific than :root for
   everything inside, so a :root mapping loses silently: the keyboard changed
   and the page did not. Found by looking at the screenshot. */
.flow-fht-shell,
.flow-fht-dialog-host,
.flow-fht-root {
  --fht-paper:      var(--flow-page);
  /* DEEPER than the page, which is the relationship thruWord's own scheme had
     and the 2.10.0 map inverted: --flow-surface-sunk is LIGHTER than
     --flow-page, so every filled cell, well and track on the board came out
     paler than the paper behind it and the board lost its edges. Jeff,
     2026-09-18: "the contact on the board got too light, darken the squares."
     There is no platform token for a surface below the page, so this is one,
     named here until something else needs it. */
  --fht-paper-deep: var(--flow-page-sunk);
  --fht-ink:        var(--flow-ink);
  --fht-ink-soft:   var(--flow-muted);
  --fht-ink-faint:  var(--flow-faint);
  /* --flow-line is drawn for a hairline between rows on a white card. Every
     empty cell on thruWord's board is nothing BUT its border, so it gets the
     platform's stronger rule instead. */
  --fht-rule:       var(--flow-line-strong);
  --fht-accent:     var(--flow-accent);
  --fht-success:    var(--flow-good);
  --fht-error:      var(--flow-bad);
  --fht-warn:       var(--flow-gold);
  /* the only blue in the platform was thruWord's focus ring, and it was the
     browser's default rather than a decision */
  --fht-focus:      var(--flow-accent-deep);
  --fht-radius-sm:  6px;
  --fht-radius-md:  var(--flow-r-sm);
  --fht-radius-lg:  var(--flow-r-md);
  /* 2.14.12: the type, too. thruWord was the one game still in Georgia and
     the system sans while the other four set the words in the platform serif. */
  --fht-font-display: var(--flow-display);
  --fht-font-body:    var(--flow-sans);
}

/* thruWord's own accent: rust. Set here rather than above because the block
   above is the MAP, and this is the one line that is a choice. */
/* and on the page around it, where the feedback sheet opens (it is appended to the body) */
body:has(.flow-fht-root) { --flow-accent: #BD5036; --flow-accent-deep: #9A3F2A; --flow-accent-soft: #F0D9D2; }
.flow-fht-root, .flow-fht-root * { --flow-accent: #BD5036; --flow-accent-deep: #9A3F2A; --flow-accent-soft: #F0D9D2; }   /* 2.14.22: a shade deeper, white text 4.4 -> 4.8:1 (was #C8553D) */

/* ---- thruWord's keyboard.
   Its keys were the one grey-blue surface in the whole platform (#d3d6da,
   Wordle's), so 2.10.0 recoloured them. It did so with a blanket
   `[class*="-key"] { ... !important }`, and that selector is both wider and
   more specific than the game's own `.flow-fht-key-green` — so it swallowed
   the three state colours as well as the resting one. Jeff, 2026-09-18: "the
   letters are not grey or yellow/orange when guessed but not in right position
   or not in the word."

   TWO RULES CAME OUT OF THAT, and they are why this block looks the way it
   does. A theme colours a RESTING surface and never a STATE. And a selector
   written to catch a class you have not read will catch the ones you did not
   mean — `.flow-fht-key` is named here, nothing is matched by substring.

   A key is a solid key again, in the platform's grey rather than Wordle's. */
.flow-fht-root .flow-fht-key {
  background: var(--flow-key);
  border: 0;
  color: var(--flow-ink);
  border-radius: 6px;
}
.flow-fht-root .flow-fht-key:hover:not(:disabled) { background: var(--flow-key-down); }
.flow-fht-root .flow-fht-key:active:not(:disabled) { background: var(--flow-key-down); }

/* The three things a key can have learned are NOT set here, and that is the
   point. thruWord marks them `!important` in its own stylesheet, and two of
   the three read a token — `--fht-success` and `--fht-warn` — which the map
   above already points at the platform's green and gold. So they arrive in the
   platform's colours by the route the platform already owns, and nothing here
   has to shout to make it happen.

   The exception is the ruled-out key, which thruWord hardcodes to a cream-era
   warm grey. It is the one key colour the token map cannot reach, so it is the
   one place this file answers `!important` with `!important` — deliberately,
   once, and named rather than matched by substring. */
.flow-fht-root .flow-fht-key-absent { background: var(--flow-key-out) !important; }

/* The board's own cells are NOT restated here, and that is on purpose. An
   empty cell is nothing but `--fht-rule` and a filled one is nothing but
   `--fht-paper-deep`, so the two tokens above are the whole fix — and pinning
   the cells as well would make those tokens decorative: a mutation run on
   2026-09-19 put `--fht-rule` back to the platform hairline and every check
   still passed, because the cells were being held up by a second mechanism.
   One mechanism, and the check has something to hold on to. */

/* The build line at the foot, the same in every game: centred, small,
   "<Game> <build> · a FLOW Word Game" (2.14.31; "a FLOW game" from 2.14.12, when it stopped being a right-aligned corner
   stamp here, a paragraph of design notes in Hive and absent in two games). */
.flow-stamp{
  text-align: center;
  font: 400 11px/1.4 var(--flow-sans);
  color: var(--flow-faint);
  padding: 10px 8px 0;
}

/* THE BOTTOM ROW (2.14.17). Jeff, 2026-09-29: "next to the feedback button should
   be a share button. put the share to the left of the feedback." Share is drawn
   exactly as the platform's Feedback button (assets/shared/flow-feedback-v1.js)
   and the two sit side by side, the same width, in every game. */
.flow-share-btn{
  border: 1px solid var(--flow-line, #D6D9D1);
  background: var(--flow-surface, #FCFBF8);
  color: var(--flow-ink, #22262C);
  font: 600 14px/1 var(--flow-sans, system-ui);
  padding: 12px;
  border-radius: var(--flow-r-md, 12px);
  cursor: pointer;
}
.flow-share-btn:active{ background: var(--flow-surface-sunk, #E7E9E2); }
.flow-share-btn.done{ border-color: var(--flow-good, #3E9E4E); color: var(--flow-good, #3E9E4E); }
.fbrow, .flow-fht-feedback-row{ gap: 8px; }
.fbrow > .flow-share-btn, .fbrow > .flow-fb-btn,
.flow-fht-feedback-row > .flow-share-btn, .flow-fht-feedback-row > .flow-fb-btn{ min-width: 110px; }