/*
  styles.css — page-specific styles that aren't worth their own file.
  Token references resolve against Open-Props + shared/base.css aliases.

  Open-Props tokens used here (jump to the docs for the full scale):
    --size-N          spacing       https://open-props.style/#sizes
    --font-size-N     type scale    https://open-props.style/#typography
    --font-mono       monospace     https://open-props.style/#typography
    --radius-N        corners       https://open-props.style/#sizes
    --radius-round    pill / circle https://open-props.style/#sizes

  Semantic aliases (--surface-N, --text-N, --accent, --border, --danger)
  are defined in shared/base.css — change them once to re-skin the
  whole app.
*/

/* Login OTP step indicator */
.otp-step {
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* OTP code input: monospace + wider spacing so users can read each digit. */
.otp-code-input {
  font-family: var(--font-mono);
  font-size: var(--font-size-3);
  letter-spacing: 0.5em;
  text-align: center;
}

/* Theme toggle button in the topbar */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-1);
}

.theme-toggle:hover {
  background: var(--surface-3);
}

/* Authenticated home page */
.home-user-card pre {
  background: var(--surface-3);
  padding: var(--size-2);
  border-radius: var(--radius-2);
  overflow-x: auto;
  font-size: var(--font-size-0);
  color: var(--text-1);
}

/* ── Notes list (realtime demo) ── */
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-3);
  background: var(--surface-3);
  border-radius: var(--radius-2);
}

.note-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-delete {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--font-size-2);
  line-height: 1;
  padding: var(--size-1);
  border-radius: var(--radius-2);
}

.note-delete:hover {
  background: var(--surface-4);
  color: var(--danger);
}