/*
 * HouseChalk — the row icon.
 *
 * Load after states.css. This implements a decision that was already made and
 * then lost: `_choices.html` in the v6 set (now
 * docs/_archive/2026-08-03/builder-mockups-v6/) put three treatments side by
 * side across three situations and picked one. The page was archived with its
 * deck and the verdict never reached a shared sheet, so every page that wanted
 * a state background invented its own box. Measured across this deck before
 * this file existed: SIX different tiles — 18/999, 40/12, 40/999, 42/14,
 * 46/16, 56/12 — and eight glyph sizes.
 *
 * THE VERDICT, IN ITS OWN WORDS: "bare by default; a tile only where the
 * color means something."
 *
 *   a plain list      tile on every row is wrong — "a column of gray squares
 *                     down the left edge — every row gets the same weight
 *                     whether it needs it or not"
 *   carrying state    bare is wrong — color alone at 17px is "doing the work
 *                     a background would do more plainly"
 *   beside money      tile is wrong — "the tile competes with the figure: two
 *                     heavy things, one at each end"
 *
 * AND THE RULE THAT MAKES IT WORK, which is the part worth keeping verbatim:
 *
 *   THE FOOTPRINT IS CONSTANT; ONLY THE BACKGROUND COMES AND GOES. A bare 17px
 *   glyph next to a 32px tile starts the text column 15px further left, so in a
 *   list where some rows carry state and some do not, the names shift row to
 *   row. The box is always 32px and always centers its glyph — the tile is a
 *   background that appears, not a box that appears.
 *
 * WHERE IT SITS VERTICALLY, which is the other half and was flagged as
 * outstanding on that same page: "Whichever icon wins, it must mark the row's
 * FIRST LINE. .irow is align-items:center, so a bare glyph beside a three-line
 * block sits opposite nothing. It needs fixing in the homeowner set too."
 *
 * So there are two cases and the CONTENT decides, never taste —
 * `_row-primitive.html` settles it: a name with a short qualifier is one
 * object and the icon centers on the whole of it; prose has a first line, and
 * the icon marks that line. hc.css already draws this distinction correctly at
 * .row (center) and .fact / .callout (flex-start). What was missing is that a
 * 32px box top-aligned against a 22px line sits five pixels low, so
 * `flex-start` alone does not mark the first line — it marks the top of the
 * box. .ic-first is that correction, and it is arithmetic rather than an eye:
 * half the difference between one line and the box.
 */

/* The box. Always this size, whether or not a background appears. */
.ic {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--on-surface-variant);
  background: transparent;
}
.ic > svg { width: 16px; height: 16px; display: block; }

/* The background, and the two things it is allowed to mean. Nothing else gets
   a tile: if the color is not carrying a state, the glyph is bare. */
.ic.done { background: var(--success-surface); color: var(--success-deep); }
/* A 32px BOX IS A MARK, NOT A PANEL, which is why a colored ground survived
   here at all. There is no --indigo-surface any more, so the ink carries the
   clock on the same neutral well every other drawn mark uses.

   IT IS `waiting`, NOT `warn`, AND THE COMMENT ABOVE ALREADY SAID SO — "the ink
   carries the CLOCK". `Q222`. `warn` is the word the design package struck from
   `Option` for the reason it gives there: "an amber option said 'this one costs
   more' in a color the reader had to learn." A ground here means a STATE, and
   waiting is a state; warning is a judgment about the thing, which is what the
   name was smuggling in. Zero instances on this sheet ever drew it, and the
   app's one real call site draws `clock3` on a row whose delivery has not
   arrived — a clock, in both places, under a name that said something else.

   Indigo rather than amber, and the swap does not cost contrast: on
   --surface-container the glyph goes 4.82:1 to 6.70:1 in light and 8.60:1 to
   8.42:1 in dark, against `done`'s 6.11 and 8.08 for scale. */
