/* ============================================================
   ProfitData — site palette

   One definition for every surface: the market pages, the platform,
   the chart and the journal. Keyed on the light theme, so the
   platform's black and dark themes stay exactly as they were and the
   theme toggle keeps working.

   Values come from the engine's news draft (market-events
   app/templates/news.html): indigo accent shading into cyan, white
   cards on a soft grey ground.
   ============================================================ */

/* The platform's own palette (common.css :root / [data-theme="black"]) is the
   canonical look — dev.profitdata.com/platform.html. The black block below only
   adds the tokens the market pages need on top of it; it does not restyle the
   workspace. The light block is the alternative, kept switchable. */
[data-theme="black"] {
  --border-hi: rgba(255,255,255,.16);
  --accent-2:  #22b8cf;
  --grad:      linear-gradient(120deg, #6d5efc, #22b8cf);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --hover:     #1a1a1a;      /* row hover, one step off --bg2 */
  --surface:   rgba(15,15,15,.86);   /* translucent header / footer */
}

[data-theme="light"] {
  --hover:     #fbfbfe;
  --surface:   rgba(255,255,255,.85);
  --bg:        #f6f7fa;
  --bg2:       #ffffff;
  --bg3:       #f1f2f7;
  --bg4:       #eceef5;
  --border:    #e7e9f0;
  --border-hi: #d6dae6;
  --text:      #111624;
  --text2:     #6b7280;
  --text3:     #98a0b0;

  --accent:       #6d5efc;
  --accent-hover: #5b4cf0;
  --accent-2:     #22b8cf;
  --grad:         linear-gradient(120deg, #6d5efc, #22b8cf);

  --green:  #16a34a;
  --red:    #e11d48;
  --yellow: #d4960a;

  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.09);
}

/* ── Shared chrome ── */
[data-theme="light"] .app-header {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

[data-theme="light"] .nav-link.active { color: var(--accent); font-weight: 600; }

[data-theme="light"] .badge-live {
  display: inline-flex; align-items: center; gap: 7px; animation: none;
  color: var(--text2); background: var(--bg2); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
}

[data-theme="light"] .ticker-bar { background: var(--bg2); }

[data-theme="light"] .btn-primary {
  background: var(--grad); color: #fff; border-color: transparent; font-weight: 600;
}
[data-theme="light"] .btn-primary:hover { filter: brightness(1.08); background: var(--grad); }

/* ── Platform workspace ──
   platform.css already draws everything from the tokens above, so the
   surfaces follow on their own. These are the few places where the
   workspace needs the extra lift that white-on-white otherwise loses. */
[data-theme="light"] #platformToolbar { background: var(--bg2); border-bottom: 1px solid var(--border); }
[data-theme="light"] .ws-panel { background: var(--bg2); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
[data-theme="light"] .panel-hd { background: var(--bg2); border-bottom: 1px solid var(--border); }
[data-theme="light"] .panel-body { background: var(--bg2); }

/* ── Wordmark ──
   Two artworks: dark-ink for light backgrounds, light-ink for dark ones.
   Driven by CSS background rather than two <img> tags so the browser fetches
   only the one in use and swaps instantly when the theme toggles. */
.logo-img {
  display: block;
  height: 24px;
  width: 164px;                       /* the artwork is ~6.8:1 */
  background: url("/logo-light.png") left center / contain no-repeat;
}
[data-theme="black"] .logo-img,
[data-theme="dark"] .logo-img { background-image: url("/logo-dark.png"); }
@media (max-width: 520px) { .logo-img { width: 124px; height: 18px; } }
/* the auth dialog shows it larger */
.auth-logo .logo-img { height: 32px; width: 220px; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════
   Navigation — grouped sections, search, mobile tab bar (js/nav.js)
   ══════════════════════════════════════════════════════════════ */
.pdnav-group { position: relative; }
.pdnav-trigger {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-family: var(--font);
}
.pdnav-caret { font-size: 9px; opacity: .55; transition: transform .16s; }
.pdnav-group.open .pdnav-caret { transform: rotate(180deg); }
.pdnav-group.open .pdnav-trigger { color: var(--text); }

.pdnav-menu {
  position: absolute; top: calc(100% + 7px); left: -6px; z-index: 300;
  min-width: 268px; padding: 6px; opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(16,24,40,.14);
}
.pdnav-group.open .pdnav-menu { opacity: 1; visibility: visible; transform: none; }
.pdnav-item { display: block; padding: 8px 10px; border-radius: 8px; }
.pdnav-item:hover { background: var(--bg3); }
.pdnav-item.active b { color: var(--accent); }
.pdnav-item b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.pdnav-item i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--text3);
  line-height: 1.45; margin-top: 1px;
}

/* Standing call into the product, as on the reference site */
.pdnav-launch {
  display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px;
  background: #fff; color: #000; font: 600 12px var(--font); white-space: nowrap;
}
.pdnav-launch:hover { background: #e6e6e6; }
[data-theme="light"] .pdnav-launch { background: var(--grad); color: #fff; }
@media (max-width: 620px) { .pdnav-launch { display: none; } }

/* ── Search trigger ── */
.pdnav-search-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 9px 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg2);
  font: 500 12px var(--font); color: var(--text3);
}
.pdnav-search-btn:hover { border-color: var(--border-hi); color: var(--text2); }
.pdnav-search-btn kbd {
  font: 600 10px var(--font); padding: 1px 5px; border-radius: 4px;
  background: var(--bg4); color: var(--text3);
}

/* ── Search overlay ── */
.pdnav-overlay {
  position: fixed; inset: 0; z-index: 500; padding: 12vh 16px 16px;
  background: rgba(17, 22, 36, .38); backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start;
}
.pdnav-overlay[hidden] { display: none; }
.pdnav-search {
  width: 100%; max-width: 620px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16,24,40,.28); overflow: hidden;
}
.pdnav-search-top {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--border);
}
.pdnav-search-icon { font-size: 17px; color: var(--text3); }
.pdnav-search-top input {
  flex: 1; border: none; outline: none; background: none;
  font: 400 15px var(--font); color: var(--text);
}
.pdnav-search-top kbd {
  font: 600 10px var(--font); padding: 2px 6px; border-radius: 4px;
  background: var(--bg4); color: var(--text3);
}
.pdnav-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.pdnav-sec {
  padding: 9px 10px 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text3);
}
.pdnav-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 11px; align-items: center; padding: 8px 10px; border-radius: 9px;
}
.pdnav-row.on { background: var(--bg3); }
.pdnav-row-icon {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--bg4);
  font-size: 9.5px; font-weight: 700; color: var(--text2);
}
.pdnav-row-icon img { width: 100%; height: 100%; display: block; }
.pdnav-row-icon.news { background: rgba(109,94,252,.12); color: var(--accent); font-size: 13px; }
.pdnav-row-main { min-width: 0; }
.pdnav-row-main b {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdnav-row-main i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdnav-row-tag {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text3); background: var(--bg3); padding: 2px 7px; border-radius: 5px;
}
.pdnav-empty { padding: 12px 10px 16px; font-size: 12.5px; color: var(--text3); }

