/* ═══════════════════════════════════════════════════════════════════════════
   ONE MINUTE INVITES - editor.css (one-document editor)

   Loaded by invite.php only in edit mode. Every rule is scoped under #omiEd
   so nothing can touch the invitation's own styles. Tokens derive from the
   invite's theme variables, so the chrome is theme-aware automatically.

   Sections:
     1 TOKENS + RESET     5 SHEETS            9 FIELD EDITORS
     2 GLASS + CHROME     6 LOOK SHEET       10 PUBLISH DIALOG
     3 CHIPS + FLAG       7 REWORD SHEET     11 REVEAL + POINTERS
     4 (reserved)         8 ADD SHEET
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. FIDELITY CONTRACT ──────────────────────────────────────────────── */
/* Edit mode only: the maker mark must never hijack a tap meant for
   editing. Guests keep the working link; this file never loads for them. */
#omiMark{ pointer-events:none }

/* The editor NEVER alters the invitation's document geometry. What the
   host edits is byte-identical to what guests receive. The chrome floats
   on top and DODGES (slides away) near the page bottom so the invite's
   own buttons are always reachable - see the scroll watcher in editor.js. */

/* ── 1. TOKENS + RESET ─────────────────────────────────────────────────── */
#omiEd{
  /* fixed neutral chrome: the editor's UI never tints with the scheme -
     the invitation is the colorful thing, the tools stay quiet */
  --paper:#F7F2E9;
  --ink:#2A2119;
  --card:#FFFFFF;
  --muted:color-mix(in srgb, var(--ink) 55%, var(--paper));
  --faint:color-mix(in srgb, var(--ink) 34%, var(--paper));
  --line:color-mix(in srgb, var(--ink) 14%, var(--paper));
  --accent:#B4552D; --accent-deep:#8F3D1E;
  --sel:color-mix(in srgb, #B4552D 12%, #fff);
  --serif:'Lora', Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* dark glass: papers are light by locked rule, so ink-dark chrome
     contrasts with EVERY scheme; light text rides on it */
  --glass:rgba(30,24,18,.78);
  --glassline:rgba(255,253,248,.18);
  --glasshadow:0 4px 18px rgba(20,14,10,.25);
  --chrome-ink:#FFFDF8;
  --chrome-muted:rgba(255,253,248,.80);
  font-family:var(--sans); font-size:16px; color:var(--ink);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
#omiEd, #omiEd *{ margin:0; padding:0; box-sizing:border-box }
#omiEd button{ font-family:inherit }

/* ── 2. GLASS + CHROME ─────────────────────────────────────────────────── */
#omiEd .glass{
  background:var(--glass); color:var(--chrome-ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--glassline); box-shadow:var(--glasshadow);
}
/* THE INSTRUMENT: all editing chrome is ONE bar, docked at the bottom.
   One material, one height, hairline-divided segments, the accent commit
   at its right end. One object cannot misalign with itself; it arrives
   as one piece after the invitation's entrance. */
/* corners: enter/exit top-left, the finish top-right. Tools live below. */
#omiEd .startover{
  position:fixed; top:calc(12px + env(safe-area-inset-top)); z-index:10;
  left:max(12px, calc(50% - 310px));
  font:600 12.5px var(--sans); text-decoration:none; color:var(--chrome-ink);
  display:flex; align-items:center; height:38px; padding:0 14px; border-radius:999px;
}
#omiEd .startover:hover{ color:#fff }
#omiEd .pub{
  position:fixed; top:calc(12px + env(safe-area-inset-top)); z-index:10;
  right:max(12px, calc(50% - 310px));
  border:0; background:var(--accent); color:#fff; font:700 14.5px var(--sans);
  height:44px; padding:0 20px; border-radius:12px; cursor:pointer;
  box-shadow:0 4px 16px rgba(180,85,45,.42), 0 1px 3px rgba(20,14,10,.25);
}
#omiEd .pub:hover{ background:var(--accent-deep) }
#omiEd .pub:active{ background:var(--accent-deep) }

/* THE TOOL BAR: one deck on every screen. Background, Font, and Shuffle
   are one fused cluster - the shuffle cap is physically attached to the
   two things it shuffles, which is what makes its meaning obvious. */
