/* ============================================================
   Steve Shiva portal: theme + design layer (loaded on every page, after styles.css)
   Themes: html[data-theme=dark|light], accent: data-accent=gold|sky|rose|sage, plus data-text, data-photos, data-motion (see /theme.js).
   Legacy pages are variable-driven (--white, --ink, --line ...), so the themes remap those variables here.
   ============================================================ */
:root{
  --d-deep:#001c26; --d-teal:#06394a; --d-teal-2:#0a4a5e; --d-paper:#ebeee7;
  /* accent pairs for DARK surfaces (always used on the sidebar, photo heroes, Pocket Shiva) */
  --d-acc-dk:#c49c48; --d-acc-dk-soft:#d4b36a;
  /* DARK theme (default) */
  --d-bg:#001c26; --d-card:rgba(6,57,74,.55); --d-card-2:rgba(0,28,38,.55); --d-tile-on:#0a4a5e;
  --d-text:#ebeee7; --d-soft:#a9b8bd; --d-line:#2c5260;
  --d-gold:#c49c48; --d-gold-soft:#d4b36a; --d-on-accent:#001c26;
  --d-field:rgba(255,255,255,.07); --d-field-focus:rgba(255,255,255,.11);
  --d-login-card:rgba(0,28,38,.9); --d-orn:.11;
  --soft:#a9b8bd; --d-bub-admin:rgba(6,57,74,.45);
}
html[data-accent="sky"]{--d-acc-dk:#6fb3c8; --d-acc-dk-soft:#9fd0df;}
html[data-accent="rose"]{--d-acc-dk:#d08f7f; --d-acc-dk-soft:#e3b0a3;}
html[data-accent="sage"]{--d-acc-dk:#8fb08a; --d-acc-dk-soft:#b5cdb0;}
html[data-theme="dark"], html:not([data-theme]){
  --d-gold:var(--d-acc-dk); --d-gold-soft:var(--d-acc-dk-soft);
  /* remap the legacy variables so every old page turns dark with no edits */
  --white:#0a3344; --cream:#0a3344; --paper-cool:#001c26; --ink:#ebeee7; --line:#2c5260; --soft:#a9b8bd;
  --teal-700:#ebeee7; --gold-700:var(--d-acc-dk-soft); --gold-600:var(--d-acc-dk-soft); --gold-500:var(--d-acc-dk); --gold-300:var(--d-acc-dk-soft); --gold-soft:var(--d-acc-dk-soft);
  --danger:#ee9a85; --success:#7cc4a5; color-scheme:dark;
}
html[data-theme="light"]{
  --d-bg:#ebeee7; --d-card:#ffffff; --d-card-2:#f5f7f2; --d-tile-on:#faf5e8;
  --d-text:#26323a; --d-soft:#5a6266; --d-line:#d5dcd9;
  --d-gold:#c49c48; --d-gold-soft:#8a6b29; --d-on-accent:#001c26;
  --d-field:#ffffff; --d-field-focus:#ffffff; --d-login-card:rgba(255,255,255,.95); --d-orn:.16;
  --d-bub-admin:rgba(6,57,74,.07); --soft:#5a6266; --ink:#333333; --paper-cool:#ebeee7; --white:#ffffff; --cream:#ffffff; --line:#d5dcd9;
  --gold-500:var(--d-gold); --gold-600:var(--d-gold-soft); --gold-700:var(--d-gold-soft); color-scheme:light;
}
html[data-theme="light"][data-accent="sky"]{--d-gold:#2f7d95; --d-gold-soft:#1f6479; --d-on-accent:#ffffff;}
html[data-theme="light"][data-accent="rose"]{--d-gold:#b3604f; --d-gold-soft:#9a4a3a; --d-on-accent:#ffffff;}
html[data-theme="light"][data-accent="sage"]{--d-gold:#5d8558; --d-gold-soft:#456a41; --d-on-accent:#ffffff;}
/* surfaces that are always dark keep the dark-surface accent and light text, in either theme */
.sidebar, .d-hero, .d-head, .ps-fab, .ps-panel, .nhx, .d-tcard.dark, .page-head, .pf{
  --d-gold:var(--d-acc-dk); --d-gold-soft:var(--d-acc-dk-soft); --d-on-accent:#001c26; --d-text:#ebeee7; --d-soft:#a9b8bd; --d-line:#2c5260;
  --gold-500:var(--d-acc-dk); --gold-300:var(--d-acc-dk-soft); --gold-soft:var(--d-acc-dk-soft); --ink:#ebeee7; --teal-700:#ebeee7;
}

/* ---------- global skin ---------- */
body{background:var(--d-bg); color:var(--ink);}
.sidebar-shell{background:var(--d-bg);}
.sidebar{background:#001c26;}
.main-area{background:var(--d-bg); position:relative;}
html[data-theme="light"] .main-area{background:var(--d-bg);}
a{color:inherit;}
.card{background:var(--d-card); border:1px solid var(--d-line); border-top:2px solid var(--d-gold); box-shadow:none;}
html[data-theme="light"] .card{box-shadow:0 1px 2px rgba(6,57,74,.05);}
.card h3, .section-head h3{color:var(--d-soft); letter-spacing:.12em;}
.page-head h2{color:var(--d-text);}
.page-head p{color:var(--d-soft);}
.empty, .foot, .lib-row .kind, .lock-badge, .field label{color:var(--d-soft);}
.lib-row .t{color:var(--d-text);}
.lib-row{border-bottom-color:var(--d-line);}
.open-btn{color:var(--d-text); border-color:var(--d-line); background:transparent;}
.open-btn:hover{border-color:var(--d-gold); color:var(--d-gold-soft);}
body .task-btn:not(.secondary), .btn, .add-btn{background:var(--d-gold); border-color:var(--d-gold); color:var(--d-on-accent);}
body .task-btn:not(.secondary):hover, .btn:hover, .add-btn:hover{background:var(--d-gold-soft); border-color:var(--d-gold-soft);}
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=search], textarea, select{
  background:var(--d-field); color:var(--d-text); border-color:var(--d-line);}
input::placeholder, textarea::placeholder{color:var(--d-soft); opacity:.75;}
input:focus, textarea:focus, select:focus{border-color:var(--d-gold) !important; outline:none;}
select option{color:#000;}
input[type=checkbox], input[type=radio], input[type=range]{accent-color:var(--d-gold);}
::selection{background:var(--d-gold); color:var(--d-on-accent);}
:focus-visible{outline:2px solid var(--d-gold); outline-offset:2px;}
.error-msg{background:rgba(181,72,47,.16); border-color:rgba(181,72,47,.45); color:var(--danger);}
.ct-wrap > summary, .ct-body{background:var(--d-card); border-color:var(--d-line); color:var(--d-text);}
.sidebar-nav a.active{border-color:var(--d-acc-dk); color:var(--d-acc-dk);}
.sidebar-nav a:hover{color:var(--d-acc-dk);}
.nav-badge{background:var(--d-acc-dk);}
.sidebar-foot .signout{margin-top:8px;}
.sidebar-foot .signout.alt{border-color:rgba(255,255,255,.14); color:var(--on-deep-muted); margin-bottom:0;}
/* page banner: every page's heading sits on a deep banner like the dashboard hero */
.page-head{position:relative; margin:0 -40px 28px; padding:46px 48px 36px; background:linear-gradient(180deg,#06394a,#001c26); overflow:hidden;}
.page-head::before{content:''; position:absolute; right:-70px; top:-60px; width:340px; height:340px; background:url('/assets/ornaments/mandala-spear.svg') no-repeat center/contain; opacity:.13; pointer-events:none;}
.page-head::after{position:relative; margin-top:14px;}
.page-head h2{color:#ebeee7; position:relative;} .page-head p{color:#a9b8bd; position:relative;}
.page-head > *{position:relative;}
body[data-hero="library"] .page-head, body[data-hero="meditations"] .page-head{background:linear-gradient(90deg,rgba(0,28,38,.9) 0%,rgba(0,28,38,.6) 50%,rgba(0,28,38,.3) 100%), url('/assets/photos/hero-temple.webp') center 40%/cover no-repeat;}
body[data-hero="meditations"] .page-head{background-image:linear-gradient(90deg,rgba(0,28,38,.9) 0%,rgba(0,28,38,.6) 50%,rgba(0,28,38,.3) 100%), url('/assets/photos/meditations-porch.webp'); background-position:center 20%;}
html[data-photos="off"] .page-head, html[data-photos="off"] .d-hero, html[data-photos="off"] .d-head{background-image:none !important; background:linear-gradient(180deg,#06394a,#001c26) !important;}
html[data-photos="off"] .d-photo{display:none;}
@media (max-width:860px){.page-head{margin:0 -16px 22px; padding:34px 22px 26px;}}
@media (max-width:600px){.page-head{margin:0 -20px 22px;}}
/* messages, avatars and strong fills that used --teal-700 as a background */
.msg.from-admin .av{background:var(--d-teal-2); color:var(--d-acc-dk-soft);}
.msg.from-client .av{color:#001c26;}
.msg.from-admin .bub{background:var(--d-bub-admin); border-color:var(--d-line);}
.msg .bub{background:var(--d-card); border-color:var(--d-line); color:var(--d-text);}
.msg.from-me .bub{background:rgba(196,156,72,.12); border-color:var(--d-gold);}
.journey-legend-dot.done, .ts-bar > span{background:var(--d-gold);}
.pa-tabs button{background:var(--d-card); color:var(--d-text); border-color:var(--d-line);} .pa-tabs button.on{background:var(--d-gold); color:var(--d-on-accent);}
html[data-theme="light"] .pa-tabs button.on{border-color:var(--d-gold);}
/* theme.js 'Appearance' trigger in the sidebar */
.sidebar-foot .appearance-btn{width:100%; background:none; border:1px solid rgba(255,255,255,.22); border-radius:2px; padding:9px; font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--on-deep-muted); margin-bottom:8px;}
.sidebar-foot .appearance-btn:hover{border-color:var(--d-acc-dk); color:var(--d-acc-dk-soft);}
@media (max-width:860px){.sidebar-foot .appearance-btn{font-size:9px; letter-spacing:0; padding:8px 0;}}
@media (max-width:600px){.sidebar-foot .appearance-btn{width:auto; padding:8px 12px; font-size:11px; margin:0 8px 0 0;}}

/* ---------- login (themeable) ---------- */
body.d-login .screen .card{background:var(--d-login-card); color:var(--d-text); border-top:1px solid rgba(196,156,72,.55);}
body.d-login .wordmark img.word.on-light{display:none;} html[data-theme="light"] body.d-login .wordmark img.word.on-dark{display:none;} html[data-theme="light"] body.d-login .wordmark img.word.on-light{display:block;}

/* ---------- check-in + dashboard components (tokenised) ---------- */
/* DRAFT design layer (9 Nov 2026). Loaded only by the pages under /draft/. Nothing here touches the live pages.
   Directions combined: C immersive (deep teal, gold lines, photo under a teal veil), B guided steps, A refined details. */

/* ---------- shared bits ---------- */
.d-eyebrow{font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--d-gold);}
.d-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--d-gold); color:var(--d-on-accent); border:none; border-radius:2px; padding:13px 26px; font-family:var(--font-display); letter-spacing:.1em; font-size:15px; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:background .2s, transform .15s;}
.d-btn:hover{background:var(--d-gold-soft);} .d-btn:active{transform:scale(.985);} .d-btn:disabled{opacity:.55; cursor:default;}
.d-btn-ghost{background:transparent; color:var(--d-text); border:1px solid var(--d-line);} .d-btn-ghost:hover{background:rgba(255,255,255,.06); border-color:var(--d-gold);}
.d-btn-link{background:none; border:none; color:var(--d-gold-soft); font-family:var(--font-body); font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 2px;}
.d-fade{animation:d-in .35s ease both;}
@keyframes d-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.d-fade{animation:none;}}
:focus-visible{outline:2px solid var(--d-gold); outline-offset:2px;}

/* ---------- login ---------- */
body.d-login .screen .card{background:var(--d-login-card); border:1px solid rgba(196,156,72,.55); color:var(--d-text); max-width:430px; padding:44px 38px 34px; backdrop-filter:blur(2px);}
body.d-login .wordmark p{color:var(--d-gold); letter-spacing:.3em;}
body.d-login .wordmark h1{display:none;}
body.d-login .field label{color:var(--d-gold-soft); letter-spacing:.14em; font-size:11px; text-transform:uppercase;}
body.d-login .field input{background:var(--d-field); border:1px solid var(--d-line); color:var(--d-text); border-radius:2px;}
body.d-login .field input:focus{border-color:var(--d-gold); outline:none; background:var(--d-field-focus);}
body.d-login .btn{background:var(--d-gold); color:var(--d-on-accent); font-family:var(--font-display); letter-spacing:.12em;}
body.d-login .foot, body.d-login .form a, body.d-login #already-box p{color:var(--d-soft);}
body.d-login button[type=button]{color:var(--d-gold-soft) !important;}
body.d-login #already-name{color:var(--d-text) !important;}
.d-login-tag{font-family:var(--font-quote, Georgia, serif); font-style:italic; color:var(--d-gold-soft); text-align:center; margin:0 0 22px; font-size:15px; line-height:1.6;}

/* ---------- dashboard hero + today ---------- */
.d-hero{position:relative; margin:0 -40px 26px; padding:64px 48px 52px; color:var(--d-text); background:linear-gradient(90deg, rgba(0,28,38,.9) 0%, rgba(0,28,38,.55) 45%, rgba(0,28,38,.2) 100%), linear-gradient(180deg, rgba(0,28,38,0) 55%, rgba(0,28,38,.75) 100%), url('/assets/photos/hero-temple.webp') center 38%/cover no-repeat; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px;}
.d-hero h2{font-family:var(--font-display); font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); letter-spacing:.05em; text-transform:uppercase; margin:0; color:var(--d-text); line-height:1;}
.d-hero p{margin:6px 0 0; font-family:var(--font-body); color:var(--d-soft); font-size:15px; max-width:520px;}
.d-hero-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:14px;}
.d-ring{display:flex; align-items:center; gap:12px; font-family:var(--font-body); color:var(--d-text); font-size:13px; line-height:1.4;}
.d-ring b{display:block; color:var(--d-gold-soft); font-size:15px;}
.d-today{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:0 0 26px;}
.d-tcard{background:#fff; border:1px solid var(--line); border-top:3px solid var(--d-gold); padding:18px 20px; font-family:var(--font-body); display:flex; flex-direction:column; gap:8px; min-height:150px;}
.d-tcard .d-eyebrow{color:#8a6b29;}
.d-tcard h3{font-family:var(--font-display); font-size:20px; letter-spacing:.05em; text-transform:uppercase; color:var(--d-teal); margin:0; font-weight:400;}
.d-tcard p{margin:0; font-size:13.5px; line-height:1.55; color:#5a6266; flex:1;}
.d-tcard .d-btn{align-self:flex-start; padding:9px 16px; font-size:13px;}
.d-tcard.dark{background:var(--d-teal); border-color:var(--d-line); border-top-color:var(--d-gold);} .d-tcard.dark h3{color:var(--d-text);} .d-tcard.dark p{color:var(--d-soft);} .d-tcard.dark .d-eyebrow{color:var(--d-gold);}

/* ---------- check-in (immersive + guided steps) ---------- */
/* full-bleed hero/head, content kept to a readable width */
body.d-dark{background:var(--d-bg);}
body.d-dark .main-area{position:relative; background:var(--d-bg);}
body.d-dark .main-area::before{content:''; position:absolute; top:150px; right:-90px; width:560px; height:560px; background:url('/assets/ornaments/mandala-spear.svg') no-repeat center/contain; opacity:var(--d-orn); pointer-events:none;}
body.d-dark .main-content{position:relative; z-index:1;}
.d-head{position:relative; margin:0 -40px 22px; padding:56px 48px 40px; background:linear-gradient(180deg, rgba(0,28,38,.55) 0%, rgba(0,28,38,.78) 78%, var(--d-bg)), url('/assets/photos/meditations-porch.webp') center 20%/cover no-repeat; color:var(--d-text);}
.d-head h2{font-family:var(--font-display); font-size:clamp(1.9rem,1.4rem + 1.8vw,2.7rem); letter-spacing:.05em; text-transform:uppercase; color:var(--d-text); margin:4px 0 6px; line-height:1.02;}
.d-head p{margin:0; font-family:var(--font-body); color:var(--d-soft); font-size:14.5px; max-width:560px; line-height:1.6;}
.d-progress{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 6px;}
.d-progress span{height:3px; background:var(--d-line); transition:background .3s;} .d-progress span.on{background:var(--d-gold);}
.d-steplabels{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 18px; font-family:var(--font-body); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--d-soft);}
.d-steplabels span.on{color:var(--d-gold-soft);}
.d-card{background:var(--d-card); border:1px solid var(--d-line); padding:26px 28px; color:var(--d-text); font-family:var(--font-body);}
.d-card h3{font-family:var(--font-display); font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); letter-spacing:.05em; text-transform:uppercase; color:var(--d-text); margin:2px 0 6px; font-weight:400;}
.d-lede{margin:0 0 18px; color:var(--d-soft); font-size:14px; line-height:1.65;}
.d-panel{display:none;} .d-panel.on{display:block; animation:d-in .35s ease both;}
.d-nav{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--d-line);}
.d-incl{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--d-soft); cursor:pointer;}
.d-incl input{accent-color:var(--d-gold); width:16px; height:16px;}

/* tiles */
.d-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.d-tile{display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; background:var(--d-card-2); border:1px solid var(--d-line); color:var(--d-text); padding:15px 14px 13px; cursor:pointer; font-family:var(--font-body); transition:border-color .2s, background .2s, transform .15s; min-height:116px;}
.d-tile:hover{border-color:var(--d-gold); transform:translateY(-1px);}
.d-tile svg{width:26px; height:26px; stroke:var(--d-gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.d-tile b{font-family:var(--font-display); font-weight:400; font-size:16px; letter-spacing:.07em; text-transform:uppercase;}
.d-tile span{font-size:12px; line-height:1.4; color:var(--d-soft);}
.d-tile.on{border-color:var(--d-gold); background:var(--d-tile-on); box-shadow:inset 0 0 0 1px var(--d-gold);} .d-tile.on b{color:var(--d-gold-soft);}
.d-tile.help{background:transparent; border-style:dashed; border-color:var(--d-gold);}
.d-twrap{position:relative; display:flex;} .d-twrap .d-tile{flex:1; padding-right:30px;}
.d-tx{position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; background:none; color:var(--d-soft); font-size:17px; line-height:1; cursor:pointer; border-radius:50%;} .d-tx:hover{background:var(--d-field-focus); color:#fff;}
.d-custom{margin-top:14px; padding:16px; border:1px solid var(--d-gold); background:var(--d-card-2);}
.d-field{display:grid; gap:6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--d-gold-soft); margin-bottom:12px;}
.d-field input[type=text], .d-field select, .d-text{width:100%; box-sizing:border-box; background:var(--d-field); border:1px solid var(--d-line); color:var(--d-text); padding:11px 12px; font-family:var(--font-body); font-size:14.5px; letter-spacing:0; text-transform:none; border-radius:2px;}
.d-field select option{color:#000;}
.d-field input:focus, .d-text:focus{border-color:var(--d-gold); outline:none;}
.d-text{min-height:150px; resize:vertical; line-height:1.65;} .d-text.sm{min-height:70px;}
.d-text::placeholder, .d-field input::placeholder{color:#7f969e;}

/* sliders (gold fill via --pct) */
.d-slider{display:grid; grid-template-columns:minmax(150px,1.1fr) 2fr 30px; gap:14px; align-items:center; padding:11px 0; border-top:1px solid var(--d-line);} .d-slider:first-child{border-top:0;}
.d-slider .nm{font-size:14px; color:var(--d-text);} .d-slider .th{font-size:11.5px; color:var(--d-soft);}
.d-slider output{font-family:var(--font-display); font-size:19px; color:var(--d-gold-soft); text-align:right;}
.d-tier{background:none; border:none; padding:0; font:inherit; color:var(--d-text); cursor:pointer; text-align:left; text-decoration:underline; text-decoration-color:var(--d-gold); text-underline-offset:4px;} .d-tier:hover{color:var(--d-gold-soft);}
.d-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px;}
input[type=range].d-range{-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; --pct:50%;}
input[type=range].d-range::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(to right, var(--d-gold) var(--pct), var(--d-line) var(--pct));}
input[type=range].d-range::-moz-range-track{height:4px; border-radius:2px; background:var(--d-line);} input[type=range].d-range::-moz-range-progress{height:4px; background:var(--d-gold);}
input[type=range].d-range::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--d-gold); border:3px solid var(--d-bg); margin-top:-8px; box-shadow:0 0 0 1px var(--d-gold);}
input[type=range].d-range::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--d-gold); border:3px solid var(--d-bg);}

.d-two{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;} @media (max-width:820px){.d-two{grid-template-columns:1fr;}}
.d-wheel{text-align:center;} .d-wheel [data-tier]{cursor:pointer;}
.d-note{font-size:12px; color:var(--d-soft); margin:8px 0 0; line-height:1.5;}
.d-focus{margin-top:16px; padding:16px 18px; border:1px solid var(--d-line); background:var(--d-card-2);}
.d-focus .t{font-family:var(--font-display); font-size:20px; letter-spacing:.05em; text-transform:uppercase; color:var(--d-gold-soft); margin:4px 0;}
.d-focus .m{font-family:var(--font-quote, Georgia, serif); font-style:italic; color:var(--d-text); margin:0 0 6px;} .d-focus .q{color:var(--d-soft); font-size:13px; margin:0;}

/* life rows: name on its own line, so nothing is cut off */
.d-life-row{display:grid; grid-template-columns:12px 1fr 28px; grid-template-areas:'dot name x' '. range val'; gap:4px 10px; align-items:center; padding:9px 0; border-top:1px solid var(--d-line);} .d-life-row:first-child{border-top:0;}
.d-life-row .dot{grid-area:dot; width:9px; height:9px; border-radius:50%;}
.d-life-row input[type=text]{grid-area:name; background:transparent; border:none; border-bottom:1px solid var(--d-line); color:var(--d-text); padding:5px 2px; font-family:var(--font-body); font-size:14px; min-width:0; border-radius:0;} .d-life-row input[type=text]:focus{border-bottom-color:var(--d-gold); outline:none;}
.d-life-row .d-range{grid-area:range;} .d-life-row output{grid-area:val; font-family:var(--font-display); font-size:17px; color:var(--d-gold-soft); text-align:right;}
.d-life-row button{grid-area:x; background:none; border:none; color:var(--d-soft); font-size:18px; cursor:pointer;}
.d-ordinary{margin-top:8px;}

/* summary + suggestions */
.d-sum{display:grid; grid-template-columns:210px 1fr; gap:26px; align-items:start;} @media (max-width:760px){.d-sum{grid-template-columns:1fr;}}
.d-photo{aspect-ratio:3/4; background:linear-gradient(180deg, rgba(0,28,38,.1), rgba(0,28,38,.75)), url('/assets/photos/summary-heart.webp') center/cover no-repeat; border:1px solid var(--d-line);} @media (max-width:760px){.d-photo{aspect-ratio:16/9;}}
.d-sug{margin:18px 0 0; padding-left:18px; border-left:2px solid var(--d-gold);}
.d-quote{margin:14px 0 6px; padding:0; font-family:var(--font-quote, Georgia, serif); font-style:italic; font-size:19px; line-height:1.75; color:var(--d-text); white-space:pre-line;}
.d-ref{font-size:12.5px; color:var(--d-gold-soft); line-height:1.6; margin:4px 0 2px;} .d-ref a{color:var(--d-gold-soft); text-decoration:underline; text-underline-offset:3px;}
.d-credit{font-size:11.5px; color:var(--d-soft); line-height:1.5; margin:0 0 14px;}
.d-box{margin:14px 0 4px; padding:16px 18px; border:1px solid var(--d-gold); background:var(--d-card-2);}
.d-box-l{font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--d-gold);}
.d-box-t{font-family:var(--font-display); font-size:22px; letter-spacing:.05em; text-transform:uppercase; color:var(--d-text); margin:6px 0 8px;} .d-box-t small{font-family:var(--font-body); font-size:12.5px; color:var(--d-soft); letter-spacing:0; text-transform:none; margin-left:8px;}
.d-box p{margin:0 0 8px; font-size:14.5px; line-height:1.7; color:var(--d-text);} .d-box p.pr{color:var(--d-soft); font-style:italic; margin-bottom:0;}
.d-sug .t{font-family:var(--font-display); font-size:22px; letter-spacing:.05em; text-transform:uppercase; color:var(--d-gold-soft); margin:4px 0 6px;}
.d-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px;}
.d-row .d-btn{padding:9px 16px; font-size:13px;}
.d-ok{font-size:12.5px; color:var(--d-soft);}
.d-saved{display:inline-block; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--d-on-accent); background:var(--d-gold); padding:4px 10px; margin-bottom:8px;}

