/* ==========================================================================
   SCRIPTATRON 1.61 — HORIZON DESK  (shell)

   Skyline 48px (top, no navigation) · Stage (full width, 32px gutters,
   zones split by hairlines + 28px air) · Instrument Strip 44px (bottom edge)
   · Waypoint Dock (floating bottom-centre, the only navigation) · Sheet
   (right, 480px) for settings.

   No left rail. No right rail. No top nav bar. No underlines.
   Loaded last; consumes tokens.css only.
   ========================================================================== */

/* ---------------------------------------------------------------- base -- */
html, body { background: var(--canvas); }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01";
  color: var(--text);
}
body::after { display: none !important; }
.mono, code, kbd, pre, .console,
input[type=number] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }

/* Underlines are banned product-wide; links are emerald text. */
a, .linky, .linkish, .linklike { text-decoration: none !important; }
a:hover, .linky:hover, .linkish:hover { color: var(--accent-400); }

/* The 1.60 signal ribbon and rail underline: deleted, no replacement. */
.shell::before { content: none !important; display: none !important; height: 0 !important; }
.pin.on::after, .pin.on::before { content: none !important; display: none !important; }

/* ------------------------------------------------------------- buttons -- */
button.btn-primary, a.btn-primary, .btn-primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  min-height: 36px;
}
button.btn-primary:hover:not(:disabled), a.btn-primary:hover { background: #33EBA3 !important; }
button.btn-quiet, a.btn-quiet, .btn-quiet,
button.btn-ghost, a.btn-ghost, .btn-ghost {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow: none !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500;
}
button.btn-quiet:hover:not(:disabled), a.btn-quiet:hover,
button.btn-ghost:hover:not(:disabled), a.btn-ghost:hover {
  background: var(--raised-2) !important;
  border-color: var(--grey-600) !important;
}
button.btn-danger, a.btn-danger, .btn-danger {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  border-radius: var(--r-sm) !important;
}
button.btn-danger:hover:not(:disabled), a.btn-danger:hover {
  border-color: var(--danger-line) !important;
  background: var(--danger-wash) !important;
}
.btn-small, a.btn-small { min-height: 30px; font-size: 12.5px; }

/* --------------------------------------------------------- form fields -- */
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=url], input:not([type]),
select, textarea {
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  box-shadow: none;
}
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=url], input:not([type]), select {
  min-height: 38px;
  padding: 0 12px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) !important;
  outline: none;
}
input[type=checkbox] {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid var(--hairline-strong);
  background: var(--canvas);
}
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { border-color: var(--accent-ink) !important; }
input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--accent), var(--accent)) 0 / var(--fill, 100%) 100% no-repeat, var(--hairline-strong);
}
.field label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Cards outside the Outlook stage stay, but flat: one surface step and a
   hairline. No gradient plates, no shadows. */
.card {
  background: var(--stage) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
.card > h3, .card > h2 { font-family: var(--font-display); font-weight: 600; }

/* Thin scrollbars on the sanctioned scrollers. */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================== SKYLINE */
.hz-skyline {
  flex: none;
  position: relative;
  z-index: var(--z-topbar);
  height: var(--skyline-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.hz-skyline .sp { flex: 1; }
.hz-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text) !important;
  min-width: 0;
}
.hz-diamond {
  flex: none;
  width: 9px; height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
}
.hz-brand .wordmark {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
}
.hz-crumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(46vw, 640px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.hz-health {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.hz-health i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
}
.hz-health[data-state="busy"] i { background: var(--warn); }
.hz-health[data-state="bad"] i { background: var(--danger); }
.hz-health[data-state="bad"] { color: var(--danger); }

.hz-who { position: relative; }
.hz-who > summary { list-style: none; }
.hz-who > summary::-webkit-details-marker { display: none; }
.hz-avatar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 4px 2px 2px;
  border-radius: var(--r-dock);
  color: var(--text-2);
}
.hz-avatar:hover { color: var(--text); }
.hz-avatar-dot {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.hz-who[open] .hz-avatar-dot { border-color: var(--accent); }
.hz-caret { font-size: 11px; }
.hz-menu.topnav {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: var(--z-menu) !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 232px;
  padding: 6px !important;
  background: var(--raised) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-3) !important;
}
.hz-menu-who {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.hz-menu-who .role {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); padding: 1px 6px; border-radius: 4px;
  background: var(--accent-wash); border: 0;
}
.hz-menu a.link, .hz-menu .hz-menu-row {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font: 500 13.5px/1 var(--font-sans) !important;
  text-align: left;
  cursor: pointer;
}
.hz-menu a.link:hover, .hz-menu .hz-menu-row:hover { background: var(--raised-2) !important; }
.hz-menu a.link.on { color: var(--accent) !important; }
.hz-menu a.link.out { color: var(--text-2) !important; margin-top: 4px; border-top: 1px solid var(--hairline) !important; border-radius: 0 0 var(--r-sm) var(--r-sm) !important; }
.hz-menu a.link.out:hover { color: var(--danger) !important; }

/* ================================================================ SHELL */
@media (min-width: 768px) {
  .shell {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--canvas);
  }
  .main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  body.hz-desk .work {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }
}
.hz-vault { display: none !important; }
/* Belt and braces: whatever older markup exists, there is no rail column. */
.side { display: none !important; width: 0 !important; flex: 0 0 0 !important; }

/* ================================================================ STAGE */
/* One right edge for every surface: content ends `--gutter` from the
   viewport's right side. The Stage's page scrollbar (and a list's own
   scrollbar) sits inside that gutter instead of pushing content left;
   horizon.js measures the real widths into --hz-*-sb. */
body.hz-desk { --gutter-r: calc(var(--gutter) - var(--hz-stage-sb, 0px)); }
body.hz-desk .work {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Room for the Strip + the floating Dock, so the last zone never sits
     under them. */
  padding: 0 0 calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 28px) !important;
  scroll-padding-bottom: calc(var(--strip-h) + var(--dock-h) + 40px);
}
body.hz-desk .work > .head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px var(--gutter-r) 4px var(--gutter) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.hz-desk .work > .head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
body.hz-desk .work > .head p { color: var(--text-2); font-size: 13px; margin-top: 2px; }
/* The Outlook stage starts with its own zone header; Skyline names it. */
body[data-hz-view="outlook"] .work > .head { display: none !important; }
/* Back to Tools from any tool, on every screen size. */
body[data-hz-view="run"] #toolBack,
body[data-hz-view="convert"] #toolBack,
body[data-hz-view="forwardban"] #toolBack,
body[data-hz-view="cleaner"] #toolBack,
body[data-hz-view="editor"] #toolBack { display: inline-flex !important; }
.headback {
  width: auto !important;
  height: 32px !important;
  padding: 0 12px 0 8px !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  align-items: center;
  gap: 4px;
}
.headback::after { content: "Tools"; font-weight: 500; }
.headback:hover { color: var(--text) !important; border-color: var(--grey-600) !important; }

body.hz-desk .mailview,
body.hz-desk #runView,
body.hz-desk #editorView {
  background: transparent !important;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
body.hz-desk .mailview .card,
body.hz-desk #editorView .card { margin-left: 0; margin-right: 0; max-width: none; }
body.hz-desk .mailview:not(#mailView) > .card:first-child,
body.hz-desk #editorView > .card:first-child { margin-top: 16px; }

/* Run view: form | output, flat on the stage, split by a hairline. */
body.hz-desk #runView { padding-top: 16px; gap: 0; }
body.hz-desk .pane-form { border-right: 1px solid var(--hairline) !important; background: transparent; padding-left: 0; }
body.hz-desk .pane-out { background: var(--stage) !important; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
body.hz-desk .console { font-size: 12.5px; }

/* Recent runs: a single row of runs under the tool, not a rail list. */
body.hz-desk #runs.runs {
  flex: none;
  max-height: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px var(--gutter-r) 0 var(--gutter);
  margin-top: 16px;
  border-top: 1px solid var(--hairline);
  overflow: visible;
}
body.hz-desk #runs .eyebrow {
  width: 100%;
  padding: 0 0 4px !important;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
body.hz-desk #runs .run {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--stage);
  font-size: 12.5px;
  cursor: pointer;
}
body.hz-desk #runs .run:hover { background: var(--raised); }
body.hz-desk #runs .run .t { font-family: var(--font-mono); color: var(--text-3); font-size: 11.5px; }
body.hz-desk #runs .run .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* -------------------------------------------------------------- Tools stage */
body.hz-desk #toolsScreen { padding-top: 8px; padding-bottom: 24px; }
.hz-zone-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--hairline);
}
.hz-zone-head .sp { flex: 1; }
.hz-zone-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--text);
}
.hz-zone-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.hz-tools-filter { width: 280px !important; min-height: 34px !important; }
body.hz-desk[data-hz-view="tools"] .work > .head { display: none !important; }
#toolsScreen .eyebrow.toolgroup {
  padding: 22px 0 8px !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--text-3);
}
#toolsScreen .toolcards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 0;
  margin: 0;
}
#toolsScreen .toolcard {
  min-height: 56px;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 10px 4px !important;
  grid-template-columns: 28px minmax(0, 1fr) 14px !important;
}
#toolsScreen .toolcard:hover { background: var(--stage) !important; }
#toolsScreen .toolcard[hidden] { display: none !important; }
#toolsScreen .tc-ico { width: 28px !important; height: 28px !important; background: transparent !important; color: var(--accent); }
#toolsScreen .tc-txt b { font-weight: 600; font-size: 14px; }
#toolsScreen .tc-txt span { color: var(--text-2); font-size: 12.5px; }
#toolsScreen .tc-go { color: var(--text-3); }
.hz-addscript {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  min-height: 52px;
  padding: 0 16px !important;
  border: 1px dashed var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font: 600 13px var(--font-sans) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.hz-addscript span { color: var(--accent); font-size: 18px; }
.hz-addscript:hover { color: var(--text) !important; border-color: var(--accent-line) !important; }

/* -------------------------------------------------------------- Mail stage */
body.hz-desk #mailRail.hz-chiprow {
  flex: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px var(--gutter-r) 14px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
body.hz-desk #mailRail.hidden { display: none !important; }
#mailRail .mailfolds {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}
#mailRail .eyebrow {
  padding: 0 4px 0 0 !important;
  font-size: 11px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
#mailRail .eyebrow:not(:first-child) { margin-left: 12px; padding-left: 16px !important; border-left: 1px solid var(--hairline); }
#mailRail .mailacc, #mailRail .mailfold, #mailRail .mailadd {
  width: auto !important;
  height: 30px;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--hairline) !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font-size: 12.5px !important;
  gap: 6px !important;
  box-shadow: none !important;
}
#mailRail .mailacc.on, #mailRail .mailfold.on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
#mailRail .mailacc.on .ma-tag, #mailRail .mailfold.on .mf-ico { color: var(--accent-ink) !important; }
#mailRail .mailadd { border-style: dashed !important; }
#mailRail .ma-dot { display: none; }
#mailRail .ma-tag {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  color: var(--accent); background: transparent; border: 0; padding: 0;
}
#mailRail .railgrip { display: none !important; }
#mailRail .rail-foot {
  display: flex !important;
  align-items: center;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin-left: auto;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#mailRail .railacts { display: flex; gap: 4px; flex-wrap: wrap; }
