/* Native iOS composition. Every selector is gated by the Capacitor runtime. */
html[data-ma-runtime="ios"]{
  font-size:calc(16px * var(--ma-ios-text-scale,1));
  /* Reserve the full dock before JavaScript measures it, including the home indicator. */
  --ma-ios-dock-height:calc(60px + env(safe-area-inset-bottom,0px));
  --ma-page-inset-top:max(12px,env(safe-area-inset-top,0px));
  --ma-page-inset-bottom:calc(var(--ma-ios-dock-height) + 20px);
  --ma-toast-inset-bottom:var(--ma-page-inset-bottom);
}
html[data-ma-runtime="ios"] body{
  padding-top:var(--ma-page-inset-top);
  padding-bottom:var(--ma-page-inset-bottom);
}
html[data-ma-runtime="ios"] .ma-nav,
html[data-ma-runtime="ios"] .ma-nav-spacer{display:none!important;}

/* The system launch screen follows device appearance; the web launch frame
   follows the saved in-app preference from the first HTML paint. */
html[data-ma-runtime="ios"] .ma-loading-screen{background:var(--ma-native-page);backdrop-filter:none;-webkit-backdrop-filter:none;}
html[data-ma-runtime="ios"] .ma-loading-card{
  width:auto;padding:24px;border:0;background:transparent;box-shadow:none;color:var(--ma-text-strong);
}
html[data-ma-runtime="ios"] .ma-loading-head{flex-direction:column;text-align:center;gap:14px;margin:0;}
html[data-ma-runtime="ios"] .ma-loading-mark{
  width:116px;height:116px;border:0;border-radius:50%;
  background:transparent url('/assets/android-chrome-512.png') center / cover no-repeat;
  color:transparent;font-size:0;
  box-shadow:var(--ma-native-shadow);
}
html[data-ma-runtime="ios"][data-ma-native-warm="false"] .ma-loading-screen.is-ready .ma-loading-mark{
  animation:ma-ios-mark-spin .68s cubic-bezier(.28,.74,.25,1) both;
}
@keyframes ma-ios-mark-spin{
  0%{transform:rotate(0) scale(1);}
  65%{transform:rotate(270deg) scale(1.12);}
  100%{transform:rotate(360deg) scale(1);}
}
html[data-ma-runtime="ios"] .ma-loading-title{font-family:var(--ma-font-display);font-size:23px;letter-spacing:-.035em;}
html[data-ma-runtime="ios"] .ma-loading-sub{color:var(--ma-muted);font-size:12px;letter-spacing:.07em;text-transform:uppercase;}
html[data-ma-runtime="ios"] .ma-loading-card .ma-skeleton{display:none;}
html[data-ma-runtime="ios"][data-ma-native-warm="true"] .ma-loading-screen{display:none;}