/* history on dark */
.d-hist{margin-top:34px;} .d-hist h3{font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:.05em; text-transform:uppercase; color:var(--d-text); margin:0 0 4px;}
.d-entry{border-top:1px solid var(--d-line);} .d-entry > summary{cursor:pointer; list-style:none; display:grid; grid-template-columns:150px 1fr; gap:12px; padding:12px 0; font-size:13px; color:var(--d-text); align-items:baseline;} .d-entry > summary::-webkit-details-marker{display:none;}
.d-entry .d{color:var(--d-soft); font-size:12px;} .d-entry .s{font-weight:700; color:var(--d-gold-soft);} .d-entry .p{color:var(--d-soft);}
.d-entry .body{padding:0 0 16px 162px; font-size:13px; line-height:1.65; color:var(--d-text);} @media (max-width:600px){.d-entry > summary{grid-template-columns:1fr; gap:2px;} .d-entry .body{padding-left:0;}}
.d-trend{width:100%; border-collapse:collapse; font-size:12.5px; color:var(--d-text);} .d-trend th,.d-trend td{padding:7px 6px; border-top:1px solid var(--d-line); text-align:center;} .d-trend th{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--d-soft); border-top:0;} .d-trend td:first-child,.d-trend th:first-child{text-align:left;}
.d-modal{position:fixed; inset:0; background:rgba(0,10,14,.78); display:none; align-items:center; justify-content:center; z-index:60; padding:16px;} .d-modal.open{display:flex;}
.d-modal-card{background:var(--d-bg); color:var(--d-text); border:1px solid var(--d-gold); max-width:540px; width:100%; max-height:88vh; overflow:auto; padding:30px; font-family:var(--font-body);}
.d-modal-card h4{font-family:var(--font-display); font-weight:400; font-size:28px; letter-spacing:.05em; text-transform:uppercase; color:var(--d-text); margin:4px 0;}
.d-modal-card .tag{font-family:var(--font-quote, Georgia, serif); font-style:italic; color:var(--d-gold-soft); margin:0 0 14px;}
.d-modal-card dt{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--d-gold); margin-top:14px;} .d-modal-card dd{margin:3px 0 0; font-size:14px; line-height:1.65;}
@media (max-width:860px){.d-hero,.d-head{margin:0 -16px 20px; padding-left:24px; padding-right:24px;}}
@media (max-width:600px){.d-hero,.d-head{margin:0 -20px 20px; padding-left:22px; padding-right:22px;} .d-card{padding:20px 16px;} .d-slider{grid-template-columns:1fr 30px; grid-template-areas:'nm val' 'rng rng';} .d-slider > div:first-child{grid-area:nm;} .d-slider input{grid-area:rng;} .d-slider output{grid-area:val;}}
@media (max-width:600px){
  .d-tiles{grid-template-columns:1fr 1fr; gap:8px;}
  .d-tile{min-height:104px; padding:12px 10px 10px;} .d-tile b{font-size:15px;} .d-tile span{font-size:11.5px;}
  body.d-dark .main-area::before{opacity:.06;}
  .d-nav .d-btn{padding:12px 18px; font-size:14px;}
}

