/*
 * Ignatian Prayer visual language
 * Canonical user-facing design tokens and cross-screen component rules.
 * Page-specific styles may describe layout; this file owns shared typography,
 * colour, surface, title, control and hierarchy decisions.
 */
:root{
  --font-ui:"Source Sans 3",sans-serif;
  --font-scripture:"Source Serif 4",serif;
  --ink:#37474f;
  --ink-strong:#263238;
  --muted:#5a6d77;
  --muted-light:#60717b;
  --blue:#42a5f5;
  --blue-hover:#2196f3;
  --blue-dark:#1565c0;
  --blue-bright:#42a5f5;
  --blue-soft:#e3f2fd;
  --blue-border:#90caf9;
  --gold:#a77d3d;
  --gold-ink:#856126;
  --gold-soft:#faf6eb;
  --gold-border:#d8c8aa;
  --artwork-paper:#f7f5ef;
  --paper:#fff;
  --paper-raised:var(--paper);
  --paper-glass:rgba(255,255,255,.97);
  --canvas:#eef2f4;
  --soft:#f5f7f8;
  --field:#f7f9fa;
  --line:#d9e0e4;
  --line-strong:#7a8d99;
  --green:#66bb6a;
  --green-ink:#2e7d32;
  --green-soft:#edf7ef;
  --green-border:#b9d9bd;
  --yellow:#fdd835;
  --yellow-ink:#8b7100;
  --yellow-soft:#fffbea;
  --yellow-border:#eadf9e;
  --colloquy:var(--blue-bright);
  --stage-warmup:var(--purple);
  --stage-world:var(--green);
  --stage-scripture:var(--yellow);
  --stage-colloquy:var(--colloquy);
  --stage-warmup-ink:var(--stage-warmup);
  --stage-world-ink:var(--stage-world);
  --stage-scripture-ink:var(--stage-scripture);
  --stage-colloquy-ink:var(--stage-colloquy);
  --purple:#7e57c2;
  --purple-ink:#6a43a8;
  --purple-soft:#f4f0fb;
  --purple-border:#d8ccec;
  --success:var(--green);
  --danger:#c83230;
  --danger-dark:#a32424;
  --danger-soft:#ffebee;
  --danger-border:#efb6b5;
  --backdrop:rgba(26,40,48,.54);
  --focus-ring:rgba(22,118,194,.22);
  --focus-outline:3px solid var(--blue-dark);
  --radius-control:12px;
  --radius-card:16px;
  --radius-modal:20px;
  --radius-pill:999px;
  --radius-round:50%;
  --shadow:none;
  --shadow-soft:0 2px 8px rgba(38,50,56,.08);
  --shadow-popover:0 8px 24px rgba(38,50,56,.14);
  --shadow-float:0 18px 50px rgba(30,45,52,.18);
  --shadow-sheet:0 0 36px rgba(38,50,56,.08);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --control-height:44px;
  --control-height-primary:48px;
  --title-size:clamp(1.6875rem,4vw,2rem);
  --title-weight:500;
  --editorial-title-size:clamp(1.875rem,3.4vw,2.375rem);
  --section-title-size:1.3125rem;
  --appbar-title-size:1.125rem;
  --body-size:1rem;
  --label-size:.875rem;
  --caption-size:.8125rem;
  --eyebrow-size:.75rem;
  --motion-fast:150ms;
  color-scheme:light;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--canvas);
}

html,body,
button,input,textarea,select{
  font-family:var(--font-ui);
}

body{
  color:var(--ink);
  background:var(--canvas);
}

.app-shell,
.journey-v2{
  background:var(--paper);
  color:var(--ink);
}

/* One deliberately distinct reading face: Scripture itself. */
.passage-reading-text,
.passage-reading-panel .passage-reading-text,
.saved-passage-reading,
.player-prompt.is-scripture .player-prompt-text{
  font-family:var(--font-scripture);
}

.passage-verse sup,
.saved-passage-reading .passage-verse sup{
  font-family:var(--font-ui);
}

