/* Nimbus — base.css
 * TV design tokens + reset + overscan-safe layout.
 * Design space: 1920x1080 fixed (index.html sets width=1920). All px values
 * are authored in that space — no rem/viewport juggling.
 *
 * Overscan: consumer TVs crop the edges; nothing interactive or essential
 * sits within 60px of any viewport edge. #app gets the padding; overlays
 * that must be full-bleed opt out via [data-bleed].
 *
 * 10-foot UI: text sized for ~3m viewing. Body 32px, secondary 26px,
 * headings 56-88px. Never below 24px.
 *
 * Dark theme: deep navy backdrop, cool surfaces, cyan accent matching focus.
 */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--nb-bg, #06122b);
  color: var(--nb-text, #eaf3ff);
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

/* 1920x1080 design space, scaled to the real viewport by the shim in
 * index.html (TV browsers report smaller CSS viewports). transform-origin
 * top-left keeps the math simple; letterboxing shows the bg color. */
#stage {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  overflow: hidden;
  background: var(--nb-bg, #06122b);
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }

body {
  font-size: 32px;
  line-height: 1.4;
}

/* ---------- app frame ---------- */
#app {
  position: absolute;
  inset: 0;
}

/* Screens are stacked layers; the router hides non-top sections.
 * Overscan margin is applied per-section so full-bleed screens can opt out.
 * overflow-y: auto makes each screen its own scroll container — the stage is
 * overflow:hidden and must never scroll (it clips when scaled); without a
 * scrollable ancestor, focus below the fold is unreachable on TV. */
#app > section {
  position: absolute;
  inset: var(--nb-overscan, 60px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* padding (not scroll-padding) is what keeps the focus glow — outline 3px +
   * offset 2px + glow spread, ~10px — unclipped at the START edge of a
   * scroller: scroll-padding is only honoured by native scroll-into-view,
   * never by the manual scrollTop/scrollLeft writes focus.js performs. */
  padding: 12px;
  scroll-padding: 12px;
}
#app > section::-webkit-scrollbar { display: none; }

#app > section[data-bleed] {
  inset: 0;
  padding: 0;
}

/* ---------- tokens (plain custom properties) ---------- */
:root {
  /* color */
  --nb-bg:        #06122b;
  --nb-surface:   #0b1d45;
  --nb-surface-2: #12285c;
  --nb-border:    #1e3a7a;
  --nb-text:      #eaf3ff;
  --nb-text-dim:  #9fb4d9;
  --nb-accent:    #37c6e8;
  --nb-accent-2:  #2a7fd4;
  --nb-bolt:      #ffd83a;
  --nb-rain:      #4fa8ff;
  --nb-warm:      #ffb347;
  --nb-danger:    #ff5a5f;
  --nb-success:   #3ecf8e;

  /* layout */
  --nb-overscan: 60px;
  --nb-radius: 12px;
  --nb-radius-card: 10px;
  --nb-radius-pill: 999px;
  --nb-elev: 0 18px 40px rgba(0, 0, 0, 0.55);

  /* type scale (10-foot) */
  --nb-text-xs: 24px;
  --nb-text-sm: 26px;
  --nb-text-md: 32px;
  --nb-text-lg: 44px;
  --nb-text-xl: 56px;
  --nb-text-hero: 88px;

  /* focus glow (matches focus.js injected style; base.css wins the cascade) */
  --nb-focus-color: #37c6e8;
  --nb-focus-width: 3px;
  --nb-focus-glow: 0 0 18px 3px rgba(55, 198, 232, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nb-bg:        #06122b;
    --nb-surface:   #0b1d45;
    --nb-surface-2: #12285c;
    --nb-border:    #1e3a7a;
    --nb-text:      #eaf3ff;
    --nb-text-dim:  #9fb4d9;
    --nb-accent:    #37c6e8;
    --nb-accent-2:  #2a7fd4;
    --nb-bolt:      #ffd83a;
    --nb-rain:      #4fa8ff;
    --nb-warm:      #ffb347;
    --nb-danger:    #ff5a5f;
    --nb-success:   #3ecf8e;
  }
}

