/* ==========================================================================
   ORION GAS — SISTEM PEMANTAUAN GAS DIENG
   Design System: Cyberpunk
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Font aliases per specification */
@font-face {
  font-family: 'Cyberpunk Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans'), local('IBMPlexSans');
}
@font-face {
  font-family: 'Cyberpunk Plex Sans';
  font-style: normal;
  font-weight: 600;
  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold');
}
@font-face {
  font-family: 'Cyberpunk Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: local('IBM Plex Sans Bold'), local('IBMPlexSans-Bold');
}

@font-face {
  font-family: 'Cyberpunk Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Mono'), local('IBMPlexMono');
}
@font-face {
  font-family: 'Cyberpunk Plex Mono';
  font-style: normal;
  font-weight: 600;
  src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold');
}
@font-face {
  font-family: 'Cyberpunk Plex Mono';
  font-style: normal;
  font-weight: 700;
  src: local('IBM Plex Mono Bold'), local('IBMPlexMono-Bold');
}

:root {
  /* Authoritative tokens */
  --dp-color-ground: #020303;
  --dp-color-accent: #38ff8e;
  --dp-color-interference: #ff65d8;
  --dp-color-registration: #65f8ff;
  --dp-color-ink: #f8fffa;
  --dp-color-ink-body: #d3dbd5;
  --dp-color-ink-muted: #c2cbc5;
  --dp-color-plate: #090e0b;
  --dp-color-line: #304c3b;
  --dp-color-control-line: #659579;
  --dp-typography-display: "Cyberpunk Plex Sans", "IBM Plex Sans", sans-serif;
  --dp-typography-mono: "Cyberpunk Plex Mono", "IBM Plex Mono", monospace;
  --dp-typography-small: 14px;
  --dp-typography-label: 12px;
  --dp-typography-metadata: 11px;
  --dp-spacing-gutter: clamp(22px, 4.5cqi, 72px);
  --dp-spacing-column-gap: 50px;
  --dp-radius-control: 0;
  --dp-border-hairline: 1px;
  --dp-motion-interaction: 0s;

  /* Legacy mapping aliases for backward compatibility */
  --navy: var(--dp-color-plate);
  --navy-2: #0e1612;
  --navy-3: #14231b;
  --accent: var(--dp-color-accent);
  --accent-2: #4aff9f;
  --amber: #f5c038;
  --red: #ff385c;
  --ink: var(--dp-color-ink);
  --ink-soft: var(--dp-color-ink-body);
  --muted: var(--dp-color-ink-muted);
  --line: var(--dp-color-line);
  --line-soft: rgba(48, 76, 59, 0.45);
  --bg: var(--dp-color-ground);
  --card: var(--dp-color-plate);
  --code-bg: #050a07;
  --radius: 0px;
  --radius-sm: 0px;
  --mono: var(--dp-typography-mono);
  --sans: var(--dp-typography-display);
}

/* ---------- Global Reset & Surfaces ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--dp-color-ground);
  color-scheme: dark;
}

body {
  margin: 0;
  background-color: var(--dp-color-ground);
  /* Faint static scanline overlay: high contrast text preserved, static */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
  color: var(--dp-color-ink-body);
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-small);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility focus visible */
:focus-visible {
  outline: 2px solid var(--dp-color-registration);
  outline-offset: 3px;
}

/* ---------- Top Telemetry Bar ---------- */
.top-telemetry-bar {
  background: #010503;
  border-bottom: 1px solid var(--dp-color-line);
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  color: var(--dp-color-ink-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 0;
}

.top-telemetry-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--dp-spacing-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.top-telemetry-wrap span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-telemetry-wrap .telemetry-pill {
  color: var(--dp-color-accent);
  background: rgba(56, 255, 142, 0.08);
  border: 1px solid var(--dp-color-line);
  padding: 1px 6px;
  font-weight: 700;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--dp-color-ground);
  border-bottom: 1px solid var(--dp-color-line);
  position: relative;
}

.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--dp-color-accent) 0%, var(--dp-color-line) 50%, transparent 100%);
  pointer-events: none;
}