#mailRail .railact {
  width: auto !important; min-height: 30px; padding: 0 10px !important;
  border: 0 !important; background: transparent !important; color: var(--text-2) !important;
  font-size: 12.5px !important; box-shadow: none !important; border-radius: var(--r-sm) !important;
}
#mailRail .railact:hover { color: var(--text) !important; background: var(--raised) !important; }
#mailRail .railact.danger { color: var(--danger) !important; }
#mailRail .railact-go { display: none; }
#mailRail .mailpref { font-size: 12.5px; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; }
body.hz-desk #mailView { padding-left: 0; padding-right: 0; }
body.hz-desk #mailView .mlist, body.hz-desk #mailView .mcol { background: transparent; }
@media (min-width: 768px) {
  body.hz-desk #mailView .mailbar { padding-left: var(--gutter) !important; padding-right: var(--gutter-r) !important; }
  body.hz-desk #mailView .mcol > :not(.mailbar) { margin-left: var(--gutter) !important; margin-right: var(--gutter-r) !important; }
  body.hz-desk #mailView .mlist { border-top: 1px solid var(--hairline); }
  body.hz-desk #mailView .mrow { padding-left: 8px !important; padding-right: 8px !important; border-radius: 0 !important; }
}

/* ================================================== WAYPOINT DOCK (desk) */
.hz-dock {
  position: fixed;
  z-index: var(--z-dock);
  left: 50%;
  bottom: calc(var(--strip-h) + var(--dock-float) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100vw - 48px);
  height: var(--dock-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-dock);
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / .75), 0 2px 6px rgb(0 0 0 / .4);
  transition: bottom var(--dur-2) var(--ease-out);
}
body.hz-tray-open .hz-dock { bottom: calc(var(--strip-h) + var(--tray-h) + var(--dock-float)); }
.hz-dock #pinned.pinned {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  position: relative;
  z-index: 1;
}
.hz-dock .railgrip { display: none !important; }
/* Five waypoints on the dock; the rest live under More. Order is the
   spec's, set here so the DOM (and the phone bar) keep their own order. */
.hz-dock .pin[data-view="mail"]    { order: 1; }
.hz-dock .pin[data-view="outlook"] { order: 2; }
.hz-dock .pin[data-view="tools"]   { order: 3; }
.hz-dock .pin[data-view="orders"]  { order: 4; }
.hz-dock .pin[data-view="resell"]  { order: 5; }
.hz-dock .pin[data-view="discord"],
.hz-dock .pin[data-view="apppw"],
.hz-dock .pin[data-view="ask"],
.hz-dock .pin[data-view="server"],
.hz-dock .pin[data-view="settings"],
.hz-dock .pin.hidden { display: none !important; }

.hz-dock .pin, .hz-more {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  width: auto !important;
  height: 48px;
  min-height: 48px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--r-dock) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-2) !important;
  font: 600 13px/1 var(--font-sans) !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.hz-dock .pin:hover:not(.on), .hz-more:hover:not(.on) {
  background: var(--raised-2) !important;
  color: var(--text) !important;
}
.hz-dock .pin.on, .hz-more.on {
  color: var(--accent-ink) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.hz-dock .pin-ico, .hz-more .pin-ico {
  width: 20px !important; height: 20px !important;
  display: grid; place-items: center;
  background: transparent !important;
  color: inherit !important;
  opacity: 1 !important;
}
.hz-dock .pin-ico svg, .hz-more .pin-ico svg { width: 20px; height: 20px; }
.hz-dock .pin.on .pin-ico { color: var(--accent-ink) !important; }
.hz-dock .pin-nm { flex: none !important; overflow: visible; }
.hz-dock .pin-svg { width: 18px; height: 18px; opacity: .8; }
.hz-dock .pin-badge {
  position: static;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--raised-2);
  color: var(--text);
  font: 600 10.5px/18px var(--font-mono);
  text-align: center;
}
.hz-dock .pin.on .pin-badge { background: var(--accent-ink); color: var(--accent); }
/* Needs-you badge: a dot inside the pill with room around it, never on a
   border (the 1.60 pin fault). */
.hz-dock .pin.hz-needs { padding-left: 28px !important; }
.hz-dock .pin.hz-needs::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--warn);
}
.hz-more.hz-has-badge::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn);
}

/* The one active signal: a solid emerald pill that travels between
   waypoints (spec motion 2). */
.hz-dock-pill {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  width: 0; height: 48px;
  border-radius: var(--r-dock);
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.hz-dock.hz-pill-ready .hz-dock-pill {
  transition: transform var(--dur-3) var(--ease-spring),
              width var(--dur-3) var(--ease-spring),
              opacity var(--dur-1) linear;
}

.hz-moremenu {
  position: fixed;
  z-index: var(--z-menu);
  min-width: 220px;
  padding: 6px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
}
.hz-mm-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font: 500 13.5px/1 var(--font-sans) !important;
  text-align: left;
  cursor: pointer;
}
.hz-mm-row:hover, .hz-mm-row:focus-visible { background: var(--raised-2) !important; outline: none; }
.hz-mm-row.on { color: var(--accent) !important; }
/* Both menus: content starts at the left, icons sit in a fixed 20px well,
   so every label begins on the same x whether or not its icon is wide. */
.hz-mm-row, .hz-menu a.link, .hz-menu .hz-menu-row {
  justify-content: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
  text-decoration: none !important;
}
.hz-mm-row .pin-ico, .hz-menu .hz-ic {
  flex: 0 0 20px;
  width: 20px !important; height: 20px !important;
  margin: 0 !important;
  display: grid; place-items: center;
  color: var(--text-2);
  background: transparent !important;
}
.hz-mm-row .pin-ico svg, .hz-mm-row .pin-ico img, .hz-menu .hz-ic svg { width: 18px !important; height: 18px !important; }
.hz-mm-row.on .pin-ico, .hz-menu a.link.on .hz-ic { color: var(--accent); }
.hz-menu a.link.out .hz-ic { color: inherit; }
.hz-mm-row > span:not(.pin-ico):not(.hz-mm-badge) { flex: 1 1 auto; text-align: left; }
.hz-mm-badge {
  margin-left: auto;
  font: 600 11px var(--font-mono);
  color: var(--warn);
}

/* ===================================================== INSTRUMENT STRIP */
.hz-strip {
  position: fixed;
  z-index: var(--z-strip);
  left: 0; right: 0; bottom: 0;
  height: calc(var(--strip-h) + env(safe-area-inset-bottom));
  padding: 0 var(--gutter) env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
}
.hz-strip .sp { flex: 1; }
.hz-ins {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid var(--hairline);
  height: 20px;
}
.hz-ins:first-child { padding-left: 0; border-left: 0; }
.hz-ins:empty { display: none; }
.hz-ins b {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hz-ins-live b { color: var(--accent); }
.hz-ins-live #hzLiveText { color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.hz-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: hz-breathe 1.6s ease-in-out infinite;
}
.hz-ins-live[data-state="idle"] .hz-pulse { background: var(--accent-dim); }
.hz-ins-live[data-state="working"] .hz-pulse { background: var(--info); }
.hz-ins-live[data-state="needs"] .hz-pulse { background: var(--warn); }
.hz-ins-counts { gap: 14px; }
.hz-c { display: inline-flex; align-items: baseline; gap: 6px; }
.hz-c span { color: var(--text); }
.hz-c.ok span { color: var(--accent-dim); }
.hz-c.warn span, .hz-c.warn b { color: var(--warn); }
.hz-c.bad span, .hz-c.bad b { color: var(--danger); }
.hz-c.info span { color: var(--info); }
.hz-ins-spend span { color: var(--text); }
.hz-ins-act { flex: 0 1 auto; min-width: 0; }
.hz-act-txt { overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.hz-expand {
  flex: none;
  height: 28px;
  min-height: 28px !important;
  padding: 0 10px !important;
  margin-left: 12px;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-2) !important;
  font: 500 12px var(--font-mono) !important;
  cursor: pointer;
}
.hz-expand:hover { color: var(--text) !important; border-color: var(--hairline-strong) !important; }

/* Tray: opens upward over the Stage; the Stage never reflows. */
.hz-tray {
  position: fixed;
  z-index: var(--z-tray);
  left: 0; right: 0;
  bottom: calc(var(--strip-h) + env(safe-area-inset-bottom));
  height: var(--tray-h);
  padding: 16px var(--gutter);
  background: var(--raised);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -16px 40px -20px rgb(0 0 0 / .8);
  overflow: hidden;
  animation: hz-rise var(--dur-2) var(--ease-out);
}
.hz-tray[hidden] { display: none; }
.hz-tray-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 24px;
  height: 100%;
}
.hz-tray-events:empty { display: none; }
.hz-tray-grid:has(.hz-tray-events:empty) { grid-template-columns: 1fr; }
.hz-tray .om-si-rail { height: 100%; position: static !important; width: auto !important; }
.hz-tray .om-si-rail-shell {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.3fr) minmax(240px, 1.6fr) minmax(160px, 1fr);
  gap: 0 !important;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hz-tray .om-si-rail-sec {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--hairline) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hz-tray .om-si-rail-sec:first-child { padding-left: 0 !important; border-left: 0 !important; }
