/*
 * HouseChalk — the form primitives.
 *
 * Load AFTER hc.css and role-colors.css. states.css does not depend on this
 * and this does not depend on states.css; either order between those two is
 * fine.
 *
 * WHY THIS FILE EXISTS. hc.css has 1242 lines and two things a person can type
 * into: .textarea, which is a 190px block for dictated prose, and
 * .composer .entry, which is the always-available chat bar. Neither is a form
 * field, and the front door, setup, the send composer and the change-order
 * author all need one. Rather than have four pages each invent it — which is
 * exactly how the set ended up with sixteen distinct body sizes before the ramp
 * existed — it is declared once here.
 *
 * IT IS SMALL ON PURPOSE. There is no select, stepper or date picker. Native
 * controls own their behavior and semantics; HouseChalk may paint their passive
 * content, as Account's radio cards do, but it does not replace keyboard,
 * selection or announcement behavior. What is here is what the deck actually
 * needs: a labeled input, a code entry, a choice row, and a toggle.
 *
 * THE EDGE RULE, AND IT IS NOT THE CARD RULE. hc.css is explicit that inputs
 * are an exclusion from the hairline-versus-tint rule: an input's edge is its
 * affordance and carries --control-outline rather than the decorative card
 * hairline. So a field takes a REAL 1px border rather than the inset ring a
 * white card takes.
 * The box moving in by a pixel is the correct behavior here — it is what makes
 * the field feel like a slot.
 *
 * AND NO FLOATING LABELS. A label that climbs into the border on focus is a
 * moving target for anyone reading slowly, and it leaves the field
 * unlabeled at rest for anyone using a screen reader badly. The label sits
 * above and stays there.
 */

/* ---- A field -------------------------------------------------------------- */
.field + .field { margin-top: 16px; }
.field .lb {
  display: block; margin-bottom: 8px;
  font-size: var(--text-2xs); font-weight: 600; color: var(--on-surface-dense); line-height: 1.3;
}
/* NOT .micro-label. An eyebrow is an accent-colored section marker and it
   leads a block of content; a form label names one control and must not
   compete with the section header above it. Six accent-green uppercase labels
   down a signup form is a screen shouting at somebody who is trying to type. */
.field .in {
  display: block; width: 100%;
  background: var(--surface-card); color: var(--on-surface);
  border: 1px solid var(--control-outline); border-radius: var(--r-base);
  /* 12 AND NOT 16, which is the design package's figure and the row it wins.
     Both are rungs, so the ladder does not decide it and nothing measurable
     does either: 12 + 22.4 of line + 12 + 2 of border is 48.4, clear of
     `--touch-min` 44. What is left is that an input is a box somebody types
     into rather than a card, and 16 all round gives it a card's air. `Q232`. */
  padding: 12px 16px;
  font-family: inherit; font-size: var(--text-base); line-height: 1.4;
}
/* The value a person has not typed yet. --on-surface-variant and not a lighter
   step: placeholder text is the one piece of copy on a form that has to be
   readable BEFORE anyone interacts with it. */
.field .in .ph { color: var(--on-surface-variant); }
/* Focus. The border takes the accent and gains a soft ring outside it, so the
   field grows a halo rather than a second border — a 2px border on focus
   reflows the text by a pixel and the whole form twitches. */
