/* ==========================================================================
   BrightBee — cross-platform & accessibility layer
   Additive stylesheet. Load AFTER css/styles.css:
     <link rel="stylesheet" href="css/styles.css?v=...">
     <link rel="stylesheet" href="css/brightbee-crossplatform.css?v=20260818-1">
   Everything here is scoped to body[data-theme="brightbee"] and is purely
   additive — no JS, no module ownership touched (safe per ARCHITECTURE.md).
   Goals: AA contrast, comfortable tablet layout, reliable touch targets,
   safe-area support, and a sane max width on large monitors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTRAST (WCAG AA)
   Honey #F5B800 is a FILL colour — on cream/white it only reaches ~1.9:1.
   These headings used var(--accent)=honey and failed AA. Repoint to navy.
   Amber stays on fills, active tabs and borders (navy/white sits on top).
   -------------------------------------------------------------------------- */
body[data-theme="brightbee"] .section-title,
body[data-theme="brightbee"] .section-title--small,
body[data-theme="brightbee"] .ob-step-title,
body[data-theme="brightbee"] .topic-title,
body[data-theme="brightbee"] .we-title,
body[data-theme="brightbee"] .visual-title,
body[data-theme="brightbee"] .obj-title,
body[data-theme="brightbee"] .lc-title,
body[data-theme="brightbee"] .lb-title,
body[data-theme="brightbee"] .hero-title,
body[data-theme="brightbee"] .ob-logo-text,
body[data-theme="brightbee"] .subscription-upgrade-title{
  color:var(--text);
}
/* Small amber accents that sit on light backgrounds → honey-dark for legibility */
body[data-theme="brightbee"] .crumb em,
body[data-theme="brightbee"] .quiz-layout-pill--accent,
body[data-theme="brightbee"] .parent-subject-count,
body[data-theme="brightbee"] .auth-toggle span,
body[data-theme="brightbee"] .privacy-note{
  color:#8A5A00;
}

/* --------------------------------------------------------------------------
   2. UNIVERSAL TOUCH TARGETS
   Never below 44px on any pointer:coarse device (WCAG 2.5.5 / Apple HIG).
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  body[data-theme="brightbee"] button,
  body[data-theme="brightbee"] .nav-btn,
  body[data-theme="brightbee"] .mbn-btn,
  body[data-theme="brightbee"] .qopt,
  body[data-theme="brightbee"] .theme-switcher-btn,
  body[data-theme="brightbee"] .user-pill,
  body[data-theme="brightbee"] .token-pill,
  body[data-theme="brightbee"] .metric-pill{
    min-height:44px;
  }
}

/* --------------------------------------------------------------------------
   3. TABLET RANGE (601–900px) — iPad portrait, small tablets
   The app already swaps to the bottom-nav at ≤900px, but content grids drop
   straight to a single column, wasting the width tablets actually have.
   Restore two-up layouts so tablets feel like tablets, not big phones.
   -------------------------------------------------------------------------- */
@media (min-width:601px) and (max-width:900px){
  body[data-theme="brightbee"] .parent-insight-grid,
  body[data-theme="brightbee"] .parent-lower-grid,
  body[data-theme="brightbee"] .examples-grid,
  body[data-theme="brightbee"] .subscription-plan-grid,
  body[data-theme="brightbee"] .learning-path-secondary-row{
    grid-template-columns:1fr 1fr;
  }
  body[data-theme="brightbee"] .year-grid{
    grid-template-columns:repeat(8,1fr);
  }
  /* Give the reflowed sidebar sections a tidy 3-up so they don't stack tall */
  body[data-theme="brightbee"] .subj-tabs{
    display:flex;flex-wrap:wrap;gap:8px;
  }
  body[data-theme="brightbee"] .main{
    padding:20px 24px;
  }
}

