/* deck.css — Commitment Cards (stage 5), 2026-07-28 redesign.
   docs/APP_EXPERIENCE_DIRECTION.md §1/§2.

   A deliberately immersive world: the shared site Cosmos field (drifting
   stars + orbs) with a cream reading-paper card floating on it. Single
   dark look on purpose — the deck is not the page, so it does not invert with
   the page theme. ACTIVATION cards read in-card (scroll region + house
   bottom-fade + a dwell gate before Mark complete); other cards are compact,
   action-first. Cream surface + ink = the app's reading-paper treatment
   (selfless.css --cream), so the prompt is easy to read and never abrupt. */

.nssdeck {
  position: fixed;
  inset: 0;
  z-index: 2000; /* above page chrome (nav 1000) and page modals (~1500) */
  display: flex;
  align-items: center;
  justify-content: center;
  --deck-cream: #f8f6f2;
  --deck-ink: #2a2a2a;
  --deck-dim: #5a5a5a;
  --deck-eyebrow: #a08545;
  --deck-gold: #f5d87a;
  --deck-gold-soft: #d4a843;
  --deck-serif: 'Cormorant Garamond', Georgia, serif;
  --deck-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --deck-ui: 'Inter', system-ui, sans-serif;
}
body.nssdeck-open { overflow: hidden; }
body.nssdeck-open > [data-swap],
body.nssdeck-open main,
body.nssdeck-open .nss-top-nav,
body.nssdeck-open .nss-bottom-bar {
  visibility: hidden;
}

/* ── Shared Cosmos backdrop. The page's cosmos-bg.js canvas stays live
   underneath; this layer only dims it enough to hold the reading paper. ── */
.nssdeck-cosmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  cursor: default;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: nssdeck-fade 0.24s ease both;
}
.nssdeck-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}
.nssdeck-stage {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.nssdeck-count {
  font-family: var(--deck-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* ── the cream card ── */
.nssdeck-card {
  width: 100%;
  box-sizing: border-box;
  padding: 40px 40px 28px;
  border-radius: 20px;
  background: var(--deck-cream);
  color: var(--deck-ink);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.60),
    0 10px 30px -14px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  animation: nssdeck-rise 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* The reading card is a fixed-height flex column so the action bar pins to
   its base while the body scrolls above. */
.nssdeck-read {
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  overflow: hidden;
}

.nssdeck-kicker {
  font-family: var(--deck-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--deck-eyebrow);
  margin-bottom: 16px;
}
.nssdeck-invitation .nssdeck-kicker { color: var(--deck-dim); }

.nssdeck-title {
  margin: 0 0 20px;
  font-family: var(--deck-serif);
  font-size: clamp(1.7rem, 4.5vw, 2.15rem);
  line-height: 1.16;
  font-weight: 600;
  color: var(--deck-ink);
  text-wrap: balance;
}
.nssdeck-read-body {
  font-family: var(--deck-serif);
  font-size: 1.3rem;
  line-height: 1.66;
  color: var(--deck-ink);
}
.nssdeck-read-body p { margin: 0; }
.nssdeck-read-body p + p { margin-top: 0.9em; }
/* Compact one-liner body for standard cards. */
.nssdeck-body-compact { font-size: 1.06rem; line-height: 1.5; color: var(--deck-dim); }

/* THE INTENTION — the one part of an engagement still open at this
   moment. Sits under the activation because it answers it: the citizen
   reads the morning, then keeps or rewrites the line they set on the
   sacred day. Deliberately quieter than the activation itself (UI face,
   not the serif reading face) so it reads as their own writing surface
   rather than more curriculum to read. */
.nssdeck-intention {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(42, 42, 42, 0.14);
}
.nssdeck-intention > label {
  display: block;
  font-family: var(--deck-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deck-eyebrow);
}
.nssdeck-intention > p {
  margin: 7px 0 11px;
  font-family: var(--deck-ui);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--deck-dim);
}
.nssdeck-intention textarea {
  display: block;
  width: 100%;
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid rgba(42, 42, 42, 0.2);
  border-radius: 10px;
  outline: 0;
  font-family: var(--deck-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--deck-ink);
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nssdeck-intention textarea:focus {
  border-color: var(--deck-gold-soft);
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.16);
}
.nssdeck-intention-status {
  min-height: 15px;
  margin-top: 6px;
  font-family: var(--deck-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--deck-dim);
}

.nssdeck-meta {
  margin-top: 22px;
  font-family: var(--deck-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--deck-dim);
}
.nssdeck-when {
  margin-top: 16px;
  font-family: var(--deck-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--deck-dim);
}
.nssdeck-when.is-overdue { color: #b4413c; }

/* ── the reading scroll region: house thin bar centered in the margin +
   the bottom-fade mask that clears at the end (deck.js toggles .at-bottom) ── */
.nssdeck-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-right: -18px;
  padding-right: 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent 100%);
  transition: -webkit-mask-image .2s, mask-image .2s;
}
.nssdeck-scroll.at-bottom { -webkit-mask-image: none; mask-image: none; }
.nssdeck-scroll::-webkit-scrollbar { width: 6px; }
.nssdeck-scroll::-webkit-scrollbar-track { background: transparent; }
.nssdeck-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }
.nssdeck-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

