/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE NEW LOOK — the short admin at /admin (29 Sep 2026)

   Ahmed: "a completely new design … smooth, easy, like any modern dashboard. Use our brand guideline."
   Worn ONLY under `html.ww-next`, which admin-mode.js sets in <head> for the short admin and for nothing else: the
   full admin and a page with the one-admin switch off are drawn by the styles they always had. Every rule below
   therefore starts with `html.ww-next` — a rule that does not is a rule that changes production.

   One language for six tabs. Before this file the admin spoke three (a pixel game in Live and Broadcast, a second
   one in the framed console, a third in the reports). Here there is one set of tokens, one card, one button, one
   field, and the three are dressed in it.

   WHERE IT COMES FROM
   · colour, type     ScalingEasy Brand System v1 (scalingeasy-brand-v1.html): violet accent, gold for THE action and
                      nothing else, Nunito Sans + DM Mono, 20px cards and pill buttons. The brand is dark-native and
                      states a light set; both are here, each pair checked for contrast (the ratios are beside them).
   · feel             the team's own project platform: hairlines instead of shadows, a quiet second layer of text,
                      three hues with one meaning each, one 150 ms curve for every hover.
   · reading          the people using this skew older (CLAUDE.md §12): 16px body, nothing under 14px, light by
                      default; fields and buttons 44px tall, a row's own small control 40px.
   · time             feedback in 150 ms, nothing slower than 300 ms, and none of it for a viewer who asked for less.

   ORDER: tokens · base · sign-in · shell · top bar · page · cards · buttons · fields · live · broadcast · reports
          · framed console · feedback (toast, dialog) · motion · narrow screens
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next{
  /* the brand's raw values */
  --se-violet:#A855F7; --se-violet-deep:#7C2DBD; --se-pink:#E879F9;
  --se-gold-1:#F5C842; --se-gold-2:#E6A817; --se-gold-ink:#1A1000;

  /* light — the default */
  --nx-bg:#F7F5FB; --nx-surface:#FFFFFF; --nx-sunken:#F1EEF8; --nx-hover:rgba(22,18,31,.045);
  --nx-fg:#16121F; --nx-body:#2B2438; --nx-soft:#5C5670; --nx-faint:#6A6578;          /* 18.4 · 14.9 · 6.95 · 5.6 : 1 on white */
  --nx-line:rgba(22,18,31,.10); --nx-line-2:rgba(22,18,31,.17); --nx-edge:rgba(22,18,31,.46);   /* edge: a field's border, 3:1 */
  --nx-accent:#7C2DBD; --nx-accent-2:#6A22A6; --nx-on-accent:#FFFFFF;                  /* 7.1 : 1 */
  --nx-accent-soft:rgba(124,45,189,.08); --nx-accent-line:rgba(118,45,180,.24); --nx-accent-ink:#7C2DBD;
  --nx-ok:#1F7A4D; --nx-ok-soft:rgba(31,122,77,.10);
  --nx-warn:#A84C0C; --nx-warn-soft:rgba(168,76,12,.10);
  --nx-danger:#C42F47; --nx-danger-2:#A92439; --nx-on-danger:#FFFFFF; --nx-danger-soft:rgba(196,47,71,.09); --nx-danger-line:rgba(196,47,71,.30);
  --nx-live:#E0344A;
  --nx-gold-ink:var(--se-gold-ink);
  --nx-shadow-1:0 1px 2px rgba(22,18,31,.06);
  --nx-shadow-2:0 18px 44px -18px rgba(22,18,31,.28), 0 2px 8px rgba(22,18,31,.06);
  --nx-glass:rgba(247,245,251,.78);
  --nx-mark:linear-gradient(135deg,#7C2DBD,#E879F9);

  /* shape, type, time — the brand's two radii: 20px for what is read, a pill for what is pressed; 12px for a field */
  --nx-r-s:8px; --nx-r:12px; --nx-r-l:20px; --nx-r-xl:24px; --nx-pill:999px;
  --nx-font:"Nunito Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --nx-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --nx-fast:150ms; --nx-mid:220ms; --nx-slow:300ms;
  --nx-ease:cubic-bezier(.4,0,.2,1);
  --nx-ease-out:cubic-bezier(.22,.61,.36,1);
  --nx-side:264px; --nx-top:68px;
}
html.ww-next[data-theme="dark"]{
  --nx-bg:#080810; --nx-surface:#0E0E1A; --nx-sunken:#13131F; --nx-hover:rgba(240,238,255,.06);
  --nx-fg:#F0EEFF; --nx-body:#C4C0E0; --nx-soft:#9A99B3; --nx-faint:#8583A0;          /* 16.8 · 10.9 · 6.9 · 5.2 : 1 on the card */
  --nx-line:rgba(240,238,255,.10); --nx-line-2:rgba(240,238,255,.18); --nx-edge:rgba(240,238,255,.40);
  --nx-accent:#A855F7; --nx-accent-2:#B872F9; --nx-on-accent:#080810;                  /* 5.0 : 1 — white on this violet is 3.96 */
  --nx-accent-soft:rgba(168,85,247,.12); --nx-accent-line:rgba(168,85,247,.30); --nx-accent-ink:#C084FC;
  --nx-ok:#6BD39A; --nx-ok-soft:rgba(107,211,154,.14);
  --nx-warn:#F0A35E; --nx-warn-soft:rgba(240,163,94,.14);
  --nx-danger:#F2657A; --nx-danger-2:#F47F91; --nx-on-danger:#1F0509; --nx-danger-soft:rgba(242,101,122,.12); --nx-danger-line:rgba(242,101,122,.36);
  --nx-live:#FF5C70;
  --nx-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --nx-shadow-2:0 22px 50px -20px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);
  --nx-glass:rgba(8,8,16,.76);
  --nx-mark:linear-gradient(135deg,#A855F7,#E879F9);
}

/* ── BASE ───────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next{background:var(--nx-bg);scrollbar-color:var(--nx-line-2) transparent}
html.ww-next body{
  background:var(--nx-bg);color:var(--nx-fg);
  font-family:var(--nx-font);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* the old admin's names for the same things, so a module that paints with them follows the theme */
  --void:var(--nx-bg); --panel:var(--nx-surface); --panel-2:var(--nx-sunken); --line:var(--nx-line-2);
  --text:var(--nx-fg); --muted:var(--nx-soft); --faint:var(--nx-faint);
  --gold:var(--nx-accent); --pink:var(--nx-accent); --violet:var(--nx-accent); --cyan:var(--nx-ok); --danger:var(--nx-danger);
  --font-px:var(--nx-font); --font-b:var(--nx-font); --font-m:var(--nx-mono);
}
html.ww-next body::before{content:none}                                    /* the ambient wash and the scanlines */
html.ww-next ::selection{background:color-mix(in oklab,var(--nx-accent) 24%,transparent)}
html.ww-next :focus-visible{outline:2px solid var(--nx-accent);outline-offset:2px;border-radius:var(--nx-r-s)}
html.ww-next .nx-i{flex:0 0 auto;display:block}
html.ww-next h1,html.ww-next h2,html.ww-next h3{font-family:var(--nx-font);letter-spacing:-.01em;color:var(--nx-fg)}
html.ww-next code{font-family:var(--nx-mono);font-size:.9em;background:var(--nx-sunken);padding:1px 6px;border-radius:6px}
html.ww-next .crt-row{display:none}                                          /* the scanline switch */

