/* The Storm Shelter · weathering the storm
   Low-contrast overlay. No streaks, no badges, no counts about the person. */

html.storm-shelter-on #tabs,
html.storm-shelter-on .tabbar,
html.storm-shelter-on .harbor-nav,
html.storm-shelter-on .nav,
#device.is-sheltered #tabs,
#device.is-sheltered .tabbar,
#device.is-sheltered .nav {
  opacity: 0 !important;
  pointer-events: none !important;
}

.ss-ovl {
  position: fixed;
  inset: 0;
  z-index: 9080;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(70% 50% at 50% 18%, rgba(224, 90, 8, 0.08), transparent 58%),
    radial-gradient(90% 80% at 50% 100%, rgba(82, 121, 111, 0.14), transparent 62%),
    #242b2b;
  color: #faf9f6;
  opacity: 0;
  transition: opacity 0.55s ease;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ss-ovl.abs { position: absolute; }
.ss-ovl.in { opacity: 1; }

.ss-mist {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(122, 141, 134, 0.18), transparent 46%),
    radial-gradient(ellipse at 82% 24%, rgba(163, 177, 138, 0.1), transparent 40%);
  animation: ssMistDrift 28s ease-in-out infinite;
}
@keyframes ssMistDrift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.7; }
  50% { transform: translate3d(2%, -3%, 0); opacity: 1; }
}

.ss-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 18px 8px;
}
.ss-brand {
  min-width: 0;
}
.ss-k {
  margin: 0 0 6px;
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a8d86;
}
.ss-title {
  margin: 0;
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: clamp(1.35rem, 4.6vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #faf9f6;
  line-height: 1.15;
}
.ss-sub {
  margin: 8px 0 0;
  max-width: 34ch;
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: rgba(250, 249, 246, 0.72);
}
.ss-close {
  flex: none;
  margin-top: 2px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: rgba(250, 249, 246, 0.62);
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.ss-close:hover,
.ss-close:focus-visible {
  color: #faf9f6;
  outline: none;
}

.ss-body {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow: auto;
  padding: 8px 20px 28px;
  -webkit-overflow-scrolling: touch;
}
.ss-panel {
  width: min(100%, 440px);
  margin: 0 auto;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.ss-guide {
  min-height: 3.2em;
  margin: 8px 0 22px;
  text-align: center;
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: rgba(250, 249, 246, 0.86);
}
.ss-guide span {
  display: block;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.ss-guide span.on { opacity: 1; }

.ss-pacer {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 12px auto 18px;
}
.ss-pacer-glow {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 90, 8, 0.38) 0%, rgba(224, 90, 8, 0.08) 42%, transparent 70%);
  filter: blur(12px);
  animation: ssGlow 10s ease-in-out infinite;
  animation-play-state: inherit;
}
.ss-pacer-orb {
  position: absolute;
  inset: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 90, 8, 0.55);
  background:
    radial-gradient(circle at 38% 32%, rgba(250, 249, 246, 0.22), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(224, 90, 8, 0.28), rgba(36, 43, 43, 0.2) 70%);
  box-shadow: 0 0 28px rgba(224, 90, 8, 0.22);
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: ssBreathe 10s ease-in-out infinite;
  animation-play-state: inherit;
}
.ss-pacer.is-paused,
.ss-pacer.is-paused .ss-pacer-orb,
.ss-pacer.is-paused .ss-pacer-glow {
  animation-play-state: paused;
}
@keyframes ssBreathe {
  0%, 100% { transform: scale(0.72); }
  40% { transform: scale(1.08); }
}
@keyframes ssGlow {
  0%, 100% { opacity: 0.45; transform: scale(0.86); }
  40% { opacity: 1; transform: scale(1.08); }
}
.ss-pacer.is-slow .ss-pacer-orb,
.ss-pacer.is-slow .ss-pacer-glow { animation-duration: 13s; }
.ss-pacer.is-quick .ss-pacer-orb,
.ss-pacer.is-quick .ss-pacer-glow { animation-duration: 8s; }

.ss-pace-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 22px;
}