.field .in.on {
  /* --accent-line, not --primary, and the REASON has changed even though the
     answer has not. This said "a focus ring has to clear 3:1 against the ground
     it sits on, and in dark the primary does not". That was true when it was
     written: at `8cb7d2ddd` the dark primary was #33689C on a #2B3342 card,
     which measures 2.18:1. The repalette moved both, and it is now the other
     way round — #8B98EC on #232529 is 5.70:1, against --accent-line's 4.15:1.
     Both clear 3:1 and the primary clears it by more, so the contrast argument
     no longer picks this token and, stated as it was, picked the wrong one.

     What survives is the role: --accent-line is the token that exists for a
     LINE rather than a fill, and a focus ring is a line. That is why it stays.
     `Q232`. (An earlier version of this paragraph cited BRAND.md and a
     "measured blueprint line", both from the superseded design layer.) */
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-line) 18%, transparent);
}
.field .hint {
  display: block; margin-top: 8px;
  font-size: var(--text-xs); line-height: var(--leading-body);
  color: var(--on-surface-dense);
}
.field-select {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer; text-decoration: none;
}
.field-select::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--on-surface-variant);
  border-bottom: 2px solid var(--on-surface-variant);
  transform: translateY(-2px) rotate(45deg);
}

/* Something is wrong with what was typed. This is the ONE legitimate use of
   terracotta on a form and it is not "an error tone": it is the same clash
   meaning it carries everywhere else — what is in the box and what the product
   will accept do not agree.

   THE MESSAGE NEVER BLAMES. "That address does not look finished" rather than
   "invalid email"; "we do not recognize that pair" rather than "wrong
   password". Never name the field's validator and never say the reader did
   something wrong. */
.field.bad .in { border-color: var(--terracotta-deep); }
.field.bad .hint { color: var(--terracotta-deep); }

/* ---- A file drop ---------------------------------------------------------
   First-run setup established this as the file-intake surface. It stays a
   bounded target rather than making the whole page accept a drop: the dashed
   inset is the affordance, and the quiet container ground keeps it separate
   from both a form field and a card. */
.drop {
  border-radius: var(--r-base); padding: 20px 18px; text-align: center;
  background: var(--surface-container);
  outline: 1px dashed var(--control-outline);
  outline-offset: -6px;
}
.drop .t {
  font-size: var(--text-sm); color: var(--on-surface-variant); line-height: 1.5;
}

/* ---- The code entry -------------------------------------------------------
   Six boxes for SIX DIGITS. The alphabet is not a drawing choice: the gateway's
   `generateCode()` is `fmt.Sprintf("%06d", n)`, both app strings say "six
   digits", and `HcOtp` filters `\D` out of what is typed. This sheet drew a
   letter in the second box on both pages that use it, under copy reading "six
   characters", and that is a value the product does not issue. `Q236`.

   Tabular figures, tracked out, in the product's own face. The .chip-code
   reasoning this rule used to borrow -- monospaced, because it is read a
   character at a time off another device -- is an argument about telling 0 from
   O and 1 from l, and there are no letters here to tell them from. What a
   numeric code in a fixed grid actually needs is equal digit advances, which is
   tabular-nums, and --font-mono is a system stack with no font file anywhere in
   the repo: it renders as a different typeface on every OS, on the one screen
   where somebody is transcribing against a ten-minute expiry. `Q236`.

   It is a CONSEQUENCE GATE and not an entry gate. This is the screen that
   confirms a signature at the moment it is worth something, not the screen
   that stands between a person and their own house. A page putting it in front
   of a login has misread the model. */
.otp { display: flex; gap: 8px; }
.otp i {
  flex: 1; min-width: 0; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-card); border: 1px solid var(--control-outline);
  border-radius: var(--r-sm);
  font-size: var(--text-lg); font-weight: 500;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  /* hc-tracking-allow: a digit cell is not a title. --tracking-title is
     negative and exists to resolve a long heading; this is one tabular
     character centered in a 56px box, and the deck and HcOtp both draw +.5
     here as Q236 shipped them. The package draws no tracking at all, which
     is the third spelling and is recorded in Q247 rather than settled here. */
  font-style: normal; letter-spacing: .5px; color: var(--on-surface);
}
.otp i.on {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-line) 18%, transparent);
}
/* The caret box: empty, focused, waiting. */
.otp i.next { border-color: var(--accent-line); }