#omiEd .omibar{
  position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(0); z-index:10;
  width:min(calc(100% - 20px), 620px);
  display:flex; align-items:center; gap:8px; padding:8px;
  border-radius:18px; background:var(--glass); color:var(--chrome-ink);
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--glassline); box-shadow:0 8px 28px rgba(20,14,10,.32);
}
#omiEd .pickgroup{
  flex:1 1 auto; min-width:0; display:flex; align-items:stretch;
  background:rgba(255,253,248,.11); border-radius:12px; overflow:hidden;
}
#omiEd .barpick{
  flex:1 1 0; min-width:0; display:flex; align-items:center; gap:8px;
  height:48px; padding:0 9px 0 12px;
  background:none; border:0; cursor:pointer; text-align:left;
}
#omiEd .barpick .bp-txt{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:2px;
}
#omiEd .barpick .bp-c{
  flex:0 0 auto; display:flex; color:var(--chrome-muted);
}
#omiEd .barpick:hover .bp-c{ color:#fff }
#omiEd .barpick + .barpick{ border-left:1px solid var(--glassline) }
#omiEd .barpick:hover{ background:rgba(255,253,248,.10) }
#omiEd .barpick .bp-l{
  font:700 8.5px var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--chrome-muted);
}
#omiEd .barpick .bp-v{
  font:600 13px var(--sans); color:#fff; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#omiEd .shufflecap{
  flex:0 0 auto; width:46px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-left:1px solid var(--glassline);
  color:#fff; cursor:pointer;
}
#omiEd .shufflecap:hover{ background:rgba(255,253,248,.10) }
#omiEd .shufflecap:active .ic{ transform:rotate(180deg) }
#omiEd .shufflecap .ic{ display:flex; transition:transform .3s }
#omiEd .barverb{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px;
  font:600 13.5px var(--sans); color:#fff; cursor:pointer;
  background:rgba(255,253,248,.13); border:0; border-radius:12px;
  height:48px; padding:0 15px; white-space:nowrap;
}
#omiEd .barverb:hover{ background:rgba(255,253,248,.22) }
#omiEd .barverb:active{ transform:translateY(1px) }
#omiEd .barverb .ic{ font-size:14px; line-height:1; display:flex }
@media (max-width: 420px){
  #omiEd .barpick{ padding:7px 10px 0 }
  #omiEd .barverb{ padding:0 12px; font-size:13px }
  #omiEd .startover{ padding:0 11px; font-size:12px }
  #omiEd .pub{ padding:0 16px }
}

/* ── 3. CHIPS + FLAG ───────────────────────────────────────────────────── */
#omiEd .editchip{
  position:fixed; left:50%; transform:translateX(-50%); z-index:10;
  top:calc(62px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:8px; white-space:nowrap; max-width:calc(100vw - 24px);
  font:600 14.5px var(--sans); padding:12px 20px; border-radius:999px;
  background:var(--glass); color:var(--chrome-ink);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--glassline); box-shadow:0 4px 14px rgba(20,14,10,.28);
  opacity:0; pointer-events:none; transition:opacity .4s;
}
#omiEd .editchip svg{ flex:0 0 auto; display:block }
#omiEd .editchip.show{ animation:omiChipPulse 1.6s ease 0.5s 2 }
@keyframes omiChipPulse{
  0%,100%{ transform:translateX(-50%) scale(1) }
  50%{ transform:translateX(-50%) scale(1.05) }
}
#omiEd .editchip.show{ opacity:1; pointer-events:auto; cursor:pointer }

#omiEd .flag{
  position:fixed; left:50%; bottom:calc(130px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(6px); z-index:12; pointer-events:none;
  font:600 13.5px var(--sans); color:var(--ink);
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--glassline); box-shadow:var(--glasshadow);
  padding:9px 16px; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
#omiEd .flag.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ── 5. SHEETS ─────────────────────────────────────────────────────────── */
#omiEd .scrim{
  position:fixed; inset:0; z-index:14; background:rgba(34,30,26,.45);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
#omiEd .scrim.show{ opacity:1; pointer-events:auto }
#omiEd .scrim.ghost{ background:transparent }
#omiEd .sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--paper);
  border-radius:22px 22px 0 0; box-shadow:0 -8px 40px rgba(30,22,16,.22);
  transform:translateY(102%); transition:transform .3s cubic-bezier(.32,.72,.28,1);
  max-height:86dvh; display:flex; flex-direction:column;
}
#omiEd .sheet.open{ transform:translateY(0) }
#omiEd .sheet.peek{ max-height:56dvh }
#omiEd .sheethead{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:18px 18px 12px; position:relative;
  background:#2A2119; border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0;
}
#omiEd .sheethead .grab{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:2px; background:rgba(255,253,248,.28) }
#omiEd .sheethead h2{ flex:1; font:600 16px var(--sans); color:#FFFDF8 }
#omiEd .sheethead .x{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:0;
  background:rgba(255,253,248,.14); color:#FFFDF8; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#omiEd .sheethead .x:hover{ background:rgba(255,253,248,.24) }
