/**
 * css/nd-daily.css — NEPSE Daily Summary page (Concept 03 editorial).
 * Sortable full-market table, 50 rows/page pagination, symbol search.
 * Uses --nd-* theme variables so light/dark both work.
 */

.ds-wrap { max-width: var(--nd-page-max, 1360px); margin: 0 auto; padding: 0 var(--nd-gutter, 24px); }

/* ---------- Masthead ---------- */
.ds-masthead { margin: 8px 0 20px; }
.ds-kicker {
  font: 600 0.72rem var(--nd-font-mono, "IBM Plex Mono", monospace);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nd-lime); margin: 0 0 8px;
}
.ds-masthead h1 {
  font-family: var(--nd-font-display, "Spectral", serif);
  font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.015em; color: var(--nd-text); margin: 0;
}
.ds-lede { margin: 10px 0 0; max-width: 76ch; color: var(--nd-muted); line-height: 1.65; font-size: 0.95rem; }
.ds-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.ds-badge {
  font: 600 0.7rem var(--nd-font-mono, "IBM Plex Mono", monospace);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--nd-border); color: var(--nd-muted);
  background: var(--nd-panel);
}
.ds-badge.lime { color: var(--nd-lime); border-color: var(--nd-lime); }
.ds-badge .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--nd-up); margin-right: 6px; }

/* ---------- Controls ---------- */
.ds-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 18px 0 6px;
}
.ds-search {
  flex: 1 1 220px; max-width: 340px;
  background: var(--nd-panel); border: 1px solid var(--nd-border);
  color: var(--nd-text); border-radius: 8px; padding: 10px 14px;
  font: 500 0.9rem var(--nd-font-sans, Inter, system-ui, sans-serif);
}
.ds-search::placeholder { color: var(--nd-dim); }
.ds-search:focus { outline: none; border-color: var(--nd-lime); }
.ds-select {
  background: var(--nd-panel); border: 1px solid var(--nd-border);
  color: var(--nd-text); border-radius: 8px; padding: 10px 12px;
  font: 500 0.85rem var(--nd-font-sans, Inter, system-ui, sans-serif);
}
.ds-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ds-pill {
  background: var(--nd-panel); border: 1px solid var(--nd-border);
  color: var(--nd-muted); border-radius: 999px; padding: 8px 16px;
  font: 600 0.8rem var(--nd-font-sans, Inter, system-ui, sans-serif);
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
  text-decoration: none; display: inline-block;
}
.ds-pill:hover { border-color: var(--nd-lime); color: var(--nd-text); }
.ds-pill.active { background: var(--nd-lime); border-color: var(--nd-lime); color: var(--nd-on-lime); }
.ds-count { margin-left: auto; font: 500 0.85rem var(--nd-font-sans, Inter, system-ui, sans-serif); color: var(--nd-dim); }

/* ---------- Table ---------- */
.ds-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--nd-border); border-radius: 12px; background: var(--nd-panel); }
/* Top scrollbar for the main table: mirrors its horizontal scroll so the
   Turnover column is reachable from the top of the table, not only from
   the scrollbar buried below 50 rows. Hidden by JS when the table fits. */
