/* Backstage — event manager interface */
:root{
  --bg:#0e1014;--bg2:#151920;--bg3:#1b2029;--line:#262c37;--line2:#333a47;
  --fg:#e6e9ef;--fg2:#9aa3b2;--fg3:#6b7482;
  --brand:#B01A18;--brand2:#d63b39;--navy:#2f6ad1;--ok:#22a06b;--warn:#d99b2b;
  --r:9px;--sh:0 18px 40px -24px rgba(0,0,0,.8);
  --head:'Montserrat',system-ui,sans-serif;--body:'Open Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;margin:0;line-height:1.2}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2b323e;border-radius:8px;border:2px solid var(--bg2)}
::-webkit-scrollbar-track{background:transparent}
/* Pinned to the window edges rather than height:100vh: Chrome can keep a stale vh after the window is
   maximised, restored or zoomed (often while the tab is in the background), which left the app short with a
   black band underneath. Same fix as SPACE (2026-10-03). */
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
.loading{flex:1;display:grid;place-items:center;color:var(--fg3);font-size:13px}
.loading.sm{padding:40px 0;flex:none}

/* ---------- generic controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r);border:1px solid var(--line2);background:var(--bg3);color:var(--fg);font-family:var(--head);font-weight:600;font-size:13px;cursor:pointer;transition:.14s;white-space:nowrap;text-decoration:none}
.btn:hover{background:#242b36;border-color:#3d4657}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand2);border-color:var(--brand2)}
/* Ghost buttons (All events, Close, Sign out, the modal ✕) keep their outline at rest — the
   user found a border that only appeared on hover made them look unclickable. Hover lifts the
   fill, brightens the outline and the label. */
.btn-g{background:transparent;border-color:var(--line2);color:var(--fg2)}
.btn-g:hover{background:var(--bg3);border-color:#4a5467;color:#fff}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:7px}
.btn-ico{padding:7px 9px;font-size:14px;line-height:1}
/* Square icon-only button. Fixed 32px so a row of them lines up regardless of glyph. */
.btn-ic{width:32px;height:32px;padding:0;flex:none}
.btn-ic .ic{display:block}
.btn .ic{flex:none}
.btn-dg:hover{background:rgba(176,26,24,.16);border-color:var(--brand);color:#ff8f8d}

.inp,select.inp,textarea.inp{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--line2);background:#0f131a;color:var(--fg);font-size:13px;transition:.14s}
.inp:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(176,26,24,.18)}
.inp:disabled{opacity:.6;cursor:default}
textarea.inp{resize:none;line-height:1.6;font-family:var(--body);overflow:hidden;max-height:max(60vh,360px)}
.inp.mono{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:12px}
.inp-sm{padding:6px 9px;font-size:12.5px;border-radius:7px}
select.inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path fill='%239aa3b2' d='M0 0h10L5 7z'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:28px}
input[type=color].clr{width:34px;height:32px;padding:2px;border:1px solid var(--line2);border-radius:7px;background:#0f131a;cursor:pointer;flex:none}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.row.nowrap{flex-wrap:nowrap}
.nowrap{white-space:nowrap}
.grow{flex:1;min-width:0}
.muted{color:var(--fg2)}
.tiny{font-size:12px}
.tr{text-align:right}
.bad{color:#ff8f8d;font-weight:600}
.readout{margin:0;padding:8px 11px;background:#0f131a;border:1px solid var(--line);border-radius:8px;font-size:12.5px;color:var(--fg2)}
.biglink{font-size:15px;font-weight:600;word-break:break-all}
.pfx{font-size:12.5px;color:var(--fg3);white-space:nowrap}
code,.tk{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:12px}
.tk{background:#0f131a;border:1px solid var(--line);border-radius:6px;padding:2px 7px;letter-spacing:.04em}

.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.sw input{display:none}
.sw i{width:36px;height:20px;border-radius:99px;background:#333a47;position:relative;transition:.18s;flex:none;display:block}
.sw i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#8d95a3;transition:.18s}
.sw input:checked + i{background:var(--brand)}
.sw input:checked + i::after{left:18px;background:#fff}
.ck{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:13px}
.ck input{width:auto;accent-color:var(--brand)}
.ck.tiny{font-size:12px;font-weight:500;color:var(--fg2);white-space:nowrap}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;font-family:var(--head);letter-spacing:.03em}
.chip-ok{background:rgba(34,160,107,.16);color:#4ad295}
.chip-off{background:#242b36;color:var(--fg3)}
.chip-soon{background:rgba(217,155,43,.16);color:#e6b455}
.chip-done{background:rgba(47,106,209,.16);color:#7aa8f0}
.chip-crew{background:rgba(176,26,24,.16);color:#ff9b99}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.cnt{font-family:var(--body);font-size:12px;font-weight:600;color:var(--fg3);background:var(--bg3);border-radius:99px;padding:1px 8px;vertical-align:middle;margin-left:4px}
.warnbox{background:rgba(217,155,43,.10);border:1px solid rgba(217,155,43,.32);border-radius:9px;padding:13px 15px;font-size:12.5px;color:#e6c88a;margin-bottom:16px;line-height:1.6}
.warnbox code{background:rgba(0,0,0,.3);padding:1px 5px;border-radius:4px}

/* ---------- login ----------
   Matched to the shared CTI sign-in design used by Athena and CTI Sign:
   #111111 page, #181818 stacked cards, 448px, Inter, logo card above form card. */
.lg{min-height:100%;flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;background:var(--bg);color:#fff;
  font-family:'Inter',system-ui,sans-serif;
  /* the reference pages set no body line-height — inheriting the admin 1.55/14px
     stretched every line and was the whole spacing difference */
  font-size:16px;line-height:normal}
.lg-wrap{width:100%;max-width:448px;padding:16px}
.lg-logo{background:var(--bg2);border:1px solid var(--line);border-bottom:none;border-radius:16px 16px 0 0;padding:32px 32px 12px;display:flex;align-items:center;justify-content:center}
.lg-logo img{width:144px;height:144px;object-fit:contain;display:block}
.lg-form{background:var(--bg2);border:1px solid var(--line);border-top:none;border-radius:0 0 16px 16px;padding:8px 40px 32px;box-shadow:0 25px 50px -12px rgba(0,0,0,.70);text-align:center}
.lg-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
.lg-sub{font-size:14px;color:var(--fg2)}
.lg-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;border:0;border-radius:6px;background:#fff;color:#111827;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;margin-top:24px}
.lg-btn:hover{background:#F3F4F6}
.lg-btn:active{transform:scale(.99)}
.lg-hint{font-size:14px;color:var(--fg2);margin-top:12px}
.lg-hint b{color:#e6e9ef}
.lg-err{display:none;align-items:center;gap:7px;padding:12px;background:rgba(239,68,68,.10);border:1px solid rgba(176,26,24,.2);border-radius:6px;margin-top:16px;font-size:13px;font-weight:500;color:#FECACA;text-align:left}
.lg-err.on{display:flex}
.lg-note{text-align:center;margin-top:32px;font-size:12px;color:var(--fg3);line-height:1.45}

/* ---------- top bar ---------- */
.logo{font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.01em;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo b{color:#fff;font-weight:800}
.logo-t{display:flex;flex-direction:column;line-height:1.15}
.logo-t small{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--fg3)}
@media (max-width:600px){.logo-t small{display:none}}
.lg-co{font-size:12px;color:var(--fg2);margin-top:2px}
.logo img{height:26px;width:auto;display:block;flex:none}
.top{height:56px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg2);border-bottom:1px solid var(--line);position:relative;z-index:30}
.top .sep{width:1px;height:24px;background:var(--line);margin:0 2px}
.tabs{display:flex;gap:2px}
.tabs a{padding:7px 13px;border-radius:8px;font-family:var(--head);font-weight:600;font-size:13px;color:var(--fg2);text-decoration:none}
.tabs a:hover,.tabs a.on{background:var(--bg3);color:var(--fg)}
.who{font-size:12px;color:var(--fg2);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Profile button + menu (same as Studio's) */
.prof{position:relative;flex:none}
.prof-btn{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--fg);text-align:left;cursor:pointer;transition:.14s}
.prof-btn:hover,.prof-btn[aria-expanded="true"]{background:var(--bg3);border-color:var(--line2)}
.prof-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--head);font-weight:700;font-size:13px}
.prof-t{display:flex;flex-direction:column;min-width:0;max-width:180px;line-height:1.2}
.prof-t small{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.prof-t span{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-caret{width:18px;height:18px;flex:none;color:var(--fg2)}
.prof-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:256px;padding:8px;background:var(--bg3);border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.85)}
.prof-menu[hidden]{display:none}
.prof-h{padding:8px 12px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.prof-h small{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.prof-h b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;margin-top:2px;border:0;border-radius:8px;background:none;color:var(--fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer}
.prof-menu button svg{width:18px;height:18px;flex:none;color:var(--fg2)}
.prof-menu button:hover{background:var(--line)}
.prof-menu button.dg,.prof-menu button.dg svg{color:#ff8f8d}
.prof-menu button.dg:hover{background:rgba(176,26,24,.16)}
@media (max-width:760px){.prof-t,.prof-caret{display:none}.prof-btn{padding:4px;border-radius:50%}}
.save-st{font-size:12px;color:var(--fg3);min-width:104px;text-align:right}
.save-st.warn{color:var(--warn)}

/* ---------- events list ---------- */
.page{flex:1;overflow:auto;padding:30px 32px 60px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.page-h h1{font-size:26px}
.page-h h2{font-size:18px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px}
.stat{padding:16px 18px}
.stat b{display:block;font-family:var(--head);font-size:26px;line-height:1.1}
.stat span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg3);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.ecard{padding:18px;display:flex;flex-direction:column;gap:12px;transition:.16s;cursor:pointer}
.ecard:hover{border-color:#3d4657;transform:translateY(-2px);box-shadow:var(--sh)}
.ecard .egrow{flex:1}
.ecard .thumb{height:118px;border-radius:7px;background:linear-gradient(135deg,#1f2530,#141922);display:grid;place-items:center;color:#3f4756;font-family:var(--head);font-weight:800;font-size:30px;overflow:hidden;position:relative}
.ecard .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(176,26,24,.22),transparent 55%)}
.ecard .thumb.has-img{background:#0f1319}
.ecard .thumb.has-img::after{background:linear-gradient(160deg,rgba(176,26,24,.10),transparent 60%)}
.ecard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ecard h3{font-size:15px}
.ecard .ewhen{margin:6px 0 0;font-size:12.5px;color:var(--fg2)}
.ecard .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--fg3);margin-top:8px}
.pacts{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.empty{padding:60px 20px;text-align:center;color:var(--fg3);border:1px dashed var(--line2);border-radius:var(--r)}
.empty.sm{padding:26px 16px;font-size:12.5px}
/* Background Music drop zone (Event Info). */
.mu-drop{position:relative;border:1.5px dashed var(--line2);border-radius:12px;transition:border-color .14s,background .14s;font-size:12.5px;color:var(--fg3)}
.mu-drop.has{border-style:solid;border-color:var(--line);background:var(--bg2);padding:16px 18px 10px}
.mu-drop.over{border-style:dashed;border-color:var(--brand2);background:rgba(176,26,24,.08)}
.mu-drop.over .mu-card{opacity:.45}
.mu-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 16px;text-align:center}
.mu-empty b{font-family:var(--head);font-size:13.5px;color:var(--fg)}
.mu-empty .btn{margin-top:8px}
.mu-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(176,26,24,.14);color:var(--brand2);margin-bottom:4px}
.mu-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mu-card{display:flex;gap:16px;align-items:flex-start;transition:opacity .14s}
.mu-pp{flex:none;display:grid;place-items:center;width:52px;height:52px;margin-top:2px;border:0;border-radius:50%;background:var(--brand);color:#fff;cursor:pointer;box-shadow:0 10px 24px -12px rgba(176,26,24,.9);transition:.14s}
.mu-pp:hover{background:var(--brand2);transform:scale(1.04)}
.mu-pp svg{width:22px;height:22px;fill:currentColor}
.mu-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.mu-top{display:flex;align-items:flex-start;gap:12px}
.mu-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mu-title b{font-family:var(--head);font-size:14px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-sub{font-size:11.5px;color:var(--fg3)}
.mu-acts{display:flex;gap:6px;flex:none}
.mu-seek,.mu-vol{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--fg2);font-variant-numeric:tabular-nums}
.mu-seek span{min-width:32px}
.mu-seek span:last-child{text-align:right}
.mu-vol{padding-top:10px;border-top:1px solid var(--line)}
.mu-loop{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--fg2)}
.mu-loop .seg{flex:none}
.mu-loop .seg button{flex:none;min-width:auto;padding:5px 14px;font-size:12px;white-space:nowrap;overflow:visible}
.mu-vol b{min-width:34px;color:var(--fg);font-size:12px}
.mu-vh{margin-left:auto;color:var(--fg3)}
.mu-vic{display:grid;color:var(--fg2)}
.mu-vic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mu-vol input{flex:0 1 220px}
.mu-seek input{flex:1}
/* Both sliders: a thin track filled up to the thumb (--v is set from the value in app.js). */
.mu-card input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;margin:0;cursor:pointer;
  background:linear-gradient(to right,var(--brand2) var(--v,0%),var(--line2) var(--v,0%))}
.mu-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.mu-card input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.mu-card input[type=range]:disabled{cursor:default;opacity:.6}
.mu-hint{margin:12px 0 0;text-align:center;font-size:11.5px;color:var(--fg3)}
@media (max-width:640px){.mu-vh{display:none}.mu-card{gap:12px}.mu-pp{width:44px;height:44px}}

/* ---------- workspace ---------- */
.ws{flex:1;display:flex;flex-direction:column;min-height:0}
.ws-h{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 16px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.ws-t h1{font-size:21px;outline:0;border-radius:6px;padding:1px 4px;margin-left:-4px}
.ws-t h1[contenteditable=true]:hover{background:var(--bg3)}
.ws-t h1[contenteditable=true]:focus{background:#0f131a;box-shadow:0 0 0 2px rgba(176,26,24,.35)}
.ws-t p{margin:5px 0 0}
.ws-a{display:flex;align-items:center;gap:9px;flex:none}
.ws-b{flex:1;display:flex;min-height:0}
/* Flat rows, not pills: no rounding and no background block on the active item, so its bar
   sits flush against the sidebar edge. That is why the horizontal padding is on the LINKS
   rather than on the nav — with it on the nav the bar floated 12px inside. */
.ws-nav{width:212px;flex:none;background:var(--bg2);border-right:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;overflow:auto}
.ws-nav a{display:flex;align-items:center;gap:11px;padding:11px 14px;font-family:var(--head);font-weight:600;font-size:13px;color:var(--fg2);text-decoration:none;position:relative}
.ws-nav a:hover{background:var(--bg3);color:var(--fg)}
/* Active item: a square left bar, icon and label all in the SAME red as the buttons, on the lighter --bg3 row the user asked to keep
   (--brand), no rounding. The user asked for the label in red too (2026-09-23);
   the lighter --brand2 read as a different red from the buttons beside it. */
.ws-nav a.on{background:var(--bg3);color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.ws-nav a.on:hover{background:var(--bg3);color:var(--brand)}
.ws-nav a.on .ic{opacity:1;color:var(--brand)}
.ws-nav .ic{opacity:.8;flex:none}
.ws-nav-b{margin-top:auto;padding:14px 12px 0}
.dot{background:var(--brand);color:#fff;font-size:10px;font-weight:800;font-style:normal;border-radius:99px;min-width:17px;height:17px;display:inline-grid;place-items:center;padding:0 4px;font-family:var(--head)}
.ws-main{flex:1;overflow:auto;padding:24px 28px 70px;min-width:0}

.sect{max-width:900px;margin:0 0 34px}
/* A section that holds a wide table uses the whole panel. */
.sect.sect-wide{max-width:none}
/* Sent notifications: one line per send. The subject takes the spare width and truncates. */
.tbl-sent td{white-space:nowrap;padding-top:8px;padding-bottom:8px}
.tbl-sent td.ts-subj{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis}
.tbl-sent .btn-sm{padding:5px 10px;font-size:12px}
.sect > h2{font-size:16px;margin-bottom:6px}
.sect > h2 + .muted{margin:0 0 16px}
.sect > .muted.tiny{margin:0 0 16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:14px}
.grid2 .span2{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld > label{font-size:12px;font-weight:700;font-family:var(--head);color:var(--fg2)}
.fld > label .muted{font-weight:500}
.fh{margin:0;font-size:11.5px;color:var(--fg3);line-height:1.5}
.dayh{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--brand2);margin:18px 0 8px;font-family:var(--head)}
.mh{font-size:13px;margin:20px 0 8px}

/* a row of the agenda / people / fields editors */
.rowcard{background:var(--bg2);border:1px solid var(--line);border-radius:9px;margin-bottom:8px;overflow:hidden}
.rowcard.fixed{opacity:.75}
.rc-h{display:flex;align-items:center;gap:8px;padding:9px 10px}
.rc-b{padding:0 10px 10px;display:flex;flex-direction:column;gap:8px}
.rc-h .tin{max-width:74px;text-align:center}
.rc-h .dash{color:var(--fg3);flex:none}
.av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:12px;flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.pick{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;border:1px solid var(--line2);font-size:12px;cursor:pointer;color:var(--fg2)}
.tag input{display:none}
.tag.on{border-color:var(--brand);background:rgba(176,26,24,.14);color:var(--fg)}

.subtabs{display:flex;gap:2px;margin:-4px 0 22px;border-bottom:1px solid var(--line)}
.subtabs a{padding:9px 14px;font-family:var(--head);font-weight:600;font-size:13px;color:var(--fg3);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs a:hover{color:var(--fg)}
.subtabs a.on{color:var(--fg);border-bottom-color:var(--brand)}
.subtabs a .dot{margin-left:6px;vertical-align:1px}

/* Notification templates. One row each, collapsed: a name, the subject it will send, and
   the buttons. Four open textareas used to push the composer they fill off the screen. */
.tpl-list{display:grid;gap:6px}
.tpl{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden}
.tpl.open{border-color:var(--line2);background:var(--bg3)}
.tpl-h{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 4px}
/* The disclosure button is the whole row, so the click target is the row and not just the
   chevron — but it has to sit BESIDE the action buttons, hence flex:1 rather than a wrapper
   that would swallow them. */
.tpl-t{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:6px 6px;border:0;border-radius:7px;
  background:transparent;color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.tpl-t:hover{background:var(--bg3)}
.tpl.open .tpl-t:hover{background:rgba(255,255,255,.04)}
.tpl-t .ic{opacity:.55;flex:none}
.tpl-n{font-family:var(--head);font-weight:600;font-size:13px;flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-s{color:var(--fg3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tpl-add{margin-top:14px}
.tpl-ins{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.tpl-ins .fh{margin:0 2px 0 0}
.tpl-b{padding:2px 12px 14px 12px;display:grid;gap:12px;border-top:1px solid var(--line)}

/* The delivery-channel checkboxes: a title and a line of explanation each, side by side. */
.chrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chrow .ck{align-items:flex-start;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.chrow .ck input{margin-top:2px;flex:none}
.chrow .ck b{display:block;font-family:var(--head);font-size:12.5px}
.chrow .ck i{display:block;font-style:normal;font-size:11.5px;color:var(--fg3);line-height:1.45;margin-top:2px}
.chrow .ck input:disabled + span{opacity:.55}
.filt{margin-bottom:14px}
.banprev{margin-top:14px;border:1px solid var(--line);border-radius:9px;overflow:hidden;max-width:420px}
.banprev img{width:100%;display:block}
.banprev.sm{margin-top:0;max-width:220px}

/* ---------- the page order (Website tab) ---------- */
.secrow .mv{display:flex;gap:2px;flex:none;width:68px}
.secrow .mv .btn-ic{width:30px;height:28px}
/* A switched-off section stays in place and stays legible — it is still part of the page
   order, so dimming it away would make reordering harder than it needs to be. */
.secrow.off{opacity:.62}
.secrow.off .rc-b{display:none}
.secrow-c{border-color:var(--line2)}
.secrow-c textarea{min-height:60px;resize:vertical;font-family:var(--body)}
/* .inp is width:100%, so inside a flex row the type picker eats the whole line and leaves
   the hint beside it as a one-character column. */
.secrow-c .rc-b select{width:auto;min-width:130px;flex:none}
.secrow-c .rc-b .row > .muted{line-height:1.4}
.secrow .rc-h > .inp-sm[data-k$=".vis"]{width:150px;flex:none}

.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.tcard{text-align:left;padding:13px 14px;border-radius:9px;border:1px solid var(--line2);background:var(--bg3);color:var(--fg);cursor:pointer;display:grid;gap:4px;transition:.14s}
.tcard:hover{border-color:var(--brand);background:#242b36}
.tcard b{font-family:var(--head);font-size:13.5px}
.tcard span{font-size:12px;color:var(--fg2);line-height:1.45}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px}
.tbl th{text-align:left;font-family:var(--head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--bg2)}
.tbl-sm td{padding:7px 10px;font-size:12.5px}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.tbl .ckc{width:34px;padding-right:0}
.tbl .ckc input{width:16px;height:16px;accent-color:#d5dae2;cursor:pointer;vertical-align:middle}
.tbl-reg tr.sel td{background:rgba(255,255,255,.045)}
.bulkbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;margin-bottom:10px;border:1px solid var(--line2);border-radius:10px;background:var(--bg3)}
.bulkbar[hidden]{display:none}
.bulkbar b{font-family:var(--head);font-size:13px;margin-right:6px}
.bulkbar select.inp{max-width:150px}
.tbl-scroll .tbl{margin-bottom:0}
.tbl-reg td.ans{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-reg select.inp{min-width:110px}
.colist{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:55vh;overflow:auto}
.colrow{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}
.colrow.must{opacity:.85}
.colrow .ck{display:flex;align-items:center;gap:9px;cursor:pointer}

/* ---------- chat ---------- */
/* Sits under a sub-tab row now that Chat has two, so the viewport subtraction has to
   account for it — 190px was measured when the panel started at the top. */
.chatwrap{display:flex;gap:0;height:calc(100vh - 232px);min-height:380px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.thl{width:268px;flex:none;border-right:1px solid var(--line);overflow:auto;background:var(--bg2)}
.thi{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;color:inherit}
.thi:hover{background:var(--bg3)}
.thi.on{background:var(--bg3);box-shadow:inset 3px 0 0 var(--brand2)}
.thi-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.thi-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13.5px}
.thi-h b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thi-r{display:flex;align-items:center;justify-content:space-between;gap:8px}
.thi-p{font-size:12.5px;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.thi-p em{font-style:normal;color:var(--fg3)}
.thi-m{font-size:11px;color:var(--fg3);flex:none;font-weight:400}
.thi.unread .thi-m{color:var(--brand2);font-weight:600}
.thi.unread .thi-p{color:var(--fg)}
.thi-x{font-size:10.5px;color:var(--fg3);flex:none}
.cav{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(145deg,#c0302d,#7d1311);color:#fff;font:700 14px var(--head);letter-spacing:.02em}
.cav-lg{width:42px;height:42px}
.thv{flex:1;display:flex;flex-direction:column;min-width:0}
.thv-h{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.thv-who{display:flex;align-items:center;gap:12px;min-width:0}
.thv-who div{display:flex;flex-direction:column;min-width:0}
.thv-who b{font-size:14.5px}
.thv-who span:not(.cav){font-size:12px;color:var(--fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thv-log{flex:1;overflow:auto;padding:16px 7%;display:flex;flex-direction:column;gap:4px;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0) 0 0/18px 18px,var(--bg)}
.thv-f{flex:none;display:flex;gap:9px;align-items:flex-end;padding:10px 16px;border-top:1px solid var(--line);background:var(--bg2)}
.bub{position:relative;padding:6px 10px 6px 11px;border-radius:10px;max-width:68%;font-size:13.5px;line-height:1.45;word-break:break-word;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:10px;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.bub b{flex-basis:100%;font-size:11px;font-weight:700;font-family:var(--head);letter-spacing:.02em;opacity:.75;margin-bottom:1px}
.bub-t{white-space:pre-wrap}
.bub time{margin-left:auto;font-size:10.5px;opacity:.6;line-height:1;padding-bottom:1px;white-space:nowrap}
.bub-me{background:var(--brand);color:#fff;align-self:flex-end;border-top-right-radius:3px}
.bub-them{background:var(--bg3);border:1px solid var(--line);align-self:flex-start;border-top-left-radius:3px}
.brow{display:flex;align-items:flex-start;gap:8px;max-width:78%}
.brow-them{align-self:flex-start}
.brow-me{align-self:flex-end;flex-direction:row-reverse}
.brow.first{margin-top:8px}
.brow .bub{max-width:100%;align-self:auto}
.cav-sm{width:30px;height:30px;font-size:11px}
.brow-me .cav-sm{background:linear-gradient(145deg,#3b4454,#232a35)}
.cav-gap{width:30px;flex:none}
.brow-them:not(.first) .bub-them{border-top-left-radius:10px}
.brow-me:not(.first) .bub-me{border-top-right-radius:10px}
.brow-them .bub b{color:#ff8f8d;opacity:1}
.bub-day{align-self:center;margin:10px 0 6px}
.bub-day span{font-size:11px;color:var(--fg2);background:var(--bg3);border:1px solid var(--line);padding:3px 10px;border-radius:7px}

/* ---------- media ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.mgrid.sm{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:9px}
.mtile{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--bg2);text-align:left;padding:0;color:inherit}
button.mtile{cursor:pointer;width:100%}
button.mtile:hover{border-color:var(--brand)}
.mt-i{height:104px;background:#0f131a;display:grid;place-items:center;color:var(--fg3);font-size:12px;font-weight:700;overflow:hidden;position:relative}
.mgrid.sm .mt-i{height:78px}
.mt-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mt-b{padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.mt-b span{font-size:11.5px;color:var(--fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- modal ---------- */
.mask{position:fixed;inset:0;background:rgba(5,7,10,.72);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:200;padding:24px}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);width:min(680px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.modal-h h3{font-size:16px;flex:1}
.modal-b{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.modal-b > .grid2{margin-top:0}
.modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;flex:none;background:var(--bg2)}

/* ---------- Website tab: the overview card ----------
   The preview frame renders the real page at 1280px and is scaled by JS (fitPreview), so
   the thumbnail is the desktop layout rather than the phone one the card's own width would
   produce. It is inert on purpose — a thumbnail, not a second place to click things. */
.wsite{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;align-items:start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.wprev{position:relative;max-width:460px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0f131a;aspect-ratio:16/10}
.wprev iframe{width:1280px;height:800px;border:0;display:block;background:#fff;transform-origin:0 0;transform:scale(.328);pointer-events:none}
.wprev-sh{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.wprev-tag{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(14,16,20,.92);border:1px solid var(--line2);color:var(--fg);font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.04em;padding:5px 12px;border-radius:99px;white-space:nowrap}
.wmeta dl{margin:0;display:flex;flex-direction:column;gap:11px}
.wmeta dl > div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:center}
.wmeta dt{color:var(--fg2);font-size:12px}
.wmeta dd{margin:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;min-width:0}
.wmeta dd.u{flex-wrap:nowrap}
.wmeta dd.u a{flex:0 1 auto}
.wmeta dd a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.wmeta .av{width:24px;height:24px;font-size:10px}
.cdot{width:13px;height:13px;border-radius:4px;display:inline-block;border:1px solid rgba(255,255,255,.18);flex:none}
.wacts{margin-top:20px;flex-wrap:wrap}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--fg2);font-size:12px;text-decoration:none;margin-bottom:8px}
.backlink:hover{color:var(--fg)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
/* Settings: the delete area, set apart so it is not hit by accident. */
/* Website tab: what the page's logo looks like, on the white it sits on in the header. */
.logoprev{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.logoprev img{height:56px;width:auto;max-width:180px;object-fit:contain;background:#fff;border-radius:8px;padding:4px 8px}
.logoprev span{font-size:12.5px;color:var(--fg2)}
.logoprev .btn{margin-left:auto}
.sect.danger{padding:18px 20px;border:1px solid rgba(214,59,57,.35);border-radius:var(--r);background:rgba(176,26,24,.06)}
.setrow p{margin:2px 0 0}

/* ---------- the visual website editor ----------
   Full-height three-column shell: rail, canvas, inspector. The canvas is an iframe of the
   real page in editor mode; the controls drawn over it live INSIDE that document, so they
   scroll with the content and never drift out of register. */
.sed{flex:1;min-height:0;display:flex;flex-direction:column;background:#0b0d11}
.sed-top{height:56px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--line);z-index:30}
.sed-t{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;font-size:14px;min-width:0}
.sed-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw}
.sed-dev{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;padding:2px}
.sed-dev button{width:30px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--fg2);display:grid;place-items:center;cursor:pointer}
.sed-dev button:hover{color:var(--fg)}
.sed-dev button.on{background:var(--bg);color:var(--fg)}
.sed-b{flex:1;display:flex;min-height:0}
/* The editor rail is the SAME control as the workspace sidebar — a list of places in this
   event — so it is the same object: 212px wide, icon and label on one line, and the active
   item marked by a square left bar, icon and label in --brand. It used to be a 92px strip
   of stacked icon-over-label tiles, which read as a different app one click away from the
   workspace. Rules are shared with .ws-nav wherever they are identical; only the fact that
   these are <button>s rather than <a>s is spelt out again. */
.sed-rail{width:212px;flex:none;background:var(--bg2);border-right:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;overflow:auto}
.sed-rail button{display:flex;align-items:center;gap:11px;padding:11px 14px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--fg2);font-family:var(--head);font-weight:600;font-size:13px;
  cursor:pointer;transition:.14s;position:relative}
.sed-rail button:hover{background:var(--bg3);color:var(--fg)}
.sed-rail button.on{background:var(--bg3);color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.sed-rail button.on:hover{background:var(--bg3);color:var(--brand)}
.sed-rail button.on .ic{opacity:1;color:var(--brand)}
.sed-rail .ic{opacity:.8;flex:none}
.sed-canvas{flex:1;min-width:0;padding:16px;overflow:auto;display:flex;justify-content:center;background:#0b0d11}
.sed-frame{width:100%;height:100%;min-height:0}
.sed-frame.framed{border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
.sed-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff;border-radius:inherit}
.sed-ins{width:340px;flex:none;background:var(--bg2);border-left:1px solid var(--line);padding:16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.sed-ins .fld{display:flex;flex-direction:column;gap:6px}
.sed-ins .fld > label{font-size:12px;color:var(--fg2);font-weight:600}
/* The settings panel is narrow: a button is never narrower than its words (no "Extra L…"), and a
   row of options that cannot fit wraps onto a second line instead of cutting text off. */
.sed-ins .seg{flex-wrap:wrap}
.sed-ins .seg button{flex:1 0 auto;overflow:visible;text-overflow:clip;padding-left:3px;padding-right:3px}
/* Layout tab: collapsible groups (layoutPanel / grp()) */
.lgrp{border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.lgrp > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;cursor:pointer;font-family:var(--head);font-size:13px;font-weight:700;color:var(--fg);user-select:none}
.lgrp > summary::-webkit-details-marker{display:none}
.lgrp > summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:2px}
.lgrp[open] > summary::after{transform:rotate(45deg)}
.lgrp > summary:hover{color:var(--brand2)}
.lgrp > summary:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:var(--r)}
.lgrp[open] > summary{border-bottom:1px solid var(--line)}
.lgrp-b{padding:12px 10px;display:flex;flex-direction:column;gap:14px}
.ins-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ins-h b{font-family:var(--head);font-size:14px}
.ins-h p{margin:3px 0 0}
/* Title, on/off row and the Content/Style/Layout tabs stay pinned while the settings scroll.
   Negative margins reach over .sed-ins padding so nothing shows through above or beside it. */
.ins-top{position:sticky;top:-16px;z-index:5;margin:-16px -16px 0;padding:16px 16px 12px;background:var(--bg2);display:flex;flex-direction:column;gap:14px;box-shadow:0 6px 8px -6px rgba(0,0,0,.45)}
.ins-state{padding:2px 0}
.ins-state select{width:auto;flex:none}
.ins-list{display:flex;flex-direction:column;gap:5px}
.ins-row{display:flex;align-items:center;gap:8px;text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg3);color:var(--fg);font-size:12.5px;cursor:pointer;transition:.12s}
.ins-row:hover{border-color:var(--line2);background:#242b36}
.ins-row.on{border-color:var(--brand);background:rgba(176,26,24,.12)}
.ins-row.off{opacity:.55}
.ins-row.fixed{opacity:.6;cursor:default}
.ins-row i{font-style:normal}

@media(max-width:1100px){
  .sed-ins{width:290px}
  /* Collapses the same way the workspace sidebar does at its own breakpoint: icons
     only, centred, same 60-64px strip. */
  .sed-rail{width:64px}
  .sed-rail button{padding:11px 0;justify-content:center}
  .sed-rail button span{display:none}
}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#20262f;border:1px solid var(--line2);color:var(--fg);padding:11px 18px;border-radius:10px;box-shadow:var(--sh);z-index:400;opacity:0;transition:.22s;pointer-events:none;font-size:13px;font-weight:600;max-width:min(520px,92vw)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--brand);color:#ff9b99}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- inspector: tabs, style picker, layout controls ---------- */
.ins-tabs{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:3px}
.ins-tabs button{flex:1;padding:7px 0;border:0;border-radius:6px;background:transparent;color:var(--fg2);
  font-family:var(--head);font-weight:600;font-size:12px;cursor:pointer;transition:.12s}
.ins-tabs button:hover{color:var(--fg)}
.ins-tabs button.on{background:var(--bg);color:var(--fg)}

/* A segmented control: one row of mutually exclusive buttons, same shape as the device
   switch in the editor bar so the two read as the same kind of thing. */
.seg{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;padding:2px}
.seg button{flex:1;min-width:0;padding:7px 4px;border:0;border-radius:6px;background:transparent;color:var(--fg2);
  font-family:var(--head);font-weight:600;font-size:12px;cursor:pointer;transition:.12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:hover:not(:disabled){color:var(--fg)}
.seg button.on{background:var(--bg);color:var(--fg)}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.seg-ic button{display:grid;place-items:center;height:30px}
.seg-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;display:block}

.sw-r{margin-top:3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
/* The two halves of Content position, side by side so they read as one control. */
.row2x{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rng{flex:1;min-width:0;accent-color:var(--brand)}
.ro-sm{flex:none;padding:6px 9px;font-size:12px;min-width:56px;text-align:center}

/* The focal point: a 3x3 of the picture's own frame, so "keep the top-right in shot" is
   one click on the corner you mean rather than a dropdown of nine phrases. */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:84px;padding:2px;
  background:var(--bg3);border:1px solid var(--line2);border-radius:8px}
.fgrid button{aspect-ratio:1;border:0;border-radius:4px;background:transparent;cursor:pointer;
  display:grid;place-items:center;transition:.12s}
.fgrid button:hover:not(:disabled){background:#242b36}
.fgrid button.on{background:var(--brand)}
.fgrid button:disabled{cursor:not-allowed}
.fgrid i{width:5px;height:5px;border-radius:50%;background:var(--fg3);display:block}
.fgrid button.on i{background:#fff}

.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-card{display:block;text-align:left;padding:8px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--bg3);color:var(--fg);cursor:pointer;transition:.12s}
.st-card:hover:not(:disabled){border-color:var(--line2);background:#242b36}
.st-card.on{border-color:var(--brand);background:rgba(176,26,24,.12)}
.st-card:disabled{opacity:.55;cursor:not-allowed}
/* The label and hint carry classes because the diagrams below use bare <b>, <span>, <i>
   and <u> as anonymous boxes — a descendant selector here would style those as text. */
.st-name{display:block;font-family:var(--head);font-size:11.5px;margin-top:7px}
.st-hint{display:block;font-size:11px;color:var(--fg3);line-height:1.35}

/* Theme presets. The swatch is a miniature of the page it produces — the ground is the
   light/dark background, the dot is the accent — so the tile answers the only two questions
   a preset actually decides. Colours come from the catalogue inline, not from a class per
   theme, so adding one to events.js needs nothing here. */
.thp-grp{margin-bottom:12px}
.thp-gl{margin:0 0 6px;font:600 10.5px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.thp-row{display:grid;grid-template-columns:repeat(auto-fill,122px);gap:8px}
.thp-tile{display:block;height:100%;min-height:98px;box-sizing:border-box;text-align:left;padding:8px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--bg3);color:var(--fg);cursor:pointer;transition:.12s}
.thp-tile:hover:not(:disabled){border-color:var(--line2);background:#242b36}
.thp-tile.on{border-color:var(--brand);background:rgba(176,26,24,.12)}
.thp-tile:disabled{opacity:.55;cursor:not-allowed}
.thp-tile b{display:block;font-family:var(--head);font-size:11.5px;margin-top:6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thp-hint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10.5px;color:var(--fg3);line-height:1.35}
.thp-sw{display:flex;align-items:center;gap:6px;height:26px;border-radius:5px;padding:0 8px;
  border:1px solid var(--line2)}
.thp-sw.lt{background:#FFFFFF}
.thp-sw.dk{background:#101216}
.thp-sw i{width:12px;height:12px;border-radius:99px;display:block;flex:none}
.thp-sw::after{content:"";height:5px;border-radius:99px;flex:1;background:currentColor;opacity:.22}
.thp-sw.lt::after{color:#111}
.thp-sw.dk::after{color:#fff}

/* The picker diagrams. Abstract on purpose — a shrunken screenshot is illegible at this
   size. `.p` is one item, `i` its leading mark (a time or a face), `u` its text. */
.th{display:block;background:#e7eaef;border-radius:6px;overflow:hidden;height:64px;padding:8px;box-sizing:border-box}
.th .p{display:block}
.th i,.th u{display:block;border-radius:2px;background:#6b7482;text-decoration:none}
.th i{background:#8e97a5}
.th i.d{border-radius:50%;background:var(--brand)}
.th u.w{background:#b0b8c3}
.th b{display:block;border-radius:3px;background:#2b323e;height:11px}

.th-stack{display:grid;gap:5px;align-content:start}
.th-stack .p{display:grid;grid-template-columns:28px 1fr;gap:6px;background:#cfd5de;border-radius:3px;padding:4px}
.th-stack i,.th-stack u{height:7px}

.th-time{display:grid;gap:11px;align-content:start;position:relative;padding-left:22px}
.th-time::before{content:'';position:absolute;left:12px;top:10px;bottom:10px;width:2px;background:#b0b8c3}
.th-time .p{display:grid;gap:4px;position:relative}
.th-time .p::before{content:'';position:absolute;left:-13px;top:0;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.th-time i{height:5px;width:44%}
.th-time u{height:7px}

.th-rows{display:grid;align-content:start;padding:4px 8px}
.th-rows .p{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid #b0b8c3}
.th-rows i,.th-rows u{height:6px}

.th-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-content:center}
.th-grid .p{display:grid;gap:5px;align-content:start;border:1px solid #b0b8c3;border-top:3px solid var(--brand);border-radius:3px;padding:6px 4px}
.th-grid u{height:7px}
.th-grid u.w{height:5px}

.th-band{display:grid;gap:5px;align-content:start}
.th-band .p{display:grid;grid-template-columns:30px 1fr;gap:7px}
.th-band i,.th-band u{height:6px}
.th-band i{background:#b0b8c3}

.th-rib{display:grid;gap:6px;align-content:center}
.th-rib .p{display:flex;align-items:center;gap:7px;border-left:3px solid var(--brand);background:#dfe4ea;padding:5px 6px}
.th-rib .p:nth-child(even){background:#eef1f4}
.th-rib i{width:26px;height:8px;border-radius:99px;background:#2b323e}
.th-rib u{flex:1;height:7px}

.th-circ{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-content:center}
.th-circ .p{display:grid;justify-items:center;gap:5px}
.th-circ i.d{width:22px;height:22px}
.th-circ u{width:80%;height:5px}

.th-tile{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-content:stretch}
.th-tile .p{display:flex;align-items:flex-end;background:#2b323e;border-radius:3px;padding:4px}
.th-tile u{width:100%;height:5px;background:#cfd5de}

.th-two{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;align-content:center}
.th-two .p{padding:5px 0;border-bottom:1px solid #b0b8c3}
.th-two u{height:6px}

.th-lead{display:grid;grid-template-columns:1.3fr 1fr;gap:7px;align-content:center}
.th-lead .big{display:flex;align-items:center;gap:6px;background:#cfd5de;border-radius:3px;padding:6px}
.th-lead .big i.d{width:20px;height:20px}
.th-lead .big u{flex:1;height:6px}
.th-lead .col{display:grid;gap:6px;align-content:center}
.th-lead .col u{height:5px;display:block;border-radius:2px;background:#6b7482}

.th-bio{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:center}
.th-bio .p{display:grid;gap:4px;border:1px solid #b0b8c3;border-radius:3px;padding:5px}
.th-bio i.d{width:16px;height:16px}
.th-bio u{height:5px}

.th-chip{display:grid;gap:6px;align-content:center;justify-items:start}
.th-chip .p{display:inline-flex;align-items:center;gap:6px;border:1px solid #b0b8c3;border-radius:99px;padding:3px 10px 3px 3px}
.th-chip i.d{width:14px;height:14px}
.th-chip u{width:42px;height:5px}

.th-split{display:grid;grid-template-columns:1.3fr 1fr;gap:7px;align-content:stretch}
.th-split .a{background:#cfd5de;border-radius:3px}
.th-split .b{display:grid;gap:6px;align-content:center}
.th-split u{height:6px;display:block;border-radius:2px;background:#6b7482}
.th-split u.w{height:5px;background:#b0b8c3}

.th-ban{position:relative;padding:0}
.th-ban .a{position:absolute;left:0;right:0;top:0;height:42px;background:#cfd5de}
.th-ban .c{position:absolute;left:14px;right:14px;top:30px;display:grid;gap:5px;
  background:#f5f7f9;border:1px solid #b0b8c3;border-radius:3px;padding:7px}
.th-ban u{height:6px;display:block;border-radius:2px;background:#6b7482}
.th-ban u.w{height:5px;background:#b0b8c3}

.th-para{display:grid;gap:7px;align-content:center;padding:8px 10px}
.th-para u{height:5px}
.th-para u.w{width:62%;background:#b0b8c3}

.th-lede{display:grid;gap:7px;align-content:center;padding:8px 10px}
.th-lede b{height:9px;border-radius:2px;background:#6b7482;width:100%}
.th-lede u{height:5px;background:#b0b8c3}

.th-col2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center;padding:8px}
.th-col2 .p{display:grid;gap:5px}
.th-col2 u{height:4px}

.th-panel{display:grid;align-content:center;padding:8px}
.th-panel .p{display:grid;gap:6px;background:#cfd5de;border-radius:3px;padding:9px 8px}
.th-panel u{height:5px}
.th-panel u.w{width:58%;background:#8e97a5}

.th-quote{display:grid;gap:8px;align-content:center;justify-items:start;padding:8px 10px}
.th-quote i{width:26px;height:4px;border-radius:2px;background:var(--brand)}
.th-quote u{height:9px;border-radius:2px}
.th-quote u.w{width:64%;background:#8e97a5}

.th-drop{display:grid;grid-template-columns:22px 1fr;gap:5px 9px;align-content:center;padding:8px 10px}
.th-drop i{grid-row:span 2;width:22px;height:26px;border-radius:2px;background:var(--brand);align-self:start}
.th-drop u{height:5px}

.th-acc{display:grid;align-content:center;padding:4px 8px}
.th-acc .p{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #b0b8c3}
.th-acc u{flex:1;height:6px}
.th-acc i{width:7px;height:7px;border-radius:0;background:transparent;border-right:2px solid #8e97a5;border-bottom:2px solid #8e97a5;transform:rotate(45deg)}

.th-qa{display:grid;gap:9px;align-content:center;padding:8px 10px}
.th-qa .p{display:grid;gap:4px}
.th-qa b{height:7px;border-radius:2px;background:#6b7482;width:74%}
.th-qa u{height:4px;background:#b0b8c3}
.th-qa u.w{width:52%}

.th-num{display:grid;gap:10px;align-content:center;padding:8px 10px}
.th-num .p{display:flex;align-items:center;gap:9px}
.th-num i{width:14px;height:16px;border-radius:2px;background:var(--brand)}
.th-num u{flex:1;height:6px}

.th-btns{display:flex;flex-wrap:wrap;gap:7px;align-content:center;align-items:center;padding:8px 10px}
.th-btns i{width:42px;height:14px;border-radius:99px;background:var(--brand)}
.th-btns i:nth-child(2){background:#8e97a5}
.th-btns i:nth-child(3){background:#b0b8c3}

.th-form{display:grid;gap:7px;align-content:center;padding:6px 10px}
.th-form .p{display:grid;gap:3px}
.th-form u.w{width:34%;height:4px;background:#8e97a5}
.th-form i{height:9px;border-radius:2px;background:transparent;border:1px solid #b0b8c3}

.th-form2{display:grid;grid-template-columns:1fr 1fr;gap:7px 8px;align-content:center;padding:6px 10px}
.th-form2 .p{display:grid;gap:3px}
.th-form2 u.w{width:52%;height:4px;background:#8e97a5}
.th-form2 i{height:9px;border-radius:2px;background:transparent;border:1px solid #b0b8c3}

/* The hero diagrams: b is the title, u the lede, i the button row. A dark plate means the
   picture sits behind the text; a light one means it does not. */
.th-hero{display:grid;gap:6px;align-content:center;padding:10px 12px}
.th-hero b{height:12px;border-radius:2px;background:#6b7482;width:82%}
.th-hero u{height:5px;background:#b0b8c3}
.th-hero u.w{width:56%}
.th-hero i{width:34px;height:11px;border-radius:3px;background:var(--brand);margin-top:3px}
.th-hero1{background:#2b323e}
.th-hero1 b{background:#e6e9ef}
.th-hero1 u{background:#8e97a5}
.th-hero2{background:#2b323e;justify-items:center;text-align:center}
.th-hero2 b{background:#e6e9ef;width:70%}
.th-hero2 u{background:#8e97a5;width:78%}
.th-hero2 u.w{width:50%}
.th-hero3{background:#2b323e;align-content:end;padding-bottom:9px}
.th-hero3 b{background:#e6e9ef;width:74%}
.th-hero3 u{background:#8e97a5;width:58%}
.th-hero4{gap:7px}
.th-hero4 b{height:15px;background:#6b7482;width:88%}
.th-hero5{background:#2b323e;padding:8px;align-content:center}
.th-hero5 .p{display:grid;gap:5px;background:#eef1f4;border-radius:3px;padding:8px 9px}
.th-hero5 b{background:#6b7482;width:76%;height:10px}
.th-hero5 u{background:#b0b8c3;width:58%}

.th-line{display:grid;align-content:center}
.th-line .p{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #b0b8c3}
.th-line i.d{width:12px;height:12px}
.th-line u{flex:1;height:6px}

@media(max-width:900px){
  .wsite{grid-template-columns:1fr}
  .wmeta dl > div{grid-template-columns:104px minmax(0,1fr)}
  .grid2{grid-template-columns:1fr}
  .ws-nav{width:60px;padding:12px 0}
  .ws-nav a{padding:11px 0;justify-content:center}
  .ws-nav a span{display:none}
  .ws-nav-b .btn span{display:none}
  .ws-main{padding:18px 16px 60px}
  .chatwrap{flex-direction:column;height:auto}
  .thl{width:auto;max-height:220px;border-right:0;border-bottom:1px solid var(--line)}
}

/* A delivery channel that is announced but not built yet (phone & desktop push). */
.ck-soon{opacity:.6;cursor:default}
.soon{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(217,155,43,.16);color:#e6b455;border-radius:99px;padding:2px 7px;margin-left:6px;vertical-align:1px}

/* Date + time fields read white, with white picker icons */
input[type=date].inp,input[type=time].inp{color:#fff;color-scheme:dark}
input[type=date].inp::-webkit-calendar-picker-indicator,input[type=time].inp::-webkit-calendar-picker-indicator{filter:invert(1) brightness(2);opacity:.85;cursor:pointer}
input[type=date].inp::-webkit-datetime-edit,input[type=time].inp::-webkit-datetime-edit{color:#fff}

/* Panel person card: the photo itself is the upload control */
.pcard{display:flex;gap:14px;padding:12px}
.pcard .rc-h{padding:0 0 8px}
.pcard .rc-b{padding:0}
.pc-f{flex:1;min-width:0}
.pc-phw{position:relative;flex:none;align-self:flex-start}
.pc-ph{position:relative;width:96px;height:96px;border-radius:16px;overflow:hidden;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--line2);
  background:linear-gradient(145deg,#2a1416,#1b2029);cursor:pointer;box-shadow:0 8px 20px -12px rgba(0,0,0,.9);transition:border-color .15s,transform .15s}
div.pc-ph{cursor:default}
.pc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pc-ini{font-family:var(--head);font-weight:700;font-size:28px;letter-spacing:.02em;color:#fff;opacity:.9}
.pc-ph.empty{border-style:dashed;border-color:#4a5262}
.pc-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;font-size:11px;
  background:rgba(8,10,14,.62);backdrop-filter:blur(2px);opacity:0;transition:opacity .15s}
.pc-ov b{font-weight:600;letter-spacing:.03em}
button.pc-ph:hover,button.pc-ph:focus-visible{border-color:var(--brand2);outline:none}
button.pc-ph:hover .pc-ov,button.pc-ph:focus-visible .pc-ov{opacity:1}
.pc-ph.empty .pc-ov{opacity:1;background:transparent;color:var(--fg2)}
.pc-ph.empty .pc-ini{display:none}
.pc-ph.empty:hover .pc-ov{color:#fff}
.pc-rm{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--bg3);border:1px solid var(--line2);color:var(--fg2);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pc-rm:hover{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:600px){.pcard{flex-direction:column}.pc-ph{width:84px;height:84px}}
.cav{overflow:hidden}.cav img{width:100%;height:100%;object-fit:cover;display:block}
.bulkbar.idle b{color:var(--fg3);font-weight:600}
.bulkbar button:disabled,.bulkbar select:disabled{opacity:.45;cursor:not-allowed}

/* choices editor (Dropdown / Single Choice) */
.opt-ed{border:1px solid var(--line);border-radius:9px;background:var(--bg);padding:8px 10px}
.opt-ed.closed .opt-h{margin-bottom:0;flex-wrap:nowrap}
.opt-sum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.opt-h b{font-family:var(--head);font-size:12.5px}
.opt-list{display:flex;flex-direction:column;gap:3px;max-height:300px;overflow:auto;padding-right:2px}
.opt-row{display:flex;align-items:center;gap:4px}
.opt-row .inp-sm{padding-top:4px;padding-bottom:4px;min-height:0;height:28px}
.opt-row .btn-ic{width:26px;height:26px;padding:0}
.opt-row .btn-ic .ic{width:13px;height:13px}
.opt-n{width:24px;flex:none;text-align:right;font-size:11px;color:var(--fg3);font-variant-numeric:tabular-nums}
.opt-find{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.opt-find .inp{max-width:320px}
.opt-row[hidden]{display:none}
.chip-gold{background:linear-gradient(135deg,#F6E3A6,#E0B75A);color:#5A3E0C;font-weight:700;border:0}
#joinsect h2 .chip{vertical-align:middle;margin-left:6px;font-size:10.5px}
.join-add{gap:10px 10px;margin-top:14px}
#joinitems{margin-top:6px}
#joinitems .empty{margin-bottom:0}

/* Sub-tabs and the Registrations header stay put while the list scrolls. The workspace main
   pane scrolls with 24px of top padding, so the tabs stick 24px above its edge and carry that
   padding as their own background; the header block sticks right under them. */
.ws-main .subtabs{position:sticky;top:-24px;z-index:21;background:var(--bg);padding-top:24px;margin-top:-28px}
.ws-main .sticky-head{position:sticky;top:var(--subtabs-h,39px);z-index:20;background:var(--bg);padding:0 0 12px;margin-top:-22px;padding-top:22px}
.ws-main .sticky-head .bulkbar{margin-bottom:0}
.ws-nav a.locked{opacity:.42;cursor:not-allowed;pointer-events:auto}
.ws-nav a.locked:hover{background:none;color:inherit}
.ws-nav a.locked .ic:last-child{margin-left:auto;width:13px;height:13px}
.area-row{border-color:rgba(224,183,90,.55);background:linear-gradient(135deg,rgba(246,227,166,.10),rgba(224,183,90,.06))}
.area-row .area-star{color:#E0B75A;font-size:18px;display:inline-grid;place-items:center;width:62px}
.area-row.off{opacity:.8;border-color:var(--line)}
.ses-row .rc-h{flex-wrap:wrap}
.ses-ask{margin-bottom:10px;border-color:rgba(214,59,57,.35)}
.ses-ask .rc-h{flex-wrap:wrap;gap:8px 14px}
.sect[hidden]{display:none!important}
.seg.dmode{display:inline-flex;max-width:480px}
.seg.dmode button{padding:8px 18px}
.seg.dmode button.on{background:var(--bg2);color:var(--fg)}
.ses-field{border-color:rgba(217,155,43,.45)}
.ses-field .chip{display:inline-flex;align-items:center;gap:5px}
.fld[hidden]{display:none!important}
.etype{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.etype-c{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1.5px solid var(--line2);border-radius:12px;background:var(--bg2);cursor:pointer}
.etype-c input{position:absolute;opacity:0;pointer-events:none}
.etype-c b{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:15px}
.etype-c span{font-size:12.5px;color:var(--fg2);line-height:1.5}
.etype-c:hover{border-color:var(--fg3)}
.etype-c.on{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(214,59,57,.15)}
.etype-c.gold.on{border-color:#E0B75A;box-shadow:0 0 0 3px rgba(224,183,90,.18)}
.etype-c.gold b .ic{color:#E0B75A}
.area-row a{color:inherit;text-decoration:underline}
@media (max-width:760px){.etype{grid-template-columns:1fr}}

/* Layout tab: text colour rows */
.txrow{display:grid;grid-template-columns:1fr 34px 86px auto;align-items:center;gap:8px;margin-top:6px}
.txhex{font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:uppercase;padding-left:8px;padding-right:8px}
.txrow .fh{margin:0}
.txpick{width:34px;height:28px;padding:0;border:1px solid var(--line2);border-radius:6px;background:var(--bg3);cursor:pointer}
.txpick::-webkit-color-swatch-wrapper{padding:3px}
.txpick::-webkit-color-swatch{border:0;border-radius:4px}
.txval{color:var(--fg2);font-variant-numeric:tabular-nums}

/* Languages tab (panelLang) */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.lang-card{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);cursor:pointer}
.lang-card.on{border-color:var(--brand);background:rgba(176,26,24,.08)}
.lang-card input{accent-color:var(--brand)}
.lang-t{display:flex;flex-direction:column;min-width:0}
.lang-t b{font-family:var(--head);font-size:13px}
.lang-t i{font-style:normal;font-size:11.5px;color:var(--fg3)}
.lang-f{display:inline-flex;width:30px;height:20px;flex:none;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.lang-f.sm{width:18px;height:12px;border-radius:2px;vertical-align:-1px}
.lang-f svg{width:100%;height:100%;display:block}
.lang-pv{display:inline-flex;align-items:center;gap:6px}
.tr-top{align-items:center;gap:12px;margin-bottom:8px}
.tr-seg{display:inline-flex;flex-wrap:wrap}
.tr-seg button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;flex:0 0 auto}
.trh{font-family:var(--head);font-size:13px;color:var(--fg2);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.tr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.tr-src .fh{display:block;margin:0 0 4px}
.tr-orig{white-space:pre-wrap;font-size:13px;color:var(--fg);line-height:1.5;max-height:180px;overflow:auto}
@media (max-width:760px){.tr-row{grid-template-columns:1fr}}
/* An automatic translation shown in its box: still editable, but marked as the machine's. */
.tr-dst{position:relative}
.tr-isauto{color:var(--fg2);font-style:italic;border-style:dashed}
.tr-badge{position:absolute;top:-8px;right:8px;padding:1px 7px;border-radius:99px;background:var(--bg3);border:1px solid var(--line2);color:var(--fg3);font-size:10.5px;font-weight:600;font-family:var(--head)}
/* Languages tab: status first, the per-text editor folded away. */
.tr-status{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.tr-st{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.tr-st b{font-family:var(--head);font-size:13px}
.tr-more > summary{cursor:pointer;color:var(--fg2);font-size:12.5px;font-weight:600;padding:4px 0;user-select:none}
.tr-more > summary:hover{color:var(--fg)}
.tr-more[open] > summary{margin-bottom:12px}

/* Event Info: the status choice at the top of the tab (panelInfo). */
.stat-sect{margin-bottom:26px}
.stat-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:900px}
.stat-card{--st:var(--fg3);display:flex;align-items:flex-start;gap:11px;text-align:left;padding:14px 14px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);color:var(--fg);cursor:pointer;font:inherit;transition:border-color .12s,background .12s}
.stat-card:hover:not(:disabled){border-color:var(--st)}
.stat-card:disabled{cursor:not-allowed;opacity:.7}
.stat-card.st-live{--st:var(--ok)}
.stat-card.st-completed{--st:var(--navy)}
.stat-card.on{border-color:var(--st);background:color-mix(in srgb,var(--st) 14%,var(--bg2));box-shadow:inset 0 0 0 1px var(--st)}
.st-dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:3px;background:var(--st);box-shadow:0 0 0 3px color-mix(in srgb,var(--st) 25%,transparent)}
.stat-card.on.st-live .st-dot{animation:stpulse 2s ease-in-out infinite}
@keyframes stpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--st) 10%,transparent)}}
.st-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.st-t b{font-family:var(--head);font-size:14px}
.st-t i{font-style:normal;font-size:12px;color:var(--fg2);line-height:1.4}
.stat-warn{margin-top:10px;color:var(--warn)}
.stat-warn a{color:inherit;text-decoration:underline}
@media (max-width:640px){.stat-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.stat-card.on.st-live .st-dot{animation:none}}

/* ---------- Cards / Icon Highlights: item rows + icon picker (bindItemRows / iconPicker) ---------- */
.irows{display:flex;flex-direction:column;gap:8px}
.irow{display:flex;gap:8px;align-items:flex-start;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.ir-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line2);background:rgba(176,26,24,.14);color:#ff8f8c;cursor:pointer;transition:.12s;padding:0}
.ir-ic:hover:not(:disabled){border-color:var(--brand);background:rgba(176,26,24,.24)}
.ir-ic.empty{background:var(--bg3);border-style:dashed;color:var(--fg3)}
.ir-ic svg{width:22px;height:22px}
.ir-ic svg.dim{opacity:.55}
.ir-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ir-f textarea{resize:vertical;min-height:32px}
.ir-act{display:flex;flex-direction:column;gap:2px;flex:none}
.ir-act .btn-ico{width:24px;height:22px;padding:0;font-size:11px;min-height:0}
.ir-raw > summary{cursor:pointer;font-size:12px;color:var(--fg2);font-weight:600;margin-top:4px}
.ir-raw[open] > summary{margin-bottom:8px}
.modal.modal-icp{width:min(720px,94vw)}
.modal-icp .modal-b{display:flex;flex-direction:column;gap:12px}
.icp{height:min(56vh,520px);overflow:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px}
.icp-g h4{margin:0 0 8px;font-family:var(--head);font-size:12px;color:var(--fg2);text-transform:uppercase;letter-spacing:.04em}
.icp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.icp-b{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg3);color:var(--fg);cursor:pointer;transition:.12s}
.icp-b:hover{border-color:var(--brand);color:#ff8f8c}
.icp-b.on{border-color:var(--brand);background:rgba(176,26,24,.16);color:#ff8f8c}
.icp-b svg{width:24px;height:24px}
.icp-b span{font-size:10.5px;color:var(--fg3);line-height:1.2;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Overlay colour presets (washColorRow) */
.wcol button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.wsw{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.35)}

/* ---------- spacing system (same in Backstage, Studio and Space) ----------
   8-pt grid. One side gutter (--gx) for the header AND the page, so the logo and the content
   line up. Desktop 24px, phones 16px. */
:root{--gx:24px;--gy:24px;--sec:24px;--pb:48px}
@media(max-width:760px){:root{--gx:16px;--gy:16px;--sec:16px;--pb:32px}}
.top{padding:0 var(--gx)}
.page{padding:var(--gy) var(--gx) var(--pb)}
.ws-h{padding:16px var(--gx)}
.ws-main{padding:var(--gy) var(--gx) var(--pb)}
.stats,.page-h{margin-bottom:var(--sec)}