/* [drawsafe] Saved drawings for guardians (public/screens/drawings.js). docs/DESIGN.md: calm tiles
   for grown-ups, tokens from public/ui/tokens.css, no nested cards. */

.dr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--space-3); }
.dr-tile { position: relative; width: 100%; display: grid; gap: 2px; padding: var(--space-2); text-align: left; border: 1px solid var(--line, rgba(0, 0, 0, 0.1)); border-radius: var(--radius-md, 14px); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-height: 44px; }
.dr-tile:hover { border-color: var(--accent); }
.dr-tile:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.dr-thumb { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; }
.dr-thumb .dr-canvas { width: 100%; height: 100%; object-fit: contain; }
.dr-tile-title { font-weight: var(--weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-tile-sub { font-size: var(--text-sm); color: var(--ink-muted); }
.dr-flag { position: absolute; top: var(--space-2); right: var(--space-2); }
.dr-canvas { display: block; max-width: 100%; height: auto; }
.dr-big { border-radius: var(--radius-md, 14px); overflow: hidden; background: var(--surface-sunken); }
.dr-big .dr-canvas { width: 100%; max-height: 70vh; object-fit: contain; margin: 0 auto; }

@media (min-width: 700px) {
  .dr-grid { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
}

/* [onboarding] The People tab's "Drawing games": one row per person, the choice below the name. */
.dr-choices { display: grid; gap: 0; }
.dr-choice { display: grid; gap: var(--space-2); padding: var(--space-3) 0; }
.dr-choice + .dr-choice { border-top: 1px solid var(--line); }
.dr-choice-who { display: flex; align-items: center; gap: var(--space-2); }
.dr-choice-note:empty { display: none; }
.dr-choice .ui-seg { max-width: 100%; }
.dr-choice .ui-seg span { white-space: normal; text-align: center; line-height: 1.2; }