/* app.css — Tribe cabinet, mobile-first.
   Single centred column (max ~520px), large tap targets (min 44px), bottom-safe
   areas, no horizontal scroll. Component vocabulary mirrors admin-ui (card, btn,
   chip, field, skeleton, toast, shake) so the two apps feel like one product. */

/* ============================================================
   LAYOUT — single centred column, safe-area aware
   ============================================================ */
#app{
  width:100%;
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  padding:
    calc(env(safe-area-inset-top) + 16px)
    calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 24px)
    calc(env(safe-area-inset-left) + 16px);
  display:flex;
  flex-direction:column;
}

/* When a screen wants its primary action pinned to the bottom of the viewport
   (login, connect sheet), it lives in a .screen with a .screen__foot. */
.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.screen__body{ flex:1; }
/* Login: centre the card + foot-hint block in the viewport (cross-axis stays
   stretch so .btn--block buttons keep full width). */
.screen--center .screen__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}
.screen__foot{
  position:sticky;
  bottom:0;
  padding-top:14px;
  /* fade the column edge under the pinned button so content scrolls cleanly */
  background:linear-gradient(180deg, transparent, var(--tg-bg) 38%);
  margin-top:14px;
}

/* ============================================================
   BRAND
   ============================================================ */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.brand--stack{ flex-direction:column; gap:14px; }
.brand-text{ display:flex; flex-direction:column; align-items:center; }
.brand-word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:30px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--text-1);
}
.brand-sub{
  font-size:10px;
  letter-spacing:.2em;
  line-height:1;
  margin-top:6px;
}

/* Top app-bar on the dashboard: small mark + title left, action right */
.appbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.appbar__brand{ display:flex; align-items:center; gap:9px; }
/* Wordmark cap-height ≈ the mark height (makeBrandMark(0.5) ≈ 23px) so the
   lockup reads as one unit — see documents/BRAND.md. */
.appbar__word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:30px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--text-1);
}

/* ============================================================
   CARD
   ============================================================ */
.card{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:18px;
}
.card + .card{ margin-top:14px; }
.card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:var(--text-1);
  margin:0;
}
.card__desc{
  color:var(--text-2);
  font-size:13.5px;
  margin:6px 0 0;
  line-height:1.5;
}
.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* "Скоро" disabled placeholder card (wallet, gift, referral, team) */
.card--soon{ opacity:.72; }
.card--soon .card__title::after{
  content:"скоро";
  margin-left:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-3);
  vertical-align:middle;
  border:1px solid var(--border-2);
  border-radius:var(--r-pill);
  padding:2px 8px;
}

/* ============================================================
   SUBSCRIPTION HERO (top dashboard card)
   ============================================================ */
.sub-card{
  background:
    radial-gradient(140% 120% at 85% -20%, var(--accent-glow), transparent 55%),
    var(--glass-strong);
  border:1px solid var(--border-2);
}
.sub-card__count{
  font-family:var(--font-display);
  font-weight:800;
  font-size:26px;
  letter-spacing:-.01em;
  color:var(--text-1);
  margin:12px 0 2px;
}
.sub-card__sub{ color:var(--text-2); font-size:13.5px; }

/* ============================================================
   PILLS / CHIPS
   ============================================================ */
.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  padding:5px 12px;
  border-radius:var(--r-pill);
  color:var(--text-2);
  background:var(--glass);
  border:1px solid var(--border);
}
.pill::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
}
.pill--on  { background:rgba(65,194,140,.16); color:var(--connected); border:none; }
.pill--trial{ background:rgba(124,162,208,.16); color:var(--accent-bright); border:none; }
.pill--off { background:rgba(226,98,92,.16);  color:var(--danger);    border:none; }

/* ============================================================
   BUTTONS — min 44px tap target
   ============================================================ */
.btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  border-radius:var(--r-md);
  padding:13px 18px;
  min-height:48px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:.16s;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn--block{ width:100%; }
