/* ============================================================================
 * homenaje.css — the shared, reverent visual language for the platform
 * ----------------------------------------------------------------------------
 * One calm, dignified palette across every page (landing, create, view).
 * Soft parchment light, muted slate ink, warm candle-gold, dusty rose, sage.
 * Mobile-first, generous whitespace, large legible serif for names & words.
 * No commercial gloss. Quiet by design.
 * ==========================================================================*/

:root {
  /* parchment & ink */
  --bg: #f7f4ee;            /* warm off-white, like soft paper */
  --bg2: #f1ece2;          /* slightly deeper parchment */
  --panel: #fffdf9;        /* card surface */
  --ink: #2e2a24;          /* warm near-black, easy on the eyes */
  --muted: #756d60;        /* soft brown-grey for secondary text */
  --faint: #a59c8c;        /* very soft, for hints */
  --line: #e4ddcf;         /* hairline */
  --line2: #d8cfbd;

  /* warm accents — candlelight, never neon */
  --gold: #b88a2e;         /* candle gold (legible on parchment) */
  --gold-soft: #e9c877;    /* flame glow */
  --rose: #a86b72;         /* dusty rose, for tender accents */
  --sage: #6f8a6f;         /* calm green, for "alive"/public */
  --accent: #5b6b8a;       /* muted slate-blue for quiet links/CTAs */

  --shadow: 0 1px 2px rgba(46,42,36,.05), 0 8px 28px rgba(46,42,36,.06);
  --radius: 18px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* a hushed, candle-lit dark — still warm, never cold/techy */
    --bg: #16140f;
    --bg2: #1c1a14;
    --panel: #211e17;
    --ink: #efe9dd;
    --muted: #b3a994;
    --faint: #877d68;
    --line: #2e2a20;
    --line2: #3a3528;
    --gold: #e0bd72;
    --gold-soft: #f0d68f;
    --rose: #d49aa1;
    --sage: #9fbf9f;
    --accent: #9fb0d0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(233,200,119,.16), transparent 60%),
    var(--bg);
  background-color: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 18px 18px 64px; }
.wrap.wide { max-width: 920px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── header / chrome ── */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 19px; letter-spacing: .2px; color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand .flame { font-size: 18px; filter: drop-shadow(0 0 6px rgba(233,200,119,.55)); }
.brand b { font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 8px; }

/* ── buttons ── */
.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line2); border-radius: 12px;
  padding: 10px 16px; cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn.primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-color: transparent; color: #3a2c08;
}
.btn.quiet { background: transparent; border-color: var(--line2); color: var(--muted); }
.btn.sm { padding: 7px 12px; font-size: 13.5px; border-radius: 10px; }
.btn.link { background: transparent; border: 0; color: var(--accent); padding: 6px 4px; }
.btn.link:hover { box-shadow: none; text-decoration: underline; }
.btn.block { display: block; width: 100%; text-align: center; }
.lang-btn { min-width: 46px; }