.ic.waiting { background: var(--surface-container); color: var(--indigo-deep); }
/* A state glyph is a shade smaller so it does not crowd its own ground. */
.ic.done > svg, .ic.waiting > svg { width: 16px; height: 16px; }

/* Beside prose. The row is already flex-start; this lifts the box so its
   center lands on the first line's center instead of on the top of the box.
   1lh is the row's own line-height, so this stays correct if the type moves. */
.ic-first { align-self: flex-start; margin-top: calc((1lh - 32px) / 2); }

/* The callout is the commonest prose row in the deck — 30 of the 47 icons that
   measured off-center were in one. hc.css sets its flex-start; this puts the
   glyph on the sentence rather than above it.
   
   THE SIZE IS SET HERE, NOT LEFT TO THE MARKUP. Measured across the deck, the
   glyph in a callout was written at 13, 14, 15, 16, 18 and 19px in different
   files — nobody chose those, they accumulated.

   IT IS 16, AND THIS PARAGRAPH SAID 17 WHILE EVERY DECLARATION UNDER IT SAID
   16. `_choices.html` settled on 17 for a bare glyph and the design package
   still draws that; 16 is the rung, and snapping a deck measurement onto the
   ladder is the documented way one enters the library — the same rule that
   snapped the toggle's 46x28. The prose is corrected rather than the number,
   because the number is the one three declarations already agree on. */
body.hc-air .callout > svg {
  width: 16px; height: 16px;
  flex: none;
  align-self: flex-start;
  margin-top: calc((1lh - 16px) / 2);
}
body.hc-air .callout > .ic {
  align-self: flex-start;
  margin-top: calc((1lh - 32px) / 2);
}

/* ==========================================================================
   THE LARGER TILE, AND WHO GETS TO KEEP THEIR OWN SIZE
   ==========================================================================
   Not every icon in a box is a row icon. Three sizes were in the deck above
   32px and only one of them was a mistake:

     .keep .th   56px   a THUMBNAIL. It holds a photograph, not a glyph, and
                        56px is what a photograph needs. Left alone.
     .door       46px   a tappable door — "From a photo you saved"
     .pick       40px   a tappable door — "Your jobs" / "Your house"
     (inline)    42px   a tappable door, written inline in 04-onboarding

   The last three do the same job at three sizes because three pages solved it
   separately. They are one thing: 40px, which is the size the front door
   already used and the only one of the three that is on the deck's own ladder
   (34 · 40 · 46 · 52 · 60 in ~0.3 radius steps — see logo.css).

   ALIGNMENT IS DECIDED BY THE CONTENT, NEVER BY THE SIZE. This is the rule
   `_row-primitive.html` settled and it is worth restating because it is the
   thing that keeps getting lost: a name with a SHORT QUALIFIER is one object
   and the tile centers on the whole of it; a name with a SENTENCE under it has
   a first line, and the tile marks that line. Both shapes are below, and which
   one a page gets is a fact about its copy. */

/* Which shape each door is, decided by its own copy:
     .pick  "Your jobs" / "Dave Marsh Builders · four live"    qualifier
     .keep  "The green cabinets…" / "Saved by Nora · 2 April"  qualifier
     .door  "From a photo you saved" / "Pick colors straight
            out of a picture already on this room's board."    a sentence   */
body.hc-air .pick { align-items: center; }
body.hc-air .keep { align-items: center; }

/* Doors whose second line is a sentence: mark the first line. The tile is
   taller than a line, so flex-start alone hangs it low — by 14px on .door and
   8px on .pick before this. */
body.hc-air .door > .t { align-self: flex-start; margin-top: calc((1lh - 40px) / 2); }

/* One size for the doors, and one owner for it. forms.css used to declare this
   for .pick and 42-colors-and-the-space for .door, at 40px and 46px. */
body.hc-air .door > .t,
body.hc-air .pick > .g {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: none;
}
body.hc-air .door > .t > svg,
body.hc-air .pick > .g > svg { width: 24px; height: 24px; }

