/* bio Learning on the public website (docs/73 §14): /learning. Built on site.css tokens, so light and dark follow the
   scheme of the site. Cards scroll sideways in rows on the home view and wrap in a grid in search; the course page is
   two columns with the action card pinned on wide screens and first on a phone. */

/* ---- hero and search ---- */
.lr-hero .copy{max-width:860px; gap:18px}
.lr-hero h1{font-size:clamp(32px,4.6vw,56px)}
.lr-search{display:flex; gap:10px; max-width:640px; margin-top:6px}
.lr-search input{flex:1; min-width:0; min-height:52px; padding:12px 20px; border-radius:999px; border:1px solid #3A4944; background:rgba(255,255,255,.06);
  color:var(--night-ink); font:inherit; font-size:17px}
.lr-search input::placeholder{color:var(--night-muted)}
.lr-search input:focus-visible{outline:3px solid var(--night-accent); outline-offset:2px; border-radius:999px}
.lr-search .btn{min-height:52px; flex:none}
/* Past the home view the hero steps back: the course, path or results are the page. */
html.lr-deep .lr-hero{padding-block:22px 20px}
html.lr-deep .lr-hero h1,html.lr-deep .lr-hero .lede,html.lr-deep .lr-hero .eyebrow{display:none}
html.lr-deep .lr-search{margin-top:0}

