/* ============================================================
   breakfast.money — the GAME app.
   Reuses the design system (tokens) + landing components, and adds
   product surfaces: auth, username, onboarding, dashboard, board.
   Link order: styles.css (tokens) -> landing.css (components) -> app.css
   ============================================================ */

.app {
  max-width: var(--bm-col-max);
  margin: 0 auto;
  padding: 0 var(--bm-gutter) var(--bm-space-12);
  min-height: 100vh;
}

/* ---- top bar ---- */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 26px;
  gap: 12px;
}
.appbar__user { display: flex; align-items: center; gap: 10px; }
.appbar__avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bm-ink); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bm-cream); font-family: var(--bm-font-pixel); font-size: 14px;
}
.appbar__name {
  font-family: var(--bm-font-pixel); font-size: 14px;
  letter-spacing: var(--bm-pixel-tracking); color: var(--bm-ink);
}
.linkbtn {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-family: var(--bm-font-pixel); text-transform: uppercase;
  font-size: 12px; letter-spacing: .5px; color: var(--bm-olive);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- view switching ---- */
.view { display: none; }
.view.is-active { display: block; }
.view--center { text-align: center; }

/* ---- generic vertical rhythm ---- */
.stack-lg { display: flex; flex-direction: column; gap: 22px; }
.stack-md { display: flex; flex-direction: column; gap: 14px; }
.center { text-align: center; }
.muted { color: var(--bm-olive); font-size: var(--bm-text-md); line-height: 1.5; }
.muted-ink { color: var(--bm-cream-mute); font-size: var(--bm-text-sm); line-height: 1.5; }

/* ============================================================
   FORM FIELDS  (cream inputs on the sage table)
   ============================================================ */
.field { text-align: left; }
.field__label {
  display: block;
  font-family: var(--bm-font-pixel); text-transform: uppercase;
  font-size: 12px; letter-spacing: 1px; color: var(--bm-olive);
  margin: 0 0 8px;
}
.input {
  width: 100%;
  font-family: var(--bm-font-pixel); font-size: 17px;
  letter-spacing: var(--bm-pixel-tracking);
  color: var(--bm-ink); background: var(--bm-cream);
  border: 3px solid var(--bm-ink); border-radius: var(--bm-radius-lg);
  padding: 14px 16px; outline: none;
}
.input::placeholder { color: var(--bm-cream-faint); }
.input:focus { box-shadow: 0 0 0 3px var(--bm-acid); }
.input--prefixed { padding-left: 34px; }
.field__wrap { position: relative; }
.field__prefix {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--bm-font-pixel); font-size: 17px; color: var(--bm-cream-faint);
  pointer-events: none;
}
.field__msg { font-size: 13px; margin: 8px 2px 0; min-height: 18px; font-family: var(--bm-font-sans); }
.field__msg--ok    { color: var(--bm-acid-deep); }
.field__msg--bad   { color: var(--bm-ketchup); }
.field__msg--muted { color: var(--bm-olive); }

/* ============================================================
   GOOGLE SIGN-IN + DEV LOGIN
   ============================================================ */
.signin-card {
  background: var(--bm-ink); color: var(--bm-cream);
  border-radius: var(--bm-radius-xl); padding: 26px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.gsi-host { min-height: 44px; display: flex; justify-content: center; }
/* Fallback Google button (used when GIS can't render, e.g. no client id) */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bm-cream); color: var(--bm-ink); border: none; cursor: pointer;
  font-family: var(--bm-font-pixel); font-size: 15px; letter-spacing: .5px;
  text-transform: uppercase; padding: 14px 20px; border-radius: var(--bm-radius-lg);
  box-shadow: 0 5px 0 #c9cdbe; transition: transform .07s ease, box-shadow .07s ease;
}
.gbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #c9cdbe; }
.gbtn__g {
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bm-font-sans); font-weight: 800; color: #4285F4; font-size: 13px;
}
.dev-login { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.dev-login .input { background: var(--bm-ink-panel); color: var(--bm-cream); border-color: var(--bm-ink-track); }
.dev-divider {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: var(--bm-cream-faint); font-family: var(--bm-font-pixel); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
}
.dev-divider::before, .dev-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--bm-ink-track);
}

