/* Course (spec 5.1): roadmap, stage page, action plan, library, reading panel, command palette and help sheet.
   Tokens come from ui-kit.css; no colour literals here. Owner: shell and journey. */

/* ------------------------------------------------------------ page scaffold */
.page{display:flex;flex-direction:column;gap:32px;min-width:0}
.page--narrow{max-width:720px}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:8px}
.page-header__text{min-width:0}
.page-header__eyebrow{margin:0 0 6px;font:var(--t-small);letter-spacing:0;color:var(--link)}
.page-header__title{margin:0;font:var(--t-h1);letter-spacing:-.02em;font-variation-settings:"opsz" 32;color:var(--text-1);text-wrap:balance}
.page-header__lead{margin:8px 0 0;max-width:640px;font:var(--t-body);letter-spacing:-.006em;color:var(--text-2);text-wrap:pretty}
.page-header__aside{flex:none}
.section-title{margin:0;font:var(--t-title);letter-spacing:-.01em;color:var(--text-1)}
.section-meta{margin:0;font:var(--t-small);color:var(--text-3)}
.results-line{margin:0;font:500 13px/18px var(--font-sans);color:var(--text-3)}
.id-chip{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-xs);background:var(--gray-100);color:var(--text-2);font:500 12px/16px var(--font-mono);letter-spacing:0;vertical-align:1px}
.soft-chip{display:inline-flex;align-items:center;flex:none;height:22px;padding:0 8px;border-radius:var(--r-full);background:var(--neutral-bg);box-shadow:inset 0 0 0 1px var(--neutral-border);color:var(--neutral-text);font:600 12px/16px var(--font-sans);letter-spacing:0;white-space:nowrap;cursor:default;position:relative;z-index:1}
.soft-chip--warning{background:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-border);color:var(--warning-text)}
.here-pill{display:inline-flex;align-items:center;gap:4px;height:22px;margin-top:10px;padding:0 9px;border-radius:var(--r-full);background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green-100);color:var(--green-700);font:600 12px/16px var(--font-sans);letter-spacing:0;white-space:nowrap}
.here-pill::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:var(--green-500);box-shadow:0 0 0 3px var(--green-100)}
.bookmark-toggle{appearance:none;position:relative;z-index:1;display:grid;place-items:center;flex:none;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--gray-400);cursor:pointer;transition:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.bookmark-toggle:hover{background:var(--hover);color:var(--text-1)}
.bookmark-toggle[aria-pressed=true]{color:var(--green-600)}
.bookmark-toggle .uk-icon{width:18px;height:18px}
@media (pointer:coarse){
  .bookmark-toggle{width:44px;height:44px}
  /* Every control a finger has to hit is at least 44px tall (spec 3.24). */
  #reader-notion{min-width:44px;min-height:44px}
  .phone-actions .uk-btn{min-height:44px}
  #stage-tabs [role=tab]{min-height:44px}
}
.group-head{display:flex;align-items:center;gap:8px;min-height:32px;margin:0;font:600 13px/18px var(--font-sans);letter-spacing:0;color:var(--text-1)}
.group-head .uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring)}
.group-head__meta{font:500 12px/16px var(--font-sans);color:var(--text-3)}

/* ------------------------------------------------------------------ roadmap */
.course-ring{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);box-shadow:var(--shadow-card)}
.course-ring__value{margin:0;font:600 15px/20px var(--font-sans);letter-spacing:-.006em;color:var(--text-1)}
.course-ring__label{margin:0;font:500 12px/16px var(--font-sans);color:var(--text-3)}

.next-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.next-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.next-card--continue{box-shadow:var(--shadow-card),inset 0 3px 0 var(--green-500)}
.next-card__top{display:flex;align-items:center;gap:12px;min-width:0}
.next-card__top .uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring)}
.next-card__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2)}
.next-card__eyebrow{margin:0;font:600 13px/18px var(--font-sans);letter-spacing:0;color:var(--text-1)}
.next-card__meta{margin:2px 0 0;font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-card__title{margin:0;font:var(--t-title);letter-spacing:-.01em;color:var(--text-1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.next-card__body{margin:-6px 0 0;font:400 14px/20px var(--font-sans);color:var(--text-3);text-wrap:pretty}
.next-card__meter .uk-meter__label{font-size:12px;color:var(--text-3)}
.next-card__meter .uk-meter__value{font-size:12px}
.next-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;flex-wrap:wrap}
.next-card__hint{display:inline-flex;align-items:center;gap:6px;min-width:0;font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap}
.next-card__hint .uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring)}
.next-card__heading{min-width:0}
.next-card__title-link{color:inherit;text-decoration:none;border-radius:var(--r-2xs)}
.next-card__title-link:hover{color:var(--link)}
.next-checks.uk-checklist{display:flex;flex-direction:column;gap:2px;margin:-4px -10px 0}
.next-checks .uk-check-row>button{padding:6px 10px;font:400 14px/20px var(--font-sans);letter-spacing:-.003em;color:var(--text-1)}
.next-checks .uk-check-box{width:18px;height:18px;margin-top:1px}
.next-checks__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.next-checks__more{margin:2px 0 0 10px}
.next-checks__more a{font:500 13px/18px var(--font-sans);color:var(--text-3);text-decoration:none;border-radius:var(--r-2xs)}
.next-checks__more a:hover{color:var(--link)}
.next-card__ai{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font:500 13px/18px var(--font-sans);text-decoration:none;border-radius:var(--r-sm)}
.next-card__ai:hover{color:var(--link)}
.next-card__refs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:-4px}
.next-card__refs-label{margin-right:2px;font:500 13px/18px var(--font-sans);color:var(--text-3)}
.next-card__link{font:500 13px/18px var(--font-sans);color:var(--link);text-decoration:none}
.next-card .uk-skeleton{padding-top:4px}

