/* ==========================================================================
   NC Arts Directory · "Add a listing" pop-up, first screen (add-listing flow stage 1, 2026-10-18)
   Markup: inc/forms-panel.php choice_html(), inside the listing-request room:
     .ncd-room--<section> .ncd-sheet > .ncd-choice > nav.ncd-choice-cards > a.ncd-choice-card(.is-hero)
                                       > .ncd-choice-ic + b + .ncd-choice-sub
                                     > p.ncd-choice-alt > button.ncd-choice-more
                        .ncd-sheet > .ncd-choice-form[hidden] > p.ncd-choice-back > button + the lazy form 18
   The account area's big icon cards (ncd-account mock.css .tiles.big), drawn with the room's section tokens
   (--sec-ink, --sec-on-ink, --sec-tint, --sec-display*), so the same markup looks like music, theater, …
   ========================================================================== */
.ncd-choice-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0;
}
.ncd-choice-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 200px; padding: 26px 18px; text-align: center; text-decoration: none;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--ncd-radius, 10px);
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ncd-choice-card:hover { border-color: var(--sec-ink); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ncd-choice-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px #111214; }
.ncd-choice-ic {
  display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%;
  background: var(--sec-tint); color: var(--sec-ink);
}
.ncd-choice-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ncd-choice-card b {
  font-family: var(--sec-display); font-weight: var(--sec-display-weight); text-transform: var(--sec-display-case);
  letter-spacing: var(--sec-display-track); line-height: 1.05; font-size: 23px;
}
.ncd-choice-sub { color: var(--muted); font-size: 15px; }
.ncd-choice-card.is-hero { background: var(--sec-ink); border-color: var(--sec-ink); color: var(--sec-on-ink); }
.ncd-choice-card.is-hero .ncd-choice-ic { background: rgba(255,255,255,.18); color: var(--sec-on-ink); }
.ncd-choice-card.is-hero .ncd-choice-sub { color: var(--sec-on-ink); opacity: .9; }
.ncd-choice-card.is-hero:hover { border-color: var(--sec-deep); }
.ncd-choice-alt, .ncd-choice-back { margin: 22px 0 0; text-align: center; }
.ncd-choice-back { margin: 0 0 14px; text-align: left; }
.ncd-choice-more, .ncd-choice-backbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 4px;
  border: 0; background: none; cursor: pointer;
  font: 600 15px/1.3 var(--font-ui); color: var(--sec-ink); text-decoration: underline; text-underline-offset: 3px;
}
.ncd-choice-backbtn { text-decoration: none; }
.ncd-choice-backbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ncd-choice-more:focus-visible, .ncd-choice-backbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* phones and narrow dialogs: one card per row, icon beside the words */
@container (max-width: 560px) {
  .ncd-choice-cards { grid-template-columns: 1fr; gap: 12px; }
  .ncd-choice-card {
    min-height: 0; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px;
    align-items: center; justify-items: start; padding: 18px; text-align: left;
  }
  .ncd-choice-ic { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; }
  .ncd-choice-card b { font-size: 21px; align-self: end; }
  .ncd-choice-sub { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .ncd-choice-card { transition: none; } .ncd-choice-card:hover { transform: none; } }