/* Shared, non-invasive utility layer for R0BATO client deliverables. */
.rb-portalbar,
.rb-portalbar * {
  box-sizing: border-box !important;
}
.rb-portalbar {
  position: sticky !important;
  inset: 0 0 auto 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(13,27,47,.97) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.14) !important;
  font: 600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased !important;
  backdrop-filter: blur(12px) !important;
}
.rb-portalbar__inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(1180px,100%) !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  padding: 7px 16px !important;
}
.rb-portalbar__home,
.rb-portalbar__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  box-shadow: none !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  appearance: none !important;
}
.rb-portalbar__home:hover,
.rb-portalbar__button:hover {
  border-color: #d9a441 !important;
  background: rgba(217,164,65,.12) !important;
  color: #fff !important;
  transform: none !important;
}
.rb-portalbar__home:focus-visible,
.rb-portalbar__button:focus-visible {
  outline: 3px solid #d9a441 !important;
  outline-offset: 2px !important;
}
.rb-portalbar__brand {
  color: #d9a441 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}
.rb-portalbar__title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  color: #d7dde8 !important;
  font-weight: 500 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rb-portalbar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-left: auto !important;
}
.rb-toast {
  position: fixed !important;
  z-index: 2147483647 !important;
  right: 18px !important;
  bottom: 18px !important;
  max-width: min(360px,calc(100vw - 36px)) !important;
  padding: 11px 15px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 9px !important;
  background: #0d1b2f !important;
  color: #fff !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24) !important;
  font: 600 13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity .16s ease,transform .16s ease !important;
}
.rb-toast.is-visible { opacity: 1 !important; transform: translateY(0) !important; }
html.rb-portal-shell .nav,
html.rb-portal-shell .tabs { top: 48px !important; }
@media (max-width: 620px) {
  .rb-portalbar__inner { gap: 7px !important; padding-inline: 10px !important; }
  .rb-portalbar__title { display: none !important; }
  .rb-portalbar__home span { display: none !important; }
  .rb-portalbar__home::after { content: "Hub" !important; }
  .rb-portalbar__button { padding-inline: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-toast { transition: none !important; }
}
@media print {
  .rb-portalbar,.rb-toast { display: none !important; }
  html { scroll-padding-top: 0 !important; }
}

/* Responsive tables. Wide data tables overflowed the viewport on phones
   across ~17 client pages. Scoped to small screens so desktop is untouched. */
@media (max-width: 760px) {
  /* Wrapped by portal-shell.js so header and body columns stay aligned.
     The pre-JS fallback keeps the old block behaviour so nothing is clipped. */
  .rb-tablewrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body table.rb-wrapped { display: table !important; width: auto !important; min-width: 100% !important; }
  .rb-portalbar ~ * table:not(.rb-wrapped),
  body table:not(.rb-wrapped) {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body table:not(.rb-wrapped) > thead,
  body table:not(.rb-wrapped) > tbody { display: table !important; width: 100% !important; min-width: max-content !important; }
}
@media (max-width: 760px) {
  .sec-head { flex-wrap: wrap !important; }
  .sec-head h2 { max-width: 100% !important; }
}
@media (max-width: 760px) {
  /* Last-resort guard: stops stray sticky/scroller children dragging the whole
     page sideways. On body, not html, so position:sticky keeps working. */
  body { overflow-x: hidden; }
}


/* ---------------------------------------------------------------
   MOBILE READING PASS
   Phones are the primary way a client actually opens these.
--------------------------------------------------------------- */
@media (max-width: 760px) {

  /* --- tables: denser, and tell the reader they scroll --- */
  body table {
    font-size: 13px !important;
    position: relative;
  }
  body table th,
  body table td {
    padding: 9px 11px !important;
    line-height: 1.45 !important;
  }
  /* edge shadows appear only on tables that genuinely overflow */
  .rb-tablewrap.rb-scrollable {
    background-image:
      linear-gradient(to right, rgba(0, 0, 0, .30), rgba(0, 0, 0, 0)),
      linear-gradient(to left,  rgba(0, 0, 0, .30), rgba(0, 0, 0, 0));
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 16px 100%, 16px 100%;
    background-attachment: scroll, scroll;
  }
  .rb-tablewrap.rb-scrollable::after {
    content: "Swipe to see the rest \2192";
    display: block;
    position: sticky;
    left: 0;
    padding: 7px 11px 2px;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .72;
    white-space: nowrap;
  }
  .rb-tablewrap.rb-scrolled::after { content: none; }

  /* --- checkboxes are the primary interaction on the roadmap and
         the shot sheet, and 17px is not a tap target --- */
  input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 auto;
  }

  /* --- minimum legible size for the small label styles used across
         the Anton system. Nothing under ~11.5px on a phone. --- */
  .mg .n,
  .grade .name, .grade .pts,
  .who, .phase li span,
  .stat .l, .opp .stat .l, .proof .stat .l,
  .prepared, .topbar .meta, .eyebrow,
  .sec-head .tag, .rec .num, .tn span,
  .ss-brand, .ss-doc, .ss-fact b, .ss-tag {
    font-size: 11.5px !important;
    letter-spacing: .08em !important;
  }
  .hero p.lede, .sec-sub, .means .m p, .bench, .blankslate, .flag, .note-box {
    font-size: 15px !important;
  }

  /* --- portalbar: real tap targets, and stop it eating the screen --- */
  .rb-portalbar__home,
  .rb-portalbar__button {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .rb-portalbar__title { display: none !important; }

  /* --- shot sheet: field guide is used one-handed on a job site --- */
  .ss-tab { font-size: 12.5px !important; min-height: 40px !important; }
  .ss-reset,
  .rb-script__button,
  .ss-panel-tools .ss-duration,
  .ss-panel-tools .ss-progress { min-height: 38px !important; display: inline-flex !important; align-items: center !important; }
  .ss-checkcell { min-width: 34px !important; }

  /* --- long code blocks and monospace citations --- */
  pre, code, .rec code, .cite, .headline-block .tagline {
    font-size: 12px !important;
    word-break: break-word;
  }

  /* belt-and-braces: no page-level sideways scroll on any client page */
  html { overflow-x: hidden !important; }
}

/* --- narrow phones --- */
@media (max-width: 400px) {
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }
  body table { font-size: 12.5px !important; }
  body table th, body table td { padding: 8px 9px !important; }
}

/* --- print: the client prints these for meetings --- */
@media print {
  .rb-portalbar { display: none !important; }
  body table { font-size: 10pt !important; overflow: visible !important; display: table !important; }
  .rb-tablewrap.rb-scrollable::after { content: none !important; }
  section { break-inside: auto; page-break-inside: auto; }
  .means .m, .rec, .soc, .pl, .tier, .nmc, .phase, .stat { break-inside: avoid; page-break-inside: avoid; }
  .sec-head { break-after: avoid; page-break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; opacity: .7; }
  a[href^="/"]::after, a[href^="#"]::after { content: none; }
}