/* Insider Signals — Discotto Labs
   No build step, no external requests. Space Grotesk is named first so it picks up
   where the reader already has it (matching discottolabs.com) and falls back to the
   platform UI face everywhere else. Nothing is fetched from a CDN. */

:root {
  --font-sans: "Space Grotesk", "SpaceGrotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #f0eee9;
  --ink: #14140f;
  --ink-2: #4a4a42;
  --ink-3: #78786e;
  --rule: #dedbd2;
  --rule-strong: #c3bfb2;
  --accent: #1a1a17;
  --buy: #1c6b4a;
  --buy-soft: #e3f1e9;
  --sell: #9a3412;
  --sell-soft: #f7e9e1;
  --warn: #8a6100;
  --warn-soft: #faf0d8;
  --focus: #3b5bdb;
  --shadow: 0 1px 2px rgba(20, 20, 15, .05), 0 8px 24px -16px rgba(20, 20, 15, .28);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111110;
    --surface: #191918;
    --surface-2: #202020;
    --ink: #f2f1ec;
    --ink-2: #b9b7ae;
    --ink-3: #8b8980;
    --rule: #2e2e2c;
    --rule-strong: #444440;
    --accent: #f2f1ec;
    --buy: #6ed3a2;
    --buy-soft: #14261e;
    --sell: #f0a17c;
    --sell-soft: #2a1a12;
    --warn: #e5bd63;
    --warn-soft: #2a2312;
    --focus: #7c95ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -18px rgba(0, 0, 0, .9);
  }
}

:root[data-theme="dark"] {
  --bg: #111110;
  --surface: #191918;
  --surface-2: #202020;
  --ink: #f2f1ec;
  --ink-2: #b9b7ae;
  --ink-3: #8b8980;
  --rule: #2e2e2c;
  --rule-strong: #444440;
  --accent: #f2f1ec;
  --buy: #6ed3a2;
  --buy-soft: #14261e;
  --sell: #f0a17c;
  --sell-soft: #2a1a12;
  --warn: #e5bd63;
  --warn-soft: #2a2312;
  --focus: #7c95ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -18px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  padding: .6rem 1rem;
  z-index: 20;
}
.skip:focus { left: .5rem; top: .5rem; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left));
}

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem .7rem;
}

.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.brand-mark {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: 1.02rem; letter-spacing: -0.02em; }
.brand-sub {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3);
}

.masthead-side { display: flex; align-items: center; gap: .6rem; }

.asof {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.3;
}

.theme-toggle {
  font: inherit;
  font-size: .72rem;
  font-family: var(--font-mono);
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .25rem .75rem;
  cursor: pointer;
  min-height: 40px;
  min-width: 62px;
}
.theme-toggle:hover { border-color: var(--rule-strong); color: var(--ink); }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: .55rem .8rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- layout ---------- */

main {
  flex: 1 0 auto;
  padding-block: 1.6rem 3rem;
  outline: none;
}

.view-head { max-width: 62ch; margin-bottom: 1.4rem; }
.view-head h1 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }
.lede { color: var(--ink-2); margin-top: .5rem; font-size: .95rem; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}

.field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 180px; max-width: 300px; }
.field-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.field input, .field select {
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .5rem .6rem;
  min-height: 42px;
  width: 100%;
}

/* ---------- idea rows ---------- */

.ideas { display: flex; flex-direction: column; gap: .5rem; }

