/* Industrial Satisfactory-inspired theme */
:root {
  --subnav-primary-control-width:clamp(150px,14vw,214px);
  --subnav-primary-control-height:34px;
  --subnav-control-gap:8px;
}

body {
  background:
    repeating-linear-gradient(135deg, transparent 0 34px, #ffffff05 34px 35px),
    var(--bg);
  background-attachment:fixed;
  font-family:Bahnschrift,"Arial Narrow",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

h2,.dialog-head h2 {
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.055em;
}

.tabs {
  border-bottom:0;
}

.recipe-tabs {
  border-bottom:0;
}

.recipe-library .table-wrap {
  border-top:1px solid var(--line);
}

.tab,.recipe-tab {
  position:relative;
  border:1px solid transparent;
  border-left-width:2px;
  border-radius:var(--radius-small);
  background:transparent;
  box-shadow:none;
  text-transform:uppercase;
  letter-spacing:.035em;
}

.tab:hover,.recipe-tab:hover {
  background:var(--surface-alt);
  color:var(--text);
}

.tab.active,.recipe-tab.active {
  border-color:var(--line-strong);
  border-left:2px solid var(--accent);
  background:linear-gradient(180deg,var(--surface-strong),var(--surface-alt));
  box-shadow:none;
  color:#fff;
}

.tab:active,.recipe-tab:active {
  transform:none;
  box-shadow:none;
}

.tab.active:active,.recipe-tab.active:active {
  box-shadow:none;
}

.panel,.table-wrap,.machine-group {
  border-color:var(--line);
  background:linear-gradient(145deg,var(--surface) 0%,#111519 100%);
  box-shadow:var(--shadow-panel),inset 0 1px #ffffff08;
}

.grid.panel {
  border-left:1px solid var(--line);
}

.plan-sub-navigation {
  position:relative;
  grid-template-columns:minmax(0,1fr) 370px;
  gap:10px;
  height:54px;
  width:100%;
  max-width:1444px;
  min-height:0;
  margin:0 auto;
  padding:0;
}

.plan-sub-navigation > .panel {
  height:54px;
  padding:9px 10px;
}

.plan-sub-navigation > .factory-summary {
  justify-content:center;
  padding:6px 8px;
}

.plan-sub-navigation .search-select-trigger,
.plan-sub-navigation .number-input,
#machinesView #addBtn {
  height:var(--subnav-primary-control-height);
}

.plan-sub-navigation .field-label,
.plan-sub-navigation .add-form > label > span,
.plan-sub-navigation .factory-stat-label {
  font-size:.6rem;
}

.subnav-layer {
  position:fixed;
  z-index:90;
  top:96px;
  right:0;
  left:0;
  padding:4px 28px 4px;
  background:
    repeating-linear-gradient(135deg,transparent 0 34px,#ffffff05 34px 35px),
    var(--bg);
  background-attachment:fixed;
}

.subnav-layer > .sub-navigation.recipe-tabs,
.subnav-layer > .overview-head {
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  max-width:1444px;
  margin:0 auto;
  transform:none;
}

.recipe-subnav-layer:has(> .sub-navigation[hidden]) {
  display:none;
}

#machinesView {
  padding-top:36px;
}

.overview-head {
  height:54px;
  min-height:54px;
}

#machinesView .section-title {
  margin-top:20px;
  margin-bottom:12px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:linear-gradient(145deg,var(--surface) 0%,#111519 100%);
}

.table-wrap {
  border-top:2px solid var(--accent-border);
}

.material-table {
  border-top:1px solid var(--line);
}

.material-table th {
  padding-top:22px;
  padding-bottom:22px;
}

select,input,textarea {
  border-color:var(--line);
  background:#0b0e11;
  box-shadow:inset 0 1px 5px #0008;
}

select:hover,input:hover,textarea:hover {
  border-color:var(--line-strong);
}

select:focus,input:focus,textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--focus-ring),inset 0 1px 5px #0008;
}

button {
  border-color:var(--accent-border);
  background:linear-gradient(180deg,var(--accent-light),var(--accent));
  box-shadow:inset 0 1px #fff4,inset 0 -2px var(--accent-dark);
  text-transform:uppercase;
  letter-spacing:.035em;
}

