/* ══════════════════════════════════════════════════════════════════════════
   SELLiora — WORKSPACE SETUP (R3) styles
   Uses selliora-tokens.css variables only, so light/dark theme and the
   Branding customizer apply automatically.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── shared controls ──────────────────────────────────────────────────── */
.ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;font-weight:600;font-size:13px;line-height:1.2;font-family:inherit;border-radius:var(--rads);border:1px solid var(--bd2);background:var(--s);color:var(--t);cursor:pointer;transition:background .15s,border-color .15s}
.ws-btn:hover{background:var(--s2);border-color:var(--t3)}
.ws-btn.pri{background:var(--p);border-color:var(--p);color:var(--text-on-primary)}
.ws-btn.pri:hover{background:var(--pd);border-color:var(--pd)}
.ws-btn:disabled{opacity:.55;cursor:not-allowed}
.ws-link{background:none;border:none;padding:4px 6px;font-weight:600;font-size:12.5px;font-family:inherit;color:var(--p);cursor:pointer;border-radius:6px}
.ws-link:hover{background:var(--pl)}
.ws-link.danger{color:var(--r)}
.ws-link.danger:hover{background:var(--rb)}
.ws-link:disabled{opacity:.4;cursor:not-allowed}
.ws-btn:focus-visible,.ws-link:focus-visible,.ws-switch:focus-visible,.ws-type:focus-visible,.ws-tabbtn:focus-visible,.ws-ord button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

.ws-ff{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.ws-ff>label{font-size:12.5px;font-weight:600;color:var(--t)}
.ws-ff input,.ws-ff select,.ws-ff textarea,.ws-add-row input,.ws-srow input,.ws-flabel{width:100%;padding:9px 11px;font-size:13.5px;font-family:inherit;color:var(--t);background:var(--inp);border:1px solid var(--inp-bd);border-radius:var(--rads);outline:none;transition:border-color .15s,box-shadow .15s}
.ws-ff input:focus,.ws-ff select:focus,.ws-ff textarea:focus,.ws-add-row input:focus,.ws-srow input:focus,.ws-flabel:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--ring)}
.ws-ff textarea{resize:vertical;min-height:58px}
.ws-ff input[readonly]{background:var(--s2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.ws-ff-checks{justify-content:flex-end;gap:8px}
.ws-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ws-pair{display:flex;gap:8px}
.ws-pair>*{flex:1;min-width:0}
.ws-pair>.ws-btn{flex:0 0 auto}
.ws-hint{font-size:12px;color:var(--t3);line-height:1.45}
.ws-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:18px 0 10px}
.ws-why{font-size:13.5px;color:var(--t2);line-height:1.55;margin:0 0 18px;max-width:68ch}
.ws-err{background:var(--rb);color:var(--r);border:1px solid var(--rbd);border-radius:var(--rads);padding:10px 12px;font-size:13px;margin:0 0 14px}
.ws-err[hidden]{display:none}
.ws-inline-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.ws-tag{flex:0 0 auto;display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--s2);color:var(--t2);border:1px solid var(--bd);white-space:nowrap}
.ws-tag.core{background:var(--pl);color:var(--p);border-color:transparent}
.ws-chk{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--t2);cursor:pointer;white-space:nowrap;user-select:none}
.ws-chk input{width:15px;height:15px;accent-color:var(--p);margin:0;cursor:pointer}
.ws-chk input:disabled{cursor:not-allowed}
.ws-ord{flex:0 0 auto;display:inline-flex;gap:2px}
.ws-ord button{width:24px;height:24px;border:1px solid var(--bd);background:var(--s);color:var(--t2);border-radius:6px;cursor:pointer;font-size:12px;line-height:1;padding:0}
.ws-ord button:hover:not(:disabled){background:var(--s2);color:var(--t)}
.ws-ord button:disabled{opacity:.35;cursor:not-allowed}

