/* The app (/app/): a contained, phone-first home for the library, the Bible, the readings and the exhortations.
   Hand-written; see scripts/build_app.py and app.js. Colours come from the site variables, which theme.css
   redefines for sepia and dark, so every part follows the chosen theme. */

body:has(.app) .masthead,body:has(.app) footer,body:has(.app) .invitation{display:none}
body:has(.app){background:var(--paper)}
.app{--app-tabs:64px;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink);padding-bottom:calc(var(--app-tabs) + env(safe-area-inset-bottom,0px))}

/* top bar */
.app-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;min-height:56px;padding:env(safe-area-inset-top,0px) 14px 0;
  background:var(--paper);border-bottom:1px solid var(--line)}
.app-top a.app-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;flex:1}
.app-brand img{width:30px;height:30px}
.app-brand span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.app-brand strong{font:400 1.05rem/1.15 var(--serif);white-space:nowrap}
.app-brand small{font:700 10px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
html.cnz-themed[data-rd-theme="dark"] .app-brand img{filter:brightness(0) invert(.9) sepia(.25)}
.app-top .app-site{font-size:13px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}

/* panels */
.app-panel{max-width:760px;margin:0 auto;padding:22px 18px 40px;scroll-margin-top:200px}
.app [hidden],.cz-install [hidden]{display:none!important}
html.app-js .app-panel[hidden]{display:none}
.app-panel>h2,.app-h{font-size:clamp(1.9rem,6vw,2.4rem);margin:4px 0 16px}
.app-sec{font:700 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:28px 0 10px}
.app-lead{color:var(--muted);font-size:15px;margin:-6px 0 18px}
.app-hello{margin:2px 0 18px}
.app-hello .eyebrow{margin-bottom:6px}
.app-hello h1{font-size:clamp(2.1rem,8vw,3rem);letter-spacing:-.03em;margin:0}
.app-panel .pl-card{margin-bottom:18px}
.app-panel .lib-rx{margin:0 0 18px;padding:20px 22px}
.app-panel .lib-rx li a{color:#fff;text-decoration:none;font:400 1.2rem/1.3 var(--serif)}
.app-panel .lib-rx li span{display:block;font-size:13px;color:#c2cdd4;margin-top:2px}
.app-panel .coc-today{margin:0 0 18px}
.app-panel .coc-today a{color:var(--gold)}

/* cards and rows */
.app-card{background:var(--tint);border-top:3px solid var(--gold);padding:16px 18px;margin:0 0 18px}
.app-card .eyebrow{margin-bottom:8px}
.app-rows{list-style:none;margin:0;padding:0}
.app-rows li{margin:0;border-top:1px solid var(--line)}
.app-rows li:first-child{border-top:0}
.app-row{display:flex;align-items:center;gap:12px;padding:12px 0;text-decoration:none;color:inherit}
.app-row>span{flex:1;min-width:0}
.app-row strong{display:block;font:400 1.15rem/1.3 var(--serif);color:var(--ink)}
.app-row small{display:block;font-size:13px;color:var(--muted)}
.app-row:hover strong{color:var(--accent)}
.app-row::after{content:'';flex:0 0 8px;height:8px;border:solid var(--muted);border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:4px}
.app-meter{display:block;height:4px;background:var(--line);border-radius:2px;margin-top:7px;overflow:hidden}
.app-meter i{display:block;height:100%;background:var(--accent);border-radius:2px}
.app-big{display:flex;align-items:center;gap:14px;padding:18px;background:var(--ink);color:var(--paper);text-decoration:none;margin:0 0 12px}
.app-big strong{display:block;font:400 1.4rem/1.2 var(--serif)}
.app-big small{display:block;font-size:13px;opacity:.8}
.app-big svg{width:34px;height:34px;flex:0 0 34px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app-big:hover{color:var(--paper);opacity:.94}
.app-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.app-links a{display:block;padding:14px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--paper)}
.app-links a strong{display:block;font:400 1.1rem/1.25 var(--serif)}
.app-links a small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.app-links a:hover{border-color:var(--accent)}

/* the Bible's books */
.app-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:0 0 8px;padding:0;list-style:none}
.app-books li{margin:0}
.app-books a{display:block;padding:9px 8px;border:1px solid var(--line);font-size:13.5px;line-height:1.2;text-decoration:none;color:var(--ink);text-align:center;background:var(--paper)}
.app-books a:hover{border-color:var(--accent);color:var(--accent)}
.app-testament{font:600 13px/1.4 var(--sans);color:var(--muted);margin:16px 0 8px}

/* the shelf */
.app-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 22px;padding:0;list-style:none}
.app-shelf li{margin:0}
.app-tile{position:relative;display:flex;flex-direction:column;aspect-ratio:3/4;padding:18px 14px 14px;text-decoration:none;color:#f6efe2;
  background:var(--tile,#122c40);box-shadow:inset 6px 0 0 rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.12);overflow:hidden}
.app-tile::before{content:'';display:block;width:34px;height:2px;background:var(--tile-rule,#e9bd76);margin-bottom:14px}
.app-tile b{font:400 clamp(1.15rem,4.6vw,1.45rem)/1.12 var(--serif);letter-spacing:-.01em;overflow-wrap:break-word}
.app-tile i{font-style:normal;font:700 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tile-rule,#e9bd76);margin-top:auto}
.app-tile small{font-size:11.5px;opacity:.78;margin-top:3px}
.app-tile:hover{color:#fff;transform:translateY(-2px)}
@media(prefers-reduced-motion:no-preference){.app-tile{transition:transform .15s ease}}
.app-tile.t-thomas{--tile:#122c40;--tile-rule:#e9bd76}
.app-tile.t-roberts{--tile:#5a2f1c;--tile-rule:#f0c27e}
.app-tile.t-roberts.t-alt{--tile:#2f4a3c;--tile-rule:#e9cf8f}
.app-tile.t-thomas.t-alt{--tile:#1d3d55;--tile-rule:#f0c27e}
.app-tile.t-series{--tile:#7a4a1c;--tile-rule:#fbe2b1}
.app-tile.t-other{--tile:#3c3f4a;--tile-rule:#e9bd76}

/* search and small controls */
.app-search{margin:0 0 20px}
.app-panel .lib-search{margin:0 0 22px}
.app-form{display:flex;gap:8px;margin:0 0 18px}
.app-form input{flex:1;min-width:0;min-height:46px;padding:8px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:16px var(--sans);border-radius:4px}
.app-form button,.app-btn{min-height:46px;padding:8px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:600 14px var(--sans);border-radius:4px;cursor:pointer}
.app-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.app-btn:disabled{opacity:.55;cursor:default}
.app-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.app-chips li{margin:0}
.app-chips a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13.5px;text-decoration:none;color:var(--ink);background:var(--paper)}
.app-chips a b{font-weight:600;color:var(--accent);margin-left:4px}
.app-chips a:hover{border-color:var(--accent)}
/* collapsible groups (Exhortations tab): a section (By year …) holding groups (1875 · 11) */
.app-panel details{border:0;padding:0}
.app-panel summary{list-style:none;cursor:pointer;border:0;padding:0;-webkit-tap-highlight-color:transparent}
.app-panel summary::-webkit-details-marker{display:none}
.app-panel summary::after{content:'';flex:none;width:9px;height:9px;margin:0 4px 0 2px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.app-panel details[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.app-sect{margin:22px 0 0;border-top:2px solid var(--ink)!important}
.app-sect>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0}
.app-sect-t{flex:1;font:700 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.app-sect-c{font:500 13px var(--sans);color:var(--muted)}
.app-sect-b{padding:0 0 6px}
.app-sect-b .app-chips{margin-top:6px}
.app-g{border-top:1px solid var(--line)!important}
.app-g:last-child{border-bottom:1px solid var(--line)!important}
.app-g>summary{display:flex;align-items:center;gap:10px;min-height:50px;padding:6px 0}
.app-g>summary{gap:0}
.app-g .g-n{font:400 1.2rem/1.3 var(--serif);color:var(--ink)}
.app-g .g-c{flex:1;padding-left:7px;font:500 15px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.app-g[open]>summary .g-n{color:var(--accent)}
.app-g[open]>.app-rows{margin:0 0 12px;padding-left:12px;border-left:2px solid var(--gold)}
.app-panel summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.app-panel summary::after{transition:none}}
.app-pick{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 20px}

/* settings */
.app-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0 0 6px}
.app-seg button{min-height:48px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:500 14px var(--sans);cursor:pointer}
.app-seg button[aria-pressed="true"]{border:2px solid var(--accent);font-weight:700}
.app-seg .s-auto{background:linear-gradient(135deg,#fff 0 50%,#0f1c28 50% 100%);color:#1f2f3c}
.app-seg .s-auto span{background:#fff;border-radius:4px;padding:1px 7px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.app-seg .s-light{background:#fff;color:#1f2f3c}
.app-seg .s-sepia{background:#f5ecd9;color:#33291e}
.app-seg .s-dark{background:#0f1c28;color:#ece4d4}
.app-seg .z1{font:400 14px var(--serif)}.app-seg .z2{font:400 17px var(--serif)}.app-seg .z3{font:400 20px var(--serif)}.app-seg .z4{font:400 24px var(--serif)}
.app-note{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.app-off{list-style:none;margin:0 0 10px;padding:0}
.app-off li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);margin:0}
.app-off li:first-child{border-top:0}
.app-off strong{display:block;font:400 1.08rem/1.3 var(--serif)}
.app-off small{display:block;font-size:12.5px;color:var(--muted)}
.app-off .app-meter{grid-column:1/-1;margin:2px 0 0}
.app-off .app-meter[hidden]{display:none}
.app-off button{min-height:40px;padding:6px 14px;font-size:13px}
.app-store{font-size:13.5px;color:var(--muted)}
.app-danger{border-color:#a33b2b!important;color:#a33b2b!important;background:transparent!important}
html.cnz-themed[data-rd-theme="dark"] .app-danger{border-color:#f09b8a!important;color:#f09b8a!important}
.app-panel .cz-install .button{min-height:46px}

/* the tab bar */
.app-tabs{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--app-tabs) + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);
  background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(0,0,0,.05)}
.app-tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--muted);
  font:600 10.5px/1.1 var(--sans);letter-spacing:.02em;min-width:0}
.app-tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-tabs a[aria-current="page"]{color:var(--ink)}
.app-tabs a[aria-current="page"] svg{stroke:var(--accent)}
.app-tabs a[aria-current="page"]::before{content:'';position:absolute;top:0;left:28%;right:28%;height:3px;background:var(--gold);border-radius:0 0 3px 3px}
.app-tabs a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media(min-width:900px){
  .app-tabs{left:50%;right:auto;transform:translateX(-50%);width:640px;bottom:14px;height:var(--app-tabs);padding:0 8px;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
  .app{padding-bottom:110px}
  .app-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}
  .app-panel{padding-top:34px}
}
@media(min-width:560px) and (max-width:899px){.app-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
html:not(.app-js) .app-tabs{position:sticky}
@media print{.app-tabs,.app-top{display:none}}