button:hover {
  background:linear-gradient(180deg,#ffc75f,var(--accent-light));
}

button:active {
  transform:translateY(1px);
  box-shadow:inset 0 1px #fff3,inset 0 -1px var(--accent-dark);
}

button.secondary {
  border-color:var(--line-strong);
  background:linear-gradient(180deg,#2b3136,#20252a);
  box-shadow:inset 0 1px #ffffff10,inset 0 -2px #090b0d;
}

button.secondary:hover {
  border-color:var(--accent-border);
  background:linear-gradient(180deg,#353c42,#272d32);
  color:var(--accent-light);
}

button.danger,.dialog-close {
  box-shadow:none;
  text-transform:none;
}

label {
  color:#bdc2c5;
  text-transform:uppercase;
  letter-spacing:.045em;
}

.hint,.muted {
  color:var(--muted);
}

.stat {
  color:var(--accent-light);
  text-shadow:0 2px 0 #000;
}

.power-total,.power-badge {
  color:var(--blue);
}

.factory-summary {
  display:flex;
  flex-direction:column;
}

.factory-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.factory-stat {
  min-width:0;
  padding:2px 0 2px 8px;
  border-left:3px solid var(--accent);
}

.factory-stat:first-child {
  border-left-color:var(--green);
}

.factory-stat-power {
  border-left-color:var(--blue);
}

.factory-stat-shards {
  border-left-color:var(--accent);
}

.factory-stat-label {
  color:var(--muted);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
}

.factory-summary .stat,
.factory-summary .power-total,
.factory-summary .shard-total {
  margin:3px 0 0;
  font-size:1.2rem;
  line-height:1;
  white-space:nowrap;
}

.factory-summary .stat {
  color:var(--green);
}

.shard-total {
  color:var(--accent-light);
  font-weight:800;
}

.factory-summary .machine-types {
  margin-top:12px;
}

@media(max-width:520px) {
  .factory-stats {
    grid-template-columns:1fr;
  }
}

.chip,.group-count,.power-badge,.shard-badge,.output-badge,.source-badge {
  border-color:var(--line-strong);
  background:#1d2226;
  box-shadow:inset 0 1px #ffffff0a;
}

th {
  border-bottom:2px solid var(--line-strong);
  background:#252b30;
  color:#d1d5d7;
}

th,td {
  border-color:var(--line-soft);
}

tbody tr:nth-child(even) {
  background:#0e1215;
}

tbody tr:hover {
  background:#20262a;
  box-shadow:inset 3px 0 var(--accent);
}

.empty,.overview-empty {
  background:
    repeating-linear-gradient(135deg,transparent 0 12px,#ffffff04 12px 13px),
    linear-gradient(145deg,var(--surface) 0%,#111519 100%);
}

.category-menu,.material-menu {
  border-color:var(--line-strong);
  background:#1b2024;
  box-shadow:var(--shadow-menu);
}

.category-menu button,.material-menu button {
  box-shadow:none;
  text-transform:none;
  letter-spacing:0;
}

.category-menu button:hover,.material-menu button:hover {
  background:#2b3136;
  color:var(--accent-light);
}

#machineToggle,.material-toggle {
  border-color:var(--line-strong);
  background:#252b30;
  color:#d0d4d6;
  box-shadow:none;
}

.source-status {
  border-left:3px solid var(--accent);
  background:#0e1215;
}

.machine-group>summary {
  border-left:3px solid transparent;
  background:linear-gradient(180deg,#292f34,#20252a);
  text-transform:none;
  letter-spacing:.015em;
}

.machine-group>summary>span.group-title,
.recipe-group>summary>span.group-title {
  flex:0 1 auto;
  text-align:left;
}

.group-metrics {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.output-badge.consumption-badge {
  color:var(--red);
}

.group-output {
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
}

.machine-group>summary,
.recipe-group>summary {
  gap:8px;
}

.machine-group>summary>span.group-title,
.recipe-group>summary>span.group-title {
  margin-right:0;
}

.machine-group>summary::before {
  margin-right:16px;
}

.recipe-group>summary::before {
  margin-right:5px;
}

.recipe-group>summary {
  padding-right:5px;
}

.machine-group>summary>.group-delete {
  margin-left:0;
}

.recipe-group>summary>.group-delete {
  margin-left:0;
}

.machine-group[open]>summary {
  border-left-color:transparent;
  box-shadow:none;
}

.recipe-group {
  border-color:var(--line-soft);
  background:#0e1215;
}

.recipe-group>summary:hover {
  background:#181d21;
}

.machine-instance {
  width:calc(100% + 10px);
  margin-left:-10px;
  border-top:0;
  padding-top:7px;
  padding-right:5px;
  padding-bottom:7px;
  padding-left:20px;
}

.machine-power {
  justify-content:flex-end;
  padding-right:0;
}

.machine-output {
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  color:var(--green);
  font-size:.8rem;
  line-height:1.25;
}

.output-item {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.output-item strong {
  color:#9ee5bd;
  font-variant-numeric:tabular-nums;
}

.number-control {
  position:relative;
  width:100%;
}

.number-control-unit {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  height:34px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
}

.number-control-unit:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}

.number-control-unit .number-input {
  grid-column:2;
  grid-row:1;
  min-width:0;
  padding-right:6px;
  padding-left:6px;
  height:32px;
  border:0;
  border-radius:0 var(--radius-control) var(--radius-control) 0;
}

.number-control-unit:has(.number-reset:not([hidden])) .number-input {
  padding-right:28px;
}

.number-control-unit .input-unit {
  position:static;
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:var(--surface-alt);
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}

.number-control-unit .number-reset {
  right:4px;
  left:auto;
}

.number-control-unit:focus-within .input-unit {
  border-right-color:var(--line);
}

.number-control-unit .number-input:focus {
  box-shadow:none;
}

.plan-sub-navigation .add-machine-section {
  display:flex;
  align-items:center;
}

.plan-sub-navigation .add-machine-section .add-form {
  width:100%;
  align-items:center;
  grid-template-columns:minmax(130px,.55fr) minmax(160px,.75fr) minmax(100px,.4fr) 110px 110px auto;
  gap:8px;
}

/* Unit controls come after the generic number-input rules conceptually: keep their value area usable. */
.plan-sub-navigation #newCount,
.plan-sub-navigation #newClock {
  min-width:0;
  padding-right:6px;
  padding-left:6px;
}

.plan-sub-navigation .number-control-unit:has(.number-reset:not([hidden])) #newCount,
.plan-sub-navigation .number-control-unit:has(.number-reset:not([hidden])) #newClock {
  padding-right:28px;
}

.number-control .number-input {
  padding-right:36px;
  appearance:textfield;
  -moz-appearance:textfield;
}

#newCount,
#newClock,
.machine-instance input[data-field="taktung"] {
  padding-left:31px;
  text-align:center;
}

.add-form>label:has(#newCount),
.add-form>label:has(#newClock),
.machine-instance-head>span:nth-child(3) {
  text-align:center;
}

.number-input::-webkit-inner-spin-button,
.number-input::-webkit-outer-spin-button {
  margin:0;
  appearance:none;
  -webkit-appearance:none;
}

button.number-reset {
  position:absolute;
  top:8px;
  right:4px;
  bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  padding:0;
  border:0;
  border-radius:var(--radius-control);
  background:transparent;
  color:#777e83;
  box-shadow:none;
}

button.number-reset[hidden] {
  display:none;
}

button.number-reset:hover {
  border-color:transparent;
  background:transparent;
  color:var(--accent-light);
}

button.number-reset svg {
  display:block;
  width:10px;
  height:10px;
  pointer-events:none;
}

button.number-reset path {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.machine-instance-list {
  gap:0;
  padding-right:0;
  padding-bottom:0;
}

.machine-instance-head {
  display:grid;
  width:calc(100% + 10px);
  margin-left:-10px;
  grid-template-columns:60px minmax(240px,1fr) 120px minmax(160px,.55fr) minmax(175px,.75fr) 34px;
  gap:9px;
  padding:10px 5px 6px 20px;
  border-bottom:0;
  background:transparent;
  color:var(--muted);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.055em;
  line-height:1;
  text-transform:uppercase;
}

.machine-instance-head + .machine-instance {
  border-top:0;
}

.recipe-machine-add {
  width:calc(100% + 10px);
  margin-left:-10px;
  padding:7px 5px 7px 7px;
  border-top:0;
}

.recipe-machine-add button {
  height:30px;
  padding:0 10px;
  font-size:.75rem;
}

@media(max-width:900px) {
  .machine-instance-head {
    grid-template-columns:60px minmax(190px,1fr) 110px minmax(140px,.7fr) 34px;
  }
}

@media(max-width:700px) {
  .machine-instance-head {
    display:none;
  }

  .machine-instance .number-control {
    grid-column:1 / -1;
  }

  .recipe-machine-add {
    padding-left:7px;
  }
}

.recipe-dialog {
  border:1px solid var(--line-strong);
  border-top:3px solid var(--accent);
  background:linear-gradient(145deg,var(--surface),#101417);
  overflow-x:hidden;
}

.confirm-dialog {
  width:min(460px,calc(100vw - 32px));
  padding:0;
  border:1px solid var(--line-strong);
  border-top:3px solid var(--red);
  border-radius:var(--radius-panel);
  background:linear-gradient(145deg,var(--surface),#101417);
  color:var(--text);
  box-shadow:0 24px 80px #000c;
}

.confirm-dialog::backdrop {
  background:#05070bc9;
  backdrop-filter:blur(3px);
}

.confirm-dialog-body {
  padding:22px;
}

.confirm-dialog h2 {
  margin:0 0 9px;
}

.confirm-dialog p {
  margin:0;
  color:var(--muted);
}
#deleteConfirmText.has-points { display:grid; gap:7px; }
.delete-warning-point {
  display:block;
  padding:8px 10px;
  border-left:2px solid var(--red);
  background:#ff726d0d;
  color:var(--text);
}
.wiki-error-dialog { width:min(680px,calc(100vw - 32px)); }
.wiki-error-dialog pre {
  max-height:320px;
  margin:16px 0 0;
  padding:13px;
  overflow:auto;
  border:1px solid var(--line);
  background:var(--surface-input);
  color:#ffb4b0;
  font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:pre-wrap;
  word-break:break-word;
}

.confirm-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:22px;
}

button.confirm-danger {
  border-color:#8e4541;
  background:#4a2020;
  color:#fff;
}

button.confirm-danger:hover {
  border-color:var(--red);
  background:#6a2927;
}

::selection {
  background:var(--accent);
  color:#17120a;
}

button.icon-delete {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--tag-height);
  min-width:var(--tag-height);
  height:var(--tag-height);
  padding:0;
  border:1px solid #74403d;
  border-radius:var(--radius-control);
  background:#251718;
  color:var(--red);
  box-shadow:inset 0 1px #ffffff0a;
  font-size:1.15rem;
  line-height:1;
  text-transform:none;
}

button.icon-delete svg {
  display:block;
  width:14px;
  height:14px;
  pointer-events:none;
  transform:none;
}

button.icon-delete path {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:square;
  vector-effect:non-scaling-stroke;
}

.machine-tree button.icon-delete {
  margin-right:8px;
}

button.icon-delete:hover {
  border-color:var(--red);
  background:#3a1d1d;
  color:#fff;
}

button.icon-delete:active {
  transform:translateY(1px);
  box-shadow:inset 0 1px 3px #0008;
}

.recipe-dialog button.dialog-close {
  width:auto;
  min-width:0;
  height:auto;
  padding:4px;
  border:0;
  background:transparent;
  color:#858b8f;
  box-shadow:none;
}

.recipe-dialog button.dialog-close:hover {
  border:0;
  background:transparent;
  color:#b2b7ba;
}

.recipe-dialog button.dialog-close:active {
  transform:none;
  box-shadow:none;
}

* {
  scrollbar-color:var(--accent-dark) #111519;
}

/* The top editor fields follow the same invisible two-column grid as output/input. */
.recipe-dialog .recipe-form {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px 0;
}

.recipe-dialog .recipe-form>* {
  min-width:0;
  max-width:100%;
}

.recipe-dialog .recipe-editor-name {
  padding-right:6px;
}

.recipe-dialog .recipe-editor-machine {
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  gap:12px;
  align-items:end;
  padding-left:6px;
}

.recipe-dialog .recipe-editor-top label,
.recipe-dialog .recipe-editor-top input,
.recipe-dialog .recipe-editor-top .number-control,
.recipe-dialog .recipe-editor-top .category-combo {
  min-width:0;
  max-width:100%;
}

.recipe-dialog .recipe-editor-top label {
  grid-template-columns:minmax(0,1fr);
}

.recipe-dialog .recipe-editor-top label > span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.recipe-dialog .material-editor-pair {
  width:100%;
}

.recipe-dialog .material-editor-pair,
.recipe-dialog .editor-actions {
  grid-column:span 2;
}

.recipe-dialog .material-editor-pair:has(.material-editor:nth-child(2)[hidden]) {
  grid-template-columns:minmax(0,1fr);
}

.recipe-dialog .material-editor[hidden] {
  display:none;
}

/* Extraction sources have no ingredients; their tables therefore use five columns. */
#myExtractionsPanel th:nth-child(5),
#wikiExtractionsPanel th:nth-child(5) {
  display:none;
}

/* Redistribute the removed input column without enlarging the 22% action column. */
#myExtractionsPanel th:nth-child(1),
#wikiExtractionsPanel th:nth-child(1) { width:30%; }
#myExtractionsPanel th:nth-child(2),
#wikiExtractionsPanel th:nth-child(2) { width:14%; }
#myExtractionsPanel th:nth-child(3),
#wikiExtractionsPanel th:nth-child(3) { width:8%; }
#myExtractionsPanel th:nth-child(4),
#wikiExtractionsPanel th:nth-child(4) { width:26%; }
#myExtractionsPanel th:last-child,
#wikiExtractionsPanel th:last-child { width:22%; }

.recipe-dialog label:has(#recipeDuration)>span,
.recipe-dialog #recipeDuration,
.recipe-dialog .material-entry-head span:nth-child(2),
.recipe-dialog .material-amount {
  text-align:center;
}

.recipe-dialog #recipeDuration {
  padding-left:36px;
  padding-right:36px;
}

.recipe-dialog .material-amount {
  appearance:textfield;
  -moz-appearance:textfield;
}

.recipe-dialog .material-amount::-webkit-inner-spin-button,
.recipe-dialog .material-amount::-webkit-outer-spin-button {
  margin:0;
  appearance:none;
  -webkit-appearance:none;
}

@media(max-width:600px) {
  .recipe-dialog .recipe-form {
    grid-template-columns:1fr;
  }

  .recipe-dialog .material-editor-pair,
  .recipe-dialog .editor-actions {
    grid-column:auto;
  }

  .recipe-dialog .recipe-editor-name,
  .recipe-dialog .recipe-editor-machine {
    padding-right:0;
    padding-left:0;
  }

  .recipe-dialog .recipe-editor-machine {
    grid-template-columns:minmax(0,1fr);
  }
}

@media(max-width:850px) {
  .section-title { align-items:flex-start; gap:10px; }
}

@media(max-width:520px) {
  .section-title { flex-direction:column; }
  .export-row { width:100%; }
  .export-row button { flex:1; }
}

select {
  padding-right:32px;
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--surface-input);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23a7adb1' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-position:right 10px center;
  background-repeat:no-repeat;
  background-size:12px 12px;
}

.form-field {
  display:grid;
  min-width:0;
  gap:6px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}

.search-select {
  position:relative;
  min-width:0;
}

.search-select-native {
  display:none;
}

button.search-select-trigger {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:38px;
  min-width:0;
  padding:0 32px 0 10px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--surface-input);
  color:var(--text);
  box-shadow:none;
  font-weight:700;
  letter-spacing:0;
  text-align:left;
  text-transform:none;
}

button.search-select-trigger:hover,
.search-select.open button.search-select-trigger {
  border-color:var(--line-strong);
  background:#151a1e;
}

.search-select-trigger:disabled {
  cursor:not-allowed;
  opacity:.55;
}

.search-select-value {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.search-select.is-placeholder .search-select-value {
  color:var(--muted);
  font-weight:600;
}

.search-select-trigger svg {
  position:absolute;
  right:10px;
  width:12px;
  height:12px;
  transition:transform .15s;
}

.search-select.open .search-select-trigger svg {
  transform:rotate(180deg);
}

.search-select-trigger path {
  fill:none;
  stroke:var(--muted);
  stroke-width:2;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

.search-select-menu {
  position:absolute;
  z-index:20;
  top:calc(100% + 4px);
  left:0;
  display:none;
  width:max(100%,320px);
  max-width:calc(100vw - 56px);
  padding:5px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  background:#151a1e;
  box-shadow:var(--shadow-menu);
}

.search-select.open .search-select-menu {
  display:block;
}

.search-select-static .search-select-menu {
  width:100%;
  min-width:100%;
}

.search-select-static .search-select-options {
  max-height:none;
  overflow:hidden;
  scrollbar-gutter:auto;
}

.language-switcher .search-select {
  width:108px;
}

.site-header:has(.language-switcher .search-select) {
  overflow:visible;
}

.language-switcher button.search-select-trigger,
.overview-head button.search-select-trigger {
  height:var(--subnav-primary-control-height);
  border-color:var(--line-strong);
  font-size:.78rem;
}

/* Keep the primary selector identical in Abbau/Herstellung, Übersicht and Orte. */
:is(.plan-sub-navigation, #overviewView) button.search-select-trigger {
  min-height:var(--subnav-primary-control-height);
  padding:0 32px 0 10px;
  border-color:var(--line-strong);
  font-size:.78rem;
}

.production-filter-select {
  flex:0 0 165px;
}

.overview-head .overview-sort {
  width:180px;
}

.search-select-filter {
  height:34px;
  margin-bottom:5px;
  background:#0b0f12;
}

.search-select-options {
  display:grid;
  max-height:220px;
  overflow-y:auto;
}

button.search-select-option {
  width:100%;
  padding:8px 9px;
  border:0;
  border-left:2px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--text);
  box-shadow:none;
  font-weight:600;
  letter-spacing:0;
  text-align:left;
  text-transform:none;
}

button.search-select-option:hover {
  border-left-color:var(--accent);
  background:#252b30;
}

button.search-select-option.selected {
  border-left-color:var(--accent);
  color:var(--accent-light);
}

.search-select-empty {
  padding:10px;
  color:var(--muted);
  font-weight:600;
  text-align:center;
}

.machine-recipe-select {
  width:100%;
}

.machine-recipe-select .search-select-menu {
  width:100%;
  max-width:none;
}

.machine-group[open] {
  overflow:visible;
}

.combo-filter {
  height:34px;
  margin-bottom:5px;
  background:#0b0f12;
}

.combo-options {
  display:grid;
  max-height:165px;
  overflow-y:auto;
}

.combo-empty {
  padding:10px;
  color:var(--muted);
  font-weight:600;
  text-align:center;
}

.category-menu:has(.combo-filter),
.material-menu:has(.combo-filter) {
  max-height:none;
  overflow:hidden;
}

@media(max-width:700px) {
  .machine-instance .machine-recipe-select {
    grid-column:1 / -1;
  }
}

@media(max-width:850px) {
  .site-header .tabs {
    padding-right:16px;
    padding-left:16px;
  }

  .sub-navigation.recipe-tabs {
    width:calc(100% - 32px);
  }

  main {
    padding-top:108px;
  }
}

@media(max-width:680px) {
  .language-switcher select {
    min-width:92px;
  }
}

/* Compact interface labels stay on one line in both languages. */
.tab,
.recipe-tab,
.field-label,
.add-form>label>span,
.factory-stat-label,
.machine-instance-head>span,
.recipe-form>label>span,
.recipe-editor-top label>span,
.material-editor>h3,
th,
.add-form>button,
.export-row>button,
.backup-actions>button,
.editor-actions>button,
.recipe-add-header button,
.recipe-machine-add button {
  white-space:nowrap;
}

.group-title {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:1100px) and (min-width:851px) {
  .grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:1100px) {
  .grid .factory-summary {
    padding:9px 10px;
    border:1px solid var(--line);
  }

  .plan-sub-navigation {
    height:auto;
    min-height:0;
  }

  #machinesView {
    padding-top:128px;
  }
}

@media(max-width:850px) {
  .subnav-layer {
    padding-right:16px;
    padding-left:16px;
  }

  .plan-sub-navigation {
    width:100%;
    min-height:0;
  }

  #machinesView {
    padding-top:234px;
  }
}

@media(max-width:520px) {
  .plan-subnav-layer {
    position:relative;
    top:auto;
    padding:0 0 4px;
    background:transparent;
  }

  .plan-sub-navigation {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    min-height:0;
    transform:none;
  }

  #machinesView {
    padding-top:0;
  }
}

@media(max-width:680px) {
  .site-header .tabs {
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }

  .site-header .tabs::-webkit-scrollbar {
    display:none;
  }

  .tab,
  .language-switcher {
    flex:0 0 auto;
  }
}

/* Remove external drop shadows while preserving intentional inset/3D controls. */
.panel,
.table-wrap,
.machine-group,
.sub-navigation.recipe-tabs,
.overview-head,
.category-menu,
.material-menu,
.search-select-menu,
.recipe-dialog,
.confirm-dialog,
button.tree-toggle-icon::after {
  box-shadow:none !important;
}

*,
*::before,
*::after {
  text-shadow:none !important;
}

/* Consistent industrial secondary-button system. */
button.secondary,
button.recipe-tool-button {
  min-width:0;
  min-height:30px;
  padding:0 10px;
  border:1px solid #424a50;
  border-radius:var(--radius-control);
  background:linear-gradient(180deg,#292f34,#20252a);
  color:var(--text);
  box-shadow:none !important;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.035em;
  line-height:1;
  text-transform:uppercase;
}

button.secondary:hover,
button.recipe-tool-button:hover {
  border-color:var(--line-strong);
  background:linear-gradient(180deg,#343b40,#282e33);
  color:#fff;
}

button.secondary:active,
button.recipe-tool-button:active {
  transform:translateY(1px);
  box-shadow:none !important;
}

.recipe-backup-tools > button,
.recipe-header-actions > button {
  height:34px;
}

.recipe-backup-tools > .save-import-button {
  padding-right:10px;
  padding-left:10px;
  color:#aeb3b7;
  white-space:nowrap;
}

.recipe-backup-tools > .save-import-button:hover {
  color:#d5d8da;
}

.save-import-progress-dialog {
  border-top-color:var(--accent);
}

.save-import-progress {
  display:flex;
  align-items:center;
  gap:18px;
}

.save-import-progress h2 {
  margin-bottom:6px;
}

.save-import-spinner {
  width:38px;
  height:38px;
  flex:0 0 auto;
  border:3px solid var(--line-strong);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:save-import-spin .8s linear infinite;
}

@keyframes save-import-spin {
  to { transform:rotate(360deg); }
}

@media (prefers-reduced-motion:reduce) {
  .save-import-spinner { animation-duration:1.8s; }
}

.recipe-header-actions > button {
  padding-right:6px;
  padding-left:6px;
  font-size:.68rem;
}

.recipe-header-actions .recipe-state-filter {
  gap:5px;
}

.recipe-header-actions .recipe-state-filter svg {
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.recipe-header-actions .recipe-state-filter svg path {
  display:none;
}

.recipe-header-actions {
  width:80%;
  margin-left:auto;
}

.recipe-header-actions .recipe-state-filter {
  flex:1 1 0;
  justify-content:center;
  min-width:0;
}

.recipe-header-actions > button:not(.recipe-state-filter) {
  flex:0 0 auto;
}

#filterMyOverriddenBtn svg,
#filterMyExtractionOverriddenBtn svg,
#filterOverriddenBtn svg,
#filterIgnoredBtn svg,
#filterExtractionOverriddenBtn svg,
#filterExtractionIgnoredBtn svg {
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}

#filterMyOverriddenBtn svg,
#filterMyExtractionOverriddenBtn svg,
#filterOverriddenBtn svg,
#filterExtractionOverriddenBtn svg {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z'/%3E%3Cpath d='M14.487 7.858A1 1 0 0 1 14 7V2'/%3E%3Cpath d='M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516'/%3E%3Cpath d='M8 18h1'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z'/%3E%3Cpath d='M14.487 7.858A1 1 0 0 1 14 7V2'/%3E%3Cpath d='M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516'/%3E%3Cpath d='M8 18h1'/%3E%3C/g%3E%3C/svg%3E");
}

#filterIgnoredBtn svg,
#filterExtractionIgnoredBtn svg {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076A10.744 10.744 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499A10.75 10.75 0 0 1 12 19c-7 0-10-7-10-7a13.16 13.16 0 0 1 3.16-4.84'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076A10.744 10.744 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499A10.75 10.75 0 0 1 12 19c-7 0-10-7-10-7a13.16 13.16 0 0 1 3.16-4.84'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/g%3E%3C/svg%3E");
}

.recipe-header-actions .state-filter-track {
  width:24px;
  flex-basis:24px;
}

.recipe-header-actions .state-filter-track span {
  width:8px;
}

.recipe-header-actions .recipe-state-filter[aria-pressed="true"] .state-filter-track span {
  transform:translateX(10px);
}

/* Search lives exclusively in the main navigation now. */
.sub-navigation .recipe-filter-slot,
.overview-head .overview-search-slot {
  display:none !important;
}

/* Large plans only incur layout and paint cost near the viewport. */
#machineRows > .machine-group {
  content-visibility:auto;
  contain-intrinsic-block-size:auto 62px;
}

/* Open menus must escape paint containment and overlap subsequent groups. */
#machineRows > .machine-group:has(.search-select.open) {
  content-visibility:visible;
  position:relative;
  z-index:21;
  overflow:visible;
}

