/* ============================================================
 * event-operations.css — Event Operations console (v2.7.1)
 * Additive .eop-* layer. Light default (solid/high-contrast),
 * dark via html[data-theme="dark"]. Fonts inherit (Figtree/Jost).
 * ============================================================ */
.eop{--page:#FBFAF7;--strip:#F4F3ED;--surface1:#EAE8E0;--card:#F1EFE9;--well:#E9E7DF;--field:#E7E5DC;
  --ink:#1A1A1A;--ink2:#5C5C58;--ink3:#8A8778;--accent:#1A1A1A;--on:#FFFFFF;
  --border:rgba(17,17,17,.12);--border2:rgba(17,17,17,.22);
  --ok:#157038;--ok-bg:#E7F6EC;--warn:#B45309;--warn-bg:#FEF3E2;--info:#1D4ED8;--info-bg:#E7EEFE;
  --gold:#b45309;--gold-soft:rgba(212,175,55,.16);--gold-line:rgba(180,83,9,.4);
  --tint2:rgba(17,17,17,.08);--tint3:rgba(17,17,17,.13);--shadow:0 14px 34px rgba(17,17,17,.16);
  --sp:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.16,1,.3,1);
  max-width:1180px;margin:24px auto 60px;background:var(--page);color:var(--ink);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow);font-family:var(--font-body,'Figtree',sans-serif);line-height:1.5}
html[data-theme="dark"] .eop{--page:#403F3A;--strip:#33322E;--surface1:#383733;--card:#282723;--well:#232220;--field:#232220;
  --ink:#F8F8F6;--ink2:#C3C2B7;--ink3:#8A8778;--accent:#F2F2EF;--on:#26251F;
  --border:rgba(248,248,246,.14);--border2:rgba(248,248,246,.24);
  --ok:#81C995;--ok-bg:#243428;--warn:#FBCB65;--warn-bg:#332C1C;--info:#8AB4F8;--info-bg:#252C3A;
  --gold:#e7c25a;--gold-soft:rgba(212,175,55,.18);--gold-line:rgba(212,175,55,.5);
  --tint2:rgba(255,255,255,.08);--tint3:rgba(255,255,255,.13);--shadow:0 18px 48px rgba(0,0,0,.55)}
