/* CBX UX Shell — the front-of-house console. Calm, dense, keyboard-first. Brand indigo #365AB6. */
.cbx-shell{
  --accent:#365AB6; --accent-d:#2A4790; --accent-t:#EAF0FB;
  --canvas:#EEF1F5; --card:#FFFFFF; --line:#DFE4EC; --line-2:#EAEEF3;
  --ink:#141A24; --mut:#5B6472; --faint:#8A94A6;
  --rail:#3B465A; --rail-ink:#BAC3D2; --rail-hi:#F4F7FC; --rail-grp:#98A2B4;
  --nav-bg:linear-gradient(90deg,rgba(54,90,182,.26),rgba(54,90,182,.06)); --nav-ink:#fff; --kk-bd:#55617A; --kk-bg:#4A5670;
  --idea:#6B7280; --idea-bg:#EEF0F3; --blue:#365AB6; --blue-bg:#EAF0FB;
  --amber:#9A5B00; --amber-bg:#FBEFD8; --green:#1C7A49; --green-bg:#E2F2E9; --red:#B32D2E; --red-bg:#FBE9E9;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.5;
  background:var(--canvas);-webkit-font-smoothing:antialiased;
  height:100vh;overflow:hidden;display:flex;flex-direction:column;   /* viewport-locked → main + ticker each scroll on their own */
}
/* The theme's palette background lives on the page WRAPPERS, not on body — so strip it there (shell page
   only) and let the app's own canvas show. Covers block-theme (.wp-site-blocks / group blocks) and
   classic-theme (#page/#content/.site-content) structures. The app then fills its container full-bleed. */
