/* =====================================================================
   tickets.css: register.html only. Loads after site.css and uses only
   its tokens, type ladder and components. It replaces the page's old
   inline <style> block and the legacy assets/register.css, which fought
   site.css. Bump ?v= in register.html when this file changes.

   Order: opening → three tickets, then gift and pay it forward → what
   every ticket gets you → speakers →
   answers and the ask-for-a-ticket card.
   ===================================================================== */

/* ------------------------------------------------------------ opening */
.tk-hero { min-height: 0; padding-top: clamp(40px, 7vh, 72px); }
.tk-status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-6);
  margin-top: var(--s-7); padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--line);
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.tk-status strong { font-weight: 600; color: var(--ink); }
.tk-status__meta { font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------ three tickets
   The site's card: chalk, hairline, square. Flash | Summit | Member, with
   the $22 Summit ticket in the middle, lifted and ringed in coral. On a
   phone the cards stack and the Summit ticket comes first. Prices are set
   in Prompt. assets/tickets.js hides Flash at doors open (.tiers--two)
   and closes every sale at doors close (.tiers--closed). */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch;
  /* ticket buttons across the site land here, clear of the fixed header */
  scroll-margin-top: calc(var(--head-h-small) + 16px); }
.tiers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.tier[hidden] { display: none; }
.tier { position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px);
  background: var(--chalk); border: 1px solid var(--line); border-top: 3px solid var(--teal);
  transition: border-color var(--t-surface) ease, transform var(--t-surface) var(--ease-out), box-shadow var(--t-surface) ease; }
.tier:hover, .tier:focus-within { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(18,38,43,.10); }
.tier--summit { border: 2px solid var(--coral); border-top-width: 6px; box-shadow: 0 14px 32px rgba(18,38,43,.12);
  margin-block: calc(var(--s-4) * -1); padding-block: calc(clamp(24px, 2.6vw, 32px) + var(--s-4)); }
.tier--summit:hover, .tier--summit:focus-within { border-color: var(--coral); }
.tier-flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 4px 14px; white-space: nowrap;
  background: var(--coral); color: var(--ink); font: 500 12px/1.4 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.tier-name { margin: 0; font: 600 clamp(28px, 2.6vw, 34px)/1.05 var(--f-display); }
.tier-price { margin-top: var(--s-3); font: 500 15px/1 var(--f-ui); color: var(--muted); }
.tier-price b { font: 600 clamp(44px, 4.4vw, 56px)/1 var(--f-ui); letter-spacing: -.02em; color: var(--ink); }
.tier-replay { margin-top: var(--s-3); font: 500 14px/1.4 var(--f-ui); color: var(--teal); }
.tier-list { list-style: none; margin: var(--s-4) 0 var(--s-5); padding: var(--s-4) 0 0; border-top: 1px solid var(--line);
  display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; }
.tier-list li { position: relative; padding-left: 18px; }
.tier-list li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.tier--summit .tier-list li::before { background: var(--coral); }
.tier-until { margin: 0 0 var(--s-4); padding: 6px 10px; background: var(--teal-soft); color: var(--ink); font: 500 13px/1.4 var(--f-ui); }
.tier .choice-action { width: 100%; margin-top: auto; }
.tier-pay { margin: 0 0 var(--s-3); font: 500 14px/1.45 var(--f-ui); color: var(--ink-2); }
.tier-upgrade { margin: 0 0 var(--s-4); font-size: 13px; line-height: 1.5; color: var(--muted); }
.tier-upgrade a { white-space: nowrap; }
/* Flash and Member: the same coral checkout, drawn as an outline, so the
   one filled button on the row is the main ticket. */
.tier:not(.tier--summit) .choice-action[data-registration-attribution] { background: transparent; border-color: var(--ink); color: var(--ink); }
.tier:not(.tier--summit) .choice-action[data-registration-attribution]:hover,
.tier:not(.tier--summit) .choice-action[data-registration-attribution]:focus-visible { color: var(--paper); }
.tier:not(.tier--summit) .choice-action[data-registration-attribution]::before { background: var(--ink); }
.tier-closed { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--coral); background: var(--chalk);
  font: 500 16px/1.5 var(--f-ui); color: var(--ink); }
