app.css

:root {
  color-scheme: light dark;
  --bg: #0f1115;
  --card: #1a1d24;
  --text: #e6e8eb;
  --muted: #8a8f98;
  --accent: #5fb3ff;
  --busy: #ffb454;
  --idle: #4caf7d;
  --stale: #ff6b6b;
  --essentia: #b48cff;
  /* Fills under white text (primary and destructive buttons, the stale
     banner): --accent and --stale darkened to 4.5:1 against white, in
     either theme. */
  --accent-fill: #2272c9;
  --danger-fill: #d13b3b;
  /* NEI's yellow and aqua for its # and $ search prefixes, GregTech's
     green for its =. */
  --search-tooltip: #f2d43d;
  --search-ore: #4fd8d8;
  --search-formula: #5be05b;
}
/* Light follows the system unless the settings menu's Theme picks one
   (theme.js; boot.js sets data-theme before first paint). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f5f7;
    --card: #ffffff;
    --text: #1a1d24;
    --muted: #6b7280;
    --search-tooltip: #9a7b00;
    --search-ore: #0b8585;
    --search-formula: #1e8a1e;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1a1d24;
  --muted: #6b7280;
  --search-tooltip: #9a7b00;
  --search-ore: #0b8585;
  --search-formula: #1e8a1e;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Item icons only (matched by /icons src prefix, not img in general -
   this shouldn't affect any other image on the page, and covers every
   current AND future icon <img> without needing per-class upkeep). On
   mobile, long-pressing a plain <img> triggers the browser's own
   native "save/copy image" menu - which, on the network grid
   specifically, interrupts and overrides the tooltip a long-press is
   ALSO meant to show, since the two gestures compete for the same
   touch-and-hold. -webkit-touch-callout is the iOS Safari-specific
   property for this; user-select stops the selection-highlight
   outline some browsers show during the same gesture. Neither of
   these touches how the tooltip itself is shown - purely suppresses
   the competing native behavior. Android Chrome and others need the
   separate contextmenu-preventDefault() listener further down too -
   this CSS alone doesn't cover them. */
img[src^="/icons?"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 24px;
}
h1 {
  font-size: 20px;
  margin: 0 0 4px 0;
}
.sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
}
.sub.stale-warning {
  color: var(--stale);
  font-weight: 600;
}
/* Network tab, until an admin picks a GTNH version (network.js); a tab
   whose script hasn't reported yet (agents.js connectNoteHtml). */
