/* Metrics Explorer — Frutiger Aero / mid-2000s skeuomorphic theme.
   Glossy aqua chrome, glass panels, beveled buttons, reflective highlights. */

:root{
  --ink:#162433; --text:#1d2b3a; --muted:#5a6e84; --muted2:#8aa0b5;
  --line:#bcd3e6; --line-soft:#d6e6f2;
  --accent:#1f7fcf; --accent-d:#155fa6; --accent-l:#7fd0ff;
  --glass:rgba(255,255,255,.72);
  --good:#2f9e54; --good-bg:#3aa8561f;
  --warn:#c8881a; --warn-bg:#d8941a22;
  --bad:#d33f63; --bad-bg:#d8456b1f;
  --aqua1:#bfe6ff; --aqua2:#7cc6f5;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:14px/1.55 "Lucida Grande","Segoe UI",Tahoma,Geneva,Verdana,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 520px at 12% -8%, #ffffffcc, transparent 60%),
    radial-gradient(900px 480px at 96% 4%, #d6f0ffcc, transparent 55%),
    radial-gradient(700px 700px at 70% 110%, #c8f0d8aa, transparent 60%),
    linear-gradient(180deg,#cfeaff 0%, #e6f5ff 38%, #f3fbff 70%, #ffffff 100%);
  background-attachment:fixed;
}
h1,h2,h3{margin:0;font-weight:700;color:var(--ink)}
a{color:var(--accent-d)}
code{background:#eaf4fb;border:1px solid var(--line-soft);padding:1px 6px;border-radius:5px;font-size:.9em}
.hidden{display:none !important}
.muted{color:var(--muted)} .small{font-size:12px}
.good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}

/* ---------- glossy chrome helpers ---------- */
.glossy{
  background:linear-gradient(180deg,#fafdff 0%,#e7f2fb 48%,#d4e7f6 52%,#e3f0fa 100%);
  border:1px solid #ffffffaa;
  box-shadow:0 1px 0 #ffffffcc inset, 0 -1px 0 #0000000d inset, 0 2px 6px #1c466b22;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:12px 24px;position:sticky;top:0;z-index:50;flex-wrap:wrap;
  background:linear-gradient(180deg,#eaf7ff 0%,#bfe2fb 46%,#8fc7f0 52%,#aed7f4 100%);
  border-bottom:1px solid #6ea9d6;
  box-shadow:0 1px 0 #ffffffcc inset, 0 3px 10px #19476e33;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:28px;color:#fff;filter:drop-shadow(0 1px 1px #1559906c);
  text-shadow:0 0 10px #7fd0ffcc}
.brand h1{font-size:19px;letter-spacing:.2px;text-shadow:0 1px 0 #ffffffcc}
.tagline{color:#2c5d80;font-size:12px;text-shadow:0 1px 0 #ffffff99}
.search{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search input{
  background:linear-gradient(180deg,#f1f8fe,#ffffff);
  border:1px solid #8fb6d4;color:var(--text);
  padding:9px 14px;border-radius:20px;width:240px;font-size:14px;outline:none;
  box-shadow:0 1px 2px #1c466b22 inset, 0 1px 0 #ffffffcc;
}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7fd0ff66, 0 1px 2px #1c466b22 inset}

/* glossy aqua buttons (Web 2.0 style) */
.search button,#search-btn,#screen-btn{
  color:#fff;border:1px solid #1466a8;padding:9px 18px;border-radius:20px;
  font-weight:700;cursor:pointer;font-size:14px;text-shadow:0 -1px 0 #0b3f6b88;
  background:linear-gradient(180deg,#9fd9ff 0%,#3f9fe0 48%,#1f7fcf 52%,#2f8bd6 100%);
  box-shadow:0 1px 0 #ffffff99 inset, 0 -2px 4px #0b3f6b33 inset, 0 2px 5px #1c466b44;
}
.search button:hover,#search-btn:hover,#screen-btn:hover{filter:brightness(1.06)}
.search button:active,#search-btn:active,#screen-btn:active{
  background:linear-gradient(180deg,#2f8bd6,#1f7fcf 50%,#3f9fe0);
  box-shadow:0 2px 4px #0b3f6b55 inset}

.mode-toggle{display:flex;border:1px solid #7fb0d6;border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px #1c466b22 inset;background:#dcebf8}
.mode-toggle button{background:transparent;color:#2c5d80;border:none;padding:9px 16px;cursor:pointer;font-size:13px;font-weight:700}
.mode-toggle button.active{
  color:#fff;text-shadow:0 -1px 0 #0b3f6b88;
  background:linear-gradient(180deg,#9fd9ff,#3f9fe0 48%,#1f7fcf 52%,#2f8bd6);
  box-shadow:0 1px 0 #ffffff88 inset, 0 2px 5px #1c466b44}

main{max-width:1180px;margin:0 auto;padding:24px}

/* ---------- welcome ---------- */
.welcome{text-align:center;padding:54px 20px;color:var(--muted)}
.welcome h2{color:var(--ink);font-size:23px;margin-bottom:10px;text-shadow:0 1px 0 #fff}
.welcome p{max-width:640px;margin:10px auto}
.welcome .hint{font-size:13px;color:var(--muted2)}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0}
.chips button{
  color:var(--accent-d);font-weight:700;padding:8px 18px;border-radius:20px;cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#dcecf9 60%,#cfe6f7);
  border:1px solid #9fc2dd;box-shadow:0 1px 0 #ffffffcc inset,0 1px 3px #1c466b22}
.chips button:hover{filter:brightness(1.04);border-color:var(--accent)}

/* ---------- glass card ---------- */
.card{
  background:var(--glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid #ffffffcf;border-radius:var(--radius);padding:18px 20px;
  box-shadow:0 1px 0 #ffffff inset, 0 8px 22px #1c466b1f, 0 1px 3px #1c466b22;
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:42%;
  background:linear-gradient(180deg,#ffffffcc,#ffffff10);pointer-events:none}
.card>*{position:relative}
.card h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-d);margin-bottom:14px}

/* ---------- stock header ---------- */
.stock-header{
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid #ffffffcf;border-radius:var(--radius);padding:18px 22px;margin-bottom:16px;
  box-shadow:0 1px 0 #ffffff inset,0 8px 22px #1c466b1f;
}
.sh-top{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.sh-name{min-width:200px}
.sh-name h2{font-size:21px}
.sh-name .sub{color:var(--muted);font-size:13px;margin-top:2px}
.sh-name .muted{color:var(--muted2);font-weight:600}
.sh-quote{margin-left:auto;text-align:right}
.sh-quote .sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.sh-price{font-size:27px;font-weight:800;color:var(--ink)}
.sh-chg{font-size:14px;font-weight:700;margin-left:8px}
.sh-scores{display:flex;gap:10px}
.sh-pill{text-align:center;min-width:90px;padding:8px 14px;border-radius:12px;
  background:linear-gradient(180deg,#ffffffcc,#e9f3fb);border:1px solid #cfe2f0;
  box-shadow:0 1px 0 #ffffff inset,0 2px 6px #1c466b1a;
  display:flex;flex-direction:column;align-items:center;gap:2px}
.sh-pill .lab{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;gap:4px}
.sh-pill .pill{font-size:28px;font-weight:800;line-height:1.05}
.sh-desc{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
  color:var(--text);font-size:13px;line-height:1.6;max-width:980px}
.more-btn{background:none;border:none;color:var(--accent-d);font-weight:700;cursor:pointer;
  font-size:12.5px;padding:0 2px;white-space:nowrap}
.more-btn:hover{text-decoration:underline}

/* peers */
.peer-chips{display:flex;gap:8px;flex-wrap:wrap}
.peer-chip{color:var(--accent-d);font-weight:800;font-size:12.5px;padding:6px 14px;border-radius:16px;cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#e4f0fa 60%,#d4e8f6);border:1px solid #a8cae3;
  box-shadow:0 1px 0 #ffffffcc inset,0 1px 2px #1c466b1f}
.peer-chip:hover{filter:brightness(1.05);border-color:var(--accent)}

/* ---------- tabs (glossy) ---------- */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{
  color:var(--accent-d);padding:9px 15px;cursor:pointer;font-size:13.5px;font-weight:700;
  border:1px solid #b4d2e7;border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#e8f3fb 60%,#d8eaf7);
  box-shadow:0 1px 0 #ffffffcc inset,0 1px 2px #1c466b1f}
.tabs button:hover{filter:brightness(1.04)}
.tabs button.active{
  color:#fff;text-shadow:0 -1px 0 #0b3f6b88;border-color:#1466a8;
  background:linear-gradient(180deg,#9fd9ff,#3f9fe0 48%,#1f7fcf 52%,#2f8bd6);
  box-shadow:0 1px 0 #ffffff88 inset,0 2px 6px #1c466b44}

/* ---------- stats ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.stat-label{color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:5px}
.stat-value{font-size:18px;font-weight:800;margin-top:1px;color:var(--ink)}
.stat-value.good{color:var(--good)} .stat-value.warn{color:var(--warn)} .stat-value.bad{color:var(--bad)}
.full,.colspan{grid-column:1/-1}

/* info icon + tooltip */
.info{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;color:#fff;
  font-size:9px;font-weight:800;font-style:normal;cursor:help;flex:none;
  background:radial-gradient(circle at 35% 30%,#7fc4f0,#1f7fcf);
  box-shadow:0 1px 0 #ffffff88 inset,0 1px 2px #1c466b44}
.info:hover{filter:brightness(1.1)}
.tooltip{
  position:fixed;z-index:100;max-width:308px;
  background:linear-gradient(180deg,#ffffff,#eef7fe);
  border:1px solid #8fc0e6;border-radius:12px;padding:12px 14px;
  box-shadow:0 1px 0 #ffffff inset,0 12px 34px #1c466b55;pointer-events:none}
.tooltip .tt-title{font-weight:800;margin-bottom:5px;color:var(--accent-d)}
.tooltip .tt-desc{color:var(--text);font-size:12.5px;margin-bottom:7px}
.tooltip .tt-guide{color:var(--muted);font-size:12px;border-top:1px solid var(--line-soft);padding-top:7px}
.tooltip .tt-guide b{color:var(--good)}

/* score pills */
.pill-good{color:var(--good)} .pill-warn{color:var(--warn)} .pill-bad{color:var(--bad)} .pill-neutral{color:var(--ink)}
.verdict-line{color:var(--muted);font-size:13px;margin-top:6px;max-width:720px}

/* driver bars */
.bars{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.bar-row{display:grid;grid-template-columns:150px 1fr 54px;align-items:center;gap:12px}
.bar-row .bl{color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:5px}
.bar-track{height:11px;background:linear-gradient(180deg,#d4e6f3,#eaf4fb);border:1px solid #b4d2e7;
  border-radius:7px;overflow:hidden;box-shadow:0 1px 2px #1c466b22 inset}
.bar-fill{height:100%;border-radius:7px;
  background:linear-gradient(180deg,#7fd0ff,#1f7fcf);box-shadow:0 1px 0 #ffffff66 inset}
.bar-fill.good{background:linear-gradient(180deg,#74d99a,#2f9e54)}
.bar-fill.warn{background:linear-gradient(180deg,#f0c769,#c8881a)}
.bar-fill.bad{background:linear-gradient(180deg,#f08aa3,#d33f63)}
.bar-val{text-align:right;font-weight:800;font-size:13px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
th{color:var(--accent-d);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
tbody tr:hover{background:#eaf5fd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num.good{color:var(--good)} td.num.warn{color:var(--warn)} td.num.bad{color:var(--bad)}
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:800;
  box-shadow:0 1px 0 #ffffff66 inset,0 1px 2px #1c466b22}
.tag.good{background:linear-gradient(180deg,#8fe0ab,#2f9e54);color:#fff;text-shadow:0 -1px 0 #0a5a2e88}
.tag.warn{background:linear-gradient(180deg,#f3cf7c,#c8881a);color:#fff;text-shadow:0 -1px 0 #7a510088}
.tag.bad{background:linear-gradient(180deg,#f29bb1,#d33f63);color:#fff;text-shadow:0 -1px 0 #7a112e88}
.tag.gem{background:linear-gradient(180deg,#c7b6ff,#7c5cff);color:#fff;text-shadow:0 -1px 0 #3a2a8888}
.tag.neutral{background:linear-gradient(180deg,#cfe1ef,#9fc2dd);color:#1d3a52}
.flag{color:var(--bad);font-weight:800}

/* note / flag lists */
.notelist{list-style:none;padding:0;margin:8px 0 0}
.notelist li{padding:6px 0;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:13px}
.notelist li:last-child{border:none}

/* ---------- charts ---------- */
.chart-wrap{position:relative;height:300px;margin-top:6px;transition:opacity .2s}
.chart-wrap.tall{height:380px}
.chart-wrap.rsi{height:130px;margin-top:2px}
.chart-card .chart-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}

/* segmented control (period / annual-quarterly) */
.seg{display:inline-flex;border:1px solid #8fb6d4;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px #1c466b22 inset}
.seg button{background:linear-gradient(180deg,#ffffff,#e1eef9);border:none;border-right:1px solid #c4dcec;
  color:var(--accent-d);font-weight:700;font-size:12.5px;padding:6px 13px;cursor:pointer}
.seg button:last-child{border-right:none}
.seg button.active{color:#fff;text-shadow:0 -1px 0 #0b3f6b88;
  background:linear-gradient(180deg,#9fd9ff,#3f9fe0 48%,#1f7fcf 52%,#2f8bd6)}
.seg button:disabled{opacity:.4;cursor:not-allowed}

/* overlay toggle chips */
.toggles{display:flex;gap:8px;flex-wrap:wrap}
.tgl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  font-size:12.5px;font-weight:700;color:var(--muted);padding:5px 11px;border-radius:16px;
  border:1px solid #c4dcec;background:linear-gradient(180deg,#ffffff,#eef6fc)}
.tgl .swatch{width:11px;height:11px;border-radius:3px;opacity:.35;
  box-shadow:0 0 0 1px #ffffff99 inset}
.tgl.on{color:var(--accent-d);border-color:#7fb0d6;
  background:linear-gradient(180deg,#eaf6ff,#cfe8fb);box-shadow:0 1px 2px #1c466b22 inset}
.tgl.on .swatch{opacity:1}

/* ---------- links tab ---------- */
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.link-card h3{display:flex;align-items:center;gap:8px}
.lg-icon{font-size:15px}
.linklist{list-style:none;padding:0;margin:0}
.linklist li{border-bottom:1px solid var(--line-soft)}
.linklist li:last-child{border:none}
.linklist a{display:block;text-decoration:none;padding:9px 8px;border-radius:8px;color:var(--text)}
.linklist a:hover{background:#eaf5fd}
.ll-label{display:block;font-weight:700;color:var(--accent-d)}
.ll-label .ext{font-size:11px;color:var(--muted2)}
.ll-note{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}

/* ---------- news ---------- */
.news-list{list-style:none;padding:0;margin:0}
.news-list li{border-bottom:1px solid var(--line-soft)}
.news-list li:last-child{border:none}
.news-list a{display:block;text-decoration:none;padding:10px 8px;border-radius:8px;color:var(--text)}
.news-list a:hover{background:#eaf5fd}
.news-title{display:block;font-weight:700;color:var(--accent-d);line-height:1.35}
.news-title .ext{font-size:11px;color:var(--muted2)}
.news-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- misc ---------- */
.loading{padding:50px;text-align:center;color:var(--muted)}
.spinner{width:28px;height:28px;border:3px solid #cfe3f2;border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.error{background:linear-gradient(180deg,#ffe7ed,#ffd2db);border:1px solid #e88aa0;color:#8a1f37;
  padding:14px 18px;border-radius:12px;box-shadow:0 1px 0 #ffffff inset}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-d);margin:24px 0 12px}
.foot{text-align:center;color:var(--muted2);font-size:12px;padding:26px;text-shadow:0 1px 0 #ffffff99}

/* tables get a horizontal-scroll wrapper so wide ones don't break narrow screens */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================ mobile / tablet
   Same desktop look, just reflowed: full-width search, one scrollable tab row,
   stacked header, shorter charts, and scrollable tables. */
@media (max-width:680px){
  main{padding:14px}
  .topbar{padding:11px 14px;gap:10px}
  .brand h1{font-size:17px}

  /* search takes its own full-width row under the brand */
  .search{width:100%}
  .search input{flex:1;width:auto;min-width:0}

  /* tabs stay on one tidy line you can swipe through */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:6px;padding-bottom:6px;scrollbar-width:thin}
  .tabs button{flex:0 0 auto}

  /* header stacks: name → price → both score pills full width */
  .stock-header{padding:14px 16px}
  .sh-top{gap:12px}
  .sh-name{min-width:0}
  .sh-quote{margin-left:0;text-align:left}
  .sh-price{font-size:24px}
  .sh-scores{width:100%}
  .sh-pill{flex:1;min-width:0}
  .sh-desc{max-width:none}

  /* cards & charts a touch tighter */
  .card{padding:14px}
  .chart-wrap{height:260px}
  .chart-wrap.tall{height:300px}
  .chart-wrap.rsi{height:110px}

  /* denser tables + bars */
  table{font-size:12.5px}
  th,td{padding:8px 9px}
  .bar-row{grid-template-columns:96px 1fr 46px;gap:8px}

  /* pinned (tapped) tooltip can use most of the width */
  .tooltip{max-width:calc(100vw - 24px)}
}

/* very small phones: single-column metric grids */
@media (max-width:380px){
  .stats{grid-template-columns:1fr}
}