/* Only the Selflessness learning panel. No global navigation or artifact styles. */
body.stodo-open #stage{visibility:hidden;pointer-events:none}
.stodo-panel{position:fixed;inset:0;z-index:6}
.stodo-panel[hidden],.stodo-reminder[hidden],body[data-shell="panel"] .stodo-entry[hidden]{display:none!important}
.stodo-mobile-entry[hidden]{display:none!important}
.stodo-mobile-entry{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}
.stodo-mobile-entry svg{width:20px;height:20px}
.stodo-panel .stodo-layout{display:grid;grid-template-columns:30% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;padding:0;overflow:hidden;background:transparent}
.stodo-heading{grid-column:1;grid-row:1;padding:30px 30px 24px}
.stodo-heading h1{font:500 var(--lc-5, 26px)/1.4 Raleway,sans-serif;letter-spacing:3px;text-transform:uppercase;color:#6ee7b7;margin:0 0 16px}
.stodo-heading p{font:var(--lc-3, 16px)/1.6 var(--f-ui,Inter);color:var(--t2)}
.stodo-heading progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:9px;border:0;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:18px}
.stodo-heading progress::-webkit-progress-bar{background:rgba(255,255,255,.08);border-radius:99px}
.stodo-heading progress::-webkit-progress-value{background:linear-gradient(90deg,rgba(64,158,134,.65),rgba(110,231,183,.65) 65%,rgba(193,245,217,.65));border-radius:99px}
.stodo-heading progress::-moz-progress-bar{background:linear-gradient(90deg,rgba(64,158,134,.65),rgba(110,231,183,.65) 65%,rgba(193,245,217,.65));border-radius:99px}
.stodo-list{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0;margin-right:14px;padding:2px 16px 30px 30px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;scroll-behavior:auto}
.stodo-item{display:flex;align-items:center;gap:16px;flex-shrink:0;text-align:left;min-height:60px;padding:12px 16px;border:1px solid rgba(255,255,255,.08);border-radius:0;background:rgba(255,255,255,.03);color:var(--t1);font:400 var(--lc-3, 16px)/1.5 "IBM Plex Mono",monospace;letter-spacing:.35px;cursor:pointer;box-shadow:0 4px 10px rgba(7,4,14,.16),inset 0 1px 0 rgba(255,255,255,.04)}
.stodo-item:hover{background:rgba(255,255,255,.09)}
.stodo-item[aria-current=step]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);box-shadow:0 6px 16px rgba(7,4,14,.22),inset 0 1px 0 rgba(255,255,255,.12);color:var(--gold)}
.stodo-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;border:1.5px solid var(--t3);border-radius:5px;color:var(--gold);font:var(--lc-4, 20px)/1 var(--f-ui)}
.stodo-check.is-complete{border-color:var(--b-gold);background:rgba(245,216,122,.1)}
.stodo-content{grid-column:2;grid-row:1/3;min-width:0;min-height:0;height:100%;overflow:auto;display:flex;flex-direction:column;padding:36px;border-left:1px solid rgba(255,255,255,.08);border-radius:0;background:radial-gradient(ellipse 60% 60% at 100% 0%,rgba(255,255,255,.07),transparent 65%),radial-gradient(ellipse 60% 60% at 0% 100%,rgba(255,255,255,.07),transparent 65%),radial-gradient(ellipse 110% 80% at 50% 0%,rgba(139,92,246,.16),rgba(109,40,217,.08) 45%,rgba(109,40,217,.03))}
.stodo-content h2{font:400 var(--lc-6, 34px)/1.2 var(--f-serif,Georgia);color:var(--t1);margin:0 0 24px}
.stodo-content h2:focus{outline:none}
.stodo-content p,.stodo-content li{font:var(--lc-3, 16px)/1.75 var(--f-ui,Inter);color:var(--t1);max-width:720px;margin:0 0 16px}
.stodo-content ul{padding-left:20px}
.stodo-note{padding:20px 24px;margin:12px 0 24px;border-left:2px solid var(--gold);background:rgba(245,216,122,.055);font:var(--lc-2, 14px)/1.7 var(--f-ui,Inter);color:var(--t1);max-width:760px}
.stodo-actions{margin-top:auto;padding-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.stodo-actions .proto-avail-btn{font-family:var(--f-ui,Inter);width:auto}
.stodo-feedback{font:var(--lc-2, 14px)/1.6 var(--f-ui,Inter);color:var(--t2);margin-top:16px;min-height:21px}
.stodo-retry{margin-left:12px;background:transparent;border:0;color:var(--gold);text-decoration:underline;cursor:pointer}
.stodo-item:focus-visible,.stodo-actions button:focus-visible,.stodo-retry:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.stodo-reminder{position:fixed;bottom:24px;right:24px;z-index:850;max-width:350px;padding:20px 40px 20px 24px;border:1px solid var(--b2);border-radius:16px;background:#211329;color:var(--t1);font:var(--lc-2, 14px)/1.6 var(--f-ui,Inter)}
.stodo-reminder p{margin:8px 0}.stodo-reminder button{display:block;margin-top:8px;border:0;background:none;color:var(--gold);font:var(--lc-2, 14px)/1.6 var(--f-ui,Inter);cursor:pointer}
.stodo-reminder [data-reminder=close]{position:absolute;right:12px;top:8px;margin:0;font-size:var(--lc-4, 20px)}
@media(max-width:900px){
 body.stodo-open{overflow:hidden}
 body.stodo-open .phome{visibility:hidden}
 /* Usable height: viewport minus 80px navigation and 64px bottom fade
    (24px more than the previous 88px bottom reservation). */
 body .panel.stodo-panel{position:fixed;inset:0;box-sizing:border-box;height:100dvh!important;min-height:0;overflow:hidden;padding:var(--shell-mobile-top,80px) var(--shell-mobile-gutter,16px) var(--shell-mobile-bottom,calc(64px + env(safe-area-inset-bottom)))!important}
 body .panel.stodo-panel > .panel-card.stodo-layout{display:flex;flex-direction:column;height:100%;min-height:0;flex:1 1 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 .stodo-heading{flex-shrink:0;padding:24px}.stodo-heading h1{font-size:var(--lc-4, 20px)}
 .stodo-list{flex-direction:row;flex-shrink:0;overflow-x:auto;margin:0;padding:0 24px 20px;max-width:100%}
 .stodo-item{min-width:150px}.stodo-content{flex:1 0 auto;height:auto;min-height:420px;overflow:visible;padding:24px;border-left:0;border-top:1px solid var(--b2)}
 .stodo-content h2{font-size:var(--lc-5, 26px)}.stodo-note{padding:16px}
 /* Match the shell clearance: bottom bar + safe area + the standard gap. */
 .stodo-reminder{left:16px;right:16px;bottom:var(--shell-mobile-bottom,calc(77px + env(safe-area-inset-bottom,0px)));max-width:none;max-height:30vh;overflow:auto}
}
html[data-theme=light] .stodo-heading h1{color:#087f5b}
html[data-theme=light] .stodo-content{background:rgba(255,255,255,.45)}
html[data-theme=light] .stodo-item{background:rgba(255,255,255,.35)}
html[data-theme=light] .stodo-item[aria-current=step]{background:rgba(255,255,255,.75);border-color:rgba(90,65,120,.25)}
html[data-theme=light] .stodo-reminder{background:#ece7ef}
@media(prefers-reduced-motion:reduce){.stodo-panel *{animation:none!important;transition:none!important}}

/* The agenda markers share the content heading’s left edge. */
.stodo-content .stodo-agenda{padding-left:0;list-style-position:inside}

/* Keep the Sacred Sunday definition with its acknowledgment at the bottom. */
.stodo-purpose .stodo-note{margin-top:auto;margin-bottom:0}
.stodo-purpose .stodo-actions{margin-top:0}

/* The Selflessness checklist and its sibling links share one mobile scroller.
   Keep the shared navigation reservations inside it. */
@media(max-width:900px){
 body .panel.stodo-panel#todo{overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 body .panel.stodo-panel#todo > .panel-card.stodo-layout{height:auto;min-height:100%;flex:0 0 auto;overflow:hidden}
 #todo > .phome-siblings{flex:0 0 auto}
}

.coordinate-reminder a{color:var(--gold,#f5d87a);font:var(--lc-2, 14px)/1.6 var(--f-ui,Inter);display:block;margin-top:8px;text-decoration:none}
.coordinate-reminder a:focus-visible{outline:2px solid var(--gold,#f5d87a);outline-offset:3px}

/* Saving the checklist must not replay the domain entrance cascade. */
.coordinate-todo-panel .stodo-layout *{animation:none!important}
.coordinate-todo-panel .stodo-note{margin-top:auto;margin-bottom:0}
.coordinate-todo-panel .stodo-actions{margin-top:0}
/* Selflessness uses the Sacred Day layout directly. Only domain accents and
   its legacy mobile shell integration differ. */
.sacred-day-panel.selfless-journal{--sd-accent:#c4b5fd}
.sacred-day-panel.selfless-journal .sd-button:not(.sd-secondary){background:linear-gradient(135deg,rgba(196,181,253,.28),rgba(167,139,250,.38));color:#e4dcff;border-color:rgba(196,181,253,.54);box-shadow:0 12px 28px -18px rgba(167,139,250,.72)}
.sacred-day-panel.selfless-journal .sd-button:hover:not(:disabled){border-color:var(--sd-accent)}
.sacred-day-panel.selfless-journal .sd-marker.is-current{box-shadow:0 0 0 2px rgba(196,181,253,.2)}
.sacred-day-panel.selfless-journal .sacred-day-reading{max-width:720px}
.sacred-day-panel.selfless-journal .sd-note{border-top:1px solid var(--sd-rule);padding-top:16px}
.sacred-day-panel.selfless-journal .sd-reader-copy li{font:var(--fs-3)/1.75 var(--f-ui);color:var(--sd-quiet)}
html[data-theme=light] .sacred-day-panel.selfless-journal{--sd-accent:#6d28d9}
html[data-theme=light] .sacred-day-panel.selfless-journal .sd-button:not(.sd-secondary){color:#5b21b6}
@media(max-width:900px){body .panel.sacred-day-panel.selfless-journal#todo{overflow:hidden}body .panel.sacred-day-panel.selfless-journal#todo>.stodo-layout{height:100%;min-height:0;flex:1 1 0;overflow:hidden}}

/* Mobile to-do reading uses the document, including Contents and final actions.
   Minimum card height = viewport minus the shared top/bottom reservations. */
@media(max-width:900px){
 html:has(body.stodo-open),body.stodo-open{height:auto;overflow-y:auto}
 body.stodo-open .stage,body.stodo-open .phome{display:none!important}
 body.stodo-open .panel.stodo-panel:is(#todo,.stodo-panel){
  position:relative;inset:auto;height:auto!important;min-height:100dvh;
  overflow:visible!important;overscroll-behavior-y:auto;
 }
 body.stodo-open .panel.stodo-panel:is(#todo,.stodo-panel) > .panel-card.stodo-layout{
  height:auto;min-height:calc(100dvh - var(--shell-mobile-top,80px) - var(--shell-mobile-bottom,64px));
  flex:1 0 auto;overflow:visible;
 }
 body.stodo-open .panel.stodo-panel:is(#todo,.stodo-panel) :is(.stodo-content,.sd-content-scroll){
  height:auto;min-height:0;max-height:none;flex:1 0 auto;overflow:visible;
  mask-image:none;-webkit-mask-image:none;
 }
 body.stodo-open .panel.stodo-panel:is(#todo,.stodo-panel) .stodo-list{
  max-height:none;overflow:visible;flex-direction:column;
 }
 body.stodo-open .panel.stodo-panel:is(#todo,.stodo-panel) .stodo-item{min-width:0;width:100%}
}