/* The Night editor (js/night.js). Builds on console.css tokens and shared
 * classes; only the Night-specific layout and the rendered night live here.
 * The panel's accent is teal (console.css #panel-night). */

.nt-loading,
.nt-loading.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s12);
  padding: var(--s48) 0;
  background: none;
  border: none;
  font: 400 16px/24px var(--font-sans);
  color: var(--text-tertiary);
  animation: console-fade var(--dur-step) ease;
}

/* The header: a Charcoal card under the NightAtmosphere lights (Full:
 * Tide, Candle and Haze as bound), the moon in Teal/400, the copy in
 * Paper and Evening/Secondary. */
.night-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s16);
  flex-wrap: wrap;
  margin-bottom: var(--s24);
  padding: var(--s28) var(--s32);
  border-radius: var(--r24);
  color: var(--neutral-050-paper);
  background:
    radial-gradient(48% 150% at 92% 110%, var(--atmos-tide-a36) 0%, transparent 100%),
    radial-gradient(45% 120% at 4% 130%, var(--atmos-candle-a12) 0%, transparent 100%),
    radial-gradient(40% 130% at 70% 30%, var(--atmos-haze-a18) 0%, transparent 100%),
    var(--neutral-900-charcoal);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  animation: console-enter var(--dur-enter) var(--ease);
}

.night-head h1 {
  display: flex;
  align-items: center;
  gap: var(--s12);
  font: 400 33px/40px var(--font-serif);
  letter-spacing: -0.02em;
}

.night-head h1::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  background: var(--teal-400);
  -webkit-mask: url("/icons/moon.svg") center / contain no-repeat;
  mask: url("/icons/moon.svg") center / contain no-repeat;
}

.night-head p,
.night-head p.secondary {
  max-width: 640px;
  margin-top: var(--s8);
  color: var(--evening-secondary);
}

@media (max-width: 640px) {
  .night-head {
    padding: var(--s20);
    border-radius: var(--r20);
  }
}

.night-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--s24);
  align-items: start;
}

@media (max-width: 1080px) {
  .night-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- the sticky save bar (bottom of the editor column) ---- */

/* Card/Frosted surface: translucent paper, the rim and the soft drop. */
.night-savebar {
  position: sticky;
  bottom: var(--s16);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s12);
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--white-100) 82%, transparent);
  -webkit-backdrop-filter: blur(var(--frosted-blur)) saturate(1.4);
  backdrop-filter: blur(var(--frosted-blur)) saturate(1.4);
  border: 1px solid var(--tint-10);
  border-radius: var(--r999);
  padding: var(--s8) var(--s8) var(--s8) var(--s20);
  box-shadow: var(--frosted-rim), var(--frosted-drop), var(--shadow-small);
}

.night-savebar .dirty-dot {
  animation: console-fade var(--dur-step) ease;
}

.night-savebar .dirty-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r999);
  background: var(--accent-solid);
}

.night-savebar .btn-primary {
  padding: var(--s8) var(--s24);
}

/* ---- editors ---- */

.night-master {
  min-height: 420px;
}

.night-contract {
  min-height: 380px;
}

.night-template {
  min-height: 300px;
}

.night-addition {
  min-height: 140px;
}

.night-words {
  min-height: 120px;
}

.counter {
  font: 400 11px/16px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  text-align: right;
}

.counter-over {
  color: var(--console-error-text);
}

.check-line {
  font: 400 13px/18px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--console-error-text);
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s12);
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s12);
}

@media (max-width: 640px) {
  .model-grid,
  .test-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One row on a phone: the saved time gives way. */
  .night-savebar {
    flex-wrap: nowrap;
    gap: var(--s8);
    padding-left: var(--s12);
  }

  .night-savebar .saved-at,
  .night-savebar .dirty-label {
    display: none;
  }

  .night-grid .legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .night-grid .legend span {
    margin-bottom: var(--s8);
  }
}

/* The nine feeling chips: Chip, Small (36, Space/12, Sans/13 Emphasis).
 * Unselected a quiet Tint/05 wash with no line; selected Teal/900 under a
 * Teal/400 line with the Paper label, as the Night draws it. The dot marks
 * a feeling that has a note. */
.feeling-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
}

.feeling-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  min-height: 36px;
  padding: var(--s4) var(--s12);
  font: 600 13px/18px var(--font-sans);
  color: var(--text-secondary);
  background: var(--tint-05);
  border-color: transparent;
}

.feeling-chip:hover {
  background: var(--tint-10);
}

.feeling-chip[aria-pressed="true"],
.feeling-chip[aria-pressed="true"]:hover {
  color: var(--neutral-050-paper);
  background: var(--teal-900);
  border-color: var(--teal-400);
}

.feeling-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r999);
  background: var(--teal-500);
}

.feeling-chip[aria-pressed="true"] .dot {
  background: var(--teal-400);
}

.legend {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s4) var(--s16);
  font: 400 13px/18px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  background: var(--callout-fill);
  border-radius: var(--r12);
  padding: var(--s12) var(--s16);
}

.legend code {
  color: var(--text-primary);
}

/* ---- test run ---- */

.night-test {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}

/* Each result card arrives with the block entrance. */
.night-test > .stack > .card {
  animation: console-enter var(--dur-enter) var(--ease);
}

.night-test > .stack > .card:nth-child(2) {
  animation-delay: 0.09s;
  animation-fill-mode: backwards;
}

.night-test > .stack > .card:nth-child(3) {
  animation-delay: 0.18s;
  animation-fill-mode: backwards;
}

/* No result yet: the Empty state (a Tint/10 ring holding the moon in
 * Text/Secondary over a Sans/13 caption), quiet in its own outline. While
 * a run is generating it becomes a soft placeholder card. */
.night-test > .stack:empty {
  position: relative;
  min-height: 200px;
  border: 1px solid var(--tint-10);
  border-radius: var(--r20);
  background: radial-gradient(circle at 50% 76px, transparent 31px,
    var(--tint-10) 31px, var(--tint-10) 32px, transparent 32px);
}

.night-test > .stack:empty::before {
  content: "";
  position: absolute;
  top: 60px;
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
  background: var(--text-secondary);
  -webkit-mask: url("/icons/moon.svg") center / contain no-repeat;
  mask: url("/icons/moon.svg") center / contain no-repeat;
}

