/* ==========================================================================
   NITARTI — Simulations
   Self-contained, on-brand interactive product demos.
   Uses the global design tokens from styles.css (navy / teal / ink).
   Every widget mounts inside  <div class="sim" data-sim="…">.
   ========================================================================== */

.sim {
  position: relative;
  direction: rtl;
  font-family: var(--font-sans);
  color: var(--ink-700);
}
.sim *, .sim *::before, .sim *::after { box-sizing: border-box; }

/* shared "app window" chrome ------------------------------------------------ */
.sim-window {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.sim-window--dark {
  background: var(--navy-800);
  border-color: rgba(255,255,255,.08);
  color: #e8eef6;
}
.sim-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.sim-window--dark .sim-bar { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.08); }
.sim-dots { display: flex; gap: 6px; }
.sim-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); display: block; }
.sim-dots i:nth-child(1){ background:#ef6a5e } .sim-dots i:nth-child(2){ background:#f4bf4f } .sim-dots i:nth-child(3){ background:#5fc97a }
.sim-url {
  flex: 1; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-400);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; max-width: 320px;
}
.sim-window--dark .sim-url { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: #9fb2c8; }
.sim-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; color: var(--teal-600);
}
.sim-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 0 rgba(0,171,85,.5); animation: simPulse 1.8s infinite; }
@keyframes simPulse { 0%{box-shadow:0 0 0 0 rgba(0,171,85,.5)} 70%{box-shadow:0 0 0 7px rgba(0,171,85,0)} 100%{box-shadow:0 0 0 0 rgba(0,171,85,0)} }

.sim-caption {
  margin-top: 12px; font-size: 13px; color: var(--ink-400);
  display: flex; align-items: center; gap: 8px;
}
.sim-caption svg { width: 15px; height: 15px; flex: none; opacity: .7; }

/* ===== 2. IoT NETWORK (iot) =============================================== */
.sim-net { padding: 0; }
.sim-net__stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background:
   radial-gradient(120% 120% at 50% 0%, var(--navy-700), var(--navy-900) 70%); }
