/* =========================================================================
   plentyofstocks — "Financial Intelligence" reskin
   Drop-in replacement for /assets/index.css. No JS changes required.
   Targets the class names your shipped bundle already renders.
   Token NAMES are preserved (your bundle references some inline); only
   their VALUES change. New tokens are added below the originals.
   ========================================================================= */

:root{
  /* ---- ink palette (was pure black) ---- */
  --bg-primary:   #0C0E12;   /* app background — blue-black, warmer than #000 */
  --bg-secondary: #101319;
  --bg-tertiary:  #14171F;
  --bg-hover:     rgba(255,255,255,.025);
  --bg-card:      rgba(255,255,255,.03);

  /* ---- text ---- */
  --text-primary:   #ECEEF2;
  --text-secondary: #9AA1AC;
  --text-tertiary:  #616875;

  /* ---- signal colours (used inline by the bundle for sentiment) ---- */
  --accent-green: #45DE9A;   /* bullish */
  --accent-red:   #F26D6D;   /* bearish */
  --accent-amber: #E4C98A;
  --accent-blue:  #7FB2FF;

  --border-subtle: rgba(255,255,255,.08);

  /* ---- type ---- */
  --font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:   "IBM Plex Mono", "SF Mono", Monaco, "Fira Code", ui-monospace, monospace;
  --font-serif:  "Newsreader", Georgia, "Times New Roman", serif;

  /* ---- spacing / radius / motion (unchanged) ---- */
  --spacing-xs:4px; --spacing-sm:8px; --spacing-md:12px; --spacing-lg:16px;
  --spacing-xl:24px; --spacing-2xl:32px; --spacing-3xl:48px;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --transition-fast:.1s ease-in-out; --transition-base:.2s ease-in-out; --transition-slow:.3s ease-in-out;

  /* ---- NEW: editorial furniture ---- */
  --ink-2:      #101319;
  --surface:    #14171F;
  --hairline-2: rgba(255,255,255,.13);
  --brass:      #C9A867;   /* wordmark, active tab, datelines, progress */
  --brass-2:    #E4C98A;
  --brass-bg:   rgba(201,168,103,.10);
  --bull-bg:    rgba(69,222,154,.10);
  --bear-bg:    rgba(242,109,109,.10);
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ============ RESET / BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%}
/* MOBILE FIX: backstop against any single element pushing the page wider
   than the viewport (the cause of the "distorted" iPhone rendering).
   overflow-x:clip avoids creating a scroll container (keeps position:sticky
   working); hidden is the fallback for older Safari. */
html,body{overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto}
iframe{max-width:100%}
body{
  background-color:var(--bg-primary);
  background-image:radial-gradient(120% 80% at 50% -8%, rgba(201,168,103,.05), transparent 60%);
  color:var(--text-primary);
  font-family:var(--font-family);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#root{width:100%;min-height:100%}

h1{font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
h2{font-family:var(--font-serif);font-size:24px;font-weight:500;line-height:1.25;letter-spacing:-.012em;color:var(--text-primary)}
h3{font-family:var(--font-serif);font-size:19px;font-weight:500;line-height:1.35;letter-spacing:-.008em}
p{line-height:1.6;color:var(--text-secondary)}

button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;transition:all var(--transition-base)}
button:focus{outline:none}
button:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}
button:disabled{opacity:.5;cursor:not-allowed}
a{color:inherit;text-decoration:none;transition:opacity var(--transition-base)}
a:hover{opacity:.92}
::selection{background:rgba(201,168,103,.28)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

.container{max-width:860px;margin:0 auto;padding:0 var(--spacing-xl)}
.glass{background:rgba(255,255,255,.02);border:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--spacing-lg);transition:all var(--transition-base)}
.card:hover{background:rgba(255,255,255,.05);border-color:var(--hairline-2)}

/* ============ LAYOUT / HEADER ============ */
.layout{width:100%;min-height:100vh;min-height:100dvh;background:var(--bg-primary);display:flex;flex-direction:column}

