/* Shared visual contracts and shell geometry. Screen layouts and interaction
   remain in the existing files. Colors consume the active semantic token set. */
html { background:var(--ui-app-bg); }
body { background:var(--ui-app-bg); color:var(--ui-text); font-family:var(--ui-font); font-size:var(--ui-font-body); line-height:var(--ui-line-height); }
button,input,select,textarea { font-family:inherit; }
button { font-weight:var(--ui-weight-medium); }
strong,b { font-weight:var(--ui-weight-semibold); }
::selection { background:var(--ui-selection-bg); color:var(--ui-selection-text); }
input::selection,textarea::selection,[contenteditable]::selection { background:var(--ui-selection-bg); color:var(--ui-selection-text); }
.login-screen { background:var(--ui-app-bg); }
.login-screen .orinera-background-host { opacity:.08; filter:grayscale(1); }
.login-card { background:var(--ui-surface); border-color:var(--ui-border); box-shadow:var(--ui-shadow-panel); }
.login-submit { background:var(--ui-button-primary-bg); border-color:transparent; color:var(--ui-button-primary-text); box-shadow:none; }
.login-submit:hover { background:var(--ui-button-primary-hover); box-shadow:none; }
.login-card :is(input[type="text"],input[type="password"],select) { background:var(--ui-surface-input); border-color:var(--ui-border-interactive); box-shadow:none; }
.login-card :is(input,select):focus-visible { border-color:var(--ui-accent); box-shadow:var(--ui-focus-ring); }
.login-screen { background:#031e15; color:#f1f8f2; }
.login-screen .orinera-background-host { opacity:1; filter:none; }
:where(h1,h2,h3,h4) { color:var(--ui-text); font-weight:var(--ui-weight-semibold); line-height:1.25; }
:where(table,.numeric-cell,.metric strong,.passport-metrics strong,.recipe-preview) { font-variant-numeric:tabular-nums; }

/* Shell: preserve widths, collapse behavior and geometric title centering. */
html[data-ui-theme] .app-shell { color:var(--ui-text); background:var(--ui-app-bg); font-family:var(--ui-font); }
html[data-ui-theme] .app-shell > .sidebar { background:var(--ui-sidebar-bg); color:var(--ui-sidebar-text); box-shadow:none; }
html[data-ui-theme] .app-shell .sidebar :is(.brand-title,.nav-label,.nav-icon) { color:var(--ui-sidebar-text); }
html[data-ui-theme] .app-shell .sidebar :is(.brand-subtitle,.sidebar-footer,.nav-count,.sidebar-toggle) { color:var(--ui-sidebar-muted); }
html[data-ui-theme] .app-shell .sidebar .nav-button { background:transparent; border-color:transparent; color:var(--ui-sidebar-muted); box-shadow:none; }
html[data-ui-theme] .app-shell .sidebar .nav-button:hover { background:var(--ui-sidebar-hover); color:var(--ui-sidebar-text); }
html[data-ui-theme] .app-shell .sidebar .nav-button.active { background:var(--ui-sidebar-selected); border-color:transparent; color:var(--ui-sidebar-text); box-shadow:inset 3px 0 var(--ui-accent); }
html[data-ui-theme] .app-shell .sidebar .nav-button.active .nav-icon { color:var(--ui-sidebar-accent); }
html[data-ui-theme] .app-shell .sidebar-toggle { background:transparent; border-color:var(--ui-sidebar-hover); }
html[data-ui-theme] .app-shell .sidebar-toggle:hover { background:var(--ui-sidebar-hover); }
html[data-ui-theme] .app-shell .sidebar button:focus-visible { outline-color:var(--ui-sidebar-accent); }
html[data-ui-theme] .app-shell > .workspace { color:var(--ui-text); background:var(--ui-app-bg); }
html[data-ui-theme] .app-shell .topbar { isolation:isolate; background:var(--ui-header-bg); color:var(--ui-header-text); border-color:var(--ui-header-border); box-shadow:none; }
html[data-ui-theme] .app-shell .topbar :is(.topbar-brand,.account strong,.header-search-toggle,.training-notification-button) { color:var(--ui-header-text); }
html[data-ui-theme] .app-shell .topbar .topbar-brand span { color:var(--ui-header-brand); }
html[data-ui-theme] .app-shell .topbar .account span { color:var(--ui-header-muted); }
html[data-ui-theme] .app-shell .topbar :is(.avatar,.account .tool) { background:var(--ui-header-hover); border-color:var(--ui-header-border); color:var(--ui-header-text); }
html[data-ui-theme] .app-shell .topbar :is(.header-search-toggle:hover,.header-search.is-expanded .header-search-toggle,.training-notification-button:hover) { background:var(--ui-header-hover); border-color:transparent; color:var(--ui-header-text); }
html[data-ui-theme] .app-shell .topbar .search input { background:var(--ui-surface-soft); color:var(--ui-text); border-color:var(--ui-border-interactive); }
html[data-ui-theme] .app-shell .topbar .search input::placeholder { color:var(--ui-text-secondary); }
html[data-ui-theme] :is(.topbar,.mobile-app-header) .realtime-status[data-state="connected"] { color:var(--ui-header-status-success); }
html[data-ui-theme] :is(.topbar,.mobile-app-header) .realtime-status:is([data-state="connecting"],[data-state="reconnecting"]) { color:var(--ui-header-status-warning); }
html[data-ui-theme] :is(.topbar,.mobile-app-header) .realtime-status[data-state="offline"] { color:var(--ui-header-status-danger); }

/* Docked desktop chrome. The presentation class follows the existing viewport
   and immersive-station boundaries; mobile and operator shells never opt in.
   The workspace is a scrollport, not a stacking context, so its fixed dialogs
   remain above both docks (the existing modal layers start at 90). */
.desktop-utility-icon { display:none; }
body.authenticated:has(> .app-shell.docked-shell) { overflow:hidden; }
html[data-ui-theme] body.authenticated > .app-shell.docked-shell { display:block; }
html[data-ui-theme] .app-shell.docked-shell {
  --ui-shell-content-left:calc(var(--ui-shell-edge) + var(--ui-shell-rail-width) + var(--ui-shell-gap));
  --ui-shell-content-top:calc(var(--ui-shell-edge) + var(--ui-shell-header-height) + var(--ui-shell-gap));
  box-sizing:border-box; width:100%; height:100vh; height:100dvh; min-height:0;
  padding:var(--ui-shell-content-top) var(--ui-shell-edge) var(--ui-shell-edge) var(--ui-shell-content-left);
  grid-template-columns:minmax(0,1fr); transition:none; overflow:visible;
}
html[data-ui-theme] .app-shell.docked-shell > .workspace {
  position:static; box-sizing:border-box; width:100%; height:100%; min-width:0; min-height:0;
  margin:0; padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain;
  scrollbar-width:thin; scrollbar-color:var(--ui-border-strong) transparent;
  scroll-padding-block:var(--ui-space-3);
}
html[data-ui-theme] .app-shell.docked-shell > .workspace > .work-grid { margin-top:0; }
html[data-ui-theme] .app-shell.docked-shell > .workspace > .topbar {
  box-sizing:border-box; position:fixed; top:var(--ui-shell-edge); right:var(--ui-shell-edge); left:var(--ui-shell-content-left);
  z-index:var(--ui-shell-header-layer); display:flex; align-items:center; justify-content:flex-end;
  height:var(--ui-shell-header-height); min-height:var(--ui-shell-header-height);
  margin:0; padding:0 12px; gap:0; border:1px solid var(--ui-header-border);
  border-radius:var(--ui-shell-radius); background:var(--ui-header-bg); box-shadow:var(--ui-shell-shadow);
  overflow:visible;
}
html[data-ui-theme] .app-shell.docked-shell .topbar::before { content:none; }
html[data-ui-theme] .app-shell.docked-shell .topbar-brand {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0; font-size:16px; line-height:1; font-weight:var(--ui-weight-semibold);
  letter-spacing:.13em; color:var(--ui-header-text); white-space:nowrap;
}
html[data-ui-theme] .app-shell.docked-shell .topbar-brand span { color:var(--ui-header-brand); }
html[data-ui-theme] .app-shell.docked-shell .topbar-actions {
  display:flex; flex:0 1 auto; align-items:center; justify-content:flex-end;
  min-width:0; max-width:calc(50% - 106px); margin:0; gap:6px; white-space:nowrap;
}
html[data-ui-theme] .app-shell.docked-shell .header-search { position:relative; flex:0 0 auto; min-width:var(--ui-shell-control-size); gap:4px; }
html[data-ui-theme] .app-shell.docked-shell .topbar :is(.header-search-toggle,.training-notification-button,.realtime-status,.app-update-notice) {
  box-sizing:border-box; flex:0 0 var(--ui-shell-control-size); width:var(--ui-shell-control-size);
  height:var(--ui-shell-control-size); min-height:var(--ui-shell-control-size); margin:0; padding:0;
}
html[data-ui-theme] .app-shell.docked-shell .topbar :is(.header-search-toggle svg,.training-notification-button svg,.realtime-status-icon,.desktop-utility-icon) { width:18px; height:18px; }
html[data-ui-theme] .app-shell.docked-shell .topbar .training-notification-button.has-new { color:var(--ui-header-text); }
html[data-ui-theme] .app-shell.docked-shell .topbar .app-update-notice {
  display:grid; place-items:center; background:var(--ui-header-hover); border-color:var(--ui-header-border);
  color:var(--ui-header-status-warning); border-radius:var(--ui-radius-control);
}
html[data-ui-theme] .app-shell.docked-shell .topbar .app-update-notice[hidden] { display:none; }
html[data-ui-theme] .app-shell.docked-shell .app-update-notice .desktop-utility-icon { display:block; }
html[data-ui-theme] .app-shell.docked-shell .app-update-label {
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
html[data-ui-theme] .app-shell.docked-shell .topbar-actions .account {
  flex:0 0 auto; min-width:0; gap:8px; margin-left:2px; padding-left:10px;
  border-left:1px solid var(--ui-header-border);
}
html[data-ui-theme] .app-shell.docked-shell .account > div:first-child { min-width:0; max-width:110px; }
html[data-ui-theme] .app-shell.docked-shell .account strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-theme] .app-shell.docked-shell .account .tool {
  display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 10px;
  border-color:var(--ui-header-border); background:var(--ui-header-hover); color:var(--ui-header-text);
}
html[data-ui-theme] .app-shell.docked-shell .account .tool span { color:inherit; }
html[data-ui-theme] .app-shell.docked-shell .account .avatar { width:32px; height:32px; flex:0 0 32px; }
html[data-ui-theme] .app-shell.docked-shell .header-search.is-expanded .search { width:180px; }
html[data-ui-theme] .app-shell.docked-shell .header-search .search input { min-height:34px; height:34px; font-size:13px; }

html[data-ui-theme] .app-shell.docked-shell > .sidebar {
  box-sizing:border-box; position:fixed; top:var(--ui-shell-edge); bottom:var(--ui-shell-edge); left:var(--ui-shell-edge);
  z-index:var(--ui-shell-sidebar-layer); width:var(--ui-shell-rail-width); height:auto; min-height:0;
  display:flex; flex-direction:column; gap:16px; padding:12px 8px;
  overflow:hidden; border:0; border-radius:var(--ui-shell-radius); background:var(--ui-sidebar-bg);
  box-shadow:var(--ui-shell-shadow); transition:width var(--ui-shell-motion) var(--ui-shell-easing);
}
html[data-ui-theme] .app-shell.docked-shell:is(.sidebar-hover-expanded,:not(.sidebar-collapsed)) > .sidebar { width:var(--ui-shell-rail-expanded); }
html[data-ui-theme] .app-shell.docked-shell .sidebar .brand {
  position:relative; flex:0 0 44px; box-sizing:border-box; width:100%; min-height:44px;
  justify-content:flex-start; gap:0; margin:0; padding:0 8px 10px; border-bottom-color:var(--ui-sidebar-hover);
}
html[data-ui-theme] .app-shell.docked-shell .brand-mark { flex:0 0 32px; width:32px; height:32px; }
html[data-ui-theme] .app-shell.docked-shell .sidebar :is(.brand > div,.nav-label) {
  display:block; position:absolute; left:56px; right:10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0; visibility:hidden;
  transform:translateX(-4px); transition:opacity 110ms ease,transform 110ms ease,visibility 0s linear 110ms;
}
html[data-ui-theme] .app-shell.docked-shell .sidebar .brand > div { left:48px; }
html[data-ui-theme] .app-shell.docked-shell:is(.sidebar-hover-expanded,:not(.sidebar-collapsed)) .sidebar :is(.brand > div,.nav-label) {
  opacity:1; visibility:visible; transform:none;
  transition:opacity 120ms ease 70ms,transform 120ms ease 70ms,visibility 0s linear 70ms;
}
html[data-ui-theme] .app-shell.docked-shell .sidebar .brand-title { font-size:14px; white-space:nowrap; }
html[data-ui-theme] .app-shell.docked-shell .sidebar .root-nav {
  flex:1 1 auto; min-height:0; width:100%; display:grid; grid-auto-rows:var(--ui-shell-nav-size); align-content:start;
  gap:4px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
}
html[data-ui-theme] .app-shell.docked-shell .sidebar .nav-button {
  position:relative; box-sizing:border-box; width:100%; min-width:0; height:var(--ui-shell-nav-size); min-height:var(--ui-shell-nav-size);
  justify-content:flex-start; gap:0; padding:0 12px; border:0; border-radius:10px;
  overflow:hidden; transform:none; transition:background 150ms ease,color 150ms ease;
}
html[data-ui-theme] .app-shell.docked-shell .sidebar .nav-icon { width:24px; height:24px; flex:0 0 24px; color:var(--ui-sidebar-muted); }
html[data-ui-theme] .app-shell.docked-shell .sidebar .nav-icon svg { width:20px; height:20px; }
html[data-ui-theme] .app-shell.docked-shell .sidebar .nav-button.active { background:var(--ui-sidebar-selected); box-shadow:inset 2px 0 var(--ui-accent); }
html[data-ui-theme] .app-shell.docked-shell .sidebar .nav-button.active::before { content:none; }
html[data-ui-theme] .app-shell.docked-shell .sidebar .nav-button:is(:hover,.active) .nav-icon { color:var(--ui-sidebar-text); }
html[data-ui-theme] .app-shell.docked-shell .sidebar .nav-button:focus-visible { outline-offset:-2px; }
@media (max-width:1500px) {
  /* The existing search opens below its icon when the utility half is narrow. */
  html[data-ui-theme] .app-shell.docked-shell .header-search { gap:0; }
  html[data-ui-theme] .app-shell.docked-shell .header-search .search {
    position:absolute; top:calc(100% + 14px); right:0; grid-row:auto; grid-column:auto;
  }
  html[data-ui-theme] .app-shell.docked-shell .header-search.is-expanded .search { width:240px; }
  html[data-ui-theme] .app-shell.docked-shell .header-search .search input { height:40px; box-shadow:var(--ui-shadow-sm); }
}
@media (max-width:1250px) {
  /* Keep the full identity in the accessible copy and avatar tooltip. */
  html[data-ui-theme] .app-shell.docked-shell .account > div:first-child {
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}
@media (max-width:1000px) {
  html[data-ui-theme] .app-shell.docked-shell .topbar-actions { gap:4px; }
  html[data-ui-theme] .app-shell.docked-shell .topbar-actions .account { gap:4px; margin:0; padding:0; border:0; }
  html[data-ui-theme] .app-shell.docked-shell .account .tool { width:32px; height:32px; padding:0; }
  html[data-ui-theme] .app-shell.docked-shell #logoutButton .desktop-utility-icon { display:block; }
  html[data-ui-theme] .app-shell.docked-shell .desktop-logout-label {
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}
@media (prefers-reduced-motion:reduce) {
  html[data-ui-theme] .app-shell.docked-shell .sidebar,
  html[data-ui-theme] .app-shell.docked-shell .sidebar :is(.brand > div,.nav-label,.nav-button),
  html[data-ui-theme] .app-shell.docked-shell .header-search .search { transition:none; }
}

/* Operator desktop dock shares the header tokens, not the navigation rail.
   Keep it inside the station stacking context so modal backdrops cover it. */
html[data-ui-theme] .app-shell.station-immersive.station-docked-shell .station-screen {
  box-sizing:border-box;
  padding-top:calc(var(--ui-shell-edge) + var(--ui-shell-header-height) + var(--ui-shell-gap));
}
html[data-ui-theme] .app-shell.station-immersive.station-docked-shell .station-appbar {
  box-sizing:border-box; position:fixed; top:var(--ui-shell-edge); left:var(--ui-shell-edge); right:var(--ui-shell-edge);
  z-index:20; display:flex; align-items:center; justify-content:flex-end; gap:0;
  height:var(--ui-shell-header-height); min-height:var(--ui-shell-header-height);
  margin:0; padding:0 12px; border:1px solid var(--ui-border);
  border-radius:var(--ui-shell-radius); background:var(--ui-surface); color:var(--ui-text);
  box-shadow:var(--ui-shell-shadow);
}
html[data-ui-theme] .app-shell.station-docked-shell .station-brand {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  gap:10px; margin:0; white-space:nowrap;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-brand > strong {
  color:var(--ui-text); font-size:16px; line-height:1; font-weight:var(--ui-weight-semibold); letter-spacing:.1em;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-brand > strong::after { content:none; }
html[data-ui-theme] .app-shell.station-docked-shell .station-brand strong > span {
  display:inline-block; color:var(--ui-station-wordmark); font-size:inherit;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  html[data-ui-theme] .app-shell.station-docked-shell .station-brand strong > span {
    background-image:linear-gradient(110deg,var(--ui-station-wordmark) 0%,var(--ui-station-wordmark-highlight) 30%,var(--ui-station-wordmark-sheen) 50%,var(--ui-station-wordmark-highlight) 70%,var(--ui-station-wordmark) 100%);
    background-size:240% 100%; background-position:0% 50%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:station-wordmark-sheen 10s ease-in-out infinite;
  }
}
@keyframes station-wordmark-sheen {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-ui-theme] .app-shell.station-docked-shell .station-brand strong > span { animation:none; background-position:50% 50%; }
}
@media (forced-colors:active) {
  html[data-ui-theme] .app-shell.station-docked-shell .station-brand strong > span { background:none; color:CanvasText; animation:none; }
}
html[data-ui-theme] .app-shell.station-docked-shell .station-user {
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  min-width:0; max-width:calc(50% - 124px); margin:0; white-space:nowrap;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-user > span {
  min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--ui-text-secondary); font-size:12px;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-appbar :is(.station-exit,.station-logout,.training-station-button) {
  box-sizing:border-box; display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center;
  height:var(--ui-shell-control-size); min-height:var(--ui-shell-control-size); padding:5px 10px;
  border:1px solid var(--ui-button-secondary-border); border-radius:var(--ui-radius-control);
  background:var(--ui-surface); color:var(--ui-button-secondary-text); font-size:12px;
  box-shadow:none; transform:none; animation:none;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-appbar :is(.station-exit,.station-logout,.training-station-button):hover {
  background:var(--ui-surface-hover); border-color:var(--ui-accent); color:var(--ui-text); box-shadow:none; transform:none;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-appbar button:focus-visible {
  outline:2px solid var(--ui-accent); outline-offset:2px;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-close-shift,
html[data-ui-theme] .app-shell.station-docked-shell .station-appbar .station-exit.station-close-shift {
  background:var(--ui-button-primary-bg); border-color:var(--ui-button-primary-bg); color:var(--ui-button-primary-text);
}
html[data-ui-theme] .app-shell.station-docked-shell .station-close-shift:hover,
html[data-ui-theme] .app-shell.station-docked-shell .station-appbar .station-exit.station-close-shift:hover {
  background:var(--ui-button-primary-hover); border-color:var(--ui-button-primary-hover); color:var(--ui-button-primary-text);
}
html[data-ui-theme] .app-shell.station-docked-shell .station-appbar .station-logout {
  background:var(--ui-danger); border-color:var(--ui-danger); color:var(--ui-on-accent);
}
html[data-ui-theme] .app-shell.station-docked-shell .station-appbar .station-logout:hover {
  background:var(--ui-danger-hover); border-color:var(--ui-danger-hover); color:var(--ui-on-accent);
}
html[data-ui-theme] .app-shell.station-docked-shell .station-header-meta {
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto;
}
html[data-ui-theme] .app-shell.station-docked-shell .station-shift-label {
  color:var(--ui-station-shift-text); font-size:22px; line-height:1.25; font-weight:var(--ui-weight-semibold);
}
html[data-ui-theme] .app-shell.station-docked-shell .training-station-button > span { color:var(--ui-icon); }
html[data-ui-theme] .app-shell.station-docked-shell .training-station-button:not(.has-new) {
  width:var(--ui-shell-control-size); padding:0; gap:0;
}
.training-station-button > strong[hidden] { display:none!important; }
html[data-ui-theme] .app-shell.station-docked-shell .training-station-count {
  background:var(--ui-warning); color:var(--ui-text); border-radius:var(--ui-radius-pill);
}
html[data-ui-theme] .app-shell.station-docked-shell .station-action-icon { display:none; width:18px; height:18px; }
@media (max-width:1350px) {
  html[data-ui-theme] .app-shell.station-docked-shell .station-appbar :is(.station-exit,.station-logout) {
    width:var(--ui-shell-control-size); padding:0; position:relative;
  }
  html[data-ui-theme] .app-shell.station-docked-shell .station-action-icon { display:block; }
  html[data-ui-theme] .app-shell.station-docked-shell .station-action-label {
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}

/* One system for controls; existing minimum touch sizes and grid spans survive. */
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.m-modal-host) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),select,textarea) {
  background:var(--ui-surface-input); color:var(--ui-text); border:1px solid var(--ui-border-interactive);
  border-radius:var(--ui-radius-control); font-weight:var(--ui-weight-normal); box-shadow:none;
}
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.m-modal-host) :is(input,select,textarea):focus {
  outline:2px solid var(--ui-accent); outline-offset:0; border-color:var(--ui-accent); box-shadow:var(--ui-focus-ring);
}
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.m-modal-host) :is(input,select,textarea):hover:not(:disabled):not([readonly]) { border-color:var(--ui-accent); }
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.m-modal-host) select:not([multiple]):not([size]),
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.m-modal-host) select[size="1"] {
  appearance:none; -webkit-appearance:none; padding-inline-end:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ui-icon) 50%),linear-gradient(135deg,var(--ui-icon) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px; background-repeat:no-repeat; cursor:pointer;
}
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer) :is(input,select,textarea)[aria-invalid="true"] { border-color:var(--ui-danger); }
html[data-ui-theme] :is(input,select,textarea)::placeholder { color:var(--ui-text-placeholder); opacity:1; }
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.m-modal-host) :is(input,select,textarea):disabled { background-color:var(--ui-surface-disabled); color:var(--ui-text-disabled); border-color:var(--ui-border-section); opacity:1; cursor:not-allowed; }
html[data-ui-theme] :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--ui-accent); }
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.nexis-signal-panel) :is(.primary-action,.recipe-creation-save,.nexis-signal-ack-button) { background:var(--ui-button-primary-bg); border-color:transparent; color:var(--ui-button-primary-text); font-weight:var(--ui-weight-medium); box-shadow:none; }
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.nexis-signal-panel) :is(.primary-action,.recipe-creation-save,.nexis-signal-ack-button):hover:not(:disabled) { background:var(--ui-button-primary-hover); color:var(--ui-button-primary-text); }
html[data-ui-theme] :is(.tool,.secondary-action,.nexis-signal-recipe-button) { background:var(--ui-button-secondary-bg); color:var(--ui-button-secondary-text); border-color:var(--ui-button-secondary-border); font-weight:var(--ui-weight-medium); box-shadow:none; }
html[data-ui-theme] :is(.tool,.secondary-action,.nexis-signal-recipe-button):hover:not(:disabled) { background:var(--ui-surface-selected); border-color:var(--ui-accent); }
html[data-ui-theme] :is(.ghost-action,.icon-button) { background:transparent; color:var(--ui-icon); box-shadow:none; }
html[data-ui-theme] :is(.ghost-action,.icon-button):hover:not(:disabled) { background:var(--ui-accent-soft); color:var(--ui-accent); }
/* Icon actions have a visible hit surface; ghost text actions stay transparent.
   Header controls keep their independent dark-chrome contract above. */
