/* Plant register (sectors, machines, motors, measurement points, QR labels).
   Builds on app.css and viz.css; only what the plant pages need on top. Colours come from the
   app tokens and the viz tones (viz-t-*: --vc fill, --vt text), so light, dark and print work.
   No inline styles: sizes are SVG attributes. */

/* Tags: readable, bold, never translated */
.plant-tag { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: .03em; color: var(--accent); text-decoration: none; white-space: nowrap; }
a.plant-tag:hover { color: var(--accent-ink); text-decoration: underline; }
.plant-tag-big { font-size: 15px; }
.plant-tag-input { font-family: var(--mono); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.plant-code { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 1px 8px; border-radius: 6px; background: var(--btn-bg); color: var(--btn-ink); font-family: var(--mono); font-weight: 600; font-size: 13px; }
.plant-unit { font-size: 15px; font-weight: 600; color: var(--muted); }
.plant-sub { font-size: 16px; margin: 6px 0 0; }

/* Breadcrumbs */
.plant-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.plant-crumbs a { text-decoration: none; }
.plant-crumbs a:hover { text-decoration: underline; }

/* Find by tag (scan or type) */
.plant-find { display: flex; flex-direction: column; gap: 6px; min-width: min(100%, 320px); }
.plant-find-row { display: flex; gap: 8px; }
.plant-find-row input { font-family: var(--mono); font-weight: 600; text-transform: uppercase; min-width: 0; flex: 1; }

/* Legend beside a panel heading */
.plant-legend { margin: 0; }

/* Shared thin bars */
.plant-bar-track { fill: var(--sunk-2); }
.plant-bar-part { fill: var(--vc); }
.plant-share-fill { fill: var(--accent); }

/* ---------- The mill line: a chain of sector tiles ---------- */
.plant-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px 26px; counter-reset: none; }
.plant-node { position: relative; display: flex; min-width: 0; }
.plant-node > a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 13px; border-radius: 16px; color: var(--ink); text-decoration: none; background: var(--glass-strong); box-shadow: var(--hairline), inset 0 0 0 1.5px color-mix(in srgb, var(--node-c, var(--viz-green)) 55%, transparent), inset 4px 0 0 var(--node-c, var(--viz-green)); transition: transform .15s, box-shadow .15s; }
.plant-node > a:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-hover), inset 0 0 0 1.5px var(--node-c, var(--viz-green)), inset 4px 0 0 var(--node-c, var(--viz-green)); }
.plant-node.is-ok { --node-c: var(--viz-green); }
.plant-node.is-warn { --node-c: var(--viz-amber); }
.plant-node.is-empty { --node-c: var(--viz-muted); }
.plant-node.is-empty > a { background: var(--glass-soft); }
.plant-line-service .plant-node.is-ok { --node-c: var(--viz-paddy); }
/* The arrow to the next sector (in the gap on the right; downward on one column) */
.plant-line:not(.plant-line-service) .plant-node:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -20px; width: 14px; height: 14px; margin-top: -7px; background: var(--muted); clip-path: polygon(0 20%, 55% 20%, 55% 0, 100% 50%, 55% 100%, 55% 80%, 0 80%); opacity: .7; }
.plant-node-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plant-node-icon { display: inline-flex; color: var(--node-c, var(--muted)); }
.plant-node-icon .icon { width: 22px; height: 22px; }
.plant-node-name { font-weight: 700; line-height: 1.3; font-size: 15px; }
.plant-node-figs { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--muted); }
.plant-node-figs strong { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 16px; }
.plant-node-flag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 8px; }
.plant-motorbar, .plant-share { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plant-motorbar svg, .plant-share svg { display: block; }
.plant-motorbar-label, .plant-share-text { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Machines in a sector: cards with motor dots ---------- */
.plant-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.plant-mc { --mc-c: var(--viz-green); height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; background: var(--glass-strong); box-shadow: var(--hairline), inset 0 0 0 1.5px color-mix(in srgb, var(--mc-c) 50%, transparent), inset 0 4px 0 var(--mc-c); transition: transform .15s, box-shadow .15s; }
.plant-mc:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-hover), inset 0 0 0 1.5px var(--mc-c), inset 0 4px 0 var(--mc-c); }
.plant-mc.is-stopped { --mc-c: var(--viz-amber); }
.plant-mc.is-standby { --mc-c: var(--viz-blue); }
.plant-mc.is-retired { --mc-c: var(--viz-muted); background: var(--glass-soft); color: var(--muted); }
.plant-mc-tag { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--accent); letter-spacing: .02em; }
.plant-mc-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.plant-mc-dots { display: flex; align-items: center; gap: 4px; min-height: 18px; }
.plant-mc-dots svg { display: block; max-width: 100%; height: auto; }
.plant-mc-dots small { font-size: 12px; color: var(--muted); font-weight: 700; }
.plant-mc-dots.is-none { font-size: 12px; color: var(--muted); }
.plant-mc-kw { font-size: 13px; color: var(--muted); }
.plant-mc-kw strong { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.plant-mc-flag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 8px; }
.plant-mc-flag.is-bad { color: var(--bad); background: var(--bad-bg); }
.plant-dot { fill: var(--vc); stroke: var(--vc); stroke-width: 1.5; }
.plant-dot.is-spare { fill: transparent; }
.plant-dot.is-stopped { fill: color-mix(in srgb, var(--vc) 55%, transparent); }

