/* ── Video guide ──────────────────────────────────────────────────────────────
   Rides on legal-desk.css: same header, same sticky contents rail, same document
   column as Terms and Privacy. Only the things legal pages do not have are
   defined here — the video itself, the per-video block, and the count pill.

   ⭐ The load rule that matters: every <video> is preload="none" with a poster,
   so opening the page costs ~105 small JPEGs rather than 84 MB of video, and
   nothing streams until somebody presses play. Do NOT add autoplay or
   preload="metadata" — either turns this into a multi-megabyte page load.
   Colours come from theme.css; nothing here is hardcoded. */

/* Count pill next to each module in the contents rail. */
.tutorials-page .lg-toc .tut-n {
    font-size: .72rem; font-weight: 700; opacity: .55; margin-left: .15rem;
}

/* The one-line description under a module heading, before its videos. */
.tutorials-page .tut-lede {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: -.25rem;
}

/* One video and its paragraph. The prose sits ABOVE the player on purpose —
   the page should be fully readable without pressing play once. */
.tutorials-page .tut-item { margin: 2rem 0 2.5rem; }
.tutorials-page .tut-item:last-child { margin-bottom: .5rem; }

.tutorials-page .tut-item h3 { margin-bottom: .45rem; }

.tutorials-page .tut-item video {
    width: 100%;
    max-width: 1180px;   /* source is 1440x810 — never upscale past that */
    box-sizing: border-box;   /* else the 1px border pushes it past its column */
    aspect-ratio: 16 / 9;
    display: block;
    margin-top: .9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    transition: border-color .15s;
}
.tutorials-page .tut-item video:hover { border-color: var(--brand-primary); }

/* Anchored jumps must clear the sticky nav rather than hide under it. */
.tutorials-page .legal-section,
.tutorials-page .tut-item { scroll-margin-top: 5rem; }

@media (max-width: 640px) {
    .tutorials-page .tut-item { margin: 1.5rem 0 2rem; }
    .tutorials-page .tut-item video { border-radius: 9px; }
}

/* ── Guides index ─────────────────────────────────────────────────────────────
   One card per app. Built by scanning tutorials/<app>/, so a new app guide shows
   up here automatically rather than needing this page edited. */
.tut-guides {
    display: grid; grid-template-columns: 1fr; gap: 1.1rem;
    max-width: 900px; margin: 0 auto;
    /* 44px top matches the padding .lg-layout gives the app-guide pages. Without it the cards butt
       straight against the border-bottom on .lg-head and the divider looks stuck to them. */
    padding: 44px 1rem 5rem;
}
@media (min-width: 760px) { .tut-guides { grid-template-columns: 1fr 1fr; } }

.tut-guidecard {
    display: block; text-decoration: none; color: inherit;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary); border-radius: 14px;
    overflow: hidden; transition: border-color .15s, transform .15s;
}
.tut-guidecard:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.tut-guidecard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tut-guidebody { padding: 1.1rem 1.2rem 1.3rem; }
.tut-guidebody h2 {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    font-size: 1.2rem; margin: 0 0 .4rem; color: var(--text-primary);
}
.tut-guidebody h2 span {
    font-size: .74rem; font-weight: 600; color: var(--text-secondary);
    border: 1px solid var(--border-primary); border-radius: 999px; padding: .1rem .55rem;
}
.tut-guidebody p { margin: 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.6; }

/* ── Curriculum structure ─────────────────────────────────────────────────────
   The guide is ordered as an onboarding path rather than as the app's menu, so
   it needs two things the flat list did not: part dividers, and a numbered
   first-day path that links across sections. */
.tut-part {
    margin: 3.25rem 0 1.25rem;
    padding: 1.15rem 1.35rem;
    border-left: 3px solid var(--brand-primary);
    background: var(--bg-secondary);
    border-radius: 0 10px 10px 0;
}
.tut-part:first-of-type { margin-top: 2rem; }
.tut-part-h {
    margin: 0 0 .4rem;
    font-size: 1.18rem;
    letter-spacing: .01em;
    color: var(--text-primary);
}
.tut-part-b {
    margin: 0;
    max-width: 1180px;
    color: var(--text-secondary);
    font-size: .93rem;
    line-height: 1.62;
}