/* ── wizard shell ─────────────────────────────────────────────────────── */
body.ws-wiz-open{overflow:hidden}
/* centered modal card on a dim backdrop — the classic "Set up Selliora" look */
.ws-wiz{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;color:var(--t);font-family:inherit}
.ws-wiz-top{display:none}
.ws-wiz-body{width:100%;height:100vh;background:var(--s);overflow:hidden;display:grid;grid-template-columns:280px minmax(0,1fr);min-height:0}
.ws-rail{padding:26px 20px;border-right:1px solid var(--bd);background:var(--s2);display:flex;flex-direction:column;gap:16px}
.ws-rail::before{content:"Set up Selliora";display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--t)}
.ws-rail::after{content:"Six quick choices. Everything can be changed later in Settings.";display:none}
.ws-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:wsstep}
.ws-rail li{counter-increment:wsstep;position:relative}
.ws-rail li>span,.ws-rail li>button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;font-weight:500;font-size:13.5px;font-family:inherit;color:var(--t3);background:none;border:none;text-align:left}
.ws-rail li>span::before,.ws-rail li>button::before{content:counter(wsstep);flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--s2);color:var(--t3);border:1px solid var(--bd)}
.ws-rail li.now>span{color:var(--t);font-weight:600;background:var(--pl)}
.ws-rail li.now>span::before{background:var(--p);color:var(--text-on-primary);border-color:var(--p)}
.ws-rail li.done>button{color:var(--t2);cursor:pointer}
.ws-rail li.done>button:hover{background:var(--s2)}
.ws-rail li.done>button::before{content:"\2713";background:var(--gb);color:var(--g);border-color:var(--gbd)}
.ws-progress{height:4px;border-radius:4px;background:var(--bd);overflow:hidden;margin-top:auto}
.ws-progress i{display:block;height:100%;background:var(--acc);transition:width .3s ease}
.ws-panel{overflow-y:auto;padding:32px 40px 0;display:flex;flex-direction:column}
.ws-panel>*{max-width:1040px;width:100%}
.ws-stepno{font-size:12px;font-weight:600;color:var(--acc-d);margin-bottom:6px}
.ws-panel h2{font-size:24px;line-height:1.2;margin:0 0 8px;font-weight:700;letter-spacing:-.01em;outline:none}
.ws-actions{position:sticky;bottom:0;margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 20px;background:linear-gradient(to bottom,transparent,var(--bg) 30%);z-index:2}
.ws-actions .ws-btn{min-width:120px;padding:11px 20px;font-size:14px}
#ws-view{padding-bottom:24px}

/* ── business types ───────────────────────────────────────────────────── */
.ws-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ws-type{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border:1.5px solid var(--bd);border-radius:var(--rad);background:var(--s);color:var(--t);font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.ws-type:hover{border-color:var(--bd2);background:var(--s2)}
.ws-type b{font-size:14.5px}
.ws-type span{font-size:12.5px;color:var(--t2);line-height:1.45}
.ws-type em{font-style:normal;font-size:11.5px;color:var(--t3);margin-top:auto;padding-top:4px}
.ws-type.on{border-color:var(--p);background:var(--pl);box-shadow:inset 0 0 0 1px var(--p)}

/* ── modules ──────────────────────────────────────────────────────────── */
.ws-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ws-mod{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--bd);border-radius:var(--rad);background:var(--s)}
.ws-mod.on{border-color:var(--bd2)}
.ws-mod-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ws-mod-txt b{font-size:14px}
.ws-mod-txt span{font-size:12.5px;color:var(--t2);line-height:1.45}
.ws-mod-txt small{font-size:11.5px;color:var(--t3)}
.ws-switch{flex:0 0 auto;position:relative;width:40px;height:23px;border-radius:999px;border:none;background:var(--bd2);cursor:pointer;padding:0;transition:background .15s;margin-top:2px}
.ws-switch i{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.ws-switch.on{background:var(--g)}
.ws-switch.on i{transform:translateX(17px)}
.ws-switch:disabled{opacity:.6;cursor:not-allowed}

/* ── lead form builder ────────────────────────────────────────────────── */
/* The live preview keeps its place on the right; the editing column gets the
   room it needs and the preview stops being squeezed on smaller laptops. */
/* The preview only needs enough width to be readable; everything else goes to
   the list, which is where the work happens. Labels like "Attribution" and
   "Course interest" were being truncated while space sat empty on the right. */
/* Use the width the page actually has. The settings pane was sitting inside a
   narrower column while the right of the screen stayed empty. */
/* Take the width the page is not using.
   Naming the wrapper by guesswork failed several times, so this drops the cap
   on EVERY ancestor of the field list inside the settings page rather than on
   one element I hoped was the right one. :has() lets a parent be selected by
   what it contains, so no class name has to be known. */
#page-settings *{max-width:none}
#page-settings :has(.ws-form-layout){max-width:none!important;width:auto}
#page-settings .ws-form-layout{width:100%;max-width:none!important}
/* older browsers without :has() still get the common wrappers uncapped */
#page-settings,#page-settings>div,#page-settings>div>div,
#page-settings .ws,#page-settings .ws-wrap,#page-settings .ws-body,
#page-settings .ws-pane,#page-settings .ws-main,#page-settings .ws-content,
#page-settings .card,#page-settings .panel{max-width:none!important}
.ws-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:14px;align-items:start;width:100%}
@media(max-width:1250px){.ws-form-layout{grid-template-columns:minmax(0,1fr) 230px}}
@media(max-width:1000px){.ws-form-layout{grid-template-columns:minmax(0,1fr)}}
/* Field rows: one bordered list instead of a stack of separate cards.
   Purely visual - the markup, the controls and what they do are unchanged.
   Twice as many fields fit on screen, and the row only shows its border on
   hover so the list reads as a list rather than a wall of boxes. */