html[data-ui-theme] .app-shell :is(.icon-button,.passport-icon-action,.pallet-head-button):not(.primary-action):not(.danger-action) { background:var(--ui-button-icon-bg); color:var(--ui-icon); border:1px solid var(--ui-button-icon-border); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .app-shell :is(.icon-button,.passport-icon-action,.pallet-head-button):not(.primary-action):not(.danger-action):hover:not(:disabled) { background:var(--ui-accent-soft); color:var(--ui-accent); border-color:var(--ui-accent); }
html[data-ui-theme] .app-shell :is(.section-toolbar,.station-header-actions,.home-links) .tool:not(.primary-action):not(.danger-action),
html[data-ui-theme] .app-shell .home-links button { background:var(--ui-button-secondary-bg); color:var(--ui-button-secondary-text); border:1px solid var(--ui-button-secondary-border); }
html[data-ui-theme] :is(.danger-action,.danger-tool,.tool.danger,.row-delete,.mobile-user-logout) { background:var(--ui-danger-soft); border-color:var(--ui-danger); color:var(--ui-danger); }
html[data-ui-theme] :is(.danger-action,.danger-tool,.tool.danger,.row-delete):hover:not(:disabled) { color:var(--ui-danger-hover); background:var(--ui-danger-soft); }
html[data-ui-theme] .app-shell .mixing-station :is(.mixing-repeat-card .tool,.mixing-admin-actions .tool,.mixing-card-side > .tool):hover:not(:disabled),
html[data-ui-theme] .app-shell .mixing-station :is(.mixing-repeat-card .tool,.mixing-admin-actions .tool,.mixing-card-side > .tool):focus-visible:not(:disabled) {
  background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent);
}
html[data-ui-theme] .app-shell .mixing-station .mixing-admin-actions .tool.danger:hover:not(:disabled),
html[data-ui-theme] .app-shell .mixing-station .mixing-admin-actions .tool.danger:focus-visible:not(:disabled) {
  background:var(--ui-danger); border-color:var(--ui-danger); color:var(--ui-on-accent);
}
html[data-ui-theme] button:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
html[data-ui-theme] :is(.app-shell,dialog,[role="dialog"],.drawer,.nexis-signal-panel) button:disabled { background:var(--ui-surface-disabled); color:var(--ui-text-disabled); border-color:var(--ui-border-section); box-shadow:none; opacity:1; cursor:not-allowed; }