/* ============================================================
   ONBOARDING STEPS + STATUS CHIPS
   ============================================================ */
.steps { display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.step {
  background: var(--bm-ink); color: var(--bm-cream);
  border-radius: var(--bm-radius-lg); padding: 16px 18px;
  display: flex; gap: 14px; align-items: flex-start;
}
.step__n {
  font-family: var(--bm-font-pixel); font-size: 20px; color: var(--bm-yolk);
  flex: 0 0 auto; width: 28px;
}
.step__body { flex: 1; }
.step__title {
  font-family: var(--bm-font-pixel); text-transform: uppercase; font-size: 15px;
  letter-spacing: var(--bm-pixel-tracking); margin: 0 0 4px;
}
.step__text { font-family: var(--bm-font-sans); font-size: 13px; color: var(--bm-cream-dim); line-height: 1.45; margin: 0; }
.step__text a { color: var(--bm-acid); }

.chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-family: var(--bm-font-pixel); text-transform: uppercase; font-size: 11px;
  letter-spacing: .5px; padding: 6px 10px; border-radius: 999px;
  background: var(--bm-ink-track); color: var(--bm-cream-mute);
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bm-cream-faint); }
.chip.is-ok { color: var(--bm-ink); background: var(--bm-acid); }
.chip.is-ok .chip__dot { background: var(--bm-ink); }
.chip.is-bad { color: var(--bm-cream); background: var(--bm-ketchup); }
.chip.is-bad .chip__dot { background: var(--bm-cream); }

/* ============================================================
   DASHBOARD — weekly stat tiles
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat {
  background: var(--bm-ink); color: var(--bm-cream);
  border-radius: var(--bm-radius-lg); padding: 16px 14px; text-align: center;
}
.stat__num { font-family: var(--bm-font-pixel); font-size: 34px; line-height: 1; }
.stat__num--money  { color: var(--bm-yolk); }
.stat__num--ok     { color: var(--bm-acid); }
.stat__num--danger { color: var(--bm-ketchup); }
.stat__label {
  font-family: var(--bm-font-pixel); text-transform: uppercase; font-size: 11px;
  letter-spacing: .5px; color: var(--bm-cream-mute); margin-top: 8px;
}

/* leaderboard amount uses pixel + tabular feel; reuse .bm-leader from landing.css */
.bm-leader__sub { color: var(--bm-cream-faint); font-size: 12px; margin-left: 8px; }
.bm-leader--you .bm-leader__rank { color: var(--bm-yolk); }
.board-foot {
  font-family: var(--bm-font-sans); font-size: 12px; color: var(--bm-cream-mute);
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bm-ink-track);
}

/* avatar inside leader row */
.bm-leader__pic {
  width: 22px; height: 22px; border-radius: 6px; object-fit: cover;
  background: var(--bm-ink-track); flex: 0 0 auto;
}

/* ---- callout / template nudge ---- */
.callout {
  background: var(--bm-sage-deep);
  border: 3px solid var(--bm-ink);
  border-radius: var(--bm-radius-lg);
  padding: 16px 18px;
}
.callout__title {
  font-family: var(--bm-font-pixel); text-transform: uppercase; font-size: 14px;
  letter-spacing: var(--bm-pixel-tracking); margin: 0 0 6px; color: var(--bm-ink);
}
.callout__body { font-family: var(--bm-font-sans); font-size: 13px; color: var(--bm-olive); line-height: 1.5; margin: 0; }

/* ============================================================
   NOTE TEMPLATES (dashboard manager)
   ============================================================ */