.eop *{box-sizing:border-box}
.eop h1,.eop h3,.eop h4{font-family:var(--font-heading,'Jost',sans-serif)}
.eop-i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.eop-hd{display:flex;align-items:center;gap:13px;padding:16px 20px;background:var(--strip);border-bottom:1px solid var(--border);flex-wrap:wrap}
.eop-hd .mk{width:34px;height:34px;border-radius:10px;background:var(--tint2);border:1px solid var(--border);color:var(--ink);display:flex;align-items:center;justify-content:center}
.eop-hd h1{font-size:1.05rem;margin:0;font-weight:700;letter-spacing:-.01em}
.eop-hd .subttl{font-size:.66rem;color:var(--ink3);font-weight:600;margin:1px 0 0}
.eop-sp{flex:1}
.eop-btn{height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--border2);background:var(--card);color:var(--ink);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:transform .18s var(--sp);text-decoration:none}
.eop-btn:hover{transform:translateY(-2px)}
.eop-btn.pri{background:var(--accent);color:var(--on);border-color:transparent}
.eop-perm{display:flex;align-items:center;gap:10px;padding:9px 20px;background:var(--surface1);border-bottom:1px solid var(--border);font-size:.79rem;flex-wrap:wrap}
.eop-perm .pill{font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--border2);background:var(--card);padding:3px 8px;border-radius:999px}
.eop-perm .who{font-weight:700}
.eop-perm a{color:var(--ink);font-weight:700;margin-left:auto}
.eop-nav{position:sticky;top:0;z-index:20;display:flex;gap:3px;padding:7px 14px;background:var(--strip);border-bottom:1px solid var(--border);overflow-x:auto}
.eop-nav a{white-space:nowrap;padding:9px 12px;border-radius:9px;color:var(--ink2);text-decoration:none;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.eop-nav a .eop-i{width:15px;height:15px}
.eop-nav a:hover{background:var(--tint2);color:var(--ink)}
.eop-nav a.on{background:var(--tint3);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.eop-mn{padding:20px;display:flex;flex-direction:column;gap:26px}
.eop-sec{scroll-margin-top:56px}
.eop-sec>h3{display:flex;align-items:center;gap:9px;font-size:1.02rem;font-weight:700;margin:0 0 12px}
.eop-sec>h3 .eop-i{width:19px;height:19px;color:var(--ink2)}
.eop-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:640px){.eop-chips{grid-template-columns:repeat(2,1fr)}}
.eop-chip{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.eop-chip .n{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;font-family:var(--font-heading,'Jost',sans-serif)}
.eop-chip .l{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-top:2px}
.eop-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eop-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:720px){.eop-grid,.eop-grid3{grid-template-columns:1fr}}
.eop-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:15px 16px;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.eop-card:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:var(--shadow)}
.eop-card h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:.92rem;font-weight:700}
.eop-card h4 .eop-i{width:16px;height:16px;color:var(--ink3)}
.eop-card .sub{font-size:.75rem;color:var(--ink3);margin:0 0 10px}
.eop-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--border)}
.eop-row:first-of-type{border-top:0}
.eop-row .c34{width:34px;height:34px;border-radius:10px;background:var(--tint2);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex:none}
.eop-row .rt{flex:1;min-width:0}.eop-row .rt .t{font-size:.85rem;font-weight:600}.eop-row .rt .s{font-size:.72rem;color:var(--ink3)}
.eop-tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.eop-tbl th{text-align:left;font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--border2)}
.eop-tbl td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
.eop-ev{font-weight:700}.eop-mut{color:var(--ink3);font-size:.73rem}
.eop-st{font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
.eop-st.draft{background:var(--well);color:var(--ink3);border:1px solid var(--border2)}
.eop-st.pending{background:var(--warn-bg);color:var(--warn)}
.eop-st.approved{background:var(--info-bg);color:var(--info)}
.eop-st.published{background:var(--ok-bg);color:var(--ok)}
.eop-st.live{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.eop-life{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:11px 13px;background:var(--well);border:1px solid var(--border);border-radius:12px;margin-bottom:12px}
.eop-life .stp{font-size:.64rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--ink2)}
.eop-life .stp.now{background:var(--accent);color:var(--on);border-color:transparent}
.eop-life .aw{color:var(--ink3)}
.eop-ml{font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.eop-sw{width:46px;height:26px;border-radius:999px;background:var(--field);border:1px solid var(--border2);position:relative;cursor:pointer;flex:none;transition:background .2s}
.eop-sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ink2);transition:left .28s var(--sp),background .2s,transform .1s}
.eop-sw.on{background:var(--accent);border-color:transparent}.eop-sw.on::after{left:22px;background:var(--on)}
.eop-sw:active::after{transform:scaleX(1.18)}
.eop-sw.busy{opacity:.55;pointer-events:none}
.eop-swr{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--border)}
.eop-swr:first-of-type{border-top:0}.eop-swr .rt{flex:1}.eop-swr .rt .t{font-weight:600;font-size:.85rem}.eop-swr .rt .s{font-size:.72rem;color:var(--ink3)}
.eop-feed .fi{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:.79rem}
.eop-feed .fi:first-child{border-top:0}.eop-feed .dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);margin-top:6px;flex:none}
.eop-feed .m{color:var(--ink3);font-size:.7rem}
.eop-chart{width:100%;height:120px}.eop-chart rect{fill:var(--ink3)}.eop-chart line{stroke:var(--border)}
.eop-qa{display:flex;gap:9px;flex-wrap:wrap}
.eop-qa a,.eop-qa button{flex:1;min-width:130px;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--well);color:var(--ink);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:9px;text-decoration:none;transition:transform .18s var(--sp),border-color .18s}
.eop-qa a:hover,.eop-qa button:hover{transform:translateY(-2px);border-color:var(--border2)}
.eop-qa .c34{width:34px;height:34px;border-radius:10px;background:var(--tint2);color:var(--ink);display:flex;align-items:center;justify-content:center}
.eop-note{font-size:.72rem;color:var(--ink3);padding:2px 0}
.eop-empty{padding:16px;text-align:center;color:var(--ink3);font-size:.85rem;background:var(--well);border:1px dashed var(--border2);border-radius:12px}
.eop-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#1A1A2E;color:#fff;font-size:.82rem;font-weight:600;padding:11px 18px;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:all .25s;z-index:99999}
.eop-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.eop-noaccess{max-width:520px;margin:60px auto;text-align:center;padding:30px;background:var(--card,#F1EFE9);border:1px solid rgba(17,17,17,.12);border-radius:16px}
.eop :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Setup hub cards + section subnav (v2.7.2) ---- */
.eop-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media(max-width:720px){.eop-cards{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.eop-cards{grid-template-columns:1fr}}
.eop-cardlink{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.eop-cardlink:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:var(--shadow)}
.eop-cardic{width:44px;height:44px;border-radius:12px;background:var(--tint2);color:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.eop-cardic .eop-i{width:22px;height:22px}
.eop-cardlink h4{margin:0;font-size:1rem;font-weight:700}
.eop-cardlink p{margin:0;font-size:.78rem;color:var(--ink3);line-height:1.45}
.eop-cardgo{margin-top:8px;font-size:.75rem;font-weight:700;color:var(--gold);display:inline-flex;align-items:center;gap:5px}
.eop-subnav{display:flex;align-items:center;gap:10px;padding:14px 20px 0}
.eop-back{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border2);background:var(--card);color:var(--ink);text-decoration:none;font-size:.8rem;font-weight:700}
.eop-back:hover{background:var(--tint2)}
.eop-crumb{font-size:.82rem;color:var(--ink3);font-weight:600}

/* ---- value controls (v2.9.2) ---- */
.eop-vrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--border)}
.eop-vrow:first-of-type{border-top:0}
.eop-vrow .rt{flex:1}.eop-vrow .rt .t{font-weight:600;font-size:.85rem}.eop-vrow .rt .s{font-size:.72rem;color:var(--ink3)}
.eop-inp{height:36px;border:1px solid var(--border2);border-radius:9px;background:var(--field);color:var(--ink);font:inherit;font-size:.85rem;padding:0 11px;width:100%}
.eop-inp.ctl{width:170px;flex:none}
.eop-inp:focus{outline:2px solid var(--accent);outline-offset:1px}
select.eop-inp{cursor:pointer}
.eop-status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.eop-status.off{background:var(--well);color:var(--ink3)}
.eop-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
@media(max-width:560px){.eop-kv{grid-template-columns:1fr 1fr}}
.eop-kvi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.eop-kvi .n{font-size:1.4rem;font-weight:800;font-family:var(--font-heading,'Jost',sans-serif)}
.eop-kvi .l{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin-top:2px}

/* ===== Events console (v2.9.2) — full front-end CRUD ===== */
.eop-evbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.eop-btn.primary{background:var(--accent);color:var(--on);border-color:transparent;font-weight:700}
.eop-btn.primary:hover{filter:brightness(1.04)}
.eop-evsearch{position:relative;flex:1 1 160px;min-width:140px}
.eop-evsearch .eop-i{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink3)}
.eop-evsearch input{width:100%;height:36px;border:1px solid var(--border2);border-radius:9px;background:var(--field);color:var(--ink);font:inherit;font-size:.85rem;padding:0 11px 0 32px}
.eop-evfilters{display:flex;gap:6px;flex-wrap:wrap}
.eop-evfilters .eop-chip,.eop-aud .eop-chip{padding:7px 12px;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--card);border:1px solid var(--border2);color:var(--ink2);cursor:pointer;transition:transform .15s var(--sp),background .15s,color .15s}
.eop-evfilters .eop-chip.on,.eop-aud .eop-chip.on{background:var(--accent);color:var(--on);border-color:transparent}
.eop-evfilters .eop-chip:active,.eop-aud .eop-chip:active{transform:scale(.95)}
.eop-evmetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:16px}
.eop-m{background:var(--well);border:1px solid var(--border);border-radius:12px;padding:11px 13px}
.eop-m .k{font-size:.7rem;color:var(--ink3)}
.eop-m .v{font-size:1.5rem;font-weight:800;font-family:var(--font-heading,'Jost',sans-serif);margin-top:2px}
.eop-evhead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.eop-evhead h4{font-size:.95rem}
.eop-evwrap{overflow:auto}
.eop-evtbl{width:100%;border-collapse:collapse}
.eop-evtbl td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.eop-evtbl tr:last-child td{border-bottom:none}
.eop-evrow{transition:background .15s}
.eop-evrow:hover{background:var(--well)}
.eop-evmain{display:flex;align-items:center;gap:11px}
.eop-evthumb{width:42px;height:42px;border-radius:9px;background:var(--well);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.eop-evthumb img{width:100%;height:100%;object-fit:cover}
.eop-evthumb .eop-i{width:20px;height:20px;color:var(--ink3)}
.eop-evtxt{min-width:0;display:flex;flex-direction:column;gap:1px}
.eop-evtitle{font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:7px}
.eop-evsub{font-size:.73rem;color:var(--ink2)}
.eop-evby{font-size:.68rem;color:var(--ink3);display:inline-flex;align-items:center;gap:4px;margin-top:1px}
.eop-evby .eop-i{width:12px;height:12px}
.eop-evby b{font-weight:700;color:var(--ink2)}
.eop-livetag{font-size:.55rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.eop-evact{display:flex;gap:5px;justify-content:flex-end}
.eop-ib{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:var(--card);color:var(--ink3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s var(--sp),background .15s,color .15s}
.eop-ib .eop-i{width:16px;height:16px}
.eop-ib:hover{color:var(--ink);background:var(--well)}
.eop-ib:active{transform:scale(.92)}
.eop-ib.danger:hover{color:#fff;background:#c0392b;border-color:transparent}
.eop-evform{margin-top:16px}
.eop-evformhead{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 14px;gap:10px}
.eop-evformhead h4{display:flex;align-items:center;gap:8px;font-size:1rem}
.eop-evformhead .eop-i{width:18px;height:18px;color:var(--ink2)}
.eop-evcreator{font-size:.72rem;color:var(--ink3);display:inline-flex;align-items:center;gap:5px}
.eop-evcreator b{color:var(--ink2);font-weight:700}
.eop-fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;margin-bottom:12px}
.eop-frow{margin-bottom:12px}
.eop-evform label{display:block;font-size:.72rem;color:var(--ink2);margin-bottom:5px;font-weight:600}
textarea.eop-inp{height:auto;padding:9px 11px;line-height:1.5;resize:vertical}
.eop-togline{display:flex;align-items:center;gap:10px;background:var(--well);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.eop-togline .tl{flex:1;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:7px}
.eop-togline .tl .eop-i{width:16px;height:16px;color:var(--ink3)}
.eop-aud{display:flex;flex-wrap:wrap;gap:6px}
.eop-drop{border:1.5px dashed var(--border2);border-radius:10px;background:var(--well);cursor:pointer;transition:border-color .15s;overflow:hidden;position:relative}
.eop-drop-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:16px;font-size:.72rem;color:var(--ink3);text-align:center}
.eop-drop-in .eop-i{width:22px;height:22px}
.eop-drop:hover{border-color:var(--accent)}
.eop-drop.has .eop-drop-in{display:none}
.eop-drop.has img{display:block;width:100%;height:96px;object-fit:cover}
.eop-drop img{display:none}
.eop-evfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;padding-top:14px;border-top:1px solid var(--border)}
.eop-seg{display:inline-flex;background:var(--well);border:1px solid var(--border);border-radius:10px;padding:3px}
.eop-seg button{border:none;background:transparent;color:var(--ink3);padding:7px 14px;border-radius:7px;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.eop-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.eop-permnote{display:flex;align-items:flex-start;gap:9px;margin-top:16px;background:var(--info-bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:.76rem;color:var(--ink2);line-height:1.5}
.eop-permnote .eop-i{width:18px;height:18px;color:var(--info);flex:none;margin-top:1px}
.eop-evtoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--accent);color:var(--on);padding:10px 18px;border-radius:999px;font-size:.8rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--sp);z-index:99999;box-shadow:var(--shadow)}
.eop-evtoast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.eop-busy{opacity:.55;pointer-events:none}

/* ===== Full EEM editor (v2.9.2) ===== */
.eop-fsec{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:800;color:var(--ink);margin:20px 0 6px;padding-top:16px;border-top:1px solid var(--border)}
.eop-fsec .eop-i{width:17px;height:17px;color:var(--ink3)}
.eop-evform .req{color:#e5484d;font-weight:800}
.eop-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink3);font-size:.66rem}
.eop-fg.g2{grid-template-columns:1fr 1fr}
.eop-fg.g3{grid-template-columns:1fr 1fr 1fr}
.eop-accgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.eop-acc{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--well)}
.eop-acc .ic{width:32px;height:32px;border-radius:8px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none}
.eop-acc .ic .eop-i{width:17px;height:17px;color:var(--ink2)}
.eop-acc .t{flex:1;font-size:.85rem;font-weight:700;display:flex;flex-direction:column;line-height:1.25}
.eop-acc .t .s{font-size:.66rem;color:var(--ink3);font-weight:400}
.eop-sw.acc.on{background:var(--info)}
@media(max-width:640px){.eop-fg.g2,.eop-fg.g3,.eop-accgrid{grid-template-columns:1fr}}

