/* THE FIVE DOORS (nav/doors.js): the tab bar, a door's page, and the home's rows. Each door's color (--door) is for
   finding your way only; gold stays the one color for doing things */
html.doors nav.tabs:not(.doors-nav) { display: none !important; }
html:not(.doors) .doors-nav { display: none !important; }
.doors-nav button.active svg { color: var(--door); }
nav.tabs-top.doors-nav button.active { border-bottom-color: var(--door); }
nav.tabs-bottom.doors-nav button.active svg { background: color-mix(in srgb, var(--door) 16%, transparent); color: var(--door); }
.dr-app i, .dr-row-t i { background: color-mix(in srgb, var(--door) 13%, transparent) !important; color: var(--door) !important; }
.dr-home .stage-off, .dr .stage-off { display: none !important; }

/* the home: a row for each door, its tiles swiped across, "See all" to its page */
.dr-home { display: flex; flex-direction: column; gap: 20px; }
.dr-row-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dr-row-t { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: none; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dr-row-t i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.dr-row-t i svg { width: 20px; height: 20px; }
.dr-row-t span { display: flex; flex-direction: column; min-width: 0; }
.dr-row-t b { font: 700 16px/1.2 var(--sans); }
.dr-row-t small { font: 12.5px/1.3 var(--sans); color: var(--muted); }
.dr-see { flex: none; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--door); font: 700 12.5px var(--sans); cursor: pointer; }
.dr-scroll { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.dr-scroll::-webkit-scrollbar { display: none; }
.dr-scroll .hn-app { flex: none; width: 158px; flex-direction: column; gap: 8px; scroll-snap-align: start; }

/* a door's page */
#door { display: none; } #door.active { display: block; }
.dr { max-width: 760px; margin: 0 auto; padding: 8px 16px calc(40px + env(safe-area-inset-bottom)); }
.dr-band { padding: 22px 20px; border-radius: 22px; background: color-mix(in srgb, var(--door) 11%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--door) 30%, var(--rule)); }
.dr-band small { display: flex; align-items: center; gap: 7px; font: 800 10.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--door); }
.dr-band small svg { width: 16px; height: 16px; }
.dr-band b { display: block; margin: 6px 0 3px; font: italic 600 27px/1.15 var(--serif); color: var(--ink); }
.dr-band span { font: 14.5px/1.45 var(--sans); color: var(--muted); }
/* (Pick up where you left off, on every door's page: folded to start, as on Home) */
.dr-pick { margin-top: 18px; }
.dr-pick-none { margin: 2px 0 4px; font: 13.5px/1.45 var(--sans); color: var(--muted); }
.dr-h { margin: 22px 0 10px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dr-grid .hn-app { flex-direction: column; gap: 8px; padding: 14px; }
.dr-grid .hn-app i { width: 36px; height: 36px; border-radius: 11px; } .dr-grid .hn-app i svg { width: 20px; height: 20px; }
@media (min-width: 700px) { .dr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* under the Bible: the shortcuts as one strip, swiped; today's reading in a plan first */
html.doors .hbx-more { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 6px; margin: 0 -16px; scroll-snap-type: x proximity; }
html.doors .hbx-more::-webkit-scrollbar { display: none; }
html.doors .hbx-more > button { flex: none; scroll-snap-align: start; min-height: 38px; padding: 0 14px; font-size: 13.5px; }
html.doors .hbx-more > button:first-child { margin-left: 0; }
.hbx-today { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule)) !important; background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)) !important; color: var(--ink) !important; font: 700 13.5px var(--sans); border-radius: 999px; cursor: pointer; }
.hbx-today i { font: 800 10px var(--sans); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.hbx-today.stage-off { display: none !important; }

/* a swipe between the pages: the page beside, a copy, coming in with the finger (under the header and the tab bar) */
.dr-peek { position: fixed; inset: 0; overflow: hidden; z-index: 20; pointer-events: none; will-change: transform; } /* (the screen as it'll be: the page at its top, as it opens) */
html.doors body { overflow-x: clip; }

/* the first page and the last (stage nav:pages): pulled past either, a soft glow in its door's color at the edge it's pulled
   from, and the bounce back */
.dr-edge { position: fixed; top: 0; bottom: 0; width: 56px; z-index: 19; pointer-events: none; opacity: 0; }
.dr-edge.is-l { left: 0; background: radial-gradient(ellipse 100% 46% at 0% 50%, color-mix(in srgb, var(--door, var(--gold)) 34%, transparent), transparent 72%); }
.dr-edge.is-r { right: 0; background: radial-gradient(ellipse 100% 46% at 100% 50%, color-mix(in srgb, var(--door, var(--gold)) 34%, transparent), transparent 72%); }

/* the home, kept to yours (stage home:focus): at its foot, that there's more. On a phone, one card: the four doors' icons,
   a line, and a tap slides on to the Bible's page; wider, the four doors as four quiet cards */
.dr-more-go { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px 14px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dr-more-go:active { transform: scale(0.99); }
.dr-more-ics { flex: none; display: flex; }
.dr-more-ics i { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--bg-raised); background: color-mix(in srgb, var(--door) 16%, var(--bg-raised)); color: var(--door); }
.dr-more-ics i:first-child { margin-left: 0; }
.dr-more-ics svg { width: 15px; height: 15px; }
.dr-more-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dr-more-t b { font: 700 15px/1.25 var(--sans); }
.dr-more-t small { font: 12.5px/1.4 var(--sans); color: var(--muted); }
.dr-more-arrow { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); }
.dr-more-arrow svg { width: 18px; height: 18px; }
.dr-more-wide { display: none; }
.dr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.dr-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease; }
.dr-card i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--door) 13%, transparent); color: var(--door); }
.dr-card i svg { width: 20px; height: 20px; }
.dr-card span { display: flex; flex-direction: column; min-width: 0; }
.dr-card b { font: 700 15px/1.2 var(--sans); }
.dr-card small { font: 12.5px/1.35 var(--sans); color: var(--muted); }
@media (hover: hover) { .dr-card:hover { border-color: color-mix(in srgb, var(--door) 45%, var(--rule)); } }
@media (min-width: 700px) { .dr-more-go { display: none; } .dr-more-wide { display: block; } }
/* a wide screen: your Bible and your dashboard side by side, the four doors in one row under them (as side by side uses the
   room it has: nav/split.js). The Bible is one of the dashboard's sections there (Desk.hold, index.html), the dashboard over
   both columns, so its sections fill in under the Bible as well as beside it and the two come out even, and the Bible's
   moved where you like it while arranging; its own group, left empty, stands aside. What's said first for a new visitor (a
   free account, what this is) goes over both. From the owner: "Can you make the desktop view more balanced looking. It
   looks odd having the open space on the left", and "I want the whole read the Bible section to be draggable to arrange" */
