/* Q633 — the candidate Events tool. On-kit: the canonical .card frame, the details.disclosure chevron, the
   canonical .switch, tokens only (no raw hex, no rainbow, no dotted pills). Only layout lives here.

   SECTION4 skin (mobile ≤760 ONLY): the Broad-Daylight app grammar — warm --paper ground behind --surface
   cards, the offset stamp shadow on interactive/hero cards, chip-style type picker, stat tiles (uppercase
   eyebrow + Bricolage numeral), read-only status chips, 16px inputs (no iOS zoom), 48px primary button,
   loading skeletons for the async RSVP/porch reads. Desktop (>760) inherits the existing shell untouched. */
.ev{max-width:860px}
.ev-note{margin-top:22px}
/* Steven 2026-08-03 — the Create-event button bar sits above the events list; the create workflow reveals below it. */
.ev-createbar{display:flex;margin:0 0 var(--space-4)}
.ev-createbar .btn{min-height:44px}
/* Steven 2026-08-04 — each event card is an accordion: a compact title+when summary, expanding to the full controls. */
.ev-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;min-height:44px;padding:2px 0}
.ev-acc>summary::-webkit-details-marker{display:none}
.ev-acc>summary::after{content:"\203A";margin-left:auto;align-self:center;color:var(--muted);font-size:20px;line-height:1;transform:rotate(90deg);transition:transform .15s ease}
@media (prefers-reduced-motion:reduce){.ev-acc>summary::after{transition:none}}
.ev-acc[open]>summary::after{transform:rotate(-90deg)}
.ev-acc__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lead,18px);color:var(--ink)}
.ev-acc__when{color:var(--muted);font-size:var(--fs-caption,13px)}
.ev-acc__body{margin-top:var(--space-3)}

/* the create form + each event share the canonical .card frame; these are spacing-only */
.ev-card{margin:16px 0}
.ev-card h2{margin:0 0 6px;font-size:1.15rem}
.ev-field{display:block;margin:0 0 12px}
.ev-field .flabel{display:block;font-weight:600;margin:0 0 4px}
.ev-field input,.ev-field select,.ev-field textarea{width:100%}
.ev-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.ev-row2{grid-template-columns:1fr}}
.ev-blurb{color:var(--muted);font-size:14px;margin:0 0 12px}

/* Q680 — the preset-card grid (screens 48/49) replaces the <select id="ev-type">. 3-across desktop / 2-across
   phone, min 44px targets; the picked card takes the ink border. Reuses the card grammar (no dotted pills). */
.ev-typegrid{display:grid;grid-template-columns:1fr;gap:12px;margin:6px 0 4px}
@media(min-width:560px){.ev-typegrid{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.ev-typegrid{grid-template-columns:1fr 1fr 1fr}}
.ev-typecard{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;min-height:44px;cursor:pointer;
  border:2px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 16px;
  box-shadow:0 0 0 transparent;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.ev-typecard:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop-sm)}
