/* css/create.css — the create flow on create-event.html (2026-10-14).
 *
 * Decided with Ethan, redesign_oct_2026.md §3b and the decision log of 2026-10-13
 * ("intentional, do not fix"):
 *   - The page is BRAND: white #F7F4EE, Peach Red #F15A30, Deep Slate Olive #253122.
 *   - The EVENT carries its own Sanzo Wada theme, as CSS variables (--ev-*) set by
 *     js/event-themes.js themeStyle(): the card, the event bubble on step 3 and the
 *     cover sheet. On a phone the card IS step 2, so the whole step takes the theme;
 *     on desktop the page around the card stays brand white.
 *   - Selected options: 2px dark border on a light grey fill, never a coloured fill.
 *   - Peach Red buttons carry olive labels at 19px bold (white on Peach Red is 3.4:1;
 *     olive at that size is large text and passes).
 * Everything is scoped under .c2 so the shared header, footer and tab bar keep theirs.
 */

.c2-body {
  --c2-bg: #F7F4EE;
  --c2-ink: #253122;
  --c2-muted: #4A5546;
  --c2-line: #DDD8CE;
  --c2-soft: #ECE7DD;
  --c2-peach: #F15A30;
  --c2-white: #FFFFFF;
  --c2-err: #8A3A1C;
  --c2-ok: #2F5A2A;
  background: var(--c2-bg);
}