#machineRows .search-select.open {
  z-index:21;
}

.machine-instance,
.machine-instance-head {
  grid-template-columns:44px minmax(160px,280px) 110px 145px 145px minmax(135px,1fr) 110px 26px;
  justify-content:start;
  column-gap:8px;
}

.machine-recipe-select button.search-select-trigger {
  height:34px;
  font-size:.78rem;
}

.machine-instance .number-control-unit input[data-field="taktung"] {
  height:32px;
  padding:0 6px;
  font-size:.78rem;
}

.machine-instance .number-control-unit:has(.number-reset:not([hidden])) input[data-field="taktung"] {
  padding-right:28px;
}

.machine-instance > .machine-power {
  min-width:0;
}

.machine-tree .machine-instance > button.icon-delete {
  margin-right:8px;
}

.machine-instance > .machine-power {
  padding-right:8px;
}

.machine-power-value {
  color:var(--blue);
  font-size:.8rem;
  font-weight:700;
}

.machine-input {
  display:grid;
  min-width:0;
  align-items:start;
  gap:2px;
  color:var(--red);
  font-size:.8rem;
  line-height:1.2;
}

.machine-output {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:2px;
  line-height:1.2;
}

.machine-output .output-item {
  display:block;
  width:100%;
}

.input-item {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.input-item strong {
  color:#ff8f89;
  font-variant-numeric:tabular-nums;
}

@media(max-width:900px) {
  .machine-instance,
  .machine-instance-head {
    grid-template-columns:40px minmax(140px,180px) 110px 100px 100px 110px 26px;
  }

  .machine-power {
    grid-column:2 / 7;
    grid-row:2;
  }

  .machine-instance > .icon-delete {
    grid-column:7;
    grid-row:1;
  }
}

@media(max-width:700px) {
  .machine-instance {
    grid-template-columns:1fr 34px;
  }

  .machine-instance .machine-input {
    grid-column:1 / -1;
  }

  .machine-instance .machine-power-value,
  .machine-instance .machine-power {
    grid-column:1 / -1;
    grid-row:auto;
  }

  .machine-instance > .icon-delete {
    grid-column:2;
    grid-row:1;
  }
}

/* Keep all recipe-editor footer actions aligned with the primary save action. */
.recipe-dialog .editor-actions > button {
  height:44px;
  min-height:44px;
  padding-right:14px;
  padding-left:14px;
}

.section-title .export-row > button,
.wiki-recipe-actions > button,
.recipe-machine-add > button {
  height:30px;
}

.wiki-recipe-actions > button {
  width:80%;
  margin-left:auto;
}

/* Locations share the recipe table header, rows and spacing. */
.locations-table th:nth-child(n) { width:33.333%; }
.location-floor-header { display:flex; align-items:center; gap:12px; }
.location-floor-header .recipe-header-actions { width:auto; }
.locations-table td { vertical-align:top; }
.locations-table td:last-child { text-align:left; }
.locations-table tbody tr.location-start:not(:first-child) td { border-top:1px solid var(--line-strong); }
.location-row { display:flex; align-items:center; gap:8px; min-width:0; }
.location-row input { flex:1; min-width:0; width:0; border-color:var(--tree-line); background:var(--surface-input); box-shadow:none; font-weight:750; }
.location-row input:hover { border-color:var(--tree-line); }
.location-row input:focus { border-color:var(--accent); background:var(--surface-input); }
.location-row > button { flex-shrink:0; }
.location-add { margin:8px 0 0 8px; padding:6px 9px; font-size:.73rem; }
.location-default { display:block; padding:8px; color:var(--muted); font-size:.87rem; }

/* Continuous branches follow the existing row spans, including unnamed floors. */
.locations-table { --tree-line:#626d76; --tree-joint:33px; }
.locations-table tbody td { position:relative; }
.locations-table tbody tr { background:var(--surface); }
.locations-table tbody tr:hover { background:var(--surface); box-shadow:none; }
.locations-table tbody td { border-bottom:0; }
.locations-table td.location-branch { padding-left:38px; }
.location-branch::before, .location-branch::after, .location-parent > .location-row::after {
  content:""; position:absolute; pointer-events:none; background:var(--tree-line);
}
.location-branch::before { left:14px; top:0; bottom:0; width:1px; }
.location-branch.branch-first::before { top:var(--tree-joint); }
.location-branch.branch-last::before { bottom:calc(100% - var(--tree-joint)); }
.location-branch.branch-first.branch-last::before { display:none; }
.location-branch::after { left:14px; top:var(--tree-joint); width:24px; height:1px; }
.location-branch.branch-first::after { left:0; width:38px; }
.location-parent > .location-row > input { flex:0 1 auto; width:clamp(100px, 45%, 200px); }
.location-parent > .location-row::after { position:static; flex:1 0 24px; width:auto; height:1px; margin-right:-14px; }
@media (max-width:900px) { .location-parent > .location-row::after { margin-right:-9px; } }
.locations-table .location-default { min-height:38px; }
@media (max-width:900px) { .locations-table { --tree-joint:30px; } }

/* Quiet node actions, with a clear destructive state only on interaction. */
.location-actions > button.location-delete {
  border-color:transparent;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  opacity:.45;
  border-radius:4px;
  transition:opacity .15s, color .15s, background-color .15s;
}
.location-actions > button.location-delete svg { width:15px; height:15px; }
.location-actions > button.location-delete path { stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.location-row:focus-within .location-delete { opacity:1; }
.location-actions > button.location-delete:focus-visible {
  opacity:1;
  color:var(--red);
  background:#ff726d14;
  border-color:transparent;
}
.location-actions > button.location-delete:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:none) { .location-actions > button.location-delete { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .location-actions > button.location-delete { transition:none; } }

/* The secondary delete action belongs below its name; branches stay on the name row. */
.location-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:38px auto;
  gap:0 8px;
}
.location-parent > .location-row { grid-template-columns:minmax(0, 3fr) minmax(24px, 1fr); }
.location-row > input[data-location-name],
.location-parent > .location-row > input[data-location-name] {
  grid-column:1;
  grid-row:1;
  field-sizing:fixed;
  width:100%;
  min-width:0;
  max-width:none;
}
.location-parent > .location-row::after { grid-column:2; grid-row:1; margin-left:-8px; }
.location-actions > button.location-delete {
  grid-column:1;
  grid-row:2;
  justify-self:start;
  width:auto;
  min-width:0;
  height:24px;
  margin:0;
  padding:0 8px;
  gap:5px;
  font-size:11px;
  font-weight:500;
  opacity:.65;
}
.location-actions > button.location-delete svg { width:12px; height:12px; }
@media (hover:none) { .location-actions > button.location-delete { opacity:1; } }

.location-actions {
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 4px;
  min-height:24px;
}
.locations-table button.location-insert {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  min-height:24px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-size:11px;
  font-weight:500;
  text-transform:none;
  line-height:1;
  opacity:.65;
}
.location-row:focus-within .location-insert { opacity:1; }
.locations-table button.location-insert:focus-visible { color:var(--accent); background:#f39a1914; opacity:1; }
.locations-table button.location-insert:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.locations-table .location-add { margin:0; }
@media (hover:none) { .locations-table button.location-insert { opacity:1; } }

/* Empty child slots align their add action with the 38px name row and its branch. */
.locations-table td > button.location-add { margin-top:7px; }

/* Shared breathing room below each name for both actions. */
.location-actions { margin-top:6px; }

/* Keep My locations visually still under the pointer. */
.location-actions > button.location-delete:hover:not(:focus-visible) {
  border-color:transparent;
  background:transparent;
  color:var(--muted);
}
#addLocationBtn:hover { background:linear-gradient(180deg,var(--accent-light),var(--accent)); }

.machine-location-label { display:block; margin-top:5px; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#reservedSelectMenu, .machine-location-menu) .search-select-option { white-space:normal; overflow-wrap:anywhere; }

:is(#reservedSelectMenu, .machine-location-menu) { width:max(100%, 360px); }
:is(#reservedSelectMenu, .machine-location-menu) .search-select-options { max-height:320px; overflow-y:auto; }
:is(#reservedSelectMenu, .machine-location-menu) .search-select-option { position:relative; display:flex; align-items:center; gap:12px; min-height:36px; font-size:13px; }
:is(#reservedSelectMenu, .machine-location-menu) .search-select-option[hidden] { display:none; }
:is(#reservedSelectMenu, .machine-location-menu) .location-option-name { flex:1; min-width:0; overflow-wrap:anywhere; }
:is(#reservedSelectMenu, .machine-location-menu) .location-option-kind { flex-shrink:0; color:var(--muted); font-size:10px; font-weight:400; }
:is(#reservedSelectMenu, .machine-location-menu) [data-depth="0"] { margin-top:5px; border-top:1px solid var(--line-soft); font-weight:750; }
:is(#reservedSelectMenu, .machine-location-menu) [data-depth="1"] { padding-left:31px; }
:is(#reservedSelectMenu, .machine-location-menu) [data-depth="2"] { padding-left:53px; font-weight:400; }
:is(#reservedSelectMenu, .machine-location-menu) [data-depth="1"]::before,
:is(#reservedSelectMenu, .machine-location-menu) [data-depth="2"]::before { content:""; position:absolute; left:16px; top:0; height:50%; width:10px; border-left:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); pointer-events:none; }
:is(#reservedSelectMenu, .machine-location-menu) [data-depth="2"]::before { left:38px; }

.plan-number-field:has(input:disabled) { opacity:.55; }
.plan-number-field input:disabled { cursor:not-allowed; }

.number-control-unit .clock-unit { flex-direction:column; gap:1px; line-height:1; }
.clock-unit small { font-size:8px; font-weight:500; letter-spacing:0; text-transform:uppercase; }

/* Machine hierarchy uses the same quiet surfaces and connected nodes as My locations. */
#machineRows { --machine-branch:#626d76; gap:16px; }
#machineRows > .machine-group { background:var(--surface); border:1px solid var(--line); overflow:visible; }
#machineRows .machine-group > summary,
#machineRows .recipe-group > summary {
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  gap:6px 12px;
  padding:14px;
  background:var(--surface);
  border:0;
  box-shadow:none;
}
#machineRows summary::before { grid-column:1; grid-row:1; margin:0; justify-self:center; }
#machineRows .machine-summary-content {
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--machine-branch);
  background:var(--surface-input);
  border-radius:var(--radius-control);
}
#machineRows .group-title { min-width:0; overflow-wrap:anywhere; font-size:13px; }
#machineRows .group-metrics { margin-left:0; gap:6px; flex-wrap:wrap; }
#machineRows .machine-group-actions { grid-column:2; grid-row:2; }
#machineRows .machine-group-actions,
#machineRows .machine-entry-actions { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
#machineRows .machine-group-body { gap:0; padding:0 14px 14px 38px; }
#machineRows .recipe-group { position:relative; margin:0; border:0; border-left:1px solid var(--machine-branch); border-radius:0; background:transparent; }
#machineRows .recipe-group::before { content:""; position:absolute; top:33px; left:0; width:14px; height:1px; background:var(--machine-branch); pointer-events:none; }
#machineRows .recipe-group > summary { padding-right:0; }
#machineRows .machine-instance-list { margin-left:38px; padding:0; gap:0; }
#machineRows .machine-instance-head,
#machineRows .machine-instance {
  width:100%; margin:0;
  grid-template-columns:38px minmax(180px, 1.6fr) 110px minmax(110px, 1fr) minmax(110px, 1fr) minmax(110px, .8fr);
  column-gap:12px;
  padding:12px 12px 12px 24px;
}
#machineRows .machine-instance-head { background:var(--surface-raised); padding-top:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
#machineRows .machine-instance { position:relative; border:0; border-left:1px solid var(--machine-branch); row-gap:6px; align-items:start; }
#machineRows .machine-instance::before { content:""; position:absolute; left:0; top:29px; width:17px; height:1px; background:var(--machine-branch); pointer-events:none; }
#machineRows .machine-instance:last-child { border-image:linear-gradient(to bottom,var(--machine-branch) 29px,transparent 29px) 1; }
#machineRows .machine-number { padding-top:8px; color:var(--muted); font-size:12px; }
#machineRows .machine-recipe-select { grid-column:2; grid-row:1; min-width:0; }
#machineRows .machine-instance > .number-control { grid-column:3; grid-row:1; }
#machineRows .machine-output { grid-column:4; grid-row:1; padding-top:6px; }
#machineRows .machine-input { grid-column:5; grid-row:1; padding-top:6px; }
#machineRows .machine-power-value { grid-column:6; grid-row:1; display:flex; align-items:flex-start; flex-direction:column; gap:5px; padding-top:6px; }
#machineRows .machine-entry-actions { grid-column:2 / -1; grid-row:2; }
#machineRows .machine-recipe-select .search-select-trigger,
#machineRows .machine-instance > .number-control { border-color:var(--machine-branch); }
#machineRows button.machine-action {
  display:inline-flex; align-items:center; gap:5px;
  width:auto; min-width:0; min-height:24px; padding:0 8px;
  border:1px solid transparent; border-radius:4px;
  background:transparent; color:var(--muted); box-shadow:none;
  font-size:11px; font-weight:500; line-height:1; text-transform:none; opacity:.7;
}
#machineRows button.machine-action svg { width:12px; height:12px; pointer-events:none; }
#machineRows button.machine-action path { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#machineRows button.machine-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; opacity:1; }
#machineRows button.machine-action.is-delete:focus-visible { color:var(--red); }
@media(max-width:1100px) {
  #machineRows .machine-instance-head, #machineRows .machine-instance { grid-template-columns:30px minmax(145px,1.4fr) 95px minmax(80px,1fr) minmax(80px,1fr) 100px; gap:6px; }
}
@media(max-width:800px) {
  #machineRows .machine-instance-head { display:none; }
  #machineRows .machine-instance { grid-template-columns:30px minmax(0,1fr) 100px; padding-left:18px; }
  #machineRows .machine-entry-actions { grid-column:2 / -1; grid-row:2; }
  #machineRows .machine-output { grid-column:2; grid-row:3; }
  #machineRows .machine-input { grid-column:2; grid-row:4; }
  #machineRows .machine-power-value { grid-column:3; grid-row:3 / 5; }
  #machineRows .machine-group-body { padding-left:18px; padding-right:10px; }
  #machineRows .machine-instance-list { margin-left:20px; }
}

#machineRows .machine-group-body { position:relative; }
#machineRows .machine-group-body::before { content:""; position:absolute; left:38px; top:-44px; width:1px; height:44px; background:var(--machine-branch); pointer-events:none; }
@media(max-width:800px) { #machineRows .machine-group-body::before { left:18px; } }

#machineRows .recipe-group:last-child { border-image:linear-gradient(to bottom,var(--machine-branch) 33px,transparent 33px) 1; }
#machineRows .machine-instance-list { position:relative; }
#machineRows .machine-instance-list::before { content:""; position:absolute; left:0; top:-44px; width:1px; height:44px; background:var(--machine-branch); pointer-events:none; }
#machineRows .machine-instance-head { border-left:1px solid var(--machine-branch); }
@media(max-width:800px) {
  #machineRows .machine-group-body { padding-left:38px; }
  #machineRows .machine-group-body::before { left:38px; }
  #machineRows .machine-instance-list { margin-left:38px; }
  #machineRows .machine-instance { grid-template-columns:24px minmax(0,1fr); }
  #machineRows .machine-instance > .number-control { grid-column:2; grid-row:2; width:110px; }
  #machineRows .machine-entry-actions { grid-column:2; grid-row:3; }
  #machineRows .machine-output { grid-column:2; grid-row:4; }
  #machineRows .machine-input { grid-column:2; grid-row:5; }
  #machineRows .machine-power-value { grid-column:2; grid-row:6; }
}

/* Disclosure is part of the framed group heading, not a floating tree marker. */
#machineRows .machine-group > summary,
#machineRows .recipe-group > summary { grid-template-columns:minmax(0,1fr); }
#machineRows summary::before { display:none; content:none; }
#machineRows .machine-summary-content { grid-column:1; padding:6px 10px; }
#machineRows .machine-group-actions { grid-column:1; padding-left:34px; }
#machineRows .machine-disclosure {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 24px; width:24px; height:24px;
  margin-left:-4px; border:1px solid var(--line);
  border-radius:3px; background:var(--surface-raised); color:var(--muted);
}
#machineRows .machine-disclosure svg { width:12px; height:12px; transition:transform .15s ease; }
#machineRows .machine-disclosure path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#machineRows details[open] > summary > .machine-summary-content > .machine-disclosure { color:var(--accent); }
#machineRows details[open] > summary > .machine-summary-content > .machine-disclosure svg { transform:rotate(90deg); }
#machineRows summary:focus-visible { outline:none; }
#machineRows summary:focus-visible > .machine-summary-content { outline:2px solid var(--accent); outline-offset:2px; }
#machineRows .machine-group-body { padding-left:14px; }
#machineRows .machine-group-body::before { left:14px; }
#machineRows .machine-instance-list { margin-left:14px; }
@media (prefers-reduced-motion:reduce) { #machineRows .machine-disclosure svg { transition:none; } }

/* Group titles remain open; only the disclosure control is framed. */
#machineRows .machine-summary-content { border-color:transparent; background:transparent; }

/* Tree trunks start beneath the disclosure control; branches meet its left edge. */
#machineRows .machine-group-body { padding-left:33px; }
#machineRows .machine-group-body::before { left:33px; top:-51px; height:51px; }
#machineRows .recipe-group::before { width:21px; }
#machineRows .machine-instance-list { margin-left:33px; }
#machineRows .machine-instance-list::before { top:-51px; height:51px; }

/* Group totals form one compact run of equally styled tags next to the title. */
#machineRows .machine-summary-content { gap:6px; }
#machineRows .machine-summary-content > .group-title { margin-right:6px; }
#machineRows .machine-summary-content .output-badge,
#machineRows .machine-summary-content .power-badge,
#machineRows .machine-summary-content .shard-badge {
  height:24px;
  padding:3px 7px;
  border:1px solid var(--line-soft);
  border-radius:3px;
  background:var(--surface-input);
  box-shadow:none;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
}
#machineRows .group-metrics .power-badge { order:0; }
#machineRows .group-metrics .shard-badge { order:1; color:var(--accent-light); }

/* Production, consumption, and power totals summarize collapsed groups only. */
#machineRows details[open] > summary > .machine-summary-content > .group-output,
#machineRows details[open] > summary > .machine-summary-content > .group-metrics {
  display:none;
}

/* Group deletion shares the heading row, aligned to its far edge. */
#machineRows .machine-summary-content > .machine-action.is-delete { margin-left:auto; flex-shrink:0; }
#machineRows .machine-group-body::before,
#machineRows .machine-instance-list::before { top:-21px; height:21px; }

/* A consistent right-hand delete action for groups and their last machine. */
#machineRows .machine-instance-head,
#machineRows .machine-instance { grid-template-columns:38px minmax(180px,1.6fr) 110px minmax(110px,1fr) minmax(110px,1fr) minmax(110px,.8fr) 88px; }
#machineRows .machine-instance > .machine-action.is-delete { grid-column:7; grid-row:1; justify-self:end; align-self:start; margin-top:3px; }
#machineRows button.machine-action.is-delete,
.location-actions > button.location-delete { min-height:28px; height:28px; padding:0 8px; font-size:12px; opacity:.85; }
#machineRows button.machine-action.is-delete svg,
.location-actions > button.location-delete svg { width:14px; height:14px; }
#machineRows button.machine-action.is-delete:hover,
.location-actions > button.location-delete:hover,
.location-actions > button.location-delete:hover:not(:focus-visible) { color:var(--red); background:#ff726d18; border-color:#ff726d40; opacity:1; }
@media(max-width:1100px) and (min-width:801px) {
  #machineRows .machine-instance-head, #machineRows .machine-instance { grid-template-columns:28px minmax(130px,1.4fr) 90px minmax(70px,1fr) minmax(70px,1fr) 85px 78px; }
}
@media(max-width:800px) {
  #machineRows .machine-instance { grid-template-columns:24px minmax(0,1fr); }
  #machineRows .machine-instance > .machine-action.is-delete { grid-column:2; grid-row:3; margin-top:0; }
  #machineRows .machine-entry-actions { padding-right:90px; }
}

#machineRows .machine-summary-content { padding-top:4px; padding-bottom:4px; }

/* Adding entries uses the accent color; deletion keeps its red hover state. */
#addLocationBtn:hover { background:linear-gradient(180deg,#ffc75f,var(--accent-light)); border-color:var(--accent-light); }
.locations-table button.location-insert:hover,
#machineRows button.machine-action:not(.is-delete):hover {
  color:var(--accent-light);
  background:#f39a1918;
  border-color:#f39a1940;
  opacity:1;
}

/* Each machine can be assigned directly between recipe and clock controls. */
#machineRows .machine-instance-head,
#machineRows .machine-instance { grid-template-columns:32px minmax(160px,1.5fr) minmax(150px,1.2fr) 110px minmax(90px,1fr) minmax(90px,1fr) minmax(100px,.8fr) 88px; }
#machineRows .machine-location-select { grid-column:3; grid-row:1; min-width:0; }
#machineRows .machine-location-select .search-select-trigger { height:34px; font-size:.78rem; border-color:var(--machine-branch); }
#machineRows .machine-instance > .number-control { grid-column:4; }
#machineRows .machine-output { grid-column:5; }
#machineRows .machine-input { grid-column:6; }
#machineRows .machine-power-value { grid-column:7; }
#machineRows .machine-instance > .machine-action.is-delete { grid-column:8; }
@media(max-width:1200px) and (min-width:801px) {
  #machineRows .machine-instance-head, #machineRows .machine-instance { grid-template-columns:24px minmax(120px,1.4fr) minmax(110px,1.2fr) 85px minmax(60px,1fr) minmax(60px,1fr) 85px 78px; gap:6px; }
}
@media(max-width:800px) {
  #machineRows .machine-instance { grid-template-columns:24px minmax(0,1fr); }
  #machineRows .machine-location-select { grid-column:2; grid-row:2; }
  #machineRows .machine-instance > .number-control { grid-column:2; grid-row:3; }
  #machineRows .machine-entry-actions { grid-column:2; grid-row:4; }
  #machineRows .machine-instance > .machine-action.is-delete { grid-column:2; grid-row:4; }
  #machineRows .machine-output { grid-column:2; grid-row:5; }
  #machineRows .machine-input { grid-column:2; grid-row:6; }
  #machineRows .machine-power-value { grid-column:2; grid-row:7; }
}

#machineRows .machine-instance-head > span:nth-child(3) { text-align:left; }

/* Activity controls remain readable while excluded machine data is dimmed. */
#machineRows .machine-heading-controls,
#machineRows .machine-row-controls { display:flex; align-items:center; justify-content:flex-end; gap:4px; }
#machineRows .machine-heading-controls { margin-left:auto; flex-shrink:0; }
#machineRows .machine-row-controls { grid-column:8; grid-row:1; margin-top:3px; }
#machineRows .machine-instance-head,
#machineRows .machine-instance { grid-template-columns:28px minmax(150px,1.5fr) minmax(135px,1.2fr) 100px minmax(85px,1fr) minmax(85px,1fr) minmax(95px,.8fr) 130px; }
#machineRows button.activity-toggle {
  width:auto;
  min-width:0;
  min-height:28px;
  padding:0 6px;
  opacity:1;
}
.activity-track { display:inline-flex; position:relative; align-items:center; width:24px; height:13px; padding:2px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-input); }
.activity-track > span { position:absolute; top:50%; left:2px; width:7px; height:7px; border-radius:50%; background:var(--muted); transform:translateY(-50%); }
.activity-toggle[aria-checked="true"] .activity-track { border-color:var(--green); background:#72c99718; }
.activity-toggle[aria-checked="true"] .activity-track > span { left:calc(100% - 9px); background:var(--green); }
.activity-toggle[aria-checked="mixed"] .activity-track { border-color:var(--accent); background:#ffad1818; }
.activity-toggle[aria-checked="mixed"] .activity-track > span { left:50%; background:var(--accent); transform:translate(-50%,-50%); }

/* Recipe filters use their complete button frame as the state indicator. */
.recipe-header-actions .recipe-state-filter .state-filter-track { display:none; }
.recipe-header-actions .recipe-state-filter[aria-pressed="true"] {
  border-color:var(--accent);
  background:#ffad1812;
  color:var(--accent-light);
  box-shadow:inset 0 0 0 1px #ffad1880, 0 0 7px #ffad1840 !important;
}
#machineRows .machine-instance.is-inactive > :not(.machine-row-controls):not(.machine-entry-actions) { opacity:.4; filter:grayscale(1); }
#machineRows details.is-inactive > summary > .machine-summary-content > :not(.machine-heading-controls) { opacity:.4; filter:grayscale(1); }
@media(max-width:1200px) and (min-width:801px) {
  #machineRows .machine-instance-head, #machineRows .machine-instance { grid-template-columns:24px minmax(105px,1.4fr) minmax(95px,1.2fr) 80px minmax(60px,1fr) minmax(60px,1fr) 80px 130px; gap:6px; }
}
@media(max-width:800px) {
  #machineRows .machine-instance { grid-template-columns:24px minmax(0,1fr); }
  #machineRows .machine-row-controls { grid-column:2; grid-row:4; margin-top:0; justify-content:flex-start; }
  #machineRows .machine-entry-actions { grid-column:2; grid-row:8; padding-right:0; }
  #machineRows .machine-heading-controls { margin-left:0; }
}

/* Column labels sit quietly within the tree instead of forming a separate bar. */
#machineRows .machine-instance-head {
  background:transparent;
  border-bottom:1px solid var(--line-soft);
  padding-top:8px;
  padding-bottom:9px;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  letter-spacing:.035em;
}
#machineRows .machine-instance-head > span { text-align:left; }

/* Treat column headings as field labels, aligned with the control text. */
#machineRows .machine-instance-head {
  border-bottom:0;
  padding-bottom:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.3;
}
#machineRows .machine-instance-head > span { text-transform:none; }
#machineRows .machine-instance-head > span:nth-child(2),
#machineRows .machine-instance-head > span:nth-child(3) { padding-left:10px; }
#machineRows .machine-instance-head > span:nth-child(4) { padding-left:6px; }

#machineRows .machine-instance-head { font-size:12px; font-weight:600; color:#d1d5d7; }

/* Production values use compact columns; spare space belongs before the actions. */
@media(min-width:1201px) {
  #machineRows .machine-instance-head,
  #machineRows .machine-instance { grid-template-columns:28px minmax(150px,260px) minmax(135px,210px) 100px 120px 140px 115px minmax(130px,1fr); }
}
@media(min-width:801px) and (max-width:1200px) {
  #machineRows .machine-instance-head,
  #machineRows .machine-instance { grid-template-columns:24px minmax(105px,180px) minmax(95px,150px) 80px 90px 105px 90px minmax(110px,1fr); }
}

#machineRows .machine-power-value > .shard-badge {
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Clock-adjusted cycle time sits directly before production values. */
#machineRows .machine-cycle { grid-column:5; grid-row:1; padding-top:6px; color:var(--text); font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums; }
#machineRows .machine-output { grid-column:6; }
#machineRows .machine-input { grid-column:7; }
#machineRows .machine-power-value { grid-column:8; }
#machineRows .machine-row-controls { grid-column:9; }
@media(min-width:1201px) {
  #machineRows .machine-instance-head,
  #machineRows .machine-instance { grid-template-columns:28px minmax(150px,260px) minmax(135px,210px) 100px 70px 110px 130px minmax(115px,1fr) 130px; }
}
@media(min-width:801px) and (max-width:1200px) {
  #machineRows .machine-instance-head,
  #machineRows .machine-instance { grid-template-columns:24px minmax(105px,180px) minmax(95px,150px) 80px 60px 80px 95px minmax(85px,1fr) 110px; }
}
@media(max-width:800px) {
  #machineRows .machine-cycle { grid-column:2; grid-row:5; }
  #machineRows .machine-output { grid-column:2; grid-row:6; }
  #machineRows .machine-input { grid-column:2; grid-row:7; }
  #machineRows .machine-power-value { grid-column:2; grid-row:8; }
  #machineRows .machine-row-controls { grid-column:2; grid-row:4; }
  #machineRows .machine-entry-actions { grid-row:9; }
}

#machineRows .machine-cycle,
#machineRows .machine-instance-head > span:nth-child(5) { text-align:center; }

/* Each statistic sizes to its label and value instead of taking an equal third. */
.plan-sub-navigation { grid-template-columns:minmax(0,1fr) max-content; }
.plan-sub-navigation .factory-stats { grid-template-columns:repeat(3,max-content); gap:18px; }
.plan-sub-navigation .factory-stat { min-width:max-content; }

/* Compact machine controls share the subnavigation with the totals. */
.plan-sub-navigation { grid-template-columns:minmax(0,1fr) max-content; }
.plan-sub-navigation .add-machine-section .add-form {
  grid-template-columns:var(--subnav-primary-control-width) minmax(120px,1.15fr) minmax(95px,.8fr) 90px 100px auto;
  gap:var(--subnav-control-gap);
}
#machinesView > .machine-tree, #machinesView > .empty { margin-top:20px; }
#machinesView > .machine-tree:empty { display:none; margin-top:0; }
@media(max-width:1250px) {
  .plan-sub-navigation { grid-template-columns:1fr max-content; height:auto; }
  .plan-sub-navigation > .add-machine-section { grid-column:1 / -1; }
  #machinesView { padding-top:100px; }
}
@media(max-width:700px) {
  .plan-sub-navigation .add-machine-section .add-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .plan-sub-navigation > .add-machine-section { height:auto; }
  .plan-sub-navigation .add-form > button { grid-column:auto; }
  .plan-sub-navigation .factory-stats { gap:10px; }
  #machinesView { padding-top:142px; }
}
@media(max-width:520px) {
  .plan-sub-navigation { grid-template-columns:1fr; }
  #machinesView { padding-top:0; }
}


#machineRows .recipe-bulk-actions { grid-column:1; padding-left:34px; }
#machineRows .recipe-bulk-actions .machine-action { min-height:28px; }
#machineRows .recipe-group > .machine-instance-list::before { top:-55px; height:55px; }

#machineRows .recipe-bulk-actions .machine-action svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#machineRows .recipe-bulk-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; width:100%; min-width:0; }
#machineRows .recipe-bulk-actions .data-pager { margin-left:auto; justify-content:flex-end; gap:4px; padding:0; font-size:11px; font-weight:400; color:var(--muted); }
#machineRows .group-output { min-width:0; max-width:min(100%, 27ch); flex:0 1 auto; font-size:11px; }
#machineRows .machine-summary-content .output-badge { display:block; max-width:min(100%, 27ch); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:help; text-align:center; line-height:16px; }
.material-totals-tooltip { position:fixed; z-index:1000; width:max-content; max-width:min(440px,calc(100vw - 16px)); max-height:min(65vh,560px); overflow:auto; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-panel); background:var(--surface); color:var(--text); box-shadow:0 6px 24px #0008; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.material-totals-tooltip[hidden] { display:none; }
.material-totals-tooltip .place-tooltip-rows strong { color:var(--green); }
.material-totals-tooltip.is-consumption .place-tooltip-rows strong { color:var(--red); }

#bulkRecipeDialog, #bulkLocationDialog { border-top-color:var(--accent); }



#machineRows .recipe-group > summary { row-gap:0; }
#machineRows .recipe-group > .machine-instance-list::before { top:-49px; height:49px; }

#bulkRecipeDialog, #bulkLocationDialog { overflow:visible; }
#bulkRecipeDialog .search-select-menu, #bulkLocationDialog .search-select-menu { max-height:min(300px,45vh); }

/* Use the subnavigation dropdown typography throughout machine editing. */
:is(.plan-sub-navigation, #machineRows, #bulkRecipeDialog, #bulkLocationDialog) .search-select-trigger,
:is(.plan-sub-navigation, #machineRows, #bulkRecipeDialog, #bulkLocationDialog) .search-select-option,
:is(.plan-sub-navigation, #machineRows, #bulkRecipeDialog, #bulkLocationDialog) .search-select-filter {
  font-size:.78rem;
}
:is(#machineRows, #bulkRecipeDialog, #bulkLocationDialog) .search-select-trigger { font-weight:700; }

button .add-icon { display:inline-block; width:12px; height:12px; flex-shrink:0; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

/* Align add icons optically with the compact action labels. */
#machineRows button.machine-action .add-icon,
.locations-table button.location-insert .add-icon,
button.add-material .add-icon {
  width:10px;
  height:10px;
  flex:0 0 10px;
  align-self:center;
  transform:none;
}
button.add-material { display:inline-flex; align-items:center; gap:5px; }

/* Identical add-action geometry in the machine and location trees. */
#machineRows button.machine-action:has(.add-icon),
.locations-table button.location-insert {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  font-size:11px;
  font-weight:500;
  line-height:1;
}
#machineRows button.machine-action .add-icon,
.locations-table button.location-insert .add-icon {
  display:block;
  width:10px;
  height:10px;
  flex:0 0 10px;
  margin:0;
  padding:0;
  transform:none;
}
#machineRows button.machine-action .add-icon path,
.locations-table button.location-insert .add-icon path {
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Center add icons and labels as flex items, without optical offsets. */
#machineRows button.machine-action:has(.add-icon),
.locations-table button.location-insert,
button.add-material {
  display:inline-flex;
  align-items:center;
  gap:5px;
}
#machineRows button.machine-action .add-icon,
.locations-table button.location-insert .add-icon,
button.add-material .add-icon {
  position:static;
  display:block;
  align-self:center;
  transform:none;
  vertical-align:initial;
}

/* Highlight only the hovered tree row, never its parent group. */
@media (hover:hover) {
  #machineRows .machine-group > summary:hover,
  #machineRows .recipe-group > summary:hover,
  #machineRows .machine-instance:hover {
    background:#ffffff06;
  }
}

/* Extend each row highlight to the outer group edges without clipping menus. */
#machineRows > .machine-group { isolation:isolate; }
#machineRows summary { position:relative; }
@media (hover:hover) {
  #machineRows .machine-group > summary:hover,
  #machineRows .recipe-group > summary:hover,
  #machineRows .machine-instance:hover { background:transparent; }
  #machineRows summary:hover::after,
  #machineRows .machine-instance:hover::after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:var(--hover-left,0px);
    width:var(--hover-width,100%);
    background:#ffffff06;
    pointer-events:none;
    z-index:-1;
  }
}

#machineRows .machine-instance-head { padding-bottom:8px; }

/* Keep group controls visually in their headings without nesting them in summary. */
#machineRows > .machine-group { position:relative; }
#machineRows > .machine-group > .machine-group-actions {
  position:absolute;
  z-index:2;
  top:18px;
  right:26px;
  width:auto;
  padding:0;
}
#machineRows .recipe-group > .machine-group-actions {
  min-height:28px;
  padding:0 12px 4px 58px;
}
#machineRows .recipe-group > .machine-group-actions > .machine-heading-controls {
  position:absolute;
  z-index:2;
  top:18px;
  right:12px;
}
#machineRows .recipe-group > .machine-group-actions > .recipe-bulk-actions {
  padding-left:0;
}
#machineRows > .machine-group > summary > .machine-summary-content,
#machineRows .recipe-group > summary > .machine-summary-content {
  padding-right:150px;
}
@media(max-width:800px) {
  #machineRows > .machine-group > .machine-group-actions,
  #machineRows .recipe-group > .machine-group-actions > .machine-heading-controls {
    position:static;
  }
  #machineRows > .machine-group > .machine-group-actions,
  #machineRows .recipe-group > .machine-group-actions {
    width:100%;
    padding:0 10px 6px 34px;
  }
  #machineRows > .machine-group > summary > .machine-summary-content,
  #machineRows .recipe-group > summary > .machine-summary-content {
    padding-right:10px;
  }
}



/* Keep the connector lines visible behind headings in every hover state. */
#machineRows .machine-group > summary,
#machineRows .recipe-group > summary { background:transparent; }

/* Location roots disclose their complete building/floor subtree. */
.location-row.has-disclosure {
  grid-template-columns:24px minmax(0,1fr);
}
.location-parent > .location-row.has-disclosure {
  grid-template-columns:24px minmax(0,3fr) minmax(24px,1fr);
}
.location-row.has-disclosure > .location-disclosure {
  grid-column:1;
  grid-row:1;
  align-self:center;
}
.location-row.has-disclosure > input[data-location-name] {
  grid-column:2;
}
.location-row.has-disclosure > .location-actions {
  grid-column:2;
}
.location-parent > .location-row.has-disclosure::after {
  grid-column:3;
}
.location-disclosure {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface-raised);
  color:var(--muted);
  box-shadow:none;
}
.location-disclosure:hover,
.location-disclosure[aria-expanded="true"] { color:var(--accent); }
.location-disclosure svg { width:12px; height:12px; transition:transform .15s ease; }
.location-disclosure path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.location-disclosure[aria-expanded="true"] svg { transform:rotate(90deg); }
.location-collapsed-summary { vertical-align:top !important; }
.location-collapsed-summary .location-count-badge { margin-top:7px; }
.location-collapsed .location-building.location-collapsed-summary {
  background-image:linear-gradient(var(--tree-line),var(--tree-line));
  background-repeat:no-repeat;
  background-position:left var(--tree-joint);
  background-size:100% 1px;
}
.location-count-badge {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface-raised);
  color:var(--muted);
  font-size:.76rem;
  font-weight:750;
  white-space:nowrap;
}
@media(prefers-reduced-motion:reduce) { .location-disclosure svg { transition:none; } }

/* Production disclosure occupies the full left edge; rows have no accent stripe. */
.material-table .production-material-row { cursor:pointer; }
.material-table .production-material-row > .recipe-name { position:relative; padding-left:48px; }
.material-table .production-material-toggle,
.material-table .production-material-toggle:hover,
.material-table .production-material-toggle:active {
  position:absolute; inset:0 auto 0 0; width:34px;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; border-right:1px solid var(--line-soft); border-radius:0;
  background:#ffffff04; color:var(--text); box-shadow:none; transform:none;
}
.material-table .production-material-row:hover .production-material-toggle { background:#ffffff09; }
.material-table .production-material-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.material-table tbody tr:hover { box-shadow:none; }

/* Match the subnav menu width in production and the machine list. */
.production-recipe-select .search-select-menu,
#machineRows .search-select-menu {
  width:max(100%,320px);
  min-width:100%;
  max-width:calc(100vw - 56px);
}
.production-recipe-select .search-select-options {
  max-height:320px;
  overflow-y:auto;
}
.production-recipe-select button.search-select-option {
  white-space:normal;
  overflow-wrap:anywhere;
}

.production-recipe-select button.search-select-trigger,
.production-recommendation .production-missing-tag {
  display:flex;
  align-items:center;
  height:28px;
  font-size:.75rem;
  line-height:1;
  font-weight:700;
}
.production-recipe-select button.search-select-trigger { padding:0 28px 0 8px; }
.production-recipe-select .search-select-option,
.production-recipe-select .search-select-filter { font-size:.75rem; }

#overviewStatus .production-status-filter {
  background:transparent;
  box-shadow:none;
  text-transform:none;
  letter-spacing:0;
  border:1px solid var(--line);
}
#overviewStatus .production-status-filter:hover { background:#ffffff0a; }
#overviewStatus .production-status-filter[aria-pressed="true"] {
  border-color:currentColor;
  background:color-mix(in srgb,currentColor 12%,transparent);
}
#overviewStatus .production-status-filter:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