/* Stable primary destinations; account actions belong to the page header. */
html[data-ma-runtime="ios"] .ma-ios-tabs{
  --ma-ios-accent:var(--ma-atlas);
  position:fixed;z-index:100;left:0;right:0;bottom:0;
  display:block;
  padding:5px max(10px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
  border-top:1px solid var(--ma-border);
  background:var(--ma-surface-strong);
  box-shadow:var(--ma-native-chrome-shadow);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
html[data-ma-runtime="ios"] body.ma-reading-page .ma-ios-tabs{--ma-ios-accent:var(--ma-reading);}
html[data-ma-runtime="ios"] body.ma-writing-page .ma-ios-tabs{--ma-ios-accent:var(--ma-writing);}
html[data-ma-runtime="ios"] body.ma-wordbank-page .ma-ios-tabs{--ma-ios-accent:var(--ma-words);}
html[data-ma-runtime="ios"] body:is(.ma-kana-page,.ma-results-page) .ma-ios-tabs{--ma-ios-accent:var(--ma-kana);}
html[data-ma-runtime="ios"] .ma-ios-profile{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;min-height:44px;padding:6px;border:1px solid var(--ma-border);border-radius:50%;background:var(--ma-control);color:var(--ma-text-strong);}
html[data-ma-runtime="ios"] .ma-ios-profile .ma-nav__avatar{width:30px;height:30px;min-width:30px;font-size:1rem;}
html[data-ma-runtime="ios"] .ma-ios-profile .ma-nav__action-label{display:none;}
html[data-ma-runtime="ios"] .ma-ios-page-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;}
html[data-ma-runtime="ios"] .ma-ios-page-tools a{display:flex;align-items:center;min-height:44px;color:var(--ma-muted);text-decoration:none;font-weight:750;}
html[data-ma-runtime="ios"] .ma-ios-practice-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-bottom:10px;}
html[data-ma-runtime="ios"] .ma-ios-practice-actions :is(#modifiersTab,#studyNavHideBtn){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:8px 12px;
  border:1px solid var(--ma-border);border-radius:12px;background:var(--ma-control);color:var(--ma-text-strong);font:750 .81rem/1.3 var(--ma-font-ui);
}
html[data-ma-runtime="ios"] .ma-ios-practice-actions #modifiersTab[aria-expanded="true"]{border-color:var(--ma-atlas);}
html[data-ma-runtime="ios"] body.trainer-session-active .ma-ios-practice-actions,
html[data-ma-runtime="ios"] body.study-nav-hidden .ma-ios-practice-actions{display:none;}
html[data-ma-runtime="ios"] .ma-ios-tabs__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;}
html[data-ma-runtime="ios"] .ma-ios-tab{
  flex:1 1 0;min-width:0;min-height:49px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:12px;color:var(--ma-muted);text-decoration:none;
  font-size:.625rem;font-weight:750;line-height:1.2;text-align:center;touch-action:manipulation;overflow-wrap:normal;
}
html[data-ma-runtime="ios"] button.ma-ios-tab{
  border:0;background:transparent;cursor:pointer;font-family:inherit;
}
html[data-ma-runtime="ios"] .ma-ios-tab__icon{font-family:var(--ma-font-jp);font-size:1.25rem;font-weight:800;line-height:1.2;}
html[data-ma-runtime="ios"] .ma-ios-tab.is-active{color:var(--ma-text-strong);background:color-mix(in srgb,var(--ma-ios-accent) 17%,transparent);}
html[data-ma-runtime="ios"] .ma-ios-tab:focus-visible,
html[data-ma-runtime="ios"] .ma-ios-profile:focus-visible,
html[data-ma-runtime="ios"] .ma-ios-practice-actions button:focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:-3px;}

