/* ============================================================
   PASSAGE — PWA UI: install bar, update bar, settings modal.
   Uses the existing design tokens from styles.css (:root) so this
   stays visually part of the same house style — gold, paper, the
   editorial display face for titles.
   ============================================================ */

.pwa-bars-root{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60; /* above content, below .modal-root (see styles.css) */
  display:flex;
  flex-direction:column-reverse;
  gap:10px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
  align-items:center;
}

.pwa-bar{
  pointer-events:auto;
  width:min(560px, 100%);
  background:var(--paper);
  border:1px solid var(--stroke);
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
  padding:14px 16px;
  opacity:0;
  transform:translateY(18px) scale(.98);
  transition:opacity .32s cubic-bezier(.2,.9,.3,1.2), transform .32s cubic-bezier(.2,.9,.3,1.2);
}
.pwa-bar.pwa-bar-in{ opacity:1; transform:translateY(0) scale(1); }
.pwa-bar.pwa-bar-out{ opacity:0; transform:translateY(10px) scale(.98); }

.pwa-bar-inner{
  display:flex;
  align-items:center;
  gap:12px;
}
.pwa-bar-icon{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:11px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.pwa-bar-icon img{ display:block; width:100%; height:100%; }

.pwa-bar-text{ flex:1 1 auto; min-width:0; }
.pwa-bar-title{
  font-family:var(--disp);
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  margin-bottom:2px;
}
.pwa-bar-sub{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.4;
}

.pwa-bar-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.pwa-btn{
  border:1px solid var(--stroke);
  background:var(--paper);
  color:var(--ink);
  border-radius:99px;
  padding:7px 15px;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  transition:all .22s;
  font-family:var(--body);
}
.pwa-btn:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-1px); }
.pwa-btn-gold{
  background:radial-gradient(circle at 32% 20%, var(--gold-hi), var(--gold) 62%, var(--gold-deep));
  color:#FFFDF7;
  border:0;
  box-shadow:var(--shadow-soft);
}
.pwa-btn-gold:hover{ color:#fff; filter:brightness(1.05); }
.pwa-btn-ghost{ border-color:transparent; background:transparent; color:var(--ink-soft); }
.pwa-btn-ghost:hover{ background:var(--bone); color:var(--ink-soft); transform:none; }

.pwa-bar-update .pwa-bar-title{ color:var(--gold-deep); }

/* ---------------- settings modal content ---------------- */
.pwa-set-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--stroke-soft);
  font-size:13px;
}
.pwa-set-row:last-of-type{ border-bottom:none; }
.pwa-set-lbl{
  color:var(--ink-faint);
  font-weight:600;
  letter-spacing:.02em;
  flex:0 0 auto;
}
.pwa-set-val{
  color:var(--ink);
  text-align:right;
  font-weight:500;
}

.pwa-set-note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:var(--r-sm);
  background:var(--bone);
  border:1px solid var(--stroke-soft);
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-soft);
}

.pwa-set-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ---------------- mobile ---------------- */
@media (max-width:760px){
  .pwa-bars-root{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .pwa-bar{ padding:12px 13px; border-radius:var(--r-sm); }
  .pwa-bar-inner{ flex-wrap:wrap; }
  .pwa-bar-icon{ width:32px; height:32px; border-radius:9px; }
  .pwa-bar-title{ font-size:13px; }
  .pwa-bar-sub{ font-size:12px; }
  .pwa-bar-actions{
    flex:1 1 100%;
    justify-content:flex-end;
    margin-top:2px;
  }
  .pwa-btn{ padding:7px 13px; font-size:12px; }
  .pwa-set-actions{ flex-direction:column; }
  .pwa-set-actions .btn{ width:100%; text-align:center; }
}