/* ══ THE STATE KIT ═══════════════════════════════════════════  10 Sep 2026 ══
   Run 0, phase 3. THE STATE KIT IS BUILT BEFORE THE PAGES, NOT AFTER.

   A site that draws its populated state sixty-two times and its loading state
   zero times is what happens without this file. States drawn per page are
   drawn once per page and forgotten five times out of six; states built as a
   kit are ASSEMBLED.

   ONE NAME FOR THE COMPONENT. The site currently carries at least five
   families for one idea: `sv-none`, `ge-t/ge-s/ge-a`, `empty`, `grp-empty`,
   `empty-cell`. A fix applied to one of those reaches a fifth of the site and
   nothing reports the other four. Everything here is `hy-`, and the older
   families stay where they are until the pages that use them are moved.

   THE MODEL IS THE ONE PAGE THAT PASSED THE CLEAR-DOWN. `saved-homeowner`
   names the record it is waiting for, explains the mechanism in two
   sentences, carries one primary and asserts nothing. That is the shape.

   NO VALUE HERE IS INVENTED. Every colour, face and space resolves to a token
   the site already declares, with a fallback so the kit still renders on a
   page whose sheet has not loaded. ═══════════════════════════════════════ */

.hy-state {
  display: block;
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.4vw, 36px);
  background: var(--cream-2, #F3EFE4);
  border: 0.8px solid var(--line, #E6E0D0);
  text-align: left;
}
.hy-state[hidden] { display: none !important; }

.hy-state-t {
  margin: 0 0 10px;
  font-family: var(--serif-display, var(--serif, Georgia, serif));
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink, #1B2638);
}
.hy-state-s {
  margin: 0;
  max-width: 52ch;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #636976);
}
/* THE CALL TO ACTION IN AN EMPTY STATE IS THE PAGE'S PRIMARY, not a second
   one, so the kit draws exactly one and the page carries none while it shows. */
.hy-state-a {
  display: inline-block;
  margin-top: clamp(16px, 1.8vw, 24px);
  padding: 12px 22px;
  background: var(--navy, #0A1628);
  color: var(--cream, #FAF8F3);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  border: 0;
}
.hy-state-a:hover { background: var(--navy-2, #152238); }
.hy-state-a:focus-visible { outline: 2px solid var(--gold, #83632C); outline-offset: 2px; }

/* FIRST RUN IS NOT EMPTY, AND THE TWO ARE DIFFERENT SENTENCES.
   Empty means "there was something and it is gone". First run means "nobody
   has been here yet". The store has always been able to tell them apart; no
   page has ever used the distinction. The kit marks first run with the
   house's own hairline at the head rather than a different colour, because
   colour alone is not a state. */
.hy-state--first { border-top: 2px solid var(--gold-soft, #D4A943); }

/* AN ERROR SAYS WHAT HAPPENED AND WHAT TO DO NEXT. A reader cannot act on a
   diagnosis. The danger token carries the state; the words carry the act. */
.hy-state--error { border-left: 3px solid var(--danger, #A94442); }
.hy-state--error .hy-state-t { color: var(--danger-ink, var(--danger, #A94442)); }

/* ══ LOADING: A SKELETON THE SHAPE OF ITS OWN CONTENT ═══════════════════
   Never the empty copy. Telling a reader they have nothing and then filling
   the panel is a lie that corrects itself and is remembered as the lie. */
.hy-skel { display: block; }
.hy-skel[hidden] { display: none !important; }
.hy-skel-row {
  display: block;
  height: 14px;
  margin: 0 0 12px;
  background: var(--line, #E6E0D0);
  background-image: linear-gradient(90deg,
    var(--line, #E6E0D0) 0%, var(--cream-3, #EFE8D4) 50%, var(--line, #E6E0D0) 100%);
  background-size: 200% 100%;
  animation: hy-skel-sweep 1.4s linear infinite;
}
.hy-skel-row:last-child { margin-bottom: 0; }
.hy-skel-row--title { height: 21px; width: 42%; }
.hy-skel-row--half { width: 60%; }
.hy-skel-row--short { width: 28%; }
.hy-skel-card {
  display: block;
  height: 132px;
  margin: 0 0 16px;
  border: 0.8px solid var(--line, #E6E0D0);
  background: var(--cream-2, #F3EFE4);
}
@keyframes hy-skel-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* REDUCED MOTION REMOVES THE SWEEP, NEVER THE SHAPE. The skeleton is
   information; the movement is reassurance. */
@media (prefers-reduced-motion: reduce) {
  .hy-skel-row { animation: none; background-image: none; }
}

/* ══ DENSE: what a list becomes past the fold ═══════════════════════════
   Not a different component. The same rows, tighter, with the count the
   reader is owed once the group stops showing all of itself. */
.hy-dense .hy-row { padding-top: 8px; padding-bottom: 8px; }
.hy-count {
  display: block;
  margin-top: 12px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #636976);
}