.site-header .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px var(--dp-spacing-gutter) 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  display: block;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-text h1 {
  font-family: var(--dp-typography-display);
  font-size: 19px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dp-color-ink);
}

.brand-text p {
  margin: 3px 0 0;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  color: var(--dp-color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.site-nav a {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dp-color-ink-muted);
  text-decoration: none;
  padding: 8px 15px;
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  border-bottom: 2px solid transparent;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
  position: relative;
  --nav-edge: var(--dp-color-line);
  transition: var(--dp-motion-interaction);
}

/* clip-path cuts the corner border away, so draw the diagonal inside the clipped area */
.site-nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--nav-edge) calc(50% - 0.5px),
    var(--nav-edge) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  pointer-events: none;
}

.site-nav a:hover {
  background: #111a14;
  color: var(--dp-color-ink);
  border-color: var(--dp-color-control-line);
  --nav-edge: var(--dp-color-control-line);
}

.site-nav a.active {
  background: var(--dp-color-accent);
  color: var(--dp-color-ground);
  border-color: var(--dp-color-accent);
  font-weight: 700;
  --nav-edge: var(--dp-color-accent);
}

/* ---------- Main Layout & Continuous Signal Rail ---------- */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px var(--dp-spacing-gutter) 80px 38px;
  position: relative;
  /* Thin green signal rail running along the main content */
  border-left: 1px solid var(--dp-color-line);
}

.page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 1px;
  background: var(--dp-color-accent);
  box-shadow: 0 0 8px rgba(56, 255, 142, 0.4);
  pointer-events: none;
}

/* Section styling with rail marker node */
section {
  margin-bottom: 52px;
  scroll-margin-top: 24px;
  position: relative;
}

section::before {
  content: "";
  position: absolute;
  left: -43px; /* Centers 9px square node directly on the 1px green rail (-38px - 5px) */
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--dp-color-ground);
  border: 1px solid var(--dp-color-accent);
  box-shadow: 0 0 5px var(--dp-color-accent);
}

/* ---------- Page Head & Geometric Signal Object ---------- */
.page-head {
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--dp-color-line);
}

.page-head-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}

.page-head-main {
  min-width: 0;
}

/* Hero Grid with 1:1 Lead Image */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: var(--dp-spacing-column-gap);
  align-items: start;
}

.hero-main {
  min-width: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.btn-primary {
  display: inline-block;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  background: var(--dp-color-accent);
  color: var(--dp-color-ground);
  border: 1px solid var(--dp-color-accent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  cursor: pointer;
  transition: var(--dp-motion-interaction);
  text-decoration: none;
}

.btn-primary:hover {
  background: #4aff9f;
  border-color: #4aff9f;
  color: var(--dp-color-ground);
  text-decoration: none;
}

.btn-primary:active {
  transform: translate(2px, 2px);
}

.btn-secondary {
  display: inline-block;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  background: var(--dp-color-plate);
  color: var(--dp-color-ink-muted);
  border: 1px solid var(--dp-color-control-line);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  cursor: pointer;
  transition: var(--dp-motion-interaction);
  text-decoration: none;
}

.btn-secondary:hover {
  color: var(--dp-color-ink);
  border-color: var(--dp-color-accent);
  background: #0e1712;
  text-decoration: none;
}

.btn-secondary:active {
  transform: translate(2px, 2px);
}

/* 1:1 Square Lead Hero Photo Frame */
.hero-visual {
  width: 100%;
}

.hero-lead-card {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 8px;
  position: relative;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: inset 0 0 20px rgba(56, 255, 142, 0.08);
}

.hero-img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #020303;
  border: 1px solid var(--dp-color-line);
}

.hero-lead-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Design system requirement: grayscale with modest added contrast */
  filter: grayscale(100%) contrast(1.15) brightness(0.95);
  transition: var(--dp-motion-interaction);
}

.hero-lead-card:hover .hero-lead-img {
  filter: grayscale(70%) contrast(1.18) brightness(1);
}

.hero-img-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.6;
}