.c2 { font-family: 'DM Sans', system-ui, sans-serif; color: var(--c2-ink); max-width: 560px; margin: 0 auto; padding: 8px 18px 7rem; line-height: 1.45; }
.c2 *, .c2 *::before, .c2 *::after { box-sizing: border-box; }
.c2 [hidden] { display: none !important; }
.c2 a { color: var(--c2-ink); }
.c2 a:hover { color: #B8401C; }
.c2 :focus-visible { outline: 2px solid var(--c2-ink); outline-offset: 2px; }
.c2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* ── shared bits ─────────────────────────────────────────────────────────── */
.c2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 6px; }
.c2-top-t { font-size: 14px; font-weight: 600; color: var(--c2-muted); margin: 0; font-family: inherit; }
.c2-top-step { font-size: 13px; font-weight: 600; color: var(--c2-muted); min-width: 40px; text-align: right; }
.c2-round { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--c2-white); border: 1px solid var(--c2-line); color: var(--c2-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.c2-h { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1.05; margin: 6px 0 14px; }
.c2-h3 { display: block; font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.c2-note { font-size: 13px; color: var(--c2-muted); margin: 4px 0 0; }
.c2-note.c2-ok { color: var(--c2-ok); font-weight: 600; }
.c2-fine { font-size: 13px; color: var(--c2-muted); text-align: center; margin: 8px 0 0; }
.c2-err { font-size: 14px; font-weight: 600; color: var(--c2-err); margin: 8px 0 0; min-height: 0; }
.c2-err:empty { display: none; }
.c2-warn { font-size: 13px; line-height: 1.4; color: var(--c2-err); margin: 8px 0 0; }
.c2-draft { font-size: 13px; background: var(--c2-soft); border-radius: 12px; padding: 10px 12px; margin: 4px 0 8px; }
.c2-linkbtn { border: 0; background: none; padding: 0; font: 700 13px 'DM Sans', sans-serif; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.c2-primary, .c2-accent { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border: 0; border-radius: 16px; background: var(--c2-peach); color: var(--c2-ink); font: 700 19px 'DM Sans', sans-serif; cursor: pointer; padding: 0 20px; }
.c2-primary:disabled, .c2-accent:disabled, .c2-outline:disabled { opacity: .55; cursor: progress; }
.c2-outline { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border: 1.5px solid var(--c2-ink); border-radius: 14px; background: transparent; color: var(--c2-ink); font: 700 17px 'DM Sans', sans-serif; cursor: pointer; padding: 0 16px; }
.c2-ghost { border: 1.5px solid var(--c2-ink); border-radius: 12px; background: transparent; color: var(--c2-ink); font: 700 14px 'DM Sans', sans-serif; padding: 10px 14px; cursor: pointer; margin-top: 8px; }

.c2-in, .c2 input[type="date"], .c2 input[type="time"], .c2 textarea, .c2-link, #c2Place {
  width: 100%; border: 1.5px solid var(--c2-line); background: var(--c2-white); border-radius: 12px;
  padding: 11px 12px; font: 500 15px 'DM Sans', sans-serif; color: var(--c2-ink);
}
.c2 textarea { resize: vertical; }

/* Choice pills: the native radio is visually hidden but keeps keyboard behaviour. */
.c2-opt, .c2-chip, .c2-card-opt, .c2-mode { position: relative; cursor: pointer; }
.c2-opt input, .c2-chip input, .c2-card-opt input, .c2-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.c2-opt > span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; height: 100%; border: 1px solid var(--c2-line); background: var(--c2-white); border-radius: 12px; padding: 8px 6px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.c2-opt input:checked + span { border: 2px solid var(--c2-ink); background: var(--c2-soft); font-weight: 700; padding: 7px 5px; }
.c2-opt input:focus-visible + span, .c2-chip input:focus-visible + span, .c2-card-opt input:focus-visible + span, .c2-mode input:focus-visible + span { outline: 2px solid var(--c2-ink); outline-offset: 2px; }
.c2-seg { display: grid; gap: 6px; }
.c2-seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c2-seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.c2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.c2-chip > span { display: inline-block; border: 1px solid var(--c2-line); background: var(--c2-white); border-radius: 999px; padding: 9px 13px; font-size: 14px; font-weight: 600; }
.c2-chip input:checked + span { border: 2px solid var(--c2-ink); background: var(--c2-soft); font-weight: 700; padding: 8px 12px; }

.c2-card-opt, .c2-mode { display: block; margin-bottom: 6px; }
.c2-card-opt > span, .c2-mode > span { display: flex; flex-direction: column; border: 1px solid var(--c2-line); background: var(--c2-white); border-radius: 12px; padding: 11px 12px 11px 40px; font-size: 14px; position: relative; }
.c2-card-opt > span::before, .c2-mode > span::before { content: ""; position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #9A968C; }
.c2-card-opt input:checked + span, .c2-mode input:checked + span { border: 2px solid var(--c2-ink); background: var(--c2-soft); padding: 10px 11px 10px 39px; }
.c2-card-opt input:checked + span::before, .c2-mode input:checked + span::before { border: 6px solid var(--c2-ink); left: 11px; top: 12px; }
.c2-card-opt b, .c2-mode b { font-size: 15px; }

.c2-stepper { display: flex; align-items: center; gap: 10px; }
.c2-step-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--c2-ink); background: transparent; color: var(--c2-ink); font: 700 20px 'DM Sans', sans-serif; cursor: pointer; padding: 0; flex-shrink: 0; }
.c2-stepper input { width: 64px; text-align: center; font: 700 22px 'DM Sans', sans-serif; border: 0; background: transparent; color: var(--c2-ink); padding: 4px 0; -moz-appearance: textfield; }
.c2-stepper input::-webkit-outer-spin-button, .c2-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.c2-switch { position: relative; width: 50px; height: 30px; flex-shrink: 0; border: 0; border-radius: 999px; background: #C9C4B9; cursor: pointer; padding: 0; }
.c2-switch span { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--c2-white); transition: left .15s; }
.c2-switch[aria-checked="true"] { background: var(--c2-ink); }
.c2-switch[aria-checked="true"] span { left: 24px; }

/* ── step 1 ──────────────────────────────────────────────────────────────── */
.c2-form { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.c2-big { font-family: 'DM Serif Display', Georgia, serif; font-size: 44px; line-height: 1.02; font-weight: 400; margin: 0; }
/* The field's own small label, the same voice as the När / Var legends (Ethan 2026-10-14:
   the big question alone did not say what to type). */
.c2-namefield { display: flex; flex-direction: column; gap: 2px; }
.c2-lbl { font-size: 15px; font-weight: 700; }
.c2-name { border: 0; border-bottom: 2px solid var(--c2-ink); background: transparent; padding: 10px 0; font: 600 22px 'DM Sans', sans-serif; color: var(--c2-ink); border-radius: 0; width: 100%; }
.c2-name:focus { outline: none; border-bottom-color: var(--c2-peach); }
.c2-name::placeholder { color: #8C8F86; font-weight: 500; }
.c2-optional { font-size: 13px; font-weight: 600; color: var(--c2-muted); margin: 6px 0 -4px; }
.c2-box { border: 1px solid var(--c2-line); border-radius: 16px; background: var(--c2-white); padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.c2-box legend { font-size: 15px; font-weight: 700; padding: 0 4px; }
.c2-field label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }

/* The date picker (mockup G, date A; Ethan 2026-10-14: no icon, the calendar and the
   start time, the choice in words at the bottom). */
.c2-picker { display: flex; flex-direction: column; gap: 12px; }
.c2-daysnote, .c2-callout { margin: 0; background: var(--c2-soft); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.c2-cal { background: var(--c2-white); border: 1px solid var(--c2-line); border-radius: 16px; padding: 12px; }
.c2-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.c2-cal-t { font-weight: 700; font-size: 15px; }
.c2-cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c2-line); background: var(--c2-white); color: var(--c2-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.c2-cal-nav:disabled { opacity: .35; cursor: default; }
.c2-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.c2-wd { font-size: 11px; font-weight: 700; color: var(--c2-muted); padding: 4px 0; text-transform: uppercase; }
.c2-day { width: 40px; height: 40px; max-width: 100%; margin: 0 auto; border-radius: 50%; border: 0; background: transparent; color: var(--c2-ink); font: 600 14px 'DM Sans', sans-serif; padding: 0; cursor: pointer; }
.c2-day:hover:not(:disabled) { background: var(--c2-soft); }
.c2-day.is-today { box-shadow: inset 0 0 0 1.5px var(--c2-line); }
.c2-day:disabled { color: #A9A49A; font-weight: 500; cursor: default; }
.c2-day.is-blocked { text-decoration: line-through; }
.c2-day.is-on { background: var(--c2-ink); color: var(--c2-bg); font-weight: 700; box-shadow: none; }
.c2-day-x { display: block; }
.c2-times { display: flex; flex-direction: column; gap: 8px; }
.c2-times .c2-h3 { margin: 0; }
.c2-tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.c2-tchip { min-height: 40px; border: 1px solid var(--c2-line); background: var(--c2-white); border-radius: 999px; padding: 9px 13px; font: 600 14px 'DM Sans', sans-serif; color: var(--c2-ink); cursor: pointer; }
.c2-tchip[aria-pressed="true"] { border: 2px solid var(--c2-ink); background: var(--c2-soft); font-weight: 700; padding: 8px 12px; }
.c2-other input, .c2-endin input { max-width: 180px; }
.c2-addlink { align-self: flex-start; border: 0; background: none; padding: 4px 0; font: 700 14px 'DM Sans', sans-serif; color: var(--c2-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.c2-endin { display: flex; align-items: center; gap: 14px; }
.c2-whensum { margin: 0; border-top: 1px solid var(--c2-line); padding-top: 12px; font-size: 15px; font-weight: 700; }
.c2-place { position: relative; }
.c2-suggest { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--c2-white); border: 1px solid var(--c2-line); border-radius: 12px; max-height: 240px; overflow: auto; box-shadow: 0 8px 24px rgba(37,49,34,.12); }
.c2-suggest .vp-item { padding: 10px 12px; font-size: 14px; cursor: pointer; border-bottom: 1px solid #F0EDE6; }
.c2-suggest .vp-item:hover, .c2-suggest .vp-item[aria-selected="true"] { background: var(--c2-soft); }
.c2-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.c2-club-link { align-self: center; margin-top: 14px; font-size: 14px; font-weight: 700; text-underline-offset: 3px; }

/* ── step 2: the card ────────────────────────────────────────────────────── */
.c2-look { padding: 4px 0 0; }
.c2-look-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.c2-look-t { font-size: 13px; font-weight: 700; }
.c2-swatches { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.c2-swatch { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(37,49,34,.25); background: var(--sw-bg); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c2-swatch span { width: 14px; height: 14px; border-radius: 50%; background: var(--sw-dot); }
.c2-swatch.is-on { box-shadow: 0 0 0 2px var(--c2-bg), 0 0 0 4px var(--sw-ring); }
.c2-credit { font-size: 11px; opacity: .8; margin: 6px 0 0; }

.c2-card { background: var(--ev-bg); color: var(--ev-ink); border-radius: 24px; margin-top: 14px; overflow: hidden; }
.c2-cover { position: relative; margin: 14px 14px 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ev-cover); }
.c2-cover-art, .c2-cover-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.c2-cover-btn { position: absolute; right: 12px; bottom: 12px; border: 0; border-radius: 999px; background: var(--ev-bg); color: var(--ev-ink); padding: 9px 14px; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; }
.c2-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.c2 .c2-title { display: block; resize: none; overflow: hidden; width: 100%; border: 0; border-bottom: 1.5px solid transparent; background: transparent; color: var(--ev-ink); font: 400 40px/1.08 'DM Serif Display', Georgia, serif; padding: 2px 0 4px; border-radius: 0; }
.c2 .c2-title:hover { border-bottom-color: var(--ev-line); }
.c2 .c2-title:focus { outline: none; border-bottom-color: var(--ev-ink); }
.c2-row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--ev-soft); border: 0; border-radius: 14px; padding: 10px 12px; color: var(--ev-ink); font: inherit; cursor: pointer; }
.c2-row-ico { width: 44px; height: 44px; border-radius: 9px; background: var(--ev-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c2-row-txt { flex-grow: 1; min-width: 0; font-size: 14px; line-height: 1.35; display: flex; flex-direction: column; }
.c2-row-txt b { font-size: 15px; }
.c2-row-act { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; flex-shrink: 0; }
.c2-row.is-todo .c2-row-txt span { font-weight: 700; }
.c2-add { border: 1.5px dashed var(--ev-line); background: transparent; border-radius: 14px; padding: 14px 12px; color: var(--ev-ink); font: 600 14px 'DM Sans', sans-serif; cursor: pointer; text-align: left; }
.c2-desc label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.c2-card .c2-desc textarea { background: var(--ev-soft); border-color: var(--ev-line); color: var(--ev-ink); }
.c2-card .c2-err { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.c2-card-foot { margin-top: 10px; }
.c2-accent { background: var(--ev-accent); color: var(--ev-accent-ink); }
.c2-card .c2-fine { color: inherit; opacity: .85; }

/* ── step 3: bjud in ─────────────────────────────────────────────────────── */
.c2-done-link { font-weight: 700; font-size: 15px; text-decoration: none; padding: 8px 2px; }
.c2-bubble { display: flex; gap: 12px; align-items: center; background: var(--ev-bg); color: var(--ev-ink); border-radius: 14px; padding: 10px; }
.c2-bubble-art { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--ev-cover); }
.c2-bubble-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c2-bubble-txt { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; min-width: 0; }
.c2-bubble-txt b { font-size: 15px; overflow-wrap: anywhere; }
.c2-sec { border-top: 1px solid var(--c2-line); padding-top: 16px; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.c2-s3 > .c2-bubble + .c2-sec { border-top: 0; padding-top: 0; }
.c2-sec h3 { font-size: 15px; font-weight: 700; margin: 0; }
.c2-sec > .c2-note:first-of-type { margin-top: -4px; }
.c2-link { font-weight: 600; font-size: 14px; text-overflow: ellipsis; }
.c2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.c2-two .c2-primary { min-height: 54px; border-radius: 14px; }
/* Club picker: a dropdown, not a list of every club (Ethan 2026-10-14). */
.c2 .c2-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; font-weight: 600;
  background: var(--c2-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23253122' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.c2 .c2-select:disabled { opacity: .7; cursor: default; }
.c2-switch-row { display: flex; align-items: center; gap: 12px; }
.c2-switch-txt { flex-grow: 1; display: flex; flex-direction: column; }
.c2-mini { display: flex; gap: 12px; align-items: center; background: var(--c2-white); border: 1px solid var(--c2-line); border-radius: 14px; padding: 12px; }
.c2-mini-tree { width: 64px; flex-shrink: 0; }
.c2-mini-tree svg { width: 64px; height: auto; display: block; }
.c2-mini-txt { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; }
.c2-mini-txt span { color: var(--c2-muted); }
.c2-navrow { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--c2-line); background: var(--c2-white); border-radius: 12px; padding: 13px 12px; font: 700 14px 'DM Sans', sans-serif; color: var(--c2-ink); cursor: pointer; }
.c2-preview { display: block; text-align: center; margin: 26px 0 8px; font-size: 14px; font-weight: 700; text-underline-offset: 3px; }

/* ── the branching picture (create2-view.js spreadTreeSvg) ───────────────── */
.c2-tree { background: var(--c2-white); border: 1px solid var(--c2-line); border-radius: 16px; overflow: hidden; margin-bottom: 10px; }
.c2-tree-svg { display: block; }
.c2-tree-svg line { stroke-width: 1.5; }
.c2-tree-svg .tl-l1 { stroke: #253122; }
.c2-tree-svg .tl-l2 { stroke: #F15A30; }
.c2-tree-svg .tl-l3 { stroke: #C9C4B9; }
.c2-tree-svg .tn-root { fill: #253122; }
.c2-tree-svg .tn-l1 { fill: #F15A30; }
.c2-tree-svg .tn-l2 { fill: #F2A58C; }
.c2-tree-svg .tn-l3 { fill: #C9C4B9; }
.c2-tree-svg text { font: 700 11px 'DM Sans', sans-serif; fill: #4A5546; }
.c2-tree-svg .tn-you { fill: #F7F4EE; }
.c2-mini-tree .c2-tree-svg text { display: none; }
.c2-modes { display: flex; flex-direction: column; }
.c2-nrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--c2-line); padding-top: 12px; margin-top: 8px; }
.c2-nrow .c2-h3 { margin: 0; }
.c2-nrow-flat { border-top: 0; padding-top: 0; margin-top: 0; }
.c2-max { width: 110px; text-align: center; }
.c2-summary { font-size: 14px; line-height: 1.45; background: var(--c2-soft); border-radius: 12px; padding: 12px; margin: 12px 0 0; }

/* ── sheets ──────────────────────────────────────────────────────────────── */
.c2-scrim { position: fixed; inset: 0; background: rgba(23, 26, 20, .55); z-index: 80; }
.c2-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--c2-bg); color: var(--c2-ink); border-radius: 24px 24px 0 0; padding: 10px 18px 28px; display: flex; flex-direction: column; gap: 12px; }
.c2-sheet.c2-themed { background: var(--ev-bg); color: var(--ev-ink); }
.c2-themed .c2-note { color: inherit; opacity: .85; }
.c2-grab { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--c2-line); flex-shrink: 0; }
.c2-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.c2-sheet-head h2 { margin: 0; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.05; }
.c2-sheet-done { border: 0; background: transparent; font: 700 15px 'DM Sans', sans-serif; color: inherit; cursor: pointer; padding: 8px 2px; flex-shrink: 0; }
.c2-sheet .c2-box { border: 0; padding: 0; background: transparent; }
.c2-sheet .c2-box legend { display: none; }
.c2-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.c2-vblock { margin: 0; }
/* Venue help (mockup G, venue B). The date row keeps the calendar tile Ethan liked. */
.c2-vlead { margin-top: -6px; font-size: 14px; line-height: 1.45; }
.c2-vwhen { display: flex; gap: 12px; align-items: center; background: var(--c2-soft); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 600; min-height: 56px; }
.c2-vwhen .c2-linkbtn { margin-left: auto; flex-shrink: 0; }
.c2-vwhen.is-todo .c2-vwhen-t { font-weight: 600; color: var(--c2-err); }
.c2-tile { width: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; text-align: center; background: var(--c2-white); box-shadow: 0 0 0 1px var(--c2-line); }
.c2-tile-m { display: block; font-size: 9px; font-weight: 700; background: #FFD9A8; padding: 2px 0; letter-spacing: .02em; }
.c2-tile-d { display: block; font-size: 18px; font-weight: 700; padding: 1px 0 2px; }
.c2-h3-sub { font-weight: 500; font-size: 13px; color: var(--c2-muted); }
.c2-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.c2-kind { display: flex; gap: 10px; align-items: center; text-align: left; min-height: 60px; border: 1px solid var(--c2-line); background: var(--c2-white); border-radius: 14px; padding: 10px 11px; color: var(--c2-ink); font: inherit; cursor: pointer; }
.c2-kind[aria-pressed="true"] { border: 2px solid var(--c2-ink); background: var(--c2-soft); padding: 9px 10px; }
.c2-kind > span { display: flex; flex-direction: column; min-width: 0; }
.c2-kind b { font-size: 14px; line-height: 1.25; }
.c2-kind > span > span { font-size: 12px; line-height: 1.3; color: var(--c2-muted); margin-top: 2px; }
.c2-kind-ico { flex-shrink: 0; }
.c2-kind-ico .duo { fill: #F2A58C; }
.c2-vblock textarea.c2-in { margin-top: 6px; resize: none; line-height: 1.4; }
.c2-callout { margin-top: 8px; }
.c2-budget-l { margin-top: 12px; }
.c2-kr { position: relative; display: block; margin-top: 4px; }
.c2-kr input { padding-right: 44px; }
.c2-kr > span { position: absolute; right: 14px; top: 12px; font-weight: 600; color: var(--c2-muted); pointer-events: none; }
.c2-patterns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.c2-pattern { position: relative; height: 96px; border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer; border: 1.5px solid var(--ev-line); background: var(--ev-cover); }
.c2-pattern svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c2-pattern[aria-checked="true"] { border: 3px solid var(--ev-ink); }
.c2-pattern-t { position: absolute; left: 8px; bottom: 8px; background: var(--ev-bg); color: var(--ev-ink); border-radius: 999px; padding: 3px 9px; font: 700 12px 'DM Sans', sans-serif; }

body.c2-locked { overflow: hidden; }

/* ── phone: step 2 is the card, full bleed in the event's colours ────────── */
@media (max-width: 759px) {
  .c2-s2 { background: var(--ev-bg); color: var(--ev-ink); margin: -8px -18px 0; padding: 0 14px 24px; min-height: calc(100vh - 60px); }
  .c2-s2 .c2-round { background: var(--ev-soft); border-color: transparent; color: var(--ev-ink); }
  .c2-s2 .c2-top-t, .c2-s2 .c2-top-step { color: var(--ev-ink); }
  .c2-s2 .c2-swatch.is-on { box-shadow: 0 0 0 2px var(--ev-bg), 0 0 0 4px var(--sw-ring); }
  .c2-s2 .c2-card { margin-top: 6px; border-radius: 0; }
  .c2-s2 .c2-cover { margin: 8px 4px 0; }
  .c2-s2 .c2-card-body { padding: 16px 4px 8px; }
}

/* ── desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .c2 { max-width: 1100px; padding: 18px 40px 5rem; }
  .c2-s1, .c2-s3 { max-width: 560px; margin: 0 auto; }
  .c2-s2 .c2-look { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .c2-s2 .c2-look-row { order: 0; }
  .c2-s2 .c2-swatches { margin-top: 0; order: 1; }
  .c2-s2 .c2-credit { margin: 0 0 0 auto; order: 2; }
  .c2-s2 .c2-shuffle { border: 1.5px solid var(--c2-ink); border-radius: 999px; padding: 7px 14px; text-decoration: none; margin-left: 10px; }
  .c2-card { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 36px; padding: 28px; border-radius: 28px; box-shadow: 0 0 0 1px rgba(37, 49, 34, .10); }
  .c2-cover { margin: 0; aspect-ratio: 1 / 1; border-radius: 22px; align-self: start; }
  .c2-card-body { padding: 0; }
  .c2 .c2-title { font-size: 54px; }
  .c2-card-foot { display: flex; flex-direction: column; align-items: flex-end; }
  .c2-card-foot .c2-accent { width: auto; min-width: 240px; }
  .c2-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 48px)); max-height: 88vh; border-radius: 24px; }
  .c2-grab { display: none; }
}
.c2-sheet .c2-suggest { position: static; margin-top: 6px; box-shadow: none; }
.c2 svg.c2-tree-svg { width: 100%; height: auto; aspect-ratio: 352 / 250; }
.c2 [tabindex="-1"]:focus { outline: none; }
.c2-sheet > * { flex-shrink: 0; }

/* ── host mode: the organiser's page (create-event?event=<id>, 0188) ─────── */
.c2-hostload { text-align: center; padding: 48px 0; font-weight: 600; }
.c2-host-guestlink { font-size: 14px; font-weight: 700; text-underline-offset: 3px; padding: 8px 2px; }
.c2-banner { margin: 6px 0 4px; background: var(--c2-ink); color: var(--c2-bg); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 14px; }
.c2[data-mode="host"] .c2-s2 > .c2-top,
.c2[data-mode="host"] .c2-s3 > .c2-top,
.c2[data-mode="host"] .c2-s3 > .c2-bubble,
.c2[data-mode="host"] .c2-s3 > .c2-preview { display: none; }
.c2[data-mode="host"] .c2-s3 > .c2-h, .c2-sech { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0 0 6px; }
.c2[data-mode="host"] .c2-s3 > .c2-bubble + .c2-sec { border-top: 0; padding-top: 0; margin-top: 4px; }
.c2[data-mode="host"] .c2-s3 { margin-top: 34px; }
.c2-host-saved { min-height: 1.2em; }
.c2-host-saved.is-err { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.c2-row.is-locked .c2-row-act { display: none; }
.c2-card.is-off { opacity: .6; }
.c2-card.is-off .c2-row-act, .c2-card.is-off .c2-cover-btn, .c2-card.is-off .c2-add { display: none; }
.c2-guests { margin-top: 26px; }
.c2-gsum { margin: 0 0 10px; font-weight: 700; font-size: 15px; }
.c2-glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c2-g { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c2-line); }
.c2-g:first-child { border-top: 0; }
.c2-av { width: 38px; height: 38px; border-radius: 50%; background: var(--c2-soft); color: var(--c2-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.c2-g-going .c2-av { background: var(--c2-ink); color: var(--c2-bg); }
.c2-g-txt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.c2-g-txt b { font-size: 15px; overflow-wrap: anywhere; }
.c2-g-via { color: var(--c2-muted); font-size: 13px; }
.c2-g-st { font-size: 13px; font-weight: 700; color: var(--c2-muted); flex-shrink: 0; }
.c2-g-going .c2-g-st { color: var(--c2-ok); }
.c2-g-declined { opacity: .7; }
.c2-g-empty { background: var(--c2-white); border: 1px dashed var(--c2-line); border-radius: 14px; padding: 16px; margin: 0; font-size: 14px; }
.c2-locked { background: var(--c2-soft); border-radius: 12px; padding: 10px 12px; color: var(--c2-ink); }
.c2-switch:disabled, .c2-navrow:disabled, .c2 .c2-max:disabled { opacity: .5; cursor: not-allowed; }
.c2-hostend { margin-top: 30px; border-top: 1px solid var(--c2-line); padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.c2-danger { align-self: flex-start; min-height: 48px; border: 1.5px solid var(--c2-err); border-radius: 12px; background: transparent; color: var(--c2-err); font: 700 15px 'DM Sans', sans-serif; padding: 0 18px; cursor: pointer; }
.c2-danger[data-armed="1"] { background: var(--c2-err); color: var(--c2-white); }

@media (max-width: 759px) {
  .c2[data-mode="host"] .c2-s2 { min-height: 0; margin-top: 4px; padding-bottom: 18px; }
  .c2-danger { align-self: stretch; }
}
@media (min-width: 760px) {
  .c2[data-mode="host"] .c2-s3 { max-width: none; margin: 0; }
}
/* Desktop: the card across the top, who is coming and the invite side by side. */
@media (min-width: 960px) {
  .c2[data-mode="host"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 48px; align-items: start; }
  .c2[data-mode="host"] > * { grid-column: 1 / -1; }
  .c2[data-mode="host"] > .c2-guests { grid-column: 1; grid-row: 4; margin-top: 30px; }
  .c2[data-mode="host"] > .c2-s3 { grid-column: 2; grid-row: 4 / span 2; margin-top: 30px; }
  .c2[data-mode="host"] > .c2-hostend { grid-column: 1; grid-row: 5; }
}