/* ============================================================================
   RoboWorx, Vertical-rail design system
   V4 · Responsive stylesheet: the mobile and narrow-viewport layer.

   Loaded last, after shell.css and pages.css, so its media-query rules win.
   The desktop layout in shell.css / pages.css is untouched; everything here
   sits inside a media query and only applies below the breakpoint.

   Strategy. The desktop layout is a three-column grid (left rail / main /
   right rail). Below 880px the grid collapses to a single column:

     [ left rail  -> a slim dark top bar with the wordmark ]
     [ main       -> full-width page content               ]
     [ right rail -> a dark section below the content       ]

   The mega menu becomes a full-screen overlay. No markup or JavaScript
   changes, this is purely a presentation layer.
   ============================================================================ */

/* ============================================================================
   MOBILE-ONLY CHROME, hidden by default (desktop)
   The bottom bar, the top-bar action group, the rail scrim and the sheet
   header are rendered into every page's markup, but they belong to the mobile
   layout only. They are hidden here, OUTSIDE the media query, so on desktop
   they never paint. The media query below (which appears LATER in source, so
   it wins at equal specificity) switches them on under 880px. This is why the
   desktop layout stays byte-for-byte identical.
   ============================================================================ */
.bottom-bar,
.rail-actions,
.rail-scrim,
.aside-sheet-head { display: none; }

/* ============================================================================
   BREAKPOINT 1, below 880px: the stacked single-column layout
   ============================================================================ */