.hero-img-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  padding: 8px;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hud-tag {
  position: absolute;
  background: rgba(2, 3, 3, 0.8);
  border: 1px solid var(--dp-color-line);
  padding: 2px 6px;
  line-height: 1.2;
}

.hud-tag.top-left {
  top: 8px;
  left: 8px;
  color: var(--dp-color-registration);
  border-left: 2px solid var(--dp-color-accent);
}

.hud-tag.bottom-left {
  bottom: 8px;
  left: 8px;
  color: var(--dp-color-ink-muted);
}

.hud-crosshair {
  position: absolute;
  font-size: 14px;
  line-height: 1;
}

.hud-crosshair.top-right {
  top: 6px;
  right: 8px;
  color: var(--dp-color-registration);
}

.hud-crosshair.bottom-right {
  bottom: 6px;
  right: 8px;
  color: var(--dp-color-interference);
}

.hero-caption {
  padding: 10px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-caption-title {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dp-color-accent);
}

.hero-caption-sub {
  font-family: var(--dp-typography-mono);
  font-size: 11px;
  color: var(--dp-color-ink-muted);
}

/* Sub-page header photo: same framed treatment as the index hero, sized for the page head */
.page-head-photo {
  width: 220px;
  max-width: 100%;
  margin: 0;
}

.page-head-photo .hero-caption {
  padding: 8px 4px 2px;
}

/* In-body design drawing: half the content width, with the explanation beside it.
   Same plate treatment, but never cropped square. */
.design-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  margin: 30px 0 0;
}

.design-figure .hero-img-frame {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: auto;
}

.design-figure .hero-lead-img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.design-figure .hero-caption {
  grid-column: 1;
  grid-row: 2;
  padding: 10px 6px 4px;
}

/* Explanation column paired with a design drawing */
.design-note {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--dp-typography-mono);
  border-left: 1px solid var(--dp-color-line);
  padding-left: 20px;
}

.design-note p {
  font-size: var(--dp-typography-small);
  line-height: 1.65;
  color: var(--dp-color-ink-body);
}

.design-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .design-figure {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 24px 0 0;
  }

  .design-figure .hero-img-frame,
  .design-figure .hero-caption,
  .design-note {
    grid-column: 1;
    grid-row: auto;
  }

  .design-note {
    border-left: 0;
    border-top: 1px solid var(--dp-color-line);
    padding-left: 0;
    padding-top: 16px;
  }
}

.page-head .kicker {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dp-color-registration);
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: -1px 0 rgba(101, 248, 255, 0.6), 1px 0 rgba(255, 101, 216, 0.6);
}

.page-head .kicker::before {
  content: "■";
  color: var(--dp-color-accent);
  font-size: 9px;
}

/* Wide opening title: semibold uppercase with tight tracking & compact leading */
.page-head h2 {
  font-family: var(--dp-typography-display);
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--dp-color-ink);
  margin: 0 0 14px;
}

.page-head p,
.page-head .lead {
  margin: 0;
  font-family: var(--dp-typography-mono);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dp-color-ink-body);
  max-width: 820px;
}

/* Compact geometric signal object */
.signal-object {
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 8px;
  display: grid;
  place-items: center;
  position: relative;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 0 14px rgba(56, 255, 142, 0.1);
}

.signal-object::before,
.signal-object::after {
  content: "+";
  position: absolute;
  font-family: var(--dp-typography-mono);
  font-size: 11px;
  line-height: 1;
}

.signal-object::before {
  top: 4px;
  left: 6px;
  color: var(--dp-color-registration);
}

.signal-object::after {
  bottom: 4px;
  right: 6px;
  color: var(--dp-color-interference);
}

.signal-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Typography & Headings ---------- */
h3 {
  font-family: var(--dp-typography-display);
  font-size: 1.45rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--dp-color-ink);
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

h3 .num {
  font-family: var(--dp-typography-mono);
  color: var(--dp-color-accent);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}

h4 {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dp-color-accent);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

h4::before {
  content: "//";
  color: var(--dp-color-control-line);
}