.sim-net svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sim-net__legend {
  display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 18px;
  font-size: 12px; color: var(--ink-500); border-top: 1px solid var(--line); background: var(--white);
}
.sim-net__legend span { display: inline-flex; align-items: center; gap: 7px; }
.sim-net__legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* ===== 5. SERVICE LIFECYCLE STEPPER (service) ============================= */
.sim-flow { padding: 26px 24px; }
.sim-steps { display: flex; align-items: flex-start; gap: 0; }
.sim-step { flex: 1; text-align: center; position: relative; }
.sim-step::before {
  content: ''; position: absolute; top: 21px; inset-inline-end: 50%; width: 100%; height: 3px;
  background: var(--line); z-index: 0;
}
.sim-step:first-child::before { display: none; }
.sim-step.done::before, .sim-step.active::before { background: var(--teal-500); }
.sim-step__dot {
  position: relative; z-index: 1; width: 44px; height: 44px; margin: 0 auto 10px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--white); border: 3px solid var(--line); color: var(--ink-300);
  transition: all .4s;
}
.sim-step__dot svg { width: 20px; height: 20px; }
.sim-step.done .sim-step__dot { background: var(--teal-500); border-color: var(--teal-500); color: #fff; }
.sim-step.active .sim-step__dot {
  border-color: var(--teal-500); color: var(--teal-600); background: var(--teal-50);
  box-shadow: 0 0 0 0 rgba(0,171,85,.4); animation: simPulse 1.6s infinite;
}
.sim-step__label { font-size: 13px; font-weight: 600; color: var(--ink-400); transition: color .4s; }
.sim-step.done .sim-step__label, .sim-step.active .sim-step__label { color: var(--ink-900); }
.sim-flow__panel {
  margin-top: 22px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; min-height: 88px;
}
.sim-flow__panel h4 { margin: 0 0 4px; font-size: 15px; color: var(--ink-900); }
.sim-flow__panel p { margin: 0; font-size: 14px; color: var(--ink-500); }
.sim-flow__meta { font-family: var(--font-mono); font-size: 12px; color: var(--teal-600); margin-top: 8px; }

/* ===== 7. FLEET DASHBOARD (cooling) ======================================
   Dark "control room" build. Every panel is driven by one shared state
   object in simulations.js, so a door opening moves the temperature, the
   power bars, the health ring and the alert feed in the same tick.
   Sized with container queries, not viewport ones — the widget has to hold
   its layout inside a half-width column as well as full-bleed.
   ========================================================================= */
.simfleet {
  container-type: inline-size;
  position: relative;
  border-radius: var(--r-lg);
  padding: 14px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(46,212,122,.13), transparent 58%),
    linear-gradient(180deg, #0a141c 0%, #060c12 100%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  color: #dcece4;
  --sf-green: #2ed47a;
  --sf-green-soft: rgba(46,212,122,.16);
  --sf-amber: #f0b23c;
  --sf-blue: #4aa8f0;
  --sf-muted: #7d97a4;
  --sf-card: rgba(255,255,255,.035);
  --sf-line: rgba(255,255,255,.075);
}

/* ---- window chrome ---- */
.simfleet__bar { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.simfleet__dots { display: flex; gap: 6px; flex: none; }
.simfleet__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.simfleet__dots i:nth-child(1) { background: #2ed47a; }
.simfleet__dots i:nth-child(2) { background: #f0b23c; }
.simfleet__dots i:nth-child(3) { background: #ef6a5e; }
.simfleet__url {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-mono); font-size: 12px; color: #9fb6c2; direction: ltr;
  background: rgba(255,255,255,.05); border: 1px solid var(--sf-line);
  border-radius: 999px; padding: 6px 14px;
}
.simfleet__url svg { width: 13px; height: 13px; opacity: .8; }
.simfleet__spacer { flex: 1; }
.simfleet__live {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 12px; font-weight: 700; color: var(--sf-green);
  background: var(--sf-green-soft); border: 1px solid rgba(46,212,122,.28);
  border-radius: 999px; padding: 5px 12px;
}
.simfleet__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-green); animation: sfPulse 2s infinite; }
@keyframes sfPulse { 0%{box-shadow:0 0 0 0 rgba(46,212,122,.55)} 70%{box-shadow:0 0 0 6px rgba(46,212,122,0)} 100%{box-shadow:0 0 0 0 rgba(46,212,122,0)} }

/* ---- panel grid ---- */
/* align-items:stretch + 1fr rows is what keeps the four side panels lined up
   with the two tall ones next to them, instead of each ending where its own
   content happens to stop. */
.simfleet__grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 12px; align-items: stretch; }
.sf-stack { display: grid; gap: 12px; grid-auto-rows: 1fr; }
.sfc {
  background: var(--sf-card); border: 1px solid var(--sf-line);
  border-radius: var(--r-md); padding: 14px 16px; min-width: 0;
  display: flex; flex-direction: column;
}
.sfc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sfc__head h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: #cfe2da; letter-spacing: .01em; white-space: nowrap; }

/* ---- temperature panel ---- */
.sf-delta {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--sf-green);
  background: var(--sf-green-soft); border: 1px solid rgba(46,212,122,.25);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.sf-delta b { font-weight: 600; }
.sf-delta.is-up { color: var(--sf-amber); background: rgba(240,178,60,.14); border-color: rgba(240,178,60,.3); }
.sf-read { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px; direction: ltr; }
.sf-read b {
  font-size: clamp(34px, 7cqi, 56px); font-weight: 800; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(46,212,122,.28);
}
.sf-read em { font-size: 17px; font-style: normal; font-weight: 700; color: var(--sf-muted); }
.sf-legend { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 11.5px; color: var(--sf-muted); }
.sf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sf-key { width: 14px; height: 0; border-top: 2px solid var(--sf-green); flex: none; }
.sf-key--target { border-top-style: dashed; border-color: #6f8b98; }
/* the SVG carries preserveAspectRatio="none", so it can take the leftover
   height of the card without distorting the reading above it */
.sf-chart { width: 100%; flex: 1 1 auto; min-height: clamp(110px, 21cqi, 190px); display: block; margin-top: 10px; }
.sf-chart .sf-line { filter: drop-shadow(0 0 6px rgba(46,212,122,.5)); }
/* the trend advances one sample per tick; transitioning the path (and the
   marker) over the same second turns that step into a glide */
.sf-chart path, .sf-chart circle { transition: d 1s linear, cy 1s linear; }
.sfc__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sf-keys { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sf-muted); }
.sf-clock { font-family: var(--font-mono); font-size: 12px; color: var(--sf-green); direction: ltr; }

/* ---- devices panel ---- */
.sf-big {
  font-size: clamp(26px, 5.4cqi, 42px); font-weight: 800; line-height: 1.05; color: #fff;
  font-variant-numeric: tabular-nums; direction: ltr; text-align: start;
}
/* margin-top:auto drops the sparkline to the bottom of a stretched card, so
   the panel reads as "number top, trend bottom" instead of leaving dead space */
.sf-spark { width: 100%; height: 44px; display: block; margin-top: auto; padding-top: 10px; }

/* ---- door panel ---- */
.sf-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11px; font-weight: 600; color: var(--sf-green);
  background: rgba(255,255,255,.05); border: 1px solid var(--sf-line);
  border-radius: 999px; padding: 3px 9px;
}
.sf-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-green); }
.sf-pill.is-open { color: var(--sf-amber); } .sf-pill.is-open i { background: var(--sf-amber); }
.sf-door { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; }
.sf-door__txt b {
  display: block; font-size: clamp(22px, 4.6cqi, 34px); font-weight: 800; line-height: 1.1;
  color: var(--sf-green); transition: color .4s;
}
.sf-door__txt span { font-size: 11px; color: var(--sf-muted); }
.sf-door.is-open .sf-door__txt b { color: var(--sf-amber); }
.sf-door__ico {
  width: 58px; height: 74px; flex: none; border-radius: 6px; padding: 4px;
  border: 1.5px solid rgba(46,212,122,.5); perspective: 300px; transition: border-color .4s;
}
.sf-door.is-open .sf-door__ico { border-color: rgba(240,178,60,.55); }
.sf-door__ico span {
  display: block; width: 100%; height: 100%; border-radius: 3px; position: relative;
  background: linear-gradient(180deg, rgba(46,212,122,.2), rgba(46,212,122,.05));
  transform-origin: right center; transform: rotateY(0deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), background .4s;
}
.sf-door__ico span::after {
  content: ""; position: absolute; inset-inline-start: 6px; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--sf-green); transform: translateY(-50%); transition: background .4s;
}
.sf-door.is-open .sf-door__ico span {
  transform: rotateY(-62deg);
  background: linear-gradient(180deg, rgba(240,178,60,.22), rgba(240,178,60,.05));
}
.sf-door.is-open .sf-door__ico span::after { background: var(--sf-amber); }