/* Narrative/navigation copy remains part of the UI, not a second type system. */
.journey-v2 .jv2-story-group-title,
.journey-v2 .jv2-story-group-overline,
.journey-v2 .jv2-story-row-title,
.journey-v2 .jv2-story-row-reference,
.journey-v2 .jv2-story-row-place,
.journey-v2 .jv2-story-subsection-title,
.journey-v2 .jv2-story-location-kicker,
.journey-v2 .jv2-story-location-section,
.journey-v2 .jv2-story-location-subsection,
.journey-v2 .jv2-story-subsection-index,
.journey-v2 .jv2-place-map-title strong,
.journey-v2 .jv2-map-scene-title,
.journey-v2 .jv2-local-location-label,
.journey-v2 .jv2-map .place-label,
.journey-v2 .jv2-map .map-label{
  font-family:var(--font-ui);
}

/* Shared app bar. */
.topbar,
.jv2-topbar{
  min-height:56px;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  background:var(--paper-glass);
}

.topbar-title,
.jv2-topbar-title{
  color:var(--ink-strong);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.01em;
  font-size:var(--appbar-title-size);
}

.topbar:not(.home-topbar){
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
}

.topbar:not(.home-topbar) .topbar-title{
  text-align:center;
}

.topbar-spacer{
  display:block;
  width:40px;
  height:40px;
}

.jv2-nav-icon,
.material-nav-icon{
  display:block;
  width:22px;
  height:22px;
  fill:currentColor;
}

.icon-btn,
.jv2-icon-btn{
  color:var(--muted);
  width:var(--control-height);
  height:var(--control-height);
  flex-shrink:0;
}

.icon-btn:hover,
.jv2-icon-btn:hover{
  background:var(--blue-soft);
}

/* Canonical page-header hierarchy. */
.jv2-title,
.prayer-book-page>h1{
  margin:0;
  color:var(--ink-strong);
  font-size:var(--title-size);
  line-height:1.18;
  font-weight:var(--title-weight);
  letter-spacing:-.018em;
  text-align:center;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

.jv2-subtitle,
.prayer-book-intro{
  max-width:620px;
  margin:10px auto 0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.55;
  text-align:center;
  text-wrap:pretty;
}

.jv2-kicker{
  margin-bottom:9px;
  line-height:1.3;
  font-size:var(--eyebrow-size);
  color:var(--gold-ink);
  font-weight:600;
  letter-spacing:.1em;
}

/* Home is the product identity, so it is intentionally the sole large wordmark. */
.display-title{
  color:var(--ink-strong);
  font-size:clamp(2.25rem,1.5rem + 5vw,3.375rem);
  line-height:1.04;
  font-weight:600;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
}

.home-card .quote{
  color:var(--ink);
}

.home-card .citation{
  color:var(--muted);
}

/* One button language. */
.btn,
.jv2-primary,
.jv2-secondary,
.thank-you-review-toggle{
  min-height:var(--control-height);
  border-radius:var(--radius-pill);
  padding:10px var(--space-5);
  font-size:var(--body-size);
  line-height:1.4;
  font-weight:600;
  letter-spacing:0;
  box-shadow:none;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease;
}

.btn-primary,
.jv2-primary{
  min-height:var(--control-height-primary);
  border:1px solid var(--blue);
  background:var(--blue);
  color:var(--paper);
  box-shadow:none;
}

.btn-primary:hover:not(:disabled),
.jv2-primary:hover:not(:disabled){
  background:var(--blue-hover);
  border-color:var(--blue-hover);
  color:var(--paper);
}

.btn-outline,
.jv2-secondary,
.thank-you-review-toggle{
  border:1px solid var(--blue-border);
  background:var(--paper-raised);
  color:var(--blue-dark);
}

.btn-outline:hover:not(:disabled),
.jv2-secondary:hover:not(:disabled),
.thank-you-review-toggle:hover{
  background:var(--blue-soft);
}

.btn-tonal{
  background:var(--blue-soft);
  color:var(--blue-dark);
}

.account-topbar-btn,
.prayer-book-link,
.saved-prayer-text-btn,
.prayer-book-card-action,
.account-forgot-link,
.account-back-link{
  color:var(--blue-dark);
}

/* Controls and writing fields use the same quiet contained surface. */
.input,.textarea,.select,
.jv2-grace-field textarea,
.jv2-review-q textarea,
.retelling-panel .passage-retelling{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  color:var(--ink-strong);
  box-shadow:none;
  background:var(--field);
  font-size:var(--body-size);
  line-height:1.5;
}

.input:focus,.textarea:focus,.select:focus,
.jv2-grace-field textarea:focus,
.jv2-review-q textarea:focus,
.retelling-panel .passage-retelling:focus{
  border-color:var(--blue);
  background:var(--paper);
  outline:var(--focus-outline);
  outline-offset:0;
}

/* Surfaces: borders establish structure; shadows are reserved for floating UI. */
.card,
.saved-prayer-card,
.prayer-book-card,
.account-status-card,
.post-prayer-account-card{
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--paper-raised);
  box-shadow:none;
}