#omiEd .sheetbody{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px 18px calc(18px + env(safe-area-inset-bottom));
}
@media(min-width:760px){
  #omiEd .sheet{ left:50%; right:auto; width:520px; transform:translate(-50%,102%) }
  #omiEd .sheet.open{ transform:translate(-50%,0) }
}

/* ── 6. LOOK SHEET ─────────────────────────────────────────────────────── */
#omiEd .zonelabel{
  font:700 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:14px 2px 6px;
}
#omiEd .famrow{
  display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-start;
  padding:2px 0 4px; margin-top:4px;
}
#omiEd .famchip{
  font:600 13px var(--sans); color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:999px; padding:9px 14px; cursor:pointer;
  white-space:nowrap;
}
#omiEd .famchip.on{ color:#fff; border-color:var(--accent); background:var(--accent) }
#omiEd .premhead{
  font:700 10px var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:#A9873F; text-align:left; margin:12px 2px 2px;
}
#omiEd .famchip.prem{ border-color:#CBA35C; color:#8A6B2F }
#omiEd .famchip.prem.on{ background:#B08A3E; border-color:#B08A3E; color:#fff }
#omiEd .fontpick{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
#omiEd .ic.rolling svg{ animation:omiRoll .7s linear infinite }
#omiEd .edinstr{
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  background:var(--sel); border:1.5px solid var(--accent); border-radius:14px;
  padding:16px 14px; margin-bottom:4px;
}
#omiEd .edinstr .ei-ic{ font-size:18px; line-height:1; color:var(--accent-deep) }
#omiEd .edinstr .ei-t{ font:600 15px var(--sans); color:var(--ink); margin-top:2px }
#omiEd .edinstr .ei-s{ font-size:12.5px; color:var(--muted); line-height:1.4 }
#omiEd .tonegrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
#omiEd .tonebtn{
  font:600 14px var(--sans); color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:12px; padding:14px 8px;
  cursor:pointer; text-align:center;
}
#omiEd .tonebtn:hover{ border-color:var(--accent) }
#omiEd .tonebtn.cur{ border-color:var(--accent); background:var(--sel); color:var(--accent-deep) }
#omiEd .tonebtn.busy{ opacity:.6 }
@keyframes omiRoll{ to{ transform:rotate(360deg) } }
#omiEd .seg{ display:flex; gap:7px; margin:14px 0 4px }
#omiEd .segbtn{
  flex:1; font:600 14.5px var(--sans); color:var(--muted); background:var(--card);
  border:1.5px solid var(--line); border-radius:11px; padding:11px; cursor:pointer;
}
#omiEd .segbtn.on{ color:var(--accent-deep); border-color:var(--accent); background:var(--sel) }
#omiEd .fam{
  margin:16px 2px 9px; font-size:12px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
#omiEd .fam.special{ color:var(--accent-deep) }
#omiEd .swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
#omiEd .swatch{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:6px 2px; border-radius:12px;
}
#omiEd .swatch.sel{ background:var(--sel) }
#omiEd .swatch .dot{
  width:42px; height:42px; border-radius:50%; background:var(--t);
  /* no layout border: gradients paint from the padding box, so a real
     border leaves a ring of base color at the rim. The hairline is an
     outer shadow instead, drawn OVER the edge - colors reach it fully. */
  border:0;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
  background-origin:border-box; background-clip:border-box;
}
#omiEd .swatch .dot.rainbow{ background:conic-gradient(#F6C6C7,#F8DCB8,#F6EFC0,#CBE5C5,#BFD9EE,#D8C6E6,#F6C6C7) }
#omiEd .swatch .nm{ font-size:11px; font-weight:600; color:var(--muted); line-height:1.2; text-align:center }
#omiEd .swatch.sel .nm{ color:var(--accent-deep); font-weight:700 }
#omiEd .swatch.sel .dot{
  box-shadow:0 0 0 2.5px var(--accent), 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 3px 10px rgba(20,14,10,.28);
}
#omiEd .fontgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:4px }
#omiEd .fontgrid .fam{ grid-column:1/-1 }
#omiEd .frow{
  background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:13px 8px; cursor:pointer; text-align:center;
}
#omiEd .frow.sel{ border-color:var(--accent); background:var(--sel) }
#omiEd .frow .s{ font-size:16.5px; color:#141210 }  /* fixed near-black: samples must be legible in every face */
#omiEd .lookhead{
  margin:16px 2px 8px; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-deep);
}

