/* ============================================================
   bitStock — UI stylesheet
   Light by default; dark via [data-theme="dark"] on <html>.
   Class names and selectors match the markup in index.html,
   so changes here are purely visual.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#fafaf9;           --bg-soft:#f5f5f4;
  --card:#ffffff;         --card-soft:#fafaf9;
  --line:#e7e5e4;         --line-soft:#f0efed;

  /* text */
  --ink:#1c1917;          --muted:#78716c;
  --muted-2:#a8a29e;

  /* brand / accent (Bangladesh green preserved) */
  --accent:#006a4e;
  --accent-hover:#005a42;
  --accent-soft:#ecfdf5;
  --accent-deep:#022c22;

  /* semantics */
  --up:#15803d;           --up-soft:#dcfce7;
  --down:#b91c1c;         --down-soft:#fee2e2;
  --warn:#a16207;         --warn-soft:#fef9c3;

  /* shape & motion */
  --radius:14px;          --radius-sm:9px;
  --shadow:0 1px 2px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.05);
  --shadow-lg:0 1px 2px rgba(28,25,23,.04), 0 16px 40px rgba(28,25,23,.08);

  /* font */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Bengali",sans-serif;

  /* chart-specific (re-derived in JS for Chart.js) */
  --chart-ink:#1c1917;
  --chart-muted:#78716c;
  --chart-grid:#e7e5e4;

  /* legacy aliases — kept so the real app.js orchestrator can use
     older names (--green/--red/--yellow/--brand/--ink/--muted/--line/--bg/--card)
     without renames. Aliased to literal hex on purpose: app.js writes
     these into inline style="color: var(--ink)" strings, so transitive
     var() aliases would risk drift. */
  --green:#15803d;   --red:#b91c1c;   --yellow:#a16207;
  --brand:#006a4e;   --brand2:#b91c1c;
  --ink:#1c1917;     --muted:#78716c; --line:#e7e5e4;
  --bg:#fafaf9;      --card:#ffffff;
}

/* Dark theme overrides — applied to <html data-theme="dark"> */
[data-theme="dark"]{
  --bg:#0c0a09;           --bg-soft:#14110f;
  --card:#1c1917;         --card-soft:#211e1b;
  --line:#292524;         --line-soft:#1f1b18;

  --ink:#fafaf9;          --muted:#a8a29e;
  --muted-2:#78716c;

  --accent:#10b981;
  --accent-hover:#34d399;
  --accent-soft:#064e3b;
  --accent-deep:#022c22;

  --up:#4ade80;           --up-soft:#052e16;
  --down:#f87171;         --down-soft:#450a0a;
  --warn:#fbbf24;         --warn-soft:#422006;

  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.5);

  --chart-ink:#fafaf9;
  --chart-muted:#a8a29e;
  --chart-grid:#292524;

  /* legacy aliases (dark) */
  --green:#4ade80;   --red:#f87171;   --yellow:#fbbf24;
  --brand:#10b981;   --brand2:#f87171;
  --ink:#fafaf9;     --muted:#a8a29e; --line:#292524;
  --bg:#0c0a09;      --card:#1c1917;
}

/* color-scheme — flip native form controls, scrollbars, default input bg */
html{color-scheme:light}
[data-theme="dark"],[data-theme="dark"] body,html.dark,html.dark body,body.dark{color-scheme:dark}

/* body.dark selector — higher specificity than [data-theme="dark"] alone.
   Acts as a fallback if any rule was overriding the variable cascade. */
body.dark{background:var(--bg);color:var(--ink)}
[data-theme="dark"] body.dark{background:var(--bg)}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
html{transition:background-color .25s ease}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .15s ease, color .15s ease;
}
.hidden{display:none!important}