.ws-frows{display:flex;flex-direction:column;gap:0;margin-bottom:12px;
  border:1px solid var(--bd);border-radius:var(--rad);background:var(--s);
  overflow-x:auto;overflow-y:visible}
/* A real grid, so every row's columns line up under each other and the list
   reads as one table instead of ten separate flex rows that each sized
   themselves. The columns are: reorder, label, type, section, on form,
   required, actions. */
/* Real minimums: letting every column shrink to 0 squeezed the labels down to
   "Full r" and "Phon". Each column keeps enough width to be readable, and if
   the pane is genuinely too narrow the list scrolls sideways instead of
   cutting anything off. */
.ws-frow{display:grid;
  grid-template-columns:40px minmax(150px,1.6fr) 80px minmax(130px,1.1fr) 92px 88px 104px;
  align-items:center;gap:8px;
  padding:6px 12px;border:0;border-bottom:1px solid var(--bd);border-radius:0;
  background:var(--s);transition:background .12s ease}
.ws-frow:last-child{border-bottom:0}
.ws-frow:hover{background:var(--s2)}
.ws-frow.off{background:var(--s2)}
.ws-frow.off .ws-flabel{color:var(--t3)}
/* min-width:0 lets these shrink so the Edit / Remove links at the end of the
   row are never pushed out of a nowrap row and clipped by the list's
   overflow - which is exactly what hid them. */
.ws-flabel{min-width:0;width:100%;padding:5px 8px;font-size:13px;
  border-color:transparent;background:transparent}
.ws-frow .ws-facts{display:inline-flex;gap:8px;justify-content:flex-end}
.ws-frow .ws-facts .ws-link{font-size:11.5px;white-space:nowrap;padding:0}
.ws-flabel:hover,.ws-flabel:focus{border-color:var(--bd);background:var(--s)}
/* the up/down arrows only appear on the row you are pointing at */
.ws-frow .ws-ord{opacity:0;transition:opacity .12s ease}
.ws-frow:hover .ws-ord,.ws-frow:focus-within .ws-ord{opacity:1}
.ws-frow .ws-ord button{width:22px;height:22px;line-height:1;padding:0;
  border-radius:6px;font-size:12px}
/* section picker and checkboxes sit quietly until needed */
.ws-frow .ws-fsection{min-width:0;width:100%;font-size:12px;padding:5px 8px;text-overflow:ellipsis;
  border-color:transparent;background:transparent}
