/* ============================================================================
 * style.css — Sancta Confession Helper
 * Calm, reverent, legible. Mobile-first. No external fonts/CDNs (offline-safe).
 * Palette: parchment + deep liturgical violet (the color of penance/Advent/Lent).
 * ==========================================================================*/

:root{
  --bg:#f5f1e8;          /* parchment */
  --bg-card:#fffdf8;
  --ink:#2b2622;         /* warm near-black */
  --ink-soft:#5c554c;
  --violet:#5b3a82;      /* penitential violet */
  --violet-deep:#432a61;
  --violet-soft:#ece4f3;
  --gold:#9a7b3f;
  --rule:#e0d8c8;
  --danger:#9a3b2f;
  --ok:#2f7d4f;
  --radius:14px;
  --maxw:720px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  line-height:1.6;
  font-size:17px;
  -webkit-text-size-adjust:100%;
}
body.big-text{ font-size:21px; }

header.app-header{
  background:linear-gradient(180deg,var(--violet-deep),var(--violet));
  color:#fbf7ef;
  padding:18px 16px 14px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.app-header .cross{ font-size:22px; opacity:.85; letter-spacing:.3em; }
#app-title{ margin:.15em 0 .1em; font-size:1.45em; font-weight:600; letter-spacing:.01em; }
#app-subtitle{ margin:0; font-size:.82em; opacity:.9; font-style:italic; }

.toolbar{
  display:flex; gap:14px; align-items:center; justify-content:center;
  margin-top:10px; font-size:.8em;
}
.toolbar button, .toolbar label{ color:#fbf7ef; }
#lang-toggle{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  color:#fff; border-radius:20px; padding:3px 12px; cursor:pointer; font:inherit;
}
.toolbar label{ display:flex; align-items:center; gap:6px; cursor:pointer; }

nav#tabs{
  display:flex; flex-wrap:wrap; gap:2px; justify-content:center;
  background:var(--violet-deep); padding:0 6px 6px;
  position:sticky; top:0; z-index:10;
}
nav#tabs .tab{
  background:transparent; border:none; color:#d9cde9; cursor:pointer;
  padding:9px 12px; font:inherit; font-size:.85em; border-radius:0 0 10px 10px;
  border-top:3px solid transparent;
}
nav#tabs .tab.active{ background:var(--bg); color:var(--violet-deep); font-weight:600; }