#overviewView .overview-controls { display:none; }
#overviewView .overview-head {
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--subnav-control-gap);
}
#overviewView .production-location { width:var(--subnav-primary-control-width); justify-self:start; }
#overviewView #overviewStatus {
  display:flex;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:var(--subnav-control-gap);
  min-width:0;
}
#overviewView .overview-sort { justify-self:end; }
@media(max-width:700px) {
  #overviewView .overview-head { grid-template-columns:auto minmax(0,1fr) auto; gap:var(--subnav-control-gap); }
  #overviewView .production-location { width:120px; min-width:0; }
  #overviewView .overview-sort { width:140px; min-width:0; }
  #overviewView #overviewStatus { overflow-x:auto; }
  #overviewView .production-status-filter { flex-shrink:0; }
}

#overviewView #overviewStatus .production-status-filter {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 10px;
  font-size:.78rem;
  line-height:1;
  background:color-mix(in srgb,currentColor 9%,var(--surface-input));
  border-color:color-mix(in srgb,currentColor 25%,var(--line));
}
#overviewView #overviewStatus .production-status-filter:hover {
  background:color-mix(in srgb,currentColor 16%,var(--surface-input));
}
#overviewView #overviewStatus .production-status-filter[aria-pressed="true"] {
  background:color-mix(in srgb,currentColor 23%,var(--surface-input));
  border-color:currentColor;
}

