/* PPLI Advisor Workspace — the mobile layer.
 *
 * This sheet exists because of a cascade defect, not a design decision.
 *
 * app.css always had a mobile block: at 1080px and below it collapsed the shell
 * to one column and turned the rail into a horizontal bar. That block was
 * written with a plain class selector, `.wsx-app`, specificity (0,1,0). app4.css
 * later set `.wsx .wsx-app{grid-template-columns:254px 1fr}` unconditionally,
 * specificity (0,2,0) — and a higher specificity beats a media query. So the
 * collapse never once fired. On a 390px phone the workspace was rendering a
 * 224px navigation rail beside a 166px column of content, which is not a narrow
 * layout, it is a broken one.
 *
 * Everything here is scoped to the same or higher specificity as the rules it
 * has to beat, and this sheet loads last, so equal specificity resolves in its
 * favour. Where app3.css used !important on the content column, this has to
 * as well; that is not enthusiasm, it is the only way to win.
 *
 * The breakpoint is 820px rather than 767px so that a tablet held in portrait
 * gets the collapsed layout too. A 254px rail against 514px of content is not
 * broken, but it is not worth defending either.
 */

@media (max-width: 820px) {

  /* ---------------------------------------------------------------- shell */

  .wsx .wsx-app { grid-template-columns: minmax(0, 1fr) !important; }

  /* The rail becomes a horizontal strip that stays with you as you scroll.
     Twenty destinations do not fit across a phone, so it scrolls sideways —
     the same pattern as a tab bar, and it keeps the current view visible. */
  .wsx .wsx-rail {
    position: sticky; top: 0; z-index: 6;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 2px;
    max-height: none; overflow-x: auto; overflow-y: hidden;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.12);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .wsx .wsx-rail::-webkit-scrollbar { display: none; }

  .wsx .wsx-rail-logo { width: 84px; height: auto; flex: 0 0 auto; margin: 0 10px 0 2px; }
  .wsx .wsx-rail-sub { display: none; }

  /* Who is signed in still matters — a carrier looking over a shoulder should
     see whose book this is — so the firm chip stays, just tightened. */
  .wsx .wsx-rail-firm {
    flex: 0 0 auto; margin: 0 10px 0 0; padding: 6px 9px;
    max-width: 190px;
  }
  .wsx .wsx-rail-firm .r { display: none; }

  /* Group headings are a vertical device. They cannot work in a row. */
  .wsx .wsx-grp { display: none; }
  .wsx .wsx-grp:before { display: none; }

  .wsx .wsx-nav {
    flex: 0 0 auto; white-space: nowrap;
    padding: 9px 13px;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .wsx .wsx-nav.on {
    border-left: none;
    border-bottom-color: var(--gd, #B09548);
    background: linear-gradient(180deg, rgba(176,149,72,.04), rgba(176,149,72,.16));
  }
  .wsx .wsx-nav .cnt { margin-left: 6px; }

  .wsx .wsx-rail-out { flex: 0 0 auto; margin-left: 6px; padding: 0 6px; border-top: none; }

  /* ---------------------------------------------------------------- content */

  .wsx .wsx-main {
    max-width: none !important;
    padding: 20px 16px 48px !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }

  .wsx .wsx-head { display: block; }
  .wsx .wsx-head h1 { font-size: 24px; line-height: 1.16; }
  .wsx .wsx-head .sub { margin-top: 8px; }
  .wsx .wsx-head-a { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }

  /* A table on a phone either scrolls or lies. app2.css clips the content
     column, so without this the right-hand columns would simply vanish. */
  .wsx .wsx-main table {
    display: block; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .wsx .wsx-main table td, .wsx .wsx-main table th { white-space: nowrap; }

  /* Anything laid out in columns comes down to one. These are the grid
     containers the workspace actually uses; each is listed rather than caught
     by a blanket rule, so nothing collapses that was not meant to. */
  .wsx .wsx-tiles,
  .wsx .wsx-grid,
  .wsx .wsx-cards,
  .wsx .wsx-two,
  .wsx .wsx-three,
  .wsx .wsx-split,
  .wsx .wsx-people,
  .wsx .wsx-form-2,
  .wsx .wsx-kpis,
  .wsx .wsx4-cols,
  .wsx .wsx4-board,
  .wsx .sim-in,
  .wsx .wsx-toolgrid { grid-template-columns: minmax(0, 1fr) !important; }

  /* The drawer is a side panel on a desktop and a sheet on a phone. */
  .wsx .wsx-drawer {
    width: 100% !important; max-width: none !important;
    left: 0 !important; right: 0 !important;
  }
  .wsx .wsx-dr-body { padding-left: 18px; padding-right: 18px; }
  .wsx .wsx-dr-head { padding-left: 18px; padding-right: 18px; }
  .wsx .wsx-dr-mark { display: none; }

  /* Buttons that sat in a row need to be reachable with a thumb. */
  .wsx .wsx-btn { min-height: 40px; }
  .wsx .wsx-drawer-act { display: flex; flex-wrap: wrap; gap: 8px; }
  .wsx .wsx-drawer-act .wsx-btn { flex: 1 1 auto; }

  /* The sign-in gate, which is the first thing anyone opening the demo sees. */
  .wsx .wsx-gate { padding: 28px 16px; }
  .wsx .wsx-gate-card { width: 100%; max-width: none; padding: 26px 20px 28px; }
  .wsx .wsx-gate-card input[type="text"],
  .wsx .wsx-gate-card input[type="password"] { width: 100%; box-sizing: border-box; font-size: 16px; }
  .wsx .wsx-gate-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

  /* 16px is the size below which iOS zooms the page on focus. Every input in
     the workspace has to clear it or the layout jumps the moment anyone taps
     a field — which, in a demo, happens in front of an audience. */
  .wsx input, .wsx select, .wsx textarea { font-size: 16px; }

  .wsx .wsx-splash-mark { width: 150px; }
}

/* Very small handsets. */
@media (max-width: 400px) {
  .wsx .wsx-main { padding: 16px 12px 40px !important; }
  .wsx .wsx-rail-firm { max-width: 150px; }
  .wsx .wsx-head h1 { font-size: 21px; }
}