.ws-frow:hover .ws-fsection,.ws-frow .ws-fsection:focus{border-color:var(--bd);background:var(--s)}
.ws-frow .ws-chk{font-size:11.5px;color:var(--t2);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.ws-frow .ws-tag{font-size:10px;padding:2px 7px}
/* on a narrow screen the row wraps instead of squeezing */
@media(max-width:900px){.ws-frow{grid-template-columns:36px minmax(0,1fr) auto;row-gap:6px}
  .ws-frow .ws-fsection,.ws-frow .ws-chk{grid-column:2/4}}
.ws-facts{flex:0 0 auto;display:inline-flex;gap:4px;margin-left:auto}
.ws-ads{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border:1px dashed var(--bd2);border-radius:var(--rad);cursor:pointer;background:var(--s)}
.ws-ads input{width:16px;height:16px;margin-top:2px;accent-color:var(--p)}
.ws-ads span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--t2)}
.ws-ads b{font-size:13.5px;color:var(--t)}
.ws-addbox{border:1px solid var(--p);border-radius:var(--rad);padding:16px;background:var(--s);box-shadow:0 0 0 3px var(--ring);margin-bottom:6px}
.ws-addbox-h{font-weight:700;font-size:14px;margin-bottom:12px}
.ws-form-preview{position:sticky;top:0;border:1px solid var(--bd);border-radius:var(--rad);background:var(--s);padding:16px;box-shadow:var(--shadow)}
.ws-prev-h{font-weight:700;font-size:15px;padding-bottom:10px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.ws-prev-g{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:12px 0 6px}
.ws-prev-f{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.ws-prev-f span{font-size:12px;color:var(--t2)}
.ws-prev-f i{color:var(--r);font-style:normal}
.ws-prev-in{height:30px;border:1px solid var(--inp-bd);border-radius:7px;background:var(--inp)}
.ws-prev-in.tall{height:52px}
.ws-prev-in.sel{font-size:11.5px;color:var(--t3);display:flex;align-items:center;padding:0 9px}

/* ── columns ──────────────────────────────────────────────────────────── */
.ws-cols-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.ws-crows{display:grid;gap:4px}
.ws-crow{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--bd);border-radius:var(--rads);background:var(--s2)}
.ws-crow.on{background:var(--s)}
.ws-crow .ws-chk{flex:1;color:var(--t);overflow:hidden;text-overflow:ellipsis}
.ws-crow:not(.on) .ws-chk{color:var(--t2)}
.ws-table-prev{border:1px solid var(--bd);border-radius:var(--rad);background:var(--s);overflow:hidden}
.ws-prev-cap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:10px 14px;border-bottom:1px solid var(--bd)}
.ws-tscroll{overflow-x:auto}
.ws-ptable{border-collapse:collapse;width:100%;font-size:12.5px}
.ws-ptable th{text-align:left;font-weight:600;color:var(--t2);background:var(--s2);padding:9px 14px;white-space:nowrap;border-bottom:1px solid var(--bd)}
.ws-ptable td{padding:10px 14px;border-bottom:1px solid var(--bd);white-space:nowrap;color:var(--t)}
.ws-ptable tr:last-child td{border-bottom:none}

/* ── pipeline ─────────────────────────────────────────────────────────── */
.ws-srows{display:grid;gap:6px;max-width:560px}
.ws-srow{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:10px}
.ws-snum{width:24px;height:24px;border-radius:50%;background:var(--pl);color:var(--p);font-size:11.5px;font-weight:700;display:grid;place-items:center}
.ws-add-row{display:flex;gap:8px;max-width:560px;margin:12px 0 8px;padding-left:38px}

/* ── team ─────────────────────────────────────────────────────────────── */
.ws-team{max-width:760px}
.ws-team-list{margin-top:8px}
.ws-team-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--bd);font-size:13px}
.ws-team-row span{color:var(--t2);overflow:hidden;text-overflow:ellipsis}
.ws-team-row em{font-style:normal;font-size:11.5px;color:var(--t3);text-transform:capitalize}
.ws-empty{border:1px dashed var(--bd2);border-radius:var(--rad);padding:24px;max-width:520px;background:var(--s)}
.ws-empty b{font-size:15px}
.ws-empty p{color:var(--t2);font-size:13.5px;margin:6px 0 14px}

