/* HOME·CHECKLIST — the before-birth Home's tickable card · SINGLE SOURCE OF TRUTH.
 * Imported by BOTH workbench/home/checklist.html AND the app (web/index.html).
 * Tokens only (D-421). Class prefix: hck-*. Do NOT restyle hck-* anywhere else.
 *
 * SELF-CONTAINED, like every card here (the 2026-07-23 corollary): the card draws its
 * own surface rather than borrowing home-shell's .nh-mod, so what it looks like in the
 * workbench is what it looks like in the app, and a change to the shell cannot quietly
 * restyle it. The head inside it is SHARED·MODULEHEAD's .mh-*, styled by that card's
 * own sheet — nothing here touches those classes.
 */

.hck {
  margin: 0 var(--space-16) var(--space-12);
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-20) 0 var(--space-12);
}

.hck-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* THE ROW IS THE WHOLE TAP TARGET, not the little box. A 24px checkbox is a 24px
 * target, which fails the 44px floor and asks a tired parent to aim. The row is the
 * button; the box is what it looks like. */
.hck-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  min-height: var(--dim-44);
  padding: var(--space-8) var(--space-20);
  position: relative;          /* the hidden input positions against the row */
  cursor: pointer;
}

/* THE INPUT IS A REAL CHECKBOX, HIDDEN BUT NOT REMOVED. `display:none` and the
 * `hidden` attribute both take it out of the accessibility tree and off the
 * keyboard, which is the entire reason it exists rather than a styled button.
 * It keeps its size and its place in the flow so focus lands where the box is. */
.hck-cb {
  position: absolute;
  left: var(--space-20);
  margin: 0;
  opacity: 0;
  pointer-events: none;        /* the LABEL takes the tap, across the whole row */
}

.hck-box {
  flex: none;
  width: var(--dim-24);
  height: var(--dim-24);
  display: grid;
  place-items: center;
  border: 2px solid var(--border-hairline); /* token-exception */
  border-radius: var(--radius-8);
  color: transparent;                /* the tick is invisible until it is ticked */
  transition: background var(--duration-200) var(--ease-standard),
    border-color var(--duration-200) var(--ease-standard);
}

.hck-box svg {
  width: var(--dim-16);
  height: var(--dim-16);
  display: block;
}

.hck-label {
  font-size: var(--text-body);
  line-height: var(--leading-130);
  color: var(--text-primary);
}

/* DONE: the box fills, the tick appears, the label steps back. Two signals, not
 * three — no strike-through on top of a filled tick, which is the same fact said
 * twice and makes a finished list look damaged. */
/* The checked look is driven by the INPUT's own :checked state, not by a class the
 * renderer has to keep in step with it. One source of truth for "is this ticked",
 * and it is the same one the browser and the screen reader are reading. */
.hck-cb:checked ~ .hck-box {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: var(--text-on-accent);
}

.hck-cb:checked ~ .hck-label { color: var(--text-secondary); }

/* Micro-states (D-422 / G6) — a press tone and a focus ring on the row, which is
 * the control; never on the box, which is not. */
.hck-row:active { background: var(--surface-card-hover); }

/* Focus follows the INPUT, and the ring is drawn on the row it sits in — the row
 * is what she is choosing, so the row is what should light up. */
.hck-row:has(.hck-cb:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* Fallback for a WebView without :has() — the ring lands on the box, which is
 * smaller than ideal but never absent. */
.hck-cb:focus-visible ~ .hck-box {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The honest empty — a sentence, not three grey ghosts that read as a design. */
.hck-empty {
  font-size: var(--text-body-sm);
  line-height: var(--leading-150);
  color: var(--text-secondary);
  margin: 0;
  padding: 0 var(--space-20);
}

/* ── THE FULL SCREEN (2026-09-20) ──────────────────────────────────────────
 * The card on Home is a prompt; this is where the list is actually explained.
 * Same rows, same stylesheet, one owner — a second file drawing a second kind of
 * checkbox is how two lists start disagreeing about what a tick looks like.
 *
 * ⚠️ IT STAYS A CARD (Andrew, 2026-09-20: "This cant transform from a clear card to
 * a darker inside. It has to stay a card"). The first build dropped the shell here
 * on the reasoning that the SCREEN is the surface — which meant tapping a bright
 * raised card opened a page where the same content sat directly on the deeper
 * ground, so the thing she tapped appeared to dissolve rather than to open. The
 * card is the object; opening it makes it bigger, not different. Same surface,
 * same radius, same shadow, same 16px inset as on Home — only the padding grows,
 * because this one is a page to read. */
.hck-full {
  padding: var(--space-24) 0 var(--space-24);
}

.hck-ftitle {
  font-family: var(--font-display);
  font-weight: var(--weight-600);
  font-size: var(--text-display-lg);
  line-height: var(--leading-115);
  letter-spacing: var(--tracking-neg-015);
  color: var(--text-primary);
  margin: 0 0 var(--space-16);
  padding: 0 var(--space-20);
}

/* The intro reads as prose, at the app's body size — this is a page to read, not
 * a caption above a list. */
.hck-intro {
  font-size: var(--text-body);
  line-height: var(--leading-150);
  color: var(--text-secondary);
  margin: 0 0 var(--space-16);
  padding: 0 var(--space-20);
}

/* The count sits between the intro and the list, where it reads as the heading of
 * the list rather than a footnote to the prose. */
.hck-count {
  font-family: var(--font-label);
  font-weight: var(--weight-600);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-14);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-24) 0 var(--space-8);
  padding: 0 var(--space-20);
}

/* ── EDIT AND ADD (2026-09-20) ─────────────────────────────────────────────
 * The count and the Edit door share one line above the list: the count says where
 * she is, the door is the way to change the list itself. */
.hck-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-20);
  margin: var(--space-24) 0 var(--space-8);
}

.hck-bar .hck-count { margin: 0; padding: 0; }
.hck-edit { margin: 0; }

/* EDIT MODE. The row keeps its geometry so the list does not jump when she enters
 * it — the same height, the same inset; only what is inside changes. */
.hck-erow { gap: var(--space-8); cursor: default; }

.hck-einput {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-130);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline); /* token-exception */
  border-radius: var(--radius-8);
  padding: var(--space-8) var(--space-12);
}

.hck-einput:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The remove is the icon spine's x, in a 44px target — never a hand-drawn cross. */
.hck-rm {
  flex: none;
  width: var(--dim-44);
  height: var(--dim-44);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--ink-400);
  cursor: pointer;
}

.hck-rm svg { width: var(--dim-16); height: var(--dim-16); display: block; }
.hck-rm:active { color: var(--text-primary); }

.hck-rm:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ADD sits at the end of the list and is NOT behind the mode — her own items are the
 * most useful thing on any of these lists, so adding one is never a thing she has to
 * find Edit to do first. */
.hck-add { background: none; border: 0; text-align: left; }
.hck-addlabel { color: var(--text-secondary); }