/* Floor view: Lines hub + line layout (machine data). Light theme matching Home.
   Scoped to these two screens so other hubs stay as they are. */

html:has(#screen-lines.active),
html:has(#screen-machinedata.active) { background: #faf9f6; }

body:not(.signin):has(#screen-lines.active),
body:not(.signin):has(#screen-machinedata.active) {
  background: #faf9f6;
  color: #111;
}

#screen-lines,
#screen-machinedata {
  font-family: "FT Signin", system-ui, sans-serif;
  font-size: 16px;
  color: #111;
  background: transparent;
}

#screen-lines h2,
#screen-machinedata h2,
#screen-machinedata h3,
#screen-lines .hub-greet h2,
#screen-machinedata .md-head h2,
#screen-machinedata .md-dhead h2 {
  color: #111;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

#screen-lines .hub-greet h2,
#screen-machinedata .md-head h2 { font-size: 28px; margin: 0 0 4px; }

#screen-lines .hub-greet p,
#screen-machinedata .md-head p,
#screen-lines .muted,
#screen-machinedata .muted,
#screen-machinedata .md-help,
#screen-machinedata .md-subline,
#screen-machinedata .md-lane-live,
#screen-machinedata .md-line-st,
#screen-machinedata .md-tile-code,
#screen-machinedata .md-legend-note {
  color: #5c564c;
  font-size: 16px;
}

#screen-lines .hub-section-title {
  color: #5c564c;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
}

#screen-lines :focus-visible,
#screen-machinedata :focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Skeleton pulse is decorative. */
#screen-lines .ux-skel i,
#screen-machinedata .ux-skel i { animation: none; background: #f3f1ec; }

/* ----- Lines hub ----- */
#screen-lines .hub-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#screen-lines .hub-card,
html.ftf-ux_polish #screen-lines .hub-card,
html.ftf-ux_polish #screen-lines .hub-card.accent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 16px;
  background: #fff;
  background-image: none;
  border: 1px solid #e4e1da;
  border-radius: 12px;
  color: #111;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
  text-align: left;
  transition: transform 100ms ease-out;
}
#screen-lines .hub-card .hub-ico { margin: 0; flex: none; font-size: 20px; }

#screen-lines .hub-card strong { color: #111; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
#screen-lines .hub-card span { color: #5c564c; font-size: 14px; }

/* The one accent on this screen: Line layout. */
#screen-lines #lines-layout,
html.ftf-ux_polish #screen-lines #lines-layout.hub-card.accent {
  background: #0f766e;
  background-image: none;
  border-color: #0f766e;
  color: #fff;
}
#screen-lines #lines-layout strong,
#screen-lines #lines-layout span { color: #fff; }
#screen-lines #lines-layout:hover { background: #0c655e; border-color: #0c655e; }

#screen-lines .hub-card:hover { transform: none; border-color: #e4e1da; }
#screen-lines #lines-layout:hover { border-color: #0c655e; }
#screen-lines .hub-card:active { transform: scale(0.98); }

#screen-lines .sn-hub-badge {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

@media (min-width: 900px) {
  #screen-lines.active { max-width: 960px; }
  #screen-lines .hub-card,
  html.ftf-ux_polish #screen-lines .hub-card { min-height: 48px; }
  #screen-lines .hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  #screen-lines #lines-layout { grid-column: 1 / -1; min-height: 48px; }
}

/* ----- Line layout / SCADA floor ----- */
#screen-machinedata .md-wrap { max-width: 1100px; }
#screen-machinedata .md-panel,
#screen-machinedata .md-lane,
#screen-machinedata .md-kpi,
#screen-machinedata .md-banner,
#screen-machinedata .md-tile {
  background: #fff;
  background-image: none;
  border: 1px solid #e4e1da;
  color: #111;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
#screen-machinedata .md-lane.loose { border-style: dashed; }
#screen-machinedata .md-lane-h {
  color: #111;
  background: transparent;
  min-height: 52px;
  width: 100%;
  transition: transform 100ms ease-out;
}
#screen-machinedata .md-lane-h:hover { transform: none; }
#screen-machinedata .md-lane-h:active { transform: scale(0.98); }
#screen-machinedata .md-lane-caret { border-color: #5c564c; }

/* Edge fades are gradients. Lane swipe does not need them. */
#screen-machinedata .md-scroller::before,
#screen-machinedata .md-scroller::after,
#screen-machinedata .md-scroller.more-left::before,
#screen-machinedata .md-scroller.more-right::after {
  display: none;
  opacity: 0;
  background: none;
  background-image: none;
}

