/* Kit v3 Academy (learn.html). Tokens from v3.css only; one radius (var(--r)); red only for the selection, the live
   state and the one action that matters. Data bars use var(--pastel), sized to the full track. */
.ln-stage { overflow: hidden; }
.ln-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; font-family: var(--f); }
.app:not([data-view="map"]) .ln-sky { opacity: .14; pointer-events: none; filter: grayscale(1); }
.ln-sky { transition: opacity .18s var(--ease); }

/* Catalogue console */
.ln-cat { inset-block: 76px 120px; inset-inline-start: 76px; width: 380px; }
.ln-cat .panel__hd { padding-block-end: 10px; }
.ln-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ln-hd .chip { height: 22px; font-size: 11.5px; }
.ln-hd .chip i { background: var(--ink-3); }
.ln-cat .stats { margin-block-start: 12px; }
.ln-cat .stat { padding: 10px 12px; }
.ln-cat .stat b { font-size: 26px; }
.ln-q { display: flex; align-items: center; gap: 8px; height: 36px; margin-block-start: 12px; padding-inline: 10px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-3); }
.ln-q:focus-within { border-color: var(--line-2); color: var(--ink-2); }
.ln-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.ln-facets { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.ln-fc { display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 100%; padding-inline: 9px 7px; border-radius: var(--r); border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.ln-fc span { overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.ln-fc svg { flex: none; opacity: .7; }
.ln-fc:hover { color: var(--ink); border-color: var(--ink-3); }
.ln-fc[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ln-fc .fl { width: 18px; height: 12px; }
.ln-fc--clear { border-style: dashed; padding-inline: 9px; }
.ln-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px 6px; color: var(--ink-3); font-size: 12px; border-block-end: 1px solid var(--line); }
.ln-sum b { color: var(--ink); font-weight: 600; font-size: 13px; }
.ln-row { grid-template-columns: 14px minmax(0,1fr) auto; align-items: center; padding-block: 7px; }
.ln-row__t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ln-row__t small { color: var(--ink-3); font-size: 11.5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.ln-row__t small .mono { font-size: 10.5px; }
.ln-row__t .fl { width: 16px; height: 11px; vertical-align: 0; }
.ln-lv { display: inline-flex; gap: 2px; }
.ln-lv i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: var(--r); font: 500 9.5px/1 var(--m); font-style: normal; color: var(--ink-3); opacity: .45; }
.ln-lv i.on { opacity: 1; color: var(--ink); background: var(--bg-3); }
.ln-cell { flex: none; display: block; }
.ln-cell polygon { stroke-width: 1.1; }
.ln-cell.w1 polygon { fill: var(--ink); stroke: var(--ink); }
.ln-cell.w2 polygon { fill: color-mix(in srgb, var(--ink) 42%, transparent); stroke: color-mix(in srgb, var(--ink) 42%, transparent); }
.ln-cell.w3 polygon { fill: none; stroke: var(--ink-3); }
.row[aria-selected="true"] .ln-cell polygon { fill: var(--red); stroke: var(--red); }
.ln-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 24px; color: var(--ink-3); }
.ln-empty b { color: var(--ink); font-size: 14px; font-weight: 600; margin-block-start: 6px; }
.ln-empty__a { display: flex; gap: 8px; margin-block-start: 12px; }

/* Filter popover */
.ln-pop { position: fixed; z-index: 45; width: 280px; max-height: min(420px, calc(100vh - 24px)); display: flex; flex-direction: column; overflow: hidden; }
.ln-pop[hidden] { display: none; }
.ln-pop__hd { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; }
.ln-pop__hd em { font: 500 11px/1 var(--m); font-style: normal; color: var(--ink-3); }
.ln-pop__info { margin: 0 14px 8px; color: var(--ink-3); font-size: 12px; }
.ln-pop__list { overflow: auto; padding: 0 6px 8px; }
.ln-pop__list button { width: 100%; display: grid; grid-template-columns: 16px auto minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 32px; padding: 5px 8px; border: 0; border-radius: var(--r); background: none; text-align: start; font-size: 13px; }
.ln-pop__list button:not(:has(.fl)) { grid-template-columns: 16px minmax(0,1fr) auto; }
.ln-pop__list button:hover:not(:disabled) { background: var(--bg-2); }
.ln-pop__list button:disabled { cursor: default; color: var(--ink-3); }
.ln-pop__list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-pop__list small { color: var(--ink-3); font-size: 11.5px; }
.ln-pop__list .fl { width: 20px; height: 14px; }
.ln-box { width: 16px; height: 16px; border-radius: var(--r); border: 1px solid var(--line-2); display: grid; place-items: center; }
[aria-checked="true"] .ln-box { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* View toolbar and the scheme switch */
.ln-tools { position: absolute; z-index: 11; inset-block-start: 76px; inset-inline-start: 468px; display: flex; align-items: center; gap: 14px; padding: 4px; max-width: calc(100% - 468px - 76px); }
.app:has(#insp:not([hidden])) .ln-tools { max-width: calc(100% - 468px - 472px); }
.ln-views { grid-auto-columns: auto; flex: none; }
.ln-views button { padding-inline: 12px; }
.ln-scheme { display: flex; align-items: center; gap: 8px; padding-inline-end: 4px; min-width: 0; }
.ln-scheme .seg button { min-width: 34px; font-variant-numeric: tabular-nums; }
.ln-conf { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 8px; border: 0; border-radius: var(--r); background: none; color: var(--ink-2); font-size: 12px; white-space: nowrap; min-width: 0; }
.ln-conf:hover { background: var(--bg-2); color: var(--ink); }
.ln-conf span { overflow: hidden; text-overflow: ellipsis; }

/* The constellation (SVG) */
.ln-orbit { fill: none; stroke: var(--line-2); stroke-dasharray: 1 5; stroke-linecap: round; }
.ln-spoke { fill: none; stroke: var(--line); stroke-width: 1; }
.ln-spoke.on { stroke: var(--red); }
.ln-arc { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.ln-arc.sub { stroke: var(--ink); }
.ln-arc.on { stroke: var(--red); stroke-width: 3; }
.ln-flab { cursor: pointer; outline: none; }
.ln-flab text, .ln-ulab text, .ln-hub text { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.ln-flab text { fill: var(--ink-2); font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; }
.ln-flab .n { fill: var(--ink-3); font: 500 10.5px var(--m); }
.ln-flab:hover text, .ln-flab:focus-visible text { fill: var(--ink); }
.ln-flab.on text { fill: var(--red); }
.ln-hub .big { fill: var(--ink); font-size: 44px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ln-hub .sub { fill: var(--ink-2); font-size: 12px; }
.ln-hub .sub2 { fill: var(--ink-3); font: 500 10.5px var(--m); }
.ln-halo { fill: transparent; stroke: transparent; cursor: pointer; transition: stroke .15s var(--ease); }
.ln-halo:hover { stroke: var(--line-2); }
.ln-halo.on { stroke: var(--red); stroke-width: 1.4; }
.ln-halo.empty { stroke: transparent; }
.ln-void { fill: none; stroke: var(--ink-3); stroke-width: .9; stroke-dasharray: 2 2; cursor: pointer; }
.ln-ulab { cursor: pointer; }
.ln-ulab text { fill: var(--ink-2); font-size: 12px; font-weight: 500; }
.ln-ulab .n { fill: var(--ink-3); font: 500 10.5px var(--m); }
.ln-ulab:hover text { fill: var(--ink); }
.ln-ulab.on text { fill: var(--ink); font-weight: 600; }
.ln-ulab.dim { opacity: .35; }
.ln-hx { cursor: pointer; stroke-width: 1; transition: opacity .18s var(--ease); }
.ln-hx.w1 { fill: var(--ink); stroke: var(--ink); }
.ln-hx.w2 { fill: color-mix(in srgb, var(--ink) 40%, transparent); stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
.ln-hx.w3 { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke: var(--ink-3); }
.ln-hx:hover { stroke: var(--ink); stroke-width: 1.6; }
.ln-hx.off { opacity: .1; }
.ln-hx.on { fill: var(--red); stroke: var(--red); opacity: 1; }
.ln-route { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; pointer-events: none; }
.ln-step { pointer-events: none; }
.ln-step circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.ln-step text { fill: var(--ink); font: 600 9px var(--m); }

/* Strip: waves, levels, Open edX */
.ln-strip { position: absolute; z-index: 12; inset-block-end: 12px; inset-inline: 76px 12px; height: 96px; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,.9fr) minmax(0,1.35fr) minmax(0,.9fr); }
.ln-strip[hidden] { display: none; }
.ln-g { padding: 14px 16px 12px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ln-g + .ln-g { border-inline-start: 1px solid var(--line); }
.ln-g__b { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 6px; flex: 1; }
.ln-g__b > button { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto 4px; align-items: center; column-gap: 6px; row-gap: 5px; padding: 3px 6px; border: 0; border-radius: var(--r); background: none; text-align: start; min-width: 0; }
.ln-g__b > button:not(:has(.ln-cell)) { grid-template-columns: minmax(0,1fr) auto; }
.ln-g__b > button:hover { background: var(--bg-2); }
.ln-g__b > button[aria-pressed="true"] { background: var(--bg-3); }
.ln-g__l { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-g__b > button > b { font-size: 13px; font-weight: 600; }
.ln-g__b > button .ln-bar { grid-column: 1 / -1; }
.ln-bar { position: relative; display: block; height: 4px; border-radius: var(--r); background: var(--bg-3); overflow: hidden; }
.ln-bar s { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--line-2); border-radius: inherit; }
.ln-bar b { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--w, 0) * 1%); background: var(--pastel); background-size: calc(10000% / max(var(--w, 1), .01)) 100%; border-radius: inherit; }
.ln-ox { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ln-ox b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.ln-ox span { color: var(--ink-3); font-size: 11px; line-height: 1.15; margin-block-start: 4px; }

/* Inspector */
.ln-insp { width: 380px; max-height: calc(100% - 196px); }
.app:not([data-view="map"]) .ln-insp { max-height: calc(100% - 88px); }
.ln-insp .panel__hd { padding-inline-end: 56px; }
.ln-it { font-size: 22px; line-height: 1.2; }
.ln-it.title--fl { gap: 10px; flex-wrap: wrap; }
.ln-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.chip--ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ln-enrol { margin: 14px 16px 0; padding: 12px; border-radius: var(--r); background: var(--bg-1); border: 1px solid var(--line); display: grid; gap: 10px; }
.ln-enrol__s b { display: block; font-size: 15px; font-weight: 600; margin-block-start: 6px; }
.ln-enrol__s small { display: block; color: var(--ink-3); margin-block-start: 2px; }
.ln-enrol__b { justify-content: center; cursor: not-allowed; color: var(--ink-2); border-style: dashed; }
.ln-enrol__b em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.ln-enrol__b:hover { background: transparent; border-color: var(--line); }
.ln-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 12px 16px 0; background: var(--line); border-radius: var(--r); overflow: hidden; }
.ln-kv--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ln-kv > div { background: var(--bg-1); padding: 10px 12px; min-width: 0; }
.ln-kv span { display: block; color: var(--ink-3); font-size: 11.5px; }
.ln-kv b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-block-start: 4px; }
.ln-kv small { display: block; color: var(--ink-3); font-size: 11px; margin-block-start: 2px; }
.ln-sec { margin: 16px 16px 0; }
.ln-sec > .eyebrow { margin-block-end: 8px; }
.ln-sec--list { margin-inline: 8px; }
.ln-sec--list > .eyebrow { margin-inline: 8px; }
.ln-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ln-out li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.ln-out svg { margin-block-start: 1px; color: var(--ink-2); }
.ln-mods { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.ln-mods li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 8px 0; border-block-end: 1px solid var(--line); }
.ln-mods em { font-style: normal; color: var(--ink-3); font-size: 11px; padding-block-start: 2px; }
.ln-mods b { display: block; font-weight: 500; }
.ln-mods small { color: var(--ink-3); }
.ln-wait p { margin: 0 0 10px; color: var(--ink-2); }
.ln-pp { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; margin-block-end: 6px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); text-align: start; }
.ln-pp:hover { border-color: var(--line-2); }
.ln-pp__t b { display: block; font-weight: 500; }
.ln-pp__t small { color: var(--ink-3); }
.ln-pp__d, .ln-trk__d { display: flex; align-items: center; gap: 4px; }
.ln-pp__d i, .ln-trk__d i { width: 8px; height: 8px; border-radius: var(--r-dot); border: 1px solid var(--ink-3); }
.ln-pp__d i.past { background: var(--ink-3); }
.ln-pp__d i.on { background: var(--red); border-color: var(--red); }
.ln-pp__d i.cap, .ln-trk__d i.cap { border-radius: var(--r); width: 10px; height: 10px; }
.ln-dl { margin: 14px 16px 0; display: grid; gap: 0; }
.ln-dl > div { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 10px; padding: 7px 0; border-block-end: 1px solid var(--line); }
.ln-dl dt { color: var(--ink-3); font-size: 12px; }
.ln-dl dd { margin: 0; min-width: 0; }
.ln-muted { color: var(--ink-3); }
.ln-pl { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 10px; }
.ln-pl .fl { width: 18px; height: 12px; }
.ln-bars { display: grid; gap: 6px; }
.ln-bars > div { display: grid; grid-template-columns: 86px minmax(0,1fr) 28px; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.ln-bars em { font-style: normal; text-align: end; color: var(--ink); font-weight: 600; }
.ln-units { display: grid; gap: 2px; }
.ln-units button { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto 4px; gap: 5px 10px; padding: 7px 8px; border: 0; border-radius: var(--r); background: none; text-align: start; }
.ln-units button:hover { background: var(--bg-2); }
.ln-units button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-units em { font-style: normal; font-weight: 600; }
.ln-units .ln-bar { grid-column: 1 / -1; }
.ln-sch { width: 100%; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; align-items: start; margin: 12px 16px 0; width: calc(100% - 32px); padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); text-align: start; }
.ln-sch[aria-pressed="true"] { border-color: var(--ink-3); }
.ln-sch > b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.ln-sch span { display: grid; gap: 3px; min-width: 0; }
.ln-sch small { color: var(--ink-3); font-size: 11.5px; overflow-wrap: anywhere; }

/* Views over the stage: pathways, my learning, offer to teach */
.ln-view { position: absolute; z-index: 9; inset-block: 128px 12px; inset-inline: 468px 76px; overflow: auto; scrollbar-width: thin; }
.ln-view[hidden] { display: none; }
.app:has(#insp:not([hidden])) .ln-view { inset-inline-end: 468px; }
.ln-pw { display: grid; gap: 10px; padding-block-end: 8px; }
.ln-pw__hd { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding: 4px 2px 6px; }
.ln-pw__hd .title { font-size: 24px; }
.ln-pw__leg { display: flex; gap: 14px; color: var(--ink-3); font-size: 12px; flex-wrap: wrap; }
.ln-pw__leg span { display: inline-flex; align-items: center; gap: 6px; }
.ln-pw__ax, .ln-lane { display: grid; grid-template-columns: minmax(160px, 1.1fr) repeat(var(--n), minmax(0, 1fr)) minmax(0, 1.25fr); gap: 8px; }
.ln-pw__ax { padding-inline: 14px; color: var(--ink-3); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.ln-lane { position: relative; padding: 14px; border-radius: var(--r); background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--line); align-items: stretch; }
.ln-lane::before { content: ""; position: absolute; inset-inline: calc(14px + 18%) 28px; inset-block-start: 31px; height: 1px; background: var(--line-2); }
.ln-lane__h { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ln-lane__h b { font-weight: 600; font-size: 14px; }
.ln-lane__h small { color: var(--ink-3); font-size: 12px; }
.ln-st { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; border: 1px solid transparent; border-radius: var(--r); background: none; text-align: start; min-width: 0; }
.ln-st:hover { background: var(--bg-2); }
.ln-st.on { border-color: var(--red); }
.ln-st.on .ln-cell polygon { fill: var(--red); stroke: var(--red); }
.ln-st .ln-cell { background: var(--bg); }
.ln-st b { font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.ln-st small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.ln-st em { font-style: normal; font-size: 11px; color: var(--ink-2); padding: 2px 6px; border-radius: var(--r); background: var(--bg-3); }
.ln-cap { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--r); border: 1px dashed var(--line-2); background: var(--bg-1); min-width: 0; }
.ln-cap b { font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.ln-pw__ft { margin: 2px; color: var(--ink-3); font-size: 12px; }

.ln-me, .ln-tf { max-width: 880px; display: grid; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--line); box-shadow: var(--sh); }
.ln-me__hd { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
.ln-me__hd .title { font-size: 26px; }
.ln-me__hd .line1 { margin: 6px 0 0; }
.ln-me__a { display: flex; gap: 8px; }
.ln-me__st { margin: 0; }
.ln-dash { color: var(--ink-3); height: 30px; display: flex !important; align-items: center; }
.ln-me__g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.ln-me__c { padding: 14px; border-radius: var(--r); background: var(--bg-1); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.ln-trk { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-block-end: 1px solid var(--line); }
.ln-trk:last-child { border-block-end: 0; }
.ln-trk b { display: block; font-weight: 500; }
.ln-trk small, .ln-trk em { color: var(--ink-3); font-size: 11.5px; font-style: normal; }
.ln-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ln-how li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; }
.ln-how em { font-style: normal; color: var(--ink-3); font-size: 11px; padding-block-start: 2px; }
.ln-how b { display: block; font-weight: 500; }
.ln-how small { color: var(--ink-3); }

.ln-tf__hd { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ln-tf__hd .title { font-size: 24px; }
.ln-tf__need { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.ln-tf__need > div { background: var(--bg-1); padding: 10px 12px; }
.ln-tf__need b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.ln-tf__need span { color: var(--ink-3); font-size: 12px; }
.ln-f { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ln-f legend { padding: 0; margin-block-end: 7px; }
.ln-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ln-f select, .ln-f textarea, .ln-other input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink); font-size: 13px; }
.ln-f select:disabled { opacity: .45; }
.ln-f textarea { height: auto; padding: 8px 10px; resize: vertical; font: inherit; }
.ln-roles { grid-auto-columns: auto; justify-content: start; overflow-x: auto; scrollbar-width: none; }
.ln-roles button { padding-inline: 12px; white-space: nowrap; }
.ln-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-checks label { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding-inline: 10px; border-radius: var(--r); border: 1px solid var(--line-2); font-size: 12.5px; cursor: pointer; }
.ln-checks label:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ln-checks input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ln-checks label:focus-within { outline: 2px solid var(--ink-3); outline-offset: 1px; }
.ln-checks .ln-other { padding: 0; border: 0; height: 30px; flex: 1 1 160px; }
.ln-other input { height: 30px; }
.ln-tf__ft { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.ln-tf__ft small { color: var(--ink-3); max-width: 520px; }

.ln-toast { position: fixed; z-index: 60; inset-block-end: 96px; inset-inline-start: 50%; transform: translateX(-50%); padding: 10px 14px; font-size: 13px; max-width: min(560px, calc(100% - 24px)); }
[dir="rtl"] .ln-toast { transform: translateX(50%); }
.ln-toast[hidden] { display: none; }

/* Phone: the constellation stays full screen; the catalogue is a sheet; views scroll under the toolbar */
@media (max-width: 760px) {
  .ln-tools { inset-block-start: 112px; inset-inline: 8px; max-width: none !important; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .ln-tools::-webkit-scrollbar { display: none; }
  .ln-scheme .eyebrow, .ln-conf span { display: none; }
  .ln-cat .panel__hd { padding: 12px 12px 8px; }
  .ln-cat .title { display: none; }
  .ln-cat .stats { margin-block-start: 8px; }
  .ln-cat .stat { padding: 8px 10px; }
  .ln-cat .stat b { font-size: 20px; }
  .ln-facets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ln-strip { display: none; }
  .app:not([data-view="map"]) .ln-cat { display: none; }
  .ln-view { inset-block: 164px 8px; inset-inline: 8px !important; }
  .ln-insp { width: auto; max-height: 62vh !important; }
  .ln-pw__ax { display: none; }
  .ln-lane { grid-template-columns: 1fr; }
  .ln-lane::before { display: none; }
  .ln-st, .ln-cap { grid-column: auto !important; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ln-me__g, .ln-f2 { grid-template-columns: 1fr; }
  .ln-me, .ln-tf { padding: 14px; }
  .ln-tf__ft { flex-direction: column; align-items: stretch; }
  .ln-dl > div { grid-template-columns: 112px minmax(0,1fr); }
}

/* Pathway strip in the foot */
.ln-g .eyebrow b { color: var(--ink); font-weight: 600; margin-inline-start: 6px; }
.ln-pws { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.ln-pws button { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 26px; padding-inline: 6px; border: 0; border-radius: var(--r); background: none; min-width: 0; font-size: 12px; color: var(--ink-2); }
.ln-pws button:hover { background: var(--bg-2); color: var(--ink); }
.ln-pws button[aria-pressed="true"] { background: var(--bg-3); color: var(--ink); }
.ln-pws button > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-pws__d { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.ln-pws__d i { display: block; line-height: 0; }
.ln-pws__d i.off { opacity: .25; }
.ln-pws__d i.on polygon { fill: var(--red); stroke: var(--red); }
.ln-pws__d i.cap { width: 8px; height: 8px; margin-inline-start: 3px; border: 1px solid var(--ink-3); border-radius: var(--r); }
.ln-g__b > button { align-content: center; }
.ln-ox b { font-size: 24px; }
/* The reader's context: courses for their place first */
.ln-for .group__h .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ln-for .fl { width: 18px; height: 12px; }
.ln-for { border-block-end: 1px solid var(--line); padding-block-end: 8px; }
.ln-for--none { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: var(--ink-3); font-size: 12px; }
.ln-for--none span { flex: 1; }
.ln-for--none .btn { height: 28px; font-size: 12px; }
.app:has(#insp:not([hidden])) .ln-scheme > .eyebrow, .app:has(#insp:not([hidden])) .ln-conf span { display: none; }
/* Right to left: English strings keep their own direction inside an rtl frame */
.ln-insp p, .ln-insp dd, .ln-insp small, .ln-insp li span, .ln-insp b, .ln-row__t small, .ln-strip span, .ln-strip b, .ln-view small, .ln-view b { unicode-bidi: plaintext; }