.stage-rail-card{padding:20px 24px 24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.stage-rail-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}
.stage-rail{position:relative}
.stage-rail__track{position:absolute;top:28px;left:calc(100% / 12);right:calc(100% / 12);height:2px;border-radius:var(--r-full);background:var(--gray-150);pointer-events:none}
.stage-rail__fill{display:block;width:var(--rail-progress);height:100%;border-radius:inherit;background:var(--green-500);transition:width var(--dur-4) var(--ease-out)}
.stage-rail__list{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none}
.stage-rail__step{min-width:0}
.stage-rail__link{display:flex;flex-direction:column;align-items:center;gap:1px;padding:0 4px 4px;border-radius:var(--r-md);color:inherit;text-align:center;text-decoration:none}
.stage-rail__art{position:relative;display:inline-grid;margin-bottom:10px;border-radius:22%;transition:transform var(--dur-3) var(--ease-out)}
.stage-rail__art .uk-stage-art{box-shadow:0 0 0 5px var(--surface),0 1px 2px rgba(24,24,27,.12)}
.stage-rail__link:hover .stage-rail__art{transform:translateY(-2px)}
.stage-rail__link:hover .stage-rail__name{color:var(--link)}
.stage-rail__ring .uk-ring__track{stroke:var(--gray-300)}
.stage-rail__ring{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-full);background:var(--surface);box-shadow:0 1px 2px rgba(24,24,27,.14)}
.stage-rail__num{font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap}
.stage-rail__num>span,.stage-rail__meta>span{white-space:nowrap}
.stage-rail__name{font:600 15px/22px var(--font-sans);letter-spacing:-.006em;color:var(--text-1);transition:color var(--dur-2) var(--ease-out)}
.stage-rail__meta{font:500 12px/16px var(--font-sans);color:var(--text-3);font-variant-numeric:tabular-nums}
.stage-rail__step.is-done .stage-rail__meta{color:var(--green-700)}
.stage-rail__step.is-next .stage-rail__art .uk-stage-art{filter:saturate(.9)}

/* the 90-day scale: stage segments as wide as their days */
.day-scale{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.day-scale__bar{display:flex;gap:3px;height:8px}
.day-scale__seg{position:relative;flex-basis:0;min-width:6px;overflow:hidden;border-radius:var(--r-full);background:var(--gray-150)}
.day-scale__seg.is-current{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--green-200)}
.day-scale__fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--green-500);transition:width var(--dur-4) var(--ease-out)}
.day-scale__ticks{position:relative;height:16px;margin-top:8px}
.day-scale__tick{position:absolute;top:0;transform:translateX(-50%);font:500 11px/14px var(--font-sans);letter-spacing:.01em;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.day-scale__tick:first-child{transform:none}
.day-scale__tick:last-child{left:auto!important;right:0;transform:none}

.journey{display:flex;flex-direction:column;gap:36px}
.stage-section{min-width:0;scroll-margin-top:72px}
.stage-section__head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(180px,240px) auto;align-items:center;gap:16px;margin-bottom:14px}
.stage-section__head .uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring)}
.stage-section__eyebrow{margin:0;font:500 13px/18px var(--font-sans);color:var(--link)}
.stage-section__title{margin:1px 0 0;font:var(--t-h3);letter-spacing:-.01em;font-variation-settings:"opsz" 24;color:var(--text-1)}
.stage-section__desc{margin:2px 0 0;font:400 14px/20px var(--font-sans);color:var(--text-3)}
.stage-section__meter{min-width:0}
.stage-section__meter .uk-meter__label,.stage-section__meter .uk-meter__value{font-size:12px}
.stage-section__open{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 6px 0 10px;border-radius:var(--r-sm);color:var(--text-2);font:500 14px/20px var(--font-sans);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.stage-section__open:hover{background:var(--hover);color:var(--text-1)}

.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.lesson-card{position:relative;display:flex;align-items:center;gap:14px;min-width:0;min-height:68px;padding:12px 12px 12px 14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.lesson-card:hover{background:var(--gray-25);border-color:var(--border-strong);transition-duration:var(--dur-2)}
.lesson-card:active{background:var(--gray-50)}
.lesson-card__body{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.lesson-card__title{font:600 15px/22px var(--font-sans);letter-spacing:-.006em;color:var(--text-1);text-wrap:pretty}
.lesson-card__meta{display:flex;align-items:center;gap:4px;font:500 12px/16px var(--font-sans);color:var(--text-3)}
.lesson-card__saved{color:var(--green-600)}
.lesson-card__chev{flex:none;color:var(--gray-400);transition:transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.lesson-card:hover .lesson-card__chev{color:var(--text-2);transform:translateX(2px)}
.lesson-card[data-state=done] .lesson-card__title{color:var(--text-2)}

.stage-section--done{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.stage-done-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px 0 14px;border-radius:var(--r-lg);list-style:none;cursor:pointer;transition:background-color var(--dur-2) var(--ease-out)}
.stage-done-row::-webkit-details-marker{display:none}
.stage-done-row:hover{background:var(--gray-25)}
.stage-done-row .uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring)}
.stage-done-row__title{font:600 15px/22px var(--font-sans);color:var(--text-1)}
.stage-done-row__meta{display:inline-flex;align-items:center;gap:6px;flex:1;font:500 13px/18px var(--font-sans);color:var(--green-700)}
.stage-done-row__meta .uk-icon{color:var(--green-500)}
.stage-done-row__toggle{font:500 13px/18px var(--font-sans);color:var(--text-2)}
.stage-done-row__toggle::before{content:attr(data-show)}
.stage-section--done[open] .stage-done-row__toggle::before{content:attr(data-hide)}
.stage-done-row__chev{color:var(--text-3);transition:transform var(--dur-2) var(--ease-out)}
.stage-section--done[open] .stage-done-row__chev{transform:rotate(180deg)}
.stage-section--done>.lesson-grid{padding:4px 12px 12px}
.stage-section--done+.stage-section--done{margin-top:-24px}
.stage-section--done .lesson-card{box-shadow:none}

/* -------------------------------------------------------------- stage page */
.stage-hero{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;align-items:start;padding-top:8px}
.stage-hero>.uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring),0 8px 20px -10px rgba(24,24,27,.3)}
.stage-hero__text{min-width:0}
.stage-hero__meters{display:grid;grid-template-columns:minmax(0,320px) auto;align-items:center;gap:24px;margin-top:18px}
.stage-hero__stat{display:inline-flex;align-items:center;gap:10px;font:500 13px/18px var(--font-sans);color:var(--text-2)}
.stage-hero__promise{margin:16px 0 0;max-width:640px;padding-left:12px;border-left:2px solid var(--green-100);font:400 14px/22px var(--font-sans);color:var(--text-3);text-wrap:pretty}
.stage-page .uk-tabs{margin-bottom:-12px}
.tab-label--short{display:none}
.stage-panels{min-width:0}
.stage-panels .uk-tabpanel:focus-visible{outline:2px solid var(--green-600);outline-offset:4px;border-radius:var(--r-sm)}
.finish-card{padding:20px 24px 12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);max-width:760px}
.finish-card__lead{margin:0 0 8px;font:500 13px/18px var(--font-sans);color:var(--text-3)}
.stage-neighbours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-top:8px;border-top:1px solid var(--border)}
.stage-neighbour{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.stage-neighbour:hover{border-color:var(--border-strong);background:var(--gray-25)}
.stage-neighbour>span{display:flex;flex-direction:column;min-width:0}
.stage-neighbour--next{justify-content:flex-end;text-align:right}
.stage-neighbour__label{font:500 12px/16px var(--font-sans);color:var(--text-3)}
.stage-neighbour__title{font:600 15px/22px var(--font-sans);color:var(--text-1)}
.stage-neighbour__arrow{color:var(--text-3)}
.stage-neighbour .uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring)}