.ds-table-card { min-width: 0; }
.ds-table-topscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--nd-border); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--nd-panel); }
.ds-table-topscroll-inner { height: 1px; }
.ds-table-card .ds-table-scroll { border-radius: 0 0 12px 12px; }
.ds-table { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 0.9rem; }
.ds-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--nd-panel-2); color: var(--nd-muted);
  font: 600 0.68rem var(--nd-font-mono, "IBM Plex Mono", monospace);
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; padding: 12px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--nd-border-strong);
  cursor: pointer; user-select: none;
}
.ds-table thead th.num { text-align: right; }
.ds-table thead th:hover { color: var(--nd-text); }
.ds-table thead th.sorted { color: var(--nd-lime); }
.ds-table thead th .arr { color: var(--nd-lime); margin-left: 4px; }
.ds-table thead th.no-sort { cursor: default; }
.ds-table thead th.no-sort:hover { color: var(--nd-muted); }
.ds-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--nd-border);
  color: var(--nd-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ds-table tbody td.num { text-align: right; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover { background: var(--nd-lime-faint); }
.ds-table .sym { font-weight: 700; }
.ds-table .sym a { color: var(--nd-text); text-decoration: none; }
.ds-table .sym a:hover { color: var(--nd-lime); }
.ds-table .cname { display: block; font-weight: 400; font-size: 0.75rem; color: var(--nd-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ds-table .up { color: var(--nd-up); font-weight: 600; }
.ds-table .dn { color: var(--nd-down); font-weight: 600; }
.ds-table .flat { color: var(--nd-flat); }
.ds-table .unavail { color: var(--nd-dim); font-style: italic; font-size: 0.8rem; }
.ds-empty { text-align: center; padding: 40px 20px !important; color: var(--nd-dim); }

/* ---------- Pagination ---------- */
.ds-below { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.ds-range { font: 500 0.85rem var(--nd-font-sans, Inter, system-ui, sans-serif); color: var(--nd-dim); }
.ds-pager { display: flex; gap: 8px; align-items: center; }
.ds-page-btn {
  background: var(--nd-panel); border: 1px solid var(--nd-border);
  color: var(--nd-text); border-radius: 8px; padding: 9px 18px;
  font: 600 0.85rem var(--nd-font-sans, Inter, system-ui, sans-serif);
  cursor: pointer; transition: border-color 0.15s;
}
.ds-page-btn:hover:not(:disabled) { border-color: var(--nd-lime); }
.ds-page-btn:disabled { opacity: 0.4; cursor: default; }
.ds-page-num { font: 600 0.85rem var(--nd-font-mono, "IBM Plex Mono", monospace); color: var(--nd-muted); }

/* ---------- Notes ---------- */
.ds-note {
  margin: 26px 0 8px; padding: 16px 18px;
  border: 1px solid var(--nd-border); border-radius: 10px;
  background: var(--nd-panel); color: var(--nd-muted);
  font-size: 0.85rem; line-height: 1.7;
}
.ds-note strong { color: var(--nd-text); }
.ds-credit { font-size: 0.8rem; color: var(--nd-dim); margin: 1.25rem 0 0; }
.ds-credit a { color: var(--nd-lime); }

@media (max-width: 640px) {
  .ds-count { margin-left: 0; width: 100%; }
  .ds-search { max-width: none; }
}

/* ---------- Section titles ---------- */
.ds-sec-title {
  font-family: var(--nd-font-serif, "Spectral", serif);
  font-size: 1.5rem; font-weight: 600;
  margin: 2.5rem 0 1.25rem; color: var(--nd-text);
}
.ds-sec-title:first-child { margin-top: 0; }

/* ---------- Market overview cards ---------- */
.ds-overview { margin: 0 0 0.5rem; }
.ds-ov-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 18px;
}
.ds-ov-card {
  background: var(--nd-panel); border: 1px solid var(--nd-border);
  border-radius: 12px; padding: 18px 20px;
}
.ds-ov-card .k {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--nd-muted); margin-bottom: 8px;
}
.ds-ov-card .v {
  font-size: 1.35rem; font-weight: 700; color: var(--nd-text);
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.ds-ov-card .v.up { color: var(--nd-up); }
.ds-ov-card .v.dn { color: var(--nd-down); }
[data-theme="light"] .ds-ov-card .v.up { color: var(--nd-up); }
[data-theme="light"] .ds-ov-card .v.dn { color: var(--nd-down); }
.ds-ov-card .unavail { color: var(--nd-dim); font-style: italic; font-weight: 500; font-size: 1rem; }

/* ---------- Range bars ---------- */
.ds-ov-ranges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ds-range-block {
  background: var(--nd-panel); border: 1px solid var(--nd-border);
  border-radius: 12px; padding: 18px 20px;
}
.ds-range-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.85rem; font-weight: 600; margin-bottom: 12px;
}
.ds-range-head span:first-child { color: var(--nd-text); }
.ds-range-head span:last-child { color: var(--nd-muted); font-variant-numeric: tabular-nums; }
.ds-range-bar {
  position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #f87171 0%, #a3a380 50%, #4ade80 100%);
  margin-bottom: 8px;
}
.ds-range-fill { display: none; }
.ds-range-marker {
  position: absolute; top: -4px; width: 3px; height: 16px;
  background: var(--nd-text); border-radius: 2px; transform: translateX(-50%);
}
.ds-range-lbl {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: var(--nd-dim);
}

/* ---------- Index table ---------- */
.ds-indices { margin-bottom: 0.5rem; }
.ds-idx-table .sym { font-weight: 700; }

@media (max-width: 900px) {
  .ds-ov-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-ov-ranges { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ds-ov-grid { grid-template-columns: 1fr; }
  .ds-ov-card .v { font-size: 1.2rem; }
}

/* ---------- Overview 2-column layout ---------- */
.ds-ov-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; align-items: start;
}
.ds-ov-chart {
  background: var(--nd-panel); border: 1px solid var(--nd-border);
  border-radius: 12px; padding: 20px;
}
.ds-ov-chart-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
}
.ds-ov-chart-title {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  background: #dc2626; color: var(--nd-white); padding: 4px 10px; border-radius: 4px;
}
.ds-ov-chart-val { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ds-ov-chart-val strong { font-weight: 700; color: var(--nd-text); }
.ds-ov-chart-val .up { color: var(--nd-up); font-size: 1rem; }
.ds-ov-chart-val .dn { color: var(--nd-down); font-size: 1rem; }
[data-theme="light"] .ds-ov-chart-val .up { color: var(--nd-up); }
[data-theme="light"] .ds-ov-chart-val .dn { color: var(--nd-down); }
#dsChartSvg { width: 100%; height: 220px; display: block; }
.ds-ov-chart-note { font-size: 0.75rem; color: var(--nd-dim); margin-top: 8px; }
.ds-ov-summary .ds-ov-grid { grid-template-columns: repeat(3, 1fr); }
.ds-ov-summary .ds-ov-ranges { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .ds-ov-layout { grid-template-columns: 1fr; }
}

/* ---------- Logos in table ---------- */
.ds-table .sym {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.ds-table .sym .co-logo { flex-shrink: 0; }

/* ---------- Teardown 2026-10-28: skip link, freshness, 48px controls,
   3D card wrappers, sector block (appended; earlier rules untouched) ---------- */

/* Accessibility: hide skip-link until keyboard-focused (never display:none).
   Light-scoped scope beats design-system's `.nd a { color: inherit }` (0,1,1),
   which otherwise inherits the body ink instead of the lime-pill text.
   Light-only so dark keeps its own rendering untouched. */
[data-nd-ed="light"] body.nd .skip-link, [data-theme="light"] body.nd .skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 200;
  padding: 8px 14px; border-radius: 8px;
  background: var(--nd-lime, #B8E62E); color: var(--nd-on-lime, #0A0C10);
  font-weight: 700; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Page-owned freshness line ---------- */
.ds-freshline {
  margin: 12px 0 0; font-size: 0.85rem; line-height: 1.6;
  color: var(--nd-muted);
}
.ds-freshline .ds-fl-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font: 600 0.7rem var(--nd-font-mono, "IBM Plex Mono", monospace);
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
}
.ds-freshline .ds-fl-chip.closed {
  background: var(--nd-chip-closed-bg, rgba(245,179,1,.12)); color: var(--nd-chip-closed-fg, #F5B301);
}
.ds-freshline .ds-fl-chip.live {
  background: var(--nd-chip-live-bg, rgba(74,222,128,.14)); color: var(--nd-chip-live-fg, #4ADE80);
}
.ds-freshline .ds-fl-chip.stale {
  background: var(--nd-chip-stale-bg, rgba(248,113,113,.12)); color: var(--nd-chip-stale-fg, #F87171);
}
.ds-freshline .ds-fl-chip.unverified {
  background: var(--nd-chip-unverified-bg, rgba(154,163,178,.14)); color: var(--nd-chip-unverified-fg, #9AA3B2);
}

/* ---------- Noscript fallback ---------- */
.ds-noscript {
  border: 1px solid var(--nd-border); border-radius: 12px;
  background: var(--nd-panel); color: var(--nd-muted);
  padding: 16px 18px; margin: 0 0 18px; font-size: 0.9rem; line-height: 1.65;
}
.ds-noscript strong { color: var(--nd-text); }

/* ---------- 48px design-rich controls ---------- */
.ds-select, .ds-search {
  min-height: 48px; padding: 12px 14px; border-radius: 10px;
}
.ds-select:focus, .ds-search:focus {
  outline: 2px solid var(--nd-lime); outline-offset: 2px; border-color: var(--nd-lime);
}
.ds-pill {
  min-height: 48px; display: inline-flex; align-items: center;
  padding: 12px 20px; border-radius: 999px;
}
.ds-pill:focus-visible { outline: 2px solid var(--nd-lime); outline-offset: 2px; }
.ds-page-btn { min-height: 48px; padding: 12px 22px; border-radius: 10px; }
.ds-page-num { white-space: nowrap; flex-shrink: 0; } /* 390px: keep 'Page 1 / 8' on one line */
.ds-page-btn:focus-visible { outline: 2px solid var(--nd-lime); outline-offset: 2px; }
#dsNext:not(:disabled) {
  background: var(--nd-lime); border-color: var(--nd-lime); color: var(--nd-on-lime);
}
#dsNext:hover:not(:disabled) { filter: brightness(1.06); }
#dsPrev { color: var(--nd-muted); }

/* ---------- 3D card wrappers (house .d3-card; inner scroll borderless) ---------- */
.ds-indices.d3-card, .ds-table-card { padding: 18px 20px; margin-bottom: 0.5rem; }
.ds-indices.d3-card .ds-table-scroll, .ds-table-card .ds-table-scroll {
  border: 0; background: transparent; border-radius: 0;
}
.ds-indices.d3-card .ds-sec-title { margin-top: 0; }
.ds-table-card .ds-table-scroll { margin-top: 0; }

/* ---------- Sector block ---------- */
.ds-sec-lede { color: var(--nd-muted); line-height: 1.65; font-size: 0.95rem; margin: -0.5rem 0 1rem; max-width: 76ch; }
.ds-sector-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 0 0 0.5rem;
}
.ds-sector-card {
  text-align: left; cursor: pointer; padding: 16px 18px;
  font-family: var(--nd-font-sans, Inter, system-ui, sans-serif);
  color: var(--nd-text); width: 100%;
}
.ds-sector-card .ds-sc-name {
  display: block; font-family: var(--nd-font-display, "Spectral", serif);
  font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px;
}
.ds-sector-card .ds-sc-count {
  display: block; font-family: var(--nd-font-display, "Spectral", serif);
  font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.2; white-space: nowrap;
}
.ds-sector-card .ds-sc-sub { display: block; font-size: 0.8rem; color: var(--nd-muted); margin: 2px 0 10px; }
.ds-sector-card .cx-breadth { height: 10px; }
.ds-sector-card .ds-sc-mix { font-size: 0.78rem; color: var(--nd-dim); margin-top: 8px; }
.ds-sector-card .ds-sc-mix b { color: var(--nd-text); font-variant-numeric: tabular-nums; }
.ds-sector-card:focus-visible { outline: 2px solid var(--nd-lime); outline-offset: 2px; }
.ds-sector-card.active { border-color: var(--nd-lime); box-shadow: var(--nd-rim, inset 0 1px 0 rgba(255,255,255,.05)), 0 10px 26px rgba(0,0,0,.22), 0 0 0 1px var(--nd-lime); }
.ds-sector-card.active .ds-sc-name { color: var(--nd-lime); }
[data-theme="light"] .ds-sector-card.active { box-shadow: inset 0 1px 0 var(--nd-white), 0 10px 24px rgba(30,40,60,.08), 0 0 0 1px var(--nd-lime); }

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .ds-sector-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ds-table .cname { display: none; }
  .ds-sector-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-indices.d3-card, .ds-table-card { padding: 14px 12px; }
}
@media (max-width: 560px) {
  .ds-sector-grid { grid-template-columns: 1fr; }
}

/* ---------- Theme-scoped canvas pin (master #0A0C10 / #F6F7F9) ----------
   Beats legacy theme.css [data-theme="dark"] body.nd #12110e (0,2,1)
   with (0,2,2). Tokens resolve per theme via data-theme / data-nd-ed. */
html[data-theme="dark"] body.nd { background: var(--nd-bg, #0A0C10); }
html[data-theme="light"] body.nd { background: var(--nd-bg, #F6F7F9); }
html[data-nd-ed="light"] body.nd { background: var(--nd-bg, #F6F7F9); }

/* ---- R6 (2026-10-29): light-theme contrast to AA (dark untouched) ---- */
/* Sorted-column header: light lime #4D7C0F on #eff1f5 = 4.42:1;
   #3F6212 = 6.26:1. Freshness chips sit on amber/green/red tints:
   CLOSED amber #B45309 = 4.25:1 on #f6eae1 -> #92400E = 6.00:1;
   LIVE/STALE use the tint-passing pair #166534/#B91C1C (same as
   nd-cinema chips) so the market-open states pass too. */
[data-theme="light"] .ds-table thead th.sorted { color: #3F6212; }
[data-theme="light"] .ds-freshline .ds-fl-chip.closed { color: #92400E; }
[data-theme="light"] .ds-freshline .ds-fl-chip.live { color: #166534; }
[data-theme="light"] .ds-freshline .ds-fl-chip.stale { color: #B91C1C; }

/* ---- CLS reservations (2026-10-29) ---- */
/* The overview + indices sections shipped with the `hidden` attribute and
   were unhidden by JS once data arrived, pushing the sectors/table block
   down ~1540px (Lighthouse CLS ~0.51). They are now in layout from first
   paint (see the HTML: `hidden` removed) with floors at their rendered
   heights at the desktop breakpoint (611px / 915px); the badge mount
   (0 -> 35px) is reserved the same way. */
#dsOverview{min-height:611px}
#dsIndices{min-height:915px}
.fb-wrap [data-freshness-badge]{min-height:35px}

/* ---- CLS reservations, round 2 (2026-10-29) ---- */
/* Overview fill rebalanced the 1fr/1fr layout grid (summary min-content
   widened its track 566 -> 659px, squeezing the chart 566 -> 473px) and
   grew the chart head ~10px when the value filled, moving the chart svg.
   min-width:0 pins both tracks at their 1fr share; the head floor and the
   session badge floor pin the two remaining fill-driven moves. */
.ds-ov-chart, .ds-ov-summary{min-width:0}
.ds-ov-chart-head{min-height:38px}
#dsAsof{min-width:224px}