/* ============================================================
     APP-SHELL — reusable mobile native-app chrome.
     Bottom action bar, bottom sheet, and swipe carousel.
     Consumes Task-1 tokens/classes from aura.css (do not redefine them).

     The shell is a MOBILE-ONLY layer: it is active only below 900px.
     Everything visible lives inside @media(max-width:899px); the chrome
     surfaces default to display:none so that at >=900px the bar, sheet
     and scrim are inert (no layout, not focusable, no overflow).
     Motion is transform/opacity only; prefers-reduced-motion keeps every
     surface usable and static (nothing essential hides behind an animation).
     ============================================================ */

/* --- desktop-inert defaults: shell chrome hidden until the mobile media query opts in --- */
.app-bar,
.app-sheet,
.app-scrim{ display:none; }
.carousel__dots{ display:none; }

@media (max-width:899px){

  /* ==========================================================
     BOTTOM ACTION BAR
     ========================================================== */
  .app-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; align-items:stretch; gap:4px;
    padding:6px 10px;
    /* safe-area aware: sits above the home indicator on notched devices */
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(251,250,247,.74), rgba(251,250,247,.92) 55%);
    -webkit-backdrop-filter:blur(20px) saturate(1.5);
    backdrop-filter:blur(20px) saturate(1.5);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 30px -14px rgba(20,18,58,.18);
  }
  .app-tab{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    /* >= 48px tap target */
    min-height:52px; padding:6px 4px; border-radius:14px;
    color:var(--ink-faint); background:none; border:none; cursor:pointer;
    text-decoration:none; position:relative;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    transition:transform .16s var(--ease), color .2s var(--ease);
  }
  .app-tab:active{ transform:scale(.9); }
  .app-tab svg{
    width:23px; height:23px; stroke:currentColor; stroke-width:1.8;
    fill:none; stroke-linecap:round; stroke-linejoin:round;
  }
  .app-tab span{
    font-family:var(--mono); font-size:9.5px; letter-spacing:.03em;
    font-weight:500; line-height:1; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  /* active tab === marigold-deep */
  .app-tab.on{ color:var(--marigold-deep); }
  .app-tab.on::before{
    content:""; position:absolute; top:2px;
    width:5px; height:5px; border-radius:50%;
    background:var(--marigold-deep); box-shadow:0 0 8px rgba(233,122,31,.6);
  }

  /* pages that mount a bar reserve room so fixed chrome never covers content */
  body.has-app-bar{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

  /* ==========================================================
     BOTTOM SHEET  (scrim + sheet + drag handle)
     ========================================================== */
  .app-scrim{
    position:fixed; inset:0; z-index:80; display:block;
    background:rgba(20,18,58,.34);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .app-scrim.open{ opacity:1; visibility:visible; }

  .app-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:81;
    display:flex; flex-direction:column; overflow:hidden;
    max-height:88vh;
    background:var(--card);
    border-radius:24px 24px 0 0;
    border:1px solid var(--line); border-bottom:none;
    box-shadow:0 -24px 70px -20px rgba(20,18,58,.32), 0 -2px 8px rgba(20,18,58,.06);
    transform:translateY(100%);
    transition:transform .42s var(--ease);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .app-sheet.open{ transform:translateY(0); }

  .app-sheet__grab{
    padding:12px 0 4px; flex:none;
    display:flex; justify-content:center;
    touch-action:none; cursor:grab;
  }
  .app-sheet__grab i{
    width:40px; height:5px; border-radius:99px;
    background:rgba(20,18,58,.16);
  }
  .app-sheet__scroll{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:6px 22px 28px;
  }
  .app-sheet__head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; margin-bottom:18px;
  }
  .app-sheet__title{
    font-family:var(--disp); font-size:clamp(24px,7vw,29px); font-weight:700;
    letter-spacing:-.02em; line-height:1.05; color:var(--ink);
  }
  .app-sheet__close{
    width:44px; height:44px; flex:none; border-radius:50%;
    border:1px solid var(--line); background:var(--paper-dim); color:var(--ink);
    display:grid; place-items:center; cursor:pointer; font-size:15px; line-height:1;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    transition:transform .2s var(--ease);
  }
  .app-sheet__close:active{ transform:scale(.88) rotate(90deg); }

  /* ==========================================================
     CAROUSEL  (horizontal scroll-snap + dot indicators)
     ========================================================== */
  .carousel{
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 0 14px;
  }
  .carousel::-webkit-scrollbar{ display:none; }
  .carousel > *{
    scroll-snap-align:center;
    flex:0 0 78%; max-width:300px;
  }

  .carousel__dots{
    display:flex; gap:6px; justify-content:center; margin-top:14px;
  }
  .carousel__dots i{
    width:6px; height:6px; border-radius:50%;
    background:rgba(20,18,58,.18);
    transition:width .3s var(--ease), background .3s var(--ease), border-radius .3s var(--ease);
  }
  .carousel__dots i.on{
    width:20px; border-radius:99px; background:var(--marigold-deep);
  }
}

/* ============================================================
   REDUCED MOTION — keep every shell surface usable and static.
   (aura.css also globally neutralises transitions; this restates the
   intent locally so the shell is safe on its own terms.)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .app-bar, .app-tab, .app-scrim, .app-sheet,
  .app-sheet__close, .carousel, .carousel__dots i{
    transition-duration:.001ms !important;
  }
  .carousel{ scroll-behavior:auto !important; }
}