/* ── settings panel ───────────────────────────────────────────────────── */
.ws-settings{padding:4px 2px}
.ws-set-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.ws-set-head h3{margin:0 0 4px;font-size:17px}
.ws-set-head p{margin:0;font-size:13px;color:var(--t2)}
.ws-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--bd);margin-bottom:14px}
.ws-tabbtn{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 12px;font-weight:600;font-size:13px;font-family:inherit;color:var(--t3);cursor:pointer}
.ws-tabbtn:hover{color:var(--t)}
.ws-tabbtn.on{color:var(--p);border-bottom-color:var(--p)}
.ws-settings .ws-form-layout{grid-template-columns:minmax(0,1fr) 240px}
.ws-moved{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--bd);border-radius:var(--rads);background:var(--s2);font-size:13px;color:var(--t2)}

/* ── blocking screen ──────────────────────────────────────────────────── */
.ws-block{position:fixed;inset:0;z-index:9500;background:var(--bg);display:grid;place-items:center;padding:20px}
.ws-block-card{max-width:440px;background:var(--s);border:1px solid var(--bd);border-radius:var(--rad);padding:28px;box-shadow:var(--shadow-lg)}
.ws-block-card h2{margin:0 0 8px;font-size:20px}
.ws-block-card p{margin:0 0 18px;color:var(--t2);font-size:14px;line-height:1.55}

/* ── small screens ────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .ws-form-layout,.ws-settings .ws-form-layout{grid-template-columns:1fr}
  .ws-form-preview{position:static}
  .ws-cols-layout{grid-template-columns:1fr}
}
@media (max-width:820px){
  .ws-wiz-top{padding:12px 16px}
  .ws-wiz-body{grid-template-columns:1fr}
  .ws-rail{border-right:none;border-bottom:1px solid var(--bd);padding:12px 16px;gap:10px}
  .ws-rail ol{display:flex;overflow-x:auto;gap:4px}
  .ws-rail li>span,.ws-rail li>button{white-space:nowrap;padding:6px 8px;font-size:12.5px}
  .ws-progress{margin-top:0}
  .ws-panel{padding:20px 16px 0}
  .ws-panel h2{font-size:20px}
  .ws-grid2{grid-template-columns:1fr}
  .ws-frow{gap:6px 8px}
  .ws-frow .ws-chk,.ws-frow .ws-facts{grid-column:span 1}
  .ws-facts{min-width:0}
  .ws-srow{grid-template-columns:28px minmax(0,1fr) auto}
  .ws-srow .ws-link{grid-column:2}
  .ws-add-row{padding-left:0}
  .ws-team-row{grid-template-columns:1fr auto}
  .ws-team-row span{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .ws-progress i,.ws-switch,.ws-switch i{transition:none}
}

/* Simple Create-opportunity modal */
.so-back{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.so-card{width:100%;max-width:460px;background:var(--s);border:1px solid var(--bd);border-radius:var(--rad);box-shadow:var(--shadow-lg);padding:22px;max-height:90vh;overflow:auto}
.so-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.so-head b{font-size:17px}
.so-x{border:none;background:none;font-size:16px;color:var(--t3);cursor:pointer;padding:4px 6px;border-radius:6px}
.so-x:hover{background:var(--s2);color:var(--t)}
.so-sub{font-size:12.5px;color:var(--t3);margin-bottom:14px}
.so-err{background:var(--rb);color:var(--r);border:1px solid var(--rbd);border-radius:var(--rads);padding:8px 11px;font-size:12.5px;margin-bottom:12px}
.so-err[hidden]{display:none}
.so-lb{display:block;font-size:12.5px;font-weight:600;color:var(--t);margin:12px 0 5px}
.so-card input,.so-card select,.so-card textarea{width:100%;padding:9px 11px;font-size:13.5px;font-family:inherit;color:var(--t);background:var(--inp);border:1px solid var(--inp-bd);border-radius:var(--rads);outline:none;box-sizing:border-box}
.so-card input:focus,.so-card select:focus,.so-card textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--ring)}
.so-card textarea{resize:vertical}
.so-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.so-actions{display:flex;gap:10px;margin-top:18px}
.so-actions .ws-btn{flex:0 0 auto}
@media (max-width:520px){.so-row{grid-template-columns:1fr}}