/* ---- power panel ---- */
.sf-total {
  font-family: var(--font-mono); font-size: 11.5px; color: #cfe2da; white-space: nowrap;
  background: rgba(255,255,255,.06); border: 1px solid var(--sf-line);
  border-radius: 999px; padding: 3px 10px;
}
.sf-bars { display: flex; flex: 1; align-items: flex-end; gap: 6px; min-height: 108px; }
.sf-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.sf-bar__v { font-family: var(--font-mono); font-size: 9.5px; color: var(--sf-green); white-space: nowrap; direction: ltr; }
.sf-bar__fill {
  width: 100%; border-radius: 4px 4px 2px 2px; min-height: 4px;
  background: linear-gradient(180deg, #3ee98a, #1a8f52);
  transition: height .8s cubic-bezier(.3,.8,.3,1), background .5s;
}
.sf-bar.is-hot .sf-bar__fill { background: linear-gradient(180deg, #ffd06b, #d9891a); }
.sf-bar.is-hot .sf-bar__v { color: var(--sf-amber); }
.sf-bar__id { font-family: var(--font-mono); font-size: 9px; color: var(--sf-muted); white-space: nowrap; direction: ltr; }

/* ---- health ring ---- */
.sf-ring { position: relative; flex: 1; display: grid; place-items: center; padding: 6px 0 2px; }
.sf-ring svg { width: clamp(96px, 22cqi, 150px); height: auto; display: block; transform: rotate(-90deg); }
.sf-ring__track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 7; }
.sf-ring__val { fill: none; stroke: var(--sf-green); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .9s ease, stroke .5s; filter: drop-shadow(0 0 7px rgba(46,212,122,.45)); }
.sf-ring__num {
  position: absolute; font-size: clamp(17px, 3.4cqi, 26px); font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.sf-ring__num small { font-size: .55em; color: var(--sf-muted); font-weight: 700; }

/* ---- alert feed ---- */
.sf-count {
  font-family: var(--font-mono); font-size: 11.5px; color: #cfe2da;
  background: rgba(255,255,255,.06); border: 1px solid var(--sf-line);
  border-radius: 999px; padding: 3px 11px; min-width: 34px; text-align: center;
}
.sf-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.sf-feed li {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--sf-line);
  border-radius: 10px; padding: 10px 12px; min-width: 0;
  animation: sfRowIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sfRowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sf-feed i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--sf-blue); }
.sf-feed li.sev-warn i { background: var(--sf-amber); }
.sf-feed li.sev-ok i { background: var(--sf-green); }
.sf-feed p {
  margin: 0; flex: 1; min-width: 0; font-size: 12.5px; color: #cadbd3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-feed time { font-size: 11px; color: var(--sf-muted); flex: none; }

/* ---- container-driven density ---- */
@container (max-width: 700px) {
  .sf-bars > .sf-bar:nth-child(n+7) { display: none; }
  /* per-bar kW labels collide once the bars get this narrow — the header
     total keeps the number on screen instead */
  .sf-bar__v { display: none; }
}
@container (max-width: 560px) {
  .sf-bars > .sf-bar:nth-child(n+6) { display: none; }
  .sf-total { font-size: 10px; padding: 2px 7px; }
  .sfc__head { margin-bottom: 8px; }
  .sf-feed li:nth-child(n+5) { display: none; }
  .sf-door__ico { width: 44px; height: 58px; }
}
@container (max-width: 430px) {
  .simfleet__grid { grid-template-columns: 1fr; }
  .sf-bars > .sf-bar:nth-child(n+6) { display: flex; }
}

/* ===== 8. CITY OPS CONSOLE (municipalities) ==============================
   A rebuild of the real incident screen: app bar, incident banner, location
   details, cameras, resources, map and the two feed cards. Light theme, to
   match the product. One state object in simulations.js drives all of it —
   units drive toward the incident on the map while their distance, ETA and
   the alert feed all count down from the same numbers.
   ========================================================================= */
.simops {
  container-type: inline-size;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  --so-crit: #d92d20; --so-crit-bg: #fdecec;
  --so-warn: #d97706; --so-warn-bg: #fef6e7;
  --so-ok: #0a7c42;   --so-ok-bg: #e9f7ef;
  --so-info: #1f6fd0;
  --so-line: #e6ecf2;
}

/* ---- app bar ---- */
.simops__bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--so-line); background: #fff;
}
.simops__brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--navy-800); font-size: 15px; }
.simops__brand i {
  width: 18px; height: 18px; border-radius: 5px; display: block;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
}
.simops__chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--so-line); border-radius: 8px; padding: 4px 9px;
  font-size: 11.5px; color: var(--ink-500); background: #fff;
}
.simops__spacer { flex: 1; }
.simops__hello { font-size: 11.5px; color: var(--ink-400); white-space: nowrap; }
.simops__out { font-size: 11.5px; font-weight: 700; color: var(--so-crit); white-space: nowrap; }