/* ── cards / sections ── */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  margin-top: 18px;
}
.card.soft { box-shadow: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); }
h1 { font-size: 30px; line-height: 1.2; margin: 4px 0 10px; letter-spacing: .2px; }
h2 { font-size: 21px; margin: 0 0 12px; }
h3 { font-size: 16.5px; margin: 0 0 8px; }
.lede { font-size: 17px; color: var(--muted); line-height: 1.7; margin: 0 0 8px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.center { text-align: center; }
.serif { font-family: var(--serif); }

/* ── forms ── */
label.fld { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin: 16px 0 6px; }
label.fld .opt { font-weight: 400; color: var(--faint); }
input[type=text], input[type=date], textarea, select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line2); border-radius: 12px;
  padding: 12px 14px; line-height: 1.5;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,138,46,.16);
}
.field-hint { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.two-col { display: flex; gap: 14px; flex-wrap: wrap; }
.two-col > * { flex: 1 1 180px; }

/* visibility toggle (the per-instance private/public switch) */
.vis-pick { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.vis-opt {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line2); border-radius: 14px; padding: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.vis-opt:hover { border-color: var(--line2); background: var(--bg2); }
.vis-opt.on { border-color: var(--gold); background: rgba(184,138,46,.07); }
.vis-opt .ic { font-size: 22px; line-height: 1.2; }
.vis-opt .lab { font-weight: 600; font-size: 15px; }
.vis-opt .lab small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }
.vis-opt input { display: none; }

/* ── candle flame ── */
.flame {
  display: inline-block; line-height: 1;
  filter: drop-shadow(0 0 6px rgba(233,200,119,.6));
  animation: flicker 3.2s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { transform: translateY(0) rotate(-.6deg); opacity: .96; }
  50%      { transform: translateY(-1px) rotate(.6deg); opacity: 1; }
}

/* ── ⚛️🕯️ QUANTUM CANDLE — a real drawn, glowing flame whose dance is driven by genuine
   IBM-Quantum randomness (quantum-candle.js sets the CSS vars). Reverent, not gaudy. ── */
.qcandle { position: relative; width: 72px; height: 138px; margin: 4px auto 12px;
  --qscale: 1; --qsway: 0deg; --qty: 0px; --qbright: .9; }
.qcandle .qstick { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 38px; height: 70px; border-radius: 9px 9px 5px 5px;
  background: linear-gradient(90deg,#6f4f24 0%, #f3e1ad 42%, #ece0b9 58%, #6a4a21 100%);
  box-shadow: inset 0 7px 11px rgba(255,247,221,.45), inset 0 -12px 16px rgba(0,0,0,.32); }
.qcandle .qstick::before { content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:44px; height:14px; border-radius:50%; background:radial-gradient(closest-side,#fff4d2,#d8bd82); }
.qcandle .qwick { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%);
  width: 3px; height: 13px; background: linear-gradient(#4a3520,#161616); border-radius: 2px; }
.qcandle .qglow { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%);
  width: 158px; height: 158px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  filter: blur(5px); opacity: var(--qbright); transition: opacity .12s ease-out;
  background: radial-gradient(circle, rgba(255,176,72,.62) 0%, rgba(255,120,0,.24) 36%, rgba(255,90,0,0) 70%); }
.qcandle .qflame { position: absolute; left: 50%; bottom: 78px; transform-origin: 50% 100%;
  transform: translate(-50%, var(--qty)) rotate(var(--qsway)) scale(var(--qscale));
  width: 34px; height: 74px; border-radius: 50% 50% 47% 47% / 74% 74% 28% 28%;
  background: linear-gradient(to top,#ff2e06 0%, #ff6a12 20%, #ffae35 48%, #ffe487 78%, #fff7da 100%);
  box-shadow: 0 0 26px 7px rgba(255,140,30,.5), 0 0 64px 20px rgba(255,84,0,.26);
  filter: blur(.5px); transition: transform .12s ease-out; }
.qcandle .qcore { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 14px; height: 34px; border-radius: 50% 50% 45% 45% / 68% 68% 32% 32%;
  background: linear-gradient(to top, rgba(56,120,255,.9) 0%, rgba(150,195,255,.55) 28%, rgba(255,255,255,.95) 66%, #fff 100%);
  filter: blur(.4px); }
@media (prefers-reduced-motion: reduce) { .qcandle .qflame, .qcandle .qglow { transition: none; } }

/* ── memorial cards (landing list) ── */
.mem-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 620px) { .mem-grid { grid-template-columns: 1fr 1fr; } }
.mem-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; box-shadow: var(--shadow);
  transition: transform .1s ease, box-shadow .18s ease;
}
.mem-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(46,42,36,.1); }
.mem-card .pic {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg2) center/cover no-repeat; border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--faint);
}
.mem-card .meta { min-width: 0; }
.mem-card .nm { font-family: var(--serif); font-size: 18px; color: var(--ink); line-height: 1.25; }
.mem-card .sub { font-size: 13px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-card .tally { font-size: 12.5px; color: var(--gold); margin-top: 5px; }

/* ── the "how it helps" trio on the landing ── */
.trio { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 620px) { .trio { grid-template-columns: 1fr 1fr 1fr; } }
.trio .t {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
}
.trio .t .ic { font-size: 26px; }
.trio .t h3 { margin: 8px 0 6px; }
.trio .t p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ── memorial hero (view page) ── */
.hero { text-align: center; padding: 8px 4px 4px; }
.hero .portrait {
  width: 132px; height: 132px; border-radius: 50%; margin: 6px auto 14px;
  background: var(--bg2) center/cover no-repeat;
  border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line2), var(--shadow);
  display: flex; align-items: center; justify-content: center; font-size: 52px; color: var(--faint);
}
.hero .name { font-size: 32px; line-height: 1.18; margin: 0 0 4px; }
.hero .honorific { font-family: var(--serif); font-style: italic; color: var(--rose); font-size: 17px; margin: 0 0 8px; }
.hero .dates { font-size: 15px; color: var(--muted); letter-spacing: .3px; }
.hero .dates .dash { margin: 0 8px; color: var(--faint); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 99px; padding: 4px 11px;
}
.badge.private { color: var(--rose); }

/* ── words / prayer blocks ── */
.passage {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.8; color: var(--ink);
  white-space: pre-wrap;
}
.passage.prayer { font-style: italic; color: var(--muted); }
.rule { height: 1px; background: var(--line); border: 0; margin: 22px 0; }

/* ── candle wall + words list (view) ── */
.candle-wall {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end;
  min-height: 44px; padding: 6px 0;
}
.candle-wall .c { font-size: 26px; }
.candle-count { font-family: var(--serif); font-size: 15px; color: var(--gold); }
.words-list { display: flex; flex-direction: column; gap: 12px; }
.word {
  border-left: 3px solid var(--gold-soft); background: var(--bg2);
  border-radius: 0 12px 12px 0; padding: 12px 14px;
}
.word .who { font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.word .who .when { font-weight: 400; color: var(--faint); font-size: 12px; }
.word .txt { font-family: var(--serif); font-size: 16px; color: var(--ink); margin-top: 4px; line-height: 1.6; white-space: pre-wrap; }
.empty-note { color: var(--muted); font-size: 14.5px; font-style: italic; padding: 4px 0; }

/* ── toast ── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  opacity: 0; pointer-events: none; z-index: 60;
  background: var(--ink); color: var(--bg); border-radius: 12px;
  padding: 11px 18px; font-size: 14px; box-shadow: var(--shadow);
  max-width: 90vw; text-align: center;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.on { opacity: .97; transform: translateX(-50%) translateY(0); }

/* ── footer ── */
.foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  text-align: center; font-size: 13px; color: var(--faint); line-height: 1.7; }
.foot a { color: var(--muted); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flame { animation: none; }
  .btn, .mem-card, .toast { transition: none; }
}