/* ============================================================
   ART Mechatronics · premium live powder-line digital twin
   ============================================================ */

body[data-page="system"] {
  background: #07101c;
}

/* ---------- cinematic introduction ---------- */
.sys-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #dce8f7;
  padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(4rem, 7vw, 7rem);
  background:
    linear-gradient(90deg, rgba(6, 16, 29, .96), rgba(8, 26, 49, .88)),
    url("../assets/machines/v2/masters/system/wide-1600.webp") center 38% / cover no-repeat;
}
.sys-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
  background-image:
    linear-gradient(rgba(116, 150, 190, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 150, 190, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 88%);
}
.sys-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 34%;
  background: linear-gradient(transparent, #07101c);
}
.sys-hero__glow {
  position: absolute;
  width: 42rem;
  height: 42rem;
  right: -13rem;
  top: -17rem;
  z-index: -1;
  border-radius: 50%;
  background: rgba(46, 134, 230, .18);
  filter: blur(90px);
  pointer-events: none;
}
.sys-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.sys-hero__copy {
  max-width: 740px;
}
.sys-hero h1 {
  max-width: 13ch;
  color: #fff;
  font-size: clamp(3rem, 5.7vw, 6.25rem);
  line-height: .96;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.sys-hero .lead {
  max-width: 60ch;
  color: #b6c8dc;
  font-size: clamp(1.05rem, 1rem + .38vw, 1.34rem);
}
.eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #84bfff;
}
.eyebrow--live i,
.live-state i,
.telemetry__live i,
.control-state i {
  width: .48rem;
  height: .48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #34d27b;
  box-shadow: 0 0 0 5px rgba(52, 210, 123, .1), 0 0 18px rgba(52, 210, 123, .72);
  animation: system-pulse 2.2s ease-in-out infinite;
}
@keyframes system-pulse {
  50% { opacity: .55; box-shadow: 0 0 0 8px rgba(52, 210, 123, 0), 0 0 10px rgba(52, 210, 123, .4); }
}
.sys-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.sys-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.8rem;
}
.sys-badges .chip {
  color: #bed4ed;
  background: rgba(148, 179, 216, .08);
  border-color: rgba(148, 179, 216, .18);
  letter-spacing: .06em;
}
.sys-disclosure {
  max-width: 62ch;
  margin: 1rem 0 0;
  color: #748ba6;
  font-size: .78rem;
}

