/* =========================================================================
   StoryBam — shared app stylesheet
   Included on every page EXCEPT index.html.
   Goals:
     1. Coherent brand tokens across pages.
     2. Desktop usability (mobile-first is preserved — no rule below 760px
        changes mobile; all desktop rules live inside @media(min-width:760px)).
   The global actionbar + loading spinner styles live in actionbar.js.
   ========================================================================= */

:root {
  --pr-purple: #6d36ff;
  --pr-purple-soft: #f2edff;
  --pr-ink: #151419;
  --pr-muted: #73717d;
  --pr-line: #e7e5ec;
}

html { -webkit-text-size-adjust: 100%; }
::selection { background: var(--pr-purple-soft); color: var(--pr-purple); }

/* -------------------------------------------------------------------------
   DESKTOP LAYER  (mobile is 100% untouched — everything is inside a desktop
   media query). App pages are mobile-first "phone frames" (~430px) that leave
   a desktop screen empty; here we widen the frame to a comfortable app width,
   drop the rigid phone height, flow content from the top, and lay the
   dashboard shortcut cards out two-up. `!important` is required because each
   page ships its own inline width rule that would otherwise win the cascade.
   ------------------------------------------------------------------------- */
@media (min-width: 920px) {

  /* Phone-frame bodies vertically-centre their frame; on desktop let it start
     from the top so tall pages read naturally. */
  body:has(.app-shell),
  body:has(main.app),
  body:has(main.screen) { align-items: start !important; }

  /* Phone-frame containers -> comfortable desktop app column. */
  .app-shell,
  main.app,
  main.screen {
    width: min(100%, 780px) !important;
    max-width: min(100%, 780px) !important;
    min-height: auto !important;
  }

  /* Centred reading pages (account, settings, support, manage-activities). */
  .shell { width: min(100%, 880px) !important; }
  .wrap { max-width: 1060px !important; }

  /* Dashboard: shortcut cards two-up instead of a tall single stack. */
  .menu-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch;
  }
  .menu-list .menu-card { height: 100% !important; }

  /* Keep the reward-card preview a sensible size instead of a giant square. */
  .active-campaign-card-preview {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1200px) {
  .app-shell,
  main.app,
  main.screen { width: min(100%, 880px) !important; max-width: min(100%, 880px) !important; }
  .shell { width: min(100%, 960px) !important; }
}

/* -------------------------------------------------------------------------
   Small global polish, safe on every page.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:where(button, a, [role="button"]):focus-visible {
  outline: 2px solid var(--pr-purple);
  outline-offset: 2px;
}