.lead {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-small);
  line-height: 1.65;
  color: var(--dp-color-ink-body);
  margin: 0 0 20px;
  max-width: 860px;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--dp-color-accent);
  text-decoration: none;
  transition: var(--dp-motion-interaction);
}

a:hover {
  color: var(--dp-color-registration);
  text-decoration: underline;
}

ul, ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

li {
  margin-bottom: 8px;
  color: var(--dp-color-ink-body);
}

code {
  font-family: var(--dp-typography-mono);
  font-size: 0.9em;
  background: #09140e;
  padding: 2px 6px;
  border-radius: 0;
  color: var(--dp-color-accent);
  border: 1px solid var(--dp-color-line);
  white-space: nowrap;
}

/* ---------- Grid & Cards ---------- */
.grid {
  display: grid;
  gap: 18px;
}

.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  border-radius: 0;
  padding: 20px 22px;
  position: relative;
  transition: var(--dp-motion-interaction);
}

.card:hover {
  border-color: var(--dp-color-control-line);
}

.card h4 {
  margin-top: 0;
}

.card-tight {
  padding: 16px 18px;
}

/* Horizontal card / record link styling */
a.card {
  display: block;
  text-decoration: none;
  border-left: 3px solid var(--dp-color-control-line);
}

a.card:hover {
  border-left-color: var(--dp-color-accent);
  border-color: var(--dp-color-control-line);
  background: #0e1611;
  text-decoration: none;
}

a.card:hover h4 {
  color: var(--dp-color-registration);
}

/* ---------- Tightly Ruled Facts Row / Stats ---------- */
.facts-row {
  margin-top: 6px;
  margin-bottom: 24px;
}

.stat {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  border-left: 3px solid var(--dp-color-accent);
  border-radius: 0;
  padding: 14px 18px;
  position: relative;
}

.stat::after {
  content: "+";
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--dp-color-line);
  font-family: var(--dp-typography-mono);
  font-size: 12px;
}

.stat .label {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dp-color-registration);
  font-weight: 700;
}

.stat .value {
  font-family: var(--dp-typography-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--dp-color-ink);
  line-height: 1.25;
  margin-top: 4px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stat .sub {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  color: var(--dp-color-ink-muted);
}

/* ---------- Tables / Feature Matrices ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--dp-color-line);
  border-radius: 0;
  background: var(--dp-color-plate);
  margin-bottom: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--dp-typography-mono);
  font-size: 13.5px;
}

thead th {
  background: #050a07;
  color: var(--dp-color-ink);
  text-align: left;
  font-weight: 600;
  font-size: var(--dp-typography-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 2px solid var(--dp-color-line);
  white-space: nowrap;
}

thead th.num, td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tbody td {
  padding: 11px 16px;
  border-top: 1px solid rgba(48, 76, 59, 0.45);
  color: var(--dp-color-ink-body);
  vertical-align: top;
}

tbody tr:nth-child(even) {
  background: rgba(9, 14, 11, 0.6);
}

tbody tr:hover {
  background: rgba(56, 255, 142, 0.05);
}

tfoot td {
  padding: 12px 16px;
  border-top: 2px solid var(--dp-color-control-line);
  font-weight: 700;
  color: var(--dp-color-ink);
  background: #050a07;
}

.tbl-total td {
  color: var(--dp-color-accent);
  font-size: 14.5px;
  border-top: 1px solid var(--dp-color-control-line);
}

.tbl-final td {
  color: var(--dp-color-ground);
  background: var(--dp-color-accent);
  border-top: 2px solid var(--dp-color-accent);
  font-weight: 700;
  font-size: 15px;
}

.table-note {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  color: var(--dp-color-ink-muted);
  margin: 8px 0 24px;
}

/* ---------- Code & ASCII Telemetry Blocks ---------- */
pre {
  background: var(--dp-color-plate);
  color: var(--dp-color-ink);
  border: 1px solid var(--dp-color-line);
  border-left: 3px solid var(--dp-color-control-line);
  border-radius: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--dp-typography-mono);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 20px;
  position: relative;
}

