/* DS7: S7 lesson page. On top of tokens/tokens.css and tokens/app.css. */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.ds7 a:focus-visible,.ds7 .btn:focus-visible,.ds7 .yt-facade:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45);border-radius:var(--radius-sm)}

/* section band: tinted by section (the proposed look) */
.ds7 .l-band{display:flex;align-items:center;gap:.6rem;padding:var(--s-3) var(--s-6);font-family:var(--font-head);font-weight:700;font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink);background:var(--tint,var(--color-accent-wash));border-bottom:1px solid var(--color-line);border-left:6px solid var(--stripe,var(--color-accent))}
.ds7 .l-band::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--stripe,var(--color-accent));flex:0 0 auto}
.ds7 .l-band .sep{color:var(--color-muted);font-weight:500}
.t-red{--tint:#fdecec;--stripe:#d9534f}
.t-green{--tint:#eaf6ec;--stripe:#4a9d5b}
.t-cream{--tint:#fef6e0;--stripe:#4a9d5b}
.t-orange{--tint:var(--color-accent-wash);--stripe:var(--color-accent)}
/* fixed orange band as live: the shared .band, with the section name next to it */
.ds7 .band .sep{opacity:.8;font-weight:500}

/* small style note */
.ds7 .l-style{max-width:760px;margin:0 auto;padding:var(--s-3) var(--s-4) 0;font-size:var(--t-xs);color:var(--color-muted);display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
.ds7 .l-style b{color:var(--color-ink);text-transform:uppercase;letter-spacing:.08em}
.ds7 .l-style a{font-weight:700}
.ds7 .wrap-narrow{padding-top:var(--s-3)}

/* header */
.ds7 .lesson-header{border-bottom:0;padding-bottom:var(--s-3);margin-bottom:var(--s-2)}
.ds7 .lesson-header .pill{margin-bottom:var(--s-3);display:inline-flex;align-items:center;gap:.4rem}
.ds7 .lesson-header .pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--stripe,var(--color-accent))}
.ds7 .lesson-header h1{font-size:var(--t-3xl);line-height:1.1;letter-spacing:-.01em}
.ds7 .l-pos{display:flex;align-items:center;gap:var(--s-3);color:var(--color-muted);font-size:var(--t-sm);margin-top:var(--s-3)}
.ds7 .l-pos .progress{flex:0 0 120px}
@media(max-width:600px){.ds7 .lesson-header h1{font-size:var(--t-2xl)}.ds7 .l-band{padding:var(--s-3) var(--s-4);font-size:var(--t-xs)}}

/* blocks */
.ds7 .prose{max-width:none}
.ds7 .prose>*+*{margin-top:0}
.ds7 .prose h2{margin:var(--s-7) 0 var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--color-line)}
.ds7 .prose h3{margin:var(--s-6) 0 var(--s-2);font-size:var(--t-xl)}
.ds7 .prose h4{font-size:var(--t-lg);margin:var(--s-5) 0 var(--s-2);color:var(--color-ink)}
.ds7 .prose>h2:first-child{border-top:0;margin-top:var(--s-5);padding-top:0}
.ds7 .prose .block-text{font-size:var(--t-base);line-height:1.75;color:var(--color-body)}
.ds7 .prose li{font-size:var(--t-base);line-height:1.7}
.ds7 .prose ul,.ds7 .prose ol{margin:0 0 var(--s-4) var(--s-5);padding-left:var(--s-2)}
.ds7 .prose li::marker{color:var(--color-accent-text);font-weight:700}

/* callouts */
.ds7 .callout{border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;font-size:var(--t-base);line-height:1.65;background:var(--color-accent-wash);border-left:4px solid var(--color-accent);color:var(--color-ink)}
.ds7 .callout-warning{background:var(--color-warning-wash);border-left-color:var(--color-warning);color:var(--color-warning-ink)}
.ds7 .callout-green{background:var(--color-success-wash);border-left-color:var(--color-success);color:var(--color-success-ink)}
.ds7 .callout strong{color:inherit}
.ds7 .callout a{color:inherit;text-decoration:underline}

/* images */
.ds7 .l-fig{margin:var(--s-5) 0}
.ds7 .l-fig img{display:block;max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--color-line);background:var(--color-card)}
.ds7 .l-fig.is-portrait img{max-width:min(100%,420px)}
.ds7 .l-fig figcaption{font-size:var(--t-sm);color:var(--color-muted);margin-top:var(--s-2)}

