/* style — the Learning page as modules (js/tutorials-learn.js,
   js/tutorials-learn-admin.js). From Simon's design handoff "Learn — Modules
   view", 28 Sep: its layout, spacing and behaviour, in this app's own
   colours (tokens.css) and type -- he asked to "keep going with the colors
   and style ... but using this structure and logic". */
#learn-page { padding: 24px 28px 80px; }
#learn-page .lp-head, #learn-page .ln-col, #learn-page .ln-drophint, #learn-page .ln-offnote, #learn-page .ln-ask {
  max-width: 1280px; margin-left: auto; margin-right: auto; }
#learn-page .lp-head { flex-wrap: wrap; row-gap: 10px; }
#learn-page h1 { font-size: 20px; font-weight: 700; flex: 0 0 auto; margin-right: 8px; }
#learn-page .lp-search { margin-left: auto; }
.ln-col { display: flex; flex-direction: column; gap: 28px; }
.ln-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-faint); letter-spacing: .02em; }
.ln-tile { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; flex: none; }
.ln-tile svg { width: 45%; height: 45%; }
.ln-bar { height: 4px; background: var(--card-hover); border-radius: 2px; overflow: hidden; }
.ln-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s ease; }
.ln-bar.ok i { background: var(--green); }

/* 1 · the player */
.ln-player { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.ln-nolesson { color: var(--text-faint); font-size: 13px; padding: 40px 10px; text-align: center; }
.ln-video { position: relative; aspect-ratio: 16/9; border-radius: 3px; overflow: hidden;
  /* Held to about half the window's height, so the modules start above the fold. */
  width: min(100%, calc(52vh * 16 / 9)); margin: 0 auto;
  background: repeating-linear-gradient(135deg, #141417 0 14px, #111113 14px 28px); }
.ln-video video, .ln-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.ln-video video { object-fit: contain; cursor: pointer; }
.ln-bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); transition: transform .12s, filter .12s; }
.ln-bigplay:hover { filter: brightness(1.12); transform: translate(-50%, -50%) scale(1.04); }
.ln-bigplay svg { width: 24px; height: 24px; margin-left: 3px; }
.ln-bigplay.hidden { display: none; }
.ln-transport { display: flex; align-items: center; gap: 10px; }
.ln-ctl { width: 28px; height: 28px; flex: none; border: 0; border-radius: 3px; background: var(--card-hover); color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.ln-ctl:hover { color: #fff; background: #222226; }
.ln-ctl svg { width: 14px; height: 14px; }
.ln-track { position: relative; flex: 1; height: 18px; background: var(--card-hover); border-radius: 3px; cursor: pointer; touch-action: none; }
.ln-played { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--accent-rgb), .28); border-radius: 3px; }
.ln-head { position: absolute; top: 0; bottom: 0; width: 9px; background: var(--accent); border-radius: 2px; }
.ln-time { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-info { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.ln-infol { flex: 1 1 420px; min-width: 0; }
.ln-lab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ln-modname { font-size: 13px; color: var(--text-dim); }
.ln-ltitle { font-size: 21px; font-weight: 600; line-height: 1.25; color: #fff; margin: 2px 0 6px; }
.ln-desc { font-size: 14px; font-weight: 400; line-height: 1.55; color: #b8b8c1; max-width: 720px; }
.ln-infor { flex: 0 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 14px; }
.ln-nav { display: flex; gap: 8px; justify-content: flex-end; }
.ln-nav button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; border-radius: 4px; cursor: pointer; }
.ln-nav button svg { width: 14px; height: 14px; }
.ln-prev { background: none; border: 1px solid #2a2a31; color: var(--text); padding: 9px 12px; }
.ln-prev:hover:not([disabled]) { border-color: var(--text-faint); }
.ln-next { background: var(--accent); border: 0; color: #fff; font-weight: 500; padding: 9px 14px; }
.ln-next:hover:not([disabled]) { filter: brightness(1.12); }
.ln-nav button[disabled] { color: #55555e; cursor: default; }
.ln-next[disabled] { background: var(--card-hover); }
.ln-path { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ln-pathrow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-dim); }
.ln-pathrow span:first-child { color: var(--text); }

/* 2 · the modules header */
.ln-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -14px; }
.ln-seclab { font-size: 12px; letter-spacing: .14em; color: #b5b5be; }
.ln-seclab b { color: var(--text-faint); font-weight: 400; }
.ln-exp { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.ln-exp a { cursor: pointer; } .ln-exp a:hover { color: #fff; }
.ln-exp i { font-style: normal; color: #3a3a42; margin: 0 6px; }

/* 3 · the accordion */
.ln-mods { display: flex; flex-direction: column; gap: 14px; }
.ln-none { border: 1.5px dashed var(--border-dash); border-radius: 6px; padding: 26px; text-align: center; color: var(--text-faint); font-size: 13px; }
.ln-mod { background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ln-mod.open { border-color: #2a2a31; }
.ln-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px 14px 12px; cursor: pointer; }
.ln-mod.open .ln-mrow { background: #141416; }
.ln-mrow:hover { background: var(--card-hover); }
.ln-chev { width: 24px; height: 24px; color: #c9c9d1; display: flex; align-items: center; justify-content: center; flex: none; transition: transform .18s ease; }
.ln-chev svg { width: 16px; height: 16px; }
.ln-mod.open .ln-chev { transform: rotate(90deg); }
.ln-mtext { flex: 1; min-width: 200px; }
.ln-mnum { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ln-pill { background: var(--card-hover); font-size: 11px; color: #c9c9d1; border-radius: 2px; padding: 1px 6px; }
/* 14px, was 16.5 (Simon, 29 Sep: "make the module title smaller, but keep the video and the thumbnail the same size"). */
.ln-mtitle { font-size: 14px; font-weight: 600; color: #fff; }
.ln-mdesc { font-size: 13.5px; font-weight: 400; color: #a4a4ae; margin-top: 2px; }
.ln-mprog { width: 150px; flex: none; text-align: right; display: flex; flex-direction: column; gap: 6px; }
.ln-mstat { font-size: 13px; color: #c9c9d1; }
.ln-mmeta { font-size: 12px; color: var(--text-faint); }
.ln-lessons { border-top: 1px solid var(--border); padding: 6px 0; }
.ln-lesson { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 50px; border-left: 2px solid transparent; cursor: pointer; }
.ln-lesson:hover { background: var(--card-hover); }
.ln-lesson.on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.ln-num { width: 30px; flex: none; font-size: 11.5px; }
.ln-thumb { position: relative; width: var(--ln-thumb-w, 146px); aspect-ratio: 16/9; flex: none; border-radius: 2px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #17171a 0 8px, #131315 8px 16px); display: flex; align-items: center; justify-content: center; }
.ln-thumb video, .ln-thumb .lp-loomth { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ln-thumb .lp-loomth { display: block; background: linear-gradient(135deg, #2b2358, #5b4bdb); }
.ln-thumb .lp-loomth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ln-thumb .lp-loomtag { position: absolute; left: 4px; bottom: 4px; font-size: 8.5px; font-weight: 700; color: #fff; background: rgba(98,91,255,.9); border-radius: 2px; padding: 0 4px; }
.ln-glyph { position: relative; z-index: 1; width: 14px; height: 14px; color: rgba(255,255,255,.55); filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.ln-glyph svg { width: 100%; height: 100%; }
.ln-tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #26262c; z-index: 1; }
.ln-tbar i { display: block; height: 100%; background: var(--accent); }
.ln-lt { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: #f2f2f5; overflow: hidden; text-overflow: ellipsis; }
.ln-st { width: 110px; flex: none; font-size: 12.5px; color: var(--text-dim); }
.ln-st.done { color: var(--green); } .ln-st.part { color: var(--accent); }
.ln-dur { width: 40px; flex: none; text-align: right; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ln-check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid #2a2a31; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #0a0a0c; }
.ln-check:hover { border-color: var(--text-faint); }
.ln-check.done { background: var(--green); border-color: var(--green); }
.ln-check svg { width: 13px; height: 13px; stroke-width: 3; }

/* ---- the developer's tools ---- */
.ln-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ln-hbtn { font: inherit; font-size: 12.5px; border-radius: 4px; cursor: pointer; padding: 7px 12px; background: none; color: var(--text); border: 1px solid #2a2a31; }
.ln-hbtn:hover { border-color: var(--accent); }
.ln-hbtn.pri { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.ln-hbtn.pri:hover { filter: brightness(1.12); }
#learn-page .ln-tools .lp-admmsg { font-size: 12px; color: var(--text-dim); max-width: 420px; }
.ln-drophint { font-size: 12.5px; color: var(--text-dim); margin-top: -6px; margin-bottom: 16px; }
.ln-drophint b { color: var(--text); font-weight: 600; }
.ln-offnote { margin: -4px auto 18px; padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08);
  border-radius: 6px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.ln-ask { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.ln-ask input, .ln-ask textarea { flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--accent); border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 12.5px; resize: vertical; }
.ln-adm { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; opacity: .55; transition: opacity .12s; }
.ln-mrow { position: relative; }
/* The developer's controls sit UNDER each entry (29 Sep), not over its
   title: the module's under its description, a lesson's on a line of its
   own under the title (flex-basis 100%, last in the row). */
.ln-mrow .ln-adm { display: flex; margin-top: 8px; }
.ln-lesson { flex-wrap: wrap; }
.ln-lesson .ln-adm { order: 99; flex: 0 0 100%; padding-left: calc(var(--ln-thumb-w, 146px) + 14px); margin-top: -2px; }
.ln-mod:hover .ln-mrow .ln-adm, .ln-lesson:hover .ln-adm { opacity: 1; }
.ln-mini { font: inherit; font-size: 11px; background: var(--bg); border: 1px solid #2a2a31; color: var(--text-dim); border-radius: 3px; padding: 2px 7px; cursor: pointer; }
.ln-mini:hover { color: #fff; border-color: var(--accent); }
.ln-slot { font-size: 10.5px; color: var(--text-faint); border: 1px dashed var(--border-dash); border-radius: 3px; padding: 1px 6px; margin-right: 4px; white-space: nowrap; }
.ln-editing { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; cursor: text; }
.ln-emptydrop { margin: 6px 18px 8px 50px; padding: 18px; border: 1.5px dashed var(--border-dash); border-radius: 4px; font-size: 12.5px; color: var(--text-faint); text-align: center; }
.ln-lesson[draggable="true"] { cursor: grab; }
.ln-lesson.ln-lift { opacity: .4; }
.ln-lesson.ln-before { box-shadow: inset 0 2px 0 var(--accent); }
/* The drop: the module under the pointer says it will take it. */
#learn-page.ln-dragging .ln-mod { border-style: dashed; }
.ln-mod.ln-dropto { border: 1px solid var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); }
.ln-mod.ln-dropto .ln-mrow { background: rgba(var(--accent-rgb), .1); }
.ln-dropover { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 10; display: none; pointer-events: none;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#learn-page.ln-dragging .ln-dropover { display: block; }

/* Kept stills (js/tutorials-thumbs.js): an <img> where each row used to
   hold a streaming <video>. Hidden until it has a picture, so a row still
   being made shows the play glyph on black rather than a broken image. */
.ln-thumb img.tth, .lp-thumb .tth { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ln-thumb img.tth:not([src]), .lp-thumb img.tth:not([src]) { visibility: hidden; }
.lp-thumb .tth-live { z-index: 1; }
.lp-thumb .tut-play { z-index: 2; }

/* ---------- SIDE BY SIDE: the player docked left, the modules scrolling right ----------
   Simon, 29 Sep: "make better use of the 16:9 ratio. Let's make it so the
   main video we're viewing is on the left-hand side, and all the modules can
   be seen on the right-hand side. You can just scroll on the right-hand
   side, but the viewable video panel remains there, docked on the left-hand
   side." The page stops scrolling; the header sits on top, and under it two
   columns fill the rest of the window. The player takes what the modules
   leave it, and its video is held to the height available so the transport
   and the lesson's title stay on screen. Below 960px wide the old stacked
   page comes back -- two columns that narrow are two unusable columns. */
@media (min-width: 960px) {
  #learn-page { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 18px; }
  #learn-page .lp-head, #learn-page .ln-drophint, #learn-page .ln-offnote, #learn-page .ln-ask { max-width: none; width: 100%; flex: none; }
  #learn-page .lp-body { flex: 1; min-height: 0; display: flex; }
  #learn-page .ln-col { max-width: none; width: 100%; margin: 0; flex: 1; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1.05fr); gap: 22px; align-items: stretch; }
  #learn-page .ln-player { min-height: 0; overflow-y: auto; align-self: start; max-height: 100%; }
  /* 20% smaller than it was (Simon, 29 Sep): the modules column takes the
     difference -- the grid above is about 1 : 1.05 where it was 1.5 : 1. */
  #learn-page .ln-video { width: min(100%, calc((100vh - 330px) * 16 / 9 * .8)); }
  #learn-page .ln-infol { flex-basis: 320px; }
  #learn-page .ln-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 28px; padding-right: 4px; }
  #learn-page .ln-side .ln-mprog { width: 120px; }
  #learn-page .ln-side .ln-lesson { padding-left: 18px; }
  #learn-page .ln-side { --ln-thumb-w: 114px; }
  #learn-page .ln-side .ln-lesson { gap: 10px; }
  #learn-page .ln-side .ln-st { font-size: 12px; white-space: nowrap; }
  #learn-page .ln-side .ln-lt { min-width: 0; }
  #learn-page .lp-empty, #learn-page .ln-none { width: 100%; }
}
@media (max-width: 959.98px) {
  .ln-side { display: flex; flex-direction: column; gap: 28px; }
}
/* The lesson number on the thumbnail, top left (29 Sep). */
.ln-thumb .ln-tnum { position: absolute; left: 4px; top: 4px; z-index: 2; font-size: 10.5px; line-height: 1; color: #fff;
  background: rgba(0,0,0,.66); border-radius: 2px; padding: 2px 4px; letter-spacing: .02em; pointer-events: none; }
.ln-lesson { padding-left: 18px; }
@media (min-width: 960px) { #learn-page .ln-side .ln-lesson .ln-adm { padding-left: calc(var(--ln-thumb-w) + 10px); } }