.ev-typecard.is-on{border-color:var(--ink);box-shadow:var(--shadow-pop)}
.ev-typecard:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.ev-typecard__t{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--ink)}
.ev-typecard__l{font-size:13.5px;color:var(--ink-2,#3a3740);line-height:1.35}
.ev-typecard__n{font-size:12.5px;color:var(--muted)}
.ev-setup-h{margin:20px 0 10px}
.ev-err{color:var(--secondary-strong);font-size:13px;margin:4px 0 0}

/* the screening row reuses the canonical .switch (styles.css §24) */
.ev-switch{display:flex;align-items:flex-start;gap:12px;margin:4px 0 14px}
.ev-switch__label{line-height:1.35}
.ev-switch__label b{display:block}
.ev-switch__cons{display:block;color:var(--muted);font-size:13px}

/* the brand preview: the candidate's saved colors, so the invite feels like theirs before they share it */
.ev-brand{background:var(--hero-bg,var(--accent));color:var(--rail-text,#fff);border-radius:var(--r-lg);padding:16px 18px;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.ev-brand__av{width:40px;height:40px;border-radius:var(--r-pill);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:700;background:rgba(255,255,255,.18);color:var(--rail-text,#fff)}
.ev-brand__t{line-height:1.35}
.ev-brand__t b{color:var(--rail-text,#fff)}
.ev-brand__sub{color:var(--rail-text-dim,rgba(255,255,255,.78));font-size:13px}

/* the shareable landing link row */
.ev-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.ev-link input{flex:1 1 220px;min-width:0}

/* the RSVP + porch views live in canonical disclosures; light dashboard trim */
.ev-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
@media(max-width:560px){.ev-tiles{grid-template-columns:1fr 1fr}}
.ev-tile{border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface)}
.ev-tile.is-pop{background:var(--ink);border-color:var(--ink)}
.ev-tile.is-pop .ev-tile__n,.ev-tile.is-pop .ev-tile__l{color:var(--paper)}
.ev-tile__n{display:block;font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;color:var(--ink)}
.ev-tile__l{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.ev-guests{list-style:none;padding:0;margin:0}
.ev-guest{padding:8px 0;border-top:1px solid var(--line)}
.ev-guest b{font-weight:700}
.ev-type-tag{display:inline-block;background:var(--accent-soft);color:var(--accent-strong,var(--accent));border-radius:var(--r-pill);padding:2px 10px;font-size:12px;font-weight:700;margin:0 0 8px}

/* the read-only screening status chip (RSVP view): soft-fill pill, never red, never a dot. On = accent-wash,
   Off = sunken/neutral — pairs color with the word, per the status-chip grammar. */
.ev-stat{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:3px 12px;font-size:12.5px;font-weight:600;line-height:1.3}
.ev-stat--on{background:var(--accent-wash);color:var(--accent-strong,var(--accent))}
.ev-stat--off{background:var(--surface-sunken);color:var(--muted)}

/* the setup section eyebrows (Basics / When / Where / Guests / Visibility and safety) group the create form */
.ev-grp{margin:18px 0 8px}
.ev-grp:first-of-type{margin-top:12px}

/* ============================================================================
   SECTION4 MOBILE SKIN — Broad-Daylight app grammar, phone ≤760 ONLY.
   Desktop (>760) keeps the existing shell; nothing below leaks up a breakpoint.
   ============================================================================ */
@media (max-width:760px){
  /* warm ground behind the cards; the reading column becomes full-bleed with a page gutter */
  .ev{max-width:none}
  .ev>h1.display{font-size:var(--fs-d2)}
  .ev>.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow)}

  /* Q830 — the frame (surface / --line hairline / --r-lg / soft shadow) now comes from .card-frame at all widths
     (was a mobile-only --shadow-pop-sm stamp here; Steven chose quiet/soft tool cards). Gate cards override below. */
  .ev-card h2{font-family:var(--font-display);font-size:var(--fs-d4)}

  /* gate cards read as quiet/locked: flat, dashed --locked border, dimmed — no stamp */
  .ev-card.ev-gate{box-shadow:none;border:1.5px dashed var(--locked-bd);background:var(--surface-2)}

  /* the brand hero keeps the stamp so it reads as the identity card */
  .ev-brand{border-radius:var(--r-xl);box-shadow:var(--shadow-pop);border:2px solid var(--ink)}
  .ev-brand__av{width:44px;height:44px}

  /* inputs: 16px (no iOS zoom), 1.5px --line border, radius --r-lg, ≥46px tall */
  .ev-field input,.ev-field textarea,.ev-link input{
    font-size:16px;min-height:46px;border-radius:var(--r-lg);border-width:1.5px}
  .ev-field .flabel{font-size:13.5px}

  /* the type picker: 2-across chip-cards with a comfortable tap target */
  .ev-typegrid{grid-template-columns:1fr 1fr;gap:10px}
  .ev-typecard{min-height:64px;border-radius:var(--r);border-width:1.5px}
  .ev-typecard.is-on{box-shadow:var(--shadow-pop-sm)}

  /* stat tiles: card + stamp, uppercase letterspaced eyebrow, big Bricolage numeral, 2-across */
  .ev-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .ev-tile{border-radius:var(--r);box-shadow:var(--shadow-pop-sm);padding:14px 16px;border:1.5px solid var(--line)}
  .ev-tile.is-pop{border-color:var(--ink)}
  .ev-tile__n{font-size:30px;line-height:1}
  .ev-tile__l{text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-eyebrow);margin-top:6px}

  /* the invite-link row stacks: full-width readonly field over full-width actions */
  .ev-link{gap:10px}
  .ev-link input{flex:1 1 100%}
  .ev-link .btn,.ev-link .btn-outline{flex:1 1 0;min-height:48px}

  /* the primary create button: full-bleed, 52px, the stamp already lives on .btn */
  #ev-create.btn{width:100%;min-height:52px;border-radius:var(--r);font-size:16px}

  /* disclosure summaries get a 48px tap row */
  details.disclosure>summary{min-height:48px}
}

/* the async RSVP + porch reads render skeletons (skeleton.css) while loading — geometry mirrors the loaded
   layout so there's zero shift. Reduced-motion turns the shimmer off (handled in skeleton.css). */
.ev-sk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 12px}
@media(min-width:560px){.ev-sk-tiles{grid-template-columns:repeat(3,1fr)}}
.ev-sk-guests{margin:6px 0 0}

/* EVENT-PAGE-REDLINE-v1 — the Public page card entry + the "Make it yours" designer sheet (app tokens; this is the
   in-app tool, so the app token law applies — the GUEST page at /e/{token} has its own brand-driven CSS). */
.ev-public{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.ev-public__sw{width:22px;height:22px;flex:0 0 auto;border-radius:6px;background:var(--accent,#2238FF);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ev-public__cap{font-size:13px;color:var(--muted,#56535F)}
.cvz-grp{margin:0 0 16px}
.cvz-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#56535F);margin:0 0 8px}
.cvz-chips{display:flex;gap:8px;flex-wrap:wrap}
.cvz-chip{min-height:44px;padding:0 18px;border:1.5px solid var(--line-strong,#C9C4B6);border-radius:var(--r-pill,999px);background:var(--surface,#fff);color:var(--ink,#121016);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cvz-chip.is-on{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-strong,#1A2BD6)}
.cvz-chip:focus-visible,.cvz-swatch:focus-visible,.cvz-step__b:focus-visible{outline:3px solid var(--accent,#2238FF);outline-offset:2px}
.cvz-sw{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.cvz-swatch{width:40px;height:40px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;padding:0}
.cvz-swatch.is-on{border-color:var(--ink,#121016);box-shadow:inset 0 0 0 2px var(--surface,#fff)}
.cvz-hex{width:140px;text-transform:uppercase}
.cvz-note{margin:0 0 16px;font-size:12.5px;line-height:1.45;color:var(--muted,#56535F)}
.cvz-step{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line-strong,#C9C4B6);border-radius:var(--r-pill,999px);overflow:hidden}
.cvz-step__b{width:46px;height:46px;border:0;background:var(--surface,#fff);color:var(--ink,#121016);font-size:22px;line-height:1;cursor:pointer}
.cvz-step__v{min-width:84px;text-align:center;font-weight:700;font-size:15px}
.cvz-tog{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;color:var(--ink,#121016);cursor:pointer}
.cvz-tog input{width:20px;height:20px;accent-color:var(--accent,#2238FF)}

/* EVENT-PAGE-REDLINE-v1 §1 — the hero photo drop/browse control in the Customize sheet. */
.cvz-photo{width:100%;display:flex;align-items:center;gap:14px;padding:12px;border:1.5px dashed var(--line-strong,#C9C4B6);border-radius:var(--r-lg,16px);background:var(--surface,#fff);cursor:pointer;text-align:left;font:inherit}
.cvz-photo.is-drag{border-color:var(--accent,#2238FF);background:var(--accent-wash,#F5F7FF)}
.cvz-photo__prev{width:56px;height:70px;flex:0 0 auto;border-radius:8px;background:var(--surface-sunken,#EFECE2) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cvz-photo__prev.is-set{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cvz-photo__cta{font-size:15px;font-weight:600;color:var(--accent-strong,#1A2BD6)}
.cvz-photo__row{display:flex;align-items:center;gap:12px;min-height:36px;margin:6px 0 0}
.cvz-photo__msg{font-size:13px;color:var(--muted,#56535F)}

/* EVENT-PAGE-REDLINE-v1 §3 — the in-app preview route: full-screen, the live guest page in an iframe under a top bar.
   z-index sits BELOW the §4.2 sheet (sheet.css scrim z-200) so Customize opens over the preview (live-behind-the-sheet). */
.evp-preview{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;background:var(--surface-sunken,#EFECE2)}
.evp-preview[hidden]{display:none}
.evp-bar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#E3E7ED)}
.evp-back{background:none;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--ink,#121016);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.evp-back span{font-size:24px;line-height:1}
.evp-hint{flex:1 1 auto;font-size:12.5px;color:var(--muted,#56535F);text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evp-cz{flex:0 0 auto}
.evp-frame{flex:1 1 auto;width:100%;border:0;background:var(--surface,#fff)}

.cvz-paidline{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--ink,#121016);word-break:break-word}