/* ==========================================================================
   KALIOZ // SMART-HOME.CSS — presentation deck for /modular-smart-home/
   Loaded after theme.css + main.css; only this page links it.
   ========================================================================== */

/* --------------------------------------------------------- DECK HEADER --- */
.deck-hero {
  position: relative;
  padding: calc(var(--k-header-h) + 64px) 0 40px;
  overflow: hidden;
}
.deck-hero__eyebrow {
  font-family: var(--k-font-mono);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--k-text-dim);
  margin: 0 0 14px;
}
.deck-hero__eyebrow span { color: var(--k-neon); }
.deck-hero__title {
  font-family: var(--k-font-display);
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--k-text-strong);
  text-shadow: 0 0 30px rgba(0, 255, 245, 0.18);
}
.deck-hero__title em { font-style: normal; color: var(--k-neon); }
.deck-hero__lead {
  max-width: 68ch;
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  color: var(--k-text-dim);
  margin: 0 0 22px;
}
.deck-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.deck-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --------------------------------------------------------- STAT READOUT --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.stat {
  background: var(--k-surface);
  border: 1px solid var(--k-line-soft);
  border-left: 2px solid var(--k-neon);
  border-radius: var(--k-radius-sm);
  padding: 16px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stat__value {
  display: block;
  font-family: var(--k-font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 2px;
  color: var(--k-text-strong);
}
.stat__label {
  display: block;
  margin-top: 6px;
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--k-text-dim);
}

/* --------------------------------------------------- STICKY DECK NAV -----
   Layer order (see theme.css → FULL-SCREEN NAV OVERLAY):
   section content (auto) < .deck-nav 160 < .nav 180 < .hud 200 < palette 500.
   The bar has to stay BELOW the full-screen menu, otherwise the opened burger
   menu would be painted under the chapter links. */
.deck-nav {
  position: sticky;
  top: var(--k-header-h);
  z-index: 160;
  margin-top: 34px;
  background: rgba(5, 6, 10, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--k-line-soft);
  border-bottom: 1px solid var(--k-line-soft);
}
body.is-light .deck-nav { background: rgba(238, 242, 247, 0.9); }
.deck-nav__scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 0;
}
.deck-nav__scroll::-webkit-scrollbar { display: none; }
.deck-nav__link {
  flex: 0 0 auto;
  font-family: var(--k-font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--k-text-dim);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}
.deck-nav__link:hover { color: var(--k-neon); border-color: var(--k-line); }
.deck-nav__link[aria-current="true"] {
  color: var(--k-text-strong);
  border-color: var(--k-line);
  background: var(--k-surface);
  box-shadow: inset 0 0 18px rgba(0, 255, 245, 0.1);
}

/* -------------------------------------------------------- DECK SECTIONS -- */
.deck-section { scroll-margin-top: calc(var(--k-header-h) + 78px); }
.deck-section + .deck-section { border-top: 1px dashed var(--k-line-soft); }
.deck-head { max-width: 760px; }
.deck-head p { color: var(--k-text-dim); }

/* ----------------------------------------------------- ARCHITECTURE MAP -- */
.arch {
  margin-top: 30px;
  padding: clamp(18px, 3vw, 32px);
  background: var(--k-surface);
  border: 1px solid var(--k-line-soft);
  border-radius: var(--k-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.arch__layer { position: relative; }
.arch__layer + .arch__layer { margin-top: 34px; }
.arch__layer + .arch__layer::before {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, var(--k-neon));
}
.arch__legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--k-text-dim);
}
.arch__legend b { color: var(--k-neon); font-weight: 400; }
.arch__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.arch__node {
  position: relative;
  padding: 14px 12px;
  border: 1px solid var(--k-line-soft);
  border-radius: var(--k-radius-sm);
  background: rgba(0, 255, 245, 0.04);
  text-align: center;
  transition: border-color 0.3s, transform 0.3s var(--k-ease), box-shadow 0.3s;
}
.arch__node:hover { border-color: var(--k-neon); transform: translateY(-3px); box-shadow: var(--k-glow); }
.arch__node i {
  display: block;
  font-style: normal;
  font-family: var(--k-font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--k-neon);
  margin-bottom: 6px;
}
.arch__node strong { display: block; font-size: 0.92rem; letter-spacing: 1px; }
.arch__node small { display: block; margin-top: 4px; color: var(--k-text-dim); font-size: 0.78rem; }
.arch__node--core { border-color: var(--k-neon); background: rgba(0, 255, 245, 0.08); }
.arch__node--radio { border-color: rgba(255, 43, 214, 0.4); background: rgba(255, 43, 214, 0.05); }
.arch__node--radio i { color: var(--k-neon-2); }