.hz-tray .om-si-rail-sec h4 {
  margin: 0;
  font: 600 11px var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hz-tray .om-si-counts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px !important;
}
.hz-tray .om-si-count {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px !important;
  border-radius: var(--r-sm) !important;
  background: var(--raised-2) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hz-tray .om-si-count .v { font: 500 18px var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.hz-tray .om-si-count .l { font-size: 11px; color: var(--text-3); }
.hz-tray .om-si-prog { height: 3px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.hz-tray .om-si-prog i { display: block; height: 100%; background: var(--accent-dim); }
.hz-tray .om-si-activity { overflow: hidden; }
.hz-tray .om-si-activity-head { display: flex; align-items: center; gap: 8px; }
.hz-tray .om-si-activity-count { font: 500 11px var(--font-mono); color: var(--text-3); }
.hz-tray .om-si-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
  padding-right: 4px;
}
.hz-tray .om-si-log-line { padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.hz-tray .om-si-log-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.hz-tray .om-si-log-top .kind { color: var(--text); font-weight: 500; }
.hz-tray .om-si-log-top .ts { font-family: var(--font-mono); color: var(--text-3); font-size: 11px; }
.hz-tray .om-si-log-line.ok .kind { color: var(--accent-dim); }
.hz-tray .om-si-log-line.err .kind { color: var(--danger); }
.hz-tray .om-si-log-line.warn .kind { color: var(--warn); }
.hz-tray .om-si-log-detail { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-tray .om-si-log-more {
  align-self: flex-start;
  min-height: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important;
  color: var(--accent) !important; font-size: 12px !important; cursor: pointer;
}
.hz-tray .om-si-live-email { font-family: var(--font-mono); font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.hz-tray .om-si-live-step, .hz-tray .om-si-live-idle { font-size: 13px; color: var(--text); }
.hz-tray .om-si-live-meta, .hz-tray .subline, .hz-tray .caps { font-size: 12px; color: var(--text-2); }
.hz-tray .bal { font: 500 18px var(--font-mono); color: var(--text); }
.hz-tray-events { min-height: 0; overflow-y: auto; border-left: 1px solid var(--hairline); padding-left: 20px; }
.hz-tray-events .card.hz-events {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.hz-tray-events .card.hz-events > h3 {
  font: 600 11px var(--font-sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 8px;
}
.hz-tray-events .card.hz-events > .sub { font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--hairline); margin: 0; }

/* ================================================================ SHEET */
.hz-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet-scrim);
  background: var(--scrim);
}
.hz-sheet-scrim[hidden], .hz-sheet[hidden] { display: none !important; }
.hz-sheet {
  position: fixed;
  z-index: var(--z-sheet);
  top: 0; right: 0; bottom: 0;
  width: min(var(--sheet-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border-left: 1px solid var(--hairline);
  border-radius: var(--r-md) 0 0 var(--r-md);
  box-shadow: -24px 0 60px -30px rgb(0 0 0 / .9);
  transform: translateX(24px);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.hz-sheet.in { transform: none; opacity: 1; }
.hz-sheet:focus { outline: none; }
.hz-sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 var(--gutter) 0 24px;
  border-bottom: 1px solid var(--hairline);
}
.hz-sheet-head h3 { flex: 1; margin: 0; font: 600 18px var(--font-display); letter-spacing: -0.01em; }
.hz-sheet-back { display: none !important; }
.hz-sheet-x {
  width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important;
  border: 0 !important; border-radius: var(--r-sm) !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--text-2) !important; font-size: 20px !important; cursor: pointer;
}
.hz-sheet-x:hover { background: var(--raised-2) !important; color: var(--text) !important; }
.hz-sheet-tabs {
  flex: none;
  display: flex;
  gap: 20px;
  padding: 0 var(--gutter) 0 24px;
  border-bottom: 1px solid var(--hairline);
}
.hz-tab {
  position: relative;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-2) !important;
  font: 500 13px var(--font-sans) !important;
  cursor: pointer;
}
.hz-tab:hover { color: var(--text) !important; }
.hz-tab.on { color: var(--accent) !important; }
.hz-tab.on::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 8px;
  width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: var(--accent);
}
.hz-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 24px calc(var(--gutter) - var(--hz-sheet-sb, 0px)) 24px 24px;
}
.hz-pane[hidden] { display: none !important; }
.hz-pane > .card, .hz-pane .card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  max-width: none;
}
.hz-pane > .card + .card { padding-top: 28px !important; border-top: 1px solid var(--hairline) !important; }
.hz-pane .card > h3 { font: 600 15px var(--font-display); margin-bottom: 4px; }
.hz-pane .card > summary { list-style: none; cursor: pointer; }
.hz-pane .card > summary::-webkit-details-marker { display: none; }
.hz-pane .cap-add-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
.hz-pane .field input:not([type="checkbox"]):not([type="range"]):not([type="number"]):not([type="file"]),
.hz-pane .field textarea,
.hz-pane .field select { width: 100% !important; max-width: none !important; box-sizing: border-box; }
.hz-pane details.hz-adv-host > summary { display: none; }
.hz-pane details.om-adv:not(.hz-adv-host) > summary {
  font-size: 13px; color: var(--accent); cursor: pointer; padding: 6px 0;
}
/* The only dashed border in the product: the CSV drop zone. */
.hz-pane .om-drop {
  border: 1px dashed var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  background: var(--canvas) !important;
  padding: 14px !important;
}
.hz-pane .om-drop.om-drop-on { border-color: var(--accent) !important; }
.hz-pane .om-status-strip {
  display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important;
  padding: 12px 0 !important; background: transparent !important; border: 0 !important;
}
.hz-pane .om-status-strip > div { font-size: 13px; color: var(--text-2); }
.hz-pane .om-status-strip b { color: var(--text-3); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.hz-pane .om-status-strip .v { color: var(--text); font-family: var(--font-mono); font-size: 12.5px; }
.hz-sheet-foot {
  flex: none;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)) 24px;
  border-top: 1px solid var(--hairline);
  background: var(--raised);
}
.hz-sheet-foot[hidden], .hz-foot-set[hidden] { display: none !important; }
.hz-sheet-foot .actions { margin: 0 !important; display: flex; gap: 10px; flex-wrap: wrap; }