#overviewView .material-table th:first-child { width:24%; }

#overviewView .material-image {
  width:34px;
  height:34px;
  flex-basis:34px;
}

#overviewView .production-detail-row { cursor:pointer; }
#overviewView .production-material-row:hover,
#overviewView .production-material-row:hover + .production-detail-row:not([hidden]),
#overviewView .production-material-row:has(+ .production-detail-row:not([hidden]):hover),
#overviewView .production-detail-row:not([hidden]):hover {
  background:#20262a;
  box-shadow:none;
}

/* Keep every subnavigation on the shared page background. Controls retain their
   own surfaces, but the navigation rows themselves are no longer boxed panels. */
.subnav-layer > .sub-navigation.recipe-tabs,
.subnav-layer > .overview-head,
.plan-sub-navigation > .panel {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.subnav-layer > .sub-navigation.recipe-tabs,
.subnav-layer > .overview-head {
  padding-right:0;
  padding-left:0;
}

.plan-sub-navigation > .add-machine-section { padding-right:0; padding-left:0; }
.plan-sub-navigation > .factory-summary { padding-right:0; padding-left:0; }

/* Present factory totals as one compact legend, with the value below its label. */
.plan-sub-navigation .factory-stats {
  display:flex;
  align-items:center;
  gap:18px;
  box-sizing:border-box;
  height:34px;
  padding:3px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-panel);
  background:var(--surface-input);
}

