/* ═══════════════════════════════════════════════
   THE HOLY SOULS IN PURGATORY — /devotions/holy-souls
   ═══════════════════════════════════════════════
   The prayer cards, section heads, rubrics, silences, Latin labels and the
   print band are the adoration page's (eucharistic-adoration.css, ea-
   classes, linked just before this sheet; <main> carries .ea-page for its
   colours). This sheet adds only what that page does not have, every rule
   under an hs- class: the dark head's verse, the three choices, the order
   of prayer with its minutes, the numbered steps, step-by-step mode, the
   Latin toggle, the names, the Today box and the meditation quotations.

   Without JavaScript every section shows, numbered 1–12, both paths'
   minutes beside each, English above the Latin. holy-souls.js adds .hs-js
   and data-path / data-mode / data-lang to <main>, and the rules under
   .hs-js below do the hiding. Without JavaScript the step numbers are a
   CSS counter; with it, holy-souls.js writes each visible step's number
   (data-n), so the 15-minute path counts 1–9 even one step at a time. */

.hs-page{--hs-red:#7a2a22;}

/* ── The head ────────────────────────────────── */
.hs-pagehead{padding-bottom:40px;}
.hs-pagehead h1{text-wrap:balance;}
.hs-pagehead .sub{max-width:620px;margin-left:auto;margin-right:auto;text-wrap:balance;}
.hs-head-verse{
  max-width:560px;margin:22px auto 0;padding-top:18px;border-top:1px solid rgba(201,168,90,.30);
  font-family:var(--head);font-style:italic;font-size:19px;line-height:1.5;color:#e2d6bd;
}
.hs-head-verse cite{display:block;margin-top:6px;font-family:var(--display);font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);}

.hs-wrap{width:min(780px,calc(100% - 48px));margin:0 auto;}

/* ── The first word and the choices ──────────── */
.hs-first{padding:50px 0 10px;}
.hs-lede{margin:0 0 16px;font-family:var(--head);font-size:clamp(23px,3.2vw,28px);line-height:1.45;text-align:center;text-wrap:pretty;}
.hs-first > .hs-wrap > p{margin:0 0 16px;font-size:19px;line-height:1.7;}
.hs-first > .hs-wrap > p a,.hs-page .ea-prose a,.hs-page .ea-section-head a,.hs-page .ea-source a,.hs-page .ea-note a,
.hs-today a,.hs-quote a,.hs-keep a,.hs-order a,.hs-page .ea-sources a{
  color:var(--gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.hs-first > .hs-wrap > p a:focus-visible,.hs-page .ea-prose a:focus-visible,.hs-page .ea-section-head a:focus-visible,.hs-page .ea-source a:focus-visible,
.hs-page .ea-note a:focus-visible,.hs-today a:focus-visible,.hs-quote a:focus-visible,.hs-keep a:focus-visible,.hs-order a:focus-visible,
.hs-page .ea-sources a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;border-radius:2px;}

.hs-controls{
  margin:28px 0 0;padding:22px 24px;
  display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:center;gap:18px 28px;
  background:var(--paper-card);border:1px solid var(--rule);
}
.hs-controls[hidden]{display:none;}
.hs-seg{border:0;margin:0;padding:0;min-width:0;}
.hs-seg legend{
  margin:0 0 8px;padding:0;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
}
.hs-seg label{position:relative;display:inline-block;margin:0 -1px 0 0;cursor:pointer;}
.hs-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.hs-seg label span{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;
  font-family:var(--head);font-size:18px;line-height:1.2;color:var(--ink);
  background:var(--paper);border:1px solid rgba(125,98,36,.55);
}
.hs-seg label:first-of-type span{border-radius:3px 0 0 3px;}
.hs-seg label:last-of-type span{border-radius:0 3px 3px 0;}
.hs-seg input:checked + span{background:var(--gold-deep);border-color:var(--gold-deep);color:#fbf8ef;}
.hs-seg input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px;position:relative;z-index:1;}
.hs-seg label:hover input:not(:checked) + span{background:#efe6d1;}
.hs-total{
  grid-column:1 / -1;margin:0;text-align:center;
  font-family:var(--head);font-style:italic;font-size:19px;color:#4a3a28;
}

/* ── The order of prayer ─────────────────────── */
.hs-order{margin:30px 0 0;}
.hs-order h2{margin:0 0 6px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);}
.hs-order-note{margin:0 0 10px;font-size:16px;line-height:1.55;color:#5a4a33;}
.hs-order ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);counter-reset:hs-order;}
.hs-order li{
  counter-increment:hs-order;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:9px 4px;border-bottom:1px solid var(--rule);font-family:var(--head);font-size:19px;line-height:1.3;
}
.hs-order li::before{content:counter(hs-order);min-width:24px;font-family:var(--display);font-size:12px;color:var(--gold-deep);}
.hs-order li a{text-decoration:none;color:var(--ink);}
.hs-order li a:hover{color:var(--gold-deep);text-decoration:underline;}
.hs-order-m{margin-left:auto;font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b5a40;white-space:nowrap;}
.hs-order-sum{margin:10px 0 0;text-align:right;font-family:var(--head);font-style:italic;font-size:18px;color:#4a3a28;}

/* The minutes of each path. Without JavaScript both show, joined by a dot;
   with it, only the chosen path's, and without the "15-minute path" label. */
.hs-m15 + .hs-m30::before,.hs-order-m .hs-m15 + .hs-m30::before{content:" · ";}
.hs-order-m .hs-m15::before{content:"15: ";}
.hs-order-m .hs-m30::before{content:"30: ";}
.hs-order-m .hs-m15 + .hs-m30::before{content:" · 30: ";}
.hs-order-sum .hs-m15 + .hs-m30::before{content:" · ";}
.hs-only{
  display:inline-block;padding:2px 8px;border-radius:2px;
  font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--hs-red);color:#fbf8ef;vertical-align:.15em;
}
.hs-only-line{margin:0 0 10px;}

