/* Store / Sign activity editor. This stylesheet is intentionally independent
   from the legacy editor cascade in admin.css. Behaviour is attached through
   data-* attributes; every visual selector in this file uses the ax namespace. */

body:has(.ax-page) .content {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: calc(100vh - var(--topbar-h));
  overflow: visible;
  padding: 24px 30px 92px;
}

@media (min-width: 921px) {
  html:has(.ax-page),
  body:has(.ax-page) {
    height: 100%;
    overflow: hidden;
  }

  /* 顶栏壳层没有旧版侧栏容器：主区高度扣掉顶栏，由 .content 内部滚动 */
  body:has(.ax-page) .content {
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 编辑页页头已换成列表页同款 crumbbar：面包屑在左，副标题（运行参数 · 版本）在右。
   .ax-page 自身的 max-width:1440 约束内容，这里让 crumbbar 与表单同宽对齐。 */
.activity-editor-crumbbar {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto var(--sp-3);
}
.activity-editor-sub {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.ax-version {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font: 650 11px/1 var(--mono);
}

.ax-page {
  display: block;
  width: 100%;
  max-width: 1440px;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Keep the v6 form in normal flow so its full height contributes to the
   dedicated content scroller. Its behaviour hook is intentionally separate
   from the legacy Store editor selectors in admin.css. */
body:has(.ax-page) form.ax-page {
  display: block;
  height: auto;
  max-height: none;
  overflow: visible;
}

.ax-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.ax-main { min-width: 0; }

.ax-card,
.ax-rail-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ax-card + .ax-card { margin-top: 14px; }

.ax-card-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 62px;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--line);
}

.ax-card-head > div { min-width: 0; }
.ax-card-head h2 { margin: 0; font-size: 14.5px; font-weight: 680; line-height: 1.35; }
.ax-card-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.ax-ci {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.ax-ci svg { width: 16px; height: 16px; }
.ax-card-body { padding: 18px; }

.ax-card.is-primary {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.ax-card.is-primary::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.ax-card.is-primary > .ax-card-head {
  background: linear-gradient(90deg, var(--accent-soft), transparent 68%);
}

.ax-card.is-primary > .ax-card-head .ax-ci {
  background: var(--accent);
  color: var(--text-on-strong);
}

.ax-tag-mute {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ax-tag-mute { border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); }

.ax-runtime-save {
  min-height: 32px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-strong);
  font-size: 12px;
  font-weight: 700;
}

.ax-runtime-save:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.ax-runtime-save:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--accent-ring); }

.ax-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 16px;
}

.ax-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-grid > .span2 { grid-column: span 2; }
.ax-grid > .span-full { grid-column: 1 / -1; }

.ax-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

.ax-field > label,
.ax-field > .ax-label {
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 650;
}

/* 标签里可能带单位与说明图标，排成一行并让它们跟着文字基线走。
   `.ax-toggle-row` 是开关行，必须留在自己的 grid 布局里。 */
.ax-field > label:not(.ax-toggle-row) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ax-unit { color: var(--muted); font-weight: 500; }

.ax-hint { display: inline-flex; align-items: center; color: var(--muted); cursor: help; }
.ax-hint svg { width: 13px; height: 13px; }

.ax-field input:not([type="checkbox"]):not([type="radio"]),
.ax-field select,
.ax-field textarea,
.ax-worker-fields input,
.ax-worker-fields select,
.ax-proxy-fields input,
.ax-proxy-fields select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.ax-field textarea { min-height: 96px; resize: vertical; font-family: var(--mono); font-size: 12px; }

.ax-field input:focus,
.ax-field select:focus,
.ax-field textarea:focus,
.ax-worker-fields input:focus,
.ax-worker-fields select:focus,
.ax-proxy-fields input:focus,
.ax-proxy-fields select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

.ax-field input:disabled,
.ax-field select:disabled,
.ax-field textarea:disabled,
.ax-worker-fields input:disabled,
.ax-worker-fields select:disabled,
.ax-proxy-fields input:disabled,
.ax-proxy-fields select:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: not-allowed;
}

.ax-worker-fields .ax-field.is-disabled { opacity: 0.5; }

.ax-field-hint,
.ax-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.ax-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-soft);
}

.ax-segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.ax-segmented button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
  font-weight: 650;
}