/* ---------- hero process console ---------- */
.hero-console {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(18, 35, 56, .94), rgba(7, 17, 30, .96));
  border: 1px solid rgba(137, 174, 215, .2);
  border-radius: 16px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.hero-console::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 48%, rgba(123, 183, 245, .045) 50%, transparent 53%);
}
.hero-console__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1rem;
  border-bottom: 1px solid rgba(137, 174, 215, .14);
}
.hero-console__head > div {
  display: grid;
}
.console-kicker {
  color: #6e8eaf;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
}
.hero-console__head strong {
  color: #edf6ff;
  font-size: .92rem;
}
.live-state {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #9fcdb4;
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-process {
  display: grid;
  padding: .7rem 1.35rem;
}
.hero-process span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: .9rem;
  padding: .35rem 0 .35rem 1.9rem;
  color: #7188a3;
  font-size: .82rem;
  font-weight: 650;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.hero-process span::before {
  content: "";
  position: absolute;
  left: .42rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #263a51;
}
.hero-process span::after {
  content: "";
  position: absolute;
  left: .19rem;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #30465f;
  border: 2px solid #13243a;
  transition: background .35s, box-shadow .35s, transform .35s;
}
.hero-process span b {
  width: 1.5rem;
  color: #536d88;
  font-family: var(--font-mono);
  font-size: .62rem;
}
.hero-process span.is-active {
  color: #fff;
  transform: translateX(.2rem);
}
.hero-process span.is-active::after {
  background: #2e86e6;
  box-shadow: 0 0 18px rgba(46, 134, 230, .85);
  transform: scale(1.25);
}
.hero-process span.is-active b {
  color: #74b6fb;
}
.hero-process span.is-complete {
  color: #a2b8ce;
}
.hero-process span.is-complete::after {
  background: #34d27b;
}
.hero-console__foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(137, 174, 215, .14);
  background: rgba(5, 13, 23, .55);
}
.hero-console__foot > div {
  display: grid;
  gap: .15rem;
  padding: .9rem 1rem;
  border-right: 1px solid rgba(137, 174, 215, .1);
}
.hero-console__foot > div:last-child {
  border-right: 0;
}
.hero-console__foot span {
  color: #607b98;
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hero-console__foot strong {
  color: #c8dbef;
  font-family: var(--font-mono);
  font-size: .68rem;
}

/* ---------- integrated control room ---------- */
.system-console-section {
  position: relative;
  padding: 0 0 clamp(5rem, 8vw, 8rem);
  color: #c9d8e9;
  background:
    radial-gradient(80% 65% at 50% 0, rgba(26, 67, 110, .2), transparent 70%),
    #07101c;
}
.system-console-section .wrap {
  width: min(100% - 2.4rem, 1560px);
}
.console-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 1.3rem;
  background: linear-gradient(180deg, #132339, #0e1b2c);
  border: 1px solid #243a53;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .34);
}
.console-masthead h2 {
  margin: .2rem 0 0;
  color: #eef6ff;
  font-family: var(--font);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.35rem);
  letter-spacing: -.01em;
}
.console-masthead__status {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: #7f98b5;
  font-family: var(--font-mono);
  font-size: .69rem;
}
.console-masthead__status > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .62rem;
  border: 1px solid #263d56;
  background: #0a1625;
}
.console-masthead__status b {
  color: #c7d9ea;
}
.status-light {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
}
.status-light--run {
  background: #34d27b;
  box-shadow: 0 0 10px rgba(52, 210, 123, .7);
}
.sys-stage {
  display: grid;
  grid-template-columns: minmax(0, 2.55fr) minmax(310px, .75fr);
  align-items: start;
  gap: 0;
  overflow: hidden;
  background: #0a1524;
  border: 1px solid #243a53;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .42);
}
.sys-main {
  min-width: 0;
  padding: 1rem;
  border-right: 1px solid #243a53;
}

/* ---------- controls ---------- */
.sys-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .9rem 0 .75rem;
}
.sys-controls .btn {
  min-height: 44px;
  padding: .72rem 1rem;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sys-controls .btn--primary {
  background: #1f72ca;
}
.sys-controls .btn--ghost {
  color: #a8bdd3;
  background: #0c1929;
  border-color: #2a4059;
}
.sys-controls .btn--ghost:hover {
  color: #fff;
  border-color: #458cd6;
  background: #112840;
}
.control-state {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  color: #7792ad;
  font-family: var(--font-mono);
  font-size: .67rem;
}
.sys-progress {
  height: 3px;
  overflow: hidden;
  background: #17283a;
}
.sys-progress > i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #1e6fc3, #5ea7ee);
  box-shadow: 0 0 14px rgba(46, 134, 230, .7);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ---------- stage selector ---------- */
.seq {
  display: grid;
  grid-template-columns: repeat(8, minmax(86px, 1fr));
  gap: 1px;
  margin-top: .8rem;
  overflow-x: auto;
  background: #23384f;
  border: 1px solid #23384f;
  scrollbar-width: thin;
}
.seq button {
  position: relative;
  display: grid;
  min-width: 86px;
  min-height: 74px;
  place-items: start;
  align-content: center;
  gap: .28rem;
  padding: .7rem;
  color: #6f88a2;
  background: #0d1a2a;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: background .25s, color .25s;
}
.seq button::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: transparent;
}
.seq button:hover {
  color: #d7e6f5;
  background: #12243a;
}
.seq button .n {
  color: #507095;
  font-family: var(--font-mono);
  font-size: .59rem;
  font-weight: 700;
}
.seq button .t {
  color: inherit;
  font-size: .67rem;
  font-weight: 700;
  line-height: 1.22;
}
.seq button[aria-current="true"] {
  color: #f1f7ff;
  background: #143052;
}
.seq button[aria-current="true"]::after {
  background: #2e86e6;
  box-shadow: 0 0 10px rgba(46, 134, 230, .8);
}
.seq button[aria-current="true"] .n {
  color: #73b6fb;
}