/* ------------------------------------------------------- MODULE CARDS ---- */
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.module-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--k-surface);
  border: 1px solid var(--k-line-soft);
  border-radius: var(--k-radius);
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.32s var(--k-ease), border-color 0.32s, box-shadow 0.32s;
}
.module-card:hover { transform: translateY(-5px); border-color: var(--k-neon); box-shadow: var(--k-shadow); }
.module-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.module-card__id {
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--k-accent);
}
.module-card h3 { margin: 0; font-size: 1.06rem; letter-spacing: 2px; }
.module-card p { margin: 0; color: var(--k-text-dim); font-size: 0.92rem; }
.module-card__io {
  margin-top: auto;
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--k-text-dim);
  border-top: 1px dashed var(--k-line-soft);
  padding-top: 10px;
}
.module-card--planned { border-style: dashed; }

/* ------------------------------------------------------------- SPECS ----- */
.specs {
  margin-top: 30px;
  overflow-x: auto;
  border: 1px solid var(--k-line-soft);
  border-radius: var(--k-radius);
  background: var(--k-surface);
}
.specs table { width: 100%; border-collapse: collapse; min-width: 620px; }
.specs th,
.specs td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--k-line-soft);
  font-size: 0.92rem;
}
.specs th {
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--k-neon);
  background: rgba(0, 255, 245, 0.05);
}
.specs tr:last-child td { border-bottom: 0; }
.specs td:first-child { color: var(--k-text-strong); white-space: nowrap; }
.specs td.mono { font-family: var(--k-font-mono); color: var(--k-text-dim); }

/* ------------------------------------------------------------ PANELS ----- */
.panel-grid--tight { margin-top: 26px; }
.panel-grid .panel h3 { letter-spacing: 2px; }
.panel-grid .panel ul { margin: 10px 0 0; padding-left: 18px; color: var(--k-text-dim); }
.panel-grid .panel li { margin: 4px 0; }

/* ---------------------------------------------------------- TIMELINE ----- */
.timeline { position: relative; margin-top: 34px; padding-left: 26px; }
.timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--k-neon), var(--k-neon-2), transparent);
}
.timeline__step { position: relative; padding: 0 0 26px 8px; }
.timeline__step::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -26px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--k-neon);
  background: var(--k-bg);
  box-shadow: 0 0 10px rgba(0, 255, 245, 0.55);
}
.timeline__step h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.timeline__step p { margin: 0; color: var(--k-text-dim); font-size: 0.94rem; }
.timeline__meta {
  display: block;
  margin-bottom: 6px;
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--k-accent);
}

/* ------------------------------------------------------ PROGRESS BARS ---- */
.bars { display: grid; gap: 16px; margin-top: 28px; --k-bar: 0%; }
.bar__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--k-font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--k-text-dim);
}
.bar__head b { color: var(--k-text-strong); font-weight: 400; }
.bar__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(124, 246, 255, 0.09);
  border: 1px solid var(--k-line-soft);
  overflow: hidden;
}
.bar__track i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--k-neon), var(--k-neon-2));
  box-shadow: 0 0 12px rgba(0, 255, 245, 0.5);
  transition: width 1.2s var(--k-ease);
}
/* Fill the bar as soon as the surrounding block is revealed */
[data-reveal].is-visible .bar__track i { width: var(--k-bar, 0%); }