.d-exp{margin-top:22px; border-color:var(--d-line);} .d-exp .d-text{min-height:110px;} .d-exp .d-box-l{color:var(--d-gold-soft);}
.d-exp .d-btn.is-on{background:var(--d-gold); color:var(--d-on-accent); border-color:var(--d-gold);}
.d-sug .d-exp{margin-top:12px;}

/* separate, branded cards for each suggestion */
.d-sec{position:relative; border:1px solid var(--d-line); border-top:3px solid var(--d-gold); background:var(--d-card-2); padding:20px 24px 24px;}
.d-sec-head{display:flex; align-items:center; gap:14px; margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--d-line);}
.d-sec-n{flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--d-gold); color:var(--d-gold-soft); font-family:var(--font-display); font-size:19px;}
.d-sec-tt{flex:1; min-width:0;}
.d-sec-t{font-family:var(--font-display); font-size:21px; letter-spacing:.06em; text-transform:uppercase; color:var(--d-text); line-height:1.1;}
.d-sec-s{font-size:12px; color:var(--d-soft); margin-top:3px; letter-spacing:.03em;}
.d-sec-seal{flex:0 0 38px; opacity:.95;}
.d-sec-sutra{background:linear-gradient(180deg, var(--d-card), var(--d-card-2));}
.d-orn{display:block; width:min(220px,60%); margin:18px auto; opacity:.85;}
.d-sec .d-box{background:var(--d-card-2);}

