/* ============================================================
   Hensys shared UI system — design tokens, primitives, motion.
   Linked from every page; page-specific rules stay inline.
   Dark mode is toggled via body.dm (see hensys-ui.js).
   ============================================================ */

:root{
  --bg:#f0f2f5;--surface:#fff;--surface2:#f7f8fa;--border:#e2e5ea;--text:#1a1f2e;--text2:#6b7280;
  --accent:#0059cc;--accent-h:#004ab3;--accent-r:rgba(0,89,204,.12);
  --danger:#dc2626;--danger-r:rgba(220,38,38,.12);--success:#16a34a;--warn:#d97706;
  --radius:8px;--side-w:218px;
  --html-c:#e34c26;--css-c:#264de4;--js-c:#d97706;
  --font:-apple-system,'Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
body.dm{
  --bg:#0d1117;--surface:#161b22;--surface2:#1c2333;--border:#30363d;--text:#e6edf3;--text2:#8b949e;
  --accent-r:rgba(0,89,204,.22);--danger-r:rgba(220,38,38,.18);
}
.preload-dark *{transition:none!important}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:600 13px/1 var(--font);cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease),box-shadow .15s var(--ease);
  white-space:nowrap;text-decoration:none;
}
.hb-btn:hover{background:var(--surface2)}
.hb-btn:active{transform:scale(.97)}
.hb-btn:disabled{opacity:.55;cursor:default;transform:none}
.hb-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.hb-btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.hb-btn-danger{background:transparent;border-color:var(--border);color:var(--danger)}
.hb-btn-danger:hover{background:var(--danger-r);border-color:var(--danger)}
.hb-btn-ghost{background:transparent;border-color:transparent;color:var(--text2)}
.hb-btn-ghost:hover{background:var(--surface2);color:var(--text)}
.hb-btn-sm{height:28px;padding:0 10px;font-size:12px}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.hb-card{
  background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.hb-card:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(0,0,0,.06)}
body.dm .hb-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.35)}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.hb-input,.hb-select,.hb-textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text);font:13px/1.4 var(--font);outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.hb-input:focus,.hb-select:focus,.hb-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-r)}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.hb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;color:var(--text2);text-align:center}
.hb-empty svg{opacity:.4;margin-bottom:12px}
.hb-empty-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.hb-empty-sub{font-size:12.5px;max-width:320px}

/* ── Spinner: circular loader with a tail ───────────────────────────────────
   Conic-gradient ring masked into an annulus, fading from transparent into
   the accent color — reads as a "tail" rather than the old flat two-tone
   border-spinner. Size/color are overridable via CSS custom properties. */
.hb-spinner{
  --spin-size:32px;--spin-w:3px;--spin-color:var(--accent);
  display:inline-block;width:var(--spin-size);height:var(--spin-size);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 55deg,var(--spin-color) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--spin-w)),#000 calc(100% - var(--spin-w) + .5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - var(--spin-w)),#000 calc(100% - var(--spin-w) + .5px));
  animation:hb-spin .85s linear infinite;
  flex-shrink:0;
}
.hb-spinner.sm{--spin-size:16px;--spin-w:2px}
.hb-spinner.lg{--spin-size:48px;--spin-w:4px}
.hb-spinner.xl{--spin-size:72px;--spin-w:5px}
.hb-spinner.on-accent{--spin-color:#fff}
@keyframes hb-spin{to{transform:rotate(360deg)}}

.hb-loading-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--text2);font-size:13px}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.hb-toast{
  display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);box-shadow:0 6px 24px rgba(0,0,0,.12);
  font-size:12.5px;font-weight:600;color:var(--text);animation:hb-toastIn .25s var(--ease);
}
.hb-toast.err{border-color:var(--danger);color:var(--danger)}
.hb-toast.ok{border-color:var(--success);color:var(--success)}
@keyframes hb-toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes hb-toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(24px)}}