pre.ascii, .arch {
  background: #050907;
  color: var(--dp-color-accent);
  border: 1px solid var(--dp-color-line);
  border-left: 3px solid var(--dp-color-accent);
  border-radius: 0;
  font-family: var(--dp-typography-mono);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre;
  overflow-x: auto;
  padding: 18px 20px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7);
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  white-space: pre;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid currentColor;
}

.badge-ok {
  background: rgba(56, 255, 142, 0.12);
  color: var(--dp-color-accent);
  border-color: var(--dp-color-accent);
}

.badge-warn {
  background: rgba(245, 192, 56, 0.12);
  color: #f5c038;
  border-color: #f5c038;
}

.badge-crit {
  background: rgba(255, 101, 216, 0.14);
  color: var(--dp-color-interference);
  border-color: var(--dp-color-interference);
}

.badge-max {
  background: #ff385c;
  color: #020303;
  border-color: #ff385c;
  font-weight: 800;
}

.badge-info {
  background: rgba(101, 248, 255, 0.12);
  color: var(--dp-color-registration);
  border-color: var(--dp-color-registration);
}

.badge-f2, .badge.f2 {
  background: rgba(181, 140, 255, 0.12);
  color: #c8aaff;
  border-color: #b58cff;
}

/* ---------- Callouts ---------- */
.callout {
  border-radius: 0;
  padding: 16px 20px;
  margin: 0 0 22px;
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  border-left: 4px solid var(--dp-color-control-line);
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-small);
  color: var(--dp-color-ink-body);
}

.callout strong {
  color: var(--dp-color-ink);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-tip {
  border-left-color: var(--dp-color-accent);
  background: #05100a;
}

.callout-warn {
  border-left-color: #f5c038;
  background: #0f0d04;
}

.callout-crit {
  border-left-color: var(--dp-color-interference);
  background: #11050d;
}

/* ---------- Steps (Vertical Track with Numbered Markers) ---------- */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.steps > li, .steps > .step {
  position: relative;
  padding: 0 0 20px 48px;
  border-left: 1px solid var(--dp-color-line);
  margin-left: 14px;
}

.steps > li:last-child, .steps > .step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.steps > li::before, .steps > .step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -15px;
  top: -2px;
  width: 30px;
  height: 24px;
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-accent);
  color: var(--dp-color-accent);
  display: grid;
  place-items: center;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.steps strong {
  color: var(--dp-color-ink);
}

/* ---------- Page Navigation Actions (Opposing Clipped Corners) ---------- */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--dp-color-line);
}

.page-nav a {
  display: block;
  flex: 1;
  text-decoration: none;
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 14px 20px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: var(--dp-motion-interaction);
}

.page-nav a:hover {
  background: var(--dp-color-accent);
  border-color: var(--dp-color-accent);
  text-decoration: none;
}

.page-nav a:hover .pn-label {
  color: #042414;
}

.page-nav a:hover .pn-title {
  color: var(--dp-color-ground);
}

.page-nav a:active {
  transform: translate(2px, 2px);
}

.page-nav .pn-label {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dp-color-registration);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.page-nav .pn-title {
  font-family: var(--dp-typography-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dp-color-ink);
}

.page-nav a.next {
  text-align: right;
}

.page-nav .spacer {
  flex: 1;
}

/* ---------- Signal Banner (Finishing Statement) ---------- */
.signal-banner {
  margin: 56px 0 32px;
  padding: 24px 28px;
  background: #04120a;
  border: 1px solid var(--dp-color-accent);
  position: relative;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: inset 0 0 20px rgba(56, 255, 142, 0.12);
}

.signal-banner::before {
  content: "// SYSTEM_VERIFIED // 433MHZ LORA // RS485 MODBUS // DUAL BUCK 5V //";
  display: block;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--dp-color-registration);
  margin-bottom: 8px;
}

.signal-banner-statement {
  font-family: var(--dp-typography-display);
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--dp-color-accent);
  margin: 0 0 12px;
}

