/* Home only: the study workspace and existing sidebar keep their own styles. */
body.has-learning-studio:has(#workspace[data-view=library]){background:#f6f9f6}
body.has-learning-studio #library-view{
  --ink:#183e4a;--muted:#51656d;--pine:#176e55;--line:#d9e5dd;--soft:#edf4ec;--surface:#fff;
  color:var(--ink);
}
body.has-learning-studio #library-view .library-heading{margin:0 0 22px;gap:0}
body.has-learning-studio #library-view .forest-hero{
  display:block;min-height:0;height:auto;max-height:none;aspect-ratio:auto!important;
  padding:calc(100% / var(--banner-ratio,3)) 0 0;
  border-radius:18px;background-color:#e5eee6;background-position:center top;
  background-size:100% auto;background-repeat:no-repeat;box-shadow:none;
}
body.has-learning-studio #library-view .forest-hero .banner-learning-tip{
  position:absolute;top:clamp(12px,3vw,40px);left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:1040px;box-sizing:border-box;margin:0;padding:12px 5%;
  border:0;border-radius:12px;background:linear-gradient(90deg,transparent,#071c31cc 5%,#071c31cc 95%,transparent);color:#fff;
  font-size:clamp(20px,1.7vw,25px);font-weight:700;letter-spacing:-.2px;
  line-height:1.5;text-align:center;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 1px 3px #0009;
}
body.has-learning-studio #library-view .forest-hero[data-no-background=true]{background-color:#17382f}
body.has-learning-studio #library-view .banner-quote-reference{display:block;margin-top:6px;font-size:17px;font-weight:450;letter-spacing:0;color:#f3f6fa}
body.has-learning-studio #library-view .forest-banner-brand{
  position:absolute;inset:clamp(10px,2vw,24px) auto auto 50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 32px);padding:8px 15px;
  border:1px solid #ffffff40;border-radius:999px;background:#10352ee6;color:#fff;
  line-height:1;white-space:nowrap;pointer-events:none;box-shadow:0 3px 14px #071d2329;
}
body.has-learning-studio #library-view .forest-banner-brand img{width:28px;height:33px;object-fit:contain;filter:brightness(0) invert(1)}
body.has-learning-studio #library-view .forest-banner-brand strong{font-size:clamp(17px,2vw,27px);font-weight:800;letter-spacing:-.6px}
body.has-learning-studio #library-view .forest-hero:focus-visible{outline:3px solid var(--pine);outline-offset:4px}

body.has-learning-studio #library-view .forest-footer{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;
  min-height:132px;margin:32px 0 0;padding:28px 34px;overflow:visible;
  border:1px solid var(--line);border-radius:20px;background:linear-gradient(120deg,var(--soft),var(--surface));
}
body.has-learning-studio #library-view .forest-footer::before{content:none}
body.has-learning-studio #library-view .forest-footer::after{
  inset:auto 18px 0 auto;width:128px;height:96px;
  background-image:url('/pinelingo-tree.svg'),url('/pinelingo-tree.svg');
  background-size:44px 52px,62px 74px;background-position:left 10px bottom,right 0 bottom;
  opacity:.07;pointer-events:none;
}
body.has-learning-studio #library-view .forest-footer .brand{justify-self:start;gap:12px;color:var(--ink);padding:8px 0;border-radius:8px}
body.has-learning-studio #library-view .forest-footer .brand img{width:34px;height:42px}
body.has-learning-studio #library-view .forest-footer .brand-copy{align-items:flex-start;gap:3px}
body.has-learning-studio #library-view .forest-footer .brand-wordmark{display:flex;align-items:baseline;margin:0;font-size:25px;line-height:1.1;letter-spacing:-1px}
body.has-learning-studio #library-view .forest-footer .brand-wordmark span{margin:0;font-size:inherit;line-height:inherit;letter-spacing:inherit}
body.has-learning-studio #library-view .forest-footer .brand-pine{font-weight:700}
body.has-learning-studio #library-view .forest-footer .brand-lingo{font-weight:500}
body.has-learning-studio #library-view .forest-footer small{display:block;margin:0;font-size:11px;line-height:1.3;color:var(--muted)}
body.has-learning-studio #library-view .forest-footer .learning-design-entry{align-items:flex-end;gap:8px;min-width:0;padding:0;text-align:end}
body.has-learning-studio #library-view .forest-footer .learning-design-entry button{min-height:44px;padding:10px 17px;border-color:var(--line);background:var(--surface);color:var(--pine);font-size:14px;transition:background .18s,border-color .18s}
body.has-learning-studio #library-view .forest-footer .learning-design-entry button:hover{background:var(--soft);border-color:var(--pine)}
body.has-learning-studio #library-view .forest-footer .learning-design-entry p{max-width:42ch;font-size:12px;line-height:1.6;color:var(--muted)}
body.has-learning-studio #library-view .forest-footer :is(a,button):focus-visible{outline:3px solid var(--pine);outline-offset:4px}