/* Focus uses the same exit control; practice owns entry and session state. */
html[data-ma-runtime="ios"] .ma-ios-tabs>.ma-nav-handle{display:none;}
html[data-ma-runtime="ios"] body.study-nav-hidden .ma-ios-tabs{grid-template-columns:1fr;}
html[data-ma-runtime="ios"] body.study-nav-hidden .ma-ios-tabs__links,
html[data-ma-runtime="ios"] body.study-nav-hidden .ma-ios-profile{display:none;}
html[data-ma-runtime="ios"] body.study-nav-hidden .ma-ios-tabs #studyNavShowBtn{
  display:inline-flex;position:static;justify-self:center;min-height:44px;width:auto;padding:0 20px;
  border-radius:var(--ma-radius-pill);font-size:.86rem;
}
html[data-ma-runtime="ios"] body:is(.ma-phone-keyboard-open,.ma-ios-editing) .ma-ios-tabs{display:none;}
html[data-ma-runtime="ios"] body:is(.ma-phone-keyboard-open,.ma-ios-editing){--ma-ios-dock-height:0px;}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active:not(.ma-session-paused):not(.trainer-session-result):not(.ma-study-feedback-open){
  --ma-ios-dock-height:0px;
  padding-bottom:calc(var(--ma-ios-custom-kb-height,210px) + 12px);
  --ma-toast-inset-bottom:calc(var(--ma-ios-custom-kb-height,210px) + 20px);
}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active:not(.ma-session-paused):not(.trainer-session-result):not(.ma-study-feedback-open) .ma-ios-tabs{display:none;}
html[data-ma-runtime="ios"] .ma-ios-reading-keyboard{display:none;}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active:not(.ma-session-paused):not(.trainer-session-result):not(.ma-study-feedback-open) .ma-ios-reading-keyboard{
  position:fixed;z-index:101;left:0;right:0;bottom:0;
  display:grid;gap:7px;padding:11px max(4px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));
  border-top:1px solid var(--ma-border);background:var(--ma-surface-strong);
  box-shadow:var(--ma-native-chrome-shadow);
}
html[data-ma-runtime="ios"] .ma-ios-reading-keyboard__row{display:flex;gap:3px;justify-content:center;}
html[data-ma-runtime="ios"] .ma-ios-reading-keyboard__key{
  flex:1 1 0;min-width:0;height:60px;padding:0;
  border:1px solid var(--ma-border);border-radius:10px;
  background:var(--ma-control);color:var(--ma-text-strong);
  font:700 clamp(20px,1.25rem,26px)/1 var(--ma-font-display);text-transform:uppercase;
  touch-action:manipulation;cursor:pointer;
  box-shadow:var(--ma-native-key-shadow);
  transition:transform .07s ease-out,box-shadow .07s ease-out,background-color .07s ease-out;
}
html[data-ma-runtime="ios"] .ma-ios-reading-keyboard__key:is(:active,.is-pressed){
  transform:translateY(3px) scale(.97);
  box-shadow:var(--ma-native-key-pressed-shadow);
  background:var(--ma-control-hover);
}
html[data-ma-runtime="ios"] .ma-ios-reading-keyboard__key--delete{flex:1.25;background:var(--ma-control-hover);}
html[data-ma-runtime="ios"] .ma-ios-reading-keyboard__key:focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:-3px;}

/* The dock trigger opens the same accessible dialog as the web trainer. */
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page) .bottom-shell.ma-modifiers-only{display:none;}
html[data-ma-runtime="ios"] .ma-practice-sheet{
  width:min(760px,100%);margin:auto auto 0;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 12px);
  border-radius:28px 28px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);
}
html[data-ma-runtime="ios"] .ma-practice-sheet__handle{display:grid;place-items:center;flex:none;height:24px;touch-action:none;}
html[data-ma-runtime="ios"] .ma-practice-sheet__handle span{height:5px;width:36px;border-radius:5px;background:var(--ma-border-strong,var(--ma-muted));opacity:.6;}
html[data-ma-runtime="ios"] .ma-practice-sheet__header{padding-top:2px;}

