/* ── Hero (/hero) ──
   Page-specific styles only. Header, nav strip, container, footer and the parchment background come
   from shared.css via class="parchment-page". Cards follow the hub pattern in CLAUDE.md: transparent
   at rest, frosted glass on hover. Primary buttons use the app's gold gradient. */

/* shared.css gives .container overflow:hidden, which stops position:sticky (the card strip).
   clip keeps the clipping without making a scroll container. */
.page-hero .container { overflow: visible; overflow: clip; }
.page-hero main { max-width: 880px; margin: 0 auto; padding: 4px 0 40px; color: #3d3225; }
.page-hero .hr-section { margin: 0 0 30px; }
.hr-h1 { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 26px; font-weight: 700; color: #3d3225; }
.hr-h2 { margin: 0 0 10px; font-family: var(--font-serif, Georgia, serif); font-size: 18px; font-weight: 600; color: #6b5a3e; }
.hr-h2-dark { color: #3d3225; }
.hr-mini-h { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #6f6352; }
.hr-mini { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #6f6352; }
.hr-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #6f6352; }
.hr-lead { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: rgba(61, 50, 37, 0.85); }
.hr-help { display: block; font-size: 13px; line-height: 1.5; color: #6f6352; }
.hr-quiet { font-size: 12.5px; line-height: 1.5; color: #6f6352; }
.hr-center { display: block; text-align: center; }
.hr-body { margin: 0; font-size: 15px; line-height: 1.7; }
.hr-body-quiet { font-size: 14.5px; color: rgba(61, 50, 37, 0.82); }
.hr-loading { color: #6f6352; }
.hr-error { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #8a3424; font-weight: 600; }
.hr-back { display: inline-flex; margin: 0 0 18px; }

/* Cards: the hub pattern */
.hr-card-glass {
  background: transparent; border: 1px solid rgba(160, 140, 110, 0.2); border-radius: var(--border-radius-lg, 14px);
  transition: all 0.25s ease;
}
.hr-card-glass:hover {
  background: rgba(255, 250, 240, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: rgba(160, 140, 110, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(120, 100, 70, 0.08);
}

/* Buttons */
.hr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 44px; padding: 10px 18px; border-radius: var(--border-radius-md, 10px);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.25s ease;
  border: 1px solid rgba(160, 140, 110, 0.35); background: transparent; color: #6b5a3e;
}
.hr-btn:hover { background: rgba(255, 250, 240, 0.6); text-decoration: none; }
.hr-btn-primary { background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%); border-color: transparent; color: #fff; }
.hr-btn-primary:hover { filter: brightness(1.05); background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%); }
.hr-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.hr-btn-wide { width: 100%; min-height: 50px; font-size: 15px; }
.hr-btn-small { min-height: 40px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.hr-locked { color: #6f6352; }
.hr-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.hr-add {
  align-self: flex-start; min-height: 40px; padding: 0 14px; border: 1px dashed rgba(139, 115, 85, 0.6);
  border-radius: var(--border-radius-md, 10px); background: none; font: inherit; font-size: 13px; font-weight: 600; color: #6b5a3e; cursor: pointer;
}
.hr-add:hover { background: rgba(255, 250, 240, 0.45); }

/* Panels (limits, errors, fixed messages) */
.hr-panel { padding: 18px; border: 1px solid rgba(160, 140, 110, 0.3); border-radius: var(--border-radius-lg, 14px); margin: 0 0 20px; }
.hr-panel p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.hr-panel-title { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.4; color: #3d3225; }
.hr-fixed p { font-size: 15px; }
.hr-better { border-color: rgba(184, 134, 11, 0.4); background: rgba(184, 134, 11, 0.05); }
.hr-reason { font-style: italic; color: rgba(61, 50, 37, 0.85); }
.hr-support, .hr-health { margin: 0 0 18px; }
.hr-note-fixed { margin: 0 0 20px; padding: 12px 14px; border: 1px solid rgba(61, 50, 37, 0.3); border-radius: var(--border-radius-md, 10px); font-size: 14.5px; line-height: 1.55; }

/* Shelf */
.hr-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 10px; }
.hr-book { display: flex; gap: 14px; padding: 14px; color: #3d3225; text-decoration: none; }
.hr-book:hover { text-decoration: none; color: #3d3225; }
.hr-cover { position: relative; flex: 0 0 92px; height: 138px; border-radius: 3px 7px 7px 3px; overflow: hidden; box-shadow: 0 3px 10px rgba(60, 40, 20, 0.25); }
.hr-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-cover-title { position: absolute; top: 8px; left: 6px; right: 6px; font-family: var(--font-serif, Georgia, serif); font-size: 12.5px; line-height: 1.15; hyphens: manual; overflow-wrap: anywhere; font-weight: 700; color: #fbf1df; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.hr-book-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hr-book-title { font-size: 15.5px; font-weight: 700; }
.hr-book-by { font-size: 12px; color: #6f6352; }
.hr-book-line { font-size: 13.5px; line-height: 1.5; color: rgba(61, 50, 37, 0.85); }
.hr-book-status { font-size: 12.5px; font-weight: 600; color: #7a5a08; }
.hr-book-status.is-ready { color: #2f5a2b; }
.hr-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hr-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.hr-step-n { flex: 0 0 26px; height: 26px; border-radius: 13px; border: 1px solid rgba(160, 140, 110, 0.5); font-size: 12px; font-weight: 700; color: #6b5a3e; display: flex; align-items: center; justify-content: center; }
.hr-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 8px; }
.hr-past { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; color: #3d3225; text-decoration: none; border-radius: var(--border-radius-md, 10px); }
.hr-past:hover { text-decoration: none; color: #3d3225; }
.hr-past-meta { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #6f6352; }
.hr-past-cover { font-family: var(--font-serif, Georgia, serif); font-size: 15.5px; font-style: italic; line-height: 1.4; }
.hr-past-check { font-size: 12.5px; font-weight: 600; color: #2f5a2b; }

/* Intake */
.hr-head { display: flex; gap: 14px; align-items: center; margin: 0 0 12px; }
.hr-head-cover { flex: 0 0 48px; width: 48px; height: 72px; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: 0 2px 6px rgba(60, 40, 20, 0.25); }
.hr-head-title { margin: 0 0 2px; font-family: var(--font-serif, Georgia, serif); font-size: 24px; font-weight: 700; color: #3d3225; }
.hr-form { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.hr-form .ai-notice { margin: 0; }
.hr-notice-covers { margin: -16px 0 0; font-size: 12px; line-height: 1.45; color: #7a6e5d; }
.hr-field { display: flex; flex-direction: column; gap: 8px; }
.hr-label { font-size: 15px; font-weight: 700; color: #3d3225; }
.hr-label .hr-quiet { font-weight: 400; }
.hr-sublabel { margin-top: 6px; font-size: 14px; font-weight: 600; }
.hr-input {
  box-sizing: border-box; width: 100%; padding: 11px 12px; border: 1px solid rgba(200, 190, 170, 0.4);
  border-radius: var(--border-radius-md, 10px); background: rgba(255, 250, 240, 0.6); font: inherit; font-size: 15px;
  line-height: 1.55; color: #3d3225; transition: border-color 0.2s ease;
}
textarea.hr-input { resize: vertical; }
.hr-input::placeholder { color: #8f8470; }
.hr-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15); }
.hr-meter { display: flex; flex-direction: column; gap: 6px; }
.hr-meter-bar { height: 6px; border-radius: 3px; background: rgba(160, 140, 110, 0.22); overflow: hidden; }
.hr-meter-fill { height: 6px; border-radius: 3px; background: #b8860b; transition: width 0.3s ease; }
.hr-meter-fill.is-full { background: #3f6b3a; }
.hr-meter-text { font-size: 12.5px; color: #6f6352; }
.hr-meter-text strong { color: #3d3225; }
.hr-checklist { padding: 10px 12px; border: 1px solid rgba(160, 140, 110, 0.2); border-radius: var(--border-radius-md, 10px); }
.hr-checklist ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: rgba(61, 50, 37, 0.88); }
.hr-people { display: flex; flex-direction: column; gap: 8px; }
.hr-person { display: flex; gap: 8px; align-items: center; }
.hr-select { flex: 0 0 120px; width: 120px; min-height: 44px; padding: 0 8px; }
.hr-person .hr-input:not(.hr-select) { flex: 1 1 auto; min-width: 0; min-height: 44px; padding-top: 0; padding-bottom: 0; }
.hr-x { flex: 0 0 36px; height: 44px; border: none; background: none; font-size: 20px; color: #8f8470; cursor: pointer; border-radius: 8px; }
.hr-x:hover { background: rgba(0, 0, 0, 0.04); color: #3d3225; }
.hr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-chip {
  min-height: 40px; padding: 0 14px; border: 1px solid rgba(160, 140, 110, 0.5); border-radius: 20px; background: none;
  font: inherit; font-size: 13.5px; color: #3d3225; cursor: pointer; transition: all 0.2s ease;
}
.hr-chip:hover { background: rgba(255, 250, 240, 0.6); }
.hr-chip.is-on { background: #6b5a3e; border-color: #6b5a3e; color: #fbf6ec; font-weight: 600; }
.hr-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(160, 140, 110, 0.5); border-radius: var(--border-radius-md, 10px); overflow: hidden; }
.hr-seg-btn { min-height: 44px; border: none; border-left: 1px solid rgba(160, 140, 110, 0.5); background: none; font: inherit; font-size: 14px; color: #3d3225; cursor: pointer; }
.hr-seg-btn:first-child { border-left: none; }
.hr-seg-btn:hover { background: rgba(255, 250, 240, 0.6); }
.hr-seg-btn.is-on { background: #6b5a3e; color: #fbf6ec; font-weight: 600; }
.hr-chip:focus-visible, .hr-seg-btn:focus-visible, .hr-btn:focus-visible, .hr-add:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }
.hr-submit { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }

/* Check and review */
.hr-stage-head { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.hr-essentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hr-ess { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--border-radius-md, 10px); font-size: 13px; line-height: 1.35; box-sizing: border-box; }
.hr-ess.is-clear { border: 1px solid rgba(63, 107, 58, 0.4); color: #2f5a2b; }
.hr-ess.is-clear strong { color: #3d3225; }
.hr-ess.is-more { border: 1.5px solid #b8860b; background: rgba(184, 134, 11, 0.07); color: #7a5a08; }
.hr-ess.is-more strong { color: #3d3225; }
.hr-essentials.is-compact { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-essentials.is-compact .hr-ess { min-height: 0; padding: 5px 10px; border-radius: 14px; font-size: 12px; }
.hr-essentials.is-compact .hr-ess strong { font-weight: 500; color: #2f5a2b; }
.hr-q { padding: 14px; }
.hr-q-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hr-review { padding: 16px; gap: 14px; margin-top: 0; }
.hr-review-title { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 18px; font-weight: 600; color: #6b5a3e; }
.hr-confirm { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.hr-confirm input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #8b6914; }
.hr-tone-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 2px 16px; font-size: 13.5px; color: #6f6352; }
.hr-tone-row strong { color: #3d3225; }
.hr-tone-row a, .hr-link { color: #8b7355; font-weight: 600; }
.hr-tone-row a:hover, .hr-link:hover { color: #6b5a3e; }
textarea.hr-grow { overflow: hidden; }
.hr-wait { padding: 22px 18px; }
.hr-wait-title { font-family: var(--font-serif, Georgia, serif); font-size: 19px !important; }
.hr-wait-steps { margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.9; color: #6f6352; }
.hr-wait-steps .is-done { color: #2f5a2b; }
.hr-wait-steps .is-now { color: #3d3225; font-weight: 700; }

/* The reading */
.hr-topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 14px; }
.hr-topbar .hr-back { margin: 0; }
.hr-banner { position: relative; height: 230px; border-radius: var(--border-radius-lg, 14px); overflow: hidden; box-shadow: 0 6px 18px rgba(60, 40, 20, 0.22); margin: 0 0 20px; }
.hr-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.hr-banner-text { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; color: #f6f2ea; font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.hr-banner-title { font-family: var(--font-serif, Georgia, serif); font-size: 28px; font-weight: 700; }
.hr-cover-block { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; }
.hr-cover-block .ai-interpretation { margin: 0; }
.hr-cover-line { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 25px; line-height: 1.3; font-style: italic; }
.hr-saved { font-size: 12.5px; font-weight: 600; color: #2f5a2b; }
.hr-not-saved { padding: 12px 14px; border: 1px solid rgba(184, 134, 11, 0.45); border-radius: var(--border-radius-md, 10px); background: rgba(184, 134, 11, 0.08); font-size: 14px; line-height: 1.55; }
.hr-not-saved .hr-btn { margin-top: 10px; }
.hr-map-list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.hr-map-item { display: flex; gap: 10px; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; color: #5f5444; text-decoration: none; }
.hr-map-item:hover { background: rgba(255, 250, 240, 0.45); text-decoration: none; color: #3d3225; }
.hr-map-item.is-lit { background: #3d3225; color: #fbf6ec; font-weight: 700; }
.hr-map-item.is-lit:hover { background: #2f271c; color: #fbf6ec; }
.hr-map-label { flex: 0 0 34px; font-variant-numeric: tabular-nums; }
.hr-map-title { flex: 1 1 auto; }
.hr-map-card { flex: 0 0 auto; font-size: 11px; color: #e9d9b8; }
.hr-notes-notice { margin: 0 0 12px; }
.hr-notes-notice .ai-notice { margin: 0; }
.hr-notes-notice .hr-notice-covers { margin: 4px 0 0; }
.hr-strip {
  position: sticky; top: 0; z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  margin: 0 0 18px; padding: 10px 0; background: rgba(236, 224, 201, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(160, 140, 110, 0.25);
}
.hr-strip-item {
  display: flex; flex-direction: column; gap: 2px; min-height: 48px; padding: 6px 8px; border-radius: var(--border-radius-md, 10px);
  border: 1px solid rgba(160, 140, 110, 0.35); color: #3d3225; text-decoration: none; transition: all 0.2s ease;
}
.hr-strip-item:hover { background: rgba(255, 250, 240, 0.6); text-decoration: none; color: #3d3225; }
.hr-strip-item.is-current { background: #3d3225; border-color: #3d3225; color: #fbf6ec; }
.hr-strip-n { font-size: 11px; font-weight: 700; }
.hr-strip-t { font-size: 11.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-card { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; margin: 0 0 18px; scroll-margin-top: 80px; }
.hr-card-title { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 22px; line-height: 1.3; font-weight: 700; }
.hr-says { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(61, 50, 37, 0.88); }
.hr-passage { margin: 0; padding: 12px 0 12px 16px; border-left: 2px solid rgba(139, 115, 85, 0.5); }
.hr-passage blockquote { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 17px; line-height: 1.55; font-style: italic; }
.hr-passage figcaption { margin-top: 8px; font-size: 12px; color: #6f6352; }
.hr-part { display: flex; flex-direction: column; gap: 6px; }
.hr-part-h { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #6b5a3e; }
.hr-part-h-quiet { color: #6f6352; }
.hr-aha { padding: 12px 14px; border-radius: var(--border-radius-md, 10px); background: rgba(184, 134, 11, 0.1); border: 1px solid rgba(184, 134, 11, 0.3); }
.hr-aha .hr-part-h { color: #7a5a08; margin-bottom: 4px; }
.hr-aha p { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 17px; line-height: 1.5; }
.hr-note { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(160, 140, 110, 0.2); }
.hr-note-text { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; font-style: italic; }
.hr-note .hr-btn-small { align-self: flex-start; }
.hr-pushback { margin: 0 0 22px; padding: 16px 18px; border: 1px solid rgba(61, 50, 37, 0.25); border-radius: var(--border-radius-lg, 14px); }
.hr-move { margin: 0 0 30px; padding: 18px; border-radius: var(--border-radius-lg, 14px); background: #3d3225; color: #fbf6ec; }
.hr-move-h { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #e9d9b8; }
.hr-move-text { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 19px; line-height: 1.45; }
.hr-move-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(251, 246, 236, 0.2); font-size: 13.5px; color: #e9d9b8; }
.hr-move-foot strong { color: #fbf6ec; }
.hr-rest { margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 22px; }
.hr-rest dt { font-size: 14px; font-weight: 700; }
.hr-rest dd { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: rgba(61, 50, 37, 0.85); }
.hr-end { display: flex; flex-direction: column; gap: 12px; }
.hr-listen-slot .aa-listen-row { margin: 0; }

@media (max-width: 640px) {
  .hr-books { grid-template-columns: minmax(0, 1fr); }
  .hr-cover-line { font-size: 22px; }
  .hr-banner { height: 200px; }
  .hr-card { padding: 18px 14px; }
  .hr-select { flex-basis: 104px; width: 104px; }
  .hr-strip { margin-left: -4px; margin-right: -4px; }
}
@media (max-width: 420px) {
  .hr-essentials { grid-template-columns: minmax(0, 1fr); }
  .hr-strip-t { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-card-glass, .hr-card-glass:hover { transition: none; transform: none; }
}

/* A reading being written in the background, or one that couldn't be finished (on the shelf) */
.hr-pending { border-color: rgba(184, 134, 11, 0.4); }
.hr-pending-line { font-size: 15px; font-weight: 600; line-height: 1.45; color: #3d3225; }
.hr-pending.is-failed { border-color: rgba(160, 140, 110, 0.35); }
.hr-pending.is-failed .hr-pending-line { font-weight: 500; }

/* 29 Oct: busy buttons, the waiting screen that moves, the book map as tiles */
.hr-spin { animation: hr-spin 0.9s linear infinite; flex: 0 0 auto; vertical-align: -3px; }
@keyframes hr-spin { to { transform: rotate(360deg); } }
.hr-btn.is-busy { opacity: 0.85; cursor: progress; }
.hr-busy-note { margin: 0; font-size: 13px; line-height: 1.5; color: #6f6352; text-align: center; }
.hr-dots i { font-style: normal; animation: hr-dot 1.4s infinite both; }
.hr-dots i:nth-child(2) { animation-delay: 0.2s; }
.hr-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes hr-dot { 0%, 80%, 100% { opacity: 0.15; } 40% { opacity: 1; } }
.hr-wait-steps .is-now { display: list-item; }
.hr-wait-steps .is-now .hr-spin { color: #b8860b; margin-right: 2px; }
.hr-meter-live { position: relative; }
.hr-meter-live::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 250, 240, 0.7) 50%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat; animation: hr-sheen 1.6s ease-in-out infinite;
}
@keyframes hr-sheen { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.hr-pulse { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #b8860b; vertical-align: 1px; animation: hr-pulse 1.4s ease-in-out infinite; }
@keyframes hr-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
.hr-edit-answers { margin: 0 0 16px; }
.hr-tiles { margin: 8px 0 10px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.hr-tile {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid rgba(160, 140, 110, 0.3); border-radius: 8px; font-size: 12px; color: #8f8470; text-decoration: none; cursor: default;
}
.hr-tile b { font-weight: 600; line-height: 1.1; }
.hr-tile span { font-size: 10px; line-height: 1.1; }
.hr-tile.is-lit { height: 46px; background: #3d3225; border-color: #3d3225; color: #fbf6ec; cursor: pointer; }
.hr-tile.is-lit span { color: #e9d9b8; }
.hr-tile.is-lit:hover { background: #2f271c; color: #fbf6ec; text-decoration: none; }
.hr-tile.is-lit:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hr-spin, .hr-dots i, .hr-meter-live::after, .hr-pulse { animation: none; }
  .hr-dots i { opacity: 1; }
}

/* 29 Oct: "Your next steps" replaces "Your one move"; the person picks the step to start with */
.hr-steps { margin: 0 0 30px; padding: 18px 18px 8px; border: 1px solid rgba(160, 140, 110, 0.3); border-radius: var(--border-radius-lg, 14px); background: rgba(255, 250, 240, 0.35); }
.hr-steps-h { margin: 0 0 6px; font-family: var(--font-serif, Georgia, serif); font-size: 20px; font-weight: 700; color: #3d3225; }
.hr-steps-intro { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #6f6352; }
.hr-steps-old { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: #3d3225; color: #fbf6ec; font-family: var(--font-serif, Georgia, serif); font-size: 17px; line-height: 1.45; }
.hr-steps-old .hr-mini { display: block; margin-bottom: 4px; color: #e9d9b8; font-family: inherit; }
.hr-steps-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hr-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease; }
.hr-step:hover { background: rgba(255, 250, 240, 0.5); border-color: rgba(160, 140, 110, 0.25); }
.hr-step-n { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(61, 50, 37, 0.35); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #6b5a3e; }
.hr-step-body { flex: 1 1 auto; min-width: 0; }
.hr-step-t { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: #8b7355; }
.hr-step-text { margin: 3px 0 8px; font-size: 15px; line-height: 1.55; color: #3d3225; }
.hr-step-btn { min-height: 34px; padding: 0 12px; border: 1px solid rgba(61, 50, 37, 0.3); border-radius: 9px; background: transparent; color: #3d3225; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hr-step-btn:hover { background: rgba(61, 50, 37, 0.06); }
.hr-step-btn:focus-visible, .hr-step-badge:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }
.hr-step.is-start { background: #3d3225; border-color: #3d3225; }
.hr-step.is-start .hr-step-n { border-color: #e9d9b8; color: #fbf6ec; }
.hr-step.is-start .hr-step-t { color: #e9d9b8; }
.hr-step.is-start .hr-step-text { color: #fbf6ec; font-family: var(--font-serif, Georgia, serif); font-size: 17px; }
.hr-step-badge { display: inline-block; font-size: 13px; font-weight: 700; color: #e9d9b8; }
.hr-steps-foot { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid rgba(160, 140, 110, 0.3); font-size: 13.5px; color: #6f6352; }
.hr-steps-foot strong { color: #3d3225; }

/* ── Phase 7 (29 Oct): share, calendar, check-in answer, delete, Save as PDF ── */
.hr-card-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px solid rgba(160, 140, 110, 0.2); }
.hr-steps-foot p { margin: 0 0 8px; }
.hr-ics { margin: 0 0 6px; }
.hr-went { margin: 12px 0 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(47, 90, 43, 0.3); background: rgba(47, 90, 43, 0.06); }
.hr-went .hr-mini { color: #2f5a2b; }
.hr-went-text { margin: 4px 0 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.hr-past-wrap { display: flex; align-items: flex-start; gap: 8px; padding-right: 8px; }
.hr-past-wrap .hr-past { flex: 1 1 auto; min-width: 0; }
.hr-past-wrap .hr-del-slot { flex: 0 0 auto; padding-top: 8px; }
.hr-past-wrap .hr-del-slot:has(.hr-del-confirm) { flex: 1 1 100%; padding: 10px 6px 12px; }
.hr-past-wrap:has(.hr-del-confirm) { flex-wrap: wrap; }
.hr-del-ask {
  min-height: 44px; padding: 0 12px; border: none; border-radius: 9px; background: none; font: inherit; font-size: 13px;
  font-weight: 500; color: #8a7a64; cursor: pointer;
}
.hr-del-ask:hover { background: rgba(0, 0, 0, 0.04); color: #8a3424; }
.hr-del-end { margin-top: 4px; }
.hr-del-end .hr-del-ask { padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; }
.hr-del-confirm { padding: 12px 14px; border: 1px solid rgba(138, 52, 36, 0.35); border-radius: var(--border-radius-md, 10px); background: rgba(138, 52, 36, 0.05); }
.hr-del-confirm p { margin: 0; font-size: 14px; line-height: 1.55; }
.hr-del-confirm .hr-actions { margin-top: 10px; }
.hr-btn-danger { background: #8a3424; border-color: #8a3424; color: #fff; }
.hr-btn-danger:hover { background: #742a1c; color: #fff; }
.hr-print-cover { display: none; }

/* The booklet: browser print / Save as PDF. Cover page first, then the reading with your notes and the
   rest of the book. Buttons, the strip, read aloud, the header and the footer are left out. */
@media print {
  @page { margin: 16mm 16mm 18mm; }
  html, body, .page-hero { background: #fff !important; }
  .page-hero::before, .parchment-page::before { display: none !important; }
  .page-hero .container { max-width: none; padding: 0; margin: 0; overflow: visible; }
  .page-hero .header, .page-hero .footer, .page-hero .nav-strip, .hr-topbar, .hr-strip, .hr-banner, .hr-saved, .hr-not-saved,
  .hr-notes-notice, .hr-add, .hr-note .hr-btn, .hr-actions, .hr-card-tools, .hr-step-btn, .hr-ics, .hr-del-slot, .hr-end .hr-actions,
  .aa-listen-bar, .aa-listen-row, .aa-listen-all-row, .aa-listen-btn, .aa-listen-toast, .aa-listen-modal, .aa-listen-offer, #hrStepMsg,
  .aa-hero-note, .session-expired-overlay { display: none !important; }
  .aa-listen-now { background: none !important; box-shadow: none !important; }
  .page-hero main { max-width: none; padding: 0; color: #000; }
  .hr-print-cover { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 240mm; justify-content: center; gap: 6px; break-after: page; page-break-after: always; }
  .hr-print-cover img { width: 70mm; height: auto; border-radius: 3px; margin-bottom: 10mm; }
  .hr-print-kicker { margin: 0; font-size: 10pt; letter-spacing: 2px; text-transform: uppercase; color: #6b5a3e; }
  .hr-print-title { margin: 0; font-family: Georgia, serif; font-size: 30pt; color: #000; }
  .hr-print-by { margin: 0; font-size: 11pt; color: #444; }
  .hr-print-line { margin: 10mm 12mm 0; font-family: Georgia, serif; font-style: italic; font-size: 16pt; line-height: 1.35; }
  .hr-print-meta { margin: 8mm 0 0; font-size: 10pt; color: #555; }
  .hr-print-fine { margin: 14mm 18mm 0; font-size: 8.5pt; line-height: 1.45; color: #666; }
  .hr-card-glass, .hr-card-glass:hover { background: none !important; box-shadow: none !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .hr-card { border: none; border-top: 1px solid #bbb; border-radius: 0; padding: 6mm 0 0; margin: 0 0 6mm; gap: 3mm; }
  .hr-passage, .hr-aha, .hr-part, .hr-note, .hr-step, .hr-went, .hr-pushback, .hr-rest > div { break-inside: avoid; page-break-inside: avoid; }
  .hr-card-title, .hr-h2, .hr-steps-h { break-after: avoid; page-break-after: avoid; }
  .hr-aha { background: none; border: 1px solid #c9b88f; }
  .hr-steps { background: none; border: none; border-radius: 0; padding: 6mm 0 0; border-top: 1px solid #bbb; }
  .hr-step.is-start { background: none; border: 1.5px solid #3d3225; }
  .hr-step.is-start .hr-step-text, .hr-step.is-start .hr-step-n, .hr-step.is-start .hr-step-t, .hr-step-badge { color: #000; }
  .hr-tile, .hr-tile.is-lit { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hr-rest { grid-template-columns: 1fr 1fr; }
  .hr-quiet, .hr-help { color: #555; }
  a { color: inherit; text-decoration: none; }
}