/* ============================================================
   mobile.css - the phone and small-tablet pass.

   Every rule in this file lives inside a max-width media query. Nothing here
   can reach a desktop browser, which is the whole point: the brief was a
   cosmetic mobile pass that must not move the desktop layout by a pixel.
   If you are looking at this file wondering whether something here changed
   the desktop view, the answer is no - open it and check that every selector
   sits inside an @media(max-width:...) block. A test enforces that.

   Loaded last, after portal.css and patch.css, so it wins on specificity
   ties. Where a value is set in an inline style attribute on the element
   itself, only !important can reach it, so those rules carry !important and
   say why. They are still inside a media query, so desktop is untouched.

   Breakpoints used here:
     900px  tablet and below - drop two-column page shells to one column
     620px  phone - the main pass
     400px  small phone - the last squeeze

   Reference widths: iPhone SE 375, iPhone 14/15 390, Pixel 8 412.
   ============================================================ */

/* ============================================================
   1 - PAGE SHELLS THAT ARE TWO COLUMNS
   The lesson page and the content editor both hard-code a fixed sidebar in an
   inline style ("300px 1fr" and "340px 1fr"). On a 390px phone that leaves
   about 40px for the actual content. Stack them.
   ============================================================ */
@media(max-width:900px){
  /* inline grid-template-columns on the element, so !important is the only way in */
  .m-splitcol{ grid-template-columns:1fr !important; gap:16px !important; }
}

/* ============================================================
   2 - THE CALENDAR MONTH GRID
   Seven columns have to stay seven columns - a month that is not a month is
   not a calendar - so instead of restacking, the cells get smaller and the
   event chips get a size a thumb can still read.
   ============================================================ */
