/*
  Stock Evaluator styles
  - Uses /style.css (Rule-of-7 template) for global tokens, typography, and hero.
  - Everything here is scoped to .se-page to avoid clashes with site-wide utilities.
*/

.se-page *{box-sizing:border-box}

/* Override the global .row helper (global .row is card-footer oriented). */
.se-page .row{display:flex;gap:8px;align-items:center;margin-top:0;justify-content:flex-start}

.se-page input{
  background:rgba(255,255,255,.04);
  border:1px solid var(--panel-bd);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  min-width:220px;
}
.se-page button{
  background:rgba(255,255,255,.06);
  border:1px solid var(--panel-bd);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
}
.se-page button:hover{border-color:#334155}

.se-page .error{
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.25);
  color:#ffd3d3;
  padding:10px 12px;
  border-radius:12px;
  margin-top:10px;
}
.se-page .diag{display:none}

.se-page .se-top{margin-top:-4px;margin-bottom:12px}
.se-page .se-run{justify-content:center}
.se-page .se-links{display:flex;justify-content:center;gap:10px;margin-top:8px}
.se-page .se-links .sep{opacity:.55}

.se-page .grid{display:grid;grid-template-columns:1.3fr .9fr;gap:18px;padding:0 0 28px}

/* Reuse the global .card, but make it fit content (no forced height). */
.se-page .card{min-height:0;padding:16px}
.se-page .sectionTitle{margin:14px 0 8px;font-weight:700}
.se-page .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.se-page .kpi{background:rgba(0,0,0,.18);border:1px solid var(--panel-bd);border-radius:12px;padding:10px 12px}
.se-page .kpi b{display:block;color:rgba(255,255,255,.85)}
.se-page .kpi span{font-size:14px}

.se-page .scoreWrap{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.se-page .dial{width:78px;height:78px;border-radius:50%;border:6px solid var(--panel-bd);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18)}
.se-page #scoreVal{font-size:20px;font-weight:800}
.se-page .dialText{display:flex;flex-direction:column}

.se-page .small{font-size:12px;color:var(--muted)}

