/* ---- Top bar (v5, family design from In His Own Words v40): no coloured slab ----
       The bar is the page itself: transparent at the top, so the round buttons
       sit straight on the paper. Once you scroll, a solid
       paper strip fades in behind them (iOS large-title pattern) — topbar.js
       adds .is-scrolled. On inner pages the title only fades in once the painted
       banner, which already carries it, has scrolled away (.show-title). */
    body{ --gold:#E7A83C; --gold-deep:#C6811A; --grad-gold:linear-gradient(135deg,#E7A83C,#C6811A);
          --sky:#5FB1DD; --sky-deep:#3F8FCB; --grad-sky-app:linear-gradient(135deg,#5FB1DD,#3F8FCB);
          --bar-glass:#FAF6EC; --bar-line:rgba(60,45,20,.10); --bar-btn:#C6811A; }
    .appbar{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:transparent;
             transition:background-color .25s ease, box-shadow .25s ease; }
    /* v7: a SOLID strip on scroll, no blur — he found the frosted glass looked out of focus. */
    .appbar.is-scrolled{ background:var(--bar-glass); box-shadow:0 1px 0 var(--bar-line); }
    .appbar .row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; height:56px; max-width:820px; margin:0 auto; padding:0 16px; }
    .appbar .brand{ justify-self:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
             font:800 16.5px/1.1 -apple-system,system-ui,sans-serif; letter-spacing:-.015em; color:var(--ink,#2A2038);
             opacity:0; transform:translateY(5px); transition:opacity .22s ease, transform .3s cubic-bezier(0.34,1.56,0.64,1); }
    .appbar.show-title .brand{ opacity:1; transform:none; }

    /* Home: nothing but buttons — dark mode on the left; help (if the app
       has one) and share on the right. No icon, no name. */
    /* v7: equal side columns, so the search bar sits dead centre on the screen
       whether one button or two stand beside it. */
    .appbar-home .row{ grid-template-columns:84px minmax(0,1fr) 84px; gap:8px; }
    .appbar-home .row > .ab-btn:first-child{ justify-self:start; }
    .appbar-home .ab-tools{ grid-column:3; }

    /* ---- Search bar (v7): the app's name, faint, inside a round pill ---- */
    .ab-search{ position:relative; justify-self:stretch; display:flex; align-items:center; justify-content:center; gap:7px;
      height:38px; min-width:0; padding:0 10px; border:0; border-radius:999px; cursor:pointer;
      background:var(--paper-card,#fff); color:var(--dk-mute,#8A8296);
      font:600 13.5px/1 -apple-system,system-ui,sans-serif; letter-spacing:-.015em;
      box-shadow:0 1px 2px rgba(60,45,20,.08), 0 3px 10px rgba(60,45,20,.08);
      -webkit-tap-highlight-color:transparent; transition:transform .25s cubic-bezier(0.34,1.56,0.64,1); }
    .ab-search::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
      background:linear-gradient(135deg,#F2C35E,#E07A4F 60%,#B05FD0);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
    .ab-search:active{ transform:scale(.96); }
    .ab-search svg{ width:15px; height:15px; flex:0 0 auto; color:var(--bar-btn); }
    .ab-search span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


    /* ---- Search screen (v7) ---- */
    body.srch-on{ overflow:hidden; }
    .srch{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; background:var(--paper,#FAF6EC);
      padding-top:env(safe-area-inset-top,0px); animation:srch-in .22s ease; }
    @keyframes srch-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
    .srch-top{ display:flex; align-items:center; gap:10px; max-width:820px; width:100%; margin:0 auto; padding:9px 16px; }
    .srch-field{ position:relative; flex:1; display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-radius:999px;
      background:var(--paper-card,#fff); color:var(--bar-btn); box-shadow:0 1px 2px rgba(60,45,20,.08), 0 3px 10px rgba(60,45,20,.08); }
    .srch-field::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
      background:linear-gradient(135deg,#F2C35E,#E07A4F 60%,#B05FD0);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
    .srch-field svg{ width:17px; height:17px; flex:0 0 auto; }
    .srch-field input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink,#2A2038);
      font:600 16px/1.2 -apple-system,system-ui,sans-serif; -webkit-appearance:none; appearance:none; padding:0; box-shadow:none; }
    .srch-field input::placeholder{ color:var(--dk-mute,#9A93A6); font-weight:500; }
    .srch-field input::-webkit-search-cancel-button{ -webkit-appearance:none; }
    .srch-cancel{ border:0; background:none; padding:8px 2px; cursor:pointer; color:var(--bar-btn); font:700 15px/1 -apple-system,system-ui,sans-serif; }
    .srch-cancel::before{ display:none; }
    .srch-out{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
      max-width:820px; width:100%; margin:0 auto; padding:6px 16px calc(40px + env(safe-area-inset-bottom,0px)); }
    .srch-grp{ margin:10px 0 18px; }
    .srch-grp h3{ margin:0 0 8px; font:800 12px/1 -apple-system,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dk-mute,#7a7488); }
    .srch-grp h3 small{ font-size:inherit; color:var(--bar-btn); margin-left:4px; }
    .srch-go, .srch-hit{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; margin:0 0 8px; border-radius:14px; border:0;
      text-decoration:none; color:var(--ink,#2A2038); background:var(--paper-card,#fff); box-shadow:0 1px 2px rgba(60,45,20,.06), 0 4px 12px rgba(60,45,20,.06); }
    .srch-go:hover, .srch-hit:hover{ border:0; color:var(--ink,#2A2038); }
    .srch-go b{ font:800 15.5px/1.2 -apple-system,system-ui,sans-serif; }
    .srch-go span{ font-size:13px; color:var(--dk-mute,#7a7488); }
    .srch-ref{ font:800 11.5px/1 -apple-system,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--bar-btn); }
    .srch-txt{ font:400 16px/1.45 Georgia,"Iowan Old Style",serif; }
    .srch-txt mark{ background:rgba(242,195,94,.45); color:inherit; border-radius:3px; padding:0 1px; }
    .srch-list .extra{ display:none; }
    .srch-list.all .extra{ display:flex; }
    .srch-more{ width:100%; border:0; padding:11px; border-radius:999px; cursor:pointer; background:var(--dk-tint,#FFF3DA); color:var(--bar-btn); font:800 14px/1 -apple-system,system-ui,sans-serif; }
    .srch-more::before{ display:none; }
    .srch-note{ margin:18px 4px; font-size:14.5px; line-height:1.5; color:var(--dk-mute,#7a7488); }
    .ab-help{ font:800 17px/1 -apple-system,system-ui,sans-serif; }
    .ab-help .td-dot{ top:-1px; right:-1px; }
    .ab-tools{ display:flex; gap:8px; justify-self:end; }

    /* Round buttons: same family as the ? and shuffle circles, a size smaller */
    .ab-btn{ position:relative; width:38px; height:38px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
             color:var(--bar-btn); background:var(--paper-card,#fff); border:0 !important; text-decoration:none;
             box-shadow:0 1px 2px rgba(60,45,20,.08), 0 3px 10px rgba(60,45,20,.08);
             -webkit-tap-highlight-color:transparent; transition:transform .25s cubic-bezier(0.34,1.56,0.64,1); }
    .ab-btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
             background:linear-gradient(135deg,#F2C35E,#E07A4F 60%,#B05FD0);
             -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
    .ab-btn:active{ transform:scale(.88); }
    .ab-btn:focus-visible{ outline:2px solid var(--bar-btn); outline-offset:3px; }
    .ab-btn svg{ width:19px; height:19px; display:block; }
    .appbar .row > .ab-btn:first-child{ justify-self:start; }
    .appbar .row > .ab-btn:last-child{ justify-self:end; }
    /* Theme button shows the moon in light mode, the sun in dark mode */
    .ab-theme .i-sun{ display:none; }
    [data-theme="dark"] .ab-theme .i-sun{ display:block; }
    [data-theme="dark"] .ab-theme .i-moon{ display:none; }
    .ab-theme svg{ transition:transform .45s cubic-bezier(0.34,1.56,0.64,1); }
    .ab-theme:active svg{ transform:rotate(-40deg); }

    .launcher-main{ max-width:820px; margin:0 auto; padding:18px 16px 40px; }
    .appbar-home + .launcher-main{ padding-top:0; }

    /* ---- Compact hero ---- */
    .cm-hero{ margin:6px 0 20px; }
    .cm-hero h1{ font-weight:800; font-size:clamp(26px,6.5vw,36px); letter-spacing:-.03em; line-height:1.05; margin:0; color:var(--ink,#2A2038); }
    .cm-hero p{ margin:.5em 0 0; font-size:16px; line-height:1.5; color:var(--dk-mute,#6b6478); max-width:52ch; }

    /* ---- "New here?" welcome ---- */
    .welcome{ margin:0 0 20px; border-radius:15px; overflow:hidden; background:linear-gradient(135deg,#FFF6E2,#FDEFCF); border:1.5px solid #F0DCA8; }
    .welcome[open]{ background:var(--paper-card); border-color:var(--dk-rule,#EADFC6); box-shadow:0 2px 4px rgba(60,45,20,.06),0 10px 24px rgba(60,45,20,.08); }
    .welcome-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 14px; color:#8A6410; }
    .welcome-sum::-webkit-details-marker{ display:none; }
    .welcome[open] .welcome-sum{ color:var(--ink,#2A2038); border-bottom:1px solid var(--dk-rule,#EADFC6); }
    .wl-badge{ font-size:19px; line-height:1; }
    .wl-sumtxt{ flex:1; font:600 14px/1.35 -apple-system,system-ui,sans-serif; } .wl-sumtxt b{ font-weight:800; }
    .wl-chev{ transition:transform .2s; opacity:.6; } .welcome[open] .wl-chev{ transform:rotate(180deg); }
    .welcome-body{ padding:14px 15px 16px; font-size:15px; line-height:1.55; color:var(--dk-soft,#4d4658); }
    .welcome-body p{ margin:0 0 .7em; } .welcome-body p:last-child{ margin-bottom:0; }
    .welcome-body b{ color:var(--ink,#2A2038); }
    .wl-play{ display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer; background:var(--grad-sky-app); color:#fff; font:800 14.5px -apple-system,system-ui,sans-serif; padding:.7em 1.25em; border-radius:999px; margin:0 0 13px; box-shadow:0 4px 13px rgba(46,132,189,.32); transition:transform .15s ease; }
    .wl-play:hover{ transform:translateY(-1px); } .wl-play:active{ transform:scale(.97); }
    .wl-play:disabled{ opacity:.55; cursor:default; box-shadow:none; }
    .wl-play .wl-play-ic{ font-size:11px; }

    /* ---- "For today" feed ---- */
    .today-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; }
    .daily-lead{ font-weight:800; font-size:1.22em; letter-spacing:-.02em; color:var(--ink,#2A2038); }
    .today-shuffle{ cursor:pointer; font:800 .8em -apple-system,system-ui,sans-serif; color:var(--gold-deep); background:var(--paper-card); border:1.5px solid var(--dk-rule,#EADFC6); border-radius:999px; display:inline-flex; gap:.45em; align-items:center; padding:.5em .95em; box-shadow:0 2px 4px rgba(60,45,20,.06); transition:transform .15s ease, border-color .15s ease; }
    .today-shuffle:hover{ border-color:var(--gold); } .today-shuffle:active{ transform:scale(.95); }
    .today-list{ display:flex; flex-direction:column; gap:.7em; margin-bottom:30px; }
    .today-bar{ position:relative; display:flex; align-items:stretch; width:100%; border:none; padding:0; cursor:pointer; text-align:left; background:var(--paper-card); border-radius:16px; overflow:hidden; box-shadow:0 2px 4px rgba(60,45,20,.07),0 10px 24px rgba(60,45,20,.09); transition:transform .15s cubic-bezier(0.34,1.56,0.64,1), box-shadow .15s ease; }
    .today-bar::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; z-index:3; background:linear-gradient(180deg,var(--tc),var(--tcd)); }
    .today-bar:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(60,45,20,.13); }
    .today-bar:active{ transform:scale(.99); }
    .today-bar .tb-text{ flex:1; min-width:0; padding:.85em 1em .85em 1.2em; display:flex; flex-direction:column; justify-content:center; gap:.22em; }
    .today-bar .tb-kicker{ font:800 .64rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--t-ink); display:inline-flex; gap:.4em; align-items:center; }
    .today-bar .tb-title{ font-weight:800; font-size:1.05em; letter-spacing:-.01em; color:var(--ink,#2A2038); line-height:1.18; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .today-bar .tb-teaser{ font-size:.88em; color:var(--dk-mute,#7a7488); line-height:1.34; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .today-bar .tb-photo{ flex:none; width:92px; align-self:stretch; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--tc),var(--tcd)); }
    .today-bar .tb-glyph{ position:absolute; inset:0; display:grid; place-items:center; font-size:2rem; color:#fff; z-index:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
    .today-bar .tb-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

    /* ---- Daily modal — always centred, generous space all around, scrolls inside ---- */
    .cm-modal-overlay{ position:fixed; inset:0; z-index:80; background:rgba(30,22,15,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
      padding:max(64px,calc(env(safe-area-inset-top) + 40px)) 32px max(64px,calc(env(safe-area-inset-bottom) + 40px)); opacity:0; pointer-events:none; transition:opacity .2s ease; }
    .cm-modal-overlay.open{ opacity:1; pointer-events:auto; }
    .cm-modal{ position:relative; width:100%; max-width:440px; max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--paper-card); border-radius:22px; box-shadow:0 24px 64px rgba(0,0,0,.38);
      transform:scale(.9); opacity:0; transition:transform .26s cubic-bezier(0.34,1.56,0.64,1), opacity .18s ease; }
    .cm-modal-overlay.open .cm-modal{ transform:scale(1); opacity:1; }
    .cm-mhead{ padding:22px 22px 16px; color:#fff; background:linear-gradient(140deg,var(--mc,#C6811A),var(--mcd,#8A5A0F)); }
    .cm-mkicker{ display:inline-flex; align-items:center; gap:.5em; font:800 11px/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; opacity:.95; }
    .cm-mtitle{ margin:.5em 0 0; font-weight:800; font-size:clamp(22px,5.5vw,28px); letter-spacing:-.02em; line-height:1.12; }
    .cm-mbody{ padding:20px 22px 26px; color:var(--dk-soft,#3a3448); font-size:16px; line-height:1.6; }
    .cm-mbody p{ margin:0 0 .9em; } .cm-mbody p:last-child{ margin-bottom:0; }
    .cm-quote{ font-size:1.28em; font-weight:600; line-height:1.4; color:var(--ink,#2A2038); }
    .cm-verse{ white-space:pre-wrap; font-size:1.05em; line-height:1.55; color:var(--ink,#2A2038); }
    .cm-source{ margin-top:.4em; font-weight:700; color:var(--mc-ink); }
    .cm-note{ margin-top:1em; padding-top:.9em; border-top:1px solid var(--dk-rule,#EEE7DA); font-size:.92em; color:var(--dk-mute,#7a7488); font-style:italic; }
    .cm-word-line{ display:flex; gap:.6em; margin:0 0 .55em; font-size:.98em; }
    .cm-word-line b{ flex:none; width:5.5em; color:var(--mc-ink); }
    .cm-morelink{ display:inline-block; margin-top:1.1em; font:800 14px -apple-system,system-ui,sans-serif; color:#fff; background:linear-gradient(140deg,var(--mc,#C6811A),var(--mcd,#8A5A0F)); padding:.6em 1.15em; border-radius:999px; text-decoration:none; }
    .cm-opts{ display:grid; gap:.55em; margin:1.2em 0 .2em; }
    .cm-opt{ text-align:left; cursor:pointer; font:700 15px -apple-system,system-ui,sans-serif; color:var(--ink,#2A2038);
      background:var(--paper-card); border:1.8px solid var(--dk-rule,#E4DED6); padding:.8em 1em; border-radius:14px; line-height:1.35;
      transition:transform .18s cubic-bezier(0.34,1.56,0.64,1), border-color .18s, background .18s; }
    .cm-opt:not(:disabled):hover{ transform:translateY(-2px); border-color:var(--mc,#D6455E); }
    .cm-opt:disabled{ cursor:default; }
    .cm-opt.right{ border-color:#1F8F5E; background:#EDF9F3; color:#14603A; }
    .cm-opt.wrong{ opacity:.55; }
    .cm-opt.chosen.wrong{ opacity:1; border-color:#D6455E; background:#FDF0F2; color:#9B2740; }
    .cm-opt .mark{ float:right; font-weight:900; }
    .cm-explain{ margin-top:1.1em; padding:.9em 1.05em; border-radius:14px; background:var(--dk-tint,#FBF7F1);
      border-left:4px solid var(--mc,#D6455E); font-size:.97em; line-height:1.5; }
    .cm-read{ display:inline-flex; align-items:center; gap:.5em; margin-top:1.1em; margin-right:.6em; cursor:pointer; font:800 14px -apple-system,system-ui,sans-serif; color:var(--mc-ink); background:var(--paper-card); border:1.6px solid currentColor; padding:.55em 1.05em; border-radius:999px; }
    .cm-mclose{ position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.22); color:#fff; font-size:20px; line-height:34px; text-align:center; }

    /* ---- School photo tiles (Conscious Parenting style) ---- */
    .stile{ position:relative; display:block; text-decoration:none; background:var(--paper-card); border-radius:18px; overflow:hidden; box-shadow:0 2px 4px rgba(60,45,20,.07),0 12px 26px rgba(60,45,20,.10); transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease; }
    .stile::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg,var(--c),var(--cd)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:4; }
    .stile:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(60,45,20,.16); }
    .stile:active{ transform:scale(.99); }
    .stile-photo{ position:relative; height:118px; background:linear-gradient(150deg,var(--c),var(--cd)); overflow:hidden; }
    .stile-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
    .stile-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.30)); }
    .stile-badge{ position:absolute; left:13px; top:94px; z-index:3; width:46px; height:46px; border-radius:13px; background:linear-gradient(150deg,var(--c),var(--cd)); display:grid; place-items:center; box-shadow:0 3px 9px rgba(0,0,0,.26); border:2.5px solid var(--paper-card); }
    .stile-badge svg{ width:27px; height:27px; color:#fff; }
    .stile-body{ padding:28px 15px 15px; }
    .stile-name{ font-weight:800; font-size:1.08em; letter-spacing:-.01em; color:var(--ink,#2A2038); }

    /* ---- Dark-mode touch-ups: the few spots no variable reaches ---- */
    /* Brand accents on the home page are declared on <body>, so they need a
       more specific rule to flip. The gold/sky hues stay — they just lift
       enough to read as text on a dark ground. */
    /* The launcher's muted greys and hairlines are written as
       var(--dk-*, <original light value>). The --dk-* variables exist ONLY in
       dark mode, so light mode keeps its exact original colours and dark mode
       picks up the theme neutrals. */
    [data-theme="dark"] body{
      --dk-mute:var(--ink-mute); --dk-soft:var(--ink-soft);
      --dk-rule:var(--rule);     --dk-tint:var(--paper-surface);
      --gold:#F2C35E; --gold-deep:#F0BE6A; --grad-gold:linear-gradient(135deg,#F2C35E,#C6811A);
      --sky:#6FBEEC; --sky-deep:#8ED0F2; --grad-sky-app:linear-gradient(135deg,#1E4463,#152F45);
    }
    /* Top bar at night: dark glass, gold icons */
    [data-theme="dark"] body{ --bar-glass:#17141F; --bar-line:rgba(255,255,255,.08); --bar-btn:#F2C35E; }
    [data-theme="dark"] .ab-btn, [data-theme="dark"] .ab-search, [data-theme="dark"] .srch-field{ background:#221E2D; box-shadow:0 1px 2px rgba(0,0,0,.4); }
    [data-theme="dark"] .srch-go, [data-theme="dark"] .srch-hit{ background:#221E2D; box-shadow:0 2px 10px rgba(0,0,0,.35); }
    [data-theme="dark"] .srch-more{ background:#2E2638; }

    /* "New here?" card: warm cream gradient -> warm dark panel. */
    [data-theme="dark"] .welcome{ background:linear-gradient(135deg,#2C2417,#221C13); border-color:#443722; }
    [data-theme="dark"] .welcome[open]{ background:var(--paper-card); border-color:var(--rule); }
    [data-theme="dark"] .welcome-sum{ color:#F0C97A; }

    /* Daily modal: --mc/--mcd are written inline per card, so the readable
       text colour is derived from them rather than overridden. */
    .cm-mbody{ --mc-ink:var(--mcd,#8A5A0F); }
    [data-theme="dark"] .cm-mbody{ --mc-ink:color-mix(in srgb, var(--mc,#C6811A) 58%, #FFFFFF); }

    .stile-tagline{ margin-top:.22em; font-size:.9em; line-height:1.35; color:var(--dk-mute,#6b6478); }