/* hide a stock card on user demand (analyzed-list 👁 toggle) */
.hidden-by-user{display:none!important}
.muted{color:var(--muted)} .small{font-size:.78rem}
h1,h2,h3{margin:0}
button{cursor:pointer;font:inherit;color:inherit}
ul{margin:.2rem 0;padding-left:18px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

::selection{background:var(--accent);color:#fff}

/* ===== keyframes ===== */
@keyframes bitFadeIn{from{opacity:0}to{opacity:1}}
@keyframes bitSlideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bitPulse{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes bitShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes bitSpin{to{transform:rotate(360deg)}}

/* ===== layout ===== */
/* ===== shared top header ===== */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  height:56px;padding:0 16px;background:var(--card);border-bottom:1px solid var(--line)}
.tb-left{display:flex;align-items:center;gap:8px}
.tb-burger{background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--ink);line-height:1;padding:4px 8px;border-radius:8px}
.tb-burger:hover{background:var(--bg-soft)}
.tb-brand img{height:34px;display:block}
.tb-nav{display:flex;gap:4px;margin-left:6px}
.tb-nav a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.9rem}
.tb-nav a:hover{background:var(--bg-soft);color:var(--ink)}
.tb-nav a.active{color:var(--accent);background:var(--accent-soft)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tb-act{background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:6px 11px;font-size:.82rem;font-weight:600;cursor:pointer;line-height:1}
.tb-act:hover{background:var(--line)}
.tb-user{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600}
.nav-overlay{position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.4);z-index:40}
.nav-overlay.hidden{display:none}

.app-layout{display:flex;min-height:calc(100vh - 56px)}

.sidebar{
  width:268px;flex:0 0 268px;
  background:var(--card);
  border-right:1px solid var(--line);
  padding:20px 18px;
  position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .25s ease,background-color .25s ease,border-color .25s ease;
}
.app-layout.nav-collapsed .sidebar{display:none}   /* desktop collapse */
.content{flex:1;min-width:0;padding:20px 22px}

/* ===== hero (homepage) ===== */
.hero-h{font-size:1.9rem;margin:6px 0 8px;color:var(--ink)}
.hero-sub{max-width:560px;margin:0 auto 16px;color:var(--muted);font-size:.95rem;line-height:1.5}
.hero-cta{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:11px 22px;font-weight:700;font-size:.95rem;cursor:pointer}
.hero-cta:hover{background:var(--accent-hover)}
.hero-pop{margin:26px auto 0;max-width:620px}
.hero-pop-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:10px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hero-foot{margin-top:22px;font-size:.78rem;color:var(--muted-2)}

/* ===== sidebar bits ===== */
.brand h1{font-size:1.15rem}
.brand-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.brand-name{margin:0;line-height:0}
.logo{height:40px;width:auto;display:block;transition:transform .2s ease}
.logo:hover{transform:translateY(-1px)}
.tagline{margin:.25rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.45}
.tagline strong{color:var(--down);font-weight:700}

/* header buttons (lang + theme) */
.icon-btn{
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:8px;
  padding:5px 10px;
  font-size:.78rem;
  font-weight:600;
  transition:background-color .15s ease,border-color .15s ease,transform .1s ease;
}
.icon-btn:hover{background:var(--line-soft)}
.icon-btn:active{transform:scale(.96)}
.lang-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.lang-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.theme-btn{font-size:.9rem;line-height:1}

/* search */
#searchForm{display:flex;flex-direction:column;gap:8px;position:relative}
#tickerInput{
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.95rem;
  background:var(--card);
  color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
#tickerInput::placeholder{color:var(--muted-2)}
#tickerInput:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
#analyzeBtn{
  background:var(--accent);
  color:#fff;
  border:0;
  padding:11px;
  border-radius:10px;
  font-weight:600;
  font-size:.92rem;
  transition:background-color .15s ease,transform .1s ease;
}
#analyzeBtn:hover{background:var(--accent-hover)}
#analyzeBtn:active{transform:scale(.98)}

/* ===== ticker typeahead ===== */
.typeahead{
  position:absolute;
  top:calc(100% - 4px); left:0; right:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:50;
  max-height:280px;
  overflow-y:auto;
  padding:4px;
}
.typeahead.hidden{display:none}
.ta-item{
  display:flex;align-items:baseline;gap:10px;
  width:100%;text-align:left;
  background:none;border:0;
  padding:8px 10px;border-radius:7px;
  font:inherit;color:var(--ink);
  cursor:pointer;
  transition:background-color .1s ease;
}
.ta-item:hover,.ta-item.is-active{background:var(--line-soft)}
.ta-ticker{font-weight:700;color:var(--accent);min-width:80px;flex-shrink:0}
.ta-name{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.side-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
  font-weight:700;
  margin-top:6px;
}