/* ===== Events sub-tabs (v2.9.2) — All events / Add event ===== */
.eop-evtabs{display:inline-flex;gap:4px;background:var(--well);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:16px}
.eop-evtab{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;color:var(--ink3);padding:9px 16px;border-radius:9px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:transform .15s var(--sp),background .15s,color .15s}
.eop-evtab .eop-i{width:16px;height:16px}
.eop-evtab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.eop-evtab:active{transform:scale(.97)}
.eop-ev-view{display:none}
.eop-ev-view.on{display:block;animation:eopfade .2s var(--ease)}
@keyframes eopfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== Sectioning / grouping / spacing polish (v2.9.2) ===== */
/* Event editor: each section is now its own titled card ("box"). */
.eop-evform.eop-card{background:transparent;border:none;box-shadow:none;padding:0}
.eop-fgroup{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:14px;overflow:hidden}
.eop-fgroup .eop-fsec{margin:0;padding:12px 16px;border-top:none;border-bottom:1px solid var(--border);border-radius:0;background:var(--well);font-size:.8rem;letter-spacing:.01em}
.eop-fgroup .eop-fsec .eop-i{color:var(--ink2)}
.eop-fbody{padding:16px}
.eop-fbody > *:last-child{margin-bottom:0}
.eop-fbody .eop-fg,.eop-fbody .eop-frow{margin-bottom:14px}
.eop-fbody .eop-fg:last-child,.eop-fbody .eop-frow:last-child{margin-bottom:0}
.eop-fbody .eop-togline{margin-bottom:8px}
.eop-fbody .eop-togline:last-child{margin-bottom:0}
.eop-evformhead{margin:2px 2px 14px}
/* Consistent field sizing + label rhythm. */
.eop-evform label{margin-bottom:6px;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.eop-inp{height:38px;font-size:.86rem}
textarea.eop-inp{height:auto;min-height:66px}
.eop-evform .eop-fg{gap:12px 14px}
/* Console-wide spacing: consistent card rhythm + section headers in other spaces. */
.eop-card{margin-bottom:14px}
.eop-card > h4{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.eop-card > h4 .eop-i{width:17px;height:17px;color:var(--ink3)}
.eop-vrow,.eop-swr{padding:10px 0}
.eop-vrow + .eop-vrow,.eop-swr + .eop-swr{border-top:1px solid var(--border)}
/* Section hub cards: even grid + breathing room. */
.eop-cards{gap:12px}
.eop-evmetrics{margin-bottom:18px}
.eop-evbar{margin-bottom:16px}
@media(max-width:640px){.eop-fbody{padding:13px}}

/* ===== Broadcast console — chrome / feature checkbox grids (v2.9.2) ===== */
.eop-chkgrid{margin-top:14px}
.eop-chkh{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin:0 0 8px}
.eop-chks{display:flex;flex-wrap:wrap;gap:7px}
.eop-chk{display:inline-flex;align-items:center;gap:7px;background:var(--well);border:1px solid var(--border);border-radius:9px;padding:7px 11px;font:inherit;font-size:.78rem;color:var(--ink2);cursor:pointer;transition:transform .12s var(--sp),background .15s,color .15s,border-color .15s}
.eop-chk .bx{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--border2);flex:none;position:relative;transition:all .15s}
.eop-chk:active{transform:scale(.96)}
.eop-chk.on{color:var(--ink);border-color:var(--accent);background:var(--card)}
.eop-chk.on .bx{background:var(--accent);border-color:transparent}
.eop-chk.on .bx::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--on);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ===== Shared calendar + time (GMT) picker — Events & Broadcast (v2.9.2) ===== */
.eop-dt{position:relative;margin-bottom:14px}
.eop-dt-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.eop-dt-cal{flex:1 1 150px;display:flex;align-items:center;gap:9px;height:38px;border:1px solid var(--border2);background:var(--field);border-radius:9px;padding:0 12px;font:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s}
.eop-dt-cal:hover{border-color:var(--accent)}
.eop-dt-ic{display:inline-flex;flex:none}
.eop-dt-ic .eop-i{width:17px;height:17px;color:var(--ink2)}
.eop-dt-lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eop-dt-time{display:flex;align-items:center;gap:6px;height:38px;border:1px solid var(--border2);background:var(--field);border-radius:9px;padding:0 10px}
.eop-dt-time select{height:30px;border:none;background:transparent;color:var(--ink);font:inherit;font-size:.85rem;padding:0 2px;cursor:pointer}
.eop-dt-colon{color:var(--ink3)}
.eop-dt-gmt{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-left:2px}
.eop-dt-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:280px;max-width:92vw;background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.eop-dt-pop[hidden]{display:none}
.eop-dt-pophd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.eop-dt-pophd b{font-size:.9rem;font-weight:700}
.eop-dt-nav{border:none;background:transparent;color:var(--ink2);cursor:pointer;width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1}
.eop-dt-nav:hover{background:var(--well);color:var(--ink)}
.eop-dt-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:.62rem;color:var(--ink3);text-align:center;margin-bottom:3px}
.eop-dt-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.eop-dt-grid button{border:none;background:transparent;color:var(--ink);border-radius:8px;padding:7px 0;font:inherit;font-size:.8rem;cursor:pointer}
.eop-dt-grid button:hover{background:var(--well)}
.eop-dt-grid button.on{background:var(--accent);color:var(--on);font-weight:800}
.eop-dt-grid button.today{box-shadow:inset 0 0 0 1px var(--border2)}
.eop-dt-clear{margin-top:8px;width:100%;border:1px solid var(--border);background:var(--well);color:var(--ink2);border-radius:8px;padding:7px;font:inherit;font-size:.74rem;cursor:pointer}
.eop-dt-clear:hover{color:var(--ink)}
/* Let the calendar popover escape the section cards (were overflow:hidden). */
.eop-fgroup{overflow:visible}
.eop-fgroup .eop-fsec{border-radius:13px 13px 0 0}
.eop-fbody{position:relative}

