/* =====================================================================
   DupeEats · debate-form.css — "Start your own debate" (A3 §6.1–6.2)
   Loaded after main.css on the debate page, /debates/ and /start-a-debate/.
   Uses the :root tokens of main.css only. Mobile first.
   ===================================================================== */

/* ---------- block (cta: white card; page: open form) ---------- */
.start-debate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.start-debate--cta { margin-top: var(--s-6); }
.band-white .start-debate { background: var(--bg); border-color: transparent; }
.start-debate__intro { display: grid; gap: var(--s-4); align-items: center; }
.start-debate__title { font-size: var(--fs-lg); font-weight: 700; }
.start-debate__text { margin-top: var(--s-2); color: var(--ink-2); max-width: 56ch; }
.start-debate__cta { justify-self: start; }
.start-debate.is-open .start-debate__cta[aria-expanded="true"] { background: var(--sunken); }
.start-debate--cta .start-debate__body { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.start-debate [hidden] { display: none !important; }

/* ---------- fields ---------- */
.debate-form { display: grid; gap: var(--s-5); max-width: 720px; }
.df-field { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.df-label { padding: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.df-optional { font-weight: 400; color: var(--muted); }
.df-input {
  width: 100%; min-height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--control); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-base);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.df-input::placeholder { color: var(--muted); }
.df-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.df-select {
  appearance: none; -webkit-appearance: none; padding-right: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23484841' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center; background-size: 18px 18px; background-repeat: no-repeat;
}
.df-hint { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.df-count { flex: none; font-variant-numeric: tabular-nums; }
.df-input[aria-invalid="true"] { border-color: oklch(48% 0.18 30); box-shadow: 0 0 0 1px oklch(48% 0.18 30); }
.df-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px oklch(48% 0.18 30), 0 0 0 3px var(--surface), 0 0 0 5px var(--cobalt); }
.df-error { font-size: var(--fs-sm); font-weight: 600; color: oklch(42% 0.17 30); }
.df-error--general {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  background: var(--sunken); color: var(--ink);
}
.df-error--general .text-link { font-size: inherit; }

/* ---------- option rows ---------- */
.df-rows { display: grid; gap: var(--s-3); counter-reset: none; }
.df-row { display: grid; gap: var(--s-1); }
.df-row__main { display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; gap: var(--s-2); align-items: center; }
.df-row__key {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sunken); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700;
}
.df-row:nth-child(1) .df-row__key { background: var(--lime); color: var(--ink); }
.df-row:nth-child(2) .df-row__key { background: var(--cobalt); color: var(--surface); }
.df-row__remove {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2);
}
.df-row__remove:hover { background: var(--sunken); color: var(--ink); }
/* at the minimum (two rows) there is nothing to remove: the field takes the full width */
.df-row__main:has(> .df-row__remove[hidden]) { grid-template-columns: 32px minmax(0, 1fr); }
.df-row > .df-error { padding-left: calc(32px + var(--s-2)); }
.df-add { justify-self: start; min-height: 44px; }

/* combobox + listbox */
.df-combo { position: relative; min-width: 0; }
.df-listbox {
  position: absolute; z-index: var(--z-pop); left: 0; right: 0; top: calc(100% + 4px);
  max-height: 336px; overflow-y: auto; padding: var(--s-1);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
}
.df-option {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-1) var(--s-3);
  border-radius: 6px; cursor: pointer; color: var(--ink);
}
.df-option:hover, .df-option[aria-selected="true"] { background: var(--sunken); }
.df-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--ink); }
.df-option__img, .df-chip__img {
  flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--sunken);
}
.df-option__img img, .df-chip__img img { width: 100%; height: 100%; object-fit: cover; }
.df-option__text, .df-chip__text { display: grid; min-width: 0; line-height: 1.25; }
.df-option__name, .df-chip__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-option__chain, .df-chip__chain { font-size: var(--fs-sm); color: var(--muted); }
.df-option--free { min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--cobalt); }

/* chosen product chip */
.df-chip {
  display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-1) var(--s-2) var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
}
.df-chip__text { flex: 1; }
.df-chip__clear {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--cobalt);
}
.df-chip__clear:hover { background: var(--sunken); }

/* honeypot: off screen, not display:none (some bots skip hidden fields) */
.df-trap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- actions, states ---------- */
.df-actions { display: grid; gap: var(--s-3); }
.df-submit { justify-self: start; min-width: 200px; }
.df-submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; transform: none; }
.df-note { font-size: var(--fs-sm); color: var(--muted); max-width: 60ch; }
.df-nojs { padding: var(--s-4); border-radius: var(--r-sm); background: var(--sunken); color: var(--ink-2); font-weight: 600; }
.df-done { display: grid; gap: var(--s-3); max-width: 60ch; }
.df-done__title { font-size: var(--fs-lg); font-weight: 700; }
.df-done__title:focus { box-shadow: none; outline: none; }
.df-done__sent { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.df-done__text { color: var(--ink-2); }
.df-done .btn-row { margin-top: var(--s-2); }

/* ---------- /start-a-debate/ page ---------- */
.start-page__layout { display: grid; gap: var(--s-6); align-items: start; }
.start-page__intro { margin-top: var(--s-2); }
/* same heading scale as a debate page */
.start-page .page-head h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.028em; }
.start-page .page-head { margin-bottom: var(--s-5); }
.start-rules { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.start-rules li { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--ink-2); }
.start-rules .icon { margin-top: 2px; color: var(--lime-text); }
.start-page__live { margin-top: var(--s-3); }

@media (min-width: 761px) {
  .start-debate { padding: var(--s-6); }
  .start-debate__intro { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); }
  .start-debate__cta { justify-self: end; }
  .df-actions { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); }
}
@media (min-width: 1101px) {
  .start-page__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
@media (prefers-reduced-motion: reduce) {
  .df-input { transition: none; }
}
@media (max-width: 760px) {
  .df-submit, .df-add { width: 100%; justify-self: stretch; }
  .df-done .btn-row .btn { flex: 1 1 100%; }
  .start-page .page-head h1 { font-size: 2rem; }
}
/* A11 integration (CLS): on /start-a-debate/ the form IS the page. With JS on it shows at
   first paint (room for the two option rows the script adds) instead of appearing when the
   deferred script runs, which pushed the page down (CLS 0.02) whenever paint came first. */
.js .start-debate--page .debate-form[hidden]:has(.df-rows:empty) { display: grid !important; } /* only before the script adds rows: the sent state still hides it */
.js .start-debate--page .df-rows:empty { min-height: calc(96px + var(--s-3)); }