/* desk-monitors.css - the left column as two monitors on the desk (1.11.9.126).
   Picked from mockups: A, "twin monitors". The Companies list is the Market
   Directory, a green-phosphor monitor; the News feed is the Coalition News
   Network, an amber one. Both sit in the same moulded housing as the Nav
   Console (nav-console.css): screws in the corners, brass plate, keycaps,
   a CRT bezel. The centre panel gets the same housing.

   STRUCTURE. index.html wraps the Companies half and the News half of the left
   panel in a <section> each and puts #tickers and #news behind a .dkm-glass.
   The <hr> between the two halves stays a direct child of the panel: mobile.js
   tags the panel's children at the <hr> (companies before, news after), and
   with the wrappers that is still exactly one section on each side. Every id
   (#search, #tickers, #news, #news-header, #tkCount, #marketViewTabs, the
   .mv-tab and .mv-theme buttons) is unchanged.

   The buttons that market-tools.js, cycle-history.js and index-browser.js add
   to #watchlist-bar carry inline styles and hover handlers that write inline
   colours, so their keycap look is !important. The Watchlist key's latched
   state is the .on class market-tools.js now toggles beside its inline styles.

   DESKTOP ONLY. Phones keep the flat panels: every housing, key and glass rule
   is scoped off .fm-mobile. The CNN plate is the one piece phones get too,
   because it replaces the NEWS section header on both.

   Text inside the glass gets no glow: style.css sets text-shadow:none on
   #tickers and #news on purpose, for a hundred-row list, and that stays. */

:root{
  --dkm-shell:linear-gradient(180deg,#1b201b,#0a0c0a);--dkm-edge:#262c26;--dkm-ring:#121612;--dkm-ring2:#2c332c;
  --dkm-screws:radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) 6px 6px/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) calc(100% - 6px) 6px/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) 6px calc(100% - 6px)/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) calc(100% - 6px) calc(100% - 6px)/9px 9px no-repeat}