/* ===================================================== CSV / file stage */
body.hz-desk .filepeek.hz-peek {
  top: var(--skyline-h) !important;
  bottom: calc(var(--strip-h) + env(safe-area-inset-bottom)) !important;
  left: 0 !important; right: 0 !important;
  z-index: var(--z-peek) !important;
  background: var(--canvas) !important;
  backdrop-filter: none !important;
  animation: hz-fade var(--dur-2) var(--ease-out);
}
body.hz-page .filepeek, body.hz-desk .filepeek:not(.hz-peek) { background: var(--canvas) !important; }
.filepeek .fp-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 14px !important;
  padding: 12px var(--gutter) !important;
  background: var(--canvas) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.filepeek .fp-kind {
  background: transparent !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--teal) !important;
  border-radius: var(--r-sm) !important;
}
.filepeek .fp-name { font: 600 16px var(--font-display) !important; color: var(--text) !important; max-width: 46vw; }
.filepeek .fp-meta { font: 400 12px var(--font-mono) !important; color: var(--text-2) !important; }
.filepeek [data-fp="copy"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
.filepeek .hz-peek-back {
  order: -1;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px 0 8px !important;
  margin: 0 !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font: 500 13px var(--font-sans) !important;
  cursor: pointer;
}
.filepeek .hz-peek-back:hover { color: var(--text) !important; }
.filepeek .fp-body { padding: 16px var(--gutter) 96px !important; place-items: start stretch !important; }
.filepeek .fp-sheet {
  max-width: none !important;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background: var(--stage) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
.filepeek .fp-sheet table { border-collapse: separate; border-spacing: 0; width: 100%; }
.filepeek .fp-sheet th {
  position: sticky; top: 0; z-index: 1;
  background: var(--raised) !important;
  font: 600 11px var(--font-sans) !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal) !important;
  border-bottom: 1px solid var(--hairline) !important;
  height: 34px;
  padding: 0 14px !important;
}
.filepeek .fp-sheet td {
  font: 400 12.5px var(--font-mono) !important;
  height: 32px;
  padding: 0 14px !important;
  border-bottom: 1px solid var(--hairline) !important;
  background: transparent;
  color: var(--text);
}
.filepeek .fp-sheet .rn {
  position: sticky; left: 0; z-index: 1;
  background: var(--stage) !important;
  color: var(--text-3) !important;
  text-align: right;
  width: 48px;
  border-right: 1px solid var(--hairline) !important;
}
.filepeek .fp-sheet th.rn { z-index: 2; background: var(--raised) !important; }
/* ST-192 selection, in desk colours: row = accent 8%, column = teal 8%. */
.filepeek .fp-sheet th[data-fp-col]:hover { color: var(--text) !important; background: var(--raised-2) !important; }
.filepeek .fp-sheet th[data-fp-col]:hover::after { content: " ▾ Copy column"; color: var(--text-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
.filepeek .fp-sheet td.rn[data-fp-row]:hover { color: var(--accent) !important; background: var(--raised) !important; }
.filepeek .fp-sheet tr.fp-sel-row td,
.filepeek .fp-sheet td.fp-sel-row { background: color-mix(in srgb, var(--accent) 8%, transparent) !important; }
.filepeek .fp-sheet tr.fp-sel-row td.rn,
.filepeek .fp-sheet td.fp-sel-row.rn {
  background: color-mix(in srgb, var(--accent) 14%, var(--stage)) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.filepeek .fp-sheet td.fp-sel-col { background: color-mix(in srgb, var(--teal) 8%, transparent) !important; }
.filepeek .fp-sheet th.fp-sel-head {
  background: color-mix(in srgb, var(--teal) 14%, var(--raised)) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.filepeek .fp-read { font-family: var(--font-mono) !important; }

/* ================================================================ TOAST */
.hz-toast {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 14px);
  transform: translate(-50%, 8px);
  padding: 10px 16px;
  background: var(--raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  font: 500 13px var(--font-sans);
  color: var(--text);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.hz-toast.show { opacity: 1; transform: translate(-50%, 0); }
body.hz-desk .toast {
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 14px) !important;
  transform: translateX(-50%);
  background: var(--raised) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-left: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-sans);
  animation: hz-fade var(--dur-2) var(--ease-out);
}
body.hz-desk .toast.bad { border-color: var(--danger-line) !important; color: var(--text); }
body.hz-desk .toast.toast-tr { left: auto !important; right: 18px !important; top: calc(var(--skyline-h) + 12px) !important; bottom: auto !important; transform: none; }

/* Modal cards on the desk palette. */
.modal { background: var(--scrim) !important; backdrop-filter: none !important; }
.modal-card {
  background: var(--raised) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-4) !important;
}

/* =============================================================== MOTION */
@keyframes hz-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hz-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hz-stage-in {
  from { opacity: 0; transform: translateX(var(--hz-from, 24px)); }
  to   { opacity: 1; transform: none; }
}
.hz-enter { animation: hz-stage-in var(--dur-2) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .hz-enter { animation: hz-fade 120ms linear both; }
  .hz-pulse { animation: none; }
  .hz-dock.hz-pill-ready .hz-dock-pill { transition: none; }
  .hz-sheet { transition: none; }
  .hz-tray { animation: none; }
}

/* ======================================================= ADMIN / OTHER */
body.hz-page .shell { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.hz-page .main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.hz-page .tabs { padding: 0 var(--gutter); border-bottom: 1px solid var(--hairline); background: var(--canvas); }
body.hz-page .tabs button { border-radius: 0 !important; box-shadow: none !important; }
body.hz-page .tabs button.on { color: var(--accent) !important; background: transparent !important; box-shadow: none !important; }
html.onphone-admin .hz-skyline { display: none !important; }

/* =========================================================== 768 – 1100 */
@media (max-width: 1100px) and (min-width: 768px) {
  .hz-crumb { display: none; }
  .hz-dock .pin, .hz-more { padding: 0 14px !important; }
  .hz-ins-act { display: none; }
  .hz-tray .om-si-rail-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-y: auto; }
  #toolsScreen .toolcards { grid-template-columns: 1fr; }
}

/* ============================================================== MOBILE */
@media (max-width: 767px) {
  .hz-skyline {
    position: sticky;
    top: 0;
    gap: 10px;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--skyline-h) + env(safe-area-inset-top));
  }
  .hz-brand { flex: none; }
  .hz-brand .wordmark { font-size: 15px !important; }
  .hz-crumb {
    position: static;
    transform: none;
    max-width: 30vw;
    font-size: 12.5px;
  }
  .hz-health .hz-health-word { font-size: 12px; }
  .hz-avatar-dot { width: 28px; height: 28px; }
  .hz-caret { display: none; }

  body.hz-desk .work {
    padding-bottom: calc(var(--strip-h) + var(--dock-h) + 24px + env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
  }
  body.hz-desk .work > .head {
    position: static !important;
    padding: 16px 16px 4px !important;
  }

  /* Grounded dock: a full-width bar, not a floating pill. Used when the
     phone layout (mobile.js tabbar) is not active, e.g. a narrow window. */
  .hz-dock {
    left: 0; right: 0;
    bottom: 0;
    transform: none;
    max-width: none;
    height: calc(var(--dock-h) + env(safe-area-inset-bottom));
    padding: 4px 8px env(safe-area-inset-bottom);
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--hairline);
    background: var(--canvas);
    box-shadow: none;
    justify-content: space-around;
  }
  body.hz-tray-open .hz-dock { bottom: 0; }
  .hz-dock #pinned.pinned { flex: 1; justify-content: space-around; }
  .hz-dock .pin[data-view="orders"], .hz-dock .pin[data-view="resell"] { display: none !important; }
  .hz-dock .pin, .hz-more {
    flex-direction: column;
    gap: 3px !important;
    height: 46px; min-height: 46px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  .hz-dock-pill { height: 46px; }

  .hz-strip {
    bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
    height: var(--strip-h);
    padding: 0 16px;
    font-size: 11.5px;
  }
  .hz-ins-spend, .hz-ins-act { display: none; }
  .hz-ins-live #hzLiveText { max-width: 34vw; }
  .hz-ins-counts { gap: 8px; }
  .hz-c b { font-size: 0; }
  .hz-c[class*=" "] b, .hz-c b { letter-spacing: 0; }
  .hz-c:nth-child(1) b::before { content: "Q"; font-size: 11px; }
  .hz-c:nth-child(2) b::before { content: "W"; font-size: 11px; }
  .hz-c:nth-child(3) b::before { content: "D"; font-size: 11px; }
  .hz-c:nth-child(4), .hz-c:nth-child(5) { display: none; }
  .hz-c.warn:nth-child(4), .hz-c.bad:nth-child(5) { display: inline-flex; }
  .hz-c:nth-child(4) b::before { content: "N"; font-size: 11px; }
  .hz-c:nth-child(5) b::before { content: "E"; font-size: 11px; }
  .hz-expand { font-size: 0 !important; width: 32px; padding: 0 !important; }
  .hz-expand span { font-size: 13px; }
  .hz-tray {
    bottom: calc(var(--strip-h) + var(--dock-h) + env(safe-area-inset-bottom));
    height: 60vh;
    border-radius: var(--r-md) var(--r-md) 0 0;
    overflow-y: auto;
  }
  .hz-tray-grid { grid-template-columns: 1fr !important; height: auto; }
  .hz-tray .om-si-rail-shell { grid-template-columns: 1fr !important; gap: 16px !important; height: auto; }
  .hz-tray .om-si-rail-sec { padding: 0 !important; border-left: 0 !important; }
  .hz-tray .om-si-log { max-height: 220px !important; }
  .hz-tray-events { border-left: 0; padding-left: 0; }

  /* Sheets go full-screen with Back in the Skyline position and a sticky
     footer for the actions. */
  .hz-sheet { width: 100vw; border-radius: 0; border-left: 0; }
  .hz-sheet-head { height: calc(var(--skyline-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .hz-sheet-back {
    display: inline-flex !important;
    min-height: 32px !important; padding: 0 8px !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--accent) !important; font: 500 14px var(--font-sans) !important;
  }
  .hz-sheet-head h3 { font-size: 16px; }
  .hz-sheet-x { display: none !important; }
  .hz-sheet-tabs { padding: 0 16px; overflow-x: auto; }
  .hz-sheet-body { padding: 20px 16px; }

  .hz-tools-filter { width: 100% !important; }
  .hz-tools-head { flex-wrap: wrap; }
  #toolsScreen .toolcards { grid-template-columns: 1fr; }

  body.hz-desk #mailRail.hz-chiprow {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 10px 16px;
  }
  #mailRail .mailfolds { flex-wrap: nowrap; }
  #mailRail .rail-foot { display: none !important; }

  body.hz-desk .filepeek.hz-peek {
    top: 0 !important;
    bottom: calc(var(--strip-h) + var(--dock-h) + env(safe-area-inset-bottom)) !important;
  }
  .filepeek .fp-bar { flex-wrap: wrap; padding: 10px 16px !important; padding-top: calc(10px + env(safe-area-inset-top)) !important; }
  .filepeek .fp-acts { order: 5; width: 100%; }
  .filepeek .fp-acts [data-fp="copy"] { flex: 1; }

  .hz-toast, body.hz-desk .toast {
    bottom: calc(var(--strip-h) + var(--dock-h) + 12px + env(safe-area-inset-bottom)) !important;
  }
}

/* The phone layout (mobile.js): its tab bar IS the grounded dock, so ours
   steps aside and the tab bar takes the desk's look. */
html.onphone .hz-dock { display: none !important; }
html.onphone .tabbar {
  height: calc(var(--dock-h) + env(safe-area-inset-bottom)) !important;
  background: var(--canvas) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--hairline) !important;
  padding: 4px 8px env(safe-area-inset-bottom) !important;
  gap: 4px;
  z-index: var(--z-dock) !important;
}
html.onphone .tabbar .tab {
  margin: 0;
  border-radius: var(--r-dock) !important;
  color: var(--text-2) !important;
  gap: 3px;
}
html.onphone .tabbar .tab.on {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}
html.onphone .tabbar .tab.on::before { content: none !important; display: none !important; }
html.onphone .tabbar .tab-nm { font: 600 11px var(--font-sans); }
html.onphone .tabbar .tab-badge { background: var(--warn); color: var(--accent-ink); }
html.onphone .work { padding-bottom: calc(var(--strip-h) + var(--dock-h) + 24px + env(safe-area-inset-bottom)) !important; background: var(--canvas) !important; }
html.onphone .work > .head { top: var(--skyline-h) !important; background: var(--canvas) !important; border-bottom: 0 !important; }
html.onphone .sheetup-card { background: var(--raised) !important; border-radius: var(--r-md) var(--r-md) 0 0 !important; }
html.onphone .sheetup-row.danger { color: var(--danger) !important; }


/* ST-195 mobile UX polish — WebView/TWA phone widths.
   Touch targets ≥44px, menus usable on 390, no horizontal overflow,
   dock/strip padding already reserved above; tighten leftovers.
   Overscroll: root blocks PTR; nested panes use contain so Backups
   / sheets / mail lists still scroll inside the WebView. */
@media (max-width: 767px) {
  html, body {
    overscroll-behavior-y: none;
  }
  .shell, .work, .hz-desk .work, #mailView, .mlist, .mread,
  .hz-sheet-body, .hz-pane {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .hz-sheet-body, .hz-pane {
    overflow-y: auto;
    min-height: 0;
  }
  body.hz-desk, body.hz-desk .shell {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* User / More menus: keep on-screen, readable rows */
  .hz-menu.topnav {
    min-width: min(232px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 16px) !important;
    right: 0 !important;
  }
  .hz-menu a.link, .hz-menu .hz-menu-row, .hz-mm-row {
    min-height: 44px !important;
  }
  .hz-avatar {
    min-height: 44px;
    min-width: 44px;
    padding: 6px !important;
    box-sizing: border-box;
  }
  .hz-avatar-dot { width: 32px; height: 32px; }
  .hz-moremenu {
    max-width: calc(100vw - 16px);
    min-width: min(220px, calc(100vw - 24px));
  }
  .hz-dock .pin, .hz-more {
    height: 48px !important;
    min-height: 48px !important;
    min-width: 44px;
  }
  .hz-sheet-back {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 12px !important;
  }
  .hz-expand {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Queue / tools / mail: readable type, no sideways bleed */
  #outlookView .om-si-email,
  #outlookView .om-acct-email,
  .mlist .from, .mlist .subj {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.hz-desk #toolsScreen,
  body.hz-desk #mailView,
  body.hz-desk #outlookView {
    max-width: 100%;
    overflow-x: hidden;
  }
}


/* ==========================================================================
   1.61.4 — SITEWIDE TIDY

   Every stage, every tab, one language: zones on the canvas split by a
   hairline and air, never a bordered box in a bordered box; buttons you can
   see; button rows that sit where the form ends instead of sticking to the
   bottom of the Stage under the Strip and Dock; Admin and extension pages on
   their own Horizon shell instead of the old dashboard frame.
   ========================================================================== */

/* ------------------------------------------------------- buttons (all) -- */
/* Secondary buttons were a 1px #2C3D34 line on #070B09: present, but barely.
   They sit on the raised surface now, with a border you can find. */
button.btn-quiet, a.btn-quiet, .btn-quiet,
button.btn-ghost, a.btn-ghost, .btn-ghost {
  background: var(--raised) !important;
  border-color: var(--grey-600) !important;
  color: #E6F2EC !important;
}
button.btn-quiet:hover:not(:disabled), a.btn-quiet:hover,
button.btn-ghost:hover:not(:disabled), a.btn-ghost:hover {
  background: var(--raised-2) !important;
  border-color: #557064 !important;
  color: #FFFFFF !important;
}
button.btn-danger, a.btn-danger, .btn-danger {
  background: var(--raised) !important;
  border-color: color-mix(in srgb, var(--danger) 38%, var(--raised)) !important;
}
:is(.btn-quiet, .btn-ghost, .btn-danger, .btn-primary):disabled,
:is(.btn-quiet, .btn-ghost, .btn-danger, .btn-primary)[aria-disabled="true"] {
  opacity: .42 !important;
  cursor: not-allowed;
}
.btn-quiet, .btn-ghost, .btn-danger, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-small, a.btn-small { min-height: 32px; padding-left: 12px; padding-right: 12px; }

/* A row of buttons at the foot of a form sits where the form ends.
   The theme made every .actions sticky to the bottom of its scroller with a
   dark fade behind it — on the Horizon Stage that bottom edge is under the
   Strip and the Dock, so Save buttons hovered over lists ("Save and reload"
   in the middle of DNS records) and looked dark and cut off. The Sheet keeps
   its own sticky footer (#hzSheetFoot); nothing else sticks. */
body.hz-desk .work .actions,
body.hz-page .actions,
.hz-zones .actions {
  position: static !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
body.hz-desk .work .actions.loose,
body.hz-page .actions.loose { margin-top: 12px; }

/* --------------------------------------------------- page shell (Admin) -- */
/* Admin and extension pages: Skyline, section band, Stage. The Stage is the
   only scroller, so every tab scrolls to its last line on a phone and on a
   desk, and nothing sits under a dock or strip (these pages have neither). */
html:has(body.hz-page), body.hz-page {
  height: 100%;
  overflow: hidden;
}
body.hz-page .shell.hz-pshell {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--canvas);
}
.hz-pshell > .hz-skyline { flex: none; }

.hz-pband {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
  min-width: 0;
}
.hz-pband-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 8px;
  margin-right: 8px;
  border-radius: var(--r-sm);
  color: var(--text-2) !important;
  font: 600 13px/1 var(--font-sans);
}
.hz-pband-back > span:first-child { font-size: 20px; line-height: 1; margin-top: -2px; }
.hz-pband-back:hover { color: var(--text) !important; background: var(--raised); }

.hz-ptabs {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-padding-inline: 24px;
  overscroll-behavior-x: contain;
}
.hz-ptabs::-webkit-scrollbar { display: none; }
.hz-ptabs > button {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-dock, 999px);
  background: transparent;
  color: var(--text-2);
  font: 600 13px/1 var(--font-sans);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .16s ease, color .16s ease;
}
.hz-ptabs > button:hover { background: var(--raised); color: var(--text); }
.hz-ptabs > button.on { background: var(--accent); color: var(--accent-ink); }
.hz-ptabs > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hz-ptabs-gap { flex: none; width: 14px; height: 1px; }
.hz-ptabs .badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--warn);
  color: #1A1200;
  font: 600 11px/18px var(--font-mono);
  text-align: center;
  margin: 0;
}
.hz-ptabs > button.on .badge { background: var(--accent-ink); color: var(--accent); }
.hz-ptabs .badge.hidden { display: none; }

.hz-pstage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 var(--gutter) calc(56px + env(safe-area-inset-bottom, 0px));
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.hz-phead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 0 12px;
}
.hz-phead-eyebrow {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.hz-phead-title {
  margin: 0;
  font: 600 26px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text);
}
.hz-phead-sub { margin: 0; color: var(--text-2); font-size: 14px; max-width: 72ch; }