/* ── SIGN-IN ────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next .gate{
  padding:32px 20px;
  background:
    radial-gradient(900px 520px at 12% -10%,color-mix(in oklab,var(--nx-accent) 14%,transparent),transparent 70%),
    radial-gradient(700px 480px at 100% 110%,color-mix(in oklab,var(--se-pink) 12%,transparent),transparent 70%),
    var(--nx-bg);
}
html.ww-next .gate .card:not(.px){
  clip-path:none;width:100%;max-width:420px;padding:36px 32px 30px;text-align:left;
  background:var(--nx-surface);border-radius:var(--nx-r-xl);
  box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-2);
}
html.ww-next .gate .card::before{
  content:"W";display:grid;place-items:center;width:44px;height:44px;margin:0 0 22px;border-radius:13px;
  background:var(--nx-mark);color:#fff;font:900 22px/1 var(--nx-font);letter-spacing:-.02em;
}
html.ww-next .gate h1{font-size:24px;line-height:1.25;font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
html.ww-next .gate p{font-size:15.5px;color:var(--nx-soft);margin:0 0 22px;line-height:1.55}
html.ww-next .gate form > div{gap:12px!important}
html.ww-next .gate #loginForgot{color:var(--nx-accent-ink)!important;font-size:14.5px!important;font-weight:600;text-decoration:none!important;padding:6px 0!important}
html.ww-next .gate #loginForgot:hover{text-decoration:underline!important}
html.ww-next .gate #loginErr{color:var(--nx-danger)!important;font-size:14.5px!important}
html.ww-next .gate #loginMsg{color:var(--nx-soft)!important;font-size:14.5px!important}
html.ww-next .gate #loginSubmit{width:100%;min-height:48px;font-size:16px}

/* ── SHELL ──────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next .shell{grid-template-columns:var(--nx-side) minmax(0,1fr);min-height:100vh;min-height:100dvh}
html.ww-next .side{
  position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;
  padding:18px 14px 16px;gap:2px;
  background:var(--nx-surface);border-right:1px solid var(--nx-line);
}
/* the mark and the name */
html.ww-next .logo{order:-2;display:flex;align-items:center;gap:11px;padding:4px 8px 16px}
html.ww-next .logo::before{
  content:"W";flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--nx-mark);color:#fff;font:900 17px/1 var(--nx-font);letter-spacing:-.02em;
}
html.ww-next .logo .wm{
  font-family:var(--nx-font);font-weight:800;font-size:17px;line-height:1.1;letter-spacing:-.015em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--nx-fg);filter:none;width:auto;
}
html.ww-next .logo .sub{display:none}
/* which webinar — the first thing in the menu, because everything under it is about that webinar */
html.ww-next .one-sessions{order:-1;padding:0 4px 14px;margin:0 0 8px;border-bottom:1px solid var(--nx-line)}
html.ww-next .one-sessions-label{font:700 14px/1 var(--nx-font);letter-spacing:.07em;text-transform:uppercase;color:var(--nx-faint);margin:0 4px 8px}
html.ww-next #oneSessionPick{
  appearance:none;-webkit-appearance:none;width:100%;min-height:44px;padding:9px 38px 9px 12px;cursor:pointer;
  border:0;border-radius:var(--nx-r);box-shadow:0 0 0 1px var(--nx-line-2);
  background:var(--nx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A849B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/18px;
  color:var(--nx-fg);font:600 14.5px/1.3 var(--nx-font);text-overflow:ellipsis;
  transition:box-shadow var(--nx-fast) var(--nx-ease),background-color var(--nx-fast) var(--nx-ease);
}
html.ww-next #oneSessionPick:hover{box-shadow:0 0 0 1px var(--nx-accent-line);background-color:var(--nx-sunken)}
html.ww-next .one-dup{display:none}
/* the menu */
html.ww-next .side > .nav-label{display:none}
html.ww-next .one-group{
  margin:14px 0 4px;padding:6px 10px;border-top:0;opacity:1;cursor:default;pointer-events:none;
  font:700 14px/1.2 var(--nx-font);letter-spacing:.07em;text-transform:uppercase;color:var(--nx-faint);
}
html.ww-next .one-group:first-child{margin-top:4px}
html.ww-next .one-group .one-n,html.ww-next .one-group .one-caret{display:none}
html.ww-next .one-body[hidden]{display:block}                               /* six items: nothing to fold */
html.ww-next .nav-btn{
  min-height:44px;padding:9px 12px;gap:12px;border-radius:var(--nx-r);
  font:600 15.5px/1.2 var(--nx-font);letter-spacing:0;color:var(--nx-soft);
  transition:background-color var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease);
}
html.ww-next .nav-btn::before{content:none}
html.ww-next .nav-btn .nx-i{color:var(--nx-faint);transition:color var(--nx-fast) var(--nx-ease)}
html.ww-next .nav-btn .nx-nav-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){
  html.ww-next .nav-btn:hover{background:var(--nx-hover);color:var(--nx-fg)}
  html.ww-next .nav-btn:hover .nx-i{color:var(--nx-soft)}
}
html.ww-next .nav-btn.on{background:var(--nx-accent-soft);color:var(--nx-accent-ink)}
html.ww-next .nav-btn.on .nx-i{color:var(--nx-accent)}
html.ww-next .nav-btn:focus-visible{outline-offset:-2px}
html.ww-next .one-badge{margin-left:auto;min-width:22px;height:22px;border-radius:var(--nx-pill);background:var(--nx-danger);color:var(--nx-on-danger);font:700 14px/1 var(--nx-font)}
/* the foot: theme, sign out, and what is open */
html.ww-next .nx-theme{
  margin:auto 4px 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;
  border-radius:var(--nx-r);background:var(--nx-sunken);box-shadow:inset 0 0 0 1px var(--nx-line);
}
html.ww-next .nx-theme-b{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 6px;cursor:pointer;
  border:0;border-radius:9px;background:none;color:var(--nx-soft);font:600 14px/1 var(--nx-font);
  transition:background-color var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease),box-shadow var(--nx-fast) var(--nx-ease);
}
@media (hover:hover){ html.ww-next .nx-theme-b:hover{color:var(--nx-fg)} }
html.ww-next .nx-theme-b.on{background:var(--nx-surface);color:var(--nx-fg);box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-1)}
html.ww-next .one-out{margin:0 0 2px;opacity:1;color:var(--nx-soft)}
html.ww-next .side-foot{display:none}                                      /* the webinar and its phase are in the top bar */
html.ww-next .main{padding:0 clamp(18px,3.2vw,44px) 72px;min-width:0}
html.ww-next .main > .tabpanel,html.ww-next .main > .ww-orgwarn,html.ww-next .main > #wwGoLiveGap{max-width:1180px;margin-left:auto;margin-right:auto}