.tpl-count { color: var(--bm-cream-mute); font-size: 13px; font-family: var(--bm-font-pixel); }
.tpl-empty { color: var(--bm-cream-mute); font-family: var(--bm-font-sans); font-size: 13px; margin: 12px 0 0; }
.tpl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--bm-ink-track); cursor: pointer;
}
.tpl-row__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--bm-cream-faint); flex: 0 0 auto;
}
.tpl-row.is-active .tpl-row__radio { border-color: var(--bm-acid); background: var(--bm-acid); box-shadow: inset 0 0 0 3px var(--bm-ink); }
.tpl-row__main { flex: 1; min-width: 0; }
.tpl-row__name { display: block; font-family: var(--bm-font-pixel); font-size: 14px; color: var(--bm-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-row__preview { display: block; font-family: var(--bm-font-sans); font-size: 12px; color: var(--bm-cream-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.tpl-row__edit {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-family: var(--bm-font-pixel); text-transform: uppercase; font-size: 12px;
  letter-spacing: .5px; color: var(--bm-cream-dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.tpl-new {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; margin-top: 12px; padding-top: 13px;
  border-top: 1px solid var(--bm-ink-track);
  font-family: var(--bm-font-pixel); text-transform: uppercase;
  font-size: 13px; letter-spacing: .5px; color: var(--bm-acid);
}

/* editor (on the sage table — reuses .field / .input form styling) */
.tpl-editor { margin-top: 16px; }
.input--note { font-family: var(--bm-font-sans); font-size: 15px; line-height: 1.45; min-height: 96px; resize: vertical; }
.input--over, .input--over:focus { box-shadow: 0 0 0 3px var(--bm-ketchup); border-color: var(--bm-ketchup); }
.tpl-bodycount { float: right; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--bm-olive); }
.tpl-bodycount.is-over { color: var(--bm-ketchup); }
.tpl-editor__actions { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.tpl-editor__row { display: flex; align-items: center; justify-content: space-between; }
.tpl-delete { color: var(--bm-ketchup); }

/* ============================================================
   SENT CONNECTIONS (browsable history)
   ============================================================ */
.conn-top { padding: 2px 0 10px; }
.conn-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.conn-filter {
  background: var(--bm-ink-panel); color: var(--bm-cream-mute);
  border: 2px solid var(--bm-ink-track); cursor: pointer;
  font-family: var(--bm-font-pixel); text-transform: uppercase; font-size: 11px;
  letter-spacing: .5px; padding: 7px 12px; border-radius: 999px;
}
.conn-filter.is-on { background: var(--bm-acid); color: var(--bm-ink); border-color: var(--bm-acid); }

.conn { background: var(--bm-ink); color: var(--bm-cream); border-radius: var(--bm-radius-lg); padding: 14px 16px; margin-bottom: 10px; }
.conn__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conn__name { font-family: var(--bm-font-pixel); font-size: 15px; color: var(--bm-cream); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.conn__name:hover { text-decoration: underline; }
.conn__status { flex: 0 0 auto; font-family: var(--bm-font-pixel); text-transform: uppercase; font-size: 10px; letter-spacing: .5px; padding: 4px 9px; border-radius: 999px; }
.conn__status--pending   { background: var(--bm-ink-track); color: var(--bm-cream-mute); }
.conn__status--accepted  { background: var(--bm-acid); color: var(--bm-ink); }
.conn__status--timed_out { background: var(--bm-ketchup); color: var(--bm-cream); }
.conn__status--withdrawn { background: var(--bm-ink-track); color: var(--bm-cream-faint); }
.conn__meta { font-family: var(--bm-font-sans); font-size: 12px; color: var(--bm-cream-mute); margin-top: 5px; }
.conn__msg { font-family: var(--bm-font-sans); font-size: 13px; color: var(--bm-cream-dim); line-height: 1.45; margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
.conn-empty { color: var(--bm-olive); font-family: var(--bm-font-sans); font-size: 13px; padding: 20px 0; text-align: center; }

.conn-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.conn-range { font-family: var(--bm-font-pixel); font-size: 12px; color: var(--bm-olive); }
.conn-pager .linkbtn:disabled { opacity: .4; cursor: default; text-decoration: none; }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--bm-ink); color: var(--bm-cream);
  font-family: var(--bm-font-pixel); font-size: 13px; letter-spacing: .5px;
  padding: 12px 18px; border-radius: var(--bm-radius-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 50;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--bad { background: var(--bm-ketchup); }

.is-hidden { display: none !important; }

@media (max-width: 380px) {
  .stat__num { font-size: 28px; }
}