/* ------------------------------------------------------------- zones -- */
/* Every stage that is not Mail or Outlook (those have their own zones), the
   Admin panel and extension pages. A .card stops being a box: no plate, no
   border, no radius — a hairline on top and 28px of air. */
body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
  #ordersView, #convertView, #forwardbanView, #cleanerView, #runView, #editorView,
  #toolsScreen) .card,
.hz-zones .card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: var(--zone-air, 28px) 0 !important;
  max-width: none !important;
  width: auto !important;
}
.hz-zones > .card:first-child,
body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
  #ordersView, #convertView, #forwardbanView, #cleanerView, #runView, #editorView)
  :is(#setPane, #svPane) > .card:first-child,
body.hz-desk :is(#apppwView, #askView, #resellView, #convertView, #forwardbanView,
  #cleanerView, #runView, #editorView) > .card:first-child {
  border-top-color: transparent !important;
  padding-top: 20px !important;
}
/* A zone inside a zone is a sub-section, not another box. */
body.hz-desk .work .card .card,
.hz-zones .card .card {
  padding: 18px 0 !important;
  border-top: 1px solid var(--hairline) !important;
}
body.hz-desk .work :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
  #ordersView, #convertView, #forwardbanView, #cleanerView, #runView, #editorView) .card > :is(h2, h3),
.hz-zones .card > :is(h2, h3) {
  font: 600 18px/1.3 var(--font-display) !important;
  letter-spacing: -0.01em;
  color: var(--text) !important;
  margin: 0 0 6px !important;
}
body.hz-desk .work :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
  #ordersView, #convertView, #forwardbanView, #cleanerView, #runView, #editorView) .card > .sub,
.hz-zones .card > .sub {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 72ch;
  margin: 0 0 18px;
}
.hz-zones .card > .field,
.hz-zones .card > .row,
body.hz-desk .work :is(#settingsView, #serverView, #apppwView, #askView, #resellView)
  .card > :is(.field, .row) { margin-bottom: 16px; }

/* Wide screens: a form zone reads as a label column and a control column,
   so the right half of the Stage is used instead of being dead space next to
   a 520px card. Lists (DNS zones, records) land in the wide column too. */
@media (min-width: 1180px) {
  body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #forwardbanView, #cleanerView) .card:has(> h3:first-child),
  .hz-zones .card:has(> h3:first-child) {
    display: grid !important;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    grid-template-rows: repeat(48, auto);
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
    align-content: start;
  }
  body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #forwardbanView, #cleanerView) .card:has(> h3:first-child) > *,
  .hz-zones .card:has(> h3:first-child) > * {
    grid-column: 2;
    min-width: 0;
  }
  body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #forwardbanView, #cleanerView) .card:has(> h3:first-child) > h3:first-child,
  .hz-zones .card:has(> h3:first-child) > h3:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #forwardbanView, #cleanerView) .card:has(> h3:first-child) > h3:first-child + :is(.sub, p),
  .hz-zones .card:has(> h3:first-child) > h3:first-child + :is(.sub, p) {
    grid-column: 1;
    grid-row: 2 / span 47;
    margin-bottom: 0;
  }
  body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #forwardbanView, #cleanerView) .card:has(> h3:first-child) > .actions:first-of-type,
  .hz-zones .card:has(> h3:first-child) > .actions { margin-top: 4px; margin-bottom: 4px; }
  body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #forwardbanView, #cleanerView) .card:has(> h3:first-child) > :is(.field, .row, .hint, .check, .toggles, label),
  .hz-zones .card:has(> h3:first-child) > :is(.field, .row, .check, .toggles, label) { max-width: 760px; }
}

/* hr.rule inside a zone is the same hairline a zone uses. */
body.hz-desk .work hr.rule, .hz-zones hr.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 22px 0;
  background: none;
  height: 0;
}

/* Fields: labels in one voice, inputs full width of their column. */
.hz-zones .field label,
body.hz-desk .work :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
  #ordersView, #forwardbanView, #cleanerView) .field > label {
  font: 600 11px/1.3 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hz-zones .hint, body.hz-desk .work .card .hint { color: var(--text-3); font-size: 12px; line-height: 1.5; }

/* Tables that come out of the Admin views: hairline rows, no zebra. */
.hz-zones table { width: 100%; border-collapse: collapse; }
.hz-zones th {
  text-align: left;
  font: 600 11px/1.3 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent !important;
}
.hz-zones td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent !important;
  vertical-align: middle;
}
.hz-zones .table-wrap {
  overflow-x: auto;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Admin's own pieces that were little cards: People, devices, logs, stats. */
.hz-zones :is(.person-card, .vrow) {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
.hz-zones :is(.logbox, .log) {
  background: var(--stage) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
.hz-zones :is(.stat, .facts > *) {
  background: transparent !important;
  box-shadow: none !important;
}
.hz-zones .tag {
  background: var(--raised) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
}

/* ------------------------------------------------- Settings / Server tabs */
/* The section tabs inside a stage (Settings: You / Notifications / Mail …,
   Server: Uptime / DNS / Mail search / Assistant) are waypoints: plain text,
   the current one a solid emerald pill. No box around the strip. */
body.hz-desk .work .settabswrap {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.hz-desk .work .settabs {
  display: flex !important;
  gap: 4px !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow-x: auto;
  scrollbar-width: none;
}
body.hz-desk .work .settabs::-webkit-scrollbar { display: none; }
body.hz-desk .work .settabs > button {
  flex: none;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font: 600 13px/1 var(--font-sans) !important;
  box-shadow: none !important;
}
body.hz-desk .work .settabs > button:hover { background: var(--raised) !important; color: var(--text) !important; }
body.hz-desk .work .settabs > button.on {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}
body.hz-desk .work .settabs > button::before,
body.hz-desk .work .settabs > button::after { display: none !important; }
body.hz-desk .work :is(#setPane, #svPane) { padding: 0 !important; background: transparent !important; border: 0 !important; }

/* Every non-Mail, non-Outlook stage body sits on the same two gutters. */
@media (min-width: 768px) {
  body.hz-desk .work > :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #ordersView, #convertView, #forwardbanView, #cleanerView, #runView, #editorView) {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter-r, var(--gutter)) !important;
    max-width: none !important;
  }
}

/* ------------------------------------------------------------- DNS ----- */
/* Rows you can hit: 18px tick, a 32px star target, even spacing, the two
   row buttons on one baseline. The lists keep their own scrollers. */
body.hz-desk .zonelist {
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-sm) !important;
  background: var(--stage) !important;
  margin: 12px 0 0 !important;
}
body.hz-desk .zonelist + .bulkbar { margin-top: 10px; }
body.hz-desk .zrow,
body.hz-desk .zonerow {
  min-height: 48px;
  padding: 6px 12px !important;
  column-gap: 12px !important;
  border-bottom: 1px solid var(--hairline) !important;
}
body.hz-desk :is(.zrow, .zonerow) .dpick {
  width: 32px; height: 32px;
  display: grid !important; place-items: center;
  margin: 0;
}
body.hz-desk :is(.zrow, .zonerow) .dpick input { width: 18px !important; height: 18px !important; margin: 0 !important; }
body.hz-desk .dstar {
  width: 32px !important; height: 32px !important;
  display: grid !important; place-items: center;
  font-size: 16px !important;
  color: var(--text-3);
  border-radius: var(--r-sm) !important;
}
body.hz-desk .dstar:hover { background: var(--raised) !important; color: var(--accent) !important; }
body.hz-desk .dstar.on { color: var(--warn) !important; }
body.hz-desk :is(.zrow, .zonerow) .dacts { display: inline-flex; gap: 8px; justify-content: flex-end; }
body.hz-desk .zonebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
body.hz-desk .zonepick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; }
body.hz-desk .zonepick .zonehint:empty { display: none; }
body.hz-desk .zonefav { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--text-2); }

/* ------------------------------------------------------------- Mail ----- */
/* Mailbox actions are one row of real buttons beside "Show pictures",
   all on the chip row's centre line — not a three-line stack. */
#mailRail .rail-foot { align-items: center !important; gap: 8px 16px !important; flex-wrap: nowrap; }
#mailRail .railacts { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin: 0 !important; }
#mailRail .railact {
  min-height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center;
  background: var(--raised) !important;
  border: 1px solid var(--grey-600) !important;
  color: #E6F2EC !important;
  white-space: nowrap;
}
#mailRail .railact:hover { background: var(--raised-2) !important; border-color: #557064 !important; }
#mailRail .railact.danger {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 38%, var(--raised)) !important;
}
#mailRail .mailpref { min-height: 34px; color: var(--text) !important; white-space: nowrap; }
#mailRail .mailfolds { align-items: center; }

