/* ============================================================================
   Defining Narratives Institute
   Lesson styling inside Tutor LMS. White background, mobile first.

   Loaded automatically by the theme on lesson, quiz and course pages. Nothing
   here needs to be pasted anywhere.
   ========================================================================== */

/* The palette is declared on both roots, because the facilitator edition is a
   sibling of the lesson rather than a child of it. Scoping these to .dni-lesson
   alone left every variable undefined on a facilitator page, which rendered as
   text with no colour at all. */
.dni-lesson,
.dni-fac{
  --ink:#101413;
  --muted:#5A6560;
  --faint:#5E6862;
  --rule:#E6E9E4;
  --paper:#FFFFFF;
  --green:#2F6B12;
  --green-soft:#F1F7EB;
  --green-line:#CFE3BE;
  --blue:#2B3E6B;
  --blue-soft:#EFF2F8;
  --blue-line:#C9D3E8;
  --amber:#8A5A12;
  --amber-soft:#FCF6EA;
  --amber-line:#EBDCBB;

  background:#fff;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.dni-lesson{
  font-size:17px;
  line-height:1.7;
  max-width:44rem;
  margin:0 auto;
  padding:0 4vw 64px;
}
@media(min-width:768px){ .dni-lesson{ font-size:17.5px; padding:0 0 80px } }

.dni-lesson *{box-sizing:border-box}
.dni-lesson p{margin:0 0 18px}
.dni-lesson em{font-style:italic}
.dni-lesson strong{font-weight:700}

/* ---------------------------------------------------------------- masthead */
.dni-head{padding:26px 0 22px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.dni-kicker{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin:0 0 12px}
.dni-title{font-size:clamp(26px,7vw,40px);line-height:1.1;letter-spacing:-.025em;margin:0 0 12px;font-weight:800}
.dni-standfirst{font-size:clamp(16px,4.4vw,19px);line-height:1.55;color:var(--muted);margin:0}

/* week rail, the signature element ------------------------------------------ */
.dni-rail{display:flex;gap:3px;margin:20px 0 0;padding:0;list-style:none}
.dni-rail li{flex:1;height:6px;border-radius:3px;background:#E9ECE7}
.dni-rail li.is-done{background:var(--green)}
.dni-rail li.is-now{background:var(--green);box-shadow:0 0 0 3px rgba(47,107,18,.16)}
.dni-rail-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:10px 0 0}

/* at a glance ---------------------------------------------------------------- */
.dni-glance{background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:20px 22px;margin:0 0 30px}
.dni-glance-t{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px}
.dni-glance ol{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:g}
.dni-glance li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;counter-increment:g}
.dni-glance li::before{content:counter(g);flex:0 0 22px;height:22px;border-radius:50%;
  background:var(--green);color:#fff;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px}

/* ----------------------------------------------------------------- headings */
.dni-h{font-size:clamp(20px,5.4vw,25px);line-height:1.25;margin:40px 0 14px;
  letter-spacing:-.015em;font-weight:800}
.dni-h .dni-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-bottom:9px}
.dni-sub{font-size:17px;font-weight:700;margin:26px 0 8px}
.dni-ref{color:var(--green);font-weight:600;white-space:nowrap}

/* numbered point cards ------------------------------------------------------- */
.dni-points{display:grid;gap:12px;margin:22px 0 28px}
.dni-point{border:1px solid var(--rule);border-radius:14px;padding:20px;background:#fff;
  transition:border-color .18s,box-shadow .18s}
.dni-point:hover{border-color:var(--green-line);box-shadow:0 6px 22px rgba(16,20,19,.05)}
.dni-point-h{display:flex;gap:12px;align-items:center;margin:0 0 10px}
.dni-point-n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--green-soft);
  color:var(--green);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.dni-point-t{font-size:16.5px;font-weight:700;line-height:1.3}
