/* Responsive layer for the prerendered pages.
 *
 * The design sources style almost everything through inline style attributes,
 * which no stylesheet rule can beat on specificity alone — hence the
 * !important overrides below.
 *
 * Two tiers, because the header and the content stop fitting at different
 * widths:
 *
 *   <= 1239px  The desktop header (logo + 6-7 nav cells + chip + CTA) needs
 *              ~1240px. Below that it is swapped for the disclosure panel, and
 *              fixed pixel widths are allowed to shrink. Multi-column layouts
 *              are kept — a tablet has room for them.
 *   <=  900px  Phone territory: grids collapse to one column, the folio rail
 *              and framed-viewport inset are dropped, micro-type is raised to a
 *              readable size.
 *
 * Design grammar is preserved throughout: square geometry (radius 0), hairline
 * rules, IBM Plex Mono micro-labels, no rounded cards.
 */

:root {
  --tdf-rule-sm: rgba(10, 10, 10, 0.18);
}

/* The nav button and panel are in the markup at every width; only the
   breakpoint reveals them. */
.tdf-navbtn,
.tdf-navpanel {
  display: none;
}

/* ============================================================
   Tier 1 — below the width the desktop header needs
   ============================================================ */

@media (max-width: 1239px) {
  /* ---------- Header ---------- */

  /* The desktop nav is a single non-wrapping flex row; it is the dominant
     source of horizontal overflow. Replace it with the panel. */
  header nav[aria-label='Primary'],
  .tdf-hide-sm {
    display: none !important;
  }

  header > div {
    padding-right: 0 !important;
  }

  .tdf-navbtn {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    height: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid var(--tdf-rule-sm);
    background: transparent;
    color: inherit;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .tdf-navbtn-bars {
    position: relative;
    display: block;
    width: 16px;
    height: 9px;
    flex: none;
  }

  .tdf-navbtn-bars::before,
  .tdf-navbtn-bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .tdf-navbtn-bars::before { top: 0; }
  .tdf-navbtn-bars::after { bottom: 0; }

  .tdf-navbtn[aria-expanded='true'] .tdf-navbtn-bars::before {
    transform: translateY(3.75px) rotate(45deg);
  }

  .tdf-navbtn[aria-expanded='true'] .tdf-navbtn-bars::after {
    transform: translateY(-3.75px) rotate(-45deg);
  }

  /* ---------- Nav panel ---------- */

  .tdf-navpanel[data-open='true'] {
    display: block !important;
    border-top: 1px solid var(--tdf-rule-sm);
    background: #fff;
    max-height: calc(100dvh - 58px);
    overflow-y: auto;
  }

  .tdf-navpanel a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--tdf-rule-sm);
    color: #0a0a0a;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .tdf-navpanel a[aria-current='page'] {
    box-shadow: inset 2px 0 0 #0a0a0a;
  }

  .tdf-navpanel a.tdf-navpanel-cta {
    background: #0a0a0a;
    color: #fff;
    border-bottom: 0;
  }

  /* ---------- Overflow safety ---------- */

  img, svg, canvas, video, iframe {
    max-width: 100%;
  }

  /* Inline pixel widths, tagged at build time, become fluid. */
  .tdf-fluid {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Grid and flex children default to min-width:auto, which refuses to shrink
     below min-content and pushes the track past the viewport. */
  [style*='display: grid'] > *,
  [style*='display: flex'] > * {
    min-width: 0;
  }

  /* Content that is genuinely wide — engineering tables, blueprint plates —
     scrolls inside its own box instead of stretching the page. */
  .tdf-scrollx {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  tdf-showroom {
    display: block;
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Tier 2 — phone
   ============================================================ */

@media (max-width: 900px) {
  /* Multi-column grids collapse. minmax(0, 1fr) rather than a bare 1fr: 1fr
     floors at the item's min-content width, so a wide child (the showroom
     control bar) would force the track past the viewport anyway. */
  [style*='grid-template-columns'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Flex rows wrap rather than push past the viewport. */
  [style*='display: flex'] {
    flex-wrap: wrap;
  }

  /* Single-line labels wrap instead of overflowing. */
  [style*='white-space: nowrap'] {
    white-space: normal !important;
  }

  /* The showroom builds its own DOM at runtime, so the build-time tagging never
     sees it. Its stage is already width:100%; these bring its 7.5-9.5px control
     labels up to a readable size and give them a real tap target. */
  tdf-showroom button {
    font-size: 10.5px !important;
    min-height: 40px;
    padding: 9px 12px !important;
  }

  tdf-showroom span {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  /* 6.5-9.5px mono labels are unreadable on a phone. */
  .tdf-micro {
    font-size: 10.5px !important;
    letter-spacing: 0.1em !important;
  }

  /* The vertical folio rail stops being a rail at this width — it becomes a
     tall block above the content. */
  .tdf-folio-rail {
    display: none !important;
  }

  /* The framed-viewport inset eats usable width at phone sizes. */
  .tdf-frame {
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  main,
  section,
  footer {
    max-width: 100vw;
  }
}

/* Very narrow phones. */
@media (max-width: 400px) {
  .tdf-navbtn {
    padding: 0 12px;
  }

  .tdf-navbtn-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tdf-navbtn-bars::before,
  .tdf-navbtn-bars::after {
    transition: none;
  }
}