main#main{ max-width:var(--maxw); margin:0 auto; padding:18px 16px 60px; }
.view{ animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

p.intro{ font-size:1.02em; color:var(--ink-soft); background:var(--bg-card);
  border-left:3px solid var(--gold); padding:12px 14px; border-radius:0 8px 8px 0; }
p.closing{ font-style:italic; color:var(--ink-soft); margin-top:24px;
  border-top:1px solid var(--rule); padding-top:16px; }
p.blurb{ color:var(--ink-soft); font-size:.92em; font-style:italic; margin:.2em 0 .8em; }

/* asides / disclosures */
details.aside{ background:var(--violet-soft); border-radius:10px; padding:4px 14px; margin:14px 0; }
details.aside summary{ cursor:pointer; font-weight:600; color:var(--violet-deep); padding:8px 0; }
details.aside[open] summary{ border-bottom:1px solid var(--rule); margin-bottom:8px; }
details.aside.open p{ }
.soft{ color:var(--ink-soft); }

/* lens chips */
.lensbar,.ac-toggle{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.chip{
  background:var(--bg-card); border:1px solid var(--rule); color:var(--violet-deep);
  border-radius:20px; padding:6px 14px; cursor:pointer; font:inherit; font-size:.85em;
}
.chip.active{ background:var(--violet); color:#fff; border-color:var(--violet); }

/* exam sections + items */
.exam-section{ margin:22px 0; }
.exam-section h3{ color:var(--violet-deep); border-bottom:2px solid var(--violet-soft);
  padding-bottom:6px; margin:0 0 8px; font-size:1.1em; }
.exam-item{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--rule); border-radius:10px;
  padding:12px 14px; margin:8px 0; cursor:pointer; transition:border-color .15s;
}
.exam-item:hover{ border-color:var(--violet); }
.exam-item input[type=checkbox]{ width:20px; height:20px; margin-top:3px; accent-color:var(--violet); flex:0 0 auto; }
.exam-body{ flex:1; }
.exam-q{ }
.grave-tag{ color:var(--gold); font-weight:bold; cursor:help; }
.pastoral{ margin-top:8px; font-size:.88em; color:var(--violet-deep);
  background:var(--violet-soft); border-radius:8px; padding:8px 10px; font-style:italic; }
.exam-note{ font-size:.9em; color:var(--ink-soft); font-style:italic;
  border-left:3px solid var(--rule); padding:6px 12px; margin:8px 0; }

/* walkthrough steps */
ol.steps{ counter-reset:step; list-style:none; padding:0; margin:18px 0; }
.step{ background:var(--bg-card); border:1px solid var(--rule); border-radius:12px;
  padding:14px 16px 14px 56px; margin:10px 0; position:relative; }
.step::before{ counter-increment:step; content:counter(step);
  position:absolute; left:14px; top:14px; width:30px; height:30px; border-radius:50%;
  background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:.95em; }
.step-title{ font-weight:600; color:var(--violet-deep); margin-bottom:4px; }
.step-body{ color:var(--ink); font-size:.96em; }

.caveat{ background:#fbeee9; border:1px solid #e6c8bd; border-left:4px solid var(--danger);
  border-radius:0 10px 10px 0; padding:12px 14px; margin:16px 0; font-size:.95em; }

blockquote.mercy{ margin:18px 0; padding:14px 18px; background:var(--violet-soft);
  border-radius:12px; font-style:italic; color:var(--violet-deep); border:1px solid #d9c9e8; }

/* act of contrition prayer */
.act-contrition{ background:var(--bg-card); border:1px solid var(--gold); border-radius:12px;
  padding:16px; margin:20px 0; }
.act-contrition h3{ color:var(--violet-deep); margin-top:0; text-align:center; }
.prayer{ text-align:center; margin-top:10px; }
.prayer-line{ font-size:1.08em; line-height:1.7; color:var(--ink); }
body.big-text .prayer-line{ font-size:1.2em; }

.practical ul{ padding-left:20px; }
.practical li{ margin:8px 0; }

/* prep view */
ul.prep-list{ list-style:none; padding:0; }
ul.prep-list li{ background:var(--bg-card); border:1px solid var(--rule); border-radius:8px;
  padding:10px 12px; margin:6px 0; font-size:.95em; }
.prep-sec{ color:var(--violet-deep); font-weight:600; font-size:.85em; }
textarea.notes{ width:100%; border:1px solid var(--rule); border-radius:10px;
  padding:12px; font:inherit; font-size:1em; resize:vertical; background:var(--bg-card);
  color:var(--ink); }
.remember{ display:flex; align-items:flex-start; gap:8px; margin:14px 0 4px; cursor:pointer; }
.remember input{ width:18px; height:18px; margin-top:3px; accent-color:var(--violet); }
.hint{ font-size:.82em; color:var(--ink-soft); margin:0 0 14px; }
.after-box{ background:var(--violet-soft); border-radius:12px; padding:12px 16px; margin-top:20px; }
.after-box h4{ margin:0 0 6px; color:var(--violet-deep); }
.after-box p{ margin:0; font-size:.92em; }

/* about view */
.about-block{ margin:16px 0; }
.about-block h3{ color:var(--violet-deep); }
.about-block ul{ padding-left:20px; }
.about-block li{ margin:6px 0; font-size:.95em; }
.selfcheck{ margin-top:10px; font-size:.9em; min-height:1.2em; }
.selfcheck.ok{ color:var(--ok); }
.selfcheck.bad{ color:var(--danger); font-weight:600; }

/* buttons */
.btn{ background:var(--violet); color:#fff; border:none; border-radius:24px;
  padding:11px 20px; font:inherit; font-size:.95em; cursor:pointer; margin:14px 0;
  box-shadow:0 2px 5px rgba(67,42,97,.25); }
.btn:hover{ background:var(--violet-deep); }
.btn.danger{ background:var(--danger); box-shadow:0 2px 5px rgba(154,59,47,.25); }
.btn.danger:hover{ background:#7d2e25; }
.print-btn{ display:block; margin-left:auto; margin-right:auto; }

footer.app-footer{ text-align:center; color:var(--ink-soft); font-size:.78em;
  padding:18px 16px 30px; max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--rule); }
footer.app-footer .amdg{ letter-spacing:.2em; color:var(--gold); }

/* ---- PRINT: only the walkthrough/prayer; never the private notes ----- */
@media print{
  header.app-header, nav#tabs, .toolbar, .btn, .lensbar, details.aside summary{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  .step,.act-contrition,.caveat,blockquote.mercy{ break-inside:avoid; border-color:#999; }
  /* When the print-walk flag is set we hide everything that isn't the walk view */
  body.print-walk #main > .view:not(:last-child){ }
  /* Safety: textarea (notes) and prep list never print */
  textarea.notes, ul.prep-list, .after-box, .remember, .hint{ display:none !important; }
}