/* modal wizard: panel header with close, tighter padding */
.ws-panel{overflow-y:auto;padding:22px 26px 0;display:flex;flex-direction:column}
.ws-panel-head{display:flex;align-items:center;justify-content:space-between}
.ws-x{background:none;border:0;font-size:18px;line-height:1;color:var(--t3);cursor:pointer;padding:2px 6px;border-radius:6px}
.ws-x:hover{background:var(--s2);color:var(--t)}
.ws-panel h2{font-size:21px}
.ws-actions{padding:14px 0 18px}

.ws-fsection{flex:0 0 auto;padding:5px 8px;font-size:12px;font-family:inherit;color:var(--t);background:var(--inp);border:1px solid var(--inp-bd);border-radius:var(--rads);width:140px}
.ws-fsection:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--ring);outline:none}

/* ── Settings > Lead fields: the list is a table (r150) ─────────────────
   Header row, one row per field, and the Edit form opens in the row right
   under the field you clicked. The move-up / move-down arrows are always
   shown (they used to appear only on hover). */
.ws-ftable-wrap{overflow-x:auto; border:1px solid var(--bd); border-radius:10px; background:var(--s); margin-bottom:12px}
.ws-ftable{width:100%; border-collapse:collapse; min-width:720px}
.ws-ftable th{text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t3);
  padding:9px 10px; background:var(--s2); border-bottom:1px solid var(--bd); white-space:nowrap}
.ws-ftable td{padding:7px 10px; border-bottom:1px solid var(--bd); vertical-align:middle}
.ws-ftable tbody tr:last-child td{border-bottom:0}
.ws-ftable th.c, .ws-ftable td.c{text-align:center; width:84px}
.ws-ftable th.r, .ws-ftable td.r{text-align:right; white-space:nowrap}
.ws-ftable .ws-td-ord{width:56px; padding-right:0}
.ws-ftable tr.ws-frow{display:table-row}
.ws-ftable tr.ws-frow:hover td{background:var(--s2)}
.ws-ftable tr.ws-frow.off td{background:var(--s2)}
.ws-ftable tr.ws-frow.editing td{background:color-mix(in srgb, var(--acc) 8%, var(--s)); border-bottom-color:transparent}
.ws-ftable .ws-td-label .ws-flabel{width:100%; min-width:160px}
.ws-ftable .ws-td-sec{min-width:160px}
.ws-ftable td.c input[type=checkbox]{width:16px; height:16px; accent-color:var(--acc); cursor:pointer}
.ws-ftable td.c input[type=checkbox]:disabled{cursor:not-allowed; opacity:.6}
.ws-ftable .ws-ord{opacity:.55!important; display:inline-flex; gap:2px}
.ws-ftable tr:hover .ws-ord, .ws-ftable .ws-ord:focus-within{opacity:1!important}
.ws-ftable .ws-lock{font-size:11px; color:var(--t3)}
.ws-ftable tr.ws-fedit-row > td{background:color-mix(in srgb, var(--acc) 8%, var(--s)); padding:4px 14px 16px 66px; border-bottom:1px solid var(--bd)}
.ws-ftable tr.ws-fedit-row .ws-addbox{margin:0; border:1px solid var(--bd2); background:var(--s); box-shadow:none}
.ws-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media(max-width:900px){.ws-ftable tr.ws-fedit-row > td{padding-left:14px}}