/* ── 7. REWORD SHEET ───────────────────────────────────────────────────── */
#omiEd .sheetp{ font-size:13.5px; color:var(--muted); margin:2px 2px 12px; line-height:1.5 }
#omiEd .rowbtn{
  display:block; width:100%; text-align:left; background:var(--card);
  border:1.5px solid var(--line); border-radius:12px;
  padding:13px 14px; margin-bottom:9px; cursor:pointer;
}
#omiEd .rowbtn:hover{ border-color:var(--accent) }
#omiEd .rowbtn.busy{ opacity:.6 }
#omiEd .rowbtn.cur{ border-color:var(--accent); background:var(--sel) }
#omiEd .curbadge{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-deep); background:var(--card); border:1px solid var(--accent);
  border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:2px;
}
#omiEd .rowbtn .rb-t{ display:block; font-weight:600; font-size:15px; color:var(--ink) }
#omiEd .rowbtn .rb-s{ display:block; font-size:13px; color:var(--muted); margin-top:2px; line-height:1.4 }

/* ── 8. ADD A SECTION: chips, catalog, one-question fill ───────────────── */
#omiEd .tsub{ font-size:12.5px; color:var(--muted); text-align:center; margin:6px 0 10px; line-height:1.4 }
#omiEd .tlead{ font-size:14.5px; color:var(--muted); line-height:1.5; margin-bottom:12px }
#omiEd .qlead{ font:600 17.5px var(--sans); color:var(--ink); line-height:1.35; margin-bottom:6px }
#omiEd .qhelp{ font:400 13.5px var(--sans); color:var(--muted); line-height:1.45; margin-bottom:12px }
#omiEd .qfoot{ font:400 12.5px var(--sans); color:var(--faint); text-align:center; margin:10px 0 2px }
#omiEd .addgrp{
  margin:14px 2px 8px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
#omiEd .trow{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:13px 14px; margin-bottom:8px; cursor:pointer;
}
#omiEd .trow .tck{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff;
}
#omiEd .trow .ttx{ flex:1 }
#omiEd .trow .ttx strong{ display:block; font-size:15px; font-weight:600; color:var(--ink) }
#omiEd .trow .ttx em{ display:block; font-size:12.5px; font-style:normal; color:var(--muted); margin-top:1px; line-height:1.35 }
#omiEd .trow.on{ border-color:var(--accent); background:var(--sel) }
#omiEd .trow.on .tck{ background:var(--accent); border-color:var(--accent) }
#omiEd .trow.on .tck::before{ content:'\2713' }
#omiEd .secrow{
  display:flex; align-items:center; gap:10px; width:100%;
  text-align:left; background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 13px; margin-bottom:7px; cursor:pointer;
}
#omiEd .secrow .sr-dot{
  flex:0 0 22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font:700 12px var(--sans); color:var(--muted);
  border:1.5px solid var(--line); background:none;
}
#omiEd .secrow .sr-t{ flex:1; font:600 14.5px var(--sans); color:var(--ink) }
#omiEd .secrow .sr-s{ font:400 11.5px var(--sans); color:var(--muted); white-space:nowrap }
#omiEd .secrow.on{ border-color:var(--accent); background:var(--sel) }
#omiEd .secrow.on .sr-dot{ background:var(--accent); border-color:var(--accent); color:#fff }
#omiEd .secrow.held .sr-dot{ border-style:dashed }
#omiEd .secrow:hover{ border-color:var(--accent) }
#omiEd .sharerow{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  margin:8px 0 18px; padding:14px 16px; background:var(--card); cursor:pointer;
  border:1.5px solid var(--line); border-radius:12px;
}
#omiEd .sharerow.on{ background:var(--sel); border-color:var(--accent) }
#omiEd .sr-right{ display:flex; align-items:center; gap:9px }
#omiEd .sr-state{ font:700 11px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--faint) }
#omiEd .sharerow.on .sr-state{ color:var(--accent-deep) }
#omiEd .sharerow .sr-lbl{ font:600 14px var(--sans); color:var(--ink) }
#omiEd .swtrack{
  position:relative; width:44px; height:26px; border-radius:999px;
  background:#D9D2C4; transition:background .18s; flex:0 0 auto;
}
#omiEd .swknob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(20,14,10,.3); transition:left .18s;
}
#omiEd .sharerow.on .swtrack{ background:var(--accent) }
#omiEd .sharerow.on .swknob{ left:21px }
#omiEd .gatep{
  font:400 14.5px var(--sans); color:#5A4F42; line-height:1.5;
  text-align:center; margin:6px 0 14px;
}
#omiEd .sharerow.on{ color:var(--accent-deep) }
#omiEd .empty{ color:var(--muted); font-size:14.5px; text-align:center; padding:20px }
#omiEd .tgo{
  position:sticky; bottom:0; padding:10px 0 2px;
  background:linear-gradient(to top, var(--paper) 55%, transparent);
}
#omiEd .tgobtn{
  width:100%; font:600 16px/1 var(--sans); padding:15px; border-radius:12px;
  border:0; background:var(--accent); color:#fff; cursor:pointer;
}
#omiEd .tgobtn:disabled{ opacity:.6 }
#omiEd .fill{ margin-bottom:11px }
#omiEd .flab{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
#omiEd .fill textarea{
  min-height:120px; font-size:16px;
  width:100%; font:16px/1.45 var(--sans); padding:12px 13px;
  border:1.5px solid var(--line); border-radius:11px; background:var(--card);
  color:var(--ink); outline:none; resize:vertical; min-height:58px;
}
#omiEd .fill textarea:focus{ border-color:var(--accent) }

