/* css/app-nav.css -- the app's bottom tab bar (Pray, Parish, Saints, Explore, Me), the gear, the
   settings sheet, and the two full screens the bar adds (Parish, Saints).

   Conventions followed (Material Design bottom navigation / Apple tab bar guidance): 3-5
   top-level destinations, always-visible labels, 48px-high targets spanning the bar, the active
   destination marked by colour AND weight (never colour alone) and aria-current, and padding for
   the device's home-indicator via env(safe-area-inset-bottom).

   Colours come from the same gold/ink palette the shell uses; light mode is switched on
   body.light-mode (the class js/office-shell.js writes for every screen). */

:root {
    --app-nav-h: 64px;
    --app-nav-ground: #0b0a10;
    --app-nav-hairline: rgba(201, 168, 76, 0.28);
    --app-nav-ink: rgba(232, 217, 176, 0.82);
    --app-nav-ink-quiet: rgba(232, 217, 176, 0.62);
    --app-nav-accent: #e1c36a;
    --app-screen-ground: #0d0c13;
    --app-screen-card: rgba(255, 255, 255, 0.045);
    --app-screen-card-line: rgba(201, 168, 76, 0.22);
    --app-screen-ink: #eadfc4;
    --app-screen-ink-soft: rgba(234, 223, 196, 0.72);
    --app-screen-gold: #d6b45a;
    --app-screen-rubric: #e0705f;
}
body.light-mode {
    --app-nav-ground: #f3ebdc;
    --app-nav-hairline: rgba(110, 76, 20, 0.3);
    --app-nav-ink: #4a3a1c;
    --app-nav-ink-quiet: #5d4a24;
    --app-nav-accent: #7a4f10;
    --app-screen-ground: #f3ebdc;
    --app-screen-card: rgba(90, 60, 10, 0.05);
    --app-screen-card-line: rgba(110, 76, 20, 0.28);
    --app-screen-ink: #2a2012;
    --app-screen-ink-soft: #4d3f26;
    --app-screen-gold: #7a4f10;
    --app-screen-rubric: #8b1a10;
}

/* ── The tab bar ─────────────────────────────────────────────────────────────────────────── */
#app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: none;
    background: var(--app-nav-ground);
    border-top: 1px solid var(--app-nav-hairline);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* On from the first paint for a reader who has chosen a tradition (html.uo-has-tradition comes from the inline script in
   <head>); js/app-nav.js then turns it on or off for real with body.app-nav-on / body.app-nav-off (first-run entry screen). */
html.uo-has-tradition #app-tabbar,
body.app-nav-on #app-tabbar { display: block; }
body.app-nav-off #app-tabbar { display: none; }
/* Explore for readers who get it, otherwise Book of Needs in its place. */
#app-tabbar li[data-tab="explore"] { display: none; }
html.uo-explore-on #app-tabbar li[data-tab="explore"] { display: block; }
html.uo-explore-on #app-tabbar li[data-tab="needs"] { display: none; }
#app-tabbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    max-width: 640px;
    margin: 0 auto;
}
#app-tabbar li { flex: 1 1 0; min-width: 0; }
.app-tab {
    width: 100%;
    min-height: var(--app-nav-h);
    padding: 8px 2px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: 0;
    color: var(--app-nav-ink-quiet);
    font-family: "Cinzel", serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.app-tab svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.app-tab:hover { color: var(--app-nav-ink); }
.app-tab:focus-visible { outline: 2px solid var(--app-nav-accent); outline-offset: -4px; }
.app-tab[aria-current="page"] {
    color: var(--app-nav-accent);
    font-weight: 700;
}
.app-tab[aria-current="page"] svg { stroke-width: 2.1; }

/* Six labels on a 360px phone: a little less tracking so "Settings" clears the edge. */
@media (max-width: 400px) { .app-tab { letter-spacing: 0.02em; font-size: 10.5px; } }

/* Room for the bar under every screen it sits on. */
html.uo-has-tradition body,
body.app-nav-on { padding-bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px)); }
body.app-nav-off { padding-bottom: 0; }
/* The office's old chrome is gone for good, and hidden here in CSS (not by script) so it never shows, even for a moment, before
   the page's scripts have run: the footer "Office Settings" strip, the corner profile icon (Me is in the bar) and the header
   Book of Needs button (it is in the bar, or under Explore). The strip's button stays in the DOM, hidden: the Settings sheet's
   "Office settings" row opens the drawer by clicking it (js/office-drawer.js builds it; a hidden button still takes a script click). */
.uo-keeping,
#app-profile-icon-btn,
#office-context-actions { display: none !important; }
body { --uo-keeping-height: 0px; }

