/* ── IDX Dashboard ────────────────────────────────────────────────────────
   Shared by the live site and the Artifact preview. Inherits the terminal
   design system's custom properties from style.css; the preview supplies the
   same variables so this file is identical in both.

   The heat ramp below is the validated ordinal scale (one hue, light→dark):
     dark  #FFCC80 → #FFA000 → #E65100
     light #F0A030 → #C86400 → #8A3200
   Both pass lightness-monotone, adjacent-ΔL, light-end contrast and single-hue.
   ────────────────────────────────────────────────────────────────────────── */

:root, [data-theme="dark"] {
  --d-heat1: #FFCC80;
  --d-heat2: #FFA000;
  --d-heat3: #E65100;
}
[data-theme="light"] {
  --d-heat1: #F0A030;
  --d-heat2: #C86400;
  --d-heat3: #8A3200;
}

/* The INDO STOCKS tab accent, applied by app.js on the live site via
   applyAccent('idx'). The preview must set it too or it renders in the site's
   default orange and misrepresents what the tab will look like. */
:root[data-palette="blue"], [data-theme="dark"][data-palette="blue"] {
  --accent: #448AFF;
  --accent2: #448AFF;
}
[data-theme="light"][data-palette="blue"] {
  --accent: #1A4FCC;
  --accent2: #1A4FCC;
}

/* Alternate BLUE ordinal ramp — same validation, stays in the tab's own hue.
   On dark ground the brightest step is the most prominent, so the ramp runs
   dim->bright with severity; on light ground it runs light->dark.
   Dark  #3D6FD9 -> #6EA0FF -> #A8CBFF   (validated)
   Light #7FA8E8 -> #2E6FD9 -> #123A8C   (validated)
   Selector carries both attributes so it outranks the theme blocks above. */
:root[data-palette="blue"], [data-theme="dark"][data-palette="blue"] {
  --d-heat1: #3D6FD9;
  --d-heat2: #6EA0FF;
  --d-heat3: #A8CBFF;
}
[data-theme="light"][data-palette="blue"] {
  --d-heat1: #7FA8E8;
  --d-heat2: #2E6FD9;
  --d-heat3: #123A8C;
}

.d-wrap { padding-bottom: 6px; }

/* period selector */
.d-periodbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 8px;
}
.d-periods { display: inline-flex; border: 1px solid var(--border2); overflow: hidden; }
.d-pbtn {
  font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  padding: 6px 12px; border: none; cursor: pointer;
  background: var(--bg2); color: var(--text2);
  border-right: 1px solid var(--border);
}
.d-pbtn:last-child { border-right: none; }
.d-pbtn:hover { color: var(--accent); }
.d-pbtn.active { background: var(--accent); color: var(--bg); }
.d-period-note { font-size: 9px; color: var(--dim); letter-spacing: 0.04em; }

/* stat tiles */
.d-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); margin-bottom: 12px;
}
.d-tile { background: var(--card-bg); padding: 8px 10px; }
.d-tile-l { font-size: 9px; color: var(--dim); letter-spacing: 0.1em; font-weight: 600; }
.d-tile-v { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 3px; }
.d-tile-s { font-size: 9px; color: var(--text2); margin-top: 2px; }

/* panels */
.d-grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.d-panel { min-width: 0; margin-bottom: 14px; }
.d-panel-wide { grid-column: 1 / -1; }
.d-hdr {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent);
  padding: 6px 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.d-sub { color: var(--dim); font-weight: 400; letter-spacing: 0.04em; }
.d-empty { font-size: 10px; color: var(--dim); padding: 10px 0; }
.d-foot, .d-foot-note, .d-detail-foot {
  font-size: 9px; color: var(--dim); line-height: 1.6; padding-top: 8px;
}
.d-foot { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }

/* charts */
.d-svg { display: block; overflow: visible; }
/* Wide charts scale uniformly: width fills, height follows the viewBox ratio.
   Never preserveAspectRatio="none" on an SVG containing text. */
