/* SHARED·QUICKTILES (1153) — the capture screen's 4-up quick-log row. status: todo · lazy: true.
 *
 * THE QUICK LOG: Feed · Sleep · Weight · Milestone — four buttons in a single row above the
 * voice/text intake. `.quick-tiles` is the 4-column grid (the row), `.qt` is each tile
 * (icon + label, the button the parent taps to start a quick-log). One emitter site
 * (web/js/views/capture.js:90 + :93) — the capture flow itself is lazy-loaded per the
 * registry row.
 *
 * ── PREFIX-DRIFT NOTE ─────────────────────────────────────────────────────────────────
 * The family uses TWO prefixes — `.quick-tiles` (full-form, the row) and `.qt` (short-form,
 * each tile). Both are part of card 1153 SHARED·QUICKTILES and live in this single file —
 * the rename (`.quick-tiles` → `.qt-row`, or `.qt` → `.qt-tile`) is DEFERRED per the
 * registry's existing note. Do not split them across files; the row and its tiles belong
 * together because the tile's layout only makes sense inside the row's grid.
 *
 * ── CARD-MIRROR STATUS ─────────────────────────────────────────────────────────────────
 * STATUS KEPT AS `todo` — check 16 (`_card-mirror.js:55`) does NOT iterate this row because
 * its ENFORCED allowlist is `['draft', 'draft-final', 'locked']`. The move is pure
 * decomposition (CSS relocation, registry row point-at); no content or visual change.
 * Promote to `draft` when the card renders in the workbench.
 *
 * ── SELF-CONTAINED (D-470/D-475) ──────────────────────────────────────────────────────
 * Every selector is keyed under `.quick-tiles` or `.qt` — the page the card is dropped
 * into (capture.js) supplies zero CSS for this row. No reliance on page or user-agent
 * defaults; every value the row needs is declared below.
 *
 * ── TOKEN-EXCEPTION MARKERS ───────────────────────────────────────────────────────────
 * 4 markers, all carrying LIFTED values from the original app.css rules:
 *  - `.qt .ic` font-size 24 (no --text-* role at 24)         — D-463 type-role
 *  - `.qt .l`  font-size 11 (--text-label resolves to 11px)  — D-463 type-role
 *  - `.quick-tiles` gap 10px (legacy value from app.css)     — D-511 4px-grid
 *  - `.qt .ic` margin-bottom 6px (legacy value from app.css) — D-511 4px-grid
 * Rounding 10→12 and 6→8 would change the visual; the markers preserve the ship shape.
 *
 * ── REVERSE-PORT DECLARATION ──────────────────────────────────────────────────────────
 * If card 1153 ever moves status to `draft`, this file MUST be linked from `web/index.html`
 * (already done at the time of this move — see /css/cards/shared/quicktiles.css?v=…), and
 * the 5 app.css rules MUST stay deleted. They are not to be re-added under any prefix.
 * ──────────────────────────────────────────────────────────────────────────────────────── */

.quick-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;                                  /* token-exception */
  margin: 16px 0;
}

.qt {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.qt:hover {
  background: var(--surface-card-hover);
  transform: translateY(-1px);
}

.qt .ic {
  font-size: var(--size-24);                  /* token-exception */
  margin-bottom: 6px;                         /* token-exception */
  display: block;
}

.qt .l {
  font-size: var(--size-11);                  /* token-exception */
  font-weight: 500;
  color: var(--ink);
}