/* Mode Atlas shared page foundation.
   This file owns global document behaviour, typography, loader presentation and
   small utilities. Responsive composition lives in mode-atlas-responsive.css;
   semantic controls/surfaces live in mode-atlas-components.css. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Noto+Sans+JP:wght@500;700;900&family=Sora:wght@700;800;900&display=swap");

*{box-sizing:border-box;}
html,body{
  height:auto;
  min-height:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
}
html{background:var(--ma-app-bg);}
body{
  position:relative;
  min-height:100vh;
  font-family:var(--ma-font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
@supports (min-height:100dvh){body{min-height:100dvh;}}
.app-shell,.shell,.wrap,main,.page,.page-shell{height:auto;max-height:none;}
body::before{pointer-events:none;}

h1,h2,h3,.main-title,.hero-title,.launch-title,.card-title{font-family:var(--ma-font-display);}
.hiragana,.prompt,.kana,.cell,.cell-char,.kana-big .char,.result-kana-card .char{font-family:var(--ma-font-jp);}

button,a,input,textarea,select{-webkit-tap-highlight-color:transparent;}
button,.btn,.launch-card{min-height:44px;}
input,textarea,select{font-size:16px;}
.btn,.button{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;}
button,.btn,.launch-card,.test-tile,.card,.panel,.stat,.metric,.pill{transition-duration:var(--ma-motion-fast);}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--ma-focus-ring);
  outline-offset:3px;
}

/* Branded early-loading presentation. The early loader owns timing only. */
.ma-loading-screen{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 25% 18%,color-mix(in srgb,var(--ma-writing) 16%,transparent),transparent 30%),
    radial-gradient(circle at 76% 18%,color-mix(in srgb,var(--ma-kana) 13%,transparent),transparent 28%),
    color-mix(in srgb,var(--ma-app-bg) 92%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:opacity .32s ease,visibility .32s ease;
}
.ma-loading-screen.done{opacity:0;visibility:hidden;pointer-events:none;}
.ma-loading-card{
  width:min(360px,calc(100vw - 40px));
  padding:22px;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-lg);
  background:color-mix(in srgb,var(--ma-card) 88%,transparent);
  box-shadow:var(--ma-shadow);
  color:var(--ma-text);
}
.ma-loading-head{display:flex;align-items:center;gap:13px;margin-bottom:16px;}
.ma-loading-mark{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--ma-writing),var(--ma-kana));
  color:var(--ma-app-bg);
  font-weight:900;
}
.ma-loading-title{font-weight:900;letter-spacing:-.03em;}
.ma-loading-sub{margin-top:3px;color:var(--ma-muted);font-size:13px;}
.ma-skeleton{
  height:11px;
  border-radius:var(--ma-radius-pill);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ma-text) 6%,transparent),color-mix(in srgb,var(--ma-text) 18%,transparent),color-mix(in srgb,var(--ma-text) 6%,transparent));
  background-size:220% 100%;
  animation:maShimmer 1.15s ease-in-out infinite;
}
.ma-skeleton+.ma-skeleton{margin-top:9px;}
.ma-skeleton.short{width:64%;}
@keyframes maShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
.ma-sync-pill{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--ma-success) 22%,transparent);
  border-radius:var(--ma-radius-pill);
  background:color-mix(in srgb,var(--ma-success) 10%,transparent);
  color:color-mix(in srgb,var(--ma-success) 62%,var(--ma-text));
  font-size:12px;
  font-weight:800;
}
.ma-sync-pill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:var(--ma-radius-pill);
  background:var(--ma-success);
  box-shadow:0 0 12px color-mix(in srgb,var(--ma-success) 65%,transparent);
}

/* Shared visibility and small layout utilities used by static HTML and JS. */
.ma-hidden,[hidden]{display:none;}
.ma-actions-row{margin-top:var(--ma-space-4);display:flex;flex-wrap:wrap;gap:10px;}
.ma-muted-copy{margin-top:0;color:var(--ma-muted);}
.ma-file-input{display:none;}
.ma-spacer-sm{height:14px;}
.ma-divider-soft{margin:var(--ma-space-5) 0;border:0;border-top:1px solid var(--ma-border);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important;}
}