/* =====================================================================
   Recall — shared responsive styles (dispatch-ledger design system)

   The pages are otherwise inline-styled (Claude Design "dc" format), so
   these rules use classes + !important to override inline styles at
   mobile widths. Desktop layout is left to the existing inline styles.
   ===================================================================== */

/* Hamburger: the checkbox is visually hidden; the label shows only on mobile. */
.rc-navtoggle-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rc-navtoggle { display: none; }

/* ---------- Multi-column sections stack on small screens ---------- */
@media (max-width: 860px) {
  .rc-cols  { grid-template-columns: 1fr !important; }
  .rc-cols3 { grid-template-columns: 1fr !important; }
  .rc-cols4 { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Header + collapsed nav (mobile) ---------- */
@media (max-width: 760px) {
  header {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 60px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    position: static !important;
    row-gap: 6px;
  }

  .rc-navtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: #F4F1EA;
    background: transparent;
    border: 1.5px solid rgba(244, 241, 234, 0.22);
    font-size: 20px;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  .rc-nav {
    display: none !important;
    order: 5;
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-top: 6px;
  }
  .rc-navtoggle-cb:checked ~ .rc-nav { display: flex !important; }

  .rc-nav > a {
    padding: 13px 8px !important;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(244, 241, 234, 0.14);
  }
}

/* ---------- Trim oversized side padding on the smallest screens ---------- */
@media (max-width: 640px) {
  section.rc-pad,
  .rc-pad { padding-left: 20px !important; padding-right: 20px !important; }
}

/* =====================================================================
   Landing page (index.html) — mobile reflow
   ===================================================================== */

/* The log strip does not animate, so on a narrow screen every entry after
   the first was clipped with no way to reach it. Let it scroll under a
   finger instead, with the scrollbar hidden so the strip still reads as a
   ticker rather than a scroll region. */
.rc-logstrip {
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rc-logstrip::-webkit-scrollbar { display: none; }

/* Trade cards: two-up on tablet, single column on phones. */
@media (max-width: 600px) {
  .rc-cols4 { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  /* The tagline pushes the hamburger onto a second row on a 375px screen. */
  .rc-brand-tag { display: none !important; }

  /* The toggle is a <label>, which can't take focus — surface the checkbox's
     focus ring on it so the menu is reachable from a keyboard. */
  .rc-navtoggle-cb:focus-visible ~ .rc-navtoggle {
    outline: 2px solid #E8500A;
    outline-offset: 2px;
  }

  /* Belt-and-suspenders: never allow a stray element to force sideways
     scroll. Scoped to the same breakpoint where the header goes static, so
     it can't break position:sticky. */
  html, body { overflow-x: hidden; }

  /* Underlined text links: keep the hairline tight against the text, but
     give the anchor a 44px hit area. */
  .rc-tap { position: relative; display: inline-block; }
  .rc-tap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  .rc-fcol a {
    padding: 11px 0 !important;
    min-height: 44px;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
  }

  /* The wordmark is also the home link — give it a full-height hit area. */
  .rc-brand { min-height: 44px; align-items: center !important; }

  /* 11px uppercase mono reads as noise on a phone. */
  .rc-label { font-size: 12.5px !important; }

  /* Both ticket labels together are ~12px too wide for the card at 375px.
     Let the status drop to a second line there, but keep the column gap at
     zero so it stays on one line as soon as it fits (390px and up) —
     justify-content:space-between still separates them. */
  .rc-tickethead {
    flex-wrap: wrap !important;
    row-gap: 3px;
    column-gap: 0;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 640px) {
  /* Display type has to come down, not just rewrap — 64px eats the viewport. */
  .rc-h1 { font-size: 40px !important; line-height: 1.05 !important; }
  .rc-h2 { font-size: 30px !important; line-height: 1.08 !important; }
  .rc-stat { font-size: 40px !important; }
  .rc-stat span { font-size: 22px !important; }

  .rc-hero {
    gap: 36px !important;
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  /* Section heading and its mono kicker stack instead of squeezing. */
  .rc-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* margin-left:auto strands this button alone on a right-aligned row. */
  .rc-mathcta > a { margin-left: 0 !important; }

  /* 12px mono card copy is under comfortable reading size on a phone. */
  .rc-cols4 > div > div + div { font-size: 13px !important; }
}

@media (max-width: 380px) {
  .rc-h1 { font-size: 34px !important; }
  .rc-h2 { font-size: 26px !important; }
}

/* ---------- Dashboard web-app layout collapses to a single column ---------- */
@media (max-width: 860px) {
  .rc-dash { flex-direction: column !important; }

  .rc-sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    box-sizing: border-box;
  }
  .rc-sidebar nav {
    flex-direction: row !important;
    flex-wrap: wrap;
    padding: 6px 0 !important;
    gap: 6px;
    width: 100%;
  }
  .rc-sidebar nav button { flex: 1 1 auto; }
  .rc-dash-foot {
    margin-top: 0 !important;
    border-top: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px 16px !important;
    width: 100%;
  }

  .rc-dash-cols { grid-template-columns: 1fr !important; }
  .rc-dash-cols > .rc-leadlist { border-right: 0 !important; border-bottom: 1.5px solid #17150F; }
}