/* ── TOP BAR ────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next .topbar{
  min-height:var(--nx-top);padding:12px 0;margin:0 0 26px;gap:12px;
  border-bottom:1px solid var(--nx-line);
  background:var(--nx-glass);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  z-index:20;
  /* the bar runs to both edges of the page while its content keeps the page's margins */
  margin-left:calc(-1 * clamp(18px,3.2vw,44px));margin-right:calc(-1 * clamp(18px,3.2vw,44px));
  padding-left:clamp(18px,3.2vw,44px);padding-right:clamp(18px,3.2vw,44px);
}
html.ww-next .event-name{min-width:0;flex:1 1 auto;display:flex;letter-spacing:0;color:transparent;font-size:0}   /* "EVENT /" is not said */
html.ww-next .event-name b{min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 16px/1.3 var(--nx-font);color:var(--nx-fg)}
html.ww-next .one-primary{margin:0;gap:8px;flex:0 0 auto}
html.ww-next .phase-pill{
  order:2;margin:0;gap:8px;padding:0 14px;min-height:40px;border:0;border-radius:var(--nx-pill);
  background:var(--nx-sunken);box-shadow:inset 0 0 0 1px var(--nx-line);
  color:var(--nx-soft);font:700 14px/1 var(--nx-font);letter-spacing:.01em;text-transform:none;white-space:nowrap;
}
html.ww-next .phase-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--nx-faint);animation:none}
/* the webinar is running — the pill says so in a word AND in colour (admin-next.js writes the phase on it) */
html.ww-next .phase-pill[data-phase="webinar"],
html.ww-next .phase-pill[data-phase="pitch"]{background:var(--nx-danger-soft);box-shadow:inset 0 0 0 1px var(--nx-danger-line);color:var(--nx-danger)}
html.ww-next .phase-pill[data-phase="webinar"] .dot,
html.ww-next .phase-pill[data-phase="pitch"] .dot{background:var(--nx-live);animation:nx-pulse 1.8s var(--nx-ease) infinite}
html.ww-next .phase-pill[data-phase="webinar"] #phasePillText::before,
html.ww-next .phase-pill[data-phase="pitch"] #phasePillText::before{content:"Live · "}
html.ww-next .nx-menu{display:none}

/* the workspace warning keeps its size (the 18px floor is a tested rule) and loses the hard edges */
html.ww-next .ww-orgwarn{border:0;border-radius:var(--nx-r-l);background:var(--nx-danger-soft);box-shadow:inset 0 0 0 1px var(--nx-danger-line);padding:22px 24px}
html.ww-next .ww-orgwarn h2{color:var(--nx-danger)}
html.ww-next .ww-orgwarn p{color:var(--nx-fg)}
html.ww-next .ww-orgwarn .ww-nav-btn{border:0;border-radius:var(--nx-pill);background:var(--nx-danger);color:var(--nx-on-danger)}
html.ww-next .ww-orgwarn.is-note{background:var(--nx-accent-soft);box-shadow:inset 0 0 0 1px var(--nx-accent-line)}
html.ww-next .ww-orgwarn.is-note h2{color:var(--nx-fg)}
html.ww-next .ww-orgwarn.is-note .ww-nav-btn{background:var(--nx-accent);color:var(--nx-on-accent)}
html.ww-next .ww-nav-note{color:var(--nx-soft)}
/* the webinar is running with nothing on the stage (dashboard.js draws it with its own inks; here it is read in ours) */
html.ww-next #wwGoLiveGap{
  margin-bottom:22px!important;padding:16px 20px!important;border:0!important;border-radius:var(--nx-r-l)!important;
  background:var(--nx-danger-soft)!important;box-shadow:inset 0 0 0 1px var(--nx-danger-line);
  color:var(--nx-body)!important;font-size:15.5px!important;line-height:1.6!important;
}
html.ww-next #wwGoLiveGap > b:first-child{color:var(--nx-danger);font-size:16.5px}
html.ww-next #wwGoLiveGap b{color:var(--nx-fg)}
html.ww-next #wwGoLiveGap .nx-quiet{color:var(--nx-soft)}

/* ── PAGE ───────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next .tabpanel:not([hidden]){animation:none}
html.ww-next h1.page-title,
html.ww-next .wca h2:first-child{font:800 30px/1.2 var(--nx-font);letter-spacing:-.025em;margin:0 0 6px;color:var(--nx-fg)}
html.ww-next h1.page-title .accent{color:inherit}
html.ww-next .page-sub,html.ww-next .lede{font-size:16px;line-height:1.55;color:var(--nx-soft);margin:0 0 26px;max-width:64ch}
html.ww-next .hint{font-size:14px;line-height:1.5;color:var(--nx-soft);margin-top:8px}
html.ww-next .soonwrap{color:var(--nx-soft);font-size:15px}

/* ── CARDS ──────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next .px{clip-path:none;padding:0;background:none;--bd:transparent;--bg:transparent}
html.ww-next .px > .px-in{clip-path:none;height:auto;background:none;padding:0}
html.ww-next .card,
html.ww-next .card:not(.px){
  clip-path:none;border:0;padding:22px 22px 20px;
  background:var(--nx-surface);border-radius:var(--nx-r-l);box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-1);
}
html.ww-next .card > .px-in{padding:0}
html.ww-next .card h3,
html.ww-next .card:not(.px) h2,
html.ww-next .card h2{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font:700 17px/1.3 var(--nx-font);letter-spacing:-.01em;text-transform:none;color:var(--nx-fg);
}
html.ww-next .card h3 .tag{margin-left:auto;font:600 14px/1 var(--nx-font);letter-spacing:0;color:var(--nx-soft);background:var(--nx-sunken);border-radius:var(--nx-pill);padding:5px 10px;border:0}
html.ww-next .card.soon{display:none}                                        /* a card that only promises a feature */
html.ww-next .grid{gap:18px}
html.ww-next .btnrow{gap:8px}

/* ── BUTTONS ────────────────────────────────────────────────────────────────────────────────────────────────── */
/* three treatments, as before: quiet (default) · accent (the action of a card) · danger. Gold is kept for THE action
   of a screen — starting the webinar. */
html.ww-next .btn,
html.ww-next button.b,
html.ww-next .nx-btn{
  --bd:transparent;--bg:transparent;
  appearance:none;clip-path:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;cursor:pointer;white-space:nowrap;text-decoration:none;
  border:0;border-radius:var(--nx-pill);box-shadow:inset 0 0 0 1px var(--nx-line-2);
  background:var(--nx-surface);color:var(--nx-fg);
  font:600 15px/1 var(--nx-font);letter-spacing:0;filter:none;
  transition:background-color var(--nx-fast) var(--nx-ease),box-shadow var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease),transform var(--nx-fast) var(--nx-ease);
}
html.ww-next .btn > span{display:contents;background:none;color:inherit;font:inherit;letter-spacing:inherit;padding:0;clip-path:none}
html.ww-next .btn-sm,html.ww-next button.b.sm{min-height:40px;padding:0 15px;font-size:14.5px}
@media (hover:hover){
  html.ww-next .btn:hover,html.ww-next button.b:hover,html.ww-next .nx-btn:hover{transform:none;filter:none;background:var(--nx-sunken);box-shadow:inset 0 0 0 1px var(--nx-line-2)}
}
html.ww-next .btn:active,html.ww-next button.b:active,html.ww-next .nx-btn:active{transform:scale(.97)}
html.ww-next .btn:focus-visible,html.ww-next button.b:focus-visible,html.ww-next .nx-btn:focus-visible{outline:2px solid var(--nx-accent);outline-offset:2px}
html.ww-next .btn[disabled],html.ww-next button.b:disabled,html.ww-next .nx-btn:disabled{opacity:.45;pointer-events:none;cursor:not-allowed}
/* accent */
html.ww-next .btn-gold,
html.ww-next button.b.gold,
html.ww-next .nx-primary{background:var(--nx-accent);color:var(--nx-on-accent);box-shadow:none}
html.ww-next .one-primary .b.gold{background:var(--nx-surface);color:var(--nx-fg);box-shadow:inset 0 0 0 1px var(--nx-line-2)}   /* the page's own action is below; up here both are quiet */
@media (hover:hover){
  html.ww-next .btn-gold:hover,html.ww-next button.b.gold:hover,html.ww-next .nx-primary:hover{background:var(--nx-accent-2);box-shadow:none}
  html.ww-next .one-primary .b.gold:hover{background:var(--nx-sunken);box-shadow:inset 0 0 0 1px var(--nx-line-2)}
}
/* danger */
html.ww-next .btn-danger,
html.ww-next button.b.go,html.ww-next .nx-danger{background:var(--nx-danger);color:var(--nx-on-danger);box-shadow:none}
html.ww-next .btn-danger > span{color:inherit}
html.ww-next .btn-gold > span{color:inherit}
@media (hover:hover){
  html.ww-next .btn-danger:hover,html.ww-next button.b.go:hover,html.ww-next .nx-danger:hover{background:var(--nx-danger-2);box-shadow:none}
}
/* quiet, borderless */
html.ww-next .btn.ghost{box-shadow:none;background:var(--nx-sunken);color:var(--nx-soft)}
@media (hover:hover){ html.ww-next .btn.ghost:hover{color:var(--nx-fg);background:var(--nx-hover)} }
/* remove (a row's own small control) */
html.ww-next button.b.del,html.ww-next .modrow button.b{min-height:40px;min-width:40px;padding:0 9px;font-size:15px;box-shadow:none;background:none;color:var(--nx-faint)}
@media (hover:hover){
  html.ww-next button.b.del:hover{background:var(--nx-danger-soft);color:var(--nx-danger)}
  html.ww-next .modrow button.b:not(.del):hover{background:var(--nx-hover);color:var(--nx-fg)}
}
html.ww-next button.b > *{pointer-events:none}

