
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  body.is-phone .mode-pill[data-mode="design"] { opacity: 1; }
  body.is-phone .mode-pill .pill-desktop { display: none; }
}

#designModeRoot.acko-touch { position: relative; overflow: hidden; padding-bottom: 62px; }
#designModeRoot.acko-touch .control-strip,
#designModeRoot.acko-touch #colTools { display: none !important; }

#designModeRoot.acko-touch .design-toolbar { margin: 8px 8px 0; padding: 6px; gap: 6px; flex-wrap: nowrap; align-items: center; }
#designModeRoot.acko-touch .design-toolbar .field-label,
#designModeRoot.acko-touch #designSaveBtn { display: none; }
#designModeRoot.acko-touch .design-toolbar .cut-select-wrap { flex: 1 1 0; min-width: 0; margin: 0; }
#designModeRoot.acko-touch .design-toolbar .design-browse-btn,
#designModeRoot.acko-touch .design-toolbar .cut-material-btn { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#designModeRoot.acko-touch .design-toolbar .toolbar-jumps { flex: 0 0 auto; margin: 0; }

.acko-actions { display: flex; gap: 6px; margin: 6px 8px 0; align-items: center; flex: 0 0 auto; }
.acko-actions .btn { flex: 0 0 auto; min-height: 36px; padding-left: 12px; padding-right: 12px; }
.acko-actions #btnCut { flex: 1 1 auto; max-width: 160px; }
.acko-actions #btnReset { margin-left: auto; }

#designModeRoot.acko-touch .workspace { display: flex; flex: 1 1 auto; min-height: 0; margin: 6px 8px 0; padding: 0; gap: 0; grid-template-columns: none; }
#designModeRoot.acko-touch .center-col { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; margin: 0; }
#designModeRoot.acko-touch #paneDesign { flex: 1 1 auto; min-height: 0; height: auto; }
#designModeRoot.acko-touch #paneDesign .pane-title,
#designModeRoot.acko-touch #paneDesign [data-maximize] { display: none; }
#designModeRoot.acko-touch #paneDesign .pane-head { justify-content: center; }