.app-header{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(var(--bg-primary),var(--bg-primary) 72%, rgba(12,14,18,.9));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
  padding:var(--spacing-lg) 0;
}
.header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2xl)}

.logo{flex-shrink:0}
.logo h1{
  font-family:var(--font-family);font-size:19px;font-weight:600;letter-spacing:-.02em;
  color:var(--text-primary);margin-bottom:var(--spacing-xs);
}
.logo p{
  font-family:var(--font-mono);font-size:10px;color:var(--brass);
  text-transform:uppercase;letter-spacing:.2em;
}

.tab-navigation{display:flex;gap:var(--spacing-2xl);flex:1}
.tab-button{
  position:relative;display:flex;align-items:center;gap:var(--spacing-sm);
  padding:var(--spacing-sm) 0;color:var(--text-tertiary);
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  border-radius:0;transition:color var(--transition-base);
}
.tab-button:hover{color:var(--text-secondary);background:none}
.tab-button.active{color:var(--text-primary);background:none}
.tab-button.active::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--spacing-lg) - 1px);
  height:2px;background:var(--brass);border-radius:2px 2px 0 0;
}
.tab-button svg{transition:transform var(--transition-base);opacity:.85}
.tab-button.active svg{opacity:1}
.tab-button:hover svg{transform:scale(1.04)}

.app-main{min-height:calc(100vh - 60px);animation:fadeIn .3s ease-in-out}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}

/* ============ NEWS — LEAD (hero-card) ============ */
.hero-card{
  display:block;position:relative;margin:var(--spacing-xl) 0;
  padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
  background:linear-gradient(180deg,var(--surface),var(--ink-2));
  border:1px solid var(--border-subtle);border-left:3px solid var(--brass);
  border-radius:var(--radius-lg);color:inherit;text-decoration:none;overflow:hidden;
  transition:transform var(--transition-base),border-color var(--transition-base);
}
.hero-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 100% 0%, rgba(201,168,103,.06), transparent 55%);
}
.hero-card:hover{transform:translateY(-1px);border-top-color:var(--hairline-2);border-right-color:var(--hairline-2);border-bottom-color:var(--hairline-2)}
.hero-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-md);gap:var(--spacing-md)}
.hero-card-badges{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;align-items:center}
.hero-card-time{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);white-space:nowrap;letter-spacing:.04em}
.hero-card-headline{
  font-family:var(--font-serif);font-size:26px;font-weight:500;line-height:1.22;
  letter-spacing:-.01em;margin-bottom:var(--spacing-md);color:var(--text-primary);
}
.hero-card-snippet{
  font-size:15px;line-height:1.55;color:var(--text-secondary);margin-bottom:var(--spacing-md);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-card-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}

/* ============ NEWS — FEED (news-row) ============ */
.news-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);
  padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
  border-bottom:1px solid var(--border-subtle);
  border-left:2px solid rgba(125,133,147,.22);   /* neutral ledge; see JS note for colour */
  color:inherit;text-decoration:none;
  transition:background var(--transition-base),border-left-color var(--transition-base);
}
.news-row:hover{background-color:var(--ink-2);border-left-color:var(--brass)}
.news-row-content{flex:1;min-width:0}
.news-row-meta{
  display:flex;align-items:center;gap:6px;margin-bottom:var(--spacing-sm);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);letter-spacing:.03em;
}
.news-row-headline{
  font-family:var(--font-serif);font-size:16px;font-weight:500;line-height:1.35;
  letter-spacing:-.004em;color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* MOBILE FIX: long unbroken strings (URLs, tickers-in-headlines) can't
   force the page wider than the screen. */
.hero-card-headline,.news-row-headline,.hero-card-snippet{overflow-wrap:break-word;word-break:break-word}
.ticker-link{
  color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;font-weight:600;
  padding:0;background:none;border:none;cursor:pointer;text-decoration:none;
  transition:color var(--transition-base);
}
.ticker-link:hover{color:var(--brass-2)}
.separator{opacity:.3}

/* ============ BADGES ============ */
.badge{
  padding:4px 10px;border-radius:100px;font-family:var(--font-mono);
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);
  cursor:pointer;transition:all var(--transition-base);
}
.badge:hover{background:rgba(255,255,255,.06)}
.badge-ticker{color:var(--brass-2);border-color:var(--brass-bg);background:var(--brass-bg)}
.badge-ticker:hover{background:rgba(201,168,103,.16)}
.badge-breaking{
  color:var(--accent-red);border-color:rgba(242,109,109,.35);background:var(--bear-bg);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}