.se-page .bars{display:flex;flex-direction:column;gap:8px}
.se-page .barRow{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center}
.se-page .bar{background:rgba(0,0,0,.18);border:1px solid var(--panel-bd);border-radius:999px;overflow:hidden;height:10px}
.se-page .bar>div{height:100%;width:0%;background:#2d5;transition:width .5s ease}

.se-page .badge{border:1px solid var(--panel-bd);background:rgba(0,0,0,.18);border-radius:999px;padding:6px 10px;color:rgba(255,255,255,.85)}

/* Simple text color cues */
.se-page .txt-good{ color:#8fe29f !important; }
.se-page .txt-warn{ color:#f0d080 !important; }
.se-page .txt-bad{  color:#f29b9b !important; }

.se-page table{width:100%;border-collapse:collapse}
.se-page th,.se-page td{border-top:1px solid var(--panel-bd);padding:8px 6px;text-align:left}
.se-page thead th{border-top:none;color:rgba(255,255,255,.7)}

.se-page .muted{color:var(--muted)}

/* Tooltip */
.se-page .tt{position:fixed;z-index:9999;max-width:360px;background:rgba(0,0,0,.60);border:1px solid var(--panel-bd);box-shadow:0 8px 24px rgba(0,0,0,.45);border-radius:10px;padding:10px 12px;color:var(--text);font-size:12px;line-height:1.35;display:none}
.se-page .tt b{color:rgba(255,255,255,.85)}

/* News */
.se-page #newsList{display:flex;flex-direction:column;gap:8px}
.se-page .news-item{border-bottom:1px solid var(--panel-bd);padding:6px 0}
.se-page .news-item a{font-weight:700;color:#dfe9f4;text-decoration:underline;text-underline-offset:3px}
.se-page .news-item a:visited{color:#dfe9f4}
.se-page .news-item a:hover{color:#8cbc57}
.se-page .news-item time{color:var(--muted);font-size:12px;display:block;margin-top:2px}

/* Peers strip under Latest news */
.se-page .peer-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.se-page .peer-chip{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:999px;color:var(--text);cursor:pointer}
.se-page .peer-chip:hover{background:rgba(255,255,255,.06)}
.se-page .peer-sym{font-weight:800;letter-spacing:.3px}
.se-page .peer-p{color:var(--muted);font-size:12px}
.se-page .peer-chg{font-size:12px;font-weight:700}

/* Watchlist */
.se-page .watchlist{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.se-page .wchip{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:999px;color:var(--text);cursor:pointer}
.se-page .wchip:hover{background:rgba(255,255,255,.06)}
.se-page .wchip b{font-weight:800;letter-spacing:.25px}
.se-page .wchip .x{opacity:.75;font-weight:900;cursor:pointer}
.se-page .wchip .x:hover{opacity:1}

/* Peer compare */
.se-page .pcTbl{width:100%;border-collapse:collapse;font-size:13px}
.se-page .pcTbl th,.se-page .pcTbl td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.07)}
.se-page .pcTbl th{color:rgba(255,255,255,.7);font-size:12px}
.se-page .pcTbl td:last-child{text-align:right}
.se-page .pcTbl .pcSym{font-weight:800}
.se-page .pcTbl .me{border-left:3px solid rgba(140,188,87,.55)}

@media(max-width:980px){.se-page .grid{grid-template-columns:1fr} .se-page .kpis{grid-template-columns:repeat(2,1fr)}}


/* Tooltip base */
.se-page [data-tip] { position: relative; cursor: help; }
.se-page [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 10;
  left: 0;
  top: 110%;
  min-width: 220px;
  max-width: 440px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(20,20,20,.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  pointer-events: none;
  white-space: normal;
}
.se-page [data-tip]:hover::before {
  content: "";
  position: absolute;
  left: 10px;
  top: calc(110% - 6px);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(20,20,20,.95);
}


/* Tooltip de-dup tweaks */

.se-page #detailsTbl tbody tr[data-tip] { pointer-events: auto; } /* legacy safety */
.se-page #detailsTbl tbody tr[data-tip]::after,
.se-page #detailsTbl tbody tr[data-tip]::before { display: none !important; } /* never show tooltips on the row */


.se-page #detailsTbl td[data-tip] { position: relative; }
.se-page #detailsTbl td[data-tip]::after,
.se-page #detailsTbl td[data-tip]::before { pointer-events: none; }

/* Prevent any layout shift when the bubble appears */
.se-page [data-tip] { will-change: transform; }


.se-page .tiny{font-size:12px;opacity:.85}

/* Peer controls */
.se-page .peerCtl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.se-page .seg.seg-sm .segBtn{padding:6px 10px;border-radius:999px;font-size:12px}
.se-page .peerEdit{background:rgba(0,0,0,.16);border:1px solid var(--panel-bd);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.se-page .peerEdit textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--panel-bd);color:var(--text);padding:10px 12px;border-radius:10px;resize:vertical;min-height:54px}
.se-page .hidden{display:none !important}



.se-page .miniRows{display:flex;flex-direction:column;gap:8px}
.se-page .miniRow{display:flex;justify-content:space-between;gap:10px;font-size:13px;line-height:1.25}
.se-page .miniRow .label{opacity:.85}
.se-page .miniRow .value{font-weight:700}
.se-page .miniRow .sub{opacity:.75;font-size:12px}
.se-page .miniNote{opacity:.8;font-size:12px;margin-top:6px}
.se-page .miniTable{width:100%;border-collapse:collapse;font-size:13px}
.se-page .miniTable td{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.se-page .miniTable tr:last-child td{border-bottom:none}
.se-page .miniTable td:last-child{text-align:right;font-weight:700}
.se-page .badge.small{padding:4px 8px;font-size:12px;border-radius:999px}


.se-page .badge.good{border-color:rgba(140,188,87,.35);color:#8cbc57}
.se-page .badge.warn{border-color:rgba(240,208,128,.35);color:#f0d080}
.se-page .badge.bad{border-color:rgba(255,120,120,.35);color:#ff7878}

/* Deep Dive drawer */

.se-page .ghostBtn{background:transparent;border:1px solid rgba(255,255,255,.14);color:#dfe7ef;padding:8px 12px;border-radius:12px;cursor:pointer;}
.se-page .ghostBtn:hover{border-color:rgba(255,255,255,.28);}
.se-page .overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:999;display:flex;justify-content:flex-end;}
.se-page .overlay.hidden{display:none;}
.se-page .drawer{width:min(760px,94vw);height:100%;background:#0a0f14;border-left:1px solid rgba(255,255,255,.08);box-shadow:-20px 0 60px rgba(0,0,0,.55);display:flex;flex-direction:column;}
.se-page .drawerHead{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px;border-bottom:1px solid rgba(255,255,255,.08);}
.se-page .drawerTitle{font-size:20px;font-weight:700;color:#e9f0f7;}
.se-page .drawerTabs{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.se-page .drawerTabs .tab{background:#0b1117;border:1px solid rgba(255,255,255,.10);color:#b9c8d6;padding:8px 12px;border-radius:12px;cursor:pointer;}
.se-page .drawerTabs .tab.active{border-color:rgba(140,188,87,.35);color:#8cbc57;}
.se-page .drawerBody{padding:14px 16px;overflow:auto;}
.se-page .tabPane.hidden{display:none;}
.se-page .seg{display:flex;gap:8px;}
.se-page .segBtn{background:#0b1117;border:1px solid rgba(255,255,255,.10);color:#b9c8d6;padding:8px 10px;border-radius:12px;cursor:pointer;}
.se-page .segBtn.active{border-color:rgba(140,188,87,.35);color:#8cbc57;}
.se-page .ddTable{width:100%;border-collapse:collapse;margin-top:10px;}
.se-page .ddTable th,.se-page .ddTable td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;vertical-align:top;}
.se-page .ddTable th{color:#9fb0c2;font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
.se-page .ddK{color:#9fb0c2;font-size:12px;}
.se-page .ddV{color:#e9f0f7;font-weight:600;}

/* Deep Dive: Sentiment cards */
.se-page .ddGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
.se-page .ddCard{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;}
.se-page .ddCardTitle{font-weight:750;margin-bottom:8px;}
.se-page .ddKV{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.se-page .ddBig{font-weight:800;}
.se-page .ddList{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.se-page .ddLink{color:#dfe9f4;text-decoration:none;}
.se-page .ddLink:hover{color:#8cbc57;text-decoration:underline;}
@media(max-width:860px){.se-page .ddGrid{grid-template-columns:1fr;}}

/* Deep Dive: Metric glossary */
.se-page .ddGlossary{margin-top:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;}
.se-page .ddGlossary .gHead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;}
.se-page .ddGlossary .gTitle{font-weight:800;}
.se-page .ddGlossary details{border-top:1px solid rgba(255,255,255,.06);padding-top:10px;margin-top:10px;}
.se-page .ddGlossary details:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.se-page .ddGlossary summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.se-page .ddGlossary summary::-webkit-details-marker{display:none;}
.se-page .ddGlossary .gMetric{font-weight:800;color:#e9f0f7;}
.se-page .ddGlossary .gTag{font-size:12px;color:#9fb0c2;}
.se-page .ddGlossary .gBody{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.35;}
.se-page .ddGlossary .gBody b{color:rgba(255,255,255,.85);}

/* Deep Dive: Company tab */
.se-page .ddCompanyWrap{display:flex;flex-direction:column;gap:12px;}
.se-page .ddCompanyTop{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;}
.se-page .ddCompanyTop .title{font-weight:850;margin-bottom:6px;}
.se-page .ddCompanyTop .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.se-page .ddCompanyGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.se-page .ddCompanyCard{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;}
.se-page .ddCompanyCard .h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;}
.se-page .ddCompanyCard .t{font-weight:850;}
.se-page .ddCompanyCard .b{color:var(--muted);font-size:13px;line-height:1.35;white-space:pre-wrap;}
.se-page .ddCompanyCard .kvs{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.se-page .ddCompanyCard .kv{display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.88);font-size:13px;}
.se-page .ddCompanyCard .kv span:first-child{color:#9fb0c2;}
.se-page .ddCompanyFoot{color:var(--muted);font-size:12px;line-height:1.35;}
@media(max-width:860px){.se-page .ddCompanyGrid{grid-template-columns:1fr;}}


/* ETF snapshot */
.kvgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px 14px; margin-top:6px; }
.kv{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03); }
.kv .k{ color:rgba(255,255,255,.70); font-size:13px; }
.kv .v{ color:rgba(255,255,255,.92); font-weight:600; font-size:13px; text-align:right; }
@media(max-width:720px){ .kvgrid{ grid-template-columns:1fr; } }