/* ChipSentiment - styles for generated stock and sector pages.
   The homepage keeps its own inline styles; both share tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.wrap{max-width:940px; margin:0 auto; padding:0 24px}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
h1,h2,h3{font-family:var(--f-display); font-weight:700; letter-spacing:-.015em; margin:0; line-height:1.12}
h1{font-size:clamp(30px,4.4vw,42px)}
h2{font-size:24px; margin-top:44px}
h3{font-size:18px; margin-top:28px}
p{margin:14px 0}
.eyebrow{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* nav */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:26px; height:60px; max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* At 360px the brand, the movers button and the menu toggle did not fit inside
   24px of padding, so every generated page scrolled sideways by 11px. Small
   enough to look like a rendering quirk rather than a bug, which is why it
   survived - found while measuring the tables on /x-mentions/. */
@media (max-width:400px){
  .nav-in{padding:0 12px; gap:14px}
}
@media (max-width:360px){
  /* On the narrowest phones still in use the call-to-action is what has to go.
     The board it points at is one tap away in the menu beside it. */
  .nav-right .btn-primary{display:none}
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:-.02em}
.brand-mark{width:22px; height:22px; flex:none}
.nav-links{display:flex; gap:22px}
.nav-links a{font-size:14px; color:var(--ink-2); font-weight:500; border-bottom:1.5px solid transparent; padding:4px 0}
.nav-links a:hover{color:var(--ink); border-bottom-color:var(--brand)}
.nav-links a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--brand)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}

/* Mobile menu. The links previously vanished below 640px with nothing to
   replace them, leaving a phone reader no route through the site but the
   footer - and the phone is the version Google indexes. */
.nav-toggle{display:none}
.nav-drawer{display:none; border-top:1px solid var(--line); background:var(--panel)}
.nav-drawer a{display:block; padding:13px 24px; font-size:15px; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--line-2)}
.nav-drawer a:last-child{border-bottom:0}
.nav-drawer a[aria-current="page"]{color:var(--brand-ink); font-weight:600}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);color:var(--ink-2);background:var(--panel)}
.icon-btn:hover{color:var(--ink); border-color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 16px;
  border-radius:9px; font-size:13.5px; font-weight:600; border:1px solid transparent;
  transition:transform .12s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--brand-ink); color:#fff}
html[data-theme="dark"] .btn-primary{background:var(--brand); color:#04161A}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--panel)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{height:30px; padding:0 12px; font-size:12.5px; border-radius:8px}

/* breadcrumb */
.crumbs{display:flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:11.5px; color:var(--muted); padding:22px 0 0; flex-wrap:wrap}
.crumbs a:hover{color:var(--brand-ink)}

/* header block */
.head{display:flex; align-items:flex-start; gap:16px; margin:14px 0 0; flex-wrap:wrap}
.tkr-badge{width:52px; height:52px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:13px; font-weight:600; color:#fff; position:relative; overflow:hidden}
.tkr-badge.has-logo{background:var(--panel-2) !important; box-shadow:inset 0 0 0 1px var(--line)}
.tkr-badge i{position:absolute; inset:0; display:grid; place-items:center; font-style:normal; color:var(--muted); font-size:11px}
.tkr-badge img{position:relative; width:34px; height:34px; border-radius:6px; object-fit:contain; background:#fff}
.head-sub{font-family:var(--f-mono); font-size:12.5px; color:var(--muted); margin-top:6px; letter-spacing:.04em}
.quote{display:flex; align-items:baseline; gap:14px; margin:22px 0 0; flex-wrap:wrap}
.quote .px{font-family:var(--f-mono); font-size:40px; font-weight:600; letter-spacing:-.03em}
.pct{font-family:var(--f-mono); font-weight:500; font-size:14px; padding:4px 9px; border-radius:7px}
.pct.p{background:var(--up-bg); color:var(--up)}
.pct.n{background:var(--down-bg); color:var(--down)}
/* Small multiples: one panel per segment. Three across on desktop, two on a
   tablet, one on a phone - a grid that never forces a horizontal scroll. */
.sm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px 20px}
.sm{min-width:0}
.sm-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:4px}
.sm-name{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); font-weight:500; min-width:0}
.sm-name i{width:10px; height:3px; border-radius:2px; flex:none}
.sm-vals{display:inline-flex; align-items:center; gap:7px; flex:none}
.sm-vals b{font-family:var(--f-mono); font-size:15px; font-weight:600}
.sm-grid .pct{font-size:11px; padding:2px 5px}
@media (max-width:820px){ .sm-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .sm-grid{grid-template-columns:1fr} }