.modal{
  border:1px solid var(--line);
  border-radius:var(--radius-modal);
  background:var(--paper-raised);
  box-shadow:var(--shadow-float);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  padding:var(--space-6);
  overscroll-behavior:contain;
  overflow-wrap:anywhere;
  width:min(100%,620px);
}

.modal h2,
.account-modal h2{
  color:var(--ink-strong);
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.015em;
  text-align:center;
  font-size:1.625rem;
  padding-inline:0;
  margin-bottom:var(--space-5);
}
.modal:has(> .modal-close-x,> .account-modal-close,> .note-modal-close)>h2{
  padding-inline:var(--space-6);
}

/* My Prayers should read as a quiet journal rather than a dashboard. */
.prayer-book-page{
  padding-top:34px;
}

.prayer-book-page>h1{
  margin-bottom:8px;
}

.prayer-book-controls{
  width:min(100%,680px);
  margin:28px auto 0;
  border:1px solid var(--line);
  background:var(--soft);
  box-shadow:none;
}

.prayer-book-control label{
  color:var(--muted);
  font-weight:600;
}

.prayer-book-control select{
  border-color:var(--line-strong);
  background:var(--paper);
  color:var(--ink-strong);
  font-weight:500;
}

.prayer-book-card h2{
  color:var(--ink-strong);
  font-size:1.3125rem;
  font-weight:500;
}

.prayer-book-card-meta,
.prayer-book-results-count{
  color:var(--muted);
}

.prayer-book-empty,
.previous-prayers-empty{
  border-color:var(--line-strong);
  background:var(--field);
}

/* Saved-prayer detail inherits the same journal hierarchy. */
.saved-prayer-detail-page{
  background:var(--paper);
}

.saved-detail-title-card{
  background:var(--paper);
}

.saved-detail-title-card h1{
  color:var(--ink-strong);
  font-size:var(--title-size);
  line-height:1.18;
  font-weight:var(--title-weight);
  letter-spacing:-.018em;
}

.saved-detail-reference{
  color:var(--ink);
  font-weight:600;
}

.saved-detail-meta,
.saved-detail-key{
  color:var(--muted);
}

.saved-detail-section h2{
  color:var(--ink-strong);
  font-size:var(--section-title-size);
  font-weight:500;
}

.saved-detail-final-prayer{
  border-color:var(--line);
  background:var(--soft);
}

.saved-passage-toggle{
  border-color:var(--line);
  background:var(--paper);
  color:var(--ink);
}

.saved-passage-toggle:hover{
  background:var(--soft);
}

/* Journey setup keeps the same page title, button and surface rules. */
.journey-v2{
  --jv2-blue:var(--blue);
  --jv2-blue-dark:var(--blue-dark);
  --jv2-ink:var(--ink);
  --jv2-muted:var(--muted);
  --jv2-line:var(--line);
  --jv2-soft:var(--soft);
}

.jv2-screen{
  background:var(--paper);
}

.jv2-browse-switch{
  border-color:var(--line);
  background:var(--soft);
}

.jv2-browse-option{
  color:var(--muted);
}

.jv2-browse-option.active{
  background:var(--paper);
  color:var(--blue-dark);
}

.jv2-duration,
.jv2-grace-option{
  border-color:var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius-control);
}

.jv2-duration.selected{
  border-color:var(--blue);
  background:var(--blue-soft);
  color:var(--blue-dark);
}

.jv2-grace-option:hover{
  border-color:var(--blue-border);
  background:var(--blue-soft);
}

/* The stillness threshold is an intentional exception: it is a transition,
   not another form screen. */
.jv2-threshold h2{
  color:var(--ink-strong);
  font-size:1.875rem;
  font-weight:500;
  letter-spacing:-.015em;
}

.jv2-threshold p{
  color:var(--muted);
}

.jv2-threshold .jv2-grace-repeat{
  border-color:var(--line-strong);
  color:var(--muted);
}