.idea {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--buy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Sell rows carry a dashed left rule and a ▼ marker so the distinction survives
   greyscale, colour blindness and a phone in direct sun. */
.sell-side .idea {
  border-left: 4px dashed var(--sell);
}

.idea-summary {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: .5rem 1rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: .85rem 1rem;
  cursor: pointer;
}
.idea-summary:hover { background: var(--surface-2); }

.idea-id { min-width: 0; }
.idea-ticker {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.dir-mark {
  font-size: .78rem;
  color: var(--buy);
}
.sell-side .dir-mark { color: var(--sell); }

.idea-id { display: block; overflow: hidden; }

/* Inline elements ignore text-overflow, so the summary line must be a block or the
   company name runs off the card edge on a phone instead of truncating. */
.idea-name {
  display: block;
  font-size: .8rem;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.metric { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.metric-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  font-weight: 500;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge.buy { color: var(--buy); background: var(--buy-soft); }
.badge.sell { color: var(--sell); background: var(--sell-soft); }
.badge.neutral { color: var(--ink-3); background: var(--surface-2); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }

.chev {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink-3);
  justify-self: end;
  transition: transform .15s ease;
}
.idea-summary[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* display:grid would otherwise beat the UA [hidden] rule and every row would render
   permanently expanded. */
.idea-detail[hidden] { display: none; }

.idea-detail {
  border-top: 1px solid var(--rule);
  padding: 1rem;
  background: var(--surface-2);
  display: grid;
  /* An auto track sizes to the widest child's min-content, which the transactions
     table blows straight past on a phone and clips the reason text. minmax(0,1fr)
     lets the track shrink and hands the overflow to .table-scroll where it belongs. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.detail-block h3 {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: .45rem;
  font-weight: 600;
}

.reasons { margin: 0; padding-left: 1.05rem; display: grid; gap: .3rem; }
.reasons li { font-size: .9rem; color: var(--ink-2); }
.reasons li::marker { color: var(--ink-3); }

.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
  margin: 0;
}
.kv div { min-width: 0; }
.kv dt {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
}

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
table.data th, table.data td {
  text-align: right;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  font-weight: 600;
  border-bottom: 1px solid var(--rule-strong);
}
table.data td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tr.group-head th {
  text-align: left;
  padding-top: 1rem;
  font-size: .72rem;
  color: var(--ink);
  letter-spacing: .04em;
  text-transform: none;
}

.pos { color: var(--buy); }
.neg { color: var(--sell); }

.thin { color: var(--warn); font-family: var(--font-mono); font-size: .72rem; }

/* ---------- panels, notes, states ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 1rem; }
.panel h2 { font-size: 1.02rem; margin-bottom: .3rem; }
.panel .note { font-size: .84rem; color: var(--ink-2); margin-top: .5rem; }

.callout {
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
  color: var(--ink);
  padding: .85rem 1rem;
  border-radius: 8px;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.callout strong { display: block; margin-bottom: .2rem; }
.callout.good { border-left-color: var(--buy); background: var(--buy-soft); }
.callout.bad { border-left-color: var(--sell); background: var(--sell-soft); }

.empty {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--ink-2);
  background: var(--surface);
}
.empty h2 { font-size: 1.05rem; margin-bottom: .4rem; color: var(--ink); }
.empty p { font-size: .9rem; max-width: 46ch; margin-inline: auto; }
.empty code {
  font-family: var(--font-mono);
  font-size: .8rem;
  background: var(--surface-2);
  padding: .1rem .3rem;
  border-radius: 4px;
}

/* ---------- method prose ---------- */

.prose { max-width: 68ch; display: grid; gap: 1rem; }
.prose h2 { font-size: 1.08rem; margin-top: .6rem; }
.prose p { color: var(--ink-2); font-size: .95rem; }
.prose strong { color: var(--ink); font-weight: 600; }

.method-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.method-list li { color: var(--ink-2); font-size: .95rem; }
.method-list strong { color: var(--ink); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin: .4rem 0;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .8rem;
}
.stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.stat-num .unit { font-size: .95rem; color: var(--ink-3); }
.stat-cap { display: block; font-size: .76rem; color: var(--ink-3); margin-top: .2rem; }

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

.footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding-block: 1.25rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.disclaimer {
  font-size: .78rem;
  color: var(--ink-2);
  max-width: 80ch;
  line-height: 1.5;
}
.disclaimer strong { color: var(--ink); }
.colophon {
  margin-top: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-3);
}

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  .idea-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id chev"
      "metrics metrics";
    row-gap: .7rem;
  }
  .idea-id { grid-area: id; }
  .chev { grid-area: chev; align-self: start; }
  .idea-metrics {
    grid-area: metrics;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
  .asof { display: none; }
  .view-head h1 { font-size: 1.45rem; }

  /* Stack the backtest table into labelled cards rather than forcing a sideways
     scroll on a phone, since this table is the credibility of the whole product. */
  table.stackable, table.stackable tbody, table.stackable tr, table.stackable td {
    display: block;
    width: 100%;
  }
  table.stackable thead { display: none; }
  table.stackable tr {
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: .5rem .7rem;
    margin-bottom: .5rem;
    background: var(--surface);
  }
  table.stackable tr.group-head {
    border: 0;
    background: none;
    padding: .6rem 0 0;
    margin-bottom: .2rem;
  }
  table.stackable tr.group-head th { display: block; text-align: left; border: 0; padding: 0; }
  table.stackable td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    border-bottom: 1px dotted var(--rule);
    padding: .3rem 0;
    white-space: normal;
  }
  table.stackable td:last-child { border-bottom: 0; }
  table.stackable td::before {
    content: attr(data-label);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-3);
    text-align: left;
    flex: 0 0 auto;
  }
}

@media (min-width: 721px) {
  .idea-metrics { display: contents; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}