.plan-sub-navigation .factory-stat {
  display:grid;
  grid-template-rows:auto auto;
  min-width:0;
  padding:0 0 0 8px;
  border:0;
  border-left:3px solid var(--green);
}

.plan-sub-navigation .factory-stat-power { border-left-color:var(--blue); }
.plan-sub-navigation .factory-stat-shards { border-left-color:var(--accent); }
.plan-sub-navigation .factory-stat-label { font-size:.55rem; }
.plan-sub-navigation .factory-summary :is(.stat,.power-total,.shard-total) {
  margin-top:1px;
  font-size:1rem;
}

/* Keep timestamp, export and import as three separate legend-style boxes. */
.recipe-backup-tools { gap:8px; }
.recipe-backup-tools .source-timestamps {
  display:flex;
  align-items:center;
  box-sizing:border-box;
  height:34px;
  margin-right:0;
  padding:0 10px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-panel);
  background:var(--surface-input);
}
.recipe-backup-tools > .recipe-tool-button {
  border-color:var(--line-soft);
  background:var(--surface-input);
}
#overviewView .production-material-row:has(+ .production-detail-row:not([hidden]):hover) .production-material-toggle {
  background:#ffffff09;
}

.production-details .production-io {
  min-width:0;
  padding:10px 12px;
  border:1px solid;
  border-radius:var(--radius-item);
}
.production-details .production-io.producers {
  background:color-mix(in srgb,var(--green) 9%,transparent);
  border-color:color-mix(in srgb,var(--green) 48%,transparent);
}
.production-details .production-io.consumers {
  background:color-mix(in srgb,var(--red) 9%,transparent);
  border-color:color-mix(in srgb,var(--red) 48%,transparent);
}
.production-details .production-io li:last-child { border-bottom:0; }
.production-details .production-io p { margin:8px 0; }

