/* choose.png layout, using the existing independent context SVG assets. */
.phone[data-screen="context"] {
  height: var(--preview-height);
  background: var(--paper);
}
.phone[data-screen="context"] .topbar { padding: 0 18px; }
.phone[data-screen="context"] .header-link { min-width: 44px; min-height: 44px; font-size: var(--text-md); }
.phone[data-screen="context"] .topbar .back-button { color: var(--ink); }
.phone[data-screen="context"] .context-page { padding: 0 var(--page-gutter) 24px; min-height: 100%; }
.context-page .page-heading { padding-top: 32px; margin-bottom: 24px; }
.context-page .page-heading h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-semibold); letter-spacing: -.02em; white-space: normal; }
.context-page .page-heading p { font-size: var(--text-md); line-height: var(--leading-lg); margin-top: 12px; }
.context-page .context-group { padding: 18px 16px 16px; margin: 0; border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--shadow-card); }
.context-page .context-group + .context-group { margin-top: 24px; }
.context-page .context-group h2 { margin: 0 6px 8px; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-regular); color: var(--muted); }
.context-page .context-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 4px; }
.context-page .context-option { position: relative; min-height: 76px; padding: 0; gap: 4px; border: 1px solid transparent; border-radius: 10px; justify-content: flex-start; }
.context-page .context-illustration { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; user-select: none; }
.context-page .context-option > span { max-width: 100%; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-regular); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.context-page .context-option:hover { background: #fff6ed; }
.context-page .context-option.is-selected { background: var(--option-selected-bg); border-color: var(--option-selected-border); }
.context-selected-mark { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); pointer-events: none; }
.context-selected-mark::after { content: ''; position: absolute; left: 4px; top: 3px; width: 5px; height: 7px; border: solid #fffefd; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.context-page .field-hint { margin: 14px 0 0; font-size: var(--text-xs); line-height: var(--leading-sm); color: var(--muted); }
.context-page .page-actions { padding: 26px 35px 0; margin-top: auto; }
.context-page .page-actions .primary { min-height: var(--button-height); font-size: var(--button-prominent-size); line-height: var(--button-prominent-leading); font-weight: var(--weight-semibold); border-radius: var(--button-radius); }
@media (max-width: 760px) {
  .context-preview .phone[data-screen="context"] { height: 100dvh; max-width: 430px; padding-top: var(--safe-top); }
  .phone[data-screen="context"] .topbar { height: var(--header-mobile-height); }
  .phone[data-screen="context"] .home-indicator { height: max(12px, var(--safe-bottom)); }
  .phone[data-screen="context"] .home-indicator::after { display: none; }
}
@media (max-width: 360px) {
  .phone[data-screen="context"] .context-page { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .context-page .page-heading h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
  .context-page .context-group { padding-left: 12px; padding-right: 12px; }
  .context-page .context-option { min-height: 96px; }
  .context-page .page-actions { padding-left: var(--space-3); padding-right: var(--space-3); }
}