/* ------------------------------------------------------------- action plan */
.toolbar{position:sticky;top:var(--sticky-top);z-index:5;display:flex;flex-direction:column;gap:10px;margin:-16px -8px -12px;padding:12px 8px;background:var(--bg);box-shadow:0 1px 0 transparent;transition:box-shadow var(--dur-3) var(--ease-out)}
.toolbar.is-stuck{box-shadow:0 1px 0 var(--border)}
.actions-page{container-type:inline-size}
.toolbar__row{display:flex;align-items:center;gap:10px;min-width:0}
.toolbar__row--chips{justify-content:space-between;gap:12px}
.toolbar__row--chips>.uk-chips:first-child{flex:1;min-width:0}
.toolbar__search{flex:1;min-width:200px}
.toolbar .uk-seg{flex:none}
.toolbar__segs{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.actions-page .results-line{margin-top:-8px}
@container (max-width:900px){
  .toolbar__row{flex-wrap:wrap}
  .toolbar__search{flex:1 1 100%}
  .toolbar__segs{flex:1 1 100%;justify-content:space-between}
  .toolbar__row--chips{align-items:flex-start;justify-content:flex-start}
  .toolbar__row--chips>#action-ready{order:-1;flex:none}
}
#action-results{display:flex;flex-direction:column;gap:24px}
.action-group{display:flex;flex-direction:column;gap:8px}
.action-group .group-head{position:sticky;top:calc(var(--sticky-top) + var(--toolbar-h, 88px));z-index:3;margin:0 -8px;padding:0 8px;background:var(--bg)}
.action-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden}
/* A new-flow stage page: the actions after day 90 follow under their own heading (src/app.js). */
.stage-actions__later{margin:24px 0 10px;font:600 15px/1.4 var(--font-sans,inherit);letter-spacing:-.006em;color:var(--text-2)}
.action-row{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 8px 10px 14px;transition:background-color var(--dur-2) var(--ease-out)}
.action-row+.action-row{box-shadow:inset 0 1px 0 var(--border)}
.action-row:hover{background:var(--gray-25)}
.action-row__link{position:absolute;inset:0;z-index:0}
.action-row__link:focus-visible{outline:2px solid var(--green-600);outline-offset:-2px;border-radius:var(--r-lg)}
.action-row>:not(.action-row__link){position:relative;z-index:1;pointer-events:none}
.action-row a,.action-row button,.action-row [data-tip]{pointer-events:auto}
.action-row__state{display:grid;place-items:center;flex:none;width:28px;height:28px}
.action-row__ring .uk-ring__track{stroke:var(--gray-200)}
.action-row__id{flex:none;width:40px;font:500 12px/16px var(--font-mono);color:var(--text-3)}
.action-row__main{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}
.action-row__title{font:600 15px/22px var(--font-sans);letter-spacing:-.006em;color:var(--text-1)}
.action-row[data-state=done] .action-row__title{color:var(--text-2)}
.action-row__chips{display:flex;flex-wrap:wrap;gap:6px}
.action-row__end{display:flex;align-items:center;gap:2px;flex:none}
.action-row__chev{color:var(--gray-400)}
.ref-chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:var(--r-xs);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2);font:500 12px/16px var(--font-sans);text-decoration:none;white-space:nowrap;transition:box-shadow var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.ref-chip:hover{box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text-1)}
.ref-chip .uk-icon{color:var(--text-3)}
.ref-chip.is-done{color:var(--green-700)}
.ref-chip.is-done .uk-icon{color:var(--green-500)}

