/*
 * HouseChalk — layout rules that have to survive a width the deck cannot show.
 *
 * Load after states.css. hc.css stays unmodified; this is where a component's
 * responsive behavior lives when the deck's own rendering cannot exercise it.
 *
 * THE PROBLEM THIS FILE EXISTS FOR. Every frame in this deck renders inside a
 * fixed 390px .phone. That is the right way to draw a phone screen and it means
 * a whole class of bug is invisible here: a grid that is hardcoded to a column
 * count looks perfect at 390px forever. The app's shell is responsive, and this
 * deck is now the implementation reference, so a rule that is only correct at
 * one width gets built at every width.
 *
 * VIEWPORT MEDIA QUERIES ARE THE WRONG TOOL HERE, and that is the trap. A
 * `@media (min-width: 840px)` matches the PAGE this deck is drawn on, not the
 * phone the component sits in — so it would give a 390px phone frame its
 * desktop layout. Anything in this file has to be relative to the component's
 * own container.
 *
 * ---- the room grid ------------------------------------------------------
 *
 * hc.css's `.opts` is `grid-template-columns: 1fr 1fr`, with no rule at any width.
 * Measured, that never changes the column count — it only inflates the cards:
 *
 *     346px container   2 columns @ 165px      (the phone: correct)
 *     800px             2 columns @ 372px
 *     1400px            2 columns @ 692px      (a room card wider than a phone)
 *
 * A 692px room card is not a bigger version of the design, it is a different
 * one: the illustration dominates and the name floats in whitespace.
 *
 * `minmax(min(240px, 47%), 1fr)` reads as: a room wants 240px, but never more
 * than about half the container — which is what pins the phone to two. The
 * percentage is of the grid's own width, so it follows the container and not
 * the window. Measured:
 *
 *     346px   2 @ 165   identical to today, so the deck does not move
 *     560px   2 @ 272
 *     800px   3 @ 256
 *     1040px  4 @ 248
 *     1280px  5 @ 243
 *
 * which is the four-tier ladder CLAUDE.md names, without naming it.
 *
 * AND TWO-UP ON A PHONE IS A DELIBERATE COMPROMISE, not the ideal. A room card
 * wants ~240px and gets 165. It stays two-up because the rooms grid is the
 * BINDER'S CONTENTS PAGE: seeing the whole house at once is the reassurance
 * 09-first-run is built on — "nine rooms are already there, and not one of them
 * has anything settled". One-up would show a room and a half per screen and
 * turn the house into a queue.
 */

body.hc-air .rooms {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 47%), 1fr));
}

/* ---- the coach opening a thread ----------------------------------------
 *
 * hc.css is explicit about what .c-coach is for: "Coach voice leaning in.
 * Used when the coach OPENS A THREAD rather than reporting one." That is the
 * right idiom and the deck picks it correctly — the three coach voices are
 * .coach-subtitle when it reports, .coach-bubble when it is in a conversation,
 * and .callout.c-coach when it asks you something.
 *
 * THE PROBLEM IS THE BOX, NOT THE CHOICE. .callout is `display: flex` with the
 * glyph as the first column, which is exactly right for what it was built for:
 * one short line with an information mark beside it. When the coach opens a
 * thread it brings a heading, a paragraph and two actions — and every one of
 * them then hangs off the glyph's column. Measured before this rule:
 *
 *     card padding    13px
 *     glyph at        13px
 *     heading at      39px
 *     THE BUTTONS AT  38px
 *
 * A voice marker was setting the card's left edge, including for its actions.
 * Actions belong to the card, not to the glyph, and a 26px indent on them
 * reads as an accident rather than a decision.
 *
 * The fix is to stop making it a row. The glyph goes on its own line — which
 * is `_row-primitive`'s "classification goes on top" applied to a voice rather
 * than to a label — and the heading, the paragraph and the actions all take
 * the card's own left edge. No markup changes: the container becomes a block
 * and the glyph becomes a block, and the .gl offsets that only mean something
 * in a flex row are cleared.
 *
 * SCOPED WITH :has(.t), AND THAT MATTERS. Making every .c-coach a block broke
 * the one-line case on the same page — "Working out what big means · 9 already
 * answered" is a genuine row with the count pushed right, which is exactly what
 * .callout was built for, and it collapsed into two lines. The heading is what
 * separates a card from a line: a .c-coach with a .t is opening a thread and
 * gets the block; one without is a line and stays a row. Caught by rendering
 * all three rather than only the one that was asked about.
 */