/* Post-prayer uses exactly the same heading hierarchy as pre-prayer. */
.jv2-review-q label{
  color:var(--ink);
  font-weight:600;
}

.jv2-review-q p{
  color:var(--muted);
}

/* Completion is calm, rather than visually louder than the rest of the app. */
.jv2-complete h1,
.jv2-complete h2,
.jv2-thank-you-title{
  color:var(--ink-strong);
  font-size:var(--title-size);
  line-height:1.18;
  font-weight:var(--title-weight);
  letter-spacing:-.018em;
}

.thank-you-thanks{
  color:var(--ink-strong);
  font-size:clamp(2rem,5vw,2.5rem);
  font-weight:600;
  letter-spacing:-.025em;
}

.success-icon{
  color:var(--green-ink);
}

/* Prayer player: the timer is useful context; the prayer prompt is primary. */
.prayer-stage .countdown{
  width:220px;
  height:220px;
  color:var(--ink);
  font-size:3rem;
  font-weight:600;
  background:var(--paper-raised);
  box-shadow:none;
}

.prayer-stage .player-timer-wrap{
  width:220px;
  height:220px;
}

.prayer-stage .a4-timer-track{
  stroke:var(--line);
}

.prayer-stage .a4-timer-day{stroke:var(--stage-world)}
.prayer-stage .a4-timer-cont{stroke:var(--stage-scripture)}
.prayer-stage .a4-timer-colloquy{
  stroke:var(--stage-colloquy)}
.scene-color{
  color:var(--stage-world-ink)}
.contemplatio-color{
  color:var(--stage-scripture-ink)}
.colloquy-color{
  color:var(--stage-colloquy-ink)}

.prayer-stage .player-passage-reference{
  color:var(--ink-strong);
  font-size:1.125rem;
  font-weight:600;
}

.prayer-stage .player-grace-subheading{
  color:var(--muted);
}

.prayer-stage .player-control-surface{
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--soft);
}

.prayer-stage .player-control-surface .player-prompt{
  padding-top:10px;
  padding-bottom:12px;
}

.prayer-stage .player-prompt-position{
  color:var(--muted);
  font-weight:600;
}

.prayer-stage .player-prompt-range{
  color:var(--ink-strong);
  font-weight:600;
}

.prayer-stage .player-prompt-text{
  color:var(--ink);
  font-size:1.1875rem;
  line-height:1.6;
  font-weight:400;
  text-wrap:pretty;
}

.prayer-stage .player-prompt.is-scripture .player-prompt-text{
  color:var(--ink);
  font-size:1.1875rem;
  line-height:1.68;
}

.prayer-stage .player-current-cue{
  color:var(--ink);
  font-weight:600;
}

.prayer-stage .player-side{
  background:var(--soft);
}

.prayer-stage .repeat-btn{
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:none;
}

.prayer-stage .continuous-settings.player-options{
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-popover);
}

/* Keep semantic state colours specific and legible. */
.prayer-stage .prayer-head .voice-listening-indicator{
  box-shadow:none;
}

.prayer-stage .prayer-head .voice-listening-indicator.is-dictating{
  color:var(--purple-ink);
}

/* The richer Gospel artwork/maps supply atmosphere; their UI chrome stays quiet. */
.journey-v2 .jv2-story-group-title,
.journey-v2 .jv2-story-row-title{
  color:var(--ink-strong);
}

.journey-v2 .jv2-story-row-reference,
.journey-v2 .jv2-story-row-place,
.journey-v2 .jv2-story-subsection-title{
  color:var(--muted);
}

/* Main sections use the strongest boundary; later subsections receive a quieter inset rule. */
.journey-v2 .jv2-story-groups .jv2-story-group + .jv2-story-group{
  margin-top:var(--space-6);
  border-top:1px solid var(--line);
}

.journey-v2 .jv2-story-groups .jv2-story-group + .jv2-story-group>.jv2-story-group-header{
  padding-top:var(--space-5);
}

/* Expanded and floating story headers share the app's title hierarchy. */
.journey-v2 .jv2-story-groups .jv2-story-group-header{
  min-height:0;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-3) 0;
  background:transparent;
}

.journey-v2 .jv2-story-groups .jv2-story-group-overline,
.journey-v2 .jv2-story-location-kicker{
  margin:0;
  color:var(--gold-ink);
  font-size:var(--eyebrow-size);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
}