.gamedata-note, .connect-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 10px;
  font-size: 13px;
}
.gamedata-note[hidden], .connect-note[hidden] {
  display: none;
}
.scripts-notice {
  margin-top: 12px;
}
.gamedata-note .note-dismiss {
  margin-left: auto;
}
#networkTerminalNote {
  margin-top: 12px;
}
.gamedata-note a, #craftPlanNote a, #recipeCheckForHow, #recipeCheckErrorHow {
  color: var(--accent);
}
/* auth.js sets body.is-admin. */
body:not(.is-admin) .admin-only, body.is-admin .non-admin-only {
  display: none;
}
.stale-banner {
  display: none;
  background: var(--danger-fill);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.stale-banner.show { display: block; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.card {
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(128,128,128,0.15);
  display: flex;
  flex-direction: column;
}
.card-head {
  /* Grow to fill the stretched grid cell, so when a neighbour's title
     wraps the spare space sits under this title and the progress bars
     and Ingredients buttons still line up across the row. */
  flex: 1 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
/* Nothing under it (a Finished or idle card): no gap before the
   card's own padding. */
.card-head:last-child {
  margin-bottom: 0;
}
/* A crafting card's CPU and buttons sit in a strip above the item name,
   so a long name gets the card's whole width. */
.card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Out to the card's edges (its padding is 16px), with a faint tint
     and a hairline under it, so it reads as the card's header. */
  margin: -16px -16px 12px;
  padding: 10px 16px;
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border-bottom: 1px solid rgba(128,128,128,0.15);
}
.card-top .head-right {
  margin-left: auto;
}
.card-cpu {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The (?) after the name of a CPU nobody named: beside .card-cpu, not in
   it, so a long name's ellipsis can't cut it off. */
.cpu-auto {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: -4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  opacity: 0.7;
  cursor: help;
}
/* Without min-width the title side can't shrink below its longest
   word, and a long name pushes whatever is beside it out of the card. */
.card-head-main {
  flex: 1;
  min-width: 0;
}
.craft-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;  /* a single word too long for the card */
}
.craft-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.cpu-id {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.monitor-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.monitor-hint a { color: var(--accent); }
.badge {
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.auto { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.pin-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 15px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* util.js's one-colour icons (PIN_ICON, BELL_ICON, RESTOCK_ICON),
   sized by the font-size around them. */
.ui-icon {
  display: inline-block;
  vertical-align: -0.125em;
}
.pin-btn.pinned {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.pin-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cancel-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255,107,107,0.35);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--stale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cancel-btn:hover {
  background: color-mix(in srgb, var(--stale) 15%, transparent);
}
.cancel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* A cancel sent and waiting on the game. 1.5s, so the card's 3s
   re-render restarts it in step rather than mid-pulse. */
.cancel-btn.pending {
  animation: cancel-pending 1.5s ease-in-out infinite;
}
@keyframes cancel-pending {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .cancel-btn.pending { animation: none; }
}
.status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  /* Beside a long name in a flex row it would otherwise shrink and,
     with the title's overflow-wrap, split mid-word. */
  white-space: nowrap;
  flex-shrink: 0;
}
.status-badge.auto {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.status-badge.incomplete {
  background: color-mix(in srgb, var(--stale) 20%, transparent);
  color: var(--stale);
}
.ack-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 15px;
  cursor: pointer;
  color: var(--idle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ack-btn:hover {
  background: color-mix(in srgb, var(--idle) 20%, transparent);
  border-color: var(--idle);
}
.completed-card {
  border-color: color-mix(in srgb, var(--idle) 35%, transparent);
}
.completed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ack-all-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(128,128,128,0.3);
  background: none;
  color: var(--muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}
.ack-all-btn:hover {
  color: var(--text);
  border-color: var(--text);
}
.head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.notif-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(128,128,128,0.3);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.notif-btn.on {
  border-color: var(--idle);
  color: var(--idle);
}
.settings-wrap {
  position: relative;
}
.settings-btn {
  position: relative;
  font-size: 16px;
  line-height: 1;
  padding: 5px 9px;
}
.settings-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}
.settings-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  padding: 4px;
  z-index: 50;
}
.settings-menu-user {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 10px 8px;
  border-bottom: 1px solid rgba(128,128,128,0.2);
  margin-bottom: 4px;
  white-space: nowrap;
}
.settings-menu-user[hidden] {
  display: none;
}
#settingsUser {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A newer release of the server is out (agents.js), for admins. */
.update-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
.update-dot[hidden] {
  display: none;
}
.menu-note {
  display: block;
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
}
.menu-note[hidden] {
  display: none;
}
.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 4px 4px 4px 10px;
}
.theme-seg {
  display: inline-flex;
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.theme-seg button {
  display: flex;
  font-size: 14px;
  padding: 4px 7px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.theme-seg button:hover {
  color: var(--text);
}
.theme-seg button[aria-checked="true"] {
  background: rgba(128,128,128,0.2);
  color: var(--accent);
}
.settings-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.settings-menu-item:hover {
  background: rgba(128,128,128,0.15);
}
.settings-menu-item.danger {
  color: var(--stale);
}
.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-toggle:disabled {
  cursor: default;
  opacity: 0.6;
}
.settings-toggle:disabled:hover {
  background: none;
}
.settings-toggle-label {
  display: flex;
  flex-direction: column;
}
.settings-toggle-note {
  font-size: 11px;
  color: var(--muted);
}
.settings-toggle-note:empty {
  display: none;
}
.switch {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: rgba(128,128,128,0.4);
  transition: background 0.15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.settings-toggle[aria-checked="true"] .switch {
  background: var(--idle);
}
.settings-toggle[aria-checked="true"] .switch::after {
  transform: translateX(14px);
}
.top-bar {
  display: flex;
  align-items: center;
  gap: 8px 24px;
  /* Title, tabs and settings in one row. Should it wrap (the sign-in
     field, a narrow window), what wraps goes on a line ABOVE the tabs,
     which keep sitting on the border below. */
  flex-wrap: wrap-reverse;
  border-bottom: 1px solid rgba(128,128,128,0.2);
  margin-bottom: 20px;
}
.top-bar h1 {
  margin: 0;
}
.top-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* The form only exists for password managers; its fields lay out as
   direct children of .top-bar-right. */
.sign-in-form {
  display: contents;
}
.craft-key-input {
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
  width: 140px;
}
.craft-key-input::placeholder {
  color: var(--muted);
}
.tab-bar {
  /* Equal-width tabs, each wide enough for its widest state (Network
     with a two-digit badge), so a badge coming, going or growing never
     moves the other tabs; a tab's own content stays centered in it. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  align-self: stretch;
  align-items: end;
}
.tab-btn {
  min-width: 7.5em;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 8px 4px 10px 4px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
/* tab-badges.js: a count pill, or a dot when there's no count. */
.tab-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--text);
}
.tab-badge.done {
  background: color-mix(in srgb, var(--idle) 28%, transparent);
  color: var(--idle);
}
.tab-badge.alert {
  background: color-mix(in srgb, var(--stale) 25%, transparent);
  color: var(--stale);
}
.tab-badge.dot {
  min-width: 0;
  width: 7px;
  height: 7px;
  padding: 0;
  vertical-align: 2px;
}
.tab-badge.dot.done { background: var(--idle); }
.tab-badge.dot.alert { background: var(--stale); }
/* power.js: how full the batteries are, on the tab and machine buttons. */
.tab-fill,
.machine-fill {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.tab-fill {
  line-height: 1;
}
.tab-fill:empty {
  display: none;
}
.power-machines {
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.power-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.power-current {
  font-size: 15px;
}
.power-current .big {
  font-size: 22px;
  font-weight: 700;
}
.power-trend {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: default;
}
.power-trend-up {
  color: #5fd97a;
}
.power-trend-down {
  color: var(--stale);
}
.power-trend-wrap {
  position: relative;
  display: inline-block;
}
.power-trend-tooltip {
  display: none;
  position: absolute;
  top: 100%;
  /* right, not left - the trend indicator is the last thing on its
     line (after "... EU (23.4%)"), so it's typically positioned
     toward the right side of whatever line it's on. Anchoring the
     tooltip's right edge to match, growing LEFTWARD, keeps it away
     from the right edge of a narrow mobile screen far more reliably
     than growing rightward from the left ever did - confirmed as a
     real reported bug otherwise (nowrap + left:0 together meant a
     wide, right-anchored-from-the-left tooltip on a screen with
     little room to its right, forcing a horizontal scrollbar). */
  right: 0;
  margin-top: 6px;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  /* Hard cap, not just narrower content - can never exceed the
     viewport regardless of where the trigger ends up sitting, even
     in an edge case the right-anchoring above doesn't fully solve.
     Widened from 200 to 230 - 200 was too tight once each line got
     its own white-space: nowrap below, causing "EU/s" itself to wrap
     onto its own line on a longer number like "687.19M" - confirmed
     as a real reported follow-up bug, not a hypothetical. */
  max-width: min(230px, calc(100vw - 24px));
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.power-trend-wrap:hover .power-trend-tooltip {
  display: block;
}
.power-trend-tooltip-row {
  display: flex;
  flex-direction: column;  /* was a single nowrap row (In/Out side by
                               side) - stacked onto two lines instead,
                               so the tooltip needs far less width to
                               begin with, rather than relying on
                               positioning alone to avoid overflow */
  gap: 4px;
  font-weight: 600;
}
.power-trend-in, .power-trend-out {
  /* Each line stays one unbroken phrase ("In: 687.19M EU/s") - the
     row above lost its own nowrap when it switched from a single
     side-by-side line to two stacked ones, so without this, "EU/s"
     itself could wrap onto a third line if the number was wide
     enough to reach the tooltip's max-width. */
  white-space: nowrap;
}
.power-trend-in {
  color: #5fd97a;
}
.power-trend-out {
  color: var(--stale);
}
.range-buttons {
  display: flex;
  gap: 6px;
}
.range-buttons[hidden] {
  display: none;
}
.range-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(128,128,128,0.3);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.range-btn.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.range-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.chart-wrap {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid rgba(128,128,128,0.15);
  padding: 16px;
  height: 420px;
}
.network-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.network-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.network-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Grid / list: icons only, joined into one segmented button. */
.view-toggle {
  gap: 0;
}
.view-toggle .range-btn {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 6px 9px;
}
.view-toggle .range-btn:first-child {
  border-radius: 8px 0 0 8px;
}
.view-toggle .range-btn:last-child {
  border-radius: 0 8px 8px 0;
  margin-left: -1px;
}
.view-toggle .range-btn.active {
  position: relative;  /* its border over the neighbour's shared edge */
}
.network-search {
  width: 100%;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  /* Real text made invisible (not removed) - this input still does
     all the actual work (typing, cursor, selection, focus) natively.
     caret-color keeps the blinking cursor visible despite the text
     itself being transparent - only the highlight overlay below is
     ever actually seen. */
  color: transparent;
  caret-color: var(--text);
}
.network-search::placeholder {
  color: var(--muted);
}
.network-search-highlight {
  position: absolute;
  inset: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  line-height: normal;
  color: var(--text);
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid transparent;
}
.search-hl-mod {
  color: #ff6ec7;
  /* NOT font-weight: 600 here - bold glyphs render wider than
     normal-weight glyphs in essentially every font, and the real
     input's (invisible) text stays at normal weight regardless. That
     mismatch compounds per highlighted character, which is exactly
     what caused the reported cursor-drift bug: the more @/- text
     typed, the more the overlay's bolded text silently outgrows the
     real input's actual layout underneath it, even though the cursor
     itself was always exactly where the real input placed it. Color
     alone differentiates the highlighted terms now - font-weight has
     to stay identical between the two layers everywhere, not just
     font-family/size/padding.
  */
}
.search-hl-exclude {
  color: var(--accent);
}
/* Same weight as the input's text, as .search-hl-mod explains. */
.search-hl-tooltip {
  color: var(--search-tooltip);
}
.search-hl-ore {
  color: var(--search-ore);
}
.search-hl-formula {
  color: var(--search-formula);
}
.search-hl-quote {
  /* Only the quote MARKS themselves get this color - confirmed from a
     real screenshot ("air shard" with just the " " characters in
     orange, the text between them staying plain default color). NOT
     font-weight here either, same reasoning as .search-hl-mod above -
     must stay visually identical in weight to the invisible real
     input text underneath, or the two layers drift out of alignment
     as more of the query is highlighted.
  */
  color: #ffa94d;
}
.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.network-cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.network-cell:focus {
  outline: none;
}
.network-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.network-cell.craftable {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.network-cell-icon {
  width: 62%;
  height: 62%;
  image-rendering: pixelated;
  /* Above neighbouring cells' halos (.icon-bleed), as in NEI's grid. */
  position: relative;
  z-index: 2;
}
.network-cell-qty {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.9);
  font-variant-numeric: tabular-nums;
  z-index: 3;
}
/* The Change sort's rate: in place of the quantity in the grid. */
.network-cell-change {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 2px;
  border-radius: 3px;
  /* A plate rather than the quantity's shadow, which muddies colour. */
  background: color-mix(in srgb, var(--card) 85%, transparent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  z-index: 3;
}
.network-cell-change.falling {
  color: var(--stale);
}
.network-cell-change.rising {
  color: var(--idle);
}
.network-cell.has-change .network-cell-qty {
  display: none;
}
.network-cell-pattern-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.9));
}
.network-cell-stock-badge {
  position: absolute;
  bottom: 1px;
  left: 2px;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.9));
}
.network-cell-stock-badge.low {
  color: var(--stale);
}
.network-cell.stock-low {
  border-color: color-mix(in srgb, var(--stale) 70%, transparent);
  background: color-mix(in srgb, var(--stale) 10%, var(--card));
}
.network-cell-pin-badge {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.9));
}
/* List view: each cell becomes a row with the item's name. */
.network-cell-name {
  display: none;
}
.network-grid.list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px;
}
.network-grid.list .network-cell {
  aspect-ratio: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 10px 6px 8px;
  min-width: 0;
}
.network-grid.list .network-cell-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.network-grid.list .network-cell-name {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.network-cell-variant {
  color: var(--muted);
}
.network-grid.list .network-cell-qty {
  position: static;
  order: 2;
  font-size: 12px;
  text-shadow: none;
}
.network-grid.list .network-cell.has-change .network-cell-qty {
  display: inline;
}
.network-grid.list .network-cell-change {
  position: static;
  order: 2;
  background: none;
  font-size: 12px;
}
.network-grid.list .network-cell-pattern-badge {
  position: static;
  order: 1;
  filter: none;
}
.network-note {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 12px;
}
.network-tooltip {
  position: fixed;
  z-index: 3000;  /* above .modal-overlay - the ingredients grid is in one */
  pointer-events: none;
  background: rgba(24, 14, 38, 0.97);
  border: 1px solid rgba(160, 110, 255, 0.5);
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 280px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.network-tooltip-name {
  font-size: 15px;
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 5px;
}
.network-tooltip-variant {
  font-size: 12px;
  color: #d8c890;
  margin: -2px 0 5px;
}
.network-tooltip-stat {
  font-size: 12px;
  color: #a8a8b8;
}
.network-tooltip-change {
  font-size: 12px;
  color: #a8a8b8;
  margin-top: 2px;
}
.network-tooltip-fluid {
  font-size: 11px;
  font-weight: 700;
  color: #5fd0d8;
  margin-top: 3px;
}
.network-tooltip-craftable {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 3px;
}
/* Item descriptions (description.js): the game's tooltip text, its
   colours meant for the game's dark tooltip, so always on one. */
.game-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
  color: #aaaaaa;
}
.mc-0 { color: #000000; }
.mc-1 { color: #0000aa; }
.mc-2 { color: #00aa00; }
.mc-3 { color: #00aaaa; }
.mc-4 { color: #aa0000; }
.mc-5 { color: #aa00aa; }
.mc-6 { color: #ffaa00; }
.mc-7 { color: #aaaaaa; }
.mc-8 { color: #555555; }
.mc-9 { color: #5555ff; }
.mc-a { color: #55ff55; }
.mc-b { color: #55ffff; }
.mc-c { color: #ff5555; }
.mc-d { color: #ff55ff; }
.mc-e { color: #ffff55; }
.mc-f { color: #ffffff; }
.mc-bold { font-weight: 700; }
.mc-italic { font-style: italic; }
.mc-underline { text-decoration: underline; }
.mc-strike { text-decoration: line-through; }
.mc-underline.mc-strike { text-decoration: underline line-through; }
.network-tooltip:has(.network-tooltip-description) {
  max-width: 420px;
}
.network-tooltip-description {
  margin-top: 6px;
}
/* "[shift]" under the name, where the game puts it: Shift shows more. */
.network-tooltip-hint {
  font-size: 12px;
  color: #808080;
  margin: -2px 0 5px;
}
/* The mod's name closing a tooltip, in NEI's blue italic (a lighter
   blue than its §9, which is hard to read on the dark box). */
.game-text-mod {
  color: #7f8cff;
  font-style: italic;
}
.history-info {
  margin: 0 0 12px;
  font-size: 13px;
}
.history-info[hidden],
.history-short[hidden],
.history-details[hidden],
.history-shift-btn[hidden] {
  display: none;
}
.history-short {
  color: var(--muted);
}
/* Collapsed: the description's first line, plain, in the page's own
   colours. Open: "Description", then the game-style box. */
.history-summary {
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-summary-text {
  color: var(--text);
}
.history-summary-more {
  font-size: 12px;
}
.history-summary-open,
.history-details[open] .history-summary-text,
.history-details[open] .history-summary-more {
  display: none;
}
.history-details[open] .history-summary-open {
  display: inline;
}
.history-description {
  background: rgba(24, 14, 38, 0.97);
  border: 1px solid rgba(160, 110, 255, 0.5);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  max-height: 30vh;
  overflow-y: auto;
}
.history-shift-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.history-shift-row:not(:has(.history-shift-btn:not([hidden]))) {
  display: none;
}
.history-ore {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 4px;
}
.history-ore:empty {
  display: none;
}
.history-ore-name {
  font: inherit;
  color: var(--search-ore);
  background: none;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 5px;
  margin: 0 2px;
  cursor: pointer;
}
.history-ore-name:hover {
  background: color-mix(in srgb, currentColor 15%, transparent);
}
.network-tooltip-mod {
  font-size: 12px;
  font-weight: 600;
  color: #7fa8ff;
  margin-top: 5px;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  z-index: 2000;
  /* A dialog taller than the screen scrolls here, from its top (margin:
     auto centres it, where align-items: center would cut its top off),
     and the scroll stops at the ends rather than moving the page. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  box-sizing: border-box;
}
.modal-overlay > .modal-box {
  margin: auto;
}
/* The page doesn't scroll under an open dialog. Dialogs are shown and
   hidden through their inline display style, so that's what says one
   is open. */
html:has(.modal-overlay:not([style*="none"])) {
  overflow: hidden;
}
/* So the page doesn't shift sideways as its scrollbar goes. */
html {
  scrollbar-gutter: stable;
}
/* A dialog's own lists stop at their ends too. */
.modal-box,
.modal-box * {
  overscroll-behavior: contain;
}
/* Opened from the item dialog, which can be over the ingredients dialog:
   above both, though it comes first in the page. */
#craftRequestModal {
  z-index: 2001;
}
/* Focus waits on the box itself when a dialog opens (dialogs.js); no
   ring round the whole dialog for that. */
.modal-box:focus {
  outline: none;
}
.modal-box {
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 12px;
  padding: 20px;
  width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.modal-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.modal-item-name {
  font-size: 15px;
  font-weight: 700;
}
/* A plain title takes the free space, so a close button after it sits at
   the top right, as it does in the history and Ingredients dialogs. */
.modal-header > .modal-item-name {
  flex: 1;
  min-width: 0;
}
.history-box {
  width: min(700px, 92vw);
}
.admin-box {
  width: min(560px, 92vw);
}

/* Signed out of a private server (auth.js): the notice, not the tabs. */
body.private-locked .tab-bar,
body.private-locked #loadError,
body.private-locked #craftsTab,
body.private-locked #powerTab,
body.private-locked #networkTab {
  display: none !important;
}
.private-notice {
  max-width: 32rem;
  margin: 15vh auto 0;
  padding: 0 16px;
  text-align: center;
  color: var(--muted);
}
.private-notice h2 {
  color: var(--text);
  margin-bottom: 8px;
}

/* Scripts dialog (agents.js). */
.status-body {
  max-height: 70vh;
  overflow-y: auto;
}
.status-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 6px;
}
.server-health {
  padding: 10px 12px;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 10px;
  margin-bottom: 14px;
}
.health-feed + .health-feed {
  margin-top: 6px;
}
.health-feed + .agent-line {
  margin-top: 10px;
}
.health-label {
  font-weight: 600;
  font-size: 13px;
  margin-right: 6px;
}
.health-feed > .agent-line {
  display: inline;
}
.health-feed > .agent-line.failed {
  display: block;
  margin-left: 13px;
}
.agents-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.connect-heading {
  margin-top: 16px;
}
.connect-scripts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
}
.connect-scripts-label {
  color: var(--muted);
  margin-right: 2px;
}
.connect-command {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.connect-computer a {
  color: inherit;
}
.connect-command code {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.agent-card {
  padding: 10px 12px;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 10px;
}
.agent-card.offline {
  opacity: 0.7;
}
.agent-name {
  font-weight: 600;
}
.agent-line {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.agent-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 13px;
}
.agent-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--stale);
}
.agent-dot.running {
  background: var(--idle);
}
.agent-dot.warn {
  background: var(--busy);
}
.agent-dot.off {
  background: var(--muted);
}
.agent-command.failed {
  color: var(--stale);
}
.agent-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.agent-setting {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.agent-setting input {
  margin: 2px 0 0;
  accent-color: var(--idle);
}
.agent-setting .agent-line {
  display: block;
  margin-top: 2px;
}
.agent-setting .agent-line:empty {
  display: none;
}
.agent-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
/* Manage users (auth.js): one grid for the list, so each row's role
   and buttons line up with the others'. */
.admin-users-box { width: min(640px, 92vw); max-height: calc(100vh - 32px); overflow-y: auto; }
.admin-section-heading { margin-top: 18px; }
.admin-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 8px; }
.admin-form-grid .modal-amount-input { margin: 0; }
.admin-role-help { margin: 6px 0 0; }
#adminUsersError { margin: 8px 0 0; }
.admin-users {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 8px;
  font-size: 13px;
}
.admin-user-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(128,128,128,0.15);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row.new { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.admin-users-empty { grid-column: 1 / -1; padding: 10px 12px; color: var(--muted); }
.admin-user-main { min-width: 0; }
.admin-user-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.admin-user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-you { flex-shrink: 0; color: var(--muted); font-size: 11px; }
.admin-user-role-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.role-badge { text-transform: uppercase; cursor: help; }
.role-badge.viewer { background: rgba(128,128,128,0.18); color: var(--muted); }
.role-badge.operator { background: color-mix(in srgb, var(--idle) 22%, transparent); color: color-mix(in srgb, var(--idle) 70%, var(--text)); }
.role-badge.admin { background: color-mix(in srgb, var(--busy) 25%, transparent); color: color-mix(in srgb, var(--busy) 70%, var(--text)); }
.role-badge.disabled { background: color-mix(in srgb, var(--stale) 20%, transparent); color: var(--stale); cursor: default; }
.admin-user-actions { display: flex; align-items: center; gap: 6px; }
.admin-user-actions .range-btn { padding: 5px 10px; }
.admin-delete-btn { color: var(--stale); border-color: rgba(255,107,107,0.35); }
.admin-delete-btn:hover { background: color-mix(in srgb, var(--stale) 15%, transparent); }
.admin-token-list { margin-top: 3px; }
.admin-token-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 2px; color: var(--muted); font-size: 11px; }
.admin-token-meta { min-width: 0; }
.admin-token-revoke { border: none; background: none; padding: 0; color: var(--muted); cursor: pointer; font-size: 11px; text-decoration: underline; flex-shrink: 0; }
.admin-token-revoke:hover { color: var(--stale); }
.admin-token-result { grid-column: 1 / -1; margin-top: 10px; }
.admin-token-result .modal-label { color: var(--text); }
@media (max-width: 560px) {
  .admin-form-grid { grid-template-columns: minmax(0, 1fr) 120px; }
  .admin-form-grid .modal-btn { grid-column: 1 / -1; }
  .admin-users { display: block; }
  .admin-user-row { display: flex; flex-wrap: wrap; row-gap: 6px; }
  .admin-user-main { flex: 1 1 100%; }
}
.gamedata-current { font-size: 13px; margin-bottom: 10px; }
.gamedata-progress { margin-top: 12px; }
/* Backups dialog (auth.js). */
.backups-restore-heading { margin-top: 18px; }
.webhook-urls { resize: vertical; font-family: monospace; font-size: 12px; }
/* The file input itself is hidden: its label, a normal button, opens it. */
.restore-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.restore-pick-btn { position: relative; flex-shrink: 0; }
.restore-pick-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.restore-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.restore-file-name { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gamedata-label { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.gamedata-credit { margin-top: 6px; color: var(--muted); font-size: 11px; }
.gamedata-credit a { color: inherit; }
.gamedata-unknown { font-size: 13px; margin-bottom: 10px; }
.gamedata-unknown summary { cursor: pointer; }
.gamedata-unknown ul { margin: 6px 0; padding-left: 18px; max-height: 160px; overflow-y: auto; }
.gamedata-id { color: var(--muted); font-size: 11px; }
#gamedataModal .status-heading { margin-top: 18px; }
#gamedataModal .modal-header + .status-heading { margin-top: 4px; }

/* Pattern check dialog (recipe-check.js): each pattern, then the recipe
   it matched before and what makes it now. */
.recipe-check-box { width: min(760px, 94vw); max-height: 88vh; overflow-y: auto; }
.recipe-check-section { margin-top: 14px; }
.recipe-check-section > summary { cursor: pointer; }
.recipe-check-row {
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 10px;
  font-size: 13px;
}
.recipe-check-pattern { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.recipe-check-name { font-weight: 600; }
.recipe-check-provider { color: var(--muted); font-size: 12px; }
.recipe-check-pattern-stacks { margin-top: 4px; }
.recipe-check-line { margin-top: 4px; color: var(--busy); }
.recipe-block { margin-top: 8px; }
.recipe-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.recipe-step { margin-top: 2px; }
.recipe-step-machine { font-size: 12px; }
.recipe-step-details { color: var(--muted); margin-left: 6px; }
.recipe-step-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.recipe-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.recipe-arrow { color: var(--muted); }
.recipe-stack { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.recipe-stack-icon { width: 20px; height: 20px; flex: none; image-rendering: pixelated; }
.recipe-stack-amount { color: var(--muted); font-variant-numeric: tabular-nums; }
.recipe-stack-name { overflow-wrap: anywhere; }
.recipe-chance { color: var(--muted); font-size: 11px; }
.admin-token-value { width: 100%; min-height: 70px; resize: vertical; font-family: monospace; font-size: 12px; word-break: break-all; }
/* User history (auth.js): one user's requests and cancels, drawn like
   the Crafts tab's Recent crafts. */
.user-history-box { width: min(620px, 92vw); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.user-history-filters { flex-wrap: wrap; margin-bottom: 12px; }
/* A switch, not a filter: set apart at the end of the row. */
.user-history-auto { margin-left: auto; }
.user-history-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 0; padding-right: 2px; }
.user-history-list .empty { color: var(--muted); font-size: 13px; padding: 12px 0; }
.user-history-row { background: none; }
.user-history-amount { color: var(--muted); font-weight: 400; }
.user-history-reason { margin-top: 2px; font-size: 12px; color: var(--stale); overflow-wrap: anywhere; }
.status-badge.started { background: color-mix(in srgb, var(--idle) 20%, transparent); color: color-mix(in srgb, var(--idle) 70%, var(--text)); }
.status-badge.cancelled { background: color-mix(in srgb, var(--busy) 22%, transparent); color: color-mix(in srgb, var(--busy) 70%, var(--text)); }
.status-badge.failed { background: color-mix(in srgb, var(--stale) 20%, transparent); color: var(--stale); }
.status-badge.waiting { background: rgba(128,128,128,0.18); color: var(--muted); }
.history-name-wrap {
  flex: 1;
  min-width: 0;
}
.history-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-current {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.history-trend {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.history-trend.trend-up {
  color: #5fd97a;
}
.history-trend.trend-down {
  color: var(--stale);
}
.power-eta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}
.history-pin-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
}
.history-pin-btn.pinned {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.history-close-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
/* The small search box at the top right of the Ingredients and plan
   dialogs, like the game's on its crafting status screen. */
.modal-filter {
  width: 160px;
  min-width: 0;
  height: 30px;
  flex-shrink: 1;
  margin-left: auto;
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
}
.modal-filter::placeholder {
  color: var(--muted);
}
.craft-plan-tools .modal-filter {
  width: 140px;
  height: auto;
  align-self: stretch;
}
.history-chart-wrap {
  height: 320px;
  margin: 14px 0;
}
.history-craft-btn {
  width: 100%;
}
.modal-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.modal-amount-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.modal-amount-preview {
  margin-top: -8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted);
}
.modal-amount-preview-error {
  color: var(--stale);
}
.modal-error {
  color: var(--stale);
  font-size: 12px;
  margin-bottom: 12px;
}
.modal-note {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
}
.modal-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
.modal-btn.primary {
  background: var(--accent-fill);
  color: #fff;
}
.modal-btn.secondary {
  background: rgba(128,128,128,0.2);
  color: var(--text);
}
.cancel-confirm-btn {
  background: var(--danger-fill);
  color: #fff;
}
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: toast-in 0.2s ease-out;
  max-width: 90vw;
}
.toast.error {
  border-color: color-mix(in srgb, var(--stale) 50%, transparent);
  color: var(--stale);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.craft-request-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.craft-request-card.failed {
  border-color: color-mix(in srgb, var(--stale) 50%, transparent);
  background: color-mix(in srgb, var(--stale) 6%, var(--card));
}
.craft-request-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.craft-request-info {
  flex: 1;
  min-width: 0;
}
.craft-request-name {
  font-size: 13px;
  font-weight: 600;
}
.craft-request-status {
  font-size: 12px;
  color: var(--muted);
}
.craft-request-status.failed {
  color: var(--stale);
}
.craft-request-dismiss {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  color: var(--muted);
  cursor: pointer;
}
.item-history-link {
  cursor: pointer;
}
.item-history-link:hover {
  text-decoration: underline;
  color: var(--accent);
}
.item-history-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(128,128,128,0.2);
  overflow: hidden;
  margin-bottom: 4px;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.craft-title-muted {
  color: var(--muted);
  font-weight: 500;
}
.progress-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  /* The run time and time left change every redraw: even-width digits
     keep the line's width put, so it doesn't wrap on one tick and
     unwrap on the next, resizing the whole row of cards. */
  font-variant-numeric: tabular-nums;
}
.progress-part {
  white-space: nowrap;
}
.empty {
  color: var(--muted);
  font-size: 13px;
  padding: 20px;
  text-align: center;
}
.ingredients-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 10px;
  background: rgba(95,179,255,0.1);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.progress-label + .ingredients-btn {
  margin-top: 0;  /* flex cards don't collapse this into the label's margin */
}
.ingredients-btn:hover {
  background: rgba(95,179,255,0.18);
}
.ingredients-box {
  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 700px);
  display: flex;
  flex-direction: column;
}
.ingredients-box .modal-header {
  align-items: flex-start;
  margin-top: 0;
}
.ingredients-progress {
  margin-top: 10px;
}
.ingredients-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* A haloed icon (.icon-bleed) in the last column reaches past the
     grid's edge; clipped there rather than scrolling the grid sideways. */
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  /* max-content, not the default auto: in a height-capped scroll box,
     auto rows stay at each cell's min-height and clip taller cells. */
  grid-auto-rows: max-content;
  gap: 6px;
  align-content: start;
}
/* One cell per item, laid out like AE2's crafting status screen: the
   counts on the left, the icon on the right, and a green tint for
   what's being crafted right now. */
.ingredient-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--text) 4%, var(--card));
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.ingredient-cell.crafting {
  background: color-mix(in srgb, var(--idle) 14%, var(--card));
  border-color: color-mix(in srgb, var(--idle) 45%, transparent);
}
.ingredient-cell.item-history-link:hover {
  text-decoration: none;
  color: var(--muted);
  border-color: var(--accent);
}
.ingredient-cell-lines {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.ingredient-cell-lines b {
  color: var(--text);
}
.ingredient-cell-name {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ingredient-cell-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  image-rendering: pixelated;
}
/* Crafting plan in the craft-request dialog (craft-plan.js). The dialog
   widens while a plan is shown, and the plan scrolls inside it. */
.modal-box.with-plan {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.craft-plan {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
  margin: 4px 0 12px;
}
.craft-plan[hidden],
.craft-plan-note[hidden],
.craft-plan-hide[hidden] {
  display: none;
}
.craft-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.craft-plan-views {
  margin: 0;
}
.craft-plan-summary {
  flex-shrink: 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-ok {
  color: var(--idle);
}
.plan-missing-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.plan-missing-strip.expanded {
  max-height: 25vh;
  overflow-y: auto;
}
.plan-more {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(128,128,128,0.35);
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.plan-missing-label,
.plan-missing-line,
.plan-missing-line b {
  color: var(--stale);
  font-weight: 600;
}
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stale) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--stale) 40%, transparent);
  /* A button: jumps to where the item is short (craft-plan.js jumpTo). */
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.plan-chip:hover {
  border-color: var(--stale);
}
.plan-jump-count {
  color: var(--muted);
  font-size: 11px;
}
.plan-short-below {
  color: var(--stale);
}
/* A step whose name matches the filter box. */
.plan-node.filter-match > .plan-row .plan-name {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 3px;
}
/* The step a Missing chip jumped to, flashed once. */
.plan-row.plan-jump {
  animation: plan-jump-flash 1.6s ease-out;
  border-radius: 6px;
}
@keyframes plan-jump-flash {
  0%, 30% { background: color-mix(in srgb, var(--stale) 28%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-row.plan-jump { animation: none; background: color-mix(in srgb, var(--stale) 18%, transparent); }
}
.plan-chip-icon {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.plan-warning-line {
  color: var(--busy);
}
.craft-plan-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.plan-rules {
  position: relative;
}
.plan-rules[hidden] {
  display: none;
}
.plan-rules-btn {
  display: inline-block;
  list-style: none;
  color: var(--busy);
  border-color: color-mix(in srgb, var(--busy) 50%, transparent);
  user-select: none;
}
.plan-rules-btn::-webkit-details-marker {
  display: none;
}
.plan-rules-btn::after {
  content: " \25BE";
}
.plan-rules[open] > .plan-rules-btn {
  background: color-mix(in srgb, var(--busy) 15%, transparent);
}
.plan-rules-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  width: min(340px, calc(100vw - 48px));
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  font-size: 12px;
}
.plan-rules-head {
  color: var(--muted);
  margin-bottom: 6px;
}
.plan-rules-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
}
.plan-meta,
.craft-plan-foot {
  color: var(--muted);
  font-size: 11px;
}
.craft-plan-body {
  flex: 1;
  min-height: 120px;
  max-height: min(55vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;  /* as .ingredients-grid: haloed icons at the edge */
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 8px;
  padding: 6px;
}
.plan-grid {
  overflow: visible;
}
.ingredient-cell.missing {
  background: color-mix(in srgb, var(--stale) 12%, var(--card));
  border-color: color-mix(in srgb, var(--stale) 45%, transparent);
}
/* The game's colours for how much of an item's stock the plan uses. */
.plan-used.used-all { color: var(--stale); }
.plan-used.used-high { color: var(--busy); }
.plan-used.used-mid { color: var(--idle); }
.plan-used.used-low { color: var(--accent); }
.plan-tree,
.plan-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plan-tree ul {
  margin-left: 11px;
  padding-left: 10px;
  border-left: 1px solid rgba(128,128,128,0.25);
}
.plan-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
  font-size: 13px;
}
.plan-caret {
  flex: 0 0 18px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
}
span.plan-caret {
  cursor: default;
}
.plan-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.plan-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.plan-name {
  font-weight: 600;
}
.plan-qty {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.status-missing > .plan-row .plan-qty,
.status-cycle > .plan-row .plan-qty {
  color: var(--stale);
}
.status-via > .plan-row .plan-name {
  font-weight: 500;
  color: var(--muted);
}
.status-stock > .plan-row .plan-qty {
  color: var(--idle);
}
.plan-details {
  color: var(--muted);
  font-size: 11px;
}
.plan-loading,
.plan-none {
  color: var(--muted);
  font-size: 12px;
  padding: 3px 0 3px 24px;
}
.plan-alt {
  margin-top: 3px;
  max-width: 100%;
  font-size: 11px;
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 6px;
  padding: 2px 4px;
}
section.group {
  margin-bottom: 22px;
}
.group-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}
details.idle-group summary,
details.craft-history summary,
details.stock-rules summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: 10px;
  user-select: none;
}
details.idle-group summary::-webkit-details-marker,
details.craft-history summary::-webkit-details-marker,
details.stock-rules summary::-webkit-details-marker { display: none; }
details.idle-group summary::before,
details.craft-history summary::before,
details.stock-rules summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
details.idle-group[open] summary::before,
details.craft-history[open] summary::before,
details.stock-rules[open] summary::before {
  transform: rotate(90deg);
}
details.idle-group .grid {
  margin-top: 12px;
}

/* Crafts tab: Recent crafts (craft-history.js). */
details.craft-history {
  margin-top: 14px;
}
.craft-history-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.craft-history-tools .modal-filter {
  width: 200px;
}
.craft-history-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-day {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 8px 0 2px;
}
.history-day:first-child {
  margin-top: 0;
}
.history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: 10px;
}
.history-row span.craft-icon {
  display: block;  /* a blank where a row has no icon, to keep names lined up */
}
.history-row-main {
  flex: 1;
  min-width: 0;
}
.history-row-name {
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.history-row-when {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* Crafts tab: Statistics (craft-stats.js). */
.stats-summary {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.stats-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}
.stats-bar-fill {
  height: 100%;
  background: var(--accent);
}
.history-loading {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* An icon drawn past the item box (util.js iconClass()): the image is
   (16 + 2 * 12) / 16 = 2.5 times the box, so scaled by that around its
   centre, the item fills the usual space and the halo spills over what's
   around it - over neighbouring cells' backgrounds, under their icons.
   Clicks go through it to whatever is underneath. */
.icon-bleed {
  transform: scale(2.5);
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.network-cell-icon.icon-bleed {
  z-index: 1;
}

/* Stock rules (stock.js): the list on the Network tab... */
details.stock-rules {
  margin-bottom: 14px;
}
.stock-row {
  cursor: pointer;
}
.stock-row:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.stock-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
  background: rgba(128,128,128,0.2);
  color: var(--muted);
}
.stock-chip.ok { background: color-mix(in srgb, var(--idle) 20%, transparent); color: var(--idle); }
.stock-chip.low,
.stock-chip.failed { background: color-mix(in srgb, var(--stale) 20%, transparent); color: var(--stale); }
.stock-chip.waiting { background: color-mix(in srgb, var(--busy) 20%, transparent); color: var(--busy); }
.stock-chip.requested,
.stock-chip.crafting { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.stock-row-amount {
  flex-shrink: 0;
  width: 84px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
}
.stock-bar {
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(128,128,128,0.2);
  overflow: hidden;
}
.stock-bar-fill {
  height: 100%;
  background: var(--idle);
}
.stock-bar-fill.low {
  background: var(--stale);
}

/* ...and the panel in the item popup. */
.stock-panel {
  margin: 4px 0 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(128,128,128,0.15);
}
.stock-panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stock-panel-row[hidden] {
  display: none;
}
.stock-panel-label {
  font-size: 13px;
  color: var(--muted);
}
.stock-panel-row .stock-input {
  width: 110px;
  margin: 0;
}
.stock-panel-note {
  margin-bottom: 8px;
}

/* Essentia without an aspect icon (util.js essentiaBadgeHtml): a round
   badge with the aspect's initial, sized by the icon class beside it. */
.essentia-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--essentia) 22%, var(--card));
  border: 1px solid color-mix(in srgb, var(--essentia) 60%, transparent);
  color: var(--essentia);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}
.network-cell-icon.essentia-badge { font-size: 14px; }
.ingredient-cell-icon.essentia-badge { font-size: 15px; }

/* Live crafting tree in a CPU's details (job-tree.js). Drawn once and
   then only updated in place, so these transitions carry each step
   from one report (every 5s) to the next. */
.ingredients-views {
  margin: 10px 0 8px;
}
.ingredients-tree-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ingredients-tree-wrap[hidden],
.ingredients-grid[hidden],
.modal-filter[hidden],
.job-stuck-strip[hidden] {
  display: none;
}
.ingredients-tree {
  max-height: none;
  min-height: 0;
}
.job-provider:not(:empty) + .job-step-note:not(:empty)::before {
  content: " · ";
}
.job-machine-place {
  white-space: nowrap;
}
.job-bar {
  height: 3px;
  margin-top: 3px;
  width: 180px;
  max-width: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.job-bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 4.5s linear, background-color 0.6s;
}
.job-node.job-done > .plan-row {
  opacity: 0.55;
  transition: opacity 0.8s, background-color 0.6s, border-color 0.6s;
}
/* Set while the tree is redrawn (job-tree.js render): bars go straight
   to where they were. */
.job-tree-instant .job-bar-fill,
.job-tree-instant .job-node > .plan-row {
  transition: none;
}
.job-node.job-done > .plan-row .job-bar-fill {
  background: var(--idle);
}
.job-node.job-storage > .plan-row {
  opacity: 0.6;
}
/* Rows tinted as the grid's cells (.ingredient-cell.crafting): green
   while crafting, amber when stuck. Every row keeps the padding and a
   border, so a step changing state doesn't shift the tree. */
.job-node > .plan-row {
  margin: 1px 0;
  padding: 3px 6px 3px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background-color 0.6s, border-color 0.6s;
}
.job-node.job-active > .plan-row {
  background: color-mix(in srgb, var(--idle) 14%, var(--card));
  border-color: color-mix(in srgb, var(--idle) 45%, transparent);
}
.job-node.job-stuck > .plan-row {
  background: color-mix(in srgb, var(--busy) 14%, var(--card));
  border-color: color-mix(in srgb, var(--busy) 45%, transparent);
}
.job-node.job-active > .plan-row .job-bar-fill {
  background: var(--idle);
}
.job-count-active { color: var(--idle); }
.job-node.job-active > .plan-row .plan-icon,
.job-node.job-active > .plan-row .job-bar-fill {
  animation: job-pulse 2s ease-in-out infinite;
}
@keyframes job-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* Stuck: steady amber, so it stands out from the pulsing active steps. */
.job-node.job-stuck > .plan-row .job-bar-fill {
  background: var(--busy);
}
/* Amber text a shade toward the text colour, readable on the amber
   tint in both themes. */
.job-node.job-stuck > .plan-row .job-step-note,
.job-count-stuck {
  color: color-mix(in srgb, var(--busy) 75%, var(--text));
}
.job-stuck-strip {
  font-size: 12px;  /* as the plan's Missing strip (.craft-plan-summary) */
  flex-shrink: 0;
}
.job-stuck-strip .plan-chip {
  background: color-mix(in srgb, var(--busy) 12%, var(--card));
  border-color: color-mix(in srgb, var(--busy) 45%, transparent);
}
.job-stuck-strip .plan-missing-label {
  color: var(--busy);
}
@media (prefers-reduced-motion: reduce) {
  .job-bar-fill,
  .job-node > .plan-row {
    transition: none;
  }
  .job-node.job-active > .plan-row .plan-icon,
  .job-node.job-active > .plan-row .job-bar-fill {
    animation: none;
  }
}

/* ---------- Phone width ---------- */
@media (max-width: 520px) {
  /* No room for the title beside the tabs and the settings button;
     the open tab already says where you are. */
  .top-bar h1 {
    display: none;
  }
  /* The tabs share what's left of the row equally instead, so they fit
     a 360px phone. A tab only outgrows its share when the row is too
     tight for what it shows (two-digit badges at 320px). */
  .tab-bar {
    flex: 1 1 0;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 4px;
  }
  .tab-btn {
    min-width: 0;
  }
  /* Search on its own line; sort and view share the next, at either end. */
  .network-search-wrap {
    flex-basis: 100%;
  }
  .network-controls {
    width: 100%;
    justify-content: space-between;
  }
  /* Each stock rule's label on its own line, its inputs sharing the
     next one - rather than "refill to"'s box wrapping alone. */
  .stock-panel-row .stock-panel-label:first-child {
    flex-basis: 100%;
  }
  .stock-panel-row .stock-input {
    flex: 1 1 70px;
    width: auto;
    min-width: 0;
  }
  /* The filter drops under the title instead of squeezing it. */
  .ingredients-box .modal-header {
    flex-wrap: wrap;
  }
  .ingredients-box .modal-header .modal-filter {
    order: 3;
    flex-basis: 100%;
    width: auto;
    margin-left: 0;
  }
}