/* ---------- 5 · layer ---------- */
.layer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .3s,visibility 0s .35s}
.layer.is-open{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .3s,visibility 0s}
.layer-strip{position:absolute;inset:0;background:rgba(23,43,54,.55);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.layer.is-open .layer-strip{opacity:1}
.layer-sheet{--accent-text:var(--orange-bright);position:absolute;left:0;right:0;top:var(--strip);bottom:0;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;transform:translateY(24px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.layer.is-open .layer-sheet{transform:none;opacity:1}
.layer-sheet[data-surface="light"]{--accent-text:var(--orange-text);background:var(--paper);color:var(--ink)}
.layer-sheet[data-surface="mid"]{background:var(--mid);color:var(--paper)}
.grabber{display:none}
.layer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--pad);
  border-bottom:1px solid var(--pap-18);max-width:var(--max);margin:0 auto;width:100%}
[data-surface="light"] .layer-head,[data-surface="light"] .layer-foot{border-color:var(--ink-18)}
.layer-title{color:var(--accent-text);font-size:10.5px}
.layer-progress{font-size:10.5px;opacity:.55}
.layer-actions{display:flex;gap:9px}
.icon-btn{width:40px;height:40px;border:1px solid var(--pap-30);display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .18s,color .18s,border-color .18s}
[data-surface="light"] .icon-btn{border-color:var(--ink-30)}
.icon-btn.is-close{background:var(--paper);color:var(--ink);border-color:var(--paper)}
[data-surface="light"] .icon-btn.is-close{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.layer-body{flex:1;overflow-y:auto;padding:30px var(--pad) 40px;max-width:var(--max);margin:0 auto;width:100%}
.layer-sheet[data-wide="1"] .layer-head,.layer-sheet[data-wide="1"] .layer-body,.layer-sheet[data-wide="1"] .layer-foot{max-width:1720px}
.layer-foot{border-top:1px solid var(--pap-18);padding:16px var(--pad);display:flex;justify-content:space-between;gap:20px;
  max-width:var(--max);margin:0 auto;width:100%;font-size:10px;opacity:.7}
.layer-foot button{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:10px;text-align:left;min-height:40px;display:inline-flex;align-items:center}
.layer-foot button:last-child{text-align:right}

.lhead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:28px}
.lhead h2{font-size:clamp(26px,3.2vw,42px)}
.lhead .lnote{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.lhead .course-switcher{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}

/* ---------- 6 · menu ---------- */
.menu{--accent-text:var(--orange-bright);position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none;opacity:0;background:rgba(23,43,54,.94);backdrop-filter:blur(16px);color:var(--paper);transition:opacity .25s,visibility 0s .3s}
.menu.is-open{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .25s,visibility 0s}
.menu-inner{max-width:var(--max);margin:0 auto;padding:48px var(--pad);height:100%;display:flex;flex-direction:column}
.menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.menu-h{font-family:var(--display);font-weight:700;font-size:28px;color:var(--dark-text)}
.menu-head-right{display:flex;align-items:center;gap:20px}
.menu-head-right p{font-size:10.5px;opacity:.6}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;overflow-y:auto}
.menu-list button{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--pap-12);
  font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:var(--pap-75);text-align:left}
.menu-list button:hover{color:var(--dark-text)}
.menu-list .m-num{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.16em;opacity:.45;width:34px}
.menu-list .m-name{flex:1}
.menu-list .m-tick{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent-text)}
.menu-list button.is-done{color:var(--dark-text)}
.menu-list button.is-flat .m-tick{opacity:.45;color:var(--pap-55)}
.menu-bar{display:flex;align-items:center;gap:18px;margin-top:30px}
.menu-track{flex:1;height:3px;background:var(--pap-18);position:relative}
.menu-track i{position:absolute;inset:0 auto 0 0;background:var(--orange);width:0;transition:width .4s ease}

/* hover: the layer / menu controls fill orange (0,4,0 so it wins over the surface colors) */
.layer .layer-actions .icon-btn:hover,.layer .layer-actions .icon-btn:focus-visible,
.menu .menu-head-right .icon-btn:hover,.menu .menu-head-right .icon-btn:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--ink)}