/* Text tabs and small segmented controls are different visual roles. */
html[data-ui-theme] .app-shell .module-panel > .sections { background:transparent!important; border-color:var(--ui-border); box-shadow:none!important; }
html[data-ui-theme] .app-shell .module-panel > .sections .section-card { color:var(--ui-text-secondary); font-weight:var(--ui-weight-medium); background:transparent!important; }
html[data-ui-theme] .app-shell .module-panel > .sections .section-card:is(.active,:hover) { color:var(--ui-text); }
html[data-ui-theme] .app-shell .module-panel > .sections .section-card { cursor:pointer; }
html[data-ui-theme] .app-shell .module-panel > .sections .section-card.active { border-bottom-color:var(--ui-accent); font-weight:var(--ui-weight-semibold); }
html[data-ui-theme] .app-shell .module-panel > .sections .section-card + .section-card::before { display:none; }
html[data-ui-theme] :is(.recipe-primary-tabs,.writeoff-mode-tabs,.plan-shift-tabs,.segmented) { width:max-content; max-width:100%; background:var(--ui-segment-bg); border-color:var(--ui-border-section); border-radius:var(--ui-radius-control); box-shadow:none; }
html[data-ui-theme] :is(.recipe-primary-tabs,.writeoff-mode-tabs,.plan-shift-tabs,.segmented,.run-passport-tabs,.monitor-shifts) button { color:var(--ui-segment-text); background:var(--ui-segment-bg); font-weight:var(--ui-weight-medium); cursor:pointer; }
html[data-ui-theme] :is(.recipe-primary-tabs,.writeoff-mode-tabs,.plan-shift-tabs,.segmented,.run-passport-tabs,.monitor-shifts) button:hover:not(.active):not(:disabled) { color:var(--ui-text); background:var(--ui-surface-hover); border-color:var(--ui-border-interactive); }
html[data-ui-theme] :is(.recipe-primary-tabs,.writeoff-mode-tabs,.plan-shift-tabs,.segmented,.run-passport-tabs,.monitor-shifts) button.active { color:var(--ui-segment-active-text); background:var(--ui-segment-active); border-color:var(--ui-segment-active); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .plan-shift-tabs button.active small { color:inherit; }
html[data-ui-theme] .app-shell.shell-accounting .recipe-workbench-nav .recipe-primary-tabs button.active { margin:0!important; padding:0 10px!important; background:var(--ui-segment-active); color:var(--ui-segment-active-text); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .app-shell.shell-accounting .recipe-workbench-nav .recipe-primary-tabs button:not(.active) { color:var(--ui-segment-text); }
html[data-ui-theme] .app-shell.shell-accounting .recipe-workbench-nav .recipe-icon-button { box-sizing:border-box; color:var(--ui-icon); background:var(--ui-button-icon-bg); border:1px solid var(--ui-button-icon-border); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .app-shell.shell-accounting .recipe-workbench-nav .recipe-icon-button:hover { color:var(--ui-accent); background:var(--ui-accent-soft); border:1px solid var(--ui-accent); }
html[data-ui-theme] .app-shell.shell-accounting .recipe-workbench-nav .recipe-icon-button.active { color:var(--ui-on-accent); background:var(--ui-accent); border:1px solid var(--ui-accent); }

/* Surface roles are shared by existing screen components, not by every section
   indiscriminately. Layout wrappers deliberately remain unpainted. */
html[data-ui-theme] .app-shell :is(.home-production-summary,.home-recent,.monitor-panel,.bunker-card,.bunker-detail-panel,.passport-main,.passport-summary-card,.pallet-concept-sheet,.pallet-ticket,.plan-editor,.plan-published,.production-hub-card,.record-section,.service-note-panel) {
  background:var(--ui-surface-card); border:1px solid var(--ui-border-card); box-shadow:var(--ui-shadow-sm);
}
html[data-ui-theme] .app-shell :is(.monitor-filters,.plan-overview,.station-plan-strip,.extrusion-toolbar,.operation-panel,.dictionary-editor-form,.recipe-side-selectors) {
  background:var(--ui-surface-panel); border-color:var(--ui-border-panel); box-shadow:var(--ui-shadow-sm);
}
html[data-ui-theme] .app-shell :is(.passport-summary-hero,.writeoff-passport-hero,.bunker-park-note,.station-plan-group) { background:var(--ui-surface-info); border-color:var(--ui-border-section); }
html[data-ui-theme] .app-shell :is(.metric-tile,.value-tile,.calc-summary > div,.monitor-metrics > article,.bunker-park-summary > div,.passport-summary-kpis > div,.plan-overview-metrics > div) {
  background:var(--ui-surface-analytical); border:1px solid var(--ui-border-card); color:var(--ui-text); box-shadow:none;
}
html[data-ui-theme] .app-shell :is(.metric-tile,.value-tile) strong { color:var(--ui-text); }
html[data-ui-theme] .app-shell :is(.muted-box,.journal-corrections-grid,.mixing-repeat-panel,.monitor-process-card,.pallet-recent-item) { background:var(--ui-surface-inset); border-color:var(--ui-border-card); }
html[data-ui-theme] .app-shell :is(.drawer-footer,.record-info-footer,.nexis-signal-actions,.pallet-comment-zone) { background:var(--ui-surface-actions); border-color:var(--ui-border-section); }
html[data-ui-theme] .app-shell :is(.passport-title,.passport-summary-line,.pallet-recent-head,.bunker-park-header,.mill-run-heading,.mill-primary-actions,.mill-scrap-block,.loading-history,.extruder-card-head) { border-color:var(--ui-border-section); }

/* Operator work panels lift slightly from the base; nested journals stay flat. */
html[data-ui-theme] .app-shell .loading-station .station-header .eyebrow { color:var(--ui-station-eyebrow); }
html[data-ui-theme] .app-shell .milling-station .station-header .eyebrow { color:var(--ui-station-eyebrow); }
html[data-ui-theme] .app-shell .loading-station .station-header h2 { color:var(--ui-station-heading); }
html[data-ui-theme] .app-shell .station-screen :is(.loading-run-panel,.loading-bunker-panel,.mixing-run-panel,.mixing-containers,.mill-workspace-main,.mill-container-list,.mill-empty-state,.extruder-card,.extrusion-sources,.extrusion-history) {
  background:var(--ui-surface-card); border:1px solid var(--ui-border-panel); box-shadow:var(--ui-shadow-workspace);
}
html[data-ui-theme] .app-shell .station-screen :is(.loading-run-panel,.mixing-run-panel,.extrusion-sources,.extrusion-history) { background:var(--ui-surface-panel); }
html[data-ui-theme] .app-shell .station-screen :is(.loading-bunker-card,.station-container-card,.mill-scrap-journal) { background:var(--ui-surface-card); border-color:var(--ui-border-card); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .app-shell .station-screen :is(.loading-run-metrics,.mixing-run-metrics,.station-metrics) > div { background:var(--ui-surface-analytical); border-color:var(--ui-border-card); }
html[data-ui-theme] .app-shell :is(.mixing-container-card,.mixing-repeat-card,.mill-container-row,.loading-history article,.extrusion-source-row,.extrusion-history-row,.monitor-row,.bunker-movement) { border-color:var(--ui-border); }
html[data-ui-theme] .app-shell .mill-tile { background:var(--ui-surface-panel); border-color:var(--ui-border-card); }
html[data-ui-theme] .app-shell .mill-tile.selected { background:var(--ui-surface-selected); border-color:var(--ui-accent); outline-color:var(--ui-accent); }
html[data-ui-theme] .app-shell .milling-station .mill-active .mill-tile-mark {
  color:var(--ui-success); font-size:17px; text-shadow:0 0 0 var(--ui-success);
}
html[data-ui-theme] .app-shell .milling-station .mill-empty-state .primary-action:hover:not(:disabled),
html[data-ui-theme] .app-shell .milling-station .mill-empty-state .primary-action:focus-visible:not(:disabled) {
  background:var(--ui-success); border-color:var(--ui-success); color:var(--ui-on-accent);
}
html[data-ui-theme] .app-shell .milling-station .mill-container-list .container-list-heading .station-kicker {
  color:var(--ui-station-shift-text); font-size:18px; letter-spacing:.08em; font-weight:var(--ui-weight-semibold);
}
html[data-ui-theme] .app-shell .milling-station .container-save-button {
  background:var(--ui-success); border-color:var(--ui-success); color:var(--ui-on-accent); transition:background var(--ui-duration) ease,border-color var(--ui-duration) ease;
}
html[data-ui-theme] .app-shell .milling-station .container-save-button:hover:not(:disabled) {
  background:var(--ui-success-text); border-color:var(--ui-success-text); color:var(--ui-on-accent);
}
html[data-ui-theme] .app-shell .milling-station .container-result .tool:hover:not(:disabled),
html[data-ui-theme] .app-shell .milling-station .container-result .tool:focus-visible:not(:disabled) {
  background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent);
}
html[data-ui-theme] .app-shell .milling-station .mill-run-heading .station-kicker {
  color:var(--ui-warning); font-weight:var(--ui-weight-semibold);
  background:linear-gradient(105deg,var(--ui-warning-text) 0%,var(--ui-warning-text) 38%,var(--ui-warning) 50%,var(--ui-warning-text) 62%,var(--ui-warning-text) 100%);
  background-size:220% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:mill-heading-sheen 3.8s linear infinite;
}
html[data-ui-theme] .app-shell .milling-station .session-state.active,
html[data-ui-theme] .app-shell .milling-station .station-container-card.in-progress .container-status {
  color:var(--ui-warning-text); background:var(--ui-warning-soft); border:1px solid var(--ui-warning);
}
html[data-ui-theme] .app-shell .milling-station .station-container-card.finished .container-status {
  color:var(--ui-success-text); background:var(--ui-success-soft); border:1px solid var(--ui-success);
}
html[data-ui-theme] .app-shell .milling-station .mill-tile.mill-active .mill-tile-copy small:first-of-type {
  color:var(--ui-warning-text); font-weight:var(--ui-weight-semibold);
}
html[data-ui-theme] .app-shell .milling-station .mill-tile.mill-ready .mill-tile-copy small:first-of-type {
  color:var(--ui-success-text); font-weight:var(--ui-weight-semibold);
}
@keyframes mill-heading-sheen {
  to { background-position:-120% 0; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-ui-theme] .app-shell .milling-station .mill-run-heading .station-kicker { animation:none; background-position:50% 0; }
}
html[data-ui-theme] .app-shell :is(.loading-bunker-card.highlighted,.station-container-card.in-progress,.monitor-process-card.active) { background:var(--ui-surface-info); border-color:var(--ui-accent); }
html[data-ui-theme] .app-shell .monitor-process-card.active b { color:var(--ui-accent); }
html[data-ui-theme] .app-shell .monitor-process-card.done { background:var(--ui-success-soft); border-color:var(--ui-success); }
html[data-ui-theme] .app-shell :is(.bunker-card,.loading-bunker-card).shortage { background:var(--ui-warning-soft); border-color:var(--ui-warning); }
html[data-ui-theme] .app-shell .bunker-card.shortage .bunker-status { color:var(--ui-warning-text); background:var(--ui-warning-soft); }
html[data-ui-theme] .app-shell :is(.bunker-card,.pallet-recent-item):hover:not(.shortage) { border-color:var(--ui-accent); background:var(--ui-surface-hover); }
html[data-ui-theme] .app-shell.shell-production:not(.station-immersive) .production-hub-card:is(:hover,:focus-visible) {
  background:var(--ui-navigation-card-hover); border-color:var(--ui-border);
}
html[data-ui-theme] .app-shell.shell-production:not(.station-immersive) .production-hub-card:is(:hover,:focus-visible) .hub-card-arrow {
  background:var(--ui-navigation-entry-hover); color:var(--ui-navigation-entry-hover-text);
  border-color:var(--ui-navigation-entry-hover); opacity:1;
}
html[data-ui-theme] .app-shell.shell-production:not(.station-immersive) .production-hub-card:is(:hover,:focus-visible) .hub-card-icon {
  background:var(--ui-success-soft); color:var(--ui-navigation-entry-hover);
}
@media (prefers-reduced-motion:reduce) {
  html[data-ui-theme] .app-shell .production-hub-card,
  html[data-ui-theme] .app-shell .production-hub-card :is(.hub-card-icon,.hub-card-arrow) { transition:none; }
  html[data-ui-theme] .app-shell.shell-production:not(.station-immersive) .production-hub-card:hover,
  html[data-ui-theme] .app-shell.shell-production:not(.station-immersive) .production-hub-card:hover .hub-card-arrow { transform:none; }
}

/* Data surfaces and overlays. No data, columns, route or dialog behavior changes. */
html[data-ui-theme] :is(table,.table-panel,.table-scroll,.stock-table-scroll,.journal-table-scroll) { color:var(--ui-text); border-color:var(--ui-border-card); }
html[data-ui-theme] table { background:var(--ui-surface); }
html[data-ui-theme] :is(thead,th) { background:var(--ui-table-head); color:var(--ui-text-label); border-color:var(--ui-border); font-weight:var(--ui-weight-medium); }
html[data-ui-theme] td { color:var(--ui-text); border-color:var(--ui-border); font-weight:var(--ui-weight-normal); }
html[data-ui-theme] tbody tr:hover > td { background:var(--ui-surface-hover); }
html[data-ui-theme] tbody tr:is(.selected,.active,[aria-selected="true"]) > td { background:var(--ui-surface-selected); }
html[data-ui-theme] tfoot :is(th,td) { background:var(--ui-table-total); color:var(--ui-text); border-top:2px solid var(--ui-border-section); font-weight:var(--ui-weight-semibold); }
html[data-ui-theme] :is(dialog,.drawer,.training-viewer-dialog,.training-library-dialog,.nexis-signal-panel,.mobile-user-menu) { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); box-shadow:var(--ui-shadow-overlay); }
html[data-ui-theme] dialog::backdrop { background:var(--ui-backdrop); }
html[data-ui-theme] :is(.drawer-error,.m-feedback-error,[role="alert"]) { color:var(--ui-danger); }
html[data-ui-theme] :is(.status-pill,.badge,.m-status) { color:var(--ui-text-secondary); background:var(--ui-surface-soft); }
html[data-ui-theme] :is(.status-pill,.badge,.m-status,.passport-signal-status-pill):is(.success,.confirmed,.complete) { color:var(--ui-success-text); background:var(--ui-success-soft); }
html[data-ui-theme] :is(.status-pill,.badge,.m-status,.passport-signal-status-pill):is(.pending,.warning) { color:var(--ui-warning-text); background:var(--ui-warning-soft); }
html[data-ui-theme] :is(.status-pill,.badge,.m-status):is(.error,.danger) { color:var(--ui-danger); background:var(--ui-danger-soft); }
html[data-ui-theme] :is(.training-notification-button b,.mobile-signal-badge) { color:var(--ui-on-accent); background:var(--ui-warning); }
html[data-ui-theme] :is(.status-dot,.shift-live i,.mobile-user-connection i[data-state="connected"]) { background:var(--ui-success); box-shadow:none; }
html[data-ui-theme] :is(.home-status,.mixing-progress-note.complete,.passport-status.active,.bunker-status.loaded) { color:var(--ui-success-text); }
html[data-ui-theme] .home-status.closed { color:var(--ui-text-secondary)!important; }
html[data-ui-theme] .automatic-composition-segment > span { color:var(--ui-on-accent); }

/* Metric kinds have stable visual identities, independent of live status. */
html[data-ui-theme] .home-metric-runs { --metric-bg:var(--ui-metric-closed-bg); --metric-accent:var(--ui-metric-closed-accent); --metric-ink:var(--ui-metric-closed-ink); }
html[data-ui-theme] .home-metric-active { --metric-bg:var(--ui-metric-active-bg); --metric-accent:var(--ui-metric-active-accent); --metric-ink:var(--ui-metric-active-ink); }
html[data-ui-theme] .home-metric-plan { --metric-bg:var(--ui-metric-output-bg); --metric-accent:var(--ui-metric-output-accent); --metric-ink:var(--ui-metric-output-ink); }
html[data-ui-theme] .home-metric-containers { --metric-bg:var(--ui-metric-period-bg); --metric-accent:var(--ui-metric-period-accent); --metric-ink:var(--ui-metric-period-ink); }
html[data-ui-theme] .app-shell.shell-home .home-metric-card { background:var(--metric-bg,var(--ui-surface)); border-color:var(--ui-border-section); }
html[data-ui-theme] .app-shell.shell-home .home-metric-card::before { background:var(--metric-accent,var(--ui-accent)); box-shadow:none; }
html[data-ui-theme] .app-shell.shell-home .home-metric-card .home-metric-icon { color:var(--metric-ink,var(--ui-icon)); border-color:var(--metric-accent,var(--ui-border-interactive)); background:var(--ui-surface); }
html[data-ui-theme] .app-shell.shell-home .home-metric-card > div > span { color:var(--ui-metric-label); font-weight:var(--ui-weight-medium); }
html[data-ui-theme] .app-shell.shell-home .home-metric-card strong { color:var(--ui-text); font-weight:var(--ui-weight-semibold); }
html[data-ui-theme] .app-shell.shell-home .home-metric-card strong .live-number { color:inherit; font-size:inherit; font-weight:inherit; }
html[data-ui-theme] .app-shell.shell-home .home-metric-card small { color:var(--ui-text-secondary); font-weight:var(--ui-weight-normal); }
html[data-ui-theme] .home-metric-icon svg { stroke-width:1.8; }

/* Functional sections use stronger borders than table rows and card outlines. */
html[data-ui-theme] :is(.writeoff-calc-head,.writeoff-controls,.writeoff-corrections,.writeoff-live-status,.writeoff-passport-hero,.automatic-correction-picker,.writeoff-period-header,.writeoff-period-footer) { border-color:var(--ui-border-section); }
html[data-ui-theme] .writeoff-head-cell:not(:last-child) { border-color:var(--ui-border-section); }
html[data-ui-theme] :is(.writeoff-calc-panel,.writeoff-passport,.writeoff-history,.automatic-writeoff-run-card,.automatic-writeoff-composition,.automatic-writeoff-result) { border-color:var(--ui-border-section); }
html[data-ui-theme] :is(.writeoff-calc-panel,.automatic-writeoff-composition,.automatic-writeoff-result) { background:var(--ui-surface-card); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] :is(.writeoff-passport,.writeoff-history,.automatic-writeoff-run-card) { background:var(--ui-surface-panel); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .writeoff-release-cell select { border:1px solid var(--ui-border-interactive); background-color:var(--ui-surface-input); border-radius:var(--ui-radius-control); padding:6px 32px 6px 10px; }
html[data-ui-theme] .writeoff-period-card:hover { background:var(--ui-surface-selected); }
html[data-ui-theme] .writeoff-period-card small { color:var(--ui-accent); }
html[data-ui-theme] :is(.writeoff-label,.writeoff-inputs label,.writeoff-head-cell small,.writeoff-passport-body span,.writeoff-kpis small,.writeoff-history-title span) { color:var(--ui-text-secondary); }
html[data-ui-theme] .writeoff-live-status { color:var(--ui-info); }
html[data-ui-theme] :is(.writeoff-table-scroll,.automatic-writeoff-result) :is(thead,thead th) { background:var(--ui-table-head); color:var(--ui-text-label); }
html[data-ui-theme] :is(.writeoff-table-scroll,.automatic-writeoff-result) td { color:var(--ui-text); }
html[data-ui-theme] :is(.writeoff-table-scroll,.automatic-writeoff-result) tfoot :is(th,td) { background:var(--ui-table-total); color:var(--ui-text); border-top-color:var(--ui-border-section); font-weight:var(--ui-weight-semibold); }
html[data-ui-theme] .writeoff-passport-hero { background:var(--ui-info-soft); }
html[data-ui-theme] .writeoff-status { color:var(--ui-text-secondary); background:var(--ui-surface); }
html[data-ui-theme] .writeoff-status::before { background:var(--ui-text-secondary); }
html[data-ui-theme] .writeoff-status[data-status="active"] { color:var(--ui-success-text); background:var(--ui-success-soft); }
html[data-ui-theme] .writeoff-status[data-status="active"]::before { background:var(--ui-success); }
html[data-ui-theme] .writeoff-status[data-status="paused"] { color:var(--ui-warning-text); background:var(--ui-warning-soft); }
html[data-ui-theme] .writeoff-status[data-status="paused"]::before { background:var(--ui-warning); }
html[data-ui-theme] .writeoff-warning { color:var(--ui-warning-text); background:var(--ui-warning-soft); border-color:var(--ui-warning); }
html[data-ui-theme] .writeoff-correction-option:has(input:checked) { background:var(--ui-accent-soft); border-color:var(--ui-accent); color:var(--ui-text); }
html[data-ui-theme] .writeoff-correction-option:has(input:checked) b::before { color:var(--ui-accent); }
html[data-ui-theme] .automatic-correction-option:focus-within { outline:2px solid var(--ui-accent); outline-offset:2px; }

/* The recipe editor keeps its 58/42 split and live analytic behavior. */
html[data-ui-theme] .recipe-creation-form { color:var(--ui-text); }
html[data-ui-theme] .recipe-creation-form .recipe-creation-parameters { background:var(--ui-surface-panel); border-color:var(--ui-border-panel); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .recipe-creation-form .recipe-component-editor { background:var(--ui-surface-card); border-color:var(--ui-border-card); box-shadow:var(--ui-shadow-sm); }
html[data-ui-theme] .recipe-creation-form .recipe-preview { background:var(--ui-surface-document); border-color:var(--ui-border-panel); box-shadow:var(--ui-shadow-panel); }
html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .compact-input { background-color:var(--ui-surface-input); border-color:var(--ui-border-interactive); }
html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .compact-input:hover:not(:disabled),
html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .compact-input:focus { border-color:var(--ui-accent); }
html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .compact-input::placeholder { color:var(--ui-text-placeholder); }
html[data-ui-theme] .recipe-creation-form :is(h3,.recipe-preview-analytics > strong) { color:var(--ui-text); }
html[data-ui-theme] .recipe-creation-form :is(label,.recipe-component-hint,.recipe-component-columns,.recipe-component-number,.recipe-preview-brand,.recipe-preview-count) { color:var(--ui-text-secondary); }
html[data-ui-theme] .recipe-creation-form .recipe-preview-brand > .recipe-preview-wordmark {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:var(--ui-radius-control);
  background:var(--ui-header-bg);
  color:var(--ui-header-text);
  line-height:1.2;
}
html[data-ui-theme] .recipe-creation-form .recipe-preview-wordmark > span { color:var(--ui-header-brand); }
html[data-ui-theme] .recipe-creation-form .recipe-remove-component { color:var(--ui-icon); background:transparent; }
html[data-ui-theme] .recipe-creation-form .recipe-remove-component:hover { color:var(--ui-danger); background:var(--ui-danger-soft); }
html[data-ui-theme] .recipe-creation-form .recipe-preview-component small { color:var(--ui-warning-text); }
html[data-ui-theme] .recipe-creation-form .recipe-creation-actions > [role="status"] { color:var(--ui-success-text); }
html[data-ui-theme] .recipe-creation-form .recipe-creation-actions > [data-state="error"] { color:var(--ui-danger); }
html[data-ui-theme] .recipe-creation-form :is(.recipe-preview-component,.recipe-preview-details dd) { color:var(--ui-text); }
html[data-ui-theme] .recipe-creation-form .recipe-preview-component > :last-child { color:var(--ui-text-secondary); }
html[data-ui-theme] .recipe-creation-form .recipe-preview-analytics { padding-top:var(--ui-space-4); border-top:1px solid var(--ui-border-section); }
html[data-ui-theme] .recipe-creation-form .recipe-draft-badge { color:var(--ui-info); background:var(--ui-surface-info); }
html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) > .workbench-head { min-height:0; margin-bottom:10px; }
html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) > .workbench-body { display:block; min-height:0; }
html[data-ui-theme] .app-shell.shell-accounting #recipeEditorContent:has(.recipe-creation-form) { min-height:0; margin:0; padding:0; align-self:start; }
html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .recipe-line-row.recipe-creation-row.has-missing-material { background:var(--ui-warning-soft); }
.recipe-row-warning { grid-column:2 / -1; color:var(--ui-warning-text); font-size:var(--ui-font-caption); line-height:var(--ui-line-height); }
.recipe-row-warning[hidden] { display:none; }

/* Wide recipe creation: title + modes on the left, the existing form's
   parameters alongside them. Contents keeps one form and its native ownership;
   no duplicated fields, detached inputs or changes to the save handlers. */
@media (min-width:1101px) {
  html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) {
    display:grid;
    grid-template-columns:minmax(250px,300px) minmax(0,1fr) max-content;
    grid-template-rows:auto auto auto auto;
    align-items:center;
    padding-top:10px;
    column-gap:20px;
    row-gap:12px;
  }
  html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) > .workbench-head {
    grid-column:1;
    grid-row:1;
    align-self:end;
    margin:0;
  }
  html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) > .workbench-body,
  html[data-ui-theme] .app-shell.shell-accounting #recipeEditorContent:has(.recipe-creation-form),
  html[data-ui-theme] .app-shell.shell-accounting .recipe-editor-panel.recipe-creation-form,
  html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) .recipe-editor-tabs.recipe-workbench-nav {
    display:contents;
  }
  html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) .recipe-primary-tabs {
    grid-column:1;
    grid-row:2;
    align-self:start;
    justify-self:start;
  }
  html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) .recipe-utility-tabs {
    grid-column:3;
    grid-row:1 / 3;
    align-self:center;
    margin:0;
  }
  html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .recipe-creation-parameters {
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(90px,.5fr) minmax(150px,.9fr);
    min-width:0;
    max-width:none;
    margin:0;
  }
  html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .recipe-creation-workspace {
    grid-column:1 / -1;
    grid-row:3;
  }
  html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .recipe-creation-actions {
    grid-column:1 / -1;
    grid-row:4;
  }
}
@media (min-width:1101px) and (max-width:1399px) {
  html[data-ui-theme] .app-shell.shell-accounting .page-workbench:has(.recipe-creation-form) { grid-template-columns:250px minmax(0,1fr) max-content; column-gap:16px; }
  html[data-ui-theme] .app-shell.shell-accounting .recipe-creation-form .recipe-creation-parameters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}