/* Pages that host a single platform panel keep the workspace chrome out of the
   way. The `hidden` attribute is not enough: platform.css gives these elements an
   explicit display, which beats the UA stylesheet. */
.site-hidden { display: none !important; }

/* ── Burger menu (narrow screens) ── */
.pdnav-burger { display: none; }

@media (max-width: 1024px) {
  /* Below this the grouped nav collapses into the burger, as on the reference */
  .app-nav { display: none; }
  .pdnav-search-label, .pdnav-search-btn kbd { display: none; }

  .pdnav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 30px; padding: 0 6px; cursor: pointer;
    border: none; background: none; order: -1; margin-right: 2px;
  }
  .pdnav-burger span {
    display: block; height: 1.6px; border-radius: 2px; background: var(--text);
    transition: transform .18s, opacity .18s;
  }
  .pdnav-burger.on span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .pdnav-burger.on span:nth-child(2) { opacity: 0; }
  .pdnav-burger.on span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

  /* the workspace pages carry their own hamburger — ours replaces it */
  body.pdnav-has-burger .mob-burger { display: none !important; }
}

.pdnav-drawer { position: fixed; inset: 0; z-index: 450; background: var(--bg); }
.pdnav-drawer[hidden] { display: none; }
body.pdnav-drawer-open { overflow: hidden; }

.pdnav-drawer-panel {
  height: 100%; display: flex; flex-direction: column;
  animation: pdnav-fade .16s ease-out;
}
@keyframes pdnav-fade { from { opacity: .4 } to { opacity: 1 } }

.pdnav-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; height: 64px; flex-shrink: 0; border-bottom: 1px solid var(--border);
}
.pdnav-d-close {
  display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px;
  border: none; background: none; cursor: pointer; color: var(--text);
}

.pdnav-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 18px 20px; }

/* One tall row per section, separated by a hairline — the reference's rhythm */
.pdnav-d-row {
  display: flex; align-items: center; width: 100%;
  padding: 22px 2px; border-bottom: 1px solid var(--border);
  font: 400 19px/1.2 var(--font); color: var(--text2);
  cursor: pointer; list-style: none; text-align: left; background: none;
}
.pdnav-d-row.as-button { border: none; border-bottom: 1px solid var(--border); }
.pdnav-d-row::-webkit-details-marker { display: none; }
.pdnav-d-row:hover, .pdnav-d-row.active { color: var(--text); }
.pdnav-d-caret { margin-left: auto; color: var(--text3); transition: transform .18s; }
.pdnav-d-group[open] .pdnav-d-caret { transform: rotate(180deg); }
.pdnav-d-group[open] .pdnav-d-row { border-bottom-color: transparent; color: var(--text); }

.pdnav-d-sub { padding: 0 0 18px 2px; border-bottom: 1px solid var(--border); }
.pdnav-d-item {
  display: block; padding: 11px 0 11px 14px; font-size: 16px; color: var(--text3);
  border-left: 1px solid var(--border); margin-left: 2px;
}
.pdnav-d-item:hover { color: var(--text); }
.pdnav-d-item.active { color: var(--accent); }

.pdnav-drawer-foot { padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0)); flex-shrink: 0; }
.pdnav-d-cta {
  display: block; text-align: center; padding: 16px; border-radius: 12px;
  background: #fff; color: #000; font-size: 16px; font-weight: 600;
}
.pdnav-d-cta:hover { background: #e9e9e9; }
[data-theme="light"] .pdnav-d-cta { background: var(--grad); color: #fff; }