/* =====================================================================
   XIRAIYA — simplified phone layout (screens up to 760px wide)
   App-style bottom tab bar, compact sections, calmer motion.
   ===================================================================== */
.tabbar { display: none; }

@media (max-width: 760px) {
  :root { --tabbar-h: 62px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  /* ---------- bottom tab bar ---------- */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(var(--bg-rgb), .97); border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 5px;
    font: 600 10.5px/1 var(--font-body); letter-spacing: .02em; color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar .ic { font-size: 21px; }
  .tabbar [aria-current="page"], .menu-open .tabbar .tb-more { color: var(--ink); }
  .tabbar [aria-current="page"] .ic, .menu-open .tabbar .tb-more .ic { color: var(--red); }
  .tabbar [aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 0 0 2px 2px; background: var(--red); }
  .tabbar .tb-hire { color: var(--ink); }
  .tabbar .tb-hire::before { display: none; }
  .tb-orb {
    width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: var(--red); border: 4px solid var(--bg); box-shadow: 0 10px 24px -8px rgba(224,68,46, .7);
  }
  .tb-orb .ic { color: #fff !important; font-size: 19px; }
  .tabbar a:active .ic, .tabbar button:active .ic { transform: scale(.9); }

  /* things that sit above the tab bar */
  .toasts { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  .ai-shop { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; }
  .mmenu { padding-bottom: calc(var(--tabbar-h) + 30px); }

  /* ---------- lighter header + effects ---------- */
  .hdr-actions .btn, .hdr-actions .status { display: none; }
  .grain, .kanji-bg, .glow { display: none; }
  .progress { display: none; }

  /* calmer, quicker motion */
  .js [data-reveal], .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(18px); transition-duration: .55s; }
  .js [data-reveal="scale"] { transform: scale(.97); }
  .js [data-reveal], .js [data-reveal="blur"], .js .split .c { filter: none; }
  .js [data-reveal="scale"] { clip-path: none; }
  .js [data-reveal].is-in { transform: none; }
  .js .split .c { transition-duration: .55s, .35s; transition-delay: calc(var(--d, 0s) + var(--ci) * 9ms); }
  .card:hover, .svc:hover, .js .bento .svc.is-in:hover { transform: none; }

  /* ---------- footer ---------- */
  .ftr-cta { padding-block: 40px 30px; }
  .ftr-grid { gap: 26px; padding-block: 30px; }
  .ftr-grid > div:nth-child(3) { display: none; }
  .fm-panel { height: 150px; outline-offset: 3px; box-shadow: 6px 6px 0 var(--red); }
  .fm-jp, .fm-sfx.s2 { display: none; }

  /* ---------- HOME ---------- */
  .hero-visual { --size: min(66vw, 280px); }
  .orbit { animation: none; }
  .about-copy > p:nth-of-type(2), .radar-wrap, .cc-skills { display: none; }
  .timeline ol { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
  .timeline ol::-webkit-scrollbar { display: none; }
  .timeline li { flex: 0 0 68%; scroll-snap-align: start; padding: 30px 16px 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(var(--fx), .02); }
  .timeline li::before { left: 16px; top: 14px; width: 10px; height: 10px; }
  .timeline h3 { margin-top: 8px; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bento .svc, .s-chat { grid-column: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 0; }
  .bento .svc-vis, .bento .svc p, .bento .svc .chips, .bento .svc-jp { display: none; }
  .bento .svc-text { display: contents; }
  .bento .svc-ic { width: 40px; height: 40px; font-size: 19px; border-radius: 6px; }
  .bento .svc .h3 { font-size: 15px; line-height: 1.25; }
  .bento .svc-more { font-size: 12.5px; color: var(--red); }

  .process-grid, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-wrap { padding-left: 0; min-width: 0; }
  .steps-line { display: none; }
  .steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 78%; scroll-snap-align: start; padding: 18px; border: 1px solid var(--line); border-radius: 6px; }
  .step:last-child { border-bottom: 1px solid var(--line); }
  .step-n { position: static; margin-bottom: 12px; width: 38px; height: 38px; }
  .step p { font-size: 14px; }

  .why-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .why { padding: 16px; gap: 10px; }
  .why p { display: none; }
  .why-ic { width: 42px; height: 42px; font-size: 20px; border-radius: 6px; }
  .why .h4 { font-size: 14.5px; }

  /* ---------- THE LAB: one chapter at a time ---------- */
  .lab-index { display: none; }
  .lab-one .lab-sec:not(.is-current) { display: none; }
  .lab-one .lab-sec { padding-top: 26px; }
  .lab-grid { gap: 14px; }
  .lab-grid .lab-info { display: contents; }
  .lab-grid .lab-num { order: 1; }
  .lab-grid .lab-info > h2 { order: 2; }
  .lab-grid .lab-info > .lead { order: 3; font-size: 15.5px; }
  .lab-grid .lab-stage { order: 4; margin-block: 6px; }
  .lab-grid .lab-price, .lab-grid .lab-row { order: 5; }
  .lab-grid .lab-ctas { order: 6; }
  .lab-grid .lab-feats { order: 7; }
  .lab-grid .lab-info > .chips { display: none; }
  .lab-pager { display: none; }
  .lab-one .lab-pager { display: flex; }

  /* ---------- HIRE ---------- */
  .hire-mascot { display: none; }
}

/* Lab chapter pager (phones) */
.lab-pager { display: none; align-items: center; justify-content: space-between; gap: 10px; margin: 26px var(--gutter) 10px; padding: 10px; border-radius: 6px; border: 1px solid var(--line); background: rgba(var(--fx), .02); }
.lab-pager button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 6px; font-weight: 600; font-size: 14px; color: var(--ink); background: rgba(var(--fx), .05); border: 1px solid var(--line-2); }
.lab-pager button:disabled { opacity: .35; }
.lab-pager .lp-next { background: var(--red); border-color: var(--red); color: #fff; }
.lab-pager span { font: 500 12px/1.3 var(--font-mono); color: var(--ink-3); text-align: center; }
.lab-pager span b { display: block; color: var(--ink); font: 600 13px/1.3 var(--font-body); }

/* =====================================================================
   Responsive QA pass: phone comfort (tap targets, readable micro text,
   tighter vertical rhythm) and small-screen header fit.
   ===================================================================== */

/* never let a stray decoration (spinning rings, rotated rays, shadows at
   the screen edge) widen the page on a phone: clip sideways only */
main, .site-footer, footer { overflow-x: clip; }

@media (max-width: 760px) {
  /* calmer vertical rhythm: the desktop 84px floor leaves 170px gaps on a phone */
  .section { padding-block: clamp(60px, 16vw, 84px); }
  .section-sm { padding-block: clamp(44px, 12vw, 56px); }
  .section-head { margin-bottom: 32px; }

  /* tab bar labels: 12px is the smallest comfortable size */
  .tabbar a, .tabbar button { font-size: 12px; letter-spacing: 0; }

  /* ---- 44px+ tap targets on shared chrome ---- */
  .brand { min-height: 44px; }
  .breadcrumb a { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
  .ftr-grid a { min-height: 44px; }
  .ftr-grid li + li { margin-top: 0; }
  .to-top { min-height: 44px; }
  .ftr-tg small { font-size: 11px; }

  /* The Lab / Motion Wing */
  .wg-f button { min-height: 44px; }
  .wx-max { width: 44px; height: 44px; }
  .lab-nav-inner a { min-height: 44px; display: inline-flex; align-items: center; }
  .lw-btn { height: 44px; }
  .br-tabs button { height: 44px; }
  .wx-tt small { font-size: 12px; }

  /* Shop */
  .tpl-groups button { height: 40px; }
  .tpl-shuffle { height: 40px; }
  .s-cats button { height: 40px; }
  .p-wish, .p-quick { min-width: 44px; min-height: 44px; }
  .tpl-cur, .tpl-no { font-size: 12px; }

  /* UI Kit */
  .kb-nav-chips a { min-height: 40px; }
  .kx-seg button, .kx-presets button { height: 40px; }
  .ki-copy { height: 36px; padding: 0 12px; font-size: 12.5px; }
  .kx-acc button { width: 40px; height: 40px; }
  .pg-langs button { min-height: 36px; font-size: 12px; }
  .pg-code, .kx-out pre.code { font-size: 12px; }

  /* Pages Studio */
  .seg button { height: 40px; }
  .tb { height: 40px; min-width: 40px; }
  .pst-tabs button { min-height: 40px; }
  .chips2 button { min-height: 40px; }
  button.site small, .gh-n { font-size: 12px; }

  /* Dev World */
  .term-x { width: 40px; height: 40px; }
  .term-chips button, .pg-tabs button, .api-quick button { height: 40px; }
  .api-tabs button { height: 36px; font-size: 12px; }
  .pg-ib { width: 40px; height: 40px; }
  .tl-btn { height: 40px; }
  .ar-tabs button, .ar-b, .ty-langs button { min-height: 40px; }
  #apiBodyHint { font-size: 11.5px; }

  /* Basic Knowledge */
  .kn-tags button { min-height: 40px; }
  .pv-btn, .pv-btn.sm { min-height: 40px; }
  .kn-ch-start { min-height: 40px; }
  .kc-kind, .kc-go { font-size: 12px; }

  /* Home: the 11th service card would be alone in the 2-col grid */
  .bento .s-chat { grid-column: 1 / -1; }
  .bento .svc-meta { flex-wrap: wrap; gap: 8px 16px; }
  .bento .svc-meta b { white-space: nowrap; }
  .bento .svc-more { white-space: nowrap; }

  /* Demos / Home / Hire micro labels */
  .dm-type, .crew-role, .pack-rib, .dm-new { font-size: 12px; }
  .hero-meta dt, .cc-stats dt, .crew-info dt, .cc-rank, .cc-xp-top, .rq-who { font-size: 11.5px; letter-spacing: .12em; }
  .stat span, .svc-meta small { font-size: 11.5px; letter-spacing: .1em; }
  .p-badge { font-size: 11.5px; }

  /* more small controls */
  .pst-acts .tb, .pst-ver .tb { min-width: 40px; }
  .seg button { min-width: 44px; justify-content: center; }
  .grp > h4 button, #pgClr, .api-copy { padding: 13px 6px; margin: -13px -6px; font-size: 12.5px; }
  .kn-live-f button { min-height: 40px; }
  #pgPreset, #srtA { min-height: 40px; }
}

/* very narrow phones (iPhone SE 1st gen, small Androids): the header
   brand + three round buttons need ~300px; make them fit in 288 */
@media (max-width: 360px) {
  .hdr-actions { gap: 6px; }
  .hdr-search { width: 40px; height: 40px; }
  .mode-btn { width: 40px; height: 40px; }
  .brand { gap: 8px; }
  .brand-word { font-size: 17px; }
}