@media (min-width: 1100px) {
  html.home-focus #hub-container { max-width: 1080px; }
  html.home-focus .hub-new { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  html.home-focus .hub-new > .hub-group { grid-column: 1 / -1; }
  html.home-focus .hub-new { --hn-top: 1; }
  html.home-focus .hub-new:has(> .hn-join-g), html.home-focus .hub-new:has(> .hn-about-g) { --hn-top: 2; }
  html.home-focus .hub-new:has(> .hn-join-g):has(> .hn-about-g) { --hn-top: 3; }
  /* (the new Christian experience over all of it, a row of its own: nav/newchristian.js) */
  html.home-focus .hub-new:has(> .hn-nc-g) { --hn-top: 2; }
  html.home-focus .hub-new:has(> .hn-nc-g):has(> .hn-join-g), html.home-focus .hub-new:has(> .hn-nc-g):has(> .hn-about-g) { --hn-top: 3; }
  html.home-focus .hub-new:has(> .hn-nc-g):has(> .hn-join-g):has(> .hn-about-g) { --hn-top: 4; }
  html.home-focus .hub-new > .hn-bible-g { grid-column: 1; grid-row: var(--hn-top); } /* (the dashboard's stage off: beside the box of where you left off) */
  html.home-focus .hub-new > .hn-bible-g:not(:has(.hub-bible)) { display: none; }
  html.home-focus .hub-new > .dk-g { grid-column: 1 / -1; grid-row: var(--hn-top); }
  html.home-focus .hub-new > .hy-g { grid-column: 2; }
  html.home-focus .dk-g .hub-group-grid > *, html.home-focus .dk-g .dk { max-width: none; }
  html.home-focus .hn-nc-g .hub-group-grid > *, html.home-focus .hn-nc-g .nc { max-width: none; } /* (the new Christian experience as wide as the page) */
  html.home-focus .dk-g .dk-secs { column-gap: 40px; }
  html.home-focus .dr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.home-focus .dr-more-g .hub-group-grid > * { max-width: none; } /* (the doors' row the whole width, under both) */
  html.home-focus #hub .sr-home { width: 100%; max-width: 1008px; } /* (the search over both columns, as wide as they are) */
}