#screen-machinedata .md-arrow {
  background: #cfcabd;
  background-image: none;
  height: 6px;
  align-self: center;
}
#screen-machinedata .md-arrow::after { border-color: transparent transparent transparent #5c564c; }

#screen-machinedata .md-tile { color: #111; }
#screen-machinedata .md-tile.open,
#screen-machinedata .md-tile.md-lifting { border-color: #111; }
#screen-machinedata .md-tile.md-lifting { box-shadow: 0 8px 16px rgba(17, 17, 17, 0.12); }
#screen-machinedata .md-tile-hit { color: #111; }
#screen-machinedata .md-tile-hit .md-light { box-shadow: 0 0 0 3px #fff; }
#screen-machinedata .md-grip,
#screen-machinedata .md-tile .md-grip { color: #5c564c; }

/* Expand stays a short fade/height change. Drop the scale. */
#screen-machinedata .md-reveal {
  transform: none;
  transition: grid-template-rows 180ms ease, opacity 180ms ease;
}
#screen-machinedata .md-tile.open .md-reveal { transform: none; }

#screen-machinedata .md-light.st-running { background: #22c55e; }
#screen-machinedata .md-light.st-down { background: #ef4444; }
#screen-machinedata .md-light.st-standby { background: #f59e0b; }
#screen-machinedata .md-dot { background: #a1a1aa; }
#screen-machinedata .md-dot.st-running { background: #22c55e; }
#screen-machinedata .md-dot.st-fault,
#screen-machinedata .md-dot.st-down { background: #ef4444; }
#screen-machinedata .md-dot.st-idle { background: #a1a1aa; }

#screen-machinedata .md-line {
  background: #fff;
  border: 1px solid #e4e1da;
  color: #111;
  box-shadow: none;
}
#screen-machinedata .md-line.on {
  border-color: #111;
  color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

#screen-machinedata .md-row input,
#screen-machinedata .md-toolbar select,
#screen-machinedata .md-side select,
#screen-machinedata .md-side input,
#screen-machinedata .md-code {
  background: #fff;
  border: 1px solid #e4e1da;
  color: #111;
}
#screen-machinedata .md-lbl,
#screen-machinedata .md-side .field label,
#screen-machinedata .md-kv span { color: #5c564c; }

#screen-machinedata .btn,
html.ftf-ux_polish #screen-machinedata .btn {
  width: 100%;
  min-height: 52px;
  background: #fff;
  color: #111;
  border: 1px solid #e4e1da;
  border-radius: 12px;
  box-shadow: none;
  filter: none;
  font-weight: 650;
  transition: transform 100ms ease-out, background 100ms ease-out;
}
#screen-machinedata .btn:hover { filter: none; transform: none; background: #fff; }
#screen-machinedata .btn:active { transform: scale(0.98); }
#screen-machinedata .btn-primary,
html.ftf-ux_polish #screen-machinedata .btn.btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
#screen-machinedata .btn-primary:hover { background: #0c655e; border-color: #0c655e; color: #fff; }
#screen-machinedata .btn.on {
  border-color: #111;
  color: #111;
  background: #fff;
}
#screen-machinedata .md-toolbar,
#screen-machinedata .md-tools,
#screen-machinedata .md-row { align-items: stretch; }
#screen-machinedata .md-toolbar .btn,
#screen-machinedata .md-tools .btn,
#screen-machinedata .md-row .btn { flex: 1 1 100%; }

/* SVG editor, still reachable from a #md link. White nodes, near-black labels. */
#screen-machinedata .md-bg { fill: #faf9f6; }
#screen-machinedata .md-griddot { fill: #e4e1da; }
#screen-machinedata .md-n-body { fill: #fff; stroke: #e4e1da; }
#screen-machinedata .md-n-label { fill: #111; }
#screen-machinedata .md-n-st { fill: #5c564c; }
#screen-machinedata .md-n-stripe { fill: #a1a1aa; }
#screen-machinedata .md-node.st-running .md-n-stripe { fill: #22c55e; }
#screen-machinedata .md-node.st-running .md-n-st { fill: #166534; }
#screen-machinedata .md-node.st-down .md-n-stripe,
#screen-machinedata .md-node.st-fault .md-n-stripe { fill: #ef4444; }
#screen-machinedata .md-node.st-down .md-n-body,
#screen-machinedata .md-node.st-fault .md-n-body { stroke: #991b1b; }
#screen-machinedata .md-node.st-down .md-n-st,
#screen-machinedata .md-node.st-fault .md-n-st { fill: #991b1b; }
#screen-machinedata .md-node.st-idle .md-n-stripe { fill: #a1a1aa; }
#screen-machinedata .md-node:focus-visible .md-n-body,
#screen-machinedata .md-node.sel .md-n-body,
#screen-machinedata .md-node.from .md-n-body { stroke: #111; }
#screen-machinedata .md-port { fill: #fff; stroke: #111; }
#screen-machinedata .md-hint,
#screen-machinedata .md-arrowhead { fill: #5c564c; }
#screen-machinedata .md-edge-line,
#screen-machinedata .md-conv-roll { stroke: #5c564c; }
#screen-machinedata .md-conv-base { stroke: #e4e1da; }
#screen-machinedata .md-edge.sel .md-edge-line,
#screen-machinedata .md-edge.sel .md-conv-roll { stroke: #111; }
#screen-machinedata .md-edge.sel .md-conv-base { stroke: #cfcabd; }
#screen-machinedata .md-ghost { stroke: #111; }

