/* THE NEW CHRISTIAN EXPERIENCE (nav/newchristian.js): Home's part (a band saying what it is, with its switch, and the pieces
   chosen, each under its name), Make it yours, the offer, and the lessons' and teachers' pages in the window over the apps.
   The Live door's green finds the way; gold is for doing, as everywhere. */
.nc { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.nc-band { position: relative; padding: 16px 16px 14px; border: 1px solid color-mix(in srgb, var(--door-live, #3E7A4C) 30%, var(--rule)); border-radius: 18px; background: color-mix(in srgb, var(--door-live, #3E7A4C) 8%, var(--bg-raised)); }
.nc-bt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nc-k { font: 800 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--door-live, #3E7A4C); }
body.site-dark .nc-k { color: #8CC49A; }
.nc-band h2 { margin: 6px 0 6px; font: italic 600 24px/1.2 Georgia, "Times New Roman", serif; color: var(--ink); }
.nc-band p { margin: 0 0 12px; font: 15px/1.5 Georgia, "Times New Roman", serif; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
.nc-edit svg { width: 15px; height: 15px; }
.nc-sec { display: block; margin: 16px 2px 8px; }
.nc-piece .ui-label { color: var(--muted); }

/* Your Bible: three lessons */
.nc-lessons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nc-lesson { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 108px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; }
.nc-lesson i { display: inline-flex; align-items: center; gap: 4px; font: 800 10px var(--sans); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.nc-lesson i svg { width: 13px; height: 13px; color: var(--door-live, #3E7A4C); stroke-width: 3; }
.nc-lesson b { font: 600 16px/1.2 Georgia, "Times New Roman", serif; }
.nc-lesson small { font: 12px/1.35 var(--sans); color: var(--muted); }
.nc-lesson.is-read b { color: color-mix(in srgb, var(--ink) 60%, var(--muted)); }

/* teachers: a row of them, sideways */
.nc-teachers { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 6px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nc-teachers::-webkit-scrollbar { display: none; }
.nc-teachers li { flex: none; scroll-snap-align: start; }
.nc-teacher { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 148px; min-height: 128px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; }
.nc-teacher b { font: 600 15.5px/1.2 Georgia, "Times New Roman", serif; }
.nc-teacher small { font: 12px/1.35 var(--sans); color: var(--muted); }
.nc-ini { flex: none; display: grid; place-items: center; width: 38px; height: 38px; aspect-ratio: 1; margin-bottom: 4px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 26%, var(--bg-raised)); font: 700 14px Georgia, "Times New Roman", serif; color: color-mix(in srgb, var(--gold) 70%, var(--ink)); }
.nc-ini.is-big { width: 56px; height: 56px; font-size: 19px; margin: 0; }

/* good places to start */
.nc-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nc-place { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; }
.nc-place b { font: 700 14px var(--sans); }
.nc-place small { font: 12px/1.35 var(--sans); color: var(--muted); }
.nc-tag { margin-bottom: 4px; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--door-live, #3E7A4C) 14%, var(--bg-raised)); font: 800 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--door-live, #3E7A4C); }
body.site-dark .nc-tag { color: #8CC49A; }
.nc-wide { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; }
.nc-wide span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nc-wide b { font: 700 14.5px var(--sans); } .nc-wide small { font: 12.5px var(--sans); color: var(--muted); }
.nc-wide svg { width: 18px; height: 18px; color: var(--gold); }
@media (hover: hover) { .nc-lesson:hover, .nc-teacher:hover, .nc-place:hover, .nc-wide:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); } }

/* make it yours */
.nc-ed { margin-top: 10px; }
.nc-edp { margin: 0 2px 10px; font: 14px/1.45 var(--sans); color: var(--muted); }
.nc-erow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; }
.nc-erow b { font: 700 14.5px var(--sans); } .nc-erow small { font: 12.5px var(--sans); color: var(--muted); }
.nc-chosen .rbx-in { gap: 4px; padding-left: 6px; }
.nc-addrow { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; }
.nc-add { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--gold); cursor: pointer; }
.nc-add svg { width: 17px; height: 17px; }

/* the offer */
.nc-offer { margin: 18px 0 6px; padding: 18px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); }
.nc-offer > b { display: block; margin-bottom: 6px; font: italic 600 20px/1.25 Georgia, "Times New Roman", serif; color: var(--ink); }
.nc-offer p { margin: 0 0 14px; font: 14.5px/1.5 var(--sans); color: color-mix(in srgb, var(--ink) 78%, var(--muted)); }
.nc-oacts { display: flex; flex-wrap: wrap; gap: 10px; }
.nc-oacts .ui-btn { min-height: 44px; }
.nc-done { margin: 0 !important; }

/* a lesson, or a teacher, in the window over the apps */
.nc-page { padding: 4px 2px 20px; }
.nc-page .nc-h { margin: 6px 0 12px; font: italic 600 26px/1.2 Georgia, "Times New Roman", serif; color: var(--ink); }
.nc-page p { margin: 0 0 14px; font: 17px/1.6 Georgia, "Times New Roman", serif; color: var(--ink); }
.nc-verse { margin: 16px 0; padding: 2px 0 2px 14px; border-left: 3px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.nc-verse blockquote { margin: 0; font: italic 17px/1.55 Georgia, "Times New Roman", serif; color: var(--ink); }
.nc-verse figcaption { margin-top: 5px; }
.nc-ref { padding: 0; border: 0; background: none; font: 700 13px var(--sans); color: var(--gold); cursor: pointer; }
.nc-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 14px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); }
.nc-try > b { width: 100%; font: 800 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.nc-deeper { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-deeper svg, .nc-links svg, .nc-try svg { width: 15px; height: 15px; }
.nc-thead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.nc-thead .nc-h { margin: 0 0 2px; }
.nc-thead small { font: 13px/1.4 var(--sans); color: var(--muted); }
.nc-tpage .ui-label { display: block; margin: 14px 0 6px; }
.nc-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 6px; }
.nc-links a.ui-chip { text-decoration: none; }
.nc-note { font: 12.5px var(--sans) !important; color: var(--muted) !important; }
.nc-others { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }

/* a wide screen: the lessons and the places in a row, the teachers wrapping */
@media (min-width: 900px) {
  .nc-band { padding: 22px 24px 18px; }
  .nc-band h2 { font-size: 28px; }
  .nc-band p { max-width: 720px; }
  .nc-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nc-teachers { flex-wrap: wrap; margin: 0; padding: 2px 0 6px; overflow: visible; }
  .nc-teacher { width: 170px; }
}
@media (min-width: 1100px) {
  /* (Home on a computer: the band across, the small pieces two to a row, the wide ones (the lessons, the teachers, the places)
     across) */
  .nc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .nc > .nc-band, .nc > .nc-ed, .nc > [data-nc-piece="bible"], .nc > [data-nc-piece="teachers"], .nc > [data-nc-piece="places"] { grid-column: 1 / -1; }
  .nc-places { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nc-teachers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* (eight: four across, two rows) */
  .nc-teacher { width: 100%; height: 100%; }
}