.acko-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62px; z-index: 20;
  display: flex; flex-direction: column;
  background: var(--bg-1); color: var(--text-0);
  border-top: 1px solid var(--border-soft); border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
  transition: height 0.2s ease;
}
.acko-sheet[data-state="half"] { height: 55%; }
.acko-sheet[data-state="full"] { height: calc(100% - 8px); }
.acko-sheet.dragging { transition: none; }
.acko-sheet-handle { flex: 0 0 auto; padding: 7px 14px 10px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.acko-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--text-3); opacity: 0.6; margin: 0 auto 7px; }
.acko-peek { font: 600 12.5px var(--font-mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acko-peek-side { color: var(--text-2); }
.acko-peek-angle { color: var(--accent); }
.acko-peek .ix-frac { color: var(--rust-bright); }
.acko-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 8px 8px; }
.acko-sheet[data-state="peek"] .acko-sheet-body { visibility: hidden; }
.acko-sheet-body #colInstructions { display: flex; width: auto; max-width: none; height: 100%; min-height: 0; margin: 0; }
.acko-sheet-body #colInstructions [data-maximize] { display: none; }

.acko-menu-wrap { display: inline-flex; }
.acko-menu-btn .acko-caret { opacity: 0.7; font-size: 0.85em; }
.acko-menu {
  display: none; position: fixed; z-index: 70;
  flex-direction: column; gap: 6px; padding: 8px;
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto;
}
.acko-menu.open { display: flex; }
.acko-menu > .view-chip { align-self: flex-start; }
.acko-menu-sep { height: 1px; background: var(--border-soft); margin: 2px 0; }
.acko-export-list { display: flex; flex-direction: column; }
.acko-menu-item { text-align: left; padding: 10px 10px; border-radius: 8px; border: none; background: transparent; color: var(--text-0); font-size: 13px; cursor: pointer; }
.acko-menu-item:hover, .acko-menu-item:active { background: var(--bg-2); }
.acko-menu-tool #toolToggle { display: flex; flex-wrap: wrap; }
.acko-menu-tool #concaveParams .concave-row { flex-wrap: wrap; }
.acko-menu-tool .mast-controls-body { display: block; padding: 0; min-height: 0; height: auto; }
.acko-menu-tool .mast-controls-body > :not(.mast-fields),
.acko-menu-tool .mast-fields > :not(#concaveParams) { display: none !important; }
.acko-menu-tool .mast-controls-body:not(.tool-concave) { display: none; }

.acko-rails-layer {
  position: absolute;
  left: 8px; right: 8px; top: 48px; bottom: 56px;
  display: flex; justify-content: space-between; align-items: stretch;
  pointer-events: none;
  z-index: 3;
}
.acko-rails-layer.acko-short { display: none; }
.acko-panel {
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-1) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 16%, transparent);
  min-height: 0;
  transition: background 0.15s;
}
.acko-panel:hover, .acko-rails-layer.acko-busy .acko-panel { background: color-mix(in srgb, var(--bg-1) 78%, transparent); }
.acko-head { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.acko-right .acko-head { justify-content: flex-end; }
.acko-chip, .acko-seg button, .acko-seg .pane-chip {
  font: 600 10.5px var(--font-mono, monospace);
  padding: 4px 7px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--chip-float-bg); color: var(--chip-float-text);
  cursor: pointer; white-space: nowrap; line-height: 1.2;
}
.acko-seg { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.acko-seg button.active, .acko-seg .pane-chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.acko-rails { display: flex; gap: 6px; flex: 1; min-height: 0; }
.acko-right .acko-rails { justify-content: flex-end; }
.acko-rail {
  display: flex; flex-direction: column; align-items: stretch;
  width: 44px; min-height: 0;
  transition: width 0.12s;
}
.acko-val {
  font: 600 11.5px var(--font-mono, monospace);
  color: var(--text-0); background: transparent; border: none; padding: 2px 0 4px;
  text-align: center; cursor: text; white-space: nowrap; overflow: visible;
}
.acko-val.bad { color: var(--rust-bright); }
.acko-val-input {
  font: 600 12px var(--font-mono, monospace); width: 64px; align-self: center;
  padding: 2px 4px; border-radius: 6px; border: 1px solid var(--accent); background: var(--bg-1); color: var(--text-0);
  text-align: center; margin-bottom: 4px;
}
.acko-lab { font-size: 9.5px; color: var(--text-2); text-align: center; padding-top: 3px; white-space: nowrap; }
.acko-track {
  flex: 1; min-height: 0; position: relative; display: block; width: 100%;
  touch-action: none; cursor: ns-resize;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-2) 45%, transparent);
}
canvas.acko-track { height: 100%; }
.acko-vern .acko-track { width: 14px; align-self: center; background: color-mix(in srgb, var(--text-3) 30%, transparent); overflow: visible; }
.acko-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent) 45%, transparent); pointer-events: none; }
.acko-ticks { position: absolute; left: -6px; width: calc(100% + 12px); top: 0; height: 100%; pointer-events: none; }
.acko-thumb {
  position: absolute; left: 50%; top: 0; width: 26px; height: 14px; margin: -7px 0 0 -13px;
  border-radius: 7px; background: var(--accent); border: 2px solid var(--bg-1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.acko-vern.locked .acko-thumb { background: var(--gold); }
.acko-rail.is-disabled { opacity: 0.45; }
.acko-vstrip { position: fixed; z-index: 60; pointer-events: none; display: none; }
.acko-vstrip.on { display: block; }
body.is-phone .acko-desktop-only { display: none; }

.acko-rails-layer.acko-slim .acko-rail { width: 33px; }
.acko-rails-layer.acko-slim .acko-rail.active { width: 46px; }
.acko-rails-layer.acko-slim .acko-panel { padding: 5px 4px; gap: 4px; }
.acko-rails-layer.acko-slim .acko-rails { gap: 3px; }
.acko-rails-layer.acko-slim .acko-val { font-size: 10px; letter-spacing: -0.3px; }
.acko-rails-layer.acko-slim .acko-head { flex-direction: column; align-items: stretch; }
.acko-rails-layer.acko-slim .acko-seg { flex-direction: column; }
.acko-rails-layer.acko-slim .acko-chip, .acko-rails-layer.acko-slim .acko-seg button, .acko-rails-layer.acko-slim .acko-seg .pane-chip { padding: 3px 5px; font-size: 9.5px; text-align: center; }

#designModeRoot.acko-desk .control-strip { display: none !important; }
.acko-desk-actions { display: flex; gap: 6px; align-items: center; margin-left: 6px; }
.acko-desk-actions .btn { white-space: nowrap; }
.acko-desk-actions #btnCut { min-width: 96px; }
.acko-desk-actions #btnReset { margin-left: 6px; }
#designModeRoot.acko-desk .view-toolbar #depthUnitToggle { pointer-events: auto; align-self: center; }
#designModeRoot.acko-desk .design-toolbar { flex-wrap: nowrap; }
#designModeRoot.acko-desk .design-toolbar .cut-select-wrap { flex: 0 1 auto; min-width: 0; }
#designModeRoot.acko-desk .design-toolbar .design-browse-btn,
#designModeRoot.acko-desk .design-toolbar .cut-material-btn { min-width: 120px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#designModeRoot.acko-desk .design-toolbar > .btn,
#designModeRoot.acko-desk .design-toolbar .toolbar-jumps,
#designModeRoot.acko-desk .acko-desk-actions { flex: 0 0 auto; }
@media (max-width: 1300px) {
  #designModeRoot.acko-desk .design-toolbar .field-label { display: none; }
}

.acko-toolcard, .acko-jog { display: none; }
.acko-rails-layer.acko-curved .acko-jog { display: flex; }
.acko-rails-layer.acko-curved .acko-toolcard {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 4px;
  align-self: flex-start; pointer-events: auto;
  flex: 0 1 auto; min-width: 0; max-width: 340px; margin: 0 6px;
  padding: 5px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg-1) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.acko-tchip {
  font: 600 10.5px var(--font-mono, monospace); padding: 4px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border-soft); background: var(--chip-float-bg); color: var(--chip-float-text); cursor: pointer;
}
.acko-tchip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.acko-tsym { opacity: 0.85; font-family: var(--font-ui, system-ui); font-size: 11.5px; }
.acko-jog .acko-lab { font-family: var(--font-ui, system-ui); }
.acko-rails-layer.acko-slim .acko-tchip { padding: 3px 5px; font-size: 9.5px; }

#designModeRoot.acko-touch.acko-land {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px; padding: 8px; overflow: hidden;
}
#designModeRoot.acko-touch.acko-land-tab { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }
#designModeRoot.acko-touch.acko-land-phone { grid-template-columns: minmax(0, 1fr) minmax(270px, 36%); gap: 6px; padding: 6px 8px 8px; }
#designModeRoot.acko-land > * { min-width: 0; }
#designModeRoot.acko-land > .design-toolbar { grid-row: 1; margin: 0; }
#designModeRoot.acko-land > .acko-actions { grid-row: 2; margin: 0; }
#designModeRoot.acko-land > .acko-sheet { grid-row: 3; }
#designModeRoot.acko-land > .workspace { grid-row: 1 / -1; margin: 0; }
#designModeRoot.acko-land-tab > .design-toolbar,
#designModeRoot.acko-land-tab > .acko-actions,
#designModeRoot.acko-land-tab > .acko-sheet { grid-column: 1; }
#designModeRoot.acko-land-tab > .workspace { grid-column: 2; }
#designModeRoot.acko-land-phone > .design-toolbar,
#designModeRoot.acko-land-phone > .acko-actions,
#designModeRoot.acko-land-phone > .acko-sheet { grid-column: 2; }
#designModeRoot.acko-land-phone > .workspace { grid-column: 1; }

