/* Industry edition v0.2: calm engineering islands. Light industrial tints (steel, teal, olive, sand, amber, petrol, moss),
   each card with a solid accent rail in its own stronger tone and a soft glow of that tone. Dark ink only. */
:root {
  --i-ink: #0c1722; --i-ink2: #1d2c3a;
  --steel: #dbe7f4; --steel-s: #6f93bd; --teal: #d2efea; --teal-s: #3f9c8f; --olive: #e7ecc8; --olive-s: #8a9a2c;
  --sand: #f2e7cb; --sand-s: #b48a2c; --amber: #f9e6ae; --amber-s: #d19a0c; --petrol: #d3e7ec; --petrol-s: #2f7f92; --moss: #dbeed5; --moss-s: #4f9a45;
}
body { background: #0b1622; font-size: 17px; }
#loader { background: #0b1622; }
.loader-pill { background: var(--steel); border-radius: 6px; }
.hud-pill { border-radius: 6px; }
.hud-brand { display: inline-flex; align-items: center; gap: 8px; background: var(--sand); }
.hud-brand img { display: block; }
.hud-chapter { background: var(--teal); }
.hud-sound { background: var(--steel); }
.hud-sound[aria-pressed="true"] { background: var(--amber); }
.proto-note { background: var(--sand); border-radius: 6px; }

.card { border-radius: 10px; padding: 28px 30px 24px 34px; position: relative; overflow: hidden; width: min(500px, 100%); }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--rail); }
.card.wide { width: min(860px, 100%); }
.card p { color: var(--i-ink2); }
.card h1, .card h2 { font-family: var(--font); font-style: normal; font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; color: var(--i-ink); }
.card h1 { font-size: clamp(38px, 4.6vw, 56px); }
.card h2 { font-size: clamp(30px, 3.4vw, 42px); }
.kicker { letter-spacing: 0.08em; color: var(--rail-ink) !important; }
.lead { font-size: 18px; }
.hint { color: var(--i-ink2); font-weight: 600; }
.c1 { background: var(--steel); --rail: var(--steel-s); --rail-ink: #2b4f78; box-shadow: 0 0 0 1px rgba(111,147,189,.6), 0 20px 70px rgba(111,147,189,.45); }
.c2 { background: var(--petrol); --rail: var(--petrol-s); --rail-ink: #1e5a68; box-shadow: 0 0 0 1px rgba(47,127,146,.6), 0 20px 70px rgba(47,127,146,.5); }
.c3 { background: var(--sand); --rail: var(--sand-s); --rail-ink: #6e5212; box-shadow: 0 0 0 1px rgba(180,138,44,.6), 0 20px 70px rgba(180,138,44,.45); }
.c4 { background: var(--moss); --rail: var(--moss-s); --rail-ink: #2f6a27; box-shadow: 0 0 0 1px rgba(79,154,69,.6), 0 20px 70px rgba(79,154,69,.45); }
.c5 { background: var(--teal); --rail: var(--teal-s); --rail-ink: #1f6a60; box-shadow: 0 0 0 1px rgba(63,156,143,.6), 0 20px 70px rgba(63,156,143,.45); }
.c6 { background: var(--olive); --rail: var(--olive-s); --rail-ink: #5a6614; box-shadow: 0 0 0 1px rgba(138,154,44,.6), 0 20px 70px rgba(138,154,44,.45); }
.c7 { background: var(--amber); --rail: var(--amber-s); --rail-ink: #7a5800; box-shadow: 0 0 0 1px rgba(209,154,12,.6), 0 20px 70px rgba(209,154,12,.45); width: min(560px, 100%); }

.btn { border-radius: 6px; border: 2px solid var(--i-ink); }
.btn.big { font-size: 17px; padding: 13px 22px; margin: 4px 0 14px; }
.b-amber { background: var(--amber); } .b-steel { background: var(--steel); } .b-teal { background: var(--teal); }
.c7 .b-amber { background: #fff; }
.btn[aria-pressed="true"] { background: var(--i-ink); color: #fff; box-shadow: none; }

/* spec plate */
.plate { display: grid; gap: 0; margin: 6px 0 4px; background: rgba(255,255,255,0.7); border: 1px solid rgba(12,23,34,0.25); border-radius: 6px; }
.plate div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 7px 12px; border-bottom: 1px solid rgba(12,23,34,0.15); }
.plate div:last-child { border-bottom: 0; }
.plate dt { font: 700 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rail-ink); }
.plate dd { margin: 0; font-weight: 600; color: var(--i-ink); }
.status dd { font: 700 14px/1.6 var(--mono); }
.status dd.ok::before { content: "● "; color: #1d8a3e; }
.status dd.wait::before { content: "● "; color: #b45309; }
.status { margin-top: 12px; }

.spec { list-style: none; padding: 0; margin: 4px 0 0; counter-reset: s; }
.spec li { counter-increment: s; display: grid; grid-template-columns: 2.4em 1fr; column-gap: 8px; padding: 9px 0; border-top: 1px solid rgba(12,23,34,0.18); }
.spec li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 700 13px/1.5 var(--mono); color: var(--rail-ink); }
.spec b { color: var(--i-ink); } .spec span { font-size: 15px; color: var(--i-ink2); }

/* agents on duty: one live task + five thumbnail tabs */
.c3 { width: min(540px, 100%); }
.duty-now { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: start; background: #fff; border-radius: 8px; padding: 8px; border-left: 6px solid var(--tone); margin: 6px 0 10px; min-height: 112px; }
.duty-now img { width: 170px; height: auto; aspect-ratio: 553 / 310; object-fit: cover; border-radius: 4px; display: block; background: #1a0d05; }
.duty-now b { display: block; font-size: 18px; color: var(--i-ink); }
.duty-now small { display: inline-block; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; background: var(--tint); color: var(--i-ink); padding: 1px 7px; border-radius: 4px; margin: 2px 0 6px; }
.duty-now .task { display: block; font-size: 15px; line-height: 1.45; color: var(--i-ink); font-weight: 500; }
.agents { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 2px; }
.agent { background: var(--tint); border: 2px solid transparent; border-radius: 6px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: 700 12px var(--font); color: var(--i-ink); }
.agent .frame { display: block; aspect-ratio: 553 / 310; overflow: hidden; border-radius: 3px; background: #1a0d05; }
.agent img { display: block; width: 100%; height: 100%; object-fit: cover; }
.agent[aria-pressed="true"] { border-color: var(--i-ink); background: #fff; box-shadow: 0 0 0 3px var(--tone); }
/* commissioning checklist */
.checks { list-style: none; padding: 0; margin: 6px 0 12px; }
.checks li { position: relative; padding: 7px 10px 7px 38px; margin-bottom: 5px; background: rgba(255,255,255,0.65); border-radius: 6px; font-weight: 600; color: var(--i-ink); transition: background 0.4s; }
.checks li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -9px; border: 2px solid var(--i-ink); border-radius: 4px; background: #fff; }
.checks li.done { background: #fff; }
.checks li.done::before { background: #1d8a3e; border-color: #1d8a3e; }
.checks li.done::after { content: ""; position: absolute; left: 15px; top: 50%; width: 5px; height: 9px; margin-top: -7px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* service life */
.range-label { display: block; font-weight: 700; font-size: 14.5px; margin-top: 6px; }
.range { accent-color: #5a6614; }
.phase-text { background: #fff; border-radius: 6px; padding: 10px 14px; margin-top: 10px !important; font-weight: 600; color: var(--i-ink) !important; min-height: 5.2em; }
.phase-text b { display: block; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #5a6614; }

details { background: #fff; border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; border: 1px solid rgba(12,23,34,0.2); }
summary { font-weight: 700; cursor: pointer; color: var(--i-ink); }
details p { margin: 6px 0 2px !important; font-size: 15px; }

.promise { background: #fff; border-radius: 8px; padding: 14px 16px 10px; margin: 12px 0 4px; border-top: 4px solid #2f7f92; }
.promise-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 2px !important; color: #1e5a68 !important; }
.promise h3 { margin: 0 0 6px; font-size: 20px; color: var(--i-ink); }
.promise ul { margin: 0 0 8px; padding-left: 18px; font-size: 14.5px; color: var(--i-ink); }
.promise li { margin-bottom: 4px; }
.promise-note { font-size: 13px; }

.alert { border-radius: 8px; background: var(--steel); border-left: 8px solid var(--steel-s); }
.alert .kicker { color: #2b4f78; }
.alert .tag { background: var(--amber); border-radius: 4px; }

.mlabel { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; padding: 3px 8px; border-radius: 4px; font: 700 12px var(--mono); color: var(--i-ink); background: var(--steel); white-space: nowrap; opacity: 0; transition: opacity 0.4s; }
.mlabel.show { opacity: 1; }

@media (max-width: 760px) {
  .hud-brand { display: none; }
  .hud-chapter, .hud-sound { white-space: nowrap; }
  .card { padding: 20px 18px 18px 24px; }
  .card h1 { font-size: 36px; } .card h2 { font-size: 29px; }
  .duty-now { grid-template-columns: 110px 1fr; } .duty-now img { width: 110px; }
  .agent .nm { font-size: 10.5px; }
  .plate div { grid-template-columns: 8em 1fr; }
  .mlabel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .checks li { transition: none; } }

/* v0.2: engineering rule under headlines */
.card h1::after, .card h2::after { content: ""; display: block; height: 3px; width: 0; margin-top: 12px; background: var(--rail); transition: width 1.6s cubic-bezier(.2,.7,.2,1); }
.card h1.in::after, .card h2.in::after { width: 96px; }
@media (prefers-reduced-motion: reduce) { .card h1::after, .card h2::after { width: 96px; transition: none; } }