:root[data-theme="light"] {
  --nb-bg:        #ffffff;
  --nb-surface:   #f5f5f5;
  --nb-surface-2: #ececec;
  --nb-border:    #d0d0d0;
  --nb-text:      #000000;
  --nb-text-dim:  #666666;
  --nb-accent:    #0077cc;
  --nb-accent-2:  #0055aa;
  --nb-bolt:      #cc8800;
  --nb-rain:      #0055ff;
  --nb-warm:      #ff8844;
  --nb-danger:    #dd3333;
  --nb-success:   #228833;
}

.jv-focused {
  outline: var(--nb-focus-width) solid var(--nb-focus-color);
  outline-offset: 2px;
  box-shadow: var(--nb-focus-glow);
}

/* ---------- icon colors (used by icons.js) ---------- */
.nb-i-sun { color: var(--nb-bolt); }
.nb-i-moon { color: #ffd83a; opacity: 0.8; }
.nb-i-cloud { color: var(--nb-text-dim); fill: var(--nb-surface-2); }
.nb-i-rain { color: var(--nb-rain); }
.nb-i-bolt { color: var(--nb-bolt); fill: var(--nb-bolt); }

/* ---------- shared components ---------- */

.nb-title {
  font-size: var(--nb-text-hero);
  font-weight: 700;
  color: var(--nb-text);
  letter-spacing: -1px;
}

.nb-subtitle {
  font-size: var(--nb-text-md);
  color: var(--nb-text-dim);
}

.nb-heading {
  font-size: var(--nb-text-lg);
  font-weight: 600;
  color: var(--nb-text);
}

/* cards and tiles */
.nb-card {
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius);
  color: var(--nb-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--nb-text-sm);
  transition: transform 0.12s ease-out, background 0.12s ease-out;
}

.nb-card.jv-focused {
  transform: scale(1.06);
  background: var(--nb-surface-2);
}

/* buttons */
.nb-btn {
  background: var(--nb-surface-2);
  border: 1px solid var(--nb-border);
  border-radius: 10px;
  color: var(--nb-text);
  padding: 16px 36px;
  font-size: var(--nb-text-sm);
  transition: transform 0.12s ease-out, background 0.12s ease-out;
}

.nb-btn.jv-focused {
  background: var(--nb-accent-2);
}

/* chips (small status indicators) */
.nb-chip {
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-pill);
  color: var(--nb-text-dim);
  padding: 8px 16px;
  font-size: var(--nb-text-sm);
  display: inline-block;
  white-space: nowrap;
}

/* tabs */
.nb-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--nb-border);
  padding-bottom: 12px;
}

.nb-tab {
  background: none;
  border: 0;
  color: var(--nb-text-dim);
  padding: 0;
  font-size: var(--nb-text-sm);
  cursor: pointer;
  transition: color 0.12s ease-out;
  position: relative;
}

.nb-tab.nb-tab-active {
  color: var(--nb-accent);
}

.nb-tab.nb-tab-active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--nb-accent);
}

/* grid and row helpers */
.nb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.nb-grid .nb-card { height: 180px; }

.nb-row {
  display: flex;
  gap: 24px;
}

/* ---------- log overlay skin ---------- */
#nimbus-log-overlay {
  font-size: var(--nb-text-xs);
  background: rgba(6, 18, 43, 0.96);
}

/* ---------- keyboard component ---------- */
.jv-kb {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.jv-kb-display {
  background: var(--nb-surface);
  border: 2px solid var(--nb-border);
  border-radius: var(--nb-radius);
  padding: 18px 24px;
  font-size: var(--nb-text-lg);
  font-family: 'Cascadia Code', Consolas, monospace;
  color: var(--nb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jv-kb-controls { gap: 20px; }
.jv-kb-controls .nb-btn { flex: 0 0 auto; }

.jv-kb-shift-on {
  border-color: var(--nb-accent);
  color: var(--nb-accent);
}

.jv-kb-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jv-kb-row {
  display: flex;
  gap: 16px;
}

.jv-kb-key {
  flex: 0 0 96px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jv-kb-key.jv-kb-blank { visibility: hidden; }