/* --------------------------------------------------------------------------
   4. SAFE-AREA + BOTTOM-NAV POLISH (notched phones, gesture bars)
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  body[data-theme="brightbee"] .mobile-bottom-nav{
    height:calc(64px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  body[data-theme="brightbee"] .mbn-btn{
    min-height:48px;
  }
  /* Header respects the notch on landscape phones */
  body[data-theme="brightbee"] header{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
}

/* --------------------------------------------------------------------------
   5. LARGE DESKTOP — cap the reading column so content doesn't sprawl on
   1440px+/ultrawide monitors (keeps line lengths comfortable).
   -------------------------------------------------------------------------- */
@media (min-width:1500px){
  body[data-theme="brightbee"] .main{
    align-items:center;
  }
  body[data-theme="brightbee"] .main > *{
    width:100%;
    max-width:1180px;
  }
}

/* --------------------------------------------------------------------------
   6. INPUT ZOOM GUARD (iOS Safari zooms on focus if font-size < 16px)
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  body[data-theme="brightbee"] .ob-input,
  body[data-theme="brightbee"] input[type="email"],
  body[data-theme="brightbee"] input[type="password"],
  body[data-theme="brightbee"] input[type="text"],
  body[data-theme="brightbee"] select{
    font-size:16px;
  }
}

/* --------------------------------------------------------------------------
   8. MOBILE TOPIC BOTTOM-SHEET  (pairs with js/mobile-topics.js)
   On <=900px the sidebar is hidden, so topics can't be browsed by hand. The
   launcher FAB slides the existing .sidebar up as a bottom sheet. All rules
   are additive and only bite on mobile; desktop is untouched.
   -------------------------------------------------------------------------- */
#mtopicsFab{
  display:none;
  position:fixed;
  right:16px;
  bottom:calc(76px + env(safe-area-inset-bottom,0px)); /* clears bottom-nav */
  z-index:60;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  min-height:48px;
  border:none;
  border-radius:999px;
  background:#F5B800;
  color:#12173D;
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:15px;
  box-shadow:0 10px 26px rgba(18,23,61,0.28);
  cursor:pointer;
}
#mtopicsFab.show{ display:inline-flex; }
#mtopicsFab:active{ transform:translateY(1px); }

#mtopicsBackdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:61;
  background:rgba(18,23,61,0.45);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
#mtopicsBackdrop.show{ display:block; }

#mtopicsHandle{
  display:none;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:12px 0 8px;
}
#mtopicsHandle .mtopics-grip{
  width:44px;height:5px;border-radius:3px;background:var(--border,#E4DAC6);
}
#mtopicsClose{
  position:absolute;right:12px;top:6px;
  width:40px;height:40px;border:none;border-radius:12px;
  background:var(--tag-bg,rgba(18,23,61,0.06));
  color:var(--text,#12173D);font-size:17px;font-weight:800;cursor:pointer;
  font-family:'Nunito',sans-serif;
}

/* Turn the hidden sidebar into a bottom sheet only when open on mobile */
@media (max-width:900px){
  body[data-theme="brightbee"].mtopics-open .sidebar{
    display:flex !important;
    position:fixed !important;
    left:0 !important;right:0 !important;bottom:0 !important;
    top:auto !important;
    inset:auto 0 0 0 !important;
    width:100% !important;
    order:0 !important;
    z-index:62 !important;
    max-height:80dvh;
    overflow-y:auto;
    margin:0 !important;
    border:none;
    border-radius:22px 22px 0 0;
    box-shadow:0 -22px 50px rgba(18,23,61,0.28);
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
    animation:mtopicsSlideUp .26s cubic-bezier(.25,.9,.35,1);
  }
  body[data-theme="brightbee"].mtopics-open #mtopicsHandle{ display:flex; }
  /* hide the redundant "Navigate" links inside the sheet — keep it to pickers */
  body[data-theme="brightbee"].mtopics-open .sidebar > .nav-section.mt-nav-hidden{ display:none !important; }
}
@keyframes mtopicsSlideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  body[data-theme="brightbee"].mtopics-open .sidebar{ animation:none; }
}