.hs-print{margin-top:34px;}

/* ── The steps ───────────────────────────────── */
.hs-body{padding:46px 0 80px;}
.hs-steps{counter-reset:hs-step;}
.hs-step{counter-increment:hs-step;scroll-margin-top:90px;}
.hs-step h2{scroll-margin-top:90px;}
.hs-step h2:focus{outline:none;}
.hs-step h2:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;}
.hs-count::before{content:counter(hs-step);margin-right:10px;font-size:15px;color:var(--hs-red);}
.hs-count::after{content:"·";margin-right:10px;color:var(--gold-deep);}
.hs-step .ea-numeral .hs-only{margin-right:8px;}

/* English and Latin. Without JavaScript the Latin stands under the English. */
.hs-bi .hs-la{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);}
.hs-bi .hs-la p{color:#5e4e38;font-style:italic;}
.hs-bi .hs-la .ea-amen{font-style:normal;}
.hs-page .ea-verse p.ea-dlg{margin:8px 0 0;}
.hs-page .ea-verse p.ea-dlg:first-child{margin-top:0;}
.hs-page .ea-verse b{font-weight:600;color:#5a3d17;}
.hs-page .ea-verse .ea-dlg b{font-family:var(--display);font-size:14px;color:#8b1a1a;}
.hs-times{margin:6px 0 0;padding:0;text-indent:0;font-family:var(--head);font-size:17px;color:#8b1a1a;}
.hs-page .ea-verse p.hs-times{padding-left:0;text-indent:0;font-size:17px;}
.hs-page .ea-silence{margin:0 0 26px;}
.hs-page .ea-prayer .ea-silence{margin:0 0 18px;}
.hs-after-pause{margin-top:4px;}
.hs-page .ea-scripture{margin-bottom:12px;}
.hs-page .ea-scripture cite{margin-bottom:8px;}
.hs-note{margin-top:22px;}
.hs-each + .hs-each{margin-top:20px;padding-top:16px;border-top:1px dashed var(--rule);}
.hs-each-for{margin:0 0 8px;font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);}
.hs-n{font-weight:600;}

/* The Offertory: English and Latin side by side on a wide screen. */
.hs-parallel .hs-la p{color:#5e4e38;font-style:italic;}

/* ── The Today box ───────────────────────────── */
.hs-today{
  margin:28px 0 0;padding:24px 26px;
  background:var(--paper-card);border:1px solid var(--rule);border-top:3px solid var(--hs-red);
}
.hs-today h3{margin:0 0 12px;font-family:var(--head);font-size:24px;font-weight:600;line-height:1.2;color:#3b2716;}
.hs-today-kicker{display:block;margin-bottom:4px;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--hs-red);}
.hs-today p{margin:0 0 12px;font-size:18px;line-height:1.65;}
.hs-today-list{margin:0 0 14px;padding:0 0 0 22px;}
.hs-today-list li{margin:0 0 8px;font-size:18px;line-height:1.6;}
.hs-today-grant{white-space:nowrap;color:#5a4a33;}
.hs-today .hs-today-conds{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:16px;line-height:1.6;color:#4a3a28;}

/* ── The names ───────────────────────────────── */
.hs-names{margin:0 0 26px;padding:22px 24px;border:1px solid var(--rule);background:#f3ecdd;}
.hs-names[hidden]{display:none;}
.hs-names h3{margin:0 0 8px;font-family:var(--head);font-size:24px;font-weight:600;color:#3b2716;}
.hs-names-note{margin:0 0 14px;font-size:16px;line-height:1.6;color:#4a3a28;}
.hs-names-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
.hs-names-form label{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);}
.hs-names-form input{
  flex:1 1 220px;min-width:0;min-height:44px;padding:8px 12px;
  font-family:var(--head);font-size:19px;color:var(--ink);background:#fff;
  border:1px solid #8c7a5a;border-radius:2px;
}
.hs-names-form input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px;}
.hs-names-form button,.hs-step-btn{
  min-height:44px;padding:8px 18px;cursor:pointer;
  font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#fbf8ef;background:var(--gold-deep);border:1px solid var(--gold-deep);border-radius:2px;
}
.hs-names-form button:hover,.hs-step-btn:hover:not(:disabled){background:#5f4a1b;border-color:#5f4a1b;}
.hs-names-form button:focus-visible,.hs-step-btn:focus-visible,.hs-link-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.hs-names-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--rule);}
.hs-names-list[hidden]{display:none;}
.hs-names-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule);font-family:var(--head);font-size:20px;}
.hs-names-list li span{min-width:0;overflow-wrap:anywhere;}
.hs-link-btn{
  min-height:36px;padding:4px 6px;cursor:pointer;background:none;border:0;
  font-family:var(--body);font-size:16px;color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;
}
.hs-link-btn[hidden]{display:none;}
.hs-names-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 0 0;}
.hs-names-msg{font-size:15px;font-style:italic;color:#4a3a28;}

/* ── Short prayers to repeat ─────────────────── */
.hs-asp{margin:0 0 34px;padding:18px 24px;background:var(--paper-card);border:1px solid var(--rule);border-left:3px solid var(--hs-red);}
.hs-asp summary{cursor:pointer;min-height:44px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:6px 0;font-family:var(--head);font-size:24px;font-weight:600;color:#3b2716;}
.hs-asp summary::-webkit-details-marker{display:none;}
.hs-asp summary::before{content:"\25B8";font-size:16px;color:var(--hs-red);}
.hs-asp[open] summary::before{content:"\25BE";}
.hs-asp summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}
.hs-asp-kicker{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hs-red);}
.hs-asp .ea-rubric{margin:8px 0 10px;}
.hs-asp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.hs-asp-list li{padding:10px 0;border-bottom:1px solid var(--rule);}
.hs-asp-list p{margin:0;font-family:var(--head);font-size:21px;line-height:1.5;}
.hs-asp-list .hs-bi .hs-la,.hs-asp-list .hs-la{margin:2px 0 0;padding:0;border:0;font-size:18px;color:#5e4e38;font-style:italic;}
.hs-js .hs-asp-list .hs-la{font-size:21px;}

/* The weight label on a prayer from private revelation, as the guide marks it. */
.hs-weight{margin:0 0 10px;font-size:15px;line-height:1.5;color:#4a3a28;}
.hs-weight span{display:inline-block;margin-right:8px;padding:1px 8px;border:1px solid #6b4f8a;border-radius:2px;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#4f3870;background:#f1ecf5;}
.hs-page .ea-lang.hs-lang-next{margin-top:22px;}

/* ── The meditation ──────────────────────────── */
.hs-med{margin:0 0 30px;}
.hs-med h3{margin:0 0 14px;font-family:var(--head);font-size:clamp(26px,3.4vw,32px);font-weight:600;line-height:1.15;color:#3b2716;}
.hs-quote{margin:0 0 22px;padding:0 0 0 22px;border-left:2px solid var(--gold);}
.hs-quote p{margin:0 0 14px;font-size:19px;line-height:1.72;}
.hs-quote cite{display:block;font-family:var(--display);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);}
.hs-quote cite a{text-decoration-thickness:1px;}
.hs-quote-in p{font-size:18px;}

/* ── Keep helping them ───────────────────────── */
.hs-keep{margin:10px 0 0;padding:24px 26px;background:var(--paper-card);border:1px solid var(--rule);}
.hs-keep h3{margin:0 0 6px;font-family:var(--head);font-size:26px;font-weight:600;color:#3b2716;}
.hs-keep .ea-checks{margin-top:12px;}

/* ── Step by step ────────────────────────────── */
.hs-status{margin:0 0 18px;font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hs-red);}
.hs-status[hidden]{display:none;}
.hs-stepper{
  margin:30px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
}
.hs-stepper[hidden]{display:none;}
.hs-step-status{margin:0;text-align:center;font-family:var(--head);font-style:italic;font-size:18px;line-height:1.35;color:#4a3a28;}
.hs-step-btn:disabled{opacity:.45;cursor:default;}
.hs-step-btn.hs-step-next{background:var(--hs-red);border-color:var(--hs-red);}
.hs-step-btn.hs-step-next:hover:not(:disabled){background:#5c1f19;border-color:#5c1f19;}
.hs-keys{margin:10px 0 0;text-align:center;font-size:15px;font-style:italic;color:#5a4a33;}
.hs-keys[hidden]{display:none;}

/* ── With JavaScript: the chosen path, mode and language ── */
.hs-js .hs-mlabel{display:none;}
.hs-js .hs-m15 + .hs-m30::before{content:none;}
.hs-js .hs-order-m .hs-m15::before,.hs-js .hs-order-m .hs-m30::before{content:none;}
.hs-js[data-path="15"] [data-only="30"],
.hs-js[data-path="15"] .hs-m30,
.hs-js[data-path="30"] .hs-m15{display:none;}
.hs-js[data-path="15"] .hs-order li .hs-only{display:none;}
.hs-js[data-lang="en"] .hs-bi .hs-la,.hs-js[data-lang="en"] .hs-parallel .hs-la,
.hs-js[data-lang="la"] .hs-bi .hs-en,.hs-js[data-lang="la"] .hs-parallel .hs-en{display:none;}
.hs-js .hs-bi .hs-la{margin-top:0;padding-top:0;border-top:0;}
.hs-js .hs-bi .ea-lang,.hs-js .hs-parallel .ea-lang{display:none;}
.hs-js .hs-parallel{grid-template-columns:1fr;}

.hs-js[data-mode="step"] .hs-step:not(.is-current){display:none;}
.hs-js[data-mode="step"] .hs-step{margin-top:0;}
/* Step by step shows one section, and a counter counts only what is shown,
   so with JavaScript the number is written by holy-souls.js (data-n). */
.hs-js .hs-count[data-n]::before{content:attr(data-n);}
.hs-js[data-mode="step"] .hs-step{min-height:40vh;}
.hs-js[data-mode="step"] .hs-step .ea-verse p,
.hs-js[data-mode="step"] .hs-step .ea-scripture p{font-size:clamp(22px,2.6vw,26px);line-height:1.6;}
.hs-js[data-mode="step"] .hs-step .ea-prose p,
.hs-js[data-mode="step"] .hs-step .hs-quote p{font-size:clamp(20px,2.3vw,22px);}
.hs-js[data-mode="step"] .hs-step .ea-rubric{font-size:19px;}
.hs-js[data-mode="step"] .hs-step .ea-silence{font-size:21px;}

/* ── Phones ──────────────────────────────────── */
@media(max-width:760px){
  .hs-wrap{width:calc(100% - 36px);}
  .hs-controls{grid-template-columns:1fr;justify-content:stretch;padding:18px 16px;}
  .hs-seg label span{padding:8px 12px;font-size:17px;}
  .hs-today,.hs-names,.hs-keep{padding:20px 18px;}
  .hs-first > .hs-wrap > p,.hs-quote p{font-size:18px;}
  .hs-stepper{grid-template-columns:1fr 1fr;}
  .hs-step-status{grid-column:1 / -1;grid-row:1;}
  .hs-step-btn{width:100%;}
  .hs-order-m{margin-left:34px;}
}

/* ── Print: the chosen path, whole ───────────── */
@media print{
  .hs-controls,.hs-print,.hs-names,.hs-stepper,.hs-keys,.hs-status{display:none !important;}
  .hs-js[data-mode="step"] .hs-step:not(.is-current){display:block;}
  .hs-today{border:1px solid #ccc;}
  .hs-only{background:none;color:#000;border:1px solid #000;}
}