@media (max-width: 880px) {

  /* --- Shell: collapse the three-column grid ------------------------------ */
  .page {
    grid-template-columns: minmax(0, 1fr);   /* minmax(0,..) lets the track shrink below content min-width, preventing horizontal overflow from a long word/heading */
  }

  /* --- Left rail -> top bar ----------------------------------------------- */
  .rail {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 14px 20px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: auto;            /* undo the desktop 100vh pin: the mobile rail is a top bar */
    position: sticky;        /* keep the brand + rail trigger reachable on scroll */
    top: 0;
    z-index: 35;             /* above content, below the mega overlay (40) */
  }
  .rail-text,
  .rail-foot {
    display: none;            /* the sideways flourish has no place on mobile */
  }

  /* --- Main column -------------------------------------------------------- */
  .main {
    padding: 26px 20px 80px;   /* extra bottom padding clears the fixed bottom bar */
  }
  .nav-strip {
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 18px;
    margin-bottom: 32px;
    position: relative;
  }
  /* Show the hamburger; it sits at the left of the nav strip. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 9px 13px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
  }
  .nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
  .nav-toggle-bars span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  body.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* Links collapse into a dropdown panel, hidden until the hamburger opens it. */
  .nav-strip .links {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    order: 3;                 /* below the toggle row */
    font-size: 12px;
    letter-spacing: 0.1em;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  body.nav-open .nav-strip .links { display: flex; }
  .nav-strip .links a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }
  .nav-strip .links a:last-child { border-bottom: none; }
  /* S50 nav fix: the crumb is NAVIGATION, not decoration, for deep pages
     (the 24 project tools, engagements, knowledge-base articles) its parent
     links are the contextual way back up, and the bottom bar does not carry
     those. It renders as a slim full-width trail above the page content,
     scrolling sideways if a long trail overflows rather than truncating the
     links away. An empty crumb renders nothing (no stray gap). */
  .nav-strip .crumb {
    display: block;
    width: 100%;
    text-align: left;
    overflow-x: auto;
    text-overflow: clip;
    font-size: 11px;
    padding: 2px 0 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-strip .crumb::-webkit-scrollbar { display: none; }
  .nav-strip .crumb:empty { display: none; }
  /* S52: on a phone the crumb links are the ONLY contextual way back (the
     bottom bar carries global destinations only), so they must be real tap
     targets, 11px text with no padding was a ~14px-tall target, far under the
     44px minimum, which is why the way back read as "not there". */
  .nav-strip .crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px 0 0;
    font-size: 12px;
    border-bottom: none;              /* the row already has its own rule */
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* --- Right rail -> dark section below the content ----------------------- */
  .aside {
    padding: 36px 24px;
  }

  /* --- Primary-navigation rail (wiki index): on mobile, surface it as a
     collapsible panel ABOVE the article instead of dumping it at the very
     bottom, so jumping to another discipline does not mean scrolling past the
     whole article. The .page grid is a single column on mobile; order pulls
     the aside above main. The body collapses unless .aside-open. ----------- */
  .page-railnav { display: grid; }
  .page-railnav .rail  { order: 0; }
  .page-railnav .aside { order: 1; padding: 0; }
  .page-railnav .main  { order: 2; }
  .aside-nav .aside-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--ink); color: #fff; border: none; cursor: pointer;
    padding: 16px 20px; margin: 0;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700;
  }
  .aside-nav .aside-toggle-chev { transition: transform .2s ease; color: var(--rust); }
  .aside-nav.aside-open .aside-toggle-chev { transform: rotate(180deg); }
  .aside-nav .aside-body { display: none; padding: 24px 20px; }
  .aside-nav.aside-open .aside-body { display: block; }

  /* --- Mega menu -> in-chrome panel (Browse keeps the top + bottom bars) -- */
  /* The mega sits BELOW both bars (z-index 30 < top bar 35 < bottom bar 45)
     and is padded clear of them, so opening Browse no longer hides the
     navigation. It scrolls internally between the two bars like any other
     page, which is the "static scroll-down screen" behaviour we want. */
  .mega-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 30;
    padding: 70px 20px 80px;
    overflow-y: auto;
  }
  body.mega-open { overflow: hidden; }     /* lock the page behind the overlay */

  /* The desktop rule "body.mega-open .mega-overlay" sets left:var(--rail-left-w)
     and outranks the plain .mega-overlay above it, so on mobile the overlay was
     starting a rail-width in from the left and only covering part of the screen.
     Re-assert full-bleed at matching specificity. */
  body.mega-open .mega-overlay { left: 0; right: 0; top: 0; bottom: 0; height: 100%; }

  /* Resources section switcher (.res-nav) and category tabs (.r-tabs):
     on a phone the long mono labels wrapped onto several uneven rows, which
     read as clutter and broke the underline-tab line. Instead keep each on a
     single row that scrolls sideways, the standard tidy pattern for tab strips
     with long labels. The container border stays full-width and the active
     underline sits cleanly on one baseline. */
  .res-nav,
  .r-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;                    /* no vertical scroll inside the strip */
    touch-action: pan-x;                   /* lock the gesture to horizontal only */
    overscroll-behavior-x: contain;        /* don't chain the scroll to the page */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* tidy: hide the scrollbar (Firefox) */
    gap: 22px;
  }
  .res-nav::-webkit-scrollbar,
  .r-tabs::-webkit-scrollbar { display: none; }   /* tidy: hide the scrollbar (WebKit) */
  .res-nav-link,
  .r-tab {
    flex: 0 0 auto;                        /* keep full label width, let the row scroll */
    white-space: nowrap;
  }
  .r-tabs { gap: 4px; }
  /* A little trailing room so the last tab is not flush against the edge. */
  .res-nav { padding-right: 20px; }
  .r-tabs  { padding-right: 16px; }

  /* MOBILE PERFORMANCE: disable the .main blur when the mega menu is open.
     The mobile overlay is full-screen and fully covers the main column, so
     blurring the layer beneath is wasted GPU work that visibly hurts
     interaction smoothness on mid-range and budget devices. The blur stays
     on desktop where the cost is trivial and the visual benefit is real
     (the overlay covers only the middle column there, so the rails on
     either side benefit from the blurred middle). */
  body.mega-open .main { filter: none; }

  /* MOBILE PERFORMANCE: skip render work for discipline cards that have
     scrolled out of view. content-visibility: auto lets the browser short-
     circuit layout and paint for off-screen elements; contain-intrinsic-size
     tells it how much space to reserve so the scrollbar does not jump as
     elements virtualise in and out of view. 220px is the measured height
     of a typical discipline card on mobile. */
  .mega-disc {
    content-visibility: auto;
    contain-intrinsic-size: 0 220px;
  }
  .mega-nav {
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 32px;
  }
  .mega-nav .links { gap: 16px; font-size: 9px; flex-wrap: wrap; }
  .mega-title { font-size: 38px; }
  .mega-sub   { font-size: 17px; margin-bottom: 32px; }
  .mega-grid  { grid-template-columns: 1fr; gap: 32px; }

  /* --- Page content: collapse two- and three-column grids ----------------- */
  .midrow,
  .skills-grid,
  .r-grid,
  .role-grid,
  .dash-cards,
  .eng-parties {
    grid-template-columns: 1fr;
  }
  .midrow {
    gap: 32px;
    margin-top: 40px;
    padding-top: 36px;
  }

  /* --- Academy hero: scale the big display type + tighten padding --------- */
  .ac-hero { padding: 28px 24px; }
  .ac-hero h1 { font-size: 34px; }
  .ac-hero p { font-size: 15px; }
  .ac-hero-stats { gap: 22px; }
  .ac-hero-stat .n { font-size: 24px; }

  /* --- Academy level cards: badge + info on top, status meta below -------- */
  .ac-level-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 18px;
  }
  .ac-level-meta {
    grid-column: 1 / -1;      /* full width on its own row */
    text-align: left;
    min-width: 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 12px; border-top: 1px solid var(--line);
  }
  .ac-status { margin-bottom: 0; }
  .ac-badge { width: 52px; height: 52px; border-width: 2px; }
  .ac-badge .num { font-size: 20px; }
  .ac-badge .lv { font-size: 7px; }
  .ac-badge.done .tick { font-size: 22px; }

  /* --- Profile hero: stack avatar above the name so the big serif name has
     the full column width instead of wrapping awkwardly beside the avatar.
     The live layout is the .profile-head-m6 GRID (auto 1fr auto), so collapse
     that to a single column rather than the base flex rule. -------------- */
  .profile-head,
  .profile-head-m6 { grid-template-columns: 1fr; display: grid; gap: 16px; padding: 22px 20px; }
  .profile-name { font-size: 44px; }

  /* --- Headings: scale the large display type down ------------------------ */
  .hero h1            { font-size: 48px; }
  .hero .subline      { font-size: 18px; margin-top: 24px; }
  .browse-head h1,
  .support-head h1    { font-size: 38px; }
  .dash-head h1,
  .eng-head h1        { font-size: 36px; }
  .auth-success-h     { font-size: 34px; }
  .legal-body h1      { font-size: 32px; }
  .v0-heading         { font-size: 40px; }
  .cc-email           { font-size: 20px; }
  .support-head,
  .dash-head,
  .eng-head           { margin-bottom: 28px; }

  /* --- Browse row: stack number, body and meta ---------------------------- */
  .row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .row:hover { padding-left: 0; }          /* no slide-in affordance on touch */

  /* --- Dashboard engagement row: stack the meta below --------------------- */
  .dash-eng {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .dash-eng:hover { padding-left: 0; }

  /* --- Legal tables: let a wide table scroll rather than overflow --------- */
  .legal-body .md-table {
    display: block;
    overflow-x: auto;
    font-size: 12px;
  }

  /* ========================================================================
     MOBILE NAVIGATION: bottom bar, top-bar actions, rail slide-over.
     Everything here is inside the 880px query, so the desktop layout above
     the breakpoint is untouched.
     ======================================================================== */

  /* Retire the old in-strip nav. The hamburger and its dropdown are replaced
     by the bottom bar, but the strip itself stays as the carrier of the
     breadcrumb trail (S50 nav fix above): only the link row and toggle are
     removed. The strip's box collapses to nothing when the crumb is empty. */
  .nav-strip {
    display: block;
    padding: 0;
    margin: 0;
    border-bottom: none;
    min-height: 0;
  }
  .nav-toggle,
  .nav-strip .links { display: none; }

  /* --- Top-bar actions (right side of the dark top bar) ------------------- */
  /* S53 mobile MEDIUM-1: every control in the persistent top bar was well
     under the 44x44 minimum, the brand 20x21, search and the rail trigger
     21x21, the avatar 30x30, on a bar that is on screen on every page. The
     glyphs stay their drawn size; the HIT BOX grows around them, and the gap
     shrinks from 15px to absorb the extra width. */
  .rail-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .rail-actbtn,
  .rail-railbtn {
    background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0;
    color: #cfc8b8;
  }
  .rail-brand {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: 4px;
  }
  .rail-actbtn svg,
  .rail-railbtn svg { width: 21px; height: 21px; }
  .rail-railbtn { color: var(--rust); }   /* the rail trigger reads as the live control */
  .rail-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    /* the 44px hit box without a 44px circle */
    box-sizing: content-box; padding: 5px; background-clip: content-box;
    background: var(--rust); color: #fff; font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.22);
    cursor: pointer; overflow: hidden; flex: 0 0 auto;
  }
  .rail-avatar.has-photo { background: none; }
  .rail-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rail-signin {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: #fff; font-weight: 700; text-decoration: none;
    cursor: pointer;
  }

  /* S53 mobile LOW-1: keep the local-review banner clear of the bottom bar. */
  .sample-banner { bottom: 56px; }

  /* --- Bottom bar --------------------------------------------------------- */
  .bottom-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    height: 56px; background: var(--ink); border-top: 1px solid #000;
    z-index: 45;                 /* above the mega (40) so tabs stay tappable */
  }
  .bb-tab {
    flex: 1; min-width: 0; text-decoration: none; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: #9a937f;
  }
  .bb-ic { width: 20px; height: 20px; }
  .bb-lb {
    /* S53 mobile MEDIUM-3: 7.5px was the smallest text anywhere on the
       platform and it labelled the PRIMARY mobile navigation. Six tabs at
       60-65px each leave room for 10px once the tracking comes off. */
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0;
    text-transform: uppercase; font-weight: 700; white-space: nowrap;
  }
  .bb-tab.is-active,
  .bb-tab.is-active .bb-lb { color: var(--rust); }
  .bb-dot {
    position: absolute; top: 9px; left: calc(50% + 7px);
    width: 7px; height: 7px; border-radius: 50%; background: var(--rust);
  }

  /* --- Right rail -> top-right slide-over sheet (every page, consistent) --- */
  .aside {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 84%; max-width: 360px;
    transform: translateX(100%);
    transition: transform 0.26s ease;
    z-index: 49;
    overflow-y: auto;
    padding: 0;                  /* the header + body provide their own padding */
  }
  body.rail-open .aside { transform: none; }

  .aside-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1;
    background: var(--ink); color: #fff;
    padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .aside-sheet-title {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--rust); font-weight: 700;
  }
  .aside-sheet-close {
    background: none; border: none; color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
    /* S53 mobile MEDIUM-1: was 23x26. */
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0;
  }
  /* The body always shows inside the sheet (overriding the railNav collapse),
     and the in-body eyebrow is hidden so the label is not duplicated, the
     sheet header already carries it. */
  .aside .aside-body,
  .aside-nav .aside-body { display: block; padding: 22px 18px; }
  .aside .aside-body .aside-label { display: none; }
  .aside-nav .aside-toggle { display: none; }   /* replaced by the top-bar trigger */
  .page-railnav .aside { padding: 0; }

  /* S53 mobile MEDIUM-2: a family of mono micro-links rendering 12-17px tall
   , the Field-notes "read more", the KB directory link, the power-tool
     links, the profile-editor public-id link, the support jump links. They are
     the same component in different clothes, so one rule gives all of them a
     real 44px target rather than editing eight declarations. */
  .tip-more,
  .tips-foot,
  .kb-dir-full,
  .kb-rel,
  .pwr-link,
  .pwr-guide,
  .pe-pub-idlink,
  .sup-go,
  .sup-alink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- Scrim behind the open sheet ---------------------------------------- */
  body.rail-open .rail-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(10, 10, 10, 0.5); z-index: 48;
  }

  /* --- Overlay housekeeping ----------------------------------------------- */
  .sl-trigger { bottom: 72px; }                            /* lift FAB above the bar */
  body.rail-open .sl-trigger,
  body.mega-open .sl-trigger { display: none; }            /* hide FAB under overlays */

  /* --- Spec builder: stack the drill above the brief ----------------------- */
  .sb-stage { flex-direction: column; min-height: 0; }
  .sb-drill { padding: 16px 15px; }
  .sb-drill-head { flex-wrap: wrap; gap: 10px; }
  .sb-bar { gap: 6px; }
  .sb-sector { display: block; flex: 1 1 100%; }
  .sb-sector > summary { width: 100%; justify-content: space-between; }
  .sb-sector-menu { width: 100%; min-width: 0; }
  .sb-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sb-card { min-height: 90px; padding: 11px 12px; }
  .sb-card-name { font-size: 13.5px; margin: 5px 0 6px; }
  .sb-card-subs { display: none; }                         /* keep mobile cards compact */
  .sb-spec { width: auto; border-top: 1px solid rgba(255,255,255,.14); }
  .sb-num { font-size: 26px; }

  /* Publish checklist stacks on narrow screens. */
  .pe-pub-chk { grid-template-columns: 1fr; }
}