/* ------------------------------------------------------------------ library */
.library-page{gap:24px}
.library-toolbar{display:flex;flex-direction:column;gap:16px}
.library-toolbar[hidden]{display:none}
.library-tabs .uk-tabs__count{font-variant-numeric:tabular-nums}
.library-page .uk-tabpanel{display:flex;flex-direction:column;gap:24px;min-width:0}
.library-page .uk-tabpanel[hidden]{display:none}
.library-results{display:flex;flex-direction:column;gap:28px;min-width:0}
.library-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.library-question{margin:0 0 -8px;font:var(--t-h3);letter-spacing:-.01em;color:var(--text-1)}
.library-list{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden}
.library-item{position:relative;display:flex;align-items:center;min-width:0}
.library-item+.library-item{box-shadow:inset 0 1px 0 var(--border)}
.library-row{display:flex;flex:1;align-items:center;gap:14px;min-width:0;min-height:64px;padding:10px 52px 10px 14px;color:inherit;text-decoration:none;transition:background-color var(--dur-2) var(--ease-out)}
.library-row:hover{background:var(--gray-25)}
.library-row:focus-visible{outline-offset:-2px;border-radius:var(--r-lg)}
.library-row__icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2)}
.library-row__icon--playbook{color:var(--warning-text);background:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-border)}
.library-row__icon--lesson{color:var(--green-700);background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green-100)}
.library-row__text{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}
.library-row__title{display:block;font:600 15px/22px var(--font-sans);letter-spacing:-.006em;color:var(--text-1);text-wrap:pretty}
.library-row__title mark,.palette__title mark{margin:0}
.library-row__summary{font:400 13px/18px var(--font-sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-row__stage{flex:none;font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap}
.library-item>.bookmark-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.best-chip{display:inline-flex;align-items:center;vertical-align:1px;height:20px;margin-right:8px;padding:0 7px;border-radius:var(--r-full);background:var(--green-50);color:var(--green-700);font:600 11px/14px var(--font-sans);letter-spacing:.01em;white-space:nowrap}
.show-all{appearance:none;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin:0;padding:4px 6px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--link);font:500 13px/18px var(--font-sans);cursor:pointer}
.show-all:hover{background:var(--green-50)}
.library-more{display:flex;flex-direction:column;gap:8px;min-width:0}
.library-more__summary{list-style:none}
.library-more__summary::-webkit-details-marker{display:none}
.library-more__chev{transition:transform var(--dur-2) var(--ease-out)}
.library-more[open] .library-more__chev{transform:rotate(180deg)}
.library-toolbar .library-chips{display:none}

/* ------------------------------------------------------------- reading panel */
dialog#reader{position:fixed;inset:12px 12px 12px auto;box-sizing:border-box;display:flex;flex-direction:column;width:min(960px,calc(100vw - 280px));height:calc(100dvh - 24px);max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:var(--r-xl);background:var(--surface);color:var(--text-1);box-shadow:var(--shadow-sheet);overflow:hidden}
dialog#reader:not([open]){display:none}
dialog#reader::backdrop{background:var(--backdrop-reader);animation:uk-fade-in var(--dur-3) var(--ease-out)}
dialog#reader[open]{animation:reader-in 220ms var(--ease-out)}
@keyframes reader-in{from{opacity:0;transform:translateX(24px)}}
@keyframes reader-in-phone{from{transform:translateX(100%)}}
.reader__bar{display:flex;align-items:center;gap:4px;flex:none;height:52px;padding:0 8px 0 12px;box-shadow:inset 0 -1px 0 transparent;transition:box-shadow var(--dur-3) var(--ease-out)}
dialog#reader[data-scrolled] .reader__bar{box-shadow:inset 0 -1px 0 var(--border)}
.reader__back[hidden]{display:none}
.reader__crumbs{display:flex;flex:1;align-items:center;gap:6px;min-width:0;padding-left:4px;overflow:hidden;white-space:nowrap}
.reader__kind{display:inline-flex;align-items:center;flex:none;height:24px;padding:0 8px;border-radius:var(--r-xs);background:var(--gray-100);color:var(--text-2);font:600 12px/16px var(--font-sans)}
.reader__trail{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;font:500 13px/18px var(--font-sans);color:var(--text-3)}
.reader__trail span{overflow:hidden;text-overflow:ellipsis}
.reader__sep{flex:none;color:var(--gray-400)}
.reader__bar-title{display:none}
.reader__tools{display:flex;align-items:center;gap:2px;flex:none}
.reader__nav:disabled{opacity:.35}
.reader__divider{width:1px;height:20px;margin:0 6px;background:var(--border)}
.reader__save{color:var(--text-2)}
.reader__save[aria-pressed=true]{color:var(--green-700)}
.reader__save[aria-pressed=true] .uk-icon{color:var(--green-600)}
.reader__notion{margin:0 6px}
.reader__scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;container:reader/inline-size}
.reader__page{box-sizing:border-box;padding:24px 40px 56px}
.reader__page.is-entering{animation:uk-rise 180ms var(--ease-out)}
.reader__head{max-width:680px}
.reader__eyebrow{margin:0 0 8px;font:500 13px/18px var(--font-sans);color:var(--link)}
.reader__title{margin:0;font:var(--t-reader-title);letter-spacing:-.022em;font-variation-settings:"opsz" 32;color:var(--text-1);text-wrap:balance}
.reader__title:focus{outline:none}
.reader__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:12px 0 0;font:500 13px/18px var(--font-sans);color:var(--text-3)}
.reader__meta-item{display:inline-flex;align-items:center;white-space:nowrap}
.reader__meta-item+.reader__meta-item::before{content:"";flex:none;width:3px;height:3px;margin:0 8px;border-radius:var(--r-full);background:var(--gray-400)}
.reader__meta-item.is-line-start::before{display:none}
.meta-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-full);background:var(--gray-100);color:var(--text-2);font:600 12px/16px var(--font-sans)}
.reader__layout{display:grid;grid-template-columns:minmax(0,680px) 176px;justify-content:space-between;gap:32px;margin-top:28px}
.reader__side{min-width:0}
.reader__side.is-empty{visibility:hidden}
.reader__side-inner{position:sticky;top:8px;display:flex;flex-direction:column;gap:8px}
.reader__side-title{margin:0 0 2px;font:600 12px/16px var(--font-sans);color:var(--text-3)}
#reader-toc{display:flex;flex-direction:column;box-shadow:inset 1px 0 0 var(--border)}
#reader-toc:empty{display:none}
#reader-toc a{padding:5px 0 5px 12px;border-left:2px solid transparent;color:var(--text-3);font:500 13px/18px var(--font-sans);text-decoration:none;text-wrap:pretty;transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
#reader-toc a:hover{color:var(--text-1)}
#reader-toc a.is-active{border-left-color:var(--green-500);color:var(--text-1)}
.checklist-card{margin-top:16px;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.checklist-card .uk-meter__label,.checklist-card .uk-meter__value{font-size:12px}
@container reader (max-width:860px){
  .reader__layout{grid-template-columns:minmax(0,1fr)}
  .reader__side{display:none}
}

/* article */
.document{min-width:0;font:var(--t-reading);letter-spacing:-.004em;color:var(--text-1);overflow-wrap:anywhere}
.document>:first-child{margin-top:0}
.document p{margin:0 0 16px;font:inherit;line-height:26px}
.document h2{margin:40px 0 12px;font:var(--t-h2);letter-spacing:-.015em;font-variation-settings:"opsz" 32;color:var(--text-1);scroll-margin-top:16px}
.document h3{margin:28px 0 8px;font:600 18px/26px var(--font-sans);letter-spacing:-.01em;color:var(--text-1);scroll-margin-top:16px}
.document ul,.document ol{margin:0 0 16px;padding-left:24px}
.document li{margin:6px 0;padding-left:2px}
.document li::marker{color:var(--text-3)}
.document a{color:var(--link);text-decoration:underline;text-decoration-color:var(--green-200);text-decoration-thickness:1px;text-underline-offset:3px}
.document a:hover{text-decoration-color:currentColor}
.document strong{font-weight:600}
.document code{padding:1px 5px;border-radius:var(--r-xs);background:var(--gray-100);font:450 14px/20px var(--font-mono)}
.document hr{height:1px;margin:32px 0;border:0;background:var(--border)}
.document details{margin:0 0 16px;border:1px solid var(--border);border-radius:var(--r-md)}
.document details summary{padding:10px 14px;font:600 15px/22px var(--font-sans);cursor:pointer}
.document details>:not(summary){margin-left:14px;margin-right:14px}
.table-scroll{max-width:100%;margin:0 0 16px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.document table{width:100%;border-collapse:collapse;font:400 14px/20px var(--font-sans)}
.document th,.document td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.document th{background:var(--gray-50);font-weight:600}
.document tr:last-child td{border-bottom:0}
.code-block{position:relative;margin:0 0 16px}
.document pre{margin:0;padding:16px 88px 16px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--gray-50);overflow:auto;white-space:pre-wrap;font:450 13px/21px var(--font-mono)}
.document pre code{padding:0;background:none;font:inherit}
.copy-button{position:absolute;top:8px;right:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border),var(--shadow-xs);color:var(--text-2)}
.copy-button:hover{background:var(--gray-25);color:var(--text-1)}
.copy-button.is-copied{color:var(--green-700)}
.callout{position:relative;margin:0 0 20px;padding:14px 16px 14px 44px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken)}
.callout__icon{position:absolute;top:17px;left:16px;display:flex;color:var(--text-3)}
.callout>p,.callout .callout__body>p{font-size:15px;line-height:24px}
.callout>:last-child,.callout .callout__body>:last-child{margin-bottom:0}
.callout ul{margin-bottom:0}
.callout h2{margin:0 0 6px;font:600 16px/24px var(--font-sans);letter-spacing:-.006em}
.callout--review{background:var(--green-50);border-color:var(--green-100)}
.callout--review .callout__icon{color:var(--green-600)}
.doc-figure{margin:24px 0}
.doc-figure a{display:block;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--gray-50);cursor:zoom-in}
.doc-figure img{display:block;width:100%;height:auto;transition:transform var(--dur-4) var(--ease-out)}
.doc-figure a:hover img{transform:scale(1.01)}
.doc-figure figcaption{margin-top:8px;font:500 12px/16px var(--font-sans);color:var(--text-3)}
.section-meter{display:inline-flex;align-items:center;height:22px;margin-left:8px;padding:0 8px;border-radius:var(--r-full);background:var(--gray-100);color:var(--text-2);font:600 12px/16px var(--font-sans);letter-spacing:0;vertical-align:4px;font-variant-numeric:tabular-nums}
.section-meter.is-done{background:var(--green-50);color:var(--green-700)}
.document .uk-checklist{margin:0 -10px 16px;padding:0}
.document .uk-check-row{margin:2px 0;padding:0}
.document .uk-check-row>button{font:400 16px/24px var(--font-sans);letter-spacing:-.004em}
.uk-check-row__links{margin:-4px 0 6px 42px!important;font-size:14px!important;line-height:20px!important}
.document--inline{max-width:760px}
.document--compact .uk-checklist{margin-bottom:8px}