/* ── 9. FIELD EDITORS ──────────────────────────────────────────────────── */
#omiEd .ed label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin:10px 0 6px;
}
#omiEd .ed input, #omiEd .ed textarea{
  width:100%; font:16px/1.45 var(--sans); padding:12px 13px;
  border:1.5px solid var(--line); border-radius:11px; background:var(--card);
  color:var(--ink); outline:none;
}
#omiEd .ed textarea{ resize:vertical; min-height:64px }
#omiEd .ed input:focus, #omiEd .ed textarea:focus{ border-color:var(--accent) }
#omiEd .linkpair{ display:flex; gap:8px }
#omiEd .linkpair > *{ flex:1 }
#omiEd .row2{ display:flex; gap:8px }
#omiEd .row2 > *{ flex:1 }
#omiEd .err{ display:none; color:#8a2f2f; font-size:13.5px; margin:8px 0 0 }
#omiEd .err.show{ display:block }
#omiEd .save{
  width:100%; font:600 15.5px var(--sans); padding:14px; border:0; border-radius:12px;
  background:var(--accent); color:#fff; cursor:pointer; margin-top:14px;
}
#omiEd .remove{
  display:block; margin:10px auto 0; font:600 13.5px var(--sans); color:#8a2f2f;
  background:none; border:0; cursor:pointer;
}

/* ── 10. PUBLISH DIALOG ────────────────────────────────────────────────── */
#omiEd .done{
  position:fixed; inset:0; z-index:25; background:rgba(34,30,26,.55);
  display:none; align-items:flex-end; justify-content:center;
}
#omiEd .done.show{ display:flex }
#omiEd .done .box{
  background:var(--card); border-radius:26px 26px 0 0; width:100%;
  padding:32px 24px calc(30px + env(safe-area-inset-bottom));
  max-height:88dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#omiEd .done h3{ font-family:var(--serif); font-weight:600; font-size:28px; margin-bottom:8px; text-align:center; color:#1E1A16 }
