/* VF1-E · APRENDER — runtime CSS. Owns only the Aprender visual surface.
   Global Dock/navigation ownership remains in the existing Shell. */

.vf1e-aprender-root{
  position:fixed;
  inset:0;
  z-index:30;
  width:100%;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:#0e1726;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

/* VF1-E · Real-WebKit viewport ownership production corrective.
   Causal authority: the ACTIVE Aprender route must own one physical Shell
   height in document flow. Header/footer keep natural height; main consumes
   only the remaining space. The fixed visual root remains out of flow and
   keeps its existing 100dvh contract. */
body:has(> main.wrap > #learn.screen.active){
  height:100lvh;
  min-height:100lvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body:has(> main.wrap > #learn.screen.active) > .app-header,
body:has(> main.wrap > #learn.screen.active) > .immersive-return-bar,
body:has(> main.wrap > #learn.screen.active) > footer{
  flex:0 0 auto;
}
body:has(> main.wrap > #learn.screen.active) > main.wrap{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body:has(> main.wrap > #learn.screen.active) > main.wrap > #learn.screen.active{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  height:100%;
  overflow:hidden;
}

/* VF1-E · B2 HIT05 — Training standalone physical-flow continuity.
   Keep one physical large-viewport minimum in document flow while Training
   owns the active learning route. This is a minimum only: overflowing
   Training content remains naturally reachable. */
@media (display-mode: standalone){
  body:has(> main.wrap > #review.screen.active){
    min-height:100lvh;
  }
}

/* Layout resolves Hero + visual-max BEFORE camera math. The camera reads the
   resulting .vf1e-camera-viewport rectangle and never invents shell geometry. */
.vf1e-stage{
  --vf1e-hero-height:104px;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:var(--vf1e-hero-height) minmax(0,1fr);
  overflow:hidden;
  position:relative;
  background:#0e1726;
}

.vf1e-hero{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  z-index:2;
}
.vf1e-hero-ambient{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

.vf1e-camera-viewport{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  z-index:1;
}

/* Portrait authority: 440×956 => Hero 168 + world viewport 440×788. */
@media (orientation:portrait){
  .vf1e-stage{--vf1e-hero-height:168px}
}

/* Landscape family: exact 88px at 440px outer height, fluid to the exact
   Wide 104px anchor at 768px. This is layout geometry, not camera math. */
@media (orientation:landscape){
  .vf1e-stage{--vf1e-hero-height:clamp(88px,calc(66.536585px + 4.878049dvh),104px)}
}

/* Wide visual max: larger desktop/window dimensions grow outside the stage;
   the projected world remains capped at 1024×664. */
@media (orientation:landscape) and (min-height:768px){
  .vf1e-stage{max-width:1024px;max-height:768px;margin:auto}
}

.vf1e-world{position:relative;will-change:transform}
.vf1e-layer{position:absolute;display:block}
.vf1e-world-bg{left:0;top:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vf1e-sign{pointer-events:none;object-fit:contain}
.vf1e-sign-copy{pointer-events:none;overflow:hidden;color:#3a271c;text-align:center;line-height:1;white-space:nowrap}
/* B2 unified-world authority scales the existing live-label geometry by
   1.2890625 in WORLD units so artwork + live text stay under one camera. */
.vf1e-sign-title,.vf1e-sign-status{position:absolute;left:5.15625px;width:60.5859375px;display:block;overflow:hidden;text-overflow:clip;white-space:nowrap;text-align:center}
.vf1e-sign-title{font-family:Georgia,'Times New Roman',serif;font-size:6.4453125px;line-height:9.28125px;font-weight:400;color:#3a271c}
.vf1e-sign-status{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:3.8671875px;line-height:7.08984375px;font-weight:600}
.vf1e-sign-copy-training .vf1e-sign-title{top:21.9140625px}.vf1e-sign-copy-training .vf1e-sign-status{top:29.00390625px;color:#b6442c}
.vf1e-sign-copy-kana .vf1e-sign-title{top:18.3046875px}.vf1e-sign-copy-kana .vf1e-sign-status{top:25.265625px;color:#4b6b89}
.vf1e-sign-copy-dojo .vf1e-sign-title{top:27.0703125px}.vf1e-sign-copy-dojo .vf1e-sign-status{top:36.09375px;color:#5b6f4e}

.vf1e-station{
  border:0;background:transparent;padding:0;margin:0;
  border-radius:16px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  outline-offset:3px;
}
.vf1e-station:focus-visible{outline:3px solid #fff8ed;outline-offset:2px}
.vf1e-station[disabled]{cursor:default;pointer-events:none;opacity:.55}
.vf1e-station-indicator{
  box-sizing:content-box;width:12px;height:12px;border-radius:50%;
  background:#c0603a;border:2px solid #fffdfa;pointer-events:none;
}
.vf1e-station-indicator[hidden]{display:none}

.vf1e-kitsune-shadow{
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,14,22,.38),rgba(10,14,22,0));
  pointer-events:none;
}
.vf1e-kitsune{width:100.546875px;height:134.0625px;object-fit:contain;pointer-events:none}

/* Global Dock stays owned by the Shell. The fixed Aprender stage sits below
   its z-order and therefore may extend behind the floating Dock by contract. */
#learn[data-vf1e-runtime="active"] .learn-hub-fallback{display:none}


/* VF1-E Visual Fidelity Corrective · Hero/Profile presentation only. */
.vf1e-hero-copy{position:absolute;z-index:3;left:max(28px,calc(env(safe-area-inset-left) + 12px));top:max(18px,calc(env(safe-area-inset-top) + 4px));width:390px;max-width:calc(100% - 110px);color:#fff;pointer-events:none;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.vf1e-hero-title{margin:0;width:100%;font-size:25px;line-height:30px;font-weight:700;color:#fff;letter-spacing:0}
.vf1e-hero-subtitle{margin:8px 0 0;width:360px;max-width:100%;font-size:13px;line-height:20px;font-weight:400;color:#f8e9d9}
.vf1e-profile-access{position:absolute;z-index:4;top:max(30px,calc(env(safe-area-inset-top) + 4px));right:max(20px,calc(env(safe-area-inset-right) + 12px));width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid rgba(231,203,168,.75);border-radius:50%;background:#fff8ed;box-shadow:0 2px 6px rgba(48,31,20,.12);display:grid;place-items:center;color:#17233b;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vf1e-profile-access:focus-visible{outline:3px solid #fff8ed;outline-offset:2px}
.vf1e-profile-icon{display:block;width:24px;height:24px;background:#17233b;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (orientation:portrait){
  .vf1e-hero-copy{left:max(30px,calc(env(safe-area-inset-left) + 12px));top:max(36px,calc(env(safe-area-inset-top) + 8px));width:270px;max-width:calc(100% - 130px)}
  .vf1e-hero-title{font-size:27px;line-height:30px}
  .vf1e-hero-subtitle{margin-top:16px;width:280px;line-height:20px}
  .vf1e-profile-access{top:max(26px,calc(env(safe-area-inset-top) + 4px));right:max(20px,calc(env(safe-area-inset-right) + 12px))}
}
@media (orientation:landscape){
  .vf1e-hero-copy{left:max(28px,calc(env(safe-area-inset-left) + 12px));top:max(16px,calc(env(safe-area-inset-top) + 4px));width:350px;max-width:calc(100% - 110px)}
  .vf1e-hero-title{font-size:23px;line-height:30px}
  .vf1e-hero-subtitle{margin-top:6px;width:300px;line-height:22px}
  .vf1e-profile-access{top:max(22px,calc(env(safe-area-inset-top) + 4px));right:max(20px,calc(env(safe-area-inset-right) + 12px))}
}
@media (orientation:landscape) and (min-height:768px){
  .vf1e-hero-copy{top:max(18px,calc(env(safe-area-inset-top) + 4px));width:390px}
  .vf1e-hero-title{font-size:25px}
  .vf1e-hero-subtitle{margin-top:8px;width:360px;line-height:20px}
  .vf1e-profile-access{top:max(30px,calc(env(safe-area-inset-top) + 4px))}
}


/* VF1-E Visual Fidelity Corrective 002 · Shell Rail clearance only.
   The Shell keeps ownership of the Rail. Aprender only keeps runtime Hero copy
   out of the Rail's physical occlusion zone; camera/world geometry is untouched. */
@media (orientation:landscape) and (max-width:1215px){
  body[data-nav-mode="rail"][data-global-nav-visible="true"] .vf1e-hero-copy{
    left:max(124px,calc(env(safe-area-inset-left) + 112px));
    max-width:calc(100% - 220px);
  }
}