/* ==========================================================================
   THE BARE GLYPH, WHICH IS THE DEFAULT AND HAD NO CLASS
   ==========================================================================
   `_choices.html`'s verdict is "bare by default; a tile only where the color
   means something", and .ic above is the tile half. This is the bare half, and
   it had no home at all — so every bare glyph beside a paragraph was written
   as an anonymous <div style="display:flex"> with an inline-sized <svg> and a
   hand-tuned margin-top.

   The card that made this obvious carries three glyph sizes (13, 14, 16) and
   two different hand-nudges (1px and 2px) inside one card. Nobody chose any of
   them; they were each eyeballed once and never compared, which is exactly
   what a primitive is for.

   17px is `_choices.html`'s bare-glyph size. The offset is computed from the
   row's own line-height rather than nudged, so it is right at any type size
   and stays right if the type moves.

   `.gl` USED TO BE HERE AND HAS BEEN REMOVED. It declared exactly what
   `body.hc-air .callout > svg` below already declares — the same five
   properties, byte for byte — and every one of its 23 uses was a direct child
   of a callout, so the class changed nothing anywhere it appeared. The other 20
   callout glyphs never carried it and were identical. A class that can be
   forgotten with no consequence is not a component; the element selector cannot
   be forgotten, so it is the one that stayed. */
/* Beside an eyebrow — a .micro-label at 11px — the glyph matches the label
   rather than the body ramp, and the row centers because an eyebrow is one
   line by definition. */
.gl-eyebrow { flex: none; width: 12px; height: 12px; align-self: center; }

/* ==========================================================================
   A MARKER IS NOT A LABEL, AND IT IS ALWAYS CENTERED
   ==========================================================================
   The rule above — prose has a first line, so the icon marks it — is for a
   glyph that LABELS a row. A selection marker is the opposite case and
   `_choices.html` states it outright:

     CENTERED. The check and the swatch are the row's marker, not a mark on its
     first line — they belong to the whole option, so they sit at its middle
     however many lines the label runs to.

   This file got that backwards on the first pass and top-aligned three of
   them, which is what "the icon should be vertically centered" was about. The
   difference is what the mark belongs to: a calendar glyph labels the sentence
   next to it, so it sits on the sentence's first line; a check belongs to the
   whole option, so it sits at the option's middle. Line count changes the
   first and never the second.

   ONE FOOTPRINT, WHATEVER THE GROUND. 19px, from `_choices.html`, and it does
   not change when the ground appears — same argument as .ic: "the tile is a
   background that appears, not a box that appears". The three sites here were
   17px, 18px and 18px, each with its own hand-nudge to compensate for the
   flex-start that should not have been there. */

.markrow { align-items: center; }

.mark {
  flex: none; align-self: center;
  width: 16px; height: 16px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--surface-container);
}
.mark > svg { width: 12px; height: 12px; }

/* A marker whose glyph carries its own ring — a check-in-circle — needs no
   ground. Same 19px footprint, so it lines up with the ones that have one. */
svg.mark-glyph { flex: none; align-self: center; width: 16px; height: 16px; }

/* SIZED BY THE TYPE IT MARKS, not by preference. `_choices.html` set 19px
   against a --text-sm label, which is a marker about 1.27x its title. That is
   the number worth keeping, because it is what makes a marker read as a
   control rather than as a bullet.
   
   Measured here: .pickrow is a 16px name with a 19px marker — the size
   `SelectionMarker`'s md step gives it, set in hc.css beside the row itself.
   The title figure this comment carried before (15px) described a `.t-sub` the
   row no longer uses. .opt-row in
   07-one-question-at-a-time is a 19px title with a 19px marker — 1.0, where
   the marker is exactly the size of the word beside it and reads as a bullet.
   One step up holds the ratio for the larger type. */
.mark-lg { width: 24px; height: 24px; }
.mark-lg > svg { width: 16px; height: 16px; }