@media (min-width:769px) {
  /* Journal count belongs to the search row, not an extra toolbar row. */
  html[data-ui-theme] .app-shell.shell-accounting .accounting-journal-page .journal-search-line {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    padding:4px 0;
  }
  html[data-ui-theme] .app-shell.shell-accounting .accounting-journal-page .journal-search-line .journal-counter {
    flex:0 0 auto;
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ui-text-secondary);
    white-space:nowrap;
  }
  html[data-ui-theme] .app-shell.shell-accounting .accounting-journal-page .journal-toolbar { padding:8px 14px; gap:8px; }
  html[data-ui-theme] .app-shell.shell-accounting .accounting-journal-page .journal-toolbar label { gap:4px; }
  html[data-ui-theme] .app-shell.shell-accounting .accounting-journal-page .journal-toolbar :is(.compact-input,button) {
    box-sizing:border-box;
    height:36px;
    min-height:36px;
    padding:6px 10px;
    line-height:1.2;
  }
  .app-shell .topbar::before { content:""; position:absolute; z-index:-1; inset:0 calc(-1 * var(--ui-workspace-gutter,28px)); background:var(--ui-header-bg); pointer-events:none; }
  html[data-ui-theme] .app-shell :is(.workbench-head h2,.module-panel > .panel-head h1) { color:var(--ui-text); font-size:var(--ui-font-title); font-weight:var(--ui-weight-semibold); }
  html[data-ui-theme] .app-shell :is(.primary-action,.tool,.secondary-action) { font-size:var(--ui-font-label); }
  html[data-ui-theme] .app-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),select) { min-height:var(--ui-control-height); }
}
@media (min-width:769px) and (max-width:1400px) { .app-shell .topbar { --ui-workspace-gutter:20px; } }

