/* Editors in the Heartysan look (on /ui/hs.css). Loaded LAST in every editor page, so it wins over each page's
   own <style>: the pages keep their layout code and old variable names; here they are pointed at the shared
   tokens and the controls get the shop's shapes. The editors follow the shop in one light theme — the old
   automatic dark mode is switched off (html:root:root outranks the pages' :root:not([data-theme]) blocks). */
html:root:root{
  --bg:var(--hs-ground); --panel:var(--hs-paper); --ink:var(--hs-ink); --muted:var(--hs-muted); --line:var(--hs-line);
  --accent:var(--hs-berry); --accent-ink:#fff; --accent-soft:var(--hs-blush); --warn:var(--hs-warn); --plate:#eceaf0;
  --f-display:var(--hs-f-head); --f-body:var(--hs-f-body); --f-mono:var(--hs-f-body);
  color-scheme:light;
}
body{background:var(--hs-ground);color:var(--hs-ink);font-family:var(--hs-f-body);-webkit-font-smoothing:antialiased}

/* ---------- top bar: the same brand as the shop, the editors as tabs ---------- */
.hs-appbar{position:sticky;top:0;z-index:40;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:18px;height:58px;margin:0;padding:0 18px;background:var(--hs-paper);box-shadow:0 1px 0 var(--hs-line)}
.hs-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.hs-logo .wm{display:block;height:30px;width:auto;margin-top:6px}   /* the wordmark has room for the y's tail below the line */
.hs-logo .mk{display:none;height:24px;width:auto}
.hs-tools{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;height:100%;align-items:stretch}
.hs-tools::-webkit-scrollbar{display:none}
.hs-tools a{display:flex;align-items:center;gap:7px;padding:0 12px;font-size:14px;font-weight:500;color:var(--hs-muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.hs-tools a svg{width:18px;height:18px}
.hs-tools a:hover{color:var(--hs-ink)}
.hs-tools a[aria-current="page"]{color:var(--hs-ink);border-bottom-color:var(--hs-berry)}
.hs-right{display:flex;gap:4px;align-items:center;flex:none}
.hs-right a{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--hs-pill);font-size:14px;font-weight:500;color:var(--hs-ink);text-decoration:none;transition:background .15s}
.hs-right a:hover{background:var(--hs-ground)}
.hs-right a[aria-current="page"]{background:var(--hs-blush);color:var(--hs-berry-ink)}
.hs-right svg{width:18px;height:18px}
.hs-right .langpick{color:var(--hs-ink);margin-left:2px}
@media (max-width:1480px){.hs-right .hs-hide-s{display:none}.hs-right a{padding:8px 10px}}   /* icons only, so the editor tabs keep their room in every language */
@media (max-width:760px){.hs-appbar{gap:8px;padding:0 10px}.hs-logo .wm{display:none}.hs-logo .mk{display:block}.hs-right .hs-hide-s{display:none}.hs-right .hs-shop{display:none}.hs-tools a{padding:0 9px}}
nav.nav{display:none!important}
.hs-buybar .hs-back{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--hs-muted);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-buybar .hs-back:hover{color:var(--hs-ink);text-decoration:underline}
.hs-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--hs-berry);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}   /* the old pill nav, replaced by the top bar */

/* ---------- workspace ---------- */
header:not(.hs-appbar) h1{font:700 26px/1.1 var(--hs-f-head);letter-spacing:0;margin:0}
header:not(.hs-appbar) p{color:var(--hs-muted)}
.card{background:var(--hs-paper);border:1px solid var(--hs-line);border-radius:var(--hs-r);box-shadow:none}
.card h2,h3.sub{font:600 14px/1.3 var(--hs-f-body)!important;letter-spacing:0!important;text-transform:none!important;color:var(--hs-ink)!important}
.stat dt{text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
.stage{background:var(--plate);border-color:var(--hs-line)!important;border-radius:var(--hs-r)!important}

/* ---------- controls: the shop's shapes ---------- */
input[type=number],input[type=search],input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=datetime-local],select,textarea{
  background:var(--hs-paper);border:1.5px solid var(--hs-line-strong);border-radius:var(--hs-r-sm);color:var(--hs-ink);font-family:var(--hs-f-body);font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
input:hover:not([type=range]):not([type=checkbox]):not([type=radio]),select:hover,textarea:hover{border-color:var(--hs-muted)}
input:focus:not([type=range]):not([type=checkbox]):not([type=radio]),select:focus,textarea:focus{outline:none;border-color:var(--hs-berry);box-shadow:0 0 0 3px var(--hs-blush)}
input[type=range],input[type=checkbox],input[type=radio]{accent-color:var(--hs-berry)}
.tabs button,.seg button,.btn,button.btn{background:var(--hs-paper);border:1.5px solid var(--hs-line-strong);border-radius:var(--hs-r-sm);color:var(--hs-ink);transition:border-color .15s,background .15s,color .15s;cursor:pointer}
.tabs button:hover,.seg button:hover,.btn:hover{border-color:var(--hs-muted);background:var(--hs-paper)}
.tabs button[aria-pressed="true"],.seg button[aria-pressed="true"],.tabs button[aria-selected="true"]{background:var(--hs-blush);border-color:var(--hs-berry);color:var(--hs-berry-ink);box-shadow:inset 0 0 0 .5px var(--hs-berry)}
.btn.primary,button.primary{background:var(--hs-berry);border-color:var(--hs-berry);color:#fff;border-radius:var(--hs-pill);font-weight:600}
.btn.primary:hover,button.primary:hover{background:var(--hs-berry-hover);border-color:var(--hs-berry-hover)}
.btn:disabled,button:disabled{opacity:.5;cursor:default}
.drop{border-color:var(--hs-line-strong)!important;border-radius:var(--hs-r)!important;background:var(--hs-ground)}
.drop.over,.drop:hover{border-color:var(--hs-berry)!important}
.res{background:var(--hs-paper)!important;border-color:var(--hs-line)!important}
.res[aria-pressed="true"]{background:var(--hs-blush)!important;border-color:var(--hs-berry)!important}
:focus-visible{outline:2px solid var(--hs-berry)!important;outline-offset:2px}
.status.err{color:var(--hs-berry-hover)}