/* public.css — публичный сайт (лендинг + about/privacy/science/crisis-support).
   Использует те же CSS-переменные и шрифты, что и styles.css (см. :root там) —
   отдельный файл нужен, чтобы не раздувать основной стиль приложения экраном,
   которым владельцы телефона с установленным PWA обычно не пользуются. */

#app-shell[hidden], #public-root[hidden]{ display:none; }

#public-root{
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--paper);
}

.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;
}

/* ---------- Header ---------- */
.pub-header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.pub-header-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.3rem;
  gap:1rem;
}
.pub-brand{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.1rem;
  color:var(--ink); text-decoration:none; flex:none;
}
.pub-brand img{ display:block; border-radius:7px; }

.pub-nav{ display:flex; align-items:center; gap:1.6rem; }
.pub-nav a{
  color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:500;
  padding:.4rem 0; min-height:44px; display:inline-flex; align-items:center;
}
.pub-nav a.active{ color:var(--accent); }
.pub-nav .btn{ width:auto; padding:.6rem 1.1rem; font-size:.88rem; }
.pub-menu-btn{
  display:none; border:none; background:none; color:var(--ink);
  width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:10px; cursor:pointer;
}

/* ---------- Hero ---------- */
.pub-hero{
  max-width:760px; margin:0 auto; text-align:center;
  padding:clamp(2.6rem, 6vw, 5rem) 1.3rem 2.4rem;
}
.pub-hero-kicker{
  font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.08em;
  font-size:.82rem; color:var(--accent); margin:0 0 1.1rem;
}
.pub-hero-title{
  font-size:clamp(1.9rem, 5vw, 3rem); line-height:1.15; margin:0 0 1.1rem;
}
.pub-hero-desc{
  color:var(--muted); font-size:1.05rem; line-height:1.6;
  max-width:560px; margin:0 auto 1.8rem;
}
.pub-hero-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-bottom:1.4rem;
}
.pub-hero-cta .btn{ width:auto; padding:.9rem 1.6rem; }
.pub-trust-line{
  font-size:.82rem; color:var(--muted); margin:0;
}

/* ---------- Mini check-in ---------- */
.pub-checkin{ padding:1.5rem 1.3rem 3rem; }
.pub-checkin-card{
  max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow); padding:1.8rem 1.6rem; text-align:center;
}
.pub-checkin-card h2{ font-size:1.2rem; margin-bottom:1.2rem; }
.pub-mood-row{ display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; }
.pub-mood-btn{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-2); font-size:1.6rem; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
}
.pub-mood-btn.selected{ border-color:var(--accent); background:var(--accent-soft); transform:scale(1.06); }
.pub-checkin-followup{ margin-top:1.5rem; text-align:left; }
.pub-checkin-followup label{ display:block; font-size:.88rem; color:var(--muted); margin-bottom:.6rem; }
.pub-checkin-followup input[type="range"]{ width:100%; }
.pub-stress-readout{
  font-family:'IBM Plex Mono', monospace; text-align:center; color:var(--accent);
  font-size:1.1rem; margin:.5rem 0 1.2rem;
}
.pub-checkin-followup .btn{ width:100%; }

/* ---------- Generic section ---------- */
.pub-section{ max-width:1120px; margin:0 auto; padding:3rem 1.3rem; }
.pub-section-tint{ max-width:none; background:var(--surface-2); }
.pub-section-tint > *{ max-width:1120px; margin-left:auto; margin-right:auto; }
.pub-section-title{
  font-size:clamp(1.5rem, 3.4vw, 2.1rem); text-align:center; max-width:640px; margin:0 auto 1rem;
}
.pub-section-lead{
  text-align:center; color:var(--muted); max-width:640px; margin:0 auto 2.2rem; line-height:1.6;
}