/* ---- incident banner ---- */
.simops__alert {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: var(--so-crit-bg); border-bottom: 1px solid #f6d5d3;
  transition: background .5s, border-color .5s;
}
.simops__alert .so-sev {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--so-crit); white-space: nowrap;
}
.simops__alert .so-sev i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: simPulse 1.8s infinite; }
.simops__alert .so-site { flex: 1; text-align: center; font-weight: 800; font-size: 14px; color: var(--ink-900); }
.simops__alert .so-ago { font-size: 11.5px; color: var(--ink-400); white-space: nowrap; }
.simops__alert.is-work { background: var(--so-warn-bg); border-bottom-color: #f6e3c0; }
.simops__alert.is-work .so-sev { color: var(--so-warn); }
.simops__alert.is-done { background: var(--so-ok-bg); border-bottom-color: #cfe9da; }
.simops__alert.is-done .so-sev { color: var(--so-ok); }

/* ---- layout ---- */
.simops__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 12px; padding: 12px; background: var(--paper); align-items: start; }
.soc-col { display: grid; gap: 12px; }
.soc { background: #fff; border: 1px solid var(--so-line); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.soc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.soc__head h4 { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink-900); position: relative; padding-inline-start: 9px; }
.soc__head h4::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: var(--teal-500);
}
.soc__count {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
  background: var(--paper-2); border-radius: 999px; padding: 2px 9px;
}
.soc-tag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.soc-tag--crit { color: var(--so-crit); background: var(--so-crit-bg); }
.soc-tag--warn { color: var(--so-warn); background: var(--so-warn-bg); }
.soc-tag--ok   { color: var(--so-ok);   background: var(--so-ok-bg); }

/* ---- location rows ---- */
.soc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--paper); border-radius: 8px; padding: 8px 11px; margin-bottom: 8px;
}
.soc-row > span:first-child { font-size: 11.5px; color: var(--ink-400); white-space: nowrap; }
.soc-row b { font-size: 12px; color: var(--ink-900); font-weight: 700; }
.soc-crumb { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.soc-crumb span { font-size: 11.5px; color: var(--ink-400); }
.soc-crumb b { font-size: 12px; }
.soc-panic {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
  color: var(--so-crit); background: #fff; border: 1px solid #f3c4c0; border-radius: 8px; padding: 5px 10px;
}
.soc-panic svg { width: 15px; height: 15px; }
.soc-sub { font-size: 11px; color: var(--ink-400); text-align: center; margin: 12px 0 8px; }

/* ---- camera tiles ---- */
.soc-cams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.soc-cam { margin: 0; }
.soc-cam__view { position: relative; border-radius: 7px; overflow: hidden; background: #22303c; aspect-ratio: 4/3; }
.soc-cam__view svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.soc-cam__rec {
  position: absolute; inset-block-start: 5px; inset-inline-start: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: #ff5a4d; animation: simPulse 1.6s infinite;
}
.soc-cam__t {
  position: absolute; inset-block-end: 3px; inset-inline-end: 5px;
  font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,.85);
}
.soc-cam figcaption { font-size: 10px; color: var(--ink-400); text-align: center; margin-top: 5px; }
/* the detection box steps once a second — glide it instead of snapping */
.soc-cam__view rect[data-box] { transition: transform 1s linear; }

/* ---- safety checklist ---- */
.soc-safe { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.soc-safe li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--so-line); border-inline-start: 3px solid var(--so-ok);
  border-radius: 8px; padding: 8px 11px; font-size: 12px; font-weight: 700; color: var(--ink-900);
}
.soc-safe li span { font-size: 11px; font-weight: 700; color: var(--so-ok); }

