/* Каркас приложения: экраны, таб-бар, шапка. Только токены, ни одного сырого цвета. */
html,body{height:100%}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
#app{
  min-height:100dvh;display:flex;flex-direction:column;position:relative;isolation:isolate;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
#app::before{content:"";position:fixed;inset:0;background:var(--aura);pointer-events:none;z-index:-1}
:root{--tabbar-h:64px}

/* ——— экран ——— */
#screen{flex:1;min-height:0}
.screen{padding:var(--space-6) var(--space-6) var(--space-9);max-width:640px;margin:0 auto}
.screen--flush{padding-left:0;padding-right:0}
.screen-head{margin:0 0 var(--space-6)}
.screen-title{
  font-family:var(--font-display);font-size:var(--t-display-l-size);line-height:var(--t-display-l-lh);
  font-weight:var(--t-display-l-weight);letter-spacing:var(--t-display-l-tracking);margin:0;
}
.screen-sub{margin:var(--space-3) 0 0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);color:var(--c-text-2)}
.section-title{
  font-family:var(--font-display);font-size:var(--t-title-size);line-height:var(--t-title-lh);
  font-weight:var(--t-title-weight);letter-spacing:var(--t-title-tracking);margin:var(--space-8) 0 var(--space-5);
}
.section-title:first-child{margin-top:0}

/* ——— таб-бар ——— */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;
  grid-template-columns:repeat(var(--tabs,6),1fr);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--c-glass-chrome);backdrop-filter:blur(var(--blur-chrome));
  -webkit-backdrop-filter:blur(var(--blur-chrome));border-top:1px solid var(--c-border);
}
@supports not (backdrop-filter:blur(1px)){.tabbar{background:var(--c-surface)}}
.tab{
  appearance:none;background:none;border:0;cursor:pointer;font-family:var(--font-text);
  min-height:var(--tabbar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--c-text-3);font-size:10px;font-weight:500;letter-spacing:.01em;
  padding:0 2px;transition:color var(--motion-fast) var(--motion-ease);
}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--c-accent)}
.tab:focus-visible{outline:none;color:var(--c-accent);box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.tab{transition:none}}

/* ——— вспомогательное ——— */
.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.stack--tight{gap:var(--space-4)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.muted{color:var(--c-text-3)}
.center{text-align:center}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ——— тост ——— */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar-h) + 20px);z-index:60;
  background:var(--c-text);color:var(--c-bg);padding:var(--space-4) var(--space-6);
  border-radius:var(--radius-pill);font-size:var(--t-body-s-size);box-shadow:var(--shadow-lift);
  max-width:88vw;text-align:center;
}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:toast-in var(--motion-base) var(--motion-ease)}
  @keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* ——— нижняя шторка ——— */
.sheet-back{position:fixed;inset:0;z-index:50;background:var(--c-scrim);
  display:flex;align-items:flex-end;justify-content:center}
.sheet{
  width:100%;max-width:640px;max-height:88dvh;overflow-y:auto;background:var(--c-surface);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-6) var(--space-6)
  calc(var(--space-8) + env(safe-area-inset-bottom));box-shadow:var(--shadow-lift);
}
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:sheet-up var(--motion-slow) var(--motion-ease-out)}
  @keyframes sheet-up{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
}
.sheet-grip{width:38px;height:4px;border-radius:var(--radius-pill);background:var(--c-border-2);
  margin:0 auto var(--space-6)}

/* Единое видимое кольцо фокуса для всего приложения. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm);
}

/* ——— нет связи ———
   Молчать об этом нельзя: без сервера приложение выглядит так, будто данные
   человека не сохранились, хотя они на месте. */
.a-offline{
  position:sticky;top:0;z-index:20;
  padding:var(--space-3) var(--space-4);
  background:var(--warning-bg);
  color:var(--warning);
  font-size:var(--t-caption-size);
  line-height:1.4;
  text-align:center;
}
.a-offline[hidden]{display:none}