/* ---- tabs and account ---- */
.lr-bar{position:sticky; top:calc(var(--header-h) + env(safe-area-inset-top,0px)); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.lr-bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px}
.lr-tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-inline:-8px; padding-inline:8px}
.lr-tabs::-webkit-scrollbar{display:none}
.lr-tabs a{flex:none; padding:16px 12px; font-weight:600; font-size:15.5px; color:var(--ink-2); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap}
.lr-tabs a:hover{color:var(--ink)}
.lr-tabs a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--primary)}
.lr-account{display:flex; align-items:center; gap:10px; flex:none; font-size:15px}
.lr-account img{width:30px; height:30px; border-radius:50%; object-fit:cover}
.lr-who{font-weight:600; max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lr-link{background:none; border:0; padding:6px 2px; font:inherit; font-size:14.5px; color:var(--link); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ---- shared pieces ---- */
.lr-main{padding-top:clamp(22px,3vw,36px)}
.lr-main .wrap{min-height:50vh}
.lr-empty{padding:36px 0; color:var(--muted); text-align:center}
.lr-count{color:var(--ink-2); margin:0 0 14px}
.lr-head{display:flex; flex-direction:column; gap:8px; margin-bottom:22px; max-width:760px}
.lr-head h2{font-size:clamp(26px,3vw,38px)}
.lr-head p{margin:0}
.lr-crumb{font-size:14.5px; color:var(--muted); margin:0 0 14px}
.lr-crumb a{color:inherit}
.lr-section{margin-top:clamp(30px,4vw,48px)}
.lr-section[id]{scroll-margin-top:calc(var(--header-h) + 72px)}
.lr-section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px}
.lr-section-head h3{font-size:clamp(20px,2vw,26px)}
.lr-section-head .link-arrow{font-size:15px; white-space:nowrap}
.lr-badge{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:var(--card-2); color:var(--ink-2); font:600 11.5px/1.5 var(--body); letter-spacing:.01em; text-transform:none; margin-left:8px}
.lr-badge.done{background:var(--primary-soft); color:var(--on-primary-soft)}
.lr-badge.doing{background:var(--c-amber); color:var(--o-amber)}
.lr-box{background:var(--card); border-radius:var(--r); padding:18px 20px; display:flex; flex-direction:column; gap:10px}
.lr-box p{margin:0}
.lr-progress{display:block; height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:4px}
.lr-progress i{display:block; height:100%; background:var(--primary); border-radius:999px}
.lr-chips{display:flex; flex-wrap:wrap; gap:8px}
.lr-chip{display:inline-flex; align-items:center; min-height:38px; padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font:500 14.5px/1.2 var(--body); text-decoration:none; cursor:pointer}
.lr-chip:hover{border-color:var(--ink-2); text-decoration:none}
.lr-chip[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.lr-topics{margin-bottom:18px}
.lr-invite{flex-direction:row; align-items:center; justify-content:space-between; gap:16px; margin-top:6px}
.lr-invite > div{display:flex; flex-direction:column; gap:4px}
.lr-invite .btn{flex:none}
.lr-gate{align-items:flex-start; max-width:620px}
.lr-signed{margin-top:28px}

/* ---- course cards ---- */
.lr-row{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,285px); gap:16px; overflow-x:auto; padding:4px 2px 14px; margin-inline:-2px;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.lr-row > *{scroll-snap-align:start}
.lr-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.lr-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; color:var(--ink); text-decoration:none;
  transition:border-color .15s ease, transform .15s ease}
.lr-card:hover{border-color:var(--line-2); transform:translateY(-2px); text-decoration:none}
.lr-card:focus-visible{outline-offset:2px; border-radius:var(--r)}
.lr-cover{position:relative; display:flex; align-items:flex-end; aspect-ratio:16/9; padding:12px 14px; overflow:hidden; flex:none}
.lr-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lr-cover-word{font:700 17px/1.15 var(--display); letter-spacing:-.01em; max-width:90%}
.lr-t-teal{background:var(--c-teal); color:var(--o-teal)} .lr-t-blue{background:var(--c-blue); color:var(--o-blue)}
.lr-t-amber{background:var(--c-amber); color:var(--o-amber)} .lr-t-purple{background:var(--c-purple); color:var(--o-purple)}
.lr-t-green{background:var(--c-green); color:var(--o-green)} .lr-t-pink{background:var(--c-pink); color:var(--o-pink)}
.lr-t-slate{background:var(--c-slate); color:var(--o-slate)} .lr-t-orange{background:var(--c-orange); color:var(--o-orange)}
.lr-card-body{display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; flex:1; min-width:0}
.lr-prov{display:flex; align-items:center; flex-wrap:wrap; row-gap:4px; font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.lr-title{font:700 17px/1.25 var(--display); letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lr-by{font-size:14px; color:var(--ink-2)}
.lr-reason{font-size:13.5px; color:var(--link); font-weight:500}
.lr-desc{font-size:14.5px; line-height:1.45; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lr-meta{display:block; font-size:13.5px; color:var(--muted)}
.lr-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; font-size:14px}
.lr-rating{white-space:nowrap; font-weight:600}
.lr-rating > span[aria-hidden]{color:#C98A00}
/* List layout: the cover beside the text. */
.lr-grid.list{grid-template-columns:minmax(0,1fr)}
.lr-grid.list .lr-card{flex-direction:row}
.lr-grid.list .lr-cover{width:clamp(120px,24vw,240px); aspect-ratio:auto; min-height:120px}
.lr-grid.list .lr-desc{-webkit-line-clamp:3}

/* ---- paths and lines ---- */
.lr-paths{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.lr-path{display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:var(--r); text-decoration:none; transition:transform .15s ease}
.lr-path:hover{transform:translateY(-2px); text-decoration:none}
.lr-path b{font:700 19px/1.2 var(--display); letter-spacing:-.01em}
.lr-path .lr-desc,.lr-path .lr-meta{color:inherit; opacity:.86}
.lr-path .lr-desc{-webkit-line-clamp:3}
.lr-path .lr-progress{background:rgba(0,0,0,.14)}
.lr-path .lr-progress i{background:currentColor}
.lr-lines{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.lr-line{display:flex; gap:14px; padding:14px 18px; border-top:1px solid var(--line)}
.lr-line:first-child{border-top:0}
.lr-line > div{display:flex; flex-direction:column; gap:4px; min-width:0}
.lr-n{flex:none; width:30px; height:30px; border-radius:50%; background:var(--card-2); display:grid; place-items:center; font:600 13px/1 var(--mono); color:var(--ink-2)}
.lr-line-title{font:700 17px/1.25 var(--display); color:var(--ink); text-decoration:none}
.lr-line-title:hover{text-decoration:underline}

/* ---- search ---- */
.lr-search-layout{display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start}
.lr-filter-wrap{position:sticky; top:calc(var(--header-h) + 72px); background:var(--card); border-radius:var(--r); padding:16px}
.lr-filter-wrap summary{font:700 16px/1.2 var(--display); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between}
.lr-filter-wrap summary::-webkit-details-marker{display:none}
.lr-filter-wrap summary::after{content:"+"; font:500 20px/1 var(--mono); color:var(--muted)}
.lr-filter-wrap[open] summary::after{content:"–"}
.lr-filters{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.lr-field{display:flex; flex-direction:column; gap:5px; font-size:13.5px; color:var(--ink-2); font-weight:500}
.lr-field input,.lr-field select,.lr-field textarea{width:100%; min-height:42px; padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-size:15px; font-weight:400}
.lr-field textarea{resize:vertical}
.lr-check{display:flex; align-items:center; gap:8px; font-size:15px; min-height:36px; cursor:pointer}
.lr-check input{width:18px; height:18px; accent-color:var(--primary)}
.lr-filter-actions{display:flex; gap:8px; flex-wrap:wrap}
.lr-results-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.lr-results-bar p{margin:0; color:var(--ink-2)}
.lr-seg{display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; flex:none}
.lr-seg button{background:transparent; border:0; padding:8px 14px; font:500 14px/1.2 var(--body); color:var(--ink-2); cursor:pointer; min-height:36px}
.lr-seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.lr-pages{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; color:var(--ink-2)}
.btn.off{opacity:.45; pointer-events:none}

/* ---- one course ---- */
.lr-course{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:clamp(24px,4vw,48px); align-items:start}
.lr-course-main{display:flex; flex-direction:column; gap:12px; min-width:0}
.lr-course-main p{margin:0; color:var(--ink-2); line-height:1.6}
.lr-course-main h3{margin-top:16px}
.lr-course-title{font-size:clamp(28px,3.4vw,44px)}
.lr-course-main .lr-by{font-size:16px}
.lr-course-main .lr-meta{font-size:15px}
.lr-curriculum{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; color:var(--ink-2)}
.lr-sdgs{display:flex; flex-wrap:wrap; gap:6px}
.lr-sdgs .lr-badge{margin-left:0}
.lr-course-side{position:sticky; top:calc(var(--header-h) + 72px); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.lr-side-body{display:flex; flex-direction:column; gap:14px; padding:18px 20px 20px}
.lr-side-body p{margin:0}
.lr-price{font:700 20px/1.2 var(--display)}
.lr-actions{display:flex; flex-wrap:wrap; gap:8px}
.lr-actions .btn.primary{flex:1 1 100%}
.lr-actions .btn.small{flex:1 1 auto}
.lr-done,.lr-complete{background:var(--card); border-radius:var(--r-sm); padding:14px 16px; display:flex; flex-direction:column; gap:10px; font-size:15px}
.lr-done{display:block}
.lr-done p{margin:8px 0 0}
.lr-facts{margin:0; display:flex; flex-direction:column}
.lr-facts > div{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-top:1px solid var(--line); font-size:15px}
.lr-facts dt{color:var(--muted)}
.lr-facts dd{margin:0; font-weight:600; text-align:right}

/* ---- my learning ---- */
.lr-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:10px}
.lr-stat{background:var(--card); border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:4px}
.lr-stat b{font:700 30px/1 var(--display)}
.lr-stat span{font-size:14px; color:var(--ink-2)}
.lr-switch{display:flex; gap:12px; align-items:flex-start; cursor:pointer}
.lr-switch input{width:20px; height:20px; margin-top:2px; accent-color:var(--primary); flex:none}
.lr-switch > span{display:flex; flex-direction:column; gap:4px}

/* ---- sign-in dialog and toast ---- */
.lr-dialog{width:min(440px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--ink); padding:26px 24px 22px}
.lr-dialog::backdrop{background:rgba(5,9,8,.62)}
.lr-dialog h2{font-size:24px; margin-bottom:10px; padding-right:36px}
.lr-dialog p{margin:10px 0 0}
.lr-x{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; border:0; background:var(--card); color:var(--ink); font-size:22px; line-height:1; cursor:pointer}
.lr-gbtn{min-height:44px; margin-top:16px; display:flex; justify-content:center}
.lr-err{color:var(--bad)}
.lr-toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:80; max-width:calc(100vw - 32px);
  padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:15px; font-weight:500; box-shadow:0 8px 28px rgba(0,0,0,.25)}
.lr-toast.bad{background:var(--bad); color:var(--surface)}

/* ---- narrower screens ---- */
@media (max-width:900px){
  .lr-search-layout{grid-template-columns:minmax(0,1fr); gap:16px}
  .lr-filter-wrap{position:static}
  .lr-filters{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-field.wide,.lr-check,.lr-filter-actions{grid-column:1 / -1}
  /* One column: the title first, then the action card, then the rest of the description. */
  .lr-course{grid-template-columns:minmax(0,1fr); gap:12px}
  .lr-course-main{display:contents}
  .lr-course-main > *{order:2}
  .lr-course-main > .lr-prov,.lr-course-main > .lr-course-title,.lr-course-main > .lr-by,.lr-course-main > .lr-meta{order:0}
  .lr-course-side{position:static; order:1; margin-block:8px}
  .lr-course-side .lr-cover{aspect-ratio:21/9}
  .lr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .lr-search .btn{padding-inline:18px}
  .lr-search input{font-size:16px; padding-inline:16px}
  .lr-bar .wrap{gap:6px}
  .lr-tabs a{padding:15px 9px; font-size:15px}
  /* The tabs take the row; signing in is offered in the page and under My learning, signing out at its foot. */
  .lr-account{display:none}
  .lr-row{grid-auto-columns:minmax(220px,76vw); margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter)}
  .lr-grid{grid-template-columns:minmax(0,1fr)}
  .lr-grid:not(.list) .lr-card{flex-direction:row}
  .lr-grid:not(.list) .lr-cover{width:112px; aspect-ratio:auto; min-height:112px; padding:8px}
  .lr-grid .lr-cover-word{font-size:12.5px}
  .lr-grid.list .lr-cover{width:112px; padding:8px}
  .lr-invite{flex-direction:column; align-items:flex-start}
  .lr-results-bar .lr-seg{display:none}
  .lr-filters{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .lr-card,.lr-path{transition:none} .lr-card:hover,.lr-path:hover{transform:none} }

/* ---- neighbours of this page ---- */
.lr-related{display:flex; flex-direction:column; gap:10px; margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid var(--line)}
.lr-related p{margin:0}