/*
 * Ninja Modes final geometry.
 * TOP = tab-like row inside the document/workspace.
 * RAILS = preserved original floating left/right navigation.
 */
@media (min-width: 1024px) {
  /* The legacy floating controller is not used visually anymore. MODE is a tile. */
  #ninja-mode-controller {
    display: none !important;
  }

  /* ==================================================================
   * TOP MODE
   * One centered, non-fixed row that scrolls naturally with the workspace.
   * Master · IE · TA · Scanner · Score · System · Trading · Mode
   * ================================================================== */
  body:not([data-ninja-mode]) aside[aria-label="Core workspace navigation"],
  body:not([data-ninja-mode]) aside[aria-label="Trading and research navigation"],
  body[data-ninja-mode="top"] aside[aria-label="Core workspace navigation"],
  body[data-ninja-mode="top"] aside[aria-label="Trading and research navigation"] {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    z-index: 40 !important;
  }

  body:not([data-ninja-mode]) aside[aria-label="Core workspace navigation"] > div,
  body:not([data-ninja-mode]) aside[aria-label="Trading and research navigation"] > div,
  body[data-ninja-mode="top"] aside[aria-label="Core workspace navigation"] > div,
  body[data-ninja-mode="top"] aside[aria-label="Trading and research navigation"] > div {
    display: contents !important;
  }

  /* 8 x 84px + 7 x 10px = 742px total. */
  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Master"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Master"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% - 371px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Intelligence"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Intelligence"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% - 277px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Trading Analytics"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Trading Analytics"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% - 183px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Scanner"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Scanner"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% - 89px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Score"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Score"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% + 5px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="System"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="System"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% + 99px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Trading Panel"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Trading Panel"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% + 193px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="App"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="App"]) {
    position: absolute !important;
    top: 82px !important;
    left: calc(50% + 287px) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  /* TOP uses one compact title only. Never duplicate the original sigla/label. */
  body:not([data-ninja-mode]) aside div.relative > div.flex.overflow-hidden > button:first-child > span,
  body[data-ninja-mode="top"] aside div.relative > div.flex.overflow-hidden > button:first-child > span {
    display: none !important;
  }

  body:not([data-ninja-mode]) aside div.relative > div.flex.overflow-hidden > button:first-child::after,
  body[data-ninja-mode="top"] aside div.relative > div.flex.overflow-hidden > button:first-child::after {
    display: block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    color: #8f959d !important;
    transition: color .16s ease !important;
  }

  body:not([data-ninja-mode]) button[title="Master"]::after,
  body[data-ninja-mode="top"] button[title="Master"]::after { content: "Master" !important; }
  body:not([data-ninja-mode]) button[title="Intelligence"]::after,
  body[data-ninja-mode="top"] button[title="Intelligence"]::after { content: "IE" !important; }
  body:not([data-ninja-mode]) button[title="Trading Analytics"]::after,
  body[data-ninja-mode="top"] button[title="Trading Analytics"]::after { content: "TA" !important; }
  body:not([data-ninja-mode]) button[title="Scanner"]::after,
  body[data-ninja-mode="top"] button[title="Scanner"]::after { content: "Scanner" !important; font-size: 9px !important; }
  body:not([data-ninja-mode]) button[title="Score"]::after,
  body[data-ninja-mode="top"] button[title="Score"]::after { content: "Score" !important; }
  body:not([data-ninja-mode]) button[title="System"]::after,
  body[data-ninja-mode="top"] button[title="System"]::after { content: "System" !important; }
  body:not([data-ninja-mode]) button[title="Trading Panel"]::after,
  body[data-ninja-mode="top"] button[title="Trading Panel"]::after { content: "Trading" !important; }
  body:not([data-ninja-mode]) button[title="App"]::after,
  body[data-ninja-mode="top"] button[title="App"]::after { content: "Mode" !important; }

  body:not([data-ninja-mode]) button[title="App"]::before,
  body[data-ninja-mode="top"] button[title="App"]::before {
    content: "↕" !important;
  }

  body:not([data-ninja-mode]) aside div.relative:hover > div.flex.overflow-hidden > button:first-child::after,
  body[data-ninja-mode="top"] aside div.relative:hover > div.flex.overflow-hidden > button:first-child::after,
  body:not([data-ninja-mode]) aside div.relative:focus-within > div.flex.overflow-hidden > button:first-child::after,
  body[data-ninja-mode="top"] aside div.relative:focus-within > div.flex.overflow-hidden > button:first-child::after {
    color: #d5d8dd !important;
  }

  /* Menu trigger is centered at the bottom and points down in TOP mode only. */
  body:not([data-ninja-mode]) aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child),
  body[data-ninja-mode="top"] aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child) {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 18px !important;
    height: 14px !important;
    min-width: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 14px !important;
    text-align: center !important;
    color: #777d85 !important;
    z-index: 3 !important;
  }

  body:not([data-ninja-mode]) aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child)::after,
  body[data-ninja-mode="top"] aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child)::after {
    content: "▾" !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  /* MODE has no dropdown; the whole tile only changes Ninja Mode. */
  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="App"]) > div.flex.overflow-hidden > button:last-child:not(:first-child),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="App"]) > div.flex.overflow-hidden > button:last-child:not(:first-child) {
    display: none !important;
  }

  /* TOP dropdowns: one vertical column, exactly one tile wide. */
  body:not([data-ninja-mode]) aside div.relative > div.absolute,
  body[data-ninja-mode="top"] aside div.relative > div.absolute {
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    padding: 4px !important;
    border-radius: 6px !important;
    z-index: 50 !important;
  }

  body:not([data-ninja-mode]) aside div.relative > div.absolute > button,
  body[data-ninja-mode="top"] aside div.relative > div.absolute > button {
    display: block !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 7px 4px !important;
    margin: 0 0 2px 0 !important;
    text-align: center !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
  }

  body:not([data-ninja-mode]) aside div.relative > div.absolute > button > span:last-child,
  body[data-ninja-mode="top"] aside div.relative > div.absolute > button > span:last-child {
    display: none !important;
  }

  body:not([data-ninja-mode]) aside div.relative > div.absolute > button:has(> span.text-emerald-300) > span:first-child,
  body[data-ninja-mode="top"] aside div.relative > div.absolute > button:has(> span.text-emerald-300) > span:first-child {
    color: #75d9bc !important;
  }

  /* The workspace starts comfortably below the top row/dropdown zone. */
  body:not([data-ninja-mode]) aside[aria-label="Trading and research navigation"] + div,
  body[data-ninja-mode="top"] aside[aria-label="Trading and research navigation"] + div {
    width: 100% !important;
    max-width: 64rem !important;
    padding: 19rem 1.5rem 3rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ==================================================================
   * RAILS MODE
   * Restore the crystallized floating two-column design. No TOP title,
   * arrow, menu-width or opacity rules are allowed to leak into this mode.
   * ================================================================== */
  body[data-ninja-mode="rails"] aside[aria-label="Core workspace navigation"],
  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] {
    position: fixed !important;
    top: 140px !important;
    bottom: auto !important;
    width: 84px !important;
    height: calc(100vh - 168px) !important;
    max-height: calc(100vh - 168px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    z-index: 30 !important;
    overflow: visible !important;
    isolation: isolate !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Core workspace navigation"] {
    left: 20px !important;
    right: auto !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] {
    right: 20px !important;
    left: auto !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Core workspace navigation"] > div.space-y-2,
  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] > div.space-y-2 {
    display: block !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Core workspace navigation"] > div.space-y-2 > * + *,
  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] > div.space-y-2 > * + * {
    margin-top: 10px !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Core workspace navigation"] > div.mt-auto,
  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] > div.mt-auto {
    margin-top: auto !important;
    margin-left: 0 !important;
  }

  /* Exact quiet original tile appearance. */
  body[data-ninja-mode="rails"] aside div.relative > div.flex.overflow-hidden {
    position: relative !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    border-radius: 6px !important;
    background: #0a0b0d !important;
    border-color: #24282d !important;
    box-shadow: none !important;
    isolation: isolate !important;
    opacity: .58 !important;
    filter: saturate(.08) brightness(.86) !important;
    transition: opacity .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:hover > div.flex.overflow-hidden,
  body[data-ninja-mode="rails"] aside div.relative:focus-within > div.flex.overflow-hidden {
    opacity: 1 !important;
    filter: none !important;
    background: #0d0f11 !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 14px hsl(var(--primary) / .16) !important;
  }

  body[data-ninja-mode="rails"] aside div.relative > div.flex.overflow-hidden > button:first-child {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    flex: 0 0 84px !important;
    padding: 6px 5px 5px !important;
    gap: 1px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Remove every generated TOP title in RAILS. Original spans are the labels. */
  body[data-ninja-mode="rails"] aside div.relative > div.flex.overflow-hidden > button:first-child::after {
    content: none !important;
    display: none !important;
  }

  body[data-ninja-mode="rails"] aside div.relative > div.flex.overflow-hidden > button:first-child > span:first-of-type {
    display: inline !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #7b8188 !important;
  }

  body[data-ninja-mode="rails"] aside div.relative > div.flex.overflow-hidden > button:first-child > span:last-of-type {
    display: inline !important;
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
    letter-spacing: .055em !important;
    font-weight: 500 !important;
    color: #666c73 !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:hover > div.flex.overflow-hidden > button:first-child::before,
  body[data-ninja-mode="rails"] aside div.relative:focus-within > div.flex.overflow-hidden > button:first-child::before {
    color: #c4c8cd !important;
    text-shadow: 0 0 8px #ffffff12 !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:hover > div.flex.overflow-hidden > button:first-child > span:first-of-type,
  body[data-ninja-mode="rails"] aside div.relative:focus-within > div.flex.overflow-hidden > button:first-child > span:first-of-type {
    color: #d0d3d7 !important;
    text-shadow: 0 0 8px #ffffff10 !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:hover > div.flex.overflow-hidden > button:first-child > span:last-of-type,
  body[data-ninja-mode="rails"] aside div.relative:focus-within > div.flex.overflow-hidden > button:first-child > span:last-of-type {
    color: #b1b6bc !important;
  }

  /* Original rail chevrons: top-right, no generated down-arrow. */
  body[data-ninja-mode="rails"] aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child) {
    position: absolute !important;
    top: 5px !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-align: center !important;
    color: #696f76 !important;
    z-index: 2 !important;
  }

  body[data-ninja-mode="rails"] aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child)::after {
    content: none !important;
    display: none !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Core workspace navigation"] div.relative > div.absolute {
    top: 0 !important;
    left: calc(100% + 8px) !important;
    right: auto !important;
    width: auto !important;
    min-width: 190px !important;
    max-width: none !important;
    padding: 8px !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] div.relative > div.absolute {
    top: 0 !important;
    right: calc(100% + 8px) !important;
    left: auto !important;
    width: auto !important;
    min-width: 190px !important;
    max-width: none !important;
    padding: 8px !important;
  }

  body[data-ninja-mode="rails"] aside div.relative > div.absolute > button {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
    font-size: 10px !important;
    line-height: normal !important;
    letter-spacing: .13em !important;
    white-space: normal !important;
  }

  body[data-ninja-mode="rails"] aside div.relative > div.absolute > button > span:last-child {
    display: inline !important;
  }

  /* MODE occupies the old APP tile in RAILS without changing tile styling. */
  body[data-ninja-mode="rails"] aside div.relative:has(> div > button[title="App"]) > div.flex.overflow-hidden > button:first-child > span {
    display: none !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:has(> div > button[title="App"]) > div.flex.overflow-hidden > button:first-child::after {
    content: "Mode" !important;
    display: block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    color: #7b8188 !important;
  }

  body[data-ninja-mode="rails"] button[title="App"]::before {
    content: "↔" !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:has(> div > button[title="App"]) > div.flex.overflow-hidden > button:last-child:not(:first-child) {
    display: none !important;
  }

  /* Original pre-navigation workspace geometry when floating rails are active. */
  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] + div {
    width: 100% !important;
    max-width: 64rem !important;
    padding: 3rem 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}