body.cbx-ux-shell-page{margin:0;background:#F7F5F1}
body.cbx-ux-shell-page .wp-site-blocks,
body.cbx-ux-shell-page main,
body.cbx-ux-shell-page #page,
body.cbx-ux-shell-page #content,
body.cbx-ux-shell-page .site-content,
body.cbx-ux-shell-page .content-area,
body.cbx-ux-shell-page .entry-content,
body.cbx-ux-shell-page .wp-block-group,
body.cbx-ux-shell-page .wp-block-post-content,
body.cbx-ux-shell-page article,
body.cbx-ux-shell-page .site-main{
  background:transparent!important;margin:0!important;padding:0!important;max-width:none!important;width:auto!important;border:0!important}
body.cbx-ux-shell-page .cbx-shell{width:100%;height:100vh}
/* account for the WP admin bar (admins only) so the viewport-locked shell doesn't overflow into a page scroll */
body.admin-bar.cbx-ux-shell-page .cbx-shell{height:calc(100vh - 32px)}
@media screen and (max-width:782px){body.admin-bar.cbx-ux-shell-page .cbx-shell{height:calc(100vh - 46px)}}
/* ---- selectable colour schemes (per-user, set via the ⚙ cog) — default is Warm Paper ---- */
.cbx-shell[data-theme="paper"]{ --canvas:#F7F5F1; --card:#FFFFFF; --line:#E7E2D8; --line-2:#EFEAE1; --ink:#28241D;
  --accent:#3F5AA6; --accent-d:#334A86; --accent-t:#ECEFF8;
  --rail:#EFEBE4; --rail-ink:#6B6459; --rail-hi:#2A251E; --rail-grp:#A79E8E;
  --nav-bg:rgba(63,90,166,.12); --nav-ink:#334A86; --kk-bd:#D8D1C4; --kk-bg:#FFFFFF; }
.cbx-shell[data-theme="slate"]{ --canvas:#EEF1F5; --card:#FFFFFF; --line:#DFE4EC; --line-2:#EAEEF3; --ink:#141A24;
  --accent:#365AB6; --accent-d:#2A4790; --accent-t:#EAF0FB;
  --rail:#3B465A; --rail-ink:#B7C0CF; --rail-hi:#F4F7FC; --rail-grp:#98A2B4;
  --nav-bg:linear-gradient(90deg,rgba(54,90,182,.26),rgba(54,90,182,.06)); --nav-ink:#fff; --kk-bd:#55617A; --kk-bg:#4A5670; }
.cbx-shell[data-theme="light"]{ --canvas:#F6F7F9; --card:#FFFFFF; --line:#E3E7EE; --line-2:#EEF1F6; --ink:#1B2130;
  --accent:#365AB6; --accent-d:#2A4790; --accent-t:#EAF0FB;
  --rail:#EAEDF1; --rail-ink:#5C6575; --rail-hi:#1B2130; --rail-grp:#98A0AE;
  --nav-bg:var(--accent-t); --nav-ink:var(--accent-d); --kk-bd:#CBD2DD; --kk-bg:#FFFFFF; }
.cbx-shell[data-theme="graphite"]{ --canvas:#EEF0F2; --card:#FFFFFF; --line:#E1E5EA; --line-2:#EDEFF2; --ink:#141A24;
  --accent:#3E63C7; --accent-d:#33469A; --accent-t:#EAEFFB;
  --rail:#33383F; --rail-ink:#B9BFC8; --rail-hi:#F4F6F8; --rail-grp:#8B929C;
  --nav-bg:linear-gradient(90deg,rgba(54,90,182,.32),rgba(54,90,182,.08)); --nav-ink:#fff; --kk-bd:#4C525B; --kk-bg:#444A53; }
.cbx-shell[data-theme="mist"]{ --canvas:#EBEEF2; --card:#FFFFFF; --line:#DEE3EB; --line-2:#E9EDF2; --ink:#141A24;
  --accent:#4763C0; --accent-d:#33469A; --accent-t:#EAEFFB;
  --rail:#48505F; --rail-ink:#C2CAD6; --rail-hi:#F5F7FB; --rail-grp:#9BA4B3;
  --nav-bg:linear-gradient(90deg,rgba(71,99,192,.30),rgba(71,99,192,.07)); --nav-ink:#fff; --kk-bd:#606B80; --kk-bg:#59647B; }
.cbx-shell *,.cbx-shell *::before,.cbx-shell *::after{box-sizing:border-box}
.cbx-shell [x-cloak]{display:none!important}
.cbx-shell code,.cbx-shell .mono{font-family:var(--mono)}
.cbx-shell kbd{font-family:var(--mono);font-size:11px;background:#EDF1F8;border:1px solid var(--line);
  border-bottom-width:2px;color:var(--mut);border-radius:5px;padding:1px 6px;min-width:16px;text-align:center;display:inline-block}

/* topbar */
.cbx-topbar{display:flex;align-items:center;gap:14px;background:var(--rail);color:var(--rail-hi);padding:11px 15px;font-size:13px}
.cbx-brand{display:flex;align-items:center;gap:9px;font-weight:640}
.cbx-brand .glyph{width:19px;height:19px;border-radius:5px;background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700}
.cbx-brand .sub{color:var(--rail-ink);font-weight:500}
.cbx-ctx{color:var(--rail-ink);display:flex;align-items:center;gap:8px}
.cbx-ctx strong{color:var(--rail-hi);font-weight:600}
.cbx-ctx .dot{width:6px;height:6px;border-radius:50%;background:#5EC08A;display:inline-block}
.cbx-spacer{flex:1}
/* Topbar action buttons — ONE size: Notices · ＋Task · ⚙ theme · jump · Sign out share height:28 + consistent padding
   so the row reads as a tidy set (was mixed heights + an over-large "jump" — Ockert, CBXOpsTopRow.png). */
.cbx-kk{background:transparent;border:1px solid var(--kk-bd);color:var(--rail-ink);border-radius:7px;
  padding:5px 11px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.cbx-kk kbd{background:var(--kk-bg);border-color:var(--kk-bd);color:var(--rail-hi);font-size:10px;padding:0 4px;min-width:0;border-bottom-width:1px}
.cbx-signout{background:transparent;border:1px solid var(--kk-bd);color:var(--rail-ink);border-radius:7px;
  padding:5px 11px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.cbx-signout:hover{color:var(--rail-hi);border-color:var(--rail-hi)}
/* Topbar buttons are <button>s inside .cbx-shell, so `.cbx-shell button{font-size:13px;line-height:1.2}` (0,0,1,1) was
   OVER-RIDING .cbx-kk (0,0,1,0) — inflating them (font 13 + tall line-box) so they dwarfed every in-page .cbx-btn.
   Pin them with the SAME !important scoping .cbx-btn uses: compact padding + font-12 + line-height-1 (centres by the box
   model + collapses the line-box), height:auto. This is the definitive size for the topbar action row (Ockert). */
.cbx-shell .cbx-kk,.cbx-shell .cbx-signout{
  padding:5px 11px!important; font-size:12px!important; line-height:1!important; height:auto!important; min-height:0!important; }
.cbx-shell .cbx-cog-btn{ padding:5px 11px!important; font-size:14px!important; line-height:1!important; height:auto!important; min-height:0!important; }
.cbx-shell .cbx-kk kbd{ font-size:10px!important; line-height:1.3!important; padding:0 4px!important; }
/* colour-scheme cog + popover */
.cbx-cog{position:relative;display:inline-flex}
.cbx-cog-btn{background:transparent;border:1px solid var(--kk-bd);color:var(--rail-ink);border-radius:7px;
  padding:5px 11px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cbx-cog-btn:hover{color:var(--rail-hi)}
.cbx-cog-menu{position:absolute;top:34px;right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 20px 50px -18px rgba(20,26,36,.45);padding:6px;min-width:194px;z-index:100}
.cbx-cog-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:6px 10px 4px}
.cbx-cog-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  border-radius:7px;padding:7px 10px;font-family:var(--sans);font-size:13.5px;color:var(--ink)}
.cbx-cog-opt:hover{background:var(--accent-t)}
.cbx-cog-opt .sw{width:26px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.12);display:inline-flex;flex:0 0 auto;overflow:hidden}
.cbx-cog-opt .sw i{flex:1}.cbx-cog-opt .sw i.r{flex:1.5}
.cbx-cog-opt .ck{margin-left:auto;color:var(--accent);font-weight:700;opacity:0}
.cbx-cog-opt.on .ck{opacity:1}

/* body */
.cbx-body{display:grid;grid-template-columns:214px 1fr;flex:1;min-height:0}
.cbx-rail{background:var(--rail);color:var(--rail-ink);padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.cbx-grp{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--rail-grp);padding:12px 10px 6px}
.cbx-grp:first-child{padding-top:2px}
.cbx-nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;color:var(--rail-ink);
  font-size:13.5px;text-decoration:none;cursor:pointer}
.cbx-nav:hover{background:rgba(255,255,255,.05);color:var(--rail-hi)}
.cbx-nav .ico{width:15px;text-align:center;opacity:.85;font-size:13px}
.cbx-nav.active{background:var(--nav-bg);color:var(--nav-ink);box-shadow:inset 2px 0 0 var(--accent)}
.cbx-nav.active .ico{opacity:1}
/* ── nav-rail contextual FILTER panel (REUSABLE: any Function's rail_filters callback renders .cbxrf-* into this slot) ── */
.cbx-rail-filters{margin:5px 2px 8px}
.cbx-rail-filters.is-empty{display:none}
.cbxrf{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;color:var(--ink)}
.cbxrf-h{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:8px}
.cbxrf-h .ln{flex:1;height:1px;background:var(--line)}
.cbxrf-grp{margin-bottom:11px}
.cbxrf-grp:last-child{margin-bottom:0}
.cbxrf-lab{font-size:10.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.cbxrf-seg{display:flex;background:var(--accent-t);border-radius:8px;padding:3px;gap:3px}
.cbxrf-seg a{flex:1;text-decoration:none;border-radius:6px;padding:5px 3px;font-size:11.5px;font-weight:600;color:var(--mut);text-align:center;line-height:1.15;display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.cbxrf-seg a .n{font-size:10px;color:var(--faint);font-weight:600}
.cbxrf-seg a.on{background:var(--card);color:var(--accent);box-shadow:0 1px 2px rgba(20,26,36,.12)}
.cbxrf-seg a.on .n{color:var(--accent)}
.cbxrf-more{margin-top:7px}
.cbxrf-more>summary{list-style:none;cursor:pointer;font-size:12px;color:var(--accent);font-weight:560;display:flex;align-items:center;gap:5px;padding:3px 2px}
.cbxrf-more>summary::-webkit-details-marker{display:none}
.cbxrf-more>summary .chev{font-size:10px;transition:transform .15s ease}
.cbxrf-more[open]>summary .chev{transform:rotate(90deg)}
.cbxrf-list{display:flex;flex-direction:column;margin-top:4px;max-height:220px;overflow:auto}
.cbxrf-list a{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;text-decoration:none;color:var(--ink);font-size:12px}
.cbxrf-list a:hover{background:var(--accent-t)}
.cbxrf-list a.on{background:var(--accent-t);color:var(--accent);font-weight:600}
.cbxrf-list a .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.cbxrf-list a .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbxrf-list a .n{color:var(--faint);font-weight:600;font-size:11px;flex:0 0 auto}
.cbxrf-list a.on .n{color:var(--accent)}
.cbxrf-date{display:flex;align-items:center;gap:6px;background:var(--accent-t);border-radius:7px;padding:4px 8px}
.cbxrf-date input{border:0;background:transparent;outline:0;font-family:var(--sans);font-size:12px;color:var(--ink);flex:1;cursor:pointer}
.cbxrf-find{display:flex;align-items:center;gap:6px;background:var(--accent-t);border-radius:7px;padding:0 8px;height:29px;margin-bottom:6px;font-size:12px;color:var(--mut)}
.cbxrf-find input{border:0;background:transparent;outline:0;flex:1;font-size:12px;font-family:var(--sans);color:var(--ink)}

.cbx-main{background:var(--canvas);min-width:0;overflow-y:auto;overflow-x:hidden}
/* right notifications ticker (opt-in third column; hidden until open so it never creates a stray grid track) */
.cbx-body.ticker-open{grid-template-columns:214px 1fr 264px}
.cbx-ticker{display:none}
.cbx-body.ticker-open .cbx-ticker{display:flex;flex-direction:column;background:var(--rail);color:var(--rail-ink);border-left:1px solid rgba(0,0,0,.16);min-height:0}
.cbx-tk-head{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12.5px;color:var(--rail-hi);border-bottom:1px solid rgba(0,0,0,.18)}
.cbx-tk-title{font-weight:600}
.cbx-tk-x{background:transparent;border:0;color:var(--rail-grp);cursor:pointer;font-size:12px;line-height:1;padding:1px 3px;border-radius:5px;opacity:.75}
.cbx-tk-x:hover{color:var(--rail-hi);opacity:1}
.cbx-tk-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:7px}
.cbx-tk-empty{color:var(--rail-grp);font-size:12.5px;text-align:center;padding:18px 8px}
.cbx-tk-item{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:8px 9px}
.cbx-tk-item.warn{border-color:rgba(217,154,43,.55)}
a.cbx-tk-item.is-link{text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s}
a.cbx-tk-item.is-link:hover{background:rgba(255,255,255,.09);border-color:var(--rail-hi)}
.cbx-tk-go{display:inline-block;margin-top:5px;margin-left:6px;font-size:10.5px;color:var(--rail-hi)}
.cbx-tk-top{display:flex;align-items:baseline;gap:6px;font-size:12px}
.cbx-tk-who{font-weight:600;color:var(--rail-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbx-tk-when{margin-left:auto;color:var(--rail-grp);font-size:11px;white-space:nowrap}
.cbx-tk-body{color:var(--rail-ink);font-size:12.5px;line-height:1.35;margin-top:3px;word-break:break-word}
.cbx-tk-chan{display:inline-block;margin-top:5px;font-size:10.5px;color:var(--rail-grp);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:0 5px}
.cbx-tk-toggle.on{border-color:var(--rail-hi);color:var(--rail-hi)}
@media(max-width:980px){.cbx-body.ticker-open{grid-template-columns:1fr}.cbx-body.ticker-open .cbx-ticker{max-height:40vh}}
.cbx-screen{display:flex;flex-direction:column}

/* screen head (used by screens) */
.cbx-head{padding:16px 20px 12px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.cbx-head h2{font-size:18px;font-weight:640;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:8px}
.cbx-head .sub{color:var(--faint);font-size:12.5px}
.cbx-head .cbx-spacer{flex:1}

/* buttons */
.cbx-btn{font-family:var(--sans);font-size:13px;font-weight:560;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:7px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.cbx-btn:hover{border-color:#CBD3E0}
.cbx-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.cbx-btn.pri:hover{background:var(--accent-d)}
.cbx-btn kbd{background:#EDF1F8}
.cbx-btn.pri kbd{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25);color:#fff}

/* toolbar / search / chips */
.cbx-toolbar{display:flex;align-items:center;gap:10px;padding:11px 20px;flex-wrap:wrap}
.cbx-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:0 10px;min-width:220px;color:var(--faint);font-size:13px}
.cbx-search input{border:0;outline:0;background:transparent;font-family:var(--sans);font-size:13.5px;color:var(--ink);padding:7px 0;flex:1;min-width:0}
.cbx-search .k{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--faint)}
.cbx-chips{display:flex;gap:6px;flex-wrap:wrap}
.cbx-chip{font-size:12.5px;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:4px 11px;
  color:var(--mut);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.cbx-chip .n{font-family:var(--mono);font-size:11px;color:var(--faint)}
.cbx-chip.on{background:var(--accent-t);border-color:#C9D8F2;color:var(--accent-d)}
.cbx-chip.on .n{color:var(--accent)}
.cbx-toolbar-right{margin-left:auto;display:flex;gap:8px}

/* grid */
.cbx-grid-wrap{padding:0 0 6px}
.cbx-grid{margin:2px 12px 12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.cbx-grid table{width:100%;border-collapse:collapse;font-size:13.5px}
.cbx-grid thead th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);background:#FCFDFE}
.cbx-grid tbody td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;font-variant-numeric:tabular-nums}
.cbx-row{cursor:pointer;scroll-margin:80px}
.cbx-row:focus{outline:none}
.cbx-row:not(.cbx-focus):hover td{background:rgba(120,140,170,.08)}
.cbx-row.cbx-focus td{background:var(--accent-t);box-shadow:inset 2px 0 0 var(--accent)}
.cbx-acc-red td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.cbx-acc-amber td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.cbx-acc-green td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.cbx-acc-blue td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.cbx-acc-grey td:first-child{box-shadow:inset 3px 0 0 #C3CAD6}
.cbx-toggle{background:none;border:0;color:var(--faint);font-family:var(--mono);cursor:pointer;margin-right:7px;padding:0;width:12px}
.cbx-detail td{background:#FCFDFF;padding:0;border-bottom:1px solid var(--line)}
.cbx-detail-in{padding:16px 20px 18px;display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
.cbx-empty{color:var(--faint);text-align:center;padding:34px 14px!important;font-size:14px}

/* pills, tags, data */
.pill{font-size:11.5px;font-weight:600;border-radius:20px;padding:2px 10px;display:inline-flex;align-items:center;gap:6px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.idea{color:var(--idea);background:var(--idea-bg)}
.pill.blueprinted{color:var(--blue);background:var(--blue-bg)}
.pill.building{color:var(--amber);background:var(--amber-bg)}
.pill.live{color:var(--green);background:var(--green-bg)}
.cbx-fid{font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.cbx-tag{font-size:11px;font-family:var(--mono);color:var(--mut);background:#F2F4F8;border-radius:4px;padding:1px 6px}
.cbx-upd{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* inline edit (no-jump) */
.cbx-field label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:4px}
.cbx-field select,.cbx-field input,.cbx-field textarea{font-family:var(--sans);font-size:13.5px;border:1px solid var(--line);
  border-radius:7px;padding:7px 10px;color:var(--ink);background:var(--card);width:100%;max-width:340px}
.cbx-field textarea{min-height:54px;resize:vertical}
.cbx-field:focus-within label{color:var(--accent-d)}
.cbx-saved{font-size:12.5px;color:var(--green);font-weight:560;display:inline-flex;align-items:center;gap:5px;margin-left:8px}
.cbx-inline{display:flex;align-items:center;gap:8px}
.cbx-hint{font-size:12px;color:var(--faint);margin-top:8px}
.cbx-detail-in h4{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cbx-detail-in p{margin:0;color:var(--mut);font-size:13.5px;max-width:60ch}

/* pager */
.cbx-pager{display:flex;align-items:center;gap:4px;justify-content:flex-end;padding:2px 20px 14px}
.cbx-pg{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:3px 9px;color:var(--mut);
  text-decoration:none;font-size:13px}
.cbx-pg.disabled{opacity:.4}
.cbx-pg-count{font-family:var(--mono);font-size:12px;color:var(--faint);padding:0 8px;font-variant-numeric:tabular-nums}

/* flash / login */
.cbx-flash{margin:16px 20px;padding:11px 14px;border-radius:8px;font-size:13.5px}
.cbx-flash.err{background:var(--red-bg);color:var(--red);border:1px solid #F0C9C9}
.cbx-flash.ok{background:var(--green-bg);color:var(--green);border:1px solid #BFE3CD}
.cbx-toast-wrap{position:fixed;top:14px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:380px;pointer-events:none}
.cbx-toast{pointer-events:auto;padding:11px 14px;border-radius:8px;font-size:13.5px;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.18);background:var(--card,#fff);border:1px solid var(--line);color:var(--ink);opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease}
.cbx-toast.in{opacity:1;transform:none}
.cbx-toast.ok{background:var(--green-bg);color:var(--green);border-color:#BFE3CD}
.cbx-toast.err{background:var(--red-bg);color:var(--red);border-color:#F0C9C9}
.cbx-toast.warn{border-left:3px solid #d99a2b}
/* Inline header message — the toast's primary home: a single readable pill centred in the topbar's middle gap (fills
   the old spacer, so it also pushes the action buttons right). Truncates with an ellipsis; ✕ dismisses. */
.cbx-hdrmsg-wrap{flex:1;display:flex;justify-content:center;align-items:center;min-width:0;padding:0 12px}
.cbx-hdrmsg{display:none;max-width:100%;align-items:center;gap:8px;padding:3px 12px;border-radius:999px;font-size:12.5px;line-height:1.35;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);opacity:0;transition:opacity .2s ease}
.cbx-hdrmsg.in{display:inline-flex;opacity:1}
.cbx-hdrmsg.ok{background:var(--green-bg);color:var(--green);border-color:#BFE3CD}
.cbx-hdrmsg.err{background:var(--red-bg);color:var(--red);border-color:#F0C9C9}
.cbx-hdrmsg.warn{border-left:3px solid #d99a2b}
.cbx-hdrmsg-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-hdrmsg button{background:none;border:0;color:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.7;flex:0 0 auto}
.cbx-hdrmsg button:hover{opacity:1}
.cbx-login{padding:52px 30px;text-align:center;max-width:440px;margin:0 auto}
.cbx-login h2{font-size:20px;margin:16px 0 8px}
.cbx-login p{color:var(--mut);font-size:14px;margin:0 0 18px}

/* command palette */
.cbx-palette{position:fixed;inset:0;background:rgba(20,26,36,.34);display:flex;align-items:flex-start;
  justify-content:center;padding-top:14vh;z-index:99999}
.cbx-palette-box{background:var(--card);border:1px solid var(--line);border-radius:12px;width:min(560px,92vw);
  box-shadow:0 30px 80px -20px rgba(20,26,36,.5);overflow:hidden}
.cbx-palette-in{width:100%;border:0;border-bottom:1px solid var(--line);padding:15px 18px;font-size:16px;outline:0;font-family:var(--sans)}
.cbx-palette-list{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.cbx-palette-list li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px}
.cbx-palette-list li:hover{background:var(--accent-t)}
.cbx-palette-list a{text-decoration:none;color:var(--ink);font-size:14px;font-weight:540}
.cbx-palette-list .grp{margin-left:auto;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}

@media (max-width:720px){
  /* stacked layout — revert to normal page scroll so nothing gets viewport-clipped */
  .cbx-shell{height:auto;min-height:100vh;overflow:visible}
  body.cbx-ux-shell-page .cbx-shell,body.admin-bar.cbx-ux-shell-page .cbx-shell{height:auto}
  .cbx-main,.cbx-rail{overflow:visible}
  .cbx-body{grid-template-columns:1fr}
  .cbx-rail{flex-direction:row;overflow-x:auto;gap:2px;padding:8px}
  .cbx-grp{display:none}
  .cbx-detail-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .cbx-nav,.cbx-chip,.cbx-btn,.cbx-pg{transition:background .12s ease,color .12s ease,border-color .12s ease}
}

/* ===================================================================================================================
   HOST-THEME RESET — the app is a shortcode on a themed WP page, so the front-end theme's typography, colours and form
   controls bleed into any element the shell doesn't explicitly claim (giant serif headings, oddly-outlined buttons,
   faint inputs). This is the OVERRIDE colour/type scheme for cbx-ux Ops: a plain, readable, consistent baseline scoped
   to .cbx-shell. A few !important where themes fight with high specificity. (Basic for now — proper skin later.)
   =================================================================================================================== */
.cbx-shell, .cbx-shell input, .cbx-shell select, .cbx-shell textarea, .cbx-shell button{
  font-family:var(--sans)!important; }
.cbx-shell h1,.cbx-shell h2,.cbx-shell h3,.cbx-shell h4,.cbx-shell h5,.cbx-shell h6{
  font-family:var(--sans)!important; color:var(--ink); line-height:1.25; margin:0; font-weight:640;
  letter-spacing:-.01em; text-transform:none; text-shadow:none; }
.cbx-shell h2{ font-size:18px!important; }
.cbx-shell h3{ font-size:13px!important; font-weight:600; color:var(--ink); margin:1.25em 0 .5em; }
.cbx-shell h4{ font-size:12.5px!important; }
.cbx-shell p{ font-size:13.5px; line-height:1.5; color:var(--ink); margin:.5em 0; }
.cbx-shell a{ color:var(--accent-d); box-shadow:none; text-decoration:none; }
.cbx-shell a:hover{ text-decoration:underline; }
.cbx-shell label{ font-size:13px; color:var(--ink); font-weight:400; }
.cbx-shell ul,.cbx-shell ol{ margin:.3em 0; }
.cbx-shell hr{ border:0; border-top:1px solid var(--line); margin:1.1em 0; }
/* form controls — one consistent size/border/radius */
.cbx-shell input[type=text],.cbx-shell input[type=search],.cbx-shell input[type=date],.cbx-shell input[type=email],
.cbx-shell input[type=tel],.cbx-shell input[type=number],.cbx-shell input[type=password],.cbx-shell select,.cbx-shell textarea{
  font-size:13.5px!important; line-height:1.4; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:7px; padding:7px 10px; box-shadow:none; height:auto; max-width:100%; }
.cbx-shell input:focus,.cbx-shell select:focus,.cbx-shell textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-t); }
.cbx-shell input::placeholder,.cbx-shell textarea::placeholder{ color:var(--faint); }
.cbx-shell .regular-text{ width:340px; max-width:100%; }
/* neutralise host-theme buttons, then re-assert .cbx-btn as our small, consistent control */
.cbx-shell button,.cbx-shell input[type=submit],.cbx-shell input[type=button]{
  font-size:13px; letter-spacing:normal; text-transform:none; text-shadow:none; line-height:1.2; }
.cbx-shell .cbx-btn{
  background:var(--card)!important; border:1px solid var(--line)!important; color:var(--ink)!important;
  border-radius:7px!important; padding:6px 11px!important; font-size:13px!important; font-weight:560; line-height:1.2!important;
  box-shadow:none!important; text-transform:none!important; letter-spacing:normal!important; text-decoration:none!important;
  height:auto!important; width:auto!important; min-height:0!important; }
.cbx-shell .cbx-btn:hover{ border-color:#CBD3E0!important; }
.cbx-shell .cbx-btn.pri{ background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; }
.cbx-shell .cbx-btn.pri:hover{ background:var(--accent-d)!important; }
.cbx-shell .cbx-btn[style*="font-size:12px"]{ padding:4px 8px!important; } /* legacy inline "small" stamp buttons (back-compat) */
.cbx-shell .cbx-btn.sm{ padding:4px 9px!important; font-size:12px!important; } /* STANDARD compact button — use `class="cbx-btn sm"` instead of inline styles */
/* instrumentation overlay (cbx-feedback marker-ui.{css,js}) loads on shell pages so the (?) annotate tool works.
   Force the (?) into a compact, CENTRED, accent-bordered circle regardless of theme/button resets (box-sizing +
   padding:0 + inline-flex centring were missing → it inflated + the glyph sat skew). Then tame the @code chip. */
.cbx-shell .wms-help-toggle{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  box-sizing:border-box!important; width:20px!important; height:20px!important; min-width:20px!important;
  padding:0!important; margin-left:6px!important; flex:0 0 auto!important;
  border:1.5px solid var(--accent)!important; border-radius:50%!important;
  background:var(--card)!important; color:var(--accent)!important;
  font-size:12px!important; font-weight:700!important; line-height:1!important; vertical-align:middle!important; }
.cbx-shell .wms-help-toggle:hover{ background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; }
/* the always-shown screen @code chip (inline-styled by the spine) — a small on-theme code pill, vertically centred */
.cbx-shell .wms-screen-code{
  display:inline-flex!important; align-items:center!important; box-sizing:border-box!important;
  background:transparent!important; border:1px solid var(--line)!important; color:var(--mut)!important;
  font-size:10px!important; font-weight:600!important; letter-spacing:.5px!important; padding:1px 6px!important;
  border-radius:4px!important; line-height:1.4!important; vertical-align:middle!important; }
.cbx-shell [data-wms-marker]{ outline:none!important; }

/* Reusable ＋New modal (shell-owned) — cbxModal()/cbxModalDone(); openers: waybills · partners · merchants */
.cbx-modal{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.4);display:flex;align-items:flex-start;justify-content:center;padding:7vh 16px}
.cbx-modal-box{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.28);width:100%;max-width:840px;padding:18px 20px;position:relative;max-height:86vh;overflow:auto}
.cbx-modal-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:16px;color:var(--mut);cursor:pointer;line-height:1}
.cbx-modal-box .cbx-head{padding:0 0 6px}

/* ---- H-035 MESSAGES — the bottom status bar (latest + ▲ history) + the error dialog. A flash moved to the bar is hidden in
   the pane (.cbx-routed) so there's one copy; standing banners / in-form notes / .cbx-keep / .cbx-notoast stay inline. */
.cbx-main .cbx-flash.cbx-routed{display:none !important}
/* H-039: the bar is the LAST ROW OF THE MAIN COLUMN — main is a flex column (still the scroller), the content grows, the bar is
   sticky at the bottom: visible on a long screen, resting at the bottom on a short one; rail + ticker keep full height. */
.cbx-main{display:flex;flex-direction:column}
#cbx-main-inner{flex:1 0 auto;min-width:0}
.cbx-main>.cbx-msgbar{position:sticky;bottom:0}
.cbx-msgbar{flex:0 0 auto;position:relative;display:flex;align-items:center;gap:8px;min-height:45px;padding:4px 12px calc(4px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--card);color:var(--mut);font-size:12.5px;line-height:1.35;z-index:40}
.cbx-msgbar-hist{background:none;border:1px solid var(--line);border-radius:6px;color:var(--mut);font-size:11px;line-height:1;padding:3px 6px;cursor:pointer;flex:0 0 auto}
/* the portal theme's global button styling blew this up to ~88×60 — same hard reset as the cog button */
.cbx-shell .cbx-msgbar-hist{ padding:2px 7px!important; font-size:11px!important; line-height:1.2!important; height:auto!important; min-height:0!important; width:auto!important; min-width:0!important; margin:0!important; box-shadow:none!important; background:transparent!important; color:inherit!important; border:1px solid var(--line)!important; border-radius:6px!important; font-weight:600!important; text-transform:none!important; letter-spacing:0!important; align-self:center!important }
.cbx-msgbar-hist:hover{color:var(--ink)}
.cbx-msgbar-ico{font-weight:700;flex:0 0 auto}
.cbx-msgbar-time{font-family:var(--mono,monospace);font-size:11px;color:var(--faint);flex:0 0 auto}
.cbx-msgbar-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cbx-msgbar-txt a,.cbx-msgbar-list a,.cbx-errdlg-body a{color:var(--accent,#365AB6);text-decoration:underline}
.cbx-msgbar.ok{background:var(--green-bg);color:var(--green)}
.cbx-msgbar.info{background:#EAF1FD;color:#2B4F9E}
.cbx-msgbar.warn{background:var(--amber-bg);color:var(--amber)}
.cbx-msgbar.err{background:var(--red-bg);color:var(--red)}
.cbx-msgbar.settled{background:var(--card);color:var(--mut);transition:background .6s ease,color .6s ease}
.cbx-msgbar-list{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);max-height:46vh;overflow:auto;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 44px -16px rgba(20,26,36,.45);padding:6px}
.cbx-msgbar-row{display:flex;gap:8px;align-items:baseline;padding:6px 8px;border-radius:6px;font-size:12.5px}
.cbx-msgbar-row+.cbx-msgbar-row{border-top:1px solid var(--line-2)}
.cbx-msgbar-row .i{font-weight:700;width:14px;flex:0 0 auto}
.cbx-msgbar-row .t{font-family:var(--mono,monospace);font-size:11px;color:var(--faint);flex:0 0 auto}
.cbx-msgbar-row .m{flex:1;min-width:0}
.cbx-msgbar-row .w{font-size:11px;color:var(--faint);flex:0 0 auto}
.cbx-msgbar-row.ok .i{color:var(--green)} .cbx-msgbar-row.warn .i{color:var(--amber)} .cbx-msgbar-row.err .i{color:var(--red)} .cbx-msgbar-row.info .i{color:#2B4F9E}
.cbx-errdlg{position:fixed;inset:0;z-index:100;background:rgba(20,26,36,.38);display:flex;align-items:center;justify-content:center;padding:16px}
.cbx-errdlg[hidden]{display:none}
.cbx-errdlg-box{background:var(--card);color:var(--ink);border-radius:12px;border-top:4px solid var(--red);box-shadow:0 24px 60px -18px rgba(20,26,36,.55);
  width:min(520px,100%);padding:16px 18px}
.cbx-errdlg-box h3{margin:0 0 8px;font-size:15px;color:var(--red)}
.cbx-errdlg-body{font-size:13.5px;line-height:1.45;max-height:50vh;overflow:auto}
.cbx-errdlg-body p{margin:0}.cbx-errdlg-body ul{margin:0;padding-left:18px}
.cbx-errdlg-foot{display:flex;justify-content:flex-end;margin-top:14px}

/* H-044 (0.4.3) — the double-submit guard: a form / button whose request is in flight */
form[aria-busy="true"], [hx-post][aria-busy="true"] { cursor: progress; }
[data-cbx-busy] { opacity: .6; cursor: progress; }

/* 0.5.0 — the CBX confirm dialog (replaces the browser's confirm() for hx-confirm). Reuses .cbx-errdlg overlay/box; neutral accent,
   red only when the clicked element opts in with data-cbx-danger. */
.cbx-cfmdlg .cbx-cfmdlg-box{border-top-color:var(--accent,#365AB6)}
.cbx-cfmdlg #cbx-cfmdlg-h{color:var(--ink)}
.cbx-cfmdlg .cbx-errdlg-body{white-space:pre-line}
.cbx-cfmdlg-foot{gap:8px}
.cbx-cfmdlg.is-danger .cbx-cfmdlg-box{border-top-color:var(--red,#c0392b)}
.cbx-cfmdlg.is-danger #cbx-cfmdlg-h{color:var(--red,#c0392b)}
.cbx-cfmdlg.is-danger .cbx-cfmdlg-ok{background:var(--red,#c0392b);border-color:var(--red,#c0392b);color:#fff}