/* ==========================================================================
   Small-Cap Screener — Styles
   Matches the minimal inline style of ryantish.com
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0 0 64px;
}

/* --------------------------------------------------------------------------
   Screener wrapper — wider than the 800px prose container
   -------------------------------------------------------------------------- */
.screener-wrap {
  max-width: 1300px;
  margin: 24px auto 0;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.sc-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sc-control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-search-group {
  margin-left: auto;
  gap: 12px;
}

.sc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(0,0,0,0.4);
}

.sc-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sc-chip {
  padding: 3px 12px;
  border: 1px solid rgba(0,0,0,0.2);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  transition: all 0.1s;
}

.sc-chip:hover  { border-color: #000; color: #000; }
.sc-chip.active { background: #000; color: #fff; border-color: #000; }

.sc-search {
  padding: 3px 10px;
  border: 1px solid rgba(0,0,0,0.2);
  font-family: inherit;
  font-size: 13px;
  color: #000;
  outline: none;
  width: 180px;
}

.sc-search:focus { border-color: #000; }

.sc-count {
  font-size: 12px;
  color: rgba(0,0,0,0.35);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */
.sc-table-wrap {
  overflow-x: auto;
  border-top: 2px solid #000;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sc-table thead {
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.sc-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(0,0,0,0.4);
  text-transform: uppercase;
  white-space: nowrap;
  background: #fff;
}

.sc-table th.sortable { cursor: pointer; }
.sc-table th.sortable:hover { color: #000; }
.sc-table th.active-col { color: #000; }
.sc-table th.active-col::after { content: ' ↓'; font-size: 9px; }

.sc-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  white-space: nowrap;
  vertical-align: middle;
}

.sc-table tbody tr:hover td { background: rgba(0,0,0,0.02); }
.sc-table tbody tr.row-seasonal td { background: rgba(0,0,0,0.025); }
.sc-table tbody tr.row-seasonal:hover td { background: rgba(0,0,0,0.045); }

/* Right-align numeric columns */
th.c-mcap, th.c-price, th.c-target, th.c-upside,
th.c-count, th.c-disagree, th.c-score { text-align: right; }
td.c-mcap, td.c-price, td.c-target, td.c-upside,
td.c-count, td.c-disagree, td.c-score { text-align: right; font-variant-numeric: tabular-nums; }
th.c-count, td.c-count { text-align: center; }

/* Column widths */
.c-rank    { width: 32px; text-align: center; color: rgba(0,0,0,0.3); font-size: 11px; }
.c-ticker  { width: 72px; }
.c-name    { max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: rgba(0,0,0,0.5); }
.c-sector  { width: 100px; }
.c-mcap    { width: 80px; }
.c-price   { width: 72px; }
.c-target  { width: 90px; font-weight: 600; }
.c-upside  { width: 80px; }
.c-count   { width: 64px; }
.c-disagree{ width: 100px; }
.c-score   { width: 72px; font-weight: 600; }
.c-conf    { width: 110px; }

/* Upside coloring — only the upside cell, not the whole row */
.up-high  td.c-upside { color: rgba(38, 136, 35, 0.89); font-weight: 700; } /* matches site green */
.up-mid   td.c-upside { color: #b45309; font-weight: 600; }
.up-flat  td.c-upside { color: rgba(0,0,0,0.45); }
.up-low   td.c-upside { color: #b91c1c; font-weight: 600; }

/* --------------------------------------------------------------------------
   Growth / acceleration value colors (used by revenue screener)
   -------------------------------------------------------------------------- */
.val-green-strong { color: rgba(38, 136, 35, 0.89); font-weight: 700; }
.val-green        { color: rgba(38, 136, 35, 0.89); }
.val-red          { color: #b91c1c; }
.val-red-strong   { color: #b91c1c; font-weight: 700; }

/* Revenue screener column widths */
.c-qtr    { width: 76px; font-size: 12px; color: rgba(0,0,0,0.5); }
.c-rev    { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.c-yoy    { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.c-pyoy   { width: 84px; text-align: right; font-variant-numeric: tabular-nums; color: rgba(0,0,0,0.5); }
.c-yaccel { width: 80px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.c-qoq    { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.c-qaccel { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.c-seas   { width: 68px; text-align: center; font-size: 12px; }

th.c-rev, th.c-yoy, th.c-pyoy, th.c-yaccel, th.c-qoq, th.c-qaccel { text-align: right; }
th.c-seas { text-align: center; }

/* --------------------------------------------------------------------------
   Sector badge
   -------------------------------------------------------------------------- */
.sc-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.sc-badge--technology { background: #eff6ff; color: #1d4ed8; }
.sc-badge--hardware   { background: #faf5ff; color: #6d28d9; }
.sc-badge--consumer   { background: #f0fdf4; color: rgba(38,136,35,0.89); }

/* --------------------------------------------------------------------------
   Confidence bar
   -------------------------------------------------------------------------- */
.sc-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(0,0,0,0.4);
}

.sc-bar {
  height: 4px;
  background: #000;
  min-width: 2px;
  max-width: 60px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Empty / loading state
   -------------------------------------------------------------------------- */
.sc-empty {
  text-align: center;
  padding: 40px;
  color: rgba(0,0,0,0.35);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .sc-search-group { margin-left: 0; }
  .c-name, .c-disagree, .c-score, .c-conf { display: none; }
}