#learning-studio{margin:0 0 24px}
#learning-studio .studio-home-feature{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch;gap:18px;margin-bottom:28px;
}
#learning-studio .studio-recommendation{
  display:flex;flex-direction:column;min-width:0;margin:0;padding:24px 26px;
  border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:none;
}
#learning-studio .studio-route-heading{display:block;margin:0}
#learning-studio .studio-route-heading :is(h2,h3){margin:0 0 8px;font-size:clamp(23px,2.6vw,30px);line-height:1.35;font-weight:750;letter-spacing:-.7px}
#learning-studio .studio-route-heading p{margin:0;font-size:14px;line-height:1.7;color:var(--muted);max-width:none}
#learning-studio .studio-profile-field{display:grid;gap:9px;margin:20px 0 16px;min-width:0}
#learning-studio .studio-profile-field>span{font-size:13px;font-weight:700;line-height:1.6;color:var(--ink)}
#learning-studio .studio-route-profiles{
  display:flex;gap:10px;min-width:0;width:100%;padding:0;border:0;border-radius:0;background:none;
}
#learning-studio .studio-route-profiles button{
  display:flex;align-items:center;justify-content:flex-start;gap:9px;flex:1;min-width:0;min-height:48px;
  padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  color:var(--ink);font-size:14px;font-weight:650;line-height:1.5;text-align:start;overflow-wrap:anywhere;
}
#learning-studio .studio-route-profiles button::before{
  content:'';flex:none;width:17px;height:17px;border:1.5px solid #8aa598;border-radius:50%;background:var(--surface);
}
#learning-studio .studio-route-profiles button[aria-pressed=true],#learning-studio .studio-route-profiles button.is-active{
  border-color:#79b397;background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px #79b39722;
}
#learning-studio .studio-route-profiles button[aria-pressed=true]::before,#learning-studio .studio-route-profiles button.is-active::before{
  border:5px solid var(--pine);background:var(--surface);
}
#learning-studio .studio-route-actions{display:flex;align-items:stretch;flex-direction:column;gap:8px;margin:0}
#learning-studio .studio-route-actions>button{
  width:100%;min-height:48px;padding:11px 18px;border-radius:11px;font-size:16px;line-height:1.5;
  background:var(--pine);border-color:var(--pine);color:#fff;
}
#learning-studio .studio-route-preview{margin:0;font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
#learning-studio .studio-route-actions>button.secondary-button{background:var(--surface);border-color:var(--line);color:var(--ink);font-size:14px}
#learning-studio .studio-route-preview strong{margin-inline-start:6px;color:var(--ink);font-weight:650}
#learning-studio .studio-route-details{margin-top:12px;padding-top:4px;border:0;background:none;color:var(--ink)}
#learning-studio .studio-route-details>summary{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 4px;
  cursor:pointer;list-style:none;color:var(--pine);font-size:13px;font-weight:650;line-height:1.5;
}
#learning-studio .studio-route-details>summary::-webkit-details-marker{display:none}
#learning-studio .studio-route-details>summary::after{content:'⌄';font-size:18px;line-height:1}
#learning-studio .studio-route-details[open]>summary::after{content:'⌃'}
#learning-studio .studio-route-details .studio-route-steps{
  display:grid;grid-template-columns:1fr;gap:7px;margin:8px 0 0;padding:0;list-style:none;
}
#learning-studio .studio-route-details:not([open])>.studio-route-steps{display:none}
#learning-studio .studio-route-details .studio-route-steps>li:last-child{grid-column:auto}
#learning-studio .studio-route-details .studio-route-step{min-height:58px;padding:9px 12px;border-radius:10px;grid-template-columns:28px minmax(0,1fr);column-gap:9px;row-gap:2px}
#learning-studio .studio-route-details .studio-route-number{width:28px;height:28px;font-size:12px}
#learning-studio .studio-route-details .studio-route-step strong{font-size:13px;line-height:1.5}
#learning-studio .studio-route-details .studio-route-purpose{font-size:12px;line-height:1.55}