/* ---- resource tiles ---- */
.soc-res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.soc-res > div { border: 1px solid var(--so-line); border-radius: 8px; padding: 9px 11px; }
.soc-res__label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-400); }
.soc-res__label svg { width: 13px; height: 13px; }
.soc-res__value { font-size: 15px; font-weight: 800; color: var(--ink-900); margin-top: 3px; font-variant-numeric: tabular-nums; }
.soc-res__value small { font-size: 10.5px; color: var(--ink-400); font-weight: 700; }

/* ---- map ---- */
.soc--map { padding: 0; overflow: hidden; position: relative; }
.soc-map { display: block; width: 100%; height: clamp(190px, 26cqi, 300px); }
.soc-map__note {
  position: absolute; inset-block-end: 5px; inset-inline-start: 7px;
  font-size: 9.5px; color: var(--ink-400); background: rgba(255,255,255,.82);
  border-radius: 4px; padding: 1px 6px;
}
.soc-veh { transition: transform .95s linear; }
.soc-ping { transform-box: fill-box; transform-origin: center; animation: socPing 2.4s ease-out infinite; }
.soc-ping.p2 { animation-delay: .8s; } .soc-ping.p3 { animation-delay: 1.6s; }
@keyframes socPing { 0% { transform: scale(.25); opacity: .6 } 100% { transform: scale(1); opacity: 0 } }