/* ── Edit field panel: Basics · Choices · Behaviour (r151) ───────────── */
.ws-fe{padding:0!important; overflow:hidden; border-radius:12px}
.ws-fe-h{display:flex; align-items:baseline; gap:10px; padding:14px 18px; border-bottom:1px solid var(--bd)}
.ws-fe-h b{font-size:15px; color:var(--t)}
.ws-fe-h span{font-size:12px; color:var(--t3)}
.ws-fe-b{padding:4px 18px 6px}
.ws-fe-sec{padding:14px 0; border-top:1px solid var(--bd)}
.ws-fe-sec:first-child{border-top:0}
.ws-fe-lab{margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--t3)}
.ws-fe-g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.ws-fe .ws-ff{margin:0}
.ws-fe-hint{display:block; font-size:11.5px; color:var(--t3); margin-top:5px}
.ws-fe-warn{margin-top:12px; padding:9px 12px; border-radius:8px; font-size:12.5px; background:var(--ab,#FDF3E1); color:var(--a,#B7791F); border:1px solid var(--abd,transparent)}
.ws-fe-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--bd2); border-radius:8px; padding:6px 8px; min-height:42px; background:var(--s); cursor:text}
.ws-fe-chips:focus-within{border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent)}
.ws-fe-chip{display:inline-flex; align-items:center; gap:4px; background:var(--s2); border:1px solid var(--bd); border-radius:6px; padding:3px 4px 3px 9px; font-size:12.5px; color:var(--t)}
.ws-fe-chip button{border:0; background:transparent; color:var(--t3); cursor:pointer; font-size:14px; line-height:1; width:20px; height:20px; border-radius:4px}
.ws-fe-chip button:hover{background:var(--rb,#FBEAE8); color:var(--r)}
#ws-af-optin{flex:1; min-width:180px; border:0!important; outline:0; box-shadow:none!important; background:transparent; padding:4px 2px; font-size:13px}
.ws-fe-sw{display:flex; align-items:flex-start; gap:12px; padding:10px 0; cursor:pointer}
.ws-fe-sw + .ws-fe-sw{border-top:1px solid var(--bd)}
.ws-fe-sw input{position:absolute; opacity:0; width:1px; height:1px}
.ws-fe-tog{flex:none; width:34px; height:20px; border-radius:10px; background:var(--bd2); position:relative; margin-top:1px; transition:background .15s}
.ws-fe-tog::after{content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s}
.ws-fe-sw input:checked + .ws-fe-tog{background:var(--acc)}
.ws-fe-sw input:checked + .ws-fe-tog::after{left:17px}
.ws-fe-sw input:focus-visible + .ws-fe-tog{outline:2px solid var(--acc); outline-offset:2px}
.ws-fe-swt b{display:block; font-size:13.5px; font-weight:600; color:var(--t)}
.ws-fe-swt small{display:block; font-size:12px; color:var(--t3); line-height:1.45; margin-top:1px}
.ws-fe-f{display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--bd); background:var(--s2)}
.ws-fe-fr{margin-left:auto; display:flex; gap:12px; align-items:center}
@media (prefers-reduced-motion:reduce){.ws-fe-tog,.ws-fe-tog::after{transition:none}}
@media(max-width:760px){.ws-fe-g3{grid-template-columns:1fr}}

/* ── Choices: where each item goes (r152) ─────────────────────────────── */
.ws-fe-conn{margin-top:14px}
.ws-fe-connh b{display:block; font-size:13px; color:var(--t)}
.ws-fe-connh small{display:block; font-size:12px; color:var(--t3); margin:1px 0 8px}
.ws-ctable-wrap{border:1px solid var(--bd); border-radius:10px; overflow-x:auto; background:var(--s)}
.ws-ctable{width:100%; border-collapse:collapse; min-width:560px}
.ws-ctable th{text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t3);
  padding:8px 12px; background:var(--s2); border-bottom:1px solid var(--bd); white-space:nowrap}
