/* StockScreen -- dark, dense, mobile-first.
   The table is the product, so everything else stays quiet. */

:root {
  --bg:        #0b0f14;
  --bg-raise:  #121821;
  --bg-hover:  #182130;
  --line:      #1e2836;
  --line-soft: #16202c;
  --ink:       #e6edf5;
  --ink-dim:   #8b9bb0;
  --ink-faint: #5d6b7e;
  --accent:    #4ade80;
  --good:      #4ade80;
  --ok:        #a3d977;
  --mid:       #e0b64b;
  --bad:       #e8705f;
  --star:      #f5c451;
  --radius:    10px;
  /* Where the table header pins. Overwritten from JS with the toolbar's real
     measured height -- a hardcoded guess is wrong at the other breakpoint and
     wrong again at any other font size, and being wrong tucks the header row
     under the toolbar with data rows showing through the gap. */
  --stick:     56px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

/* The UA's [hidden] rule is display:none at the lowest specificity, so any
   display: value below would silently beat it and leave the drawer on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- header ---------- */

.top {
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.brand h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.brand h1::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: 2px;
}

.freshness {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.freshness .stale { color: var(--mid); }

/* ---------- toolbar ---------- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(11, 15, 20, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
}
.search svg {
  position: absolute;
  left: 10px; top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 8px 10px 8px 31px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.search input:focus {
  outline: none;
  border-color: #2c3f57;
}
.search input::-webkit-search-cancel-button { filter: invert(0.6); }

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chip .star { color: var(--ink-faint); }
.chip .count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #1d2735;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.chip[aria-pressed="true"] {
  background: #241f0e;
  border-color: #4a3c14;
  color: var(--star);
}
.chip[aria-pressed="true"] .star { color: var(--star); }
.chip[aria-pressed="true"] .count { background: #3a2f10; }

/* Green rather than gold: this one is a signal about the stock, not a mark
   the user made, and it should not read as a second watchlist. */
.chip-insider[aria-pressed="true"] {
  background: #10251a;
  border-color: #23492f;
  color: var(--good);
}
.chip-insider[aria-pressed="true"] .star { color: var(--good); }
.chip-insider[aria-pressed="true"] .count { background: #1a3826; }

.rowcount {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- table ---------- */

/* Deliberately NOT overflow-x:auto. That would make this element the sticky
   containing block for the header row, which then scrolls away with the table
   instead of pinning under the toolbar. The breakpoints shed columns down to
   five on a phone, so there is nothing to scroll sideways anyway. */
.tablewrap { width: 100%; }

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

thead th {
  position: sticky;
  top: var(--stick);
  z-index: 4;
  padding: 8px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  white-space: nowrap;
}
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th[data-sort]:hover { color: var(--ink-dim); }
thead th[aria-sort]::after {
  content: "▾";
  margin-left: 4px;
  color: var(--accent);
}
thead th[aria-sort="ascending"]::after { content: "▴"; }

tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--bg-hover); }
tbody tr.is-watched td:first-child { box-shadow: inset 2px 0 0 var(--star); }

.c-rank { width: 34px; color: var(--ink-faint); font-size: 12px; text-align: right; }
.c-star { width: 30px; text-align: center; }
.c-num, td.c-num { text-align: right; }
th.c-num { text-align: right; }

.sym { font-weight: 650; letter-spacing: 0.01em; }
.name {
  display: block;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-dim);
}
.sec { font-size: 12.5px; color: var(--ink-dim); }
.dim { color: var(--ink-faint); }

.starbtn {
  padding: 2px 4px;
  background: none;
  border: 0;
  color: #2b3646;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.starbtn.on { color: var(--star); }

.comp { font-weight: 650; }

.f {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}
.f-good { background: #14331f; color: var(--good); }
.f-ok   { background: #26301a; color: var(--ok); }
.f-mid  { background: #332b12; color: var(--mid); }
.f-bad  { background: #331a18; color: var(--bad); }

.flag {
  display: inline-block;
  margin: 0 3px 0 0;
  padding: 1px 5px;
  border: 1px solid #263447;
  border-radius: 5px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}
.flag-net-cash, .flag-net-net { border-color: #2a4a35; color: var(--good); }
.flag-turning { border-color: #4a3c14; color: var(--star); }

.cat {
  display: inline-block;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--ink-dim);
  vertical-align: bottom;
}

.empty {
  padding: 40px 16px;
  color: var(--ink-faint);
  text-align: center;
}

.filternote {
  margin: 0;
  padding: 9px 16px;
  background: #0e1a13;
  border-bottom: 1px solid #1b3324;
  font-size: 12px;
  line-height: 1.5;
  color: #7fa88d;
}
.filternote b { color: var(--good); font-weight: 600; }

/* ---------- footer ---------- */

.foot {
  max-width: 62ch;
  margin: 28px auto 40px;
  padding: 20px 16px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-faint);
}
.foot p { margin: 0 0 10px; }
.foot strong { color: var(--ink-dim); }

/* ---------- detail drawer ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(3, 6, 10, 0.6);
  backdrop-filter: blur(2px);
}

.drawer {
  position: fixed;
  z-index: 21;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg-raise);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
  animation: slide 0.18s ease-out;
}
@keyframes slide { from { transform: translateX(20px); opacity: 0; } }

.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.dname {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.dstar, .dclose {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.dstar { margin-left: auto; }
.dstar.on { color: var(--star); }
.dclose:hover, .dstar:hover { color: var(--ink); }

.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 40px;
  -webkit-overflow-scrolling: touch;
}

.scoreline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.scorebox {
  flex: 1 1 auto;
  min-width: 66px;
  padding: 8px 10px;
  background: #0e141c;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.scorebox b {
  display: block;
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.scorebox span {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scorebox.hero b { color: var(--accent); }

.grp { margin: 0 0 16px; }
.grp h3 {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.grp dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 0;
  font-size: 13.5px;
}
.grp dt,
.grp dd {
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
.grp dt { color: var(--ink-dim); }
.grp dd { text-align: right; font-variant-numeric: tabular-nums; }

.tests { display: flex; flex-wrap: wrap; gap: 5px; }
.test {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11.5px;
}
.test-pass { background: #14331f; color: var(--good); }
.test-fail { background: #331a18; color: var(--bad); }
.test-na   { background: #1a2230; color: var(--ink-faint); }

.heads { margin: 0; padding-left: 17px; font-size: 13px; line-height: 1.6; }
.heads li { margin-bottom: 5px; color: var(--ink-dim); }

.note {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ---------- responsive: shed columns, never scroll sideways ---------- */

@media (max-width: 1080px) { .lg-hide { display: none; } }
@media (max-width: 860px)  { .md-hide { display: none; } }

@media (max-width: 620px) {
  .sm-hide { display: none; }
  body { font-size: 14px; }
  .top { padding: 14px 12px 10px; }
  .toolbar { padding: 9px 12px; }
  thead th { padding: 7px 6px; }
  tbody td { padding: 10px 6px; }
  .name { max-width: 20ch; }
  .rowcount { display: none; }

  /* Bottom sheet reads better than a side panel on a phone. */
  .drawer {
    top: 8%;
    left: 0;
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    animation: rise 0.2s ease-out;
  }
  @keyframes rise { from { transform: translateY(24px); opacity: 0; } }
  .drawer-head::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    width: 34px; height: 4px;
    margin-left: -17px;
    border-radius: 2px;
    background: #2b3646;
  }
  .drawer-head { position: relative; padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
}