/* Phone and small-tablet layout for the whole site. Linked on every page after the page's own styles.
   1) The two site headers (components/Header.jsx, components/site-header.js) collapse into
      logo + theme button + menu button; the menu opens the drawer (.sbm-drawer) below the bar.
   2) Shared fixes for the inline-styled React pages: wide grids stack, big paddings shrink,
      tables and long rows scroll inside themselves instead of widening the page. */

/* ---------- Header: menu button and drawer (hidden on desktop) ---------- */
.sbm-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:10px;border:1.5px solid var(--border-default,#e3e6ef);background:transparent;color:var(--text-heading,#131c66);cursor:pointer;padding:0}
.sbm-burger:focus-visible{outline:3px solid var(--border-focus,#2f6fed);outline-offset:2px}
.sbm-burger svg{display:block}
.sbm-drawer{display:none}

@media (max-width:900px){
  .sbm-hdr{padding:10px 16px!important;flex-wrap:nowrap!important;gap:8px}
  .sbm-hdr img[src*="assets/logo"]{height:32px!important}
  .sbm-hdr .sbm-nav,.sbm-hdr .sbm-desk{display:none!important}
  .sbm-burger{display:inline-flex}
  .sbm-hdr.sbm-open .sbm-drawer{display:block}
  .sbm-drawer{position:absolute;left:0;right:0;top:100%;background:var(--white,#fff);border-bottom:1px solid var(--border-default,#e3e6ef);box-shadow:0 18px 40px rgba(11,16,51,.18);max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px);overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 20px;font-family:var(--font-body,"Inter",ui-sans-serif,system-ui,sans-serif);z-index:960}
  .sbm-drawer a{text-decoration:none}
  .sbm-drawer .sbm-link{display:flex;align-items:center;min-height:48px;padding:0 4px;border-bottom:1px solid var(--border-default,#e3e6ef);color:var(--text-heading,#0b1033);font-weight:700;font-size:15px}
  .sbm-drawer .sbm-link.sbm-on{color:var(--brand-primary,#1d2fa0)}
  .sbm-drawer .sbm-group{padding:12px 0 6px;border-bottom:1px solid var(--border-default,#e3e6ef)}
  .sbm-drawer .sbm-glabel{display:block;padding:0 4px 4px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#6b7280)}
  .sbm-drawer .sbm-sub{display:block;padding:10px 12px;border-radius:10px;color:var(--text-heading,#0b1033)}
  .sbm-drawer .sbm-sub.sbm-on{background:var(--navy-100,#e5e9fb);color:var(--brand-primary,#1d2fa0)}
  .sbm-drawer .sbm-sub b{display:block;font-size:14.5px;font-weight:700}
  .sbm-drawer .sbm-sub small{display:block;font-size:12.5px;color:var(--text-muted,#6b7280);margin-top:2px;line-height:1.35}
  .sbm-drawer .sbm-acct{display:flex;flex-direction:column;gap:10px;padding-top:16px}
  .sbm-drawer .sbm-me{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border-default,#e3e6ef);border-radius:12px;color:var(--text-heading,#0b1033)}
  .sbm-drawer .sbm-me b{font-size:14.5px}
  .sbm-drawer .sbm-me span{font-size:12px;font-weight:600;color:var(--text-muted,#6b7280);letter-spacing:.03em}
  .sbm-drawer .sbm-btn{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid var(--border-strong,#c9cee0);background:transparent;color:var(--text-body,#374151);font-family:inherit;cursor:pointer;width:100%}
  .sbm-drawer .sbm-btn.sbm-primary{background:#1d2fa0;border-color:#1d2fa0;color:#fff}
  .sbm-drawer .sbm-btn.sbm-red{background:#e02b2b;border-color:#e02b2b;color:#fff}
  html.sb-dark .sbm-drawer .sbm-btn.sbm-primary{background:#5570ff;border-color:#5570ff}
  html.sbm-lock{overflow:hidden}
}

/* ---------- Page-wide phone fixes ---------- */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:clip}
  img,video,iframe,canvas,svg{max-width:100%}
  img{height:auto}
  /* Page layouts written as inline grids: two- and three-column layouts stack into one column,
     four- to six-tile rows go two-up. Calendars (repeat(7)), self-sizing grids (auto-fill / auto-fit)
     and "label | bar | value" rows (fixed px + 1fr) keep their columns; so does [data-sbm-keep]. */
  [style*="grid-template-columns"]:not([style*="repeat(7"]):not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="px 1fr"]):not([data-sbm-keep]){grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns"][style*="repeat(4"]:not([data-sbm-keep]),
  [style*="grid-template-columns"][style*="repeat(5"]:not([data-sbm-keep]),
  [style*="grid-template-columns"][style*="repeat(6"]:not([data-sbm-keep]){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* auto-fill / auto-fit card grids: never wider than the screen */
  [style*="grid-template-columns"][style*="auto-fill"],[style*="grid-template-columns"][style*="auto-fit"]{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))!important}
  /* Big desktop gutters */
  section[style*="padding"],main[style*="padding"]{padding-left:16px!important;padding-right:16px!important}
  section[style*="padding: 72px"],section[style*="padding: 80px"],section[style*="padding: 64px"],section[style*="padding: 96px"]{padding-top:40px!important;padding-bottom:40px!important}
  [style*="gap: 48px"],[style*="gap: 56px"],[style*="gap: 64px"]{gap:28px!important}
  /* Wide tables scroll sideways inside their own box */
  table{max-width:100%}
  .sbm-scroll,div:has(>table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  h1{overflow-wrap:anywhere}
  /* Sticky tab bars sit right under the shorter phone header and scroll sideways instead of wrapping. */
  [style*="position: sticky"][style*="top: 73px"],[style*="position: sticky"][style*="top: 72px"]{top:61px!important}
  [style*="position: sticky"][style*="flex-wrap: wrap"]{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important}
  [style*="position: sticky"][style*="flex-wrap: wrap"]::-webkit-scrollbar{display:none}
  [style*="position: sticky"][style*="flex-wrap: wrap"]>*{flex:none;white-space:nowrap}
}
@media (max-width:560px){
  /* Small tiles (stats, filters, chips) that read fine two-up keep two columns. */

  /* Big inline display headings (40px+ / 30px+) scale down; compact headings keep their size. */
  h1[style*="font-size: 4"],h1[style*="font-size: 5"],h1[style*="font-size: 6"]{font-size:clamp(28px,8.5vw,40px)!important;line-height:1.12!important}
  h2[style*="font-size: 3"],h2[style*="font-size: 4"]{font-size:clamp(22px,6.6vw,30px)!important;line-height:1.2!important}
  input,select,textarea{font-size:16px} /* stops iOS zooming into fields */
  /* Card grids go one per row; grids of small tiles (min 180px or less) go two-up. */
  [style*="grid-template-columns"][style*="auto-fill"],[style*="grid-template-columns"][style*="auto-fit"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns"][style*="minmax(120px"],[style*="grid-template-columns"][style*="minmax(140px"],
  [style*="grid-template-columns"][style*="minmax(150px"],[style*="grid-template-columns"][style*="minmax(160px"],
  [style*="grid-template-columns"][style*="minmax(180px"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* "label | bar | value" rows: shrink the fixed label and value columns */
  [style*="grid-template-columns"][style*="px 1fr"]{grid-template-columns:minmax(0,38%) minmax(0,1fr) auto!important}
}

/* ---------- Tables as cards (components/sb-mobile.js marks them .sbm-stack) ---------- */
@media (max-width:640px){
  table.sbm-stack{display:block;min-width:0!important;width:100%!important;background:transparent!important;box-shadow:none!important}
  table.sbm-stack thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.sbm-stack tbody,table.sbm-stack tfoot{display:block;width:100%}
  table.sbm-stack tr.sbm-hrow{display:none!important}
  table.sbm-stack tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;background:var(--white,#fff);border:1px solid var(--border-default,#e3e6ef)!important;border-radius:12px;margin:0 0 10px;padding:6px 0}
  table.sbm-stack :is(td,th){display:block;width:auto!important;max-width:none!important;padding:7px 14px!important;border:none!important;text-align:left!important;white-space:normal!important}
  table.sbm-stack :is(td,th)[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#6b7280)}
  table.sbm-stack tbody th{background:none!important;color:inherit!important;font-size:inherit!important;letter-spacing:normal!important;text-transform:none!important}
  table.sbm-stack :is(td,th):first-child,table.sbm-stack .sbm-wide{grid-column:1/-1}
  table.sbm-stack :is(td,th):first-child{font-weight:700}
  table.sbm-stack :is(td,th):first-child::before{display:none!important}
  table.sbm-stack :is(td,th):empty{display:none}
}