.signal-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  color: var(--dp-color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-top: 1px dashed var(--dp-color-line);
  padding-top: 10px;
}

/* ---------- Compact Directory Footer ---------- */
.site-footer {
  background: #040806;
  color: var(--dp-color-ink-muted);
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  border-top: 1px solid var(--dp-color-line);
  margin-top: 52px;
}

.site-footer .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px var(--dp-spacing-gutter);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  margin-bottom: 24px;
}

.footer-col {
  min-width: 0;
}

.footer-title {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dp-color-accent);
  margin-bottom: 10px;
}

.footer-text {
  margin: 0 0 8px;
  line-height: 1.55;
  color: var(--dp-color-ink-body);
}

.footer-meta {
  font-size: var(--dp-typography-metadata);
  color: var(--dp-color-control-line);
  letter-spacing: 0.05em;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.footer-nav a {
  color: var(--dp-color-ink-body);
  font-size: var(--dp-typography-label);
  text-decoration: none;
  transition: var(--dp-motion-interaction);
}

.footer-nav a:hover {
  color: var(--dp-color-accent);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--dp-color-line);
  padding-top: 16px;
  font-size: var(--dp-typography-metadata);
  color: var(--dp-color-control-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-bottom a {
  color: var(--dp-color-accent);
}

/* ---------- Key-Value Lists & Misc ---------- */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.kv {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--dp-typography-mono);
  font-size: 13.5px;
}

.kv li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(48, 76, 59, 0.5);
  color: var(--dp-color-ink-body);
}

.kv li:last-child {
  border-bottom: 0;
}

.kv .k {
  flex: 0 0 190px;
  color: var(--dp-color-ink-muted);
  font-weight: 600;
  font-size: var(--dp-typography-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kv span:last-child {
  color: var(--dp-color-ink);
}

hr.sep {
  border: 0;
  border-top: 1px solid var(--dp-color-line);
  margin: 36px 0;
}

/* ---------- Dashboard / IoT Monitoring Mockup Components ---------- */
.dash-toolbar {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  position: relative;
}

.dash-toolbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--dp-color-accent);
}

.dash-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dash-toolbar-label {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dp-color-ink-muted);
}

.dash-btn {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  background: #060b08;
  color: var(--dp-color-ink-muted);
  border: 1px solid var(--dp-color-line);
  cursor: pointer;
  transition: var(--dp-motion-interaction);
}

.dash-btn:hover {
  color: var(--dp-color-ink);
  border-color: var(--dp-color-control-line);
  background: #0f1a14;
}

.dash-btn.active {
  background: var(--dp-color-accent);
  color: var(--dp-color-ground);
  border-color: var(--dp-color-accent);
  font-weight: 700;
}

.dash-btn-scenario {
  border-left-width: 3px;
}

.dash-btn-scenario[data-scenario="normal"].active {
  background: rgba(56, 255, 142, 0.15);
  color: var(--dp-color-accent);
  border-color: var(--dp-color-accent);
}

.dash-btn-scenario[data-scenario="warn"].active {
  background: rgba(245, 192, 56, 0.15);
  color: #f5c038;
  border-color: #f5c038;
}

.dash-btn-scenario[data-scenario="crit"].active {
  background: rgba(255, 101, 216, 0.15);
  color: var(--dp-color-interference);
  border-color: var(--dp-color-interference);
}

.dash-btn-scenario[data-scenario="max"].active {
  background: rgba(255, 56, 92, 0.2);
  color: #ff385c;
  border-color: #ff385c;
}

.dash-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dp-color-accent);
}

.dash-pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--dp-color-accent);
  box-shadow: 0 0 6px var(--dp-color-accent);
  display: inline-block;
}

/* Metric Cards Grid */
.dash-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.dash-gauge-card {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: var(--dp-motion-interaction);
}

.dash-gauge-card:hover {
  border-color: var(--dp-color-control-line);
}

.dash-gauge-card.state-warn {
  border-left: 3px solid #f5c038;
}

.dash-gauge-card.state-crit {
  border-left: 3px solid var(--dp-color-interference);
}