/* ---- unit + alert feeds ---- */
.soc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.soc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.soc-list li {
  border: 1px solid var(--so-line); border-inline-start: 3px solid var(--so-info);
  border-radius: 8px; padding: 8px 10px; min-width: 0;
  animation: sfRowIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.soc-list li.is-there { border-inline-start-color: var(--so-ok); background: var(--so-ok-bg); }
.soc-list li.sev-warn { border-inline-start-color: var(--so-warn); }
.soc-list li.sev-crit { border-inline-start-color: var(--so-crit); background: var(--so-crit-bg); }
.soc-list__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.soc-list__top b { font-size: 12px; color: var(--so-info); font-weight: 700; white-space: nowrap; }
.soc-list li.is-there .soc-list__top b { color: var(--so-ok); }
.soc-list li.sev-warn .soc-list__top b, .soc-list li.sev-crit .soc-list__top b { color: var(--ink-900); }
.soc-list__top time { font-size: 10.5px; color: var(--ink-400); white-space: nowrap; }
.soc-list__sub { font-size: 10.5px; color: var(--ink-400); margin-top: 2px; display: flex; gap: 8px; }
.soc-list__sub b { font-variant-numeric: tabular-nums; color: var(--ink-500); font-weight: 700; }

@container (max-width: 780px) {
  .simops__grid { grid-template-columns: 1fr; }
  .simops__hello, .simops__chip.is-extra { display: none; }
}
@container (max-width: 460px) {
  .soc-pair, .soc-res { grid-template-columns: 1fr; }
  .soc-cams { grid-template-columns: 1fr 1fr; }
  .soc-cam:nth-child(3) { display: none; }
}

/* ===== 10. SAFETY SITE CONSOLE (safety) ==================================
   Rebuild of the real safety screen: team chat, an interactive floor
   section with layer toggles, a live camera tile, the site map and the
   alert feed. One state object drives the clock, the chat, the alerts and
   the map marker so the whole board tells one story.
   ========================================================================= */
.simsafe {
  container-type: inline-size;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  --ss-crit: #d92d20; --ss-crit-bg: #fdecec; --ss-line: #e6ecf2;
}
.simsafe__bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #fff; border-bottom: 1px solid var(--ss-line);
}
.simsafe__brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--navy-800); font-size: 15px; }
.simsafe__brand i { width: 17px; height: 17px; border-radius: 5px; background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); }
.simsafe__spacer { flex: 1; }
.simsafe__btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-500); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
}
.simsafe__btn svg { width: 14px; height: 14px; }
.simsafe__ava { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-400); }
.simsafe__ava svg { width: 15px; height: 15px; }

