/* trending.css — /nepse-trending/ family layer.
   Part A: rules moved verbatim from the old inline <style> (tone pills,
   hero cards, research panels, sparklines) so existing markup keeps
   rendering. Part B: teardown block (canvas pin, 48px controls, pager,
   sector cards, freshness line, archive/forward styles). Tokens only
   in Part B; Part A keeps its pre-existing var(--nd-*, fallback) form. */

/* ---- Part A (moved) ---- */
.pos{color:var(--nd-up,#4ADE80);font-weight:600}
.neg{color:var(--nd-down,#F87171);font-weight:600}
.tone{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 3px rgba(0,0,0,.3)}
.tone-acc{background:linear-gradient(180deg,rgba(74,222,128,.2),rgba(74,222,128,.08));color:var(--nd-up,#4ADE80);border:1px solid rgba(74,222,128,.35)}
.tone-dist{background:linear-gradient(180deg,rgba(248,113,113,.2),rgba(248,113,113,.08));color:var(--nd-down,#F87171);border:1px solid rgba(248,113,113,.35)}
.tone-watch{background:linear-gradient(180deg,rgba(245,179,1,.22),rgba(245,179,1,.1));color:var(--nd-amber,#F5B301);border:1px solid rgba(245,179,1,.35)}
[data-theme="light"] .tone-acc{background:rgba(21,128,61,.1);color:#15803D;border-color:rgba(21,128,61,.3)}
[data-theme="light"] .tone-dist{background:rgba(220,38,38,.08);color:#DC2626;border-color:rgba(220,38,38,.28)}
[data-theme="light"] .tone-watch{background:rgba(180,83,9,.1);color:#B45309;border-color:rgba(180,83,9,.3)}
.scorebar{width:90px;height:8px;background:var(--nd-inset,#0D0F14);border-radius:999px;overflow:hidden;display:inline-block;vertical-align:middle;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.scorebar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--nd-lime,#B8E62E),#7BAE1F);
  box-shadow:0 0 6px rgba(184,230,46,.4)}
.rchips{display:flex;gap:5px;flex-wrap:wrap;max-width:300px}
.rchip{background:var(--nd-panel-2,#161A23);border:1px solid var(--nd-border,#1E2430);border-radius:999px;padding:2px 9px;font-size:.72rem;color:var(--nd-muted,#9AA3B2);white-space:nowrap}
.symlink{font-weight:700;color:var(--nd-text,#fff);text-decoration:none;transition:color .15s}
.symlink:hover{color:var(--nd-lime,#B8E62E);text-decoration:underline}
.sname{font-size:.75rem;color:var(--nd-dim,#6B7280);display:block;font-weight:400}
.submed{font-size:.72rem;color:var(--nd-dim,#6B7280);display:block;font-weight:400}
[data-theme="light"] .symlink{color:#4D7C0F}
.sig-table th .arr{color:var(--nd-lime,#B8E62E);font-size:.75rem}
.sig-table th.sortable{cursor:pointer;user-select:none}
/* hero cards */
.trend-hero{display:grid;gap:16px;margin:6px 0 26px}
@media(min-width:760px){.trend-hero{grid-template-columns:repeat(3,1fr)}}
.trend-card{position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 38%),var(--nd-panel,#12141A);
  border:1px solid var(--nd-border,#1E2430);border-radius:20px;padding:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 6px rgba(0,0,0,.15),0 3px 8px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.4);
  transition:transform .2s ease,box-shadow .2s ease}
.trend-card:hover{transform:translateY(-3px)}
.trend-card .t-rank{position:absolute;top:10px;right:16px;font-size:2.4rem;font-weight:700;color:var(--nd-border,#1E2430);line-height:1;user-select:none}
.trend-card .t-sym{font-size:1.25rem;font-weight:800;letter-spacing:.01em;color:var(--nd-text,#fff)}
.trend-card .t-name{font-size:.78rem;color:var(--nd-dim,#6B7280);margin:2px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-card .t-price{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--nd-text,#fff)}
.trend-card .t-chg{font-size:.85rem;font-weight:700;margin-left:8px}
.trend-card .t-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
.trend-card .t-turn{font-size:.78rem;color:var(--nd-dim,#6B7280);font-variant-numeric:tabular-nums}
.trend-card .t-why{font-size:.76rem;color:var(--nd-muted,#9AA3B2);margin-top:10px;line-height:1.5;max-height:3.4em;overflow:hidden}
[data-theme="light"] .trend-card{background:linear-gradient(180deg,#FFFFFF 0%,#F2F5F8 100%);border:1px solid #CBD4DE}
[data-theme="light"] .trend-card .t-sym,[data-theme="light"] .trend-card .t-price{color:#0A0C10}
/* research panels */
button.rs-toggle{padding:6px 14px;border:1px solid var(--nd-border,#1E2430);border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;
  background:transparent;color:var(--nd-lime,#B8E62E);transition:border-color .15s}
button.rs-toggle:hover{border-color:var(--nd-lime,#B8E62E)}
button.rs-toggle[aria-expanded="true"]{background:var(--nd-lime,#B8E62E);color:var(--nd-on-lime,#0A0C10);border-color:var(--nd-lime,#B8E62E)}
.rs-panel-row td{background:var(--nd-panel-2,#161A23)!important;padding:0!important}
.rs-panel{padding:24px}
.rs-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px;row-gap:8px;margin:0 0 20px}
.rs-asof{font-size:.8rem;color:var(--nd-dim,#6B7280)}
.rs-grid{display:grid;gap:20px;margin:0 0 20px}
@media(min-width:760px){.rs-grid{grid-template-columns:1fr 1fr}}
.rs-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 45%),var(--nd-panel,#12141A);
  border:1px solid var(--nd-border,#1E2430);border-radius:16px;padding:20px}
.rs-card h3{font-weight:700;font-size:.95rem;margin:0 0 14px;color:var(--nd-text,#fff)}
.rs-facts{display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-size:.86rem;margin:0}
.rs-facts dt{color:var(--nd-dim,#6B7280)}
.rs-facts dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;text-align:right;color:var(--nd-text,#fff)}
.rs-facts .rs-sub{grid-column:1/-1;color:var(--nd-dim,#6B7280);font-size:.78rem;margin-top:8px}
.rs-note{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 45%),var(--nd-panel,#12141A);
  border:1px solid var(--nd-border,#1E2430);border-left:4px solid var(--nd-lime,#B8E62E);border-radius:16px;padding:20px;margin:0 0 16px}
.rs-note p{margin:10px 0 0;line-height:1.7;font-size:.92rem;color:var(--nd-muted,#9AA3B2);max-width:72ch}
.rs-foot{margin:0}
.rs-loading{padding:32px;text-align:center;color:var(--nd-dim,#6B7280);font-size:.9rem}
canvas.spark{display:block}
.ne-sum{color:var(--nd-dim,#6B7280);font-size:.92rem;max-width:68ch;margin:0 0 22px;line-height:1.7}
.snap-asof{font-size:.8rem;font-weight:400;color:var(--nd-dim,#6B7280)}
.snap-note{font-size:.82rem;color:var(--nd-dim,#6B7280);margin:12px 0 0}

/* ---- Part B (teardown block) ---- */
body[data-page="trending"]{font-family:var(--nd-font-sans);background:var(--nd-bg)}
body[data-page="trending"][data-theme="dark"],html[data-theme="dark"] body[data-page="trending"]{background:#0A0C10}
html[data-theme="light"] body[data-page="trending"]{background:#F6F7F9}
/* skip link: visually hidden until keyboard focus (was unstyled) */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:absolute;left:16px;top:12px;width:auto;height:auto;padding:10px 16px;background:var(--nd-lime);color:var(--nd-on-lime);border-radius:10px;font-weight:700;z-index:100}
/* page-owned freshness line */
.tr-fresh{font-size:.82rem;color:var(--nd-dim);margin:0 0 16px}
.tr-fresh .tr-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--nd-up);margin-right:6px}
/* stat cards (3D system + layout) */
.tr-stats{display:grid;gap:14px;margin:0 0 18px}
@media(min-width:760px){.tr-stats{grid-template-columns:repeat(5,1fr)}}
.tr-stat{padding:18px}
.tr-stat .tr-eyebrow{font-size:.6875rem;text-transform:uppercase;letter-spacing:.22em;color:var(--nd-dim);margin:0 0 8px}
.tr-stat .tr-num{font-family:var(--nd-font-display);font-size:1.9rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--nd-text)}
.tr-stat .tr-sub{font-size:.78rem;color:var(--nd-dim);margin-top:4px}
/* tone mix bar (house pattern: 12px track, block segments, legend) */
.tr-mix{margin:0 0 22px}
.tr-mix .tr-track{display:flex;height:12px;border-radius:999px;background:var(--nd-border);overflow:hidden}
.tr-mix .tr-track i{display:block;height:100%}
.tr-mix .tr-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.82rem;color:var(--nd-muted)}
.tr-mix .tr-legend span{display:inline-flex;align-items:center;gap:6px}
.tr-mix .tr-legend i{display:block;width:8px;height:8px;border-radius:2px}
/* sector cards */
.tr-sectors{display:grid;gap:14px;margin:0 0 22px}
@media(min-width:760px){.tr-sectors{grid-template-columns:repeat(3,1fr)}}
.tr-sector{cursor:pointer;text-align:left;font-family:inherit}
.tr-sector[aria-pressed="true"]{outline:2px solid var(--nd-lime);outline-offset:2px}
.tr-sector h3{font-family:var(--nd-font-display);font-size:1.05rem;margin:0 0 6px;color:var(--nd-text)}
.tr-sector .tr-secmeta{font-size:.78rem;color:var(--nd-dim);margin:0 0 10px}
.tr-sector .tr-minibar{display:flex;height:8px;border-radius:999px;background:var(--nd-border);overflow:hidden;margin:0 0 10px}
.tr-sector .tr-minibar i{display:block;height:100%}
.tr-sector .tr-top{font-size:.82rem;color:var(--nd-muted);line-height:1.8;margin:0}
.tr-sector .tr-top a{color:var(--nd-text);text-decoration:none;font-weight:700}
.tr-sector .tr-top a:hover{color:var(--nd-lime);text-decoration:underline}
/* 48px controls */
.tr-controls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;align-items:center}
.tr-select,.tr-search{min-height:48px;font-size:.9rem;font-family:inherit}
.tr-select,.tr-search{background:var(--nd-inset);border:1px solid var(--nd-border);border-radius:12px;color:var(--nd-text);padding:0 14px}
.tr-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA3B2' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.tr-search{flex:1 1 200px}
.tr-toggle{min-height:48px;padding:0 18px;border:1px solid var(--nd-border);border-radius:999px;background:transparent;color:var(--nd-lime);font-weight:600;cursor:pointer;font-family:inherit}
.tr-toggle[aria-pressed="true"]{background:var(--nd-lime);color:var(--nd-on-lime);border-color:var(--nd-lime)}
/* pager: Prev quiet, Next lime primary */
.tr-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 4px}
.tr-pager button{min-height:48px;min-width:48px;padding:0 16px;border-radius:12px;border:1px solid var(--nd-border);background:var(--nd-panel);color:var(--nd-text);font-weight:600;cursor:pointer;font-family:inherit}
.tr-pager button.tr-next{background:var(--nd-lime);color:var(--nd-on-lime);border-color:var(--nd-lime)}
html[data-theme="light"] .tr-pager button.tr-next{background:#4D7C0F;color:#fff}
.tr-pager button[disabled]{opacity:.45;cursor:default}
.tr-pager .tr-count{font-size:.82rem;color:var(--nd-dim);margin-left:auto}
/* table card wrapper + markers */
.tr-cardwrap{overflow:hidden}
.tr-cardwrap .scrollx{overflow-x:auto}
.tr-flag{font-size:.75rem;color:var(--nd-dim);white-space:nowrap}
.tr-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--nd-up);margin-left:4px;vertical-align:middle}
.tr-repaint-note{font-size:.82rem;color:var(--nd-dim);margin:12px 0 0}
.tr-err{color:var(--nd-down);font-weight:600}
/* archive + forward record */
.tr-section{margin:26px 0}
.tr-section h2{font-family:var(--nd-font-display);margin:0 0 12px}
.tr-track-meta{font-size:.82rem;color:var(--nd-dim);margin:0 0 12px}
.tr-noclosed{background:var(--nd-lime-soft);border:1px solid var(--nd-border);border-radius:12px;padding:14px 18px;margin:0 0 14px;color:var(--nd-text)}
.tr-track-note{font-size:.82rem;color:var(--nd-dim);margin:12px 0 0}
.tr-snapwrap{margin:26px 0}
/* method box keeps payload text readable */
.tr-method{line-height:1.7;color:var(--nd-muted);max-width:74ch}
.tr-method p{margin:0 0 10px}
@media(max-width:640px){
  .tr-stats{grid-template-columns:1fr 1fr}
  .tr-sectors{grid-template-columns:1fr}
  .trend-hero{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .trend-card:hover{transform:none}
}