#designModeRoot.acko-land-tab > .design-toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
#designModeRoot.acko-land-tab > .design-toolbar .cut-select-wrap { flex: 0 0 auto; }
#designModeRoot.acko-land-tab > .design-toolbar .toolbar-jumps { align-self: flex-end; }
#designModeRoot.acko-land-phone > .design-toolbar { padding: 4px; gap: 4px; }
#designModeRoot.acko-land-phone > .design-toolbar .toolbar-jumps { display: none; }
#designModeRoot.acko-land-phone .acko-actions .btn { min-height: 34px; padding-left: 9px; padding-right: 9px; }

#designModeRoot.acko-land > .acko-sheet,
#designModeRoot.acko-land > .acko-sheet[data-state] {
  position: relative; left: auto; right: auto; bottom: auto; z-index: auto;
  height: auto; min-height: 0; transition: none; box-shadow: none;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg, 14px);
}
#designModeRoot.acko-land .acko-sheet-handle { cursor: default; touch-action: auto; padding: 8px 12px 6px; border-bottom: 1px solid var(--border-soft); }
#designModeRoot.acko-land .acko-sheet-grip { display: none; }
#designModeRoot.acko-land .acko-sheet[data-state="peek"] .acko-sheet-body { visibility: visible; }
#designModeRoot.acko-land .acko-sheet-body { padding: 0 4px 6px; }
#designModeRoot.acko-land .acko-sheet-body #colInstructions .pane { border: none; box-shadow: none; background: transparent; }

#designModeRoot.acko-land-phone #paneDesign > .pane-head { display: none; }
#designModeRoot.acko-land-phone #paneDesign .view-toolbar .view-chip-row { flex-wrap: wrap; row-gap: 6px; }
#designModeRoot.acko-land-phone #paneDesign .view-toolbar .pane-chip-row { display: inline-flex; gap: 4px; margin: 0; pointer-events: auto; }
#designModeRoot.acko-land-phone #paneDesign .view-toolbar .pane-chip-row [data-maximize] { display: none; }
#designModeRoot.acko-land-phone .acko-left .idx-dir-row { display: none; }

@media (max-width: 1100px) {
  #designModeRoot.acko-desk .workspace:not(.max-instructions):not(.max-design):not(.max-tools) {
    grid-template-columns: minmax(230px, 30%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  #designModeRoot.acko-desk .workspace:not(.max-instructions):not(.max-design):not(.max-tools) > #colInstructions { grid-column: 1; grid-row: 1; flex-direction: column; flex-wrap: nowrap; }
  #designModeRoot.acko-desk .workspace:not(.max-instructions):not(.max-design):not(.max-tools) > .center-col { grid-column: 2; grid-row: 1 / -1; }
  #designModeRoot.acko-desk .workspace:not(.max-instructions):not(.max-design):not(.max-tools) > #colTools { grid-column: 1; grid-row: 2; flex-direction: column; flex-wrap: nowrap; }
}

[data-idx-dir-row] [data-idx-dir]:not(.active) { display: none !important; }
.acko-pending {
  flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg, 14px);
  background: var(--bg-1); color: var(--text-0); font: 600 12.5px/1.45 var(--font-mono, monospace);
  overflow-wrap: anywhere;
}
.acko-pending .ix-frac { color: var(--rust-bright); }

.acko-tunit { align-self: center; font: 600 10.5px var(--font-mono, monospace); color: var(--text-2); padding: 0 2px; }