/* Keep a session centered in the visible area, and compact it for the keyboard. */
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page) .ma-trainer-shell{display:block;min-height:0;}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page) .ma-trainer-card{
  width:min(680px,100%);min-height:0;margin:0 auto 22px;padding:22px 16px 26px;
}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page):not(.trainer-session-active) .ma-trainer-prompt-wrap{
  min-height:90px;margin:4px auto 12px;
}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page) .ma-trainer-stage,
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page) .ma-trainer-session-controls{width:100%;justify-items:center;}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page).study-nav-hidden .ma-trainer-shell{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100svh - var(--ma-ios-dock-height) - env(safe-area-inset-top,0px) - 26px);
}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page).study-nav-hidden .ma-trainer-card{margin:0 auto;}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page):is(.ma-phone-keyboard-open,.ma-ios-editing) .ma-trainer-shell{
  display:block;min-height:0;
  max-height:var(--ma-ios-visible-height,100dvh);overflow-y:auto;overscroll-behavior:contain;
}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page):is(.ma-phone-keyboard-open,.ma-ios-editing) .ma-trainer-card{
  padding:12px 12px 16px;margin:0 auto 12px;
}
html[data-ma-runtime="ios"] body:is(.ma-reading-page,.ma-writing-page).trainer-session-active:is(.ma-phone-keyboard-open,.ma-ios-editing) .ma-trainer-prompt-wrap{
  min-height:clamp(70px,15vh,110px);padding:2px 0;
}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active .ma-trainer-card{
  margin-bottom:8px;padding:10px 12px 12px;
}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active .ma-trainer-prompt-wrap{
  min-height:clamp(105px,20svh,155px);padding:4px 0;
}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active .hiragana{font-size:clamp(5.5rem,27vw,7rem);}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active .ma-trainer-session-controls{
  margin-top:8px;padding-top:8px;
}
html[data-ma-runtime="ios"] body.ma-ios-custom-input.trainer-session-active .session-actions .ma-button{min-height:44px;}
/* The early head bootstrap opts the native app into cross-document transitions. */
@keyframes ma-ios-leave{to{opacity:0}}
@keyframes ma-ios-enter{from{opacity:.92;transform:translateY(3px)}to{opacity:1;transform:none}}
html[data-ma-runtime="ios"]::view-transition-old(root){animation:90ms ease-out both ma-ios-leave;}
html[data-ma-runtime="ios"]::view-transition-new(root){animation:140ms ease-out both ma-ios-enter;}
/* At large system text sizes, reflow the existing surfaces instead of cropping. */
html[data-ma-runtime="ios"][data-ma-large-text] .ma-ios-practice-actions{flex-wrap:wrap;}
html[data-ma-runtime="ios"] .ma-ios-accessibility-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  html[data-ma-runtime="ios"]::view-transition-old(root),html[data-ma-runtime="ios"]::view-transition-new(root){animation-duration:.01ms;}
  html[data-ma-runtime="ios"] .ma-ios-tabs,
  html[data-ma-runtime="ios"] .ma-ios-tabs__links,
  html[data-ma-runtime="ios"] .ma-loading-screen{transition:none;}
  html[data-ma-runtime="ios"] .ma-loading-mark,
  html[data-ma-runtime="ios"] .ma-loading-title,
  html[data-ma-runtime="ios"] .ma-loading-sub{animation:none!important;}
  html[data-ma-runtime="ios"] .ma-ios-reading-keyboard__key{transition:none;}
}
/* Native preference controls live in the existing Settings drawer. */
html[data-ma-runtime="ios"] .ma-native-preference{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;min-width:0;width:100%;font-weight:700;}
html[data-ma-runtime="ios"] .ma-native-preference span{min-width:0;overflow-wrap:anywhere;}
html[data-ma-runtime="ios"] .ma-native-preference input[type="checkbox"]{appearance:none;-webkit-appearance:none;position:relative;width:48px;height:28px;margin:8px 0;border:1px solid var(--ma-border);border-radius:16px;background:var(--ma-control);flex:0 0 auto;cursor:pointer;}
html[data-ma-runtime="ios"] .ma-native-preference input[type="checkbox"]::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ma-native-switch-thumb);box-shadow:var(--ma-native-shadow);}
html[data-ma-runtime="ios"] .ma-native-preference input[type="checkbox"]:checked{background:var(--ma-atlas);}
html[data-ma-runtime="ios"] .ma-native-preference input[type="checkbox"]:checked::before{transform:translateX(20px);background:var(--ma-native-switch-thumb);}
html[data-ma-runtime="ios"] .ma-native-preference input[type="checkbox"]:focus-visible{outline:2px solid var(--ma-atlas);outline-offset:3px;}
html[data-ma-runtime="ios"] .ma-native-preference input[type="checkbox"]:disabled{opacity:.45;cursor:default;}
html[data-ma-runtime="ios"] .ma-native-preference input[type="time"]{color-scheme:dark;width:auto;min-height:44px;max-width:140px;padding:8px;border:1px solid var(--ma-border);border-radius:12px;background:var(--ma-card);color:var(--ma-text);font:inherit;}
html[data-ma-runtime="ios"][data-ma-theme="light"] .ma-native-preference input[type="time"]{color-scheme:light;}