.night-test > .stack:empty::after {
  content: "Run a test or preview the messages: the night shows here.";
  position: absolute;
  left: var(--s24);
  right: var(--s24);
  top: 128px;
  text-align: center;
  font: 400 13px/18px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

.night-test:has(.run-status:not([hidden])) > .stack:empty {
  min-height: 320px;
  border-color: var(--border-default);
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%)
      0 0 / 200% 100% no-repeat,
    linear-gradient(var(--tint-05), var(--tint-05)) 24px 32px / 40% 14px no-repeat,
    linear-gradient(var(--tint-05), var(--tint-05)) 24px 72px / calc(100% - 48px) 22px no-repeat,
    linear-gradient(var(--tint-05), var(--tint-05)) 24px 104px / calc(100% - 96px) 22px no-repeat,
    linear-gradient(var(--tint-05), var(--tint-05)) 24px 160px / 30% 12px no-repeat,
    linear-gradient(var(--tint-05), var(--tint-05)) 24px 188px / calc(100% - 48px) 14px no-repeat,
    linear-gradient(var(--tint-05), var(--tint-05)) 24px 212px / calc(100% - 72px) 14px no-repeat,
    linear-gradient(var(--tint-05), var(--tint-05)) 24px 236px / calc(100% - 120px) 14px no-repeat,
    var(--surface-raised);
  animation: night-shimmer 1.6s ease-in-out infinite;
}

.night-test:has(.run-status:not([hidden])) > .stack:empty::before,
.night-test:has(.run-status:not([hidden])) > .stack:empty::after {
  display: none;
}

@keyframes night-shimmer {
  from { background-position: 150% 0, 24px 32px, 24px 72px, 24px 104px,
    24px 160px, 24px 188px, 24px 212px, 24px 236px, 0 0; }
  to { background-position: -50% 0, 24px 32px, 24px 72px, 24px 104px,
    24px 160px, 24px 188px, 24px 212px, 24px 236px, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .night-test:has(.run-status:not([hidden])) > .stack:empty {
    animation: none;
  }
}

.run-status {
  display: flex;
  align-items: center;
  gap: var(--s8);
  font: 600 13px/18px var(--font-sans);
  color: var(--text-secondary);
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--r999);
  background: var(--accent-solid);
  animation: night-pulse 1.2s ease-in-out infinite;
}

@keyframes night-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
}

/* One rendered part of the night. */
.part {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  padding-top: var(--s16);
  border-top: 1px solid var(--border-default);
}

.part:first-child {
  border-top: none;
  padding-top: 0;
}

.part-kicker {
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.part-ref {
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

.part-verse {
  font: 400 19px/28px var(--font-serif);
}

.part-body {
  font: 400 16px/24px var(--font-serif);
}

.part-context {
  font: 400 16px/24px var(--font-serif);
  color: var(--text-secondary);
}

.part-word {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s12);
  align-items: baseline;
}

.part-word .w {
  font: 600 19px/28px var(--font-serif);
}

.part-sublabel {
  font: 600 11px/16px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  margin-top: var(--s4);
}

.verse-word {
  background: var(--teal-050);
  border-bottom: 2px solid var(--teal-400);
}

/* Reflection spans: the app draws all three in teal. */
.span-word {
  color: var(--teal-500);
  font-weight: 600;
}

.span-feeling {
  color: var(--teal-500);
  background: var(--teal-050);
  border-radius: var(--r4);
  padding: 0 2px;
}

.span-quote {
  color: var(--teal-500);
  font-style: italic;
  text-decoration: underline dotted var(--teal-500);
  text-underline-offset: 3px;
}

.span-legend {
  display: flex;
  gap: var(--s12);
  flex-wrap: wrap;
  font: 400 13px/18px var(--font-sans);
  color: var(--text-tertiary);
}

.prayer-line {
  font: 400 16px/24px var(--font-serif);
}

.prayer-slot {
  font: 600 13px/18px var(--font-sans);
  color: var(--accent-on-solid);
  background: var(--accent-solid);
  border-radius: var(--r999);
  padding: 1px var(--s8);
}

.prayer-line-slot {
  background: var(--teal-050);
  border-radius: var(--r8);
  margin: 0 calc(-1 * var(--s8));
  padding: 0 var(--s8);
}

details.raw {
  border: 1px solid var(--border-default);
  border-radius: var(--r12);
  background: var(--white-100);
}

details.raw summary {
  cursor: pointer;
  font: 600 13px/18px var(--font-sans);
  color: var(--text-secondary);
  padding: var(--s12) var(--s16);
  border-radius: var(--r12);
  transition: background-color var(--dur-quick) ease;
}

details.raw summary:hover {
  background: var(--tint-05);
}

details.raw pre {
  margin: 0;
  padding: 0 var(--s16) var(--s16);
  font: 400 12px/18px var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  overflow: auto;
  color: var(--text-primary);
}

details.raw .notice {
  margin: 0 var(--s16) var(--s12);
}

.resource {
  font: 400 13px/18px var(--font-sans);
}

/* ============================================================ simulator
 * "Simulate a night" (js/night.js, the SIMULATOR section). The overlay and
 * the phone frame are the Day simulator's, reused as they are (day.css
 * .dy-sim, .dy-sim-panel, .dy-sim-head/-stage/-foot/-nav; .dp-phone and
 * .dp-screen, the 402 x 874 frame scaled by the script). ns-* draws the
 * Night inside it from the iOS DesignSystem, Dark: NightAtmosphere Soft,
 * Text/Primary Paper, Secondary Mist, Tertiary Quiet, CTA Evening Teal/400
 * with the Charcoal label, Chip Dark, Continue row, Kicker, Field / Write
 * Night, Breath light and dots, Note sheet, FlowTopBar Night, Toast. Frame
 * positions are Layout+Night.swift's. Approximate on purpose.
 *
 * The phone's controls are role="button" divs (never <button>), so the
 * console's global button styles never reach them. */

/* The header's "Simulate a night": CTA Evening on the Charcoal card. */
.night-head .btn.ns-sim-open {
  padding: 10px var(--s20) 10px var(--s16);
  border-color: transparent;
  background: var(--teal-400);
  color: var(--neutral-900-charcoal);
  font: 600 16px/24px var(--font-sans);
}

.night-head .btn.ns-sim-open:hover {
  background: color-mix(in srgb, var(--teal-400) 86%, var(--white-100));
  box-shadow: var(--shadow-small);
}

/* The overlay lives on <body>, outside #panel-night: the teal accent
 * family again (console.css #panel-night), and the Night's glow on the
 * panel in place of the Day candle. */
.ns-sim {
  --accent-primary: var(--teal-500);
  --accent-solid: var(--teal-500);
  --console-accent-pressed: color-mix(in srgb, var(--teal-500) 80%, var(--teal-900));
  --console-accent-wash: var(--teal-050);
  --console-accent-line: var(--teal-100);
  --console-focus-ring: var(--teal-100);
}

.ns-sim ::selection {
  background: var(--teal-100);
}

.ns-sim .ns-screen ::selection {
  background: rgba(43, 200, 182, 0.35);
}

.ns-sim-panel {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(51, 128, 125, 0.12) 0%, transparent 90%),
    radial-gradient(50% 40% at 0% 100%, rgba(104, 122, 146, 0.08) 0%, transparent 100%),
    var(--surface-raised);
}

