/* Institutional redesign layer for the US Low Caps cockpit.
   Purpose: dense, analytic, table-first, fewer toy-dashboard effects. */
:root {
  --pro-bg: #070a0f;
  --pro-bg-2: #0b1017;
  --pro-panel: rgba(12, 17, 25, 0.96);
  --pro-panel-2: rgba(15, 21, 31, 0.94);
  --pro-line: rgba(142, 154, 170, 0.16);
  --pro-line-strong: rgba(255, 154, 58, 0.34);
  --pro-text: #edf2f7;
  --pro-soft: #cfd9e4;
  --pro-muted: #8391a3;
  --pro-orange: #ff9a3a;
  --pro-orange-soft: #ffd7a8;
  --pro-green: #4fe38f;
  --pro-red: #ff6d86;
  --pro-amber: #f2c766;
  --pro-blue: #8fb7ff;
  --pro-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --pro-sans: Outfit, "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  color: var(--pro-text) !important;
  background:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    radial-gradient(900px 360px at 15% -10%, rgba(255,154,58,0.09), transparent 58%),
    linear-gradient(180deg, #05070b 0%, #080c12 100%) !important;
  background-size: 36px 36px, 36px 36px, auto, auto !important;
  font-family: var(--pro-sans) !important;
}

.bg-glow { display: none !important; }
.bg-grid { opacity: 0.20 !important; }
.app, .wrap {
  max-width: 1580px !important;
  padding: 12px !important;
}

.desk-shell {
  background: rgba(8, 12, 18, 0.94) !important;
  border-bottom: 1px solid rgba(255,154,58,0.18) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.24) !important;
}
.desk-shell__inner { max-width: 1580px !important; padding: 8px 12px !important; }
.desk-shell__row { grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) auto !important; }
.desk-shell__title { font-size: 1.05rem !important; }
.desk-shell__link {
  min-height: 30px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.018) !important;
  border-color: rgba(255,154,58,0.16) !important;
  font-size: 0.74rem !important;
}
.desk-shell__link.is-active,
.desk-shell__link:hover {
  background: rgba(255,140,36,0.14) !important;
  border-color: rgba(255,154,58,0.45) !important;
  color: #fff0dc !important;
}
.desk-shell__chip { min-height: 28px !important; padding: 5px 8px !important; border-radius: 8px !important; }
.desk-shell__subrow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding-top: 7px !important;
  color: var(--pro-muted) !important;
  font-size: 0.84rem !important;
}
.desk-shell__context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-shell__status { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-end !important; }