#learning-studio .studio-audio-entry{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0;
  margin:0;padding:24px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(145deg,var(--soft),var(--surface));box-shadow:none;text-align:center;
}
#learning-studio .studio-audio-entry .studio-sound-icon{
  display:grid;place-items:center;flex:none;width:74px;height:76px;margin:0;
  border:0;border-radius:0;background:none;color:#51846a;font-size:68px;line-height:1;
}
#learning-studio .studio-audio-entry>div{flex:none;min-width:0;width:100%}
#learning-studio .studio-audio-entry :is(h2,h3){margin:0 0 8px;font-size:clamp(23px,2.3vw,28px);line-height:1.4;font-weight:750;letter-spacing:-.6px;overflow-wrap:anywhere}
#learning-studio .studio-audio-entry p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;overflow-wrap:anywhere}
#learning-studio .studio-audio-entry>button{
  width:100%;max-width:240px;min-width:0;min-height:48px;margin-top:4px;padding:10px 18px;
  border:1px solid var(--pine);border-radius:999px;background:transparent;color:var(--ink);font-size:15px;line-height:1.5;
}

#learning-studio .studio-grid-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px}
#learning-studio .studio-grid-heading h2,#learning-studio .studio-grid-heading h3{margin:0;font-size:25px;line-height:1.4;font-weight:750;letter-spacing:-.6px}
#learning-studio .studio-menu-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0}
#learning-studio .studio-menu-actions button{
  min-width:44px;min-height:44px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:650;line-height:1.5;text-decoration:none;white-space:normal;
}
#learning-studio .studio-menu-actions button[aria-pressed=true]{background:var(--soft);border-color:#79b397;color:var(--pine)}
#learning-studio .studio-menu-actions button[hidden]{display:none!important}
#learning-studio .studio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#learning-studio .studio-card{
  min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  box-shadow:none;transition:border-color .15s,box-shadow .15s;overflow:hidden;
}
#learning-studio .studio-card:hover{border-color:#82aa94;box-shadow:0 3px 12px #254d3710;transform:none}
#learning-studio .studio-launch{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:13px;
  min-height:148px;width:100%;padding:17px 16px;border:0;background:none;color:var(--ink);text-align:start;
}
#learning-studio .studio-launch img{flex:none;width:80px;height:88px;margin:0;object-fit:contain;filter:none}
#learning-studio .studio-card-copy{flex:1;min-width:0;text-align:start}
#learning-studio .studio-launch h3{
  display:block;min-height:0;margin:0;font-size:18px;font-weight:750;line-height:1.45;letter-spacing:-.4px;overflow-wrap:anywhere;
}
#learning-studio .studio-launch p{flex:none;margin:6px 0 8px;font-size:13px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
#learning-studio .studio-count{display:inline-block;max-width:100%;padding:0;margin:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:12px;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
#learning-studio .studio-count strong{font-weight:650;color:var(--muted)}
#learning-studio[data-editing=false] :is(.studio-star,.studio-grip,.studio-card-order),#learning-studio :is(.studio-star,.studio-grip,.studio-card-order)[hidden]{display:none!important}
#learning-studio[data-editing=true] .studio-launch{padding-top:44px}
#learning-studio[data-editing=true] .studio-star,#learning-studio[data-editing=true] .studio-grip{top:1px;width:44px;height:44px}
#learning-studio[data-editing=true] .studio-card-order{top:10px}
#learning-studio :is(button,summary,a):focus-visible{outline:3px solid var(--pine);outline-offset:3px}
#learning-studio .studio-launch:focus-visible{outline-offset:-4px;border-radius:15px}
#learning-studio :is(.studio-star,.studio-grip):focus-visible{outline-offset:-4px}