/* Unread is a short emerald tick inset in the row, not a bar welded to the
   next unread row's bar; tick box, star, avatar share one centre line. */
.mrow.unread { box-shadow: none !important; }
.mrow.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  pointer-events: none;
}
.mrow > :is(.mpick, .mstar, .mava) { align-self: center !important; }
.mrow .mpick input { margin: 0; }
body.hz-desk #mailView .mrow { min-height: 52px; }
body.hz-desk #mailView .mailbar .btn-quiet:disabled { opacity: .42 !important; }

/* --------------------------------------------------------- Orders ------ */
body.hz-desk #ordersView .card { padding: 18px 0 !important; }

/* ---------------------------------------------------------- phones ----- */
@media (max-width: 767px) {
  .hz-pband { height: 52px; padding: 0 8px 0 4px; gap: 4px; }
  .hz-pband-back { padding: 0 8px; margin-right: 0; min-height: 44px; }
  .hz-pband-back-word { display: none; }
  .hz-ptabs > button { height: 40px; min-height: 40px; padding: 0 14px; }
  .hz-ptabs-gap { width: 6px; }
  .hz-pstage { padding: 0 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .hz-phead { padding: 20px 0 6px; }
  .hz-phead-title { font-size: 22px; }

  .hz-zones .card,
  body.hz-desk :is(#settingsView, #serverView, #apppwView, #askView, #resellView,
    #ordersView, #convertView, #forwardbanView, #cleanerView, #runView, #editorView) .card {
    padding: 24px 0 !important;
  }
  .hz-zones .row { display: block; }
  .hz-zones .row > .field { margin-bottom: 14px; }
  .hz-zones .field :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select, textarea) {
    min-height: 44px;
    font-size: 16px;
    width: 100%;
  }
  .hz-zones table { min-width: 520px; }
  body.hz-desk .work .settabs > button { height: 40px !important; min-height: 40px !important; }
  body.hz-desk :is(.zrow, .zonerow) { padding: 8px 10px !important; }
  body.hz-desk :is(.zrow, .zonerow) .dpick { width: 44px; height: 44px; }
  body.hz-desk .dstar { width: 44px !important; height: 44px !important; }
  body.hz-desk :is(.zrow, .zonerow) .dacts .btn-small { min-height: 40px; }
}
@media (pointer: coarse) {
  .btn-primary, .btn-quiet, .btn-danger, .btn-ghost { min-height: 44px; }
  .btn-small, a.btn-small { min-height: 40px; }
  .hz-zones .actions, body.hz-desk .work .actions { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hz-ptabs > button { transition: none; }
}
.hz-phead > .hz-pband-back { align-self: flex-start; margin: 0 0 6px -8px; }

/* ST-195 admin stage scroll + mail touch — Backups/Admin stage is #hzAdminStage; mailbar ≥44px. */
@media (max-width: 767px) {
  .hz-pstage {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  body.hz-page .shell.hz-pshell {
    /* Stage must be the only vertical scroller — shell stays locked. */
    overflow: hidden !important;
  }
}

/* === ST-196 overnight tidy (1.61.7) — Mail spacing, buttons, DNS Save,
   Admin Backups scroll. Path-scoped; Sign-in + UFW untouched. ========= */

/* Mail list: room between checkbox · star · avatar (Danny crop). */
body.hz-desk #mailView .mrow {
  min-height: 60px !important;
  column-gap: 14px !important;
  padding: 12px 12px !important;
  grid-template-columns: 22px 22px 32px minmax(0, 1fr) 16px 76px !important;
}
body.hz-desk #mailView .mrow .mpick,
body.hz-desk #mailView .mrow .mstar,
body.hz-desk #mailView .mrow .mava {
  width: 22px;
  justify-self: center;
}
body.hz-desk #mailView .mrow .mava,
body.hz-desk #mailView .mrow .mava .avatar {
  width: 32px !important;
  height: 32px !important;
}
body.hz-desk #mailView .mrow.unread::before {
  top: 12px;
  bottom: 12px;
}

/* Mailbox prefs + actions: real high-contrast chips, one row. */
#mailRail .rail-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
  padding: 10px 0 4px !important;
}
#mailRail .railacts {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}
#mailRail .railact {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--r-sm) !important;
  background: var(--raised) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--text) !important;
  font: 600 13px/1 var(--font-sans) !important;
}
#mailRail .railact:hover {
  background: var(--raised-2) !important;
  border-color: var(--grey-600) !important;
  color: var(--text) !important;
}
#mailRail .railact.danger {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 45%, var(--raised)) !important;
  background: color-mix(in srgb, var(--danger) 8%, var(--raised)) !important;
}
#mailRail .mailpref {
  min-height: 36px !important;
  padding: 0 4px !important;
  color: var(--text) !important;
  font: 500 13px/1.3 var(--font-sans) !important;
  gap: 8px !important;
}
#mailRail .mailpref input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Mailbar controls — readable on dark, ≥36px on desk / 44px on phone. */
body.hz-desk #mailView .mailbar .btn-quiet,
body.hz-desk #mailView .mailbar .btn-primary,
body.hz-desk #mailView .mailbar button {
  min-height: 36px;
  color: var(--text);
  border-color: var(--hairline-strong);
}
body.hz-desk #mailView .mailbar .btn-primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: transparent !important;
}
@media (pointer: coarse) {
  body.hz-desk #mailView .mailbar .btn-quiet,
  body.hz-desk #mailView .mailbar .btn-primary,
  body.hz-desk #mailView .mailbar button,
  body.hz-desk #mailView .mailbar #mailSearchGo,
  body.hz-desk #mailView .mailbar #mailFilterBtn,
  body.hz-desk #mailView .mailbar #mailPrev,
  body.hz-desk #mailView .mailbar #mailNext,
  body.hz-desk #mailView .mailbar #mailStarred {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* DNS: Keep Save and reload pinned above Strip+Dock — never mid-list under
   the waypoint pill. */
body.hz-desk #serverView .actions:has(#dnSave),
body.hz-desk #serverView .actions:has(#zFileSave) {
  position: sticky !important;
  bottom: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 6;
  margin-top: 16px !important;
  padding: 12px 0 10px !important;
  background: linear-gradient(180deg, transparent, var(--canvas) 28%) !important;
  border-top: 1px solid var(--hairline);
  gap: 10px 12px;
}
body.hz-desk #serverView .actions:has(#dnSave) .btn-primary,
body.hz-desk #serverView .actions:has(#zFileSave) .btn-primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: transparent !important;
  min-height: 40px;
  font-weight: 700;
}
html.onphone body.hz-desk #serverView .actions:has(#dnSave),
html.onphone body.hz-desk #serverView .actions:has(#zFileSave) {
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: calc(40px + 56px + 10px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 40;
}
@media (max-width: 767px) {
  /* Phone nav is #tabbar (56) under #hzStrip (40) — floating .hz-dock is display:none.
     Sticky fails at end-of-content; pin Save above strip+tabbar instead. */
  body.hz-desk #serverView .actions:has(#dnSave),
  body.hz-desk #serverView .actions:has(#zFileSave) {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(40px + 56px + 10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 40;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: var(--canvas) !important;
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -8px 20px -12px rgb(0 0 0 / .65);
  }
  body.hz-desk #serverView {
    padding-bottom: calc(40px + 56px + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Admin Backups / every Admin tab: Stage is the only scroller. Do not put
   overscroll-contain on #backups itself (it is not a pane) — that trapped
   touch and left scrollTop at 0 on phones. */
#hzAdminStage,
.hz-pstage {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  min-height: 0;
}
#backups, #omDriveBackup {
  overflow: visible !important;
  overscroll-behavior-y: auto;
}
@media (max-width: 767px) {
  .shell.hz-pshell > .hz-pstage,
  body.hz-page #hzAdminStage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    touch-action: pan-y;
  }
  body.hz-page .shell.hz-pshell {
    height: 100dvh !important;
    overflow: hidden !important;
  }
  body.hz-page #panel,
  body.hz-page .hz-zones {
    overflow: visible !important;
  }
}


/* === ST-200 mobile UI + Discord brand (1.61.10) === */
/* Rail-foot was re-shown by ST-196 and leaked into the mobile chiprow
   (stray bar / cramped prefs). Keep it desk-only. */
@media (max-width: 767px) {
  #mailRail .rail-foot { display: none !important; }
  body.hz-desk #mailRail.hz-chiprow {
    padding: 10px 14px 12px !important;
    gap: 8px 10px !important;
  }
  #mailRail .eyebrow:not(:first-child) {
    margin-left: 8px !important;
    padding-left: 12px !important;
  }
  #mailRail .mailacc, #mailRail .mailfold, #mailRail .mailadd {
    height: 34px !important;
    padding: 0 12px !important;
  }

  /* Admin section band: room so the active pill is never clipped by the
     back chevron or the stage edge. */
  .hz-pband {
    height: 52px;
    padding: 0 12px 0 8px !important;
    gap: 6px !important;
  }
  .hz-pband-back {
    padding: 0 10px !important;
    margin-right: 2px !important;
    min-width: 40px;
    justify-content: center;
  }
  .hz-ptabs {
    scroll-padding-inline: 28px;
    padding-right: 12px;
    gap: 6px;
  }
  .hz-ptabs > button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
  }
  .hz-ptabs-gap { width: 10px; }

  /* Stage + cards: tables scroll inside .table-wrap only — never shove the
     lede/header sideways off the left edge. */
  .hz-pstage, #hzAdminStage {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hz-zones, .hz-zones .card, #panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .hz-zones .card > .sub,
  .hz-zones .card > h3,
  .hz-phead, .hz-phead-title, .hz-phead-sub {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hz-zones .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .hz-zones .table-wrap table {
    min-width: 520px;
  }
  .hz-zones td .person-acts,
  .hz-zones td.nowrap {
    white-space: nowrap;
  }
  .hz-zones .person-acts {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .hz-zones .person-acts .btn-small {
    min-height: 36px !important;
    padding: 0 10px !important;
  }
}

/* Phone mail search: 44px touch target was overlapping typed text (padding
   only left 36–40px). Give the field room; keep the hit area. */
html.onphone .msearch input,
html.onphone #mailView[data-screen="list"] .msearch input,
html.onphone .mailbar .msearch input {
  padding-left: 52px !important;
  padding-right: 48px !important;
}
html.onphone .msearch-go,
html.onphone #mailView[data-screen="list"] #mailSearchGo {
  left: 4px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}