/* ---------- event stream ---------- */
.operations-feed {
  display: grid;
  grid-template-columns: 140px 1fr;
  margin-top: .8rem;
  min-height: 84px;
  overflow: hidden;
  border: 1px solid #23384f;
  background: #091522;
}
.operations-feed__label {
  display: grid;
  align-content: center;
  gap: .18rem;
  padding: 1rem;
  border-right: 1px solid #23384f;
}
.operations-feed__label span {
  color: #55718f;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
}
.operations-feed__label b {
  color: #d6e4f1;
  font-size: .76rem;
}
.operations-feed ol {
  display: grid;
  align-content: center;
  gap: .2rem;
  margin: 0;
  padding: .65rem 1rem;
  list-style: none;
}
.operations-feed li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: .65rem;
  color: #859db7;
  font-family: var(--font-mono);
  font-size: .63rem;
}
.operations-feed time {
  color: #4e6a87;
}

/* ---------- operator panel ---------- */
.sys-panel {
  position: sticky;
  top: 90px;
  overflow: hidden;
  color: #bdcde0;
  background: linear-gradient(180deg, #0e1c2d, #091522);
}
.sys-panel__head {
  padding: 1.15rem 1.2rem;
  background: linear-gradient(135deg, #133964, #102944);
  border-bottom: 1px solid #2b4867;
}
.sys-panel__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sys-panel__step {
  color: #80b6ef;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.panel-mode {
  padding: .22rem .4rem;
  color: #a5d6ba;
  background: rgba(52, 210, 123, .08);
  border: 1px solid rgba(52, 210, 123, .22);
  font-family: var(--font-mono);
  font-size: .58rem;
}
.sys-panel__title {
  margin: .3rem 0 0;
  color: #fff;
  font-family: var(--font);
  font-size: 1.38rem;
  letter-spacing: -.02em;
}
.sys-panel__body {
  padding: 1rem 1.1rem 1.2rem;
}
.sys-panel__note {
  min-height: 3.2em;
  color: #9bb0c6;
  font-size: .86rem;
  line-height: 1.55;
}
.sys-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.readout {
  min-width: 0;
  padding: .7rem;
  background: #0a1726;
  border: 1px solid #22374d;
}
.readout .k {
  overflow: hidden;
  color: #55718f;
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .065em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.readout .v {
  margin-top: .1rem;
  color: #eff7ff;
  font-family: var(--font-mono);
  font-size: 1.06rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.readout .v small {
  color: #69839e;
  font-size: .58rem;
}
.readout .v--status {
  color: #5edd94;
  font-size: .74rem;
  letter-spacing: .05em;
}
.readout .v--signal {
  overflow: hidden;
  color: #b9d5ef;
  font-size: .69rem;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- representative trend ---------- */
.telemetry {
  margin-top: .75rem;
  padding: .78rem;
  background: #07131f;
  border: 1px solid #22374d;
}
.telemetry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}
.telemetry__head > div {
  display: grid;
}
.telemetry__head span {
  color: #4e6c8a;
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .08em;
}
.telemetry__head strong {
  color: #cddcea;
  font-size: .76rem;
}
.telemetry__live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.telemetry__live i {
  width: .35rem;
  height: .35rem;
}
#telemetryChart {
  width: 100%;
  height: 92px;
  margin-top: .45rem;
}
.telemetry__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  color: #5e7791;
  font-size: .55rem;
}
.telemetry__legend span {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}
.telemetry__legend i {
  width: .65rem;
  height: 2px;
}
.line-blue { background: #4b9cf1; }
.line-green { background: #45cf82; }
.line-amber { background: #d9a441; }
.system-health {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: .75rem;
  border: 1px solid #22374d;
}
.system-health > div {
  display: grid;
  gap: .1rem;
  min-width: 0;
  padding: .55rem .5rem;
  border-right: 1px solid #22374d;
}
.system-health > div:last-child {
  border-right: 0;
}
.system-health span {
  overflow: hidden;
  color: #506b87;
  font-size: .52rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.system-health b {
  overflow: hidden;
  color: #a8c0d8;
  font-family: var(--font-mono);
  font-size: .57rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sys-panel__link {
  margin-top: .8rem;
}
.sys-panel__link .btn {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  color: #a9c7e5;
  background: #0d1d2f;
  border-color: #28445f;
  font-size: .72rem;
  white-space: normal;
}
.panel-disclosure {
  margin: .65rem 0 0;
  color: #4f6983;
  font-size: .6rem;
  line-height: 1.45;
}

/* ---------- process explanation ---------- */
.process-proof {
  color: var(--ink);
  background:
    linear-gradient(180deg, #eef3f8 0, #fff 32%),
    #fff;
}
.process-proof__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.process-proof__intro h2 {
  max-width: 18ch;
}
.process-assurance {
  display: grid;
  border-top: 1px solid var(--line);
}
.process-assurance span {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0 .8rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--line);
}
.process-assurance i {
  grid-row: 1 / 3;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-style: normal;
}
.process-assurance b {
  color: var(--ink);
  font-size: .88rem;
}
.process-assurance small {
  color: var(--steel);
}
.steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding: 1px;
  list-style: none;
  counter-reset: process-step;
  background: var(--line);
}
.steps-list li {
  position: relative;
  min-height: 150px;
  padding: 3.1rem 1.2rem 1.2rem;
  color: var(--slate);
  background: #fff;
  counter-increment: process-step;
}
.steps-list li::before {
  content: counter(process-step, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 1.2rem;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.process-proof__result {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.outcomes .chip {
  border-radius: 5px;
}
.process-proof__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .7rem;
}

/* ---------- full screen mode ---------- */
.sys-main:fullscreen {
  overflow: auto;
  padding: 1rem;
  background: #07101c;
}
.sys-main:fullscreen .scene-stage {
  max-height: calc(100vh - 160px);
}
.sys-main:fullscreen .scene-stage svg.scene {
  max-height: calc(100vh - 160px);
  margin-inline: auto;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .sys-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .75fr); }
  .sys-stage { grid-template-columns: minmax(0, 1.9fr) minmax(290px, .8fr); }
  .seq { grid-template-columns: repeat(8, 90px); }
  .steps-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .sys-hero__grid { grid-template-columns: 1fr; }
  .sys-hero h1 { max-width: 15ch; }
  .hero-console { max-width: 680px; }
  .sys-stage { grid-template-columns: minmax(0, 1fr); }
  .sys-main { border-right: 0; border-bottom: 1px solid #243a53; }
  .sys-panel { position: static; }
  .process-proof__intro { grid-template-columns: 1fr; }
  .process-assurance { max-width: 680px; }
}
@media (max-width: 720px) {
  .sys-hero { padding-top: 3.8rem; }
  .sys-hero h1 { font-size: clamp(2.75rem, 13vw, 4.4rem); }
  .console-masthead { align-items: flex-start; }
  .console-masthead__status { display: grid; grid-template-columns: 1fr 1fr; }
  .console-masthead__status > span:last-child { grid-column: 1 / -1; }
  .system-console-section .wrap { width: min(100% - 1rem, 1560px); }
  .sys-main { padding: .5rem; }
  .scene-stage { overflow-x: auto; }
  .scene-stage svg.scene { min-width: 820px; }
  .scene-status--right { display: none; }
  .scene-legend { min-width: 780px; }
  .control-state { width: 100%; margin-left: 0; padding: .2rem 0; }
  .operations-feed { grid-template-columns: 105px 1fr; }
  .operations-feed li { grid-template-columns: 64px 1fr; }
  .process-proof__result { align-items: flex-start; flex-direction: column; }
  .process-proof__actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .sys-hero__actions .btn { width: 100%; justify-content: center; }
  .hero-console__head { align-items: flex-start; flex-direction: column; }
  .hero-console__foot { grid-template-columns: 1fr; }
  .hero-console__foot > div { border-right: 0; border-bottom: 1px solid rgba(137, 174, 215, .1); }
  .hero-console__foot > div:last-child { border-bottom: 0; }
  .console-masthead { flex-direction: column; }
  .sys-controls .btn { flex: 1 1 auto; justify-content: center; }
  .full-btn { display: none; }
  .operations-feed { grid-template-columns: 1fr; }
  .operations-feed__label { border-right: 0; border-bottom: 1px solid #23384f; }
  .steps-list { grid-template-columns: 1fr; }
  .steps-list li { min-height: 132px; }
  .process-proof__actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow--live i,
  .live-state i,
  .telemetry__live i,
  .control-state i { animation: none; }
}