@media(max-width:620px){
  .m-calhead,.m-calgrid{ gap:3px !important; }
  .m-calhead{ font-size:.62rem !important; }
  .m-calgrid > div{ min-height:56px !important; padding:3px !important; font-size:.72rem; }
  /* the event chip: inline nowrap + ellipsis turns every title into one letter
     in a 42px cell, so let it wrap onto two short lines instead */
  .m-calgrid > div > div[onclick]{
    white-space:normal !important; font-size:.58rem !important;
    line-height:1.2 !important; padding:2px 3px !important;
    overflow:hidden !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .m-calmonth{ min-width:0 !important; flex:1 1 100%; order:-1; margin-bottom:4px; }
}
@media(max-width:400px){
  .m-calgrid{ gap:2px !important; }
  .m-calgrid > div{ min-height:48px !important; font-size:.66rem; }
}

/* ============================================================
   3 - TABLES
   Several tables are width:100% inside an overflow-x:auto wrapper. That
   combination never scrolls: the table obediently shrinks to the wrapper and
   crushes its columns to a few pixels each. Giving the table a min-width
   makes the wrapper do its job and the table scroll sideways instead.
   ============================================================ */
@media(max-width:820px){
  .m-tblwrap{ -webkit-overflow-scrolling:touch; }
  .m-tblwrap > table{ min-width:560px; }
  .m-tblwrap table.agtbl{ min-width:520px; }
  .m-tblwrap table.stutbl{ min-width:620px; }
  .m-tbl{ min-width:560px !important; }   /* inline width:100% on this one */
  /* a quiet hint that there is more to the right */
  .m-tblwrap{ background:
    linear-gradient(to right, var(--card,#fff) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 12px) 100% 0;
    background-repeat:no-repeat; background-size:24px 100%, 14px 100%;
    background-attachment:local, scroll; }
}

/* ============================================================
   4 - FORM GRIDS WITH FIXED COLUMNS
   My Target's MTO row is 1.6fr 1fr 1fr 1fr holding 100px-wide inputs, and the
   notification preferences row is 1fr 64px 64px 64px. Both stack.
   ============================================================ */
@media(max-width:620px){
  .tg-mto-row{ grid-template-columns:1fr !important; gap:6px !important; padding:12px 14px !important; }
  .tg-grid4{ grid-template-columns:1fr !important; }
  .tg-grid3{ grid-template-columns:1fr !important; }
  /* the inputs inside carry an inline pixel width */
  .tg-num{ width:100% !important; max-width:180px; }
  .tg-nwrap{ display:flex; align-items:center; gap:4px; }

  .m-notifgrid{ grid-template-columns:1fr !important; gap:4px !important; }
  .m-notifgrid > *{ min-width:0; }

  .m-stats2{ grid-template-columns:1fr !important; }
}

/* ============================================================
   5 - BUTTONS AND ROWS THAT WILL NOT WRAP
   .btn is white-space:nowrap globally, so a button labelled with a lesson
   title ("Next lesson: 3 Rules + 3 Laws to Success") runs off the screen.
   On the lesson page that pushed the layout to 692px on a 485px viewport.
   Let button labels wrap, and let the rows that hold them wrap too.
   ============================================================ */
@media(max-width:620px){
  .btn{ white-space:normal; text-align:center; line-height:1.25; max-width:100%; }
  .between{ flex-wrap:wrap; }
  .between > *{ min-width:0; }
  .row{ flex-wrap:wrap; }

  /* thumb-sized targets. Apple asks for 44px, Google for 48dp; 42 with the
     padding below lands in the middle without making the page feel bloated */
  .btn{ min-height:42px; padding:10px 16px; }
  .btn--sm{ min-height:38px; padding:9px 14px; font-size:.82rem; }
  input[type=checkbox]{ width:20px; height:20px; }
}

/* ============================================================
   6 - TYPE SIZES
   The audit found 112 separate runs of text under 12.5px on the modules page
   alone, the smallest at 9px. Nothing below about 11px is comfortable on a
   phone held at arm's length. These are bumps, not redesigns: the hierarchy
   is unchanged, everything just steps up a little.
   ============================================================ */
@media(max-width:620px){
  .pill{ font-size:.78rem; padding:7px 14px; }
  /* the skill chips on a module card carry font-size:.6rem in an inline style
     attribute, which is 9.6px and the smallest text anywhere in the portal.
     Only !important reaches an inline style, and this is inside a media query,
     so it is still a phone-only rule. */
  .course .pill,.course__b .pill{ font-size:.72rem !important; padding:3px 9px !important; }
  .tag{ font-size:.7rem; padding:4px 9px; }
  .course__n{ font-size:.72rem; }
  .course__d{ font-size:.9rem; line-height:1.5; }
  /* .g-c5 .course__d is more specific than the line above and clamps the card
     description to 2.7em. On a phone the grid is one card wide, so there is
     room to let the description finish rather than cutting it mid-sentence. */
  .g-c5 .course__d{ font-size:.88rem !important; max-height:none; overflow:visible; }
  .xp{ font-size:.78rem; }
  .xp-badge{ font-size:.68rem; padding:3px 9px; }
  .brand__tag{ font-size:10px; letter-spacing:1.4px; }
  .eyebrow{ font-size:.74rem; }
  .hint{ font-size:.82rem; }
  .muted{ font-size:.86rem; }
  .site-foot__copy{ font-size:.8rem; }
}

/* ============================================================
   7 - SECOND BRAIN progress header
   .sbprog is a dial plus a tally sitting in a nowrap flex row; measured at
   510px wide inside a 485px viewport. Let it wrap under the heading.
   ============================================================ */
@media(max-width:620px){
  .sbprog{ flex:1 1 100%; flex-wrap:wrap; gap:10px; margin-top:10px; }
  .sbdial{ width:54px; height:54px; }
  .sbtally{ font-size:.82rem; }
  .vault-seg__h,.vault-sub__h,.vault-mod__h{ flex-wrap:wrap; }
  .vault-seg__h > *,.vault-sub__h > *,.vault-mod__h > *{ min-width:0; }
}

/* ============================================================
   8 - THE ROADMAP
   The embedded lesson card and the milestone pathway both sit in rows that
   assume desktop width.
   ============================================================ */
@media(max-width:620px){
  .rm-embed{ padding:13px 14px; }
  .rm-embed__f{ flex-direction:column; align-items:stretch; }
  /* 60% of a phone is not a video, it is a stamp. The cap is for the desktop card, where
     the point was that the video should not shout over the checklist beside it. */
  .rm-embed__v{ max-width:100%; }
  .rm-embed__f > *{ width:100%; }
  .rm-sec > summary{ flex-wrap:wrap; gap:4px; }
  .rm-sec__sub{ flex:1 1 100%; }
  .ms-node{ font-size:.8rem; padding:8px 12px; }
  .ms-arrow{ margin:0 2px; }
  .rm-ck-desc{ font-size:.82rem; }
}

/* ============================================================
   9 - SMALL LEFTOVERS
   The header bell overflowed its own box by 3px, and .page picked up a 6px
   horizontal overflow from padding arithmetic on several routes.
   ============================================================ */
/* ============================================================
   9a - THE HEADER CONTROLS SIT RIGHT
   The bell, the avatar and the burger live in .hdr__right, which on desktop is
   pushed to the right edge by the nav sitting between it and the brand. On a
   phone that nav is display:none, so nothing pushes any more and the three
   controls collapse up against the logo, stranded in the middle of the bar
   (measured: left edge at 171px in a 485px window).

   margin-left:auto restores the push without the nav. The controls now end
   20px from the right edge, mirroring the brand's 20px on the left.
   ============================================================ */
@media(max-width:620px){
  .hdr__right{ margin-left:auto; }
  .brand{ flex:0 1 auto; min-width:0; }
}

@media(max-width:620px){
  .page{ overflow-x:clip; }
  .bell{ flex:none; }
  .bell__dot{ font-size:.66rem; }
  .pod{ flex-wrap:wrap; }
  .pod audio{ width:100%; min-width:0 !important; }

  /* long unbroken strings - a pasted URL in a community post, a member's
     email in the admin list - are the classic cause of a page that scrolls
     sideways with no visible culprit */
  .card,.post,.rows,.agf{ overflow-wrap:anywhere; }
}

/* ============================================================
   10 - SAFE AREAS
   The portal installs as a PWA, so on a notched phone in standalone mode the
   home-indicator strip sits over the bottom of the page.
   ============================================================ */
@media(max-width:620px){
  body{ padding-bottom:env(safe-area-inset-bottom); }
  .site-foot{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
}