.d-svg-wide { width: 100%; height: auto; }
.d-slice { stroke: var(--accent); transition: stroke-opacity .12s; }
.d-slice-other { stroke: var(--dim); }
.d-slice:hover { stroke-opacity: 1 !important; }
.d-donut-hero { fill: var(--text); font-size: 19px; font-weight: 600; }
.d-donut-sub { fill: var(--dim); font-size: 9px; letter-spacing: 0.1em; }
.d-donutwrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.d-legend { flex: 1; min-width: 150px; }
.d-leg {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 6px;
  align-items: center; font-size: 10px; padding: 1px 0; cursor: pointer;
}
.d-leg:hover .d-leg-t { color: var(--accent); }
.d-leg i { width: 8px; height: 8px; background: var(--accent); display: block; }
.d-leg-other { cursor: default; }
.d-leg-other i { background: var(--dim); }
.d-leg-t { color: var(--text2); }
.d-leg-v { color: var(--text); text-align: right; }

.d-bar { fill: var(--accent); }
.d-bar.d-heat1 { fill: var(--d-heat1); }
.d-bar.d-heat2 { fill: var(--d-heat2); }
.d-bar.d-heat3 { fill: var(--d-heat3); }
.d-bar:hover { fill-opacity: .8; }
.d-bar-lbl { fill: var(--text); font-size: 10px; font-weight: 600; }
.d-bar-val { fill: var(--text2); font-size: 9px; }
.d-col { fill: var(--accent); }
.d-col:hover { fill: var(--text); }
.d-line { stroke: var(--accent); stroke-width: 2; }
.d-dot { fill: transparent; }
.d-dot:hover { fill: var(--accent); }
.d-chart-lbl {
  font-size: 9px; color: var(--dim); letter-spacing: 0.1em;
  margin: 10px 0 4px; font-weight: 600;
}

/* tooltip */
.d-tip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--bg3); color: var(--text); border: 1px solid var(--border2);
  padding: 4px 8px; font-size: 10px; font-family: inherit; max-width: 230px;
  line-height: 1.4;
}

/* tables */
.d-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.d-row {
  display: grid;
  grid-template-columns: 28px 58px minmax(120px,1fr) 74px 68px 68px 62px 62px;
  gap: 4px; padding: 3px 4px; font-size: 10px; align-items: center;
  min-width: 620px;
}
.d-head {
  color: var(--dim); font-weight: 600; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}
.d-rows .d-row { cursor: pointer; }
.d-rows .d-row:nth-child(odd) { background: var(--bg2); }
.d-rows .d-row:hover { background: var(--card-hover); }
.d-rank { color: var(--dim); }
.d-t { font-weight: 600; color: var(--text); }
.d-n { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-v { text-align: right; color: var(--text); }

/* ordinal heat — always paired with its number, never colour alone */
.d-heat { font-weight: 600; }
.d-heat0 { color: var(--text2); }
.d-heat1 { color: var(--d-heat1); }
.d-heat2 { color: var(--d-heat2); }
.d-heat3 { color: var(--d-heat3); }
.d-pos { color: var(--green); }
.d-neg { color: var(--red); }
.d-zero { color: var(--dim); }

/* per-stock detail */
.d-detail {
  border: 1px solid var(--accent); padding: 10px 12px; margin: 4px 0 14px;
  background: var(--card-bg);
}
.d-detail-hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.d-detail-t { font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
.d-detail-n { font-size: 10px; color: var(--text2); margin-left: 8px; }
.d-close {
  font-family: inherit; font-size: 9px; letter-spacing: 0.08em; cursor: pointer;
  background: var(--bg2); color: var(--text2); border: 1px solid var(--border2);
  padding: 3px 8px;
}
.d-close:hover { border-color: var(--accent); color: var(--accent); }
.d-detail-foot { border-top: 1px solid var(--border); margin-top: 10px; }

@media (max-width: 900px) {
  .d-grid2 { grid-template-columns: 1fr; }
  .d-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .d-tile-v { font-size: 13px; }
  .d-period-note { display: none; }
  .d-pbtn { padding: 6px 9px; }
}

/* ── unified table (period + latest session) & reports ── */
.d-tableinner { min-width: 1180px; }
.d-row {
  grid-template-columns: 26px 56px minmax(110px,1fr) 54px 58px 60px 62px 68px 66px 56px 68px 56px 54px 58px 62px;
  min-width: 1180px;
}
.d-grouphead { padding-bottom: 0; border: none; }
.d-grp {
  font-size: 8px; letter-spacing: 0.14em; font-weight: 700;
  border-bottom: 1px solid var(--border2); padding-bottom: 2px; text-align: center;
}
.d-grp-l { color: var(--text2); }
.d-grp-p { color: var(--accent); }
.d-rpt { text-align: right; }
.d-rptbtn {
  font-family: inherit; font-size: 8px; letter-spacing: 0.08em; cursor: pointer;
  background: transparent; color: var(--accent); border: 1px solid var(--border2);
  padding: 2px 6px;
}
.d-rptbtn:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); }