.dash-gauge-card.state-max {
  border-left: 3px solid #ff385c;
  box-shadow: inset 0 0 16px rgba(255, 56, 92, 0.1);
}

.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.dash-card-tag {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  color: var(--dp-color-registration);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.dash-card-title {
  font-family: var(--dp-typography-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dp-color-ink);
  margin: 2px 0 0;
}

.dash-card-readout {
  margin: 8px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dash-card-val {
  font-family: var(--dp-typography-display);
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--dp-color-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dash-card-unit {
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  color: var(--dp-color-ink-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* Industrial Radial Gauge Specific Styles */
.industrial-gauge-card {
  padding: 16px 16px 14px;
}

.industrial-dial-wrapper {
  position: relative;
  width: 100%;
  max-width: 250px;
  margin: 4px auto 6px;
}

.industrial-dial-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Needle inner group: smooth SVG transform transition */
.industrial-dial-svg #needle-h2s,
.industrial-dial-svg #needle-co2 {
  transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.3, 1);
}

.industrial-gauge-card:hover .industrial-dial-svg circle[r="98"] {
  stroke: var(--dp-color-control-line);
}

/* ===================== MINIMAP STYLES ===================== */

/* SVG keyframes for pulse rings and moving chevrons */
@keyframes pulseRing {
  0%   { opacity: 0.9; r: 10; }
  60%  { opacity: 0.3; }
  100% { opacity: 0;   r: 34; }
}

@keyframes moveChevron {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes linkFlash {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.9; }
}

#minimap-section {
  margin-top: 72px;
}

.minimap-wrapper {
  border: 1px solid var(--dp-color-line);
  background: var(--dp-color-plate);
  padding: 0;
  overflow: hidden;
}

/* Legend row */
.minimap-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dp-color-line);
  flex-wrap: wrap;
}

.minimap-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  color: var(--dp-color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.minimap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-a { background: var(--dp-color-accent); box-shadow: 0 0 5px var(--dp-color-accent); }
.dot-b { background: var(--dp-color-registration); box-shadow: 0 0 5px var(--dp-color-registration); }
.dot-c { background: var(--dp-color-interference); box-shadow: 0 0 5px var(--dp-color-interference); }

/* SVG container */
.minimap-svg-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}

#minimap-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG pulse rings — the @keyframes 'r' is SVG presentation attribute,
   so we use CSS animation with custom keyframes applied via element style */
.pulse-ring {
  transform-origin: center;
  transform-box: fill-box;
}

/* Scanline overlay on minimap */
.minimap-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
}

/* Link lines flash animation */
#link-a-base,
#link-b-base {
  animation: linkFlash 2.4s ease-in-out infinite;
}
#link-b-base {
  animation-delay: -1.2s;
}

/* Signal chevrons — motion-path based */
.sig-chev {
  offset-rotate: auto;
}

/* Bottom status bar */
.minimap-status-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 16px;
  border-top: 1px solid var(--dp-color-line);
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-label);
  color: var(--dp-color-ink-muted);
  flex-wrap: wrap;
}

.mm-link-info {
  color: var(--dp-color-line);
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 700px) {
  .minimap-legend { gap: 10px; }
  .minimap-status-bar { gap: 10px; font-size: 10px; }
}

/* Threshold progress bar */
.dash-progress-track {
  width: 100%;
  height: 6px;
  background: #020503;
  border: 1px solid var(--dp-color-line);
  position: relative;
  margin: 10px 0 12px;
}

.dash-progress-fill {
  height: 100%;
  background: var(--dp-color-accent);
  transition: width 0.2s linear;
}

.dash-gauge-card.state-warn .dash-progress-fill {
  background: #f5c038;
}

.dash-gauge-card.state-crit .dash-progress-fill {
  background: var(--dp-color-interference);
}

.dash-gauge-card.state-max .dash-progress-fill {
  background: #ff385c;
}

.dash-card-footer {
  font-family: var(--dp-typography-mono);
  font-size: 11px;
  color: var(--dp-color-ink-muted);
  border-top: 1px dashed rgba(48, 76, 59, 0.4);
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
}