#omiEd .done p{ color:#6E6258; font-size:16px; line-height:1.45; margin-bottom:20px; text-align:center }
#omiEd .done .lbl{
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-deep); margin:20px 0 8px;
}
#omiEd .done .link{ display:flex; gap:9px }
#omiEd .done .urlrow{ margin:14px 0 16px }
#omiEd .done .urlrow input{ font-weight:600; color:var(--accent-deep) }
#omiEd .done .link input{
  flex:1; min-width:0; border:1.5px solid #E4DCD1; background:#fff;
  border-radius:13px; padding:15px; font:16px var(--sans); color:#1E1A16; outline:none;
}
#omiEd .done .link input:focus{ border-color:var(--accent) }
#omiEd .done .link button{
  flex:0 0 auto; border:1.5px solid var(--line); background:var(--card);
  font:600 14px var(--sans); padding:0 16px; border-radius:13px; cursor:pointer;
  color:var(--accent-deep);
}
#omiEd .done .hintline{ font-size:13.5px; color:#6E6258; line-height:1.45; margin-top:10px }
#omiEd .done .open{
  display:block; width:100%; background:var(--accent); color:#fff; text-decoration:none;
  border:0; cursor:pointer; padding:17px; border-radius:14px;
  font:600 17px var(--sans); text-align:center; margin:16px 0 0;
}
#omiEd #pubStep2 .open{ margin-top:0 }
#omiEd .done .sentline{ font-size:14px; font-weight:600; color:var(--accent-deep); margin:10px 0 4px; text-align:center }
#omiEd .quietbtn{
  display:block; width:100%; margin-top:9px; padding:12px;
  background:#fff; border:1.5px solid #E4DCCE; border-radius:12px;
  font:600 14.5px var(--sans); color:#5A4F42; cursor:pointer; text-align:center;
}
#omiEd .quietbtn:hover{ border-color:var(--accent); color:var(--accent-deep) }
#omiEd .backedit{
  display:block; margin:16px auto 0; background:none; border:0; cursor:pointer;
  font:600 13px var(--sans); color:#8A7E6F; text-decoration:underline; text-underline-offset:3px;
}
#omiEd .backedit:hover{ color:var(--accent-deep) }
@media(min-width:700px){
  #omiEd .done{ align-items:center; padding:20px }
  #omiEd .done .box{ border-radius:22px; max-width:460px; padding:32px 28px 28px }
}

/* ── 11. REVEAL + POINTERS ─────────────────────────────────────────────── */
/* Written by hand OUTSIDE any prefix pattern: the reveal class lives on
   <html>, above #omiEd - a prefixed selector could never match it. */
/* THE ARRIVAL, final design: the invitation performs its own entrance
   (the same slide-up guests get - the "your invite was made" moment),
   with NO chrome on screen at all. When the entrance's own animation
   completes, every piece of chrome appears together in one 160ms fade.
   visibility:hidden means the blurred pills don't exist for the
   compositor until the flip, so they cannot stagger; 160ms is too
   short for per-element compositing to be perceptible. */
html.omi-instant #scrollClip, html.omi-instant #scrollClip.revealing{
  animation:none !important; transform:none !important; opacity:1 !important;
}
/* ALL chrome - the bar, both corners, the chip - is one unit: hidden by
   visibility (no compositor layers, nothing can stagger), then one
   graceful fade together. No element moves; nothing animates separately. */
html.omi-wait #omiEd{ visibility:hidden; opacity:0; pointer-events:none }
/* position+z-index pin the chrome group ABOVE the invitation (which uses
   z-index:10000) for the ENTIRE fade - partial opacity forms a stacking
   context, and without this the group rendered beneath the invite until
   opacity hit exactly 1, then popped to the front. Foreground first,
   then fade. */
#omiEd{ position:relative; z-index:20000; transition:opacity .24s ease, visibility 0s }
/* rapid-fire controls: touch-action:manipulation removes iOS double-tap
   zoom on the chrome, so Shuffle can be hammered without the page zooming */
#omiEd button, #omiEd .startover{ touch-action:manipulation }
/* the workshop frame's CHIN: Safari 26's bottom bar is transparent glass
   showing the page itself, so the page's bottom edge must BE the frame -
   otherwise a light scheme shines through and the bottom looks like it
   "changed". Phones only (coarse pointer); desktop has no home indicator. */
@media (pointer:coarse){
  #omiEd::before{
    content:''; position:fixed; left:0; right:0; bottom:0;
    height:calc(env(safe-area-inset-bottom) + 4px);
    background:#211A14; pointer-events:none; z-index:5;
  }
  /* while a drawer or dialog is open, the chin rises above it so the
     bottom edge stays workshop ink - iOS 26 shows page pixels there.
     Driven by a class toggled in openSheet/closeSheet, no :has needed */
  html.omi-drawer #omiEd::before{ z-index:30 }
}

#omiEd .point{
  position:fixed; z-index:12; font:600 13px var(--sans); color:#fff; background:var(--accent);
  padding:9px 14px; border-radius:11px; box-shadow:0 4px 14px rgba(20,14,10,.25);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
  pointer-events:none; max-width:78vw;
}
#omiEd .point.in{ opacity:1; transform:translateY(0) }
#omiEd .point.wide{ text-align:center }
#omiEd .point.wide.in{ transform:translateX(-50%) translateY(0) }
#omiEd .point::after{
  content:''; position:absolute; bottom:-5px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:var(--accent);
}
#omiEd .attn{ outline:2px solid var(--accent); outline-offset:2px }