.ns-sim-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
}

/* The footer: a status row of a fixed minimum height (the small buttons
 * come and go without moving anything), then the hint. */
.dy-sim-foot.ns-sim-foot {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s4);
}

.ns-sim-foot-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s8) var(--s16);
  min-height: 28px;
}

/* ---- the screen */

.ns-screen {
  /* Dark semantic values (Palette+Semantic.swift). */
  --ns-paper: var(--neutral-050-paper);
  --ns-secondary: var(--neutral-300-mist);
  --ns-tertiary: var(--neutral-400-quiet);
  --ns-muted: var(--neutral-500-muted);
  --ns-teal: var(--teal-400);
  --ns-line: var(--paper-a15);
  /* Alpha/Paper/A30: the Muted link's and Meditate's underline. */
  --ns-underline: rgba(250, 250, 248, 0.30);
  /* Neutral/850 Raised: the Note sheet (no console token). */
  --ns-raised: #2D2E35;
  /* The glyphs the console's /icons/ lacks: the Phosphor masters of the
   * iOS catalog (Icons.xcassets), inline. */
  --ns-ic-caret-left: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.5307 18.9694C15.6004 19.039 15.6557 19.1218 15.6934 19.2128C15.7311 19.3039 15.7505 19.4014 15.7505 19.5C15.7505 19.5985 15.7311 19.6961 15.6934 19.7872C15.6557 19.8782 15.6004 19.9609 15.5307 20.0306C15.461 20.1003 15.3783 20.1556 15.2873 20.1933C15.1962 20.231 15.0986 20.2504 15.0001 20.2504C14.9016 20.2504 14.804 20.231 14.7129 20.1933C14.6219 20.1556 14.5392 20.1003 14.4695 20.0306L6.96948 12.5306C6.89974 12.461 6.84443 12.3782 6.80668 12.2872C6.76894 12.1961 6.74951 12.0986 6.74951 12C6.74951 11.9014 6.76894 11.8038 6.80668 11.7128C6.84443 11.6217 6.89974 11.539 6.96948 11.4694L14.4695 3.96936C14.6102 3.82863 14.8011 3.74957 15.0001 3.74957C15.1991 3.74957 15.39 3.82863 15.5307 3.96936C15.6715 4.1101 15.7505 4.30097 15.7505 4.49999C15.7505 4.69901 15.6715 4.88988 15.5307 5.03061L8.56041 12L15.5307 18.9694Z' fill='black'/%3E %3C/svg%3E");
  --ns-ic-speaker-high: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.5791 2.32579C14.4529 2.26433 14.3121 2.23948 14.1726 2.25406C14.033 2.26865 13.9004 2.32208 13.7897 2.40829L7.24219 7.49985H3C2.60218 7.49985 2.22064 7.65788 1.93934 7.93919C1.65804 8.22049 1.5 8.60202 1.5 8.99985V14.9998C1.5 15.3977 1.65804 15.7792 1.93934 16.0605C2.22064 16.3418 2.60218 16.4998 3 16.4998H7.24219L13.7897 21.5914C13.9005 21.6775 14.0332 21.7309 14.1728 21.7453C14.3124 21.7597 14.4533 21.7347 14.5793 21.6731C14.7054 21.6115 14.8117 21.5157 14.8861 21.3967C14.9604 21.2777 14.9999 21.1402 15 20.9998V2.99985C15 2.85934 14.9606 2.72166 14.8861 2.60248C14.8117 2.48331 14.7053 2.38743 14.5791 2.32579ZM3 8.99985H6.75V14.9998H3V8.99985ZM13.5 19.4661L8.25 15.3833V8.61641L13.5 4.5336V19.4661ZM18.5625 9.5211C19.1657 10.2059 19.4986 11.0872 19.4986 11.9998C19.4986 12.9125 19.1657 13.7938 18.5625 14.4786C18.43 14.6242 18.2456 14.7119 18.049 14.7227C17.8524 14.7335 17.6595 14.6666 17.5118 14.5364C17.3642 14.4062 17.2736 14.2231 17.2597 14.0268C17.2458 13.8304 17.3097 13.6364 17.4375 13.4867C17.7992 13.0759 17.9988 12.5473 17.9988 11.9998C17.9988 11.4524 17.7992 10.9238 17.4375 10.513C17.3097 10.3633 17.2458 10.1693 17.2597 9.97293C17.2736 9.77656 17.3642 9.59353 17.5118 9.46333C17.6595 9.33314 17.8524 9.26623 18.049 9.27703C18.2456 9.28784 18.43 9.3755 18.5625 9.5211ZM23.25 11.9998C23.2511 13.845 22.5711 15.6257 21.3403 17.0005C21.2067 17.145 21.0216 17.2313 20.825 17.2406C20.6284 17.2499 20.436 17.1815 20.2893 17.0503C20.1426 16.919 20.0535 16.7353 20.041 16.5388C20.0286 16.3424 20.0939 16.1489 20.2228 16.0002C21.2066 14.9001 21.7505 13.4761 21.7505 12.0003C21.7505 10.5245 21.2066 9.1005 20.2228 8.00047C20.1553 7.9274 20.103 7.84163 20.0689 7.74815C20.0349 7.65466 20.0197 7.55533 20.0245 7.45595C20.0292 7.35657 20.0536 7.25911 20.0963 7.16926C20.1391 7.07942 20.1993 6.99897 20.2734 6.93261C20.3475 6.86625 20.4341 6.81531 20.5281 6.78274C20.6222 6.75018 20.7217 6.73665 20.821 6.74293C20.9203 6.74922 21.0173 6.7752 21.1065 6.81936C21.1957 6.86352 21.2751 6.92498 21.3403 7.00016C22.5714 8.37436 23.2515 10.1549 23.25 11.9998Z' fill='black'/%3E %3C/svg%3E");
  --ns-ic-speaker-slash: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5.055 3.24585C4.98914 3.17161 4.90919 3.11118 4.8198 3.06806C4.73041 3.02494 4.63335 2.99999 4.53424 2.99466C4.43514 2.98932 4.33596 3.00372 4.24246 3.037C4.14896 3.07028 4.06299 3.12178 3.98954 3.18853C3.91609 3.25528 3.85662 3.33595 3.81458 3.42585C3.77253 3.51575 3.74875 3.6131 3.74461 3.71226C3.74046 3.81143 3.75604 3.91042 3.79044 4.00352C3.82484 4.09662 3.87738 4.18196 3.945 4.2546L6.89531 7.50023H3C2.60218 7.50023 2.22064 7.65826 1.93934 7.93957C1.65804 8.22087 1.5 8.6024 1.5 9.00023V15.0002C1.5 15.3981 1.65804 15.7796 1.93934 16.0609C2.22064 16.3422 2.60218 16.5002 3 16.5002H7.24219L13.7897 21.5918C13.9005 21.6779 14.0332 21.7312 14.1728 21.7457C14.3124 21.7601 14.4533 21.7351 14.5793 21.6735C14.7054 21.6119 14.8117 21.5161 14.8861 21.3971C14.9604 21.2781 14.9999 21.1406 15 21.0002V16.4149L18.945 20.7546C19.0109 20.8288 19.0908 20.8893 19.1802 20.9324C19.2696 20.9755 19.3667 21.0005 19.4658 21.0058C19.5649 21.0111 19.664 20.9967 19.7575 20.9635C19.851 20.9302 19.937 20.8787 20.0105 20.8119C20.0839 20.7452 20.1434 20.6645 20.1854 20.5746C20.2275 20.4847 20.2513 20.3874 20.2554 20.2882C20.2595 20.189 20.244 20.09 20.2096 19.9969C20.1752 19.9038 20.1226 19.8185 20.055 19.7459L5.055 3.24585ZM3 9.00023H6.75V15.0002H3V9.00023ZM13.5 19.4665L8.25 15.3837V8.98992L13.5 14.7649V19.4665ZM17.4375 13.488C17.7992 13.0772 17.9988 12.5486 17.9988 12.0012C17.9988 11.4538 17.7992 10.9251 17.4375 10.5143C17.3686 10.441 17.3151 10.3547 17.2803 10.2604C17.2454 10.166 17.2299 10.0657 17.2346 9.96523C17.2393 9.86477 17.2642 9.7663 17.3077 9.67565C17.3512 9.585 17.4126 9.50404 17.488 9.43757C17.5635 9.3711 17.6515 9.32049 17.747 9.28874C17.8424 9.25699 17.9432 9.24475 18.0434 9.25275C18.1437 9.26075 18.2413 9.28883 18.3305 9.33532C18.4196 9.38181 18.4985 9.44575 18.5625 9.52335C19.1657 10.2082 19.4986 11.0895 19.4986 12.0021C19.4986 12.9147 19.1657 13.796 18.5625 14.4809C18.4973 14.5547 18.4182 14.615 18.3297 14.6583C18.2412 14.7016 18.1451 14.7271 18.0467 14.7332C17.9484 14.7393 17.8498 14.7261 17.7566 14.6941C17.6634 14.6621 17.5775 14.6121 17.5036 14.5469C17.4297 14.4818 17.3694 14.4027 17.3261 14.3142C17.2828 14.2257 17.2574 14.1295 17.2512 14.0312C17.2451 13.9329 17.2584 13.8343 17.2904 13.7411C17.3223 13.6479 17.3723 13.5619 17.4375 13.488ZM9.9225 6.36304C9.86196 6.2853 9.81734 6.1964 9.79117 6.10141C9.765 6.00642 9.7578 5.90721 9.76999 5.80944C9.78218 5.71167 9.81352 5.61726 9.8622 5.5316C9.91089 5.44595 9.97598 5.37072 10.0538 5.31023L13.7897 2.40398C13.9008 2.3176 14.034 2.26422 14.174 2.24996C14.314 2.23569 14.4552 2.26111 14.5815 2.32331C14.7077 2.3855 14.8139 2.48197 14.8879 2.60167C14.9619 2.72138 15.0008 2.85949 15 3.00023V10.0155C15 10.2145 14.921 10.4052 14.7803 10.5459C14.6397 10.6865 14.4489 10.7655 14.25 10.7655C14.0511 10.7655 13.8603 10.6865 13.7197 10.5459C13.579 10.4052 13.5 10.2145 13.5 10.0155V4.53398L10.9744 6.50273C10.8169 6.62418 10.6175 6.67809 10.4203 6.6526C10.223 6.62711 10.044 6.5243 9.9225 6.36679V6.36304ZM23.25 12.0002C23.2511 13.8454 22.5711 15.6261 21.3403 17.0009C21.2067 17.1454 21.0216 17.2317 20.825 17.241C20.6284 17.2503 20.436 17.1819 20.2893 17.0506C20.1426 16.9193 20.0535 16.7357 20.041 16.5392C20.0286 16.3427 20.0939 16.1493 20.2228 16.0005C21.2066 14.9005 21.7505 13.4765 21.7505 12.0007C21.7505 10.5249 21.2066 9.10088 20.2228 8.00085C20.1553 7.92778 20.103 7.84201 20.0689 7.74852C20.0349 7.65504 20.0197 7.55571 20.0245 7.45633C20.0292 7.35695 20.0536 7.25949 20.0963 7.16964C20.1391 7.0798 20.1993 6.99935 20.2734 6.93299C20.3475 6.86663 20.4341 6.81569 20.5281 6.78312C20.6222 6.75056 20.7217 6.73702 20.821 6.74331C20.9203 6.7496 21.0173 6.77558 21.1065 6.81974C21.1957 6.8639 21.2751 6.92536 21.3403 7.00054C22.5714 8.37474 23.2515 10.1552 23.25 12.0002Z' fill='black'/%3E %3C/svg%3E");
  --ns-ic-house: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M20.5153 9.72843L13.0153 2.65218C13.0116 2.64898 13.0082 2.64554 13.005 2.64187C12.7289 2.39074 12.369 2.25159 11.9958 2.25159C11.6225 2.25159 11.2627 2.39074 10.9866 2.64187L10.9763 2.65218L3.48469 9.72843C3.33187 9.86895 3.20989 10.0397 3.12646 10.2298C3.04303 10.4199 2.99997 10.6252 3 10.8328V19.5C3 19.8978 3.15804 20.2793 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H9C9.39782 21 9.77936 20.842 10.0607 20.5607C10.342 20.2793 10.5 19.8978 10.5 19.5V15H13.5V19.5C13.5 19.8978 13.658 20.2793 13.9393 20.5607C14.2206 20.842 14.6022 21 15 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2793 21 19.8978 21 19.5V10.8328C21 10.6252 20.957 10.4199 20.8735 10.2298C20.7901 10.0397 20.6681 9.86895 20.5153 9.72843ZM19.5 19.5H15V15C15 14.6022 14.842 14.2206 14.5607 13.9393C14.2794 13.658 13.8978 13.5 13.5 13.5H10.5C10.1022 13.5 9.72064 13.658 9.43934 13.9393C9.15804 14.2206 9 14.6022 9 15V19.5H4.5V10.8328L4.51031 10.8234L12 3.74999L19.4906 10.8216L19.5009 10.8309L19.5 19.5Z' fill='black'/%3E %3C/svg%3E");
  --ns-ic-bookmark-simple: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M17 3H6.5C6.10218 3 5.72064 3.15804 5.43934 3.43934C5.15804 3.72064 5 4.10218 5 4.5V21C5.00007 21.1338 5.03595 21.2652 5.10393 21.3805C5.17191 21.4958 5.2695 21.5908 5.38659 21.6557C5.50367 21.7206 5.63598 21.7529 5.76978 21.7494C5.90358 21.7458 6.034 21.7066 6.1475 21.6356L11.75 18.1341L17.3534 21.6356C17.4669 21.7063 17.5972 21.7454 17.7309 21.7488C17.8646 21.7522 17.9967 21.7198 18.1136 21.655C18.2306 21.5902 18.3281 21.4953 18.396 21.3801C18.4639 21.2649 18.4998 21.1337 18.5 21V4.5C18.5 4.10218 18.342 3.72064 18.0607 3.43934C17.7794 3.15804 17.3978 3 17 3ZM17 19.6472L12.1466 16.6144C12.0274 16.5399 11.8896 16.5004 11.7491 16.5004C11.6085 16.5004 11.4708 16.5399 11.3516 16.6144L6.5 19.6472V4.5H17V19.6472Z' fill='black'/%3E %3C/svg%3E");
  --ns-ic-microphone: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 16.13C13.1931 16.1288 14.337 15.6543 15.1806 14.8106C16.0243 13.967 16.4988 12.8231 16.5 11.63V5.63C16.5 4.43653 16.0259 3.29194 15.182 2.44802C14.3381 1.60411 13.1935 1.13 12 1.13C10.8065 1.13 9.66193 1.60411 8.81802 2.44802C7.97411 3.29194 7.5 4.43653 7.5 5.63V11.63C7.50124 12.8231 7.97575 13.967 8.81939 14.8106C9.66303 15.6543 10.8069 16.1288 12 16.13ZM9 5.63C9 4.83436 9.31607 4.07129 9.87868 3.50868C10.4413 2.94608 11.2044 2.63 12 2.63C12.7956 2.63 13.5587 2.94608 14.1213 3.50868C14.6839 4.07129 15 4.83436 15 5.63V11.63C15 12.4257 14.6839 13.1887 14.1213 13.7513C13.5587 14.3139 12.7956 14.63 12 14.63C11.2044 14.63 10.4413 14.3139 9.87868 13.7513C9.31607 13.1887 9 12.4257 9 11.63V5.63ZM12.75 19.0925V22.13C12.75 22.3289 12.671 22.5197 12.5303 22.6603C12.3897 22.801 12.1989 22.88 12 22.88C11.8011 22.88 11.6103 22.801 11.4697 22.6603C11.329 22.5197 11.25 22.3289 11.25 22.13V19.0925C9.40091 18.9043 7.68728 18.0372 6.44048 16.6588C5.19368 15.2804 4.50228 13.4886 4.5 11.63C4.5 11.4311 4.57902 11.2403 4.71967 11.0997C4.86032 10.959 5.05109 10.88 5.25 10.88C5.44891 10.88 5.63968 10.959 5.78033 11.0997C5.92098 11.2403 6 11.4311 6 11.63C6 13.2213 6.63214 14.7474 7.75736 15.8726C8.88258 16.9979 10.4087 17.63 12 17.63C13.5913 17.63 15.1174 16.9979 16.2426 15.8726C17.3679 14.7474 18 13.2213 18 11.63C18 11.4311 18.079 11.2403 18.2197 11.0997C18.3603 10.959 18.5511 10.88 18.75 10.88C18.9489 10.88 19.1397 10.959 19.2803 11.0997C19.421 11.2403 19.5 11.4311 19.5 11.63C19.4977 13.4886 18.8063 15.2804 17.5595 16.6588C16.3127 18.0372 14.5991 18.9043 12.75 19.0925Z' fill='black'/%3E %3C/svg%3E");
  --ns-ic-hands-praying: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M22.0615 17.2249L18.664 13.8265L15.2459 2.54928C15.1487 2.22817 14.9739 1.93597 14.7368 1.69856C14.4998 1.46116 14.2079 1.28588 13.8869 1.18826C13.5659 1.09063 13.2258 1.07367 12.8967 1.13888C12.5677 1.20409 12.2597 1.34945 12.0002 1.56209C11.7408 1.34945 11.4328 1.20409 11.1037 1.13888C10.7747 1.07367 10.4346 1.09063 10.1136 1.18826C9.79263 1.28588 9.50069 1.46116 9.26364 1.69856C9.0266 1.93597 8.85176 2.22817 8.75462 2.54928L5.33649 13.8274L1.93899 17.2249C1.6579 17.5062 1.5 17.8876 1.5 18.2852C1.5 18.6829 1.6579 19.0643 1.93899 19.3455L5.00368 22.4102C5.14297 22.5495 5.30835 22.6601 5.49036 22.7355C5.67237 22.8109 5.86745 22.8497 6.06446 22.8497C6.26147 22.8497 6.45655 22.8109 6.63857 22.7355C6.82058 22.6601 6.98595 22.5495 7.12524 22.4102L11.6515 17.8812C11.777 17.7554 11.8935 17.621 12.0002 17.479C12.107 17.621 12.2235 17.7554 12.349 17.8812L16.8752 22.4112C17.0145 22.5505 17.1799 22.661 17.3619 22.7364C17.5439 22.8118 17.739 22.8506 17.936 22.8506C18.133 22.8506 18.3281 22.8118 18.5101 22.7364C18.6921 22.661 18.8575 22.5505 18.9968 22.4112L22.0615 19.3465C22.2008 19.2072 22.3113 19.0418 22.3867 18.8598C22.4621 18.6778 22.501 18.4827 22.501 18.2857C22.501 18.0887 22.4621 17.8936 22.3867 17.7116C22.3113 17.5296 22.2008 17.3642 22.0615 17.2249ZM6.06399 21.3499L3.00024 18.2862L4.18993 17.0965L7.25462 20.1612L6.06399 21.3499ZM11.2502 15.2327C11.2517 15.5286 11.1945 15.8218 11.0819 16.0954C10.9692 16.3689 10.8034 16.6174 10.594 16.8265L8.31399 19.0999L5.25024 16.0362L6.52993 14.7555C6.61726 14.6682 6.68167 14.5606 6.71743 14.4424L10.1862 2.98428C10.2214 2.85678 10.302 2.74655 10.4128 2.67437C10.5236 2.60218 10.657 2.57302 10.7879 2.59239C10.9187 2.61176 11.038 2.67831 11.1231 2.77951C11.2083 2.8807 11.2535 3.00956 11.2502 3.14178V15.2327ZM13.4065 16.8265C13.1971 16.6174 13.0313 16.3689 12.9186 16.0954C12.806 15.8218 12.7487 15.5286 12.7502 15.2327V3.13897C12.7503 3.00908 12.797 2.88352 12.8818 2.78516C12.9667 2.68681 13.084 2.6222 13.2125 2.60312C13.341 2.58403 13.4721 2.61174 13.5818 2.68118C13.6916 2.75063 13.7728 2.85719 13.8106 2.98147L17.2793 14.4396C17.3151 14.5578 17.3795 14.6654 17.4668 14.7527L18.8252 16.1112L15.694 19.1112L13.4065 16.8265ZM17.9365 21.3499L16.759 20.1715L19.8893 17.1715L21.0002 18.2862L17.9365 21.3499Z' fill='black'/%3E %3C/svg%3E");
  color: var(--ns-paper);
  background: var(--neutral-900-charcoal);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.ns-screen textarea,
.ns-screen .ns-pre,
.ns-screen .ns-sheet-body,
.ns-screen .ns-med-verse,
.ns-screen .ns-t27,
.ns-screen .ns-pline {
  -webkit-user-select: text;
  user-select: text;
}

/* NightAtmosphere, Soft: Charcoal under Tide, Candle and Haze at 45%
 * (centres and radii are the node's on the 402 x 874 frame). */
.ns-atmos {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(325px 360px at 355px 630px, rgba(51, 128, 125, 0.162) 0%, transparent 100%),
    radial-gradient(325px 245px at 40px 730px, rgba(186, 150, 107, 0.054) 0%, transparent 100%),
    radial-gradient(325px 320px at 285px 415px, rgba(104, 122, 146, 0.081) 0%, transparent 100%),
    var(--neutral-900-charcoal);
}

.ns-host,
.ns-page {
  position: absolute;
  inset: 0;
}

/* The step change: the leaving page fades over 0.3 s; each arriving block
 * rises 12 and fades in over 0.5 s, 90 ms apart, the first at 0.2 s. */
.ns-page.ns-leaving {
  animation: ns-leave var(--dur-step) ease forwards;
  pointer-events: none;
}

@keyframes ns-leave {
  to { opacity: 0; }
}

.ns-block {
  animation: ns-rise var(--dur-enter) var(--ease) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.09s);
}