.ext-quote{font-family:var(--f-mono); font-size:13px; color:var(--muted); margin-top:10px; letter-spacing:.03em}
.ext-quote b{font-weight:600; letter-spacing:.08em; font-size:10.5px; opacity:.8}
.ext-quote i{font-style:normal; font-weight:600}
.data-badge{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.06em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--s3);box-shadow:0 0 0 3px rgba(223,165,44,.2)}
.dot.live{background:var(--up); box-shadow:0 0 0 3px rgba(12,159,98,.22)}

/* sentiment panel */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; margin:28px 0; box-shadow:var(--shadow-1)}
.score-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.score-big{font-family:var(--f-mono); font-size:52px; font-weight:600; line-height:1; letter-spacing:-.03em}
.score-band{font-family:var(--f-display); font-size:22px; font-weight:700}
.ramp-bar{height:7px; border-radius:99px; margin-top:16px; position:relative;
  background:linear-gradient(90deg,var(--s0),var(--s1) 25%,var(--s2) 50%,var(--s3) 75%,var(--s4))}
.ramp-pin{position:absolute; top:50%; width:3px; height:19px; border-radius:2px; background:var(--ink);
  transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--panel)}
.ramp-scale{display:flex; justify-content:space-between; margin-top:8px; font-family:var(--f-mono); font-size:10px; color:var(--muted); letter-spacing:.08em}
.brk{display:grid; gap:11px; margin-top:22px}
.brk-row{display:grid; grid-template-columns:140px 1fr 52px; gap:12px; align-items:center; font-size:13.5px}
.brk-track{height:5px; border-radius:99px; background:var(--line); overflow:hidden}
.brk-fill{height:100%; border-radius:99px}
.brk-val{font-family:var(--f-mono); font-size:12.5px; text-align:right}

/* stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin:24px 0}
.stat{background:var(--panel); padding:14px 16px}
.stat .l{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:var(--f-mono); font-size:16px; font-weight:600; margin-top:4px}

/* lists */
.drivers{list-style:none; padding:0; margin:14px 0; display:grid; gap:10px}
.drivers li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2)}
.drivers li::before{content:"-"; color:var(--brand); font-family:var(--f-mono); flex:none}

/* article + list cards (mirrors the homepage .post) */
.post{
  min-height:78px;
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:16px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 18px; margin-bottom:12px; color:inherit;
  transition:border-color .15s, transform .15s;
}
.post:hover{border-color:var(--muted); transform:translateY(-1px)}
.post-score{
  font-family:var(--f-mono); font-size:19px; font-weight:600; height:48px; border-radius:9px;
  display:grid; place-items:center; color:#fff; text-align:center; line-height:1.15;
}
.post-src{
  position:relative; height:48px; width:48px; border-radius:9px; overflow:hidden;
  display:grid; place-items:center; background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line);
}
.post-src i{font-family:var(--f-mono); font-size:15px; font-weight:600; font-style:normal; color:var(--muted)}
/* The favicon sits over the initials and removes itself if it fails to load,
   so a card is never a blank square. */
.post-src img{position:absolute; inset:0; margin:auto; width:26px; height:26px; object-fit:contain; background:var(--panel-2)}
.post h3{font-family:var(--f-body); font-size:15.5px; font-weight:600; line-height:1.4; margin:0}
.post-meta{font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:5px; letter-spacing:.03em}
.post-tags{display:flex; gap:5px}
.tag{font-family:var(--f-mono); font-size:11px; padding:3px 7px; border-radius:6px; background:var(--panel-2); color:var(--ink-2)}
@media (max-width:640px){
  .post{
  min-height:78px;grid-template-columns:52px minmax(0,1fr)}
  .post-tags{display:none}
}

/* TradingView embeds inside articles */
.tv-embed{margin:28px 0}
.tv-chart{
  min-height:220px;   /* reserve space before the third-party embed loads */
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--panel); min-height:220px;
}
.tv-strip{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-md) var(--r-md);
  margin-top:-1px; padding:11px 16px; background:var(--panel-2);
  font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.05em;
}
.tv-sent{display:flex; align-items:center; gap:9px}
.tv-bar{width:78px; height:7px; border-radius:99px; background:var(--line-2);
  box-shadow:inset 0 0 0 1px var(--line); overflow:hidden}
.tv-fill{height:100%; border-radius:99px; min-width:4px}
.tv-sent b{font-size:13px}
.tv-link{margin-left:auto; color:var(--brand-ink); font-weight:600}
.tv-link:hover{text-decoration:underline}
@media (max-width:640px){ .tv-link{margin-left:0} }