/* ---- grid: chat | section+camera | map+alerts ---- */
.simsafe__grid { display: grid; grid-template-columns: 1fr 1.05fr 1.15fr; gap: 10px; padding: 10px; align-items: start; }
.ssc { background: #fff; border: 1px solid var(--ss-line); border-radius: var(--r-md); min-width: 0; }
.ssc__head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--ss-line);
}
.ssc__head h4 { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink-900); flex: 1; text-align: center; }
.ssc__head .ic { color: var(--teal-600); display: grid; place-items: center; }
.ssc__head .ic svg { width: 17px; height: 17px; }
.ssc__badge {
  min-width: 22px; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--ss-crit); background: var(--ss-crit-bg); border-radius: 999px; padding: 2px 8px;
}

/* ---- chat ---- */
.ss-chat { display: flex; flex-direction: column; height: clamp(360px, 46cqi, 520px); }
.ss-chat__body { flex: 1; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.ss-chat__day { align-self: center; font-size: 10.5px; color: var(--ink-400); background: var(--paper-2); border-radius: 999px; padding: 3px 12px; }
.ss-msg {
  max-width: 82%; border-radius: 12px; padding: 8px 11px 16px; position: relative;
  font-size: 12.5px; line-height: 1.5; animation: sfRowIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.ss-msg--in  { align-self: flex-start; background: var(--paper-2); color: var(--ink-700); }
.ss-msg--out { align-self: flex-end; background: #e7f6ee; color: var(--ink-900); }
.ss-msg time { position: absolute; inset-block-end: 4px; inset-inline-start: 9px; font-size: 9.5px; color: var(--ink-400); }
.ss-msg--out time { inset-inline-start: auto; inset-inline-end: 9px; }
.ss-msg__file { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; }
.ss-msg__file span { color: var(--ink-400); font-size: 10px; }
.ss-typing { align-self: flex-start; display: inline-flex; gap: 3px; padding: 9px 12px; background: var(--paper-2); border-radius: 12px; }
.ss-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-300); animation: ssBlink 1.2s infinite; }
.ss-typing i:nth-child(2) { animation-delay: .2s; } .ss-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ssBlink { 0%,60%,100% { opacity: .3 } 30% { opacity: 1 } }
.ss-chat__foot { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--ss-line); }
.ss-chat__foot .fake-input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; color: var(--ink-300); }
.ss-chat__foot svg { width: 16px; height: 16px; color: var(--ink-400); }
.ss-chat__foot .send { color: var(--teal-600); }