@keyframes ns-rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }
}

@keyframes ns-fade {
  from { opacity: 0; }
}

/* NightColumn: centred on the physical screen; a column taller than the
 * screen scrolls instead of clipping. */
.ns-col-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  overflow-y: auto;
  scrollbar-width: none;
}

.ns-col-wrap::-webkit-scrollbar {
  display: none;
}

.ns-col {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* The prayer keeps 124 above and below (Layout.nightPageVerticalPadding). */
.ns-col-prayer {
  padding: 124px 32px;
}

/* ---- type (TypeStyle.swift) */

.ns-kicker {
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ns-tertiary);
  white-space: nowrap;
}

.ns-t47e { font: 600 47px/52px var(--font-serif); letter-spacing: -0.03em; }
.ns-t33e { font: 600 33px/40px var(--font-serif); letter-spacing: -0.02em; }
.ns-t27e { font: 600 27px/34px var(--font-serif); letter-spacing: -0.01em; }
.ns-t27 { font: 400 27px/34px var(--font-serif); letter-spacing: -0.01em; }
.ns-t23e { font: 600 23px/32px var(--font-serif); letter-spacing: -0.01em; }

.ns-body19 {
  font: 400 19px/28px var(--font-sans);
  color: var(--ns-secondary);
}

.ns-pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.ns-teal {
  color: var(--ns-teal);
}

