/* Meta Ray-Ban Display: 600x600dp additive waveguide.
   #000 emits no light (transparent, real world shows through); #FFF is max brightness. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 600px;
  height: 600px;
  overflow: hidden;
  background: #000000; /* transparent on the additive display */
  color: #FFFFFF;
  font-family: system-ui, -apple-system, sans-serif;
}

.app-root {
  width: 600px;
  height: 600px;
  padding: 8px; /* 8dp safe margin — edge content gets clipped by rubberbanding */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header: 24dp from top, 64dp tall */
.header {
  margin-top: 24px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header h1 { font-size: 28px; font-weight: 700; }          /* Heading 1 */
.header-meta { font-size: 14px; color: #B0B3B8; }          /* Body 2, muted */

.content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* UI surfaces must never be #000 — they'd be invisible. */
.readout {
  width: 100%;
  background: #0a0a0f;
  border-radius: 24px;
  padding: 32px;
  text-align: center;
}

.readout-label { font-size: 12px; color: #B0B3B8; text-transform: uppercase; letter-spacing: 1px; }
.readout-value { font-size: 28px; font-weight: 700; margin-top: 12px; word-break: break-word; }
.readout-hint  { font-size: 14px; color: #E4E6EB; margin-top: 12px; }

.nav-bar {
  flex-shrink: 0;
  display: flex;
  gap: 24px; /* rail spacing */
  padding-bottom: 24px;
}

/* 88dp minimum tap/focus target */
.nav-item {
  flex: 1;
  height: 88px;
  background: #1C1E21;
  color: #FFFFFF;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  opacity: 0.8; /* idle */
  transition:
    transform 475ms cubic-bezier(0.6, 0, 0.4, 1),
    opacity 300ms cubic-bezier(0.4, 0.04, 0.5, 1);
}

.nav-item.primary { background: #2a2d31; }

/* Targeted: container scales down 8dp of its 88dp height, content hits full brightness. */
.nav-item:focus {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
  opacity: 1;
  transform: scale(calc(1 - 8/88));
}

.nav-item:active { transition-duration: 100ms; transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  .nav-item { transition: none; }
}