/* FloorTalk PREVIEW: Machine Data module (PREMIUM_DARK_UI tokens; status colours only for state) */
#screen-machinedata { padding: 16px; }
.md-wrap { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.md-head h2, .md-dhead h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; }
.md-head p, .md-dhead p { margin: 4px 0 0; font-size: 14px; }
.md-panel { background: var(--panel, #18181b); border: 1px solid var(--border, #27272a); border-radius: 14px; padding: 16px; }
.md-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 650; }
.md-mt { margin-top: 20px !important; }
.md-small { font-size: 12px; font-weight: 450; }
.md-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.md-row input { flex: 1; min-width: 120px; min-height: 44px; background: #111113; border: 1px solid var(--border, #27272a); border-radius: 10px; padding: 0 12px; color: var(--text); }
.grow { flex: 1; min-width: 0; }
.md-help { font-size: 12px; line-height: 1.45; margin: 8px 0 0; }
.md-lbl { display: block; font-size: 13px; font-weight: 550; margin: 12px 0 8px; color: #d4d4d8; }

/* line tabs */
.md-lines { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.md-line { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border, #27272a);
  background: var(--panel, #18181b); color: #d4d4d8; font-size: 14px; font-weight: 550; white-space: nowrap; }
.md-line.on { border-color: var(--accent, #2dd4bf); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent, #2dd4bf); }
.md-line-st { font-size: 12px; color: var(--muted); font-weight: 500; }
.md-dot { width: 10px; height: 10px; border-radius: 50%; background: #52525b; flex: none; }
.md-dot.st-running { background: #22c55e; } .md-dot.st-fault { background: #ef4444; } .md-dot.st-down { background: #f59e0b; }
.md-dot.st-idle { background: #a1a1aa; } .md-dot.st-nodata { background: transparent; border: 2px dashed #71717a; }

/* banners */
.md-banner { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 16px; border-radius: 12px; border: 1px solid #3f3f46; background: #111113; font-size: 14px; }
.md-banner strong { color: #f59e0b; }
.md-empty, .md-locked { text-align: left; }
/* Process-flow lanes (Line layout). */
.md-lanes, #md-lanes { display: flex; flex-direction: column; gap: 12px; }
.md-lane { background: var(--panel, #18181b); border: 1px solid var(--border, #27272a); border-radius: 16px; overflow: hidden; }
.md-lane.loose { border-style: dashed; }
.md-lane-h { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 0; background: transparent; color: var(--text, #fafafa); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.md-lane-caret { width: 8px; height: 8px; border-right: 2px solid var(--muted, #a1a1aa); border-bottom: 2px solid var(--muted, #a1a1aa); transform: rotate(-45deg); transition: transform 220ms ease; flex: none; }
.md-lane.open .md-lane-caret { transform: rotate(45deg); }
.md-lane-live { font-size: 12px; font-weight: 500; color: var(--muted, #a1a1aa); }
.md-lane-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 230ms ease; }
.md-lane.open .md-lane-body { grid-template-rows: 1fr; }
.md-lane-clip { overflow: hidden; min-height: 0; }
.md-scroller { position: relative; }
.md-scroller::before, .md-scroller::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none; opacity: 0; }
.md-scroller::before { left: 0; background: linear-gradient(90deg, #18181b 0%, rgba(24, 24, 27, 0) 100%); }
.md-scroller::after { right: 0; background: linear-gradient(270deg, #18181b 0%, rgba(24, 24, 27, 0) 100%); }
.md-scroller.more-left::before, .md-scroller.more-right::after { opacity: 1; }
.md-flow { display: flex; align-items: center; gap: 0; overflow-x: auto; overflow-y: clip; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 12px; padding: 8px 12px 14px; cursor: grab; user-select: none; }
.md-flow::-webkit-scrollbar { display: none; }
.md-flow.md-panning { cursor: grabbing; }
.md-arrow { position: relative; flex: 0 0 36px; height: 16px; background: linear-gradient(#3f3f46, #3f3f46) center / 100% 6px no-repeat; }
.md-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-width: 7px 0 7px 10px; border-style: solid; border-color: transparent transparent transparent #52525b; }
.md-tile { position: relative; flex: 0 0 168px; min-height: 88px; padding: 12px 28px 12px 16px; border-radius: 14px; background: #1f1f23; border: 1px solid #3f3f46; color: var(--text, #fafafa); scroll-snap-align: start; }
.md-tile.md-lifting { z-index: 3; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); border-color: var(--accent, #2dd4bf); }
.md-tile.open { flex-basis: 240px; border-color: var(--accent, #2dd4bf); }
.md-tile .md-grip { position: absolute; top: 6px; right: 4px; width: 28px; min-height: 44px; display: grid; place-items: center; color: var(--muted, #a1a1aa); cursor: grab; letter-spacing: -2px; touch-action: none; z-index: 1; }
.md-tile-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 48px; padding: 0 0 0 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.md-tile-hit strong { font-size: 15px; line-height: 1.25; }
.md-tile-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted, #a1a1aa); }
.md-light { width: 10px; height: 10px; border-radius: 50%; background: #52525b; flex: none; }
.md-tile-hit .md-light { position: absolute; top: 16px; left: 12px; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
.md-light.st-running { background: #22c55e; }
.md-light.st-down { background: #ef4444; }
.md-light.st-standby { background: #f59e0b; }
.md-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transform: scale(.96); transform-origin: top left; transition: grid-template-rows 230ms ease, opacity 230ms ease, transform 230ms ease; }
.md-tile.open .md-reveal { grid-template-rows: 1fr; opacity: 1; transform: none; }
.md-reveal-in { overflow: hidden; min-height: 0; }
.md-reveal-kids { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.md-reveal-kids li { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; }
.md-reveal .btn { min-height: 40px; margin-top: 4px; }
.md-none { margin: 8px 0; font-size: 13px; }
@media (max-width: 720px) {
  .md-flow { flex-direction: column; align-items: stretch; overflow: visible; scroll-snap-type: none; cursor: auto; touch-action: pan-y; }
  .md-tile, .md-tile.open { flex: 1 1 auto; width: 100%; }
  .md-arrow { flex: 0 0 28px; width: 16px; height: 28px; margin: 0 auto; background: linear-gradient(#3f3f46, #3f3f46) center / 6px 100% no-repeat; }
  .md-arrow::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%); border-width: 10px 7px 0 7px; border-color: #52525b transparent transparent transparent; }
  .md-scroller::before, .md-scroller::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .md-lane-caret, .md-lane-body, .md-reveal, .md-scroller::before, .md-scroller::after { transition: none; }
}
.md-station { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border, #27272a); }
.md-station:last-child { border-bottom: 0; }
.md-station[draggable="true"] { cursor: grab; }
.md-grip { color: var(--muted, #a1a1aa); width: 18px; flex: none; padding-top: 6px; letter-spacing: -2px; }
.md-kids { margin: 6px 0 0 8px; }
.md-kid { display: flex; gap: 8px; align-items: center; min-height: 40px; flex-wrap: wrap; }
.md-subline { font-size: 13px; color: var(--muted, #a1a1aa); }
.md-empty strong, .md-locked strong { font-size: 18px; }

/* toolbar */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; }
.md-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.md-toolbar .btn { min-height: 44px; }
.md-toolbar .btn.on { border-color: var(--accent, #2dd4bf); color: var(--accent, #2dd4bf); }
.md-toolbar .btn[disabled] { opacity: .45; cursor: not-allowed; }
.md-toolbar select, .md-side select, .md-side input { min-height: 44px; background: #111113; border: 1px solid var(--border, #27272a); border-radius: 10px; padding: 0 10px; color: var(--text); width: auto; }
.md-side input, .md-side select { width: 100%; }
.md-ver, .md-dirty { font-size: 13px; }

/* stage */
.md-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 899px) { .md-stage { grid-template-columns: 1fr; } }
.md-canvas-wrap { padding: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.md-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.md-stage.editing .md-svg { touch-action: none; }
.md-bg { fill: #111113; } .md-griddot { fill: #3f3f46; }
.md-side { position: sticky; top: 72px; max-height: calc(100vh - 160px); overflow: auto; }
.md-side .field { margin: 8px 0; } .md-side .field label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 6px; color: #d4d4d8; }
.md-sub { border-top: 1px solid var(--border, #27272a); margin-top: 14px; padding-top: 12px; }
.md-sub > strong { font-size: 14px; }
.md-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 4px 0; } .md-kv span { color: var(--muted); }
.md-reason { font-size: 13px; margin: -6px 0 8px; }
.md-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.md-hrow { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border, #27272a); font-size: 14px; }
.md-hrow .muted { font-size: 12px; }

/* nodes */
.md-node { cursor: pointer; outline: none; }
.md-stage.editing .md-node { cursor: grab; }
.md-n-body { fill: #1f1f23; stroke: #3f3f46; stroke-width: 1.5; }
.md-n-stripe { fill: #52525b; }
.md-n-label { fill: #fafafa; font-size: 15px; font-weight: 600; font-family: inherit; }
.md-n-st { fill: #a1a1aa; font-size: 12px; font-family: inherit; font-variant-numeric: tabular-nums; }
.md-node.st-running .md-n-stripe { fill: #22c55e; } .md-node.st-running .md-n-st { fill: #86efac; }
.md-node.st-idle .md-n-stripe { fill: #a1a1aa; }
.md-node.st-down .md-n-stripe { fill: #f59e0b; } .md-node.st-down .md-n-body { stroke: #f59e0b; } .md-node.st-down .md-n-st { fill: #fcd34d; }
.md-node.st-fault .md-n-stripe { fill: #ef4444; } .md-node.st-fault .md-n-body { stroke: #ef4444; stroke-width: 2.5; } .md-node.st-fault .md-n-st { fill: #fca5a5; }
.md-node.st-nodata .md-n-body { stroke-dasharray: 5 4; } .md-node.st-nodata .md-n-stripe { fill: #3f3f46; }
.md-node:focus-visible .md-n-body, .md-node.sel .md-n-body { stroke: #2dd4bf; stroke-width: 2.5; }
.md-node.from .md-n-body { stroke: #2dd4bf; stroke-dasharray: 6 3; }
.md-port { fill: #0a0a0b; stroke: #2dd4bf; stroke-width: 2; cursor: crosshair; }
.md-hint { fill: #a1a1aa; font-size: 16px; }
.md-edge-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
.md-edge-line { fill: none; stroke: #71717a; stroke-width: 2.5; }
.md-conv-base { fill: none; stroke: #3f3f46; stroke-width: 10; stroke-linejoin: round; }
.md-conv-roll { fill: none; stroke: #71717a; stroke-width: 2; stroke-dasharray: 2 6; }
.md-arrowhead { fill: #a1a1aa; }
.md-edge.sel .md-edge-line, .md-edge.sel .md-conv-roll { stroke: #2dd4bf; } .md-edge.sel .md-conv-base { stroke: #134e4a; }
.md-ghost { fill: none; stroke: #2dd4bf; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }

/* pills / legend */
.md-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.md-legend-note { font-size: 12px; margin-left: 4px; } .md-legend-note.warn { color: #fcd34d; }
.md-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid #3f3f46; color: #d4d4d8; white-space: nowrap; }
.md-pill i { font-style: normal; font-size: 10px; }
.md-pill.st-running { border-color: #166534; color: #86efac; } .md-pill.st-fault { border-color: #991b1b; color: #fca5a5; }
.md-pill.st-down { border-color: #92400e; color: #fcd34d; } .md-pill.st-nodata { border-style: dashed; color: #a1a1aa; }
.md-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.md-code { min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid #3f3f46; background: #111113; color: #d4d4d8; font: 600 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.md-code.on { border-color: #2dd4bf; color: #5eead4; }
button.md-code { min-height: 36px; }
.md-mlist, .md-list { display: flex; flex-direction: column; }
.md-mrow { display: flex; gap: 10px; align-items: center; text-align: left; min-height: 48px; padding: 8px 4px; border-bottom: 1px solid var(--border, #27272a); color: var(--text); width: 100%; }
.md-mrow .muted { display: block; font-size: 12px; }
.md-list h3 { margin-bottom: 4px; }

/* dashboard */
.md-dash { display: flex; flex-direction: column; gap: 16px; }
.md-dhead { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.md-dhead .btn { min-height: 44px; }
.md-status-big { text-align: right; } .md-status-big .md-pill { font-size: 15px; padding: 6px 14px; } .md-status-big .muted { font-size: 12px; margin-top: 6px; max-width: 280px; }
.md-seg { display: inline-flex; border: 1px solid var(--border, #27272a); border-radius: 12px; overflow: hidden; align-self: flex-start; }
.md-seg button { min-height: 44px; min-width: 56px; padding: 0 14px; color: #a1a1aa; font-weight: 600; font-variant-numeric: tabular-nums; }
.md-seg button.on { background: #1f1f23; color: var(--accent, #2dd4bf); }
.md-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1099px) { .md-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .md-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-kpi { background: var(--panel, #18181b); border: 1px solid var(--border, #27272a); border-radius: 14px; padding: 14px 16px; }
.md-kpi .l { font-size: 13px; color: var(--muted); font-weight: 550; }
.md-kpi .n { font-size: 28px; line-height: 1.15; font-weight: 680; font-variant-numeric: tabular-nums; margin-top: 4px; }
.md-kpi .n small { font-size: 14px; color: var(--muted); font-weight: 550; }
.md-kpi .s { font-size: 12px; color: var(--muted); margin-top: 4px; }
.md-kpi.warn { border-color: #92400e; } .md-kpi.warn .s { color: #fcd34d; }
.md-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 899px) { .md-grid2 { grid-template-columns: 1fr; } }
.md-fault { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 6px 0; }
.md-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.md-table th { text-align: left; color: var(--muted); font-weight: 550; font-size: 12px; padding: 6px 4px; border-bottom: 1px solid var(--border, #27272a); }
.md-table td { padding: 8px 4px; border-bottom: 1px solid #1f1f23; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.md-table th:nth-child(2), .md-table th:nth-child(3) { text-align: right; }
.md-dt { display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.md-dtrow { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #1f1f23; font-size: 14px; }
.md-dtrow .muted { font-size: 12px; }
.md-dt-cat { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 6px; border: 1px solid #3f3f46; color: #d4d4d8; min-width: 64px; text-align: center; }
.md-dt-cat.c-faulted { border-color: #991b1b; color: #fca5a5; } .md-dt-cat.c-starved, .md-dt-cat.c-blocked, .md-dt-cat.c-offline { border-color: #92400e; color: #fcd34d; }
.md-tag { font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid #2dd4bf; color: #5eead4; }
.md-chart { margin: 4px 0 8px; }
.md-ch { width: 100%; height: auto; display: block; }
.md-ch-t { fill: #d4d4d8; font-size: 12px; font-weight: 600; }
.md-ch-ax { fill: #71717a; font-size: 10px; font-variant-numeric: tabular-nums; }
.md-ch-grid { stroke: #27272a; stroke-width: 1; }
.md-ch-line { fill: none; stroke: #2dd4bf; stroke-width: 2; stroke-linejoin: round; }
.md-ch-area { fill: rgba(45, 212, 191, 0.12); stroke: none; }
.md-ch-dot { fill: #2dd4bf; }
.md-ch-bar { fill: #71717a; }
.md-ch-hit { fill: transparent; }
.md-ch-ref { stroke: #d4d4d8; stroke-width: 1.2; stroke-dasharray: 6 4; }
.md-ch-reft { fill: #d4d4d8; font-size: 11px; }
.md-ch-empty { fill: #71717a; font-size: 13px; }
.md-notes { font-size: 12px; } .md-notes p { margin: 2px 0; }
@media (max-width: 699px) {
  #screen-machinedata { padding: 12px; }
  .md-dhead { gap: 10px; } .md-status-big { text-align: left; width: 100%; }
  .md-side { position: static; max-height: none; }
  .md-canvas-wrap { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) { .md-wrap * { transition: none !important; animation: none !important; } }
@media (max-width: 699px) { .md-side { display: none; } }