/* Calm Loop preview shell · one focus per screen, extends the site design system */
[hidden] { display: none !important; }
.no-js #today-card, .no-js #together-card { display: none; }
.app-body { background: var(--page); min-height: 100vh; display: flex; flex-direction: column; }
.app-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--page);
}
.app-top .brand { font-size: 17px; }
.app-top .preview-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--verified); border: 1px solid var(--verified); border-radius: 999px; padding: 3px 10px;
}
.app-top .exit { margin-left: auto; font-size: 14px; color: var(--gold-link); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.app-top .exit:hover { text-decoration: underline; }

.app-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--s-6) var(--gutter) var(--s-7); }
.app-screen { width: 100%; max-width: 560px; }
.app-lu { display: flex; justify-content: center; margin-bottom: var(--s-4); position: relative; }
.app-lu img { width: 92px; height: auto; transition: transform 0.4s ease, filter 0.4s ease; }
.app-lu.thinking img { transform: scale(0.97); filter: brightness(0.96); }
.app-lu.understanding img { transform: scale(1.04); filter: brightness(1.06); }
.app-lu.serious img { transform: scale(1.0) rotate(-1.5deg); filter: saturate(0.9); }
@media (prefers-reduced-motion: reduce) { .app-lu img { transition: none; } }

.app-screen h1 { font-size: clamp(26px, 4.5vw, 34px); margin-bottom: var(--s-3); }
.app-screen .app-sub { color: var(--text-soft); font-size: 15.5px; margin-bottom: var(--s-5); }

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  box-shadow: 0 10px 34px rgba(138, 78, 12, 0.1);
}
.app-card h2 { font-size: 21px; margin-bottom: var(--s-2); }
.app-card p { font-size: 15.5px; }
.app-source {
  display: block; margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--verified);
}
.stage-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-link); margin-bottom: var(--s-2); }

.choice-grid { display: grid; gap: var(--s-3); }
.choice {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 60px; padding: 14px 20px;
  background: var(--surface); border: 1px solid var(--gold-link); border-radius: var(--r-md);
  font: inherit; font-weight: 600; font-size: 16px; color: var(--text);
  cursor: pointer; text-align: left; width: 100%; text-decoration: none;
}
.choice:hover, .choice:focus-visible { box-shadow: 0 6px 24px rgba(239, 177, 90, 0.35); }
.choice small { font-weight: 400; color: var(--text-soft); }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-4); }
.chip-q {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  min-height: 44px; padding: 8px 16px; cursor: pointer; text-align: left;
}
.chip-q:hover, .chip-q:focus-visible { border-color: var(--accent-deep); }
.chip-q[aria-pressed="true"] { background: var(--surface-alt); border-color: var(--accent-deep); }

.answer { margin-top: var(--s-4); }
.answer.refuse .app-card { border-color: var(--accent-deep); }
.answer.escalate .app-card { border-color: #A33B2E; box-shadow: 0 10px 34px rgba(163, 59, 46, 0.14); }
.answer.escalate .state-label { color: #A33B2E; }
.state-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verified); margin-bottom: var(--s-2); }

.app-next { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.app-note { font-size: 13.5px; color: var(--text-soft); margin-top: var(--s-4); max-width: 56ch; }
.app-end { text-align: center; padding: var(--s-7) 0; }
.app-end .quiet { font-family: 'Literata', Georgia, serif; font-size: 24px; margin-bottom: var(--s-3); }

textarea.memory {
  font: inherit; width: 100%; min-height: 110px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--text);
  resize: vertical;
}
.timer-line { font-size: 40px; font-family: 'Literata', Georgia, serif; text-align: center; margin: var(--s-4) 0; }

/* --- Family Vault screen (vault.html) · additive, 2026-08-02 --- */
.vault-example-note { font-size: 13px; font-weight: 600; color: var(--verified); margin-bottom: var(--s-3); }
.vault-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 540px) { .vault-grid { grid-template-columns: 1fr; } }
.keepsake {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); box-shadow: 0 6px 22px rgba(138, 78, 12, 0.08);
}
.keepsake .keep-kind { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-link); margin-bottom: var(--s-2); }
.keepsake h2 { font-size: 16.5px; margin-bottom: 6px; }
.keepsake p { font-size: 14px; color: var(--text-soft); }
.keepsake .keep-date {
  display: block; margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-soft);
}
.vault-strip {
  margin-top: var(--s-5);
  background: var(--surface-alt); border: 1px solid var(--line); border-left: 3px solid var(--verified);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
}
.vault-strip p { font-size: 14px; color: var(--text-soft); }
.vault-more-title { font-size: 15px; letter-spacing: 0.02em; margin-top: var(--s-6); margin-bottom: var(--s-3); }
.locked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.locked-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 12px var(--s-4); opacity: 0.85;
}
.locked-row .locked-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.locked-row .locked-desc { font-size: 13px; color: var(--text-soft); }
.locked-tag {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}

/* --- NOJS-001 · no-JS static fallbacks (additive, 2026-08-02) ---
   Single semantic representation: app.js removes the html.no-js class when it runs.
   With JS active only .js-only content exists for the accessibility tree;
   without JS (or if app.js never runs) only the reviewed .no-js-only static
   examples exist. display:none removes the hidden branch from screen readers. */
html.no-js .js-only { display: none !important; }
html:not(.no-js) .no-js-only { display: none !important; }