/* segmented mode tabs */
.mode-tabs{
  display:flex;flex-wrap:wrap;gap:5px;
  background:var(--bg-soft);
  padding:4px;border-radius:10px;
}
.mode-tabs button{
  background:transparent;border:0;padding:6px 11px;border-radius:7px;
  color:var(--muted);font-size:.8rem;font-weight:500;
  transition:background-color .15s ease,color .15s ease;
}
.mode-tabs button:hover{color:var(--ink)}
.mode-tabs button.active{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}

.quick-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  background:var(--bg-soft);border:1px solid var(--line);padding:6px 11px;
  border-radius:8px;font-weight:600;color:var(--accent);font-size:.8rem;
  transition:background-color .15s ease,transform .1s ease;
}
.chip:hover{background:var(--accent-soft)}
.chip:active{transform:scale(.97)}

/* market phase */
.market-phase{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 11px;
  font-size:.8rem;font-weight:600;
  transition:background-color .25s ease;
}
.market-phase .mp-icon{font-size:1.3rem}

.side-disclaimer{
  margin-top:auto;
  background:var(--warn-soft);
  color:var(--warn);
  padding:9px 11px;border-radius:10px;
  font-size:.72rem;line-height:1.5;
}

/* ===== states ===== */
.loading,.empty-state{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 20px;
  text-align:center;
  color:var(--muted);
  animation:bitFadeIn .35s ease;
  transition:background-color .25s ease,border-color .25s ease;
}
.empty-state h2{font-size:1.6rem;color:var(--ink);margin-bottom:8px;font-weight:700}
.empty-state p{max-width:420px;margin:0 auto;line-height:1.6}

/* ===== analyzed-ticker chips ===== */
.achip{
  display:inline-flex;align-items:stretch;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  font-size:.78rem;
  transition:background-color .15s ease,border-color .15s ease;
}
.achip:hover{background:var(--line-soft);border-color:var(--accent)}
.achip-go{
  background:none;border:0;padding:5px 9px;color:var(--accent);
  font-weight:600;font-family:inherit;font-size:inherit;line-height:1.3;
}
.achip-go:hover{background:var(--accent-soft)}
.achip-hide,.achip-rm{
  background:none;border:0;border-left:1px solid var(--line);
  padding:4px 7px;font-size:.85rem;line-height:1.2;cursor:pointer;
  transition:background-color .12s ease,color .12s ease;
}
.achip-hide{color:var(--muted);font-size:.9rem}
.achip-hide:hover{background:var(--accent-soft);color:var(--accent)}
.achip-rm{color:var(--down);font-weight:700;font-size:.95rem}
.achip-rm:hover{background:var(--down-soft)}
.achip.is-hidden{opacity:.45}
.achip.is-hidden .achip-go{text-decoration:line-through}

/* ===== per-card simulator input ===== */
.sim-amount-wrap{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:4px;
}
.sim-amount-label{font-size:.78rem;color:var(--muted);font-weight:500}
input.sim-amount{
  width:120px;
  padding:6px 9px;
  font:600 .92rem var(--font);
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:7px;
  text-align:right;
  -moz-appearance:textfield;
  transition:border-color .12s ease,box-shadow .12s ease;
}
input.sim-amount::-webkit-outer-spin-button,
input.sim-amount::-webkit-inner-spin-button{opacity:.5}
input.sim-amount:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}

/* generic card surface — used by app.js's error fallback */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  color:var(--ink);
  margin-bottom:14px;
  box-shadow:var(--shadow);
  transition:background-color .25s ease,border-color .25s ease;
}
.card code{background:var(--bg-soft);padding:1px 6px;border-radius:5px;font-size:.85em}

