/* SHARED·SUGGESTION (1158) — the Try-asking chips under Caïa's input, one per suggested question.
 *
 * REVERSE-PORT 2026-09-23 from web/css/app.css:480-501 — three rules (one widget):
 *   .suggested-row   the wrapping row of suggestion chips (the container)
 *   .suggestion      the chip itself (one per suggested question for the baby's age in weeks;
 *                    tapping fills the input and sends — web/js/views/chat.js:44/48)
 *   .suggestion:hover
 *
 * ⚠️ PREFIX-DRIFT NOTE — .suggested-row uses the FULL word; .suggestion uses the card's prefix.
 *   This is the same shape as 502's quick-tiles (.quick-tiles vs .qt). The rename
 *   suggested-row → suggestion-row is OWED but is a separate brief: the rename touches both
 *   CSS and JS (1 JS emitter at chat.js:44, `const sugRow = h('div', { class: 'suggested-row' })`)
 *   and needs its own blast-radius analysis. REPORT-505 §Deviation.
 *
 * VERBATIM — the three rules move without a value change. Token linter bypass — four
 * /* token-exception */ markers on linter-blocking lines so the moved CSS stays byte-identical
 * in source AND render. No rule value was changed. Markers added on:
 *   - gap: 10px on .suggested-row (check 23, 4px grid — 10 is not a multiple of 4; was
 *     grandfathered in app.css under LEGACY_MAX 121)
 *   - margin: 16px 0 20px on .suggested-row (check 23, 4px grid — 20 is not a multiple of 4;
 *     same reason)
 *   - padding: 10px 12px on .suggestion (check 23, 4px grid — 10 and 12 are not multiples of 4;
 *     same reason)
 *   - the size declaration on .suggestion uses var(--size-12) (check 25 / D-463 — --size-12 is a
 *     step, not a --text-* role; the role token that maps to 12px was not in app.css at the
 *     time of the original rule)
 *
 * NOT bypassed (intentionally): border: 1px solid var(--rule) on .suggestion — check 23 rule
 * 4a OPTICAL_PROP allowlist covers border/border-width (a 1px hairline draws an edge, not a
 * layout). transition: background 0.15s ease, border-color 0.15s ease on .suggestion — the
 * timing values are not in any property the grid checker flags.
 *
 * Self-containment (LANE-RULES §3): every element this card renders gets its style explicitly
 * under the card's own root class, zero reliance on page or user-agent defaults. The three
 * rules live here, nowhere else.
 *
 * ⚠️ BOUNDARY — NOT THIS ROW: chat-* / msg-* / chat-link belong to 1145 SHELL·CHAT (brief 483)
 * and 1140 SHARED·CHATMSG; the log-suggest action rows inside the Add-to-log modal belong to
 * 1148 SHARED·LOGSUGGEST; the acute safety turn renders through 411 SHARED·NOTICEBOX
 * (D-349's deterministic keyword gate). */

.suggested-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px; /* token-exception */
  margin: 16px 0 20px; /* token-exception */
}

.suggestion {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px; /* token-exception */
  font-size: var(--size-12); /* token-exception */
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.suggestion:hover {
  background: var(--surface-card-hover);
  border-color: var(--accent);
}