.d-tabs { display: flex; gap: 4px; align-items: center; }
.d-tab {
  font-family: inherit; font-size: 9px; letter-spacing: 0.08em; cursor: pointer;
  background: var(--bg2); color: var(--text2); border: 1px solid var(--border2);
  padding: 3px 10px;
}
.d-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.d-report { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.d-rpt-sec:nth-child(4), .d-rpt-sec:nth-last-child(-n+3) { grid-column: 1 / -1; }
.d-rpt-h {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent);
  border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 5px;
}
.d-kv-r {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  font-size: 10px; padding: 2px 0;
}
.d-kv-k { color: var(--text2); }
.d-kv-v { color: var(--text); text-align: right; }
.d-prow {
  display: grid; grid-template-columns: 52px 76px 62px 62px 58px 66px 76px 58px;
  gap: 4px; padding: 2px 4px; font-size: 10px; text-align: right; min-width: 520px;
}
.d-prow span:first-child { text-align: left; }
.d-prow.d-head { text-align: right; }
.d-prow:not(.d-head):nth-child(odd) { background: var(--bg2); }
.d-pending {
  font-size: 10px; color: var(--text2); line-height: 1.6;
  border-left: 2px solid var(--d-heat2); padding-left: 8px;
}
.d-note {
  font-family: inherit; font-size: 10px; color: var(--text2);
  white-space: pre-wrap; line-height: 1.6;
}
.d-rpt-src { font-size: 9px; color: var(--dim); padding-top: 4px; }
@media (max-width: 700px) { .d-report { grid-template-columns: 1fr; } }

/* three charts, equal width, one row */
.d-grid3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.d-grid3 .d-panel { min-width: 0; }
.d-grid3 .d-donutwrap { gap: 10px; }
.d-grid3 .d-legend { min-width: 110px; }
@media (max-width: 1200px) { .d-grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .d-grid3 { grid-template-columns: 1fr; } }

