/* Fortress Charts website: the chart app (/app) in the site's brand. Loaded after the shared charts.css, so it only
   re-colours: violet accents instead of gold, purple / green candles (set in chartcore), the three-band mark. */
:root {
  --bg: #07070B; --bg2: #0B0B10; --panel: #0A0A0F; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
  --text: #ECECF1; --dim: #9C9CA8; --faint: #64646F; --accent: #9B83FF; --accent-bg: rgba(122,92,255,.16);
  --up: #22D3A0; --down: #FF5A6A; --up-bg: rgba(34,211,160,.12); --down-bg: rgba(255,90,106,.12); --hover: rgba(255,255,255,.05);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accent: #6A4CF0; --accent-bg: rgba(106,76,240,.12); --up: #0FA37F; --down: #E5384A; } }
:root[data-theme="light"] { --bg: #FFFFFF; --bg2: #F6F6FA; --panel: #FBFBFE; --accent: #6A4CF0; --accent-bg: rgba(106,76,240,.12); --up: #0FA37F; --down: #E5384A; }

.brand.v2 { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand.v2 .glyph { display:inline-block;width:26px;height:15px;background:url(/assets/mark.svg) left center/contain no-repeat;transform:none; }
.brand.v2 .glyph b { display: none; }
.brand.v2 span { font: italic 800 14px "Outfit", "Geist", system-ui, sans-serif; letter-spacing: .08em; color: var(--text); }
.brand.v2 em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--dim); }

.fc-tzmenu button.on { color: #9B83FF !important; }
.fc-tzmenu[data-theme=light] button.on { color: #6A4CF0 !important; }
/* the wordmark stays on narrow screens (the shared CSS hides .brand span there); the "Charts" word goes instead */
@media (max-width: 1100px) { .brand.v2 span { display: inline !important; } .brand.v2 em { display: none; } }
/* account button (beta gate on) */
.acct { width: 30px; height: 30px; padding: 0 !important; justify-content: center; border-radius: 50% !important; background: rgba(122,92,255,.2) !important;
        color: #fff !important; font: 700 13px Outfit, sans-serif !important; }
.acctpop { width: 240px; padding: 10px; }
.acctpop .who { font: 500 12.5px Geist, sans-serif; color: var(--dim); padding: 4px 6px 10px; word-break: break-all; }
.acctpop .out { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: 600 13px Geist, sans-serif; color: var(--text); }
.acctpop .out:hover { background: var(--hover); }
@media (max-width: 860px) { .acctmenu { display: none !important; } }

/* laptop widths (Oct 31: at 1280px the top bar ran ~290px past the screen and settings / theme / panel were cut off):
   Map, Replay, Analysis and Reset show their icon only (the tooltip names them), "Charts" and part of the search go */
@media (min-width: 861px) and (max-width: 1600px) {
  #mapBtn span, #replayBtn span, #layersBtn span, #fitBtn span { display: none; }
  .brand.v2 em { display: none; }
  .top .search { width: 170px; }
  .top .sitelink { white-space: nowrap; }
}
@media (min-width: 861px) and (max-width: 1400px) { .top .live { display: none; } .top { gap: 4px; } .top .search { width: 150px; } }
@media (min-width: 1601px) { #fitBtn svg { display: none; } }
/* small laptops / tablets in landscape (861-1180px): the logo without the word, the search as its icon until used */
@media (min-width: 861px) and (max-width: 1180px) {
  .top .brand.v2 span { display: none !important; }
  .top .search { width: 36px; padding: 0 9px; transition: width .15s; }
  .top .search input::placeholder { color: transparent; }
  .top .search:focus-within { width: 200px; }
  .top { gap: 2px; padding: 0 8px; }
}