/* pdf card */
.ds7 .pdf-card{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);text-decoration:none;transition:border-color .12s,box-shadow .12s}
.ds7 .pdf-card:hover{border-color:var(--color-accent);box-shadow:0 4px 18px rgba(225,115,53,.12);text-decoration:none}
.ds7 .pdf-ic{flex:0 0 auto;width:44px;height:52px;border-radius:6px;background:var(--color-accent-wash);border:1px solid var(--color-line);color:var(--color-accent-text);font-weight:800;font-size:var(--t-xs);letter-spacing:.05em;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.45rem;position:relative}
.ds7 .pdf-ic::before{content:"";position:absolute;top:0;right:0;width:12px;height:12px;background:var(--color-line);border-bottom-left-radius:6px}
.ds7 .pdf-body{flex:1;min-width:0}
.ds7 .pdf-body strong{display:block;color:var(--color-ink);font-size:var(--t-base);overflow-wrap:anywhere}
.ds7 .pdf-body span{font-size:var(--t-xs);color:var(--color-muted)}
.ds7 .pdf-go{flex:0 0 auto;font-weight:700;font-size:var(--t-sm);color:var(--color-accent-text)}
@media(max-width:500px){.ds7 .pdf-go{display:none}}

/* youtube facade, no network until clicked */
.ds7 .yt{margin:var(--s-5) 0}
.ds7 .yt-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--color-ink)}
.ds7 .yt-facade{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);text-decoration:none;color:#fff;background:radial-gradient(circle at 75% 20%,rgba(225,115,53,.35),transparent 55%),linear-gradient(135deg,#163450,#0f2840);cursor:pointer}
.ds7 .yt-facade:hover{text-decoration:none}
.ds7 .yt-play{width:72px;height:72px;border-radius:50%;background:var(--color-accent);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.ds7 .yt-facade:hover .yt-play{transform:scale(1.07)}
.ds7 .yt-play::after{content:"";margin-left:6px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.ds7 .yt-label{font-weight:700;font-size:var(--t-sm);letter-spacing:.04em}
.ds7 .yt-note{position:absolute;left:var(--s-4);bottom:var(--s-3);font-size:var(--t-xs);opacity:.85}
.ds7 .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* prev next */
.ds7 .lesson-nav{align-items:stretch;margin-top:var(--s-7)}
.ds7 .lesson-nav .btn{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:.15rem;padding:.8rem 1.2rem;max-width:49%}
.ds7 .lesson-nav .btn small{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ds7 .lesson-nav .btn-primary{align-items:flex-end;text-align:right;margin-left:auto}
.ds7 .lesson-nav .btn-primary small{opacity:.95}
.ds7 .all-link{margin-top:var(--s-2)}
@media(max-width:500px){.ds7 .lesson-nav .btn,.ds7 .lesson-nav .btn-primary{max-width:none;width:100%;align-items:flex-start;text-align:left}}

/* ROUND 2: inside the app shell (main.app-content) */
.ds7 .app-content{padding:0;background:var(--color-bg,transparent)}
.ds7 .app-content .l-band{margin:0}
.ds7 .app-content .band{margin:0}
.ds7 .app-content .lesson-wrap{max-width:820px;margin:0 auto;padding:var(--s-3) var(--s-6) var(--s-8,4rem)}
.ds7 .app-content .l-style{max-width:820px;padding:var(--s-3) var(--s-6) 0}
.ds7 .app-content .foot{margin-top:var(--s-6)}
@media(max-width:600px){.ds7 .app-content .lesson-wrap{padding-left:var(--s-4);padding-right:var(--s-4)}.ds7 .app-content .l-style{padding-left:var(--s-4);padding-right:var(--s-4)}}
.ds7 .lesson-done{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--color-line);display:flex;justify-content:center}
.ds7 .lesson-done .btn{min-width:260px;justify-content:center}
@media(max-width:500px){.ds7 .lesson-done .btn{width:100%;min-width:0}}
.ds7 .yt-facade[hidden]{display:none}
.ds7 .yt-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(135deg,#163450,#0f2840);color:#fff}
.ds7 .yt-still{flex:1;position:relative;background:radial-gradient(circle at 30% 70%,rgba(255,255,255,.10),transparent 55%),radial-gradient(circle at 75% 20%,rgba(225,115,53,.28),transparent 55%)}
.ds7 .yt-bar{position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-3);height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.ds7 .yt-bar i{display:block;width:0;height:100%;border-radius:2px;background:var(--color-accent)}
.ds7 .yt-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:var(--s-4)}
.ds7 .yt-msg strong{font-size:var(--t-lg);color:#fff}
.ds7 .yt-msg span{font-size:var(--t-sm);opacity:.85}
.ds7 .yt-msg .btn{margin-top:var(--s-2);background:#fff;color:var(--color-ink);border-color:#fff}
.ds7 .yt-msg .btn:hover{background:var(--color-accent-wash)}

/* the pill follows the section colour (red, green, cream) */
.ds7 .lesson-header.t-red .pill{background:var(--tint);color:#9a2f2c;box-shadow:inset 0 0 0 1px var(--stripe)}
.ds7 .lesson-header.t-green .pill,.ds7 .lesson-header.t-cream .pill{background:var(--tint);color:#2e6b3b;box-shadow:inset 0 0 0 1px var(--stripe)}

/* ================= ROUND 3 (lane NAVC): one reading column, side menu only (Q18) ================= */
/* the sticky "In this section" panel is gone; the end block (css/navc.css) and the footer sit under the text */
.ds7 .app-content{max-width:none}
.ds7 .app-content .l-style{max-width:var(--l-w);padding:var(--s-3) var(--l-pad) 0}
.ds7{--l-read:640px;--l-pad:clamp(16px,3vw,48px);--l-w:calc(var(--l-read) + 2 * var(--l-pad))}
.l-layout{display:block;max-width:var(--l-w);margin:0 auto;padding:0 var(--l-pad)}
.ds7 .app-content .l-layout .lesson-wrap{max-width:none;margin:0;padding:var(--s-4) 0 0;min-width:0}
.ds7 .lesson-body{max-width:var(--l-read)}
.ds7 .lesson-body .prose{max-width:none}

/* R4LESSON: lesson top line (P028) and video title/length line (P031) */
.ds7 .l-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);color:var(--color-muted);font-size:var(--t-sm)}
.ds7 .l-meta .pill{margin:0}
.ds7 .l-meta span:not(.pill)+span:not(.pill)::before{content:"\00b7";margin-right:var(--s-3)}
.ds7 .yt-meta{display:flex;flex-wrap:wrap;gap:.25rem var(--s-3);margin-top:var(--s-2);font-size:var(--t-sm);color:var(--color-muted)}
.ds7 .yt-meta strong{color:var(--color-ink)}
.ds7{--t-xs:.875rem}
.ds7 .l-meta,.ds7 .yt-meta,.ds7 .yt-cap{font-size:max(.875rem,var(--t-sm))}
.ds7 .lesson-body h1,.ds7 .nv-finish{hyphens:manual}
/* very wide screens: the reading column grows (about 70 characters a line) with a slightly larger font */
@media(min-width:1900px){.ds7{--l-read:760px}.ds7 .lesson-body .prose{font-size:1.125rem}}

/* FIXFINAL: when the top line wraps on a phone, no separator dot can start the second row. */
@media(max-width:700px){.ds7 .l-meta span:not(.pill)+span:not(.pill)::before{content:none;margin:0}.ds7 .l-meta{column-gap:var(--s-4)}}

/* ================= SIDEBOX (round 4): the "In this section" box is back (Karlis liked it, round 2) ================= */
/* wide (1280 and up): text column left, sticky box right, end block and footer under the text.
   Narrower: the box sits above the option C block at the end of the lesson, full width of the column. */
.l-aside{min-width:0;margin:var(--s-6) 0 0}
.l-aside-in{background:var(--color-card);border:1px solid var(--color-line);border-top:4px solid var(--stripe,var(--color-accent));border-radius:var(--radius);padding:var(--s-4) var(--s-4) var(--s-3);box-shadow:0 1px 2px rgba(22,52,80,.04),0 10px 28px rgba(22,52,80,.06)}
.l-aside-k{margin:0;font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.l-aside-sec{display:flex;align-items:center;gap:.5rem;margin:var(--s-2) 0 var(--s-3);font:700 var(--t-base)/1.3 var(--font-head);color:var(--color-ink)}
.l-aside-sec .dot{width:10px;height:10px;border-radius:50%;background:var(--stripe,var(--color-accent));flex:0 0 auto}
.l-aside-sec .n{margin-left:auto;font:600 var(--t-xs)/1 var(--font-body,inherit);color:var(--color-muted);white-space:nowrap}
.l-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.l-toc a{display:flex;align-items:flex-start;gap:.65rem;padding:.55rem .6rem;border-radius:var(--radius-sm);color:var(--color-body);text-decoration:none;font-size:var(--t-sm);line-height:1.35;font-weight:600}
.l-toc a:hover{background:var(--tint,var(--color-accent-wash));color:var(--color-ink);text-decoration:none}
.l-toc a:focus-visible,.l-secnav:focus-visible,.l-aside-all:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45)}
.l-toc .mk{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px solid var(--color-line);display:grid;place-items:center;background:var(--color-card)}
.l-toc .mk svg{width:11px;height:11px;opacity:0}
.l-toc .is-read .mk{background:var(--color-success);border-color:var(--color-success);color:#fff}
.l-toc .is-read .mk svg{opacity:1}
.l-toc .is-current a{background:var(--tint,var(--color-accent-wash));color:var(--color-ink);font-weight:800;box-shadow:inset 3px 0 0 var(--stripe,var(--color-accent))}
.l-toc .is-current:not(.is-read) .mk{border-color:var(--stripe,var(--color-accent))}
.l-secnavs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--color-line)}
.l-secnavs:empty{display:none}
.l-secnav{display:flex;flex-direction:column;gap:.15rem;padding:.5rem .6rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--color-ink);font-size:var(--t-sm);font-weight:700;line-height:1.3;min-width:0}
.l-secnav small{font-size:var(--t-xs);font-weight:700;color:var(--color-muted);letter-spacing:.02em}
.l-secnav.next{grid-column:2;text-align:right;align-items:flex-end}
.l-secnav:hover{background:var(--color-accent-wash);text-decoration:none}
.l-secnav .ln-ic{width:13px;height:13px;vertical-align:-2px}
.l-aside-all{display:block;margin-top:var(--s-2);padding:.45rem .6rem;font-size:var(--t-sm);font-weight:700;color:var(--color-accent-text)}
.l-aside-sec .nm{min-width:0}
.ds7 .l-aside .l-toc .tt{min-width:0}
@media(min-width:1280px){
  .ds7{--l-side:clamp(250px,22vw,310px);--l-gap:clamp(32px,3vw,56px);--l-w:calc(var(--l-read) + var(--l-gap) + var(--l-side) + 2 * var(--l-pad))}
  .l-layout{display:grid;grid-template-columns:minmax(0,var(--l-read)) var(--l-side);grid-template-areas:"main side" "end ." "foot .";column-gap:var(--l-gap);justify-content:center}
  .l-layout>.lesson-wrap{grid-area:main}
  .l-layout>.l-aside{grid-area:side;margin:0;padding-top:var(--s-4)}
  .l-layout>.nv-end{grid-area:end}
  .l-layout>.nv-foot{grid-area:foot}
  .l-aside-in{position:sticky;top:var(--s-5);max-height:calc(100vh - 2 * var(--s-5));overflow:auto}
}