/* search */
.d-toprow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.d-searchwrap { position: relative; flex: 1; min-width: 220px; max-width: 420px; margin-left: auto; }
.d-search {
  width: 100%; font-family: inherit; font-size: 11px; padding: 6px 10px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border2); outline: none;
}
.d-search:focus { border-color: var(--accent); }
.d-search::placeholder { color: var(--dim); }
.d-sugg {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--bg3); border: 1px solid var(--accent); border-top: none;
  max-height: 300px; overflow-y: auto;
}
.d-sugg-i {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 8px;
  padding: 5px 9px; font-size: 10px; cursor: pointer; align-items: center;
}
.d-sugg-i:hover { background: var(--accent); }
.d-sugg-i:hover .d-sugg-t, .d-sugg-i:hover .d-sugg-n, .d-sugg-i:hover .d-sugg-s { color: var(--bg); }
.d-sugg-t { font-weight: 700; color: var(--text); }
.d-sugg-n { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-sugg-s { color: var(--dim); font-size: 9px; }
.d-sugg-none { padding: 8px 9px; font-size: 10px; color: var(--dim); }
@media (max-width: 760px) { .d-searchwrap { max-width: none; margin-left: 0; } }

/* sortable headers */
.d-sortable { cursor: pointer; user-select: none; }
.d-sortable:hover { color: var(--accent); }
.d-sort-desc::after { content: ' ▼'; font-size: 7px; color: var(--accent); }
.d-sort-asc::after  { content: ' ▲'; font-size: 7px; color: var(--accent); }
.d-vintage {
  font-size: 8px; letter-spacing: 0.08em; color: var(--d-heat2);
  font-weight: 600; margin-left: 8px;
}

/* peer comparables */
.d-rpt-full { grid-column: 1 / -1; }
.d-peerinner { min-width: 620px; }
.d-peerrow {
  display: grid; grid-template-columns: 58px minmax(120px,1fr) 76px 60px 58px 62px 74px;
  gap: 6px; padding: 3px 4px; font-size: 10px; align-items: center; text-align: right;
}
.d-peerrow span:nth-child(1), .d-peerrow span:nth-child(2) { text-align: left; }
.d-peerrow:not(.d-head) { cursor: pointer; }
.d-peerrow:not(.d-head):nth-child(odd) { background: var(--bg2); }
.d-peerrow:not(.d-head):hover { background: var(--card-hover); }
.d-dim { color: var(--dim); }
.d-vintage-stale { color: var(--red); }

/* analyst notes — rendered markdown, readable measure */
/* Full width by owner preference. A ~78ch measure reads more comfortably for
   long prose, but the terminal layout wins here — tables and charts inside the
   note keep their own widths. */
.d-note-doc { max-width: none; font-size: 11px; line-height: 1.7; color: var(--text2); }
.d-note-doc .md-p, .d-note-doc .md-list, .d-note-doc .md-quote { max-width: none; }
.d-note-doc .md-table { width: auto; min-width: 420px; }
.md-h { font-weight: 700; letter-spacing: 0.04em; color: var(--text); margin: 14px 0 6px; }
.md-h1 { font-size: 15px; color: var(--accent); letter-spacing: 0.08em; }
.md-h2 { font-size: 12px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.md-h3 { font-size: 11px; color: var(--text2); }
.md-p { margin: 6px 0; }
.md-p strong, .md-table strong { color: var(--text); }
.md-list { margin: 6px 0 6px 18px; }
.md-list li { margin: 3px 0; }
.md-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.md-quote {
  border-left: 2px solid var(--accent); padding-left: 10px; margin: 8px 0;
  color: var(--text2); font-style: normal;
}
.md-tablewrap { overflow-x: auto; margin: 8px 0; }
.md-table { border-collapse: collapse; font-size: 10px; width: 100%; }
.md-table th {
  text-align: left; color: var(--dim); font-weight: 600; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border2); padding: 4px 8px 4px 0; white-space: nowrap;
}
.md-table td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--border); color: var(--text2); }
.md-table tr:last-child td { border-bottom: none; }
.d-note-doc code {
  font-family: inherit; background: var(--bg3); padding: 1px 4px;
  color: var(--text); font-size: 10px;
}
.d-note-doc a { color: var(--accent); }