/* ------------------------------------------------------- TELEMETRY BOARD -- */
.board {
  margin-top: 30px;
  border: 1px solid var(--k-line-soft);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--k-line-soft);
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--k-text-dim);
}
.board__rows { display: grid; }
.board__row {
  display: grid;
  grid-template-columns: 14px minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--k-line-soft);
  font-family: var(--k-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
}
.board__row:last-child { border-bottom: 0; }
.board__row:hover { background: rgba(0, 255, 245, 0.04); }
.board__row span:nth-child(2) { color: var(--k-text-strong); letter-spacing: 2px; }
.board__row span:nth-child(3) { color: var(--k-text-dim); }
.board__row span:nth-child(4) { color: var(--k-neon); }

.led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--k-text-dim);
}
.led--ok { background: var(--k-ok); box-shadow: 0 0 10px rgba(57, 255, 136, 0.7); animation: led-pulse 2.4s ease-in-out infinite; }
.led--warn { background: var(--k-warn); box-shadow: 0 0 10px rgba(255, 157, 46, 0.7); animation: led-pulse 1.4s ease-in-out infinite; }
.led--off { background: #3a4756; }
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* --------------------------------------------------------------- CTA ----- */
.deck-cta {
  margin: 60px 0 20px;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background: linear-gradient(120deg, rgba(0, 255, 245, 0.08), rgba(255, 43, 214, 0.06));
  text-align: center;
}
.deck-cta h2 { margin: 0 0 10px; letter-spacing: 3px; text-transform: uppercase; }
.deck-cta p { margin: 0 auto 22px; max-width: 60ch; color: var(--k-text-dim); }
.deck-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------ RESPONSIVE ------- */
@media (max-width: 720px) {
  .deck-hero { padding-top: calc(var(--k-header-h) + 34px); }
  .deck-nav { top: 0; }
  .deck-section { scroll-margin-top: 86px; }
  .board__row { grid-template-columns: 12px 1fr; row-gap: 4px; }
  .board__row span:nth-child(3) { grid-column: 2; }
  .board__row span:nth-child(4) { grid-column: 2; color: var(--k-neon); }
}

@media (prefers-reduced-motion: reduce) {
  .led--ok, .led--warn { animation: none; }
  .bar__track i { transition: none; }
}

/* ----------------------------------------------------------- UTILITIES --- */
/* Inline marker for decision / rule ids inside running text ("D-012", "R-05"). */
.mono {
  font-family: var(--k-font-mono);
  font-size: 0.94em;
  letter-spacing: 1px;
  color: var(--k-accent);
  white-space: nowrap;
}

/* Chapter readout on the right edge of the sticky deck nav */
.deck-nav__counter {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
  padding-left: 16px;
  font-family: var(--k-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--k-text-dim);
  white-space: nowrap;
}

/* ==========================================================================
   LIGHT THEME — the deck leans on cyan glows, which turn muddy on light
   surfaces. Everything below only re-tints the hardcoded rgba() values.
   ========================================================================== */
body.is-light .deck-hero__title { text-shadow: 0 0 26px rgba(122, 47, 214, 0.16); }
body.is-light .deck-nav__link[aria-current="true"] { box-shadow: inset 0 0 18px rgba(122, 47, 214, 0.12); }
body.is-light .arch__node { background: rgba(122, 47, 214, 0.05); }
body.is-light .arch__node--core { background: rgba(122, 47, 214, 0.11); }
body.is-light .arch__node--radio {
  border-color: rgba(214, 0, 143, 0.35);
  background: rgba(214, 0, 143, 0.06);
}
body.is-light .timeline__step::before { box-shadow: 0 0 10px rgba(122, 47, 214, 0.42); }
body.is-light .bar__track { background: rgba(122, 47, 214, 0.13); }
body.is-light .bar__track i { box-shadow: 0 0 10px rgba(122, 47, 214, 0.35); }
body.is-light .specs th { background: rgba(122, 47, 214, 0.07); }
body.is-light .board__row:hover { background: rgba(122, 47, 214, 0.05); }
body.is-light .led--ok { box-shadow: 0 0 8px rgba(28, 154, 84, 0.55); }
body.is-light .led--warn { box-shadow: 0 0 8px rgba(184, 108, 8, 0.55); }
body.is-light .led--off { background: #b6bece; }
body.is-light .deck-cta {
  background: linear-gradient(120deg, rgba(122, 47, 214, 0.08), rgba(214, 0, 143, 0.06));
}