/* Card / signal / sparkline components for the picks pages: investments.html (body.invest), speculative.html (body.spec), dividends.html (body.income) and crypto.html (body.crypto).
   Compact layout + one signal pill per card (2026-10-08). Speculative-only tweaks live in assets/speculative.css. */
:is(.invest,.spec,.income,.crypto){--cyan:#3fd0ff;--cond:"Roboto Condensed","Avenir Next Condensed","Arial Narrow","Helvetica Neue",Impact,sans-serif}
:is(.invest,.spec,.income,.crypto) main{padding:12px 0 22px;background:radial-gradient(900px 300px at 50% 0,rgba(63,208,255,.07),transparent 70%)}

/* compact hero: icon + gold heading on one line, tagline + sub line below */
:is(.invest,.spec,.income,.crypto) .lt-head{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:14px;text-align:center;margin:4px 0 2px}
:is(.invest,.spec,.income,.crypto) .lt-icon{width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(240,207,104,.35))}
:is(.invest,.spec,.income,.crypto) .lt-h1{display:flex;align-items:center;justify-content:center;gap:14px;margin:0}
:is(.invest,.spec,.income,.crypto) .lt-brand{font-family:var(--cond);font-stretch:condensed;font-weight:900;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff6cf 0%,#f0cf68 38%,#d4af37 62%,#9c7518 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(212,175,55,.3))}
:is(.invest,.spec,.income,.crypto) .lt-rule{width:70px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#d4af37)}
:is(.invest,.spec,.income,.crypto) .lt-rule:last-child{background:linear-gradient(90deg,#d4af37,transparent)}
:is(.invest,.spec,.income,.crypto) .lt-tagline{grid-column:1/-1;margin:4px 0 0;font-family:var(--cond);font-stretch:condensed;font-weight:800;font-size:1.12rem;letter-spacing:.04em;color:var(--cyan);line-height:1.25}
:is(.invest,.spec,.income,.crypto) .lt-sub{grid-column:1/-1;margin:2px auto 0;max-width:640px;color:var(--muted);font-size:.8rem;line-height:1.4}
:is(.invest,.spec,.income,.crypto) .lt-updated{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;margin:10px 0 0;font-size:.72rem}
:is(.invest,.spec,.income,.crypto) .lt-updated .stamp{margin:0;padding:2px 10px;font-size:.72rem}
:is(.invest,.spec,.income,.crypto) .lt-pxtime{color:var(--muted)}

/* sections */
:is(.invest,.spec,.income,.crypto) .lt-sec{margin:16px 0 4px}
:is(.invest,.spec,.income,.crypto) .lt-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:8px}
:is(.invest,.spec,.income,.crypto) .lt-sec-head h2{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--cond);font-stretch:condensed;font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-size:1.2rem;line-height:1.2}
:is(.invest,.spec,.income,.crypto) .lt-count{font-size:.7rem;color:#081425;background:var(--gold);border-radius:999px;padding:0 8px;letter-spacing:0;font-family:inherit;line-height:1.5}
:is(.invest,.spec,.income,.crypto) .lt-intro{margin:0;color:#d6e0ee;font-size:.8rem;line-height:1.35}
:is(.invest,.spec,.income,.crypto) .lt-empty{margin:0;color:var(--muted);font-style:italic;font-size:.8rem}

/* cards: 4 / 3 / 2 / 1 */
:is(.invest,.spec,.income,.crypto) .lt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
:is(.invest,.spec,.income,.crypto) .lt-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;min-width:0;
  padding:9px 11px 9px;border-radius:12px;border:1px solid #24476f;
  background:radial-gradient(120% 90% at 0% 0%,rgba(63,208,255,.10),transparent 55%),linear-gradient(180deg,#11264a 0%,#0b1a30 100%);
  box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
:is(.invest,.spec,.income,.crypto) .lt-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#d4af37,#f0cf68,#3fd0ff)}
:is(.invest,.spec,.income,.crypto) .lt-card:hover,:is(.invest,.spec,.income,.crypto) .lt-card:focus-within{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 0 1px var(--gold),0 0 20px rgba(212,175,55,.3)}
:is(.invest,.spec,.income,.crypto) .lt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
:is(.invest,.spec,.income,.crypto) .lt-id{min-width:0}
:is(.invest,.spec,.income,.crypto) .lt-tick{display:block;font-family:var(--cond);font-weight:900;font-size:1.15rem;letter-spacing:.03em;line-height:1.05;color:#fff}
:is(.invest,.spec,.income,.crypto) .lt-name{display:block;color:var(--muted);font-size:.66rem;line-height:1.3}
:is(.invest,.spec,.income,.crypto) .lt-px{text-align:right;flex:0 0 auto}
:is(.invest,.spec,.income,.crypto) .lt-px b{display:block;font-variant-numeric:tabular-nums;font-size:.95rem;line-height:1.15}
:is(.invest,.spec,.income,.crypto) .lt-yield{display:block;color:var(--gold-2);font-size:.64rem;font-weight:700;white-space:nowrap;line-height:1.3}

/* sparkline */
:is(.invest,.spec,.income,.crypto) .lt-chart{margin:0;padding:3px 0;border-radius:8px;background:rgba(8,20,37,.55)}
:is(.invest,.spec,.income,.crypto) .lt-spark{display:block;width:100%;height:38px}
:is(.invest,.spec,.income,.crypto) .lt-spark-none{display:grid;place-items:center;height:38px;color:var(--muted);font-size:.7rem}

/* stats: one inline row */
:is(.invest,.spec,.income,.crypto) .lt-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;font-size:.66rem;line-height:1.35;color:var(--muted)}
:is(.invest,.spec,.income,.crypto) .lt-stats span{white-space:nowrap}
:is(.invest,.spec,.income,.crypto) .lt-stats b{font-variant-numeric:tabular-nums;font-size:.74rem}
:is(.invest,.spec,.income,.crypto) .lt-stats b.flat0{color:var(--muted)}
:is(.invest,.spec,.income,.crypto) .lt-stats .up{color:var(--up)} :is(.invest,.spec,.income,.crypto) .lt-stats .down{color:var(--down)}


/* description: max 2 lines */
:is(.invest,.spec,.income,.crypto) .lt-why{margin:0;color:#d6e0ee;font-size:.7rem;line-height:1.38}
:is(.invest,.spec,.income,.crypto) .lt-wait{margin:0;font-size:.62rem;font-weight:800;letter-spacing:.01em;color:var(--gold-2);background:rgba(212,175,55,.12);border:1px dashed var(--gold);border-radius:12px;padding:1px 9px;align-self:flex-start}

/* watching: dimmer */
:is(.invest,.spec,.income,.crypto) .lt-watch{opacity:.72;filter:saturate(.75)}
:is(.invest,.spec,.income,.crypto) .lt-watch::before{background:linear-gradient(90deg,#6b7f99,#a9b8cc)}
:is(.invest,.spec,.income,.crypto) .lt-watch:hover,:is(.invest,.spec,.income,.crypto) .lt-watch:focus-within{opacity:1;filter:none}

/* compact signal key */
:is(.invest,.spec,.income,.crypto) .lt-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:18px 0 4px;padding:9px 14px;border-radius:12px;border:1px solid #24476f;background:linear-gradient(180deg,#11264a 0%,#0b1a30 100%)}
:is(.invest,.spec,.income,.crypto) .lt-legend-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
:is(.invest,.spec,.income,.crypto) .lt-legend-row li{display:flex;align-items:center;gap:5px;font-size:.7rem;color:#d6e0ee;white-space:nowrap}
:is(.invest,.spec,.income,.crypto) .lt-risk{margin:12px 0 0;padding:6px 12px;border-left:3px solid var(--gold);color:var(--gold-2);font-weight:700;font-size:.78rem}

@media (prefers-reduced-motion:reduce){:is(.invest,.spec,.income,.crypto) .lt-card{transition:none}:is(.invest,.spec,.income,.crypto) .lt-card:hover,:is(.invest,.spec,.income,.crypto) .lt-card:focus-within{transform:none}}
@media (min-width:1200px){:is(.invest,.spec,.income,.crypto) .lt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:699px){:is(.invest,.spec,.income,.crypto) .lt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  :is(.invest,.spec,.income,.crypto) .lt-head{column-gap:10px}
  :is(.invest,.spec,.income,.crypto) .lt-icon{width:34px;height:34px}
  :is(.invest,.spec,.income,.crypto) .lt-h1{gap:8px}
  :is(.invest,.spec,.income,.crypto) .lt-rule{display:none}
  :is(.invest,.spec,.income,.crypto) .lt-brand{font-size:clamp(1.15rem,6vw,1.6rem);letter-spacing:.02em}
  :is(.invest,.spec,.income,.crypto) .lt-tagline{font-size:1rem}
}

/* one signal pill per card */
:is(.invest,.spec,.income,.crypto) .lt-sigrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
:is(.invest,.spec,.income,.crypto) .lt-sig{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;font-weight:800;font-size:.64rem;letter-spacing:.03em;line-height:1.55;white-space:nowrap;border:1px solid}
:is(.invest,.spec,.income,.crypto) .lt-sig::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
:is(.invest,.spec,.income,.crypto) .sig-up{background:#145c38;border-color:#2f9e62;color:#d6ffe8}
:is(.invest,.spec,.income,.crypto) .sig-bottom{background:#5a4a12;border-color:#c9a53a;color:#fff2c4}
:is(.invest,.spec,.income,.crypto) .sig-wait{background:#26364d;border-color:#4a5f7c;color:#c3cfdf}
:is(.invest,.spec,.income,.crypto) .lt-legend-h{font-family:var(--cond);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;color:var(--gold)}
:is(.invest,.spec,.income,.crypto) .lt-legend .lt-legend-note{flex:1 1 100%;margin:0;font-size:.64rem}
:is(.invest,.spec,.income,.crypto) .sig-new{background:#0e3d4a;border-color:#2a8aa0;color:#d4f6ff}
:is(.invest,.spec,.income,.crypto) .lt-also{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:.6rem;font-weight:800;letter-spacing:.02em;line-height:1.55;
  color:#081425;background:var(--gold-2);text-decoration:none}
:is(.invest,.spec,.income,.crypto) .lt-also:hover{background:#fff;color:#081425}