/* chart framing — axes recessive, endpoint and peak emphasised */
.d-chart-hd { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; }
.d-chart-t { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--text); }
.d-chart-sub { font-size: 9px; color: var(--dim); letter-spacing: 0.04em; }
.d-chart-cap { font-size: 10px; color: var(--text2); line-height: 1.55; margin-bottom: 6px; }
.d-chart-cap b { color: var(--text); }
.d-ref { stroke: var(--border2); stroke-width: 1; stroke-dasharray: 3 3; }
.d-ref-lbl { fill: var(--dim); font-size: 15px; letter-spacing: 0.06em; }
.d-axis { fill: var(--dim); font-size: 15px; letter-spacing: 0.04em; }
.d-peak-lbl { fill: var(--text2); font-size: 16px; font-weight: 600; }
.d-low-lbl { fill: var(--dim); font-size: 16px; }
.d-col { fill: var(--accent); fill-opacity: .55; }
.d-col-peak { fill-opacity: 1; }
.d-col-last { fill: var(--text); fill-opacity: 1; }
.d-col:hover { fill-opacity: 1; }
.d-area { fill: var(--accent); fill-opacity: .10; }
.d-last { fill: var(--text); }

/* Search and the stock it opens read as one unit — the detail panel docks
   directly beneath the search row rather than sitting below the charts. */
.d-lookup { padding: 10px 0 8px; }
.d-lookup .d-searchwrap { max-width: none; margin-left: 0; }
.d-lookup-open { padding-bottom: 0; }
.d-lookup-open + .d-detail {
  margin-top: 0; border-top-width: 2px;
  animation: d-dock .16s ease-out;
}
@keyframes d-dock { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .d-toprow-open + .d-detail { animation: none; } }
.d-conv { font-size: 8px; letter-spacing: 0.1em; color: var(--dim); font-weight: 600; }

/* The period selector heads everything it governs; the rule and inset make the
   scope visible instead of leaving the control floating above loose panels. */
.d-scope {
  border-top: 1px solid var(--border2);
  margin-top: 16px;
}
.d-scope .d-periodbar {
  padding: 10px 0 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.d-scope-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--dim);
}

/* date range controls — shared shape for the dashboard scope and the charts */
.d-daterange { display: inline-flex; align-items: center; gap: 4px; }
.d-date {
  font-family: inherit; font-size: 10px; padding: 4px 6px;
  background: var(--bg2); color: var(--text); border: 1px solid var(--border2);
  color-scheme: dark;
}
[data-theme="light"] .d-date { color-scheme: light; }
.d-date:focus { outline: none; border-color: var(--accent); }
.d-arrow { color: var(--dim); font-size: 10px; }
.d-crange {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 10px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.d-cbtn {
  font-family: inherit; font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  padding: 4px 9px; cursor: pointer;
  background: var(--bg2); color: var(--text2); border: 1px solid var(--border2);
}
.d-cbtn:hover { border-color: var(--accent); color: var(--accent); }
.d-cbtn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* one global window control, governing the whole page */
.d-globalbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0 10px; border-bottom: 1px solid var(--border2);
}
.d-globalbar .d-periodbar { padding: 0; border: none; margin: 0; flex: 1 1 auto; }
.d-globalbar .d-searchwrap { max-width: 340px; margin-left: auto; }
.d-scope { border-top: none; margin-top: 12px; }
.d-scope-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.d-scope-val { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
.d-scope-sub { font-size: 9px; color: var(--dim); }
.d-chart-scope {
  font-size: 9px; color: var(--dim); padding: 6px 0 2px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.d-chart-scope b { color: var(--text2); }

/* market/board selector — hidden state was the cause of two devices showing
   different numbers for the same window, so it is always on screen now */
.d-boardbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.d-boards { display: inline-flex; border: 1px solid var(--border2); overflow: hidden; }
.d-bbtn {
  font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  padding: 5px 14px; border: none; cursor: pointer;
  background: var(--bg2); color: var(--text2); border-right: 1px solid var(--border);
}
.d-bbtn:last-child { border-right: none; }
.d-bbtn:hover { color: var(--accent); }
.d-bbtn.active { background: var(--accent); color: var(--bg); }
.d-board-note { font-size: 9px; color: var(--dim); letter-spacing: 0.04em; }