:root.red-theme{--dkm-shell:linear-gradient(180deg,#1f1515,#0b0606);--dkm-edge:#2c2222;--dkm-ring:#161111;--dkm-ring2:#332a2a}
:root.jade-theme{--dkm-shell:linear-gradient(180deg,#142019,#06100b);--dkm-edge:#22302a;--dkm-ring:#101a14;--dkm-ring2:#2a3a30}

/* ── The left column: two housings, no panel chrome of its own ─────────── */
body:not(.fm-mobile) .grid>.panel:first-child{display:flex;flex-direction:column;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow-x:hidden;overflow-y:auto}
body:not(.fm-mobile) .grid>.panel:first-child>hr{display:none}
body:not(.fm-mobile) .dkm{position:relative;display:flex;flex-direction:column;min-height:0;box-sizing:border-box;border-radius:9px;padding:8px 10px 12px;
  background:var(--dkm-screws),var(--dkm-shell);
  box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--dkm-edge),inset 0 -2px 0 rgba(0,0,0,.6)}
/* Flex basis 0 with weights, plus floors: on a short window or the stacked
   (under 900px) layout the column scrolls instead of crushing either screen. */
body:not(.fm-mobile) .dkm-dir{flex:64 1 0;min-height:320px}
body:not(.fm-mobile) .dkm-cnn{flex:36 1 0;min-height:220px}

/* ── Plate ─────────────────────────────────────────────────────────────── */
body:not(.fm-mobile) .dkm-dir>.fm-sec{margin:0 6px 8px;min-height:22px}
body:not(.fm-mobile) .dkm .fm-sec-t{color:#c99a4e;text-shadow:0 1px 0 #000;letter-spacing:.22em}
body:not(.fm-mobile) .dkm .fm-sec-rule{background:none}
body:not(.fm-mobile) .dkm .fm-sec-meta{opacity:.85}

/* ── Keys: Watchlist, History, Index Funds ─────────────────────────────── */
body:not(.fm-mobile) .dkm #watchlist-bar{gap:7px!important;margin:0 6px 9px!important}
body:not(.fm-mobile) .dkm #watchlist-bar>button{flex:1 1 0;min-width:0;height:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:0!important;border-radius:4px!important;padding:0 5px!important;font-family:'Share Tech Mono',ui-monospace,monospace!important;font-size:.66rem!important;
  letter-spacing:.06em;text-transform:uppercase;color:#f5c26a!important;background:linear-gradient(#262b26,#171a17)!important;transition:none!important;
  box-shadow:0 3px 0 #060706,0 4px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
body:not(.fm-mobile) .dkm #watchlist-bar>button:hover{color:#ffd88a!important}
body:not(.fm-mobile) .dkm #watchlist-bar>button:active,
body:not(.fm-mobile) .dkm #watchlist-bar>#wlToggle.on{transform:translateY(2px);box-shadow:0 1px 0 #060706,inset 0 1px 3px #000}
body:not(.fm-mobile) .dkm #watchlist-bar>#wlToggle.on{color:var(--gold,#ffce4d)!important;background:linear-gradient(#1d2a1f,#121a13)!important}
body:not(.fm-mobile) .dkm #wlCount{flex:0 0 auto;color:#8a6a34!important;font-size:.64rem!important}

/* ── Exchange selector: lit keys with a lens; the skin swatches are knobs ─
   The column is about 300px on a 1280 screen, too narrow for a key and a knob
   side by side in each slot. The slots dissolve (display:contents) into a
   three-column grid: keys on the first row, each knob centred under its key
   on the second. Markup and order are unchanged. */
body:not(.fm-mobile) .dkm #marketViewTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 6px;margin:0 6px 10px}
body:not(.fm-mobile) .dkm .mv-slot{display:contents}
body:not(.fm-mobile) .dkm .mv-tab{grid-row:1;display:block;min-width:0;height:28px;line-height:28px;padding:0 5px;border:0;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Share Tech Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.05em;color:#8a948b;background:linear-gradient(#1a1d1a,#101210);
  box-shadow:0 3px 0 #060706,inset 0 1px 0 rgba(255,255,255,.06);transition:none}
body:not(.fm-mobile) .dkm .mv-tab::before{content:'';display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:2px;vertical-align:0;background:#1f2a22;box-shadow:inset 0 1px 1px #000}
body:not(.fm-mobile) .dkm .mv-tab:hover{color:var(--pale);border:0}
body:not(.fm-mobile) .dkm .mv-tab.active{color:var(--green);transform:translateY(2px);background:linear-gradient(#141814,#0c0e0c);box-shadow:0 1px 0 #060706,inset 0 1px 3px #000}
body:not(.fm-mobile) .dkm .mv-tab.active::before{background:var(--green);box-shadow:0 0 6px var(--green)}
body:not(.fm-mobile) .dkm #mvJade.active::before{background:#3fd28a;box-shadow:0 0 6px #3fd28a}
body:not(.fm-mobile) .dkm #mvRed.active{color:#ff8a7a}
body:not(.fm-mobile) .dkm #mvRed.active::before{background:#ff4a3a;box-shadow:0 0 6px #ff4a3a}
body:not(.fm-mobile) .dkm .mv-theme{grid-row:2;justify-self:center;width:14px;height:14px;padding:0;border:0;border-radius:50%;font-size:0;cursor:pointer;
  background:radial-gradient(circle at 35% 35%,#4a524a 0,#1d211d 55%,#0a0c0a 100%);box-shadow:0 0 0 1px #000,0 2px 3px rgba(0,0,0,.6)}
body:not(.fm-mobile) .dkm .mv-theme:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #8a6a34}
body:not(.fm-mobile) .dkm .mv-theme.active{box-shadow:0 0 0 1px #000,0 0 0 2px var(--green),0 0 8px var(--green)}
body:not(.fm-mobile) .dkm #mvCoalition,body:not(.fm-mobile) .dkm #thCoalition{grid-column:1}
body:not(.fm-mobile) .dkm #mvJade,body:not(.fm-mobile) .dkm #thJade{grid-column:2}
body:not(.fm-mobile) .dkm #mvRed,body:not(.fm-mobile) .dkm #thRed{grid-column:3}

/* ── Search: a recessed readout ────────────────────────────────────────── */
body:not(.fm-mobile) .dkm #search{display:block;width:calc(100% - 12px);height:30px;margin:0 6px 10px;box-sizing:border-box;padding:0 10px;border:0;border-radius:4px;
  background:#030503;color:var(--green);font-family:'Share Tech Mono',ui-monospace,monospace;font-size:.8rem;letter-spacing:.06em;
  box-shadow:inset 0 1px 4px #000,0 0 0 1px #000,0 1px 0 rgba(255,255,255,.06)}
body:not(.fm-mobile) .dkm #search::placeholder{color:color-mix(in srgb,var(--green) 45%,transparent);text-transform:uppercase;letter-spacing:.14em}
body:not(.fm-mobile) .dkm #search:focus{outline:none;box-shadow:inset 0 1px 4px #000,0 0 0 1px color-mix(in srgb,var(--green) 55%,#000)}

/* ── Glass ─────────────────────────────────────────────────────────────── */
body:not(.fm-mobile) .dkm-glass{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:8px 6px 3px;border-radius:12px/15px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--green) 7%,#030604) 0%,#020402 70%,#010201 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.85),0 0 0 2px #000,0 0 0 7px var(--dkm-ring),0 0 0 8px var(--dkm-ring2)}
body:not(.fm-mobile) .dkm-glass.amb{background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--amber) 9%,#050302) 0%,#030201 70%,#010100 100%)}
body:not(.fm-mobile) .dkm-glass::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 26% 10%,rgba(220,255,220,.04),transparent 40%);
  box-shadow:inset 0 0 28px rgba(0,0,0,.7)}
body:not(.fm-mobile) .dkm-glass>#tickers,
body:not(.fm-mobile) .dkm-glass>#news{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding:8px 6px 8px 8px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--green) 28%,transparent) transparent}
body:not(.fm-mobile) .dkm-glass>#news{scrollbar-color:color-mix(in srgb,var(--amber) 30%,transparent) transparent}
body:not(.fm-mobile) .dkm-glass>#news-header{flex:0 0 auto;margin:8px 8px 0!important}

/* ── Coalition News Network plate (phones too) ─────────────────────────── */
.cnn-plate{display:flex;align-items:center;gap:10px;margin:.15rem 0 .55rem;min-width:0}
.cnn-mark{flex:0 0 auto;width:44px;height:38px;filter:drop-shadow(0 0 4px rgba(78,205,196,.4))}
.cnn-word{display:flex;flex-direction:column;gap:4px;min-width:0}
.cnn-letters{display:block;width:84px;height:20px;filter:drop-shadow(0 0 3px rgba(78,205,196,.45))}
.cnn-name{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.24em;color:#4ecdc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnn-air{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px;font-family:'Share Tech Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.2em;color:#ff8a7a;white-space:nowrap}
.cnn-air i{width:7px;height:7px;border-radius:50%;background:#ff4a3a;box-shadow:0 0 7px #ff4a3a;animation:eodBlink 2s ease-in-out infinite}
body:not(.fm-mobile) .dkm-cnn>.cnn-plate{margin:0 6px 4px}
@media (prefers-reduced-motion:reduce){.cnn-air i{animation:none}}

/* ── Centre panel: the same housing; the sector map behind a bezel ─────── */
body:not(.fm-mobile) .grid>.panel:nth-child(2){border:0;border-radius:10px;padding:10px 12px 12px;background:var(--dkm-screws),var(--dkm-shell);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--dkm-edge),inset 0 -2px 0 rgba(0,0,0,.6)}
body:not(.fm-mobile) #gMapPane>#gMapGlass{margin:9px;border-radius:10px/12px;
  box-shadow:inset 0 0 40px #000,0 0 0 2px #000,0 0 0 7px var(--dkm-ring),0 0 0 8px var(--dkm-ring2)}