/* ── FIELDS ─────────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next input.f,html.ww-next textarea.f,html.ww-next select.f{
  min-height:44px;padding:10px 14px;
  border:0;border-radius:var(--nx-r);box-shadow:inset 0 0 0 1px var(--nx-edge);
  background:var(--nx-surface);color:var(--nx-fg);font:400 16px/1.4 var(--nx-font);
  transition:box-shadow var(--nx-fast) var(--nx-ease),background-color var(--nx-fast) var(--nx-ease);
}
html.ww-next input.f::placeholder,html.ww-next textarea.f::placeholder{color:var(--nx-faint)}
@media (hover:hover){ html.ww-next input.f:hover,html.ww-next textarea.f:hover,html.ww-next select.f:hover{box-shadow:inset 0 0 0 1px var(--nx-accent-line)} }
html.ww-next input.f:focus,html.ww-next textarea.f:focus,html.ww-next select.f:focus{outline:none;box-shadow:inset 0 0 0 2px var(--nx-accent)}
html.ww-next input[type=color]{width:44px;height:36px;border:0;border-radius:var(--nx-r-s);box-shadow:inset 0 0 0 1px var(--nx-line-2);background:var(--nx-surface);padding:3px}
html.ww-next input[type=checkbox]{accent-color:var(--nx-accent);width:18px;height:18px}
html.ww-next .toggle{width:46px;height:26px;border:0;border-radius:var(--nx-pill);background:var(--nx-line-2);transition:background-color var(--nx-fast) var(--nx-ease)}
html.ww-next .toggle::after{content:"";inset:3px auto 3px 3px;width:20px;display:block;border-radius:50%;background:#fff;box-shadow:var(--nx-shadow-1);transition:transform var(--nx-fast) var(--nx-ease)}
html.ww-next .toggle.on{background:var(--nx-accent);border:0}
html.ww-next .toggle.on::after{content:"";transform:translateX(20px)}

/* every list to choose from wears the same arrow */
html.ww-next select.f,html.ww-next .wca select,html.ww-next .wja select,
html.ww-next body.cr-embed #adminScreen select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A849B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
}

/* ── LIVE ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/* the head count */
html.ww-next .on-now{margin:0 0 18px;padding:20px 22px;background:var(--nx-surface);border-radius:var(--nx-r-l);box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-1)}
html.ww-next .on-now .px-in{padding:0}
html.ww-next .on-top{gap:14px 30px}
html.ww-next .on-big{gap:12px;align-items:center}
html.ww-next .on-big b{font:800 44px/1 var(--nx-font);letter-spacing:-.03em;color:var(--nx-fg);font-variant-numeric:tabular-nums}
html.ww-next .on-big .on-lbl{font-size:16px;color:var(--nx-soft)}
html.ww-next .on-dot{width:10px;height:10px;background:var(--nx-ok);box-shadow:none;animation:nx-ring 2s var(--nx-ease) infinite}
html.ww-next .on-big.stale .on-dot{background:var(--nx-faint);animation:none}
html.ww-next .on-stats{gap:8px 22px;font-size:15px;color:var(--nx-soft)}
html.ww-next .on-stat b{font:700 17px/1 var(--nx-font);color:var(--nx-fg);font-variant-numeric:tabular-nums}
html.ww-next .on-rooms{margin-top:16px;gap:8px}
html.ww-next .on-chip{font-size:14px;color:var(--nx-soft);border:0;box-shadow:inset 0 0 0 1px var(--nx-line);background:var(--nx-sunken);padding:6px 12px}
html.ww-next .on-chip b{color:var(--nx-fg);margin-left:4px}
html.ww-next .on-chip.on-none{box-shadow:none;background:none;padding-left:0;color:var(--nx-faint)}
html.ww-next .on-foot{margin-top:14px;font-size:14px;color:var(--nx-faint)}
html.ww-next .on-warn{color:var(--nx-danger)}
html.ww-next .on-refresh{min-height:40px;border:0;box-shadow:inset 0 0 0 1px var(--nx-line-2);border-radius:var(--nx-pill);padding:0 12px;font:600 14px/1 var(--nx-font);color:var(--nx-soft);background:var(--nx-surface);transition:background-color var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease)}
@media (hover:hover){ html.ww-next .on-refresh:hover{background:var(--nx-sunken);color:var(--nx-fg)} }
html.ww-next .on-msg{font-size:15px;color:var(--nx-soft)}

