/* skipops.app/setup.html (5 Nov): the setup chat before payment. Tap cards first, the
   question as a bubble, his answer written for him. Built on marketing.css's tokens. */

.setup-page { background: var(--bg); }
.setup-progress { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.setup { padding-block: 28px 72px; min-height: 70vh; }
.setup .wrap { max-width: 640px; }

.chat { list-style: none; display: grid; gap: 14px; margin-bottom: 22px; }
.say, .said {
  max-width: 88%; padding: 14px 18px; border-radius: var(--r-lg);
  animation: rise 260ms var(--ease) both;
}
.say { justify-self: start; background: var(--raised); box-shadow: var(--e1, 0 1px 2px rgba(22, 24, 38, 0.08)); }
.say p + p { margin-top: 6px; }
.say .hint { color: var(--muted); font-size: 0.95rem; }
.said {
  justify-self: end; background: var(--action); color: var(--on-action);
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; justify-content: flex-end;
}
.said button {
  background: none; border: 0; color: inherit; font: inherit; font-size: 0.92rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: 0.85;
  min-height: 32px;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .say, .said { animation: none; } }

.answer { display: grid; gap: 12px; }
.answer .btn { width: 100%; }
.answer .btn-ghost { width: 100%; }
.answer .field { margin-bottom: 4px; }
.answer .field select {
  width: 100%; min-height: 56px; padding: 0 12px; font: inherit;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
}

/* Tap cards: a picture or an icon, a title, one line under it. Never pills. */
.cards { display: grid; gap: 10px; }
.cards.grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px;
  padding: 12px 16px; text-align: left; cursor: pointer;
  background: var(--raised); color: var(--text); font: inherit;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.card:hover { border-color: var(--border-strong); }
.card[aria-pressed="true"], .card[aria-checked="true"] {
  background: var(--action-tint); border: 2px solid var(--action); padding: 11px 15px;
}
.card .t { font-weight: 700; display: block; }
.card .d { color: var(--muted); font-size: 0.92rem; display: block; }
.card .tick {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border-strong); display: grid; place-items: center;
}
.card[aria-pressed="true"] .tick, .card[aria-checked="true"] .tick { background: var(--action); border-color: var(--action); }
.card[aria-pressed="true"] .tick::after, .card[aria-checked="true"] .tick::after {
  content: ''; width: 10px; height: 6px; border: 3px solid var(--on-action);
  border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg);
}
.grid .card { flex-direction: column; text-align: center; justify-content: center; padding: 14px 10px; gap: 6px; }
.grid .card[aria-pressed="true"] { padding: 13px 9px; }
.grid .card img { width: 84px; height: 84px; object-fit: contain; }
.grid .card .tick { margin: 0; }
.card.plain { justify-content: center; font-weight: 700; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .row { grid-template-columns: 1fr; } }

.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 56px; height: 56px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--raised); font: inherit; font-size: 1.5rem; font-weight: 700; cursor: pointer; color: var(--text);
}
.stepper output { min-width: 3ch; text-align: center; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stepper-label { font-weight: 700; margin-bottom: 6px; }

.person {
  display: grid; gap: 8px; padding: 14px; background: var(--raised);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.person .checks { display: flex; gap: 18px; flex-wrap: wrap; }
.person label.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.person label.check input { width: 22px; height: 22px; accent-color: var(--action); }
.linkish {
  background: none; border: 0; color: var(--action-text); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; justify-self: start;
}

.matches { display: grid; gap: 8px; }
.credit { font-size: 0.8rem; color: var(--muted); }

.summary { display: grid; gap: 0; background: var(--raised); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hairline); }
.summary .line { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; padding: 10px 18px 14px; border-top: 1px solid var(--hairline); }
.summary .line:first-child { border-top: 0; }
.summary .k { font-weight: 700; }
.summary .v { grid-column: 1 / -1; grid-row: 2; color: var(--soft); }
.price { background: var(--action-tint); border-radius: var(--r-lg); padding: 18px 20px; }
.price .big { font-size: 1.5rem; font-weight: 800; }

/* Bintelligence (6 Nov): tell it instead of tapping. Under the cards, never instead of them. */
.talk { display: grid; gap: 8px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.talk label { font-weight: 700; }
.talk textarea {
  width: 100%; min-height: 64px; padding: 14px 16px; font: inherit; resize: vertical;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.talk textarea::placeholder { color: var(--muted); }
.talk textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--action-tint); }
.preview { background: var(--action-tint); border-radius: var(--r-lg); padding: 16px 20px; display: grid; gap: 8px; }
.preview .k { font-weight: 700; }
.preview ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* ---------- The five cards (stage 3, 11 Nov) ----------
   The same look as Ask SkipOps in the app (https://claude.ai/artifact/BC8kHnSiETCSmgh4ike5Wr):
   the app's hi-vis colours on this page only, one card shape for every answer, each part
   fading up in turn. The values are the app's design/tokens.ts roles. */
.setup-page {
  --bg: #e9ecdf; --surface: #fbfcf6; --raised: #fdfef9; --sunken: #d6dbc8;
  --text: #1b211d; --soft: #3d443e; --muted: #5a6157; --hairline: rgba(27, 33, 29, 0.16); --border-strong: #868d80;
  --action: #1b211d; --action-hover: #3a443d; --action-pressed: #3a443d; --on-action: #dcf23c; --action-text: #5b6b00; --action-tint: #f1fbc2;
  --focus: #7a8f00; --done: #2e7d4f; --done-tint: #d9f0e2; --attn: #a05a00; --attn-tint: #ffe7c2;
}
.ask-card { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px; border-radius: var(--r-lg);
  background: var(--raised); border: 1px solid var(--hairline); box-shadow: var(--e1, 0 1px 2px rgba(27, 33, 29, 0.08)); }
.ask-card > .glyph { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--action-tint); color: var(--action-text); font-weight: 800; }
.ask-card > .glyph svg { width: 22px; height: 22px; }
.ask-card.is-done > .glyph { background: var(--done-tint); color: var(--done); }
.ask-card.is-notyet > .glyph { background: var(--attn-tint); color: var(--attn); }
.ask-card > .body { display: grid; gap: 4px; min-width: 0; }
.ask-card .title { font-weight: 700; font-size: 1.06rem; }
.ask-card .sub { color: var(--muted); font-size: 0.95rem; }
.ask-card .attrib { color: var(--muted); font-size: 0.8rem; }
.ask-card ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--soft); }
.ask-card .more { grid-column: 1 / -1; display: grid; gap: 10px; }
.ask-card .think { display: grid; gap: 8px; margin-top: 6px; }
.ask-card .think i { display: block; height: 10px; border-radius: 5px; background: var(--sunken); }
.ask-card .think i:first-child { background: var(--action-tint); }
.ask-card .think i:nth-child(2) { width: 80%; }
.ask-card .think i:nth-child(3) { width: 60%; }
.tile { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 12px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tile:hover, .tile:focus-visible { background: var(--action-tint); border-color: var(--focus); }
.tile .av { width: 36px; height: 36px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.tile .t { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .build > * { animation: rise 320ms cubic-bezier(0, 0, 0, 1) both; }
  .build > *:nth-child(2) { animation-delay: 180ms; } .build > *:nth-child(3) { animation-delay: 360ms; } .build > *:nth-child(4) { animation-delay: 540ms; }
  .ask-card .think i { animation: sheen 1.6s ease-in-out infinite alternate; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { opacity: 0.45; } to { opacity: 1; } }