/* Earlier home styles force the filter panel to be displayed. Respect details. */
body.has-learning-studio #library-view .home-library-settings{
  width:100%;margin:0 0 22px!important;padding:0!important;border:1px solid var(--line)!important;
  border-radius:16px!important;background:var(--surface)!important;box-shadow:none!important;
}
body.has-learning-studio #library-view .home-library-settings>summary{
  display:flex!important;align-items:center;flex-wrap:wrap;gap:8px 14px;min-height:64px;margin:0;
  padding:15px 20px;list-style:none;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink);cursor:pointer;
}
body.has-learning-studio #library-view .home-library-settings>summary::-webkit-details-marker{display:none}
body.has-learning-studio #library-view .home-library-settings>summary>:first-child{color:var(--ink);font-size:16px;font-weight:700}
body.has-learning-studio #library-view .home-library-settings>summary>.studio-filter-hint{flex:1;min-width:0;color:var(--muted);font-size:13px;font-weight:400;overflow-wrap:anywhere}
body.has-learning-studio #library-view .home-library-settings>summary>.studio-filter-state{padding:3px 8px;border-radius:999px;background:var(--soft);color:var(--pine);font-size:11px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
body.has-learning-studio #library-view .home-library-settings>summary::after{content:'⌄';margin-inline-start:auto;color:var(--muted);font-size:22px;line-height:1}
body.has-learning-studio #library-view .home-library-settings[open]>summary{border-bottom:1px solid var(--line)}
body.has-learning-studio #library-view .home-library-settings[open]>summary::after{content:'⌃'}
body.has-learning-studio #library-view .home-library-settings:not([open])>:not(summary){display:none!important}
body.has-learning-studio #library-view .home-library-settings[open]>.library-control-panel{display:flex!important;gap:14px!important;margin:0;padding:18px 20px!important;border:0;background:none}
body.has-learning-studio #library-view .home-library-settings .library-filters{padding:0;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))!important;gap:12px!important;background:none}
body.has-learning-studio #library-view .home-library-settings .library-filters label{min-width:0}
body.has-learning-studio #library-view .home-library-settings .library-filters :is(input,select),body.has-learning-studio #library-view .home-library-settings .multi-topic-picker>summary{
  min-height:48px!important;font-size:14px!important;line-height:1.5;padding:10px 12px!important;border-color:var(--line)!important;background:var(--surface);color:var(--ink);
}
body.has-learning-studio #library-view .home-library-settings .library-filters label>span:not(.sr-only){color:var(--ink);font-size:13px;line-height:1.5}
body.has-learning-studio #library-view .home-library-settings :is(button,.category-bookmark-filter,.completed-learning-filter){min-height:44px!important;height:auto!important;line-height:1.5;white-space:normal}
body.has-learning-studio #library-view .home-library-settings :is(button,input,select,summary):focus-visible{outline:3px solid var(--pine);outline-offset:3px}

