/* Try another (js/try-another.js): the version in the cut and up to 2 others, side by side; stacked on a phone.
   Built on the shared dialog (.modal, .modal--wide, .modal-head, .modal-x in app.css) and the shared tokens. */
.ta-modal { width: min(60rem, 96vw); gap: var(--s4); }
.ta-sub { margin-top: var(--s1); font: var(--type-meta, inherit); color: var(--muted); max-width: var(--measure, 60ch); }
.ta-grid { display: grid; grid-template-columns: repeat(var(--ta-cols, 3), minmax(0, 1fr)); gap: var(--s3); }
.ta-grid[data-count="1"] { --ta-cols: 1; max-width: 22rem; }
.ta-grid[data-count="2"] { --ta-cols: 2; }
.ta-tile { margin: 0; display: grid; gap: var(--s2); align-content: start; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--tile); }
.ta-tile.is-now { border-color: var(--line-2, var(--line)); background: var(--soft, var(--tile)); }
.ta-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xs, 6px); overflow: hidden; background: var(--ink-900, var(--dk-inv, #1f1f21)); }
.ta-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ta-badge { position: absolute; left: var(--s2); top: var(--s2); padding: 2px var(--s2); border-radius: 999px; background: var(--tile); color: var(--ink-strong); font-size: var(--text-xs, .75rem); font-weight: var(--w-medium, 500); }
.ta-tile figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.ta-name { font-weight: var(--w-medium, 500); color: var(--ink-strong); }
.ta-act { min-height: 2.75rem; }
.ta-making { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); border-radius: var(--r-sm); background: var(--accent-soft, var(--soft)); color: var(--ink-strong); }
.ta-making-body { flex: 1; min-width: 0; display: grid; gap: var(--s2); }
.ta-making-title { margin: 0; color: var(--ink-strong); }
.ta-making-title b { font-weight: var(--w-medium, 500); }
.ta-making-sub { margin: 0; color: var(--muted); font-size: var(--text-sm, .875rem); }
.ta-bar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ta-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.9s linear; }
.ta-tile.is-pending { border-style: dashed; }
.ta-media--pending { background: var(--soft, var(--tile)); }
.ta-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--dk-b-ffffffa55, rgba(255,255,255,.55)) 50%, transparent 80%); background-size: 200% 100%; animation: ta-shimmer 1.6s ease-in-out infinite; }
@keyframes ta-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.ta-pending-tag { color: var(--muted); font-size: var(--text-sm, .875rem); }
.ta-spin { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--dk-tx-accent, var(--accent)); animation: ta-spin 0.9s linear infinite; }
@keyframes ta-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ta-spin { animation: none; border-top-color: var(--line); } .ta-shimmer { animation: none; } .ta-bar > span { transition: none; } }
.ta-note { margin: 0; color: var(--ink); }
.ta-note--bad { color: var(--dk-tx-st-fail, var(--st-fail, #b42318)); }
@media (min-width: 681px) { .ta-modal.ta-modal--msg { width: min(30rem, 96vw); } }
.ta-note--msg { color: var(--ink); }
.ta-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); flex-wrap: wrap; }
.ta-left { color: var(--muted); font-size: var(--text-sm, .875rem); }
.ta-loading { min-height: 8rem; display: grid; place-items: center; }

/* A phone: one version under the other, buttons full width. */
@media (max-width: 680px) {
  .ta-modal { width: 100vw; max-width: 100vw; top: auto; bottom: 0; left: 0; transform: none; border-radius: var(--r) var(--r) 0 0; max-height: 92dvh; padding: var(--s4); }
  .ta-grid, .ta-grid[data-count="2"], .ta-grid[data-count="1"] { --ta-cols: 1; max-width: none; }
  .ta-tile figcaption .btn { width: 100%; justify-content: center; }
  .ta-foot { flex-direction: column-reverse; align-items: stretch; }
  .ta-foot .btn { width: 100%; justify-content: center; }
}

/* parity2 review: Try another as the mockup draws it (a row of pictures to choose between, one set of actions below) */
.ta-modal { width: min(640px, calc(100vw - 32px)); max-width: none; padding: 26px; border-radius: 22px; }
.ta-modal .ta-head h2 { font-size: 18px; font-weight: 500; }
.ta-modal .ta-sub { margin-top: 6px; color: var(--s-ink-2, var(--muted)); font-size: 14px; }
.ta-grid.vs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; max-width: none; }
.vs-opt.ta-tile { display: block; text-align: left; padding: 0; border: 0; background: none; border-radius: 0; outline: none; cursor: pointer; font: inherit; color: inherit; }
.vs-opt .ta-media { display: block; border-radius: 10px; box-shadow: 0 0 0 1px var(--s-line, var(--line)); transition: box-shadow var(--t-small); }
.vs-opt .ta-media video { object-fit: cover; }
.vs-opt.is-on .ta-media { box-shadow: 0 0 0 2px var(--s-ink, var(--dk-l-1f1f21, #1f1f21)); }
.vs-opt:focus-visible .ta-media { box-shadow: 0 0 0 3px var(--s-peri-soft), 0 0 0 1px var(--s-peri); }
.vs-opt .ta-name { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; }
.vs-opt .ta-sub2 { display: block; font-size: 12px; color: var(--s-ink-2, var(--muted)); }
.ta-modal .ta-foot { justify-content: flex-start; gap: 8px; margin-top: 22px; }
.ta-modal .ta-sp { flex: 1; }
.ta-modal .ta-more { font-size: 14px; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
@media (max-width: 680px) {
  .ta-grid.vs-row, .ta-grid.vs-row[data-count] { grid-template-columns: 1fr 1fr; }
  .ta-modal .ta-foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
.ta-modal .ta-act.pill { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: var(--r-pill, 999px); font: 500 14px/1 var(--v-font, inherit); cursor: pointer; text-transform: none; letter-spacing: 0; }
.ta-modal .ta-act.pill.line { background: var(--s-card, var(--dk-paper, #fff)); color: var(--s-ink, var(--dk-ink, #1f1f21)); border: 1px solid var(--s-line, var(--dk-l-dddddd, #ddd)); }
.ta-modal .ta-act.pill.ink { background: var(--s-ink, var(--dk-inv, #1f1f21)); color: var(--dk-oninv, #fff); border: 1px solid var(--s-ink, var(--dk-l-1f1f21, #1f1f21)); }
.ta-modal .ta-act.pill:disabled { opacity: .45; cursor: default; }
.ta-modal .ta-more { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }