/* Closed review only. Shell polish; the guided practice player is untouched. */
body[data-mode="app"] .side-nav > .nav-link {
  min-width: 0;
  white-space: nowrap;
}

body[data-mode="app"] .side-nav > .nav-link > .nav-brand-mark {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  object-fit: contain;
  overflow: visible;
  filter: none;
  mix-blend-mode: normal;
}

/* The same selected-row treatment as the other sidebar entries. The brand
   keeps its canonical SVG viewBox, so its two loops are never stretched. */
body[data-mode="app"] .side-nav > .nav-link:has(> .nav-brand-mark).active {
  background: var(--green-soft);
  color: var(--green);
  box-shadow: none;
}

body[data-mode="app"] .side-nav > .nav-link:has(> .nav-brand-mark).active > span {
  text-decoration: none;
}

/* Long route labels may wrap; the numbered circles may not be compressed. */
body[data-mode="app"] .club-route ol > li {
  min-width: 0;
}

body[data-mode="app"] .club-route ol > li > i {
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  line-height: 1;
  font-style: normal;
}

body[data-mode="app"] .club-route ol > li > span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Only the shell actions, not the player controls. Header circles must stay
   round when the title and the action group compete for horizontal room. */
body[data-mode="app"] .topbar .top-actions > .icon-button {
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

/* One optical system for the five application destinations. The approved
   logo remains a filled canonical path, not a stretched line icon. Its small
   contour expansion brings a ~1px native band up to the other icons' 1.8px
   weight at a 24px slot; the expansion scales with the slot on mobile. */
body[data-mode="app"] .side-nav > .nav-link > svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}
body[data-mode="app"] :is(.side-nav > .nav-link, .mobile-nav > a) > svg.icon {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-mode="app"] :is(.side-nav > .nav-link, .mobile-nav > a) > .nav-brand-mark {
  flex-shrink: 0;
  fill: currentColor;
  overflow: visible;
  transform: none;
  filter: none;
}
body[data-mode="app"] :is(.side-nav > .nav-link, .mobile-nav > a) > .nav-brand-mark > path {
  stroke: currentColor;
  stroke-width: 16;
  /* logo-return.css/app.css use non-scaling-stroke for the old .28px
     screen-space expansion. This rule instead uses canonical SVG units. */
  vector-effect: none !important;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Owner-requested finishing pass, shell only: never practice-player controls. */
body[data-mode="app"] .today-carousel > .today-trial-slide {
  display: flex;
  background: #264637;
  color: #fff9ec;
  align-self: stretch;
}
body[data-mode="app"] .today-carousel > .today-trial-slide > .today-slide-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: clamp(24px,5vw,42px) clamp(20px,4vw,36px);
  gap: 18px;
  background: transparent;
}
body[data-mode="app"] .today-trial-slide .today-trial-copy {margin-block:auto;max-width:28ch;padding-block:22px}
body[data-mode="app"] .today-trial-slide .today-trial-copy h3 {font-size:clamp(29px,5.8vw,43px);line-height:1.13;color:#fff9ec;text-wrap:balance}
body[data-mode="app"] .today-trial-slide .today-trial-copy p {font-size:clamp(16px,3.8vw,20px);line-height:1.5;margin-top:16px;color:#e6edde}
body[data-mode="app"] .today-trial-slide .today-slide-area {font-size:11px;letter-spacing:.11em;color:#dbd8bc}
body[data-mode="app"] .today-trial-slide .today-primary-link {box-sizing:border-box;max-width:100%;width:100%;border:0;cursor:pointer;font:inherit;font-weight:650}
body[data-mode="app"] .today-trial-slide .today-primary-link:disabled {opacity:.7;cursor:wait}
body[data-mode="app"] .today-trial-slide small {font-size:12px;line-height:1.4;color:#d6dfce}
body[data-mode="app"] .topbar .top-actions > .icon-button {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
}
body[data-mode="app"] .topbar .top-actions > .icon-button > svg {
  width: 22px;
  height: 22px;
  min-width: 22px;
  stroke-width: 1.8;
}
body[data-mode="app"] .topbar .top-actions > .icon-button > .live-message-unread {
  position: absolute;
  inset: -3px -2px auto auto;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border-width: 1.5px;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
body[data-mode="app"] .mobile-nav > a[href="#/app/club"] > svg.icon {
  fill: rgba(121, 146, 107, .08);
}
body[data-mode="app"] .side-nav > a[href="#/app/club"] > svg.icon {
  fill: rgba(121, 146, 107, .08);
}
body[data-mode="app"] .mobile-nav > a[href="#/app/club"].active {
  color: #20382b;
}
body[data-mode="app"] :is(.side-nav,.mobile-nav) > a[href="#/app/club"].active > svg.icon {
  color: inherit;
  stroke: currentColor;
  fill: rgba(183, 204, 154, .15);
}
body[data-mode="app"] .club-cover .reader-kicker {
  color: #426047;
}
body[data-mode="app"] .club-cover .reader-kicker > svg.icon {
  width: 24px;
  height: 24px;
  stroke: #426047;
  fill: rgba(134, 157, 117, .1);
  stroke-width: 1.8;
}
@media(max-width:760px), (orientation:landscape) and (max-height:520px) and (max-width:1100px) {
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    body[data-mode="app"] .mobile-nav {
      background: linear-gradient(120deg,rgba(255,253,248,.45),rgba(247,245,238,.34));
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      backdrop-filter: blur(18px) saturate(1.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px rgba(39,55,36,.1);
    }
    body[data-mode="app"] .mobile-nav > a.active {
      background: rgba(255,253,247,.59);
    }
  }
}
@media(prefers-reduced-transparency:reduce) {
  body[data-mode="app"] .mobile-nav {
    background: #f6f0e5;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media(forced-colors:active) {
  body[data-mode="app"] .mobile-nav {background:Canvas;box-shadow:none}
  body[data-mode="app"] .mobile-nav > a.active {background:Highlight;color:HighlightText}
}
@media(max-width:760px) and (orientation:portrait) {
  body[data-mode="app"]:not(:has(#practice-player)) .mobile-nav > a > :is(svg.icon, .nav-brand-mark) {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    object-fit: contain;
  }
}
@media(orientation:landscape) and (max-height:520px) and (max-width:1100px) {
  body[data-mode="app"]:not(:has(#practice-player)) .mobile-nav > a > :is(svg.icon, .nav-brand-mark) {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
  }
}
@media(orientation:landscape) and (max-height:520px) and (max-width:700px) {
  body[data-mode="app"]:not(:has(#practice-player)) .mobile-nav > a > :is(svg.icon, .nav-brand-mark) {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }
}