/* Whole-screen status layout. Readable mode keeps the normal scrolling layout. */
.fit-critical-toggle, .fit-critical-close { display: none; }
html[data-ui-design="modern"] .viewport-fit-toggle[aria-pressed="true"] { color: var(--design-accent-ink); background: var(--design-accent-soft); border-color: var(--cyan); }
/* The same marker layout applies in fit, readable, zoomed, editing and mobile
   modes. These rules do not change the marker footprint or factory coordinates. */
html[data-ui-design="modern"] {
  .factory-machine-marker { --fit-layout-active-icon-size: var(--fit-layout-icon-size,12px); --fit-layout-active-icon-top: var(--fit-layout-icon-top,8px); }
  .factory-machine-marker:has(> .equipment-order) { --fit-layout-active-icon-size: var(--fit-layout-job-icon-size,8px); --fit-layout-active-icon-top: var(--fit-layout-job-icon-top,8px); }
  .factory-machine-marker .equipment-code { inset: 1px 1px auto; transform: none; font-size: var(--fit-layout-code-size,5px); line-height: var(--fit-layout-code-line,6px); }
  .factory-machine-marker .equipment-icon,
  .factory-machine-marker.equipment-tile[data-state="WAIT"] .equipment-icon { position: absolute; display: grid; width: var(--fit-layout-active-icon-size); height: var(--fit-layout-active-icon-size); aspect-ratio: 1; left: 1px; top: var(--fit-layout-active-icon-top); margin: 0; }
  .factory-machine-marker .equipment-meta,
  .factory-machine-marker.equipment-tile[data-state="WAIT"] .equipment-meta { display: flex; flex-direction: column; justify-content: center; inset: var(--fit-layout-body-top,8px) 1px 1px calc(var(--fit-layout-active-icon-size) + 3px); min-height: 0; height: auto; font-size: var(--fit-layout-state-size,4px); line-height: var(--fit-layout-state-line,5px); white-space: normal; overflow-wrap: anywhere; }
  .factory-machine-marker .equipment-meta > span:not(.equipment-duration) { display: block; white-space: normal; }
  /* Use the former two-pixel footer gap for a complete two-line work label.
     Code/icon geometry stays fixed; the order occupies the bottom line. */
  .factory-machine-marker.equipment-tile:has(> .equipment-order) .equipment-meta,
  .factory-machine-marker.equipment-tile[data-state="WAIT"]:has(> .equipment-order) .equipment-meta { bottom: var(--fit-layout-order-line,5px); }
  .factory-machine-marker .equipment-order,
  .factory-machine-marker.equipment-tile[data-state="WAIT"] .equipment-order { display: block; top: auto; bottom: 0; left: 1px; right: 1px; max-width: none; height: var(--fit-layout-order-line,5px); padding: 0; font-size: var(--fit-layout-order-size,4px); line-height: var(--fit-layout-order-line,5px); }
}
@media (min-width: 1000px) and (min-height: 600px) {
  html[data-ui-design="modern"][data-viewport-fit="auto"] {
    --design-header: 64px;
    --design-sidebar: 174px;
    .app-shell:not(.auth-gate-shell):not(.wallboard) { height: 100dvh; min-height: 0; grid-template-rows: var(--design-header) minmax(0,1fr); }
    body.account-warning-visible .app-shell:not(.auth-gate-shell):not(.wallboard), body.account-warning-visible .app-shell.wallboard { height: calc(100dvh - 46px); }
    .topbar { height: var(--design-header); min-height: var(--design-header); padding: 7px 14px; gap: 12px; }
    .brand-mark { width: 57px; height: 40px; }
    .brand-copy h1 { font-size: 16px; }
    .brand-copy small { font-size: 8px; }
    .header-actions { gap: 6px; }
    .header-order-search { height: 38px; max-width: 235px; }
    .header-order-search label { padding: 3px 10px; grid-template-rows: 10px 18px; gap: 1px; }
    .header-order-search span { font-size: 9px; line-height: 10px; }
    .header-order-search input { min-height: 18px; height: 18px; padding: 0; line-height: 18px; }
    .app-shell:not(.wallboard) > .nav-shell { position: static; height: 100%; max-height: 100%; padding: 12px 8px; gap: 5px; }
    .app-shell:not(.wallboard) .nav-tabs { gap: 3px; }
    .app-shell:not(.wallboard) .nav-tabs::before { margin: 0 8px 8px; }
    .app-shell:not(.wallboard) .nav-tab { min-height: 41px; padding: 7px 8px; gap: 6px; grid-template-columns: 24px minmax(0,1fr); }
    .nav-tab i { width: 24px; height: 24px; }
    .nav-tab > span > b { font-size: 12px; }
    .nav-tab > span > small { display: none; }
    .app-shell:not(.wallboard) .nav-actions { margin-top: 8px; padding: 8px 0 0; gap: 5px; }
    .app-shell:not(.wallboard) > .main, .wallboard > .main { height: 100%; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
    .main > * { flex-shrink: 0; }
    .main > .design-page-heading { margin: 0; min-height: 28px; }
    .design-page-heading h2 { font-size: 20px; }
    .design-page-heading p, .design-page-heading small, .design-heading-status { display: none; }
    .realtime-team-screen, .realtime-layout-screen { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
    .realtime-results { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
    .realtime-team-screen .toolbar, .realtime-layout-screen .toolbar { margin: 0; padding: 7px 10px; gap: 8px; flex-shrink: 0; }
    .realtime-team-screen .field, .realtime-layout-screen .field { gap: 3px; min-width: 100px; }
    .realtime-team-screen .field input, .realtime-team-screen .field select, .realtime-layout-screen .field input, .realtime-layout-screen .field select { min-height: 32px; padding: 5px 8px; font-size: 12px; }
    .realtime-team-screen .field > span, .realtime-layout-screen .field > span { font-size: 10px; }
    .realtime-team-screen .button, .realtime-layout-screen .button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
    .realtime-view-switch { min-height: 32px; }
    .realtime-view-switch button { min-height: 30px; padding: 5px 9px; font-size: 11px; }
    .realtime-results .kpi-grid { flex: 0 0 auto; margin: 0; gap: 8px; grid-template-columns: repeat(7,minmax(0,1fr)); }
    .realtime-results .kpi-card { min-height: 72px; padding: 8px 10px; }
    .realtime-results .kpi-card > span:not(.long-wait-icon) { min-height: 16px; font-size: 10px; line-height: 1.2; }
    .realtime-results .kpi-card strong { font-size: 23px; line-height: 1.05; margin-top: 4px; }
    .realtime-results .kpi-card small { font-size: 9px; margin-top: 3px; }
    .realtime-results .utilization-donut { width: 28px; height: 28px; }
    .realtime-results .utilization-donut::after { width: 20px; height: 20px; }
    .realtime-results .overview-layout { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0,1fr); gap: 0; }
    .status-wall { height: 100%; min-height: 0; padding: 8px 10px; display: flex; flex-direction: column; }
    .status-wall-heading { flex: 0 0 auto; min-height: 30px; margin: 0 0 6px; padding: 0 0 5px; gap: 8px; flex-direction: row; align-items: center; flex-wrap: nowrap; }
    .status-wall-title { flex: 0 0 auto; }
    .status-wall-title h2 { font-size: 14px; }
    .status-wall-title p { display: none; }
    .status-wall-heading .notice-ticker { height: 30px; min-width: 100px; width: auto; flex: 1 1 150px; border-width: 1px; }
    .notice-ticker > b { padding: 2px 7px; font-size: 10px; }
    .notice-track { font-size: 11px; line-height: 28px; }
    .status-wall-heading .legend { flex: 0 1 auto; width: auto; gap: 8px; }
    .status-wall-heading .legend > span { font-size: 9px; gap: 3px; }
    .fit-critical-toggle { display: inline-block; flex: 0 0 auto; }
    .critical-rail { display: none; }
    .app-shell[data-critical-open="true"] .critical-rail { display: block; position: fixed; top: 118px; right: 20px; bottom: 18px; width: 310px; max-height: none; z-index: 90; overflow: auto; border: 2px solid var(--cyan); box-shadow: 0 12px 35px #0005; }
    .app-shell[data-critical-open="true"] .fit-critical-close { display: block; position: sticky; top: 0; z-index: 2; width: 100%; margin-bottom: 10px; background: var(--surface); }
    .line-band { flex: 0 0 auto; min-height: 0; grid-template-columns: 46px minmax(0,1fr); gap: 5px; padding: 1.5px 0; border: 0; border-top: 1px solid var(--line); }
    .line-label { min-height: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
    .line-label strong { font-size: 12px; }
    .line-label small { font-size: 9px; }
    .equipment-grid { grid-template-columns: repeat(var(--fit-columns,20),minmax(0,1fr)); gap: 3px; }
    .team-empty { min-height: 0; height: var(--fit-tile-height,45px); padding: 0; grid-column: 1/-1; }
    .equipment-tile:not(.factory-machine-marker) { --fit-active-icon-size: var(--fit-icon-size,24px); --fit-active-icon-top: var(--fit-icon-top,16px); min-height: 0; height: var(--fit-tile-height,45px); border-radius: 5px; }
    .equipment-tile:not(.factory-machine-marker):has(> .equipment-order) { --fit-active-icon-size: var(--fit-job-icon-size,24px); --fit-active-icon-top: var(--fit-job-icon-top,16px); }
    .equipment-tile:not(.factory-machine-marker) .equipment-code { top: 1px; font-size: var(--fit-code-size,10px); line-height: var(--fit-code-line,12px); left: 1px; right: 1px; white-space: nowrap; text-overflow: clip; }
    .equipment-tile:not(.factory-machine-marker) .equipment-icon { width: var(--fit-active-icon-size); height: var(--fit-active-icon-size); left: calc(50% - var(--fit-active-icon-size)/2); top: var(--fit-active-icon-top); margin: 0; }
    .equipment-tile:not(.factory-machine-marker) .long-wait-icon--tile { width: 78%; height: 78%; font-size: calc(var(--fit-icon-size,20px) * .5); }
    .equipment-tile:not(.factory-machine-marker) .long-wait-icon--tile > span { padding-top: 0; font-size: inherit; }
    .equipment-tile:not(.factory-machine-marker) .equipment-meta { min-height: 0; height: var(--fit-state-line,10px); top: auto; bottom: 1px; display: block; font-size: var(--fit-state-size,8px); line-height: var(--fit-state-line,10px); left: 2px; right: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .equipment-tile:not(.factory-machine-marker):has(> .equipment-order) .equipment-meta { bottom: calc(var(--fit-order-line,8px) + 2px); }
    .equipment-tile:not(.factory-machine-marker) .equipment-state, .equipment-tile:not(.factory-machine-marker) .equipment-work-state { white-space: nowrap; }
    .equipment-tile:not(.factory-machine-marker)[data-state="WAIT"] .equipment-meta { font-size: var(--fit-state-size,8px); }
    .equipment-tile:not(.factory-machine-marker) .equipment-order { top: auto; bottom: 1px; height: var(--fit-order-line,8px); max-width: none; font-size: 7px; line-height: var(--fit-order-line,8px); padding: 0 1px; }
    .status-wall[data-fit-density="dense"] .equipment-tile:not(.factory-machine-marker) .equipment-icon { left: 3px; }
    .status-wall[data-fit-density="dense"] .equipment-tile:not(.factory-machine-marker) .equipment-meta { left: calc(var(--fit-active-icon-size) + 6px); top: var(--fit-body-top,14px); bottom: 1px; height: auto; display: flex; flex-direction: column; justify-content: center; font-size: var(--fit-state-size,7px); line-height: var(--fit-state-line,8px); white-space: normal; overflow-wrap: anywhere; }
    .status-wall[data-fit-density="dense"] .equipment-tile:not(.factory-machine-marker):has(> .equipment-order) .equipment-meta { bottom: calc(var(--fit-order-line,8px) + 2px); }
    .status-wall[data-fit-density="dense"] .equipment-tile:not(.factory-machine-marker) .equipment-order { left: 1px; right: 1px; }
    .status-wall[data-fit-density="dense"] .equipment-state, .status-wall[data-fit-density="dense"] .equipment-work-state, .status-wall[data-fit-density="dense"] .equipment-duration { white-space: normal; }
    .factory-layout-card { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 8px; }
    .factory-layout-heading { flex: 0 0 auto; margin: 0 0 5px; gap: 8px; }
    .factory-layout-heading h2 { font-size: 14px; }
    .factory-layout-heading p { display: none; }
    .factory-layout-viewport { min-height: 0; flex: 1 1 0; height: auto; padding: 4px; }
    .factory-layout-footer { flex: 0 0 auto; font-size: 8px; padding-top: 4px; }
    .wallboard { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
    .wallboard .topbar { flex: 0 0 auto; }
    .wallboard .nav-shell { flex: 0 0 auto; min-height: 30px; padding: 2px 10px; }
    .wallboard .nav-actions { display: flex; }
    .wallboard > .main { flex: 1 1 0; padding: 4px 8px 8px; }
    .wallboard .kpi-grid { display: grid; }
    .wallboard .kpi-card { min-height: 60px; }
  }
}