:root{--wine:#6f2135;--wine-dark:#4b1424;--cream:#fbf7ef;--paper:#fffdf8;--ink:#27221f;--muted:#6d655f;--line:#ded4c8;font-family:ui-rounded,"SF Pro Rounded","SF Pro Display",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f4eadb,var(--cream));color:var(--ink);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}
.app-shell{width:min(760px,100%);min-height:100vh;margin:0 auto;padding:max(22px,env(safe-area-inset-top)) 18px max(30px,env(safe-area-inset-bottom))}
.app-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}
h1,h2,h3{font-family:Georgia,serif}h1{font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.05;margin:0}.eyebrow{color:var(--wine);letter-spacing:.12em;font-weight:800;font-size:.72rem;margin:0 0 6px}
.icon-btn{border:1px solid var(--line);background:var(--paper);border-radius:999px;width:44px;height:44px;font-size:1.35rem}
.day-card,.reading-item,.completion-card,.onboarding-card{background:rgba(255,253,248,.96);border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px rgba(75,20,36,.08)}
.day-card{padding:18px;margin-bottom:14px}.day-heading{color:var(--wine);font-family:Georgia,serif;font-weight:800;font-size:2rem}.scheduled-date{color:var(--muted);margin-top:4px}
.progress-row{display:grid;gap:8px;margin-top:15px}progress{width:100%;height:10px;accent-color:var(--wine)}
.reading-item{padding:18px}.reading-title{font-weight:850;font-size:1.35rem;margin-top:4px}.reading-type{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.status{font-size:.88rem;color:var(--muted);margin-top:5px}
.read-now{margin-top:18px;width:100%}.primary,.secondary{min-height:46px;border-radius:14px;padding:11px 16px;font-weight:800}
.primary{color:white;background:var(--wine);border:1px solid var(--wine)}.primary:hover{background:var(--wine-dark)}.secondary{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.full-width{width:100%;margin-top:8px}.actions{display:grid;gap:10px;margin-top:14px}
.reader-screen,.completion-screen,.onboarding-screen{position:fixed;inset:0;background:var(--paper);z-index:20}.reader-screen{display:grid;grid-template-rows:auto 1fr auto}.completion-screen,.onboarding-screen{display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.hidden{display:none!important}
.reader-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:max(16px,env(safe-area-inset-top)) 16px 14px;border-bottom:1px solid var(--line);background:#fff}
.reader-header h2{margin:2px 0 0;font-size:1.25rem}.reader-type{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.text-btn{border:0;background:transparent;color:var(--wine);font-weight:800}
.timer-badge{font-variant-numeric:tabular-nums;font-weight:800;font-size:.8rem;background:#f4ece8;border:1px solid var(--line);border-radius:999px;padding:6px 9px}
.reader-body{overflow:auto;padding:20px}.reading-placeholder{max-width:700px;margin:0 auto;min-height:70vh;border:1px solid var(--line);border-radius:18px;padding:24px;background:#fffdf9}
.source-note{margin-top:28px;padding:14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:.9rem}
.reader-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:12px 14px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}.reader-actions .primary{grid-column:1/-1}
.completion-card,.onboarding-card{width:min(560px,100%);padding:26px}.completion-card h2{font-size:2rem;margin:.2rem 0 1rem}.onboarding-card h1{margin-bottom:12px}
.onboarding-card label,.dialog-card label{display:grid;gap:8px;margin:16px 0;font-weight:750}.onboarding-card input,.onboarding-card select,.dialog-card select{min-height:46px;border:1px solid var(--line);border-radius:12px;padding:10px;background:white;width:100%}
dialog{width:min(560px,calc(100% - 28px));border:0;border-radius:22px;padding:0;box-shadow:0 25px 80px rgba(0,0,0,.3)}dialog::backdrop{background:rgba(30,20,20,.55)}
.dialog-card{padding:22px;background:var(--paper)}.dialog-card h2{margin-top:0}.checkbox-row{display:flex!important;align-items:center}.checkbox-row input{width:auto}.top-setting{padding-bottom:14px;border-bottom:1px solid var(--line)}
.dialog-actions,.stack{display:grid;gap:10px;margin-top:18px}.time-picker-row{display:grid;grid-template-columns:1fr auto 1fr 1fr;align-items:center;gap:8px}.time-picker-row select{width:100%}
@media(max-width:520px){.reader-actions{grid-template-columns:1fr}.reader-actions .primary{grid-column:auto}}

.tag-list{display:grid;gap:9px;margin:14px 0}
.tag-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.tag-row label{display:flex!important;align-items:center;gap:10px;margin:0!important;font-weight:700}
.tag-tools{display:flex;gap:6px}.tag-tools button{min-height:34px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.inline-create{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.inline-create input{min-height:46px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.library-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.active-tab{background:var(--wine)!important;color:#fff!important;border-color:var(--wine)!important}
.library-list{display:grid;gap:12px;max-height:55vh;overflow:auto}
.library-entry{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.library-entry h3{margin:0 0 5px;font-size:1.05rem}
.library-entry .meta{color:var(--muted);font-size:.85rem}
.library-entry .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.library-entry .tag-chip{background:#f4ece8;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:.78rem}

.library-search{display:grid;gap:9px;margin-bottom:14px}
.library-search input,.library-search select{min-height:46px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;width:100%}
.library-empty{border:1px dashed var(--line);border-radius:14px;padding:18px;color:var(--muted);text-align:center}

.account-actions{display:grid;gap:10px;margin-top:20px}
.account-provider{min-height:48px;border-radius:14px;padding:11px 16px;font-weight:800;background:#111;color:#fff;border:1px solid #111}
.account-note{color:var(--muted);font-size:.88rem;margin-top:18px}
.dialog-card input{min-height:46px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;width:100%}
.print-sheet{font-family:Georgia,serif;color:#111;background:#fff;padding:36px;max-width:800px;margin:auto}
.print-sheet h1{font-size:28px;margin-bottom:4px}.print-sheet h2{font-size:18px;margin:24px 0 8px}
.print-entry{page-break-inside:avoid;border-bottom:1px solid #bbb;padding:12px 0}
.print-meta{font-family:system-ui,sans-serif;font-size:12px;color:#555;margin-top:4px}
.print-tags{font-family:system-ui,sans-serif;font-size:12px;margin-top:5px}
@media print{
  body>*{display:none!important}
  #printExportRoot{display:block!important}
  #printExportRoot *{visibility:visible!important}
  @page{margin:.6in}
}

.wide-dialog{width:min(720px,100%)}
.calendar-connectors{display:grid;gap:9px;margin:16px 0}
.calendar-summary{display:grid;gap:3px;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#fff}
.calendar-summary span{color:var(--muted);font-size:.88rem}
.calendar-preview{display:grid;gap:9px;max-height:48vh;overflow:auto;margin-top:14px}
.calendar-event{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.calendar-event-title{font-weight:850}
.calendar-event-meta{color:var(--muted);font-size:.86rem;margin-top:4px}
.calendar-event-reading{font-size:.85rem;margin-top:7px}
@media(min-width:620px){
  .calendar-connectors{grid-template-columns:1fr 1fr}
  .calendar-connectors .primary{grid-column:1/-1}
}

.header-tools{display:flex;gap:8px}
.profile-summary{display:grid;gap:5px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;margin:12px 0}
.profile-summary span{color:var(--muted);font-size:.9rem}
.danger-button{color:#8b1e2d;border-color:#d7aab1}
.sync-indicator{font-size:.75rem;color:var(--muted)}

.export-note{color:var(--muted);font-size:.86rem}

.stats-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.stat-card{display:grid;gap:5px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.stat-card span{color:var(--muted);font-size:.84rem}
.stat-card strong{font-size:1.2rem}
.stats-table-wrap{overflow:auto;max-height:48vh;border:1px solid var(--line);border-radius:14px;background:#fff}
.stats-table{width:100%;border-collapse:collapse;min-width:820px}
.stats-table th,.stats-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.stats-table th{position:sticky;top:0;background:#f5eee8;color:var(--wine);font-size:.8rem;letter-spacing:.03em}
.stats-table td{font-size:.88rem}
.stats-table tr:last-child td{border-bottom:0}
.stats-note{color:var(--muted);font-size:.84rem;margin-top:12px}
@media(max-width:520px){.stats-summary{grid-template-columns:1fr}}

.small-heading{font-family:system-ui,sans-serif;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.suggested-times{display:grid;gap:8px}
.suggested-time-btn{width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 13px;font-weight:750}
.suggested-time-btn:hover{border-color:var(--wine)}
.suggestion-note{color:var(--muted);font-size:.84rem;margin-top:8px}
.makeup-badge{display:inline-block;margin-top:6px;border-radius:999px;background:#f4ece8;border:1px solid var(--line);padding:4px 8px;font-size:.76rem;color:var(--wine)}

.resume-card{margin-bottom:14px;border-color:var(--wine)}
.history-list{display:grid;gap:10px;max-height:52vh;overflow:auto}
.history-entry{border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#fff}
.history-entry h3{margin:0 0 5px;font-size:1rem}
.history-entry .meta{color:var(--muted);font-size:.84rem}
.history-entry .status-line{margin-top:7px;font-size:.88rem}
.history-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.history-actions button{min-height:36px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--paper);font-weight:700}
}

.status-card{display:grid;gap:5px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.status-card span{color:var(--muted);font-size:.84rem}
.status-card strong{font-size:1rem}
.install-steps{display:grid;gap:10px;margin:12px 0}
.install-step{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}

.header-subnav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  margin-top:6px;
  font-size:.72rem;
  line-height:1.15;
}
.header-subnav a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:650;
}
.header-subnav a:hover{color:var(--wine)}
@media(max-width:520px){
  .header-subnav{font-size:.68rem}
}

.header-subnav a.status-online{color:#1f7a3d}
.header-subnav a.status-online:hover{color:#165c2e}
.header-subnav a.status-offline{color:#b42318}
.header-subnav a.status-offline:hover{color:#8f1c14}

.header-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 auto;
}
.header-right .header-actions{
  display:flex;
  align-items:center;
  justify-content:center;
}
.header-right .header-subnav{
  width:100%;
  align-items:center;
  text-align:center;
  margin-top:6px;
}

#connectionStatusLink.status-online,
#connectionStatusLink.status-online:link,
#connectionStatusLink.status-online:visited{
  color:#18813f !important;
}
#connectionStatusLink.status-offline,
#connectionStatusLink.status-offline:link,
#connectionStatusLink.status-offline:visited{
  color:#c62828 !important;
}
#calendarLink.schedule-link,
#calendarLink.schedule-link:link,
#calendarLink.schedule-link:visited{
  color:#111 !important;
}
#calendarLink.schedule-link:hover{
  color:#111 !important;
}

.status-card{
  display:block;
}
.status-card span,
.status-card strong{
  display:inline;
}
#connectionStatusLink{
  color:#18813f !important;
  -webkit-text-fill-color:#18813f !important;
}
#connectionStatusLink.status-offline{
  color:#c62828 !important;
  -webkit-text-fill-color:#c62828 !important;
}
#calendarLink{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

.bottom-utility-link{
  display:flex;
  justify-content:flex-end;
  margin-top:5px;
  padding-right:4px;
  font-size:.72rem;
  line-height:1.1;
}
.bottom-utility-link a,
.bottom-utility-link a:link,
.bottom-utility-link a:visited{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:650;
}
.bottom-utility-link a:hover{
  color:var(--wine) !important;
  -webkit-text-fill-color:var(--wine) !important;
}

.global-jmj{
  position:fixed;
  top:10px;
  right:14px;
  z-index:10000;
  font-size:1rem;
  line-height:1;
  font-weight:700;
  font-style:italic;
  text-decoration:underline;
  text-underline-offset:2px;
  color:#173a6b;
  -webkit-text-fill-color:#173a6b;
  pointer-events:none;
}
.global-credit{
  position:fixed;
  right:12px;
  bottom:8px;
  z-index:10000;
  font-size:.68rem;
  line-height:1;
  color:#666;
  -webkit-text-fill-color:#666;
  pointer-events:none;
}
body{
  padding-top:28px;
  padding-bottom:24px;
}
@media(max-width:520px){
  .global-jmj{
    top:8px;
    right:10px;
    font-size:.95rem;
  }
  .global-credit{
    right:9px;
    bottom:6px;
    font-size:.64rem;
  }
}

:root{--brand-top-space:38px;--brand-footer-space:96px}
.global-jmj{
  position:fixed!important;top:9px!important;right:14px!important;z-index:10000!important;
  font-size:1rem!important;line-height:1!important;font-weight:700!important;font-style:italic!important;
  text-decoration:underline!important;text-underline-offset:2px!important;color:#173a6b!important;
  -webkit-text-fill-color:#173a6b!important;pointer-events:none!important
}
.global-page-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;height:var(--brand-footer-space);
  box-sizing:border-box;display:grid;grid-template-rows:64px 20px;align-items:center;
  background:var(--paper);border-top:1px solid var(--line);padding:5px 12px 4px
}
.global-emblems{
  position:static!important;transform:none!important;display:flex!important;align-items:center!important;
  justify-content:center!important;gap:14px!important;width:100%!important;pointer-events:none!important
}
.global-emblem{
  width:56px!important;height:56px!important;flex:0 0 56px!important;object-fit:contain!important;
  display:block!important;background:transparent!important
}
.global-credit{
  position:static!important;justify-self:end!important;align-self:end!important;font-size:.68rem!important;
  line-height:1.1!important;color:#666!important;-webkit-text-fill-color:#666!important;pointer-events:none!important
}
body{padding-top:var(--brand-top-space)!important;padding-bottom:calc(var(--brand-footer-space) + 12px)!important}
.reader-screen,.completion-screen,.onboarding-screen{
  top:var(--brand-top-space)!important;bottom:var(--brand-footer-space)!important;height:auto!important
}
dialog{max-height:calc(100vh - var(--brand-top-space) - var(--brand-footer-space) - 20px)}
.resume-card{display:none!important}
@media(max-width:520px){
  :root{--brand-top-space:34px;--brand-footer-space:82px}
  .global-jmj{top:8px!important;right:10px!important;font-size:.95rem!important}
  .global-page-footer{grid-template-rows:52px 18px;padding:4px 9px 3px}
  .global-emblems{gap:9px!important}
  .global-emblem{width:44px!important;height:44px!important;flex-basis:44px!important}
  .global-credit{font-size:.64rem!important}
}

/* 1.6.12: larger footer emblems */
:root{
  --brand-footer-space:116px !important;
}
.global-page-footer{
  grid-template-rows:78px 20px !important;
}
.global-emblems{
  gap:18px !important;
}
.global-emblem{
  width:70px !important;
  height:70px !important;
  flex-basis:70px !important;
}
body{
  padding-bottom:calc(var(--brand-footer-space) + 12px) !important;
}
.reader-screen,.completion-screen,.onboarding-screen{
  bottom:var(--brand-footer-space) !important;
}
dialog{
  max-height:calc(100vh - var(--brand-top-space) - var(--brand-footer-space) - 20px) !important;
}
@media(max-width:520px){
  :root{
    --brand-footer-space:96px !important;
  }
  .global-page-footer{
    grid-template-rows:64px 18px !important;
  }
  .global-emblems{
    gap:11px !important;
  }
  .global-emblem{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }
}

.header-subnav a.sync-status-link{
  color:#555 !important;
  -webkit-text-fill-color:#555 !important;
}
.header-subnav a.sync-ok{
  color:#1f7a3d !important;
  -webkit-text-fill-color:#1f7a3d !important;
}
.header-subnav a.sync-pending{
  color:#a15c00 !important;
  -webkit-text-fill-color:#a15c00 !important;
}
.header-subnav a.sync-error{
  color:#b42318 !important;
  -webkit-text-fill-color:#b42318 !important;
}

/* 1.7.1 refinements */
.global-jmj{
  font-size:1.18rem !important;
}
.global-emblems{
  pointer-events:auto !important;
}
.emblem-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:70px;
  height:70px;
  padding:0;
  margin:0;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}
.emblem-button:hover,
.emblem-button:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:2px;
}
.global-credit{
  pointer-events:auto !important;
  border:0;
  padding:0 2px;
  background:transparent;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  font-family:inherit;
}
.global-credit:hover,
.global-credit:focus-visible{
  color:var(--wine) !important;
  -webkit-text-fill-color:var(--wine) !important;
}
#designerInfoDialog a{
  color:#173a6b;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Align Favorite categories and Apologetics topics consistently. */
.tag-list{
  display:grid;
  gap:10px;
}
.tag-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center !important;
  min-height:62px;
  gap:12px;
}
.tag-row label{
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center !important;
  column-gap:12px !important;
  width:100%;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  text-align:left;
}
.tag-row label input{
  width:20px;
  height:20px;
  margin:0;
  justify-self:center;
  align-self:center;
}
.tag-row label span{
  display:block;
  align-self:center;
  line-height:1.25;
  text-align:left;
}
.tag-tools{
  align-self:center;
}
@media(max-width:520px){
  .global-jmj{
    font-size:1.08rem !important;
  }
  .emblem-button{
    width:54px;
    height:54px;
  }
  .tag-row{
    grid-template-columns:minmax(0,1fr);
  }
  .tag-tools{
    justify-self:end;
  }
}

.global-jmj{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  font-family:inherit !important;
}
.global-jmj:hover,
.global-jmj:focus-visible{
  color:#0f2c55 !important;
  -webkit-text-fill-color:#0f2c55 !important;
  outline:2px solid rgba(23,58,107,.35);
  outline-offset:3px;
  border-radius:4px;
}

/* 1.7.4: remove Safari's blue focus/selection treatment from attribution link */
#designerInfoDialog a,
#designerInfoDialog a:link,
#designerInfoDialog a:visited,
#designerInfoDialog a:active{
  color:#173a6b !important;
  -webkit-text-fill-color:#173a6b !important;
  background:transparent !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}
#designerInfoDialog a:focus,
#designerInfoDialog a:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  text-decoration-thickness:2px;
}

/* 1.7.5: align status links directly beneath the two header icons */
.header-right{
  display:grid !important;
  grid-template-rows:auto auto !important;
  justify-items:center !important;
  align-items:start !important;
  width:max-content !important;
}
.header-right .header-actions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
}
.header-right .header-subnav{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  margin-top:6px !important;
  text-align:center !important;
  gap:3px !important;
}
.header-right .header-subnav a{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  white-space:nowrap !important;
  text-align:center !important;
  line-height:1.1 !important;
  margin:0 !important;
  padding:0 !important;
}
#syncStatusLink{
  white-space:nowrap !important;
}

/* 1.7.6 — unified page scrolling and mobile clipping fixes */
html, body{
  height:auto !important;
  overflow-x:hidden !important;
}
body{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.global-topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 8px;
  width:100%;
  background:linear-gradient(180deg,#efe5d5 0%, #f4eadb 100%);
}
.global-jmj{
  position:static !important;
  top:auto !important;
  right:auto !important;
  margin:0 !important;
  display:inline-block !important;
}

.app-shell{
  min-height:auto !important;
  padding-top:16px !important;
  padding-bottom:20px !important;
}

.reader-screen,
.completion-screen,
.onboarding-screen{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  height:auto !important;
  min-height:auto !important;
  z-index:auto !important;
  background:transparent !important;
  overflow:visible !important;
  padding:16px 16px 20px !important;
  display:block !important;
}

.completion-screen .completion-card,
.onboarding-screen .onboarding-card,
.onboarding-screen .account-card{
  width:min(760px,100%) !important;
  margin:0 auto !important;
}

.reader-screen{
  width:min(760px, calc(100% - 32px)) !important;
  margin:16px auto 20px !important;
  padding:0 !important;
}

.reader-header,
.reader-actions{
  max-width:760px;
  margin:0 auto 12px;
  background:rgba(255,253,248,.96) !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
}

.reader-header{
  padding:14px 16px !important;
  border-bottom:1px solid var(--line) !important;
}

.reader-body{
  overflow:visible !important;
  padding:0 !important;
  margin:0 auto 12px !important;
  max-width:760px !important;
}

.reading-placeholder{
  min-height:auto !important;
}

.reader-actions{
  border-top:none !important;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
}

.global-page-footer{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:auto !important;
  width:min(760px, calc(100% - 24px)) !important;
  height:auto !important;
  margin:20px auto 0 !important;
  padding:14px 12px calc(14px + env(safe-area-inset-bottom)) !important;
  background:transparent !important;
  border-top:0 !important;
  grid-template-rows:auto auto !important;
}

.global-emblems{
  margin-bottom:8px !important;
}

.global-credit{
  position:static !important;
  display:inline-block !important;
  justify-self:end !important;
  align-self:end !important;
  line-height:1.2 !important;
  padding-bottom:2px !important;
}

dialog{
  max-height:min(80dvh, calc(100dvh - 40px)) !important;
}

@media(max-width:520px){
  .global-topbar{
    padding:calc(env(safe-area-inset-top) + 8px) 14px 6px;
  }
  .app-shell,
  .reader-screen,
  .completion-screen,
  .onboarding-screen{
    width:100% !important;
  }
  .app-shell{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .completion-screen,
  .onboarding-screen{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .reader-screen{
    width:calc(100% - 24px) !important;
    margin:12px auto 18px !important;
  }
  .global-page-footer{
    width:calc(100% - 24px) !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* 1.7.7 — restore one-screen-at-a-time navigation */
.reader-screen.hidden,
.completion-screen.hidden,
.onboarding-screen.hidden,
.app-shell.hidden{
  display:none !important;
}

.reader-screen:not(.hidden),
.completion-screen:not(.hidden),
.onboarding-screen:not(.hidden),
.app-shell:not(.hidden){
  display:block !important;
}

/* Reader keeps a vertical layout, but remains one page with the document scrollbar. */
.reader-screen:not(.hidden){
  width:min(760px, calc(100% - 32px)) !important;
  margin:16px auto 20px !important;
}

/* Main app remains its normal shell. */
.app-shell:not(.hidden){
  width:min(760px,100%) !important;
  margin:0 auto !important;
}

/* Completion and onboarding remain centered page sections without nested scrollbars. */
.completion-screen:not(.hidden),
.onboarding-screen:not(.hidden){
  width:100% !important;
}

/* Prevent hidden screens from reserving any space. */
.hidden{
  display:none !important;
}

/* 1.7.8 — true page transitions */
#accountScreen.hidden,
#onboardingScreen.hidden,
#mainScreen.hidden,
#readerScreen.hidden,
#completionScreen.hidden,
#cycleCompleteScreen.hidden{
  display:none !important;
}

#accountScreen:not(.hidden),
#onboardingScreen:not(.hidden),
#mainScreen:not(.hidden),
#readerScreen:not(.hidden),
#completionScreen:not(.hidden),
#cycleCompleteScreen:not(.hidden){
  visibility:visible !important;
}

#accountScreen,
#onboardingScreen,
#mainScreen,
#readerScreen,
#completionScreen,
#cycleCompleteScreen{
  margin-left:auto;
  margin-right:auto;
}

/* 1.7.10 — remove white bands at top and bottom on iPhone */
html{
  min-height:100%;
  background:#f4eadb !important;
  overscroll-behavior-y:none;
}
body{
  min-height:100dvh !important;
  background:
    linear-gradient(180deg,#f4eadb 0%,#fbf7ef 55%,#fbf7ef 100%) !important;
  background-attachment:fixed !important;
  overscroll-behavior-y:none;
}

.global-topbar{
  background:transparent !important;
}

.global-page-footer{
  background:transparent !important;
}

/* Ensure standalone/PWA safe areas use the same page background rather than white. */
@supports (padding: max(0px)){
  body::before,
  body::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    z-index:-1;
    background:#f4eadb;
    pointer-events:none;
  }
  body::before{
    top:0;
    height:max(env(safe-area-inset-top), 1px);
  }
  body::after{
    bottom:0;
    height:max(env(safe-area-inset-bottom), 1px);
    background:#fbf7ef;
  }
}

/* Prevent iOS rubber-band overscroll from revealing the browser's white canvas. */
@media(max-width:520px){
  html,body{
    width:100%;
    overflow-x:hidden;
  }
}

/* 1.8.0 — official-source reading gateway */
.official-source-panel{
  margin-top:22px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.official-source-name{
  color:var(--wine);
  font-family:Georgia,serif;
  font-size:1.08rem;
  font-weight:800;
  line-height:1.25;
}
.official-source-panel p{
  line-height:1.55;
}
.official-source-links{
  display:grid;
  gap:10px;
  margin:16px 0 10px;
}
.official-source-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  text-align:center;
  text-decoration:none;
}
.official-source-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:.86rem;
}
@media(min-width:620px){
  .official-source-links{
    grid-template-columns:1fr 1fr;
  }
}

/* 1.8.2 — improved CCC navigation */
.ccc-locator{
  margin:12px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f8f2ec;
  display:grid;
  gap:6px;
  font-size:.9rem;
}
.ccc-locator p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.84rem;
}
.official-source-links{
  grid-template-columns:1fr !important;
}

/* 1.8.6 — compact day header */
.compact-day-card{
  padding:18px 22px !important;
}
.day-card-main{
  display:grid;
  grid-template-columns:minmax(220px, auto) minmax(280px, 1fr);
  gap:24px;
  align-items:end;
}
.day-meta{
  min-width:0;
}
.compact-day-card .day-heading{
  margin:0;
  line-height:1;
  font-size:2.2rem;
}
.compact-day-card .scheduled-date{
  margin-top:8px;
  font-size:.95rem;
}
.progress-panel{
  display:grid;
  gap:8px;
  align-self:end;
}
.progress-topline{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  min-height:22px;
}
.compact-day-card #progressText{
  font-size:1rem;
  font-weight:700;
  white-space:nowrap;
}
.compact-day-card .progress-row{
  margin-top:0 !important;
}
.compact-day-card progress,
.compact-day-card #progressBar{
  width:100%;
  height:10px;
  display:block;
  margin:0;
}

@media (max-width: 720px){
  .day-card-main{
    grid-template-columns:1fr;
    gap:12px;
    align-items:start;
  }
  .progress-panel{
    align-self:stretch;
  }
  .progress-topline{
    justify-content:flex-start;
  }
}

/* 1.8.7 — concise source text and JMJ clipping fix */
.simplified-source-panel{
  margin-top:14px !important;
  padding:16px 18px !important;
}
.simplified-source-text{
  margin:0 !important;
  line-height:1.5;
}
.inline-source-link{
  color:#173a6b;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}
.inline-source-link:hover,
.inline-source-link:focus-visible{
  color:var(--wine);
}
.global-jmj{
  overflow:visible !important;
  min-width:max-content !important;
  padding-left:2px !important;
  padding-right:7px !important;
  line-height:1.2 !important;
}
.global-topbar{
  overflow:visible !important;
  padding-right:22px !important;
}

/* 1.8.8 — separate acronym explanations from the reading link */
.inline-acronym-link{
  border:0;
  background:transparent;
  color:#173a6b;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
  padding:0;
  margin:0;
  min-height:0;
  cursor:pointer;
}
.inline-acronym-link:hover,
.inline-acronym-link:focus-visible{
  color:var(--wine);
}
.official-reading-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  margin-top:14px;
  text-decoration:none;
  text-align:center;
}

/* 1.8.9 — remove duplicated reading title inside the card */
.reading-placeholder .eyebrow{
  margin-bottom:10px;
}
.simplified-source-panel{
  margin-top:10px !important;
}


/* 1.8.10 — tighten onboarding/settings form layout */
.onboarding-card,
.dialog-card{
  --field-max: 22rem;
  --field-max-wide: 28rem;
}

.onboarding-card label,
.dialog-card label{
  align-items:start;
}

.onboarding-card input[type="date"],
.dialog-card input[type="date"]{
  max-width:var(--field-max-wide);
}

.onboarding-card > label > select,
.dialog-card > label > select{
  max-width:var(--field-max-wide);
}

.time-picker-row{
  grid-template-columns:6.25rem auto 6.25rem 6.75rem;
  justify-content:start;
  width:max-content;
  max-width:100%;
  gap:10px;
}

.time-picker-row select{
  width:100%;
  min-width:0;
}

.time-picker-row span{
  font-weight:800;
  font-size:1.2rem;
  line-height:1;
  align-self:center;
  padding:0 2px;
}

.onboarding-card .top-setting,
.dialog-card .top-setting{
  max-width:none;
  margin-top:20px;
  margin-bottom:20px;
}

.onboarding-card #weekStartInput,
.onboarding-card #onboardingDuration,
.dialog-card #settingsWeekStart,
.dialog-card #makeupDurationInput,
.dialog-card #calendarDurationInput,
.dialog-card #calendarAlertInput{
  max-width:var(--field-max-wide);
}

@media (min-width: 900px){
  .onboarding-card,
  .dialog-card{
    --field-max-wide: 26rem;
  }
}

@media (max-width: 640px){
  .time-picker-row{
    grid-template-columns:1fr auto 1fr 1fr;
    width:100%;
  }

  .onboarding-card input[type="date"],
  .dialog-card input[type="date"],
  .onboarding-card > label > select,
  .dialog-card > label > select{
    max-width:none;
  }
}


/* 1.8.11 — place reader progress bar in the header blank space */
.reader-header{
  grid-template-columns:auto minmax(0,1fr) auto;
}
.reader-header-main{
  min-width:0;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:6px;
  align-items:center;
}
.reader-header-main h2{
  margin:0;
  line-height:1.05;
}
.reader-header-progress-wrap{
  width:100%;
  display:flex;
  align-items:center;
}
#readerProgressBar{
  width:100%;
  height:8px;
  display:block;
  margin:0;
  accent-color:var(--wine);
}
.reader-header-progress-wrap progress::-webkit-progress-bar{
  background:#efe7de;
  border-radius:999px;
}
.reader-header-progress-wrap progress::-webkit-progress-value{
  background:var(--wine);
  border-radius:999px;
}
.reader-header-progress-wrap progress::-moz-progress-bar{
  background:var(--wine);
  border-radius:999px;
}
@media (max-width: 520px){
  .reader-header-main{
    gap:4px;
  }
  #readerProgressBar{
    height:7px;
  }
}


/* 1.8.12 — live reader progress count and bar */
.reader-header-progress-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  width:100%;
}
.reader-progress-text{
  font-size:.78rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  white-space:nowrap;
  line-height:1;
}
.reader-header-progress-wrap{
  min-width:0;
}
@media (max-width:520px){
  .reader-header-progress-row{
    gap:7px;
  }
  .reader-progress-text{
    font-size:.72rem;
  }
}


/* 1.8.13 — remove unintended grey rectangle beneath reader content */
.reader-screen,
.reader-body,
.reading-placeholder{
  background:transparent !important;
}

.reader-body{
  min-height:0 !important;
  height:auto !important;
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.reading-placeholder{
  min-height:0 !important;
  height:auto !important;
  margin-bottom:0 !important;
  padding-bottom:24px !important;
  background:rgba(255,253,248,.96) !important;
}

.reader-actions{
  margin-top:12px !important;
}

/* Prevent any empty legacy filler region from being painted. */
.reader-body:empty,
.readerCopy:empty{
  display:none !important;
}


/* 1.8.14 — settings copy, grouping, and help links */
.checkbox-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.checkbox-row input[type="checkbox"]{
  margin:0 !important;
  flex:0 0 auto;
}
.checkbox-row span{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.25rem;
}
.top-setting{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.settings-group{
  display:grid;
  gap:18px;
  margin-top:4px;
  padding:18px 0 0;
  border-top:none !important;
}

.onboarding-card label,
.dialog-card label{
  font-weight:700;
}

.inline-help-link{
  border:0;
  background:transparent;
  color:#173a6b;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
  padding:0;
  cursor:pointer;
}
.inline-help-link:hover,
.inline-help-link:focus-visible{
  color:var(--wine);
}

.onboarding-card > p{
  margin-bottom:16px;
}

/* prevent any visual divider gap around grouped settings */
.settings-group + .dialog-actions{
  margin-top:22px;
}

@media (max-width:640px){
  .checkbox-row{
    align-items:flex-start !important;
  }
  .checkbox-row input[type="checkbox"]{
    margin-top:4px !important;
  }
}


/* 1.8.15 — CCC/source polish and schedule actions */
.reference-accent{
  color:#0b66c3 !important;
  font-weight:900;
}

.reading-title .reference-accent,
#readerTitle .reference-accent,
#cccAssignedRange.reference-accent{
  color:#0b66c3 !important;
}

#readerTitle .reference-accent{
  text-shadow:0 0 0 rgba(0,0,0,0);
}

.ccc-locator{
  margin-top:12px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  gap:8px;
  font-size:1rem;
}

.ccc-locator div{
  padding:0;
}

.simplified-source-panel .official-reading-button{
  margin-top:14px;
}

#scheduledDialog .stack,
#doneTodayDialog .stack{
  margin-top:18px;
}


/* 1.8.16 — stable Sync Status link */
.header-subnav a.sync-status-link,
.header-subnav a.sync-status-link:link,
.header-subnav a.sync-status-link:visited{
  color:#173a6b !important;
  -webkit-text-fill-color:#173a6b !important;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}


/* 1.8.17 — simplify CCC detail block and combined makeup scheduling link */
#cccLocator{
  gap:0;
}
#cccLocator .reference-accent{
  color:#2f67c7 !important;
}


/* 1.8.18 — remove legacy CCC locator block */
#cccLocator{
  display:none !important;
}


/* 1.8.19 — top-right/status cleanup */
.header-subnav{
  gap:0 !important;
}

#offlineStatusDialog .small-heading{
  margin-top:18px;
}