/* The frames' text boxes, so titles break where the frames do. */
.ns-w171 { max-width: 171px; }
.ns-w199 { max-width: 199px; }
.ns-w218 { max-width: 218px; }
.ns-w223 { max-width: 223px; }

/* ---- controls */

.ns-screen [role="button"] {
  cursor: pointer;
  outline: none;
}

.ns-screen [role="button"]:focus-visible {
  outline: 2px solid var(--ns-teal);
  outline-offset: 2px;
}

.ns-screen [role="button"][aria-disabled="true"] {
  cursor: default;
}

.ns-actions {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.ns-gap-24 { gap: 24px; }
.ns-gap-40 { gap: 40px; }

.ns-stack-24 {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* CTAButton, Evening (Dark): Teal/400, the Charcoal label, 60 tall, 28 at
 * the sides; Hug with the 28 arrow 16 after the label; disabled at 32%. */
.ns-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 60px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--teal-400);
  color: var(--neutral-900-charcoal);
  font: 600 18px/26px var(--font-sans);
  white-space: nowrap;
  transition: opacity var(--dur-quick) ease, filter var(--dur-quick) ease;
}

.ns-cta:hover {
  filter: brightness(1.06);
}

.ns-cta:active {
  opacity: 0.8;
}

.ns-cta[aria-disabled="true"] {
  opacity: 0.32;
  filter: none;
}

