/* AXIAL desktop workbench. Layout changes preserve the editor's interaction states. */
#tube-canvas:focus { outline: none; }
#tube-canvas:focus-visible { outline: 2px solid #58b9ad; outline-offset: -3px; }
.modify-fields > .modify-point-options {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 8px;
  border: 1px solid #a6c2cd;
  border-radius: 5px;
  background: #e8f2f6;
}
.modify-point-options[open] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.modify-point-options > summary {
  grid-column: 1 / -1;
  min-height: 28px;
  padding: 5px 0;
  line-height: 1.4;
  font-size: 11px;
}
.modify-point-options > summary::marker { color: #398d85; }
.modify-point-options[open] > summary { border-bottom: 1px solid #b9d0d9; padding-bottom: 8px; }
.cad-tube-cuts {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid #9cbecb;
}
.cad-tube-cuts .add-cuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.cad-tube-cuts .add-cuts button {
  min-width: 0;
  min-height: 46px;
  gap: 5px;
}
.cad-tube-cuts .add-cuts button > span { font-size: 22px; }
.cad-tube-cuts > .order-open {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin: 2px 0 0;
}
.cad-tube-cuts > .order-open > span:last-child { font-size: 11px; }
.cad-tube-cuts > .order-open > span:last-child:after { content: none; }
#mobile-add-toggle.cad-draw-launch { display: flex; }

@media (min-width: 761px) {
  body.studio-app {
    --panel: #182431;
    --tube-dock-width: clamp(280px, 22vw, 330px);
    color-scheme: dark;
    color: #e4edf3;
    background: #101822;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
  }

  .studio-app *, .studio-app *::before, .studio-app *::after {
    scrollbar-width: thin;
    scrollbar-color: #465a6b transparent;
  }
  .studio-app button, .studio-app input, .studio-app select, .studio-app summary {
    font-family: inherit;
  }
  .studio-app button, .studio-app select, .studio-app input:not([type=range]):not([type=checkbox]) {
    color: #e4edf3;
    background: #202f3e;
    border-color: #3c5062;
    border-radius: 6px;
    box-shadow: none;
  }
  .studio-app button {
    min-height: 34px;
    font-weight: 500;
    transition: background-color .12s, border-color .12s;
  }
  .studio-app button:hover:not(:disabled) {
    background: #2a4050;
    border-color: #658296;
    color: #fff;
  }
  .studio-app button:disabled {
    opacity: .42;
    cursor: not-allowed;
  }
  .studio-app :is(button, input, select, summary, a):focus-visible {
    outline: 2px solid #67e1ce;
    outline-offset: 2px;
  }
  .studio-app button[aria-pressed=true],
  .studio-app button[aria-expanded=true] {
    background: #183f42;
    border-color: #38c8b3;
    color: #bff9ee;
  }
  .studio-app input[type=checkbox], .studio-app input[type=range] {
    accent-color: #38c8b3;
  }
  .studio-app a { color: #7ddfd3; }

  .workspace-topbar {
    min-height: 48px;
    padding: 7px 12px;
    gap: 18px;
    background: #101822;
    border-color: #2d4051;
  }
  .workspace-topbar .tube-header { gap: 14px; }
  .studio-app .tube-brand img { width: 32px; height: 32px; }
  .studio-app .tube-brand > span { color: #ecf6f9; font-size: 12px; letter-spacing: 1px; }
  .tube-brand strong { color: #68dccb; }
  .tube-header nav > a {
    color: #a5bac9;
    font-size: 12px;
    font-weight: 500;
  }
  .tube-header nav > a[aria-current] { color: #a5bac9; }
  .project-name { max-width: 310px; }
  .project-name input { font-size: 13px; padding: 7px 10px; min-height: 34px; }
  .project-name input:focus { background: #1b2c3a; }
  .project-actions { gap: 6px; }
  .project-actions button { padding: 6px 12px; font-size: 12px; }
  .project-actions #save-project {
    color: #082923;
    background: #38c8b3;
    border-color: #38c8b3;
    font-weight: 650;
  }
  .project-actions #save-project:hover { background: #65ddca; border-color: #65ddca; }
  .project-toolbar > p { color: #a2b9c8; }
  .project-toolbar > p[data-error=true] { color: #ffe0be; background: #473322; border-color: #be8a52; }

  main#studio { padding: 0 10px 0; gap: 8px; }
  .workspace-ribbon {
    min-height: 46px;
    padding: 6px 8px;
    gap: 12px;
    background: #182431;
    border: 1px solid #304353;
    border-radius: 8px;
  }
  .panel-navigation { gap: 5px; }
  .panel-navigation button { min-height: 34px; font-size: 12px; font-weight: 600; }
  .panel-navigation button[aria-pressed=true] { box-shadow: inset 0 -2px #38c8b3; }
  body[data-cad=true] #mobile-add-toggle.cad-draw-launch { display: none; }
  .workspace-ribbon > .cad-draw-launch { grid-column: 3; grid-row: 1; justify-self: start; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; }
  .cad-tube-cuts { border-color: #496271; }
  .add-cuts { gap: 5px; }
  .add-cuts button { min-height: 34px; padding: 5px 9px; font-size: 12px; }
  .add-cuts button > span { color: #91ddd2; font-size: 21px; }
  .order-open { font-size: 12px; padding: 6px 12px; min-height: 34px; }
  .order-open > span:first-child { color: #7bdccb; }
  .studio-app .order-open:hover:not(:disabled) { background: #2a4050; color: #fff; border-color: #658296; }
  body.studio-app .studio-grid { gap: 10px; }
  .setup-panel, .inspector-panel {
    background: #182431;
    border-color: #304353;
    border-radius: 8px;
    scroll-padding-block: 52px 18px;
  }
  .dock-heading {
    background: #1c2c3a;
    border-color: #344b5c;
    color: #bdcfdc;
    min-height: 39px;
    padding: 10px 13px;
    font-size: 10px;
    letter-spacing: 1.4px;
  }
  .studio-app[data-active-panel=setup] .setup-panel > .dock-heading,
  .studio-app[data-active-panel=inspector] .inspector-panel > .dock-heading {
    box-shadow: inset 3px 0 #38c8b3;
  }
  .dock-tag { color: #89dcd1; background: #163b3e; border-color: #346363; }
  .panel, .cut-editor { padding: 14px; background: #182431; border-color: #314655; }
  .panel-heading, .property-group { border-color: #314655; }
  .panel-heading h2, .cut-editor h2 { color: #edf4f8; font-size: 16px; letter-spacing: 0; }
  .step, .unit-chip { color: #9cb8c9; }
  .unit-chip { background: #223747; border-color: #3d586a; }
  .field label, .property-group legend { color: #c7d8e4; font-size: 12px; }
  .field input, .field select { min-height: 38px; padding: 8px 10px; font-size: 14px; }
  .field input:focus, .field select:focus { border-color: #38c8b3; }
  .input-unit > span { color: #9fb8c7; }
  .field-help, .micro-copy, .simulation-note, .position-hint,
  .cut-editor .field-help, .profile-caption, .bevel-explanation, .bevel-explanation p {
    color: #9eb4c4;
    border-color: #344b5c;
    font-size: 11px;
    line-height: 1.55;
  }
  .shape-picker { gap: 6px; }
  .shape-picker button { min-height: 59px; font-size: 11px; }
  .shape-picker svg { color: inherit; width: 28px; height: 28px; }
  .catalog-quality, .catalog-selected, .catalog-technical, .profile-catalog {
    color: #b7cad7;
    border-color: #365264;
    background: #142331;
  }
  .catalog-quality[data-quality=verified] { color: #b2ead8; background: #163b34; border-color: #386657; }
  .profile-catalog summary, .catalog-measurement, .catalog-body label { color: #c3d6e3; }
  .catalog-technical strong { color: #d9e7ef; }
  .catalog-technical a { color: #7ddfd3; }
  .operation-list { gap: 7px; }
  .operation-item { min-height: 64px; padding: 10px; border-color: #344c5c; }
  .operation-item strong { color: #e4edf3; font-size: 12px; }
  .operation-item small { color: #9bb5c6; font-size: 11px; }
  .operation-item[aria-pressed=true] { box-shadow: inset 3px 0 #38c8b3; }
  .operation-item[data-invalid=true] { border-color: #dfa867; }
  .operation-sequence { color: #bed1df; background: #283f50; }
  .operation-icon { color: #8bdccc; background: #183d40; }
  .cut-actions { gap: 5px; }
  .cut-actions button { min-height: 34px; font-size: 11px; }
  .bevel-limit { color: #b7d5d8; }
  .bevel-status { color: #a6dbd2; }
  .bevel-status[data-invalid=true] { color: #ffc88c; }
  .field[data-dimension-focus=true] label { color: #8bf1dc; }
  .field[data-dimension-focus=true] input { background: #163b3e; outline-color: #53d6c0; box-shadow: none; }
  .field input[aria-invalid=true], .field[data-dimension-focus=true] input[aria-invalid=true] {
    color: #ffe3d7; background: #492e2c; border-color: #e59677; outline-color: #e59677;
  }
  .studio-error { background: #493421; border-color: #bd8951; color: #ffe1bf; }
  .studio-error button { background: #65452c; border-color: #bb895e; color: #fff1df; }

  .viewport-card { border-color: #304353; border-radius: 8px; box-shadow: none; --tube-camera-top: 44px; }
  .viewport-top { background: #1b2a38; border-color: #314858; min-height: 44px; padding: 5px 9px; gap: 8px; }
  .viewport-top h2 { color: #dcebf3; font-size: 13px; }
  .scene-switch { border-color: #3b5262; background: #101e2a; }
  .scene-switch button { min-height: 30px; font-size: 12px; }
  .cad-toggle { font-size: 12px; min-height: 32px; }
  .cad-toggle b { color: #8edbd1; background: #214445; }
  .mobile-camera-toggle { width: auto; min-width: 76px; gap: 6px; padding: 5px 8px; }
  .camera-button-text { font-size: 11px; }
  .viewport-options > summary, .simulation-options > summary {
    color: #c6d9e6; background: #223646; border: 1px solid #3c5264; border-radius: 5px; font-size: 11px;
  }
  .viewport-options > summary { min-height: 32px; padding: 6px 9px; }
  .camera-toolbar, .workspace-popover {
    color: #d2e3ec; background: #1c2d3c; border-color: #4b6577; box-shadow: 0 8px 24px #0005;
  }
  .camera-toolbar { padding: 10px; gap: 8px; }
  .camera-toolbar button { font-size: 12px; padding: 6px 9px; }
  .camera-presets { gap: 5px; }
  .camera-zoom { flex-wrap: wrap; gap: 5px; }
  .camera-help, .camera-help strong { color: #b0c9d8; }
  .shortcut-help { padding-top: 10px; border-top: 1px solid #41586a; line-height: 1.8; color: #b7cbd9; }
  .shortcut-help kbd { padding: 2px 5px; border: 1px solid #5b7283; border-radius: 4px; background: #102330; color: #e4f5fa; font: 11px "Segoe UI", sans-serif; }
  .scene-label strong { color: #e8f1f7; }
  .scene-label small, .scene-legend { color: #a9bfcd; }

  .cad-toolbar { background: #182b39; border-color: #365363; padding: 6px 9px; }
  .cad-tools { gap: 6px; }
  .cad-face-navigation { flex: 0 0 340px; min-width: 340px; max-width: 340px; background: #152b38; border-color: #3c5668; }
  .cad-face-navigation > button, .cad-face-navigation #cad-align,
  .cad-face-navigation #cad-isolate-surface { width: 28px; min-width: 28px; padding-inline: 3px; }
  .cad-face-navigation #cad-face-prev, .cad-face-navigation #cad-face-next {
    background: #243c4c; border-color: #4b6678; color: #c8e8ef;
  }
  .cad-face-navigation > select { font-size: 12px; min-height: 34px; min-width: 180px; }
  .cad-tools #cad-select { width: auto; min-width: 92px; font-size: 11px; padding: 5px 8px; }
  #cad-select:after { content: none; }
  .cad-command-toggles button { font-size: 12px; background: #203746; border-color: #496271; }
  .cad-command-ribbon { background: #1b2e3c; border-color: #4d697a; box-shadow: 0 10px 24px #0005; }
  .cad-group-label { color: #8fcfc8; font-size: 11px; letter-spacing: 1px; }
  .cad-command-group button { background: #243c4c; border-color: #4b6678; color: #dce9f0; min-height: 46px; font-size: 12px; }
  .cad-ribbon-close { background: #203646; border-color: #496271; }
  .cad-toolbar #cad-instructions { color: #bad2df; background: #172b38ed; }
  .cad-toolbar .cad-reference { color: #9edbcf; }
  .sketch-workflow { color: #b8d0dc; background: #132632; border-color: #355767; padding: 6px 8px; gap: 8px; }
  .sketch-layer-controls { color: #b8d0dc; }
  #sketch-status { color: #9ec7ce; font-size: 11px; }
  #sketch-apply, .studio-app .dialog-actions .dialog-primary {
    color: #092c27; background: #38c8b3; border-color: #38c8b3; font-weight: 600;
  }
  #sketch-apply:hover:not(:disabled), .studio-app .dialog-actions .dialog-primary:hover:not(:disabled) {
    color: #092c27; background: #65ddca; border-color: #65ddca;
  }
  .cad-modify-panel, .dimension-menu, .dimension-entry {
    background: #1b2d3b; color: #d6e6ef; border-color: #4b6779; box-shadow: 0 6px 20px #0005;
  }
  .modify-heading, .modify-check, .modify-fields label, .modify-pick { color: #c4d9e5; }
  .modify-fields > .modify-point-options { background: #162936; border-color: #3d596b; }
  .modify-point-options > summary { color: #bed6df; }
  .modify-point-options > summary::marker { color: #7dcfc1; }
  .modify-point-options[open] > summary { border-color: #3d596b; }

  .simulation-panel { background: #182431; border-color: #314858; padding: 8px 11px 0; }
  .simulation-heading { margin-bottom: 7px; }
  .simulation-heading p { color: #b8cbd8; font-size: 11px; }
  .simulation-heading .step { color: #91b4c7; }
  #simulation-percent { color: #79e0cc; }
  .transport { gap: 7px; }
  .transport .play-button { background: #38c8b3; border-color: #38c8b3; color: #092c27; min-height: 36px; font-size: 13px; font-weight: 650; }
  .transport .play-button:hover:not(:disabled) { background: #65ddca; border-color: #65ddca; color: #092c27; }
  .transport > button { min-height: 36px; }
  .transport .speed-control { color: #a5bece; font-size: 11px; }
  .transport .speed-control select { min-height: 34px; }
  .timeline { margin-block: 8px; }
  .timeline > span { color: #abc4d3; font-size: 12px; }
  .axis-readouts { border-color: #324a5a; }
  .axis-readouts > span { color: #90aabc; border-color: #324a5a; font-size: 9px; letter-spacing: .6px; padding: 8px; }
  .axis-readouts strong { color: #e4f0f7; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .axis-readouts > span:last-child strong { color: #8be0ca; font-size: 12px; }
  .physics-controls, .sound-controls { border-color: #476071; color: #c1d3de; }
  .physics-controls > span, .sound-controls > span { color: #9fbccc; }
  .project-metrics { height: 27px; min-height: 27px; gap: 20px; padding-inline: 4px; }
  .project-metrics span { color: #8aa6b9; font-size: 8px; }
  .project-metrics strong { color: #c9dde8; font-size: 11px; }

  .studio-dialog { color: #dbe8ef; background: #1b2a38; border-color: #516b7e; box-shadow: 0 20px 65px #0007; }
  .studio-dialog::backdrop { background: #060e18a6; }
  .dialog-heading h2 { color: #e5f0f6; }
  .dialog-description, .studio-dialog p, .studio-dialog label { color: #b8cedb; }
  .cut-order-row { color: #d5e5ee; background: #172735; border-color: #3c5566; }
  .cut-order-row[data-selected=true] { background: #163c3d; border-color: #38c8b3; }
  .order-number { background: #2b495a; color: #d0e9f2; }
  .order-feature, .order-feature small { color: #bad1df; }
  .order-note { background: #203c49; border-color: #6abeb5; color: #c0dedf; }
  .order-status { color: #8ddbc6; }
  .order-view { color: #a1cbdb !important; }
  .dimension-note, .dimension-progress, .sketch-check-more { color: #b3cbd8; }
  .profile-catalog > summary small, .examples button small,
  .catalog-technical > summary, .catalog-measurement > summary,
  .dimension-menu p, .dimension-entry small, .modify-fields small {
    color: #a4becf;
  }
  .catalog-quality[data-quality=estimated] { color: #efbe83; }
  .catalog-quality[data-quality=measured] { color: #91d8bf; }
  .cad-tools #cad-multi-select { color: #d7e8ef; background: #203746; border-color: #496271; }
  .cad-tools #cad-multi-select[aria-pressed=true], #cad-isolate-surface[aria-pressed=true] {
    color: #bff9ee; background: #183f42; border-color: #38c8b3;
  }
  .dimension-tools > summary { color: #c6d9e6; background: #223646; border-color: #3c5264; }
  .cad-reference-options > summary { width: 30px; min-height: 34px; color: #c6d9e6; background: #223646; border-color: #3c5264; }
  .cad-reference-options[data-active=true] > summary { background: #183f42; border-color: #38c8b3; color: #bff9ee; }
  .cad-reference-menu, .cad-context-menu { color: #d6e6ef; background: #1b2d3b; border-color: #4b6779; }
  .cad-reference-menu small, .cad-context-menu > span { color: #a4becf; border-color: #41586a; }
  .cad-modify-panel .modify-actions { background: #1b2d3b; border-color: #4b6779; }
  .cad-command-field > span, .cad-command-field textarea { background: #142535; color: #dceaf2; border-color: #4a6578; }
  .cad-command-field small { color: #a3bdcd; }
  .cad-quick-edit small { color: #a8c1cf; }
  .cad-quick-edit button { background: #214a48 !important; border-color: #53b8a8 !important; color: #d7fff3 !important; }
  .operation-item[data-grouped=true] .operation-sequence:after { color: #83d8c8; }
  #cad-command-feedback { color: #aee7ce; background: #193b33; border-color: #43816a; }
  #cad-command-feedback[data-error=true] { color: #ffccba; background: #472c29; border-color: #b87760; }
  .studio-error p { color: #ffe1bf; }
  #modify-status[data-error=true], #sketch-status[data-invalid=true],
  .cad-toolbar #cad-instructions[data-invalid=true] { color: #ffc0a5; }
  body[data-sketch-pending=true] #sketch-status { color: #f5c48e; }
  body[data-sketch-pending=true] #sketch-status[data-invalid=true] { color: #ffc0a5; }
  .field select[aria-invalid=true], #project-name[aria-invalid=true] {
    background: #492e2c; color: #ffe3d7; border-color: #e59677;
  }
}

@media (min-width: 761px) and (max-width: 1150px) {
  .tube-header nav { display: none; }
  .workspace-topbar { gap: 10px; }
  .project-name { max-width: 260px; }
  .viewport-top { gap: 5px; }
  .camera-button-text { display: none; }
  .mobile-camera-toggle { min-width: 32px; }
  .add-cuts button { padding-inline: 6px; font-size: 11px; }
  .cad-face-navigation { flex-basis: 340px; min-width: 340px; }
  .cad-command-toggles button { min-width: 65px; font-size: 11px; padding-inline: 6px; }
}

@media (min-width: 761px) and (max-height: 700px) {
  .workspace-topbar { min-height: 42px; padding-block: 4px; }
  .workspace-ribbon { min-height: 42px; padding-block: 4px; }
  main#studio { gap: 6px; }
  .simulation-panel { padding-top: 6px; }
  .axis-readouts > span { padding-block: 5px; }
  .axis-readouts strong { margin-top: 2px; }
  .project-metrics { height: 24px; min-height: 24px; }
}

@media (max-width: 760px) {
  .camera-button-text { display: none; }
}

@media (forced-colors: active) {
  #tube-canvas:focus-visible { outline-color: Highlight; }
}