/* ============================================================================
   Home Base — hub reframe (layers over styles.css; requires tokens.css)
   Turns home.alwynlabs.com into a command-deck-style hub: command bar,
   sub-deck module nav, and framed skeleton sub-decks for modules-in-progress.
   ========================================================================== */

/* ── COMMAND BAR ─────────────────────────────────────────────────────────── */
.home-header {
  display: flex; align-items: center; gap: 16px;
  height: 58px; padding: 0 2px; margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, var(--bg-base) 72%, transparent);
  backdrop-filter: blur(6px);
}
.home-header-left { display: flex; align-items: center; gap: 12px; }
.home-header .wordmark {
  font-family: var(--font-mono); font-weight: 600; font-size: 15px;
  letter-spacing: .04em; color: var(--ink);
}
.home-header .wordmark span { color: var(--cyan); }
.hub-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hub-phase {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-deep); border-radius: 2px;
  padding: 2px 7px; background: rgba(245, 181, 68, .06);
}
.home-header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.data-chip {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 2px; padding: 5px 10px;
}
.data-chip .data-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px -1px currentColor; }
.data-chip.live  { color: var(--signal); }
.data-chip.stale { color: var(--gold); }
.data-chip.down  { color: var(--danger); }
.portal-link {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.portal-link:hover { color: var(--cyan); }

/* ── SUB-DECK MODULE NAV ─────────────────────────────────────────────────── */
.module-tabs {
  display: flex; gap: 2px; margin: 20px 0 10px;
  border-bottom: 1px solid var(--line);
}
.module-tab {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 11px 16px; position: relative; background: none; border: none;
  transition: color .2s var(--ease);
}
.module-tab:hover:not(.disabled) { color: var(--ink-dim); }
.module-tab.active { color: var(--cyan); }
.module-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 10px -1px var(--cyan);
}
.module-tab.disabled { color: var(--ink-ghost); cursor: not-allowed; }

/* ── FRAMED SKELETON SUB-DECK (Water / Grow — modules in progress) ───────── */
.hub-skeleton { padding: 6px 0 48px; }
.hub-skel-intro {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim);
  line-height: 1.6; max-width: 62ch; margin: 8px 0 4px;
}
.hub-skel-intro b { color: var(--ink); font-weight: 600; }
.hub-skel-head { display: flex; align-items: center; gap: 14px; margin: 28px 0 16px; }
.hub-skel-head .lbl { white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.hub-skel-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-bright), transparent); }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.hub-slot {
  position: relative; border: 1px dashed var(--line-bright); border-radius: var(--radius);
  padding: 18px; min-height: 128px; background: rgba(255, 255, 255, .008);
  display: flex; flex-direction: column; gap: 8px;
}
.hub-slot::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent, var(--cyan)); opacity: .45;
}
.hub-slot .slot-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-ghost); }
.hub-slot h4 { font-size: 14.5px; color: var(--ink); margin: 2px 0 2px; font-weight: 500; }
.hub-slot p { font-size: 12px; color: var(--ink-mute); line-height: 1.5; flex: 1; }
.hub-slot .slot-status {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid currentColor; border-radius: 2px;
}
.slot-status.ready   { color: var(--signal); }
.slot-status.soon    { color: var(--gold); }
.slot-status.planned { color: var(--ink-mute); }
.slot-status.data    { color: var(--cyan); }