body.hc-air .callout.c-coach:has(.t) { display: block; }
body.hc-air .callout.c-coach:has(.t) > svg {
  display: block;
  width: 16px; height: 16px;
  margin: 0 0 8px;
  align-self: auto;
}
/* The action row, so nobody hand-indents it again. 02 carried
   `padding-left:25px` — a magic number faking alignment with the glyph's
   column, and it did not even match the 26px the column actually was. */
body.hc-air .callout.c-coach .acts {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
}

/* ---- the callout that is a line, not a card -----------------------------
 *
 * .callout is a flex row with a glyph in the first column, which is right for
 * one short sentence with a mark beside it. A few of them are that PLUS a
 * count pushed to the far edge — "Working out what big means · 9 already
 * answered" — and that arrangement had no class, so 02 built it by hand: an
 * inline `justify-content: space-between` on the container AND a nested flex
 * row inside it to keep the glyph with its label, because the container's own
 * gap was being spent on the space-between.
 *
 * .line makes the container a three-part row instead — glyph, label, count —
 * and pushes the count with margin-left rather than distributing the whole
 * row. That is what removes the nested div: the glyph and the label are
 * siblings again, so the container's own gap does the work it was built for.
 *
 * .ct IS THE DECK'S TRAILING SLOT, and it is the right name for the count.
 * VOCABULARY-MEASURED.md records it as the trailing slot of a row — a chip, a figure, a
 * status — used 148 times inside .row and .irow. A callout with a trailing
 * count is the same shape one component over, so it takes the same slot rather
 * than inventing a name.
 *
 * It is the sibling of the :has(.t) rule above and the two are exhaustive: a
 * .c-coach with a heading is a card and becomes a block, a .callout with a
 * trailing count is a line and stays a row. Anything else is the default.
 */
body.hc-air .callout.line { align-items: center; }
body.hc-air .callout.line > svg { align-self: center; margin-top: 0; }
body.hc-air .callout.line > p { font-size: var(--text-2xs); }
body.hc-air .callout.line > .ct {
  margin-left: auto; flex: none;
  font-size: var(--text-2xs); line-height: 1.3;
}

/* ---- frames that outgrow their own canvas -------------------------------
 *
 * hc.css's `.scroll` is `overflow: hidden` and its `.canvas` is
 * the same call for the desktop frame. Both are the right default for a deck
 * read as fixed comps: a frame that is a screenshot should show exactly what
 * fits, which is the whole reason the fold measurements in 19-now-the-week
 * exist at all. The trap is that `overflow: hidden` does not just stop a
 * scrollbar from being drawn — it deletes the content below the fold from
 * the rendered page entirely, with nothing to tell a reader it is there.
 * Recorded once already, above: a desk frame that outgrows the 860px canvas
 * throws away "a third of each frame drawn", silently, and the same
 * mechanism clips a phone frame at .scroll's fixed height.
 *
 * 19-now-the-week's own frames 13 and 14 are what surfaced this outside a
 * comment: a reviewer opening the page saw a closed card and a fold, no
 * option content, no signal anything was being held back. A comp cannot warn
 * about what it never rendered.
 *
 * The fix keeps the fixed size — a phone is still 390x844, a canvas is still
 * 860 tall, and neither reflows to fit its content, which stays true to "the
 * deck is a set of comps at a real device size". It only lets a reader who
 * needs the rest of a tall frame reach it, the way a real device's own
 * scroll would. */
body.hc-air .scroll {
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
body.hc-air .canvas { overflow-y: auto; overflow-x: hidden; }