/* ===== Gallery manager (v2.9.2) ===== */
.eop-glgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.eop-glcard{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--well)}
.eop-glcard .im{aspect-ratio:4/3;position:relative;background:var(--card)}
.eop-glcard .im img{width:100%;height:100%;object-fit:cover;display:block}
.eop-glcard .im button{position:absolute;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.eop-glcard .im .x{top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:14px}
.eop-glcard .im .star{bottom:5px;left:5px;width:26px;height:26px;border-radius:7px;background:rgba(0,0,0,.5);color:#fff}
.eop-glcard .im .star.on{background:var(--accent);color:var(--on)}
.eop-glcard .im .drag{top:5px;left:5px;background:transparent;color:rgba(255,255,255,.9);cursor:grab}
.eop-glcard input{width:100%;box-sizing:border-box;border:none;border-top:1px solid var(--border);background:transparent;color:var(--ink);font:inherit;font-size:.75rem;padding:6px 8px}
.eop-glcard input.alt{color:var(--ink2)}
.eop-glcard.dragging{opacity:.45}

/* ============================================================
 * v2.15.0 — Setup consolidation additions
 * ============================================================ */
/* Read-only treatment: viewers without the write permission see the real
 * state but cannot operate the controls (the server enforces regardless). */
.eop-ro .eop-sw,.eop-ro .eop-inp,.eop-ro .eop-btn{pointer-events:none;opacity:.55}
.eop-ro .eop-btn#eop-bible-test{pointer-events:auto;opacity:1} /* testing is a read */
.eop-vrow--area{align-items:flex-start}
.eop-vrow--area textarea.eop-inp{flex:1;min-width:min(340px,100%);resize:vertical;line-height:1.45;padding:9px 11px;height:auto}
.eop-vrow .eop-inp[type="text"]{flex:1;min-width:min(260px,100%)}
/* Per-service chat overrides grid (event editor) */
.eop-chatov{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.eop-chatov-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--well)}
.eop-chatov-row .ic{width:22px;text-align:center;flex:none}
.eop-chatov-row .t{flex:1;font-size:.76rem;font-weight:600;min-width:0}
.eop-chatov-row .t small{display:block;color:var(--ink3);font-size:.62rem;font-weight:500}
.eop-chatov-row select{width:104px;flex:none;height:32px;font-size:.72rem}
/* Service-flow stage editor */
.eop-flow-rows{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.eop-flow-row{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:10px;padding:7px 9px;background:var(--well)}
.eop-flow-row .grip{cursor:grab;color:var(--ink3);font-size:.8rem;letter-spacing:-2px;flex:none;user-select:none}
.eop-flow-row .fic{width:52px;text-align:center;flex:none}
.eop-flow-row .flb{flex:1;min-width:110px}
.eop-flow-row .fds{flex:2;min-width:140px}
.eop-flow-row .fmn{width:70px;flex:none}
.eop-flow-row .mnl{font-size:.66rem;color:var(--ink3);flex:none}
@media(max-width:640px){.eop-flow-row{flex-wrap:wrap}.eop-flow-row .fds{min-width:100%}}

/* ============================================================
 * v2.17.3 — visual emoji picker rows (Setup → Chat → Emoji).
 * Chosen set on top as removable chips, then search + category
 * tabs + the grid. Blocked emoji read red and struck through;
 * chosen quick-reactions read gold. Dark mode paired throughout.
 * ============================================================ */
.eos-ep .eos-ep__wrap { width: 100%; min-width: 0; }
.eos-ep__chosen {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 40px; padding: 7px 8px; margin-bottom: 9px;
  border: 1px dashed rgba(127,127,127,.34); border-radius: 10px;
  background: rgba(127,127,127,.05);
}
.eos-ep__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 6px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(17,17,17,.14); background: var(--color-bg, #fff);
  font: inherit; font-size: 16px; line-height: 1;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, background .15s ease;
}
.eos-ep__chip i { font-style: normal; font-size: 13px; opacity: .5; }
.eos-ep__chip:hover { transform: translateY(-1px); }
.eos-ep[data-eos-ep-mode="block"] .eos-ep__chip { border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.08); }
.eos-ep[data-eos-ep-mode="block"] .eos-ep__chip:hover { border-color: #C0392B; }
.eos-ep[data-eos-ep-mode="pick"] .eos-ep__chip { border-color: rgba(180,83,9,.42); background: rgba(180,83,9,.10); }
.eos-ep__empty { font-size: 12px; color: rgba(127,127,127,.95); padding: 0 3px; }
.eos-ep__tools { display: flex; gap: 7px; margin-bottom: 8px; }
.eos-ep__q {
  flex: 1; min-width: 0; height: 36px; padding: 0 11px;
  border: 1px solid rgba(17,17,17,.14); border-radius: 9px;
  font: inherit; font-size: 13px; background: var(--color-bg, #fff); color: inherit;
}
.eos-ep__clear {
  flex: none; height: 36px; padding: 0 13px; cursor: pointer;
  border: 1px solid rgba(17,17,17,.14); border-radius: 9px;
  background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 600;
}
.eos-ep__clear:hover { background: rgba(17,17,17,.05); }
.eos-ep__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.eos-ep__tab {
  border: 0; background: rgba(127,127,127,.10); color: inherit; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  opacity: .72; transition: opacity .15s ease, background .15s ease;
}
.eos-ep__tab:hover { opacity: 1; }
.eos-ep__tab.is-on { opacity: 1; background: rgba(180,83,9,.14); color: #B45309; }
.eos-ep__grid {
  display: flex; flex-wrap: wrap; gap: 3px;
  max-height: 210px; overflow-y: auto; overscroll-behavior: contain;
  padding: 7px; border: 1px solid rgba(17,17,17,.12); border-radius: 10px;
  background: var(--color-bg, #fff);
}
.eos-ep__cell {
  width: 36px; height: 36px; flex: none; border: 0; background: transparent;
  border-radius: 8px; cursor: pointer; font-size: 19px; line-height: 1; position: relative;
  transition: background .13s ease, transform .16s cubic-bezier(.34,1.56,.64,1);
}
.eos-ep__cell:hover { background: rgba(127,127,127,.14); transform: scale(1.16); }
.eos-ep__cell:focus-visible { outline: 2px solid #B45309; outline-offset: 1px; }
.eos-ep[data-eos-ep-mode="block"] .eos-ep__cell.is-on { background: rgba(192,57,43,.14); opacity: .55; }
.eos-ep[data-eos-ep-mode="block"] .eos-ep__cell.is-on::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 2px; background: #C0392B; border-radius: 2px; transform: rotate(-20deg);
}
.eos-ep[data-eos-ep-mode="pick"] .eos-ep__cell.is-on { background: rgba(180,83,9,.18); box-shadow: inset 0 0 0 1.5px rgba(180,83,9,.55); }
.eos-ep__note { margin-top: 7px; font-size: 11.5px; color: rgba(127,127,127,.95); }
.eos-ep__note.is-warn { color: #C0392B; font-weight: 600; }
html[data-theme="dark"] .eos-ep__chip,
html[data-theme="dark"] .eos-ep__q,
html[data-theme="dark"] .eos-ep__grid { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .eos-ep__clear { border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .eos-ep__clear:hover { background: rgba(255,255,255,.08); }
@media (max-width: 640px) {
  .eos-ep__cell { width: 40px; height: 40px; }
  .eos-ep__grid { max-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .eos-ep__chip, .eos-ep__cell { transition: none; }
}


/* v2.18.2 - SETUP CONSOLE ON A PHONE. .eop-vrow is a flex row that never stacked at
   any width, so at 390px the control was squeezed to a sliver beside its label - and
   the textarea rule (min-width:min(340px,100%)) forced the row wider than the screen.
   Leaders run services from phones and tablets, so this has to work at 390. */
@media (max-width: 720px) {
  .eop-vrow { flex-direction: column; align-items: stretch; gap: 7px; }
  .eop-vrow .rt { flex: none; }
  .eop-vrow .eop-inp,
  .eop-vrow select.eop-inp,
  .eop-vrow .eop-inp.ctl,
  .eop-vrow--area textarea.eop-inp { width: 100%; min-width: 0; flex: none; }
  /* the v2.17.3 visual emoji picker must scroll INSIDE itself, never widen the page */
  .eos-ep__grid { max-width: 100%; overflow-x: hidden; }
  .eos-ep__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 16px: below it iOS zooms the page on focus and never zooms back */
  .eop-inp, .eop-vrow select.eop-inp, .eop-vrow--area textarea.eop-inp { font-size: 16px; }
  .eop-cards { grid-template-columns: 1fr !important; }
}


/* v2.20.1 - custom emoji manager (Setup -> Chat). Stacks on a phone via the v2.18.2 rules. */
.eos-ce-form { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.eos-ce-drop { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 14px;
  border: 2px dashed var(--eop-line, rgba(17,17,17,.16)); border-radius: 12px; cursor: pointer;
  transition: border-color .18s ease, background .18s ease; }
.eos-ce-drop:hover { border-color: var(--gold, #B45309); background: rgba(180,83,9,.06); }
.eos-ce-drop__ic { font-size: 22px; line-height: 1; opacity: .5; }
.eos-ce-drop__t { font-size: 12.5px; font-weight: 600; }
.eos-ce-drop__s { font-size: 11px; opacity: .6; }
.eos-ce-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.eos-ce-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eos-ce-fields label span { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.eos-ce-msg { font-size: 11.5px; min-height: 15px; }
.eos-ce-msg.is-bad { color: #C0392B; }
.eos-ce-msg.is-ok { color: #157038; }
.eos-ce-list { display: flex; flex-direction: column; }
.eos-ce-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--eop-line, rgba(17,17,17,.10)); }
.eos-ce-item__img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.eos-ce-item__n { flex: 1; min-width: 0; font-size: 12.5px; }
.eos-ce-item__n b { display: block; font-weight: 500; }
.eos-ce-item__n code { font-size: 10.5px; opacity: .6; font-family: ui-monospace, monospace; }
.eos-ce-item.is-off .eos-ce-item__img, .eos-ce-item.is-off .eos-ce-item__n { opacity: .42; }
.eos-ce-tog { width: 38px; height: 22px; border-radius: 999px; background: #B0ADA3; position: relative; border: 0; cursor: pointer; flex: none; transition: background .22s ease; }
.eos-ce-tog.is-on { background: #157038; }
.eos-ce-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .26s cubic-bezier(.34,1.56,.64,1); }
.eos-ce-tog.is-on::after { transform: translateX(16px); }
.eos-ce-del { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; opacity: .45; padding: 4px 6px; flex: none; }
.eos-ce-del:hover { opacity: 1; color: #C0392B; }
@media (max-width: 720px) { .eos-ce-fields { grid-template-columns: 1fr; } }


/* v2.23.1 - per-event live features (Setup -> Events -> edit). */
.eop-evf { border: 1px solid var(--eop-line, rgba(17,17,17,.12)); border-radius: 11px; padding: 11px 12px; margin-bottom: 10px; }
.eop-evf-h { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.eop-evf-modes { display: flex; gap: 3px; background: rgba(17,17,17,.05); padding: 3px; border-radius: 9px; }
.eop-evf-mode { flex: 1; border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 500; padding: 7px 5px; border-radius: 7px; cursor: pointer; color: inherit; opacity: .62; }
.eop-evf-mode.is-on { background: var(--eop-card, #fff); opacity: 1; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.eop-evf-aud { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--eop-line, rgba(17,17,17,.12)); }
.eop-evf-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .58; margin: 8px 0 6px; }
.eop-evf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.eop-evf-chip { font-size: 11px; padding: 5px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; border: 1px solid var(--eop-line, rgba(17,17,17,.14)); background: transparent; color: inherit; }
.eop-evf-chip.is-on { background: rgba(180,83,9,.12); border-color: #B45309; color: #B45309; font-weight: 600; }
.eop-evf-emails { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }
.eop-evf-hint { font-size: 10.5px; opacity: .62; margin: 6px 0 0; }
.eop-evf-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.eop-evf-row label { flex: 1; font-size: 12.5px; }
.eop-evf-row label small { display: block; font-size: 10.5px; opacity: .6; }
.eop-evf-row--danger { border-top: 1px solid rgba(192,57,43,.25); margin-top: 6px; padding-top: 10px; }
.eop-evf-clear { border-color: rgba(192,57,43,.4) !important; color: #C0392B !important; }
.eop-evf-tog { width: 38px; height: 22px; border-radius: 999px; background: #B0ADA3; position: relative; border: 0; cursor: pointer; flex: none; transition: background .22s ease; }
.eop-evf-tog.is-on { background: #157038; }
.eop-evf-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .26s cubic-bezier(.34,1.56,.64,1); }
.eop-evf-tog.is-on::after { transform: translateX(16px); }
@media (max-width: 720px) { .eop-evf-modes { flex-wrap: wrap; } .eop-evf-mode { flex: 1 0 46%; } }

/* ===========================================================================
   v2.44.0 — COLOUR, MOTION, AND THE SUBSECTION JUMP NAV
   ---------------------------------------------------------------------------
   Owner: "Introduce colors, interactive design elements, animations, hover
   effects, and subtle motion throughout the setup experience... add subsection
   navigation menus at the top of each section panel."

   Appended at the END of the sheet so it settles the cascade without needing
   !important on anything - the same reasoning that put the panel outline and
   the brand skin last in their own files.

   The warm stone surfaces are untouched. Colour arrives ON them: one accent
   per control space, carried from the hub card into the space it opens, so the
   colour tells you where you are rather than merely decorating.
   ========================================================================= */

/* ---- the nine accents. --a is the ink, --as the wash behind an icon ---- */
.eop[data-eop-space="events"]        { --a:#B45309; --as:rgba(180,83,9,.12) }
.eop[data-eop-space="attendance"]    { --a:#0F6E56; --as:rgba(15,110,86,.12) }
.eop[data-eop-space="chat"]          { --a:#185FA5; --as:rgba(24,95,165,.12) }
.eop[data-eop-space="studio"]        { --a:#5B4FC7; --as:rgba(91,79,199,.12) }
.eop[data-eop-space="broadcast"]     { --a:#993C1D; --as:rgba(153,60,29,.12) }
.eop[data-eop-space="communications"]{ --a:#993556; --as:rgba(153,53,86,.12) }
.eop[data-eop-space="reports"]       { --a:#5F5E5A; --as:rgba(95,94,90,.12) }
.eop[data-eop-space="gallery"]       { --a:#4F7A18; --as:rgba(79,122,24,.12) }
.eop[data-eop-space="bible"]         { --a:#3B6D11; --as:rgba(59,109,17,.12) }
/* The hub itself, and any space added later without a palette, fall back to the
   house gold rather than to nothing. An undeclared var() drops the WHOLE
   declaration, which would leave text unstyled rather than merely un-accented. */
.eop { --a:#B45309; --as:rgba(180,83,9,.12) }

/* ---- hub cards: a colour edge that draws in, and a lift ---- */
.eop-cardlink{position:relative;overflow:hidden;
  transition:transform .2s var(--motion-ease,cubic-bezier(.2,.7,.3,1)),
             box-shadow .2s var(--motion-ease,cubic-bezier(.2,.7,.3,1)),
             border-color .2s var(--motion-ease,cubic-bezier(.2,.7,.3,1))}
.eop-cardlink::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--a);transform:scaleY(0);transform-origin:top;
  transition:transform .28s var(--motion-ease,cubic-bezier(.2,.7,.3,1))}
.eop-cardlink:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(38,37,31,.13);border-color:var(--a)}
.eop-cardlink:hover::before{transform:scaleY(1)}
.eop-cardlink:active{transform:translateY(-1px) scale(.99)}
.eop-cardic{background:var(--as);color:var(--a);
  transition:transform .3s var(--motion-ease,cubic-bezier(.2,.7,.3,1))}
.eop-cardlink:hover .eop-cardic{transform:rotate(-7deg) scale(1.1)}
.eop-cardgo{color:var(--a);display:inline-flex;align-items:center;gap:4px;
  transition:gap .2s var(--motion-ease,cubic-bezier(.2,.7,.3,1))}
.eop-cardlink:hover .eop-cardgo{gap:9px}

/* Per-card accent on the HUB, so the grid is scannable by colour. The hub has
   no space of its own, so the nine values are pinned by position. */
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(1){--a:#B45309;--as:rgba(180,83,9,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(2){--a:#0F6E56;--as:rgba(15,110,86,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(3){--a:#185FA5;--as:rgba(24,95,165,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(4){--a:#5B4FC7;--as:rgba(91,79,199,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(5){--a:#993C1D;--as:rgba(153,60,29,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(6){--a:#993556;--as:rgba(153,53,86,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(7){--a:#5F5E5A;--as:rgba(95,94,90,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(8){--a:#4F7A18;--as:rgba(79,122,24,.12)}
.eop[data-eop-space="hub"] .eop-cards > .eop-cardlink:nth-child(9){--a:#3B6D11;--as:rgba(59,109,17,.12)}

/* ---- staggered entrance, capped past the 9th child: beyond that a stagger
   stops reading as polish and starts reading as lag ---- */
@keyframes eopIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eop-cards > .eop-cardlink{opacity:0;animation:eopIn .42s var(--motion-ease,cubic-bezier(.2,.7,.3,1)) forwards}
.eop-cards > .eop-cardlink:nth-child(1){animation-delay:.02s}
.eop-cards > .eop-cardlink:nth-child(2){animation-delay:.06s}
.eop-cards > .eop-cardlink:nth-child(3){animation-delay:.10s}
.eop-cards > .eop-cardlink:nth-child(4){animation-delay:.14s}
.eop-cards > .eop-cardlink:nth-child(5){animation-delay:.18s}
.eop-cards > .eop-cardlink:nth-child(6){animation-delay:.22s}
.eop-cards > .eop-cardlink:nth-child(7){animation-delay:.26s}
.eop-cards > .eop-cardlink:nth-child(8){animation-delay:.30s}
.eop-cards > .eop-cardlink:nth-child(n+9){animation-delay:.34s}

/* ---- the jump nav. Option A, as chosen: sticky on every width ---- */
/* v2.44.0 — WRAPS, never scrolls sideways. A subsection you have to swipe to
   find is a subsection you do not know exists. Sticky is gone with it: now that
   only one card shows at a time there is nothing tall enough to scroll past. */
/* v2.44.1 — SIZED UP, on the owner's read of v2.44.0: the first pass optimised
   for the fewest pixels and landed smaller than the controls it sits above,
   which made the primary navigation of the page look like a footnote.
   Type goes 11.5 -> 12.5px and the tap target 26 -> 31px. A 13px/33px version
   was built and shown first; the owner chose this half-step, so the menu reads
   clearly without starting to look like a toolbar. It is still a MENU: every
   pixel it takes is a pixel of settings pushed down the page. */
.eop-jump{display:flex;flex-wrap:wrap;gap:6px;padding:9px 2px 9px;margin:0 0 12px;
  background:var(--strip,#F4F3ED);border-bottom:1px solid var(--line,rgba(18,18,20,.12))}
.eop-jump[hidden]{display:none}
.eop-jbtn{border:1px solid var(--line,rgba(18,18,20,.12));background:#fff;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;
  border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;line-height:1.5;
  color:var(--fg2,#525252);cursor:pointer;white-space:nowrap;
  transition:background .18s var(--motion-ease,cubic-bezier(.2,.7,.3,1)),
             color .18s var(--motion-ease,cubic-bezier(.2,.7,.3,1)),
             border-color .18s var(--motion-ease,cubic-bezier(.2,.7,.3,1)),
             transform .18s var(--motion-ease,cubic-bezier(.2,.7,.3,1))}
.eop-jbtn:hover{border-color:var(--a);color:var(--fg,#17171A);transform:translateY(-1px)}
.eop-jbtn.on{background:var(--a);border-color:var(--a);color:#fff}
.eop-jbtn:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* The card you jumped to says so, briefly. Without it, a smooth scroll onto a
   card that looks like every other card leaves you unsure anything happened. */
.eop-card{transition:box-shadow .22s var(--motion-ease,cubic-bezier(.2,.7,.3,1)),
                     border-color .22s var(--motion-ease,cubic-bezier(.2,.7,.3,1))}
.eop-card:hover{box-shadow:0 5px 16px rgba(38,37,31,.08)}
/* v2.44.0 — the selected card fades in rather than flashing a border: it is
   the only card on screen, so nothing needs pointing at. */
@keyframes eopPane{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.eop-card.is-shown{animation:eopPane .26s var(--motion-ease,cubic-bezier(.2,.7,.3,1))}
/* v2.44.2 — EVERY node the tab layer hides, not just the cards.
   `hidden` only sets display:none in the BROWSER'S default stylesheet, and any
   author rule of equal specificity beats it. `.eop-card[hidden]` carried the
   !important the cards needed, but a subsection also owns the blocks that follow
   its card — and one of them, the gallery's `.eop-evfoot` (setup-render.php
   :1064), declares `display:flex`. So it ignored `hidden` completely and the
   "Save gallery" bar stayed on screen under every tab, next to a different
   subsection's save button. Scoped to the section, so it can only ever affect
   what this layer put the attribute on. */
.eop-card[hidden],
.eop-sec > [hidden]{display:none !important}
/* The card heading takes the accent on its ICON only, so the heading text keeps
   its own contrast against the card. */
.eop-card > h4 svg{color:var(--a)}

/* ---- controls inside a space take the accent too ---- */
.eop-sw.on{background:var(--a)}
.eop-btn.primary,.eop-btn.pri{background:var(--a);border-color:var(--a)}
.eop-inp:focus,.eop textarea:focus,.eop input[type="search"]:focus{
  border-color:var(--a);box-shadow:0 0 0 3px var(--as);outline:none}
.eop-seg button.on{background:var(--a);border-color:var(--a);color:#fff}

@media (prefers-reduced-motion:reduce){
  /* Kill BOTH the transition and the transform. platform.css:3010 taught this:
     clearing only the transition leaves the movement in place, it just snaps. */
  .eop-cardlink,.eop-cardlink:hover,.eop-cardic,.eop-cardlink:hover .eop-cardic,
  .eop-jbtn,.eop-jbtn:hover,.eop-card{transition:none !important;transform:none !important}
  .eop-cards > .eop-cardlink{animation:none !important;opacity:1}
  .eop-card.is-shown{animation:none !important}
  .eop-cardlink::before{transition:none !important}
}
@media (max-width:640px){
  /* Sticky on every width, as chosen. Tighter padding so it costs as little of
     a short screen as it can. */
  /* v2.44.1 — the phone gets the same step up, held back slightly. Eight
     readable labels cannot fit one line at 375px, so the question is only how
     many lines and how tall each is; the larger type is worth a taller row, a
     fourth line of chrome on a short screen is not. Still a BUTTON, so iOS will
     not zoom on it whatever the size. */
  /* MEASURED, not guessed. At 375px the HORIZONTAL padding decides the line
     count, not the type size: 12px horizontal put the eight labels on FOUR
     lines (156px, 19% of the screen); 10px puts them on three (116px, 14.3%)
     at the same type size and a 30px tap target, packing 3/3/2 rather than
     4/2/2 so the row reads as a block instead of a ragged tail.
     So the phone override now trims only the padding and the gap — the type
     stays the size it is everywhere else. That is the whole job it has. */
  .eop-jump{padding:8px 2px 9px;margin-bottom:10px;gap:5px}
  .eop-jbtn{font-size:12.5px;padding:5px 10px;line-height:1.45}
}


/* ===========================================================================
   v2.45.2 — EVENTS GETS THE SAME SUBSECTION MENU AS EVERY OTHER SPACE
   ---------------------------------------------------------------------------
   Owner: "introduce the submenu for the Events under setup also."

   Events was the one space with no `.eop-jump` row — but NOT because it lacked
   a menu. It has had its own since long before the tab layer: `.eop-evtabs`
   ("All events" / "Add event"). Two things kept the new builder away from it:

     1. its cards are not children of `.eop-sec`. They sit inside
        `.eop-ev-view`, so `sec.children` never sees a `.eop-card` and the
        builder correctly declines;
     2. it already has a menu, and a second one in the same panel is exactly the
        double-up the whole layer is written to avoid — the URL router reads the
        FIRST matching control in a panel, so two menus make the address bar
        describe the wrong one.

   So this gives Events the same MENU, not a second one: the pill row from
   .eop-jump, at the same 12.5px / 44px-floor sizing, wrapping rather than
   scrolling sideways, taking the space's own accent when selected. Same
   grammar everywhere; nothing new competing underneath.

   Declared after the block at line 219 so it settles the cascade without
   needing !important — the segmented-pill look it replaces is plain CSS.
   ========================================================================= */
.eop-evtabs{
  display:flex; flex-wrap:wrap; gap:6px;
  background:transparent; border:0; border-radius:0;
  padding:0 0 9px; margin:0 0 13px;
  border-bottom:1px solid var(--line, rgba(18,18,20,.12));
}
.eop-evtab{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line, rgba(18,18,20,.12));
  background:var(--card, #fff); color:var(--ink3, #525252);
  border-radius:999px; padding:5px 12px;
  font:inherit; font-size:12.5px; line-height:1.5; font-weight:600;
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  box-shadow:none;
  transition:background .18s var(--sp, cubic-bezier(.2,.7,.3,1)),
             color .18s var(--sp, cubic-bezier(.2,.7,.3,1)),
             border-color .18s var(--sp, cubic-bezier(.2,.7,.3,1)),
             transform .18s var(--sp, cubic-bezier(.2,.7,.3,1));
}
.eop-evtab:hover{ border-color:var(--a); color:var(--ink, #17171A); transform:translateY(-1px) }
.eop-evtab.on{ background:var(--a); border-color:var(--a); color:#fff; box-shadow:none }
.eop-evtab:focus-visible{ outline:2px solid var(--a); outline-offset:2px }

@media (max-width:640px){
  .eop-evtabs{ gap:5px; padding-bottom:8px; margin-bottom:11px }
  .eop-evtab{ padding:5px 10px }
}
@media (prefers-reduced-motion:reduce){
  .eop-evtab,.eop-evtab:hover{ transition:none !important; transform:none !important }
}

/* ============================================================
 * v3.7.0 — the six forks' chrome.
 *
 * Additive only, and every selector sits under .eop so it inherits the
 * console's own token block (light default, dark via html[data-theme="dark"])
 * and cannot leak onto any other page. No existing rule is edited.
 * ============================================================ */

/* ---- Geography meters — "Where they joined from" ------------------------ */
.eop .eop-meter{display:flex;align-items:center;gap:11px;padding:7px 0}
.eop .eop-meter-lb{flex:0 0 auto;min-width:120px;max-width:45%;font-size:.79rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eop .eop-meter-track{flex:1 1 auto;height:8px;border-radius:999px;background:var(--well);
  border:1px solid var(--border);overflow:hidden;min-width:60px}
.eop .eop-meter-track i{display:block;height:100%;background:var(--accent);border-radius:999px;
  transition:width .5s var(--ease)}
.eop .eop-meter-v{flex:0 0 auto;min-width:42px;text-align:right;font-size:.74rem;font-weight:700;
  color:var(--ink2);font-variant-numeric:tabular-nums}
.eop .eop-geo .eop-note{margin-top:10px}

/* ---- Reminder list — per-row Remove ------------------------------------ */
.eop .eop-rmlist{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.eop .eop-rmrow{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  background:var(--well);border:1px solid var(--border)}
.eop .eop-rmmail{flex:1 1 auto;min-width:0;font-size:.81rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eop .eop-rmwhen{flex:0 0 auto;font-size:.68rem;color:var(--ink3);font-weight:600}
@media (max-width:560px){
  .eop .eop-rmrow{flex-wrap:wrap}
  .eop .eop-rmmail{flex:1 1 100%}
}

/* ---- CSV import panel --------------------------------------------------- */
.eop .eop-impcols{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.eop .eop-impcol{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;
  font-weight:600;padding:4px 9px;border-radius:999px;background:var(--card);border:1px solid var(--border2);
  color:var(--ink2)}
.eop .eop-impcol.is-req{background:var(--accent);color:var(--on);border-color:transparent}
.eop .eop-impout{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--well);
  border:1px solid var(--border)}
.eop .eop-impsum{margin:0 0 8px;font-size:.83rem;color:var(--ink)}
.eop .eop-impfail{margin:0;font-size:.83rem;font-weight:600;color:var(--warn)}
.eop .eop-implist{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px}
.eop .eop-implist li{font-size:.75rem;color:var(--ink2);padding:5px 9px;border-radius:8px;
  border-left:3px solid var(--border2);background:var(--card)}
.eop .eop-implist li.is-ok{border-left-color:var(--ok)}
.eop .eop-implist li.is-bad{border-left-color:var(--warn);color:var(--warn)}

/* ---- Permissions — READ-ONLY chips.
 *  No :hover lift, no cursor:pointer, no pressed state. These are spans that
 *  state a grant; nothing about them may suggest they can be clicked. ------ */
.eop .eop-permrow{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid var(--border)}
.eop .eop-permrow:first-of-type{border-top:0}
.eop .eop-permrow .rt{flex:1 1 240px;min-width:0}
.eop .eop-permrow .t{font-size:.81rem;font-weight:700;color:var(--ink)}
.eop .eop-permrow .s{font-size:.72rem;color:var(--ink3);margin-top:2px}
.eop .eop-permkey{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem}
.eop .eop-permchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eop .eop-permchip{font-size:.68rem;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);color:var(--ink2);
  cursor:default;user-select:none}
.eop .eop-permchip.is-state{border-style:dashed;color:var(--ink3);font-weight:700}
.eop .eop-permchip.is-state.is-held{background:var(--ok-bg);border-color:var(--ok);border-style:solid;color:var(--ok)}
.eop .eop-perms .eop-note{margin-top:12px}
.eop .eop-perms .eop-note a{color:var(--ink);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .eop .eop-meter-track i{transition:none !important}
}