.ws-ctable td{padding:9px 12px; border-bottom:1px solid var(--bd); vertical-align:middle; font-size:12.5px}
.ws-ctable tbody tr:last-child td{border-bottom:0}
.ws-ctable .r{text-align:right; white-space:nowrap}
.ws-ctable .r .ws-link{margin-left:12px; font-size:12px}
.ws-citem{font-weight:600; color:var(--t); white-space:nowrap}
.ws-cstat{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ws-cstat b{display:block; font-size:12.5px; font-weight:600; color:var(--t)}
.ws-cstat small{display:block; font-size:11px; color:var(--t3)}
.ws-cdot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--bd2)}
.ws-cdot.on{background:var(--g,#16A34A); box-shadow:0 0 0 3px color-mix(in srgb, var(--g,#16A34A) 18%, transparent)}
.ws-cdot.warn{background:var(--a,#D97706)}
.ws-cmuted{color:var(--t3)}
.ws-ctest{flex-basis:100%; font-size:11.5px; font-weight:600; margin-left:16px}
.ws-ctest.ok{color:var(--g,#16A34A)} .ws-ctest.bad{color:var(--r)}
.ws-cask{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--t2); cursor:pointer; white-space:nowrap}
.ws-cask input{width:15px; height:15px; accent-color:var(--acc)}
.ws-btn.sm{padding:5px 11px; font-size:12px}

/* ── r152: the edit panel always fits the visible width of the fields table ──
   On laptop screens the fields table is wider than its box and scrolls
   sideways; the panel inside it used to be as wide as the whole table, so
   its right side (Section, the item table's buttons) was cut off. Now it is
   sized to the visible box and stays in view while the table scrolls. */
.ws-ftable-wrap{container-type:inline-size}
.ws-ftable tr.ws-fedit-row > td{padding-left:14px!important; padding-right:14px!important}
.ws-ftable tr.ws-fedit-row .ws-fe{position:sticky; left:14px; width:calc(100cqw - 28px); max-width:none; box-sizing:border-box}
.ws-fe{container-type:inline-size}
@container (max-width:620px){
  .ws-fe-g3{grid-template-columns:1fr 1fr}
  .ws-fe-g3 > .ws-ff:first-child{grid-column:1 / -1}
}
@container (max-width:420px){ .ws-fe-g3{grid-template-columns:1fr} }
.ws-ctable{min-width:0; table-layout:auto}
.ws-ctable td:nth-child(2){min-width:150px}
.ws-ctable .r{white-space:normal}
.ws-ctable .r .ws-link{display:inline-block; margin:2px 0 2px 10px}
.ws-ctest{margin-left:16px; font-weight:600}
/* r152: a narrow panel (laptops) stacks each item instead of hiding its
   buttons behind a sideways scroll: name + buttons, then status, then the
   ask / automatic choice. */
@container (max-width:640px){
  .ws-ctable thead{display:none}
  .ws-ctable, .ws-ctable tbody{display:block; width:100%}
  .ws-ctable tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:10px 12px; border-bottom:1px solid var(--bd)}
  .ws-ctable tbody tr:last-child{border-bottom:0}
  .ws-ctable td{display:block; padding:0!important; border:0!important; min-width:0!important}
  .ws-ctable td.ws-citem{grid-column:1; grid-row:1; font-size:13.5px; align-self:center}
  .ws-ctable td.r{grid-column:2; grid-row:1; text-align:right; white-space:nowrap}
  .ws-ctable td:nth-child(2){grid-column:1 / -1; grid-row:2}
  .ws-ctable td:nth-child(3){grid-column:1 / -1; grid-row:3}
  .ws-ctable td:nth-child(3):has(.ws-cmuted){display:none}
}
.ws-cauto{font-size:11.5px; color:var(--g,#16A34A); font-weight:600}

/* ── Choices: rename an item from the table (r157) ───────────────────── */
.ws-citem{display:flex; align-items:center; gap:6px}
.ws-cname{font-weight:600; color:var(--t)}
.ws-cedit{flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border:1px solid var(--bd2); border-radius:6px;
  background:var(--s); color:var(--t2); cursor:pointer}
.ws-cedit:hover{border-color:var(--acc); color:var(--acc); background:var(--s2)}
.ws-cedit:focus-visible{outline:2px solid var(--acc); outline-offset:1px}
.ws-cren{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ws-cren-in{min-width:150px; max-width:220px; padding:5px 9px; font-size:13px; border:1px solid var(--acc); border-radius:7px;
  background:var(--s); color:var(--t); font-family:inherit}
.ws-cren-in:focus{outline:2px solid color-mix(in srgb, var(--acc) 35%, transparent); outline-offset:1px}