.journey-v2 .jv2-story-groups .jv2-story-group-title,
.journey-v2 .jv2-story-location-section{
  color:var(--ink-strong);
  font-weight:var(--title-weight);
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

.journey-v2 .jv2-story-groups .jv2-story-group-title{
  font-size:var(--section-title-size);
}

.journey-v2 .jv2-story-group-rule,
.journey-v2 .jv2-story-groups .jv2-story-subsection-divider,
.journey-v2 .jv2-story-location-subsection-rule{
  display:none;
}

/* Subsection waypoints use the same neutral outline as the progress circles. */
.journey-v2 .jv2-story-groups .jv2-story-subsection-heading{
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--space-6) var(--space-3) 0;
}

.journey-v2 .jv2-story-groups .jv2-story-subsection-heading::before{
  content:"";
  display:block;
  box-sizing:border-box;
  flex:0 0 12px;
  width:12px;
  min-width:12px;
  height:12px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius-round);
  background:var(--paper);
}


.journey-v2 .jv2-story-groups .jv2-story-subsection + .jv2-story-subsection::before{
  content:"";
  display:block;
  width:min(520px,calc(100% - 48px));
  height:1px;
  margin:0 auto;
  background:var(--line);
}

.journey-v2 .jv2-story-groups .jv2-story-subsection:first-child .jv2-story-subsection-heading{
  padding-top:var(--space-4);
}

.journey-v2 .jv2-story-groups .jv2-story-subsection:first-child .jv2-story-subsection-scenes{
  padding-top:0;
}

.journey-v2 .jv2-story-groups .jv2-story-subsection-title,
.journey-v2 .jv2-story-location-subsection{
  max-width:100%;
  color:var(--muted);
  font-style:normal;
  font-weight:400;
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
}

.journey-v2 .jv2-story-groups .jv2-story-subsection .jv2-story-subsection-title{
  color:var(--ink-strong);
  font-size:var(--body-size);
  font-weight:600;
}

/* Cards stay close to their heading; rows expand for long titles and passage cues. */
.journey-v2 .jv2-story-groups .jv2-story-subsection-scenes>.jv2-story-stop{
  height:auto;
  padding:var(--space-4) 0 var(--space-6);
}

.journey-v2 .jv2-story-groups .jv2-story-subsection-scenes>.jv2-story-stop>.jv2-story-row{
  position:relative;
  top:auto;
  transform:translateX(-50%);
}

.journey-v2 .jv2-story-location{
  min-height:0;
  gap:var(--space-1);
  padding:var(--space-2) var(--space-4);
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:var(--paper-glass);
}

.journey-v2 .jv2-story-location-section{
  overflow:visible;
  font-size:var(--appbar-title-size);
  text-overflow:clip;
}

.journey-v2 .jv2-story-location-subsection{
  font-size:var(--label-size);
}