/* ============================================================================
   BREAKPOINT 2, below 480px: small-phone tightening
   ============================================================================ */
@media (max-width: 480px) {

  .main { padding: 22px 16px 80px; }

  /* S53 mobile HIGH-3: .ax-row is a space-between flex row with a
     `flex: 0 0 auto` segmented control whose four nowrap buttons have a
     288px intrinsic width. At 360px the control ran 17px past the viewport
     ("Largest" unreachable) and the label column was crushed to 53px, wrapping
     "Scale the whole interface." over five lines. On a small phone the row
     stacks and the control takes the full width. */
  .ax-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .ax-seg { flex: 1 1 auto; width: 100%; }
  .ax-seg-btn { flex: 1; padding: 9px 8px; }
  /* S53 mobile HIGH-4: `.aside { padding: 32px 18px }` used to live here, a
     leftover from the pre-slide-over layout where the right rail was a dark
     section BELOW the content. Since the 880px rule turned .aside into a fixed
     off-canvas sheet with padding:0 (the header and body carry their own), this
     later, equal-specificity rule put a 32px dead band above the sticky sheet
     header, stopped its rule spanning the sheet, and cost 36px, 12%, of sheet
     content width on every route that is not .page-railnav. Deleted. */
  .mega-overlay { padding: 20px 16px; }
  .ac-hero { padding: 24px 18px; }
  .ac-hero h1 { font-size: 28px; }
  .profile-name { font-size: 36px; }

  /* Headings tighten further so a long word cannot overflow a small screen. */
  .hero h1            { font-size: 38px; }
  .hero .subline      { font-size: 16px; }
  .browse-head h1,
  .support-head h1,
  .mega-title         { font-size: 31px; }
  .dash-head h1,
  .eng-head h1        { font-size: 30px; }
  .auth-success-h     { font-size: 29px; }
  .legal-body h1      { font-size: 27px; }
  .v0-heading         { font-size: 33px; }
  .cc-email           { font-size: 18px; }

  /* Section labels and leads ease down a touch for the narrow column. */
  .lead,
  .support-head .lead { font-size: 17px; }
  .faq-q              { font-size: 17px; }
}