/* peer grid */
.peers{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin:16px 0}
.peer{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; transition:border-color .15s, transform .15s; display:block}
.peer:hover{border-color:var(--brand); transform:translateY(-2px)}
.peer .t{font-family:var(--f-mono); font-weight:600; font-size:14px}
.peer .n{font-size:12.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.peer .s{font-family:var(--f-mono); font-size:12.5px; font-weight:600; margin-top:8px}

/* sector table */
.tscroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:620px}
thead th{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:500; text-align:right; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
thead th:first-child, thead th:nth-child(2){text-align:left}
tbody td{padding:13px 14px; border-bottom:1px solid var(--line-2); text-align:right; font-size:14.5px; white-space:nowrap}
tbody td:first-child, tbody td:nth-child(2){text-align:left}
tbody tr:hover{background:var(--panel-2)}
.sent-cell{display:flex; align-items:center; justify-content:flex-end; gap:10px}
.sent-bar{width:60px; height:5px; border-radius:99px; background:var(--line); overflow:hidden}
/* display:block is load-bearing. This is a <span>, and width has no effect on
   an inline box - so every one of these bars rendered as an empty grey track
   with the colour and the percentage set but invisible, on every page that
   uses the component. */
.sent-fill{display:block; height:100%; border-radius:99px}
.sent-num{font-family:var(--f-mono); font-size:13px; font-weight:600; width:24px; text-align:right}

/* broker CTA */
.broker{display:flex; align-items:center; gap:13px; padding:13px 15px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--panel); margin-bottom:9px; transition:border-color .15s, transform .15s}
.broker:hover{border-color:var(--brand); transform:translateX(2px)}
.broker-logo{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; color:#fff; font-size:15px; flex:none}
.broker-name{font-weight:600; font-size:14px}
.broker-desc{font-size:12.5px; color:var(--muted)}
.broker-go{margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--brand-ink); letter-spacing:.06em}

/* faq */
.faq{border-top:1px solid var(--line); margin-top:14px}
.faq details{border-bottom:1px solid var(--line); padding:16px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; display:flex; gap:12px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; font-family:var(--f-mono); color:var(--brand); flex:none}
.faq details[open] summary::before{content:"-"}
.faq p{margin:10px 0 0 24px; color:var(--ink-2); font-size:15px}

.sources{list-style:none; padding:0; margin:14px 0; display:grid; gap:9px; font-size:14.5px}
.sources li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2)}
.sources li::before{content:"→"; color:var(--brand); font-family:var(--f-mono); flex:none}
.sources a{color:var(--brand-ink); font-weight:600}
.sources a:hover{text-decoration:underline}
.note{font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:12px}
/* Ad slots stay in the markup but collapsed until AdSense is approved and
   actually serving. An empty grey box labelled "Ad slot" is placeholder
   content, and placeholder content does not ship. Drop the hidden
   attribute on the div to switch a slot on. */
.ad[hidden]{display:none}
.ad{border:1px dashed var(--line); border-radius:var(--r-md); display:grid; place-items:center; color:var(--muted);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; background:var(--panel-2); height:96px; margin:34px 0}

