/* ARA-HUNTER Dashboard V2 — shared component styles (V2 §17).
   Every class is prefixed by its component. No page-specific selectors
   here (V2 §24: do not recreate the 1642-line global-collision problem).
   Domain/page CSS, when justified, lives beside the page. */

/* ============ SectionBlock (card + D3 states) ============ */
.block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.block__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.block__title { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.block__action { margin-left: auto; font-size: var(--fs-12); color: var(--accent); font-weight: var(--fw-medium); }
.block__action:hover { color: var(--accent-hover); }
.block__body { padding: var(--sp-4); flex: 1; }
.block__body--flush { padding: 0; }
.block__body--state { display: grid; place-items: center; }

/* D3 state primitives */
.state { text-align: center; color: var(--text-muted); font-size: var(--fs-13); padding: var(--sp-5) var(--sp-4); }
.state--error { color: var(--crit); }
.state__msg { margin-bottom: var(--sp-2); }
.state__hint { font-size: var(--fs-12); color: var(--text-faint); }
.state__retry, .state__action {
  display: inline-block; margin-top: var(--sp-3);
  font-size: var(--fs-12); color: var(--accent); font-weight: var(--fw-medium);
}
.skeleton { width: 100%; padding: var(--sp-2) 0; }
.skel-line {
  height: 12px; margin: var(--sp-2) auto;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============ Pill ============ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11); font-weight: var(--fw-semibold);
  letter-spacing: .02em; white-space: nowrap;
  border: 1px solid var(--neutral-border);
  background: var(--neutral-bg); color: var(--neutral);
}
.pill--good    { background: var(--good-bg);    color: var(--good);    border-color: var(--good-border); }
.pill--warn    { background: var(--warn-bg);    color: var(--warn);    border-color: var(--warn-border); }
.pill--crit    { background: var(--crit-bg);    color: var(--crit);    border-color: var(--crit-border); }
.pill--info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.pill--neutral { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-border); }
.pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============ Button ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  background: var(--accent); color: var(--text-invert);
  transition: background var(--transition);
}
.btn:hover { background: var(--accent-hover); color: var(--text-invert); }
.btn--ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--icon { padding: 7px; background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-md); }
.btn--icon:hover { background: var(--surface-2); color: var(--text); }

/* ============ Search box ============ */
.searchbox { position: relative; width: 100%; }
.searchbox__input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-13);
}
.searchbox__input::placeholder { color: var(--text-faint); }
.searchbox__input:focus { border-color: var(--accent-border); outline: none; }
.searchbox__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }

/* ============ StatCard ============ */
.statcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
}
.statcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.statcard__label { font-size: var(--fs-12); color: var(--text-muted); font-weight: var(--fw-medium); }
.statcard__icon { color: var(--text-faint); }
.statcard__value { font-size: var(--fs-28); font-weight: var(--fw-bold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.statcard__value--md { font-size: var(--fs-22); }
.statcard__sub { font-size: var(--fs-12); color: var(--text-muted); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.statcard__delta { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.statcard__spark { margin-top: 2px; }
.statcard__rows { display: flex; flex-direction: column; gap: 3px; }
.statcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-12); }
.statcard__row .u-muted { color: var(--text-faint); }
.statcard__bar { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; max-width: 90px; }
.statcard__bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* ============ DataTable ============ */
.dtable-scroll { width: 100%; overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.dtable thead th {
  text-align: left;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-11); font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
.dtable tbody td { padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr.is-clickable { cursor: pointer; }
.dtable tbody tr.is-clickable:hover { background: var(--surface-2); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.dtable__sym { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.dtable__trend { width: 90px; }
.trendbar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.trendbar > i { display: block; height: 100%; border-radius: inherit; }
.trendbar > i.u-up   { background: var(--good); }
.trendbar > i.u-down { background: var(--crit); }
.trendbar > i.u-flat { background: var(--text-faint); }

/* time-dot for observation rows */
.tdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tdot--good { background: var(--good); }
.tdot--info { background: var(--info); }
.tdot--warn { background: var(--warn); }
.tdot--crit { background: var(--crit); }
.tdot--neutral { background: var(--text-faint); }

/* ============ Market Overview — Kondisi Pasar lead (A) ============ */
.mkt-lead { display: flex; flex-direction: column; gap: var(--sp-3); }
.mkt-lead__headline {
  font-size: var(--fs-18); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); color: var(--text);
}
.mkt-lead__idxline { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.mkt-lead__idxlabel { color: var(--text-faint); }
.mkt-lead__index { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mkt-lead__value { font-size: var(--fs-28); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.mkt-lead__delta { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.mkt-lead__tech { font-size: var(--fs-13); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mkt-lead__caption { font-size: var(--fs-11); color: var(--text-faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mkt-lead__spark { margin-top: 2px; }

/* ---- Pergerakan Saham (B) + Sektor ringkasan (C) ---- */
.mkt-fact { display: flex; flex-direction: column; gap: 4px; }
.mkt-fact__value { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.mkt-fact__dot { color: var(--text-faint); }
.mkt-fact__note { font-size: var(--fs-12); color: var(--text-muted); }

/* Row-1 side stack (Pergerakan Saham + Sektor): layout-only compaction so
   the two-card stack sits near the lead card's height instead of leaving
   ~90px of dead space beside it. Desktop 2-col grid only — mobile (single
   column) keeps the standard card rhythm untouched. Typography unchanged. */
@media (min-width: 1180px) {
  .mkt-row1-aside { gap: var(--sp-2); }
  .mkt-row1-aside .block__head { padding: var(--sp-2) var(--sp-4); }
  .mkt-row1-aside .block__body { padding: var(--sp-2) var(--sp-4); }
  .mkt-row1-aside .mkt-fact { gap: 2px; }
  .mkt-row1-aside .mkt-fact__value { line-height: var(--lh-tight); }
}

/* ---- Yang Diperhatikan (D) ---- */
.mkt-attn { display: flex; flex-direction: column; gap: var(--sp-2); }
.mkt-attn__stat { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.mkt-attn__num { font-size: var(--fs-28); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mkt-attn__label { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-muted); }
.mkt-attn__claim { font-size: var(--fs-11); color: var(--text-faint); line-height: var(--lh-normal); }
.mkt-attn__sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }
.mkt-attn__list { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-12); }
.mkt-attn__list li { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); }

/* ---- Status Sistem (demoted) ----
   Infrastructure status: compact, secondary, content-driven. On desktop
   it never becomes a giant empty full-width panel — width is capped and
   the rows flow in columns so the card stays ~two rows tall. */
.mkt-sys .block { background: var(--surface-2); }
.mkt-sys .block__body { padding: var(--sp-3) var(--sp-4); }
.mkt-sys__verdict { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); font-weight: var(--fw-medium); margin-bottom: var(--sp-3); }
@media (min-width: 901px) {
  .mkt-sys { max-width: 880px; }
  .mkt-sys .statuslist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-1) var(--sp-5);
  }
  .mkt-sys .statuslist__foot { grid-column: 1 / -1; margin-top: var(--sp-2); }
}

/* ============ status list (System Status card) ============ */
.statuslist { display: flex; flex-direction: column; gap: var(--sp-2); }
.statuslist__row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-13); }
.statuslist__row .pill { margin-left: auto; }
.statuslist__foot { margin-top: var(--sp-3); font-size: var(--fs-11); color: var(--text-faint); }

/* ============ chart frame ============ */
.chart-frame { width: 100%; }
.chart-frame svg { width: 100%; height: auto; display: block; }
.chart-frame__caption { font-size: var(--fs-11); color: var(--text-faint); margin-top: var(--sp-2); }
.rangetabs { display: inline-flex; gap: 2px; background: var(--surface-3); border-radius: var(--r-md); padding: 2px; }
.rangetabs button {
  padding: 3px 9px; border-radius: var(--r-sm);
  font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--text-faint);
}
.rangetabs button.is-active { background: var(--surface); color: var(--text); }

/* ============ toast ============ */
.toast-host { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 80; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px var(--sp-3);
  font-size: var(--fs-13); box-shadow: var(--shadow-2);
}
.toast__action { color: var(--accent); font-weight: var(--fw-semibold); font-size: var(--fs-12); }
.toast__close { color: var(--text-faint); font-size: var(--fs-16); line-height: 1; }

/* ============ "coming in Phase N" placeholder ============ */
.phase-stub {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.phase-stub__title { font-size: var(--fs-18); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.phase-stub__body { color: var(--text-muted); font-size: var(--fs-13); max-width: 46ch; margin: 0 auto var(--sp-3); }
.phase-stub__tag {
  display: inline-block; font-size: var(--fs-11); font-weight: var(--fw-semibold);
  color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border);
  padding: 3px 10px; border-radius: var(--r-pill);
}
.phase-stub__links { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.phase-stub__links a { font-size: var(--fs-12); color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 6px 12px; }
.phase-stub__links a:hover { color: var(--text); background: var(--surface-2); }

/* ============ footnote / disclaimer + small utilities ============ */
.disclaimer { font-size: var(--fs-11); color: var(--text-faint); margin-top: var(--sp-5); text-align: center; }
.note-inline { font-size: var(--fs-12); color: var(--text-muted); line-height: var(--lh-normal); margin-top: var(--sp-2); }
.u-faint { color: var(--text-faint); }


/* ================================================================
   STOCK DETAIL (Phase 2) — canonical per-symbol surface.
   ================================================================ */
.stock-page { display: flex; flex-direction: column; gap: var(--sp-4); }

/* identity + top price line */
.sd-head { display: flex; flex-direction: column; gap: 4px; }
.sd-head__idrow { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.sd-head__sym { font-size: var(--fs-28); font-weight: var(--fw-bold); letter-spacing: .01em; }
.sd-head__sector { font-size: var(--fs-13); color: var(--text-muted); }
.sd-head__price { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.sd-head__close { font-size: var(--fs-22); font-weight: var(--fw-semibold); }
.sd-head__chg { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.sd-head__asof { color: var(--text-faint); }

/* key-value rows (Kondisi Saat Ini) */
.sd-kv { display: flex; flex-direction: column; gap: var(--sp-3); }
.sd-kv__row { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-13); }
.sd-kv__rowtop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.sd-kv__k { color: var(--text-muted); }
.sd-kv__explain { font-size: var(--fs-12); line-height: var(--lh-normal); }
.sd-note { font-size: var(--fs-12); color: var(--text-faint); margin-top: var(--sp-3); line-height: var(--lh-normal); }

/* figure grid (Data Utama) */
.sd-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); }
.sd-fig { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sd-fig__k { font-size: var(--fs-11); }
.sd-fig__v { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.sd-flow {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}

/* returns row (Pergerakan Terbaru) */
.sd-returns { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4) 0; }
.sd-return {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 4px 9px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
}
.sd-return .eyebrow { font-size: 9px; }
.sd-return .mono { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.sd-returns__state { margin-right: var(--sp-1); }

/* ============ Price Chart (Chart V1 — EOD OHLC candlesticks) ============
   Restrained, matches the existing dark surface — not a TradingView UI
   clone. Colour carries meaning through --up/--down/--flat, the same
   tokens the rest of Stock Detail already uses for direction. */
.pc { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.pc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
/* Chart V1.2 — Range Waktu. Horizontal scroll is scoped to THIS row only
   (never the page) if five buttons don't fit a narrow screen (§17). */
.pc-range {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pc-range::-webkit-scrollbar { display: none; }
.pc-range__btn {
  flex: none; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 11px; cursor: pointer;
  font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-muted);
  white-space: nowrap;
}
.pc-range__btn:hover { color: var(--text); border-color: var(--border-strong); }
.pc-range__btn.is-active {
  background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent);
  font-weight: var(--fw-semibold);
}
.pc-reset {
  background: none; border: none; padding: 4px 0; cursor: pointer; flex: none;
  font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--accent);
}
.pc-reset:hover { color: var(--accent-hover); }
.pc-canvas { width: 100%; touch-action: pan-y; }
.pc-svg { width: 100%; height: auto; display: block; cursor: grab; }
.pc-svg:active { cursor: grabbing; }
.pc-candle__wick { stroke-width: 1; }
.pc-candle__body { stroke: none; }
.pc-candle--bullish .pc-candle__wick, .pc-candle--bullish .pc-candle__body { fill: var(--up); stroke: var(--up); }
.pc-candle--bearish .pc-candle__wick, .pc-candle--bearish .pc-candle__body { fill: var(--down); stroke: var(--down); }
.pc-candle--flat .pc-candle__wick, .pc-candle--flat .pc-candle__body { fill: var(--flat); stroke: var(--flat); }
.pc-axes__gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.pc-axes__ylabel { fill: var(--text-faint); font-size: 8px; font-family: var(--font-mono); }
.pc-axes__xlabel { fill: var(--text-faint); font-size: 8px; font-family: var(--font-mono); text-anchor: middle; }
.pc-tooltip { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); }
.pc-tooltip__date { font-size: var(--fs-12); font-weight: var(--fw-semibold); margin-bottom: 6px; }
.pc-tooltip__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-12); color: var(--text-muted); padding: 2px 0; }
.pc-tooltip__row span:last-child { color: var(--text); }

/* depth tabs */
.sd-tabs-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }
.sd-tabs-scroll { overflow-x: auto; border-bottom: 1px solid var(--border); }
.sd-tabs { display: inline-flex; gap: 2px; min-width: max-content; }
.sd-tab {
  padding: 10px var(--sp-4); font-size: var(--fs-13); font-weight: var(--fw-medium);
  color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.sd-tab:hover { color: var(--text); }
.sd-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.sd-tabpanel { display: flex; flex-direction: column; gap: var(--sp-4); }
.sd-ringkasan { display: flex; flex-direction: column; gap: var(--sp-4); }

/* evidence */
.sd-ev { display: flex; flex-direction: column; gap: var(--sp-4); }
.sd-ev__grouptitle { margin-bottom: var(--sp-2); }
.sd-ev__conclusion { padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
.sd-ev__conclusion-text { font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
.sd-ev__list { display: flex; flex-direction: column; gap: 4px; }
.sd-ev__item { font-size: var(--fs-13); padding-left: var(--sp-3); border-left: 2px solid var(--border-strong); }
.sd-ev__item--pos { border-left-color: var(--good); }
.sd-ev__item--neg { border-left-color: var(--crit); }
.sd-ev__reason { }
.sd-ev__authority { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.sd-ev__details { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.sd-ev__details-summary { cursor: pointer; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-muted); }
.sd-ev__details-summary:hover { color: var(--text); }
.sd-ev__details-body { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.sd-ev__rawlist { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; }
.sd-ev__rawlist li { font-size: var(--fs-11); color: var(--text-faint); word-break: break-word; }

/* journey — Strategic Journey V1 */
.sd-jn { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.sd-jn__card { padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 6px; }
.sd-jn__cardtitle { color: var(--text-muted); }
.sd-jn__headline { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.sd-jn__body { font-size: var(--fs-13); color: var(--text-muted); line-height: var(--lh-normal); }
.sd-jn__transition { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sd-jn__arrow { color: var(--text-faint); }
.sd-jn__ctxgroup { display: flex; flex-direction: column; gap: 4px; }
.sd-jn__ctxtitle { color: var(--text-muted); margin-top: 4px; }
.sd-jn__ctxitem { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-13); }
.sd-jn__ctxmark { font-weight: var(--fw-semibold); flex: none; }
.sd-jn__ctxitem--pos .sd-jn__ctxmark { color: var(--good); }
.sd-jn__ctxitem--warn .sd-jn__ctxmark { color: var(--warn); }
.sd-jn__details { border: 1px solid var(--border); border-radius: var(--r-md); }
.sd-jn__details-summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-muted); }
.sd-jn__details-summary:hover { color: var(--text); }
.sd-jn__details-body { border-top: 1px solid var(--border); }
.sd-jn__paramgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px var(--sp-3); margin-top: var(--sp-2); }
.sd-jn__param { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-11); }

/* journey — Detail Perjalanan raw segment rows (reused inside <details>) */
.sd-journey__seg { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.sd-journey__seg:last-child { border-bottom: 0; }
.sd-journey__seghead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sd-journey__range { color: var(--text-faint); }
.sd-journey__reason { margin-top: 4px; }

/* deep-research links */
.sd-deeplinks { display: flex; flex-direction: column; gap: var(--sp-2); }
.sd-deeplink {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-13); color: var(--text-muted);
}
.sd-deeplink:hover { color: var(--text); background: var(--surface-2); }
.sd-deeplink__ext { color: var(--text-faint); flex: none; }


/* ============ Market Domain page (Phase 3, #/market) ============
   Presentation only. Reuses .mkt-lead* (Overview), .statuslist, .dtable,
   .chart-frame, .pill, .sd-deeplink*. New: score decomposition + RRG. */

/* B — component health */
.mkt-basis { display: block; margin-bottom: var(--sp-3); color: var(--text-faint); }

/* C — composite score decomposition (value subordinate, no gauge) */
.mscore { display: flex; flex-direction: column; gap: var(--sp-3); }
.mscore__head { display: flex; align-items: baseline; gap: var(--sp-2); }
.mscore__value { font-size: var(--fs-22); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.mscore__unit { font-size: var(--fs-12); }
.mscore__bars { display: flex; flex-direction: column; gap: 6px; }
.mscore__row { display: grid; grid-template-columns: 116px 1fr 56px; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); }
.mscore__label { color: var(--text-muted); }
.mscore__track { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
.mscore__track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-strong); }
.mscore__fill { position: absolute; top: 0; height: 100%; border-radius: var(--r-pill); }
.mscore__fill--pos { background: var(--good); }
.mscore__fill--neg { background: var(--crit); }
.mscore__num { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mscore__caveat { color: var(--text-faint); }

/* F — sector & RRG */
.mkt-sector { display: flex; flex-direction: column; gap: var(--sp-3); }
.mkt-sector__breadth { font-size: var(--fs-14); font-weight: var(--fw-medium); }
.mkt-sector__lead { font-size: var(--fs-12); }
.mkt-sector__tally { display: flex; flex-wrap: wrap; gap: 6px; }

.rrg-scatter { margin: 0; }
.rrg-scatter__svg { width: 100%; height: auto; display: block; max-height: 320px; }
.rrg-scatter__quad { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.rrg-scatter__dot { font-size: 9px; }


/* ================================================================
   MOBILE (<=900px) — component-level presentation shifts.
   Tables STACK into readable cards; badges never clip; cards get a
   compact-but-breathable rhythm. "desktop but smaller" is not allowed.
   ================================================================ */
@media (max-width: 900px) {

  /* ---- KPI / stat cards: tighter, hierarchy preserved ---- */
  .statcard { padding: var(--sp-3); gap: 6px; }
  .statcard__value { font-size: var(--fs-22); }          /* secondary KPIs */
  .grid--stats > .statcard:first-child .statcard__value { font-size: var(--fs-28); }  /* IHSG stays dominant */
  .statcard__value--md { font-size: var(--fs-18); }
  .statcard__rows { gap: 4px; }
  .statcard__bar { max-width: 72px; }

  /* ---- section blocks: less inner padding, comfortable ---- */
  .block__body { padding: var(--sp-3); }
  .block__head { padding: var(--sp-3); }
  .block__title { font-size: var(--fs-13); }

  /* ---- Market Overview lead: headline readable, IHSG dominant ---- */
  .mkt-lead__headline { font-size: var(--fs-16); }
  .mkt-lead__value { font-size: var(--fs-28); }            /* stays dominant */
  .mkt-attn__num { font-size: var(--fs-22); }
  .mkt-fact__value { font-size: var(--fs-16); }

  /* ---- DataTable → stacked cards (no horizontal scroll) ---- */
  .dtable-scroll { overflow-x: visible; }
  .dtable { font-size: var(--fs-13); }
  /* stacked cards self-label via td::before — the header row is redundant
     and (kept in the flow) would report a phantom width; drop it. */
  .dtable thead { display: none; }
  .dtable tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .dtable tbody tr:last-child { margin-bottom: 0; }
  .dtable tbody tr.is-clickable:hover { background: var(--surface-3); }
  .dtable tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    padding: 4px 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .dtable tbody td > * { min-width: 0; text-align: right; }
  .dtable tbody td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--fs-11); font-weight: var(--fw-semibold);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-faint);
  }
  /* first cell = the card's title row (symbol / date / sector) */
  .dtable tbody td.dtable__lead {
    display: block;
    padding: 0 0 var(--sp-2) 0;
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-14); font-weight: var(--fw-semibold);
  }
  .dtable tbody td.dtable__lead::before { content: none; }
  .dtable .num { text-align: right; }
  .dtable__trend { width: auto; }
  .dtable__trend .trendbar { width: 96px; }

  /* ---- Status Sistem: badge never clips ---- */
  .statuslist__row { gap: var(--sp-2); }
  .statuslist__row > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
  .statuslist__row .pill { flex: none; white-space: nowrap; }
  .statuslist__foot { font-size: var(--fs-12); line-height: var(--lh-normal); }

  /* ---- chart captions / disclaimer: readable, natural wrap ---- */
  .chart-frame__caption { font-size: var(--fs-12); }
  .disclaimer { font-size: var(--fs-12); text-align: left; line-height: var(--lh-normal); }

  /* ---- page head ---- */
  .page-head__title { font-size: var(--fs-22); }
  .page-head__sub { font-size: var(--fs-13); }

  /* ---- Stock Detail on mobile ---- */
  .sd-head__sym { font-size: var(--fs-22); }
  .sd-head__close { font-size: var(--fs-18); }
  .sd-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .sd-fig__v { font-size: var(--fs-14); }
  .sd-returns { padding: var(--sp-3) var(--sp-3) 0; }
  .sd-tab { padding: 9px var(--sp-3); }
  .sd-journey__seg, .sd-deeplink { padding: var(--sp-3); }
  .sd-ev__item { font-size: var(--fs-13); }

  /* ---- Market page: score rows readable, RRG not clipped ---- */
  .mscore__row { grid-template-columns: 92px 1fr 48px; }
  .rrg-scatter__svg { max-height: 280px; }
}

/* ============ Watchlist page (Phase 2 IA, #/watchlist) ============
   Observation surface: primary ENTRY_READY table + a clearly separated
   Research Observations section (Candidate V1). No score/rank styling —
   deliberately reuses the same pill/table primitives as Overview/Market,
   never a "BUY"-style green highlight or podium treatment. */
.wl-section { margin-bottom: var(--sp-5); }
.wl-section--research .block { background: var(--surface-2); }
.wl-summary { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.wl-summary__stat { display: flex; flex-direction: column; gap: 2px; }
.wl-summary__num { font-size: var(--fs-22); font-weight: var(--fw-bold); }
.wl-summary__label { font-size: var(--fs-11); color: var(--text-muted); }
.wl-cv1__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.wl-cv1__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.wl-cv1 .dtable { margin-top: var(--sp-3); }

/* ============ Stock Detail Ringkasan V2 (Trading Approach / Historical
   Behavior implementation) ============
   Mengapa Diperhatikan / Karakter Pergerakan / Kebiasaan Historis — plain
   text blocks, no score styling, no BUY-style highlight. */
.sd-head__badge { margin-top: 2px; }
.sd-why { display: flex; flex-direction: column; gap: var(--sp-2); }
.sd-why__line { font-size: var(--fs-13); line-height: var(--lh-normal); }
/* Karakter Pergerakan / Kebiasaan Historis — UX refinement: one plain-
   language conclusion (dominant, larger) + one compact supporting fact
   (secondary), not a research-style horizon list. */
.sd-char { display: flex; flex-direction: column; gap: var(--sp-3); }
.sd-char__sub { color: var(--text-faint); }
.sd-char__headline, .sd-habit__headline {
  font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
}
.sd-char__body, .sd-habit__body {
  font-size: var(--fs-13); color: var(--text-muted); line-height: var(--lh-normal); max-width: 56ch;
}
.sd-char__fact {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3);
  background: var(--surface-2); border-radius: var(--r-md); align-self: flex-start; min-width: 200px;
}
.sd-char__factlabel { color: var(--text-muted); }
.sd-char__factvalue { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.sd-habit { display: flex; flex-direction: column; gap: var(--sp-3); }