/* Your menu → Layout (workbench 12/22; mock 15 navB). The shell names the layout
   (data-menu-layout, from UserSettings menu.layout) and this file lays the same rail
   out for it, so the jobs, More, Spaces, Search, Alerts, Settings and You stay one
   partial. Rails is kk_rail.css as it is. Born tokens-only (shell_css_literal_ratchet).

   B · Two tiers, desktop: the rail becomes the top tier (your pinned jobs as tabs,
   More, the utilities as icons) and each page's own bar is the second tier (its
   sections and action). Phones keep the bottom tab bar (founder default, 12/22 Q2). */

@media (min-width: 900px) {
  .kk-shell[data-menu-layout="two_tiers"] { --kk-tier-h: var(--kk-topbar-h); }

  /* Tier one: the rail, laid across the top. */
  .kk-shell[data-menu-layout="two_tiers"] .kk-rail {
    inset: 0 0 auto 0; width: auto; height: var(--kk-tier-h);
    flex-direction: row; align-items: center; gap: var(--kk-s-1); padding: 0 var(--kk-s-4);
    border-right: 0; border-bottom: 1px solid var(--kk-line);
    overflow-x: auto; overflow-y: hidden;
  }
  .kk-shell[data-menu-layout="two_tiers"] .kk-rail-logo { margin: 0 var(--kk-s-2) 0 0; }
  .kk-shell[data-menu-layout="two_tiers"] .kk-rsep { width: 1px; height: var(--kk-s-5); margin: 0 var(--kk-s-1); }
  .kk-shell[data-menu-layout="two_tiers"] .kk-ri {
    width: auto; min-height: var(--kk-s-6); display: inline-flex; align-items: center; gap: var(--kk-s-2);
    padding: 0 var(--kk-s-3); font-size: var(--kk-fs-meta);
  }
  .kk-shell[data-menu-layout="two_tiers"] .kk-rail.is-icons .kk-ri { min-height: var(--kk-s-6); padding: 0 var(--kk-s-2); }
  /* The utilities on the right are icons; their words stay as titles. */
  .kk-shell[data-menu-layout="two_tiers"] .kk-ri-foot { padding: 0 var(--kk-s-2); }
  .kk-shell[data-menu-layout="two_tiers"] .kk-ri-foot .kk-ri-l { display: none; }
  .kk-shell[data-menu-layout="two_tiers"] .kk-ri-dot { top: var(--kk-s-1); right: var(--kk-s-1); }
  .kk-shell[data-menu-layout="two_tiers"] .kk-ri-count { top: 0; right: 0; }

  /* The page starts under tier one; nothing sits on the left any more. */
  .kk-shell.is-rail[data-menu-layout="two_tiers"] .kk-main,
  .kk-shell.is-rail[data-menu-layout="two_tiers"] > .kk-lite { margin-left: 0; padding-top: var(--kk-tier-h); }

  /* Tier two: each page's bar, and everything that sticks under it, clears tier one. */
  .kk-shell[data-menu-layout="two_tiers"] .kk-workspace-topbar { top: var(--kk-tier-h); }
  .kk-shell[data-menu-layout="two_tiers"] .kk-sv-folder-disclosure { top: calc(var(--kk-tier-h) + var(--kk-wtopbar-h) + var(--kk-s-2)); }
  .kk-shell[data-menu-layout="two_tiers"] .kk-context-layout > .kk-context-panel,
  .kk-shell[data-menu-layout="two_tiers"] .kk-ibx-rail > p,
  .kk-shell[data-menu-layout="two_tiers"] .kk-ibx-sel-in { top: calc(var(--kk-tier-h) + var(--kk-topbar-h) + var(--kk-s-4)); }
  .kk-shell[data-menu-layout="two_tiers"] .kk-settings-tabs { top: calc(var(--kk-tier-h) + var(--kk-s-8)); }

  /* More, Alerts, You and Your menu hang under tier one on the right, not beside a rail. */
  .kk-shell[data-menu-layout="two_tiers"] .kk-rail-fly,
  .kk-shell[data-menu-layout="two_tiers"] .kk-rail-fly.is-alerts,
  .kk-shell[data-menu-layout="two_tiers"] .kk-rail-menu {
    inset: calc(var(--kk-tier-h) + var(--kk-s-1)) var(--kk-s-3) auto auto;
    max-height: calc(100dvh - var(--kk-tier-h) - var(--kk-s-4));
  }
  /* More hangs under its own tab where the browser can anchor it; else top right. */
  @supports (anchor-name: --kk-more) {
    .kk-shell[data-menu-layout="two_tiers"] .kk-rail [popovertarget="kk-rail-more"] { anchor-name: --kk-more; }
    .kk-shell[data-menu-layout="two_tiers"] #kk-rail-more { position-anchor: --kk-more; inset: auto; top: calc(anchor(bottom) + var(--kk-s-1)); left: anchor(left); }
  }
  /* The Spaces sheet slides in from the left, under tier one. */
  .kk-shell.is-rail[data-menu-layout="two_tiers"] .kk-side { left: 0; top: var(--kk-tier-h); height: auto; bottom: 0; transform: translateX(-100%); }
  .kk-shell.is-rail.is-open[data-menu-layout="two_tiers"] .kk-side { transform: translateX(0); }
}