.btn--primary{
  background:var(--accent);
  color:var(--on-acc);
  border-color:rgba(195,218,240,.45);
  box-shadow:0 10px 28px -12px var(--accent-glow);
}
.btn--primary:hover{ background:#8fb2da; }
.btn--primary:active{ filter:brightness(.96); }
.btn--ghost{
  background:var(--glass-strong);
  color:var(--text-1);
  border-color:var(--border-2);
}
.btn--ghost:hover{ background:var(--surface-2); }
.btn--danger{
  background:rgba(226,98,92,.14);
  color:var(--danger);
  border-color:rgba(226,98,92,.4);
}
.btn--danger:hover{ background:rgba(226,98,92,.22); }
.btn--sm{ min-height:38px; padding:8px 14px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{
  color:var(--text-3);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
}
.field input{
  background:var(--bg-900);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:16px;            /* >=16px so iOS Safari never zooms on focus */
  padding:13px 14px;
  width:100%;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,162,208,.18);
}
/* big spaced monospace input for the 6-digit email code */
.field--code input{
  font-family:var(--font-mono);
  text-align:center;
  letter-spacing:.5em;
  font-size:22px;
  padding-left:.5em;        /* compensate trailing letter-spacing */
}
.form-err{
  color:var(--danger);
  font-size:13px;
  margin:8px 0 0;
  min-height:18px;
}

/* ============================================================
   ROWS (devices, account identities)
   ============================================================ */
.row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--border);
}
.row:first-of-type{ border-top:none; padding-top:6px; }
.row__icon{
  flex:0 0 auto;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  background:var(--glass-strong);
  color:var(--text-2);
}
.row__main{ flex:1; min-width:0; }
.row__title{
  font-size:14.5px;
  font-weight:600;
  color:var(--text-1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.row__sub{ font-size:12.5px; color:var(--text-3); margin-top:2px; }
.row__action{ flex:0 0 auto; }

/* key/value display value (mono) */
.kv-val{ font-family:var(--font-mono); color:var(--text-1); font-size:13.5px; }

/* ============================================================
   CONNECT SHEET — bottom sheet modal
   ============================================================ */
.sheet-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,4,12,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:fade .2s ease both;
}
.sheet{
  width:100%;
  max-width:520px;
  background:var(--surface-1);
  border:1px solid var(--border-2);
  border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -20px 60px rgba(0,4,12,.7);
  padding:10px 20px calc(env(safe-area-inset-bottom) + 22px);
  max-height:92vh;
  overflow-y:auto;
  animation:sheet-up .26s cubic-bezier(.22,.8,.3,1) both;
}
.sheet__grab{
  width:40px;height:4px;border-radius:999px;
  background:var(--border-3);
  margin:6px auto 14px;
}
.sheet__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  text-align:center;
  margin:0 0 4px;
}
.sheet__desc{
  text-align:center;
  color:var(--text-2);
  font-size:13.5px;
  margin:0 0 18px;
  line-height:1.5;
}

/* desktop: render the sheet centred rather than glued to the bottom edge */
@media (min-width:600px){
  .sheet-overlay{ align-items:center; }
  .sheet{ border-radius:var(--r-xl); border-bottom:1px solid var(--border-2); }
  .sheet__grab{ display:none; }
}

/* QR */
.qr-wrap{
  display:flex;
  justify-content:center;
  margin:0 0 18px;
}
.qr-box{
  background:#fff;
  padding:14px;
  border-radius:var(--r-md);
  line-height:0;
}
.qr-box svg{ display:block; }

/* key block */
.keybox{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-900);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:12px 14px;
  margin-bottom:14px;
}
.keybox__val{
  flex:1;
  min-width:0;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-1);
  word-break:break-all;
}

/* ============================================================
   SKELETON
   ============================================================ */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ============================================================
   SPINNER
   ============================================================ */
.spinner{
  display:inline-block;
  width:18px;height:18px;
  border:2px solid rgba(124,162,208,.25);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}
.spinner--lg{ width:34px;height:34px;border-width:3px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.wait{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  color:var(--text-2);
  font-size:14px;
  padding:8px 0;
}

/* ============================================================
   ENTRANCE / ERROR ANIMATIONS
   ============================================================ */
.rise{ animation:rise .6s cubic-bezier(.22,.8,.3,1) both; }
@keyframes rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes sheet-up{ from{transform:translateY(24px);opacity:.6} to{transform:translateY(0);opacity:1} }

@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)} 40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
}
.shake{ animation:shake .4s cubic-bezier(.36,.07,.19,.97) both; }

/* ============================================================
   TOAST
   ============================================================ */
#toast-root{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom) + 20px);
  transform:translateX(-50%);
  z-index:2000;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
  width:calc(100% - 32px);
  max-width:480px;
}
.toast{
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  color:var(--text-2);
  font-size:13.5px;
  padding:12px 18px;
  box-shadow:0 8px 24px rgba(0,4,12,.45);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .22s, transform .22s;
  pointer-events:auto;
  text-align:center;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast--error{ border-color:rgba(226,98,92,.5); color:var(--danger); }

/* ============================================================
   ERROR / RETRY STATE
   ============================================================ */
.state{
  text-align:center;
  padding:40px 16px;
  color:var(--text-2);
}
.state p{ margin:0 0 16px; }

/* ============================================================
   FOOTER HINT (login)
   ============================================================ */
.foot-hint{
  text-align:center;
  font-size:13px;
  color:var(--text-3);
  margin-top:18px;
}
.foot-hint a{ color:var(--accent-bright); text-decoration:none; font-weight:600; }
.foot-hint a:hover{ text-decoration:underline; }

/* ============================================================
   SCROLLBARS
   ============================================================ */
::-webkit-scrollbar{ width:8px;height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--border-3); }