.ns-cta-arrow::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: url("/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("/icons/arrow-right.svg") center / contain no-repeat;
}

/* Amen: label only with the 24 hands-praying signature 8 before it. */
.ns-cta-praying {
  gap: 8px;
}

.ns-cta-praying::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--ns-ic-hands-praying) center / contain no-repeat;
  mask: var(--ns-ic-hands-praying) center / contain no-repeat;
}

.ns-cta-wide {
  width: 100%;
}

/* Continue row: full width, a Paper/A15 line on top, 16 above the 24
 * line, the label Sans/16 Emphasis left, the 24 arrow (or x) right. */
.ns-continue {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ns-line);
  color: var(--ns-paper);
  font: 600 16px/24px var(--font-sans);
  transition: opacity var(--dur-quick) ease;
}

.ns-continue::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("/icons/arrow-right.svg") center / contain no-repeat;
}

.ns-continue-x::after {
  -webkit-mask-image: url("/icons/x.svg");
  mask-image: url("/icons/x.svg");
}

.ns-continue:hover {
  opacity: 0.8;
}

/* Text button, Quiet: Sans/16 Emphasis in Text/Tertiary. */
.ns-quiet {
  padding: 10px 0;
  color: var(--ns-tertiary);
  font: 600 16px/24px var(--font-sans);
  white-space: nowrap;
}

