/* bible/css/modules.css — the CSS each optional module used to inject as a <style> block at boot
   (W25, 2026-10-05). Moved here VERBATIM so the Content-Security-Policy can drop style-src
   'unsafe-inline' (docs/CSP-STYLE-AUDIT.md). Linked AFTER css/batch.css, in the modules'
   script order — the same cascade position the injected blocks had. Edit a module's rules
   here, not in its .js file. */

/* ======== gems.js ======== */
.gem-chip{color:#3A3042}
.gem-gain{display:inline-block;font-weight:900;color:#926312;background:#FBEFD9;border-radius:99px;padding:4px 12px;font-size:14px}
.gem-shop{background:#FFFDF8;border-radius:20px;padding:16px;box-shadow:0 4px 0 #F2E4CE;margin-bottom:14px}
.gem-shop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gem-shop-bal{font-weight:900;font-size:20px;color:#3A3042}
.gem-shop-lbl{font-weight:800;font-size:13px;color:#926312;background:#FBEFD9;border-radius:99px;padding:4px 12px}
.gem-card{display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#FFF6E9;border-radius:18px;padding:12px 14px;box-shadow:0 4px 0 #F2E4CE;margin-bottom:14px}
.gem-card-body{flex:1 1 180px}
.gem-freeze .gem-buy-btn{flex:1 1 100%;margin-top:2px}
.gem-card-ic{font-size:32px;line-height:1;flex-shrink:0}
.gem-card-body{flex:1;min-width:0}
.gem-card-title{font-weight:900;font-size:15px;color:#3A3042}
.gem-card-sub{font-weight:700;font-size:12px;color:var(--sub);margin:2px 0 6px}
.gem-held{font-size:20px;line-height:1}
.gem-mut{font-size:12px;font-weight:700;color:var(--sub)}
.gem-buy-btn{border:none;border-radius:16px;background:#58B7E8;color:#fff;font-weight:900;font-size:13px;padding:10px 14px;min-height:44px;min-width:44px;cursor:pointer;box-shadow:0 4px 0 #3D95C4;flex-shrink:0}
.gem-buy-btn:disabled{background:#c8bba4;box-shadow:0 4px 0 #a8967a;cursor:default;opacity:.75}
.gem-sec-lbl{font-weight:900;font-size:14px;color:#3A3042;margin:4px 0 8px}
.gem-av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gem-av{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;border-radius:18px;background:#FFF6E9;box-shadow:0 4px 0 #F2E4CE;padding:14px 6px;min-height:44px;cursor:pointer;font-family:inherit}
.gem-av.owned{background:#EAFBF5;box-shadow:0 4px 0 #C6F0E4;cursor:default}
.gem-av.buyable:active{transform:translateY(2px);box-shadow:0 2px 0 #F2E4CE}
.gem-av.gem-poor{opacity:.55}
.gem-av-e{font-size:30px;line-height:1}
.gem-av-tag{font-size:11px;font-weight:800;color:var(--sub)}
.gem-owned-tag{color:#1f9f93}
.gem-toast{font-weight:800}
.gem-wager .gem-buy-btn{flex:1 1 100%;margin-top:2px}
.gem-wager-bar{height:8px;border-radius:99px;background:#F2E4CE;overflow:hidden;margin:4px 0 6px}
.gem-wager-bar i{display:block;height:100%;border-radius:99px;background:#F0A62B;transition:width .3s}

/* ======== quests.js ======== */
.quests-card{background:#FFFDF8;border-radius:20px;padding:16px;box-shadow:0 4px 0 #F2E4CE;margin-bottom:14px}
.quests-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.quests-title{font-weight:900;font-size:15px;color:#3A3042}
.quests-pill{font-weight:800;font-size:12px;color:#926312;background:#FBEFD9;border-radius:99px;padding:4px 10px}
.quest-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:14px}
.quest-row.done{background:#EAFBF5}
.quest-ic{font-size:20px;line-height:1;flex-shrink:0}
.quest-body{flex:1;min-width:0}
.quest-label{font-weight:700;font-size:13px;color:#3A3042;margin-bottom:4px}
.quest-bar{height:8px;border-radius:99px;background:#F2E4CE;overflow:hidden}
.quest-fill{height:8px;border-radius:99px;background:#58B7E8}
.quest-right{font-weight:800;font-size:12px;color:var(--sub);flex-shrink:0;margin-left:6px}
.quest-done-tag{color:#1f9f93}

/* ======== chest.js ======== */
.chest-overlay{position:fixed;inset:0;background:rgba(58,48,66,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.chest-card{background:#FFFDF8;border-radius:24px;box-shadow:0 6px 0 #F2E4CE;padding:30px 24px 26px;text-align:center;max-width:320px;width:100%}
.chest-head{font-weight:900;font-size:20px;color:#3A3042;margin:0 0 6px}
.chest-sub{font-weight:700;font-size:14px;color:var(--sub);margin:0 0 18px}
.chest-box{background:none;border:none;font-size:72px;line-height:1;cursor:pointer;padding:0;margin:0 0 16px;display:inline-block}
@media (prefers-reduced-motion: no-preference){.chest-box.chest-bounce{animation:chest-bob 1.1s ease-in-out infinite}}
@keyframes chest-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.chest-loot{font-weight:900;font-size:34px;color:#D28E1A;margin:0 0 18px}
.chest-card .btn.chest-nice{border:none;border-radius:16px;background:#58B7E8;color:#fff;font-weight:900;font-size:15px;padding:10px 20px;min-height:44px;min-width:44px;cursor:pointer;box-shadow:0 4px 0 #3D95C4}

/* ======== profile.js ======== */
.profile{height:100%;display:flex;flex-direction:column;background:#FFF6E9}
.profile .phead{display:flex;align-items:center;gap:8px;padding:12px 14px 6px}
.profile .ptitle{font-weight:900;font-size:18px;color:#3A3042}
.pf-back{border:none;background:#fff;color:#3A3042;font-weight:800;font-size:15px;border-radius:14px;padding:8px 12px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.pscroll{flex:1;overflow-y:auto;padding:6px 16px 24px}
.pf-hero{display:flex;flex-direction:column;align-items:center;gap:8px;background:#FFFDF8;border-radius:24px;padding:18px 16px;box-shadow:0 4px 0 rgba(0,0,0,.06);margin-bottom:14px}
.pf-avatar{position:relative;width:96px;height:96px;border-radius:50%;border:5px solid #2EC4B6;background:#FFF6E9;font-size:54px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pf-edit{position:absolute;right:-2px;bottom:-2px;font-size:15px;background:#FFBF3F;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.pf-name{border:none;background:transparent;font-weight:900;font-size:22px;color:#3A3042;cursor:pointer;display:flex;align-items:center;gap:6px}
.pf-name .pf-edit{position:static;width:20px;height:20px;font-size:12px}
.pf-levelchip{font-weight:800;color:#8940e0;background:#F1E9FB;border-radius:99px;padding:5px 14px;font-size:14px}
.pf-hero .levelbar{width:100%}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.pf-tile{background:#FFFDF8;border-radius:16px;padding:10px 4px;text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.05)}
.pf-tic{font-size:20px}
.pf-tval{font-weight:900;font-size:18px;color:#3A3042}
.pf-tlbl{font-size:10.5px;font-weight:700;color:var(--sub);line-height:1.1}
.pf-sec{margin-bottom:18px}
.pf-sec h3{font-size:16px;font-weight:900;color:#3A3042;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.pf-cnt{font-size:13px;font-weight:800;color:var(--sub);background:#F2E4CE;border-radius:99px;padding:2px 9px}
.pf-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-badge{display:flex;flex-direction:column;align-items:center;gap:3px;background:#FFFDF8;border:none;border-radius:16px;padding:11px 6px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.05)}
.pf-badge .bc-ic{font-size:30px;line-height:1}
.pf-badge .bc-nm{font-size:11px;font-weight:800;color:#3A3042;text-align:center;line-height:1.15}
.pf-badge.locked{opacity:.5;filter:grayscale(.6)}
.pf-badge.locked .bc-nm{color:var(--sub)}
.pf-grown h3{color:#5b5168}
.pf-lock{width:100%;border:2px dashed #c8bba4;background:#FFFDF8;color:var(--sub);font-weight:800;border-radius:16px;padding:14px;cursor:pointer;font-size:14px}
.pf-grown-body{display:flex;flex-direction:column;gap:8px}
.pf-acct-row{display:flex;justify-content:space-between;align-items:center;background:#FFFDF8;border-radius:14px;padding:12px 14px;font-weight:800;color:#3A3042}
.pf-mut{color:var(--sub);font-weight:700;font-size:13px}
.av-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.av-opt{position:relative;font-size:30px;background:#FFF6E9;border:3px solid transparent;border-radius:16px;padding:8px 0;cursor:pointer}
.av-opt.sel{border-color:#2EC4B6;background:#fff}
.av-opt.locked{opacity:.55;cursor:default;font-size:20px}
.av-need{display:block;font-size:9px;font-weight:800;color:var(--sub)}
.pf-input{width:100%;border:3px solid #F2E4CE;border-radius:14px;padding:12px;font-size:18px;font-weight:800;color:#3A3042;margin:10px 0;outline:none;box-sizing:border-box}
.sheet-sub{color:var(--sub);font-weight:700;margin:2px 0 0}
.sheet-note{color:var(--sub);font-weight:700;font-size:13px;margin:8px 0 0}

/* ======== profile.js ======== */
.pf-invite-body{display:flex;flex-direction:column;gap:8px}
.pf-code{font-weight:900;font-size:30px;letter-spacing:3px;color:#9B5DE5;background:#F1E9FB;border-radius:14px;padding:12px;text-align:center}
.pf-switch{display:flex;align-items:center;gap:8px;cursor:pointer}
.pf-select{border:2px solid #F2E4CE;border-radius:12px;padding:8px 10px;font-weight:800;color:#3A3042;background:#fff;font-size:14px}
/* LL11 grown-ups additions: the leaderboard explainer, the "what we hold" readout
       and the delete button. Delete is the only red control in the app on purpose. */
.pf-fine{margin:2px 4px 0;font-size:12.5px;line-height:1.45;font-weight:700;color:var(--sub)}
.pf-link{background:none;border:none;color:#2AA79B;font-weight:900;font-size:14px;cursor:pointer;padding:0}
.pf-data{white-space:pre-wrap;background:#FFFDF8;border:2px dashed #F2E4CE;border-radius:14px;padding:12px 14px;font-size:13px;font-weight:700;color:#3A3042;line-height:1.5}
.btn.danger{background:#fff;color:#C0392B;border:2px solid #E8B6B0;box-shadow:0 5px 0 #E8B6B0}
.btn.danger:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #E8B6B0}
/* 🔴 THE ADULT GATE WAS NEVER CLOSED. `.pf-grown-body` and `.pf-acct-row` both set
       `display:flex`, and an author rule beats the user-agent's `[hidden]{display:none}` —
       so `<div class="pf-grown-body" hidden>` rendered anyway. The press-and-hold lock was
       decorative: the parent email, the reminder settings, the leaderboard opt-in, the
       child-data readout and the DELETE button were all on screen to a child the moment
       the profile opened. `#pf-data-out` was correctly hidden throughout, because
       `.pf-data` sets no `display` — which is what proved the diagnosis rather than the
       guess. Verified in Chrome: computed display `flex`, offsetParent non-null.
       Any class that carries `hidden` in this file needs its own `[hidden]` rule. */
.pf-grown-body[hidden],.pf-acct-row[hidden],.pf-data[hidden]{display:none}

/* ======== challenges.js ======== */
.chal-shelf{margin:18px 4px 2px;}
.chal-head{font-size:20px;font-weight:900;letter-spacing:-.3px;margin:0 0 8px;}
.chal-row{display:flex;align-items:center;gap:12px;width:100%;background:var(--card);border-radius:16px;
padding:12px 14px;margin-bottom:8px;box-shadow:0 3px 0 var(--soft);text-align:left;}
.chal-row:active{transform:translateY(2px);box-shadow:0 1px 0 var(--soft);}
.chal-row.done{background:#FFF7E6;box-shadow:0 3px 0 #f0d999;}
.chal-ic{font-size:26px;line-height:1;flex-shrink:0;}
.chal-meta{flex:1;min-width:0;}
.chal-meta b{display:block;font-size:16px;font-weight:900;color:var(--ink);}
.chal-meta span{font-size:12.5px;font-weight:700;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.chal-go{font-size:13px;font-weight:900;color:#8940e0;flex-shrink:0;}
.chal-top{display:flex;align-items:center;gap:12px;padding:14px 16px 6px;}
.chal-top .quit{font-size:26px;font-weight:900;color:#c9b793;padding:4px 8px;}
.chal-top .speedtrack{flex:1;}
.chal-secs{font-weight:900;font-size:15px;color:var(--coral);min-width:38px;text-align:right;}
.chal-count{flex:1;text-align:right;font-weight:800;color:var(--sub);font-size:14px;}
.chal-intro .chal-big{font-size:72px;line-height:1;}
.chal-reward{font-weight:900;color:var(--teal);font-size:16px;margin:4px 0 0;}

/* ======== starchallenge.js ======== */
.starcard .star-lead{font-size:13px;font-weight:700;color:var(--sub);margin:2px 0 10px}
.star-row{display:flex;align-items:center;gap:12px;width:100%;background:#FFFDF8;
border:0;border-radius:18px;padding:12px 14px;margin:8px 0;text-align:left;
box-shadow:0 3px 0 rgba(0,0,0,.06)}
.star-ic{font-size:26px;line-height:1;flex-shrink:0}
.star-meta{flex:1;min-width:0}
.star-meta b{display:block;font-size:15px;font-weight:900;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star-meta span{display:block;font-size:12px;font-weight:700;color:var(--sub);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star-go{font-size:13px;font-weight:900;color:#8940e0;flex-shrink:0}
.star-intro{text-align:center;padding:18px 16px}
.star-intro h2{font-size:24px;font-weight:900;color:var(--ink);margin:6px 0 2px}
.star-intro p{font-weight:700;color:var(--sub);margin:2px 0}
.star-big{font-size:72px;line-height:1}
.star-rules{font-size:13px;margin-top:10px!important}
.starmode .progress i{background:var(--gold)}

/* ======== family.js ======== */
.pf-fam .fam-lead{font-size:13.5px;font-weight:700;color:var(--sub);margin:2px 0 10px}
.pf-fam .fam-box{background:#FFFDF8;border-radius:18px;padding:14px 16px;
box-shadow:0 3px 0 rgba(0,0,0,.06)}
.pf-fam .fam-ttl{font-weight:900;font-size:17px;color:#3A3042}
.pf-fam .fam-soon{font-size:11px;font-weight:800;color:var(--sub);background:#F2E4CE;
border-radius:8px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.pf-fam .fam-list{margin:10px 0;padding-left:18px}
.pf-fam .fam-list li{font-size:13px;font-weight:700;color:#3A3042;margin:4px 0}
.pf-fam .fam-price{font-weight:900;font-size:19px;color:#3A3042;margin-top:8px}
.pf-fam .fam-price span{font-size:12px;font-weight:800;color:var(--sub)}
.pf-fam .fam-fine{font-size:11.5px;font-weight:700;color:var(--sub);margin:4px 0 10px}
.pf-fam .fam-buy{width:100%;border:0;border-radius:14px;padding:12px;font-weight:900;
font-size:15px;background:#E8DCC8;color:#9c8e78;cursor:not-allowed}
.pf-fam .fam-note{font-size:12.5px;font-weight:700;color:var(--sub);margin:10px 0 0}
.pf-fam .fam-mail{color:#F0A62B;font-weight:900}

/* ======== certificates.js ======== */
/* ---- the shelf in the profile ---- */
.pf-certs .pf-badges{grid-template-columns:repeat(2,1fr)}
.pf-cert{display:flex;flex-direction:column;align-items:center;gap:4px;background:#FFFDF8;border:none;border-radius:16px;padding:13px 8px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.05)}
.pf-cert .cc-ic{font-size:30px;line-height:1}
.pf-cert .cc-cover{width:100%;max-width:96px;height:46px;object-fit:cover;border-radius:9px;display:block}
.pf-cert .cc-nm{font-size:11.5px;font-weight:800;color:#3A3042;text-align:center;line-height:1.2}
.pf-cert .cc-sub{font-size:10px;font-weight:700;color:var(--sub)}
.pf-cert.locked{opacity:.5;filter:grayscale(.6);cursor:default}
.pf-cert.locked .cc-nm{color:var(--sub)}
/* ---- the win-screen row (sits beside .trackdone, deliberately quieter than it) ---- */
/* align-items:flex-start, not center: with the button in the body the row is tall, and
       centring floated the medal down beside the button instead of beside the heading. */
.cert-winrow{display:flex;align-items:flex-start;gap:12px;background:#FFFDF8;border-radius:20px;padding:14px 16px;margin:10px 0;text-align:left;box-shadow:0 4px 0 rgba(0,0,0,.06)}
.cert-winrow .cw-ic{font-size:34px;line-height:1.1}
.cert-winrow .cw-body{flex:1;min-width:0}
/* .btn is a full-width block on the win screen; here it is a secondary action beside a
       heading, so it stays the size of its own label. */
.cert-winrow .btn{width:auto;display:inline-block;margin:0;padding:10px 18px;font-size:15px}
.cert-winrow .cw-k{font-weight:900;font-size:15px;color:#3A3042}
.cert-winrow .cw-n{font-weight:800;font-size:13px;color:var(--sub);margin-bottom:7px}
/* ---- the certificate overlay ---- */
.cert-ov{position:fixed;inset:0;z-index:10000;background:rgba(58,48,66,.5);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:16px}
.cert-sheet{background:#fff;width:100%;max-width:640px;border-radius:10px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
/* double rule: gold outer, sky inner — the border IS the decoration, so the sheet
       stays mostly white and a home printer is never asked to flood a page with ink */
.cert-in{border:5px solid #F0A62B;border-radius:6px;padding:5px}
.cert-body{border:2px solid #58B7E8;border-radius:3px;padding:26px 22px 20px;text-align:center}
.cert-lily{width:104px;margin:0 auto 4px}
.cert-lily svg{width:100%;height:auto;display:block}
.cert-kicker{font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--sub);margin:2px 0}
.cert-title{font-size:27px;font-weight:900;color:#3A3042;line-height:1.15;margin:0 0 2px}
.cert-rule{width:78px;height:4px;border-radius:99px;background:#F0A62B;margin:10px auto 14px}
.cert-lead{font-size:13px;font-weight:700;color:var(--sub);margin:0}
.cert-name{font-size:30px;font-weight:900;color:#3A3042;margin:6px 0 4px;word-break:break-word}
.cert-name.blank{border-bottom:3px dashed #c8bba4;min-height:38px;max-width:340px;margin-left:auto;margin-right:auto}
.cert-what{font-size:16px;font-weight:800;color:#3A3042;line-height:1.45;margin:12px 16px 0}
.cert-course{font-size:21px;font-weight:900;color:#2AA79B;line-height:1.25;margin:6px 0 0}
.cert-cover{display:block;width:210px;max-width:70%;height:auto;margin:14px auto 0;border-radius:12px;border:3px solid #F2E4CE}
.cert-verses{list-style:none;padding:0;margin:14px auto 0;max-width:420px;display:flex;flex-wrap:wrap;gap:5px 7px;justify-content:center}
.cert-verses li{font-size:12px;font-weight:800;color:#3A3042;background:#FFF6E9;border-radius:99px;padding:4px 11px}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:22px;padding-top:12px;border-top:2px solid #F2E4CE}
.cert-foot div{font-size:11px;font-weight:800;color:var(--sub);text-align:left}
.cert-foot .cf-r{text-align:right}
/* nowrap: at 430px the date broke across two lines ("26 August / 2026"), which
       looked like a layout bug on a document meant to go on a fridge. */
.cert-foot b{display:block;font-size:13px;color:#3A3042;white-space:nowrap}
.cert-actions{display:flex;gap:10px;width:100%;max-width:640px;margin:14px 0 24px}
.cert-actions .btn{flex:1;margin:0}
/* ---- print: the certificate becomes the whole page ----
       `body > *` works because the overlay is appended to <body> as a direct sibling of
       #app, and every module's injected <style> lives in <head>.  Portrait with a real
       margin, because a borderless print clips the gold rule. */
@media print{
  body > *{display:none !important}
  body > .cert-ov{display:block !important;position:static !important;inset:auto !important;
    background:none !important;padding:0 !important;overflow:visible !important;z-index:auto !important}
  .cert-actions{display:none !important}
/* The app's cream page background would flood a whole sheet of A4 if a parent ticks
       Chrome's "Background graphics" box.  Force white; the gold rule is the decoration. */
  html,body{background:#fff !important}
  .cert-sheet{max-width:none !important;width:100% !important;margin:0 !important;padding:0 !important;
    box-shadow:none !important;border-radius:0 !important;page-break-inside:avoid}
/* Fill the page rather than sitting in the top two thirds with the frame stopping
       mid-sheet — the gold border spans the paper and the date line sits on the bottom
       rule, which is what makes it read as a certificate and not a screenshot. */
  .cert-in{min-height:96vh;display:flex;flex-direction:column}
  .cert-body{flex:1;display:flex;flex-direction:column;padding:44px 30px 26px}
  .cert-main{flex:1;display:flex;flex-direction:column;justify-content:center}
  .cert-foot{margin-top:auto}
  .cert-title{font-size:31px}
  .cert-name{font-size:34px}
}
@page{margin:12mm}

/* ======== mailbox.js ======== */
/* ---- weekly goal card (home) ---- */
.goalcard{display:flex;align-items:center;gap:14px;width:100%;background:#FFFDF8;border:none;
  border-radius:22px;padding:14px 16px;margin:10px 0;text-align:left;box-shadow:0 4px 0 rgba(0,0,0,.06)}
/* the ring slot also holds the 🎯 placeholder before a goal is picked, so it
       centres its contents rather than assuming an <svg> */
.goalcard .gc-ring{width:58px;height:58px;min-width:58px;display:flex;align-items:center;
  justify-content:center;font-size:30px;line-height:1}
.goalcard .gc-ring svg{width:100%;height:100%;display:block}
.goalcard .gc-body{flex:1;min-width:0}
.goalcard .gc-k{font-weight:900;font-size:16px;color:#3A3042;margin:0 0 2px}
.goalcard .gc-s{font-weight:800;font-size:13px;color:var(--sub)}
.goalcard.hit .gc-k{color:#2AA79B}
.gc-picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.gc-pick{font:inherit;font-weight:900;font-size:15px;color:#3A3042;background:#FFF6E9;border:none;
  border-radius:14px;padding:9px 15px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.06)}
.gc-pick:active{transform:translateY(2px)}
.gc-pick.on{background:#F0A62B;color:#fff}
.gc-change{font:inherit;font-weight:800;font-size:12px;color:var(--sub);background:none;border:none;
  padding:6px 0 0;cursor:pointer;text-decoration:underline}
/* ---- the mailbox view ---- */
.mb-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.mb-letter{display:flex;align-items:flex-start;gap:13px;width:100%;background:#FFFDF8;border:none;
  border-radius:20px;padding:14px 16px;text-align:left;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.06)}
.mb-letter:active{transform:translateY(2px)}
.mb-letter .mb-ic{font-size:28px;line-height:1.1}
/* display:block on BOTH lines, and min-width:0 on the flex child. A <span> is
       inline by default, so without this the title and the preview ran together on
       one line ("A gift is waiting for youGod made rest a gift too…") and the
       nowrap preview pushed the whole page wider than the phone. Caught by looking
       at the render, not by any gate. */
.mb-letter .mb-body{flex:1;min-width:0;display:block}
.mb-letter .mb-t{display:block;font-weight:900;font-size:15.5px;color:#3A3042;line-height:1.25}
.mb-letter .mb-p{display:block;font-weight:700;font-size:13px;color:var(--sub);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-letter.unopened{box-shadow:0 4px 0 rgba(240,166,43,.35)}
.mb-dot{width:10px;height:10px;min-width:10px;border-radius:50%;background:#F0A62B;margin-top:7px}
.mb-open .settings-card{text-align:left;max-width:520px}
.mb-open .mb-hero{font-size:38px;text-align:center;line-height:1.1}
.mb-open h3{margin:6px 0 10px;font-size:20px;color:#3A3042;text-align:center}
.mb-open p{font-size:15px;line-height:1.55;color:#3A3042;font-weight:600;margin:0 0 10px}
.mb-verse{background:#FFF6E9;border-radius:14px;padding:12px 14px;margin:4px 0 12px}
.mb-verse .mv-t{font-size:15px;font-weight:800;color:#3A3042;line-height:1.5}
.mb-verse .mv-r{font-size:12px;font-weight:800;color:var(--sub);margin-top:6px}
.mb-gift{display:flex;align-items:center;gap:12px;background:#FFF6E9;border-radius:16px;padding:12px 14px;margin:4px 0 12px}
.mb-gift .mg-ic{font-size:32px;line-height:1}
.mb-gift .mg-txt{flex:1;min-width:0;display:block}
.mb-gift .mg-n{display:block;font-weight:900;font-size:15px;color:#3A3042;line-height:1.25}
.mb-gift .mg-s{display:block;font-weight:800;font-size:12px;color:var(--sub);margin-top:2px}
.mb-keeps{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mb-keep{display:flex;flex-direction:column;align-items:center;gap:2px;background:#FFFDF8;
  border-radius:14px;padding:9px 10px;min-width:66px;box-shadow:0 3px 0 rgba(0,0,0,.05)}
.mb-keep .mk-ic{font-size:24px;line-height:1}
.mb-keep .mk-n{font-size:10.5px;font-weight:800;color:var(--sub);text-align:center}
.mb-empty{font-weight:700;color:var(--sub);font-size:14px}

/* ======== dashboard.js ======== */
.pf-dash .db-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.pf-dash .db-tile{background:#FFFDF8;border-radius:16px;padding:12px 6px;text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.05)}
.pf-dash .db-n{font-weight:900;font-size:22px;color:#3A3042;line-height:1.1}
.pf-dash .db-k{font-weight:800;font-size:11px;color:var(--sub);margin-top:2px}
.pf-dash .db-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.pf-dash .db-ttl{flex:1;min-width:0;font-weight:800;font-size:13px;color:#3A3042;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-dash .db-bar{flex:2;height:10px;background:#F2E4CE;border-radius:6px;overflow:hidden}
.pf-dash .db-fill{display:block;height:100%;background:#F0A62B;border-radius:6px}
/* display:block: an inline span ignores width/height, so the fill never painted */
.pf-dash .db-ct{font-weight:800;font-size:12px;color:var(--sub);min-width:34px;text-align:right}
.pf-dash .db-list{margin:6px 0 0;padding:0;list-style:none}
.pf-dash .db-list li{font-weight:700;font-size:13px;color:#3A3042;padding:4px 0}
.pf-dash .db-sub{font-weight:800;font-size:13px;color:var(--sub);margin:10px 0 2px}
.pf-dash .db-fam{margin-top:4px}
.pf-dash .db-mut{font-weight:700;font-size:12.5px;color:var(--sub)}

/* W26 — fixed values that used to be style="…" attributes (CSP style-src-attr).
   Compound selectors so they still win where the inline style used to. */
.pf-mut.cert-hint{margin:8px 2px 0}
.cert-lead.cert-unit{margin-top:5px}
.cert-lamb{font-size:64px;line-height:1}
.slot.slot-hint{justify-content:center;color:#847354}