/* My patterns (graphs) */
.d-pat{margin-top:34px;}
.d-pat-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.d-pat h3{font-family:var(--font-display); font-weight:400; font-size:24px; letter-spacing:.05em; text-transform:uppercase; color:var(--d-text); margin:2px 0 0;}
.d-seg{display:flex; border:1px solid var(--d-line);} .d-seg button{background:transparent; border:none; border-left:1px solid var(--d-line); color:var(--d-soft); padding:8px 14px; font-family:var(--font-body); font-size:12px; letter-spacing:.06em; cursor:pointer;} .d-seg button:first-child{border-left:none;}
.d-seg button.on{background:var(--d-gold); color:var(--d-on-accent); font-weight:700;}
.d-insight{border:1px solid var(--d-gold); background:var(--d-card-2); padding:16px 20px; margin-bottom:14px; font-family:var(--font-body);}
.d-insight p{margin:6px 0 0; font-size:14.5px; line-height:1.65; color:var(--d-text);} .d-insight b{color:var(--d-gold-soft);} .d-insight i{color:var(--d-soft);}
.d-pat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;} @media (max-width:900px){.d-pat-grid{grid-template-columns:1fr;}}
.d-pat-grid .d-card{padding:20px 22px;} .d-pat-grid .d-card:nth-child(3){grid-column:1/-1;} @media (max-width:900px){.d-pat-grid .d-card:nth-child(3){grid-column:auto;}}
.d-bar{display:grid; grid-template-columns:minmax(110px,1.1fr) 2fr 62px auto; gap:10px; align-items:center; padding:7px 0; font-size:13px; color:var(--d-text);}
.d-bar .tr{height:10px; background:var(--d-line);} .d-bar .fl{height:10px; background:var(--d-gold); transition:width .5s ease;}
.d-bar.flag .fl{background:#e0866a;} .d-bar.flag .lb{color:#f0b8a6; font-weight:700;}
.d-bar .vl{text-align:right; color:var(--d-gold-soft); font-family:var(--font-display); letter-spacing:.04em; font-size:15px;} .d-bar.flag .vl{color:#f0b8a6;}
.d-bar .sp{width:70px;}
@media (max-width:600px){.d-bar{grid-template-columns:1fr 62px; grid-template-areas:'lb vl' 'tr tr' 'sp sp';} .d-bar .lb{grid-area:lb;} .d-bar .tr{grid-area:tr;} .d-bar .vl{grid-area:vl;} .d-bar .sp{grid-area:sp;}}

.sidebar-foot .name{color:#ffffff !important;}
.ps-panel, .ps-fab{--white:#ffffff; --cream:#ffffff;}

/* full-bleed banners; each page keeps its own readable width (body[data-pw]) */
body{--pw:860px;}
body[data-pw="720"]{--pw:720px;} body[data-pw="900"]{--pw:900px;} body[data-pw="920"]{--pw:920px;} body[data-pw="960"]{--pw:960px;} body[data-pw="980"]{--pw:980px;} body[data-pw="1040"]{--pw:1040px;}
@media (min-width:1300px){body[data-pw="1040"]{--pw:1320px;}}
.main-area > .main-content{max-width:none !important; margin:0 !important; padding-top:0 !important;}
.main-area > .main-content > *{max-width:var(--pw); margin-left:auto; margin-right:auto;}
.main-area > .main-content > .page-head, .main-area > .main-content > .d-hero, .main-area > .main-content > .d-head{max-width:none; margin-left:-40px; margin-right:-40px;}
@media (max-width:860px){.main-area > .main-content > .page-head, .main-area > .main-content > .d-hero, .main-area > .main-content > .d-head{margin-left:-16px; margin-right:-16px;}}
@media (max-width:600px){.main-area > .main-content > .page-head, .main-area > .main-content > .d-hero, .main-area > .main-content > .d-head{margin-left:-20px; margin-right:-20px;}}
.main-area > .main-content > .page-head > *, .main-area > .main-content > .d-hero > *{max-width:var(--pw);}

/* sign-in page: the original sacred geometry (mandala) background, deep teal in dark and paper in light */
body.d-login .screen{background:var(--teal-950, #001c26) url('/assets/ornaments/mandala-spear.svg') no-repeat center 42%/min(980px,150vw); position:relative; padding:24px;}
body.d-login .screen::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, rgba(0,28,38,.35), #001c26 72%); pointer-events:none;}
html[data-theme="light"] body.d-login .screen{background:#ebeee7 url('/assets/ornaments/mandala-spear.svg') no-repeat center 42%/min(980px,150vw);}
html[data-theme="light"] body.d-login .screen::before{background:radial-gradient(ellipse at 50% 40%, rgba(235,238,231,.2), #ebeee7 74%);}

/* ---------- Your path: the seated figure with the seven tiers ---------- */
.pf{--figw:380px; position:relative; display:grid; grid-template-columns:var(--figw) 1fr; background:linear-gradient(165deg,#0b5369 0%,#073e51 62%,#052f3e 100%); border:1px solid #2c5260; border-top:3px solid var(--d-acc-dk); padding:26px 28px 30px; color:#ebeee7; overflow:hidden; margin-bottom:20px;}
@media (max-width:1000px){.pf{--figw:300px;}}
.pf-svg{width:100%; height:auto; display:block;}
.pf-fig-l{fill:var(--d-acc-dk);} .pf-fig-r{fill:#2f6162;}
.pf-axis{stroke:rgba(255,255,255,.5); stroke-width:3;}
.pf-axis-on{stroke:var(--d-acc-dk); stroke-width:8; stroke-linecap:round;}
.pf-sym{cursor:pointer; outline:none; transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s;}
.pf-sym.upcoming{opacity:.45;} .pf-sym.upcoming .pf-art{filter:saturate(.4);} .pf-sym.upcoming:hover, .pf-sym.upcoming.sel{opacity:.9;}
.pf-halo{fill:none; stroke:var(--d-acc-dk); stroke-width:0; transition:stroke-width .3s;}
.pf-sym.current .pf-halo{stroke-width:7;} .pf-sym:focus-visible .pf-halo{stroke-width:7; stroke:#ffffff;}
.pf-tick circle{fill:var(--d-acc-dk);} .pf-tick path{stroke:#001c26; stroke-width:7; stroke-linecap:round; stroke-linejoin:round;}
.pf-place{fill:rgba(0,28,38,.35); stroke:var(--d-acc-dk); stroke-width:5; stroke-dasharray:14 12;} .pf-dot{fill:var(--d-acc-dk);}
.pf-sym.away.current .pf-place{stroke-width:8; stroke-dasharray:none;}
.pf-lab{font-family:var(--font-display); font-size:46px; letter-spacing:.08em; fill:#a9b8bd; cursor:pointer; transition:fill .3s;}
.pf-lab.done{fill:#d9e3e6;} .pf-lab.current{fill:var(--d-acc-dk-soft);} .pf-lab.upcoming{opacity:.6;} .pf-lab.sel{fill:#ffffff; opacity:1;}
.pf-wire{position:absolute; left:0; top:0; pointer-events:none; overflow:visible;} .pf-wire path{fill:none; stroke:var(--d-acc-dk); stroke-width:2; opacity:.9;}
.pf-card{position:absolute; left:calc(28px + var(--figw) + 44px); right:28px; top:0; display:flex; gap:22px; align-items:center; background:rgba(0,28,38,.62); border:1px solid var(--d-acc-dk); padding:22px 24px; font-family:var(--font-body); transition:top .5s cubic-bezier(.22,1,.36,1);}
.pf-pop{flex:0 0 clamp(120px,18vw,190px);} .pf-big{width:100%; height:auto; display:block; overflow:visible;}
.pf-txt{flex:1; min-width:0;}
.pf-eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--d-acc-dk);}
.pf-card h4{font-family:var(--font-display); font-weight:400; font-size:30px; letter-spacing:.05em; text-transform:uppercase; color:#ebeee7; margin:4px 0 2px; line-height:1.05;}
.pf-el{font-size:13.5px; color:#d9e3e6; margin:0 0 8px;} .pf-el b{color:var(--d-acc-dk-soft);}
.pf-tag{font-family:var(--font-quote,Georgia,serif); font-style:italic; color:var(--d-acc-dk-soft); margin:0 0 10px; font-size:14.5px;}
.pf-l{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--d-acc-dk); margin:10px 0 5px;}
.pf-chips{display:flex; flex-wrap:wrap; gap:6px;} .pf-chip{border:1px solid rgba(255,255,255,.28); padding:3px 9px; font-size:12px; color:#ebeee7;}
.pf-r{font-size:13.5px; line-height:1.55; color:#d9e3e6;}
.pf-card p{margin:0 0 10px; font-size:13.5px; line-height:1.65; color:#ebeee7;}
.pf-more{margin-top:10px;} .pf-more summary{cursor:pointer; font-size:12.5px; color:var(--d-acc-dk-soft); text-decoration:underline; text-underline-offset:3px;}
.pf-btn{display:inline-block; margin-top:12px; background:var(--d-acc-dk); color:#001c26; padding:10px 18px; font-family:var(--font-display); letter-spacing:.1em; text-transform:uppercase; font-size:14px; text-decoration:none; border-radius:2px;} .pf-btn:hover{background:var(--d-acc-dk-soft);}
@media (max-width:760px){.pf{grid-template-columns:1fr; padding:18px 14px 22px;} .pf-fig{max-width:360px; margin:0 auto; width:100%;} .pf-card{position:static; margin-top:18px; flex-direction:column; align-items:flex-start;} .pf-pop{flex:0 0 auto; width:140px;} .pf-wire{display:none;}}
html[data-motion="reduce"] .pf-sym, html[data-motion="reduce"] .pf-card, html[data-motion="reduce"] .pf-conn{transition:none;}