/* skeleton shimmer blocks */
.skeleton-stack{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.skeleton-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  height:120px;
  position:relative;
  overflow:hidden;
}
.skeleton-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--line-soft) 50%,transparent);
  background-size:400px 100%;
  animation:bitShimmer 1.4s linear infinite;
}

/* ===== stock card ===== */
.stock-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:18px;
  overflow:hidden;
  animation:bitSlideUp .45s cubic-bezier(.16,1,.3,1) both;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .2s ease;
}
.stock-card:hover{box-shadow:var(--shadow-lg)}

/* card summary header.
   NOTE: previously this was position:sticky;top:0 — it caused each card's
   title to float to the viewport top and visually overlap the comparison
   table (and the previous card's content) when scrolling a long page with
   10+ tickers. Removed sticky; the header now scrolls naturally with its card. */
.sc-head{
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-areas:"id price verdict" "tags tags tags";
  gap:10px 16px;align-items:center;
  padding:16px 20px;
  background:var(--card);
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease,border-color .25s ease;
}
.sc-id{grid-area:id}
.sc-price{grid-area:price;text-align:right}
.sc-verdict{grid-area:verdict;text-align:right}
.sc-tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:6px}
.sc-id-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-ticker{font-size:1.4rem;font-weight:700;letter-spacing:-.01em}
.sc-name{font-size:.78rem;display:block;margin-top:2px}
.sc-ltp{font-size:1.2rem;font-weight:700;display:block;letter-spacing:-.01em}
.sc-change{font-size:.82rem;font-weight:600}
.up{color:var(--up)}
.down{color:var(--down)}
.flat{color:var(--muted)}

.verdict-badge{
  font-size:.95rem;font-weight:700;
  padding:6px 16px;border-radius:999px;
  display:inline-block;
  border:1px solid transparent;
  transform-origin:center;
  animation:bitPulse .45s cubic-bezier(.16,1,.3,1) both;
}
.verdict-badge.BUY{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.verdict-badge.HOLD{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.verdict-badge.SELL{background:var(--down-soft);color:var(--down);border-color:var(--down)}

.conf{display:flex;align-items:center;gap:6px;margin-top:6px;justify-content:flex-end}
.conf-bar{width:84px;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.conf-fill{height:100%;background:var(--accent);transition:width .8s cubic-bezier(.16,1,.3,1)}
.conf-pct{font-size:.72rem;font-weight:600;color:var(--muted)}

.sc-tags span{
  background:var(--bg-soft);
  padding:4px 10px;border-radius:7px;
  font-size:.74rem;font-weight:600;color:var(--ink);
  border:1px solid var(--line);
}
.stars{color:#f59e0b;letter-spacing:1px}

/* ===== in-simple-words summary ===== */
.sc-summary{
  margin:14px 20px 6px;
  padding:12px 14px;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:8px;
  font-size:.88rem;line-height:1.55;
  color:var(--ink);
  transition:background-color .25s ease;
}
.sum-label{font-weight:700;color:var(--accent)}

/* ===== dashboard tiles ===== */
.dash{
  display:grid;
  grid-template-columns:1fr;   /* mobile-first: single column by default */
  gap:14px;
  padding:18px 20px;
}
/* widen to multi-column only on larger screens (≥1024px). Below that the
   mobile-first 1fr stack takes over — see the (max-width:1023px) block below. */
@media(min-width:1024px){
  .dash{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));padding:18px 20px}
}
.tile{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:var(--card-soft);
  min-width:0;
  transition:opacity .25s,box-shadow .2s ease,transform .2s ease,background-color .25s ease,border-color .25s ease;
}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tile.dim{opacity:.4}
.tile.dim:hover{opacity:1}
.tile.focus{box-shadow:0 0 0 2px var(--accent) inset;background:var(--accent-soft)}
.tile h3{
  font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;
  margin-bottom:8px;font-weight:700;
}
.gauge-tile,.sim-tile{text-align:center}
.gauge-tile{display:flex;flex-direction:column;align-items:center}
.gauge-label{font-weight:700;margin-top:4px;font-size:.95rem}
canvas{max-width:100%}

/* bars */
.bars{display:grid;gap:7px}
.bar-row{
  display:grid;grid-template-columns:64px 1fr 34px;
  align-items:center;gap:10px;font-size:.78rem;
}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:var(--up);width:0;transition:width .9s cubic-bezier(.16,1,.3,1)}
.bar-row.risk .bar-fill{background:var(--down)}
.bar-val{text-align:right;font-weight:600;color:var(--ink)}

/* valuation track */
.fv-track{
  position:relative;height:14px;
  background:linear-gradient(90deg,var(--down-soft),var(--warn-soft),var(--up-soft));
  border-radius:99px;
  margin:12px 0 10px;
  border:1px solid var(--line);
}
.fv-marker{position:absolute;top:-5px;width:4px;height:24px;border-radius:2px;transition:left .6s ease}
.fv-marker.price{background:var(--ink)}
.fv-marker.fair{background:var(--accent)}
.fv-legend{font-size:.74rem;color:var(--muted);display:flex;gap:10px;align-items:center}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
.dot.price{background:var(--ink)} .dot.fair{background:var(--accent)}
.fv-verdict{font-weight:700;margin-top:8px;font-size:.85rem}

/* lists */
.reason-list li,.risk-list li,.why-list li{font-size:.82rem;margin:.25rem 0;line-height:1.55}
.risk-list li{color:var(--down)}

/* simulator */
.sim-tile{grid-column:span 2}
.sim-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;text-align:center;margin-top:6px}
.sim-num{display:block;font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.sim-grid label{font-size:.66rem;color:var(--muted);display:block;margin-top:2px}
.sim-note{font-size:.7rem;color:var(--warn);margin:.5rem 0 0;font-weight:600;text-align:center}

/* beginner toggle */
.beginner-toggle{
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--ink);cursor:pointer;
  background:var(--bg-soft);
  padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);
  transition:background-color .15s ease;
}
.beginner-toggle:hover{background:var(--line-soft)}
.beginner-toggle input{accent-color:var(--accent);width:15px;height:15px}