/* 缓存模式那个原生控件同样只该藏在 DOM 里（真正带 name 的是它）。与 .ax-dt-native
   同一套四件事：① padding/border 清零让盒子真的 1px；② overflow/clip/clip-path 裁剪；
   ③ 全部 !important 防被泛化规则顶掉；④ opacity/pointer-events 兜底。 */
.ax-native-cache-mode {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* 缓存策略子块与上方「缓存模式 / 成功关键词」之间的虚线分隔。
   随缓存策略一起隐藏，所以挂在 [data-cache-setting] 上。 */
.ax-cache-divider {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 15px;
  border-top: 1px dashed var(--line-strong);
}

/* 执行 / 转发 Worker 上下堆叠，各自固定保留四列（模式 / 地区 / 标签 / 标签匹配）。
   不适用的控件只进入禁用态，避免切换模式或缓存策略时发生布局跳动。 */
.ax-worker-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.ax-worker-block { min-width: 0; }
.ax-worker-block + .ax-worker-block { padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.ax-worker-title { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 12px; }
.ax-worker-title strong { font-size: 12.5px; }
.ax-worker-title span { color: var(--muted); font-size: 10.5px; }

/* 转发 Worker 的状态徽标：锁 → 盾牌 + 「已开放」，与 v6 原型一致。 */
.ax-worker-title .ax-tag-mute {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 0;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.ax-worker-title .ax-tag-mute svg { width: 11px; height: 11px; }
.ax-worker-title .ax-tag-mute.is-open { color: var(--accent); }

.ax-worker-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.ax-worker-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

.ax-worker-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sign-execution-workspace .execution-controls > .sign-direct-worker-selector {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

/* 标签 + 标签匹配是同一个开关的两种取值方式，包成一组占两列，
   这样既保持一行四列的观感，又能让 JS 用一个 data-worker-selector-labels 同时启用/禁用两者。 */
.ax-worker-pair {
  display: grid;
  grid-column: span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.ax-proxy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ax-proxy-fields .ax-field:last-child { grid-column: 1 / -1; }

.ax-page .worker-picker-native { display: block; }
.ax-page .worker-picker-trigger:not([data-worker-label-picker-open]),
.ax-page .worker-selector-popover:not([data-worker-label-picker]) { display: none !important; }

/* 标签选择器的触发器是**顶替**原来的输入框的，所以必须长得跟它一样 —— 下面这组数值与
   `.ax-worker-fields input`（40px 高 / --radius-control 圆角 / --line-strong 边框 / 8px 11px 内边距）逐项对齐。
   admin.css 里那条基础 .worker-picker-trigger 是照任务页的 `.field input` 写的（38px / 5px / --line），
   在活动编辑页里会与邻居差出一个族系：矮 2px、更方、边框浅一档。
   两条都写在 `.ax-field` / `.ax-worker-fields` 下，任务页的弹窗（容器是 `.field`）不受影响。 */
.ax-field .worker-picker-trigger,
.ax-worker-fields .worker-picker-trigger {
  min-height: 40px;
  padding: 8px 11px;
  border-color: var(--line-strong);
  border-radius: var(--radius-control);
}

/* 空态显示的是 placeholder 文案（拿不到就用「选择标签」），字色与禁用态也跟输入框一致 */
.ax-field .worker-picker-trigger.is-empty,
.ax-worker-fields .worker-picker-trigger.is-empty { color: var(--muted); }

.ax-field .worker-picker-trigger:disabled,
.ax-worker-fields .worker-picker-trigger:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

.ax-fields-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ax-picker { min-width: 0; }
.ax-picker > label { display: block; margin-bottom: 6px; color: var(--text-soft); font-size: 12px; font-weight: 650; }

.ax-picker-button,
.ax-row-btn {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.ax-picker-button:hover,
.ax-picker-button:focus-visible,
.ax-row-btn:hover,
.ax-row-btn:focus-visible { border-color: var(--accent); text-decoration: none; }
.ax-picker-button > svg:first-child,
.ax-row-btn > svg:first-child { color: var(--accent); }
.ax-picker-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-picker-button > svg:last-child,
.ax-row-btn > svg:last-child { margin-left: auto; color: var(--muted); }

.ax-empty-fields {
  padding: 13px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}

.ax-rail {
  position: sticky;
  top: 16px;
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
}

.ax-rail-head {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.ax-rail-head .ax-ci { width: 27px; height: 27px; border-radius: 7px; }
.ax-rail-head h2 { margin: 0; font-size: 13px; }
.ax-rail-body { padding: 14px; }

.ax-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 700 10.5px/1 var(--mono);
}

.ax-state-pill.is-running { color: var(--success); background: var(--success-soft); }
.ax-state-pill.is-paused { color: var(--warning); background: var(--warning-soft); }
.ax-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.ax-next-run { display: grid; gap: 3px; }
.ax-next-run .k { color: var(--muted); font-size: 10.5px; }
.ax-next-run .v { color: var(--text); font: 650 13px/1.45 var(--mono); overflow-wrap: anywhere; }

.ax-mini-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 13px 0;
  padding: 13px 0;
  border-top: 1px dashed var(--line-strong);
  border-bottom: 1px dashed var(--line-strong);
}

.ax-mini-facts dt { color: var(--muted); font-size: 10px; }
.ax-mini-facts dd { margin: 2px 0 0; font-size: 12px; font-weight: 680; overflow-wrap: anywhere; }

.ax-big-btn {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--text-on-strong);
  cursor: pointer;
  font-weight: 680;
}

.ax-big-btn:hover { background: var(--accent-hover); text-decoration: none; }
/* 暂停与卡片上的启停按钮同色：可逆操作，用 PAUSED 胶囊的 warning，而不是 danger 红。 */
.ax-big-btn.is-stop { border: 1px solid var(--warning); background: var(--surface); color: var(--warning); }
.ax-big-btn.is-stop:hover { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); text-decoration: none; }
.ax-big-btn.is-danger { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.ax-big-btn:disabled { opacity: .55; cursor: not-allowed; }
.ax-rail-card.is-danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.ax-rail-card.is-danger > .ax-rail-head { background: var(--danger-soft); color: var(--danger); }
.ax-rail-card.is-danger > .ax-rail-head .ax-ci {
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: transparent;
  color: var(--danger);
}
.ax-rail-card.is-danger > .ax-rail-head .ax-ci svg { width: 15px; height: 15px; }

.ax-rail-note { margin-top: 10px; color: var(--muted); font-size: 10.5px; line-height: 1.5; }

.ax-toggle-list { display: grid; gap: 2px; }
.ax-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.ax-toggle-row:last-child { border-bottom: 0; }
.ax-toggle-row strong { display: block; font-size: 12px; }
.ax-toggle-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.ax-cache-isolation-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ax-cache-isolation-toggle > strong { color: var(--text-soft); font-size: 13px; font-weight: 600; }
.ax-cache-isolation-toggle:has(input:disabled) { cursor: not-allowed; opacity: .55; }

.ax-switch { position: relative; width: 38px; height: 21px; flex: 0 0 auto; }
.ax-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ax-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--switch-track); cursor: pointer; transition: background .16s ease; }
.ax-switch span::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: var(--switch-thumb); box-shadow: var(--shadow-sm); transition: transform .16s ease; }
.ax-switch input:checked + span { background: var(--accent); }
.ax-switch input:checked + span::after { transform: translateX(17px); }
.ax-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }

.ax-proxy-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }

.ax-savebar {
  position: fixed;
  z-index: 35;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 10px 30px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 -8px 28px rgb(var(--shadow-rgb) / 7%);
  backdrop-filter: blur(12px);
}

.ax-save-state { display: flex; align-items: center; gap: 7px; margin-right: auto; color: var(--muted); font-size: 11.5px; }
.ax-save-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ax-savebar .button,
.ax-savebar button { min-width: 0; min-height: 40px; }
.ax-savebar .primary { min-width: 150px; justify-content: center; }

/* 分段控件旁边那个原生 datetime-local：它才是真正带 name 的提交字段，必须留在 DOM 里，
   但绝不能露出来。只靠 1px + clip-path 是不够的 —— 通用 input 样式带来的 padding/border
   在 box-sizing: border-box 下会把 1px 的盒子撑成 18×14，一旦 clip-path 没生效
   （或被后续规则覆盖）就会在卡片左上角露出一个小方框。所以这里做三层：
   1) 清零 padding/border，让盒子真的只有 1px；
   2) overflow/clip/clip-path 全套裁剪（与 .worker-picker-native 保持一致）；
   3) opacity: 0 + pointer-events: none 兜底 —— 就算前两层全失效，也既看不见也点不到。 */
.ax-dt-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.ax-dt-field { grid-column: span 1; }
.ax-dt-box { display: grid; gap: 6px; min-width: 0; }
.ax-dt { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ax-dt-group { display: inline-flex; min-width: 0; min-height: 40px; align-items: center; justify-content: center; gap: 2px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); }
.ax-dt-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ax-dt-seg { width: 25px !important; min-width: 0 !important; min-height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important; font: 650 12px/1 var(--mono) !important; text-align: center; }
.ax-dt-seg.is-year { width: 42px !important; }
.ax-dt-seg::selection { background: var(--accent); color: var(--text-on-strong); }
.ax-dt-sep { color: var(--muted); font: 11px/1 var(--mono); user-select: none; }
.ax-dt-now { min-height: 40px; padding: 7px 10px; white-space: nowrap; }
.ax-dt-now svg { width: 15px; height: 15px; }
/* 允许留空的字段才有清空按钮；样式与「现在」同构，避免多出第三种按钮语言。 */
.ax-dt-clear { min-height: 40px; padding: 7px 10px; white-space: nowrap; }
.ax-dt-clear svg { width: 15px; height: 15px; }
.ax-dt-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.ax-dt-state svg { width: 13px; height: 13px; }
.ax-dt-state.is-expired { color: var(--warning); font-weight: 650; }
.ax-dt-state.is-ok { color: var(--success); }