.dni-point p{font-size:15.5px;line-height:1.65;margin:0 0 12px;color:#2B322E}
.dni-point p:last-child{margin-bottom:0}

/* pull quote ---------------------------------------------------------------- */
.dni-pull{font-size:clamp(19px,5.2vw,25px);line-height:1.32;font-weight:800;letter-spacing:-.02em;
  margin:32px 0;padding:22px 0 22px 20px;border-left:4px solid var(--green);color:var(--ink)}

/* callouts ------------------------------------------------------------------- */
.dni-box{border-radius:14px;padding:20px 22px;margin:26px 0;border:1px solid}
.dni-box-label{display:flex;align-items:center;gap:8px;
  font-size:10.5px!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px!important}
.dni-box-label svg{width:15px;height:15px;flex:0 0 15px}
.dni-box p:last-child{margin-bottom:0}
.dni-box p{font-size:16px}
.dni-box--journal{background:var(--green-soft);border-color:var(--green-line)}
.dni-box--journal .dni-box-label{color:var(--green)}
.dni-box--scripture{background:var(--blue-soft);border-color:var(--blue-line)}
.dni-box--scripture .dni-box-label{color:var(--blue)}
.dni-box--scripture p:not(.dni-box-label){font-size:18px;line-height:1.55;font-style:italic}
.dni-box--activity{background:var(--amber-soft);border-color:var(--amber-line)}
.dni-box--activity .dni-box-label{color:var(--amber)}

/* Spiritual Takeaway --------------------------------------------------------- */
.dni-christ{border:1px solid var(--rule);border-top:4px solid var(--green);border-radius:16px;
  padding:26px 22px 22px;margin:40px 0 0;background:linear-gradient(180deg,var(--green-soft),#fff 42%)}
.dni-christ .dni-box-label{color:var(--green);margin-bottom:12px!important}
.dni-christ h3{font-size:clamp(19px,5vw,23px);line-height:1.28;margin:0 0 14px;font-weight:800;letter-spacing:-.015em}
.dni-christ p{font-size:16.5px}
.dni-do{margin-top:20px;padding:18px;border-radius:12px;background:#fff;border:1px solid var(--green-line)}
.dni-do b{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-bottom:8px}
.dni-do p{margin:0;font-size:16px}

/* the work ------------------------------------------------------------------- */
.dni-work{display:grid;gap:12px}
.dni-q{border:1px solid var(--rule);border-radius:14px;padding:20px;background:#fff}
.dni-q-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dni-q-n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;flex:0 0 28px;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.dni-q-type{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dni-q p{margin:0 0 12px;font-size:16.5px;line-height:1.6}
.dni-answer{width:100%;padding:14px;border:1.5px solid #DCE0D8;border-radius:11px;
  font:inherit;font-size:16px;line-height:1.6;resize:vertical;background:#fff;min-height:120px}
.dni-answer:focus{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green);background:#fff}
.dni-choices{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.dni-choices li{border:1px solid #DCE0D8;border-radius:11px;padding:14px;font-size:16px;line-height:1.45;
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s;min-height:52px}
.dni-choices li:hover,.dni-choices li:focus-within{border-color:var(--green);background:#fff}
.dni-letter{font-weight:800;color:var(--green);flex:0 0 auto}
.dni-q--scripture{background:var(--blue-soft);border-color:var(--blue-line)}
.dni-q--scripture .dni-q-n{background:var(--blue)}
.dni-q--scripture .dni-q-type{color:var(--blue)}
.dni-q--private{background:#fff;border-style:dashed}
.dni-q--private .dni-q-n{background:var(--faint)}

/* footer strip --------------------------------------------------------------- */
.dni-foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.dni-foot p{margin:0;font-size:13.5px;color:var(--faint)}
.dni-foot .dni-mark{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* accessibility and print ---------------------------------------------------- */
.dni-lesson :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.dni-lesson *{transition:none!important;animation:none!important}}
@media print{
  .dni-lesson{font-size:11.5pt;max-width:none;padding:0}
  .dni-answer{min-height:80px;background:#fff}
  .dni-q,.dni-box,.dni-christ,.dni-point{break-inside:avoid}
  .dni-pull{break-inside:avoid}
}

/* ----------------------------------------------------------------------------
   White, edge to edge.

   Tutor and most themes paint a grey page behind the lesson body. On a phone
   that reads as a narrow column floating on a slab, which is exactly the look
   this curriculum should not have. These rules force white right out to the
   edges wherever a lesson is on screen, without touching the rest of the site.
   -------------------------------------------------------------------------- */
body.dni-learning,
body.dni-learning #page,
body.dni-learning #content,
body.dni-learning .site,
body.dni-learning .site-content,
body.dni-learning main,
body.dni-learning article,
body.dni-learning .tutor-wrap,
body.dni-learning .tutor-container,
body.dni-learning .tutor-course-single-content-wrapper,
body.dni-learning .tutor-lesson-content,
body.dni-learning .tutor-quiz-wrapper,
body.dni-learning .tutor-lesson-sidebar,
body.dni-learning .tutor-course-topic-single-body,
body.dni-learning [class*="tutor-color-white"],
body.dni-learning [class*="tutor-bg"]{
  background:#fff!important;
  background-image:none!important;
}
body.dni-learning{color:#101413}

/* Tutor draws its own boxes around content. Flatten them so the lesson's own
   cards are the only structure on the page. */
body.dni-learning .tutor-card,
body.dni-learning .tutor-lesson-wrapper,
body.dni-learning .tutor-course-spotlight-wrapper{
  border:0!important;box-shadow:none!important;border-radius:0!important;background:#fff!important;
}

/* Full bleed on a phone, comfortable column on a desktop. */
@media(max-width:767px){
  body.dni-learning .dni-lesson{max-width:none;padding-inline:20px}
}

/* ============================================================================
   The facilitator edition.

   A different job, so a different page. The teaching layer reads as a running
   sheet: timings down the left, the things that go wrong called out, and the
   disclosure steps in a block that cannot be missed at a glance.
   ========================================================================== */
.dni-fac{max-width:52rem;margin:0 auto;padding:0 4vw 60px;color:var(--ink);font-size:17px;line-height:1.7}
@media(min-width:768px){ .dni-fac{padding:0 0 72px} }

.dni-fac-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.dni-fac-tag{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--green);padding:6px 11px;border-radius:999px}
.dni-fac-time{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dni-fac-swap{margin-left:auto;font-size:13.5px;color:var(--green);font-weight:600;text-decoration:none}
.dni-fac-swap:hover{text-decoration:underline}

.dni-fac-block{border:1px solid var(--rule);border-radius:14px;padding:22px;margin:0 0 14px;background:#fff}
.dni-fac-block h3{font-size:16px;font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.dni-fac-block p{margin:0;font-size:16px;color:#2B322E}
.dni-fac-block ul,.dni-fac-block ol{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.dni-fac-block li{font-size:16px;line-height:1.6;color:#2B322E;padding-left:22px;position:relative}
.dni-fac-block li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--green)}

.dni-fac-two{display:grid;gap:14px}
@media(min-width:720px){ .dni-fac-two{grid-template-columns:1fr 1fr} }

/* the running sheet */
.dni-fac-arc{counter-reset:none}
.dni-fac-arc li{display:flex;gap:14px;padding-left:0;align-items:flex-start}
.dni-fac-arc li::before{display:none}
.dni-fac-min{flex:0 0 54px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--green-soft);border:1px solid var(--green-line);border-radius:10px;
  padding:7px 0;font-weight:800;font-size:17px;color:var(--green);line-height:1}
.dni-fac-min i{font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;margin-top:3px;opacity:.75}

.dni-fac-block--watch{background:var(--amber-soft);border-color:var(--amber-line)}
.dni-fac-block--watch h3{color:var(--amber)}
.dni-fac-block--watch li::before{background:var(--amber)}

/* disclosure. Deliberately the loudest thing on the page. */
.dni-fac-block--alert{background:#FDF2F2;border-color:#F0C9C9;border-left:4px solid #B3261E}
.dni-fac-block--alert h3{color:#B3261E}
.dni-fac-block--alert li::before{background:#B3261E}
.dni-fac-block--alert ol{counter-reset:d;list-style:none}
.dni-fac-block--alert ol li{counter-increment:d;padding-left:30px}
.dni-fac-block--alert ol li::before{content:counter(d);width:auto;height:auto;background:none;
  color:#B3261E;font-weight:800;font-size:13px;top:2px}
.dni-fac-oncall{margin-top:14px!important;padding-top:12px;border-top:1px solid #F0C9C9;
  font-weight:700;color:#B3261E!important}

.dni-fac-rule{border:0;border-top:2px solid var(--ink);margin:34px 0 14px}
.dni-fac-lead{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 18px}
.dni-fac-lesson{border-left:3px solid var(--rule);padding-left:clamp(14px,3vw,26px)}
.dni-fac-lesson .dni-lesson{padding:0;max-width:none}

/* the quiet fingerprint, on screen and on paper */
.dni-mark-line{margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:11.5px;color:var(--faint);letter-spacing:.02em}
@media print{
  .dni-fac-bar,.dni-fac-swap{display:none}
  .dni-fac-block,.dni-fac-arc li{break-inside:avoid}
  .dni-mark-line{position:running(mark);font-size:9pt}
}

/* the two blocks added once the notes carried more than a running order */
.dni-fac-block--bring{background:var(--paper);border-style:dashed}
.dni-fac-bring{display:flex!important;flex-wrap:wrap;gap:8px!important}
.dni-fac-bring li{padding:7px 13px!important;border:1px solid var(--rule);border-radius:999px;
  background:#fff;font-size:14.5px}
.dni-fac-bring li::before{display:none}
.dni-fac-block--land{background:var(--green-soft);border-color:var(--green-line)}
.dni-fac-block--land h3{color:var(--green)}
.dni-fac-land{font-family:inherit;font-size:19px!important;line-height:1.35;font-weight:700;
  letter-spacing:-.015em;color:var(--ink)!important}
.dni-fac-switch{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  background:var(--green);color:#fff;text-decoration:none;font-size:14.5px;font-weight:600}
.dni-fac-switch:hover{filter:brightness(1.08)}

/* ============================================================================
   Devotionals.

   These are written as spoken pieces, and the line breaks carry the cadence.
   So they are set narrower than a lesson and never reflowed into paragraphs:
   where a line ends is a decision the writer made, not an accident of width.
   ========================================================================== */
.dni-lesson--devotional{font-size:18px;line-height:1.62}
.dni-lesson--devotional p{margin:0 0 22px;max-width:38ch}
.dni-lesson--devotional .dni-lead{font-size:20.5px;line-height:1.5;font-weight:600;color:#0B0F0E;max-width:34ch}
.dni-lesson--devotional .dni-pull{max-width:none;font-size:clamp(20px,4.6vw,27px);
  border-left-width:3px;padding-block:14px}
.dni-lesson--devotional .dni-box--scripture{max-width:38ch}
.dni-lesson--devotional .dni-ref{display:block;margin-top:8px;font-size:13px}
@media(min-width:768px){
  .dni-lesson--devotional{font-size:18.5px}
  .dni-lesson--devotional p{max-width:40ch}
}

/* --------------------------------------------------- video inside a lesson */
.dni-video{margin:0 0 30px;border-radius:16px;overflow:hidden;background:#0C1112;
  aspect-ratio:16/9;position:relative}
.dni-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dni-lesson--devotional .dni-video{max-width:none}

/* ------------------------------------------------------------- reflections */
.dni-reflect{margin-top:40px;padding-top:28px;border-top:2px solid var(--ink)}
.dni-reflect > p{max-width:44ch;color:var(--muted)}
.dni-r-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px;counter-reset:r}
.dni-r-list li{border:1px solid var(--rule);border-left:4px solid var(--green);
  border-radius:14px;padding:20px;background:#fff}
.dni-r-n{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;
  font-size:12px;font-weight:800;margin-bottom:10px}
.dni-r-list p{margin:0 0 12px;font-size:17px;line-height:1.6;max-width:42ch}
.dni-work-note{font-size:14.5px;color:var(--muted);max-width:46ch;margin:0 0 18px}

/* ------------------------------------------------------- the course banner */
.dni-banner{margin:0 0 26px;border-radius:0;overflow:hidden;background:#0C1112;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.dni-banner img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
@media(min-width:820px){
  .dni-banner{border-radius:18px;width:auto;max-width:none;margin-left:0;margin-right:0}
}
/* The banner already says The Hunt, so the kicker underneath does not repeat it. */
.dni-lesson--hunt .dni-kicker{color:var(--faint)}

/* ------------------------------------------------------------ hunt lessons */
.dni-lesson--hunt .dni-video{margin-bottom:34px}
.dni-video-cap{position:absolute;top:0;left:0;z-index:2;margin:0;
  padding:8px 14px;background:var(--green);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border-bottom-right-radius:12px}
.dni-lesson--hunt .dni-point p{font-size:16.8px;line-height:1.72;max-width:46ch}
.dni-lesson--hunt .dni-point{padding:24px}
.dni-lesson--hunt .dni-point-t{font-size:17.5px}
.dni-lesson--hunt .dni-standfirst{font-size:clamp(17px,4.4vw,20px);max-width:38ch}
@media(min-width:768px){
  .dni-lesson--hunt .dni-points{gap:14px}
}

/* ----------------------------------------------------------- legacy lessons */
.dni-lesson--legacy .dni-video{margin-bottom:34px}
.dni-lesson--legacy .dni-point p{font-size:16.8px;line-height:1.72;max-width:46ch}
.dni-lesson--legacy .dni-point{padding:24px}
.dni-lesson--legacy .dni-point-t{font-size:17.5px}
.dni-lesson--legacy .dni-standfirst{font-size:clamp(17px,4.4vw,20px);max-width:40ch}
.dni-lesson--legacy .dni-kicker{color:var(--faint)}