/* beginner mode hides advanced tiles — unchanged */
body.beginner #results .tile[data-cat="core"],
body.beginner #results .tile[data-cat="metrics"],
body.beginner #results .tile[data-cat="figures"],
body.beginner #results .tile[data-cat="holding"]{display:none}

/* learn panel + standards panel */
.standards-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 20px;
  margin-bottom:18px;
  overflow-x:auto;
  animation:bitFadeIn .3s ease;
  transition:background-color .25s ease,border-color .25s ease;
}
.standards-panel h4{margin:14px 0 6px;font-size:.95rem}
.glossary{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.86rem}
.glossary dt{font-weight:700;color:var(--accent)}
.glossary dd{margin:0;color:var(--ink)}
.how-start{font-size:.88rem;margin:.3rem 0;padding-left:22px}
.how-start li{margin:.4rem 0;line-height:1.55}

/* compare winner */
table.compare td.win{background:var(--accent-soft);font-weight:700;color:var(--accent)}
.pick{background:var(--accent);color:#fff;font-size:.6rem;padding:2px 7px;border-radius:6px;vertical-align:middle}

/* watchlist + standards button */
.wl-chip{
  display:inline-flex;align-items:center;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  font-size:.8rem;
  transition:background-color .15s ease;
}
.wl-chip:hover{background:var(--line-soft)}
.wl-go{background:none;border:0;padding:5px 4px 5px 9px;color:var(--accent);font-weight:600}
.wl-rm{background:none;border:0;padding:4px 8px;color:var(--down);font-weight:700;cursor:pointer;line-height:1;font-size:1rem}
.standards-btn{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 11px;
  color:var(--ink);
  font-weight:600;font-size:.82rem;text-align:left;
  transition:background-color .15s ease,transform .1s ease;
}
.standards-btn:hover{background:var(--line-soft)}
.standards-btn:active{transform:scale(.99)}

/* shariah badge */
.shariah-badge{font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.shariah-badge.compliant{background:var(--accent-soft);color:var(--accent)}
.shariah-badge.noncompliant{background:var(--down-soft);color:var(--down)}
.shariah-badge.unclassified{background:var(--bg-soft);color:var(--muted)}

/* favorite star */
.fav-btn{
  background:none;border:0;
  font-size:1.4rem;line-height:1;padding:0;
  color:var(--muted-2);cursor:pointer;
  transition:color .15s ease,transform .15s ease;
}
.fav-btn:hover{color:var(--warn);transform:scale(1.1)}
.fav-btn.on{color:#f59e0b}

/* standards panel */
.std-head{display:flex;justify-content:space-between;align-items:center}
.std-head h3{font-size:1rem;font-weight:700}
.std-table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:520px;margin-top:10px}
.std-table th,.std-table td{padding:8px 11px;border-bottom:1px solid var(--line);text-align:left}
.std-table thead th{background:var(--bg-soft);font-weight:700}
.std-table td.metric{font-weight:600;color:var(--ink)}
.std-table .g{color:var(--up)} .std-table .y{color:var(--warn)} .std-table .r{color:var(--down)}
.std-table tbody tr{cursor:help;transition:background-color .12s ease}
.std-table tbody tr:hover{background:var(--bg-soft)}

/* comparison table */
.compare-wrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 20px;
  margin-bottom:18px;
  animation:bitFadeIn .3s ease;
  transition:background-color .25s ease,border-color .25s ease;
}
.compare-wrap h3{font-size:.92rem;margin-bottom:10px;font-weight:700}
.compare-foot{margin:8px 0 0}
/* Only the table scrolls horizontally — the heading and footer stay put. */
.compare-scroll{overflow-x:auto}
/* NOTE: must be `border-collapse: separate` for `position: sticky` on <td>/<th>
   to work consistently. With `collapse`, browsers (Chrome/Edge/Firefox) lose
   the cell bounding box and sticky cells don't track scroll — causing the
   GP cell to appear left of the metric column when the table is scrolled.
   We re-add the row borders via `border-bottom` on each cell. */
table.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem;min-width:420px}
table.compare th,table.compare td{padding:8px 11px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
table.compare thead th{background:var(--accent);color:#fff;font-weight:700}
table.compare thead th:first-child{text-align:left}
table.compare td.metric{text-align:left;font-weight:600;color:var(--muted)}
table.compare tbody tr:nth-child(odd){background:var(--card-soft)}

/* freeze first column so the metric label stays visible while scrolling
   right through many tickers (10+). Sticky on the scroll container
   (.compare-wrap has overflow-x:auto) + solid background to mask
   the content sliding underneath. A right-edge shadow signals to the
   reader that adjacent columns are hidden under the frozen edge. */
table.compare thead th:first-child,
table.compare td.metric{
  position:sticky;
  left:0;
  z-index:3;
  /* subtle separator so the frozen column reads as a raised edge */
  box-shadow:6px 0 8px -6px rgba(0,0,0,.18);
}
table.compare thead th:first-child{
  /* thead already paints accent; force a solid left-side background so the
     ticker columns don't bleed through when scrolled. */
  background:var(--accent);
}
table.compare td.metric{
  background:var(--card);
}
table.compare tbody tr:nth-child(odd) td.metric{
  background:var(--card-soft);
}

/* tooltips — floating element on <body> */
[data-tip]{cursor:help}
#appTip{
  position:fixed;z-index:9999;
  background:var(--ink);color:var(--bg);
  padding:10px 13px;border-radius:8px;
  font-size:.74rem;font-weight:400;line-height:1.5;
  max-width:260px;white-space:normal;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  pointer-events:none;
  transition:opacity .12s ease;
}
#appTip.hidden{opacity:0;visibility:hidden}
#appTip .tip-std{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);font-size:.7rem;color:rgba(255,255,255,.7)}

/* key figures + metrics grids */
.figures-grid,.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 11px}
.figures-grid div,.metrics-grid div{min-width:0}
.figures-grid label,.metrics-grid label{
  display:block;font-size:.64rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.25px;font-weight:600;
}
.figures-grid span,.metrics-grid span{
  font-weight:600;font-size:.84rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
  margin-top:1px;
}
.metrics-grid .good span{color:var(--up)}
.metrics-grid .mid span{color:var(--warn)}
.metrics-grid .bad span{color:var(--down)}
.metrics-grid .good label::after{content:" ●";color:var(--up);font-size:.6rem}
.metrics-grid .bad label::after{content:" ●";color:var(--down);font-size:.6rem}

