/* Shared presentation enhancement: keep the lesson large while controls fold away. */
.ttl-expanded-toggle{display:none}
.player[data-expanded-controls="true"]{
  --ttl-expanded-caption-font:calc(clamp(16px,2vw,20px)*var(--caption-scale,1));
  width:100%;height:var(--ttl-expanded-height,100vh);max-width:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) calc(env(safe-area-inset-bottom,0px) + var(--ttl-expanded-reserved,52px)) env(safe-area-inset-left,0px);
  overflow:hidden;overscroll-behavior:contain;background:var(--paper,#f8f7f3)
}
.player[data-expanded-controls="true"] .stage-wrap{
  width:min(100%,max(0px,calc((var(--ttl-expanded-height,100vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--ttl-expanded-reserved,52px))*16/9)));
  max-width:100%;aspect-ratio:16/9;flex:none;margin:auto
}
.player[data-expanded-controls="true"] .chrome{
  position:absolute;z-index:5;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:0;
  width:auto;min-width:0;margin:0;padding-bottom:env(safe-area-inset-bottom,0px);
  border:0;background:transparent;flex:none
}
.player[data-expanded-controls="true"] .ttl-expanded-toggle{
  position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:44px;padding:8px 16px;border:0;border-top:1px solid var(--line,#e0dacf);
  border-radius:12px 12px 0 0;background:rgba(248,247,243,.96);color:var(--ink,#302c28);
  font:600 12px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent
}
.ttl-expanded-toggle::before{
  content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor;
  transform:translateY(2px) rotate(45deg)
}
.ttl-expanded-toggle[aria-expanded="true"]::before{transform:translateY(-2px) rotate(225deg)}
.ttl-expanded-toggle:focus-visible{outline:2px solid var(--accent,#876343);outline-offset:-4px}
.player[data-expanded-controls="true"] .ttl-expanded-panel{
  max-height:max(0px,min(calc((var(--ttl-expanded-height,100vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*.4),calc(var(--ttl-expanded-height,100vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--ttl-expanded-reserved,52px) - 8px)));
  overflow-y:auto;overscroll-behavior:contain;background:var(--paper,#f8f7f3)
}
.player[data-expanded-controls="true"] .caption-space{
  position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);height:auto;
  margin:0 auto;max-width:1000px;border-radius:6px;background:rgba(248,247,243,.96);pointer-events:auto
}
.player[data-expanded-controls="true"][data-ttl-collision-safe="true"] .ttl-expanded-panel{
  /* The cap must use the base reservation, not its own measured height. */
  max-height:max(0px,min(calc((var(--ttl-expanded-height,100vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*.4),calc(var(--ttl-expanded-height,100vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--ttl-expanded-base-reserved,52px) - 8px)))
}
.player[data-expanded-controls="true"][data-expanded-captions="false"] .caption-space{display:none}
.player[data-expanded-controls="true"][data-expanded-caption-text="false"] .caption-space{visibility:hidden}
.player[data-expanded-controls="true"] .caption-space .caption-strip{
  display:block;height:calc(var(--ttl-expanded-caption-font)*2.9 + 16px);min-height:0;max-height:calc(var(--ttl-expanded-height,100vh)*.25);
  padding:8px 14px;overflow-y:auto
}
.player[data-expanded-controls="true"] .caption-space .caption-text{font-size:var(--ttl-expanded-caption-font);line-height:1.45}
.player[data-expanded-controls="true"] .toolbar button{min-width:40px;min-height:40px}
.player[data-expanded-controls="true"] .toolbar button.primary{min-width:44px;min-height:44px}
.player[data-expanded-controls="true"] .volume-control[open] .volume-panel{
  position:fixed;left:auto;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));transform:none;
  max-width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px)
}