/* ── Modals ──────────────────────────────────────────────────────────────── */
@keyframes hb-modalIn{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes hb-popIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── Entrance / list motion ──────────────────────────────────────────────── */
@keyframes hb-fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hb-enter{animation:hb-fadeUp .35s var(--ease) both}
/* stagger helper: apply --d:Nms inline per item for a cascading entrance */
.hb-enter[style*="--d"]{animation-delay:var(--d)}

/* ── Checkbox ────────────────────────────────────────────────────────────── */
/* Hides the native checkbox but keeps it focusable/clickable (opacity 0,
   not display:none) and draws a themed box + animated checkmark next to
   it via a sibling <span class="hb-box">. Works with body.dm automatically
   since it's built entirely from the --accent/--border/--surface tokens.
   !important is deliberate here: this is a reusable component dropped
   into modals that already carry their own ambient "label{display:block;
   text-transform:uppercase;font-size:11px;...}" field-label rules (e.g.
   .ap-modal label, .modal label) — those are scoped with a class+element
   selector, which beats a bare .hb-checkbox class on specificity alone,
   so without !important a checkbox label silently reverts to a stacked,
   uppercase field-label — exactly the "branching"/broken layout this
   fixes. Every property a container's own "label{...}" rule is known to
   set is pinned here so the component renders identically everywhere. */
.hb-checkbox{
  display:inline-flex!important;flex-direction:row!important;align-items:center!important;
  gap:8px;cursor:pointer;user-select:none;position:relative;
  text-transform:none!important;letter-spacing:normal!important;
  font-size:13px!important;font-weight:500!important;color:var(--text)!important;
}
/* Margin is intentionally NOT forced !important above — call sites set
   their own spacing (e.g. style="margin-top:8px") via inline style, which
   already beats an ambient "label{margin-top:...}" rule on its own; only
   the properties that actually broke layout/appearance needed pinning. */
.hb-checkbox input{position:absolute;opacity:0;width:0;height:0;top:0;left:0}
.hb-checkbox .hb-box{
  position:relative;flex-shrink:0;width:17px;height:17px;border-radius:5px;
  border:1.5px solid var(--border);background:var(--surface);
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease);
}
.hb-checkbox .hb-box::after{
  content:'';position:absolute;left:5px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .15s var(--ease);
}
.hb-checkbox:hover .hb-box{border-color:var(--accent)}
.hb-checkbox input:checked+.hb-box{background:var(--accent);border-color:var(--accent)}
.hb-checkbox input:checked+.hb-box::after{transform:rotate(45deg) scale(1)}
.hb-checkbox input:focus-visible+.hb-box{box-shadow:0 0 0 3px var(--accent-r)}
.hb-checkbox input:active+.hb-box{transform:scale(.9)}
.hb-checkbox input:disabled+.hb-box{opacity:.5;cursor:not-allowed}
.hb-checkbox.disabled,.hb-checkbox:has(input:disabled){cursor:not-allowed;opacity:.6}

/* ── Collapsible tree section (progressive disclosure) ──────────────────────
   Used by the role-editor "tree" layout: a parent toggle whose child
   content animates open/closed via max-height (display:none can't
   transition; a generous max-height cap plus overflow:hidden gives a
   smooth reveal without measuring actual content height in JS). */
.hb-tree-section{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s var(--ease),opacity .2s var(--ease)}
.hb-tree-section.open{max-height:2000px;opacity:1}

/* ── Misc ────────────────────────────────────────────────────────────────── */
.hb-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:10.5px;font-weight:700}

/* ── Split-pane resize handle — shared by site_editor.html and
   scripts_editor.html's split-screen code panes (see split-panes.js).
   A thin draggable strip between adjacent flex panes; widens visually
   on hover/drag so it's easy to grab without taking up permanent space. */
.split-resizer{flex:0 0 5px;width:5px;cursor:col-resize;background:var(--border);position:relative;z-index:5}
.split-resizer::after{content:'';position:absolute;top:0;bottom:0;left:-3px;right:-3px}
.split-resizer:hover,.split-resizer.dragging{background:var(--accent)}

/* ── Pop-out (picture-in-picture) icon on a split-capable nav item — shown
   on hover, right side of the tab button (see split-panes.js popOutPane). */
.nav-item{position:relative}
.nav-item .popout-btn{
  display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;padding:2px;cursor:pointer;color:inherit;opacity:.65;border-radius:4px;
}
.nav-item .popout-btn:hover{opacity:1;background:rgba(127,127,127,.18)}
.nav-item:hover .popout-btn{display:flex}