/* ── Settings sheet ──────────────────────────────────────────────────────────────────────── */
#app-settings {
    border: 1px solid var(--app-screen-card-line);
    background: var(--app-screen-ground);
    color: var(--app-screen-ink);
    padding: 0;
    width: min(440px, calc(100vw - 24px));
    max-height: min(640px, calc(100vh - 32px));
    font-family: "Cormorant Garamond", Georgia, serif;
}
#app-settings::backdrop { background: rgba(0, 0, 0, 0.6); }
#app-settings .as-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-screen-card-line);
}
#app-settings h2 { margin: 0; padding: 0; border: 0; font: 600 16px "Cinzel", serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-screen-gold); }
#app-settings .as-close { width: 44px; height: 44px; background: none; border: 0; color: inherit; font-size: 26px; cursor: pointer; }
#app-settings .as-body { padding: 6px 18px 18px; }
#app-settings .as-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 8px 0;
    border-bottom: 1px solid var(--app-screen-card-line);
    font-size: 19px;
}
#app-settings .as-row small { display: block; font-size: 15px; color: var(--app-screen-ink-soft); }
#app-settings .as-row input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--app-screen-gold); flex: none; }
#app-settings .as-link {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--app-screen-card-line);
    color: inherit;
    font: inherit;
    font-size: 19px;
    min-height: 56px;
    padding: 8px 0;
    cursor: pointer;
}
#app-settings .as-link small { display: block; font-size: 15px; color: var(--app-screen-ink-soft); }
#app-settings .as-link:hover { color: var(--app-screen-gold); }

/* ── Full screens added by the bar (Parish, Saints) ──────────────────────────────────────── */
.app-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--app-screen-ground);
    color: var(--app-screen-ink);
    font-family: "Cormorant Garamond", Georgia, serif;
}
.app-screen[hidden] { display: none; }
.app-screen-inner { max-width: 720px; margin: 0 auto; padding: 22px 18px 40px; }
.app-screen-kicker { margin: 0 0 4px; font: 11px "IBM Plex Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--app-screen-gold); }
.app-screen h1 { margin: 0 0 6px 0; font: 600 clamp(28px, 7vw, 40px)/1.1 "Cinzel", serif; letter-spacing: 0.03em; }
.app-screen-sub { margin: 0 0 18px; font-size: 19px; color: var(--app-screen-ink-soft); }
.app-card {
    background: var(--app-screen-card);
    border: 1px solid var(--app-screen-card-line);
    padding: 16px 16px 14px;
    margin: 0 0 14px;
}
.app-card h2 { text-shadow: none; margin: 0 0 8px; font: 600 15px "Cinzel", serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-screen-gold); }
.app-card p { margin: 0 0 8px; font-size: 20px; line-height: 1.5; }
.app-card .app-muted { color: var(--app-screen-ink-soft); font-size: 17px; }
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    background: none;
    border: 1px solid var(--app-screen-gold);
    color: var(--app-screen-gold);
    font: 600 12px "Cinzel", serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.app-btn:hover, .app-btn:focus-visible { background: var(--app-screen-gold); color: var(--app-screen-ground); outline: none; }
.app-btn[hidden] { display: none; }
.app-btn + .app-btn { margin-left: 8px; }
.app-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; margin-bottom: 16px; }
.app-btn-row .app-btn + .app-btn { margin-left: 0; }
.app-empty { padding: 28px 8px; text-align: center; color: var(--app-screen-ink-soft); font-size: 20px; }
.app-datebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 16px; }
.app-datebar button { min-width: 48px; min-height: 48px; background: none; border: 1px solid var(--app-screen-card-line); color: var(--app-screen-ink); font-size: 20px; cursor: pointer; }
.app-datebar .app-date-label { flex: 1; min-width: 0; text-align: center; font: 600 15px "Cinzel", serif; letter-spacing: 0.04em; text-wrap: balance; }
.app-card .app-saint-name { margin: 0 0 6px; font: 600 21px/1.25 "Cinzel", serif; letter-spacing: 0.02em; text-transform: none; color: var(--app-screen-ink); }
.app-card .app-saint-tags { margin: 0 0 10px; font: 12px "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-screen-gold); }
.app-card .app-saint-life { font-size: 20px; line-height: 1.55; white-space: pre-line; }
.app-list { list-style: none; margin: 0; padding: 0; }
.app-list li { padding: 10px 0; border-top: 1px solid var(--app-screen-card-line); font-size: 20px; line-height: 1.4; }
.app-list li:first-child { border-top: 0; }
.app-when { display: block; font: 12px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-screen-gold); }

@media print { #app-tabbar, #app-gear, .app-screen { display: none !important; } body.app-nav-on { padding-bottom: 0; } }
.app-screen p.app-muted { margin: 0 0 12px; font-size: 17px; color: var(--app-screen-ink-soft); }