/* PQ operational workspace. See DESIGN.md for hierarchy and state semantics. */
.pq-workspace { --pq-surface: #15212d; --pq-raised: #1b2937; --pq-border: #344351; --pq-subtle: #253544; --pq-ink: #edf2f7; --pq-muted: #abb9c7; --pq-accent: #8cbaff; --pq-run: #59b89b; --pq-wait: #85a8d8; --pq-stop: #d1ac67; --pq-fault: #f18e89; --pq-unknown: #6c7d8d; min-width: 0; color: var(--pq-ink); font-size: 14px; line-height: 1.45; }
html[data-theme="light"] .pq-workspace { --pq-surface: #fff; --pq-raised: #edf2f7; --pq-border: #c5cfd9; --pq-subtle: #e1e8ef; --pq-ink: #17212b; --pq-muted: #536171; --pq-accent: #1558a9; --pq-run: #247b61; --pq-wait: #416b9d; --pq-stop: #906814; --pq-fault: #b93c34; --pq-unknown: #7c8995; }
.pq-workspace .panel { background: var(--pq-surface); border: 1px solid var(--pq-border); box-shadow: none; border-radius: 6px; min-width: 0; }
.pq-workspace h3 { font-size: 15px; line-height: 1.3; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.pq-workspace .button { min-height: 36px; padding: 7px 12px; font-size: 13px; border-radius: 4px; box-shadow: none; white-space: nowrap; }
.pq-workspace .button-quiet { background: transparent; border: 1px solid var(--pq-border); color: var(--pq-ink); }
.pq-workspace .button-quiet:hover { background: var(--pq-raised); }
.pq-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 12px; }
.pq-breadcrumb { color: var(--pq-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; margin-bottom: 5px; }
.pq-breadcrumb span { margin: 0 8px; color: var(--pq-unknown); }
.pq-heading h2 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.04em; }
.pq-heading h2 span { color: var(--pq-muted); font-size: 14px; font-weight: 400; letter-spacing: 0; margin-left: 12px; }
.pq-period { display: grid; gap: 5px; }
.pq-period label { color: var(--pq-muted); font-size: 12px; }
.pq-period > div { display: flex; gap: 5px; }
.pq-period input { width: 143px; min-height: 36px; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--pq-ink); background: var(--pq-surface); border: 1px solid var(--pq-border); border-radius: 4px; color-scheme: dark; }
html[data-theme="light"] .pq-period input { color-scheme: light; }
.pq-tabs { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--pq-border); margin-bottom: 12px; overflow: auto; }
.pq-tabs button { min-height: 38px; padding: 4px 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--pq-muted); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.pq-tabs button[aria-pressed="true"] { color: var(--pq-ink); border-bottom-color: var(--pq-accent); }
#pq-events-badge { font-variant-numeric: tabular-nums; background: var(--pq-raised); border-radius: 3px; margin-left: 4px; padding: 1px 5px; font-size: 12px; }
.pq-live-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--pq-border); border-radius: 4px; background: var(--pq-surface); margin-bottom: 12px; }
.pq-live-dot { width: 8px; height: 8px; border: 2px solid var(--pq-unknown); border-radius: 50%; flex: none; }
.pq-workspace[data-quality="valid"] .pq-live-dot { border-color: var(--pq-run); background: var(--pq-run); }
.pq-live-line > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; flex: 1; }
#pq-connection { font-size: 13px; font-weight: 600; }
#pq-connection-detail { color: var(--pq-muted); font-size: 12px; }
.pq-origin { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--pq-muted); white-space: nowrap; }
.pq-live-line .button { font-size: 12px; min-height: 30px; padding: 4px 8px; }
.pq-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--pq-border); border-radius: 6px; background: var(--pq-surface); margin-bottom: 12px; }
.pq-kpi { padding: 13px 18px; min-width: 0; }
.pq-kpi + .pq-kpi { border-left: 1px solid var(--pq-border); }
.pq-kpi > span { color: var(--pq-muted); font-size: 13px; font-weight: 500; }
.pq-kpi small { font-size: 10px; margin-left: 5px; letter-spacing: .06em; }
.pq-kpi-value { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; }
.pq-kpi-value strong { font-size: 30px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pq-kpi-value > span { font-size: 12px; color: var(--pq-muted); }
.pq-kpi p { margin: 0; font-size: 11px; color: var(--pq-muted); }
.pq-attention { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 10px 12px; background: var(--pq-surface); border: 1px solid var(--pq-border); border-radius: 4px; }
.pq-attention > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 12px; }
.pq-attention-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--pq-muted); }
#pq-attention-title { font-size: 13px; font-weight: 600; }
#pq-attention-detail { font-size: 12px; color: var(--pq-muted); }
.pq-attention[data-state="fault"] { border-color: var(--pq-fault); }
.pq-attention[data-state="fault"] #pq-attention-title { color: var(--pq-fault); }
.pq-attention .button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.pq-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(315px,1fr); grid-template-rows: auto auto; gap: 12px; }
.pq-overview { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; overflow: hidden; }
.pq-overview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--pq-border); }
.pq-view-controls { display: flex; gap: 6px; }
.pq-view-controls .button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.pq-model-intro { display: grid; justify-items: center; align-content: center; gap: 12px; background: #071321; color: #c6d6e4; text-align: center; }
.pq-model-intro p { margin: 0; font-size: 13px; }
.pq-process-mark { width: min(80%,450px); height: 55px; color: #7698b9; }
.pq-scene, .pq-model-intro { position: relative; height: 260px; min-height: 260px; flex: 1; background: #071321; }
.pq-scene canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.pq-scene.is-dragging canvas { cursor: grabbing; }
.pq-scene-status { position: absolute; top: 10px; left: 12px; max-width: calc(100% - 24px); pointer-events: none; color: #a6b7c8; background: #071321d9; padding: 3px 5px; font-size: 11px; }
.pq-scene-labels { position: absolute; inset: 0; pointer-events: none; }
.machine-scene__cargo-label { position: absolute; transform: translate(-50%,-100%); white-space: nowrap; color: #d5e3ed; padding: 3px 5px; background: #071321dd; font-size: 11px; border-radius: 3px; }
.pq-zones { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); border-top: 1px solid var(--pq-border); background: var(--pq-surface); }
.pq-zone { display: grid; justify-items: center; gap: 3px; border: 0; border-right: 1px solid var(--pq-subtle); background: none; padding: 8px 3px; color: var(--pq-ink); cursor: pointer; font: inherit; min-width: 0; }
.pq-zone:last-child { border-right: 0; }
.pq-zone:hover { background: var(--pq-raised); }
.pq-zone[aria-pressed="true"] { background: var(--pq-raised); box-shadow: inset 0 -2px var(--pq-accent); }
.pq-zone-code { font-size: 12px; font-weight: 600; }
.pq-zone strong { font-size: 11px; font-weight: 400; white-space: nowrap; }
.pq-zone small { font-size: 10px; color: var(--pq-muted); }
.pq-zone[data-state="fault"] .pq-zone-code, .pq-zone[data-state="fault"] small { color: var(--pq-fault); }
.pq-zone[data-state="moving"] small { color: var(--pq-run); }
.pq-status-rail { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid var(--pq-border); }
.pq-status-rail > div { padding: 8px 10px; display: grid; gap: 3px; }
.pq-status-rail span { font-size: 10px; color: var(--pq-muted); }
.pq-status-rail strong { font-size: 11px; font-weight: 500; }
.pq-chart-panel { padding: 14px 16px; min-width: 0; }
.pq-production-chart { grid-column: 2; grid-row: 1; }
.pq-time-panel { grid-column: 2; grid-row: 2; }
.pq-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pq-chart-heading p { font-size: 11px; color: var(--pq-muted); margin: 4px 0 0; }
.pq-chart-heading > strong { font-size: 12px; font-weight: 500; color: var(--pq-muted); text-align: right; }
.pq-hour-chart { min-height: 106px; }
.pq-hour-chart svg { display: block; width: 100%; height: 108px; overflow: visible; }
.pq-chart-grid { stroke: var(--pq-subtle); stroke-width: 1; }
.pq-chart-axis { fill: var(--pq-muted); font-size: 11px; }
.pq-chart-bar { fill: var(--pq-accent); }
.pq-chart-bar:focus { stroke: var(--pq-ink); stroke-width: 2; outline: none; }
.pq-chart-empty { min-height: 106px; display: grid; align-content: center; gap: 4px; text-align: center; color: var(--pq-muted); background: repeating-linear-gradient(0deg,transparent 0,transparent 33px,var(--pq-subtle) 34px,transparent 35px); }
.pq-chart-empty strong { font-size: 13px; font-weight: 500; }
.pq-chart-empty p { margin: 0; font-size: 12px; }
.pq-chart-footnote { color: var(--pq-muted); font-size: 11px; margin: 8px 0 0; min-height: 16px; }
.pq-time-bars { display: grid; gap: 9px; }
.pq-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.pq-time-row > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.pq-time-row strong { font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.pq-time-row > div > span { color: var(--pq-muted); }
.pq-bar { display: block; width: 100%; height: 6px; background: var(--pq-subtle); border-radius: 2px; }
.pq-bar rect { fill: currentColor; }
.pq-state-run { color: var(--pq-run); fill: var(--pq-run); }
.pq-state-wait { color: var(--pq-wait); fill: var(--pq-wait); }
.pq-state-stopped { color: var(--pq-stop); fill: var(--pq-stop); }
.pq-state-fault { color: var(--pq-fault); fill: var(--pq-fault); }
.pq-state-unknown { color: var(--pq-unknown); fill: var(--pq-unknown); }
.pq-timeline-panel { margin-top: 12px; padding: 12px 16px; }
.pq-timeline-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pq-state-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--pq-muted); }
.pq-state-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--pq-unknown); }
.pq-state-legend [data-state="run"]::before { background: var(--pq-run); }
.pq-state-legend [data-state="wait"]::before { background: var(--pq-wait); }
.pq-state-legend [data-state="stopped"]::before { background: var(--pq-stop); }
.pq-state-legend [data-state="fault"]::before { background: var(--pq-fault); }
.pq-timeline { display: flex; gap: 1px; height: 32px; }
.pq-timeline button { display: block; padding: 0; flex: 1; min-width: 0; min-height: 0; height: 32px; background: var(--pq-subtle); border: 0; cursor: pointer; }
.pq-timeline svg { display: block; width: 100%; height: 100%; }
.pq-time-axis { display: flex; justify-content: space-between; color: var(--pq-muted); font-size: 10px; margin-top: 5px; }
.pq-analysis-status { color: var(--pq-muted); font-size: 11px; line-height: 1.5; padding: 8px 0; }
.pq-workspace[data-view="production"] .pq-dashboard-grid { grid-template-columns: 1.6fr 1fr; grid-template-rows: auto; }
.pq-workspace[data-view="production"] .pq-production-chart { grid-column: 1; }
.pq-workspace[data-view="production"] .pq-time-panel { grid-column: 2; grid-row: 1; }
.pq-workspace[data-view="production"] .pq-hour-chart svg { height: 180px; }
.pq-production-flow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px; margin: 4px 0 12px; }
.pq-production-flow > div { display: grid; gap: 6px; }
.pq-production-flow span { color: var(--pq-muted); font-size: 13px; }
.pq-production-flow strong { font-size: 25px; font-weight: 600; }
.pq-production-flow p { flex-basis: 100%; color: var(--pq-muted); font-size: 12px; margin: 0; }
.pq-stop-list { max-height: 390px; overflow: auto; }
.pq-stop-list table { width: 100%; border-collapse: collapse; }
.pq-stop-list th,.pq-stop-list td { padding: 10px 8px; border-bottom: 1px solid var(--pq-border); text-align: left; font-size: 13px; white-space: nowrap; }
.pq-stop-list th { font-weight: 500; color: var(--pq-muted); }
.pq-method { padding: 14px 18px; margin: 12px 0; font-size: 13px; color: var(--pq-muted); line-height: 1.65; }
.pq-method summary { color: var(--pq-ink); cursor: pointer; }
.pq-recurrence-panel { padding: 18px; margin-bottom: 12px; }
.pq-recurrence-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(80px,1fr) 50px; align-items: center; gap: 16px; padding: 8px 0; font-size: 13px; }
.pq-recurrence-row strong { text-align: right; }
.pq-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pq-detail-content { padding: 0 18px 18px; }
.pq-workspace .panel-heading { padding: 18px; }
.pq-workspace .eyebrow { font-size: 11px; letter-spacing: .08em; color: var(--pq-muted); }
.pq-note { margin: 12px 0 0; color: var(--pq-muted); font-size: 12px; line-height: 1.6; }
.pq-events { max-height: 480px; overflow: auto; }
.pq-event { display: grid; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--pq-subtle); }
.pq-event strong { font-size: 14px; font-weight: 500; }
.pq-event small { font-size: 12px; line-height: 1.5; color: var(--pq-muted); }
.pq-event button { justify-self: start; }
.pq-signal-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--pq-subtle); font-size: 13px; }
.pq-signal-row span { flex: 1; min-width: 150px; color: var(--pq-muted); }
.pq-signal-row code { color: var(--pq-muted); font-size: 12px; overflow-wrap: anywhere; }
.pq-signal-row strong { font-size: 13px; font-weight: 500; }
.pq-counters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 12px; }
.pq-counter { display: grid; gap: 7px; padding: 16px; border: 1px solid var(--pq-border); border-radius: 5px; background: var(--pq-surface); }
.pq-counter span,.pq-counter small { color: var(--pq-muted); font-size: 12px; }
.pq-counter strong { font-size: 24px; font-weight: 500; }
.pq-wide-panel { margin-top: 12px; }
.pq-technical-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.pq-technical-toolbar input { flex: 1; min-width: 180px; }
.pq-technical-list { max-height: 450px; overflow: auto; }
.pq-contract-link { color: var(--pq-accent); font-size: 13px; }
.pq-zone-dialog { width: min(620px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 22px; border: 1px solid var(--pq-border); border-radius: 8px; background: var(--pq-surface); color: var(--pq-ink); }
.pq-zone-dialog::backdrop { background: #0009; }
.pq-zone-dialog header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.pq-zone-dialog header span { font-size: 11px; color: var(--pq-muted); }
.pq-zone-dialog h3 { font-size: 20px; margin-top: 6px; }
#pq-zone-condition { font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--pq-border); }
.pq-zone-signals { max-height: 50dvh; overflow: auto; }
.pq-workspace [hidden] { display: none !important; }
.pq-workspace :focus-visible { outline: 2px solid var(--pq-accent); outline-offset: 3px; }
.pq-expanded { overflow: hidden; }
.pq-workspace.is-maximized { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100dvh; max-width: none; background: var(--paper); padding: 12px; overflow: auto; }
.pq-workspace.is-maximized > :not(.pq-dashboard-grid) { display: none !important; }
.pq-workspace.is-maximized .pq-dashboard-grid { display: block; }
.pq-workspace.is-maximized .pq-dashboard-grid > :not(.pq-overview) { display: none; }
.pq-workspace.is-maximized .pq-status-rail { display: none; }
.pq-workspace.is-maximized .pq-scene,.pq-workspace.is-maximized .pq-model-intro { height: calc(100dvh - 150px); flex: none; }
@media (max-width: 1250px) {
    .pq-heading h2 span { display: none; }
    .pq-dashboard-grid { grid-template-columns: minmax(0,1.4fr) minmax(295px,1fr); }
    .pq-zone strong { font-size: 10px; }
    .pq-kpi { padding: 12px; }
    .pq-kpi-value strong { font-size: 26px; }
    .pq-kpi-value > span { font-size: 11px; }
    .pq-origin { display: none; }
    .pq-time-row { grid-template-columns: 1.3fr 1fr; }
    .pq-time-row > div { font-size: 11px; }
    .pq-status-rail > div { padding: 8px 6px; }
}
@media (max-width: 980px) {
    .pq-dashboard-grid { grid-template-columns: 1fr 1fr; }
    .pq-overview { grid-column: 1 / -1; grid-row: 1; }
    .pq-production-chart { grid-column: 1; grid-row: 2; }
    .pq-time-panel { grid-column: 2; grid-row: 2; }
    .pq-live-line > div { display: grid; }
    .pq-kpi-value { flex-wrap: wrap; gap: 4px; }
    .pq-kpi p { font-size: 11px; }
    .pq-heading { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 650px) {
    .pq-heading h2 { font-size: 25px; }
    .pq-breadcrumb { font-size: 10px; }
    .pq-period { width: 100%; }
    .pq-period > div { width: 100%; }
    .pq-period input { flex: 1; }
    .pq-tabs { gap: 20px; }
    .pq-tabs button { font-size: 13px; min-height: 44px; }
    .pq-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .pq-kpi:nth-child(3) { border-left: 0; }
    .pq-kpi:nth-child(n+3) { border-top: 1px solid var(--pq-border); }
    .pq-kpi-value strong { font-size: 29px; }
    .pq-dashboard-grid,.pq-workspace[data-view="production"] .pq-dashboard-grid { grid-template-columns: 1fr; }
    .pq-production-chart,.pq-time-panel,.pq-workspace[data-view="production"] .pq-time-panel { grid-column: 1; grid-row: auto; }
    .pq-attention > div { display: grid; }
    .pq-attention-label { display: none; }
    .pq-attention .button,.pq-live-line .button { min-height: 40px; }
    .pq-live-line { padding: 10px; gap: 8px; }
    #pq-connection-detail { font-size: 11px; }
    .pq-scene,.pq-model-intro { min-height: 240px; height: 240px; }
    .pq-zones { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .pq-zone { min-height: 56px; }
    .pq-zone strong { font-size: 12px; }
    .pq-zone:nth-child(n+5) { border-top: 1px solid var(--pq-subtle); }
    .pq-status-rail { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .pq-status-rail strong { font-size: 12px; }
    .pq-detail-grid { grid-template-columns: 1fr; }
    .pq-counters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .pq-time-row { grid-template-columns: 1fr 1fr; }
    .pq-time-row > div { font-size: 12px; }
    .pq-workspace.is-maximized .pq-scene { height: calc(100dvh - 230px); }
    .pq-state-legend { gap: 10px; }
    .pq-recurrence-row { grid-template-columns: minmax(0,1fr) 65px 30px; gap: 8px; }
}
/* HMI supervision composition: shared palette/type, read-only operational hierarchy. */
.pq-workspace { --pq-surface:#091522; --pq-raised:#0d2032; --pq-border:#244058; --pq-subtle:#142b40; --pq-ink:#ecf7ff; --pq-muted:#91acc6; --pq-accent:#23d6ff; --pq-run:#65dc9b; font-family:"Bahnschrift SemiCondensed","Bahnschrift","Segoe UI",sans-serif; }
.pq-heading { margin-bottom:8px; align-items:center; }
.pq-heading h2 { font-size:20px; letter-spacing:0; }
.pq-breadcrumb { display:none; }
.pq-period { display:flex; align-items:center; gap:10px; }
.pq-period label { font-size:11px; }
.pq-period input,.pq-period .button { min-height:30px; }
.pq-tabs { gap:24px; margin-bottom:10px; }
.pq-tabs button { font-size:13px; min-height:32px; padding-bottom:6px; }
.pq-section-label { display:block; color:var(--pq-accent); font-size:10px; letter-spacing:.12em; margin-bottom:4px; }
.pq-workspace h3 { font-family:inherit; font-size:14px; letter-spacing:0; }
.pq-status-rail { display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr minmax(210px,1.5fr); align-items:center; border:1px solid var(--pq-border); border-radius:6px; background:var(--pq-surface); margin-bottom:10px; min-height:62px; }
.pq-status-rail > div { padding:10px 16px; border-right:1px solid var(--pq-subtle); gap:5px; }
.pq-status-rail > div:last-child { border:0; }
.pq-status-rail span { font-size:10px; letter-spacing:.07em; }
.pq-status-rail strong { font-size:13px; }
.pq-status-rail .pq-general-state strong { font-size:18px; text-transform:uppercase; }
.pq-status-rail .pq-link-state { position:relative; padding-right:83px; }
.pq-link-state #pq-connection { font-size:11px; }
.pq-link-state #pq-connection-detail { font-size:10px; letter-spacing:0; }
.pq-text-link { border:0; background:none; color:var(--pq-accent); font:inherit; font-size:11px; cursor:pointer; padding:6px; min-height:32px; white-space:nowrap; }
.pq-link-state .pq-text-link { position:absolute; right:10px; top:50%; transform:translateY(-50%); }
.pq-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; background:none; border:0; margin-bottom:10px; }
.pq-kpi { padding:10px 14px; background:var(--pq-surface); border:1px solid var(--pq-border); border-radius:5px; }
.pq-kpi > span { font-size:10px; letter-spacing:.08em; }
.pq-kpi-value { margin:6px 0 4px; }
.pq-kpi-value strong { font-size:27px; letter-spacing:0; }
.pq-kpi:nth-child(2) .pq-kpi-value strong,.pq-kpi:nth-child(3) .pq-kpi-value strong { color:var(--pq-accent); }
.pq-kpi p { font-size:11px; }
.pq-dashboard-grid { grid-template-columns:minmax(0,1fr) 240px; grid-template-rows:auto; gap:10px; }
.pq-overview { grid-column:1; grid-row:1; }
.pq-overview-toolbar { padding:10px 12px; }
.pq-scene,.pq-model-intro { height:clamp(290px,calc(100dvh - 545px),480px); min-height:290px; flex:none; }
.pq-selected-zone { padding:12px; display:flex; flex-direction:column; gap:6px; }
.pq-selected-zone h3 { font-size:16px; line-height:1.4; }
.pq-zone-emblem { height:66px; display:grid; place-items:center; margin:5px 0; color:var(--pq-accent); }
.pq-zone-emblem span { display:grid; place-items:center; width:70px; height:46px; border:1px solid #168df5; background:var(--pq-raised); transform:skewY(-9deg); font-size:22px; box-shadow:5px -5px 0 var(--pq-subtle); }
#pq-selected-state { font-size:12px; font-weight:500; padding:7px 0; border-bottom:1px solid var(--pq-subtle); }
.pq-workspace [data-state="moving"] { color:var(--pq-run); }
.pq-workspace [data-state="fault"] { color:var(--pq-fault); }
#pq-zone-summary .pq-signal-row { display:grid; grid-template-columns:1fr 1.1fr; gap:8px; padding:8px 0; font-size:12px; }
#pq-zone-summary .pq-signal-row span { min-width:0; }
#pq-zone-summary .pq-signal-row strong { font-size:12px; text-align:right; }
.pq-selected-zone .button { margin-top:auto; font-size:12px; }
.pq-flow-panel { margin:8px 0; padding:10px 12px; }
.pq-flow-panel header,.pq-attention header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.pq-flow-count { font-size:11px; color:var(--pq-muted); }
.pq-zones { border:0; gap:8px; }
.pq-zone { position:relative; justify-items:start; text-align:left; border:1px solid var(--pq-border); border-radius:4px; padding:8px 10px; gap:4px; }
.pq-zone:last-child { border-right:1px solid var(--pq-border); }
.pq-zone::after { content:''; position:absolute; right:9px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--pq-unknown); }
.pq-zone[data-state="moving"]::after { background:var(--pq-run); }
.pq-zone[data-state="fault"]::after { background:var(--pq-fault); }
.pq-zone[data-state="occupied"]::after { background:var(--pq-stop); }
.pq-zone[aria-pressed="true"] { border-color:#168df5; box-shadow:none; }
.pq-zone strong { font-size:12px; color:var(--pq-ink); }
.pq-zone small { font-size:10px; }
.pq-flow-panel footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--pq-subtle); padding-top:7px; margin-top:8px; color:var(--pq-muted); font-size:11px; }
.pq-flow-panel footer strong { margin-left:8px; color:var(--pq-ink); font-weight:500; }
.pq-bottom-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:10px; }
.pq-attention { display:block; margin:0; padding:14px 16px; }
.pq-alarm-empty { font-size:13px; color:var(--pq-muted); padding:25px 12px; margin:0; border-left:2px solid var(--pq-unknown); background:var(--pq-raised); }
.pq-alarm-preview-row { display:grid; grid-template-columns:125px 1fr; gap:5px 12px; border-left:2px solid var(--pq-stop); padding:8px 10px; margin-top:7px; background:var(--pq-raised); }
.pq-alarm-preview-row[data-severity="critical"] { border-color:var(--pq-fault); }
.pq-alarm-preview-row time,.pq-alarm-preview-row span { font-size:10px; color:var(--pq-muted); }
.pq-alarm-preview-row strong { font-size:12px; font-weight:500; }
.pq-alarm-preview-row span { grid-column:2; }
.pq-production-chart,.pq-time-panel { grid-column:auto; grid-row:auto; }
.pq-workspace[data-view="production"] .pq-dashboard-grid { display:none; }
.pq-workspace.is-maximized .pq-dashboard-grid { display:block; }
.pq-workspace.is-maximized .pq-scene,.pq-workspace.is-maximized .pq-model-intro { height:calc(100dvh - 92px); }
.pq-workspace.is-maximized .pq-status-rail { display:none; }
@media (max-width:1250px) { .pq-status-rail { grid-template-columns:repeat(4,1fr); } .pq-status-rail .pq-link-state { grid-column:1/-1; border-top:1px solid var(--pq-subtle); padding-top:6px; padding-bottom:6px; display:flex; gap:12px; } .pq-kpi { padding:12px; } .pq-kpi-value strong { font-size:24px; } .pq-dashboard-grid { grid-template-columns:minmax(0,1fr) 220px; } .pq-zone { padding:8px 6px; } .pq-zone strong { font-size:11px; } }
@media (max-width:980px) { .pq-dashboard-grid { grid-template-columns:minmax(0,1fr) 215px; } .pq-overview { grid-column:1; grid-row:1; } .pq-period label { display:none; } .pq-scene,.pq-model-intro { height:340px; } .pq-zones { grid-template-columns:repeat(4,minmax(0,1fr)); } .pq-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:650px) { .pq-heading { gap:8px; } .pq-period { width:100%; } .pq-period > div { width:100%; } .pq-status-rail { grid-template-columns:1fr 1fr; } .pq-status-rail > div { padding:10px; } .pq-status-rail .pq-link-state { display:grid; gap:3px; } .pq-kpis { grid-template-columns:1fr 1fr; } .pq-kpi:last-child { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; } .pq-kpi:last-child .pq-kpi-value { margin:0; } .pq-kpi:last-child p { max-width:100px; } .pq-kpi:nth-child(3) { border-left:1px solid var(--pq-border); } .pq-dashboard-grid,.pq-bottom-grid { grid-template-columns:1fr; } .pq-overview { grid-column:1; } .pq-selected-zone { display:grid; grid-template-columns:1fr auto; gap:8px 16px; } .pq-selected-zone .pq-section-label,.pq-selected-zone h3,#pq-selected-state,#pq-zone-summary { grid-column:1; } .pq-zone-emblem { grid-column:2; grid-row:1/4; } .pq-selected-zone .button { grid-column:2; grid-row:4/6; align-self:end; } #pq-zone-summary { grid-column:1/-1; } .pq-scene,.pq-model-intro { height:280px; min-height:280px; } .pq-flow-panel footer { flex-wrap:wrap; } .pq-flow-count { max-width:110px; text-align:right; } .pq-zone strong { white-space:normal; } .pq-kpi > span { font-size:10px; } }
/* Match the machine HMI's compact status strips and alarm footer. */
.pq-zone-freshness { margin:0; color:var(--pq-muted); font-size:11px; line-height:1.35; }
.pq-alarm-table { width:100%; border-collapse:collapse; text-align:left; }
.pq-alarm-table th { color:var(--pq-muted); font-size:11px; font-weight:400; padding:6px 8px; white-space:nowrap; }
.pq-alarm-table td { font-size:12px; padding:7px 8px; border-top:1px solid var(--pq-subtle); vertical-align:top; }
.pq-alarm-table td:first-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.pq-alarm-table tr[data-severity="critical"] td:nth-child(2) { color:var(--pq-fault); }
.pq-alarm-table tr[data-severity="warning"] td:nth-child(2) { color:var(--pq-stop); }
.pq-alarm-link { padding:0; min-height:0; border:0; background:none; font:inherit; color:var(--pq-ink); text-align:left; cursor:pointer; }
.pq-alarm-link:hover { text-decoration:underline; }
#pq-alarm-preview { display:block; overflow:auto; }
.pq-alarm-empty { font-size:13px; padding:18px 12px; }
.pq-workspace[data-view="overview"] .pq-hour-chart,.pq-workspace[data-view="overview"] .pq-chart-empty { min-height:82px; }
.pq-workspace[data-view="overview"] .pq-hour-chart svg { height:90px; }
.pq-workspace[data-view="overview"] .pq-chart-heading { margin-bottom:8px; }
@media (min-width:981px) {
    .pq-heading { margin-bottom:4px; }
    .pq-tabs { margin-bottom:8px; }
    .pq-status-rail { min-height:50px; margin-bottom:8px; }
    .pq-status-rail > div { padding-top:7px; padding-bottom:7px; }
    .pq-kpis { margin-bottom:8px; }
    .pq-selected-zone .pq-section-label { margin-bottom:0; }
    .pq-selected-zone h3 { font-size:15px; }
    .pq-selected-zone .button { min-height:30px; padding:5px; }
    .pq-overview-toolbar { padding:7px 12px; }
}
@media (max-width:650px) {
    .pq-selected-zone { display:flex; }
    .pq-selected-zone .button { align-self:stretch; }
    .pq-alarm-table { min-width:540px; }
    .pq-workspace .pq-scene { height:280px; min-height:280px; }
    .pq-workspace.is-maximized .pq-scene { height:calc(100dvh - 92px); }
}
@media (min-width:981px) {
    .pq-kpi { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; align-items:center; padding:10px 12px; }
    .pq-kpi > span { grid-column:1; font-size:11px; }
    .pq-kpi .pq-kpi-value { grid-column:2; grid-row:1/3; margin:0; }
    .pq-kpi p { grid-column:1; font-size:10px; margin-top:5px; }
    .pq-kpi-value strong { font-size:26px; }
    .pq-scene,.pq-model-intro { height:clamp(270px,calc(100dvh - 685px),430px); min-height:270px; }
    .pq-flow-panel header .pq-section-label { display:none; }
    .pq-flow-panel header { margin-bottom:7px; }
    .pq-zone { padding:6px 10px; gap:2px; }
    .pq-flow-panel footer { margin-top:6px; padding-top:6px; }
    .pq-workspace.is-maximized .pq-scene { height:calc(100dvh - 92px); }
}