/* Live Telemetry Chart Section */
.dash-chart-card {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 22px 24px;
  margin-bottom: 28px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.dash-chart-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.dash-chart-legend {
  display: flex;
  gap: 16px;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-metadata);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dash-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-legend-color {
  width: 12px;
  height: 3px;
  display: inline-block;
}

.dash-svg-container {
  width: 100%;
  height: 240px;
  background: #020503;
  border: 1px solid var(--dp-color-line);
  position: relative;
  overflow: hidden;
}

.dash-svg-chart {
  width: 100%;
  height: 100%;
  display: block;
}

/* Split Section for Terminal Log & Alarm Dispatch */
.dash-dual-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  margin-bottom: 28px;
}

.dash-terminal-card {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 20px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.dash-terminal-screen {
  background: #020503;
  border: 1px solid var(--dp-color-line);
  border-left: 3px solid var(--dp-color-accent);
  padding: 14px 16px;
  font-family: var(--dp-typography-mono);
  font-size: 12px;
  line-height: 1.6;
  height: 280px;
  overflow-y: auto;
  color: var(--dp-color-ink-body);
}

.log-entry {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  word-break: break-all;
}

.log-entry .log-time {
  color: var(--dp-color-control-line);
  flex: 0 0 80px;
}

.log-entry.log-ok .log-msg { color: var(--dp-color-accent); }
.log-entry.log-warn .log-msg { color: #f5c038; }
.log-entry.log-crit .log-msg { color: var(--dp-color-interference); font-weight: 700; }
.log-entry.log-max .log-msg { color: #ff385c; font-weight: 700; }

.dash-dispatch-card {
  background: var(--dp-color-plate);
  border: 1px solid var(--dp-color-line);
  padding: 20px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.dash-dispatch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(48, 76, 59, 0.4);
  font-family: var(--dp-typography-mono);
  font-size: 13px;
}

.dash-dispatch-row:last-child {
  border-bottom: 0;
}

/* ---------- Responsive Breakpoints (1050px & 700px) ---------- */
@media (max-width: 1050px) {
  .dash-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-dual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .dash-metrics-grid {
    grid-template-columns: 1fr;
  }
  .dash-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1050px) {
  .page-head-grid {
    grid-template-columns: 1fr auto;
    gap: 20px;
  }
  .hero-grid {
    grid-template-columns: 1fr 280px;
    gap: 28px;
  }
  .signal-object {
    width: 110px;
    height: 110px;
    flex-basis: 110px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 700px) {
  .page {
    padding-left: 20px;
    padding-right: 16px;
  }
  section::before {
    left: -25px; /* adjust for narrower left padding */
  }
  .page-head-grid {
    grid-template-columns: 1fr;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-visual {
    max-width: 380px;
    margin: 8px auto 0;
  }
  .signal-object {
    display: none; /* reduce signal object per prompt */
  }
  .page-head h2 {
    font-size: clamp(1.85rem, 6.5vw, 2.6rem);
  }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 {
    grid-template-columns: 1fr;
  }
  /* Facts row remains in two columns per prompt rule */
  .facts-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .footer-nav {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
  .kv li {
    flex-direction: column;
    gap: 2px;
  }
  .kv .k {
    flex-basis: auto;
  }
}

@media (max-width: 480px) {
  .facts-row {
    grid-template-columns: 1fr !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}


/* diagram figures (graphic replacements for former ascii art) */
.arch-figure, .diagram-figure {
  margin: 18px 0;
}

.arch-figure img, .diagram-figure img {
  display: block;
  width: 50%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--dp-color-line);
  background: var(--dp-color-ground);
}

.arch-figure figcaption, .diagram-figure {
  text-align: center;
}

.arch-figure figcaption {
  max-width: 520px;
  margin: 8px auto 0;
}

.arch-figure figcaption {
  margin-top: 8px;
  font-family: var(--dp-typography-mono);
  font-size: var(--dp-typography-small);
  line-height: 1.5;
  color: var(--dp-color-ink-body);
}