/* pwa.css — the two quiet strips the offline scribe raises.

   Both hang from the top of the Hall as a small parchment ribbon: honest,
   unobtrusive, and legible in daylight and candlelight alike. Colour comes
   only from tokens (WCAG-AA both themes); spacing only from the --s scale;
   no inline style ever sets these — pwa.js toggles [hidden] and nothing more.
   The global `[hidden]{display:none!important}` guard governs their visibility. */

.net-strip{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + var(--s2));
  left:50%;
  transform:translate(-50%, 0);
  z-index:9997;
  display:flex;
  align-items:center;
  gap:var(--s3);
  max-width:min(30rem, calc(100vw - var(--s6)));
  min-height:var(--field);
  padding:var(--s2) var(--s4);
  border:1px solid var(--gold-deep);
  border-radius:4px;
  background:var(--panel-2);
  color:var(--ink);
  font-family:var(--font-scribal);
  box-shadow:var(--shadow);
}

/* a slow settle when it appears — waived for readers who ask for stillness */
@media (prefers-reduced-motion:no-preference){
  .net-strip{ animation:net-settle .32s ease both; }
}
@keyframes net-settle{
  from{ opacity:0; transform:translate(-50%, -0.6rem); }
  to{ opacity:1; transform:translate(-50%, 0); }
}

.net-strip__msg{
  font-style:italic;
  line-height:1.3;
}

/* offline: a dimmed ember, banked but not gone */
.net-strip__mark{
  flex:0 0 auto;
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  background:var(--ink-faint);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink-faint) 22%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  .net-strip--offline .net-strip__mark{ animation:net-bank 2.4s ease-in-out infinite; }
}
@keyframes net-bank{
  0%,100%{ opacity:.55; } 50%{ opacity:1; }
}

/* update: the refresh call-to-action reads as a lit ember */
.net-strip--update{
  border-color:var(--gold);
}
.net-strip__act{
  flex:0 0 auto;
  min-height:calc(var(--field) - var(--s3));
  padding:0 var(--s3);
  border:1px solid var(--gold-deep);
  border-radius:3px;
  background:linear-gradient(180deg, var(--gold-btn-a), var(--gold-btn-b));
  color:var(--on-gold);
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
}
.net-strip__act:hover{
  filter:brightness(1.06);
}
.net-strip__act:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:2px;
}