.tier-how { margin-top: var(--s-6); max-width: 72ch; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* gift and pay it forward: two smaller cards under the tiers */
.tier-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.tier-other { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "h a" "p a"; column-gap: var(--s-5); align-items: center;
  padding: var(--s-5); background: var(--chalk); border: 1px solid var(--line); }
.tier-other .k { grid-area: k; font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tier-other h2 { grid-area: h; margin-top: var(--s-2); font: 600 clamp(24px, 2.2vw, 28px)/1.1 var(--f-display); }
.tier-other p:not(.k) { grid-area: p; margin-top: var(--s-2); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.tier-other .choice-action { grid-area: a; white-space: nowrap; }
.tier-fine { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-2);
  font-size: 14px; line-height: 1.55; color: var(--muted); }

/* sales closed: the buttons stay as quiet labels */
.tiers--closed .tier, .tiers--closed ~ .tier-others .tier-other { opacity: .72; }
.choice-action.is-closed { pointer-events: none; background: transparent; border-color: var(--line); color: var(--muted); }
.choice-action.is-closed::before { content: none; }

@media (max-width: 1100px) {
  .tier-others { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .tiers, .tiers--two { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: var(--s-6); }
  .tier--summit { order: -1; margin-block: 0; padding-block: clamp(28px, 6vw, 36px); }
  .tier-how, .tier-others, .tier-fine, .tier-closed { max-width: 560px; margin-inline: auto; }
  .tk-status { margin-top: var(--s-6); }
}
@media (max-width: 620px) {
  .tier-other { grid-template-columns: 1fr; grid-template-areas: "k" "h" "p" "a"; }
  .tier-other .choice-action { margin-top: var(--s-4); width: 100%; white-space: normal; }
}

/* ------------------------------------------ what every ticket gets you
   On a phone: one card per row, the number beside the words. */
@media (max-width: 620px) {
  #included .st-cards--4 { grid-template-columns: 1fr; gap: var(--s-3); }
  #included .card { grid-template-columns: 2.4em minmax(0, 1fr); column-gap: var(--s-2); }
  #included .card .k { grid-row: 1 / span 2; padding-top: .55em; }
  #included .card .t, #included .card p:last-child { grid-column: 2; }
}

/* ----------------------------------------------------------- speakers
   The homepage's markup and static list (assets/home-speakers.js), set
   as the site's hairline rows: portrait, who, and the session in serif. */
.speaker-strip { list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); }
.speaker-strip li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); align-items: start;
  padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--line); }
.speaker-strip img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--line); }
.speaker-strip__who { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.speaker-strip__who strong { font: 500 16px/1.4 var(--f-ui); color: var(--ink); }
.speaker-strip__session { display: block; margin-top: var(--s-1); font: 500 20px/1.2 var(--f-display); color: var(--ink); text-wrap: pretty; }
#ticket-speakers .actions { margin-top: var(--s-5); }
@media (max-width: 960px) { .speaker-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .speaker-strip { grid-template-columns: 1fr; }
  .speaker-strip li { grid-template-columns: 56px minmax(0, 1fr); padding: var(--s-3) 0 var(--s-4); }
  .speaker-strip img { width: 56px; height: 56px; }
}

/* ------------------------------------- answers and ask-for-a-ticket
   One card. Its button is a native <details> summary, so the form opens
   in place with the keyboard and without JavaScript. */
#refunds .faq-group { margin-top: 0; }
.ask-card { gap: var(--s-3); padding: clamp(24px, 3vw, 32px); border-top: 3px solid var(--coral); overflow: visible; }
.ask-card::after { content: none; }
.ask-more { margin-top: var(--s-3); }
.ask-more > summary { list-style: none; }
.ask-more > summary::-webkit-details-marker { display: none; }
.ask-more__close { display: none; }
.ask-more[open] > summary { min-height: 44px; padding: 8px 16px; border-color: var(--line); font-size: 14px; }
.ask-more[open] .ask-more__open { display: none; }
.ask-more[open] .ask-more__close { display: inline; }
.ask-more .form--card { max-width: none; margin-top: var(--s-5); padding: var(--s-5) 0 0; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: transparent; box-shadow: none; }
.ask-more__how { margin-top: var(--s-3); }
@media (max-width: 420px) { .ask-more .row2 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .tier { transition: none; }
  .tier:hover, .tier:focus-within { transform: none; }
}

/* Two current offers after the October Summit. */
.tiers--post { margin-top: var(--s-6); }
.tiers--post .tier--summit { margin-block: 0; padding-block: clamp(24px, 2.6vw, 32px); }
.tiers--post .tier > p:not(.tier-price):not(.tier-replay):not(.tier-pay):not(.tier-how) { color: var(--ink-2); line-height: 1.55; }
.tiers--post .tier-how { margin-top: var(--s-3); }
@media (max-width: 960px) { .tiers--post { gap: var(--s-4); } }