/* ============ SENTIMENT (colour set inline by bundle → matches tokens) ============ */
.source{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-tertiary);letter-spacing:.03em}
.sentiment{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sentiment .dot{font-size:6px}
.sentiment-badge{
  display:flex;align-items:center;gap:5px;padding:4px 10px;
  border:1px solid currentColor;border-radius:100px;background:rgba(255,255,255,.02);
  font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;flex-shrink:0;
}
.sentiment-badge .dot{font-size:5px}

/* ============ DISCOVER ============ */
.discover-page{background-color:var(--bg-primary);min-height:calc(100vh - 60px);padding-bottom:var(--spacing-3xl)}
.discover-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg);padding:var(--spacing-2xl) 0 var(--spacing-lg)}
.discover-header h2{font-family:var(--font-serif)}
.discover-progress{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--brass);letter-spacing:.08em}
.progress-bar{height:2px;background:var(--border-subtle);margin:var(--spacing-md) 0 var(--spacing-2xl) 0;border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--brass);transition:width .4s var(--ease)}
.discover-content{padding:var(--spacing-lg) 0}
.discover-card-container{display:flex;justify-content:center;align-items:center;min-height:500px;padding:var(--spacing-2xl) 0}
.discover-card-container>div{width:100%;max-width:560px;animation:slideIn .3s ease-in-out}
@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.discover-card{
  border:1px solid var(--border-subtle);border-radius:14px;
  background:linear-gradient(180deg,var(--surface),var(--ink-2));
  padding:var(--spacing-2xl);display:flex;flex-direction:column;gap:var(--spacing-xl);height:100%;
  transition:all var(--transition-base);
}
.discover-card:hover{border-color:var(--hairline-2);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.discover-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg)}
.ticker-badge{
  display:inline-block;padding:5px 10px;font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.03em;color:var(--brass-2);background:var(--brass-bg);
  border:1px solid var(--brass-bg);border-radius:var(--radius-md);transition:all var(--transition-base);
}
.discover-card:hover .ticker-badge{background:rgba(201,168,103,.16)}
.discover-card-company{font-family:var(--font-serif);font-size:23px;font-weight:500;line-height:1.2;letter-spacing:-.01em;margin-bottom:3px}
.discover-card-sector{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em}
.discover-card-bio{flex:1;font-size:14px;line-height:1.6;color:var(--text-secondary)}

.discover-signal-chips{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}
.chip{
  padding:4px 11px;border-radius:100px;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.02em;white-space:nowrap;border:1px solid;transition:all var(--transition-base);
}
.chip-green{color:var(--accent-green);border-color:rgba(69,222,154,.3);background:var(--bull-bg)}
.chip-amber{color:var(--brass-2);border-color:var(--brass-bg);background:var(--brass-bg)}
.chip-blue{color:var(--accent-blue);border-color:rgba(127,178,255,.3);background:rgba(127,178,255,.1)}
.chip-red{color:var(--accent-red);border-color:rgba(242,109,109,.3);background:var(--bear-bg)}
.chip-purple{color:#B79CFF;border-color:rgba(183,156,255,.3);background:rgba(183,156,255,.1)}

.discover-card-actions{display:flex;gap:var(--spacing-md);padding-top:var(--spacing-lg);border-top:1px solid var(--border-subtle)}
.action-button{
  flex:1;padding:11px var(--spacing-lg);border-radius:10px;font-size:13px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);
  cursor:pointer;transition:all var(--transition-base);
}
.action-button:hover{background:rgba(255,255,255,.06);border-color:var(--hairline-2);transform:translateY(-1px)}
.action-skip{color:var(--text-tertiary);background:none}
.action-skip:hover{color:var(--text-secondary)}
.action-add{background:var(--bull-bg);border-color:rgba(69,222,154,.35);color:var(--accent-green)}
.action-add:hover{background:rgba(69,222,154,.18)}