html.onphone .mfilt-toggle,
html.onphone #mailView[data-screen="list"] #mailFilterBtn {
  right: 4px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* Mail list control strip: breathing room on 390. */
html.onphone #mailView[data-screen="list"] .mailbar {
  gap: 8px 10px !important;
  padding: 12px 14px 14px !important;
}
html.onphone #mailView[data-screen="list"] .mcount {
  padding: 0 4px;
  letter-spacing: 0;
}

/* Discord brand mark in More sheet + menus. */
.sheetup-ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  flex: none;
  color: var(--accent);
}
.sheetup-ico img, .sheetup-ico svg {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.sheetup-row {
  display: flex !important;
  align-items: center;
  text-align: left;
}
.hz-menu-row .hz-ic img.hz-discord-mark,
.hz-mm-row .pin-ico img.hz-discord-mark {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
}
.hz-ptabs > button img.hz-discord-mark {
  width: 14px;
  height: 14px;
  object-fit: contain;
  margin-right: 2px;
}

/* Webhook preview: honour inline border colour; default to Horizon emerald. */
.preview {
  border-left-color: var(--accent) !important;
}


/* === ST-200 follow-up (mail row + admin margins) === */
/* ST-196 desk mrow grid was winning over html.onphone row layout and
   crushed sender names to "M…". Restore the phone grid. */
@media (max-width: 767px) {
  html.onphone body.hz-desk #mailView .mrow,
  html.onphone #mailView .mrow {
    grid-template-columns: 22px 40px minmax(0, 1fr) auto 24px !important;
    grid-template-areas:
      "pick ava from when star"
      "pick ava main main main" !important;
    column-gap: 11px !important;
    row-gap: 3px !important;
    padding: 12px 14px !important;
    min-height: 68px !important;
  }
  html.onphone #mailView .mrow .mava,
  html.onphone #mailView .mrow .mava .avatar {
    width: 40px !important;
    height: 40px !important;
  }
  html.onphone #mailView .mrow .mfrom {
    max-width: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Admin: more edge air; active pill never kisses the chevron. */
  .hz-pband {
    padding: 0 14px 0 10px !important;
  }
  .hz-pstage, #hzAdminStage {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .hz-ptabs {
    scroll-padding-inline: 36px;
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  .hz-ptabs > button.on {
    padding-inline: 14px !important;
  }
  /* Devices/Backups tables: keep actions reachable via wrap scroll; pad rows. */
  .hz-zones .table-wrap {
    margin: 0 -4px;
    padding: 0 4px 8px;
  }
  .hz-zones th, .hz-zones td {
    padding-right: 14px !important;
  }
}


/* === ST-200 env-list + devices wrap === */
.hz-zones .env-list { display: flex; flex-direction: column; gap: 0; }
.hz-zones .env-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.hz-zones .env-row:last-child { border-bottom: 0; }
.hz-zones .env-row-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px; margin-bottom: 6px;
}
.hz-zones .env-row-name {
  font: 600 14.5px/1.3 var(--font-sans);
  color: var(--text);
  flex: 1 1 140px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hz-zones .env-row-state { flex: none; }
.hz-zones .env-row-pkgs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
  color: var(--text-3); font-size: 12.5px;
}
.hz-zones .env-row-acts {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hz-zones .env-row-acts .btn-small {
  min-height: 40px; padding: 0 14px;
}
@media (max-width: 767px) {
  .hz-zones .table-wrap table { min-width: 560px; }
  /* Soften mailbox FOLDERS divider — was reading as a stray bar. */
  #mailRail .eyebrow:not(:first-child) {
    border-left-color: color-mix(in srgb, var(--hairline) 55%, transparent) !important;
  }
}


/* === ST-200 devices cards (1.61.12) === */
/* No multi-column table on phone — each device is a stacked card. */
.hz-zones .dev-list { display: flex; flex-direction: column; gap: 0; }
.hz-zones .dev-card {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.hz-zones .dev-card:last-child { border-bottom: 0; }
.hz-zones .dev-card.banned { opacity: .78; }
.hz-zones .dev-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.hz-zones .dev-card-head .dev-ico {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  margin: 2px 0 0;
}
.hz-zones .dev-card-title { min-width: 0; flex: 1 1 auto; }
.hz-zones .dev-card-title b {
  display: block;
  font: 600 15px/1.35 var(--font-sans);
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hz-zones .dev-card-title .sub { margin-top: 3px; }
.hz-zones .dev-card-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}
@media (min-width: 720px) {
  .hz-zones .dev-card-meta { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
}
.hz-zones .dev-card-meta > div { min-width: 0; }
.hz-zones .dev-card-meta dt {
  margin: 0 0 2px;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hz-zones .dev-card-meta dd {
  margin: 0;
  font: 500 13.5px/1.35 var(--font-sans);
  color: var(--text-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hz-zones .dev-card-meta dd.mono { font-family: var(--font-mono); font-size: 12.5px; }
.hz-zones .dev-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.hz-zones .dev-card-acts .btn-small {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
  min-height: 44px !important;
  justify-content: center;
}
@media (min-width: 720px) {
  .hz-zones .dev-card-acts .btn-small {
    flex: 1 1 auto;
    width: auto;
    min-width: calc(33.33% - 8px);
    min-height: 40px !important;
  }
}

/* === ST-202 inbox cleaner dock + mail refresh/gaps (1.61.13) === */
/* Stage bottom clearance sitewide. Chromium flex overflow ignores
   padding-bottom on the scroller, and flex:1 mailviews with overflow:visible
   paint past a ::after sibling — so document tool stages size to content,
   and .work / Admin Stage get a ::after spacer under them. */
body.hz-desk .work > :is(#cleanerView, #convertView, #forwardbanView, #toolsScreen) {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  align-self: stretch;
  overflow: visible !important;
}
body.hz-desk .work {
  padding-bottom: 0 !important;
  scroll-padding-bottom: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 56px) !important;
}
body.hz-desk .work::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 56px);
  pointer-events: none;
}
#hzAdminStage,
.hz-pstage {
  padding-bottom: 0 !important;
  scroll-padding-bottom: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 56px + env(safe-area-inset-bottom, 0px)) !important;
}
#hzAdminStage::after,
.hz-pstage::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 56px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
@media (max-width: 767px) {
  body.hz-desk .work::after {
    height: calc(var(--strip-h) + var(--dock-h) + 56px + env(safe-area-inset-bottom, 0px));
  }
}
html.onphone .work {
  padding-bottom: 0 !important;
}
html.onphone .work::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--strip-h) + var(--dock-h) + 56px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

/* Inbox Cleaner — more air under Search before Match list / zone breaker. */
body.hz-desk #cleanerView .card.ic-form,
#cleanerView .card.ic-form {
  padding-bottom: calc(var(--zone-air, 28px) + 20px) !important;
}
#cleanerView .ic-wrap {
  gap: 20px;
}
#cleanerView .ic-controls {
  padding-bottom: 6px;
}
#cleanerView .ic-pager {
  padding: 10px 2px 8px;
  margin-bottom: 4px;
}

/* Mail: gap under MAILBOXES/FOLDERS chiprow breaker before search. */
body.hz-desk #mailRail.hz-chiprow {
  padding-bottom: 20px !important;
}
body.hz-desk #mailView .mailbar {
  padding-top: 22px !important;
  padding-bottom: 12px !important;
}
@media (max-width: 767px) {
  body.hz-desk #mailRail.hz-chiprow {
    padding-bottom: 18px !important;
  }
  body.hz-desk #mailView .mailbar,
  html.onphone #mailView[data-screen="list"] .mailbar {
    padding-top: 20px !important;
  }
}

/* Mail Refresh — desk stays visible; phone override of theme hide. */
body.hz-desk #mailView .mailbar #mailRefresh {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--text) !important;
  border: 1px solid var(--hairline-strong) !important;
  background: var(--raised) !important;
  min-height: 36px;
}
html.onphone #mailView[data-screen="list"] #mailRefresh {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--text) !important;
  background: var(--l2) !important;
  border: 0 !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px;
  font-weight: 600;
}


/* ST-212 mobile mail list scroller (horizon overrides)
   ST-217: keep overflow:hidden scoped to Mail list only. Applying it to every
   non-reading Stage (Tools, Server, …) clipped the last rows under LIVE+dock
   because .work could not scroll to its ::after clearance spacer. */