/* ---- A choice row ---------------------------------------------------------
   Two or three mutually exclusive things, each large enough to say what it is.
   Built on .opt from hc.css rather than beside it — .opt is already the raised,
   selectable block with a title and a supporting line, and a second one would
   drift. What is added here is only the layout for a row of them and the
   leading glyph. */
/* The BOX is _ds/icons.css's — one owner for the door tile, because .door in
   42-colors-and-the-space is the same object under a different name and the
   two had drifted to 40px and 46px. What stays here is the ground, which is
   what makes this one a choice rather than a door. */
.pick { display: flex; gap: 16px; }
.pick .g { background: var(--surface-container); color: var(--on-surface-variant); }
.opt.sel .pick .g { background: rgba(255,255,255,0.18); color: var(--on-primary); }

/* ---- A toggle -------------------------------------------------------------
   A setting that is on or off, with its label to the left and the control hard
   right. The control is drawn rather than native because the native one carries
   the platform's accent and this product's accent flips by role.

   .lock is the toggle that cannot be moved — the variance push, which a paid
   homeowner may not turn off because it is what sets `heard-at`. It reuses the
   inert treatment from states.css rather than inventing a disabled look: a
   capability you lack is visible and inert, and so is a switch you may not
   throw. */
.tg { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
/* A RULE BETWEEN SIBLING TOGGLES, and the argument that removed it was reading
   the wrong document. `Q221`. This said: "BRAND.md's non-negotiable is 'no
   dividers between sibling rows or sections'." The only BRAND.md in the tree
   belongs to the MARKETING design system, and SKILL.md names BRAND.md as part
   of "the layer this package supersedes"; the sentence itself survives in the
   product package's README, in the paragraph that also hands --rule-ink this
   exact job — "--rule-ink (9% of the page ink) SEPARATES TWO ROWS and is meant
   to be felt rather than seen", as against --outline for a card's edge and
   --rail-ink for structure. The no-dividers rule is about the heavier line. Six
   of the package's own components draw this one between siblings — Row,
   InsetRow, PickRow, Keep, Fact and Comparison — and ToggleRow is the seventh.

   The arithmetic here was wrong as well: the comment claimed 12 top and bottom
   "already puts 24px between two of them" while the declaration under it added
   16 more, so it was 28. The padding is symmetric now and the hairline marks
   the run, exactly as it does one component over. */
.tg + .tg { box-shadow: inset 0 1px 0 var(--rule-ink); }
.tg .tx { flex: 1; min-width: 0; }
.tg .tx .n { display: block; font-size: var(--text-base); line-height: 1.35; }
.tg .tx .c {
  display: block; margin-top: 4px;
  font-size: var(--text-xs); line-height: var(--leading-body);
  color: var(--on-surface-variant);
}
.tg .sw {
  flex: none; width: 48px; height: 32px; border-radius: var(--r-full);
  background: var(--surface-container); position: relative;
  box-shadow: var(--ring-control);  /* Q245 */
}
.tg .sw::after {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--surface-card); box-shadow: var(--shadow-whisper);
}
.tg .sw.on { background: var(--primary); box-shadow: none; }
.tg .sw.on::after { left: 24px; }
/* Cannot be moved. Quiet, not crossed out, and the reason lives in .tg .tx .c
   where the rest of the explanation already is.

   --primary-flat AND NOT THE PACKAGE'S --disabled, ruled on the measurement
   (`Q221`). #B4B4B4 puts the track at 2.07:1 on a card AND the white thumb at
   2.07:1 on the track — both under the 3:1 non-text bar, on both boundaries at
   once, so a reader cannot locate the thumb and therefore cannot tell which way
   a locked switch is set. --primary-flat is 4.74:1 on both. It also says the
   true thing: this is ON and you may not move it, where gray says off or
   broken. There is no --disabled token on this sheet, and adding one to draw a
   worse result is not a trade. */
.tg.lock .sw.on { background: var(--primary-flat); }
.tg.lock .tx .n { color: var(--on-surface-variant); }