/* Generated display-mode CSS. Edit styles.css, then rebuild. */
:root{
  --paper:#fbf6ec; --card:#fffdf8; --ink:#293d30; --muted:#59685b;
  --teal:#41644e; --teal-dark:#304e3b; --selected:#e7eee2; --hover:#f0f1e7;
  --line:#dfddcf; --brick:#864833; --radius:8px;
  --reading-font:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --header:72px; --reading-bar:64px; --sidebar:252px;
  font-family:var(--reading-font); font-size:16px; line-height:1.65;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--sticky-base,calc(var(--header) + var(--reading-bar))) + var(--context-bar,0px) + 18px); }
body{ margin:0; word-break:keep-all; overflow-wrap:break-word; }
button,input,select{ font:inherit; color:inherit; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
button,a,input,select{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button{ cursor:pointer; min-height:44px; padding:8px 14px; font-size:15px; font-weight:600; line-height:1.4; }
button:disabled{ cursor:default; opacity:.45; }
button:hover:not(:disabled){ background:var(--hover); }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--teal-dark); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{ outline:3px solid #638a70; outline-offset:3px; }
input,select{ min-height:44px; font-size:16px; }
input::placeholder{ color:#68756b; opacity:1; }
h1,h2,h3,p{ margin-top:0; }
h1,h2,h3{ font-family:var(--reading-font); color:var(--ink); letter-spacing:-.5px; font-weight:700; }
h1{ margin-bottom:0; font-size:32px; line-height:1.4; }
h2{ font-size:24px; line-height:1.45; }
h3{ font-size:20px; line-height:1.5; }
[hidden]{ display:none!important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:8px; left:12px; z-index:100; padding:12px 20px; border-radius:var(--radius); background:var(--ink); color:white; transform:translateY(-200%); }
.skip-link:focus{ transform:none; color:white; }
.eyebrow{ margin:0 0 10px; font-size:14px; font-weight:600; line-height:1.5; color:var(--teal); letter-spacing:.3px; }
.ui-icon,.search-icon{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; min-width:20px; flex-shrink:0; vertical-align:middle; }
svg.ui-icon,svg.search-icon{ display:block; }
.ui-icon svg,.search-icon svg{ display:block; width:20px; height:20px; }
.quiet-button{ border:1px solid transparent; background:transparent; padding:10px 12px; }
.icon-button{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; flex-shrink:0; border:1px solid transparent; background:transparent; padding:0; font-size:22px; }
.primary-button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; background:var(--teal); color:white; border:1px solid var(--teal); border-radius:var(--radius); padding:10px 18px; font-size:15px; font-weight:600; line-height:1.5; }
.primary-button:hover:not(:disabled),a.primary-button:hover{ background:var(--teal-dark); color:white; border-color:var(--teal-dark); }
.site-header{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--header); padding:0 28px; background:rgba(251,246,236,.98); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; justify-content:center; min-height:44px; gap:14px; flex-shrink:0; min-width:0; }
.church-logo{ display:block; width:144px; height:auto; flex-shrink:0; object-fit:contain; }
.brand>.brand-title{ padding-left:14px; border-left:1px solid var(--line); }
.brand strong{ display:block; color:var(--brick); font-size:17px; font-weight:700; line-height:1.4; white-space:nowrap; letter-spacing:-.5px; }
.header-links{ display:flex; align-items:center; gap:4px; font-size:15px; }
.header-links a,.header-links .quiet-button,.site-menu-toggle,.menu-button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 12px; border:1px solid transparent; border-radius:var(--radius); background:transparent; color:var(--ink); font-size:15px; font-weight:600; line-height:1.4; white-space:nowrap; }
.header-links a:hover,.header-links .quiet-button:hover,.site-menu-toggle:hover,.menu-button:hover{ background:var(--hover); color:var(--ink); }
.header-links a[aria-current="page"],.header-links button[aria-expanded="true"],.header-links button[aria-pressed="true"],.site-menu-toggle[aria-expanded="true"],.menu-button[aria-expanded="true"]{ background:var(--selected); border-color:#bdcdbb; color:var(--teal-dark); font-weight:600; }
.screen-select-label{ display:flex; align-items:center; gap:8px; padding-left:12px; margin-left:4px; border-left:1px solid var(--line); font-size:14px; white-space:nowrap; }
.screen-select-label select{ min-height:44px; padding:8px; font-size:16px; background:var(--card); }
.site-menu-toggle,.menu-button,.drawer-close{ display:none; }
.reader-toolbar{ position:sticky; top:var(--header); z-index:30; display:flex; align-items:center; justify-content:center; gap:16px; min-height:var(--reading-bar); padding:7px 28px 8px; background:rgba(251,246,236,.98); border-bottom:1px solid var(--line); }
.reference-search{ display:flex; align-items:center; gap:8px; flex:1 1 0; min-width:0; max-width:650px; height:48px; padding:1px 1px 1px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.reference-search>span,.participant-search>span,.book-filter>span:not(.sr-only){ display:inline-flex; align-items:center; justify-content:center; width:20px; min-width:20px; height:20px; color:var(--muted); line-height:1; }
.reference-search input{ flex:1 1 0; min-width:0; width:100%; height:44px; padding:0; border:0; background:transparent; font-size:16px; line-height:normal; }
.reference-search button{ flex-shrink:0; min-width:62px; min-height:44px; height:44px; padding:0 14px; border:1px solid transparent; border-radius:6px; background:var(--teal); color:white; font-size:15px; }
.reference-search button:hover:not(:disabled){ background:var(--teal-dark); color:white; }
.reference-search:focus-within,.book-filter:focus-within,.participant-search:focus-within{ outline:2px solid #638a70; outline-offset:2px; border-color:var(--teal); }
.reference-search input:focus-visible,.book-filter input:focus-visible,.participant-search input:focus-visible{ outline:none; box-shadow:none; }
.reference-search button:focus-visible,.participant-search button:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:1px; }
#search-feedback{ margin:0; font-size:15px; color:#7c3529; line-height:1.5; }
#search-feedback:not(:empty){ padding:10px 14px; border:1px solid #dfb7a4; border-radius:var(--radius); background:#fff7ef; }
.reader-toolbar #search-feedback:not(:empty){ position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); width:min(650px,calc(100% - 32px)); box-shadow:0 4px 18px #293d3012; }
.toolbar-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.toolbar-actions .reading-tool{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:auto; height:44px; gap:7px; padding:8px 12px; border-color:var(--line); background:var(--card); font-size:15px; }
.toolbar-actions .reading-tool:hover{ background:var(--hover); }
.toolbar-actions .reading-tool[aria-pressed="true"],.toolbar-actions .reading-tool[aria-expanded="true"]{ background:var(--selected); border-color:#bdcdbb; color:var(--teal-dark); }
body:not([data-view="reader"]) .toolbar-actions{ display:none; }
.sidebar{ position:fixed; top:calc(var(--header) + var(--reading-bar)); bottom:0; left:0; z-index:25; display:flex; flex-direction:column; width:var(--sidebar); padding:24px 18px 18px; background:var(--paper); border-right:1px solid var(--line); }
.sidebar-heading{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sidebar-heading .eyebrow{ margin:0; font-size:15px; }
.testament-tabs{ display:flex; gap:4px; margin:0 0 16px; padding:4px; border-radius:var(--radius); background:#eceee3; }
.testament-tabs button{ flex:1; min-height:44px; padding:8px; border:1px solid transparent; background:transparent; color:var(--muted); font-size:15px; font-weight:600; }
.testament-tabs button[aria-selected="true"]{ background:var(--selected); border-color:#bdcdbb; color:var(--teal-dark); font-weight:600; }
.testament-tabs span{ margin-left:4px; font-size:14px; }
.book-filter{ display:flex; align-items:center; gap:8px; min-height:46px; padding:0 11px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.book-filter input{ width:100%; min-width:0; height:44px; padding:0; border:0; background:transparent; font-size:16px; }
.book-list{ flex:1; min-height:0; overflow:auto; margin:14px -5px 0; padding:0 5px 12px; scrollbar-width:thin; scrollbar-color:#c9cec4 transparent; }
.book-row{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin:2px 0; padding:8px 10px; border:1px solid transparent; background:transparent; text-align:left; font-size:15px; font-weight:600; }
.book-count{ margin-left:10px; color:var(--muted); font-size:14px; font-weight:400; white-space:nowrap; }
.book-row[aria-current="page"]{ background:var(--selected); border-color:#bdcdbb; color:var(--teal-dark); font-weight:600; }
.sidebar-bottom{ padding-top:16px; border-top:1px solid var(--line); }
.resume-button{ display:grid; grid-template-columns:1fr auto; width:100%; padding:10px 12px; border:1px solid #d0dccb; background:var(--selected); text-align:left; font-size:14px; }
.resume-button strong{ display:block; grid-column:1; margin-top:4px; color:var(--teal-dark); font-size:15px; }
.resume-button>span:last-child{ grid-column:2; grid-row:1 / 3; align-self:center; font-size:20px; }
.drawer-backdrop{ position:fixed; inset:calc(var(--header) + var(--reading-bar)) 0 0; z-index:45; background:#182c2370; }
.empty-message{ padding:16px 8px; color:var(--muted); font-size:15px; line-height:1.7; }
main{ margin-left:var(--sidebar); min-height:calc(100vh - var(--header) - var(--reading-bar)); }
body:not([data-view="reader"]) .sidebar{ display:none; }
body:not([data-view="reader"]) main{ margin-left:0; }
body:not([data-view="reader"]) .toast{ left:50%; }
.home-view{ max-width:1280px; margin:0 auto; padding:24px 40px 48px; }
.home-banner{ margin:0; overflow:hidden; border:1px solid var(--line); background:#f2efe5; }
.home-banner img{ display:block; width:100%; height:auto; }
.home-welcome{ padding:20px 0 18px; }
.home-welcome h1{ color:#3b5340; font-size:32px; line-height:1.4; }
.home-actions{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.home-action{ display:flex; align-items:center; min-height:64px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); text-align:left; color:var(--ink); }
.home-action strong{ font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.4px; }
.home-action:hover{ background:var(--hover); color:var(--ink); border-color:#bccab8; }
.home-action.primary{ background:var(--teal); color:white; border-color:var(--teal); }
.home-action.primary:hover{ background:var(--teal-dark); color:white; border-color:var(--teal-dark); }
.home-reading-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-left:auto; max-width:100%; }
.home-reading-tools .primary-button{ gap:8px; padding:8px 12px; }
.home-reading-tools strong{ font-size:15px; }
.home-reading-tools span{ font-size:14px; font-weight:400; }
.home-reading-tools .quiet-button{ font-size:15px; }
.section-heading{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.section-heading .eyebrow{ margin-bottom:7px; }
.section-heading h2{ margin:0; font-size:24px; }
.section-heading>p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.testament-panels{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.testament-panel{ padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.testament-panel-heading{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; padding-bottom:16px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.testament-panel h3{ margin:0; font-size:24px; color:var(--brick); }
.testament-panel-heading>span{ font-size:15px; line-height:1.6; color:var(--muted); }
.home-book-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.home-book-link{ min-height:44px; padding:8px; border:1px solid transparent; background:transparent; font-size:15px; text-align:left; line-height:1.5; }
.home-record{ padding-top:24px; margin-top:24px; border-top:1px solid var(--line); }
.home-record .record-numbers{ max-width:640px; margin:0 auto; text-align:center; }
.record-numbers,.about-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.record-numbers>div,.about-facts>div{ min-width:0; }
.record-numbers strong,.about-facts strong{ display:block; color:var(--teal); font-size:32px; font-weight:700; line-height:1.3; letter-spacing:-.5px; }
.record-numbers span,.about-facts span{ display:block; margin-top:8px; color:var(--muted); font-size:15px; line-height:1.5; }
.reader-heading{ display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:20px; max-width:1090px; margin:0 auto; padding:28px 36px 20px; }
.reader-heading .eyebrow{ margin-bottom:8px; }
.reader-description{ margin:8px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.chapter-jump-bar{ position:sticky; top:var(--sticky-base,calc(var(--header) + var(--reading-bar))); z-index:22; margin-bottom:16px; padding:7px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); box-shadow:0 4px 8px #293d3008; }
.chapter-jump-inner{ max-width:1090px; margin:0 auto; padding:0 36px; }
.jump-form{ display:flex; align-items:center; gap:8px; padding:0; }
.jump-form label{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:15px; }
.jump-form select{ width:86px; height:44px; padding:7px; font-size:16px; }
.jump-form .verse-field{ display:flex; align-items:center; gap:4px; width:96px; height:44px; padding:0 8px; border-radius:var(--radius); background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:16px; color:var(--ink); }
.jump-form .verse-field input{ flex:1; min-width:0; width:100%; height:44px; padding:0; border:0; background:transparent; font-size:16px; }
.verse-field:focus-within{ outline:2px solid #638a70; outline-offset:2px; }
.verse-field input:focus-visible{ outline:none; }
.jump-form button{ min-height:44px; padding:0 15px; border-color:var(--teal); background:var(--teal); color:white; }
.jump-form button:hover:not(:disabled){ background:var(--teal-dark); color:white; }
.index-notice,.read-status{ width:calc(100% - 72px); max-width:928px; margin:0 auto 16px; font-size:15px; line-height:1.65; }
.index-notice{ padding:12px 16px; border-left:3px solid #b9c9bb; background:#edf0e5; color:var(--muted); }
.read-status{ margin-bottom:0; color:var(--teal-dark); }
.read-status:not(:empty){ margin-bottom:16px; padding:12px 16px; border-radius:var(--radius); background:var(--selected); }
.reading-controls{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; max-width:1090px; margin:0 auto; padding:0 36px 18px; }
.chapter-controls{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.chapter-controls button{ min-height:44px; padding:8px 10px; border:1px solid transparent; background:transparent; color:var(--teal-dark); font-size:15px; }
.chapter-controls span{ color:var(--muted); font-size:14px; }
.page-jump{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.page-jump select{ min-width:68px; height:44px; padding:6px; font-size:16px; }
.reading-content{ max-width:1000px; margin:0 auto; padding:0 36px 24px; }
.manuscript-page{ margin:0 0 28px; }
.page-caption{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; min-height:24px; padding-bottom:10px; color:var(--muted); font-size:14px; line-height:1.6; }
.page-caption>span:first-child{ color:var(--ink); font-size:15px; font-weight:600; }
.page-caption>span:nth-child(2){ margin-left:auto; white-space:nowrap; }
.page-caption .page-writer{ flex-basis:100%; font-size:14px; color:var(--muted); line-height:1.5; }
.page-surface{ position:relative; width:100%; aspect-ratio:970 / 1383; overflow:hidden; border:1px solid #e0ddcf; background:white; box-shadow:0 3px 18px #333c250b; cursor:zoom-in; }
.page-surface>img{ display:block; width:100%; height:100%; object-fit:contain; background:white; }
.page-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; color:var(--muted); background:#fffdf8; font-size:15px; line-height:1.6; pointer-events:none; }
.page-placeholder::before{ content:""; display:block; width:28px; height:28px; border:3px solid #e0e5d9; border-top-color:var(--teal); border-radius:50%; }
.page-surface[aria-busy="true"] .page-placeholder::before{ animation:loading-turn .9s linear infinite; }
.page-surface.is-loaded .page-placeholder{ display:none; }
.page-surface.has-error .page-placeholder{ pointer-events:auto; color:var(--muted); }
.page-surface.has-error .page-placeholder::before{ display:none; }
.page-placeholder button{ padding:8px 16px; background:var(--paper); }
@keyframes loading-turn{ to { transform:rotate(360deg); } }
.loading-state,.error-state{ padding:64px 20px; text-align:center; font-size:16px; color:var(--muted); line-height:1.7; }
.error-state button{ display:block; margin:20px auto 0; padding:8px 20px; }
.book-end{ padding:8px 20px 32px; text-align:center; color:var(--muted); font-size:15px; }
.book-end p{ margin-bottom:12px; }
.book-end button{ color:var(--teal-dark); border-color:#bfcabd; padding:10px 20px; }
.page-navigation{ position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 28px calc(8px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:rgba(251,246,236,.98); }
.page-navigation button{ min-height:44px; padding:8px 12px; border:1px solid transparent; background:transparent; font-size:15px; }
.page-navigation span{ color:var(--muted); font-size:14px; line-height:1.5; text-align:center; }
.content-view{ max-width:1180px; margin:0 auto; padding:36px 40px 48px; }
.content-view h1,.about-view h1{ color:var(--brick); }
.view-intro{ margin:16px 0 24px; color:var(--muted); font-size:16px; line-height:1.7; }
.participant-tools{ display:flex; align-items:center; gap:16px; margin:20px 0 16px; }
.participant-search{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; max-width:640px; min-height:48px; padding:1px 1px 1px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.participant-search input{ min-width:0; flex:1; height:44px; padding:0; border:0; background:transparent; font-size:16px; line-height:normal; }
.participant-search button{ min-height:44px; padding:0 18px; border-color:var(--teal); background:var(--teal); color:white; border-radius:6px; }
.participant-search button:hover:not(:disabled){ background:var(--teal-dark); color:white; }
.participant-controls{ display:flex; flex-shrink:0; margin-left:auto; }
.participant-controls label{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--muted); }
.participant-controls select{ padding:8px 12px; font-size:16px; color:var(--ink); }
.participant-filter-bar{ position:sticky; top:var(--sticky-base,calc(var(--header) + var(--reading-bar))); z-index:22; padding:4px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); box-shadow:0 4px 8px #293d3008; }
.participant-filters{ display:flex; align-items:center; flex-wrap:nowrap; gap:6px; padding:4px 3px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#abbfa9 var(--paper); overscroll-behavior-x:contain; }
.participant-filter{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:16px; font-weight:600; line-height:1.4; }
.participant-filter[aria-pressed="true"]{ background:var(--selected); border-color:#bdcdbb; color:var(--teal-dark); }
.participant-summary{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; min-height:44px; margin:8px 0 16px; }
.participant-summary>p{ margin:0; color:var(--muted); font-size:15px; }
.source-image-button{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 10px; border:1px solid transparent; background:transparent; color:var(--teal-dark); font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.participant-list{ display:flex; flex-direction:column; gap:28px; }
.participant-group{ min-width:0; }
.participant-group-heading{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.participant-group-heading h2{ margin:0; font-size:22px; line-height:1.4; color:var(--teal-dark); }
.participant-group-heading>span{ color:var(--muted); font-size:15px; line-height:1.5; }
.participant-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.participant-card{ min-width:0; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.participant-card h3{ margin:0 0 10px; font-size:20px; line-height:1.4; }
.participant-assignments{ display:flex; flex-wrap:wrap; gap:8px; }
.assignment-link{ max-width:100%; min-height:44px; padding:8px 10px; background:var(--selected); border:1px solid #d2decd; color:var(--teal-dark); font-size:15px; text-align:left; }
.participant-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.participant-footer .source-note{ flex:1 1 360px; margin:0; }
.participant-footer .source-image-button{ flex-shrink:0; }
.review-team{ padding-top:24px; margin-top:32px; border-top:1px solid var(--line); }
.review-team h2{ margin:0 0 12px; font-size:22px; }
.review-team p{ margin:0; font-size:16px; line-height:1.9; color:var(--muted); }
.source-note{ margin:20px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.about-view{ max-width:1000px; margin:0 auto; padding:36px 40px 48px; }
.about-intro{ margin:18px 0 24px; font-size:16px; line-height:1.7; color:var(--muted); }
.about-facts{ padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-note{ margin:12px 0 32px; color:var(--muted); font-size:14px; line-height:1.7; }
.auxiliary-section{ margin:32px 0; }
.auxiliary-section h2{ margin:0 0 16px; font-size:22px; }
.auxiliary-section img{ display:block; width:100%; height:auto; border:1px solid var(--line); background:white; cursor:zoom-in; }
.church-information{ display:grid; grid-template-columns:minmax(240px,395px) 1fr; align-items:center; gap:32px; margin:20px 0 28px; }
.church-building{ display:block; width:100%; height:auto; border:1px solid var(--line); }
.church-information dl{ margin:0 0 20px; }
.church-information dl>div{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:16px; line-height:1.65; }
.church-information dt{ color:var(--muted); white-space:nowrap; }
.church-information dd{ margin:0; overflow-wrap:anywhere; }
.church-information dd a{ display:inline-flex; align-items:center; min-height:44px; padding-block:10px; margin-block:-10px; text-decoration:underline; text-underline-offset:4px; }
.church-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.church-action-link{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 12px; border:1px solid #bcc6b8; border-radius:8px; background:transparent; color:var(--teal-dark); font-size:15px; font-weight:600; line-height:1.5; white-space:nowrap; }
.church-action-link:hover,.church-action-link:focus-visible,.church-action-link:active{ background:var(--selected); border-color:var(--teal); color:var(--teal-dark); }
.church-action-link .external-link-mark{ font-size:14px; font-weight:400; }
.church-action-icon{ display:block; flex:0 0 22px; width:22px; height:22px; }
.church-travel-details{ margin-bottom:32px; }
.travel-section{ display:grid; grid-template-columns:130px minmax(0,1fr); align-items:start; gap:28px; padding:24px 0; border-top:1px solid var(--line); }
.travel-section h2{ margin:0; font-size:22px; color:var(--teal-dark); }
.travel-section ul{ margin:0; padding-left:20px; }
.travel-section li{ margin-bottom:12px; font-size:16px; line-height:1.7; color:var(--muted); }
.travel-section li:last-child{ margin-bottom:0; }
.travel-section li strong{ display:block; font-size:16px; font-weight:600; color:var(--ink); }
.travel-section li span{ display:block; margin-top:4px; font-size:16px; }
.church-travel-details>.source-note{ margin:0; }
.church-map-section{ padding-top:24px; margin-bottom:32px; border-top:1px solid var(--line); }
.church-map-section h2{ margin:0 0 8px; font-size:24px; }
.church-map-heading{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.church-map-heading h2{ margin:0; }
.church-map-section p{ margin:0 0 16px; color:var(--muted); font-size:16px; }
.church-map{ max-width:760px; margin:16px auto 0; }
.church-map .primary-button{ margin-top:12px; }
.church-map-viewport{ position:relative; aspect-ratio:760 / 790; overflow:hidden; background:white; border:1px solid var(--line); }
.church-map-viewport img{ position:absolute; max-width:none; width:171.710526%; height:auto; left:-37.5%; top:0; }
.church-map figcaption{ margin:12px 0; color:var(--muted); font-size:14px; line-height:1.6; }
.site-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; padding:20px 36px; color:var(--muted); font-size:14px; line-height:1.5; border-top:1px solid var(--line); }
.site-footer>div{ display:flex; align-items:center; gap:16px; }
.site-footer a{ display:inline-flex; align-items:center; min-height:44px; }
.screen-status{ font-size:14px; }
.saved-dialog{ width:calc(100% - 32px); max-width:470px; max-height:85dvh; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); }
dialog::backdrop{ background:#18291db3; }
.dialog-heading{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dialog-heading h2{ margin:0; font-size:22px; line-height:1.4; }
.dialog-note{ margin:12px 0 20px; color:var(--muted); font-size:15px; line-height:1.7; }
.saved-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.saved-row>button:first-child{ flex:1; padding:8px; border-color:transparent; background:transparent; text-align:left; font-size:15px; line-height:1.6; }
.saved-row small{ display:block; margin-top:4px; color:var(--muted); font-size:14px; font-weight:400; }
.saved-row .delete-bookmark{ padding:8px 12px; background:transparent; border-color:transparent; color:var(--muted); font-size:14px; }
.share-url{ display:block; width:100%; padding:12px; margin-bottom:16px; font-size:16px; }
.roster-dialog{ position:fixed; inset:16px; width:calc(100% - 32px); max-width:900px; height:min(900px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); }
.roster-dialog[open]{ display:flex; flex-direction:column; }
.roster-dialog>.dialog-heading{ flex-shrink:0; min-height:68px; padding:12px 20px; border-bottom:1px solid var(--line); }
.roster-dialog .dialog-heading button{ flex-shrink:0; min-width:44px; min-height:44px; }
.roster-pages{ flex:1; min-height:0; padding:20px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.roster-page{ margin:0 0 24px; }
.roster-page:last-child{ margin-bottom:0; }
.roster-page h3{ margin:0 0 10px; font-size:18px; line-height:1.5; }
.roster-image-button{ display:block; width:100%; min-height:44px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:white; cursor:zoom-in; }
.roster-image-button img{ display:block; width:100%; height:auto; background:white; }
.roster-error{ margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.6; }
.roster-error button{ display:block; margin-top:8px; }
.zoom-dialog{ position:fixed; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); max-width:none; max-height:none; padding:0; overflow:hidden; border:0; border-radius:10px; background:#e8e9df; color:var(--ink); }
.zoom-controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:8px 16px; background:var(--paper); border-bottom:1px solid var(--line); font-size:15px; line-height:1.5; }
.zoom-controls>span{ min-width:0; }
.zoom-controls>div{ display:flex; align-items:center; flex-shrink:0; gap:4px; }
.zoom-controls #zoom-percent{ min-width:46px; text-align:center; font-size:14px; color:var(--muted); }
.zoom-canvas{ height:calc(100% - 64px); padding:24px; overflow:auto; text-align:center; }
.zoom-canvas img{ display:block; max-width:none; height:auto; margin:0 auto; background:white; box-shadow:0 3px 20px #1e322019; }
.toast{ position:fixed; bottom:80px; left:calc(50% + var(--sidebar)/2); z-index:80; width:max-content; max-width:calc(100% - 32px); padding:12px 20px; transform:translateX(-50%); border-radius:var(--radius); background:#283c32; color:white; font-size:15px; line-height:1.6; text-align:center; box-shadow:0 6px 28px #17231d25; }
.back-to-top{ position:fixed; right:18px; bottom:calc(var(--bottom-navigation,0px) + env(safe-area-inset-bottom,0px) + 12px); z-index:24; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:10px 12px; border-color:var(--teal); background:var(--teal); color:white; font-size:15px; font-weight:600; line-height:1.4; white-space:nowrap; box-shadow:0 3px 14px #18291d25; }
body[data-view="reader"] .back-to-top{ bottom:calc(var(--bottom-navigation,0px) + 12px); }
.back-to-top:hover:not(:disabled){ border-color:var(--teal-dark); background:var(--teal-dark); color:white; }
.back-to-top svg{ flex-shrink:0; width:20px; height:20px; }
html[data-screen="mobile"] body .back-to-top{ right:max(14px,calc((100vw - 430px)/2 + 14px)); }
@media(min-width:1500px){html:not([data-screen]){ --sidebar:280px; }
html:not([data-screen]) .sidebar{ padding-left:26px; padding-right:26px; }
html:not([data-screen]) .reader-heading,html:not([data-screen]) .reading-controls,html:not([data-screen]) .chapter-jump-inner{ max-width:1140px; }
html:not([data-screen]) .reading-content{ max-width:1050px; }
html:not([data-screen]) .index-notice,html:not([data-screen]) .read-status{ max-width:978px; }}
@media(max-width:1240px){html:not([data-screen]) .site-menu-toggle{ display:inline-flex; margin-left:auto; }
html:not([data-screen]) .header-links{ display:none; position:absolute; right:24px; top:calc(var(--header) - 1px); z-index:60; width:276px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:0 10px 30px #293d301a; }
html:not([data-screen]) .header-links.is-open{ display:flex; flex-direction:column; align-items:stretch; gap:4px; }
html:not([data-screen]) .header-links a,html:not([data-screen]) .header-links .quiet-button{ justify-content:flex-start; padding:10px 12px; text-align:left; }
html:not([data-screen]) .screen-select-label{ justify-content:space-between; padding:12px 4px 2px; margin:6px 0 0; border-left:0; border-top:1px solid var(--line); font-size:15px; }
html:not([data-screen]) .screen-select-label select{ font-size:16px; }
html:not([data-screen]) .participant-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }}
html[data-screen="mobile"] .site-menu-toggle{ display:inline-flex; margin-left:auto; }
html[data-screen="mobile"] .header-links{ display:none; position:absolute; right:24px; top:calc(var(--header) - 1px); z-index:60; width:276px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:0 10px 30px #293d301a; }
html[data-screen="mobile"] .header-links.is-open{ display:flex; flex-direction:column; align-items:stretch; gap:4px; }
html[data-screen="mobile"] .header-links a,html[data-screen="mobile"] .header-links .quiet-button{ justify-content:flex-start; padding:10px 12px; text-align:left; }
html[data-screen="mobile"] .screen-select-label{ justify-content:space-between; padding:12px 4px 2px; margin:6px 0 0; border-left:0; border-top:1px solid var(--line); font-size:15px; }
html[data-screen="mobile"] .screen-select-label select{ font-size:16px; }
html[data-screen="mobile"] .participant-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:1100px){html:not([data-screen]){ --sidebar:225px; }
html:not([data-screen]) .sidebar{ padding:20px 14px 16px; }
html:not([data-screen]) .home-view,html:not([data-screen]) .content-view,html:not([data-screen]) .about-view{ padding-left:28px; padding-right:28px; }
html:not([data-screen]) .home-welcome{ gap:24px; }
html:not([data-screen]) .home-welcome h1{ font-size:30px; }
html:not([data-screen]) .testament-panel{ padding:20px; }
html:not([data-screen]) .home-record{ gap:28px; }
html:not([data-screen]) .record-numbers{ gap:16px; }
html:not([data-screen]) .church-information{ gap:28px; }
html:not([data-screen]) .reader-heading{ grid-template-columns:minmax(0,1fr); gap:16px; padding-left:28px; padding-right:28px; }
html:not([data-screen]) .chapter-jump-inner{ padding-left:28px; padding-right:28px; }
html:not([data-screen]) .jump-form{ padding-top:0; }
html:not([data-screen]) .reading-controls,html:not([data-screen]) .reading-content{ padding-left:28px; padding-right:28px; }
html:not([data-screen]) .index-notice,html:not([data-screen]) .read-status{ width:calc(100% - 56px); }
html:not([data-screen]) .toolbar-actions{ gap:4px; }
html:not([data-screen]) .toolbar-actions .reading-tool{ gap:5px; padding:8px 10px; }}
html[data-screen="mobile"]{ --sidebar:225px; }
html[data-screen="mobile"] .sidebar{ padding:20px 14px 16px; }
html[data-screen="mobile"] .home-view,html[data-screen="mobile"] .content-view,html[data-screen="mobile"] .about-view{ padding-left:28px; padding-right:28px; }
html[data-screen="mobile"] .home-welcome{ gap:24px; }
html[data-screen="mobile"] .home-welcome h1{ font-size:30px; }
html[data-screen="mobile"] .testament-panel{ padding:20px; }
html[data-screen="mobile"] .home-record{ gap:28px; }
html[data-screen="mobile"] .record-numbers{ gap:16px; }
html[data-screen="mobile"] .church-information{ gap:28px; }
html[data-screen="mobile"] .reader-heading{ grid-template-columns:minmax(0,1fr); gap:16px; padding-left:28px; padding-right:28px; }
html[data-screen="mobile"] .chapter-jump-inner{ padding-left:28px; padding-right:28px; }
html[data-screen="mobile"] .jump-form{ padding-top:0; }
html[data-screen="mobile"] .reading-controls,html[data-screen="mobile"] .reading-content{ padding-left:28px; padding-right:28px; }
html[data-screen="mobile"] .index-notice,html[data-screen="mobile"] .read-status{ width:calc(100% - 56px); }
html[data-screen="mobile"] .toolbar-actions{ gap:4px; }
html[data-screen="mobile"] .toolbar-actions .reading-tool{ gap:5px; padding:8px 10px; }
@media(max-width:760px){html:not([data-screen]){ --header:62px; --reading-bar:64px; --sidebar:0px; }
html:not([data-screen]) body[data-view="reader"]{ --reading-bar:116px; }
html:not([data-screen]) h1{ font-size:28px; }
html:not([data-screen]) h2{ font-size:22px; }
html:not([data-screen]) .site-header{ justify-content:flex-start; gap:8px; padding:0 14px; }
html:not([data-screen]) .brand{ flex-direction:column; align-items:flex-start; gap:3px; flex-shrink:1; min-width:0; }
html:not([data-screen]) .church-logo{ width:104px; }
html:not([data-screen]) .brand>.brand-title{ padding-left:0; border-left:0; }
html:not([data-screen]) .brand strong{ font-size:14px; line-height:1.2; letter-spacing:-.3px; }
html:not([data-screen]) .site-menu-toggle{ gap:5px; padding:8px; font-size:14px; }
html:not([data-screen]) .site-menu-toggle .ui-icon{ width:18px; min-width:18px; }
html:not([data-screen]) .menu-button{ display:inline-flex; width:auto; min-width:64px; padding:8px 6px; gap:5px; font-size:14px; }
html:not([data-screen]) .header-links{ right:14px; max-width:calc(100vw - 28px); }
html:not([data-screen]) .reader-toolbar{ justify-content:stretch; flex-wrap:wrap; gap:8px; padding:7px 14px 8px; }
html:not([data-screen]) .reference-search{ flex-basis:100%; max-width:none; gap:8px; height:48px; padding-left:10px; }
html:not([data-screen]) .reference-search input{ font-size:16px; }
html:not([data-screen]) .reference-search button{ min-width:60px; padding:0 12px; }
html:not([data-screen]) .toolbar-actions{ width:100%; gap:8px; }
html:not([data-screen]) .toolbar-actions .reading-tool{ flex:1; width:0; min-width:0; height:44px; gap:6px; padding:8px; font-size:15px; }
html:not([data-screen]) .sidebar{ top:calc(var(--header) + var(--reading-bar)); z-index:50; width:min(290px,calc(100vw - 28px)); padding:16px; transform:translateX(-100%); box-shadow:8px 0 25px #26392715; transition:transform .18s ease; }
html:not([data-screen]) .sidebar:not(.is-open){ visibility:hidden; pointer-events:none; }
html:not([data-screen]) .sidebar.is-open{ visibility:visible; pointer-events:auto; transform:none; }
html:not([data-screen]) .sidebar-heading{ margin-bottom:12px; }
html:not([data-screen]) .drawer-close{ display:inline-flex; font-size:20px; }
html:not([data-screen]) main{ margin-left:0; }
html:not([data-screen]) .home-view{ padding:20px 18px 32px; }
html:not([data-screen]) .home-welcome{ padding:18px 0 16px; }
html:not([data-screen]) .home-welcome h1{ font-size:26px; line-height:1.4; }
html:not([data-screen]) .home-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
html:not([data-screen]) .home-action{ min-height:56px; padding:12px; }
html:not([data-screen]) .home-action strong{ font-size:clamp(17px,4.5vw,18px); }
html:not([data-screen]) .home-reading-tools{ gap:8px; }
html:not([data-screen]) .home-reading-tools .primary-button{ gap:8px; padding:8px 12px; }
html:not([data-screen]) .home-reading-tools .quiet-button{ min-height:44px; padding:8px 10px; }
html:not([data-screen]) .section-heading{ gap:8px 12px; margin-bottom:14px; }
html:not([data-screen]) .section-heading h2{ font-size:22px; }
html:not([data-screen]) .section-heading>p{ margin-top:8px; font-size:15px; }
html:not([data-screen]) .testament-panels{ grid-template-columns:1fr; gap:16px; }
html:not([data-screen]) .testament-panel{ padding:18px; }
html:not([data-screen]) .testament-panel-heading{ gap:8px; padding-bottom:12px; }
html:not([data-screen]) .testament-panel h3{ font-size:22px; }
html:not([data-screen]) .testament-panel-heading>span{ margin-top:0; font-size:15px; line-height:1.6; }
html:not([data-screen]) .home-book-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
html:not([data-screen]) .home-book-link{ padding:8px; font-size:15px; }
html:not([data-screen]) .home-record{ display:block; margin-top:24px; padding-top:24px; }
html:not([data-screen]) .record-numbers{ gap:12px; padding-top:20px; }
html:not([data-screen]) .record-numbers strong,html:not([data-screen]) .about-facts strong{ font-size:32px; font-weight:700; }
html:not([data-screen]) .record-numbers span,html:not([data-screen]) .about-facts span{ font-size:14px; margin-top:7px; }
html:not([data-screen]) .reader-heading{ gap:14px; padding:20px 18px 16px; }
html:not([data-screen]) .reader-heading h1{ font-size:28px; }
html:not([data-screen]) .reader-heading .eyebrow{ margin-bottom:6px; }
html:not([data-screen]) .reader-description{ font-size:15px; }
html:not([data-screen]) .chapter-jump-inner{ padding-left:18px; padding-right:18px; }
html:not([data-screen]) .jump-form{ gap:8px; padding:0; }
html:not([data-screen]) .jump-form label{ font-size:15px; }
html:not([data-screen]) .jump-form button{ padding:0 18px; }
html:not([data-screen]) .index-notice,html:not([data-screen]) .read-status{ width:calc(100% - 36px); font-size:14px; }
html:not([data-screen]) .index-notice,html:not([data-screen]) .read-status:not(:empty){ padding:10px 12px; margin-bottom:14px; }
html:not([data-screen]) .reading-controls{ align-items:flex-start; gap:8px; padding:0 18px 14px; }
html:not([data-screen]) .chapter-controls{ flex-wrap:nowrap; justify-content:space-between; width:100%; gap:4px; }
html:not([data-screen]) .chapter-controls button{ padding:8px 4px; font-size:14px; white-space:nowrap; }
html:not([data-screen]) .chapter-controls span{ font-size:14px; line-height:1.5; text-align:center; }
html:not([data-screen]) .page-jump{ font-size:14px; gap:8px; }
html:not([data-screen]) .reading-content{ padding:0 12px 20px; }
html:not([data-screen]) .manuscript-page{ margin-bottom:24px; }
html:not([data-screen]) .page-caption{ gap:4px 8px; padding:0 3px 9px; font-size:14px; }
html:not([data-screen]) .page-caption>span:first-child{ font-size:15px; }
html:not([data-screen]) .page-caption .page-writer{ font-size:14px; }
html:not([data-screen]) .page-placeholder{ font-size:14px; }
html:not([data-screen]) .page-navigation{ gap:6px; padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px)); }
html:not([data-screen]) .page-navigation button{ padding:8px 4px; font-size:14px; white-space:nowrap; }
html:not([data-screen]) .page-navigation span{ font-size:14px; line-height:1.4; }
html:not([data-screen]) .content-view,html:not([data-screen]) .about-view{ padding:24px 18px 36px; }
html:not([data-screen]) .view-intro,html:not([data-screen]) .about-intro{ margin:14px 0 20px; font-size:16px; line-height:1.65; }
html:not([data-screen]) .participant-tools{ flex-wrap:wrap; gap:10px; margin:16px 0 12px; }
html:not([data-screen]) .participant-search{ flex-basis:100%; max-width:none; gap:8px; padding-left:10px; }
html:not([data-screen]) .participant-search input{ font-size:16px; }
html:not([data-screen]) .participant-search button{ padding:0 12px; }
html:not([data-screen]) .participant-controls{ justify-content:flex-end; width:100%; margin-left:0; }
html:not([data-screen]) .participant-filters{ gap:6px; }
html:not([data-screen]) .participant-summary{ gap:4px; margin:8px 0 12px; }
html:not([data-screen]) .participant-summary>p{ font-size:15px; }
html:not([data-screen]) .source-image-button{ padding:8px; }
html:not([data-screen]) .participant-list{ gap:24px; }
html:not([data-screen]) .participant-grid{ grid-template-columns:1fr; gap:10px; }
html:not([data-screen]) .participant-card{ padding:16px; }
html:not([data-screen]) .participant-card h3{ font-size:20px; }
html:not([data-screen]) .participant-footer{ margin-top:20px; padding-top:12px; }
html:not([data-screen]) .review-team{ margin-top:24px; }
html:not([data-screen]) .review-team h2{ font-size:22px; }
html:not([data-screen]) .about-facts{ padding:20px 0; gap:12px; }
html:not([data-screen]) .about-note{ margin-bottom:24px; }
html:not([data-screen]) .auxiliary-section{ margin:24px 0; }
html:not([data-screen]) .auxiliary-section h2{ font-size:22px; }
html:not([data-screen]) .church-information{ grid-template-columns:1fr; gap:20px; margin:20px 0 24px; }
html:not([data-screen]) .church-building{ max-width:395px; margin:0 auto; }
html:not([data-screen]) .church-information dl>div{ grid-template-columns:56px minmax(0,1fr); gap:12px; font-size:16px; }
html:not([data-screen]) .church-actions{ gap:10px; }
html:not([data-screen]) .travel-section{ grid-template-columns:1fr; gap:14px; padding:22px 0; }
html:not([data-screen]) .travel-section h2{ font-size:22px; }
html:not([data-screen]) .church-map-section{ padding-top:22px; margin-bottom:28px; }
html:not([data-screen]) .church-map-section h2{ font-size:22px; }
html:not([data-screen]) .church-map{ margin-top:16px; }
html:not([data-screen]) .site-footer{ gap:8px 16px; padding:18px; font-size:14px; }
html:not([data-screen]) .site-footer>div{ gap:16px; }
html:not([data-screen]) .saved-dialog{ padding:20px; }
html:not([data-screen]) .dialog-heading h2{ font-size:20px; }
html:not([data-screen]) .roster-dialog{ inset:8px; width:calc(100% - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:10px; }
html:not([data-screen]) .roster-dialog>.dialog-heading{ min-height:64px; padding:10px 12px; }
html:not([data-screen]) .roster-pages{ padding:14px 12px; }
html:not([data-screen]) .roster-page{ margin-bottom:20px; }
html:not([data-screen]) .zoom-dialog{ inset:0; width:100%; height:100%; max-height:100dvh; border-radius:0; }
html:not([data-screen]) .zoom-controls{ min-height:74px; height:74px; gap:8px; padding:8px; font-size:14px; }
html:not([data-screen]) .zoom-controls>span{ font-size:14px; line-height:1.5; }
html:not([data-screen]) .zoom-controls>div{ gap:0; }
html:not([data-screen]) .zoom-controls .icon-button{ width:40px; height:44px; font-size:20px; }
html:not([data-screen]) .zoom-controls #zoom-percent{ min-width:42px; }
html:not([data-screen]) .zoom-canvas{ height:calc(100% - 74px); padding:12px; }
html:not([data-screen]) .toast{ left:50%; bottom:76px; max-width:calc(100% - 28px); padding:12px 16px; font-size:14px; }
html:not([data-screen]) .back-to-top{ right:14px; width:48px; height:48px; padding:12px; border-radius:50%; }
html:not([data-screen]) .back-to-top span{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }}
html[data-screen="mobile"]{ --header:62px; --reading-bar:64px; --sidebar:0px; }
html[data-screen="mobile"] body[data-view="reader"]{ --reading-bar:116px; }
html[data-screen="mobile"] h1{ font-size:28px; }
html[data-screen="mobile"] h2{ font-size:22px; }
html[data-screen="mobile"] .site-header{ justify-content:flex-start; gap:8px; padding:0 14px; }
html[data-screen="mobile"] .brand{ flex-direction:column; align-items:flex-start; gap:3px; flex-shrink:1; min-width:0; }
html[data-screen="mobile"] .church-logo{ width:104px; }
html[data-screen="mobile"] .brand>.brand-title{ padding-left:0; border-left:0; }
html[data-screen="mobile"] .brand strong{ font-size:14px; line-height:1.2; letter-spacing:-.3px; }
html[data-screen="mobile"] .site-menu-toggle{ gap:5px; padding:8px; font-size:14px; }
html[data-screen="mobile"] .site-menu-toggle .ui-icon{ width:18px; min-width:18px; }
html[data-screen="mobile"] .menu-button{ display:inline-flex; width:auto; min-width:64px; padding:8px 6px; gap:5px; font-size:14px; }
html[data-screen="mobile"] .header-links{ right:14px; max-width:calc(100vw - 28px); }
html[data-screen="mobile"] .reader-toolbar{ justify-content:stretch; flex-wrap:wrap; gap:8px; padding:7px 14px 8px; }
html[data-screen="mobile"] .reference-search{ flex-basis:100%; max-width:none; gap:8px; height:48px; padding-left:10px; }
html[data-screen="mobile"] .reference-search input{ font-size:16px; }
html[data-screen="mobile"] .reference-search button{ min-width:60px; padding:0 12px; }
html[data-screen="mobile"] .toolbar-actions{ width:100%; gap:8px; }
html[data-screen="mobile"] .toolbar-actions .reading-tool{ flex:1; width:0; min-width:0; height:44px; gap:6px; padding:8px; font-size:15px; }
html[data-screen="mobile"] .sidebar{ top:calc(var(--header) + var(--reading-bar)); z-index:50; width:min(290px,calc(100vw - 28px)); padding:16px; transform:translateX(-100%); box-shadow:8px 0 25px #26392715; transition:transform .18s ease; }
html[data-screen="mobile"] .sidebar:not(.is-open){ visibility:hidden; pointer-events:none; }
html[data-screen="mobile"] .sidebar.is-open{ visibility:visible; pointer-events:auto; transform:none; }
html[data-screen="mobile"] .sidebar-heading{ margin-bottom:12px; }
html[data-screen="mobile"] .drawer-close{ display:inline-flex; font-size:20px; }
html[data-screen="mobile"] main{ margin-left:0; }
html[data-screen="mobile"] .home-view{ padding:20px 18px 32px; }
html[data-screen="mobile"] .home-welcome{ padding:18px 0 16px; }
html[data-screen="mobile"] .home-welcome h1{ font-size:26px; line-height:1.4; }
html[data-screen="mobile"] .home-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
html[data-screen="mobile"] .home-action{ min-height:56px; padding:12px; }
html[data-screen="mobile"] .home-action strong{ font-size:clamp(17px,4.5vw,18px); }
html[data-screen="mobile"] .home-reading-tools{ gap:8px; }
html[data-screen="mobile"] .home-reading-tools .primary-button{ gap:8px; padding:8px 12px; }
html[data-screen="mobile"] .home-reading-tools .quiet-button{ min-height:44px; padding:8px 10px; }
html[data-screen="mobile"] .section-heading{ gap:8px 12px; margin-bottom:14px; }
html[data-screen="mobile"] .section-heading h2{ font-size:22px; }
html[data-screen="mobile"] .section-heading>p{ margin-top:8px; font-size:15px; }
html[data-screen="mobile"] .testament-panels{ grid-template-columns:1fr; gap:16px; }
html[data-screen="mobile"] .testament-panel{ padding:18px; }
html[data-screen="mobile"] .testament-panel-heading{ gap:8px; padding-bottom:12px; }
html[data-screen="mobile"] .testament-panel h3{ font-size:22px; }
html[data-screen="mobile"] .testament-panel-heading>span{ margin-top:0; font-size:15px; line-height:1.6; }
html[data-screen="mobile"] .home-book-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
html[data-screen="mobile"] .home-book-link{ padding:8px; font-size:15px; }
html[data-screen="mobile"] .home-record{ display:block; margin-top:24px; padding-top:24px; }
html[data-screen="mobile"] .record-numbers{ gap:12px; padding-top:20px; }
html[data-screen="mobile"] .record-numbers strong,html[data-screen="mobile"] .about-facts strong{ font-size:32px; font-weight:700; }
html[data-screen="mobile"] .record-numbers span,html[data-screen="mobile"] .about-facts span{ font-size:14px; margin-top:7px; }
html[data-screen="mobile"] .reader-heading{ gap:14px; padding:20px 18px 16px; }
html[data-screen="mobile"] .reader-heading h1{ font-size:28px; }
html[data-screen="mobile"] .reader-heading .eyebrow{ margin-bottom:6px; }
html[data-screen="mobile"] .reader-description{ font-size:15px; }
html[data-screen="mobile"] .chapter-jump-inner{ padding-left:18px; padding-right:18px; }
html[data-screen="mobile"] .jump-form{ gap:8px; padding:0; }
html[data-screen="mobile"] .jump-form label{ font-size:15px; }
html[data-screen="mobile"] .jump-form button{ padding:0 18px; }
html[data-screen="mobile"] .index-notice,html[data-screen="mobile"] .read-status{ width:calc(100% - 36px); font-size:14px; }
html[data-screen="mobile"] .index-notice,html[data-screen="mobile"] .read-status:not(:empty){ padding:10px 12px; margin-bottom:14px; }
html[data-screen="mobile"] .reading-controls{ align-items:flex-start; gap:8px; padding:0 18px 14px; }
html[data-screen="mobile"] .chapter-controls{ flex-wrap:nowrap; justify-content:space-between; width:100%; gap:4px; }
html[data-screen="mobile"] .chapter-controls button{ padding:8px 4px; font-size:14px; white-space:nowrap; }
html[data-screen="mobile"] .chapter-controls span{ font-size:14px; line-height:1.5; text-align:center; }
html[data-screen="mobile"] .page-jump{ font-size:14px; gap:8px; }
html[data-screen="mobile"] .reading-content{ padding:0 12px 20px; }
html[data-screen="mobile"] .manuscript-page{ margin-bottom:24px; }
html[data-screen="mobile"] .page-caption{ gap:4px 8px; padding:0 3px 9px; font-size:14px; }
html[data-screen="mobile"] .page-caption>span:first-child{ font-size:15px; }
html[data-screen="mobile"] .page-caption .page-writer{ font-size:14px; }
html[data-screen="mobile"] .page-placeholder{ font-size:14px; }
html[data-screen="mobile"] .page-navigation{ gap:6px; padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px)); }
html[data-screen="mobile"] .page-navigation button{ padding:8px 4px; font-size:14px; white-space:nowrap; }
html[data-screen="mobile"] .page-navigation span{ font-size:14px; line-height:1.4; }
html[data-screen="mobile"] .content-view,html[data-screen="mobile"] .about-view{ padding:24px 18px 36px; }
html[data-screen="mobile"] .view-intro,html[data-screen="mobile"] .about-intro{ margin:14px 0 20px; font-size:16px; line-height:1.65; }
html[data-screen="mobile"] .participant-tools{ flex-wrap:wrap; gap:10px; margin:16px 0 12px; }
html[data-screen="mobile"] .participant-search{ flex-basis:100%; max-width:none; gap:8px; padding-left:10px; }
html[data-screen="mobile"] .participant-search input{ font-size:16px; }
html[data-screen="mobile"] .participant-search button{ padding:0 12px; }
html[data-screen="mobile"] .participant-controls{ justify-content:flex-end; width:100%; margin-left:0; }
html[data-screen="mobile"] .participant-filters{ gap:6px; }
html[data-screen="mobile"] .participant-summary{ gap:4px; margin:8px 0 12px; }
html[data-screen="mobile"] .participant-summary>p{ font-size:15px; }
html[data-screen="mobile"] .source-image-button{ padding:8px; }
html[data-screen="mobile"] .participant-list{ gap:24px; }
html[data-screen="mobile"] .participant-grid{ grid-template-columns:1fr; gap:10px; }
html[data-screen="mobile"] .participant-card{ padding:16px; }
html[data-screen="mobile"] .participant-card h3{ font-size:20px; }
html[data-screen="mobile"] .participant-footer{ margin-top:20px; padding-top:12px; }
html[data-screen="mobile"] .review-team{ margin-top:24px; }
html[data-screen="mobile"] .review-team h2{ font-size:22px; }
html[data-screen="mobile"] .about-facts{ padding:20px 0; gap:12px; }
html[data-screen="mobile"] .about-note{ margin-bottom:24px; }
html[data-screen="mobile"] .auxiliary-section{ margin:24px 0; }
html[data-screen="mobile"] .auxiliary-section h2{ font-size:22px; }
html[data-screen="mobile"] .church-information{ grid-template-columns:1fr; gap:20px; margin:20px 0 24px; }
html[data-screen="mobile"] .church-building{ max-width:395px; margin:0 auto; }
html[data-screen="mobile"] .church-information dl>div{ grid-template-columns:56px minmax(0,1fr); gap:12px; font-size:16px; }
html[data-screen="mobile"] .church-actions{ gap:10px; }
html[data-screen="mobile"] .travel-section{ grid-template-columns:1fr; gap:14px; padding:22px 0; }
html[data-screen="mobile"] .travel-section h2{ font-size:22px; }
html[data-screen="mobile"] .church-map-section{ padding-top:22px; margin-bottom:28px; }
html[data-screen="mobile"] .church-map-section h2{ font-size:22px; }
html[data-screen="mobile"] .church-map{ margin-top:16px; }
html[data-screen="mobile"] .site-footer{ gap:8px 16px; padding:18px; font-size:14px; }
html[data-screen="mobile"] .site-footer>div{ gap:16px; }
html[data-screen="mobile"] .saved-dialog{ padding:20px; }
html[data-screen="mobile"] .dialog-heading h2{ font-size:20px; }
html[data-screen="mobile"] .roster-dialog{ inset:8px; width:calc(100% - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:10px; }
html[data-screen="mobile"] .roster-dialog>.dialog-heading{ min-height:64px; padding:10px 12px; }
html[data-screen="mobile"] .roster-pages{ padding:14px 12px; }
html[data-screen="mobile"] .roster-page{ margin-bottom:20px; }
html[data-screen="mobile"] .zoom-dialog{ inset:0; width:100%; height:100%; max-height:100dvh; border-radius:0; }
html[data-screen="mobile"] .zoom-controls{ min-height:74px; height:74px; gap:8px; padding:8px; font-size:14px; }
html[data-screen="mobile"] .zoom-controls>span{ font-size:14px; line-height:1.5; }
html[data-screen="mobile"] .zoom-controls>div{ gap:0; }
html[data-screen="mobile"] .zoom-controls .icon-button{ width:40px; height:44px; font-size:20px; }
html[data-screen="mobile"] .zoom-controls #zoom-percent{ min-width:42px; }
html[data-screen="mobile"] .zoom-canvas{ height:calc(100% - 74px); padding:12px; }
html[data-screen="mobile"] .toast{ left:50%; bottom:76px; max-width:calc(100% - 28px); padding:12px 16px; font-size:14px; }
html[data-screen="mobile"] .back-to-top{ right:14px; width:48px; height:48px; padding:12px; border-radius:50%; }
html[data-screen="mobile"] .back-to-top span{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:360px){html:not([data-screen]) .site-header{ gap:6px; padding:0 10px; }
html:not([data-screen]) .brand{ flex-shrink:0; }
html:not([data-screen]) .church-logo{ width:102px; }
html:not([data-screen]) .site-menu-toggle{ padding:8px 6px; }
html:not([data-screen]) .menu-button{ min-width:60px; padding:8px 4px; }
html:not([data-screen]) .home-view,html:not([data-screen]) .content-view,html:not([data-screen]) .about-view{ padding-left:14px; padding-right:14px; }
html:not([data-screen]) .home-action{ padding:12px 10px; }
html:not([data-screen]) .home-action strong{ font-size:17px; }
html:not([data-screen]) .home-welcome h1{ font-size:26px; }
html:not([data-screen]) .record-numbers,html:not([data-screen]) .about-facts{ gap:8px; }
html:not([data-screen]) .record-numbers span,html:not([data-screen]) .about-facts span{ font-size:14px; white-space:nowrap; letter-spacing:-.5px; }
html:not([data-screen]) .reader-heading{ padding-left:14px; padding-right:14px; }
html:not([data-screen]) .chapter-jump-inner{ padding-left:14px; padding-right:14px; }
html:not([data-screen]) .jump-form{ gap:7px; }
html:not([data-screen]) .jump-form button{ padding:0 14px; }
html:not([data-screen]) .reading-controls{ padding-left:14px; padding-right:14px; }
html:not([data-screen]) .page-navigation{ flex-wrap:wrap; justify-content:space-between; gap:0 8px; }
html:not([data-screen]) .page-navigation span{ order:3; flex-basis:100%; padding:0 0 3px; }
html:not([data-screen]) .church-information dl>div{ gap:8px; }}
@media(prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  html:not([data-screen]) .sidebar,html[data-screen] .sidebar { transition:none; }
  .page-surface[aria-busy="true"] .page-placeholder::before { animation:none; }
}

html[data-screen="desktop"] body{min-width:1280px}
html[data-screen="mobile"] body{width:min(100%,430px);margin-inline:auto;position:relative;box-shadow:0 0 0 1px var(--line)}
html[data-screen="mobile"] .sidebar{left:max(0px,calc((100vw - 430px)/2))}
html[data-screen="mobile"] .drawer-backdrop{left:max(0px,calc((100vw - 430px)/2));right:max(0px,calc((100vw - 430px)/2))}