.production-details .production-io { padding:8px; }
.production-details .production-io ul { display:grid; gap:6px; }
.production-details .production-io li {
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border:1px solid #ffffff09;
  border-radius:var(--radius-item);
  background:#0b101538;
}
.production-details .production-io li:last-child { border-bottom:1px solid #ffffff09; }
.production-detail-identity { min-width:0; }
.production-detail-heading { display:flex; align-items:center; gap:7px; font-size:.8rem; }
.production-detail-number { padding:2px 5px; border:1px solid #ffffff18; border-radius:var(--radius-small); color:var(--muted); font-size:.7rem; line-height:1; }
.production-detail-recipe { margin-top:4px; font-size:.75rem; color:var(--text); }
.production-detail-location { margin-top:2px; font-size:.7rem; color:var(--muted); overflow-wrap:anywhere; }
.production-detail-rate { flex-shrink:0; min-width:42px; padding:5px 8px; text-align:center; font-size:.8rem; border:1px solid #ffffff20; border-radius:var(--radius-small); background:#ffffff08; }

.production-details .production-detail-rate {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  min-height:36px;
  padding:6px 12px;
  border-radius:6px;
  font-size:.95rem;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.production-details .producers .production-detail-rate {
  color:var(--green);
  border-color:color-mix(in srgb,var(--green) 30%,transparent);
  background:color-mix(in srgb,var(--green) 12%,#141a1e);
}
.production-details .consumers .production-detail-rate {
  color:var(--red);
  border-color:color-mix(in srgb,var(--red) 30%,transparent);
  background:color-mix(in srgb,var(--red) 12%,#141a1e);
}

#overviewView .material-table > table { table-layout:fixed; min-width:1100px; }
#overviewView .material-table .material-name { max-width:100%; overflow-wrap:anywhere; }
#overviewView .production-detail-identity { overflow-wrap:anywhere; }
#overviewView .production-io li { content-visibility:auto; contain-intrinsic-size:auto 76px; }

.production-detail-heading { flex-wrap:nowrap; min-width:0; }
.production-detail-heading > .production-detail-number,
.production-detail-heading > strong { flex-shrink:0; }
.production-detail-heading > .production-detail-recipe {
  min-width:0;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.production-detail-heading > .production-detail-number {
  border:0;
  padding:0;
  background:transparent;
}

.production-details .production-detail-heading { font-size:.9rem; }
.production-details .production-detail-heading > strong { flex-shrink:1; }