/* ── action block (inside the card) ── */
.nssdeck-action {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nssdeck-progress { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.nssdeck-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--deck-gold-soft), var(--deck-gold)); }
.nssdeck-gate-label {
  font-family: var(--deck-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--deck-dim);
  text-align: center;
}
.nssdeck-primary {
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--deck-gold), var(--deck-gold-soft));
  color: #2a1a05;
  font-family: var(--deck-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(212, 168, 67, 0.7);
  transition: transform 0.12s, filter 0.15s;
}
.nssdeck-primary:active { transform: scale(0.985); filter: brightness(1.04); }
.nssdeck-primary:disabled {
  color: #9a9488;
  background: rgba(0, 0, 0, 0.06);
  box-shadow: none;
  cursor: default;
}
.nssdeck-secondary {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--deck-dim);
  font-family: var(--deck-ui);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nssdeck-secondary:active { background: rgba(0, 0, 0, 0.04); }

/* ── the single, always-available exit (frosted ✕, top-right) ── */
.nssdeck-exit {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 20px;
  z-index: 2;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(24, 16, 30, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: 0.2s;
}
.nssdeck-exit:hover { color: #fff; border-color: rgba(255, 255, 255, 0.52); background: rgba(24, 16, 30, 0.92); }

/* ── "You're current." (D15) — still part of the same reading-paper modal.
   Snoozing the last card changes the message, never the surface. ── */
.nssdeck-current {
  display: flex;
  min-height: min(560px, 82vh);
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 44px 30px 34px;
  background: var(--deck-cream);
  color: var(--deck-ink);
}
.nssdeck-current-mark {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; color: var(--deck-gold-soft);
  border: 1px solid rgba(160, 133, 69, 0.32); background: rgba(160, 133, 69, 0.08);
}
.nssdeck-current-title {
  margin: 0;
  font-family: var(--deck-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--deck-ink);
}
.nssdeck-current-sub {
  margin: 10px 0 24px;
  font-family: var(--deck-ui);
  font-size: 14px;
  color: var(--deck-dim);
}
.nssdeck-current .nssdeck-primary { max-width: 260px; margin: 0 auto; }

@keyframes nssdeck-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nssdeck-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nssdeck-cosmos, .nssdeck-card { animation: none; }
  .nssdeck-scroll > .nssdeck-bar, .nssdeck-bar { transition: none !important; }
}

@media (max-width: 900px) {
  /* Four-button phone bar: 48px controls + 12px padding + 0.5px border.
     The deck stops above it, including the device's current safe area. */
  body.nssdeck-open .nss-bottom-bar {
    visibility: visible;
    z-index: 2001;
  }
  body.nssdeck-open .nss-bottom-bar .nss-bb-back.is-dim {
    opacity: 1;
    pointer-events: auto;
  }
  .nssdeck {
    --deck-phone-height: calc(100vh - 60.5px - env(safe-area-inset-bottom, 0px));
    --deck-phone-height: calc(100dvh - 60.5px - env(safe-area-inset-bottom, 0px));
    bottom: auto;
    align-items: stretch;
    min-height: var(--deck-phone-height);
  }
  .nssdeck-content {
    height: var(--deck-phone-height);
  }
  .nssdeck-stage {
    max-width: none;
    height: var(--deck-phone-height);
    padding:
      max(18px, env(safe-area-inset-top))
      14px
      max(18px, env(safe-area-inset-bottom));
  }
  .nssdeck-card {
    padding: 30px 24px;
    border-radius: 18px;
  }
  .nssdeck-read {
    flex: 1 1 auto;
    max-height: none;
  }
  .nssdeck-current {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
  }
  .nssdeck-read-body { font-size: 1.16rem; }
}