/* footer */
.footer{background:var(--substrate); color:#94A8BB; padding:48px 0 26px; margin-top:56px; font-size:14px}
.footer .wrap{max-width:var(--maxw)}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:32px}
.footer h4{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#65798D; margin:0 0 12px; font-weight:500}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:13.5px}
.footer a:hover{color:#fff}
.disclosure{border-top:1px solid rgba(255,255,255,.09); margin-top:36px; padding-top:20px; font-size:12px; color:#65798D; line-height:1.65}
.disclosure strong{color:#94A8BB}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-drawer{display:block}
  .nav-drawer[hidden]{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .brk-row{grid-template-columns:112px 1fr 44px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important; animation-duration:.001ms !important}
}

/* ---------- X mentions table ----------------------------------------
   Scoped rather than global: every other table on the site right-aligns
   its figures, and changing that here would reflow all of them. Values
   are centred, the company name stays left because ragged-left names are
   far harder to scan than centred numbers.

   No .tscroll wrapper. The column set is trimmed and the padding tightened
   so the table fits its frame instead of hiding two columns behind a
   sideways scroll nobody notices on a desktop. */
/* Caption strip above the ranked table. It states which day the figures
   cover and where they came from, which the surrounding page already says
   in prose - but the table is lifted out of the page as an image for the
   daily post to X, and a table of numbers with no date and no source on it
   is exactly the kind of screenshot this site should not be putting into
   circulation. */
.xcap{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink-2)}
.xcap-src{font-weight:600; color:var(--muted); white-space:nowrap}
@media (max-width:460px){ .xcap{font-size:12px; padding:9px 12px} }

.xtable{min-width:0; table-layout:fixed}
.xtable thead th, .xtable tbody td{text-align:center; padding:11px 6px}
/* The name column needs a stated width and permission to wrap.
   table-layout:fixed splits eight columns evenly, which left roughly an
   eighth of the table for "Advanced Micro Devices / AMD - AI chips" - so the
   name overflowed its cell and printed underneath the posts figure, and the
   ticker line ellipsised to "AI c...". Widths below are stated for every
   column so the fixed layout cannot starve this one again. */
.xtable thead th:nth-child(2), .xtable tbody td:nth-child(2){
  text-align:left; padding-left:14px; white-space:normal; width:27%}
.xtable thead th:nth-child(3), .xtable tbody td:nth-child(3){width:11%}
.xtable thead th:nth-child(4), .xtable tbody td:nth-child(4){width:11%}
.xtable thead th:nth-child(5), .xtable tbody td:nth-child(5){width:12%}
.xtable thead th:nth-child(6), .xtable tbody td:nth-child(6){width:13%}
.xtable thead th:nth-child(7), .xtable tbody td:nth-child(7){width:11%}
.xtable thead th:nth-child(8), .xtable tbody td:nth-child(8){width:15%}
.xtable tbody td:nth-child(2) a{display:inline-block; line-height:1.3; overflow-wrap:anywhere}
.xtable thead th:first-child, .xtable tbody td:first-child{padding-left:14px; width:38px}
.xtable thead th:last-child, .xtable tbody td:last-child{padding-right:14px}
.xtable .sent-cell{justify-content:center}
.xtable .xspark svg{margin:0 auto}
.xtable tbody td{font-size:14px}
/* The ticker and segment line: wrap rather than ellipsise. Truncating to
   "Neoc..." tells a reader nothing; a second line costs eight pixels. */
.xtable .head-sub{white-space:normal; overflow-wrap:anywhere}

/* Below this the eight columns genuinely cannot fit, so the two that repeat
   information available elsewhere on the page step aside rather than forcing
   a horizontal scroll. */
@media (max-width:720px){
  .xtable thead th:nth-child(6), .xtable tbody td:nth-child(6),
  .xtable thead th:nth-child(7), .xtable tbody td:nth-child(7){display:none}
  /* Two columns have stepped aside, so give the space to the name rather than
     leaving it to be shared out among figures that do not need it. */
  .xtable thead th:nth-child(2), .xtable tbody td:nth-child(2){width:38%}
}
@media (max-width:460px){
  .xtable thead th:nth-child(5), .xtable tbody td:nth-child(5){display:none}
  .xtable tbody td{font-size:13px; padding:10px 4px}
  .xtable thead th:nth-child(2), .xtable tbody td:nth-child(2){width:46%}
}

.xpager{display:flex; gap:6px; justify-content:center; align-items:center;
  padding:12px; border-top:1px solid var(--line-2); flex-wrap:wrap}
.xpager button{min-width:32px; height:32px; padding:0 8px; cursor:pointer;
  font-family:var(--f-mono); font-size:13px; color:var(--ink-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px}
.xpager button:hover:not(:disabled){color:var(--ink); border-color:var(--brand-ink)}
.xpager button[aria-current="true"]{background:var(--brand-ink); color:#fff; border-color:var(--brand-ink)}
.xpager button:disabled{opacity:.35; cursor:default}

/* The X table styles assume column 1 is a rank and column 2 the name. The
   weekly issue reuses the shared row() helper, which puts the name first, so
   every alignment rule lands one column early - the name ends up centred and
   the fixed layout squeezes it under the figure beside it. This restores the
   name to column 1 and lets the table size itself, since with six columns
   there is no width pressure to fix. */
.xtable.name-first{table-layout:auto}
.xtable.name-first thead th:first-child,
.xtable.name-first tbody td:first-child{text-align:left; width:auto; padding-left:14px}
.xtable.name-first thead th:nth-child(2),
.xtable.name-first tbody td:nth-child(2){text-align:center; padding-left:6px}
/* Auto layout sizes these itself; the fixed-layout widths above would fight it. */
.xtable.name-first thead th, .xtable.name-first tbody td{width:auto}
@media (max-width:420px){
  /* Auto layout will happily size past the viewport when the content demands
     it, and these tables sit directly in a panel rather than a scroller - so
     below this width they go fixed and the name column takes the slack. */
  .xtable.name-first{table-layout:fixed}
  .xtable.name-first thead th:first-child,
  .xtable.name-first tbody td:first-child{width:44%; white-space:normal; overflow-wrap:anywhere}
  .xtable.name-first tbody td{font-size:12.5px; padding:9px 4px}
}