.tut-start { border: 1px solid var(--border-primary); background: var(--bg-secondary); }
.tut-path { list-style: none; margin: 1.1rem 0 0; padding: 0; counter-reset: step; }
.tut-path li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .8rem;
    padding: .7rem 0;
    border-top: 1px solid var(--border-primary);
}
.tut-path li:first-child { border-top: 0; }
.tut-path a {
    display: contents;
    text-decoration: none;
    color: var(--text-primary);
}
.tut-path a:hover .tut-step-t { color: var(--brand-primary); text-decoration: underline; }
.tut-step {
    grid-row: span 2;
    align-self: start;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--text-inverse);
    font-size: .82rem;
    font-weight: 700;
}
.tut-step-t { font-weight: 600; font-size: .96rem; line-height: 1.4; }
.tut-step-w {
    grid-column: 2;
    color: var(--text-secondary);
    font-size: .87rem;
    line-height: 1.5;
}

/* Part rows are HEADINGS in the contents list, not entries. legal-desk.css numbers every <li>
   via a counter, which made a part read as a peer of the modules beneath it — so stop the counter
   on part rows and drop their number. */
body.legal-desk .lg-toc li.tut-toc-part { counter-increment: none; margin-top: 1rem; }
body.legal-desk .lg-toc li.tut-toc-part:first-child { margin-top: 0; }
body.legal-desk .lg-toc li.tut-toc-part a {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .01em;
}
body.legal-desk .lg-toc li.tut-toc-part a::before {
    content: '';
    margin: 0;
    width: 0;
}

@media (max-width: 640px) {
    .tut-part { margin: 2.25rem 0 1rem; padding: 1rem 1.1rem; }
    .tut-path li { gap: .1rem .6rem; }
}

/* ── Width and breathing room ─────────────────────────────────────────────────
   The legal-desk shell is tuned for PROSE: a 760px document inside an 1172px
   slot, which is right for Terms but wastes ~124px on a page whose main content
   is a 1440px-wide video. Widen the shell for tutorials only, let the document
   fill its column, and keep the paragraphs at a readable measure so the text
   does not stretch to match the players. */
body.tutorials-page .dk-wrap { max-width: 1400px; }
body.legal-desk.tutorials-page .lg-doc { max-width: none; }
body.legal-desk.tutorials-page .lg-lede { max-width: 760px; }

/* ⭐ Prose shares the VIDEO's width, not a reading measure.
   These paragraphs are one to three lines introducing the player directly beneath them, not
   long-form reading — so the usual 60-80 character measure is the wrong rule here. Capping them
   short made the text wrap at ~740px while the player ran to ~1165px, which reads as a bug rather
   than as typography. Same cap as the video keeps their left AND right edges aligned at every
   viewport. */
.tutorials-page .tut-item p,
.tutorials-page .tut-lede,
.tutorials-page .tut-part-b,
.tutorials-page .tut-start > .tut-lede { max-width: 1180px; }

/* The start-here panel has a border, so it needs padding — without it the heading and every row
   sat hard against the left edge. NOTE the selector weight: `body.legal-desk .legal-section` sets
   `padding: 0 0 40px` and out-specifies a plain `.tutorials-page .tut-start`, so the first attempt
   at this computed to zero padding and looked unchanged. */
body.legal-desk.tutorials-page .tut-start {
    padding: 1.6rem 1.75rem 1.5rem;
    border-radius: 12px;
}
body.legal-desk.tutorials-page .tut-start > h2 { margin-top: 0; }
body.legal-desk.tutorials-page .tut-path { margin-top: 1.25rem; padding-left: 0; }
.tutorials-page .tut-path li { padding: .8rem 0; }

/* Give the contents rail a little clearance from its own divider line. */
body.legal-desk.tutorials-page .lg-toc { padding-left: 12px; }

@media (max-width: 1240px) {
    body.tutorials-page .dk-wrap { max-width: 1260px; }
}
@media (max-width: 640px) {
    /* Matches the weight of the desktop rule above, which is itself raised to beat
       `body.legal-desk .legal-section` — a plain `.tutorials-page` selector loses to both. */
    body.legal-desk.tutorials-page .tut-start { padding: 1.15rem 1.15rem 1rem; }
}

/* A short caveat under a video — provider quirks, what to do when it stops working. */
.tutorials-page .tut-item .tut-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dk-mute, rgba(255, 255, 255, 0.62));
  border-left: 2px solid rgba(167, 139, 250, 0.6);
  padding-left: 12px;
}