/* ===========================================================
   APOLOGIA — Meta Ray-Ban Display web app
   Design rules baked in:
   - Fixed 600x600 viewport, no scroll (overflow hidden)
   - Pure black (#000) background = fully transparent on the lens
   - Bright, high-contrast colors only (gold + cyan accents)
   - Body text >= 16px; primary content 20-24px+
   - Focus ring is the ONLY hover concept (no mouse)
   =========================================================== */

:root {
  --bg:        #000000;   /* true black -> transparent on glasses */
  --card:      #0a1428;   /* dark navy, only for solid panels */
  --gold:      #f5c451;
  --cyan:      #00d4ff;
  --text:      #ffffff;
  --muted:     #9fb3c8;
}

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

html, body {
  width: 600px;
  height: 600px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { width: 600px; height: 600px; position: relative; }

/* ---- View switching ---- */
.view { display: none; width: 600px; height: 600px; padding: 24px; flex-direction: column; }
.view.active { display: flex; }

/* ---- Top bar ---- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex: 0 0 auto;
}
.brand {
  font-size: 26px; font-weight: 800; letter-spacing: 3px;
  color: var(--gold);
}
.hint { font-size: 16px; color: var(--muted); }

/* ---- List of topics ---- */
.topic-list { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }

.topic-btn {
  display: flex; align-items: center;
  min-height: 88px;            /* glasses minimum tap target */
  padding: 0 22px;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--text);
  font-size: 22px; font-weight: 600;
  text-align: left;
  transition: all 150ms ease;
}
.topic-btn .num { color: var(--cyan); font-weight: 800; margin-right: 16px; font-size: 20px; }

/* ---- Focus state (the ONLY selection cue) ---- */
.focusable:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.45);
}

/* ---- Detail view ---- */
.back {
  min-height: 56px; padding: 0 18px;
  background: var(--card); border: 2px solid transparent; border-radius: 12px;
  color: var(--text); font-size: 18px; font-weight: 600;
}
.detail-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.detail-title { font-size: 28px; font-weight: 800; color: var(--gold); line-height: 1.15; }
.detail-response { font-size: 21px; line-height: 1.4; color: var(--text); }

.verse-box {
  background: var(--card); border-radius: 14px; padding: 18px 20px;
  border-left: 4px solid var(--cyan);
}
.verse-ref  { font-size: 18px; font-weight: 800; color: var(--cyan); margin-bottom: 8px; letter-spacing: 1px; }
.verse-text { font-size: 20px; line-height: 1.4; color: var(--text); font-style: italic; }
.verse-dots { margin-top: 14px; display: flex; gap: 8px; }
.verse-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: 0.4; }
.verse-dots .dot.on { background: var(--cyan); opacity: 1; }

.detail-scholar {
  font-size: 17px; line-height: 1.35; color: var(--muted);
  border-top: 1px solid rgba(159,179,200,0.25); padding-top: 14px;
}