/* Mobile presentation only: keep fixed bars, safe areas and existing touch sizes. */
@media (max-width:768px), (max-width:1024px) and (max-height:500px) and (pointer:coarse) {
  html[data-ui-theme] body.mobile-chrome .mobile-app-header { background:var(--ui-header-bg); border-color:var(--ui-header-border); color:var(--ui-header-text); }
  html[data-ui-theme] body.mobile-chrome .mobile-app-header :is(.mobile-brand strong,#mobileHeaderTitle,.mobile-profile-button,.mobile-header-logout) { color:var(--ui-header-text); }
  html[data-ui-theme] body.mobile-chrome .mobile-app-header .mobile-brand-copy strong { color:var(--ui-header-muted); }
  html[data-ui-theme] body.mobile-chrome .mobile-app-header .mobile-avatar-button { background:var(--ui-header-hover); border-color:var(--ui-header-border); color:var(--ui-header-text); }
  html[data-ui-theme] body.mobile-chrome .mobile-bottom-nav { background:var(--ui-surface); border-color:var(--ui-border); box-shadow:var(--ui-shadow-panel); }
  html[data-ui-theme] body.mobile-chrome .mobile-bottom-nav button { color:var(--ui-text-secondary); background:transparent; }
  html[data-ui-theme] body.mobile-chrome .mobile-bottom-nav button.active { color:var(--ui-accent); background:var(--ui-accent-soft); }
  html[data-ui-theme] body.mobile-chrome .mobile-bottom-nav button.active svg { color:var(--ui-accent); }
  html[data-ui-theme] body.mobile-chrome .mobile-signal-badge { border-color:var(--ui-surface); }
  html[data-ui-theme] body.mobile-app .app-shell :is(.recipe-primary-tabs,.plan-shift-tabs,.writeoff-mode-tabs) button.active { background:var(--ui-segment-active)!important; color:var(--ui-segment-active-text)!important; }
  html[data-ui-theme] body.mobile-app .app-shell .recipe-editor-tabs.recipe-workbench-nav { background:transparent; border:0; box-shadow:none; }
  html[data-ui-theme] body.mobile-app .app-shell .recipe-utility-tabs .recipe-icon-button { color:var(--ui-text-secondary)!important; }
  html[data-ui-theme] body.mobile-app .app-shell .recipe-utility-tabs .recipe-icon-button.active { color:var(--ui-on-accent)!important; background:var(--ui-accent)!important; }
  /* Existing mobile adapters add m-card to work panels. Bind those adapters to
     the same roles instead of overriding their touch layout or safe areas. */
  html[data-ui-theme] body.mobile-app .app-shell :is(.dictionary-editor-form,.automatic-writeoff-run,.writeoff-side-card) { --m-paper:var(--ui-surface-panel); --m-paper-line:var(--ui-border-panel); }
  html[data-ui-theme] body.mobile-app .app-shell :is(.monitor-card,.monitor-structure,.writeoff-results) { --m-paper:var(--ui-surface-analytical); --m-paper-line:var(--ui-border-card); }
  html[data-ui-theme] body.mobile-app .app-shell .bunker-card.shortage { --m-paper:var(--ui-warning-soft); --m-paper-line:var(--ui-warning); }
}

/* Printed production labels keep their document-specific monochrome contract. */
@media print {
  html[data-ui-theme] :is(html,body,table,thead,th,td) { color:inherit; background:transparent; }
  html[data-ui-theme] :is(dialog,.drawer) { box-shadow:none; }
}