html[data-theme="dark"] .ax-page input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .ax-page input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.82); }

@media (max-width: 1280px) {
  .ax-workspace { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 1100px) {
  .ax-workspace { grid-template-columns: minmax(0, 1fr); }
  .ax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-worker-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-rail-card:first-child { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .ax-savebar { left: 0; }
}

@media (max-width: 860px) {
  body:has(.ax-page) .content { padding: 20px 18px 92px; }
  .ax-savebar { left: 0; padding-right: 18px; padding-left: 18px; }
  .ax-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body:has(.ax-page) .content { padding: 16px 12px 86px; }
  .ax-grid,
  .ax-grid.is-2,
  .ax-grid.is-4 { grid-template-columns: minmax(0, 1fr); }
  .ax-grid > .span2,
  .ax-grid > .span3 { grid-column: auto; }
  .ax-worker-layout { grid-template-columns: minmax(0, 1fr); }
  .ax-worker-block + .ax-worker-block { padding: 16px 0 0; border-top: 1px dashed var(--line-strong); border-left: 0; }
  .ax-worker-fields,
  .ax-worker-pair { grid-template-columns: minmax(0, 1fr); }
  .ax-worker-pair { grid-column: auto; }
  .ax-rail { display: block; }
  .ax-rail-card { margin-top: 12px; }
  .ax-rail-card:first-child { margin-top: 0; }
  .ax-savebar { min-height: 60px; padding: 9px 12px; }
  .ax-save-state { max-width: 150px; line-height: 1.3; }
  .ax-savebar .primary { min-width: 138px; }
  .ax-dt { flex-wrap: wrap; }
  .ax-dt-group { flex: 1 1 136px; }
  .ax-dt-now { flex: 0 0 auto; }
}

@media (max-width: 430px) {
  .ax-card-head { padding-right: 14px; padding-left: 14px; }
  .ax-card-body { padding: 15px 14px; }
  .ax-card-head .ax-runtime-save { align-self: center; }
  .ax-fields-grid { grid-template-columns: minmax(0, 1fr); }
  .ax-worker-fields,
  .ax-worker-pair,
  .ax-proxy-fields { grid-template-columns: minmax(0, 1fr); }
  .ax-worker-pair,
  .ax-proxy-fields .ax-field:last-child { grid-column: auto; }
  .ax-save-state { font-size: 10.5px; }
  .ax-savebar .button:not(.primary) { width: 40px; padding: 0; font-size: 0; }
  .ax-savebar .button:not(.primary) svg { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-page *,
  .ax-page *::before,
  .ax-page *::after { scroll-behavior: auto !important; transition: none !important; }
}