.hero, .shell, .panel, .stat, .note, .dossier, .table-wrap, .mini-card,
.sector-card, .heat, .module, .mini-panel, .info-card, .top20-card,
.asset, .score-card, .signal-card, .badge-card, .card {
  background: linear-gradient(180deg, var(--pro-panel), rgba(9, 13, 20, 0.96)) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.hero, .shell { padding: 14px !important; border-color: rgba(255,154,58,0.24) !important; }
.panel { margin-top: 10px !important; overflow: hidden; }
.panel-head, .sector-head, .heat-head {
  min-height: 38px;
  padding: 9px 11px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  background: linear-gradient(90deg, rgba(255,154,58,0.08), transparent 40%) !important;
}
.panel-body { padding: 10px !important; }

h1, .title {
  color: #f8fafc !important;
  font-family: var(--pro-mono) !important;
  font-size: clamp(1.35rem, 2.25vw, 2.35rem) !important;
  letter-spacing: -0.055em !important;
  line-height: 0.96 !important;
  margin: 7px 0 !important;
}
h2, h3, .panel-title, .sector-name, .heat-title {
  color: var(--pro-soft) !important;
  font-family: var(--pro-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
.panel-title, .sector-name, .heat-title { font-size: 0.88rem !important; }
.sub, .lead, .copy, .muted, .note p, .note li, .footer-note, .legend,
.asset-why, .score-caption, .company, .sector-meta, .heat-note {
  color: var(--pro-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.42 !important;
}

.chip, .tag, .rank-chip, .metric-chip, .ghost, .badge-mini,
.status, .eyebrow, .btn, .action, .chip-row a, .actions a {
  border-radius: 8px !important;
  font-family: var(--pro-mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}
.chip-row a, .actions a, .action {
  padding: 8px 10px !important;
  border-color: rgba(255,154,58,0.32) !important;
  background: rgba(255,140,36,0.11) !important;
  color: var(--pro-orange-soft) !important;
}
.chip, .tag, .rank-chip, .metric-chip, .ghost, .badge-mini {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--pro-soft) !important;
}
.eyebrow, .chip.active, .clickable.active, .metric-chip.green, .rank-chip {
  color: var(--pro-orange-soft) !important;
  border-color: rgba(255,154,58,0.35) !important;
  background: rgba(255,140,36,0.12) !important;
}

.stat { padding: 9px 10px !important; }
.stat .label, .stat .k, .badge-card .k, .info-card .k, .market-metric .m-k {
  color: var(--pro-muted) !important;
  font: 700 0.57rem var(--pro-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.stat .value, .stat .v, .badge-card .v, .info-card .v, .market-metric .m-v {
  color: var(--pro-text) !important;
  font-family: var(--pro-mono) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

input, select, button {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--pro-text) !important;
  border-radius: 8px !important;
}
input, select { min-height: 34px !important; padding: 8px 10px !important; }
button { cursor: pointer; }

.table-wrap { border-radius: 10px !important; background: rgba(8, 12, 18, 0.74) !important; }
table { width: 100%; border-collapse: collapse; }
th {
  background: rgba(8, 12, 18, 0.98) !important;
  color: #9eabb9 !important;
  font: 800 0.60rem var(--pro-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
td {
  color: var(--pro-soft) !important;
  font: 650 0.76rem var(--pro-mono) !important;
}
th, td { padding: 8px 9px !important; border-bottom: 1px solid rgba(255,255,255,0.055) !important; }
tr:hover td { background: rgba(255,154,58,0.045) !important; }
.pos, .good { color: var(--pro-green) !important; }
.neg, .bad { color: var(--pro-red) !important; }
.warn, .amber { color: var(--pro-amber) !important; }
.selected { background: rgba(255,154,58,0.08) !important; color: var(--pro-orange-soft) !important; }

.asset, .top20-card { text-align: left; transition: border-color 120ms ease, background 120ms ease; }
.asset.active, .top20-card.active, tr.active td {
  border-color: rgba(255,154,58,0.48) !important;
  background: linear-gradient(180deg, rgba(255,140,36,0.10), rgba(12,17,25,0.96)) !important;
}
.ticker, .top20-ticker, .s-ticker { color: #ffffff !important; font-family: var(--pro-mono) !important; }
.status.valid { background: rgba(79,227,143,0.10) !important; color: #dfffea !important; border-color: rgba(79,227,143,0.32) !important; }
.status.blocked { background: rgba(255,109,134,0.10) !important; color: #ffdce2 !important; border-color: rgba(255,109,134,0.30) !important; }

/* Main cockpit execution queue */
.ready-panel { border-color: rgba(255,154,58,0.30) !important; }
.ready-kicker { color: var(--pro-orange-soft); font: 800 0.62rem var(--pro-mono); text-transform: uppercase; letter-spacing: 0.09em; }
.ready-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.ready-card { padding: 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.025); }
.ready-card .k { color: var(--pro-muted); font: 800 0.70rem var(--pro-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.ready-card .v { margin-top: 4px; color: #fff; font: 900 1.04rem var(--pro-mono); letter-spacing: -0.04em; }
.ready-card .s { margin-top: 4px; color: var(--pro-muted); font-size: 0.86rem; }
.ready-table { min-width: 1100px; }
.ready-table .action-buy { color: var(--pro-green) !important; }
.ready-table .action-pullback { color: var(--pro-amber) !important; }
.ready-table .action-watch { color: var(--pro-blue) !important; }
.ready-table .why-cell { font-family: var(--pro-sans) !important; color: var(--pro-muted) !important; max-width: 340px; white-space: normal; line-height: 1.3; }

@media (max-width: 1180px) {
  .desk-shell__row { grid-template-columns: 1fr !important; }
  .ready-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  html { font-size: 14px; }
  .app, .wrap { padding: 8px !important; }
  .hero-top, .hero-row, .content, .toolbar, .spot-grid, .summary-grid, .ready-grid { grid-template-columns: 1fr !important; }
  .desk-shell__nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .desk-shell__subrow { grid-template-columns: 1fr !important; }
  .desk-shell__status { justify-content: flex-start !important; }
  .panel-head, .sector-head, .heat-head { align-items: start !important; }
}

/* Mobile hardening layer: keep the whole multi-page terminal usable below tablet width. */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  .app, .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
  }

  .desk-shell {
    padding-top: env(safe-area-inset-top);
  }
  .desk-shell__inner { padding: 8px !important; gap: 7px !important; }
  .desk-shell__row,
  .desk-shell__subrow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 7px !important;
  }
  .desk-shell__brand,
  .desk-shell__meta,
  .desk-shell__status,
  .desk-shell__context { min-width: 0 !important; max-width: 100% !important; }
  .desk-shell__eyebrow { font-size: 0.70rem !important; letter-spacing: 0.08em !important; }
  .desk-shell__title { white-space: normal !important; line-height: 1.15 !important; }
  .desk-shell__nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .desk-shell__nav::-webkit-scrollbar { display: none; }
  .desk-shell__link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 30px !important;
    padding: 7px 9px !important;
    font-size: 0.70rem !important;
    letter-spacing: 0.045em !important;
    white-space: nowrap !important;
  }
  .desk-shell__meta,
  .desk-shell__status {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .desk-shell__meta::-webkit-scrollbar,
  .desk-shell__status::-webkit-scrollbar { display: none; }
  .desk-shell__chip { flex: 0 0 auto !important; font-size: 0.70rem !important; letter-spacing: 0.04em !important; }
  .desk-shell__context { white-space: normal !important; font-size: 0.84rem !important; }

  h1, .title { font-size: clamp(1.25rem, 8vw, 1.78rem) !important; line-height: 1.02 !important; overflow-wrap: anywhere; }
  h2, h3, .panel-title, .sector-name, .heat-title { overflow-wrap: anywhere; }
  .sub, .lead, .copy, .muted, .note p, .note li, .footer-note, .legend,
  .asset-why, .score-caption, .company, .sector-meta, .heat-note,
  p, li { max-width: 100% !important; overflow-wrap: anywhere; word-break: normal; }

  .hero, .shell, .panel, .stat, .note, .dossier, .table-wrap, .mini-card,
  .sector-card, .heat, .rotation, .module, .mini-panel, .info-card, .top20-card,
  .asset, .score-card, .signal-card, .badge-card, .card {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .hero, .shell { padding: 11px !important; }
  .hero-row, .hero-top, .hero-grid, .content, .toolbar, .spot-grid, .summary-grid,
  .stats, .heat-cards, .detail-grid, .theme-grid, .card-body, .tf-grid, .badge-grid,
  .market-grid, .score-grid, .signal-grid, .info-grid, .detail-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  .controls, .actions, .chip-row, .filters, .nav {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .actions a, .chip-row a, .action, .btn, button, select, input {
    max-width: 100% !important;
  }

  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap::after {
    content: "Swipe table →";
    display: block;
    padding: 6px 8px 7px;
    color: var(--pro-muted);
    font: 800 0.55rem var(--pro-mono);
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
  }
  table { max-width: none !important; }
  th, td { padding: 7px 8px !important; }

  .ready-grid { grid-template-columns: minmax(0, 1fr) !important; padding: 8px !important; }
  .ready-table { min-width: 920px !important; }
  .top20-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .metric-row, .model-grid, .quick-grid, .explainer-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Sector-performance matrix: mobile becomes a readable quadrant stack instead of a squeezed desktop matrix. */
  .rotation-body { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
  .rotation-map { min-height: 0 !important; padding: 10px !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,154,58,0.12) !important; }
  .matrix-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  .matrix-top-axis, .matrix-y-axis, .matrix-caption { display: none !important; }
  .matrix-grid {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }
  .matrix-cell { min-height: 0 !important; max-height: 260px !important; }
  .matrix-chip { grid-template-columns: 24px minmax(0, 1fr) auto !important; }
  .rotation-side { padding: 10px !important; }
  .rotation-row { grid-template-columns: 30px minmax(0, 1fr) auto !important; }

  /* TradingView cards and level grids. */
  .asset-head, .section-head, .card-head, .strip, .levels, .level-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 430px) {
  .desk-shell__link { font-size: 0.68rem !important; padding-inline: 8px !important; }
  .desk-shell__chip { font-size: 0.68rem !important; }
  .badge-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .stats { grid-template-columns: minmax(0, 1fr) !important; }
  .heat-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 760px) {
  body[data-shell-page="peg"] .table-wrap { overflow-x: visible !important; }
  body[data-shell-page="peg"] .table-wrap::after { content: "" !important; display: none !important; }
  body[data-shell-page="peg"] table,
  body[data-shell-page="peg"] thead,
  body[data-shell-page="peg"] tbody,
  body[data-shell-page="peg"] tr,
  body[data-shell-page="peg"] td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-shell-page="peg"] thead { display: none !important; }
  body[data-shell-page="peg"] tbody { display: grid !important; gap: 8px !important; padding: 8px !important; }
  body[data-shell-page="peg"] tbody tr {
    border: 1px solid rgba(255,154,58,0.16) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.022) !important;
    overflow: hidden;
  }
  body[data-shell-page="peg"] tbody tr.is-active {
    border-color: rgba(255,154,58,0.48) !important;
    background: rgba(255,140,36,0.075) !important;
  }
  body[data-shell-page="peg"] tbody td {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 7px 9px !important;
    border-bottom: 1px solid rgba(255,255,255,0.055) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body[data-shell-page="peg"] tbody td:last-child { border-bottom: 0 !important; }
  body[data-shell-page="peg"] tbody td::before {
    content: attr(data-label);
    color: var(--pro-muted);
    font: 850 0.55rem var(--pro-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  body[data-shell-page="peg"] .ticker { font-size: 0.95rem !important; }
  body[data-shell-page="peg"] .company {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }
  body[data-shell-page="peg"] .why { line-height: 1.32 !important; }
}

@media (max-width: 760px) {
  body[data-shell-page="cockpit"] .ready-panel .table-wrap { overflow-x: visible !important; }
  body[data-shell-page="cockpit"] .ready-panel .table-wrap::after { content: "" !important; display: none !important; }
  body[data-shell-page="cockpit"] .ready-table { min-width: 0 !important; width: 100% !important; }
  body[data-shell-page="cockpit"] .ready-table thead { display: none !important; }
  body[data-shell-page="cockpit"] .ready-table tbody {
    display: grid !important;
    gap: 10px !important;
    padding: 8px !important;
  }
  body[data-shell-page="cockpit"] .ready-table tr {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 4px 10px !important;
    align-items: baseline !important;
    padding: 12px !important;
    border: 1px solid rgba(255,154,58,0.16) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.022) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-shell-page="cockpit"] .ready-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }
  body[data-shell-page="cockpit"] .ready-table td::before { content: none !important; display: none !important; }
  body[data-shell-page="cockpit"] .ready-table td[data-label="Rank"] { grid-column: 1; font: 800 0.72rem var(--pro-mono); color: var(--pro-muted); }
  body[data-shell-page="cockpit"] .ready-table td[data-label="Ticker"] { grid-column: 2; font: 800 1.05rem var(--pro-mono); }
  body[data-shell-page="cockpit"] .ready-table td[data-label="Confluence"] { grid-column: 3; font: 800 1.05rem var(--pro-mono); text-align: right !important; }
  body[data-shell-page="cockpit"] .ready-table td[data-label="State"] { grid-column: 1 / -1; padding-top: 4px !important; }
  body[data-shell-page="cockpit"] .ready-table td[data-label="Conflicts"] { grid-column: 1 / -1; color: var(--pro-muted) !important; font-size: 0.82rem !important; line-height: 1.35 !important; }
  body[data-shell-page="cockpit"] .ready-table td[data-label="Sector"],
  body[data-shell-page="cockpit"] .ready-table td[data-label="Coverage"],
  body[data-shell-page="cockpit"] .ready-table td[data-label="HELIX"],
  body[data-shell-page="cockpit"] .ready-table td[data-label="Business"],
  body[data-shell-page="cockpit"] .ready-table td[data-label="Resilience"],
  body[data-shell-page="cockpit"] .ready-table td[data-label="Event"],
  body[data-shell-page="cockpit"] .ready-table td[data-label="Valuation"],
  body[data-shell-page="cockpit"] .ready-table td[data-label="Why"] { display: none !important; }

  .ready-card .s { display: none !important; }
  .ready-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 10px !important; }
  .ready-card { padding: 10px !important; }
  .hero .chip-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .hero .chip-row a {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    padding: 12px 10px !important;
    line-height: 1.25 !important;
  }
  .desk-shell__context,
  .desk-shell__status { display: none !important; }
  .desk-shell__nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    flex-wrap: unset !important;
  }
  .desk-shell__link { width: 100% !important; }
  .search-option { grid-template-columns: auto minmax(0, 1fr) !important; }
  .search-option .s { display: none !important; }
  .panel-head { flex-wrap: wrap !important; gap: 8px !important; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  body[data-shell-page="peg"] .verdict,
  body[data-shell-page="cockpit"] .verdict,
  body[data-shell-page="peg"] .status,
  body[data-shell-page="cockpit"] .status {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
  }
}