@media(max-width:1100px){
  #learning-studio .studio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #learning-studio .studio-home-feature{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
  #learning-studio .studio-recommendation{padding:22px}
  #learning-studio .studio-route-profiles{flex-direction:column;gap:8px}
  #learning-studio .studio-route-profiles button{width:100%}
  #learning-studio .studio-audio-entry{padding:22px 18px}
}
@media(max-width:800px){
  #learning-studio .studio-home-feature{grid-template-columns:1fr}
  #learning-studio .studio-route-profiles{flex-direction:row}
  #learning-studio .studio-audio-entry{display:grid;grid-template-columns:50px minmax(0,1fr) auto;text-align:start;gap:16px;padding:18px 20px}
  #learning-studio .studio-audio-entry .studio-sound-icon{width:50px;height:60px;font-size:48px}
  #learning-studio .studio-audio-entry :is(h2,h3){font-size:22px;margin-bottom:4px}
  #learning-studio .studio-audio-entry p{font-size:13px}
  #learning-studio .studio-audio-entry>button{width:auto;max-width:none;margin:0;padding-inline:14px;font-size:14px}
  body.has-learning-studio #library-view .home-library-settings .library-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.has-learning-studio #library-view .home-library-settings .library-filters .search-field{grid-column:1 / -1!important}
}
@media(max-width:600px){
  body.has-learning-studio #library-view .library-heading{margin-bottom:18px}
  body.has-learning-studio #library-view .forest-footer{margin-inline:0}
  body.has-learning-studio #library-view .forest-hero{height:auto;min-height:0;max-height:none;border-radius:15px;background-size:contain;background-position:center}
  body.has-learning-studio #library-view .forest-hero .banner-learning-tip{top:8px;width:calc(100% - 16px);padding:8px 5%;font-size:18px;line-height:1.4;border-radius:10px}
  body.has-learning-studio #library-view .forest-hero{background-size:100% auto;background-position:center top}
  body.has-learning-studio #library-view .forest-banner-brand{gap:7px;padding:6px 11px}
  body.has-learning-studio #library-view .forest-banner-brand img{width:20px;height:24px}
  body.has-learning-studio #library-view .banner-quote-reference{margin-top:4px;font-size:14px;line-height:1.4}
  body.has-learning-studio #library-view .forest-footer{grid-template-columns:1fr;justify-items:center;gap:16px;margin-top:24px;padding:24px 20px;border-radius:18px}
  body.has-learning-studio #library-view .forest-footer .brand{justify-self:center}
  body.has-learning-studio #library-view .forest-footer .learning-design-entry{align-items:center;text-align:center}
  body.has-learning-studio #library-view .forest-footer .learning-design-entry p{max-width:34ch}
  #learning-studio .studio-home-feature{gap:12px;margin-bottom:24px}
  #learning-studio .studio-recommendation{padding:20px;border-radius:16px}
  #learning-studio .studio-route-heading :is(h2,h3){font-size:24px}
  #learning-studio .studio-route-heading p{font-size:13px}
  #learning-studio .studio-profile-field{margin:16px 0 14px}
  #learning-studio .studio-route-profiles{flex-direction:column;gap:8px}
  #learning-studio .studio-route-profiles button{font-size:14px}
  #learning-studio .studio-route-details{margin-top:8px}
  #learning-studio .studio-audio-entry{grid-template-columns:42px minmax(0,1fr);gap:9px 13px;padding:16px 18px;border-radius:16px}
  #learning-studio .studio-audio-entry .studio-sound-icon{width:42px;height:54px;font-size:43px}
  #learning-studio .studio-audio-entry :is(h2,h3){font-size:21px}
  #learning-studio .studio-audio-entry>button{grid-column:1 / -1;width:100%;min-height:44px;margin-top:4px}
  #learning-studio .studio-grid-heading{align-items:flex-start;flex-wrap:wrap;gap:10px;margin-bottom:12px}
  #learning-studio .studio-grid-heading h2,#learning-studio .studio-grid-heading h3{font-size:23px}
  #learning-studio .studio-menu-actions{justify-content:flex-start;gap:6px}
  #learning-studio .studio-menu-actions button{font-size:12px;padding:9px 11px}
  #learning-studio .studio-grid{grid-template-columns:1fr;gap:10px}
  #learning-studio .studio-launch{min-height:132px;gap:16px;padding:16px 18px}
  #learning-studio .studio-launch img{width:76px;height:84px}
  #learning-studio .studio-launch h3{font-size:18px}
  #learning-studio .studio-launch p{font-size:13px;margin:5px 0 7px}
  body.has-learning-studio #library-view .home-library-settings>summary{padding:14px 16px;gap:5px 10px}
  body.has-learning-studio #library-view .home-library-settings>summary>.studio-filter-hint{flex-basis:100%;order:2}
  body.has-learning-studio #library-view .home-library-settings>summary>.studio-filter-state{order:3}
  body.has-learning-studio #library-view .home-library-settings>summary::after{order:1}
  body.has-learning-studio #library-view .home-library-settings[open]>.library-control-panel{padding:16px!important}
  body.has-learning-studio #library-view .home-library-settings .library-filters{grid-template-columns:1fr!important}
  body.has-learning-studio #library-view .home-library-settings .library-filters label,body.has-learning-studio #library-view .home-library-settings .library-filters .search-field{grid-column:auto!important}
}
@media(prefers-reduced-motion:reduce){#learning-studio *{transition:none!important;animation:none!important;scroll-behavior:auto!important}body.has-learning-studio #library-view .forest-footer .learning-design-entry button{transition:none}}
@media(forced-colors:active){#learning-studio .studio-route-profiles button[aria-pressed=true]{border:2px solid Highlight}#learning-studio .studio-route-profiles button[aria-pressed=true]::before{border-color:Highlight}#learning-studio .studio-card:hover{border-color:Highlight}}
html[data-theme=dark] body.has-learning-studio:has(#workspace[data-view=library]){background:#102a24}
html[data-theme=dark] body.has-learning-studio #library-view{--ink:#e0eee5;--muted:#b7cfc1;--pine:#8dd4ad;--line:#355749;--soft:#193e32;--surface:#12302a}
html[data-theme=dark] #learning-studio .studio-route-actions>button{color:#102a24}
