/* ═══ Main stylesheet — extracted from index.html ═══ */
:root {
--bg:#07090d; --surface:#10131c; --surface2:#181c28; --border:#303448;
--gold:#c9a96e; --gold-light:#eeddb8; --gold-dim:#a2804b;
--cream:#ede4cf; --muted:#d4bb87;
--sage:#7ab89a; --sage-dim:#365040;
--rust:#c05040; --rust-dim:#621810;
--indigo:#8898e8; --indigo-mid:#5060b8; --indigo-dim:#202860;
--amber:#d08838; --amber-mid:#985820; --amber-dim:#6a3010;
--plum:#d49e49; --plum-dim:rgba(180,140,50,.38); --plum-bg:rgba(14,18,26,.92); --plum-card:rgba(24,28,40,.95); --plum-hover:rgba(180,140,50,.12); --plum-border:rgba(190,155,60,.32);
--teal:#5ba8b8; --teal-dim:rgba(72,148,168,.38); --teal-border:rgba(72,148,168,.32); --teal-hover:rgba(72,148,168,.1);
--panel-w:540px;
}
/* ── Light Mode ── */
body.light-mode{
--bg:#faf5ea; --surface:#f2ead6; --surface2:#e8dfc8; --border:#d4c09a;
--cream:#2a1e0e; --muted:#6a5030;
--gold:#a07840; --gold-light:#5c3e1a; --gold-dim:#a07840;
--sage:#3a7050; --sage-dim:#c8dfc0;
--rust:#a83828; --rust-dim:#f0cfc8;
--indigo:#4050a0; --indigo-mid:#8090c8; --indigo-dim:#d0d8f0;
--amber:#a06820; --amber-mid:#c89848; --amber-dim:#f0e0c0;
--teal:#2a8898; --teal-dim:rgba(42,136,152,.18); --teal-border:rgba(42,136,152,.28); --teal-hover:rgba(42,136,152,.08);
color-scheme:light;
}
body.light-mode #canvas-wrap,body.light-mode .canvas-bg{background:#faf5ea;}
body.light-mode .nnode{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .nnode:hover{background:#e8dfc8 !important;}
body.light-mode .nnode .pst-main{color:#3d2e1a !important;}
body.light-mode .nnode .pst-sub{color:#8a7050 !important;}
body.light-mode .citta-tbl td,body.light-mode .citta-tbl th{border-color:#d4c09a;}
body.light-mode .citta-tbl thead th{background:#f2ead6;color:#5c3e1a;}
body.light-mode .citta-tbl tbody tr:hover td{background:#e8dfc8;}
body.light-mode #spanel{background:#f2ead6;border-color:#d4c09a;}
body.light-mode .sp-text{color:#3d2e1a !important;}
body.light-mode .sp-text strong{color:#5c3e1a !important;}
body.light-mode .sp-text em{color:#3a7050 !important;}
body.light-mode .sp-quote p{color:#5c3e1a;}
body.light-mode #visual-tweaks-panel{background:#f2ead6;border-color:#d4c09a;color:#3d2e1a;}
body.light-mode .vt-label{color:#8a7050;}
body.light-mode .sati-canvas-panel,body.light-mode .sati-canvas-body{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode #sati-canvas-panel{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode #virati-canvas-panel{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .cet-popup,body.light-mode #vithi-popup,body.light-mode #annasama-popup{background:#f2ead6 !important;border-color:#d4c09a !important;color:#3d2e1a !important;}
body.light-mode #citta-hover-panel{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .chp-title{color:#5c3e1a !important;}
body.light-mode .chp-sub,body.light-mode .chp-body{color:#8a7050 !important;}
body.light-mode *{scrollbar-color:#d4c09a #f2ead6;}
body.light-mode #cvpConceptModal{background:#f2ead6 !important;border-color:#d4c09a !important;color:#3d2e1a !important;}
body.light-mode .cvp-tab-btn{background:#f2ead6;color:#8a7050;border-color:#d4c09a;}
body.light-mode .cvp-tab-btn.active{background:#e8dfc8;color:#5c3e1a;}
body.light-mode #topbar{background:rgba(250,245,234,.97);border-bottom-color:#d4c09a;}
body.light-mode .tb-title{color:#5c3e1a;}
body.light-mode .tb-sep{color:#a07840;}
body.light-mode .tb-canon{color:#8a7050;}
body.light-mode .tb-hint{color:#8a7050;}
body.light-mode .tb-hint kbd{background:#e8dfc8;border-color:#d4c09a;color:#5c3e1a;}
body.light-mode .tb-sep-bar{background:rgba(92,62,26,.2);}
body.light-mode #feedbackBtn{color:#8a7050;}
body.light-mode #feedbackBtn:hover{color:#5c3e1a;background:rgba(92,62,26,.08);}
body.light-mode #audio-fab{
background:#f2ead6;border:1px solid #d4c09a;color:#5c3e1a;
border-radius:50%;box-shadow:none;
}
body.light-mode #audio-fab:hover{border-color:#a07840;color:#3d2e1a;}
body.light-mode #audio-fab.audio-off{color:#a07840;border-color:#d4c09a;opacity:.6;}
body.light-mode #search-fab{
background:#f2ead6;border:1px solid #d4c09a;color:#5c3e1a;
border-radius:50%;box-shadow:none;backdrop-filter:none;
}
body.light-mode #search-fab:hover{background:#e8dfc8;border-color:#a07840;color:#3d2e1a;transform:scale(1.05);}
body.light-mode #expand-all-fab{
background:#f2ead6 !important;border:1px solid #d4c09a !important;color:#5c3e1a !important;
border-radius:50% !important;box-shadow:none !important;backdrop-filter:none !important;
}
body.light-mode #expand-all-fab:hover{background:#e8dfc8 !important;border-color:#a07840 !important;color:#3d2e1a !important;}
/* ── Light mode: circular/expand icons & buttons ── */
/* expand icon rules consolidated below */
body.light-mode .ariya-icon svg{stroke:#3a7050;opacity:.8;}
body.light-mode .ariya-icon:hover svg{opacity:1;stroke:#2a5040;}
body.light-mode .connector-icon-box{background:#f2ead6;border-color:#a83828;color:#a83828;}
body.light-mode .connector-icon-box:hover{background:rgba(168,56,40,.12);box-shadow:none;}
body.light-mode .connector-icon{background:#f2ead6;border-color:#a83828;color:#a83828;}
body.light-mode .connector-icon:hover{background:rgba(168,56,40,.12);box-shadow:none;}
body.light-mode .sati-toggle-btn{background:rgba(58,112,80,.12);border-color:#3a7050;color:#3a7050;box-shadow:none;}
body.light-mode .sati-toggle-btn:hover{background:rgba(58,112,80,.22);border-color:#2a5040;color:#2a5040;box-shadow:none;}
body.light-mode .sati-toggle-btn.open{background:rgba(58,112,80,.28);border-color:#2a5040;color:#1a3830;box-shadow:none;}
/* expand icon rules consolidated below */
/* nidana + icons */
body.light-mode .nidana-plus,body.light-mode [class*="nidana"][class*="btn"],body.light-mode [class*="nid"][class*="icon"]{background:rgba(58,112,80,.12);border-color:#3a7050;color:#3a7050;}
/* Canvas node expand circles */
body.light-mode .nnode-expand,body.light-mode .node-link-btn,body.light-mode .ps-link-btn{background:rgba(58,112,80,.12);border-color:#3a7050;color:#3a7050;}
/* ── Light mode: plum/canvas variables ── */
body.light-mode{
--plum-card:#ede8dc; --plum-hover:rgba(160,120,64,.1); --plum-bg:#f2ead6;
--plum-dim:rgba(120,90,40,.25); --plum-border:rgba(140,100,50,.28);
}
/* ── Canvas nodes (nidāna, ps-tree, general) ── */
body.light-mode .nnode{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 8px rgba(0,0,0,.1);}
body.light-mode .nnode .nn-pali{color:#5c3e1a;}
body.light-mode .nnode .nn-en{color:#8a7050;}
body.light-mode .nnode .nn-num{color:#a07840;}
body.light-mode .nnode:hover .nn-pali{color:#3d2e1a;}
body.light-mode .nnode.past{border-left-color:#4050a0 !important;}
body.light-mode .nnode.past:hover,.nnode.past.active{background:#e8e4f4 !important;}
body.light-mode .nnode.pr{border-left-color:#a07840 !important;}
body.light-mode .nnode.pr:hover,.nnode.pr.active{background:#f0e8d0 !important;}
body.light-mode .nnode.pc{border-left-color:#a06820 !important;}
body.light-mode .nnode.pc:hover,.nnode.pc.active{background:#f0e0c0 !important;}
body.light-mode .nnode.fut{border-left-color:#a03828 !important;}
body.light-mode .nnode.fut:hover,.nnode.fut.active{background:#f0d8d0 !important;}
/* ── Canvas boxes (khandha, mpb, nibbana, tilakkhana etc.) ── */
body.light-mode .khandha-box{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 10px rgba(0,0,0,.1) !important;}
body.light-mode .khandha-box-title{color:#5c3e1a !important;border-bottom-color:#d4c09a !important;}
body.light-mode .khandha-box-title em{color:#3d2e1a !important;}
body.light-mode .khandha-box-sub{color:#8a7050 !important;}
body.light-mode .mpb-box{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 10px rgba(0,0,0,.1) !important;}
body.light-mode .mpb-box-title{color:#5c3e1a !important;}
body.light-mode .mpb-box-title em{color:#3d2e1a !important;}
body.light-mode .mpb-box-close{color:#8a7050 !important;border-color:#d4c09a !important;}
/* ── mpb-card (inside boxes) ── */
body.light-mode .mpb-card{background:#f2ead6 !important;border-color:#d4c09a !important;border-left-color:rgba(30,85,53,.55) !important;}
body.light-mode .mpb-card:hover{background:rgba(30,85,53,.08) !important;border-left-color:#1e5535 !important;}
body.light-mode .mpb-card.active{background:rgba(30,85,53,.12) !important;border-left-color:#1e5535 !important;}
body.light-mode .mpb-pali{color:#5c3e1a !important;}
body.light-mode .mpb-en{color:#8a7050 !important;}
body.light-mode .mpb-num{color:#1e5535 !important;}
/* Bojjhanga — use green family for ord */
body.light-mode #bojjhanga-section .bj-ord{color:#1e5535 !important;}
body.light-mode #bojjhanga-section .bjcard::after{background:rgba(30,85,53,.35) !important;}
body.light-mode #bojjhanga-section .bjcard:hover::after{background:#1e5535 !important;}
body.light-mode #bojjhanga-section .bjcard:hover{background:rgba(30,85,53,.07) !important;border-color:#1e5535 !important;}
/* Noble Truths 3 & 4 — green bottom bar in light mode */
body.light-mode .nt-3::after,body.light-mode .nt-4::after{background:rgba(30,85,53,.45) !important;}
body.light-mode .nt-3:hover::after,body.light-mode .nt-4:hover::after{background:#1e5535 !important;}
body.light-mode .nt-3 .nt-ord,body.light-mode .nt-4 .nt-ord{color:#1e5535 !important;}
/* ── Khandha/Samutthana/Rupa28/Paccaya/Nibbana/TiLakkhana/Bhavana/Ayatana — teal in light mode ── */
body.light-mode .khandha-box .mpb-num{color:#1a6878 !important;}
body.light-mode .khandha-box .mpb-card{border-left-color:rgba(26,104,120,.5) !important;}
body.light-mode .khandha-box .mpb-card:hover{background:rgba(26,104,120,.08) !important;border-left-color:#1a6878 !important;}
body.light-mode .khandha-box .mpb-card.active{background:rgba(26,104,120,.13) !important;border-left-color:#1a6878 !important;}
/* Ayatana table column 1 cards */
body.light-mode #ayatana-table-node td[data-key]{border-left-color:rgba(26,104,120,.5) !important;}
body.light-mode #ayatana-table-node td[data-key]:hover{background:rgba(26,104,120,.08) !important;border-left-color:#1a6878 !important;}
/* ── bjcard (visuddhi, tiratana) ── */
body.light-mode .bjcard{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 8px rgba(0,0,0,.1) !important;}
body.light-mode .bjcard:hover{background:rgba(122,90,16,.07) !important;border-color:#6b3d00 !important;box-shadow:0 2px 8px rgba(0,0,0,.1) !important;}
body.light-mode .bjcard.active{background:rgba(122,90,16,.12) !important;border-color:#6b3d00 !important;}
body.light-mode .bjcard::after{background:rgba(122,90,16,.45) !important;}
body.light-mode .bjcard:hover::after{background:#6b3d00 !important;}
body.light-mode .bj-pali{color:#5c3e1a !important;}
body.light-mode .bj-en{color:#8a7050 !important;}
body.light-mode .bj-ord{color:#6b3d00 !important;}
/* ── tiratana items ── */
body.light-mode .tiratana-item{background:#f2ead6 !important;border-color:#d4c09a !important;border-left-color:rgba(122,90,16,.5) !important;}
body.light-mode .tiratana-item:hover{background:rgba(122,90,16,.07) !important;border-left-color:#6b3d00 !important;}
body.light-mode .tiratana-item.active{background:rgba(122,90,16,.12) !important;border-left-color:#6b3d00 !important;}
body.light-mode .tiratana-pali{color:#5c3e1a !important;}
body.light-mode .tiratana-en{color:#8a7050 !important;}
body.light-mode .tiratana-num{color:#6b3d00 !important;}
/* ── kappa grid ── */
body.light-mode .kappa-cell{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .kappa-legend-item{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .kappa-legend-item:hover{background:#e8dfc8 !important;}
body.light-mode .kappa-legend-item.active{background:#e0d8c0 !important;border-color:#a07840 !important;}
body.light-mode .kappa-legend-label{color:#5c3e1a !important;}
/* ── modals (conceptModal, cvpConceptModal, psConceptModal) ── */
body.light-mode #concept-tooltip{background:#f7f0e0;border-color:#b89050;}
body.light-mode #concept-tooltip .ct-pali{color:#5c3e1a;}
body.light-mode #concept-tooltip .ct-en{color:#8a7050;}
body.light-mode #concept-tooltip .ct-body{color:#3d2e1a;}
body.light-mode .concept-link{border-bottom-color:#b89050;}
body.light-mode .concept-link .ci{color:#b89050;}
body.light-mode #conceptModal,body.light-mode #cvpConceptModal,body.light-mode #psConceptModal{background:rgba(200,192,174,.82) !important;}
body.light-mode #conceptModal > div,body.light-mode #psConceptModal > div{background:#f2ead6 !important;border-color:#3a7050 !important;}
/* ── citta table ── */
body.light-mode .citta-tbl{background:#f2ead6;}
body.light-mode .citta-tbl td{color:#3d2e1a;background:#f2ead6;}
body.light-mode .citta-tbl .citta-num{color:#5c3e1a;}
body.light-mode .citta-tbl .citta-cat{color:#5c3e1a;background:#ede8dc;}
body.light-mode .citta-tbl .citta-empty{background:#f2ead6;}
body.light-mode #citta-table-node{background:#f2ead6;border-color:#d4c09a;}
/* ── visuddhi sections ── */
body.light-mode .visuddhi-card{border-color:#d4c09a !important;}
body.light-mode .visuddhi-card:hover{border-color:#6b3d00 !important;}
body.light-mode .visuddhi-card.active{border-color:#6b3d00 !important;}
/* ── right panel extra ── */
body.light-mode #spanel{background:#f2ead6;border-color:#d4c09a;color:#3d2e1a;}
body.light-mode .sp-stitle{color:#a07840;border-bottom-color:#d4c09a;}
body.light-mode #spTitle{color:#5c3e1a;}
body.light-mode #spPali{color:#3d2e1a;}
body.light-mode #spEn{color:#8a7050;}
body.light-mode #spCat{color:#8a7050;}
body.light-mode .sp-nav-btn{background:#f2ead6;border-color:#d4c09a;color:#8a7050;}
body.light-mode .sp-nav-btn:hover{background:#e8dfc8;color:#5c3e1a;}
/* ── expand buttons: higher contrast ── */
/* ── Expand icons: unified standard (= samādhi expand-btn) ── */
body.light-mode .expand-btn,
body.light-mode .jhana-expand-btn,
body.light-mode .expand-concept-btn,
body.light-mode #psExpandConceptBtn,
body.light-mode #cvpExpandConceptBtn,
body.light-mode .nn-link,
body.light-mode .samu-filter-btn,
body.light-mode #vittanaExpandBtn,
body.light-mode #sankharaExpandBtn,
body.light-mode #sannhaExpandBtn,
body.light-mode #vedanaExpandBtn,
body.light-mode #rupaExpandBtn{
background:rgba(58,112,80,.18) !important;
border:2px solid #3a7050 !important;
color:#1a4030 !important;
font-weight:600 !important;
box-shadow:none !important;
}
body.light-mode .expand-btn:hover,
body.light-mode .jhana-expand-btn:hover,
body.light-mode .expand-concept-btn:hover,
body.light-mode #psExpandConceptBtn:hover,
body.light-mode #cvpExpandConceptBtn:hover,
body.light-mode .nn-link:hover,
body.light-mode .samu-filter-btn:hover,
body.light-mode #vittanaExpandBtn:hover,
body.light-mode #sankharaExpandBtn:hover,
body.light-mode #sannhaExpandBtn:hover,
body.light-mode #vedanaExpandBtn:hover,
body.light-mode #rupaExpandBtn:hover{
background:rgba(58,112,80,.32) !important;
border-color:#1a4030 !important;
color:#0a2820 !important;
}
body.light-mode .expand-btn.open,
body.light-mode .samu-filter-btn.active{
background:rgba(58,112,80,.40) !important;
border-color:#0e2010 !important;
color:#06140a !important;
}
body.light-mode .samu-filter-btn svg{stroke:#1a4030 !important;}
/* ── Tooltip ── */
body.light-mode #niyamas-tooltip{background:#f2ead6;color:#3d2e1a;border-color:#d4c09a;box-shadow:0 4px 16px rgba(0,0,0,.12);}
/* ── Feedback / comment popup ── */
body.light-mode #feedbackModal{background:rgba(200,192,174,.82) !important;}
body.light-mode #feedbackModal > div{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 8px 32px rgba(0,0,0,.15) !important;}
body.light-mode #fb-title{color:#5c3e1a !important;}
body.light-mode #fb-p1,body.light-mode #fb-p2,body.light-mode #fb-p3{color:#3d2e1a !important;}
body.light-mode #fb-btn{color:#5c3e1a !important;border-color:rgba(92,62,26,.4) !important;}
/* ── Search overlay ── */
body.light-mode #search-overlay{background:rgba(200,192,174,.6);}
body.light-mode #search-modal{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 12px 40px rgba(0,0,0,.15) !important;}
body.light-mode #search-input{color:#3d2e1a !important;border-bottom-color:#d4c09a !important;}
body.light-mode #search-input::placeholder{color:rgba(92,62,26,.4) !important;}
body.light-mode .srch-row:hover,.srch-row.active{background:rgba(160,120,64,.08);}
body.light-mode .srch-pali{color:#5c3e1a;}
body.light-mode .srch-pali mark{background:rgba(92,62,26,.15);color:#3d2e1a;}
body.light-mode .srch-meta{color:#8a7050;}
body.light-mode .srch-cat{color:#a07840;}
body.light-mode .srch-empty{color:#8a7050;}
body.light-mode .srch-sec{color:#a07840;border-top-color:#d4c09a;}
body.light-mode .srch-clear{color:#8a7050;}
body.light-mode .srch-clear:hover{color:#5c3e1a;background:rgba(92,62,26,.08);}
body.light-mode #search-results::-webkit-scrollbar-thumb{background:#d4c09a;}
/* ── CVP modal inner container ── */
body.light-mode #cvpConceptModal > div{background:#f2ead6 !important;border-color:#3a7050 !important;}
body.light-mode #cvpConceptModal > div > div > div[style*="border-bottom"]{border-bottom-color:#d4c09a !important;}
body.light-mode #cvpModalTitle{color:#5c3e1a !important;}
body.light-mode [id^="cvpTabBorder"]{background:rgba(58,112,80,.06) !important;border-color:#c0b898 !important;}
body.light-mode [id^="cvpTabBorder"][style*="rgba(122,184,154,.18)"]{background:rgba(58,112,80,.14) !important;border-color:#3a7050 !important;}
body.light-mode #cvpConceptModal th{background:#ede8dc !important;color:#5c3e1a !important;border-color:#d4c09a !important;}
body.light-mode #cvpConceptModal td{background:#f2ead6 !important;border-color:#d4c09a !important;color:#3d2e1a !important;}
body.light-mode #cvpConceptModal .cvp-tab-content{background:#f2ead6 !important;}
/* ── PS concept modal inner ── */
body.light-mode #psConceptModal > div{background:#f2ead6 !important;border-color:#3a7050 !important;}
/* ── Concept modal inner ── */
body.light-mode #conceptModal > div{background:#f2ead6 !important;border-color:#3a7050 !important;}
/* ── Rupa28 box ── */
body.light-mode #rupa28-box{background:#f2ead6 !important;border-color:#d4c09a !important;}
/* ── Samutthana filter buttons ── */
body.light-mode .samutthana-filter-btn,body.light-mode [class*="samutt"]{background:#f2ead6 !important;border-color:#d4c09a !important;color:#6a5030 !important;}
body.light-mode .samutthana-filter-btn.active,[class*="samutt"].active{background:#e8dfc8 !important;border-color:#a07840 !important;color:#5c3e1a !important;}
/* ── Citta hover panel ── */
body.light-mode #citta-hover-panel{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .chp-title{color:#5c3e1a !important;}
body.light-mode .chp-sub{color:#8a7050 !important;}
body.light-mode .chp-body{color:#3d2e1a !important;}
/* ── Sati canvas panel ── */
body.light-mode #sati-canvas-panel{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .sati-canvas-title{color:#5c3e1a !important;}
body.light-mode .sati-canvas-sub{color:#8a7050 !important;}
body.light-mode .sati-canvas-body{background:#f2ead6 !important;}
body.light-mode .pitem{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .pitem:hover{background:rgba(30,85,53,.08) !important;border-left-color:#1e5535 !important;}
body.light-mode .pitem.active{background:rgba(30,85,53,.12) !important;border-left-color:#1e5535 !important;}
body.light-mode .pitem-pali{color:#5c3e1a !important;}
body.light-mode .pitem-en{color:#8a7050 !important;}
body.light-mode .pitem-num{color:#1e5535 !important;}
body.light-mode .pi-n{color:#1e5535 !important;}
body.light-mode #ef-section .pg-roman{color:#1e5535 !important;}
/* ── Canvas side panels (sati, padhana, samconc, jhana) ── */
body.light-mode #sati-canvas-panel,
body.light-mode #padhana-canvas-panel,
body.light-mode #samconc-canvas-panel,
body.light-mode #jhana-canvas-panel,
body.light-mode #virati-canvas-panel{
background:#f2ead6 !important;border-color:#d4c09a !important;
}
body.light-mode .sati-canvas-title{color:#5c3e1a !important;}
body.light-mode .sati-canvas-title em{color:#3d2e1a !important;}
body.light-mode .sati-canvas-sub{color:#8a7050 !important;}
body.light-mode .sati-canvas-close{border-color:#d4c09a !important;color:#8a7050 !important;}
body.light-mode .sati-canvas-close:hover{border-color:#a07840 !important;color:#5c3e1a !important;}
body.light-mode .sati-canvas-item{background:#f2ead6 !important;border-color:#d4c09a !important;border-left-color:rgba(30,85,53,.55) !important;}
body.light-mode .sati-canvas-item:hover{background:rgba(30,85,53,.08) !important;border-left-color:#1e5535 !important;}
body.light-mode .sati-canvas-item.active{background:rgba(30,85,53,.12) !important;border-left-color:#1e5535 !important;}
body.light-mode .sci-num{color:#1e5535 !important;}
body.light-mode .sci-pali{color:#5c3e1a !important;}
body.light-mode .sci-en{color:#8a7050 !important;}
body.light-mode .jhana-section-hdr{border-bottom-color:#d4c09a !important;}
/* ── Onboarding light mode ── */
body.light-mode #onboarding-overlay{background:rgba(200,192,174,.88);}
body.light-mode #step-card{background:#f2ead6;border-color:rgba(160,120,64,.35);box-shadow:0 24px 80px rgba(0,0,0,.2);}
body.light-mode #step-card::before{background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);}
body.light-mode .step-heading{color:var(--gold-light);}
body.light-mode .step-sub{color:var(--muted);}
body.light-mode .step-body{color:var(--cream);}
body.light-mode .step-actions{border-top-color:rgba(160,120,64,.2);}
body.light-mode .btn-next{background:rgba(160,120,64,.15);border-color:var(--gold-dim);color:var(--gold-light);}
body.light-mode .btn-next:hover{background:rgba(160,120,64,.25);}
body.light-mode .btn-back{color:var(--muted);}
body.light-mode .btn-skip{color:var(--muted);}
body.light-mode .lang-opt{background:rgba(160,120,64,.06);border-color:rgba(160,120,64,.2);color:var(--cream);}
body.light-mode .lang-opt:hover{border-color:var(--gold-dim);background:rgba(160,120,64,.12);}
body.light-mode .lang-opt.selected{border-color:var(--gold);background:rgba(160,120,64,.18);}
body.light-mode .lang-pali{color:var(--gold-light);}
body.light-mode .lang-native{color:var(--muted);}
body.light-mode .hint-row{border-bottom-color:rgba(160,120,64,.12);}
body.light-mode .hint-key{color:var(--cream);}
body.light-mode .hint-desc{color:var(--muted);}
body.light-mode .hint-icon{color:var(--gold-dim);}
body.light-mode .step-dot{background:rgba(160,120,64,.2);}
body.light-mode .step-dot.active{background:var(--gold);}
body.light-mode .step-dot.done{background:rgba(160,120,64,.4);}
body.light-mode #step-label{color:var(--muted);}
body.light-mode .ob-s5-warning{background:rgba(160,60,50,.08);border-color:rgba(160,60,50,.2);}
body.light-mode .ob-s5-title{color:var(--rust);}
body.light-mode .ob-s5-body{color:var(--cream);}
body.light-mode .sec-col{border-left-color:currentColor;}
body.light-mode .ob-s4-intro{color:var(--muted);}
body.light-mode .sec-title{color:var(--cream);}
body.light-mode .sec-dir{color:var(--muted);}
body.light-mode .sec-desc{color:var(--muted);}
body.light-mode .ob-quote{color:var(--gold-light);}
body.light-mode .ob-quote-tr{color:var(--muted);}
body.light-mode .ob-mode-card{border-color:rgba(160,120,64,.25);}
body.light-mode .ob-mode-card:hover{border-color:rgba(160,120,64,.5);background:rgba(160,120,64,.06);}
body.light-mode .ob-mode-card.ob-mode-selected{border-color:var(--gold);background:rgba(160,120,64,.12);}
body.light-mode .ob-mode-name{color:var(--gold-light);}
/* ── Step 4 section cards in light mode ── */
/* ── Step 4 map section cards in light mode ── */
body.light-mode .map-section:nth-child(1) .msec-body{background:rgba(80,90,200,.12) !important;}
body.light-mode .map-section:nth-child(2) .msec-body{background:rgba(180,130,40,.12) !important;}
body.light-mode .map-section:nth-child(3) .msec-body{background:rgba(40,100,110,.12) !important;}
body.light-mode .msec-title{color:#2a1e0e !important;}
body.light-mode .msec-desc{color:#3d2e1a !important;}
body.light-mode .msec-desc em{color:#2a1e0e !important;font-style:italic;}
body.light-mode .msec-dir{opacity:1 !important;}
body.light-mode .map-section:nth-child(1) .msec-dir{color:#5060c0 !important;}
body.light-mode .map-section:nth-child(2) .msec-dir{color:#a07830 !important;}
body.light-mode .map-section:nth-child(3) .msec-dir{color:#2a7888 !important;}
body.light-mode .map-section:nth-child(1) .msec-top-bar{opacity:0.6 !important;}
body.light-mode .map-section:nth-child(2) .msec-top-bar{opacity:0.6 !important;}
body.light-mode .map-section:nth-child(3) .msec-top-bar{opacity:0.6 !important;}
body.light-mode .msec-desc{color:#4a3520 !important;}
body.light-mode .msec-desc em{color:#2a1e0e !important;}
body.light-mode .msec-dir{opacity:.9;}
/* Mode row in light mode */
body.light-mode .ob-mode-row{background:rgba(160,120,64,.06);border-color:rgba(160,120,64,.22);}
body.light-mode .ob-mode-label{color:#8a7050;}
body.light-mode .ob-mode-label:hover{color:#3d2e1a;}
body.light-mode .ob-mode-label.ob-mode-label-active{color:#3d2e1a;background:rgba(160,120,64,.12);}
body.light-mode .ob-toggle-wrap{border-color:rgba(160,120,64,.18);}
body.light-mode .ob-toggle-pill{background:rgba(160,120,64,.22);border-color:rgba(160,120,64,.45);}
body.light-mode .ob-toggle-pill.ob-dark-pill{background:rgba(64,80,160,.22);border-color:rgba(64,80,160,.4);}
body.light-mode .ob-toggle-knob{background:#a07840;box-shadow:0 2px 4px rgba(0,0,0,.15);}
body.light-mode .ob-toggle-pill.ob-dark-pill .ob-toggle-knob{background:#4050a0;}
body.light-mode .ob-enter-body{color:var(--muted);}
/* ── CVP table kalapa backgrounds in light mode ── */
body.light-mode #cvpConceptModal td[data-type="kamma"][data-fill="start"]{background:rgba(162,128,75,.75) !important;}
body.light-mode #cvpConceptModal td[data-type="kamma"][data-fill="mid"] {background:rgba(162,128,75,.60) !important;}
body.light-mode #cvpConceptModal td[data-type="kamma"][data-fill="end"] {background:rgba(162,128,75,.45) !important;}
body.light-mode #cvpConceptModal td[data-type="utu"][data-fill="start"] {background:rgba(54,80,64,.75) !important;}
body.light-mode #cvpConceptModal td[data-type="utu"][data-fill="mid"] {background:rgba(54,80,64,.60) !important;}
body.light-mode #cvpConceptModal td[data-type="utu"][data-fill="end"] {background:rgba(54,80,64,.45) !important;}
body.light-mode #cvpConceptModal td[data-type="citta"][data-fill="start"]{background:rgba(32,40,96,.75) !important;}
body.light-mode #cvpConceptModal td[data-type="citta"][data-fill="mid"] {background:rgba(32,40,96,.60) !important;}
body.light-mode #cvpConceptModal td[data-type="citta"][data-fill="end"] {background:rgba(32,40,96,.45) !important;}
body.light-mode #cvpConceptModal td[data-type="ahara"][data-fill="start"]{background:rgba(120,50,50,.75) !important;}
body.light-mode #cvpConceptModal td[data-type="ahara"][data-fill="mid"] {background:rgba(120,50,50,.60) !important;}
body.light-mode #cvpConceptModal td[data-type="ahara"][data-fill="end"] {background:rgba(120,50,50,.45) !important;}
/* ── abhi-item (nibbāna, tilakkhana, bhāvanā, paccaya boxes) ── */
body.light-mode .abhi-item{background:#f2ead6 !important;border-color:#d4c09a !important;border-left-color:rgba(26,104,120,.5) !important;}
body.light-mode .abhi-item:hover{background:rgba(26,104,120,.08) !important;border-left-color:#1a6878 !important;}
body.light-mode .abhi-item.active{background:rgba(26,104,120,.13) !important;border-left-color:#1a6878 !important;}
body.light-mode .abhi-num{color:#1a6878 !important;}
body.light-mode .abhi-pali{color:#5c3e1a !important;}
body.light-mode .abhi-en{color:#8a7050 !important;}
/* ── niv-entry (pañca nīvaraṇa) ── */
body.light-mode .nivarana-panel{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .niv-head{background:#f2ead6 !important;border-bottom-color:#d4c09a !important;}
body.light-mode .niv-title{color:#5c3e1a !important;}
body.light-mode .niv-title em{color:#3d2e1a !important;}
body.light-mode .niv-subtitle{color:#8a7050 !important;}
body.light-mode .niv-close{border-color:#d4c09a !important;color:#8a7050 !important;}
body.light-mode .niv-entry{background:#f2ead6 !important;border-color:#d4c09a !important;border-left-color:rgba(180,20,20,.6) !important;}
body.light-mode .niv-entry:hover{background:rgba(180,20,20,.07) !important;border-left-color:#b01010 !important;}
body.light-mode .niv-num{color:#b01010 !important;}
body.light-mode .niv-pali{color:#5c3e1a !important;}
body.light-mode .niv-en{color:#8a7050 !important;}
/* ── khandha-box containing nibbāna/tilakkhana/bhāvanā (inline background) ── */
body.light-mode #nibbana-box,
body.light-mode #TiLakkhana-box,
body.light-mode #bhavana-box,
body.light-mode #paccayaniddesa-box{background:#f2ead6 !important;border-color:#d4c09a !important;}
body.light-mode .plane-item{background:#f2ead6 !important;border-color:#d4c09a !important;border-left-color:rgba(70,85,180,.6) !important;}
body.light-mode .plane-item:hover{background:rgba(100,115,210,.07) !important;border-left-color:#3a4aaa !important;}
body.light-mode .plane-pali{color:#5c3e1a !important;}
body.light-mode .plane-en{color:#8a7050 !important;}
body.light-mode #planes-list .pg-roman{color:#3a4aaa !important;}
body.light-mode .plane-num{color:#3a4aaa !important;}
/* ── sati-canvas-item: panel-specific high-specificity overrides ── */
body.light-mode #jhana-canvas-panel .sati-canvas-item,
body.light-mode #sati-canvas-panel .sati-canvas-item,
body.light-mode #padhana-canvas-panel .sati-canvas-item,
body.light-mode #samconc-canvas-panel .sati-canvas-item,
body.light-mode #virati-canvas-panel .sati-canvas-item{background:#f2ead6 !important;border-color:#d4c09a !important;border-left-color:rgba(30,85,53,.55) !important;}
body.light-mode #jhana-canvas-panel .sati-canvas-item:hover,
body.light-mode #sati-canvas-panel .sati-canvas-item:hover,
body.light-mode #padhana-canvas-panel .sati-canvas-item:hover,
body.light-mode #samconc-canvas-panel .sati-canvas-item:hover,
body.light-mode #virati-canvas-panel .sati-canvas-item:hover{background:rgba(30,85,53,.08) !important;border-left-color:#1e5535 !important;}
body.light-mode #jhana-canvas-panel .sci-pali,body.light-mode #sati-canvas-panel .sci-pali,body.light-mode #padhana-canvas-panel .sci-pali,body.light-mode #samconc-canvas-panel .sci-pali,body.light-mode #virati-canvas-panel .sci-pali{color:#5c3e1a !important;}
body.light-mode #jhana-canvas-panel .sci-en,body.light-mode #sati-canvas-panel .sci-en,body.light-mode #padhana-canvas-panel .sci-en,body.light-mode #samconc-canvas-panel .sci-en,body.light-mode #virati-canvas-panel .sci-en{color:#8a7050 !important;}
body.light-mode #jhana-canvas-panel .sci-num,body.light-mode #sati-canvas-panel .sci-num,body.light-mode #padhana-canvas-panel .sci-num,body.light-mode #samconc-canvas-panel .sci-num,body.light-mode #virati-canvas-panel .sci-num{color:#1e5535 !important;}
body.light-mode .jhana-section-hdr{background:#f2ead6 !important;}
body.light-mode .jhsh-pali{color:#5c3e1a !important;}
body.light-mode .jhsh-en{color:#8a7050 !important;}
/* ── plane-item (Bhavacakka) ── */
/* ── bjcard with container selectors ── */
body.light-mode #bojjhanga-section .bjcard,body.light-mode #paramita-cards-container .bjcard,body.light-mode #visuddhi-cards-container .bjcard{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 6px rgba(0,0,0,.08) !important;}
body.light-mode #bojjhanga-section .bjcard:hover,body.light-mode #paramita-cards-container .bjcard:hover,body.light-mode #visuddhi-cards-container .bjcard:hover{background:rgba(122,90,16,.07) !important;border-color:#6b3d00 !important;}
body.light-mode #bojjhanga-section .bj-pali,body.light-mode #paramita-cards-container .bj-pali,body.light-mode #visuddhi-cards-container .bj-pali{color:#5c3e1a !important;}
body.light-mode #bojjhanga-section .bj-en,body.light-mode #paramita-cards-container .bj-en,body.light-mode #visuddhi-cards-container .bj-en{color:#8a7050 !important;}
body.light-mode #bojjhanga-section .bj-ord,body.light-mode #paramita-cards-container .bj-ord,body.light-mode #visuddhi-cards-container .bj-ord{color:#6b3d00 !important;}
/* ── mpb-card with container selectors ── */
body.light-mode #indriya-box .mpb-card,body.light-mode #bala-box .mpb-card,body.light-mode #iddhipada-box .mpb-card{border-color:#d4c09a !important;border-left-color:rgba(30,85,53,.55) !important;}
body.light-mode #indriya-box .mpb-card:hover,body.light-mode #bala-box .mpb-card:hover,body.light-mode #iddhipada-box .mpb-card:hover{background:rgba(30,85,53,.08) !important;border-left-color:#1e5535 !important;}
/* ── Citta table node container ── */
body.light-mode #citta-table-node{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 10px rgba(0,0,0,.1) !important;}
body.light-mode .citta-sep-col{background:var(--surface) !important;}
/* thead */
body.light-mode table.citta-tbl thead th{background:var(--surface2) !important;color:#5c3e1a !important;}
body.light-mode table.citta-tbl thead th.citta-colspan-header{color:#5c3e1a !important;border-bottom-color:#a07840 !important;}
/* td/th borders */
body.light-mode table.citta-tbl th,
body.light-mode table.citta-tbl td{border-color:#d4c09a !important;color:#3d2e1a !important;background:#f2ead6 !important;}
/* row headers */
body.light-mode table.citta-tbl th.citta-rowhead-main{background:var(--surface2) !important;color:#5c3e1a !important;}
body.light-mode table.citta-tbl th.citta-rowhead-sub{background:var(--surface2) !important;color:#5c3e1a !important;}
body.light-mode table.citta-tbl .citta-tbl-title-cell{background:var(--surface2) !important;color:#5c3e1a !important;border-color:#d4c09a !important;}
/* total row */
body.light-mode table.citta-tbl .citta-total-row td,
body.light-mode table.citta-tbl .citta-total-row th{background:var(--surface2) !important;color:#5c3e1a !important;border-top-color:#a07840 !important;}
/* hover */
body.light-mode table.citta-tbl tbody tr:hover td,
body.light-mode table.citta-tbl tbody tr:hover th{background:rgba(160,120,64,.08) !important;}
/* clickable cells */
body.light-mode table.citta-tbl td.citta-cell[data-citta-key],
body.light-mode table.citta-tbl th[data-citta-key],
body.light-mode table.citta-tbl th.citta-rowhead[data-citta-key]{color:#5c3e1a !important;}
body.light-mode table.citta-tbl td.citta-cell[data-citta-key]:hover,
body.light-mode table.citta-tbl th[data-citta-key]:hover,
body.light-mode table.citta-tbl th.citta-rowhead[data-citta-key]:hover{background:rgba(160,120,64,.15) !important;}
/* numbers */
body.light-mode table.citta-tbl td.citta-num{color:#6a5030 !important;}
body.light-mode table.citta-tbl td.citta-empty{color:#c0b090 !important;}
/* ── Cetasika table ── */
body.light-mode table.cet-tbl thead th{background:var(--surface2) !important;color:#5c3e1a !important;}
body.light-mode table.cet-tbl th,
body.light-mode table.cet-tbl td{border-color:#d4c09a !important;color:#3d2e1a !important;background:#f2ead6 !important;}
body.light-mode table.cet-tbl tbody tr:hover td,
body.light-mode table.cet-tbl tbody tr:hover th{background:rgba(160,120,64,.08) !important;}
body.light-mode table.citta-tbl td.cet-num{color:#6a5030 !important;}
/* ── Arahant separator row & filler cells ── */
body.light-mode tr[style*="rgba(24,28,40"]{background:var(--surface2) !important;}
body.light-mode .citta-total-cell,
body.light-mode .cet-total-cell{background:var(--surface2) !important;border-color:#d4c09a !important;}
body.light-mode table.citta-tbl .citta-total-cell,
body.light-mode table.citta-tbl .cet-total-cell{background:var(--surface2) !important;}
body.light-mode td[data-citta-key="citta-include-arahant"]{background:#e8dfc8 !important;border-color:#d4c09a !important;color:#5c3e1a !important;}
body.light-mode td[data-citta-key="citta-include-arahant"] span{color:#8a7050 !important;}
/* ── cet-rowhead (two dark cells in cetasika section) ── */
body.light-mode table.cet-tbl th.cet-rowhead,
body.light-mode table.citta-tbl th.cet-rowhead{background:var(--surface2) !important;color:#5c3e1a !important;}
body.light-mode .cet-tbl-title-cell{background:var(--surface2) !important;color:#5c3e1a !important;border-color:#d4c09a !important;}
/* ── Citta/Cetasika table title cell subtitles ── */
body.light-mode .citta-tbl-title-cell span,
body.light-mode .cet-tbl-title-cell span{color:#8a7050 !important;}
/* ── Expand Concept button — darker text ── */
body.light-mode .expand-concept-btn{
background:rgba(58,112,80,.18) !important;
border:2px solid #3a7050 !important;
color:#0e2818 !important;
font-weight:700 !important;
}
body.light-mode .expand-concept-btn:hover{
background:rgba(58,112,80,.30) !important;
color:#0a1e10 !important;
}
/* ── rupaExpandBtn (•◀ icon) ── */
body.light-mode #rupaExpandBtn{
background:rgba(58,112,80,.18) !important;
border:2px solid #3a7050 !important;
color:#0e2818 !important;
}
body.light-mode #rupaExpandBtn:hover{
background:rgba(58,112,80,.30) !important;
color:#0a1e10 !important;
}
/* ── Paticca-samuppada zone bands (SVG rects — override via filter) ── */
body.light-mode #canvas-wrap svg rect[fill="rgba(22,28,82,.22)"]{fill:rgba(64,80,200,.08) !important;}
body.light-mode #canvas-wrap svg rect[fill="rgba(50,38,8,.15)"]{fill:rgba(180,140,40,.08) !important;}
body.light-mode #canvas-wrap svg rect[fill="rgba(110,62,8,.28)"]{fill:rgba(180,100,20,.12) !important;}
body.light-mode #canvas-wrap svg rect[fill="rgba(68,18,8,.22)"]{fill:rgba(180,60,40,.08) !important;}
/* Header band rects */
/* SVG zone bands handled via JS */
/* ── tz-name and tz-life text — ensure visibility on light bg ── */
body.light-mode .tz-past .tz-name{color:#fff !important;}
body.light-mode .tz-past .tz-life{color:rgba(255,255,255,.8) !important;}
body.light-mode .tz-pr .tz-name{color:#fff !important;}
body.light-mode .tz-pr .tz-life{color:rgba(255,255,255,.8) !important;}
body.light-mode .tz-pc .tz-name{color:#fff !important;}
body.light-mode .tz-pc .tz-life{color:rgba(255,255,255,.8) !important;}
body.light-mode .tz-fut .tz-name{color:#fff !important;}
body.light-mode .tz-fut .tz-life{color:rgba(255,255,255,.8) !important;}
/* ── pst-sub (subtitle under titles) ── */
body.light-mode .pst-sub{color:#6a5030 !important;}
body.light-mode .khandha-box-sub{color:#6a5030 !important;}
body.light-mode .mpb-box-sub{color:#6a5030 !important;}
body.light-mode .sati-canvas-sub{color:#6a5030 !important;}
body.light-mode .sci-en{color:#6a5030 !important;}
/* ── psExpandConceptBtn and ALL expand-concept-btn — darker text ── */
body.light-mode #psExpandConceptBtn,
body.light-mode .expand-concept-btn{
background:rgba(58,112,80,.2) !important;
border:2px solid #2a6040 !important;
color:#0a2010 !important;
font-weight:700 !important;
}
body.light-mode #psExpandConceptBtn:hover,
body.light-mode .expand-concept-btn:hover{
background:rgba(58,112,80,.32) !important;
color:#061408 !important;
}
/* ── cet-rowhead (the 2 remaining dark cetasika cells) — force override ── */
body.light-mode table.cet-tbl th.cet-rowhead,
body.light-mode table.citta-tbl th.cet-rowhead{
background:var(--surface2) !important;
color:#5c3e1a !important;
border-color:#d4c09a !important;
}
/* ── samu-filter-btn — match vittana/sankhara icon style ── */
body.light-mode .samu-filter-btn{
background:rgba(58,112,80,.18) !important;
border:2px solid #3a7050 !important;
color:#1a4030 !important;
}
body.light-mode .samu-filter-btn:hover{
background:rgba(58,112,80,.30) !important;
color:#0e2820 !important;
}
body.light-mode .samu-filter-btn.active{
background:rgba(58,112,80,.38) !important;
border-color:#1a4030 !important;
color:#0a1e10 !important;
box-shadow:none !important;
}
body.light-mode .samu-filter-btn svg{stroke:#1a4030 !important;}
/* ── samu-filter-btn (circular filter icons on samutthana) ── */
body.light-mode .samu-filter-btn{
background:transparent;
border-color:#2a8898;
color:rgba(42,136,152,.5);
}
body.light-mode .samu-filter-btn:hover{
background:rgba(42,136,152,.12);
color:rgba(42,136,152,.85);
}
/* REPLACED */
background:rgba(42,136,152,.20);
box-shadow:0 0 7px rgba(42,136,152,.3);
color:#2a8898;
}
body.light-mode table.citta-tbl td[data-cet-key]:hover,
body.light-mode table.citta-tbl th[data-cet-key]:hover{background:rgba(160,120,64,.15) !important;}
/* ── Citta Vīthi bar ── */
body.light-mode #citta-vithi-bar{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 10px rgba(0,0,0,.1) !important;}
body.light-mode .vithi-segment:hover{background:rgba(160,120,64,.08);}
/* ── Vithi bar: text colour differentiation in light mode ── */
body.light-mode .vithi-segment[data-vithi="patisandhi"] div,
body.light-mode .vithi-segment[data-vithi="cuti"] div{color:#2a1e0e !important;}
body.light-mode .vithi-segment[data-vithi="bhavanga"] div,
body.light-mode .vithi-segment[data-vithi="bhavanga-stream"] div{color:#4a3520 !important;}
body.light-mode .vithi-segment[data-vithi="mano-dvara"] div,
body.light-mode .vithi-segment[data-vithi="panca-dvara"] div,
body.light-mode .vithi-segment[data-vithi="mano-dvara-maranasanna"] div{color:#2a3578 !important;}
body.light-mode .vithi-segment:hover div{color:#3d2e1a !important;}
/* ── Āyatana/Dhātu table ── */
body.light-mode #ayatana-table-node{background:#f2ead6 !important;border-color:#d4c09a !important;box-shadow:0 2px 10px rgba(0,0,0,.1) !important;}
body.light-mode #ayatana-table-node [data-key="salayatana"]{color:#2a1e0e !important;}
/* ── Citta hover panel highlight rows ── */
body.light-mode .citta-tbl td.kamma-hl,
body.light-mode .citta-tbl th.kamma-hl{background:rgba(160,120,64,.18) !important;}
body.light-mode .citta-tbl td.vithi-hl,
body.light-mode .citta-tbl th.vithi-hl{background:rgba(58,112,80,.15) !important;}
body.light-mode .jhana-section-hdr em{color:#5c3e1a !important;}
body.light-mode .jhana-section-sub{color:#8a7050 !important;}
/* ── Light mode: inline-style expand buttons (khandha box etc.) ── */
body.light-mode #vittanaExpandBtn,
body.light-mode #sankharaExpandBtn,
body.light-mode #sannhaExpandBtn,
body.light-mode #vedanaExpandBtn{
background:rgba(58,112,80,.12) !important;
border-color:#3a7050 !important;
color:#3a7050 !important;
}
body.light-mode #vittanaExpandBtn:hover,
body.light-mode #sankharaExpandBtn:hover,
body.light-mode #sannhaExpandBtn:hover,
body.light-mode #vedanaExpandBtn:hover{
background:rgba(58,112,80,.22) !important;
border-color:#2a5040 !important;
color:#2a5040 !important;
}
/* Ariya items */
body.light-mode .ariya-item{background:#f2ead6;border-color:#d4c09a;border-left-color:rgba(70,85,180,.6);}
body.light-mode .ariya-item:hover{background:rgba(100,115,210,.07);border-left-color:#3a4aaa;}
body.light-mode .ariya-item.active{background:rgba(100,115,210,.12);border-left-color:#3a4aaa;}
body.light-mode .ariya-num{color:#3a4aaa;}
body.light-mode .ariya-pali{color:#3d2e1a;}
body.light-mode .ariya-en{color:#8a7050;}
body.light-mode #visual-tweaks-fab{
background:#f2ead6;border:1px solid #d4c09a;color:#5c3e1a;
border-radius:50%;box-shadow:none;
}
body.light-mode #visual-tweaks-fab:hover{
border-color:#a07840;color:#3d2e1a;
box-shadow:none;transform:rotate(45deg);
}
body.light-mode .zbtn{background:#f2ead6;border-color:#d4c09a;color:#5c3e1a;}
body.light-mode .zbtn:hover{background:#e8dfc8;border-color:#a07840;color:#3d2e1a;}
body.light-mode #zlvl{background:#f2ead6;border-color:#d4c09a;color:#8a7050;}
body.light-mode #visual-tweaks-panel{
background:#f2ead6;border-color:#d4c09a;color:#2a1e0e;
box-shadow:0 8px 24px rgba(0,0,0,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--cream);font-family:'Crimson Pro',Georgia,serif;}
/* ══ CITTA TABLE ══ */
#ayatana-table-node td[data-key]:hover {
background:var(--teal-hover);
border-left:3px solid var(--teal);
padding-left:13px;
}
#ayatana-table-node td[data-key] { border-left:3px solid var(--teal-dim); padding-left:13px; transition: background .15s, border-left-color .15s; }
#citta-table-node{
position:absolute;left:3745px;top:20px;
background:rgba(14,18,26,.93);
border:1px solid var(--border);
border-radius:4px;
z-index:8;
font-family:'Crimson Pro',Georgia,serif;
box-shadow:0 6px 24px rgba(0,0,0,.6);
overflow:visible;
width:auto;
}
.citta-tbl-wrap{ overflow:visible; }
/* Arahant separator row — dark mode background (was inline) */
.citta-total-cell,.cet-total-cell{background:var(--surface2);}
.citta-sep-col{
width:18px;
min-width:18px;
background:var(--surface) !important;
border:none !important;
padding:0 !important;
}
table.citta-tbl{
border-collapse:collapse;
width:100%;
font-size:30px;
font-family:'Cormorant Garamond',serif;
color:var(--cream);
}
table.citta-tbl th,
table.citta-tbl td{
border:1px solid rgba(48,52,72,.9);
padding:8px 12px;
text-align:center;
line-height:1.35;
}
table.citta-tbl thead th{
background:var(--surface2);
color:var(--gold-light);
font-weight:500;
letter-spacing:.04em;
font-size:.95rem;
}
table.citta-tbl thead th.citta-sep-col,
table.citta-tbl tbody td.citta-sep-col{background:var(--surface) !important;}
table.citta-tbl thead th[data-citta-key],
table.citta-tbl thead th[data-cet-key]{
cursor:pointer;
}
table.citta-tbl thead th.citta-colspan-header{
border-bottom:1px solid var(--gold-dim);
cursor:pointer;
font-size:30px;
font-family:'Cormorant Garamond',serif;
font-weight:400;
color:var(--gold-light);
}
table.citta-tbl tbody tr:hover td,
table.citta-tbl tbody tr:hover th{
background:rgba(201,169,110,.08);
}
table.citta-tbl td.citta-cell[data-citta-key],
table.citta-tbl th.citta-rowhead[data-citta-key],
table.citta-tbl th.citta-rowhead-sub[data-citta-key],
table.citta-tbl th.citta-rowhead-main[data-citta-key],
table.citta-tbl th[data-citta-key]{
cursor:pointer;
font-size:30px;
font-family:'Cormorant Garamond',serif;
font-weight:400;
color:var(--gold-light);
}
table.citta-tbl td.citta-cell[data-citta-key]:hover,
table.citta-tbl th.citta-rowhead[data-citta-key]:hover,
table.citta-tbl th.citta-rowhead-sub[data-citta-key]:hover,
table.citta-tbl th.citta-rowhead-main[data-citta-key]:hover{
background:rgba(201,169,110,.18);
color:var(--gold-light);
}
table.citta-tbl td.citta-num{
font-variant-numeric:tabular-nums;
font-weight:600;
color:var(--muted);
font-size:30px !important;
font-family:'Cormorant Garamond',serif !important;
}
table.citta-tbl td.citta-num[data-citta-key]:hover{
color:#fff;
}
table.citta-tbl td.citta-empty{ color:var(--muted);opacity:.3; }
table.citta-tbl .citta-total-row td,
table.citta-tbl .citta-total-row th{
background:var(--surface2);
color:var(--gold);
font-weight:600;
font-size:30px;
font-family:'Cormorant Garamond',serif;
border-top:2px solid var(--gold-dim);
}
table.citta-tbl th.citta-rowhead-main{
background:var(--surface2);
color:var(--gold-light);
font-weight:400;
font-style:normal;
text-align:left;
font-size:30px;
font-family:'Cormorant Garamond',serif;
padding-left:14px;
cursor:pointer;
}
table.citta-tbl th.citta-rowhead-sub{
background:var(--surface2);
color:var(--gold-light);
font-weight:400;
text-align:left;
font-size:30px;
font-family:'Cormorant Garamond',serif;
padding-left:14px;
cursor:pointer;
}
/* Cittas title cell */
.citta-tbl-title-cell{
background:var(--surface2) !important;
font-family:'Cormorant Garamond',serif;
font-size:30px;font-weight:500;
color:var(--gold-light);letter-spacing:.04em;
text-align:center;
vertical-align:middle;
cursor:pointer;
border-right:2px solid var(--teal-border) !important;
border-bottom:2px solid var(--teal-border) !important;
}
/* ══ CETASIKA TABLE ══ */
table.cet-tbl{
border-collapse:collapse;
width:100%;
font-size:1rem;
color:var(--gold-light);
}
table.cet-tbl th,
table.cet-tbl td{
border:1px solid rgba(48,52,72,.9);
padding:8px 12px;
text-align:center;
line-height:1.35;
}
table.cet-tbl thead th{
background:rgba(24,28,40,.95);
color:var(--gold-light);
font-weight:500;
letter-spacing:.04em;
font-size:.95rem;
}
table.cet-tbl tbody tr:hover td,
table.cet-tbl tbody tr:hover th{
background:rgba(201,169,110,.08);
}
table.citta-tbl td[data-cet-key],
table.citta-tbl th[data-cet-key]{
cursor:pointer;
}
table.citta-tbl td[data-cet-key]:hover,
table.citta-tbl th[data-cet-key]:hover{
background:rgba(201,169,110,.18);
color:var(--gold-light);
}
table.citta-tbl td.cet-num{
font-variant-numeric:tabular-nums;
font-weight:600;
color:var(--muted);
font-size:30px;
font-family:'Cormorant Garamond',serif;
}
table.citta-tbl td.cet-num[data-cet-key]:hover{ color:#fff; }
table.citta-tbl td.cet-empty{ color:var(--muted);opacity:.3; }
table.citta-tbl .cet-total-row td,
table.citta-tbl .cet-total-row th{
background:rgba(24,28,40,.98);
color:var(--gold);
font-weight:600;
border-top:2px solid var(--gold-dim);
}
table.cet-tbl th.cet-rowhead,
table.citta-tbl th.cet-rowhead{
background:var(--surface2);
color:var(--gold-light);
font-weight:400;
text-align:left;
font-size:30px;
font-family:'Cormorant Garamond',serif;
padding-left:14px;
}
.cet-tbl-title-cell{
background:var(--surface2) !important;
font-family:'Cormorant Garamond',serif;
font-size:30px;font-weight:500;
color:var(--gold-light);letter-spacing:.04em;
text-align:center;
vertical-align:middle;
cursor:pointer;
border-right:2px solid var(--teal-border) !important;
border-bottom:2px solid var(--teal-border) !important;
}
.cet-divider-row td{
font-size:.95rem;color:var(--muted);font-style:italic;
text-align:center;padding:5px 8px;
background:var(--surface2) !important;
border:1px solid rgba(48,52,72,.9);
}
/* Citta hover tooltip */
#citta-hover-panel{
position:fixed;
display:none;
width:260px;
background:var(--surface);
border:1px solid var(--border);
border-left:3px solid var(--gold);
border-radius:3px;
padding:14px 16px;
z-index:9000;
box-shadow:0 6px 20px rgba(0,0,0,.7);
pointer-events:none;
font-family:'Crimson Pro',Georgia,serif;
}
#citta-hover-panel.visible{ display:block; }
.chp-cat{
font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--gold-dim);margin-bottom:4px;
}
.chp-title{
font-family:'Cormorant Garamond',serif;
font-size:1.05rem;color:var(--gold-light);margin-bottom:4px;
}
.chp-sub{ font-size:.8rem;color:var(--muted);font-style:italic;margin-bottom:8px; }
.chp-body{ font-size:.8rem;color:var(--cream);line-height:1.5; }
.chp-click-hint{
margin-top:8px;font-size:.68rem;letter-spacing:.08em;
color:var(--gold-dim);text-transform:uppercase;
border-top:1px solid var(--border);padding-top:6px;
}
#topbar{
position:fixed;top:0;left:0;right:0;height:50px;
background:rgba(7,9,13,.97);border-bottom:1px solid var(--border);
display:flex;align-items:center;padding:0 20px;z-index:100;gap:10px;
}
.tb-wheel{font-size:1.4rem;opacity:.75;}
.tb-title{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--gold-light);font-weight:400;letter-spacing:.04em;}
.tb-sep{color:var(--muted);}
.tb-canon{font-size:.8rem;color:var(--muted);font-style:italic;letter-spacing:.1em;}
#tb-info-wrap{position:relative; margin-left:auto;}
#tb-info-btn{
background:none; border:1px solid rgba(201,169,110,.28);
color:var(--muted); cursor:pointer;
width:28px; height:28px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
transition:color .18s, border-color .18s, background .18s;
font-family:inherit;
}
#tb-info-btn:hover, #tb-info-btn[aria-expanded="true"]{
color:var(--gold-light); border-color:var(--gold-dim); background:rgba(201,169,110,.08);
}
#tb-info-popover{
position:absolute; top:calc(100% + 6px); right:0;
min-width:180px;
background:linear-gradient(180deg, rgba(36,30,24,.98) 0%, rgba(24,20,16,.98) 100%);
border:1px solid rgba(201,169,110,.35);
border-radius:4px;
box-shadow:0 12px 32px rgba(0,0,0,.5);
padding:8px 0;
z-index:150;
animation:srch-slide .15s ease-out;
}
.tb-info-item{
display:flex; align-items:center; gap:10px;
padding:6px 14px;
font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted);
font-family:'Cormorant Garamond',serif;
}
.tb-info-item kbd{
background:var(--surface2); border:1px solid var(--border); color:var(--gold-dim);
padding:2px 7px; border-radius:2px; font-size:.65rem; font-family:inherit;
min-width:44px; text-align:center;
}
.tb-sep-bar{width:1px;height:24px;background:rgba(201,169,110,.25);flex-shrink:0;}
/* ══ LANGUAGE DROPDOWN ══ */
#lang-sel{position:relative;margin-left:14px;border-left:1px solid var(--border);padding-left:14px;}
#lang-current{
display:flex; align-items:center; gap:6px;
background:none; border:1px solid rgba(201,169,110,.3);
color:var(--gold-light); cursor:pointer;
padding:4px 10px; font-size:.75rem; letter-spacing:.08em;
border-radius:3px; font-family:inherit;
transition:border-color .2s, background .2s;
}
#lang-current:hover, #lang-current[aria-expanded="true"]{
border-color:var(--gold); background:rgba(201,169,110,.08);
}
#lang-current svg{ opacity:.7; transition:transform .18s; }
#lang-current[aria-expanded="true"] svg{ transform:rotate(180deg); }
#lang-menu{
position:absolute; top:calc(100% + 4px); right:0;
min-width:140px;
background:linear-gradient(180deg, rgba(36,30,24,.98) 0%, rgba(24,20,16,.98) 100%);
border:1px solid rgba(201,169,110,.35);
border-radius:4px;
box-shadow:0 12px 32px rgba(0,0,0,.5);
padding:4px 0;
z-index:150;
animation:srch-slide .15s ease-out;
}
.lang-opt{
display:flex; align-items:center; gap:10px; width:100%;
background:none; border:none; text-align:left;
color:rgba(238,221,184,.75); cursor:pointer;
padding:8px 14px; font-family:inherit; font-size:.85rem;
letter-spacing:.02em;
transition:background .12s, color .12s;
}
.lang-opt:hover{ background:rgba(201,169,110,.1); color:var(--gold-light); }
.lang-opt.active{ color:var(--gold); background:rgba(201,169,110,.06); }
.lang-opt-code{
font-size:.7rem; letter-spacing:.08em;
color:rgba(201,169,110,.6);
min-width:22px;
}
.lang-opt.active .lang-opt-code{ color:var(--gold); }
#feedbackBtn{background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px 6px;border-radius:3px;transition:color .2s,background .2s;}
#feedbackBtn:hover{color:var(--gold-light);background:rgba(201,169,110,.08);}
/* ══ VIEWPORT ══ */
#viewport{
position:fixed;top:50px;left:0;right:0;bottom:0;
overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;
}
#viewport.dragging{cursor:grabbing;}
/* ══ CANVAS ══
Positioned via JS left/top (not transform translate).
Only transform:scale() is used for zoom — transform-origin:0 0
so scaling happens from the top-left, which is at (tx,ty).
-->
#canvas{
width:6388px;height:3100px;
position:absolute;
left:0;top:0;
transform-origin:0 0;
}
/* ══ CANVAS CONTENT WRAPPER — shifts all existing elements 1338px right ══ */
#canvas-content{position:absolute;left:0;top:0;width:6388px;height:3100px;}
/* ══ SATIPAṬṬHĀNA CANVAS PANEL ══ */
#sati-canvas-panel{
position:absolute;left:-425px;width:382px;
display:none;flex-direction:column;z-index:10;
background:rgba(14,18,26,.92);border:1.5px solid rgba(180,160,100,.3);
border-radius:4px;padding:14px 12px;gap:7px;
}
#sati-canvas-panel.open{display:flex;}
.sati-canvas-title{
font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-light);
letter-spacing:.08em;
position:relative;display:block;width:100%;
background:var(--surface2);border-bottom:1px solid var(--border);
padding:12px 14px;margin:-14px -12px 10px;box-sizing:content-box;
}
.sati-canvas-title em{font-style:italic;color:var(--cream);font-size:24px;}
.sati-canvas-sub{
font-size:24px;color:var(--muted);font-style:italic;
letter-spacing:.05em;margin-bottom:8px;padding:0 4px;font-family:inherit;
}
.sati-canvas-close{
position:absolute;top:10px;right:10px;
background:none;border:1px solid var(--border);color:var(--muted);
cursor:pointer;width:28px;height:28px;border-radius:2px;
font-size:1.1rem;display:flex;align-items:center;justify-content:center;
transition:all .18s;z-index:9;
}
.sati-canvas-close:hover{background:none;border-color:var(--gold-light);color:var(--gold-light);}
.mpb-box-close{
position:absolute;top:10px;right:10px;
background:none;border:1px solid var(--border);color:var(--muted);
cursor:pointer;width:28px;height:28px;border-radius:2px;
font-size:1.1rem;display:flex;align-items:center;justify-content:center;
transition:all .18s;z-index:9;
}
.mpb-box-close:hover{border-color:var(--gold-light);color:var(--gold-light);}
.sati-canvas-item{
background:var(--surface2);border:1px solid var(--border);
border-left:4px solid rgba(122,184,154,.38);border-radius:3px;
padding:8px 10px;cursor:pointer;
display:flex;align-items:flex-start;gap:12px;
transition:background .15s,border-left-color .15s;
margin-bottom:0;
position:relative;
}
.sati-canvas-item:hover{background:rgba(68,128,100,.14);border-left-color:var(--sage);}
.sati-canvas-item.active{background:rgba(68,128,100,.18);border-left-color:#9dd8b8;}
.sci-num{
font-family:'Cormorant Garamond',serif;font-size:1.5rem;
color:var(--sage);flex-shrink:0;width:22px;text-align:center;margin-top:3px;
}
.sci-pali{
font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:500;
color:var(--gold-light);line-height:1.1;margin-bottom:3px;
}
.sci-en{font-size:24px;color:var(--muted);font-style:italic;}
/* ══ SATI CONNECTOR ══ */
#sati-connector{position:absolute;top:0;left:0;width:420px;height:3100px;
pointer-events:none;display:none;z-index:2;}
#sati-connector.open{display:block;}
/* ══ PADHĀNA CANVAS PANEL + CONNECTOR (same styles as sati) ══ */
#padhana-canvas-panel{
position:absolute;left:-425px;width:382px;
display:none;flex-direction:column;z-index:10;
background:rgba(14,18,26,.92);border:1.5px solid rgba(180,160,100,.3);
border-radius:4px;padding:14px 12px;gap:7px;
}
#padhana-canvas-panel.open{display:flex;}
#padhana-connector{position:absolute;top:0;left:0;width:420px;height:3100px;
pointer-events:none;display:none;z-index:2;}
#padhana-connector.open{display:block;}
/* ══ VIRATI CANVAS PANEL + CONNECTOR ══ */
#virati-canvas-panel{
position:absolute;left:-425px;width:382px;
display:none;flex-direction:column;z-index:10;
background:rgba(14,18,26,.92);border:1.5px solid rgba(180,160,100,.3);
border-radius:4px;padding:14px 12px;gap:7px;
}
#virati-canvas-panel.open{display:flex;}
#virati-connector{position:absolute;top:0;left:0;width:420px;height:3100px;
pointer-events:none;display:none;z-index:2;}
#virati-connector.open{display:block;}
/* Virati connector hidden like the other 3 Sammā expand connectors */
#virati-connector, #virati-connector.open { display:none !important; }
/* ══ SAMĀDHI LEVELS CANVAS PANEL + CONNECTOR ══ */
#samconc-canvas-panel{
position:absolute;left:-425px;width:382px;
display:none;flex-direction:column;z-index:10;
background:rgba(14,18,26,.92);border:1.5px solid rgba(180,160,100,.3);
border-radius:4px;padding:14px 12px;gap:7px;
}
#samconc-canvas-panel.open{display:flex;}
#samconc-connector{position:absolute;top:0;left:0;width:420px;height:3100px;
pointer-events:none;display:none;z-index:2;}
#samconc-connector.open{display:block;}
/* Hide connectors for the 3 Sammā expand buttons */
#sati-connector, #sati-connector.open,
#padhana-connector, #padhana-connector.open,
#samconc-connector, #samconc-connector.open { display:none !important; }
/* ══ JHĀNA CANVAS PANEL ══ */
#jhana-canvas-panel{
position:absolute;left:-887px;width:382px;
display:none;flex-direction:column;z-index:10;
background:rgba(14,18,26,.92);border:1.5px solid rgba(180,160,100,.3);
border-radius:4px;padding:14px 12px;gap:7px;
}
#jhana-canvas-panel.open{display:flex;}
#jhana-connector{position:absolute;top:0;left:-887px;width:420px;height:3100px;
pointer-events:none;display:none;z-index:2;}
#jhana-connector.open{display:block;}
.jhana-section-hdr{
padding:8px 6px 6px;margin-bottom:6px;margin-top:6px;
border-bottom:1px solid rgba(180,148,72,.22);
}
.jhana-section-hdr:first-of-type{margin-top:0;}
.jhsh-pali{
display:block;
font-family:'Cormorant Garamond',serif;font-size:22px;
color:var(--gold-light);letter-spacing:.04em;font-weight:400;
}
.jhsh-en{
display:block;
font-family:'Crimson Pro',serif;font-size:16px;
color:var(--muted);font-style:italic;margin-top:1px;
letter-spacing:.06em;
}
.jhana-item{
padding:9px 14px !important;
margin-bottom:6px !important;
position:relative;
justify-content:flex-start !important;
width:100%;
box-sizing:border-box;
}
.jhana-item .sci-num{
min-width:22px;
text-align:center;
}
.jhana-item .sci-pali{font-size:32px !important;}
.jhana-item .sci-en{font-size:24px !important;}
/* ══ JHĀNA EXPAND BUTTON (inside Appanā sati-canvas-item) ══ */
.jhana-expand-btn{
position:absolute;left:-42px;top:50%;transform:translateY(-50%);
background:rgba(122,184,154,.14);border:1.5px solid var(--sage);
color:#9dd8b8;cursor:pointer;border-radius:50%;
font-size:1.1rem;width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
line-height:1;
transition:all .22s;
}
.jhana-expand-btn:hover{
background:rgba(123,184,154,.32);border-color:#9dd8b8;color:#c8f0da;
box-shadow:0 0 14px rgba(122,184,154,.45);
}
.jhana-expand-btn.open{
background:rgba(123,184,154,.38);border-color:#b0ead0;color:#d8f8e8;
box-shadow:0 0 16px rgba(122,184,154,.6);
}
/* ══ SVG LAYER ══ */
#svgl{position:absolute;left:0;top:0;width:4450px;height:3100px;pointer-events:none;z-index:1;}
/* —— Semantic zoom (#3): collapse detail at far zoom; reveal at near. ——
Tiers set on by applyT().
FAR (<35%): Pāli + roman numerals only — canvas reads as a structural map.
MID (35-65%): + English glosses on cards.
NEAR (>65%): full content (default).
*/
.sci-en, .pi-e, .pg-en, .mpb-en, .bj-en,
.kappa-legend-sub, .niv-en, .visuddhi-en,
.tz-life, .recur-badge,
.nn-en, .nt-en, .plane-en, .plane-sub-en, .ariya-en, .ariya-stage,
.jhsh-en, .khandha-box-sub,
.pst-sub, .sati-canvas-sub, .mpb-box-sub, .jhana-section-sub{
transition:opacity .35s ease;
}
/* Citta/Cetasika English glosses (sit inside | / | as nested with data-i18n="ctt_en_*") */
.citta-tbl [data-i18n^="ctt_en_"]{ transition:opacity .35s ease; }
/* FAR: collapse to Pāli backbone only */
body[data-zoom="far"] .sci-en,
body[data-zoom="far"] .pi-e,
body[data-zoom="far"] .pg-en,
body[data-zoom="far"] .mpb-en,
body[data-zoom="far"] .bj-en,
body[data-zoom="far"] .visuddhi-en,
body[data-zoom="far"] .niv-en,
body[data-zoom="far"] .kappa-legend-sub,
body[data-zoom="far"] .tz-life,
body[data-zoom="far"] .recur-badge,
body[data-zoom="far"] .nn-en,
body[data-zoom="far"] .nt-en,
body[data-zoom="far"] .plane-en,
body[data-zoom="far"] .plane-sub-en,
body[data-zoom="far"] .ariya-en,
body[data-zoom="far"] .ariya-stage,
body[data-zoom="far"] .tiratana-en,
body[data-zoom="far"] .jhsh-en,
body[data-zoom="far"] .pg-en,
body[data-zoom="far"] .rp28-grp-en,
body[data-zoom="far"] .citta-tbl [data-i18n^="ctt_en_"],
body[data-zoom="far"] [data-i18n$="_sub"],
body[data-zoom="far"] [data-i18n$="_panel_sub"],
body[data-zoom="far"] [data-i18n$="_hdr"],
body[data-zoom="far"] [data-i18n$="_box_sub"],
body[data-zoom="far"] .khandha-box-sub,
body[data-zoom="far"] .kappa-legend-label + .kappa-legend-sub,
body[data-zoom="far"] #kappa-grid-wrap .kappa-legend > div:first-child,
/* FAR: dim secondary subtitles to 30% so structure dominates */
body[data-zoom="far"] .pst-sub,
body[data-zoom="far"] .sati-canvas-sub,
body[data-zoom="far"] .mpb-box-sub,
body[data-zoom="far"] .jhana-section-sub{ opacity:.3; }
/* FAR: amplify Pāli a touch so it reads at distance */
body[data-zoom="far"] .pst-main{ letter-spacing:.05em; }
/* MID: keep English but soften micro-detail tags */
body[data-zoom="mid"] .recur-badge{ opacity:.35; }
/* —— Cross-framework recurrence (#2) —— */
.recur-badge{
display:inline-block;
font-family:'Cormorant Garamond',serif;
font-size:.55em;
color:var(--gold);
opacity:.55;
margin-left:.25em;
font-style:italic;
font-weight:500;
vertical-align:super;
letter-spacing:.02em;
text-shadow:0 0 6px rgba(201,169,110,.3);
cursor:help;
transition:opacity .2s, color .2s, text-shadow .2s;
}
.recur-badge:hover{ opacity:1; color:var(--gold-light); text-shadow:0 0 10px rgba(238,221,184,.6); }
body.recur-active #canvas-content,
body.recur-active #canvas-content *{ transition:opacity .25s; }
/* Dim every visible card/box/label that isn't a lit instance or its descendants/ancestors */
body.recur-active #canvas-content > *:not(.recur-keep):not(.recur-lit):not(:has(.recur-lit)){ opacity:.28; }
body.recur-active #canvas-content [data-key]:not(.recur-lit):not(:has(.recur-lit)){ opacity:.28; }
body.recur-active .sati-canvas-panel:not(:has(.recur-lit)),
body.recur-active #padhana-canvas-panel:not(:has(.recur-lit)),
body.recur-active #samconc-canvas-panel:not(:has(.recur-lit)),
body.recur-active #jhana-canvas-panel:not(:has(.recur-lit)),
body.recur-active .mpb-box:not(:has(.recur-lit)),
body.recur-active .bjcard:not(.recur-lit),
body.recur-active .pitem:not(.recur-lit),
body.recur-active .pg-block:not(:has(.recur-lit)),
body.recur-active .sati-canvas-item:not(.recur-lit),
body.recur-active .mpb-card:not(.recur-lit),
body.recur-active #ariya-box,
body.recur-active #planes-box,
body.recur-active #rupa28-box,
body.recur-active #paccayaniddesa-box,
body.recur-active #kappa-grid-wrap,
body.recur-active .nt-bar,
body.recur-active #ps-title,
body.recur-active #ef-title-block,
body.recur-active #nt-bottom-lbl,
body.recur-active .pst-titled,
body.recur-active .mpb-box-hdr,
body.recur-active .sati-canvas-title,
body.recur-active .sati-canvas-sub,
body.recur-active .jhana-section-hdr{ opacity:.28; }
/* Keep lit elements and their ancestors at full opacity even if a parent rule dims them */
body.recur-active .recur-lit,
body.recur-active .recur-lit *{ opacity:1 !important; }
.recur-lit{
position:relative;
filter:drop-shadow(0 0 14px rgba(201,169,110,.5));
}
.recur-lit .recur-badge{ opacity:1 !important; color:var(--gold-light) !important; }
.recur-thread{
fill:none;
stroke:var(--gold);
stroke-width:1.6;
stroke-dasharray:4,5;
opacity:.75;
filter:drop-shadow(0 0 4px rgba(201,169,110,.55));
animation:recur-flow 1.4s linear infinite;
}
@keyframes recur-flow{ to{ stroke-dashoffset:-18; } }
/* ══ PS TITLE ══ */
#ps-title{
position:absolute;left:480px;top:8px;width:1900px;
text-align:center;z-index:8;pointer-events:none;
}
.pst-main{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:400;
color:var(--gold-light);letter-spacing:.05em;}
.pst-main em{font-style:italic;color:var(--cream);}
.pst-sub{font-size:25px;font-style:italic;color:var(--muted);letter-spacing:.08em;margin-top:6px;}
/* ══ TIMELINE ZONE LABELS ══ */
.tz-wrap{
position:absolute;top:122px;height:64px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
z-index:8;pointer-events:none;
}
.tz-name{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500;
letter-spacing:.06em;line-height:1.1;}
.tz-life{font-size:17px;font-style:italic;letter-spacing:.05em;margin-top:3px;opacity:.85;}
.tz-past .tz-name{color:#aabcff;} .tz-past .tz-life{color:#6878c8;}
.tz-pr .tz-name{color:var(--gold-light);} .tz-pr .tz-life{color:#a88040;}
.tz-pc .tz-name{color:#f0a858;} .tz-pc .tz-life{color:#b07030;}
.tz-fut .tz-name{color:#f08070;} .tz-fut .tz-life{color:#b05040;}
/* ══ NIDĀNA NODES ══ */
.nnode{
position:absolute;width:270px;height:96px;
z-index:10;cursor:pointer;
background:var(--surface);border:1px solid var(--border);
border-left:5px solid #444;border-radius:3px;
padding:8px 13px 8px 11px;
box-shadow:0 3px 16px rgba(0,0,0,.6);
transition:transform .18s,box-shadow .18s,background .18s;
display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
column-gap:8px;align-content:center;
}
.nn-link {
position:absolute; top:6px; right:7px;
width:22px; height:22px;
display:flex; align-items:center; justify-content:center;
background:rgba(122,184,154,.14);
border:1.5px solid var(--sage);
color:#9dd8b9;
font-size:13px;
cursor:pointer; border-radius:50%;
transition:color .22s, background .22s, border-color .22s;
line-height:1; pointer-events:auto;
z-index:11; opacity:0.75;
}
.nn-link:hover { opacity:1; background:rgba(122,184,154,.28); color:#c5eed8; border-color:#9dd8b9; }
.nnode:hover .nn-link { opacity:1; }
.nnode:hover{transform:translate(-2px,-2px);box-shadow:0 8px 28px rgba(0,0,0,.7);z-index:20;}
.nnode.active{z-index:20;}
.nnode.past{border-left-color:var(--indigo-mid);}
.nnode.past:hover,.nnode.past.active{background:rgba(20,28,88,.55);border-left-color:var(--indigo);}
.nnode.pr{border-left-color:var(--gold-dim);}
.nnode.pr:hover,.nnode.pr.active{background:rgba(62,48,14,.5);border-left-color:var(--gold);}
.nnode.pc{border-left-color:var(--amber-mid);}
.nnode.pc:hover,.nnode.pc.active{background:rgba(78,44,8,.5);border-left-color:var(--amber);}
.nnode.fut{border-left-color:var(--rust-dim);}
.nnode.fut:hover,.nnode.fut.active{background:rgba(62,16,8,.5);border-left-color:var(--rust);}
.nn-num{grid-row:1;grid-column:1;font-size:1.5rem;color:var(--sage);text-align:right;align-self:start;padding-top:4px;line-height:1.1;}
.nn-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:500;
color:var(--gold-light);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nnode:hover .nn-pali{color:var(--gold);}
.nn-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);font-style:italic;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* ══ EIGHTFOLD PATH ══ */
#ef-title-block{
position:absolute;
left:268px; /* centre of EF box: 58 + 420/2 */
top:8px;
transform:translateX(-50%);
width:max-content; /* shrink to content so centering is exact */
text-align:center;
white-space:nowrap; /* keep Pāli name on one line */
pointer-events:none;z-index:8;
}
#ef-panel{
position:absolute;left:60px;top:122px;width:360px;
height:1278px;
display:flex;flex-direction:column;justify-content:space-evenly;
z-index:10;
}
.ef-head{flex-shrink:0;}
.ef-title{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold-light);letter-spacing:.05em;}
.ef-sub{font-size:14px;color:var(--muted);font-style:italic;letter-spacing:.1em;text-transform:uppercase;margin-top:3px;}
.pg-block{background:var(--surface);border:1px solid var(--border);border-radius:3px;overflow:hidden;flex-shrink:0;}
.pg-head{padding:12px 14px;background:var(--surface2);border-bottom:1px solid var(--border);
display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;}
.pg-head[data-key]:hover{background:rgba(201,169,110,.12);}
.pg-roman{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
letter-spacing:.08em;color:var(--sage);align-self:start;padding-top:3px;}
/* Bhavacakra loka section roman numerals — match the plane number colour (--indigo) */
#planes-list .pg-roman{color:#8898e8;}
.pg-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;
color:var(--gold-light);font-weight:500;line-height:1.1;align-self:start;}
.pg-en{grid-row:2;grid-column:2;font-size:22px;color:var(--muted);font-style:italic;margin-top:2px;}
/* Grid layout: number + Pāli on row 1, English on row 2 */
.pitem{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
column-gap:9px;padding:12px 14px;cursor:pointer;
transition:background .15s;border-left:3px solid transparent;}
.pitem:hover{background:rgba(68,128,100,.12);border-left-color:var(--sage);}
.pitem.active{background:rgba(68,128,100,.16);border-left-color:#9dd8b8;}
.pi-n{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--sage);text-align:right;padding-top:4px;}
.pi-p{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:34px;
color:var(--gold-light);white-space:nowrap;line-height:1.1;}
.pitem:hover .pi-p{color:var(--gold);}
.pi-e{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);font-style:italic;margin-top:1px;}
/* ══ NOBLE TRUTH CARDS ══ */
.ntcard{
position:absolute;width:350px;height:175px;z-index:10;cursor:pointer;
background:var(--surface);border:1px solid var(--border);border-radius:3px;
padding:14px 18px;box-shadow:0 3px 16px rgba(0,0,0,.6);
transition:transform .18s,box-shadow .18s,border-color .18s;
display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
column-gap:9px;align-content:center;
}
.ntcard::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;transition:background .18s;}
.nt-1::after{background:var(--rust-dim);}
.nt-2::after{background:var(--amber-dim);}
.nt-3::after,.nt-4::after{background:var(--sage-dim);}
.nt-1:hover::after{background:var(--rust);}
.nt-2:hover::after{background:var(--amber);}
.nt-3:hover::after,.nt-4:hover::after{background:var(--sage);}
.ntcard:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.7);border-color:rgba(201,169,110,.4);z-index:20;}
.ntcard.active{border-color:rgba(201,169,110,.45);z-index:20;}
.nt-ord{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--sage);text-align:right;align-self:center;padding-right:2px;}
.nt-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:500;color:var(--gold-light);line-height:1.2;}
.ntcard:hover .nt-pali{color:var(--gold);}
.nt-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);font-style:italic;line-height:1.45;}
/* ══ BOJJHAṄGĀ CARDS ══ */
.bjcard{
position:absolute;width:300px;z-index:10;cursor:pointer;
background:var(--plum-card);border:1px solid var(--border);border-radius:3px;
padding:14px 16px;box-shadow:0 3px 16px rgba(0,0,0,.6);
transition:background .15s,border-color .15s;
display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
column-gap:9px;align-content:center;
}
.bjcard::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;
background:rgba(122,184,154,.38);}
.bjcard:hover{background:var(--plum-hover);border-color:rgba(190,155,60,.3);box-shadow:0 3px 16px rgba(0,0,0,.6);z-index:20;}
.bjcard:hover::after{background:var(--sage);}
.bjcard.active{background:rgba(180,140,50,.18);border-color:rgba(190,155,60,.4);z-index:20;}
.visuddhi-card:hover{border-color:rgba(122,184,154,.3);}
.visuddhi-card.active{border-color:rgba(122,184,154,.4);}
.visuddhi-card{height:200px;align-content:center;width:326px;}
/* Visuddhi + Paramita: use plum (Tiratana colour) for roman numeral and bottom bar */
.visuddhi-card .bj-ord{color:var(--plum);}
.visuddhi-card::after{background:var(--plum-dim);}
.visuddhi-card:hover::after{background:var(--plum);}
.paramita-card .bj-ord{color:var(--plum);}
.paramita-card::after{background:var(--plum-dim);}
.paramita-card:hover::after{background:var(--plum);}
.bj-ord{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
color:var(--sage);text-align:right;align-self:center;}
.bj-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:500;
color:var(--gold-light);padding-left:9px;line-height:1.2;}
.bjcard:hover .bj-pali{color:var(--gold);}
.bj-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);font-style:italic;padding-left:9px;line-height:1.4;}
/* ══ TOGGLE SWITCH STYLING ══ */
#show37factors:checked ~ div .toggle-bg {
background: var(--gold);
border-color: var(--gold-dim);
}
#show37factors:checked ~ div .toggle-bg .toggle-circle {
left: 22px;
background: var(--cream);
border-color: var(--gold-dim);
}
#showKhandhavibhanga:checked ~ div .toggle-bg {
background: var(--gold);
border-color: var(--gold-dim);
}
#showKhandhavibhanga:checked ~ div .toggle-bg .toggle-circle {
left: 28px;
background: var(--cream);
border-color: var(--gold-dim);
}
#showBodhimagga:checked ~ div .toggle-bg {
background: var(--gold);
border-color: var(--gold-dim);
}
#showBodhimagga:checked ~ div .toggle-bg .toggle-circle {
left: 22px;
background: var(--cream);
border-color: var(--gold-dim);
}
.sec-lbl{
position:absolute;z-index:8;pointer-events:none;
font-family:'Cormorant Garamond',serif;font-size:14px;
letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
/* ══ LANGUAGE SELECTOR ══ */
#zctrl{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:3px;}
.zbtn{width:38px;height:38px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);
font-size:1.35rem;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;
transition:all .18s;font-family:'Crimson Pro',serif;}
.zbtn:hover{background:rgba(201,169,110,.14);border-color:var(--gold-dim);color:var(--gold-light);}
.zfit{font-size:.7rem!important;letter-spacing:.04em;}
#zlvl{font-size:.65rem;color:var(--muted);background:var(--surface2);border:1px solid var(--border);
padding:3px 5px;border-radius:2px;font-family:monospace;text-align:center;width:44px;}
/* ══ SLIDE PANEL ══ */
.sp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:5;
opacity:0;pointer-events:none;transition:opacity .35s;backdrop-filter:blur(1px);}
.sp-overlay.open{opacity:1;pointer-events:none;}
.spanel{position:fixed;top:0;right:0;width:var(--panel-w);max-width:100vw;height:100%;
--sp-scale:1;
background:var(--surface);border-left:1px solid var(--border);z-index:601;
transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);
overflow-y:auto;display:flex;flex-direction:column;}
.spanel.open{transform:translateX(0);}
.spanel::-webkit-scrollbar{width:4px;}
.spanel::-webkit-scrollbar-track{background:var(--surface);}
.spanel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.sp-head{padding:30px 52px 22px 32px;border-bottom:1px solid var(--border);
position:sticky;top:0;background:var(--surface);z-index:2;}
.sp-cat{font-size:.66rem;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
/* —— Breadcrumb (#4): segments the cat field into a structural trail —— */
.sp-crumbs{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin-bottom:12px;line-height:1.5;overflow:hidden;white-space:nowrap;min-width:0;padding-right:48px;}
.sp-crumbs .crumb{font-size:.72rem;letter-spacing:.04em;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.sp-crumbs .crumb-link{color:var(--gold);cursor:pointer;}
.sp-crumbs .crumb-link:hover{text-decoration:underline;}
.sp-crumbs .crumb-static{color:var(--muted);}
.sp-crumbs .is-current{color:var(--ink,inherit);font-weight:600;flex-shrink:0;}
.sp-crumbs .crumb-sep{color:var(--muted);margin:0 4px;flex-shrink:0;}
.sp-crumb{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
font-family:'Cormorant Garamond',serif;padding:2px 0;transition:color .2s;white-space:nowrap;}
.sp-crumb.is-link{cursor:pointer;color:var(--gold-dim);}
.sp-crumb.is-link:hover{color:var(--gold-light);text-shadow:0 0 8px rgba(238,221,184,.4);}
.sp-crumb.is-current{color:var(--gold-light);letter-spacing:.32em;}
.sp-crumb-sep{color:var(--border);margin:0 8px;font-size:.55rem;user-select:none;}
/* —— Cross-reference pulse (#5): canvas card flashes when openPanel jumps to it —— */
@keyframes xref-pulse{
0% { box-shadow:0 0 0 0 rgba(238,221,184,.0), 0 0 0 0 rgba(238,221,184,.0); }
18% { box-shadow:0 0 0 6px rgba(238,221,184,.55), 0 0 32px 8px rgba(201,169,110,.55); }
60% { box-shadow:0 0 0 12px rgba(238,221,184,.0), 0 0 48px 14px rgba(201,169,110,.18); }
100% { box-shadow:0 0 0 0 rgba(238,221,184,.0), 0 0 0 0 rgba(238,221,184,.0); }
}
.xref-pulse{ animation:xref-pulse 1.1s ease-out 1; border-radius:6px; }
/* —— Smooth reveal (#6) —— unified animation for all toggles + expand icons */
.reveal{
overflow:hidden;
transition:
max-height .55s cubic-bezier(.22,1,.36,1),
opacity .42s ease,
transform .55s cubic-bezier(.22,1,.36,1),
filter .42s ease;
will-change:max-height, opacity, transform, filter;
}
.reveal[data-revealed="0"]{
max-height:0 !important; opacity:0;
transform:translateY(-10px) scale(.99);
filter:blur(3px);
pointer-events:none;
}
.reveal[data-revealed="1"]{
max-height:var(--reveal-h, 6000px); opacity:1;
transform:none; filter:none;
}
/* Cascade children — duration auto-shortens on long lists via --casc-step */
.reveal[data-revealed="1"] > *{
animation: reveal-up var(--casc-dur, .45s) cubic-bezier(.22,1,.36,1) both;
animation-delay: calc(var(--casc-i, 0) * var(--casc-step, 60ms));
}
@keyframes reveal-up{
from{opacity:0; transform:translateY(8px);}
to {opacity:1; transform:none;}
}
/* Reduced motion — instant, no cascade, no blur */
body[data-motion="reduce"] .reveal{ transition:none !important; }
body[data-motion="reduce"] .reveal[data-revealed="0"]{ filter:none; transform:none; }
body[data-motion="reduce"] .reveal[data-revealed="1"] > *{ animation:none !important; }
.sp-pali{font-family:'Cormorant Garamond',serif;font-size:calc(2.1rem * var(--sp-scale));font-weight:400;
color:var(--gold-light);line-height:1.1;margin-bottom:4px;}
.sp-en{font-family:'Crimson Pro',serif;font-size:calc(1.1rem * var(--sp-scale));color:var(--muted);font-style:italic;}
.sp-font-controls{position:absolute;top:40px;right:10px;display:flex;flex-direction:column;gap:2px;z-index:2;}
.sp-font-btn{background:none;border:1px solid var(--border);border-radius:3px;color:var(--muted);
cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:.72rem;padding:0;
width:26px;height:20px;line-height:1;display:flex;align-items:center;justify-content:center;
transition:color .15s,border-color .15s;}
.sp-font-btn svg{display:block;}
.sp-font-btn:hover{color:var(--gold-light);border-color:var(--gold-dim);}
.sp-close{position:absolute;top:10px;right:10px;background:none;border:1px solid var(--border);
color:var(--muted);cursor:pointer;width:26px;height:26px;border-radius:3px;
font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .18s;}
.sp-close:hover{border-color:var(--gold-light);color:var(--gold-light);}
.sp-body{padding:24px 32px 48px;flex:1;}
.sp-section{margin-bottom:26px;}
.sp-stitle{font-family:'Cormorant Garamond',serif;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold-dim);border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:11px;}
.sp-text{font-family:'Crimson Pro',serif;font-size:calc(1.05rem * var(--sp-scale));line-height:1.78;color:#d0c8b4;font-weight:300;}
.sp-text strong{color:var(--gold-light);font-weight:500;}
.sp-text em{color:var(--sage);font-style:italic;}
.sp-quote{border-left:2px solid var(--gold-dim);margin:14px 0;padding:9px 0 9px 17px;}
.sp-quote p{font-family:'Cormorant Garamond',serif;font-size:calc(1.08rem * var(--sp-scale));font-style:italic;
color:var(--gold-light);line-height:1.65;font-weight:300;}
.sp-quote cite{font-size:.77rem;letter-spacing:.1em;color:var(--muted);display:block;margin-top:5px;}
/* ── Concept cross-links ── */
.concept-link{border-bottom:1px dotted var(--gold-dim);cursor:pointer;white-space:nowrap;}
.concept-link .ci{font-size:.6em;color:var(--gold-dim);margin-left:2px;vertical-align:super;font-style:normal;line-height:1;}
#concept-tooltip{position:fixed;z-index:9999;background:#16100a;border:1px solid var(--gold-dim);border-radius:5px;padding:11px 15px;max-width:290px;box-shadow:0 6px 22px rgba(0,0,0,.6);pointer-events:none;font-family:'Cormorant Garamond',serif;display:none;}
#concept-tooltip .ct-pali{font-size:19px;color:var(--gold-light);display:block;margin-bottom:2px;}
#concept-tooltip .ct-en{font-size:12px;color:#a09070;display:block;margin-bottom:7px;font-style:italic;letter-spacing:.04em;}
#concept-tooltip .ct-body{font-family:'Crimson Pro',serif;font-size:13px;line-height:1.55;color:#ddd4c0;}
.sp-nav{display:flex;gap:8px;padding:13px 32px;border-top:1px solid var(--border);
background:var(--surface);position:sticky;bottom:0;}
.sp-nav-btn{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--muted);
padding:10px 14px;font-family:'Crimson Pro',serif;font-size:.88rem;font-style:italic;
cursor:pointer;border-radius:2px;transition:all .18s;text-align:center;}
.sp-nav-btn:hover{background:rgba(201,169,110,.08);border-color:var(--gold-dim);color:var(--gold-light);}
.sp-nav-btn:disabled{opacity:.3;cursor:not-allowed;}
/* ══ NIVARANA COUNTERBALANCE PANEL ══ */
.nivarana-panel{position:absolute;width:320px;height:auto;max-height:680px;
background:var(--surface);border:1px solid var(--border);
z-index:500;display:none;flex-direction:column;border-radius:3px;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.nivarana-panel.open{display:flex;}
.nivarana-panel::-webkit-scrollbar{width:4px;}
.nivarana-panel::-webkit-scrollbar-track{background:var(--surface);}
.nivarana-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.niv-head{padding:12px 14px;border-bottom:1px solid var(--border);
position:relative;background:var(--surface2);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:0px;}
.niv-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;
color:var(--gold-light);letter-spacing:.08em;margin:0;line-height:1.2;}
.niv-title em{font-style:italic;color:var(--cream);font-size:24px;}
.niv-subtitle{font-size:24px;color:var(--muted);font-style:italic;letter-spacing:.05em;margin-top:2px;font-family:inherit;}
.niv-sub{font-size:13px;color:var(--muted);font-style:italic;letter-spacing:.05em;margin-top:2px;font-family:inherit;}
.niv-close{position:absolute;top:10px;right:10px;background:none;border:1px solid var(--border);
color:var(--muted);cursor:pointer;width:35px;height:35px;border-radius:2px;
font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all .18s;z-index:10;}
.niv-close:hover{border-color:var(--gold-light);color:var(--gold-light);}
.close-btn{position:absolute;top:10px;right:10px;background:none;border:1px solid var(--border);
color:var(--muted);cursor:pointer;width:35px;height:35px;border-radius:2px;
font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all .18s;z-index:10;}
.close-btn:hover{border-color:var(--gold-light);color:var(--gold-light);}
.niv-body{padding:12px 10px;display:grid;grid-template-columns:1fr;gap:4px;overflow-y:auto;max-height:610px;}
.niv-entry{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
background:var(--surface2);border:1px solid var(--border);border-left:4px solid var(--rust-dim);
border-radius:3px;padding:8px 10px;cursor:pointer;transition:all .22s;}
.niv-entry:hover{background:rgba(192,80,64,.08);border-left-color:var(--rust);}
.niv-entry.active{background:rgba(192,80,64,.12);border-left-color:var(--rust);}
.niv-num{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
color:var(--rust);text-align:right;padding-top:3px;}
.niv-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;
font-weight:500;color:var(--gold-light);padding-left:9px;}
.niv-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);
font-style:italic;padding-left:9px;margin-top:2px;}
/* ══ ABHIDHAMMA ITEMS (khandha, rupa28, paccayaniddesa, nibbana) ══ */
.abhi-item{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
background:var(--surface2);border:1px solid var(--border);border-left:4px solid var(--teal-dim);
border-radius:3px;padding:8px 10px;cursor:pointer;transition:all .15s;column-gap:9px;}
.abhi-item:hover{background:var(--teal-hover);border-left-color:var(--teal);}
.abhi-item.active{background:rgba(72,148,168,.14);border-left-color:var(--teal);}
.abhi-num{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
color:var(--teal);text-align:right;padding-top:3px;}
.abhi-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;
font-weight:500;color:var(--gold-light);line-height:1.1;padding-left:9px;white-space:nowrap;}
.abhi-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);
font-style:italic;padding-left:9px;margin-top:2px;white-space:nowrap;}
/* ══ PAÑCA KHANDHĀ BOX ══ */
.khandha-box{display:flex;flex-direction:column;gap:0;background:rgba(14,18,26,.92);
border:1.5px solid var(--teal-border);border-radius:4px;
position:absolute;z-index:8;}
/* Override mpb-card colours inside khandha-box to use teal */
.khandha-box>.mpb-card,.khandha-box>.mpb-box-close{margin:0 8px;}
.khandha-box>.mpb-card:first-of-type{margin-top:8px;}
.khandha-box>.mpb-card:last-of-type{margin-bottom:8px;}
.khandha-box .mpb-num{color:var(--teal);}
.khandha-box .mpb-card{border-left-color:var(--teal-dim);}
.khandha-box .mpb-card:hover{background:var(--teal-hover);border-left-color:var(--teal);}
.khandha-box .mpb-card.active{background:rgba(72,148,168,.14);border-left-color:var(--teal);}
/* Citta/Cetasika table teal border */
.vithi-sep{color:rgba(110,138,235,.4);font-size:13px;padding:0 2px;flex:0 0 auto;align-self:center;}
.vithi-segment:hover{background:rgba(110,138,235,.08);border-radius:3px;}
.vithi-segment:hover div{color:var(--gold-light)!important;}/* Hide cetasika columns when viññāṇa expand is active */
/* Vithi group bracket — wraps Pañca Dvāra + Bhavaṅga + Mano Dvāra to show 4× repetition */
.vithi-group{display:flex;align-items:center;gap:0;position:relative;border:1px solid rgba(110,138,235,.22);border-radius:4px;padding:0;}
.vithi-group-label{font-size:18px;color:rgba(110,138,235,.65);font-family:'Cormorant Garamond',serif;white-space:nowrap;letter-spacing:.06em;cursor:default;padding:0 8px;align-self:center;flex-shrink:0;}
#citta-table-node.hide-cetasika [data-cet-key],
#citta-table-node.hide-cetasika .cet-num,
#citta-table-node.hide-cetasika .cet-rowhead,
#citta-table-node.hide-cetasika .cet-total-cell,
#citta-table-node.hide-cetasika .citta-sep-col { display:none; }
/* Hide citta columns when saṅkhāra expand is active (cetasika-only view) */
#citta-table-node.hide-citta [data-citta-key],
#citta-table-node.hide-citta .citta-num.citta-cell,
#citta-table-node.hide-citta .citta-empty,
#citta-table-node.hide-citta .citta-rowhead,
#citta-table-node.hide-citta .citta-rowhead-main,
#citta-table-node.hide-citta .citta-rowhead-sub,
#citta-table-node.hide-citta .citta-colspan-header,
#citta-table-node.hide-citta .citta-tbl-title-cell,
#citta-table-node.hide-citta .citta-sep-col,
#citta-table-node.hide-citta .citta-total-cell { display:none; }
.citta-total-row .citta-total-cell, .citta-total-row .citta-num { font-size:30px; font-family:'Cormorant Garamond',serif; }
/* Row 8 extra filler cells — always hidden */
.row8-extra { display:none !important; }
.khandha-box-title{font-family:'Cormorant Garamond',serif;font-size:22px;
color:var(--gold-light);letter-spacing:.08em;text-align:left;
position:relative;display:block;width:100%;box-sizing:border-box;
background:var(--surface2);border-bottom:1px solid var(--border);
padding:12px 14px;}
.khandha-box-title em{font-style:italic;color:var(--cream);font-size:24px;}
.khandha-box-sub{font-size:24px;color:var(--muted);font-style:italic;
letter-spacing:.05em;margin-top:2px;font-family:inherit;}
/* ══ ARIYA STATES ══ */
.ariya-item{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto auto;
background:var(--surface2);border:1px solid var(--border);border-left:4px solid rgba(136,152,232,.45);
border-radius:3px;padding:8px 10px;cursor:pointer;transition:all .15s;column-gap:9px;
position:relative;}
.ariya-item:hover{background:rgba(136,152,232,.1);border-left-color:#8898e8;}
.ariya-item.active{background:rgba(136,152,232,.16);border-left-color:#8898e8;}
.ariya-num{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
color:#8898e8;text-align:right;padding-top:3px;}
.ariya-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;
font-weight:400;color:var(--gold-light);line-height:1.1;}
.ariya-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);font-style:italic;margin-top:2px;}
.ariya-stage{grid-row:3;grid-column:2;font-size:21px;color:rgba(136,152,232,.7);margin-top:4px;letter-spacing:.02em;}
.ariya-icon{position:absolute;right:-46px;top:50%;transform:translateY(-50%);
cursor:pointer;border-radius:50%;padding:2px;transition:all .2s;}
.ariya-icon:hover svg{opacity:.85;}
.ariya-icon.active svg line, .ariya-icon.active svg polyline{filter:drop-shadow(0 0 4px rgba(200,184,248,.8));}
/* ══ TIRATANA (BUDDHA / DHAMMA / SANGHA) ITEMS ══ */
.tiratana-item{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
background:var(--plum-card);border:1px solid var(--border);border-left:4px solid var(--plum-dim);
border-radius:3px;padding:8px 10px;cursor:pointer;transition:all .15s;column-gap:9px;
position:relative;}
.tiratana-item:hover{background:var(--plum-hover);border-left-color:var(--plum);}
.tiratana-item.active{background:rgba(120,90,190,.18);border-left-color:var(--plum);}
.tiratana-num{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
color:var(--plum);text-align:right;padding-top:3px;}
.tiratana-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;
font-weight:500;color:var(--gold-light);line-height:1.1;padding-left:9px;}
.tiratana-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);font-style:italic;
margin-top:2px;padding-left:9px;}
/* ══ PLANES OF EXISTENCE ══ */
.plane-group-header{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--gold-light);
letter-spacing:.08em;margin-top:10px;margin-bottom:6px;
padding:8px 10px;background:rgba(201,169,110,.08);border-radius:2px;text-align:left;}
.plane-sub-header{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
column-gap:8px;padding:10px 14px;margin-left:12px;margin-top:6px;
background:rgba(201,169,110,.04);border-bottom:1px solid rgba(201,169,110,.1);
border-radius:2px;cursor:pointer;}
.plane-sub-num{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.2rem;
color:var(--indigo);align-self:center;}
.plane-sub-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:26px;
color:var(--gold-light);font-weight:400;line-height:1.1;}
.plane-sub-en{grid-row:2;grid-column:2;font-size:22px;color:var(--muted);font-style:italic;margin-top:2px;}
.plane-item{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
background:var(--surface2);border:1px solid var(--border);border-left:4px solid rgba(136,152,232,.45);
border-radius:3px;padding:8px 10px;cursor:pointer;transition:all .15s;column-gap:9px;}
.plane-item:hover{background:rgba(136,152,232,.1);border-left-color:#8898e8;}
.plane-item.active{background:rgba(136,152,232,.16);border-left-color:#8898e8;}
.plane-num{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
color:#8898e8;text-align:right;padding-top:3px;}
.plane-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;
font-weight:400;color:var(--gold-light);padding-left:0px;line-height:1.1;}
.plane-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);
font-style:italic;padding-left:0px;margin-top:2px;}
.connector-icon-box{position:absolute;right:-25px;top:8px;width:28px;height:28px;
background:var(--surface);border:1.5px solid var(--rust);border-radius:50%;
cursor:pointer;transition:all .22s;font-size:14px;display:flex;align-items:center;justify-content:center;
padding:0;font-family:sans-serif;}
.connector-icon-box:hover{background:rgba(192,80,64,.2);box-shadow:0 0 12px rgba(192,80,64,.3);}
/* ══ CONNECTOR SVG ══ */
.connector-svg{pointer-events:none;}
/* ══ SATIPAṬṬHĀNA CANVAS PANEL ══ */
.pitem-sati{grid-template-columns:18px 1fr auto !important;}
.sati-toggle-btn{
grid-row:1;grid-column:3;align-self:center;
background:rgba(122,184,154,.18);
border:1.5px solid var(--sage);
color:#9dd8b8;
cursor:pointer;border-radius:3px;
font-size:.95rem;padding:6px 13px;
line-height:1.3;transition:all .22s;white-space:nowrap;
font-family:'Cormorant Garamond',serif;letter-spacing:.05em;
box-shadow:0 0 8px rgba(122,184,154,.25), inset 0 0 4px rgba(122,184,154,.08);
}
.sati-toggle-btn:hover{
background:rgba(123,184,154,.30);
border-color:#9dd8b8;color:#c8f0da;
box-shadow:0 0 16px rgba(122,184,154,.5), inset 0 0 6px rgba(122,184,154,.15);
}
.sati-toggle-btn.open{
background:rgba(123,184,154,.38);
border-color:#b0ead0;color:#d8f8e8;
box-shadow:0 0 18px rgba(122,184,154,.65), inset 0 0 8px rgba(122,184,154,.2);
}
/* ══ FLOATING EXPAND BUTTONS (outside boxes, canvas-absolute) ══ */
.expand-btn{
position:absolute;
left:1368px;
width:32px;height:32px;
transform:translateY(-50%);
background:rgba(122,184,154,.14);
border:1.5px solid var(--sage);
color:#9dd8b9;
cursor:pointer;border-radius:50%;
font-size:1.1rem;
display:flex;align-items:center;justify-content:center;
transition:all .22s;
z-index:20;
line-height:1;
user-select:none;-webkit-user-select:none;
}
.expand-btn:hover{
background:rgba(122,184,154,.30);
border-color:#9dd8b8;color:#c8f0da;
box-shadow:0 0 12px rgba(122,184,154,.45);
}
.expand-btn.open{
background:rgba(122,184,154,.38);
border-color:#b0ead0;color:#d8f8e8;
box-shadow:0 0 16px rgba(122,184,154,.65);
}
/* Expand buttons positioned dynamically by positionButton() function */
#samconc-toggle { left: 43px; } /* Samma Samadhi (Tayo Samadhi panel reference) - right side */
#sati-toggle { left: 43px; } /* Samma Sati - right side */
#padhana-toggle { left: 43px; } /* Sammappadhana items - right side */
#virati-toggle { left: 43px; } /* Sila title - right side */
/* Fixed vertical positions for the 3 Sammā expand buttons — adjust top: to reposition */
#samconc-toggle { top: 670px; }
#sati-toggle { top: 759px; }
#padhana-toggle { top: 844px; }
#virati-toggle { top: 965px; }
#jhana-toggle { left: -455px; } /* Appana Samadhi - adjusted 5px right */
/* ══ CLICKABLE SP-TAGS ══ */
/* ══ MAHĀBODHIPAKKHIYA CARD BOXES (Indriyāni · Balāni · Iddhipādā) ══ */
.mpb-box{display:flex;flex-direction:column;gap:7px;background:rgba(14,18,26,.92);
border:1.5px solid rgba(180,160,100,.3);border-radius:4px;padding:14px 12px;
position:absolute;z-index:8;}
.mpb-box-title{font-family:'Cormorant Garamond',serif;font-size:22px;
background:var(--surface2);border-bottom:1px solid var(--border);
padding:12px 14px;margin:-14px -12px 10px;display:block;width:100%;box-sizing:content-box;
color:var(--gold-light);letter-spacing:.08em;text-align:left;margin-bottom:4px;
position:relative;display:inline-block;width:100%;}
.mpb-box-title em{font-style:italic;color:var(--cream);font-size:24px;}
.mpb-box-sub{font-size:24px;color:var(--muted);font-style:italic;
letter-spacing:.05em;margin-top:2px;font-family:inherit;}
.mpb-card{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
background:var(--surface2);border:1px solid var(--border);
border-left:4px solid rgba(122,184,154,.38);border-radius:3px;padding:8px 10px;
cursor:pointer;transition:background .15s,border-left-color .15s;}
.mpb-card:hover{background:rgba(68,128,100,.14);border-left-color:var(--sage);}
.mpb-card.active{background:rgba(68,128,100,.18);border-left-color:#9dd8b8;}
.mpb-num{grid-row:1;grid-column:1;font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--sage);text-align:right;padding-top:3px;}
.mpb-pali{grid-row:1;grid-column:2;font-family:'Cormorant Garamond',serif;font-size:32px;
font-weight:500;color:var(--gold-light);padding-left:9px;}
.mpb-en{grid-row:2;grid-column:2;font-size:24px;color:var(--muted);
font-style:italic;padding-left:9px;margin-top:2px;}
.mpb-card.connector-enabled{position:relative;}
.connector-icon{position:absolute;right:-20px;top:50%;transform:translateY(-50%);
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
background:var(--surface);border:1.5px solid var(--rust);border-radius:50%;
cursor:pointer;transition:all .22s;font-size:16px;color:var(--rust);}
.connector-icon:hover{background:rgba(192,80,64,.2);box-shadow:0 0 12px rgba(192,80,64,.3);}
/* ══ CATU-SAṬṬHI-MAHĀ-KAPPA-PARIVATTA ══ */
#kappa-section{position:absolute;z-index:8;}
#kappa-grid{display:grid;grid-template-columns:repeat(8,54px);grid-template-rows:repeat(8,54px);gap:6px;}
.kappa-cell{width:54px;height:54px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;
display:flex;align-items:center;justify-content:center;}
.kappa-legend{display:flex;flex-direction:column;gap:12px;justify-content:center;}
.kappa-legend-item{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 10px;
border-radius:3px;border:1px solid var(--border);background:var(--surface2);
transition:background .15s,border-color .15s;}
.kappa-legend-item:hover{background:rgba(180,150,80,.1);border-color:var(--gold-dim);}
.kappa-legend-item.active{background:rgba(180,150,80,.18);border-color:var(--gold);}
.kappa-legend-label{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-light);letter-spacing:.04em;}
.kappa-legend-sub{font-size:16px;color:var(--muted);font-style:italic;margin-top:1px;}
/* ── Visual Tweaks Panel ── */
#audio-fab{
position:fixed; left:18px; bottom:142px; z-index:80;
width:44px; height:44px; border-radius:50%;
background:rgba(28,24,20,.85); border:1px solid rgba(201,169,110,.4);
color:var(--gold-light); font-size:20px;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all .25s;
}
#audio-fab:hover{ border-color:var(--gold); color:#fff5e0; }
#audio-fab.audio-off{ color:var(--muted); border-color:rgba(201,169,110,.15); opacity:.5; }
#audio-fab.audio-playing{
animation: audio-pulse 1.4s ease-in-out infinite;
}
@keyframes audio-pulse {
0%,100% { box-shadow:0 8px 24px -8px rgba(0,0,0,.7), 0 0 0 0 rgba(201,169,110,.4); }
50% { box-shadow:0 8px 24px -8px rgba(0,0,0,.7), 0 0 0 8px rgba(201,169,110,0); }
}
#visual-tweaks-fab{
position:fixed; left:18px; bottom:18px; z-index:80;
width:44px; height:44px; border-radius:50%;
background:rgba(28,24,20,.85); border:1px solid rgba(201,169,110,.4);
color:var(--gold-light); font-size:18px;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all .25s;
}
#visual-tweaks-fab:hover{
border-color:var(--gold); color:#fff5e0;
box-shadow:0 8px 24px -8px rgba(0,0,0,.8), 0 0 24px rgba(201,169,110,.3);
transform:rotate(45deg);
}
#visual-tweaks-fab.hidden{ display:none; }
#visual-tweaks-panel{
position:fixed; left:18px; bottom:18px; z-index:9999;
background:linear-gradient(180deg, rgba(20,24,34,.97), rgba(12,15,22,.97));
border:1px solid rgba(201,169,110,.3);
padding:14px 16px; border-radius:3px; min-width:240px;
font-family:'Crimson Pro', serif; color:var(--cream);
box-shadow:0 20px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(201,169,110,.06);
display:none;
}
#visual-tweaks-panel.open{ display:block; }
#visual-tweaks-panel h3{
font-family:'Cormorant Garamond',serif; font-size:1.1rem;
color:var(--gold-light); font-weight:400; margin:0 0 12px;
display:flex; justify-content:space-between; align-items:center;
letter-spacing:.06em; text-transform:uppercase;
}
#visual-tweaks-panel h3 .vt-close{
background:none; border:none; color:var(--muted);
cursor:pointer; font-size:1.1rem; padding:0 2px; line-height:1;
}
#visual-tweaks-panel h3 .vt-close:hover{ color:var(--gold-light); }
.vt-section{ margin-bottom:14px; }
.vt-label{
font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); margin-bottom:6px;
}
.vt-toggle{
display:flex; justify-content:space-between; align-items:center;
padding:6px 0; font-size:13px; color:var(--cream);
}
.vt-toggle input{ accent-color:var(--gold); }
/* ── Aññāsamana 7 Universal Cetasikas popup ── */
#annasama-popup {
display:none;
position:fixed;
z-index:9999;
background:rgba(18,22,34,.97);
border:1px solid rgba(201,169,110,.35);
border-radius:6px;
padding:18px 22px 16px;
min-width:260px;
box-shadow:0 8px 32px rgba(0,0,0,.55);
font-family:'Crimson Pro',Georgia,serif;
pointer-events:auto;
}
#annasama-popup.visible { display:block; }
#annasama-popup h4 {
margin:0 0 12px;
font-size:15px;
font-weight:600;
letter-spacing:.06em;
color:var(--gold-light);
text-transform:uppercase;
border-bottom:1px solid rgba(201,169,110,.2);
padding-bottom:8px;
}
#annasama-popup ol {
margin:0; padding:0 0 0 18px;
list-style:decimal;
}
#annasama-popup ol li {
font-size:15px;
color:var(--cream);
line-height:1.7;
padding:1px 0;
}
#annasama-popup ol li em {
color:var(--gold-dim);
font-style:italic;
font-size:13.5px;
margin-left:5px;
}
#annasama-popup-close {
position:absolute;
top:8px; right:10px;
background:none; border:none;
color:var(--muted); font-size:16px;
cursor:pointer; line-height:1;
padding:2px 4px;
}
#annasama-popup-close:hover { color:var(--cream); }
#annasama-popup ol li.highlighted {
color: var(--gold-light);
font-weight: 600;
background: rgba(201,169,110,.12);
border-radius: 3px;
padding-left: 4px;
margin-left: -4px;
list-style-position: inside;
}
#annasama-popup ol li.highlighted em {
color: var(--gold);
}
#cet-annasama-7:hover { background:rgba(201,169,110,.15); }
#citta-ahetuka-3:hover, #citta-ahetuka-8:hover, #citta-ahetuka-7:hover { background:rgba(201,169,110,.15); }
#cet-sobhana-19:hover, #cet-sobhana-6:hover,
#cet-akusala-4:hover, #cet-akusala-10:hover,
#cet-annasama-6:hover { background:rgba(201,169,110,.15); }
/* ── Shared cetasika popup styles ── */
.cet-popup {
display:none; position:fixed; z-index:9999;
background:rgba(18,22,34,.97);
border:1px solid rgba(201,169,110,.35);
border-radius:6px; padding:18px 22px 16px;
min-width:260px; box-shadow:0 8px 32px rgba(0,0,0,.55);
font-family:'Crimson Pro',Georgia,serif; pointer-events:auto;
}
.cet-popup.visible { display:block; }
.cet-popup h4 {
margin:0 0 12px; font-size:15px; font-weight:600;
letter-spacing:.06em; color:var(--gold-light);
text-transform:uppercase;
border-bottom:1px solid rgba(201,169,110,.2); padding-bottom:8px;
}
.cet-popup .cet-popup-sub {
font-size:12.5px; color:var(--muted); font-style:italic;
margin:-8px 0 12px; letter-spacing:.03em;
}
.cet-popup ol { margin:0; padding:0 0 0 18px; list-style:decimal; }
.cet-popup ol li {
font-size:15px; color:var(--cream); line-height:1.7; padding:1px 0;
}
.cet-popup ol li em {
color:var(--gold-dim); font-style:italic; font-size:13.5px; margin-left:5px;
}
/* Linked cetasika items (those with a card): subtle underline on hover */
.cet-popup ol li.cet-item-link {
transition: color .15s;
}
.cet-popup ol li.cet-item-link:hover {
color: var(--gold-light);
text-decoration: underline;
text-decoration-color: rgba(201,169,110,.35);
text-underline-offset: 3px;
}
/* Pinned Vīthi popup title → card link */
.vithi-title-link {
transition: color .15s;
}
.vithi-title-link:hover {
color: var(--gold-light);
text-decoration: underline;
text-decoration-color: rgba(201,169,110,.35);
text-underline-offset: 3px;
}
.cet-note {
display:block;
font-size:11.5px;
color:rgba(200,190,165,.78);
font-style:italic;
font-weight:300;
margin-top:3px;
letter-spacing:.02em;
line-height:1.4;
}
.cet-popup-close {
position:absolute; top:8px; right:10px;
background:none; border:none; color:var(--muted);
font-size:16px; cursor:pointer; line-height:1; padding:2px 4px;
}
.cet-popup-close:hover { color:var(--cream); }
.cet-popup ol li.highlighted {
color:var(--gold-light); font-weight:600;
background:rgba(201,169,110,.12); border-radius:3px;
padding-left:4px; margin-left:-4px; list-style-position:inside;
}
.cet-popup ol li.highlighted em { color:var(--gold); }
/* ══ ONBOARDING OVERLAY ══ */
/* ══ OVERLAY ══ */
#onboarding-overlay {
position:fixed; inset:0; z-index:500;
background:rgba(7,9,13,.92); backdrop-filter:blur(2px);
display:flex; align-items:center; justify-content:center;
padding:28px 16px;
transition:opacity .8s ease;
}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 0;}
.theme-opt{position:relative;border:1px solid rgba(201,169,110,.25);border-radius:5px;
padding:16px 14px;cursor:pointer;transition:border-color .18s,background .18s;
display:flex;flex-direction:column;align-items:center;gap:10px;user-select:none;
background:rgba(201,169,110,.04);}
.theme-opt:hover{border-color:rgba(201,169,110,.55);background:rgba(201,169,110,.09);}
.theme-opt.selected{border-color:var(--gold);background:rgba(201,169,110,.13);}
.theme-swatch{width:100%;height:72px;border-radius:4px;border:1px solid rgba(255,255,255,.1);
display:flex;flex-direction:column;justify-content:center;padding:10px 12px;box-sizing:border-box;}
.theme-swatch-light{background:linear-gradient(135deg,#faf5ea 0%,#f2ead6 50%,#e8dfc8 100%);}
.theme-swatch-dark{background:linear-gradient(135deg,#07090d 0%,#10131c 50%,#181c28 100%);}
.theme-swatch-light .theme-swatch-pali{font-family:'Cormorant Garamond',serif;font-size:18px;color:#5c3e1a;letter-spacing:.04em;}
.theme-swatch-light .theme-swatch-en{font-size:12px;color:#8a7050;font-style:italic;margin-top:2px;}
.theme-swatch-dark .theme-swatch-pali{font-family:'Cormorant Garamond',serif;font-size:18px;color:#eeddb8;letter-spacing:.04em;}
.theme-swatch-dark .theme-swatch-en{font-size:12px;color:#d4bb87;font-style:italic;margin-top:2px;}
.theme-name-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;}
.theme-name{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold-light);letter-spacing:.04em;}
.theme-check{color:var(--gold);font-size:16px;opacity:0;transition:opacity .18s;}
.theme-opt.selected .theme-check{opacity:1;}
body.light-mode .theme-opt{border-color:rgba(160,120,64,.25);background:rgba(160,120,64,.04);}
body.light-mode .theme-opt:hover{border-color:rgba(160,120,64,.5);background:rgba(160,120,64,.09);}
body.light-mode .theme-opt.selected{border-color:var(--gold);background:rgba(160,120,64,.13);}
body.light-mode .theme-name{color:var(--gold-light);}
body.light-mode .theme-check{color:var(--gold);}
#onboarding-overlay.dissolving { opacity:0; pointer-events:none; }
/* ══ STEP CARD ══ */
#step-card {
position:relative;
width:min(720px,92vw);
max-height:calc(100vh - 56px);
display:flex; flex-direction:column;
background:rgba(14,18,26,.98);
border:1px solid rgba(201,169,110,.22); border-radius:6px;
box-shadow:0 24px 80px rgba(0,0,0,.85), 0 0 0 1px rgba(201,169,110,.05);
animation:cardReveal .65s ease .15s both;
overflow:hidden;
}
#step-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
z-index:1; flex-shrink:0;
}
#step-content-wrap {
flex:1; overflow-y:auto; padding:36px 52px 36px;
scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
#step-content-wrap::-webkit-scrollbar { width:4px; }
#step-content-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
@keyframes cardReveal {
from { opacity:0; transform:translateY(18px); }
to { opacity:1; transform:translateY(0); }
}
/* ══ COUNTER ══ */
#step-counter { display:flex; align-items:center; gap:8px; margin-bottom:28px; }
.step-dot {
width:6px; height:6px; border-radius:50%; background:var(--border);
transition:background .35s, transform .35s; cursor:pointer;
}
.step-dot.active { background:var(--gold); transform:scale(1.4); }
.step-dot.done { background:var(--gold-dim); }
#step-label { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim); margin-left:4px; }
/* ══ CONTENT ══ */
#step-content { transition:opacity .28s ease, transform .28s ease; }
#step-content.fading { opacity:0; transform:translateY(5px); }
.step-symbol { font-size:1.7rem; color:var(--gold-dim); margin-bottom:16px; display:block; opacity:.82; }
.step-heading { font-family:'Cormorant Garamond',serif; font-size:2.15rem; font-weight:400; color:var(--gold-light); letter-spacing:.04em; line-height:1.15; margin-bottom:8px; }
.step-heading em { font-style:italic; color:var(--cream); }
.step-sub { font-size:.93rem; color:var(--muted); font-style:italic; letter-spacing:.06em; margin-bottom:22px; }
.step-body { font-size:1.08rem; color:var(--cream); line-height:1.78; margin-bottom:22px; }
.step-body strong { color:var(--gold-light); font-weight:500; }
.step-body em { color:var(--sage); font-style:italic; }
/* ══ LANGUAGE GRID ══ */
.lang-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:4px 0 26px; }
.lang-opt {
background:var(--surface2); border:1px solid var(--border); border-radius:4px;
padding:16px 8px 13px; cursor:pointer; text-align:center;
transition:background .18s, border-color .18s; position:relative;
}
.lang-opt:hover { background:rgba(201,169,110,.07); border-color:rgba(201,169,110,.35); }
.lang-opt.selected { background:rgba(201,169,110,.1); border-color:var(--gold); box-shadow:0 0 0 1px rgba(201,169,110,.18); }
.lang-check { position:absolute; top:6px; right:7px; font-size:.65rem; color:var(--gold); opacity:0; transition:opacity .18s; }
.lang-opt.selected .lang-check { opacity:1; }
.lang-pali {
font-family:'Cormorant Garamond',serif;
font-size:.78rem; font-weight:400; font-style:italic;
color:var(--muted); letter-spacing:.1em; text-transform:uppercase;
line-height:1; margin-bottom:8px;
}
.lang-native {
font-family:'Cormorant Garamond',serif;
font-size:1.4rem; color:var(--gold-light);
letter-spacing:.04em; line-height:1.1;
}
/* ══ HINT GRID ══ */
.hint-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 22px; }
.hint-pill { display:flex; align-items:flex-start; gap:10px; background:var(--surface2); border:1px solid var(--border); border-radius:3px; padding:10px 12px; }
.hint-icon { font-size:1.05rem; flex-shrink:0; width:24px; text-align:center; margin-top:1px; }
.hint-key { font-family:'Cormorant Garamond',serif; font-size:1rem; color:var(--gold-light); margin-bottom:2px; }
.hint-desc { font-size:.83rem; color:var(--muted); line-height:1.44; }
/* ══ MAP SECTIONS — horizontal 3 columns ══ */
.map-sections { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:14px 0 22px; }
.map-section {
display:flex; flex-direction:column;
background:var(--surface2); border:1px solid var(--border);
border-radius:3px; overflow:hidden;
}
.msec-top-bar { height:3px; width:100%; flex-shrink:0; }
.msec-body { padding:12px 13px 14px; flex:1; }
.msec-dir {
font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
margin-bottom:6px; font-style:normal; opacity:.7;
}
.msec-title { font-family:'Cormorant Garamond',serif; font-size:1rem; color:var(--gold-light); margin-bottom:7px; line-height:1.25; }
.msec-desc { font-size:.82rem; color:var(--muted); line-height:1.55; }
.msec-desc em { color:var(--cream); font-style:italic; }
.sec-tag { display:inline-block; font-size:.68rem; letter-spacing:.05em; border:1px solid; border-radius:2px; padding:1px 6px; margin:4px 3px 0 0; vertical-align:middle; opacity:.85; }
/* ══ WARNING BOX ══ */
.warn-box { background:rgba(106,48,16,.14); border:1px solid rgba(208,136,56,.22); border-left:3px solid var(--amber); border-radius:3px; padding:16px 18px; margin:18px 0 22px; }
.warn-title { font-family:'Cormorant Garamond',serif; font-size:1.08rem; color:var(--amber); margin-bottom:10px; letter-spacing:.04em; }
.warn-body { font-size:1rem; color:var(--cream); line-height:1.74; }
.warn-body p + p { margin-top:10px; }
.warn-body em { color:var(--gold-light); font-style:italic; }
.warn-body strong { color:var(--gold-light); font-weight:500; }
/* ══ ACTIONS ══ */
.step-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid rgba(201,169,110,.1); padding-top:22px; margin-top:6px; }
.actions-left { display:flex; gap:12px; align-items:center; }
.btn-skip { background:none; border:none; font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:color .2s; font-family:inherit; }
.btn-skip:hover { color:var(--cream); }
.btn-back { display:flex; align-items:center; gap:6px; background:none; border:1px solid rgba(201,169,110,.2); border-radius:3px; color:var(--muted); font-family:'Cormorant Garamond',serif; font-size:.98rem; letter-spacing:.04em; padding:8px 15px; cursor:pointer; transition:border-color .2s, color .2s; }
.btn-back:hover { border-color:rgba(201,169,110,.4); color:var(--cream); }
.btn-next { display:flex; align-items:center; gap:10px; background:none; border:1px solid rgba(201,169,110,.4); border-radius:3px; color:var(--gold-light); font-family:'Cormorant Garamond',serif; font-size:1.08rem; letter-spacing:.06em; padding:10px 24px; cursor:pointer; transition:background .2s, border-color .2s; }
.btn-next:hover { background:rgba(201,169,110,.08); border-color:var(--gold); }
.btn-next svg, .btn-back svg { transition:transform .2s; flex-shrink:0; }
.btn-next:hover svg { transform:translateX(3px); }
.btn-back:hover svg { transform:translateX(-3px); }
.btn-enter { background:rgba(201,169,110,.1); border-color:var(--gold); font-size:1.12rem; padding:11px 30px; letter-spacing:.1em; }
.btn-enter:hover { background:rgba(201,169,110,.18); }
/* ══ FINAL STEP ══ */
.final-step { padding:10px 0 8px; }
.final-body {
font-size:1.2rem; color:var(--cream); line-height:1.8;
margin:0 0 36px;
}
.final-pali-block {
margin:0 0 40px;
padding:24px 28px;
border-left:2px solid rgba(201,169,110,.25);
background:rgba(201,169,110,.04);
border-radius:0 3px 3px 0;
}
.final-pali {
font-family:'Cormorant Garamond',serif;
font-size:1.6rem; font-weight:300; font-style:italic;
color:var(--sage); letter-spacing:.04em; line-height:1.3;
margin-bottom:8px;
}
.final-pali-tr {
font-size:1rem; color:var(--muted); font-style:italic; letter-spacing:.04em;
}
/* ═══ Search palette styles — extracted from second inline style block ═══ */
/* ══ HEADER SEARCH BAR (anchor for the dropdown) ══ */
#hdr-search{
position:absolute;
left:50%; top:9px;
transform:translateX(-50%);
display:flex; align-items:center; gap:8px;
min-width:260px; max-width:360px; width:320px;
padding:0 10px;
background:rgba(36,30,24,.55);
border:1px solid rgba(201,169,110,.28);
border-radius:4px;
height:32px;
z-index:2;
transition:border-color .18s, background .18s;
}
@media (max-width: 900px){
#hdr-search{ position:relative; left:auto; top:auto; transform:none; }
}
#hdr-search:focus-within{
border-color:var(--gold);
background:rgba(36,30,24,.85);
}
#hdr-search .hdr-search-icon{
color:rgba(238,221,184,.55);
flex-shrink:0;
}
#hdr-search:focus-within .hdr-search-icon{ color:var(--gold-light); }
#hdr-search input#search-input{
flex:1; min-width:0;
background:transparent; border:none; outline:none;
color:var(--ink); font-size:14px;
font-family:'Cormorant Garamond',serif;
letter-spacing:.01em;
padding:0;
}
#hdr-search input#search-input::placeholder{ color:rgba(238,221,184,.4); font-style:italic; }
.hdr-search-kbd{
font-family:inherit; font-size:10px;
padding:1px 6px;
border:1px solid rgba(201,169,110,.25); border-radius:3px;
color:rgba(238,221,184,.5);
letter-spacing:.04em;
flex-shrink:0;
}
#hdr-search:focus-within .hdr-search-kbd{ display:none; }
/* ══ SEARCH DROPDOWN PANEL (opens under header bar) ══ */
#search-panel{
position:fixed;
top:50px; /* directly under header (50px tall) */
z-index:200;
width:520px; max-width:92vw;
background:linear-gradient(180deg, rgba(36,30,24,.98) 0%, rgba(24,20,16,.98) 100%);
border:1px solid rgba(201,169,110,.35);
border-top:none;
border-radius:0 0 8px 8px;
box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3) inset;
font-family:'Cormorant Garamond',serif;
overflow:hidden;
animation:srch-slide .18s ease-out;
}
@keyframes srch-slide{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }
#search-panel.open{ display:block !important; }
/* Browse-taxonomy anchor row at top of empty-state dropdown */
.srch-browse-link{
display:flex; align-items:center; gap:10px;
padding:12px 22px;
cursor:pointer;
color:var(--gold-light);
border-bottom:1px solid rgba(201,169,110,.14);
font-size:15px;
transition:background .15s;
}
.srch-browse-link:hover{ background:rgba(201,169,110,.08); }
.srch-browse-link .srch-browse-icon{ font-size:16px; opacity:.85; }
.srch-browse-link .srch-browse-arrow{ margin-left:auto; opacity:.65; }
/* Back-to-search row at top of browse-tree mode */
.srch-back-link{
display:flex; align-items:center; gap:8px;
padding:10px 22px;
cursor:pointer;
color:rgba(238,221,184,.75);
border-bottom:1px solid rgba(201,169,110,.14);
font-size:13px; font-style:italic;
transition:color .15s, background .15s;
}
.srch-back-link:hover{ color:var(--gold-light); background:rgba(201,169,110,.08); }
#search-results{ max-height:70vh; overflow-y:auto; padding:6px 0; }
#browse-tree{ max-height:70vh; overflow-y:auto; padding:8px 0; }
#cvpTab1ExplainText, #cvpTab2ExplainText { font-weight:200 !important; font-style:normal !important; color:var(--muted) !important; }
#cvpTab1ExplainText span, #cvpTab2ExplainText span { font-weight:200 !important; }
#cvpTab1Head th, #cvpTab2Head th, #cvpTab3Head th { font-weight:300 !important; }
#search-results::-webkit-scrollbar{ width:6px; }
#search-results::-webkit-scrollbar-thumb{ background:rgba(201,169,110,.3); border-radius:3px; }
#cvpTab1Content::-webkit-scrollbar{ width:4px; }
#cvpTab1Content::-webkit-scrollbar-track{ background:var(--surface); }
#cvpTab1Content::-webkit-scrollbar-thumb{ background:var(--border); border-radius:2px; }
.srch-row{
display:flex; flex-direction:column; gap:2px;
padding:10px 22px;
cursor:pointer;
border-left:2px solid transparent;
transition:background .12s, border-color .12s;
}
.srch-row:hover, .srch-row.active{
background:rgba(201,169,110,.08);
border-left-color:var(--gold);
}
.srch-pali{ font-size:18px; color:var(--gold-light); letter-spacing:.01em; }
.srch-pali mark{ background:rgba(238,221,184,.22); color:#fff7e2; padding:0 1px; border-radius:2px; }
.srch-meta{ font-size:13px; color:rgba(238,221,184,.65); font-style:italic; }
.srch-meta mark{ background:rgba(238,221,184,.18); color:#fff7e2; padding:0 1px; border-radius:2px; }
.srch-cat{
font-size:11px; color:rgba(201,169,110,.55);
letter-spacing:.04em; margin-top:2px;
font-family:'Cormorant Garamond',serif; font-style:italic;
}
.srch-empty{
padding:32px 22px; text-align:center;
color:rgba(238,221,184,.5); font-style:italic; font-size:15px;
}
/* —— Pinned / Recent sections in empty state —— */
.srch-sec{
display:flex; align-items:center; justify-content:space-between;
padding:14px 22px 6px;
font-size:10px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(238,221,184,.42);
font-family:'Cormorant Garamond',serif;
border-top:1px solid rgba(201,169,110,.08);
}
#search-results .srch-sec:first-child{ border-top:none; }
.srch-clear{
font-size:10px; letter-spacing:.08em; text-transform:lowercase;
color:rgba(238,221,184,.4); cursor:pointer; font-style:italic;
padding:2px 6px; border-radius:2px;
transition:color .15s, background .15s;
}
.srch-clear:hover{ color:var(--gold-light); background:rgba(201,169,110,.1); }
.srch-row.has-star{ padding-right:46px; position:relative; }
.srch-star{
position:absolute; right:14px; top:50%; transform:translateY(-50%);
background:none; border:none; cursor:pointer;
color:rgba(238,221,184,.32); font-size:18px; line-height:1;
padding:4px 6px; border-radius:3px;
transition:color .15s, background .15s, transform .15s;
}
.srch-star:hover{ color:var(--gold-light); background:rgba(201,169,110,.12); transform:translateY(-50%) scale(1.1); }
.srch-star.is-pinned{ color:var(--gold); }
.srch-star.is-pinned:hover{ color:var(--gold-light); }
.srch-hint{
display:flex; gap:18px; justify-content:flex-end;
padding:8px 22px; font-size:11px;
color:rgba(238,221,184,.4); letter-spacing:.06em;
border-top:1px solid rgba(201,169,110,.12);
background:rgba(0,0,0,.2);
}
.srch-hint kbd{
font-family:inherit; padding:1px 6px;
border:1px solid rgba(201,169,110,.3); border-radius:3px;
color:rgba(238,221,184,.65); margin-right:4px;
}
/* ══ SAMUTTHĀNA FILTER ICONS ══ */
.samu-card-wrap{position:relative;display:flex;align-items:center;gap:6px;}
.samu-card-wrap .mpb-card{flex:1;}
.samu-filter-btn{
flex-shrink:0;width:28px;height:28px;
background:transparent;
border:1.5px solid var(--teal);
border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s,box-shadow .2s;
pointer-events:auto;
padding:0;
color:rgba(122,184,154,.3);
}
.samu-filter-btn:hover{
background:rgba(122,184,154,.12);
color:rgba(122,184,154,.75);
}
.samu-filter-btn.active{
background:rgba(122,184,154,.20);
box-shadow:0 0 7px rgba(122,184,154,.4);
color:#9dd8b8;
}
.samu-filter-btn svg{display:block;}
/* ══ RŪPA28 FILTER VIEW ══ */
.rupa28-filter-header{
padding:10px 14px 6px;
border-bottom:1px solid var(--border);
display:flex;flex-direction:column;gap:2px;
}
/* Kalāpa type pills */
.kalapa-pills{
padding:8px 12px;
display:flex;flex-wrap:wrap;gap:5px;
border-bottom:1px solid var(--border);
}
.kalapa-pill{
font-family:'Cormorant Garamond',serif;font-size:24px;
padding:4px 12px;border-radius:12px;cursor:pointer;
border:1px solid var(--teal-dim);
color:var(--muted);background:transparent;
transition:all .15s;white-space:nowrap;
}
.kalapa-pill:hover{border-color:var(--teal);color:var(--gold-light);}
.kalapa-pill.active{
background:rgba(122,184,154,.18);
border-color:var(--teal);color:var(--gold-light);
}
.kalapa-pill.active.vithi-highlight{
background:rgba(201,169,110,.32);
border:2px solid var(--gold);
color:var(--gold-light);
box-shadow:0 0 14px rgba(201,169,110,.65);
font-weight:600;
transform:scale(1.04);
}
/* Nipphanna / Anipphanna section headers */
.rupa28-section-hdr{
padding:6px 12px 3px;
cursor:default;
}
.rupa28-subsection-hdr{
padding:4px 12px 2px;
}
/* Octad cluster */
.octad-cluster{
margin:4px 10px 2px;
border:1px solid rgba(122,184,154,.2);
border-radius:4px;
background:rgba(122,184,154,.04);
overflow:hidden;
}
.octad-cluster-hdr{
padding:6px 10px 3px;
}
/* Moral / intentionality badges on anipphanna items */
.rupa28-badge{
font-size:12px;padding:1px 8px;border-radius:8px;
font-family:'Cormorant Garamond',serif;
letter-spacing:.02em;margin-left:8px;
vertical-align:middle;
white-space:nowrap;display:inline-block;
flex-shrink:0;
}
.rupa28-badge.moral{
background:rgba(168,130,72,.18);
border:1px solid rgba(168,130,72,.35);
color:var(--gold);
}
.rupa28-badge.intentional{
background:rgba(100,140,200,.15);
border:1px solid rgba(100,140,200,.3);
color:#8ab4e8;
}
.rupa28-badge.absent{
background:rgba(120,120,120,.1);
border:1px solid rgba(120,120,120,.2);
color:var(--muted);opacity:.6;
}
/* ══ VITHI→RŪPA DYNAMIC FEATURE ══ */
/* Pinned vithi segment highlight */
.vithi-segment.vithi-pinned {
background:rgba(201,169,110,.15);
border-top:1px solid var(--gold);
border-bottom:1px solid var(--gold);
border-radius:2px;
}
.vithi-segment.vithi-pinned > div {
color:var(--gold-light) !important;
}
/* Vithi popup - same sizes as other cet-popups */
#vithi-popup h4 { font-size:15px !important; font-style:italic !important; font-weight:600 !important; text-transform:none !important; letter-spacing:.04em !important; color:var(--gold-light) !important; font-family:'Cormorant Garamond',serif !important; }
#vithi-popup .cet-popup-sub { font-size:12.5px !important; font-family:'Cormorant Garamond',serif !important; }
#vithi-popup #vithi-popup-list li { font-size:13px !important; font-family:'Cormorant Garamond',serif !important; }
/* Pinned popup on canvas */
#vithi-popup.pinned {
display:block;
position:absolute;
z-index:100;
pointer-events:auto;
}
#vithi-popup .vithi-pin-hint {
font-size:12px;color:var(--teal);font-style:italic;
margin-bottom:10px;padding:4px 0;
border-bottom:1px solid rgba(122,184,154,.2);
display:none;
}
#vithi-popup.pinned.has-citta-select .vithi-pin-hint { display:block; }
#vithi-popup .vithi-close-pin {
display:none;font-size:11px;color:var(--muted);
cursor:pointer;float:right;margin-top:-18px;
background:none;border:none;padding:2px 4px;
}
#vithi-popup.pinned .vithi-close-pin { display:inline; }
/* Citta list items — hoverable/clickable when pinned */
#vithi-popup.pinned #vithi-popup-list li {
cursor:pointer;
border-radius:3px;
padding:3px 4px;
transition:background .15s;
user-select:none;
}
#vithi-popup.pinned #vithi-popup-list li:hover {
background:rgba(110,138,235,.12);
}
#vithi-popup.pinned.kamma-vithi #vithi-popup-list li {
cursor:default;
}
#vithi-popup.pinned.kamma-vithi #vithi-popup-list li:hover {
background:transparent;
}
#vithi-popup.pinned #vithi-popup-list li.no-citta {
cursor:default;
}
#vithi-popup.pinned #vithi-popup-list li.no-citta:hover {
background:transparent;
}
#vithi-popup.pinned #vithi-popup-list li.citta-active {
background:rgba(201,169,110,.15);
border-left:3px solid var(--gold);
margin-left:-8px;
padding-left:11px;
color:var(--gold-light);
}
/* Kalāpa pill highlight from vithi hover */
.kalapa-pill.vithi-highlight {
border-color:var(--gold);
color:var(--gold-light);
background:rgba(201,169,110,.12);
box-shadow:0 0 6px rgba(201,169,110,.3);
}
/* Kusala/Akusala toggle badge */
.kusala-toggle {
display:inline-block;
font-size:12px;padding:1px 8px;border-radius:8px;
font-family:'Cormorant Garamond',serif;
letter-spacing:.02em;margin-left:8px;
vertical-align:middle;cursor:pointer;
white-space:nowrap;
transition:all .2s;
user-select:none;
}
.kusala-toggle.kusala {
background:rgba(122,184,154,.18);
border:1px solid rgba(122,184,154,.45);
color:#9dd8b8;
}
.kusala-toggle.akusala {
background:rgba(200,80,80,.15);
border:1px solid rgba(200,80,80,.35);
color:#e08080;
opacity:1 !important;
}
/* Dim lahutā items when akusala - use colour dimming not opacity */
.abhi-item.lahuta-dimmed .abhi-num {
opacity:0.3;
}
.abhi-item.lahuta-dimmed .abhi-en {
opacity:0.3;
}
.abhi-item.lahuta-dimmed {
background:rgba(16,19,28,.6);
}
/* abhi-pali dims only its text node - toggle badge stays bright */
.abhi-item.lahuta-dimmed .abhi-pali {
color:rgba(238,213,162,.25);
}
.abhi-item.lahuta-dimmed .kusala-toggle {
opacity:1 !important;
color:#e08080 !important;
background:rgba(200,80,80,.2) !important;
border-color:rgba(200,80,80,.5) !important;
}
/* ══ VITHI SEGMENT DIMMING ══ */
#citta-vithi-bar.has-pinned .vithi-segment:not(.vithi-pinned) {
opacity:0.3;
transition:opacity .2s;
}
#citta-vithi-bar.has-pinned .vithi-sep {
opacity:0.3;
}
/* ══ CITTA TABLE VIPĀKA HIGHLIGHT ══ */
.citta-vipaka-highlight {
background:rgba(201,169,110,.22) !important;
color:var(--gold-light) !important;
border:1px solid rgba(201,169,110,.5) !important;
cursor:pointer;
}
.citta-vipaka-dim {
opacity:0.15 !important;
}
.citta-vipaka-highlight:hover {
background:rgba(201,169,110,.35) !important;
}
/* ══ CUSTOM TOOLTIPS ══ */
#niyamas-tooltip {
position:fixed;
display:none;
background:rgba(14,18,26,.97);
color:var(--cream);
font-family:'Cormorant Garamond',serif;
font-size:17px;
font-style:italic;
font-weight:400;
letter-spacing:.02em;
line-height:1.6;
padding:12px 18px;
border-radius:4px;
border:1px solid var(--teal-border);
box-shadow:0 6px 24px rgba(0,0,0,.7);
max-width:380px;
white-space:normal;
text-align:left;
pointer-events:none;
z-index:99999;
}
/* ═══ crumb down-navigation menu (Phase B) ═══ */
.sp-crumbs .is-current.has-menu{cursor:pointer;}
.sp-crumbs .crumb-arrow{font-size:.6rem;color:var(--gold);}
.crumb-menu{background:var(--surface);color:inherit;border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:9999;min-width:180px;max-width:240px;max-height:300px;overflow-y:auto;padding:4px 0;}
.crumb-menu-item{padding:6px 14px;font-size:.78rem;cursor:pointer;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crumb-menu-item:hover{background:var(--border);color:var(--gold);}
body.light-mode .crumb-menu{background:#f2ead6;border-color:#d4c09a;color:#3d2e1a;}
body.light-mode .crumb-menu-item:hover{background:#e4d5b5;}
/* ═══ source-layer citation badges (C) ═══ */
.cite-badge{display:inline-block;font-size:.58rem;font-style:normal;font-weight:600;letter-spacing:.05em;padding:0 5px;margin-left:8px;border-radius:8px;vertical-align:1px;line-height:1.5;cursor:default;}
.cb-su{background:rgba(96,140,190,.16);color:#8fb3d9;}
.cb-ab{background:rgba(190,150,70,.16);color:#d3b077;}
.cb-at{background:rgba(150,110,190,.16);color:#b79cd9;}
body.light-mode .cb-su{background:rgba(56,100,160,.12);color:#3c6d9e;}
body.light-mode .cb-ab{background:rgba(150,110,40,.12);color:#8a6a2a;}
body.light-mode .cb-at{background:rgba(110,70,150,.12);color:#6d4a96;}
/* ═══ palette tabs + browse tree (UX2) ═══ */
#browse-tree{max-height:60vh;overflow-y:auto;font-size:.82rem;padding:4px 2px;}
#browse-tree details{margin-left:12px;}
#browse-tree > details{margin-left:0;}
.bt-node{cursor:pointer;padding:4px 6px;color:inherit;list-style-position:inside;}
.bt-node:hover{color:var(--gold);}
.bt-open{margin-left:8px;color:var(--gold);font-size:.75rem;opacity:.7;}
.bt-open:hover{opacity:1;}
.bt-card{cursor:pointer;padding:3px 6px 3px 26px;color:var(--muted);}
.bt-card:hover{color:var(--gold);}
/* ═══ study path popup ═══ */
#study-popup{position:fixed;left:24px;top:110px;width:360px;max-width:86vw;z-index:560;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 36px rgba(0,0,0,.35);font-size:.85rem;line-height:1.65;}
#study-popup-head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:grab;user-select:none;touch-action:none;}
#study-popup-head:active{cursor:grabbing;}
.sph-grip{opacity:.45;font-size:.7rem;}
#sph-title{font-weight:600;letter-spacing:.02em;font-size:.8rem;}
#sph-progress{margin-left:auto;font-size:.68rem;color:var(--muted);white-space:nowrap;}
#study-popup-body{padding:12px 16px;max-height:46vh;overflow-y:auto;color:inherit;}
#study-popup-body a.sp-go{color:var(--gold);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
#study-popup-body a.sp-go.sp-seen::after{content:" ✓";font-size:.7em;opacity:.8;}
#study-popup-foot{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--border);}
#sph-prev,#sph-next{background:none;border:1px solid var(--border);border-radius:6px;color:inherit;padding:3px 12px;cursor:pointer;font-size:.8rem;}
#sph-prev:disabled,#sph-next:disabled{opacity:.35;cursor:default;}
#sph-hide{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.75rem;text-decoration:underline;}
body.light-mode #study-popup{background:#f7f1e3;border-color:#d4c09a;color:#3d2e1a;}
body.light-mode #study-popup-head,body.light-mode #study-popup-foot{border-color:#d4c09a;}
#sph-home{background:none;border:1px solid var(--border);border-radius:6px;color:inherit;padding:3px 10px;cursor:pointer;font-size:.8rem;}
#study-popup-body p{margin:0 0 10px;}
#study-popup-body a.sp-enter{color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
#study-popup-body .sp-soon{opacity:.55;}
/* ══ SEARCH BODY-MATCH SNIPPETS (batch 18b) ══ */
.srch-row.has-snippet{ padding-bottom:12px; }
.srch-snippet{
display:flex; flex-direction:column; gap:3px;
margin-top:6px;
padding:8px 10px;
background:rgba(28,22,18,.55);
border-left:2px solid rgba(201,169,110,.35);
border-radius:2px;
font-size:12.5px;
line-height:1.45;
}
.srch-sec-loc{
font-size:10px; letter-spacing:.12em; text-transform:uppercase;
color:rgba(201,169,110,.65);
font-family:'Cormorant Garamond',serif;
font-style:italic;
}
.srch-snip-text{
color:rgba(238,221,184,.78);
font-family:'Cormorant Garamond',serif;
}
.srch-snip-text mark{
background:rgba(238,221,184,.22);
color:#fff7e2;
padding:0 2px;
border-radius:2px;
}
/* ══ REFERENCED BY (batch 18c) ══ */
.sp-refs{
margin-top:20px !important;
padding-top:14px;
border-top:1px solid rgba(201,169,110,.18);
}
.sp-refs-title{
display:flex; align-items:center; gap:10px;
margin-bottom:12px !important;
}
.sp-refs-title .sp-ref-count{
font-size:11px; color:rgba(238,221,184,.5);
font-weight:normal; letter-spacing:.04em;
font-style:italic;
}
.sp-refs-toggle{
margin-left:auto;
background:none; border:1px solid rgba(201,169,110,.28);
color:rgba(238,221,184,.65); cursor:pointer;
font-family:'Cormorant Garamond',serif;
font-size:11px; letter-spacing:.06em;
padding:3px 10px; border-radius:3px;
transition:color .15s, border-color .15s, background .15s;
}
.sp-refs-toggle:hover{
color:var(--gold-light); border-color:var(--gold-dim);
background:rgba(201,169,110,.08);
}
.sp-refs-body{ display:block; }
.sp-refs[data-collapsed="1"] .sp-refs-body{ display:none; }
.sp-ref-group{ margin-bottom:12px; }
.sp-ref-group:last-child{ margin-bottom:0; }
.sp-ref-group-title{
font-family:'Cormorant Garamond',serif;
font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
color:rgba(201,169,110,.6); font-style:italic;
margin-bottom:6px;
}
.sp-ref-chips{
display:flex; flex-wrap:wrap; gap:6px;
}
.sp-ref-chip{
display:inline-flex; align-items:center;
padding:3px 10px;
background:rgba(28,22,18,.55);
border:1px solid rgba(201,169,110,.22);
border-radius:12px;
color:rgba(238,221,184,.82);
font-family:'Cormorant Garamond',serif;
font-size:13px; letter-spacing:.01em;
cursor:pointer;
transition:color .15s, border-color .15s, background .15s, transform .1s;
}
.sp-ref-chip:hover{
color:var(--gold-light);
border-color:var(--gold-dim);
background:rgba(201,169,110,.12);
transform:translateY(-1px);
}
/* ══ LIGHT MODE for new elements (batch 19a) ══ */
/* Header search bar */
body.light-mode #hdr-search{
background:rgba(232,223,200,.55);
border-color:#d4c09a;
}
body.light-mode #hdr-search:focus-within{
border-color:#a07840;
background:rgba(232,223,200,.95);
}
body.light-mode #hdr-search .hdr-search-icon{ color:#a07840; }
body.light-mode #hdr-search:focus-within .hdr-search-icon{ color:#5c3e1a; }
body.light-mode #hdr-search input#search-input{ color:#3d2e1a; }
body.light-mode #hdr-search input#search-input::placeholder{ color:#8a7050; }
body.light-mode .hdr-search-kbd{
border-color:#d4c09a; color:#8a7050;
}
/* Search dropdown panel */
body.light-mode #search-panel{
background:linear-gradient(180deg, #faf5ea 0%, #f2ead6 100%);
border-color:#d4c09a;
box-shadow:0 20px 60px rgba(60,40,20,.15);
}
body.light-mode .srch-empty{ color:#8a7050; }
body.light-mode .srch-sec span{ color:#8a7050; }
body.light-mode .srch-row{ color:#3d2e1a; }
body.light-mode .srch-row:hover, body.light-mode .srch-row.active{
background:rgba(201,169,110,.15);
}
body.light-mode .srch-pali{ color:#5c3e1a; }
body.light-mode .srch-meta{ color:#3d2e1a; }
body.light-mode .srch-cat{ color:#8a7050; }
body.light-mode .srch-row mark{
background:rgba(160,120,64,.25); color:#3d2e1a;
}
body.light-mode .srch-star{ color:#a07840; }
body.light-mode .srch-star.pinned{ color:#5c3e1a; }
body.light-mode .srch-hint{
color:#8a7050;
border-top-color:rgba(212,192,154,.4);
}
body.light-mode .srch-hint kbd{
background:#e8dfc8; border-color:#d4c09a; color:#5c3e1a;
}
/* Browse taxonomy link + back link */
body.light-mode .srch-browse-link{
color:#5c3e1a;
border-bottom-color:rgba(212,192,154,.5);
}
body.light-mode .srch-browse-link:hover{ background:rgba(201,169,110,.12); }
body.light-mode .srch-back-link{
color:#8a7050;
border-bottom-color:rgba(212,192,154,.5);
}
body.light-mode .srch-back-link:hover{ color:#5c3e1a; background:rgba(201,169,110,.12); }
/* Search body-match snippets */
body.light-mode .srch-snippet{
background:rgba(232,223,200,.55);
border-left-color:#a07840;
}
body.light-mode .srch-sec-loc{ color:#8a7050; }
body.light-mode .srch-snip-text{ color:#3d2e1a; }
body.light-mode .srch-snip-text mark{
background:rgba(160,120,64,.25); color:#3d2e1a;
}
/* Language dropdown */
body.light-mode #lang-current{
border-color:#d4c09a; color:#5c3e1a;
}
body.light-mode #lang-current:hover, body.light-mode #lang-current[aria-expanded="true"]{
border-color:#a07840; background:rgba(201,169,110,.12);
}
body.light-mode #lang-menu{
background:linear-gradient(180deg, #faf5ea 0%, #f2ead6 100%);
border-color:#d4c09a;
box-shadow:0 12px 32px rgba(60,40,20,.15);
}
body.light-mode .lang-opt{ color:#3d2e1a; }
body.light-mode .lang-opt:hover{ background:rgba(201,169,110,.15); color:#5c3e1a; }
body.light-mode .lang-opt.active{ color:#5c3e1a; background:rgba(201,169,110,.1); }
body.light-mode .lang-opt-code{ color:#8a7050; }
body.light-mode .lang-opt.active .lang-opt-code{ color:#5c3e1a; }
/* Info button + popover */
body.light-mode #tb-info-btn{
border-color:#d4c09a; color:#8a7050;
}
body.light-mode #tb-info-btn:hover, body.light-mode #tb-info-btn[aria-expanded="true"]{
color:#5c3e1a; border-color:#a07840; background:rgba(201,169,110,.12);
}
body.light-mode #tb-info-popover{
background:linear-gradient(180deg, #faf5ea 0%, #f2ead6 100%);
border-color:#d4c09a;
box-shadow:0 12px 32px rgba(60,40,20,.15);
}
body.light-mode .tb-info-item{ color:#5c3e1a; }
body.light-mode .tb-info-item kbd{
background:#e8dfc8; border-color:#d4c09a; color:#5c3e1a;
}
/* Referenced-by section */
body.light-mode .sp-refs{
border-top-color:rgba(212,192,154,.55);
}
body.light-mode .sp-refs-title .sp-ref-count{ color:#8a7050; }
body.light-mode .sp-refs-toggle{
border-color:#d4c09a; color:#8a7050;
}
body.light-mode .sp-refs-toggle:hover{
color:#5c3e1a; border-color:#a07840; background:rgba(201,169,110,.12);
}
body.light-mode .sp-ref-group-title{ color:#8a7050; }
body.light-mode .sp-ref-chip{
background:rgba(232,223,200,.7);
border-color:#d4c09a;
color:#3d2e1a;
}
body.light-mode .sp-ref-chip:hover{
color:#5c3e1a; border-color:#a07840;
background:rgba(201,169,110,.15);
}
|