/* ---- floor section + layer panel ---- */
.ss-section { position: relative; background: linear-gradient(180deg, #dceaf5 0%, #eaf3ea 62%, #dfe9d8 100%); }
.ss-section svg { display: block; width: 100%; height: clamp(190px, 24cqi, 280px); }
.ss-layers {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px; width: 156px;
  background: rgba(13,22,32,.93); border-radius: 10px; padding: 9px; color: #dbe6ef;
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.ss-layers__t { font-size: 9.5px; color: #8ba0b3; margin: 2px 2px 6px; display: flex; justify-content: space-between; }
.ss-seg { display: flex; gap: 3px; background: rgba(255,255,255,.06); border-radius: 7px; padding: 3px; margin-bottom: 8px; }
.ss-seg button {
  flex: 1; border: 0; border-radius: 5px; padding: 4px 2px; cursor: pointer;
  background: none; color: #b9cad9; font: inherit; font-size: 10px; font-weight: 600;
}
.ss-seg button.is-on { background: #1f7ae0; color: #fff; }
.ss-layer {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: start;
  background: rgba(255,255,255,.05); border: 0; border-radius: 6px;
  padding: 5px 8px; margin-bottom: 4px; color: #cddae6; font: inherit; font-size: 10px;
}
.ss-layer i { width: 6px; height: 6px; border-radius: 50%; background: #f0b23c; flex: none; }
.ss-layer.is-off { color: #66798a; } .ss-layer.is-off i { background: #465969; }

/* ---- camera ---- */
.ss-cam { padding: 10px; }
.ss-cam__view { position: relative; border-radius: 8px; overflow: hidden; background: #2a3540; aspect-ratio: 16/10; }
.ss-cam__view svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-cam__meta {
  position: absolute; inset-block-start: 5px; inset-inline: 6px; display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,.85);
}
.ss-cam__rec { display: inline-flex; align-items: center; gap: 4px; }
.ss-cam__rec i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a4d; animation: simPulse 1.6s infinite; }
.ss-cam__name { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-900); margin-top: 8px; }
.ss-cam__view rect[data-cbox] { transition: transform 1s linear; }

/* ---- map ---- */
.ss-map { position: relative; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.ss-map svg { display: block; width: 100%; height: clamp(180px, 22cqi, 260px); }
.ss-pin { transform-box: fill-box; transform-origin: center; }
.ss-pin__ring { animation: socPing 2.2s ease-out infinite; }
.ss-pin__ring.r2 { animation-delay: 1.1s; }

/* ---- alerts ---- */
.ss-alerts { padding: 10px; display: grid; gap: 8px; }
.ss-alert {
  border: 1px solid #f3c4c0; border-inline-start: 4px solid var(--ss-crit);
  background: var(--ss-crit-bg); border-radius: 10px; padding: 10px 12px;
  animation: sfRowIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.ss-alert__top { display: flex; align-items: center; gap: 8px; }
.ss-alert__sev {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  color: #fff; background: var(--ss-crit); border-radius: 999px; padding: 3px 9px;
}
.ss-alert__id { flex: 1; font-size: 13px; font-weight: 800; color: var(--ink-900); text-align: center; }
.ss-alert__ago { font-size: 10.5px; color: var(--ink-400); }
.ss-alert__txt { font-size: 11.5px; color: #b42318; margin-top: 4px; text-align: center; }
.ss-alert--ok { border-color: #cfe9da; border-inline-start-color: var(--teal-600); background: #eefaf3; }
.ss-alert--ok .ss-alert__sev { background: var(--teal-600); }
.ss-alert--ok .ss-alert__txt { color: var(--teal-600); }
.ss-alert--warn { border-color: #f6e3c0; border-inline-start-color: #d97706; background: #fef6e7; }
.ss-alert--warn .ss-alert__sev { background: #d97706; }
.ss-alert--warn .ss-alert__txt { color: #a15c07; }
.ss-detail { border: 1px solid var(--ss-line); border-radius: 10px; overflow: hidden; }
.ss-detail__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.ss-detail__row + .ss-detail__row { border-top: 1px solid var(--ss-line); }
.ss-detail__row .k { font-size: 10.5px; color: var(--ink-400); }
.ss-detail__row .v { flex: 1; font-size: 12px; font-weight: 700; color: var(--ink-900); text-align: start; }
.ss-detail__ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.ss-detail__ic svg { width: 15px; height: 15px; }

@container (max-width: 900px) { .simsafe__grid { grid-template-columns: 1fr 1fr; } .ssc--chat { grid-column: 1 / -1; } }
@container (max-width: 560px) { .simsafe__grid { grid-template-columns: 1fr; } }

/* responsive ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .sim-dash, .sim-city { grid-template-columns: 1fr; }
  .sim-mini { grid-template-columns: 1fr 1fr; }
  .sim-reading b { font-size: 34px; }
  .sim-steps { gap: 0; }
  .sim-step__label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sim * { animation: none !important; transition: none !important; }
  .sim-toast { transform: none; opacity: 1; position: static; margin: 16px; }
}