.ns-quiet:hover {
  color: var(--ns-secondary);
}

/* Text button, Muted link: Sans/16 Link in Text/Secondary, the Paper/A30
 * line 5 under the baseline. */
.ns-link {
  color: var(--ns-secondary);
  font: 600 16px/24px var(--font-sans);
  text-decoration: underline 1px var(--ns-underline);
  text-underline-offset: 5px;
  white-space: nowrap;
}

.ns-link:hover {
  color: var(--ns-paper);
}

/* Chip, Dark: Regular 44 tall, 16 at the sides, Paper 4%, Sans/16 Regular
 * in On Image Secondary; selected Teal/900 with a Teal/400 line and the
 * label Emphasis in Primary. Small 36 tall, 12 at the sides, Sans/13
 * Emphasis in Text/Secondary. */
.ns-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ns-prompts {
  margin-top: 0;
}

.ns-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(250, 250, 248, 0.04);
  color: var(--neutral-150-action);
  font: 400 16px/24px var(--font-sans);
  white-space: nowrap;
  transition: background-color var(--dur-quick) ease,
    border-color var(--dur-quick) ease;
}

.ns-chip:hover {
  background: rgba(250, 250, 248, 0.08);
}

.ns-chip[aria-pressed="true"] {
  border-color: var(--teal-400);
  background: var(--teal-900);
  color: var(--ns-paper);
  font-weight: 600;
}

.ns-chip-small {
  height: 36px;
  padding: 0 12px;
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--ns-secondary);
}

/* Field / Write Night: Tint/05 (Paper 5% on the dark page) at R/16, 140
 * tall, the Teal/400 caret, the 44 mic 4 from the bottom and trailing
 * edges (inert here). */
.ns-field {
  position: relative;
  align-self: stretch;
  height: 140px;
  margin-top: 16px;
  border-radius: 16px;
  background: rgba(250, 250, 248, 0.05);
}

.ns-screen .ns-field-input,
.ns-screen .ns-field-input:hover,
.ns-screen .ns-field-input:focus {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 16px 52px 16px 16px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  color: var(--ns-paper);
  font: 400 16px/24px var(--font-sans);
  caret-color: var(--teal-400);
  resize: none;
  outline: none;
}

.ns-screen .ns-field-input::placeholder {
  color: var(--ns-tertiary);
}

.ns-mic {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ns-secondary);
}

.ns-mic::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--ns-ic-microphone) center / contain no-repeat;
  mask: var(--ns-ic-microphone) center / contain no-repeat;
}

/* A 44 icon target over a 24 glyph. */
.ns-icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ns-paper);
}

.ns-icon-btn::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.ns-bookmark {
  --ic: var(--ns-ic-bookmark-simple);
}

/* ---- breathing (07 to 11, 34) */

/* Breath light: a 300 square at y 126, its invisible 260 circle seen only
 * through the teal light, which rises with the in-breath, almost empties
 * with the out-breath and rests, over the 5 s phase. The app draws each
 * moment's bitmap; this is a drawn stand-in. */
.ns-light {
  position: absolute;
  top: 126px;
  left: 51px;
  width: 300px;
  height: 300px;
  pointer-events: none;
}

.ns-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 200, 182, 0.10), transparent);
}

.ns-light-circle {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  overflow: hidden;
  filter: blur(2px);
}

.ns-light-level {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(40, 250, 220, 0) 0%,
    rgba(40, 250, 220, 0.16) 14%,
    rgba(43, 200, 182, 0.40) 42%,
    rgba(43, 200, 182, 0.56) 100%);
  transform: translateY(72%);
  transition: transform 5s ease-in-out;
}

.ns-light[data-moment="in"] .ns-light-level { transform: translateY(38%); }
.ns-light[data-moment="out"] .ns-light-level { transform: translateY(90%); }
.ns-light[data-moment="still"] .ns-light-level { transform: translateY(72%); }
.ns-light[data-moment="finding"] .ns-light-level { transform: translateY(32%); }

/* The guide: top-anchored at y 461, centred, Serif/27 Regular; under a
 * breath its number 40 below in Serif/68 Regular Teal/400. */
.ns-guide {
  position: absolute;
  top: 461px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.ns-guide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  animation: ns-fade var(--dur-step) ease;
}

.ns-guide-line {
  font: 400 27px/34px var(--font-serif);
  letter-spacing: -0.01em;
}

.ns-count {
  font: 400 68px/76px var(--font-serif);
  letter-spacing: -0.04em;
  color: var(--ns-teal);
}