/* ---------- Pillars ---------- */
.pub-pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2rem; }
.pub-pillar-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:1.6rem 1.4rem; box-shadow:var(--shadow);
}
.pub-pillar-icon{
  width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.pub-pillar-icon svg{ width:22px; height:22px; }
.pub-pillar-card h3{ font-size:1.05rem; margin-bottom:.7rem; }
.pub-pillar-list{ list-style:none; padding:0; margin:0 0 .9rem; display:flex; flex-direction:column; gap:.4rem; }
.pub-pillar-list li{
  font-size:.86rem; color:var(--ink); padding-left:1.1rem; position:relative;
}
.pub-pillar-list li::before{
  content:''; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%;
  background:var(--accent-2);
}

/* ---------- Biofeedback showcase ---------- */
.pub-bf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.pub-bf-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:1.5rem 1.3rem; box-shadow:var(--shadow);
}
.pub-bf-card h3{ font-size:1.05rem; margin:.6rem 0 .5rem; }
.pub-bf-card-muted{ opacity:.85; }
.pub-bf-states{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:1rem;
  font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.03em; color:var(--muted);
}
.pub-bf-states span:not([aria-hidden]){
  background:var(--accent-2-soft); color:var(--accent-2); padding:.2rem .5rem; border-radius:999px;
}

/* ---------- Privacy grid ---------- */
.pub-privacy-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1.8rem; margin:2rem 0 2.2rem; }
.pub-privacy-point h3{ font-size:1rem; margin-bottom:.4rem; }
.pub-center{ text-align:center; }

/* ---------- Safety ---------- */
.pub-safety{
  max-width:760px; margin:0 auto; padding:0 1.3rem 3.5rem; text-align:center;
}
.pub-safety p{ color:var(--muted); font-size:.9rem; line-height:1.6; }
.pub-safety-links{ display:flex; justify-content:center; gap:1.3rem; flex-wrap:wrap; margin-top:.4rem; }
.pub-safety-links a{ color:var(--accent); font-size:.88rem; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Footer ---------- */
.pub-footer{ border-top:1px solid var(--line); padding:2.2rem 1.3rem 2.6rem; margin-top:1rem; }
.pub-footer-inner{
  max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.2rem;
}
.pub-footer-brand{ font-size:1rem; }
.pub-footer-links{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.pub-footer-links a{ color:var(--muted); text-decoration:none; font-size:.86rem; }
.pub-footer-links a:hover{ color:var(--ink); }
.pub-footer-copy{
  max-width:1120px; margin:1.4rem auto 0; color:var(--muted); font-size:.76rem; text-align:center;
}

/* ---------- Static doc pages (About / Privacy / Science / Crisis Support) ---------- */
.pub-doc{ max-width:720px; margin:0 auto; padding:2.6rem 1.3rem 4rem; line-height:1.7; }
.pub-doc h1{ font-size:clamp(1.7rem, 4vw, 2.3rem); margin-bottom:1.2rem; }
.pub-doc h2{ font-size:1.2rem; margin:2rem 0 .7rem; }
.pub-doc p, .pub-doc ul{ color:var(--ink); margin:0 0 1rem; }
.pub-doc ul{ padding-left:1.2rem; }
.pub-doc li{ margin-bottom:.4rem; }
.pub-doc a{ color:var(--accent); }
.pub-source-note{ font-size:.78rem; color:var(--muted); font-style:italic; }
.pub-doc-crisis .pub-doc{ padding-top:0; }

/* ---------- Mobile ---------- */
@media (max-width: 860px){
  .pub-pillar-grid, .pub-bf-grid{ grid-template-columns:1fr; }
  .pub-privacy-grid{ grid-template-columns:1fr; }
}

@media (max-width: 680px){
  .pub-nav{
    position:fixed; inset:calc(3.6rem + var(--safe-top)) 0 auto 0;
    background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.6rem 1.3rem 1.2rem; box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  .pub-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .pub-nav a{ padding:.8rem 0; border-bottom:1px solid var(--line); min-height:48px; }
  .pub-nav .btn{ width:100%; margin-top:.8rem; }
  .pub-menu-btn{ display:inline-flex; }

  .pub-hero-cta{ flex-direction:column; }
  .pub-hero-cta .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .pub-nav{ transition:none; }
  .pub-mood-btn.selected{ transform:none; }
}