/* ============ RESPONSIVE ============ */
@media (max-width:768px){
  :root{font-size:13px}
  h1{font-size:22px} h2{font-size:20px}
  .container{padding:0 var(--spacing-lg)}
  .header-content{flex-direction:column;gap:var(--spacing-lg);align-items:flex-start}
  /* MOBILE FIX (primary): the tab row is wider than the screen once all
     tabs are present. Instead of overflowing the page (which distorted the
     whole layout on iPhone), the row itself scrolls horizontally, with the
     scrollbar hidden — standard mobile tab-bar pattern. */
  .tab-navigation{
    width:100%;gap:var(--spacing-xl);
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tab-navigation::-webkit-scrollbar{display:none}
  .tab-button{flex-shrink:0;white-space:nowrap}
  /* underline sits inside the scroll container now, so give it room
     (overflow:auto clips anything hanging below the row) */
  .tab-navigation{padding-bottom:8px}
  .tab-button.active::after{bottom:2px}
  .hero-card,.news-row{padding:var(--spacing-md) var(--spacing-lg)}
  .hero-card-headline{font-size:21px}
  .hero-card-snippet{font-size:13px}
  .news-row-headline{font-size:14px}
  .discover-header{flex-direction:column;gap:var(--spacing-md)}
  .discover-card{padding:var(--spacing-xl);gap:var(--spacing-lg)}
  .discover-card-company{font-size:19px}
  .discover-card-bio{font-size:13px}
  .action-button{font-size:12px;padding:var(--spacing-sm) var(--spacing-md)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============ ADDED: sentiment ledges (app.js now emits .bull/.bear/.neutral) ============ */
.news-row.bull,.hero-card.bull{border-left-color:rgba(69,222,154,.35)}
.news-row.bear,.hero-card.bear{border-left-color:rgba(242,109,109,.35)}
.news-row.neutral{border-left-color:rgba(125,133,147,.22)}
.hero-card.bull{border-left-color:var(--accent-green)}
.hero-card.bear{border-left-color:var(--accent-red)}
.news-row.bull:hover{border-left-color:var(--accent-green)}
.news-row.bear:hover{border-left-color:var(--accent-red)}
.news-row.neutral:hover{border-left-color:var(--brass)}

/* ============ ADDED: signals tape (mounted outside React by index.html) ============ */
body.has-tape .app-header{top:34px}          /* header sticks below the tape */
.pos-tape{
  position:sticky;top:0;z-index:101;height:34px;
  background:var(--bg-primary);border-bottom:1px solid var(--border-subtle);
  overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.pos-tape-track{display:inline-flex;gap:var(--spacing-xl);white-space:nowrap;padding-left:var(--spacing-xl);animation:pos-marquee 3600s linear infinite;will-change:transform}
.pos-tape:hover .pos-tape-track{animation-play-state:paused}
@keyframes pos-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pos-tick{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;cursor:pointer}
.pos-tick:hover .s{color:var(--brass-2)}
.pos-tick .s{color:var(--text-secondary);font-weight:500}
.pos-tick .d{width:5px;height:5px;border-radius:50%;background:var(--brass)}
.pos-tick .d.green{background:var(--accent-green)} .pos-tick .d.red{background:var(--accent-red)}
.pos-tick .d.amber{background:var(--brass-2)} .pos-tick .d.blue{background:var(--accent-blue)} .pos-tick .d.purple{background:#B79CFF}
@media (prefers-reduced-motion:reduce){.pos-tape-track{animation:none}}