html.onphone body:not(.reading)[data-hz-view="mail"] .work,
html.onphone body:not(.reading).hz-desk[data-hz-view="mail"] .work {
  overflow: hidden !important;
}
html.onphone body.reading .work,
html.onphone body.reading.hz-desk .work,
html.onphone body:not([data-hz-view="mail"]) .work,
html.onphone body.hz-desk:not([data-hz-view="mail"]) .work {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html.onphone #mailView[data-screen="list"] .mlist {
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* === ST-215 Tools atmospheric stage polish (1.61.24) === */
/* Live Tools was flat --canvas charcoal; ST-213 proof used emerald radial
   washes on a green-black base. Restore that atmosphere on Tools-family
   Stage only (tools / run / convert / forward-ban / cleaner / editor /
   CSV peek). Mail + Outlook untouched. Emerald accents kept. */

body.hz-desk:is(
  [data-hz-view="tools"],
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
),
body.hz-desk.hz-peeking {
  --hz-tools-atmos:
    radial-gradient(1200px 600px at 10% -10%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    radial-gradient(900px 500px at 100% 0%,
      color-mix(in srgb, var(--teal) 6%, transparent), transparent 50%),
    radial-gradient(880px 480px at 48% 118%,
      color-mix(in srgb, #0a1a16 38%, transparent), transparent 74%),
    linear-gradient(188deg,
      color-mix(in srgb, var(--stage) 72%, #0b1210) 0%,
      var(--canvas) 46%,
      color-mix(in srgb, var(--grey-1000) 82%, #050807) 100%);
}

body.hz-desk:is(
  [data-hz-view="tools"],
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .shell,
body.hz-desk.hz-peeking .shell {
  background: var(--hz-tools-atmos), var(--canvas) !important;
  background-attachment: fixed !important;
}

body.hz-desk:is(
  [data-hz-view="tools"],
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .work,
body.hz-desk.hz-peeking .work,
html.onphone body.hz-desk:is(
  [data-hz-view="tools"],
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .work {
  background: transparent !important;
}

/* Skyline stays clear of the wash plate; health/user chrome unchanged. */
body.hz-desk:is(
  [data-hz-view="tools"],
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .hz-skyline {
  background: color-mix(in srgb, var(--canvas) 72%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- cleaner Tools form / index ---- */
body.hz-desk #runView {
  padding-top: 12px !important;
  gap: 16px !important;
}
body.hz-desk #runView .pane-form {
  padding-right: 22px !important;
  border-right-color: var(--hairline) !important;
}
body.hz-desk #runView .pane-out {
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--raised) 55%, transparent),
      color-mix(in srgb, var(--stage) 92%, transparent)) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
body.hz-desk #runView .card > :is(h2, h3) {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.hz-desk #runView .card > .sub {
  margin-bottom: 20px !important;
}

/* File drop — stage-tinted well, emerald hover, not a dead dashed box. */
body.hz-desk:is(
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) :is(.drop, .field > label.drop) {
  background: color-mix(in srgb, var(--stage) 88%, #101a16) !important;
  border: 1px dashed var(--hairline-strong) !important;
  border-radius: 12px !important;
  padding: 20px 18px !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.hz-desk:is(
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) :is(.drop, .field > label.drop):hover,
body.hz-desk:is(
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) :is(.drop.over, .drop.has) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline-strong)) !important;
  background:
    radial-gradient(480px 180px at 50% 0%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--stage) 70%, #101a16) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
body.hz-desk:is(
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .drop-say b,
body.hz-desk:is(
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .drop-in b {
  color: var(--text) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.hz-desk:is(
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .drop-say em,
body.hz-desk:is(
  [data-hz-view="run"],
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) .drop-in em {
  color: var(--text-3) !important;
}
body.hz-desk #runView .actions {
  gap: 10px !important;
  margin-top: 4px;
}
body.hz-desk #runView .btn-primary {
  min-width: 96px;
}

/* Tools index — quieter hairlines, softer hover wash. */
body.hz-desk #toolsScreen {
  padding-top: 4px !important;
}
body.hz-desk #toolsScreen .toolcard {
  padding: 12px 8px !important;
  transition: background .12s ease;
}
body.hz-desk #toolsScreen .toolcard:hover {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 5%, transparent),
      color-mix(in srgb, var(--stage) 80%, transparent)) !important;
  border-radius: 8px !important;
  border-bottom-color: transparent !important;
}
body.hz-desk #toolsScreen .tc-ico {
  color: var(--accent) !important;
}
body.hz-desk #toolsScreen .hz-addscript:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline-strong)) !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}

/* Recent runs strip — sit cleanly on atmosphere. */
body.hz-desk #runs.runs {
  margin-top: 8px;
}
body.hz-desk #runs .run {
  background: color-mix(in srgb, var(--stage) 85%, transparent) !important;
  border: 1px solid var(--hairline) !important;
}
body.hz-desk #runs .run:hover {
  background: var(--raised) !important;
  border-color: var(--hairline-strong) !important;
}

/* Convert / Forward·ban / Cleaner share the same Tools-family stage air. */
body.hz-desk:is(
  [data-hz-view="convert"],
  [data-hz-view="forwardban"],
  [data-hz-view="cleaner"],
  [data-hz-view="editor"]
) :is(#convertView, #forwardbanView, #cleanerView, #editorView) {
  background: transparent !important;
}


/* === ST-216 Sitewide Horizon atmospheric stage (1.61.25) ===
   Extends ST-215 Tools emerald/teal radial washes to every Horizon stage:
   Mail, Outlook, Tools(+run/convert/forwardban/cleaner/editor), Orders,
   Watching (resell), More (discord/apppw/ask/server/settings), Admin, and
   CSV peek. Soft opacities keep text/cards readable on charcoal. Outlook
   systemd units + UFW bridge left alone. */
body.hz-desk,
body.hz-page,
body.hz-desk.hz-peeking {
  --hz-site-atmos:
    radial-gradient(1200px 600px at 10% -10%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    radial-gradient(900px 500px at 100% 0%,
      color-mix(in srgb, var(--teal) 6%, transparent), transparent 50%),
    radial-gradient(880px 480px at 48% 118%,
      color-mix(in srgb, #0a1a16 38%, transparent), transparent 74%),
    linear-gradient(188deg,
      color-mix(in srgb, var(--stage) 72%, #0b1210) 0%,
      var(--canvas) 46%,
      color-mix(in srgb, var(--grey-1000) 82%, #050807) 100%);
}

/* Desk + Admin/extension shells carry the wash (fixed so scroll does not drag it). */
body.hz-desk .shell,
body.hz-page .shell,
body.hz-desk.hz-peeking .shell {
  background: var(--hz-site-atmos), var(--canvas) !important;
  background-attachment: fixed !important;
}

/* Stage panes go transparent so the shell wash reads through. */
body.hz-desk .work,
body.hz-page .hz-pstage,
body.hz-page .work,
body.hz-desk.hz-peeking .work,
html.onphone body.hz-desk .work,
html.onphone body.hz-desk .work > .head {
  background: transparent !important;
}

/* Skyline / Admin band frost — brand stays readable over the wash. */
body.hz-desk .hz-skyline,
body.hz-page .hz-skyline,
body.hz-page .hz-pband,
body.hz-page .tabs {
  background: color-mix(in srgb, var(--canvas) 72%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* CSV / file peek inherits the same air when open. */
body.hz-desk.hz-peeking .filepeek.hz-peek {
  background: transparent !important;
}

/* Mail list/read already transparent; keep row hover contrast on atmosphere. */
body.hz-desk[data-hz-view="mail"] #mailView .mlist,
body.hz-desk[data-hz-view="mail"] #mailView .mcol {
  background: transparent !important;
}

/* Outlook Handler panes sit on stage plates — leave card fills; only shell washes. */
body.hz-desk[data-hz-view="outlook"] .hz-handler,
body.hz-desk[data-hz-view="outlook"] #outlookView {
  background: transparent !important;
}

/* Orders / Watching / More destinations share the same Stage air. */
body.hz-desk:is(
  [data-hz-view="orders"],
  [data-hz-view="resell"],
  [data-hz-view="discord"],
  [data-hz-view="apppw"],
  [data-hz-view="ask"],
  [data-hz-view="server"],
  [data-hz-view="settings"]
) :is(#ordersView, #resellView, #discordView, #apppwView, #askView, #serverView, #settingsView) {
  background: transparent !important;
}


/* === ST-217 Mobile More sheet + sitewide dock clearance (1.61.26) ===
   (1) More sheet rows inherited button{justify-content:center} → centered
       jagged icon/label clusters; Admin links (anchors) stayed left.
       Force a Horizon hz-mm-row-style left list: fixed icon well + label.
   (2) Sheet card only padded for tabbar; LIVE strip sits above tabbar on
       phone, so Sign out sat under the strip — pad for strip+dock.
   (3) Sitewide Stage ::after clearance bumped so Tools (and siblings) can
       scroll the last card fully above LIVE+dock. Dock kept. */
html.onphone .sheetup {
  /* Stay under strip/dock so the grounded More tab stays lit & tappable,
     but above Stage content. */
  z-index: 140 !important;
}
html.onphone .sheetup .sheetup-card,
.sheetup .sheetup-card {
  padding: 10px 10px calc(var(--strip-h) + var(--dock-h) + 28px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100dvh - 64px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  text-align: left !important;
}
html.onphone .sheetup-row,
.sheetup-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--r-sm, 10px) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, var(--fg)) !important;
  font: 500 15px/1.2 var(--font-sans, inherit) !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer;
}
html.onphone .sheetup-row:active,
.sheetup-row:active {
  background: var(--raised-2, var(--l2)) !important;
  transform: none !important;
}
html.onphone .sheetup-row.danger,
.sheetup-row.danger {
  color: var(--danger) !important;
  margin-top: 4px !important;
  border-top: 1px solid var(--hairline) !important;
  border-radius: 0 0 var(--r-sm, 10px) var(--r-sm, 10px) !important;
}
.sheetup-ico {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: var(--accent) !important;
  background: transparent !important;
}
.sheetup-ico svg,
.sheetup-ico img,
.sheetup-ico .pin-svg,
.sheetup-ico .ico {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  object-fit: contain;
  margin: 0 !important;
}
.sheetup-nm {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheetup-who {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Sitewide Stage clearance — keep dock; give last Tools/More rows room. */
body.hz-desk .work {
  scroll-padding-bottom: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 72px) !important;
}
body.hz-desk .work::after {
  height: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 72px) !important;
}
#hzAdminStage,
.hz-pstage {
  scroll-padding-bottom: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 72px + env(safe-area-inset-bottom, 0px)) !important;
}
#hzAdminStage::after,
.hz-pstage::after {
  height: calc(var(--strip-h) + var(--dock-float) + var(--dock-h) + 72px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 767px) {
  body.hz-desk .work::after {
    height: calc(var(--strip-h) + var(--dock-h) + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
html.onphone .work {
  padding-bottom: 0 !important;
  scroll-padding-bottom: calc(var(--strip-h) + var(--dock-h) + 72px + env(safe-area-inset-bottom, 0px)) !important;
}
html.onphone .work::after {
  height: calc(var(--strip-h) + var(--dock-h) + 72px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Tools index: explicit trailing air so last toolcard clears LIVE+dock. */
body.hz-desk #toolsScreen,
html.onphone #toolsScreen {
  padding-bottom: 28px !important;
}


/* === ST-217 Admin ptabs even spacing (1.61.26) ===
   hz-ptabs-gap spacers + uneven on-state padding broke the Requests…Activity
   rhythm (wide air around Captcha/Discord). One flex gap, identical pill pad,
   tidy scroll-into-view padding. */
.hz-ptabs {
  gap: 6px !important;
  scroll-padding-inline: 20px !important;
}
.hz-ptabs-gap { display: none !important; width: 0 !important; }
.hz-ptabs > button {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  gap: 6px !important;
  border-radius: var(--r-dock, 999px) !important;
  box-sizing: border-box !important;
}
.hz-ptabs > button.on {
  padding: 0 12px !important;
}
.hz-ptabs > button img.hz-discord-mark {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  flex: none;
}
@media (max-width: 767px) {
  .hz-ptabs {
    gap: 6px !important;
    scroll-padding-inline: 24px !important;
    padding-right: 16px !important;
  }
  .hz-ptabs > button,
  .hz-ptabs > button.on {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
  }
}