.ss-ground-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 14px;}
.ss-ground-grid button{min-height:106px;padding:16px 14px;text-align:left;border:1px solid var(--ss-line,rgba(250,249,246,.16));border-radius:16px;background:rgba(238,236,227,.025);color:var(--ss-ink,#faf9f6);font:inherit;cursor:pointer;}
.ss-ground-grid strong{display:block;font-size:14px;font-weight:560;line-height:1.35;}
.ss-ground-grid span{display:block;margin-top:8px;color:var(--ss-muted,rgba(250,249,246,.62));font-size:11px;line-height:1.5;}
.ss-contact-pad{display:grid;place-items:center;width:min(390px,88vw);min-height:205px;margin:22px auto 0;padding:28px;border:1px solid rgba(139,166,141,.52);border-radius:34px;background:radial-gradient(circle at 50% 42%,rgba(120,151,124,.2),rgba(29,35,31,.08) 68%);color:var(--ss-ink,#faf9f6);font:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .24s ease,background .35s ease,border-color .35s ease;}
.ss-contact-pad.is-pressing{transform:scale(.965);background:radial-gradient(circle at 50% 42%,rgba(139,166,141,.36),rgba(29,35,31,.12) 72%);border-color:rgba(172,197,173,.84);}
.ss-contact-pad strong{display:block;font-family:var(--serif);font-size:19px;font-weight:400;}
.ss-contact-pad span{display:block;margin-top:8px;color:var(--ss-muted,rgba(250,249,246,.62));font-size:12px;}
.ss-contact-cue{text-align:center;color:var(--ss-muted,rgba(250,249,246,.62));font-size:11px;letter-spacing:.06em;min-height:1.4em;margin:12px 0 0;}
@media(max-width:680px){.ss-ground-grid{grid-template-columns:1fr}.ss-ground-grid button{min-height:70px}.ss-contact-pad{min-height:165px}}
.ss-pace-row button,
.ss-btn,
.ss-chip,
.ss-ghost {
  font-family: var(--font-brand, system-ui, sans-serif);
  cursor: pointer;
}
.ss-chip {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216, 200, 184, 0.22);
  background: transparent;
  color: rgba(250, 249, 246, 0.78);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ss-chip.on,
.ss-chip:hover,
.ss-chip:focus-visible {
  border-color: rgba(163, 177, 138, 0.55);
  color: #faf9f6;
  outline: none;
}

.ss-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(163, 177, 138, 0.45);
  background: rgba(82, 121, 111, 0.28);
  color: #faf9f6;
  font-size: 14.5px;
  font-weight: 400;
}
.ss-btn:hover,
.ss-btn:focus-visible {
  background: rgba(82, 121, 111, 0.42);
  outline: none;
}
.ss-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.ss-ghost {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: rgba(250, 249, 246, 0.55);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ss-ghost:hover { color: #faf9f6; }

.ss-prompt {
  margin: 0 0 10px;
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  color: rgba(250, 249, 246, 0.9);
  text-align: center;
}
.ss-in {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(216, 200, 184, 0.28);
  background: rgba(250, 249, 246, 0.04);
  color: #faf9f6;
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  resize: none;
  outline: none;
}
.ss-in:focus { border-color: rgba(163, 177, 138, 0.55); }
.ss-in::placeholder { color: rgba(250, 249, 246, 0.32); font-style: italic; }

.ss-sort-acts {
  display: flex;
  gap: 8px;
  margin: 10px 0 18px;
}
.ss-sort-acts .ss-chip { flex: 1; }

.ss-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
@media (max-width: 420px) {
  .ss-cols { grid-template-columns: 1fr; }
}
.ss-col {
  min-height: 88px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(216, 200, 184, 0.16);
  background: rgba(250, 249, 246, 0.03);
}
.ss-col h3 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a8d86;
}
.ss-empty {
  margin: 0;
  font-size: 12.5px;
  font-weight: 300;
  font-style: italic;
  color: rgba(250, 249, 246, 0.38);
  line-height: 1.45;
}
.ss-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 8px 8px 10px;
  border-radius: 10px;
  background: rgba(250, 249, 246, 0.05);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}
.ss-item p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: rgba(250, 249, 246, 0.9);
}
.ss-item-acts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ss-item-acts button {
  border: 0;
  background: transparent;
  color: rgba(250, 249, 246, 0.5);
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  padding: 2px 0;
}
.ss-item-acts button:hover { color: #a3b18a; }
.ss-item.is-misting {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-6px);
}
.ss-item.is-anchor {
  outline: 1px solid rgba(184, 150, 10, 0.45);
  background: rgba(184, 150, 10, 0.08);
}

.ss-crisis {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(192, 96, 122, 0.35);
  color: rgba(250, 249, 246, 0.82);
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
}
.ss-crisis button {
  display: block;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #c0607a;
  font-family: var(--font-brand, system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-cairn {
  position: relative;
  width: min(100%, 280px);
  height: 220px;
  margin: 8px auto 18px;
}
.ss-cairn svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ss-anchor-stone {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  cursor: pointer;
}
.ss-anchor-stone.is-ready {
  animation: ssStoneHover 2.8s ease-in-out infinite;
}
.ss-anchor-stone.is-dropping {
  animation: ssStoneDrop 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes ssStoneHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes ssStoneDrop {
  0% { transform: translateY(-72px) scale(1.04); opacity: 0.2; }
  62% { transform: translateY(4px) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ss-confirm {
  margin: 10px 0 0;
  text-align: center;
  font-size: 16.5px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: rgba(250, 249, 246, 0.9);
}
.ss-confirm-k {
  margin: 0 0 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b8960a;
}

.ss-steps {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 10px;
}
.ss-steps i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(250, 249, 246, 0.18);
}
.ss-steps i.on { background: #a3b18a; }

@media (prefers-reduced-motion: reduce) {
  .ss-ovl { transition: none; }
  .ss-mist,
  .ss-pacer-orb,
  .ss-pacer-glow,
  .ss-anchor-stone.is-ready,
  .ss-anchor-stone.is-dropping { animation: none; }
  .ss-item { transition: opacity 0.2s ease; }
  .ss-guide span { transition: none; }
}