/* TOEIC Sprint UX refinement — compact, legible, native dropdown navigation.
 * Desktop: four primary destinations plus "more tools". iPhone: 4 bottom actions.
 * The Academy uses an accessible <select>; exam selection also uses native <select> on mobile.
 */
:root{--ink:#182b20;--muted:#667c6b;--line:#dfe8df}
.app-shell .nav-item .nav-symbol{display:grid;place-items:center;flex:none;width:22px;height:22px}
.app-shell .nav-item .nav-symbol svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar-dropdown{margin:19px 7px 0;border:1px solid #e4ebe0;border-radius:13px;background:#fff;overflow:hidden;color:#68836d}
.sidebar-dropdown>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:13px 14px;font-size:12px;font-weight:760;min-height:43px}
.sidebar-dropdown>summary::-webkit-details-marker,.top-tools>summary::-webkit-details-marker{display:none}
.sidebar-dropdown[open]>summary{background:#f1f6ed;color:#2a5b38}
.sidebar-dropdown[open] summary span,.top-tools[open] summary span{transform:rotate(180deg)}
.sidebar-dropdown-items{display:grid;padding:6px;border-top:1px solid #e5ece3;gap:3px}
.sidebar-dropdown-items button{min-height:40px;border:0;background:transparent;border-radius:9px;padding:10px 12px;text-align:left;font-size:12px;font-weight:650;color:#68806d}
.sidebar-dropdown-items button:hover{background:#f3f7f0;color:#315d37}
.topbar{height:67px}
.topbar-left{font-size:10px;letter-spacing:.105em}
.topbar-right{gap:10px}
.top-tools{position:relative}
.top-tools>summary{list-style:none;display:flex;align-items:center;gap:7px;min-height:42px;padding:9px 13px;border:1px solid #e0e8dd;border-radius:11px;background:rgba(255,255,255,.92);font-size:12px;font-weight:750;color:#4b6750;cursor:pointer}
.top-tools-menu{z-index:120;position:absolute;right:0;top:calc(100% + 8px);min-width:196px;padding:7px;background:#fff;border:1px solid #e0e8de;border-radius:13px;box-shadow:0 16px 35px rgba(32,45,35,.13);display:grid;gap:3px}
.top-tools-menu button{border:0;background:transparent;text-align:left;padding:12px;border-radius:9px;font-size:12px;font-weight:700;color:#45614b}
.top-tools-menu button:hover{background:#edf5e7}
.top-cta{font-size:12px;font-weight:800}
.page{padding-top:37px}
.kicker{font-size:10px;margin-bottom:13px}
.hero{min-height:250px;padding:31px 36px;margin-bottom:18px}
.hero h1{font-size:clamp(31px,3.1vw,43px);line-height:1.23;letter-spacing:-.065em}
.hero-top{margin-bottom:16px}
.hero p{font-size:12px;max-width:530px;margin-bottom:19px;line-height:1.8}
.hero-actions{gap:9px}
.hero-actions .btn{min-height:40px;padding:10px 14px}
.stats{margin-bottom:31px;gap:11px}
.stat-card{min-height:106px;padding:18px 19px}
.stat-label{margin-bottom:12px}
.stat-num{font-size:30px}
.section-title h2{font-size:19px}
.two-col{gap:15px}
.mode{min-height:126px;padding:17px 18px}
.mode.wide{min-height:98px}
.mode-title{font-size:16px}
.mode-desc{font-size:11px}
.surface{padding:20px}
.resource-list{margin-top:14px}
.resource-link{padding:12px 15px}

/* Academy: dropdown replaces eleven oversized chips. */
.academy-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 0 22px;border-bottom:1px solid #e1e8dd;margin-bottom:27px}
.academy-select-label{display:grid;gap:7px;min-width:245px;flex:1 1 265px;max-width:360px}
.academy-select-label>span{font-size:10px;font-weight:800;color:#79907c;letter-spacing:.11em}
#academy-page-select,.paper-select-container select{appearance:none;-webkit-appearance:none;border:1px solid #d5e3d1;color:#285336;background-color:#fff;border-radius:12px;min-height:46px;width:100%;font-size:14px;font-weight:750;padding:12px 41px 12px 15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2358755c' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
#academy-page-select:focus-visible,.paper-select-container select:focus-visible{outline:3px solid #bddc9d;outline-offset:2px}
.academy-quick{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.academy-quick button{border:1px solid #d9e6d5;background:white;border-radius:10px;padding:11px 13px;min-height:45px;font-size:12px;font-weight:760;color:#607b65}
.academy-quick button.current{background:#213f2c;color:#fff;border-color:#213f2c}
.learn-container{padding-top:26px}
.learn-title{font-size:clamp(30px,3.3vw,40px);line-height:1.25;letter-spacing:-.055em}
.learn-desc{font-size:13px;line-height:1.78}
.learn-feature{min-height:206px;padding:24px}
.learn-feature h2{font-size:21px}
.learn-kpis{gap:10px;margin:18px 0 24px}
.learn-kpi{padding:18px}
.learn-kpi b{font-size:26px}
.learn-actions{gap:7px}
.learn-actions .learn-btn{min-height:40px;padding:9px 13px;font-size:12px}
.learn-header{height:61px}
.learn-logo{font-size:13px}
.learn-logo i{font-weight:550;color:#748878;font-style:normal;font-size:10px;letter-spacing:.08em}
.learn-header-links button{font-size:11px}

/* Exam library: desktop cards, mobile native selector rather than clipped horizontal carousel. */
.exam-lobby{max-width:1060px;padding-top:31px}
.paper-library{margin-bottom:18px}
.paper-library-top h2{font-size:21px}
.paper-library-top .exam-eyebrow{font-size:10px}
.paper-library-top>span{font-size:10px}
.paper-list{gap:9px}
.paper-choice{min-height:103px;padding:14px;gap:9px}
.paper-number{font-size:23px}
.paper-description b{font-size:11px}
.paper-description small{font-size:10px}
.paper-select-container{display:none}
.exam-lobby-hero{padding:31px 35px;margin-bottom:18px}
.exam-lobby-hero h1{font-size:clamp(33px,3.3vw,44px);line-height:1.17;letter-spacing:-.06em;margin:11px 0}
.exam-lobby-hero p{max-width:610px;font-size:12px;line-height:1.75}
.exam-lobby-hero .exam-eyebrow{font-size:10px}
.exam-metric{padding:17px}
.exam-metric b{font-size:25px}
.exam-metrics{gap:9px}
.exam-audio-truth{padding:16px 20px;margin:13px 0}
.exam-start-option{padding:20px;min-height:132px}
.exam-start-option h3{font-size:18px;margin:12px 0 6px}

/* keep important actions visible with accessible tap targets */
button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #a8d37e;outline-offset:2px}
@media(max-width:740px){
 .sidebar{bottom:0;z-index:100}
 .sidebar-dropdown{display:none}
 .nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
 .sidebar .nav-item{gap:3px;font-size:11px;min-height:55px;padding:7px 3px 9px}
 .sidebar .nav-item .nav-symbol{width:25px;height:25px}
 .sidebar .nav-item .nav-symbol svg{width:20px;height:20px;stroke-width:1.8}
 .sidebar .nav-item.active .nav-symbol{background:#e6f1d8;border-radius:8px}
 .topbar{height:59px;padding:0 15px}
 .topbar-left{font-size:9px;letter-spacing:0;max-width:34%;line-height:1.4}
 .topbar-right{gap:6px}
 .topbar .top-cta{padding:10px 12px;min-height:40px}
 .top-tools>summary{padding:9px 11px;min-height:40px}
 .top-tools-menu{width:min(270px,84vw);right:0}
 .page{padding:24px 14px calc(92px + env(safe-area-inset-bottom))}
 .hero{padding:24px 23px;min-height:0;border-radius:18px;margin-bottom:13px}
 .hero h1{font-size:clamp(27px,7.3vw,34px);line-height:1.28}
 .hero p{font-size:12px;margin-bottom:16px}
 .hero-actions{gap:7px}
 .hero-actions .btn:first-child{flex:1 0 100%}
 .hero-actions .btn{padding:9px 12px;font-size:12px;min-height:42px}
 .stats{gap:7px;margin-bottom:24px}
 .stat-card{padding:13px 11px;min-height:100px}
 .stat-label{font-size:10px}
 .stat-num{font-size:25px}
 .stat-note{font-size:9px}
 .section-title{margin-bottom:11px}
 .section-title h2{font-size:18px}
 .modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .mode{min-height:115px;padding:14px 13px;gap:5px;border-radius:13px}
 .mode-title{font-size:15px}
 .mode-desc{font-size:10px;line-height:1.55}
 .mode.wide{grid-column:1/-1;min-height:92px}
 .surface{padding:18px}
 .chart{height:130px}
 .resource-list{margin-top:12px}
 .learn-container{padding:20px 15px 102px}
 .learn-title{font-size:30px;line-height:1.24}
 .academy-toolbar{display:grid;gap:9px;grid-template-columns:1fr;margin-bottom:22px;padding-bottom:17px}
 .academy-select-label{width:100%;max-width:none;min-width:0;display:grid}
 .academy-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .academy-quick button{font-size:11px;min-height:42px;padding:9px 5px}
 #academy-page-select{min-height:47px}
 .learn-feature{min-height:174px;padding:22px}
 .learn-feature h2{font-size:20px}
 .learn-feature p{font-size:12px}
 .learn-kpi{padding:14px}
 .learn-kpi b{font-size:24px}
 .learn-header{height:58px}
 .learn-logo{font-size:12px}
 .learn-logo-mark{width:31px;height:31px}
 .learn-logo i{display:none}
 .learn-header-links button{font-size:10px;padding:7px}
 .learn-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .learn-actions .learn-btn{padding:10px 8px;font-size:11px;line-height:1.5;text-align:center}
 .exam-lobby{padding:20px 14px 105px}
 .paper-library{margin:0 0 14px}
 .paper-library-top{margin:0 0 9px}
 .paper-library-top>span{display:none}
 .paper-library-top h2{font-size:21px}
 .paper-list{display:none}
 .paper-select-container{display:grid;gap:7px}
 .paper-select-container label{color:#708874;font-size:11px;font-weight:750}
 .paper-select-container select{min-height:48px}
 .exam-lobby-hero{padding:25px 23px;border-radius:19px}
 .exam-lobby-hero h1{font-size:33px;line-height:1.2}
 .exam-lobby-hero p{font-size:12px;line-height:1.8}
 .exam-lobby-hero .exam-primary-btn{width:100%}
 .exam-lobby-hero .exam-outline-btn{width:100%;margin-top:8px}
 .exam-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .exam-metric{padding:14px}
 .exam-metric b{font-size:23px}
 .exam-metric small{font-size:10px}
 .exam-header{height:61px;padding:0 12px}
 .exam-logo-mark{height:31px;width:31px}
 .exam-logo-text{font-size:12px}
 .exam-logo-text small{font-size:8px}
 .exam-number{margin:17px 0 8px}
 .exam-paper{padding:19px 15px}
 .exam-question{font-size:19px;line-height:1.6}
 .exam-audio{padding:13px}
 .exam-option{font-size:13px}
}
@media(max-width:390px){
 .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mode.wide{grid-column:1/-1}
 .learn-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .exam-lobby-hero h1{font-size:31px}
}

.exam-format-link{margin:17px 0;text-align:left}.exam-format-link a{font-size:12px;font-weight:780;color:#3e7045;text-decoration:underline;text-underline-offset:3px}.exam-format-link a:hover{color:#235d31}