/* Notifications: clear of the music dock and always visible. */
.toast{
  left:50%!important; right:auto!important; top:18px!important; bottom:auto!important;
  transform:translate(-50%,-10px)!important; z-index:260!important;
  max-width:min(560px,calc(100vw - 28px)); text-align:center;
}
.toast.show{transform:translate(-50%,0)!important}

/* Readability + type scaling. Never let microcopy collapse below 10px. */
.eyebrow,.crumb,.tag,.soon,.stat span,.stat small,.course-row small,.split-row span,.split-row b,
.dock-meta b,.dock-meta small,.spotify-badge,.live-chat-head small,.live-room-notice,.live-msg-avatar,
.live-msg-bubble,.live-msg-meta,.live-msg-meta button,.live-compose button,.live-char-count,
.live-member b,.live-member small,.live-member-actions button,.live-empty,.profile-mini strong,
.profile-mini small,.side-card b,.side-card p,.sheet-hero span,.sheet-hero p,.studi-home-promo,
.studi-gate-promo b,.studi-gate-promo small{
  font-size:max(10px,var(--studi-fs-small,10px))!important;
}
p,small,.muted,[class*="meta"]{color:#64796f}
h1,h2,h3,.page-head,.hero-copy{overflow-wrap:normal;word-break:normal}
h1,h2,h3{text-wrap:balance}
.lead,p{text-wrap:pretty}

/* Real timer progress ring. */
#p-timer .timer-orbit{--timer-progress:0%}
#p-timer .timer-orbit:before{
  inset:-4px!important;border:0!important;transform:none!important;padding:4px;
  background:conic-gradient(#6f9f76 var(--timer-progress),rgba(145,184,147,.18) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* New-message affordance for live chat. */
.live-chat-card{position:relative}
.live-new-messages{
  align-self:center;position:relative;z-index:4;margin:-44px auto 10px;padding:8px 12px;
  border:1px solid #cbdcca;border-radius:999px;background:#fffefa;color:#41654d;
  box-shadow:0 8px 24px rgba(43,71,53,.12);font-size:max(10px,var(--studi-fs-small,10px));font-weight:800;
}
.live-new-messages[hidden]{display:none!important}

/* Clean hero: remove the overlapping decorative Studi watermark and keep promo readable. */
.motion-logo{display:none!important}
.studi-home-promo,.studi-gate-promo{position:relative;z-index:8!important;background:rgba(255,254,250,.78)!important}
.studi-home-promo{font-size:max(11px,var(--studi-fs-small,10px))!important}
.studi-gate-promo b{font-size:max(11px,var(--studi-fs-small,10px))!important}
.studi-gate-promo small{font-size:max(10px,var(--studi-fs-small,10px))!important}

/* Page-head controls stay together on desktop. */
@media(min-width:761px){
  .page-head .head-actions{flex-wrap:nowrap!important;white-space:nowrap}
}

/* Sidebar remains usable on short screens and visibly scrollable. */
.sidebar .nav{
  min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:#b7c9b8 transparent;
}
.sidebar .nav::-webkit-scrollbar{width:6px}
.sidebar .nav::-webkit-scrollbar-thumb{background:#b7c9b8;border-radius:999px}

/* Keyboard accessibility */
.skip-link{
  position:fixed;left:16px;top:12px;z-index:1000;padding:10px 14px;border-radius:10px;
  background:#20352e;color:#fff;font-weight:800;transform:translateY(-160%);transition:.18s;
}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #6f9f76!important;outline-offset:3px!important}

/* Mobile primary nav + More sheet. */
.mobile-more-btn,.mobile-more-panel,.mobile-more-backdrop{display:none}
@media(max-width:760px){
  .sidebar{overflow:visible!important}
  .sidebar .nav{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px!important;
    overflow:visible!important;align-items:stretch;
  }
  .sidebar .nav>a{display:none!important;min-width:0!important;padding:7px 3px!important}
  .sidebar .nav>a[data-route="index"],
  .sidebar .nav>a[data-route="timer"],
  .sidebar .nav>a[data-route="courses"],
  .sidebar .nav>a[data-route="exams"],
  .sidebar .nav>a[data-route="analytics"]{display:flex!important}
  .sidebar .nav>a span:not(.ico){display:block!important;font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar .nav>a .ico{display:block!important;font-size:14px!important}
  .sidebar .nav>a{flex-direction:column!important;gap:2px!important;justify-content:center!important;align-items:center!important}
  .mobile-more-btn{
    display:flex;border:0;background:transparent;color:#758b7e;border-radius:11px;
    flex-direction:column;justify-content:center;align-items:center;gap:2px;font-weight:800;font-size:9px;padding:7px 3px;
  }
  .mobile-more-btn .ico{font-size:15px;line-height:1}
  .mobile-more-btn.active{background:#e2eddd;color:#416b51}
  .mobile-more-backdrop{
    position:fixed;inset:0;z-index:220;background:rgba(31,49,40,.22);backdrop-filter:blur(3px)
  }
  .mobile-more-backdrop.open{display:block}
  .mobile-more-panel{
    position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:230;
    background:#fffefa;border:1px solid #dce6da;border-radius:20px;box-shadow:0 24px 70px rgba(36,58,43,.20);
    padding:14px;max-height:min(68dvh,520px);overflow:auto;
  }
  .mobile-more-panel.open{display:block}
  .mobile-more-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:2px 3px}
  .mobile-more-panel-head b{font:800 15px Manrope,sans-serif;color:#294336}
  .mobile-more-close{border:0;background:#edf3e7;color:#4b6955;width:32px;height:32px;border-radius:10px;font-size:18px}
  .mobile-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .mobile-more-grid a{
    display:flex;align-items:center;gap:9px;padding:11px;border-radius:12px;background:#f7f8f3;
    border:1px solid #e6ece3;color:#4d6758;font-size:11px;font-weight:800;
  }
  .mobile-more-grid a.active{background:#e2eddd;color:#31513d}
  .mobile-more-grid .ico{width:20px;text-align:center}
}

/* Reduced motion preference. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Remove an extra hard white treatment from the floating music dock. */
.music-dock{background:rgba(247,247,241,.92)!important}
.music-dock .dock-window-controls button{background:rgba(231,238,226,.92)!important}