.journey-v2 .jv2-story-location-subsection>span:last-child{
  max-width:100%;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

@media(max-width:640px){
  .journey-v2 .jv2-story-groups .jv2-story-subsection + .jv2-story-subsection::before{
    width:calc(100% - 24px);
  }

  body{
    background:var(--paper);
  }

  .jv2-screen{
    padding-top:22px;
  }

  .jv2-title,
  .prayer-book-page>h1,
  .saved-detail-title-card h1{
    font-size:1.6875rem;
  }

  .display-title{
    font-size:clamp(2.25rem,1.5rem + 5vw,3.375rem);
  }

  .prayer-book-page{
    padding-top:28px;
  }

  .prayer-stage .player-timer-wrap,
  .prayer-stage .countdown{
    width:196px;
    height:196px;
  }

  .prayer-stage .countdown{
    font-size:2.6875rem;
  }

  .prayer-stage .player-passage-reference{
    width:196px;
    font-size:1.0625rem;
  }

  .prayer-stage .player-prompt-text,
  .prayer-stage .player-prompt.is-scripture .player-prompt-text{
    font-size:1.125rem;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
  }
}


/* 2026-09-25 — unify the three-stage journey progress stepper. */
.progress-wrap{
  padding:13px 16px 4px;
  background:var(--paper);
}
.progress{
  max-width:680px;
}
.progress-step{
  font-weight:600;
  line-height:1.25;
  padding-top:31px;
  font-size:var(--eyebrow-size);
  color:var(--muted);
}
.progress-step::before{
  top:1px;
  width:24px;
  height:24px;
  border:1.5px solid var(--line-strong);
  background:var(--paper-raised);
  color:var(--muted);
  font-weight:700;
  font-size:var(--eyebrow-size);
}
.progress-step:not(:last-child)::after{
  top:12px;
  height:1px;
  background:var(--line);
}
.progress-step.active{
  color:var(--ink-strong);
}
.progress-step.active::before{
  border-color:var(--blue);
  background:var(--blue-soft);
  color:var(--blue-dark);
}
.progress-step.done{
  color:var(--ink);
}
.progress-step.done::before{
  border-color:var(--blue);
  background:var(--blue);
  color:var(--paper);
}
.progress-step.done:not(:last-child)::after{
  background:var(--blue-border);
}
/* Interaction states belong to the shared system. */
:is(button,a[href],input,select,textarea,summary,[role="button"],[role="tab"]):focus-visible{
  outline:var(--focus-outline);
  outline-offset:3px;
}
.modal:focus{outline:none}
html[data-input-modality="pointer"] .modal :focus{
  outline:none;
  box-shadow:none;
}
:is(button,input,select,textarea):disabled{
  cursor:not-allowed;
}
:is(button,a){-webkit-tap-highlight-color:transparent}
input[type="radio"]{accent-color:var(--blue)}
input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  display:inline-grid;
  place-content:center;
  width:23px;
  height:23px;
  margin:0;
  flex:0 0 23px;
  border:1.5px solid var(--line-strong);
  border-radius:6px;
  background:var(--paper);
  color:var(--paper);
  vertical-align:middle;
  cursor:pointer;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease;
}
input[type="checkbox"]::before{
  content:"";
  width:11px;
  height:6px;
  border-left:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;
  transform:translateY(-1px) rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform var(--motion-fast) ease;
}
input[type="checkbox"]:checked{
  border-color:var(--blue);
  background:var(--blue);
  color:var(--paper);
}
input[type="checkbox"]:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
input[type="checkbox"]:indeterminate{
  border-color:var(--blue);
  background:var(--blue);
}
input[type="checkbox"]:indeterminate::before{
  width:11px;
  height:0;
  border:0;
  border-top:2.5px solid var(--paper);
  transform:none;
}
input[type="checkbox"]:focus-visible{
  outline:var(--focus-outline);
  outline-offset:3px;
}
input[type="checkbox"]:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.btn-danger,.prayer-delete-confirm,.account-delete-confirm{
  color:var(--danger-dark);
  background:var(--danger-soft);
}
.btn-danger:hover:not(:disabled),.prayer-delete-confirm:hover:not(:disabled),.account-delete-confirm:hover:not(:disabled){
  color:var(--danger-dark);
  background:var(--danger-soft);
  box-shadow:inset 0 0 0 1px var(--danger-border);
}
.btn:disabled,.jv2-primary:disabled,.jv2-secondary:disabled{
  opacity:.45;
  box-shadow:none;
}
.modal-close-x .material-nav-icon,.account-modal-close .material-nav-icon{width:20px;height:20px}
.modal-backdrop{overscroll-behavior:contain}
.input::placeholder,.textarea::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.account-error,.account-notice,.prayer-save-notice,.account-status-card{overflow-wrap:anywhere}
@media(max-width:640px){
  .modal{padding:var(--space-5)}
  .modal:has(> .modal-close-x,> .account-modal-close,> .note-modal-close)>h2{padding-inline:0}
  .modal>:is(.modal-close-x,.account-modal-close,.note-modal-close)+h2{padding-top:var(--space-6)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
@media(forced-colors:active){
  :is(button,a[href],input,select,textarea,summary):focus-visible{outline:3px solid Highlight}
  .btn,.jv2-primary,.jv2-secondary{border:1px solid ButtonText}
}


/* 2026-09-29 — native iOS safe area: keep app bars below the status bar */
html[data-ignatian-runtime="ios"] .topbar,
html[data-ignatian-runtime="ios"] .jv2-topbar{
  height:auto;
  min-height:calc(56px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
}
html[data-ignatian-runtime="ios"] .home-screen{
  min-height:calc(100dvh - 56px - env(safe-area-inset-top));
}