/* where the webinar is now: four steps on one line, and the one button that moves it */
html.ww-next .level-card{
  margin:0 0 18px;padding:24px 24px 22px;border-radius:var(--nx-r-xl);
  background:
    radial-gradient(520px 220px at 0% 0%,color-mix(in oklab,var(--nx-accent) 9%,transparent),transparent 72%),
    var(--nx-surface);
  box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-1);
}
html.ww-next .level-card .px-in{padding:0}
html.ww-next .lvl-head{margin:0 0 22px;gap:10px 16px;flex-wrap:wrap}
html.ww-next .lvl-head h2{font:700 17px/1.3 var(--nx-font);color:var(--nx-fg)}
html.ww-next .lvl-head .hint{margin:0 0 0 auto;font:400 14px/1.3 var(--nx-font);letter-spacing:0;color:var(--nx-faint)}
html.ww-next .lvl-strip{margin:0 0 24px;align-items:flex-start}
html.ww-next .lvl-seg{height:3px;margin-top:15px;border-radius:3px;background:var(--nx-line-2);transition:background-color var(--nx-mid) var(--nx-ease)}
html.ww-next .lvl-seg.done{background:var(--nx-accent)}
html.ww-next .lvl button{padding:0 10px;gap:10px;border-radius:var(--nx-r)}
html.ww-next .lvl .node{
  width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;
  background:var(--nx-sunken);box-shadow:inset 0 0 0 1.5px var(--nx-line-2);color:var(--nx-faint);
  font:700 14px/1 var(--nx-font);transition:background-color var(--nx-mid) var(--nx-ease),box-shadow var(--nx-mid) var(--nx-ease),color var(--nx-mid) var(--nx-ease);
}
html.ww-next .lvl[data-i="0"] .node::before{content:"1"}
html.ww-next .lvl[data-i="1"] .node::before{content:"2"}
html.ww-next .lvl[data-i="2"] .node::before{content:"3"}
html.ww-next .lvl[data-i="3"] .node::before{content:"4"}
html.ww-next .lvl .lbl{font:600 15px/1.2 var(--nx-font);letter-spacing:0;color:var(--nx-faint);transition:color var(--nx-mid) var(--nx-ease)}
html.ww-next .lvl.done .node{background:var(--nx-accent-soft);box-shadow:inset 0 0 0 1.5px var(--nx-accent-line);color:var(--nx-accent-ink)}
html.ww-next .lvl.done .node::before{content:"✓"}
html.ww-next .lvl.done .lbl{color:var(--nx-soft)}
html.ww-next .lvl.current .node{background:var(--nx-accent);box-shadow:0 0 0 5px var(--nx-accent-soft);color:var(--nx-on-accent);animation:none}
html.ww-next .lvl.current .lbl{color:var(--nx-fg);font-weight:700}
html.ww-next .lvl.current .lbl::before{content:none}
@media (hover:hover){ html.ww-next .lvl button:hover .lbl{color:var(--nx-fg)} html.ww-next .lvl:not(.current) button:hover .node{box-shadow:inset 0 0 0 1.5px var(--nx-accent-line)} }
html.ww-next .lvl-actions{gap:10px 12px}
html.ww-next .next-hint{font-size:15px;color:var(--nx-soft);min-width:220px}
/* THE action of the screen */
html.ww-next #advance{min-height:50px;padding:0 28px;font-size:16.5px;font-weight:800;letter-spacing:-.01em}
html.ww-next #advance.btn-danger,html.ww-next #advance.btn-gold{
  background:linear-gradient(180deg,var(--se-gold-1),var(--se-gold-2));color:var(--nx-gold-ink);
  box-shadow:inset 0 0 0 1px rgba(26,16,0,.10),0 8px 20px -10px rgba(230,168,23,.75);
}
@media (hover:hover){ html.ww-next #advance:hover{filter:brightness(1.04);transform:translateY(-1px)} }
html.ww-next #advance:active{transform:scale(.97)}
/* …and the one press that ends it for everyone is not gold */
html.ww-next #advance[data-nx="end"]{background:var(--nx-danger);color:var(--nx-on-danger);box-shadow:none}
@media (hover:hover){ html.ww-next #advance[data-nx="end"]:hover{background:var(--nx-danger-2);filter:none} }
html.ww-next #step-back{min-height:50px;box-shadow:none;background:none;color:var(--nx-soft)}
@media (hover:hover){ html.ww-next #step-back:hover{background:var(--nx-hover);color:var(--nx-fg)} }

/* the room on the left, the host's tools on the right — two columns of cards (admin-next.js moves them in) */
html.ww-next .nx-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
html.ww-next .nx-col{display:flex;flex-direction:column;gap:18px;min-width:0}
html.ww-next #panel-live > .grid{display:block}                              /* emptied; what is left in it is not shown */
html.ww-next #panel-live > .grid > *{display:none}
html.ww-next #eventBotControl,html.ww-next #wmCard{padding:22px 22px 20px!important}
html.ww-next #eventBotControl > p{font-size:14.5px;line-height:1.5;color:var(--nx-soft);margin:0 0 14px}
html.ww-next #eventBotControl > p[data-bots-status]{margin:12px 0 0!important;color:var(--nx-faint)}
/* two buttons, one state: the one that is in force is the filled one */
html.ww-next #eventBotControl .btn{background:var(--nx-surface);color:var(--nx-fg);box-shadow:inset 0 0 0 1px var(--nx-line-2)}
html.ww-next #eventBotControl .btn[aria-pressed="true"]{background:var(--nx-accent-soft);color:var(--nx-accent-ink);box-shadow:inset 0 0 0 1px var(--nx-accent-line)}
/* letting people walk is a switch, not an alarm */
html.ww-next #wmToggle.btn-danger{background:var(--nx-surface);color:var(--nx-fg);box-shadow:inset 0 0 0 1px var(--nx-line-2)}
@media (hover:hover){ html.ww-next #wmToggle.btn-danger:hover{background:var(--nx-sunken)} }
html.ww-next #wmCard label.hint{font-size:15px;color:var(--nx-fg)}

/* lists of what people wrote */
html.ww-next .modlist{max-height:420px;margin-top:12px;border:0;border-radius:var(--nx-r);background:var(--nx-sunken);box-shadow:inset 0 0 0 1px var(--nx-line)}
html.ww-next .modrow{align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--nx-line);font-size:15.5px;transition:background-color var(--nx-fast) var(--nx-ease)}
@media (hover:hover){ html.ww-next .modrow:hover{background:var(--nx-hover)} }
html.ww-next .modtxt{line-height:1.45;color:var(--nx-body)}
html.ww-next .modtxt b{color:var(--nx-fg);font-weight:700}
html.ww-next .modtxt .hint{margin-top:3px!important;font-size:14px;color:var(--nx-faint)}
html.ww-next .modtxt > .hint[data-nx-state]{display:inline-block;margin:6px 0 0!important;padding:3px 9px;border-radius:var(--nx-pill);font:700 14px/1.2 var(--nx-font);background:var(--nx-sunken);color:var(--nx-soft)}
html.ww-next .modtxt > .hint[data-nx-state="new"]{background:var(--nx-accent-soft);color:var(--nx-accent-ink)}
html.ww-next .modtxt > .hint[data-nx-state="✅ answered"]{background:var(--nx-ok-soft);color:var(--nx-ok)}
html.ww-next #qList .modrow > button.b{min-height:40px;min-width:0;padding:0 14px;font:600 14px/1 var(--nx-font);background:var(--nx-surface);color:var(--nx-fg);box-shadow:inset 0 0 0 1px var(--nx-line-2)}
html.ww-next #qList .modrow > button.b:disabled{opacity:.4}
@media (hover:hover){ html.ww-next #qList .modrow > button.b:not(:disabled):hover{background:var(--nx-accent-soft);color:var(--nx-accent-ink);box-shadow:inset 0 0 0 1px var(--nx-accent-line)} }
html.ww-next .modempty{padding:26px 16px;font-size:15px;color:var(--nx-faint)}
html.ww-next .bd.staffb{color:var(--nx-ok)}

/* more tools */
html.ww-next .nx-more{margin:18px 0 0}
html.ww-next .nx-more > summary{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;cursor:pointer;list-style:none;
  border-radius:var(--nx-pill);color:var(--nx-soft);font:600 15px/1 var(--nx-font);
  transition:background-color var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease);
}
html.ww-next .nx-more > summary::-webkit-details-marker{display:none}
html.ww-next .nx-more > summary .nx-i{transition:transform var(--nx-fast) var(--nx-ease)}
html.ww-next .nx-more[open] > summary .nx-i{transform:rotate(180deg)}
@media (hover:hover){ html.ww-next .nx-more > summary:hover{background:var(--nx-hover);color:var(--nx-fg)} }
html.ww-next .nx-more-grid{display:grid;gap:18px;margin-top:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}

/* ── BROADCAST (camera & stream) ────────────────────────────────────────────────────────────────────────────── */
html.ww-next #broadcastEditor{display:grid;gap:18px}
html.ww-next #broadcastEditor .card{margin:0!important}
html.ww-next #broadcastEditor .card h2{font:700 17px/1.3 var(--nx-font);letter-spacing:-.01em;text-transform:none;color:var(--nx-fg);margin:0 0 6px}
html.ww-next #broadcastEditor video{border-radius:var(--nx-r);background:#000}
html.ww-next .ig-tag{top:20px;right:20px;font:700 14px/1 var(--nx-font);letter-spacing:.02em;color:var(--nx-accent-ink);background:var(--nx-accent-soft);padding:6px 10px}
html.ww-next .ig-l{font:600 14px/1.3 var(--nx-font);letter-spacing:0;text-transform:none;color:var(--nx-soft);margin:14px 0 6px}
html.ww-next .ig-field input.f{font-family:var(--nx-mono);font-size:14.5px}
html.ww-next .ig-sep{background:var(--nx-line);margin:18px 0 14px}
html.ww-next .ig-sig,html.ww-next .ig-stage{font-size:15px;color:var(--nx-soft)}
html.ww-next .ig-sig.on{color:var(--nx-fg)}
html.ww-next .ig-dot{background:var(--nx-ok);box-shadow:none;animation:nx-ring 2s var(--nx-ease) infinite}
html.ww-next .ig-dot.off{background:var(--nx-faint);animation:none}
html.ww-next .ig-stage.on,html.ww-next .ig-ok{color:var(--nx-ok)}
html.ww-next .ig-stage.bad,html.ww-next .ig-err{color:var(--nx-danger)}
html.ww-next .ig-warn{color:var(--nx-warn)}
html.ww-next .ig-link{color:var(--nx-accent-ink);font:600 14px/1.3 var(--nx-font);text-decoration:none}
@media (hover:hover){ html.ww-next .ig-link:hover{text-decoration:underline} }
html.ww-next .ig-rec{color:var(--nx-faint)}

/* ── REPORTS (results) ──────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next .wca,html.ww-next .wja{font:400 16px/1.55 var(--nx-font);color:var(--nx-fg);max-width:none}
html.ww-next .wca p,html.ww-next .wja p{font:400 15.5px/1.55 var(--nx-font);opacity:1;color:var(--nx-soft)}
html.ww-next .wca h3,html.ww-next .wja h3{font:700 18px/1.3 var(--nx-font);letter-spacing:-.01em;margin:0 0 14px;color:var(--nx-fg)}
html.ww-next .wja h2{font:700 20px/1.3 var(--nx-font);color:var(--nx-fg)}
html.ww-next .wca small,html.ww-next .wja small{font-size:14px;opacity:1;color:var(--nx-faint)}
html.ww-next .wja,
html.ww-next .wca section,html.ww-next .wca details{
  border:0;border-radius:var(--nx-r-l);background:var(--nx-surface);box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-1);padding:22px;
}
html.ww-next .wja{margin:0 0 22px}
html.ww-next #how-it-went-report > p{margin:0 0 22px}
html.ww-next .wja > p{margin:0 0 14px}
html.ww-next .wja .wja-form{gap:12px 14px;margin:0 0 14px}
html.ww-next .wja .wja-kpis{gap:14px;margin:14px 0}
html.ww-next .wca .wca-filters{gap:12px 14px;margin:0 0 18px}
html.ww-next .wja .wja-note,html.ww-next .wja .wja-muted{color:var(--nx-soft);opacity:1;font-size:14.5px}
html.ww-next .wja .wja-kpi,html.ww-next .wca .wca-summary{background:var(--nx-sunken);border:0;border-radius:var(--nx-r);box-shadow:inset 0 0 0 1px var(--nx-line)}
html.ww-next .wja-kpi strong,html.ww-next .wca-summary > strong{font:800 34px/1.1 var(--nx-font);letter-spacing:-.03em;color:var(--nx-fg);font-variant-numeric:tabular-nums}
html.ww-next .wja .wja-bar{padding:12px 14px;border-left:0;border-radius:var(--nx-r);background:var(--nx-sunken)}
html.ww-next .wja .wja-bar i{height:6px;border-radius:6px;background:var(--nx-accent)}
html.ww-next .wca-track{height:6px;border-radius:6px;background:var(--nx-line)}
html.ww-next .wca-track i{background:var(--nx-accent);border-radius:6px}
html.ww-next .wca-row strong{font-size:15.5px}
html.ww-next .wca-row span{font-size:14.5px;color:var(--nx-soft)}
html.ww-next .wja .wja-review,html.ww-next .wae-review,html.ww-next .wca [data-confirm]{border:0;border-radius:var(--nx-r);background:var(--nx-warn-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nx-warn) 35%,transparent)}
html.ww-next .wja .wja-error,html.ww-next .wca .wca-error,html.ww-next .wca .wae-roster .wae-error{border:0;border-radius:var(--nx-r);background:var(--nx-danger-soft);color:var(--nx-danger);box-shadow:inset 0 0 0 1px var(--nx-danger-line)}
html.ww-next .wae-hint,html.ww-next .wae-selection{border:0;border-radius:var(--nx-r);background:var(--nx-accent-soft);color:var(--nx-fg)}
html.ww-next .wca label,html.ww-next .wja label{font:600 14px/1.3 var(--nx-font);color:var(--nx-soft)}
html.ww-next .wca select,html.ww-next .wca input:not([type=checkbox]):not([type=radio]),html.ww-next .wja select,html.ww-next .wja input:not([type=checkbox]):not([type=radio]){
  min-height:44px;padding:9px 12px;border:0;border-radius:var(--nx-r);box-shadow:inset 0 0 0 1px var(--nx-edge);
  background:var(--nx-surface);color:var(--nx-fg);font:400 15.5px/1.3 var(--nx-font);
}
html.ww-next .wca button,html.ww-next .wja button{
  min-height:44px;padding:0 17px;border:0;border-radius:var(--nx-pill);box-shadow:inset 0 0 0 1px var(--nx-line-2);cursor:pointer;
  background:var(--nx-surface);color:var(--nx-fg);font:600 15px/1 var(--nx-font);
  transition:background-color var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease),box-shadow var(--nx-fast) var(--nx-ease);
}
@media (hover:hover){ html.ww-next .wca button:hover,html.ww-next .wja button:hover{background:var(--nx-sunken)} }
html.ww-next .wca button:focus-visible,html.ww-next .wca input:focus-visible,html.ww-next .wca select:focus-visible,html.ww-next .wca summary:focus-visible{outline:2px solid var(--nx-accent);outline-offset:2px}
html.ww-next .wja button[aria-pressed=true],html.ww-next .wca .wae-tabs button[aria-pressed=true]{background:var(--nx-accent-soft);color:var(--nx-accent-ink);box-shadow:inset 0 0 0 1px var(--nx-accent-line);font-weight:700;border-color:transparent}
html.ww-next .wca .wae-link{min-height:40px;padding:0 12px;border:0;box-shadow:none;background:var(--nx-accent-soft);color:var(--nx-accent-ink);font-size:14px;border-radius:var(--nx-pill)}
html.ww-next .wca .wae-stage{border:0;border-radius:var(--nx-r);background:var(--nx-sunken);box-shadow:inset 0 0 0 1px var(--nx-line)}
html.ww-next .wae-stage-fill{background:var(--nx-accent-soft)}
html.ww-next .wca .wae-column{border:0;border-radius:var(--nx-r);box-shadow:inset 0 0 0 1px var(--nx-line)}
html.ww-next .wae-column-bar{background:linear-gradient(var(--se-violet),var(--se-pink));border-radius:8px 8px 0 0}
html.ww-next .wca table,html.ww-next .wja table{font-size:15px}
html.ww-next .wca th,html.ww-next .wca td{border-bottom:1px solid var(--nx-line);padding:12px 10px}
html.ww-next .wca th,html.ww-next .wja th{font:700 14px/1.3 var(--nx-font);letter-spacing:.03em;text-transform:uppercase;color:var(--nx-faint)}
html.ww-next .wae-roster thead th,html.ww-next .wja .wja-scroll th{background:var(--nx-surface)}
html.ww-next .wja .wja-person{border-top:1px solid var(--nx-line)}
html.ww-next .wja-map{border:0;box-shadow:inset 0 0 0 1px var(--nx-line)}
html.ww-next .wae-linechart text{font:13px var(--nx-font)}
html.ww-next .wca input[type=checkbox],html.ww-next .wja input[type=checkbox],html.ww-next .wae-roster input[type=checkbox]{width:18px;height:18px;min-height:18px;padding:0;border:0;box-shadow:none;accent-color:var(--nx-accent)}
html.ww-next .wca .wca-check{align-items:center;padding-bottom:12px;gap:8px;flex-direction:row}

/* ── THE FRAMED CONSOLE (offers · people · booked calls) ────────────────────────────────────────────────────── */
html.ww-next .one-admin #crFrame,html.ww-next #crFrame{border-radius:0;background:transparent;min-height:520px}
html.ww-next body.cr-embed{background:var(--nx-bg)}
html.ww-next body.cr-embed #adminScreen{
  background:transparent;
  --ink:var(--nx-bg); --ink2:var(--nx-surface); --ink3:var(--nx-sunken); --paper:var(--nx-fg);
  --gold:var(--nx-accent); --gold-d:var(--nx-accent-2); --teal:var(--nx-accent); --lime:var(--nx-ok);
  --red:var(--nx-danger); --muted:var(--nx-soft); --line:var(--nx-line-2);
  --disp:var(--nx-font); --body:var(--nx-font);
  font-family:var(--nx-font);color:var(--nx-fg);
}
html.ww-next body.cr-embed #adminScreen main{min-width:0}
html.ww-next body.cr-embed #adminScreen .topbar{
  position:sticky;top:0;min-height:0;margin:0 0 6px;padding:0 0 12px;border:0;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;gap:10px;
}
html.ww-next body.cr-embed[data-led="backend"][data-pending="0"] #adminScreen .topbar{display:none}   /* nothing to publish on a page that saves as it goes */
html.ww-next body.cr-embed #adminScreen .topbar::after{font:600 14px/1 var(--nx-font)!important;color:var(--nx-ok)!important}
html.ww-next body.cr-embed #adminScreen .status-chip{display:none}
html.ww-next body.cr-embed #adminScreen .content{padding:0 2px 40px;max-width:none}
html.ww-next body.cr-embed #adminScreen .page-eyebrow{display:none}
html.ww-next body.cr-embed #adminScreen .nx-chip{
  display:inline-flex!important;align-items:center;gap:6px!important;margin:0 0 20px!important;padding:6px 12px!important;
  border:0!important;border-radius:var(--nx-pill)!important;background:var(--nx-sunken)!important;box-shadow:inset 0 0 0 1px var(--nx-line);
  color:var(--nx-soft)!important;font:600 14px/1.2 var(--nx-font)!important;letter-spacing:0!important;text-transform:none!important;
}
html.ww-next body.cr-embed #adminScreen .nx-chip.nx-warned{background:var(--nx-danger-soft)!important;color:var(--nx-danger)!important;box-shadow:inset 0 0 0 1px var(--nx-danger-line)}
html.ww-next body.cr-embed #adminScreen .card[style*="198,54,43"]{background:var(--nx-warn-soft)!important;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nx-warn) 32%,transparent)}
html.ww-next body.cr-embed #adminScreen .card h2[style*="F0928A"]{color:var(--nx-warn)!important}
html.ww-next body.cr-embed #adminScreen .card h2[style*="--lime"]{color:var(--nx-ok)!important}
html.ww-next body.cr-embed #adminScreen .backend-note{border:0;border-radius:var(--nx-r);background:var(--nx-sunken);color:var(--nx-soft);font-size:14.5px;padding:12px 14px}
html.ww-next body.cr-embed #adminScreen h1{font:800 30px/1.2 var(--nx-font);letter-spacing:-.025em;color:var(--nx-fg);margin:0 0 6px}
html.ww-next body.cr-embed #adminScreen .page-sub{font:400 16px/1.55 var(--nx-font);color:var(--nx-soft);max-width:64ch;margin:0 0 22px}
html.ww-next body.cr-embed #adminScreen .card{
  border:0;border-radius:var(--nx-r-l);background:var(--nx-surface);box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-1);
  padding:22px;margin-bottom:18px;
}
html.ww-next body.cr-embed #adminScreen .card h3,
html.ww-next body.cr-embed #adminScreen .card h2{font:700 17px/1.3 var(--nx-font);letter-spacing:-.01em;text-transform:none;color:var(--nx-fg)}
html.ww-next body.cr-embed #adminScreen .hint,
html.ww-next body.cr-embed #adminScreen .card p{font-size:15px;line-height:1.55;color:var(--nx-soft)}
html.ww-next body.cr-embed #adminScreen label,
html.ww-next body.cr-embed #adminScreen .field > label{font:600 14px/1.3 var(--nx-font);letter-spacing:0;text-transform:none;color:var(--nx-soft)}
html.ww-next body.cr-embed #adminScreen input,
html.ww-next body.cr-embed #adminScreen select,
html.ww-next body.cr-embed #adminScreen textarea{
  min-height:44px;padding:10px 14px;border:0;border-radius:var(--nx-r);box-shadow:inset 0 0 0 1px var(--nx-edge);
  background:var(--nx-surface);color:var(--nx-fg);font:400 16px/1.4 var(--nx-font);
  transition:box-shadow var(--nx-fast) var(--nx-ease);
}
html.ww-next body.cr-embed #adminScreen input[type=checkbox],
html.ww-next body.cr-embed #adminScreen input[type=radio]{min-height:0;width:18px;height:18px;padding:0;box-shadow:none;accent-color:var(--nx-accent)}
html.ww-next body.cr-embed #adminScreen input[type=color]{min-height:0;width:44px;height:36px;padding:3px}
html.ww-next body.cr-embed #adminScreen input:focus,
html.ww-next body.cr-embed #adminScreen select:focus,
html.ww-next body.cr-embed #adminScreen textarea:focus{box-shadow:inset 0 0 0 2px var(--nx-accent);border-color:transparent}
html.ww-next body.cr-embed #adminScreen input::placeholder,
html.ww-next body.cr-embed #adminScreen textarea::placeholder{color:var(--nx-faint)}
html.ww-next body.cr-embed #adminScreen .btn{
  min-height:44px;padding:0 18px;border:0;border-radius:var(--nx-pill);box-shadow:inset 0 0 0 1px var(--nx-line-2);
  background:var(--nx-surface);color:var(--nx-fg);font:600 15px/1 var(--nx-font);letter-spacing:0;text-transform:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color var(--nx-fast) var(--nx-ease),box-shadow var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease);
}
html.ww-next body.cr-embed #adminScreen .btn-sm{min-height:40px;padding:0 15px;font-size:14.5px}
@media (hover:hover){ html.ww-next body.cr-embed #adminScreen .btn:hover{background:var(--nx-sunken);transform:none;filter:none} }
html.ww-next body.cr-embed #adminScreen .btn-gold{background:var(--nx-accent);color:var(--nx-on-accent);box-shadow:none}
@media (hover:hover){ html.ww-next body.cr-embed #adminScreen .btn-gold:hover{background:var(--nx-accent-2)} }
html.ww-next body.cr-embed #adminScreen .btn-red,
html.ww-next body.cr-embed #adminScreen .btn-danger{background:var(--nx-danger-soft);color:var(--nx-danger);box-shadow:inset 0 0 0 1px var(--nx-danger-line)}
html.ww-next body.cr-embed #adminScreen .btn-ghost{background:var(--nx-surface);color:var(--nx-fg)}
html.ww-next body.cr-embed #adminScreen .btn:disabled{opacity:.45;cursor:not-allowed}
html.ww-next body.cr-embed #adminScreen table{font-size:15px;border-collapse:collapse;width:100%}
html.ww-next body.cr-embed #adminScreen th{font:700 14px/1.3 var(--nx-font);letter-spacing:.03em;text-transform:uppercase;color:var(--nx-faint);border-bottom:1px solid var(--nx-line);padding:10px 12px;text-align:left}
html.ww-next body.cr-embed #adminScreen td{border-bottom:1px solid var(--nx-line);padding:13px 12px;color:var(--nx-fg)}
@media (hover:hover){ html.ww-next body.cr-embed #adminScreen tbody tr:hover td{background:var(--nx-hover)} }
html.ww-next body.cr-embed #adminScreen .pill{border:0;border-radius:var(--nx-pill);font:700 14px/1 var(--nx-font);letter-spacing:0;text-transform:none;padding:5px 10px;background:var(--nx-sunken);color:var(--nx-soft)}
html.ww-next body.cr-embed #adminScreen .pill.ok{background:var(--nx-ok-soft);color:var(--nx-ok)}
html.ww-next body.cr-embed #adminScreen .pill.todo{background:var(--nx-warn-soft);color:var(--nx-warn)}
html.ww-next body.cr-embed #adminScreen .empty{color:var(--nx-faint);font-size:15px}
html.ww-next body.cr-embed #adminScreen .add-btn{border:0;border-radius:var(--nx-r);box-shadow:inset 0 0 0 1.5px var(--nx-line-2);background:none;color:var(--nx-soft);font:600 15px/1 var(--nx-font);min-height:48px;transition:background-color var(--nx-fast) var(--nx-ease),color var(--nx-fast) var(--nx-ease)}
@media (hover:hover){ html.ww-next body.cr-embed #adminScreen .add-btn:hover{background:var(--nx-accent-soft);color:var(--nx-accent-ink);box-shadow:inset 0 0 0 1.5px var(--nx-accent-line)} }
html.ww-next body.cr-embed #adminScreen .row-item{border:0;border-radius:var(--nx-r);background:var(--nx-sunken);box-shadow:inset 0 0 0 1px var(--nx-line)}
html.ww-next body.cr-embed #admToast{font-family:var(--nx-font)}

/* ── FEEDBACK ───────────────────────────────────────────────────────────────────────────────────────────────── */
html.ww-next #toast{
  bottom:26px;padding:13px 18px;border:0;border-radius:var(--nx-r);
  background:var(--nx-fg);color:var(--nx-bg);font:600 15px/1.35 var(--nx-font);
  box-shadow:var(--nx-shadow-2);z-index:80;max-width:min(560px,calc(100vw - 32px));
  opacity:0!important;transform:translateX(-50%) translateY(8px);
  transition:opacity var(--nx-mid) var(--nx-ease),transform var(--nx-mid) var(--nx-ease-out);
}
html.ww-next #toast.nx-shown{opacity:1!important;transform:translateX(-50%)}
html.ww-next #toast.err{background:var(--nx-danger);color:var(--nx-on-danger)}
html.ww-next .nx-ask{
  position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 32px);overflow:auto;   /* the page resets every margin — a dialog is centred by its own */
  width:min(440px,calc(100vw - 32px));padding:0;border:0;border-radius:var(--nx-r-xl);
  background:var(--nx-surface);color:var(--nx-fg);box-shadow:0 0 0 1px var(--nx-line),var(--nx-shadow-2);
}
html.ww-next .nx-ask::backdrop{background:color-mix(in oklab,#0B0714 46%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html.ww-next .nx-ask form{padding:26px 26px 22px}
html.ww-next .nx-ask h2{font:800 20px/1.3 var(--nx-font);letter-spacing:-.015em;margin:0 0 8px}
html.ww-next .nx-ask p{font-size:15.5px;line-height:1.55;color:var(--nx-soft);margin:0 0 22px}
html.ww-next .nx-ask-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ── MOTION ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes nx-ring{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--nx-ok) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes nx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes nx-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  /* a page arrives in one short rise, its parts a breath apart — once, when it is opened */
  html.ww-next .tabpanel:not([hidden]) > *{animation:nx-rise var(--nx-slow) var(--nx-ease-out) both}
  html.ww-next .tabpanel:not([hidden]) > *:nth-child(2){animation-delay:40ms}
  html.ww-next .tabpanel:not([hidden]) > *:nth-child(3){animation-delay:80ms}
  html.ww-next .tabpanel:not([hidden]) > *:nth-child(4){animation-delay:120ms}
  html.ww-next .tabpanel:not([hidden]) > *:nth-child(n+5){animation-delay:160ms}
  html.ww-next .gate .card{animation:nx-rise var(--nx-slow) var(--nx-ease-out) both}
  html.ww-next .nx-ask[open]{animation:nx-rise var(--nx-mid) var(--nx-ease-out) both}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  html.ww-next *,html.ww-next *::before,html.ww-next *::after{animation:none!important;transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* ── NARROW SCREENS ─────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  html.ww-next .nx-cols{grid-template-columns:minmax(0,1fr)}
  html.ww-next .nx-more-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
  html.ww-next .shell{grid-template-columns:minmax(0,1fr)}
  html.ww-next .side{
    position:fixed;inset:0 auto 0 0;z-index:60;width:min(88vw,320px);height:100dvh;
    transform:translateX(-102%);transition:transform var(--nx-mid) var(--nx-ease-out);box-shadow:none;
  }
  html.ww-next.nx-nav-open .side{transform:none;box-shadow:var(--nx-shadow-2)}
  html.ww-next .nx-scrim{position:fixed;inset:0;z-index:55;background:color-mix(in oklab,#0B0714 46%,transparent);opacity:0;pointer-events:none;transition:opacity var(--nx-mid) var(--nx-ease)}
  html.ww-next.nx-nav-open .nx-scrim{opacity:1;pointer-events:auto}
  html.ww-next .nx-menu{
    display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin-left:-8px;cursor:pointer;
    border:0;border-radius:var(--nx-r);background:none;color:var(--nx-fg);
  }
  html.ww-next .main{padding-bottom:56px}
  html.ww-next .topbar{flex-wrap:nowrap}
  html.ww-next .one-primary .b span.nx-t{display:none}
}
@media (max-width:640px){
  html.ww-next h1.page-title,html.ww-next body.cr-embed #adminScreen h1{font-size:25px}
  html.ww-next .card,html.ww-next .card:not(.px),html.ww-next .on-now,html.ww-next .level-card{padding:18px 16px 16px}
  html.ww-next .lvl button{padding:0 4px}
  html.ww-next .lvl .lbl{font-size:14px}
  html.ww-next .lvl-head .hint{margin-left:0}
  html.ww-next .lvl-actions > .btn{flex:1 1 100%}
  html.ww-next .on-big b{font-size:38px}
  html.ww-next .phase-pill{padding:0 11px}
  html.ww-next .event-name b{font-size:15px}
}