#offlineStatusDialog .small-heading:first-of-type{
  margin-top:4px;
}


/* 1.8.20 — stabilize iPhone dialogs and eagerly render all footer emblems */
html.dialog-open,
html.dialog-open body{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

dialog{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
  width:min(560px, calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  max-height:min(82dvh, calc(100dvh - 32px)) !important;
  overflow:hidden !important;
  overscroll-behavior:contain !important;
}

dialog[open]{
  display:block !important;
}

dialog .dialog-card{
  width:100% !important;
  max-width:100% !important;
  max-height:min(82dvh, calc(100dvh - 32px)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(22px, env(safe-area-inset-bottom)) !important;
}

dialog .settings-group,
dialog .checkbox-row,
dialog .checkbox-row span,
dialog label{
  min-width:0 !important;
  max-width:100% !important;
}

dialog .checkbox-row{
  width:100% !important;
  align-items:flex-start !important;
}

dialog .checkbox-row span{
  flex:1 1 auto !important;
  width:auto !important;
  display:block !important;
  line-height:1.35 !important;
  overflow-wrap:anywhere;
}

dialog .inline-help-link{
  display:inline !important;
  white-space:normal !important;
}

dialog .time-picker-row{
  width:100% !important;
  max-width:100% !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr) !important;
}

dialog select,
dialog input,
dialog button{
  max-width:100%;
}

.global-emblems,
.emblem-button,
.global-emblem{
  contain:layout paint;
}

.global-emblem{
  opacity:1 !important;
  visibility:visible !important;
}

@media(max-width:520px){
  dialog{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 28px) !important;
  }

  dialog .dialog-card{
    max-height:calc(100dvh - 28px) !important;
    padding:20px 16px max(20px, env(safe-area-inset-bottom)) !important;
  }

  dialog .settings-group{
    gap:16px !important;
  }

  dialog .checkbox-row input[type="checkbox"]{
    margin-top:2px !important;
  }
}


/* 1.8.21 — fix iPhone settings row overflow and vertical clipped letters */
.makeup-toggle-row{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.makeup-toggle-row input[type="checkbox"]{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
}

.makeup-toggle-copy{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  line-height:1.4 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  white-space:normal !important;
  font-weight:700;
}

.makeup-toggle-copy .inline-help-link{
  display:inline !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  vertical-align:baseline !important;
}

dialog .makeup-toggle-row,
dialog .makeup-toggle-copy,
dialog .makeup-toggle-copy .inline-help-link{
  min-width:0 !important;
  max-width:100% !important;
}

dialog .settings-group{
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}

dialog .dialog-card{
  box-sizing:border-box !important;
}

.global-emblems{
  min-height:70px !important;
}

.global-emblem{
  display:block !important;
  width:70px !important;
  height:70px !important;
  object-fit:contain !important;
}

@media(max-width:520px){
  .makeup-toggle-row{
    grid-template-columns:22px minmax(0,1fr) !important;
    gap:10px !important;
  }

  .makeup-toggle-row input[type="checkbox"]{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    max-width:19px !important;
  }

  .global-emblems{
    min-height:52px !important;
  }

  .global-emblem{
    width:52px !important;
    height:52px !important;
  }
}


/* 1.8.25 — prevent the fixed footer from blocking account buttons on iPhone */
.global-page-footer{
  pointer-events:none !important;
}

.global-page-footer .emblem-button,
.global-page-footer .global-credit{
  pointer-events:auto !important;
}

.account-card{
  position:relative;
  z-index:1;
}

.account-actions,
.account-actions button{
  position:relative;
  z-index:2;
  pointer-events:auto !important;
  touch-action:manipulation;
}

@media(max-width:520px){
  #accountScreen{
    padding-bottom:calc(var(--brand-footer-space) + 28px) !important;
  }

  .account-card{
    margin-bottom:18px !important;
  }
}


/* 1.8.26 — actual iPhone tap-blocking fix
   The full-width emblem row was still accepting pointer events and covering
   the Email/Passkey buttons even though the footer itself was disabled. */
.global-page-footer,
.global-emblems{
  pointer-events:none !important;
}

.global-page-footer .emblem-button,
.global-page-footer .global-credit{
  pointer-events:auto !important;
}

#accountScreen,
#accountScreen .account-card,
#accountScreen .account-actions,
#accountScreen .account-actions button{
  pointer-events:auto !important;
}


/* 1.8.28 — only expose authentication methods that are actually configured */
.provider-disabled,
.provider-disabled:disabled{
  opacity:.5 !important;
  cursor:not-allowed !important;
  filter:grayscale(1);
}

.account-setup-note{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.4;
  text-align:left;
}

.email-account-message{
  margin:0 0 12px;
  padding:11px 12px;
  border-radius:10px;
  line-height:1.4;
}

.email-account-error{
  background:#fdecec;
  border:1px solid #d99;
  color:#7b1f2e;
}

.email-account-success{
  background:#edf8ef;
  border:1px solid #9ac5a0;
  color:#205d2a;
}


/* 1.8.29 — direct, topmost email authentication dialog */
#emailAccountBtn{
  position:relative !important;
  z-index:50000 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}

#emailAccountDialog{
  z-index:60000 !important;
  pointer-events:auto !important;
}

#emailAccountDialog::backdrop{
  z-index:59999 !important;
}

#emailAccountDialog[open]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

#emailAccountDialog .dialog-card,
#emailAccountDialog button,
#emailAccountDialog input{
  pointer-events:auto !important;
}