/* Meta Ray-Ban Display design constraints:
   - 600x600 viewport, full color
   - dark/black background (black renders transparent on the additive display)
   - high-contrast text + a bright, obvious focus ring (D-pad focus management)
   - interactive elements are `.focusable` */

:root {
  --bg: #000;
  --fg: #ffffff;
  --muted: #9aa0a6;
  --accent: #7cc4ff;
  --card: #11151c;
  --card-focus: #1b2636;
  --border: #2a313c;
  --focus: #7cc4ff;
  --danger: #ff8a8a;
}

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

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100vw;
  height: 100vh;
  max-width: 600px;
  max-height: 600px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen.hidden { display: none; }
.hidden { display: none !important; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.topbar .title { font-size: 20px; font-weight: 700; }
.topbar .status { font-size: 14px; color: var(--muted); }

.content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  scrollbar-width: none; /* the scroll position is driven by the D-pad */
}
.content::-webkit-scrollbar { display: none; }

.focusable { outline: none; }

/* ---- Feed cards ---- */
.card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.card:focus { border-color: var(--focus); background: var(--card-focus); }
.card-title { font-size: 21px; font-weight: 600; line-height: 1.25; }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 14px;
  color: var(--muted);
}
.card-meta .tag { color: var(--accent); font-weight: 600; }
.card-meta .dot { color: var(--border); }
.card-snippet {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: #c9cdd3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.more, .btn {
  display: block;
  width: 100%;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  color: var(--fg);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.more:focus, .btn:focus { border-color: var(--focus); background: var(--card-focus); }
.btn.ghost { background: transparent; }

.empty { color: var(--muted); text-align: center; padding: 48px 8px; font-size: 16px; line-height: 1.5; }

/* ---- Post view ---- */
.post-title { font-size: 25px; line-height: 1.25; margin-bottom: 8px; }
.post-meta { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.post-body p { font-size: 19px; line-height: 1.55; margin-bottom: 12px; }
.comments-h {
  font-size: 19px;
  color: var(--accent);
  margin: 18px 0 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.comment { margin-bottom: 16px; }
.c-persona { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.c-body p { font-size: 19px; line-height: 1.55; margin-bottom: 9px; color: #e6e9ed; }

.backbtn {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--accent);
  font-size: 17px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
.backbtn:focus { border-color: var(--focus); }

/* ---- Setup ---- */
.setup { display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; height: 100%; padding-top: 26px; }
.setup > * { flex-shrink: 0; }
.setup a { color: var(--accent); }
.setup summary { cursor: pointer; color: var(--accent); }
.setup a:focus, .setup summary:focus { outline: 2px solid var(--focus); outline-offset: 3px; }
.setup details p { margin-top: 10px; }
.setup h1 { font-size: 30px; }
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.6; }
.msg { color: var(--danger); min-height: 1em; font-size: 15px; }
code { color: var(--accent); word-break: break-all; font-size: 13px; }
.token-input {
  background: #0b0e13;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  color: var(--fg);
  font-size: 15px;
}
.token-input:focus { border-color: var(--focus); }