/* New flow: an action we do (src/course-build.mjs) reads as ours, with one link to it; no checkboxes. */
.reader-built{margin:0 0 28px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken)}
.reader-built p{margin:0 0 10px}.reader-built p:last-child{margin-bottom:0}
/* A long link label on a plan client's banner wraps inside its card on a phone (tierfix 27 Oct: "Create content that helps
   customers decide" ran past the right edge at 390 px). */
.is-new-flow .reader-built .uk-btn{max-width:100%;height:auto;min-height:44px;white-space:normal;text-align:left}
.is-new-flow .reader-built .uk-btn__label{white-space:normal;overflow-wrap:anywhere}
.reader-prereqs{margin:0 0 28px;padding:14px 16px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken)}
.reader-prereqs__title{margin:0;font:600 15px/22px var(--font-sans);color:var(--text-1)}
.reader-prereqs__lead{margin:0 0 8px;font:500 13px/18px var(--font-sans);color:var(--text-3)}
.reader-prereqs__list{display:flex;flex-direction:column}
.document .prereq{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 8px;margin:0 -8px;border-radius:var(--r-sm);color:var(--text-1);text-decoration:none}
.document .prereq:hover{background:var(--hover)}
.prereq .uk-icon{flex:none;color:var(--text-3)}
.prereq.is-done .uk-icon{color:var(--green-500)}
.prereq__id{flex:none;width:40px;font:500 12px/16px var(--font-mono);color:var(--text-3)}
.prereq__title{font:500 14px/20px var(--font-sans)}