/* Breath dots: three 6 dots 8 apart, 98 above the bottom; Paper 18%, a
 * finished breath Teal/400. */
.ns-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 98px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ns-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(250, 250, 248, 0.18);
  transition: background-color 0.5s ease;
}

.ns-dots i.is-done {
  background: var(--teal-400);
}

/* ---- the verse (12) and its sheets (27, 28) */

.ns-ref-row {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 24px;
}

.ns-ref {
  font: 400 16px/24px var(--font-sans);
  color: var(--ns-secondary);
}

/* The two Muted links, 24 apart, centred, 46 above the bottom edge. */
.ns-links {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.ns-sheet-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.ns-scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 9, 0.5);
  animation: ns-fade var(--dur-step) ease;
}

/* Note sheet: the kicker, the text in Serif/19 Regular, the note in
 * Sans/16 Regular Tertiary, the Close row with the x; hugs its text. */
.ns-sheet {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  max-height: 780px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 32px 32px;
  border-radius: 38px;
  background: var(--ns-raised);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  animation: ns-sheet-in 0.35s var(--ease);
}

@keyframes ns-sheet-in {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
}

.ns-grab {
  align-self: center;
  width: 36px;
  height: 5px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: rgba(250, 250, 248, 0.3);
}

.ns-sheet-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.ns-sheet-body {
  font: 400 19px/28px var(--font-serif);
  color: var(--ns-paper);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.ns-sheet-note {
  font: 400 16px/24px var(--font-sans);
  color: var(--ns-tertiary);
}

.ns-sheet .ns-continue {
  margin-top: 0;
}

/* ---- meditate (13, 14) */

.ns-hint {
  font: 400 16px/24px var(--font-sans);
  color: var(--ns-teal);
  transition: color var(--dur-step) ease;
}

.ns-hint.is-chosen {
  color: var(--ns-tertiary);
}

.ns-med-verse > * {
  transition: color var(--dur-step) ease;
}

.ns-med-verse .is-teal {
  color: var(--ns-teal);
}

.ns-med-verse .is-muted {
  color: var(--ns-muted);
}

.ns-screen .ns-cand {
  display: inline;
}

/* Every candidate underlined, the chosen one too: Paper/A30, 5 under the
 * baseline, the word's run only. */
.ns-under {
  text-decoration: underline 1px var(--ns-underline);
  text-underline-offset: 5px;
}

.ns-cand:hover .ns-under {
  text-decoration-color: rgba(250, 250, 248, 0.6);
}

/* The word line's reserved 112, so the page keeps its height. */
.ns-word-slot {
  align-self: stretch;
  height: 112px;
}

.ns-word-line {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: ns-fade var(--dur-step) ease;
}

.ns-gloss {
  font: 400 16px/24px var(--font-sans);
  color: var(--ns-secondary);
}

.ns-gloss-word {
  font-weight: 600;
  color: var(--ns-teal);
}

/* ---- the prayer (19, 20) */

.ns-plines {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ns-pline {
  font: 400 23px/32px var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ns-muted);
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-enter) var(--ease),
    transform var(--dur-enter) var(--ease), color var(--dur-enter) ease;
}

.ns-pline.is-shown {
  opacity: 1;
  transform: none;
}

.ns-pline.is-current {
  font-weight: 600;
  color: var(--ns-paper);
}

.ns-pline.is-done {
  color: var(--ns-paper);
}

.ns-amen {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-enter) var(--ease),
    transform var(--dur-enter) var(--ease);
  pointer-events: none;
}

.ns-amen.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---- journal (21) and Rest (23) */

.ns-sim-note {
  font: 400 13px/18px var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--ns-muted);
}

.ns-rest {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* A static stand-in for the five-day calendar: today in the centre with
 * tonight drawn on its ring. */
.ns-cal {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-radius: 20px;
  background: rgba(250, 250, 248, 0.04);
}

.ns-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ns-cal-letter {
  font: 600 13px/18px var(--font-sans);
  color: var(--ns-tertiary);
}

.ns-cal-ring {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(250, 250, 248, 0.15);
  border-radius: 50%;
  font: 600 16px/24px var(--font-sans);
  color: var(--ns-secondary);
}

.ns-cal-ring.is-today {
  border-color: var(--teal-400);
  background: rgba(43, 200, 182, 0.14);
  color: var(--ns-paper);
}

.ns-count-line {
  font: 400 16px/24px var(--font-sans);
  color: var(--ns-secondary);
}

/* Done: the column wide, 50 above the bottom edge. */
.ns-bottom-cta {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 50px;
  display: flex;
}

/* ---- chrome: the top bar and the toast */

/* FlowTopBar, Night: 44 tall at y 70, 24 at the sides; Back leading,
 * Sound and Home trailing 16 apart, each a 44 glass button on the Home
 * surface (Paper 5%). Hidden by default; a tap on the page toggles it
 * (280 ms, 12 travel). */
.ns-bar {
  position: absolute;
  top: 70px;
  left: 24px;
  right: 24px;
  z-index: 2;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.ns-bar.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ns-glass {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 250, 248, 0.05);
  box-shadow: var(--frosted-rim);
  color: var(--white-100);
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  backdrop-filter: blur(var(--frosted-blur));
}

.ns-glass:hover {
  background: rgba(250, 250, 248, 0.10);
}

.ns-glass::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.ns-ic-back { --ic: var(--ns-ic-caret-left); }
.ns-ic-sound { --ic: var(--ns-ic-speaker-high); }
.ns-ic-mute { --ic: var(--ns-ic-speaker-slash); }
.ns-ic-home { --ic: var(--ns-ic-house); }

/* Toast: Sans/13 Emphasis on frosted glass, centred 118 above the bottom
 * edge (ToastPlacement.screenBottom); on Rest 24 above Done (134). It
 * takes no taps. */
.ns-toast {
  position: absolute;
  left: 50%;
  bottom: 118px;
  z-index: 4;
  pointer-events: none;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(250, 250, 248, 0.15);
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  backdrop-filter: blur(var(--frosted-blur));
  box-shadow: var(--frosted-rim), var(--frosted-drop);
  color: var(--ns-paper);
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  animation: ns-fade var(--dur-step) ease;
}

.ns-toast.is-above-cta {
  bottom: 134px;
}

@media (prefers-reduced-motion: reduce) {
  .ns-block,
  .ns-sheet {
    animation-name: ns-fade;
  }
}