#screen-machinedata .md-pill {
  background: #f3f1ec;
  border-color: #e4e1da;
  color: #5c564c;
}
#screen-machinedata .md-pill.st-running { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
#screen-machinedata .md-pill.st-fault,
#screen-machinedata .md-pill.st-down { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
#screen-machinedata .md-pill.st-nodata { color: #5c564c; }
#screen-machinedata .md-legend-note.warn { color: #92400e; }
#screen-machinedata .md-code.on { border-color: #111; color: #111; }
#screen-machinedata .md-banner { color: #111; }
#screen-machinedata .md-banner strong { color: #92400e; }
#screen-machinedata .md-station,
#screen-machinedata .md-hrow,
#screen-machinedata .md-mrow,
#screen-machinedata .md-sub { border-color: #e4e1da; }
#screen-machinedata .md-mrow { color: #111; }

#screen-machinedata .md-seg { border-color: #e4e1da; background: #fff; }
#screen-machinedata .md-seg button { color: #5c564c; background: #fff; }
#screen-machinedata .md-seg button.on { background: #f3f1ec; color: #111; }
#screen-machinedata .md-kpi .l,
#screen-machinedata .md-kpi .s,
#screen-machinedata .md-kpi .n small { color: #5c564c; }
#screen-machinedata .md-kpi .n { color: #111; }
#screen-machinedata .md-kpi.warn { border-color: #fcd34d; }
#screen-machinedata .md-kpi.warn .s { color: #92400e; }
#screen-machinedata .md-table th { color: #5c564c; border-bottom-color: #e4e1da; }
#screen-machinedata .md-table td,
#screen-machinedata .md-dtrow { border-bottom-color: #e4e1da; color: #111; }
#screen-machinedata .md-dt-cat { border-color: #e4e1da; color: #111; background: #fff; }
#screen-machinedata .md-dt-cat.c-faulted { border-color: #fecaca; color: #991b1b; background: #fee2e2; }
#screen-machinedata .md-dt-cat.c-starved,
#screen-machinedata .md-dt-cat.c-blocked,
#screen-machinedata .md-dt-cat.c-offline { border-color: #fde68a; color: #92400e; background: #fef3c7; }
#screen-machinedata .md-tag { border-color: #e4e1da; color: #111; }

#screen-machinedata .md-ch-t,
#screen-machinedata .md-ch-reft { fill: #111; }
#screen-machinedata .md-ch-ax,
#screen-machinedata .md-ch-empty { fill: #5c564c; }
#screen-machinedata .md-ch-grid { stroke: #e4e1da; }
#screen-machinedata .md-ch-line,
#screen-machinedata .md-ch-dot,
#screen-machinedata .md-ch-ref { stroke: #111; }
#screen-machinedata .md-ch-dot { fill: #111; }
#screen-machinedata .md-ch-area { fill: #f3f1ec; }
#screen-machinedata .md-ch-bar { fill: #5c564c; }

@media (max-width: 720px) {
  #screen-machinedata .md-arrow {
    width: 6px;
    height: 28px;
    flex: 0 0 28px;
    margin: 0 auto;
    background: #cfcabd;
    background-image: none;
  }
  #screen-machinedata .md-arrow::after {
    border-color: #5c564c transparent transparent transparent;
  }
}

@media (min-width: 900px) {
  #screen-machinedata.active { max-width: 1100px; }
  #screen-machinedata .btn,
  html.ftf-ux_polish #screen-machinedata .btn,
  #screen-machinedata .md-lane-h { min-height: 46px; }
  #screen-machinedata .md-stage { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-lines .hub-card,
  #screen-machinedata .btn,
  #screen-machinedata .md-lane-h,
  #screen-machinedata .md-reveal,
  #screen-machinedata .md-lane-caret,
  #screen-machinedata .md-lane-body { transition: none; }
}