.reading-next{display:flex;flex-direction:column;gap:12px;max-width:680px;margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
.reading-next__card{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.reading-next__card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-raised);transform:translateY(-1px)}
.reading-next__card .uk-stage-art{box-shadow:0 0 0 1px var(--plate-ring)}
.reading-next__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2)}
.reading-next__text{display:flex;flex:1;flex-direction:column;min-width:0}
.reading-next__label{font:500 12px/16px var(--font-sans);color:var(--text-3)}
.reading-next strong{font:600 16px/24px var(--font-sans);letter-spacing:-.006em;color:var(--text-1)}
.reading-next__meta{font:500 12px/16px var(--font-sans);color:var(--text-3)}
.reading-next__arrow{flex:none;color:var(--text-3)}
.reading-next__actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.reading-next__actions [hidden]{display:none}
.reader__toolbar{display:none}
.contents-list{display:flex;flex-direction:column}
.contents-list a{display:flex;align-items:center;min-height:44px;padding:0 4px;border-bottom:1px solid var(--border);color:var(--text-1);font:500 15px/20px var(--font-sans);text-decoration:none}
.lightbox .uk-sheet__body{padding:0 20px 20px}
.lightbox__img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r-md)}

@media (min-width:768px) and (max-width:1199px){dialog#reader{width:calc(100vw - 88px)}}
@media (max-width:767px){
  dialog#reader{inset:0;width:100%;height:100dvh;border-radius:0}
  dialog#reader[open]{animation:reader-in-phone 280ms var(--ease-out)}
  .reader__bar{height:52px;padding:0 4px}
  .reader__nav,.reader__divider,.reader__save,.reader__notion .uk-btn__label,.reader__trail{display:none}
  .reader__notion{width:36px;padding:0;margin:0}
  .reader__bar-title{display:block;position:absolute;left:56px;right:96px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font:600 16px/22px var(--font-sans);letter-spacing:-.01em;color:var(--text-1);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  .reader__kind{transition:opacity var(--dur-2) var(--ease-out)}
  dialog#reader[data-title-hidden] .reader__bar-title{opacity:1;transform:none}
  dialog#reader[data-title-hidden] .reader__kind{opacity:0}
  .reader__bar{position:relative}
  .reader__page{padding:12px 16px 32px}
  .reader__layout{grid-template-columns:minmax(0,1fr);margin-top:20px}
  .reader__side{display:none}
  .document pre{padding-right:16px;padding-top:44px}
  .reader__toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--frost-bg);-webkit-backdrop-filter:var(--frost-filter);backdrop-filter:var(--frost-filter);box-shadow:inset 0 1px 0 var(--frost-border)}
  .reader-tool{appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;margin:0;padding:0;border:0;background:transparent;color:var(--text-2);font:600 11px/14px var(--font-sans);letter-spacing:.01em;cursor:pointer}
  .reader-tool:disabled{opacity:.35}
  /* display:flex above outranks the hidden attribute, so a hidden paging tool still took a cell and the two-column bar
     wrapped Save and Next below the screen. A hidden tool takes no cell. */
  .reader-tool[hidden]{display:none}
  /* On a page that is not a step in a sequence the two paging tools are hidden, so the bar becomes two columns. */
  .reader__toolbar[data-sequenced=false]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reader-tool[aria-pressed=true]{color:var(--green-700)}
  .reading-next__actions{justify-content:stretch}
}
@media (prefers-reduced-motion:reduce){
  dialog#reader[open],.reader__page.is-entering{animation:uk-fade-in 120ms linear}
  .stage-rail__link:hover .stage-rail__art,.reading-next__card:hover,.lesson-card:hover .lesson-card__chev{transform:none}
}

