/* hl.css — the headline list, one look on every page (np_hl_block in
   api/news_public.php; his call 2026-11-08: «یک api واحد کن همه جا یک چیز باشه»).
   The home tab, the «پیشنهاد» block under an article and /news all render it.
   Timeline (his pick «الف»): the hour on the right, a line with a dot per
   headline, every title bold; once a reader has clicked it the dot turns red
   and the hour black and bold (his rule, 2026-11-08; red no longer means hot); 📌 rows above; one column at every
   width, the title on one line from 900px. «.hlx.hlx» outranks the frame reset
   «html[data-zg] .zgh *{padding:0}» on the home page. Colours come from the page's own
   --fg/--mut/--line/--card where it has them. */
.hlx{--hl-fg:var(--fg,#131415);--hl-mut:var(--mut,#5b6066);--hl-line:var(--line,#e2e4e8);--hl-card:var(--card,#fff)}
.hlx.hlx .hltl{padding:2px 0 4px}
.hlx.hlx .hld{font-size:13px;font-weight:700;color:var(--hl-mut);padding:12px 0 4px}
.hlx.hlx .hlr{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;color:inherit;text-decoration:none}
.hlx.hlx .hlr time{font-size:13px;color:var(--hl-mut);padding-top:8px;text-align:left;font-variant-numeric:tabular-nums}
.hlx.hlx .hlb{position:relative;border-right:2px solid var(--hl-line);padding:7px 16px 7px 0;min-width:0}
.hlx.hlx .hlb::before{content:'';position:absolute;right:-7px;top:13px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--hl-card);border:2px solid var(--hl-mut)}
.hlx.hlx .hlr.clk .hlb::before{background:#e5484d;border-color:#e5484d}
.hlx.hlx .hlr.clk time{color:var(--hl-fg);font-weight:700}
.hlx.hlx .hlt{display:block;font-size:13px;font-weight:700;color:var(--hl-fg);line-height:1.7}
.hlx.hlx .hlpin{border-bottom:1px solid var(--hl-line);margin-bottom:2px}
.hlx.hlx .hls{display:block;font-size:13px;color:var(--hl-mut)}
.hlx.hlx .hlr:hover .hlt{text-decoration:underline}
.hlx.hlx .hlmore{display:block;margin:12px auto 2px;border:1.5px solid var(--hl-line);background:transparent;color:var(--hl-fg);border-radius:999px;
             padding:8px 22px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.hlx.hlx .hlmore small{font-size:13px;font-weight:400;color:var(--hl-mut);margin-right:6px}
.hlx.hlx .hlmore:disabled{opacity:.5;cursor:wait}
@media (min-width:900px){
  .hlx.hlx .hlb{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .hlx.hlx .hlt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hlx.hlx .hls{flex:none}
}