/* Native AppShell.swift / DesignSystem.swift layout, at default Dynamic Type. */
.native-shell{display:block;max-width:none;min-height:100dvh;margin:0 auto;background:#fff;box-shadow:none;color:#3c3c3c;--line:#e5e5e5;--muted:#777;--tab-height:calc(64px + env(safe-area-inset-bottom,0px))}
.native-content{padding:24px 24px calc(var(--tab-height) + 24px);min-width:0}
.native-content h1,.native-content h2,.native-content h3{letter-spacing:0;line-height:1.25}
.native-content p{line-height:1.45}
.native-content .subtitle{font-size:14px;color:#777;margin:0;line-height:1.4}
.native-content .eyebrow{font-size:13px;font-weight:700;color:#777;letter-spacing:0}
.native-content .panel{padding:22px;border:2px solid #e5e5e5;border-radius:18px;background:#fff}
.native-content .icon-button{width:44px;height:44px;flex:none;border-radius:0;padding:0;color:#777}
.native-content .icon-button:hover{background:none}
.native-content .icon-button svg{width:22px;height:22px}
.native-content .button{font-size:17px;font-weight:800;min-height:56px;border:2px solid #46a302;border-radius:16px;padding:16px 20px;background:#58cc02;color:#285800;box-shadow:0 4px 0 #46a302;line-height:1.25}
.native-content .button:active{transform:translateY(4px);box-shadow:none}
.native-content .button:disabled{opacity:.5}
.native-navigation{position:relative;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:44px;margin-top:env(safe-area-inset-top,0px);padding:0 12px;background:#fff;text-align:center}
.native-navigation strong{font-size:17px;font-weight:600}
.native-navigation .icon-button{width:44px;height:44px;color:#46a302}
.native-tabbar.mobile-nav{position:fixed;display:flex;left:50%;right:auto;bottom:0;transform:translateX(-50%);width:100%;height:var(--tab-height);z-index:40;padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px));gap:0;background:#fffffff5;border-top:1px solid #e5e5e5;backdrop-filter:blur(16px)}
.native-tabbar.mobile-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:3px 0;border-radius:0;color:#777;font-size:10px;font-weight:500;line-height:1.2}
.native-tabbar.mobile-nav button.active{background:none;box-shadow:none;color:#46a302}
.native-tabbar.mobile-nav svg{width:25px;height:25px}
.home-content{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(var(--tab-height) + 24px)}
.native-home{display:flex;flex-direction:column;min-height:calc(100dvh - var(--tab-height) - 40px - env(safe-area-inset-top,0px))}
.home-brand-row{display:flex;align-items:center;gap:12px;flex:none}
.home-brand-row h1{font-size:clamp(21px,6.75vw,28px);font-weight:800;color:#365cfa;line-height:1.2;white-space:nowrap;flex:1;letter-spacing:0}
.home-brand-row .icon-button{width:44px;height:44px;background:#e5e5e559;border-radius:50%;color:#3c3c3c}
.home-brand-row .icon-button svg{width:20px;height:20px}
.home-spacer{min-height:32px;flex:1}
.home-practice{display:flex;flex-direction:column;gap:24px;flex:none}
.native-home .lesson-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;margin:0;border-radius:20px;border:2px solid #58cc0280;background:#d7ffb8;color:#285800}
.native-home .lesson-card>span{min-width:0}
.native-home .lesson-card small{display:block;font-size:14px;font-weight:700;line-height:1.2}
.native-home .lesson-card strong{display:block;font-size:clamp(16px,5.85vw,23px);font-weight:800;margin-top:6px;line-height:1.25;letter-spacing:0;white-space:nowrap}
.native-home .lesson-card .lesson-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;background:#ffffff99;color:#285800;padding:0}
.native-home .lesson-icon svg{width:23px;height:23px}
.native-home .stage-list{gap:12px}
.native-home .stage-card{align-items:flex-start;gap:15px;padding:15px;border:2px solid #e5e5e5;border-radius:16px;box-shadow:0 4px 0 #e5e5e5;background:#fff;transition:none}
.native-home .stage-card:hover{transform:none;border-color:#e5e5e5}
.native-home .stage-card.current{border-color:var(--under);box-shadow:0 4px 0 var(--under)}
.native-home .stage-card:active{transform:translateY(4px);box-shadow:none}
.native-home .stage-card:disabled{opacity:.55}
.native-home .stage-card .number{width:44px!important;height:44px!important;display:grid;place-items:center;font-size:21px;font-weight:800;border-radius:13px;background:var(--pale);color:var(--ink)}
.native-content .stage-text{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.native-content .stage-text small{font-size:12px;font-weight:700;color:#777;margin:0;line-height:1.2}
.native-content .stage-text strong{font-size:17px;font-weight:700;line-height:1.25}
.native-content .stage-text p{font-size:12px;color:#777;margin:0;line-height:1.35}
.native-content .chevron{width:15px;height:18px;flex:none;color:#777;margin-top:13px}
.native-content .chevron.done{color:var(--under)}
.native-courses{display:flex;flex-direction:column;gap:22px}
.course-heading{display:flex;flex-direction:column;gap:7px}
.course-heading h1{font-size:30px;font-weight:700}
.native-segment{display:flex;gap:2px;padding:2px;background:#efeff0;border-radius:8px;min-height:32px}
.native-segment button{flex:1;border-radius:6px;padding:5px 3px;font-size:13px;line-height:1.2;font-weight:500}
.native-segment button.active{background:#fff;box-shadow:0 1px 3px #0002;font-weight:600}
.native-courses .cards{gap:10px}
.native-courses .lesson-row{padding:14px;gap:15px;border:2px solid #e5e5e5;border-radius:18px;background:#fff;color:#3c3c3c;align-items:center}
.native-courses .lesson-index{display:grid;place-items:center;flex:none;width:49px;height:53px;border-radius:16px;background:#fff;color:#3c3c3c;font-size:21px;font-weight:500}
.native-courses .lesson-index.review{background:#fff4cc}
.lesson-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.native-courses .lesson-copy strong{font-size:15px;font-weight:700;line-height:1.3}
.native-courses .lesson-copy small{font-size:11px;color:#777;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lesson-status{display:flex;flex-direction:column;gap:6px;align-items:center;flex:none;color:#777}
.lesson-status svg{width:16px;height:16px}
.native-courses .lesson-status small{font-size:10px;font-weight:500;white-space:nowrap}
.native-detail{display:flex;flex-direction:column;gap:26px}
.detail-heading{display:flex;flex-direction:column;gap:10px}
.detail-heading h1{font-size:31px;font-weight:700}
.detail-stages{display:flex;flex-direction:column;gap:18px}
.detail-stage{display:flex;align-items:center;gap:14px;padding:0;min-height:60px;text-align:left;width:100%}
.detail-stage:disabled{opacity:.55}
.detail-stage-icon{width:48px;height:48px;border-radius:14px;background:var(--pale);color:var(--ink);display:grid;place-items:center;flex:none}
.detail-stage-icon svg{width:21px;height:21px}
.detail-stage .stage-text{gap:6px}
.detail-stage .stage-text p{font-size:11px}
.detail-stage .chevron{margin:0;color:#e5e5e5}
.native-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.native-section-title h2,.today-records h2{font-size:20px;font-weight:700}
.native-section-title small{font-size:12px;color:#777;font-weight:500;white-space:nowrap}
.expression-list{display:flex;flex-direction:column;gap:10px}
.expression-list h3{font-size:13px;font-weight:700}
.expression{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px;min-height:51px;border-radius:16px;text-align:left;font-size:18px;font-weight:600;color:#3c3c3c}
.expression.start{background:#ddf4ff}.expression.end{background:#fff4cc}
.expression svg{width:22px;height:22px;flex:none}
.native-favorites{display:flex;flex-direction:column;gap:20px;padding-bottom:90px}
.native-favorites h1,.native-mistakes h1{font-size:27px;font-weight:700}
.favorite-summary{font-size:13px;color:#777;min-height:44px}
.favorite-summary button{font-size:14px;font-weight:700;color:#285800;min-height:44px;padding:0}
.native-favorites .cards{gap:20px}
.native-favorites .favorite-row{gap:8px;padding:14px;border:2px solid #e5e5e5;border-radius:18px}
.favorite-toggle{position:relative;width:44px;height:44px;display:grid;place-items:center;flex:none;cursor:pointer}
.favorite-toggle .check{position:absolute;inset:0;width:44px;height:44px;margin:0;opacity:0;cursor:pointer;z-index:1}
.favorite-check{display:grid;place-items:center;width:24px;height:24px;border:2px solid #e5e5e5;border-radius:50%;color:#fff;background:#fff}
.favorite-check svg{width:16px;height:16px;visibility:hidden;stroke-width:3}
.favorite-toggle .check:checked+.favorite-check{background:var(--under);border-color:var(--under)}
.favorite-toggle .check:checked+.favorite-check svg{visibility:visible}
.favorite-toggle .check:focus-visible+.favorite-check{outline:3px solid #365cfa;outline-offset:4px}
.native-favorites .favorite-copy{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;min-height:44px;padding:0;text-align:left}
.native-favorites .favorite-copy strong{font-size:17px;font-weight:600;line-height:1.35}
.favorite-method{font-size:14px;font-weight:700;color:var(--ink);line-height:1.25}
.native-favorites .favorite-copy small{font-size:12px;color:#777;line-height:1.35;margin:0}
.native-favorites .heart.saved{color:#d9363e}
.native-favorites .favorite-start{position:fixed;left:50%;transform:translateX(-50%);width:100%;bottom:var(--tab-height);margin:0;padding:14px 24px 20px;background:#fff;z-index:5}
.native-favorites .empty{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:280px;padding:30px 0;text-align:center}
.native-favorites .empty svg{width:54px;height:54px;color:#777;margin-bottom:16px}
.native-favorites .empty h2{font-size:20px;margin:0 0 8px;font-weight:700}
.native-favorites .empty p{font-size:14px;color:#777;max-width:300px}
.native-records{display:flex;flex-direction:column;gap:25px}
.native-records h1{font-size:29px;font-weight:700}
.native-content .metric-pair{display:flex;justify-content:space-between;gap:16px}
.native-content .metric-pair.mint{background:#d7ffb8}
.native-metric{display:flex;flex-direction:column;gap:12px}
.native-metric>small{font-size:12px;color:#777}
.native-metric>div{display:flex;gap:4px;align-items:baseline}
.native-metric strong{font-size:36px;font-weight:600;line-height:1.2}
.native-metric span{font-size:12px;color:#777}
.mistakes-link{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-size:15px;font-weight:600;text-align:left}
.mistakes-link span{display:flex;align-items:center;gap:8px}
.mistakes-link svg{width:18px;height:18px}
.today-records{display:flex;flex-direction:column;gap:20px}
.today-records>div{display:flex;justify-content:space-between;font-size:14px}
.native-records .record-note{font-size:12px;color:#777;line-height:1.6}
.journey{display:flex;flex-direction:column;gap:12px}
.journey .bar{height:4px;background:#e5e5e5}
.journey .bar>i{background:#58cc02}
.journey p{font-size:12px;color:#777}
.native-mistakes{display:flex;flex-direction:column;gap:23px}
.native-mistakes>.panel{display:flex;flex-direction:column;gap:17px}
.mistake-sentence{display:flex;flex-direction:column;gap:6px;padding:4px 0;text-align:left}
.mistake-sentence strong{font-size:16px;font-weight:600}
.mistake-sentence small{font-size:12px;color:#777}
@media(max-width:360px){.home-brand-row h1{font-size:21px}.native-home .lesson-card strong{font-size:17px}.native-content{padding-left:20px;padding-right:20px}.native-favorites .favorite-start{padding-left:20px;padding-right:20px}}
/* SwiftUI strokeBorder is an overlay; it does not add to native measurements. */
.native-home .lesson-card{border:0;outline:2px solid #58cc0280;outline-offset:-2px}
.native-home .stage-card{border:0;outline:2px solid #e5e5e5;outline-offset:-2px}
.native-home .stage-card.current{outline-color:var(--under)}
.native-content .stage-text small{line-height:1.2}.native-content .stage-text strong{line-height:1.2}.native-content .stage-text p{line-height:1.2}
.native-content .panel,.native-courses .lesson-row,.native-content .favorite-row{border:0;outline:2px solid #e5e5e5;outline-offset:-2px}
/* Match the native iOS26 floating tab bar shown by the source app. */
.native-tabbar.mobile-nav{width:calc(100% - 40px);max-width:600px;height:58px;bottom:max(12px,env(safe-area-inset-bottom));border:0;border-radius:32px;padding:5px 8px;box-shadow:0 4px 24px #0000000a;background:#fffffff0}
.native-tabbar.mobile-nav button{border-radius:28px;color:#171717}.native-tabbar.mobile-nav button.active{background:#ededed;color:#46a302}
.native-content .button{border:0;outline:2px solid #46a302;outline-offset:-2px}.native-tabbar.mobile-nav{max-width:none}