/* share holding */
.holding-grid{display:grid;gap:7px}
.hold-row{
  display:grid;grid-template-columns:78px 1fr 46px;
  align-items:center;gap:10px;font-size:.78rem;
}
.hold-bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.hold-fill{height:100%;background:var(--accent);width:0;transition:width .9s cubic-bezier(.16,1,.3,1)}
.hold-row span{text-align:right;font-weight:600;color:var(--ink)}

/* dividend grid */
.div-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 10px}
.div-grid label{display:block;font-size:.66rem;color:var(--muted);font-weight:600}
.div-grid span{font-weight:600;font-size:.84rem;color:var(--ink)}

/* ===== responsive ===== */
/* Single-column stack applies on every viewport up to and including
   1023px (most phones + portrait tablets). The desktop multi-column
   grid kicks in at 1024px — see the (min-width:1024px) block above. */
@media(max-width:1023px){
  .app-layout{flex-direction:column}
  /* off-canvas drawer covers full height (header may scroll on mobile) */
  .sidebar{
    position:fixed;top:0;left:0;width:284px;max-width:85vw;height:100vh;z-index:60;
    transform:translateX(-100%);box-shadow:2px 0 24px rgba(0,0,0,.25);
    border-right:1px solid var(--line);border-bottom:0;
  }
  .app-layout.nav-open .sidebar{transform:translateX(0)}
  .nav-overlay{inset:0;z-index:55}

  /* header: static + wraps, never horizontal-scroll */
  .topbar{position:static;flex-wrap:wrap;height:auto;min-height:52px;padding:8px 10px;gap:6px}
  .topbar .tb-brand img{height:28px}
  .tb-nav{margin-left:2px}
  .tb-nav a{padding:5px 9px;font-size:.82rem}
  .tb-right{gap:5px}
  .tb-act{padding:5px 9px;font-size:.78rem}

  #analyzeBtn{width:100%}           /* button fills the column under the ticker input */
  #tickerInput{font-size:16px}      /* prevent iOS zoom on focus */
  .mode-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mode-tabs button{white-space:nowrap;flex:0 0 auto}
  .side-disclaimer{margin-top:8px}

  /* stock cards: full top-down stacking */
  .sc-head{grid-template-columns:1fr;grid-template-areas:"id" "price" "verdict" "tags";gap:8px;padding:14px 16px}
  .sc-price,.sc-verdict{text-align:left}
  .conf{justify-content:flex-start}
  .conf-bar{flex:1;width:auto}
  .verdict-badge{display:inline-block}
  .dash{grid-template-columns:1fr !important;padding:14px 16px}
  .sc-summary{margin:12px 16px 4px}
  /* Simulator tile's span-2 makes no sense in a 1-column stack. */
  .sim-tile{grid-column:auto}

  /* Fluid charts — fill the tile width but cap at the canvas's
     intrinsic 200px design width. aspect-ratio is the actual fix:
     `height: auto` alone is a no-op for <canvas> (a replaced element
     that falls back to its height attribute), which is what made the
     gauge overflow its tile and push the whole card wider than the
     viewport before. With aspect-ratio the height tracks the width
     and the tile can wrap normally. */
  .gaugeCanvas{
    display:block;width:100%;max-width:200px;height:auto;
    aspect-ratio:5/3;   /* canvas.width:canvas.height = 200:120 */
  }
  .radarCanvas{
    display:block;width:100%;max-width:200px;height:auto;
    aspect-ratio:11/9;  /* canvas.width:canvas.height = 220:180 */
  }
}
@media(max-width:520px){
  .sim-grid{grid-template-columns:repeat(2,1fr)}
  .figures-grid,.metrics-grid,.div-grid{grid-template-columns:repeat(2,1fr)}
  .content{padding:12px 12px}
  .sc-ticker{font-size:1.25rem}
  .compare-wrap,.standards-panel{padding:12px}
}

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