/* ---------- Expected-equipment checklist as dots ---------- */
.plant-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.plant-check li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.plant-check-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plant-check svg { display: block; max-width: 120px; height: auto; }
.plant-check-dot { fill: transparent; stroke: var(--line-strong); stroke-width: 1.5; }
.plant-check-dot.is-filled { fill: var(--viz-green); stroke: var(--viz-green); }
.plant-check .is-part .plant-check-dot.is-filled { fill: var(--viz-amber); stroke: var(--viz-amber); }
.plant-check-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--muted); }
.plant-check .is-done .plant-check-num { color: var(--ok); }

/* ---------- One machine: the motors drawn driving it ---------- */
.plant-rig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 200px); align-items: stretch; gap: 0; }
.plant-rig-motors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.plant-rig-none { color: var(--muted); padding: 12px; }
.plant-rig-motor { display: grid; grid-template-columns: minmax(110px, 170px) minmax(90px, 170px) minmax(12px, 1fr); align-items: center; gap: 10px 0; padding: 4px 0 4px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.plant-rig-caption { margin-right: 10px; }
/* The drive line from each motor's shaft to the machine block, in the motor's state colour */
.plant-rig-link { order: 3; align-self: center; height: 0; margin-top: -2px; border-top: 3px solid var(--vc, var(--muted)); opacity: .75; }
.plant-rig-motor .is-spare ~ .plant-rig-link, .plant-rig-motor .is-under_repair ~ .plant-rig-link { border-top-style: dashed; }
.plant-rig-motor:hover { background: var(--sunk); color: var(--ink); }
.plant-rig-motor .plant-motor { order: 2; }
.plant-rig-caption { order: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; text-align: right; min-width: 0; }
.plant-rig-state { align-self: flex-end; font-size: 12px; font-weight: 700; color: var(--vt); background: var(--vb); border-radius: 999px; padding: 1px 8px; }
.plant-rig-machine { --mc-c: var(--viz-green); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 10px; border-radius: 16px; background: var(--glass-strong); box-shadow: var(--hairline), inset 0 0 0 2px var(--mc-c); text-align: center; min-height: 120px; }
.plant-rig-machine.is-stopped { --mc-c: var(--viz-amber); }
.plant-rig-machine.is-standby { --mc-c: var(--viz-blue); }
.plant-rig-machine.is-retired { --mc-c: var(--viz-muted); }
.plant-rig-icon { color: var(--mc-c); }
.plant-rig-icon .icon { width: 40px; height: 40px; }
.plant-rig-kind { font-weight: 700; }
.plant-rig-cap { font-size: 13px; color: var(--muted); }
.plant-kpis-sm .kpi { min-height: 0; padding: 14px 16px; }
.plant-kpis-sm .kpi-value { font-size: 28px; }

/* The motor drawing */
.plant-motor { display: block; width: 100%; height: auto; overflow: visible; }
.plant-motor-sm { max-width: 170px; }
.plant-motor-md { max-width: 240px; }
.plant-motor-lg { max-width: 340px; }
.plant-motor-body { fill: color-mix(in srgb, var(--vc) 22%, var(--glass-strong)); stroke: var(--vc); stroke-width: 2.4; }
.plant-motor-fin { stroke: color-mix(in srgb, var(--vc) 60%, transparent); stroke-width: 2; stroke-linecap: round; }
.plant-motor-box, .plant-motor-cap { fill: var(--sunk-2); stroke: var(--ink-2); stroke-width: 1.6; }
.plant-motor-foot { fill: var(--ink-2); opacity: .55; }
.plant-motor-leg { stroke: var(--ink-2); stroke-width: 4; opacity: .55; }
.plant-motor-shaft { stroke: var(--ink-2); stroke-width: 5; stroke-linecap: round; }
.plant-motor-drive { fill: var(--sunk); stroke: var(--ink-2); stroke-width: 2.4; }
.plant-motor-hub { fill: var(--ink-2); }
.plant-motor-belt { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.plant-motor.is-spare .plant-motor-body { fill: transparent; stroke-dasharray: 6 4; }
.plant-motor.is-under_repair .plant-motor-body { stroke-dasharray: 3 3; }

/* ---------- One motor: drawing and nameplate ---------- */
.plant-motor-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: center; }
.plant-motor-drawing { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plant-motor-drawing .plant-rig-state { align-self: center; font-size: 14px; padding: 3px 12px; }
.plant-plate { position: relative; padding: 16px 20px 14px; border-radius: 10px; background: linear-gradient(160deg, #E9ECEE, #C9CFD3 55%, #DDE1E4); color: #1D2327; box-shadow: inset 0 0 0 1px #9BA3A8, inset 0 1px 0 #FFFFFF, var(--shadow); font-family: var(--mono); }
.plant-plate-rivet { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFFFFF, #8A9399 70%); box-shadow: 0 0 0 1px #7C858B; }
.plant-plate-rivet.is-tl { top: 7px; left: 7px; } .plant-plate-rivet.is-tr { top: 7px; right: 7px; }
.plant-plate-rivet.is-bl { bottom: 7px; left: 7px; } .plant-plate-rivet.is-br { bottom: 7px; right: 7px; }
.plant-plate-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid #1D2327; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.plant-plate-head .plant-tag { color: #1D2327; }
.plant-plate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.plant-plate-grid div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; border-bottom: 1px solid rgba(29, 35, 39, .25); }
.plant-plate-grid div:nth-child(odd) { border-right: 1px solid rgba(29, 35, 39, .25); }
.plant-plate-grid dt { font-size: 12px; font-weight: 600; opacity: .75; }
.plant-plate-grid dd { margin: 0; font-weight: 700; font-size: 14px; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .plant-plate-grid { grid-template-columns: minmax(0, 1fr); }
  .plant-plate-grid div:nth-child(odd) { border-right: 0; }
  .plant-plate-grid dd { overflow-wrap: break-word; }
}

/* The current gauge */
.plant-gauge-svg { display: block; overflow: visible; }
.plant-gauge-band { fill: color-mix(in srgb, var(--viz-green) 45%, transparent); }
.plant-gauge-flc { stroke: var(--viz-blue); stroke-width: 3; }
.plant-gauge-ol { stroke: var(--viz-red); stroke-width: 3; stroke-dasharray: 4 3; }
.plant-gauge-now line { stroke: var(--ink); stroke-width: 3; }
.plant-gauge-now circle { fill: var(--accent); stroke: var(--glass-strong); stroke-width: 2; }
.plant-gauge-now.is-out circle { fill: var(--viz-red); }
.plant-gauge-text { font-size: 11px; font-weight: 700; fill: var(--viz-blue); }
.plant-gauge-text.is-ol { fill: var(--bad); }
.plant-gauge-axis { font-size: 11px; fill: var(--muted); }
.plant-gauge-last { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ok); }
.plant-gauge-last.is-out { color: var(--bad); }

/* ---------- Measurement points: last value and the line against the band ---------- */
.plant-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.plant-point { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--glass-strong); box-shadow: var(--hairline), inset 0 0 0 1.5px color-mix(in srgb, var(--viz-green) 40%, transparent); min-width: 0; }
.plant-point.is-out { box-shadow: var(--hairline), inset 0 0 0 1.5px var(--viz-red); }
.plant-point header { display: flex; flex-direction: column; gap: 1px; }
.plant-point-name { font-weight: 600; font-size: 14px; }
.plant-point-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.plant-point-now strong { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plant-point-now small { color: var(--muted); font-weight: 600; }
.plant-point-chart { min-width: 0; }

/* Panels and tables */
.plant-row-retired td { color: var(--muted); background: var(--sunk); }
.plant-checklist td.actions { vertical-align: middle; }
.plant-fact-value { text-align: right; font-variant-numeric: tabular-nums; }
.plant-notes { white-space: normal; font-size: 14px; line-height: 1.55; padding: 10px 12px; border-radius: 8px; background: var(--sunk); }

/* Motor page, after the approved sample */
.plant-motor-head { display: flex; flex-direction: column; gap: 4px; }
.plant-motor-head h1 { font-size: 24px; }
.plant-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .plant-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plant-stat { background: var(--glass-strong); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--hairline); display: flex; flex-direction: column; gap: 3px; }
.plant-stat-warn { box-shadow: var(--hairline), inset 0 0 0 1.5px var(--viz-amber); }
.plant-stat-warn .plant-stat-sub { color: var(--warn); font-weight: 600; }
.plant-stat-label { font-size: 12px; color: var(--muted); }
.plant-stat-value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plant-stat-sub { font-size: 12px; line-height: 1.35; color: var(--muted); }
.plant-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.plant-action { min-height: 64px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--glass-strong); color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.25; padding: 6px 8px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.plant-action:hover { border-color: var(--ink); color: var(--ink); }
.plant-action-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.plant-action-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #FFFFFF; }
.plant-action-danger { border-color: var(--bad); color: var(--bad); }
.plant-action-danger:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }

/* QR, barcode and the label sheet (labels are always black on white for the readers) */
.plant-qr-panel { align-items: flex-start; }
.plant-qr-panel .qr-label { align-self: stretch; max-width: 260px; }
.plant-label-name { text-align: center; font-weight: 600; }
.plant-barcode { display: block; width: 100%; max-width: 230px; height: auto; }
.plant-label-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plant-label-kind { align-self: stretch; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #FFFFFF; background: #1D2327; border-radius: 6px; padding: 2px 6px; }
.plant-label-motor .plant-label-kind { background: #2F6FD0; }
.plant-label-point .plant-label-kind { background: #8F6A14; }

/* History */
.plant-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plant-history li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sunk); font-size: 14px; }

/* Forms */
.plant-fieldset { margin: 0; min-width: 0; }
/* A floated legend is laid out inside the panel like a heading instead of on its border. */
.plant-fieldset > legend { float: left; width: 100%; padding: 0; font-weight: 700; font-size: 17px; color: var(--ink); }

/* Unknown tag */
.plant-missing { max-width: 620px; }

/* Phones */
@media (max-width: 560px) {
  .plant-history li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .plant-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plant-line:not(.plant-line-service) .plant-node:not(:last-child)::after { display: none; }
  .plant-node > a { padding: 10px; }
  .plant-node-name { font-size: 14px; }
  .plant-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plant-rig { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .plant-rig-motor { grid-template-columns: minmax(0, 1fr) 120px; }
  .plant-rig-link { display: none; }
  .plant-rig-machine { min-height: 0; flex-direction: row; flex-wrap: wrap; }
  .plant-check { grid-template-columns: minmax(0, 1fr); }
  .plant-points { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .plant-qr-panel .qr-label { border: 1px solid #999; }
  .qr-sheet { grid-template-columns: repeat(3, 1fr); gap: 6mm; }
  .qr-label { padding: 4mm; box-shadow: none; border: 1px solid #999; }
  .plant-rig-link { border-top-color: #555; }
  .plant-node > a, .plant-mc, .plant-point, .plant-rig-machine { box-shadow: inset 0 0 0 1px #999; background: #FFFFFF; }
  .plant-line:not(.plant-line-service) .plant-node:not(:last-child)::after { background: #555; }
}

/* "Running again" button inside the stopped-machine banner */
.notice:has(.plant-stop-end) { flex-wrap: wrap; align-items: center; }
.plant-stop-end { margin: 0 0 0 auto; }