/* ═══════════════════════════════════════════════════════════════════════════════════════════════ AI Learning — course navigation (the ☰ TOC pane + the lesson bar it lives in). [2026-08-01] Pawan: "There is no way to go back in the experience - consistent movement in experience, learn from grammar academy how we make a toc and use it well." Ported from the Grammar Academy chapter pages (grammar/academy/nouns.html, CSS block at lines 2036-2230, markup at 3548-3581, renderToc() at 5441). Class names, sizes, timings and colours are that file's — copied, not reinterpreted, so the two surfaces move identically. Two lessons taken from the academy's own history, visible in its comments: 1. It BUILT a breadcrumb row and then killed it — `.crumb-row { display: none; }` with the note "1-row header everywhere". So there is no crumb row here either. One working row; the ☰ pane carries the whole hierarchy. 2. Pawan, 2026-05-03, on that same pane: "toc top strangely i have a way to go to llos.ai home page but no way to go to grammar home page and no way to go to current chapter home page." The answer was three stacked back-links, broadest to narrowest, ABOVE the tree — first thing you see when the menu opens. Same three here: LLOS.ai · the course · this day's board. Frequency law: opening a TOC is a once-in-a-while act, so the ☰ is a quiet 36px glyph, not a button that shouts. The bar it sits in stays the same height it was. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ═══ THE TYPE LADDER FOR A NAVIGATION PANE ══════════════════════════════════════════════════════ [2026-08-12] Pawan: "you never planned sizes of heading subheading top etc it is exact in very smallest leaf highest size so even a bigger joke" · "this is imp we need to fix as it sets our components that we later use many times." He was right and the cause was mechanical: every size in here read a PROSE token (--fs-body, --fs-ui), so the menu had no ladder of its own — it just tracked the article, and the day row and the lesson row inside it came out identical (15px / 400 both, measured at 1440px). A tree whose parent and child are the same weight and the same size is not a tree. Measured on the two systems, 2026-08-12, rather than chosen: Microsoft Learn — learn.microsoft.com/en-us/dotnet/csharp/language-reference/, 1600px viewport: TOC 295px wide · EVERY row at every level 14px · line-height 24.5px · row box 33px · current/parent weight 600 · all other rows weight 400 · 16px indent per level. Adobe Spectrum — spectrum-css/components/sidenav/index.css with the published token values: section header font-size-75 = 12px, medium · top-level item font-size-100 = 14px, BOLD · nested level-2 item font-size-100 = 14px, REGULAR. Both arrive at the same law independently, and it is the opposite of what we had: PARENT AND CHILD ARE THE SAME SIZE. Level is carried by WEIGHT and INDENT, never by size. And the group heading is SMALLER than the rows it heads, not bigger. So the ladder here is three sizes, on Adobe's own scale, in fixed px so a menu never again grows with the prose beside it: 16 / 600 pane title — names where you are, one line, the only serif left 14 / 400 parent row (a day) — 400, NOT bold. On MS Learn only the current item is 600; bolding every parent makes 17 headings and no hierarchy. 14 / 700 the CURRENT row — the one focal point in the tree, amber 14 / 400 child row (a lesson) — Adobe level-2 regular · MS 400. Indent, not size, says child. 14 / 400 back-links — utility. They were 15/600, the LOUDEST thing in the pane, which is backwards for something used once per visit. 12 / 600 group heading — Adobe font-size-75, uppercase, muted 12 / 400 meta (the minutes) — muted, right column Row 33px, 44px on touch. Anything added later picks one of these six rows or it does not belong. Removed => the menu drifts back to prose sizes and the tree loses its levels again. */ /* ── the ☰ trigger, in the existing .lessonbar ──────────────────────────────────────────────── */ .toc-btn{ background:none; border:none; cursor:pointer; font-size:var(--fs-body,16px); color:var(--ink-3); padding:6px 8px; min-height:36px; min-width:36px; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; border-radius:8px; transition:color .18s, background .18s; } .toc-btn:hover{ color:var(--ch); background:var(--ch-soft); } /* thin progress rule under the bar — the day's four lessons, honestly counted */ .cn-bar-wrap{ height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin:-6px 0 14px } .cn-bar{ height:100%; width:0; background:var(--ch); transition:width .3s ease } /* ── slide-out pane ─────────────────────────────────────────────────────────────────────────── */ .toc-backdrop{ position:fixed; inset:0; z-index:199; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s; } .toc-backdrop.open{ opacity:1; pointer-events:auto } .toc-pane{ position:fixed; top:0; left:-400px; width:340px; max-width:92vw; height:100dvh; background:var(--card); border-right:1px solid var(--border); box-shadow:8px 0 32px rgba(0,0,0,.08); z-index:200; overflow-y:auto; transition:left .26s cubic-bezier(.2,0,0,1); display:flex; flex-direction:column; } .toc-pane.open{ left:0 } .toc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 20px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--card); z-index:1; } .toc-head-text{ flex:1; min-width:0 } .toc-brand-line{ font-size:var(--fs-meta,13px); font-weight:700; color:var(--ink-3); letter-spacing:.02em; margin-bottom:4px } .toc-brand-line .ai{ color:var(--ch) } /* [2026-08-12] Was --fs-h4 (18px mobile / 20px desktop) — the largest text in the pane and, on a 340px pane, a two-line heading before a single menu row appeared. One step down to the body token. Lora stays on this ONE line: it names where you are, and it is the pane's only identity mark now that the seventeen rows below it have gone to the interface face. */ /* 16 / 600 — the top of the ladder, fixed so it stops tracking the article's reading size. */ .toc-title{ font-family:'Lora',serif; font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1.35 } .toc-close{ background:none; border:none; cursor:pointer; font-size:var(--fs-h3,20px); color:var(--ink-3); padding:4px 10px; font-family:inherit; line-height:1; } .toc-close:hover{ color:var(--ink) } /* the three back-links, broadest → narrowest */ .toc-home-links{ border-bottom:1px solid var(--border) } /* [2026-08-12] 14 / 400, down from 15 / 600. These three were the LOUDEST text in the pane and they are the least-used thing in it — you leave by them once, you scan the tree every time. Frequency sets the volume; the destination name keeps 600 so the row is still scannable. */ .toc-home-link{ display:flex; align-items:center; gap:8px; padding:7px 16px; min-height:33px; color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:400; line-height:1.35; border:none; background:none; font-family:inherit; width:100%; text-align:left; cursor:pointer; } @media(pointer:coarse){ .toc-home-link{ min-height:44px } } .toc-home-link strong{ font-weight:600 } /* [2026-08-12] Reviewers: "The three Back to… rows feel too equal… make the hierarchy progressively stronger toward the current context. The last row should feel like the immediate parent." Three rungs, quietest first. Only the third — the day you are standing in — gets full ink, a bold name and an amber arrow, so the eye finds the immediate parent without reading all three. The step is in colour and weight, never in size: three different sizes here would fight the 14px row ladder below and put the loudest text back at the top of the pane. Removed => three identical rows and the reader has to read to find the way out. */ .toc-home-link.lvl-1{ color:var(--ink-3) } .toc-home-link.lvl-1 strong{ font-weight:400; color:var(--ink-2) } .toc-home-link.lvl-2{ color:var(--ink-2) } .toc-home-link.lvl-2 strong{ font-weight:600; color:var(--ink-2) } .toc-home-link.lvl-3{ color:var(--ink) } .toc-home-link.lvl-3 strong{ font-weight:700; color:var(--ink) } .toc-home-link.lvl-3 .arw{ color:var(--ch) } .toc-home-link .arw{ color:var(--ink-3) } /* [2026-08-12] Reviewers: "The transition from navigation to TOC needs a stronger pause… navigation and content visually bleed together" + "the current-day context disappears once scrolling begins." One sticky strip answers both. It names the list ("Course contents") and holds the day you are in on screen after the big heading scrolls away — the reviewer explicitly did not want the heading repeated. It sticks to the pane, which is the scroll container, so the head above it is free to go. The 10px of space above it is the pause; the rule under it is the seam. Removed => the lesson list starts unannounced and you lose your place while scrolling. */ .toc-cue{ position:sticky; top:0; z-index:2; display:flex; align-items:baseline; gap:10px; margin:10px -16px 6px; padding:8px 16px 7px; background:var(--card); border-bottom:1px solid var(--border); } .toc-cue .cue-t{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .toc-cue .cue-now{ margin-left:auto; font-size:12px; font-weight:700; color:var(--ch-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%; } .toc-home-link + .toc-home-link{ border-top:1px dashed var(--border) } .toc-home-link:hover{ background:var(--ch-mist); color:var(--ink) } .toc-home-link .arw{ font-size:var(--fs-ui,14px); line-height:1; flex-shrink:0 } .toc-home-link strong{ color:var(--ink) } .toc-home-link strong .ai{ color:var(--ch) } .toc-body{ padding:8px 16px 32px; flex:1 } .toc-resume{ margin:4px 0 16px; padding:12px 14px; border-radius:10px; background:var(--ch-soft); color:var(--ch-deep); font-size:var(--fs-ui,14px); font-weight:600; cursor:pointer; border:1.5px solid var(--ch); display:flex; align-items:center; gap:10px; font-family:inherit; width:100%; text-align:left; } .toc-resume:hover{ background:var(--ch); color:#fff } .toc-resume-icon{ font-size:var(--fs-h4,18px); flex-shrink:0 } /* ── one day = one band ─────────────────────────────────────────────────────────────────────── */ /* [2026-08-12] Pawan: "i dont get it why is text siuze si so dominating" · "dont you think menu needs smaller fdonts than main page". Measured before the change, at 1440px: label 17px Lora serif w600, band header box 86px tall, "40 MIN" at 14px w700 uppercase letter-spaced, every band a bordered rounded card. Seventeen of those is a wall, and the label was wearing the ARTICLE's face at the ARTICLE's size — so nothing told the eye which of the two was the content. Three causes, three fixes: 1. font-size read var(--fs-body) — the PROSE token — so the menu grew with the reading size (16px at 390, 17px at 1440). Now var(--fs-ui), which is one step below prose at every width. A menu is chrome; it sits under the page, never beside it. 2. 'Lora' serif w600 is the article's reading face. Dropped to the interface face at normal weight. The serif stays where prose is. 3. The card. Border + radius + warm fill + 10/12 padding on every row. Gone — geometry is now Microsoft Learn's measured side nav (33px rows, 4/16 padding, no surface), the same numbers already recorded in design/internal/shelf/CONSOLE.html after the same complaint on 2026-08-07. The pane keeps its own hard edge and heading (border-right on .toc-pane, border-bottom on .toc-head) — strip those too and the pane stops reading as a pane, which is the 2026-08-07 lesson sitting right beside this one. Rows go back to 44px on touch, where a finger needs the target. Removed => the menu shouts over the lesson it is pointing at. */ .toc-band{ margin:0 } /* [2026-08-12] Pawan: "the minute pill is destroying alignment space before and all". It was: flex, align-items:center, and an auto-width minute cell. Three faults compounding — (1) centred against a label that wraps to three lines, so "40 min" floated in the middle of a block while the dot and the + floated with it; (2) an auto-width cell, so "5 min" and "40 min" are different widths and the + column moved row to row — the ragged edge he is pointing at; (3) it ate ~50px of the label's width, which caused more wrapping, which made fault 1 worse. Now a 4-column grid: the mark, the minutes and the dot each own a fixed column, so they line up down the whole pane whatever the label does, and align-items:start puts them on the FIRST line of the label instead of the middle of the block. Removed => the right edge goes ragged again the moment two rows have different minute counts. */ .toc-band-header{ /* [2026-08-12] meta column 42 -> 48px. "40 min" fits 42, "15 days" does not, and an overflowing meta cell slides under the + mark instead of wrapping. Sized to the longest string this column is allowed to hold; anything longer belongs in the row label, not the meta. column-gap 10 -> 6px so the state marker sits with its title rather than in its own column (reviewers: "the bullet is too visually detached from the lesson title"). */ display:grid; grid-template-columns:8px minmax(0,1fr) 48px 1ch; column-gap:6px; row-gap:0; align-items:start; padding:7px 16px; min-height:33px; background:none; cursor:pointer; border-radius:6px; font-family:inherit; width:100%; text-align:left; border:none; font-size:inherit; } @media(pointer:coarse){ .toc-band-header{ min-height:44px } } .toc-band-header:hover{ background:var(--ch-mist) } .toc-band.active .toc-band-header{ background:var(--ch-soft) } /* the 6px marks and the 12px meta sit on the first line of the label, not the middle of the block. 19px = the 14px label's line box (14 x 1.35); the offsets centre each mark inside that box. */ /* [2026-08-12] Reviewers: "The tiny pale dot feels ornamental rather than functional. Bring it closer to the text, increase its contrast slightly, or turn it into a meaningful state marker: ○ not started / ◐ in progress / ● completed." All three, drawn rather than typed — a real circle stays crisp at 8px where the characters ○ ◐ ● do not, and it cannot be read aloud by a screen reader as punctuation. not started = ring, hollow in progress = ring with the left half filled (the ◐) completed = solid green Contrast lifted off --border, which was the pale grey the reviewer is describing. Closer to the text as well: the row's column-gap drops 10 -> 6px above, so the marker reads as belonging to its title instead of floating in its own column. Removed => a decoration that carries nothing, in a menu whose whole job is orientation. */ .toc-band-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; border:1.5px solid var(--ink-3); background:transparent; box-sizing:border-box; } .toc-band.part .toc-band-dot{ background:linear-gradient(90deg,var(--ch) 50%,transparent 50%); border-color:var(--ch) } .toc-band.done .toc-band-dot{ background:var(--ok); border-color:var(--ok) } .toc-band.active .toc-band-dot{ border-color:var(--ch); background:var(--ch) } /* [2026-08-12] Pawan: "shouldnt days be smaller font seem same as heading". The size step was already right — 16px title against 14px rows — but I had put weight 600 on EVERY day row, reading "Adobe top-level is bold" as "all parents are bold". Re-read the measurement: on MS Learn only the CURRENT item is 600, all 13 other rows are 400. Seventeen bold rows is not a hierarchy, it is seventeen headings, which is exactly why the days read level with the pane title. Weight 400 here; the .active rule below is the only 600 in the tree, so the pane has one focal point and the title clearly sits above it. Removed => every row shouts again and the title stops being the top of the ladder. */ .toc-band-label{ font-weight:400; font-size:14px; line-height:1.35; color:var(--ink-2); min-width:0 } .toc-band.active .toc-band-label{ font-weight:700; color:var(--ch-deep) } /* 12 / 400 — metadata. Right-aligned in its own fixed column, tabular figures so 5 and 40 occupy the same width and the numbers read as a column rather than as ragged text. */ .toc-band-age{ font-size:12px; font-weight:400; letter-spacing:0; color:var(--ink-3); text-transform:none; text-align:right; line-height:19px; font-variant-numeric:tabular-nums; white-space:nowrap; } /* [2026-08-12] Pawan: "Lets not add emojis here - dictionary is different - here stay professional, we can use +, - as needed." Was a ▶ that rotated 90deg on expand. Now two literal characters: + means there is more inside, − means it is already open. A rotating triangle asks you to read an angle; + and − say the same thing in the language every file tree has used for thirty years, and they carry no decorative charge. Monospace + tabular width so the column does not shift by a pixel when the mark swaps. The character is U+2212 MINUS, not a hyphen — a hyphen sits too high and too short beside a +, which is exactly the small wrongness that makes a menu look homemade. */ .toc-band-chev{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:14px; line-height:19px; color:var(--ink-3); text-align:center; } .toc-band-chev::before{ content:'+' } .toc-band.expanded .toc-band-chev::before{ content:'\2212' } .toc-band-body{ display:none; background:var(--card); padding:4px 0 } .toc-band.expanded .toc-band-body{ display:block } /* ── one lesson = one section row ───────────────────────────────────────────────────────────── */ /* [2026-08-12] Same 33px / 4-16 geometry as the band row above, indented one step so the nesting is read from the indent rather than from a box. Was 9px 14px 9px 28px. */ .toc-section{ display:flex; align-items:center; gap:10px; padding:4px 16px 4px 30px; min-height:33px; cursor:pointer; font-family:inherit; width:100%; text-align:left; border:none; background:none; font-size:inherit; color:var(--ink-2); } @media(pointer:coarse){ .toc-section{ min-height:44px } } /* [2026-08-12] .toc-section is now an for other days and a