/**
 * Y888 Base Layout CSS — written from scratch
 * Covers: document reset, letterbox shell, layout shells, scroll containers.
 *
 * Reference values measured from the original compiled theme CSS
 * (assets/theme-0/commonChunk.B9nih3pK.css); all declarations below are
 * hand-written against the y888-* semantic class names and the design
 * tokens in css/tokens.css. No hashed selectors, no copied blocks.
 */

/* ============================================================
 * 1. Document reset
 * ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

body {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  font-family: var(--y888-font-family);
  font-size: var(--y888-font-size-md);
  font-weight: var(--y888-font-weight);
  color: var(--y888-text);
  background: var(--y888-bg);
  -webkit-font-smoothing: antialiased;
}

ul,
ol {
  list-style: none;
}

img,
video {
  height: auto;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ============================================================
 * 2. Letterbox shell (desktop centered column)
 *
 * Reference formula: max-width = min(100%, 56.2219vh), i.e. the
 * 750/1334 phone aspect ratio mapped onto viewport height.
 * At 1920x1080 this yields a ~607px centered column.
 * ============================================================ */

.y888-letterbox {
  width: 100%;
  max-width: min(100%, var(--y888-letterbox-ratio));
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  position: relative;
  background: var(--y888-bg);
}

/* ============================================================
 * 3. Layout shells
 * ============================================================ */

/* Full-viewport flex column that centers the app column. */
.y888-base-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 100vh;
  background: var(--y888-bg);
}

/* Per-page view wrapper. Holds runtime custom properties for
 * tab-bar / bottom-bar heights consumed by fixed chrome. */
.y888-base-view {
  --y888-tabbar-height: 0rem;
  --y888-tabbar-base-height: 0rem;
  --y888-bottombar-height: var(--y888-nav-height);
  width: 100%;
  max-width: min(100%, var(--y888-letterbox-ratio));
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Home page root: dark card background behind all sections. */
.y888-home-layout {
  background-color: var(--y888-bg-card);
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Primary content region inside a base layout: fills remaining
 * space between header chrome and the bottom nav. */
.y888-base-layout > .y888-section-content {
  width: 100%;
  flex: 1 1 auto;
  max-height: 100%;
  position: relative;
  z-index: 1;
  min-height: 0; /* allow inner scroll containers to shrink */
}

/* Generic section content wrapper. */
.y888-section-content {
  width: 100%;
  position: relative;
}

/* Main content column inside the home layout. */
.y888-home-layout .y888-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.y888-home-layout .y888-main > div {
  margin-top: var(--y888-space-md);
}

.y888-home-layout .y888-main > div:first-child {
  margin-top: 0;
}

/* ============================================================
 * 4. Scroll containers
 *
 * .y888-scroll is the reusable scroll primitive. Direction is
 * chosen with a modifier:
 *   .y888-scroll--y  vertical scrolling (default page scroll)
 *   .y888-scroll--x  horizontal scrolling (carousels, strips)
 *   .y888-scroll--all  both axes
 * ============================================================ */

.y888-scroll {
  position: relative;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.y888-scroll--y {
  overflow-x: hidden;
  overflow-y: auto;
}

.y888-scroll--x {
  overflow-x: auto;
  overflow-y: hidden;
}

.y888-scroll--all {
  overflow: auto;
}

/* Thin system-styled scrollbar used on desktop widths. */
.y888-scroll--system-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--y888-border) transparent;
}

.y888-scroll--system-scrollbar::-webkit-scrollbar {
  width: 0.06rem;
  height: 0.06rem;
  z-index: 11;
}

.y888-scroll--system-scrollbar::-webkit-scrollbar-track,
.y888-scroll--system-scrollbar::-webkit-scrollbar-track-piece,
.y888-scroll--system-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

.y888-scroll--system-scrollbar::-webkit-scrollbar-thumb {
  width: 0.06rem;
  background: var(--y888-border);
  border-radius: 0.06rem;
}

/* Hide scrollbars entirely (kiosk / embedded contexts). */
.y888-scroll--hide-scrollbar {
  scrollbar-width: none;
}

.y888-scroll--hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Page-level vertical scroll region (the main app scroller). */
.y888-page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* ============================================================
 * 5. Safe-area + fixed chrome offsets
 * ============================================================ */

.y888-safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.y888-safe-bottom {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--y888-bottombar-height, var(--y888-nav-height)));
}

/* ============================================================
 * 6. Responsive breakpoints
 * ============================================================ */

/* Phone: full-bleed single column (letterbox collapses). */
@media (max-width: 750px) {
  .y888-letterbox,
  .y888-base-view {
    max-width: 100%;
  }
}

/* Desktop: enforce the centered phone-ratio column and remap
 * the root font-size so rem units scale with the column. */
@media (min-width: 751px) {
  .y888-letterbox,
  .y888-base-view {
    max-width: var(--y888-letterbox-ratio);
  }
}

/* Reduced motion: no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  .y888-scroll {
    scroll-behavior: auto;
  }
}

/* ---- X7: skeleton shimmer attachment (verbatim original specs) ---- */
.ui-skeleton--animate{animation:skeleton-blink 1.2s ease-in-out infinite}
.ui-skeleton-paragraph--animate{background-image:linear-gradient(90deg,var(--skin__border),var(--skin__border),var(--skin__border),var(--skin__bg_2),var(--skin__border),var(--skin__border),var(--skin__border))!important;background-size:200% 100%!important;border-radius:.04rem;opacity:.5;animation:common_bganimation .9s linear infinite}

/* ---- X9: homepage button press feedback (verbatim original specs) ---- */
.ui-button{transition:opacity .2s}
.ui-button:active:before{opacity:.1}

/* ---- X10: focus outlines (verbatim reference: commonChunk.B9nih3pK.css)
   a:focus,input:focus,button:focus,textarea:focus,[class*=ui-]:focus{outline:none} */
a:focus,input:focus,button:focus,textarea:focus,[class*=ui-]:focus{outline:none}

/* ---- Toast (verbatim from css/y888-fx.css — needed on homepage which
   doesn't load y888-fx.css; reference: .ui-toast__toast{transition:all .3s}) ---- */
#y888-toast-wrap{
  position: fixed; left: 0; right: 0; top: 42%;
  display: flex; justify-content: center; align-items: center;
  z-index: 4000; pointer-events: none;
}
.y888-toast{
  display: flex; align-items: center; gap: .14rem;
  background: #ffffff; color: #333333;
  font-size: .28rem; line-height: 1.4;
  padding: .22rem .36rem; border-radius: .16rem;
  box-shadow: 0 .06rem .3rem rgba(0,0,0,.28);
  opacity: 0; transform: scale(.92);
  transition: opacity 300ms ease, transform 300ms ease;
  max-width: 82vw; text-align: center;
}
.y888-toast--show{ opacity: 1; transform: scale(1); }
.y888-toast svg{ width: .42rem; height: .42rem; flex-shrink: 0; }

/* ---- Router spec #9: CSS containment on router-view (reflow isolation) ----
   NOTE: Uses ONLY 'style' because ANY of layout/paint/size/content makes this
   element a containing block for FIXED-position descendants in Chromium,
   breaking viewport-relative positioning of float-bar-main, floating-widgets,
   bottom-nav, and back-to-top. Verified: contain:none fixes it, contain:paint
   still breaks it. 'style' scopes counters/quotes without affecting fixed. */
#y888-router-view {
  contain: style;
}