/* My Rule of Life — visual polish + mobile usability */
:root{
  --rol-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.035);
  --rol-shadow-md:0 10px 28px rgba(15,23,42,.09);
  --rol-radius:16px;
  --rol-touch:44px;
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{min-height:100dvh;overflow-x:hidden;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{width:100%}
img,svg,video,canvas{max-width:100%;height:auto}
p,li,dd{line-height:1.6}
h1,h2,h3,h4{line-height:1.18;text-wrap:balance}
h1,h2,h3,h4,p{overflow-wrap:break-word}
a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button,.btn,input,select,textarea{font-size:16px}
button,.btn,.top-actions a,.actions a,.actions button,.rol-toolkit-btn{min-height:var(--rol-touch);touch-action:manipulation}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),select{min-height:var(--rol-touch)}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input,select,textarea{max-width:100%}
input[type="checkbox"],input[type="radio"]{accent-color:#334155}
header{box-shadow:0 1px 0 rgba(15,23,42,.035)}
header .bar{min-height:44px}
.brand{min-width:0}.brand b{letter-spacing:-.01em}.brand small{line-height:1.25}
.hero{box-shadow:0 10px 30px rgba(15,23,42,.10)}
.hero h1,.hero h2{letter-spacing:-.025em}
.card,.panel,.worksheet,.module,.profile,.entry,.result,.callout,.box{box-shadow:var(--rol-shadow-sm)}
.card,.panel,.worksheet,.module,.profile,.entry,.action-card{border-color:#d9dee6}
.action-card{transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
@media(hover:hover){.action-card:hover{transform:translateY(-1px);box-shadow:var(--rol-shadow-md);border-color:#c7ced8}.btn:hover,button:hover{filter:brightness(.985)}}
button:active,.btn:active,.action-card:active{transform:translateY(1px)}
label{line-height:1.35}
.note,.muted,small{line-height:1.45}
details{scroll-margin-top:120px}
details>summary{min-height:44px;cursor:pointer;display:flex;align-items:center;gap:8px;padding-block:7px;line-height:1.35;touch-action:manipulation}
details>summary::marker{color:#64748b}
details[open]>summary{margin-bottom:6px}
.tabs{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:3px}
.tabs::-webkit-scrollbar{display:none}.tabs button,.tabs .tab{flex:0 0 auto;min-height:44px;white-space:nowrap;touch-action:manipulation}
table{width:100%;max-width:100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
pre,code{max-width:100%;overflow-wrap:anywhere}pre{overflow:auto}
.section{scroll-margin-top:120px}
.section-head{align-items:flex-start}
.section-head>div:first-child{min-width:0;flex:1}
.actions{align-items:center}
.rol-header-search input{min-height:44px!important;padding:10px 12px!important;border-radius:12px!important;box-shadow:inset 0 1px 1px rgba(15,23,42,.03)}
.rol-header-search-results{overscroll-behavior:contain;box-shadow:0 18px 55px rgba(15,23,42,.20)!important}
.rol-header-search-results .search-result{min-height:52px;display:flex!important;flex-direction:column;justify-content:center}
#rolDock{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12)}
#rolDock a{min-height:42px;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.rol-due-overlay{overscroll-behavior:contain}.rol-due-sheet{overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom))}.rol-due-head{position:sticky;top:-16px;z-index:2;background:#fff;padding-top:16px}.rol-due-close{min-width:44px;min-height:44px;touch-action:manipulation}.rol-due-actions a,.rol-due-actions button{min-height:42px;display:inline-flex;align-items:center;justify-content:center}.rol-update-banner{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.home-next,.today-row{box-shadow:var(--rol-shadow-sm)}
.progress{min-height:9px}
@media(max-width:760px){
  html{scroll-padding-top:104px}
  header{padding:calc(env(safe-area-inset-top) + 8px) 10px 8px!important}
  header .bar{gap:7px!important;align-items:center!important}
  .brand{flex:1 1 145px}.brand b{font-size:16.5px!important}.brand small{font-size:10.5px!important;max-width:210px}
  header .top-actions{width:auto!important;margin-left:auto!important;display:flex!important;flex-wrap:nowrap!important;gap:5px!important}
  header .top-actions a{flex:0 0 auto!important;padding:7px 9px!important;font-size:12px!important;min-height:38px!important;display:inline-flex;align-items:center;justify-content:center}
  header .bar>a:first-child,header .bar>.back:first-child{min-height:40px!important;padding:7px 8px!important;font-size:13px!important}
  .rol-local-badge{display:none!important}
  .rol-header-search{order:30!important;flex:1 0 100%!important;max-width:none!important;margin:1px 0 0!important}
  .rol-header-search input{min-height:42px!important;font-size:16px!important}
  .rol-header-search-results{max-height:min(58dvh,480px)!important;border-radius:14px!important}
  main{padding:16px 14px calc(94px + env(safe-area-inset-bottom))!important}
  .hero{border-radius:18px!important;padding:18px!important;margin-bottom:14px!important}
  .hero h1,.hero h2{font-size:clamp(24px,7vw,28px)!important}
  .hero .tagline,.tagline{font-size:15px!important;line-height:1.4}
  .hero p{font-size:14.5px}
  .section{margin:20px 0!important;scroll-margin-top:104px}
  .section h2{font-size:21px}
  .card,.panel,.worksheet,.module,.profile,.entry,.action-card{border-radius:15px!important}
  .card,.panel,.worksheet,.profile,.entry{padding:14px!important}
  .action-card{padding:14px!important;min-height:76px;display:flex;flex-direction:column;justify-content:center}
  .grid,.grid3,.cols,.formgrid,.rule-grid{grid-template-columns:1fr!important}
  .full{grid-column:auto!important}
  .section-head{align-items:flex-start!important;gap:9px!important}
  .section-head>a,.section-head>button{min-height:40px;display:inline-flex;align-items:center}
  .actions{gap:7px!important}
  .actions .btn,.actions button,.actions a{min-height:44px}
  label{margin-top:10px}
  input,select,textarea{border-radius:11px!important}
  textarea{min-height:120px}
  .tabs{margin-inline:-2px;padding:2px 2px 5px;scroll-snap-type:x proximity}
  .tabs button,.tabs .tab{scroll-snap-align:start;padding-inline:13px!important}
  .today-row{grid-template-columns:68px 1fr!important;gap:9px!important;padding:12px!important}
  .today-row .status{grid-column:2!important;justify-self:start}
  .home-next{align-items:flex-start!important;padding:13px!important}
  .commitment{grid-template-columns:1fr!important}.commitment .actions{justify-content:flex-start}
  .module-head{gap:10px!important}.module .icon{font-size:24px!important}.packs{margin-left:0!important}
  #rolDock{top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:calc(100% - 16px)!important;padding:6px!important;gap:4px!important;border-radius:18px!important;box-shadow:0 10px 34px rgba(0,0,0,.30)!important}
  #rolDock a{padding:8px 5px!important;font-size:11.5px!important;line-height:1.15!important}
  body{--rol-mobile-dock-space:0px!important}
  .rol-update-banner{bottom:calc(76px + env(safe-area-inset-bottom))!important;width:calc(100% - 20px)!important;border-radius:16px!important}
  .rol-due-overlay{padding:0!important;align-items:flex-end!important}
  .rol-due-sheet{width:100%!important;max-height:88dvh!important;border-radius:22px 22px 0 0!important;padding:16px 14px calc(18px + env(safe-area-inset-bottom))!important}
  .rol-due-head{top:-16px;margin-inline:-1px;padding-top:16px}
  .rol-due-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;width:100%}
  .rol-due-actions a,.rol-due-actions button{width:100%;padding:8px 6px!important;text-align:center}
  .rol-page-timer{padding:11px!important}.rol-page-timer-actions{width:100%}.rol-page-timer-actions button{flex:1}
  table{font-size:14px}
}
@media(max-width:430px){
  .brand small{max-width:175px}
  #rolDock a{font-size:11px!important;padding-inline:3px!important}
  .rol-due-actions{grid-template-columns:1fr 1fr!important}.rol-due-actions a:first-child{grid-column:1/-1}
  .policy-links{gap:7px!important}.policy-links a{padding:6px}
}
@media(max-width:350px){
  header .top-actions a{padding-inline:7px!important;font-size:11.5px!important}
  #rolDock a{font-size:10.25px!important;letter-spacing:-.01em}
  main{padding-inline:11px!important}
}
@media(pointer:coarse){button,.btn,a.action-card,summary,#rolDock a{touch-action:manipulation}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{#rolDock,.rol-update-banner,.rol-header-search{display:none!important}.hero{box-shadow:none!important}}
/* Typography scale + readability pass */
:root{
  --rol-font-body:16px;
  --rol-font-body-mobile:16.5px;
  --rol-font-small:14px;
  --rol-font-small-mobile:14.5px;
  --rol-font-meta:12.5px;
  --rol-font-control:16px;
}
body{font-size:var(--rol-font-body)}
p,li,dd{font-size:inherit}
label,.field-label{font-size:15px!important}
.note,.muted,.help,.helptext,.helper,.hint,.small,.meta,.favmeta,.goal-meta,.source-note,.instruction,.tracker-status,.tracker-warning,.lit-day-meta,.liturgical-loading{font-size:var(--rol-font-small)!important}
.tag,.chip,.pill,.badge,.eyebrow,.medbadges span,.tracker-day,.weekday-box span,.duration-part span,.lit-day-label{font-size:var(--rol-font-meta)!important}
.mini{font-size:14px!important}
.card p,.panel p,.worksheet p,.entry p{line-height:1.62}

@media(max-width:760px){
  body{font-size:var(--rol-font-body-mobile)}
  p,li,dd{line-height:1.64}
  .hero p{font-size:15.5px!important;line-height:1.55!important}
  .hero .tagline,.tagline{font-size:15.5px!important}
  label,.field-label{font-size:15.5px!important}
  .note,.muted,.help,.helptext,.helper,.hint,.small,.meta,.favmeta,.goal-meta,.source-note,.instruction,.tracker-status,.tracker-warning,.lit-day-meta,.liturgical-loading{font-size:var(--rol-font-small-mobile)!important;line-height:1.5!important}
  .tag,.chip,.pill,.badge,.eyebrow,.medbadges span,.tracker-day,.weekday-box span,.duration-part span,.lit-day-label{font-size:13px!important}
  .mini{font-size:14.5px!important}
  .brand small{font-size:11.5px!important;line-height:1.25!important}
  header .top-actions a{font-size:13px!important}
  header .bar>a:first-child,header .bar>.back:first-child{font-size:13.5px!important}
  #rolDock a{font-size:12.25px!important;line-height:1.18!important}
  table{font-size:14.5px!important}

  /* Breath-body mantra: make the static practice read like a full-screen phone practice. */
  #primary{scroll-margin-top:96px!important}
  .primary-practice{min-height:calc(100dvh - 180px);padding:18px 16px!important;border-radius:18px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  .primary-practice h2{font-size:clamp(23px,6.4vw,28px)!important;line-height:1.08!important;margin:0 0 6px!important}
  .primary-practice .why{display:none!important}
  .breath-key{font-size:14px!important;line-height:1.3!important;margin:4px 0 10px!important}
  .primary-practice .manuscript{font-size:clamp(15.5px,4.2vw,18px)!important;line-height:1.24!important;letter-spacing:0!important;margin:6px 0 0!important;padding:12px 0 10px!important}
  .primary-practice .manuscript .pair{margin:0 0 8px!important}
  .primary-practice .manuscript .reply,.primary-practice .manuscript .cont{padding-left:1.25em!important}
}
@media(max-width:430px){
  #rolDock a{font-size:11.75px!important}
  .primary-practice{min-height:calc(100dvh - 168px)}
}
@media(max-width:350px){
  #rolDock a{font-size:10.75px!important}
  .primary-practice .manuscript{font-size:15.25px!important;line-height:1.22!important}
}