/* ------------------------------------------------------------- command palette */
dialog.palette{display:flex;flex-direction:column;max-height:min(560px,calc(100dvh - 24vh));margin:12vh auto auto;padding:0}
dialog.palette:not([open]){display:none}
.palette__field{display:flex;align-items:center;gap:10px;flex:none;height:56px;padding:0 10px 0 18px;box-shadow:inset 0 -1px 0 var(--frost-border)}
.palette__icon{flex:none;color:var(--text-3)}
.palette__field input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--text-1);font:var(--t-input);letter-spacing:-.01em;outline:none}
.palette__field input::placeholder{color:var(--text-placeholder)}
.palette__field input:focus,.palette__field input:focus-visible{outline:none;box-shadow:none}
.palette__field:focus-within .palette__icon{color:var(--text-2)}
.palette__close{appearance:none;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-3);cursor:pointer}
.palette__close:hover{background:var(--hover);color:var(--text-1)}
.palette__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.palette__list{margin:0;padding:0;list-style:none}
.palette__group{padding:10px 10px 4px;font:600 12px/16px var(--font-sans);color:var(--text-3)}
.palette__option{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:var(--r-md);cursor:pointer}
.palette__option[aria-selected=true]{background:rgba(24,24,27,.06)}
.palette__lead{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2)}
.palette__lead .uk-stage-art{width:20px;height:20px}
.palette__text{display:flex;flex:1;flex-direction:column;min-width:0}
.palette__title{font:500 14px/20px var(--font-sans);color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette__meta{font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette__hint{flex:none;font:500 12px/16px var(--font-sans);color:var(--text-3)}
.palette__option[aria-selected=true] .palette__hint{color:var(--text-2)}
.palette__empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 16px;color:var(--text-3);font:500 14px/20px var(--font-sans)}
.palette__foot{display:flex;flex:none;gap:16px;padding:8px 16px;box-shadow:inset 0 1px 0 var(--frost-border);font:500 12px/16px var(--font-sans);color:var(--text-3)}
.palette__foot span{display:inline-flex;align-items:center;gap:4px}
@media (max-width:767px){
  dialog.palette{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;background:var(--surface)}
  .palette__foot{display:none}
  .palette__option{min-height:52px}
}

/* ---------------------------------------------------------------- help sheet */
.help-sheet{display:flex;flex-direction:column;gap:24px}
.help-block__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.help-block__title{margin:0 0 8px;font:600 14px/20px var(--font-sans);color:var(--text-1)}
.help-block__head .help-block__title{margin:0}
.help-block__link{display:inline-flex;align-items:center;gap:4px;color:var(--link);font:500 13px/18px var(--font-sans);text-decoration:none}
.help-block__empty{margin:0;padding:12px 14px;border:1px dashed var(--border-strong);border-radius:var(--r-md);font:400 14px/20px var(--font-sans);color:var(--text-3)}
.help-question{box-sizing:border-box;display:block;width:100%;min-height:194px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-xs);color:var(--text-1);font:400 16px/24px var(--font-sans);resize:none}
.help-question:focus-visible{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px var(--focus-ring)}
.help-block__actions{display:flex;justify-content:flex-end;margin-top:10px}
.help-steps,.help-rows{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.help-step,.help-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;color:var(--text-1);text-decoration:none;transition:background-color var(--dur-2) var(--ease-out)}
.help-step+.help-step,.help-row+.help-row{box-shadow:inset 0 1px 0 var(--border)}
.help-step:hover,.help-row:hover{background:var(--gray-25)}
.help-step__num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--r-full);background:var(--gray-100);color:var(--text-2);font:600 12px/1 var(--font-sans)}
.help-step__label,.help-row__label{font:500 14px/20px var(--font-sans)}
.help-step__label{flex:1}
.help-row__icon{flex:none;color:var(--text-3)}
.help-row__text{display:flex;flex:1;flex-direction:column;min-width:0}
.help-row__desc{font:400 13px/18px var(--font-sans);color:var(--text-3)}
.help-row__chev{flex:none;color:var(--gray-400)}
/* A destination the owner has not filled in yet: a named slot, not a link and not an instruction. */
.help-row--slot{background:var(--surface-sunken);cursor:default}
.help-row--slot .help-row__label{color:var(--text-2)}
.help-prompt{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken);font:400 14px/22px var(--font-sans);color:var(--text-2)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1199px){
  .next-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next-row>:last-child{grid-column:1/-1}
  .stage-section__head{grid-template-columns:auto minmax(0,1fr) auto}
  .stage-section__meter{grid-column:2/-1;grid-row:2}
}
@media (max-width:900px){
  .lesson-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .page{gap:24px}
  .page-header{align-items:flex-start;flex-direction:column;gap:16px;padding-top:4px}
  .page-header__title{font-size:28px;line-height:34px}
  .course-ring{padding:6px 14px 6px 6px}
  .course-ring .uk-ring{width:36px;height:36px}
  .next-row{grid-template-columns:minmax(0,1fr)}
  .next-row>:last-child{grid-column:auto}
  .stage-rail-card{margin:0 -16px;padding:16px 0 12px;border-width:1px 0;border-radius:0;box-shadow:none}
  .stage-rail-card__head{flex-direction:column;gap:2px;margin:0 16px 16px}
  .stage-rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:16px}
  .stage-rail::-webkit-scrollbar{display:none}
  .stage-rail__list{grid-template-columns:repeat(6,136px);width:max-content;padding:0 16px}
  .stage-rail__track{left:84px;right:auto;width:680px}
  .stage-rail__meta{display:flex;flex-direction:column;align-items:center}
  .stage-rail__meta .stage-rail__sep{display:none}
  .stage-rail__num{letter-spacing:-.01em}
  .stage-rail__step{scroll-snap-align:start}
  .day-scale{margin:16px 16px 0;padding-top:14px}
  .stage-section__head{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .stage-section__titles{grid-column:2/-1}
  .stage-section__desc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .stage-section__meter{grid-column:1/3;grid-row:2}
  .stage-section__open{grid-column:3;grid-row:2;align-self:end;justify-self:end;height:28px;margin:0 -6px -6px 0;padding:0 4px 0 8px;font-size:13px}
  .stage-done-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"art title chev" "art meta chev";column-gap:12px;row-gap:0;min-height:60px;padding:10px 14px}
  .stage-done-row>.uk-stage-art{grid-area:art}
  .stage-done-row__title{grid-area:title}
  .stage-done-row__meta{grid-area:meta;font-size:12px;line-height:16px}
  .stage-done-row__toggle{display:none}
  .stage-done-row__chev{grid-area:chev}
  .stage-page .uk-tabs--underline{gap:0;padding-inline:4px;scroll-padding-inline:4px}
  .stage-hero{grid-template-columns:minmax(0,1fr);gap:16px}
  .stage-hero>.uk-stage-art{--size:56px!important}
  .stage-hero__meters{grid-template-columns:minmax(0,1fr);gap:12px}
  .stage-neighbours{grid-template-columns:minmax(0,1fr)}
  .stage-neighbour--next{justify-content:flex-start;text-align:left}
  .stage-neighbour--next .stage-neighbour__arrow{margin-left:auto}
  .toolbar{top:var(--sticky-top);margin:-12px -16px -8px;padding:10px 16px}
  .toolbar__row{flex-wrap:wrap;gap:8px}
  .toolbar__search{flex-basis:100%}
  /* Each segmented control takes its own line. The view control used to sit off the right edge of a phone, reachable
     only by swiping a masked scroller; now it is on screen, and only the three-option plan control still scrolls,
     and only where it cannot fit (320). */
  .toolbar__segs{flex:1 1 100%;flex-wrap:wrap;gap:8px;overflow:visible}
  .toolbar__segs>.uk-seg{flex:1 1 100%;min-width:0}
  .toolbar__segs>#action-track{position:relative;margin:0 -16px;padding:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,black 16px,black calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,black 16px,black calc(100% - 24px),transparent)}
  .toolbar__segs>#action-track::-webkit-scrollbar{display:none}
  .toolbar__segs>#action-view .uk-seg__track{display:flex;width:100%}
  .toolbar__segs>#action-view .uk-seg__item{flex:1 1 0}
  .toolbar__row--chips{flex-wrap:nowrap;overflow:hidden;gap:8px}
  .toolbar__row--chips>#action-ready{order:-1;flex:none}
  .action-row{align-items:flex-start;padding:12px 4px 12px 12px}
  .action-row__state{margin-top:-3px}
  .action-row__id{display:none}
  .action-row__chev{display:none}
  .library-toolbar .library-tabs{display:none}
  .library-toolbar .library-chips{display:flex}
  .tab-label--long{display:none}
  .tab-label--short{display:inline}
  .library-row{padding-right:48px;min-height:60px}
  .library-row__stage{display:none}
  .library-row__icon{width:28px;height:28px}
}
@media (max-width:380px){
  /* Tighter cells so all three plan labels read in full on the narrowest phone. */
  .toolbar__segs>#action-track .uk-seg__item{padding:0 6px;gap:4px}
  .toolbar__segs>#action-track .uk-seg__count{min-width:16px;padding:0 4px}
  .next-card{padding:16px}
  .lesson-card{padding:10px 8px 10px 10px;gap:10px}
}

/* A lesson card's plan tag sits on its own line under the title (fix round 4: the phone Roadmap). */
.lesson-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
/* A plan tag can be a full sentence (the client's goal, who replies): it wraps inside the row instead of running off a
   phone screen (fix round 4). */
.action-row__chips .soft-chip[data-tag]{height:auto;min-height:22px;padding:3px 8px;white-space:normal;flex:0 1 auto;max-width:100%}

/* A plan client's check that waits on something we send (src/app.js WAITING_CHECKS): it reads as waiting, not ready. */
.uk-check-row>button[data-waiting]{flex-wrap:wrap;cursor:default}
.uk-check-row>button[data-waiting] .uk-check-box{opacity:.4}
.uk-check-row>button[data-waiting]>span:not(.uk-check-box){flex:1 1 0%;min-width:0}
.uk-check-row>button[data-waiting]::after{content:attr(data-waiting);flex-basis:100%;padding-left:32px;margin-top:-6px;font:400 13px/18px var(--font-sans);color:var(--text-3)}