/* Public stock pages: layout bits the dashboard stylesheet does not carry.
   Everything else (shell, cards, tables, tiles) comes from styles.css so the
   pages can never drift from the dashboard's look. */
h1 { font-size: 26px; margin: 4px 0 14px; letter-spacing: -.4px; }
h1 .tsym { color: var(--ink-3); font-weight: 600; font-size: 18px; margin-left: 8px; }
.pos { color: var(--buy); }
.neg { color: var(--sell); }
.card { margin-bottom: 12px; }
.chartbox { margin: 12px; height: 430px; }
.chartbox iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.empty { color: var(--ink-3); font-size: 13px; margin: 14px; }
.gate { margin: 0 12px 14px; padding: 10px 12px; font-size: 13px;
        color: var(--ink-2); background: var(--surface-2, rgba(255,255,255,.03));
        border: 1px dashed var(--border); border-radius: 8px; }
.gate a { color: var(--accent); font-weight: 600; }
.legal { max-width: 760px; line-height: 1.65; }
.legal h2 { font-size: 16px; margin: 22px 0 6px; border: 0; padding: 0; }
.legal p, .legal li { color: var(--ink-2); font-size: 14px; }
.foot a { color: var(--accent); }
@media (max-width: 760px) {
  .grid2 { grid-template-columns: 1fr; }
  .chartbox { height: 320px; margin: 8px; }
}

/* ---------- sign-in page ---------- */
.loginwrap { display: flex; justify-content: center; padding: 24px 0 60px; }
.loginbox { max-width: 420px; width: 100%; padding: 26px 24px 20px; }
.loginbox h1 { font-size: 22px; margin: 0 0 8px; }
.loginbox .sub { color: var(--ink-2); font-size: 13.5px; margin-bottom: 20px; line-height: 1.55; }
.loginbox label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.loginbox input[type=email] {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 12px; color: var(--ink); font: inherit;
  font-size: 15px; outline: none; margin-bottom: 12px;
}
.loginbox input[type=email]:focus { border-color: var(--accent); }
.loginbox button {
  width: 100%; background: var(--accent); color: var(--on-accent); border: 0;
  border-radius: 10px; padding: 13px; font: inherit; font-weight: 700;
  font-size: 15px; cursor: pointer; min-height: 48px;
}
.loginbox button:hover { filter: brightness(1.08); }
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 10px; padding: 13px; font-weight: 600; font-size: 15px;
  color: var(--ink); text-decoration: none; min-height: 48px;
}
.gbtn:hover { border-color: var(--ink-3); }
.gbtn .g { font-weight: 800; font-family: system-ui, sans-serif; }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.or span { color: var(--ink-3); font-size: 11px; letter-spacing: .14em; }
.tiny { color: var(--ink-3); font-size: 11.5px; line-height: 1.6; margin-top: 10px; }
.legal-note { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 18px; }
.err { color: var(--sell); font-size: 13px; margin-bottom: 12px; }
.sent .big { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.sent p { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin-bottom: 8px; }
/* the sign-in chip must stay highlighted when a dashboard tab is clicked */
.acct .signin { background: var(--accent); color: var(--on-accent); }
.acct .signin:hover { background: var(--accent); filter: brightness(1.08); color: #fff; }

/* ---------- hub pages & homepage intro ---------- */
.lede { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; max-width: 760px; margin: 0 0 16px; }
.lede a { color: var(--accent); }
.homeh1 { font-size: 25px; line-height: 1.25; margin: 6px 0 12px; max-width: 720px; letter-spacing: -.3px; }
/* .card carries no padding of its own — every other card supplies its own via
   .chead/.cfoot/.chart-wrap. This one is prose, so it has to inset itself or
   the text runs into the border. */
.about { padding: 20px 24px 22px; }
.about .caps { margin-bottom: 0; }
@media (max-width: 640px) { .about { padding: 16px 15px 18px; } }
.say { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin: 0 12px 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 14px; }
.pill { display: inline-block; padding: 6px 12px; border: 1px solid var(--border);
        border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.pill:hover, .pill.on { border-color: var(--accent); color: var(--accent); }
.tkrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
           gap: 2px 10px; padding: 4px 12px 14px; }
.tkrlink { display: flex; gap: 8px; align-items: baseline; padding: 5px 0;
           text-decoration: none; color: var(--ink-2); font-size: 13px; min-width: 0; }
.tkrlink b { color: var(--ink); font-size: 12.5px; flex: none; }
.tkrlink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkrlink:hover b, .tkrlink:hover span { color: var(--accent); }
td.tkr a { color: var(--accent); text-decoration: none; font-weight: 600; }
/* stock pages ship no JS, so headers must not pretend to be sortable */
.legal th, .tkrgrid th { cursor: default; }

/* ---------------------------------------------------------------------------
   Company page, rebuilt to the Terminal design's Company view: back link,
   header card with the big symbol + badge row + KPI grid inside it, then
   560px pairing grids for chart/why-card and the tables.
   --------------------------------------------------------------------------- */
.back { display: inline-block; font-family: "JetBrains Mono", monospace;
        font-size: 10.5px; color: #7C848C; margin: 2px 0 12px; text-decoration: none; }
.back:hover { color: var(--accent); }

.cohead { border: 1px solid var(--border); border-radius: 18px;
          background: var(--surface); padding: 22px 24px; margin-bottom: 16px; }
.cohead .top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.cohead .sym { font-weight: 800; font-size: 46px; line-height: .95;
               letter-spacing: -.03em; margin: 0; }
.cohead .nm { padding-bottom: 6px; min-width: 0; flex: 1 1 200px; }
.cohead .nm .n1 { font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }
.cohead .nm .n2 { font-family: "JetBrains Mono", monospace; font-size: 11.5px;
                  color: #7C848C; margin-top: 4px; }
.cohead .badges { display: flex; gap: 8px; flex: 0 1 auto; flex-wrap: wrap;
                  min-width: 0; padding-bottom: 8px; }
/* On a narrow screen the badge row cannot share a line with the company name:
   `flex: none` meant it could not shrink either, so WATCHING ran off the card
   (reported 2026-09-02). Below 640px the badges get their own full-width row. */
@media (max-width: 640px) {
  .cohead .badges { flex: 1 0 100%; padding-bottom: 0; }
  .cohead { padding: 18px 16px; }
}
.cokpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 12px; margin-top: 20px; }
.ck { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.ck .k { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
         letter-spacing: .12em; color: #7C848C; }
.ck .v { font-family: "JetBrains Mono", monospace; font-size: var(--fs-value, 18px); margin-top: 6px; }
.ck .v.pos { color: var(--accent); } .ck .v.neg { color: var(--sell); }
.ck .s { font-size: var(--fs-label, 12px); color: #6E767E; margin-top: 3px; }

.g560 { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
        gap: 16px; margin-bottom: 16px; align-items: stretch; }
.g560 > .card { margin-bottom: 0; }
@media (max-width: 640px) { .g560 { grid-template-columns: 1fr; } }
.colstack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.colstack > .card { margin-bottom: 0; }
.colstack > .grow { flex: 1; }

.whycard { border: 1px solid #2A3417; border-radius: 18px;
           background: linear-gradient(160deg, #131A0B, #0B0C0F 70%);
           padding: 20px 22px; }
.whycard .wk { font-family: "JetBrains Mono", monospace; font-size: 9.5px;
               letter-spacing: .18em; color: var(--accent); }
.whycard .wt { font-weight: 700; font-size: 19px; letter-spacing: -.015em;
               margin-top: 8px; line-height: 1.3; }
.whycard .wd { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.6; }
.whycard .wd b { color: var(--ink); }
.whycard .wbtns { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.wbtn { border: 1px solid #2A3037; color: var(--accent); font-weight: 600;
        font-size: 12.5px; padding: 9px 14px; border-radius: 9px; text-decoration: none; }
.wbtn.ghost { color: var(--ink-2); }
.wbtn:hover { border-color: #4C5660; }

.hrow { display: flex; align-items: center; gap: 12px; padding: 11px 21px;
        border-top: 1px solid #101317; }
.hrow .hmid { min-width: 0; flex: 1; }
.hrow .hn { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.hrow .hs { font-family: "JetBrains Mono", monospace; font-size: 10px;
            color: #666E76; margin-top: 2px; }
.hrow .bar { flex: none; width: 78px; height: 5px; border-radius: 3px;
             background: #171C22; overflow: hidden; }
.hrow .bar i { display: block; height: 100%; background: var(--accent);
               border-radius: 3px; }
.hrow .hv { font-family: "JetBrains Mono", monospace; font-size: 12.5px;
            flex: none; width: 62px; text-align: right; }

.dash2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
         gap: 16px; }
.dashed { border: 1px dashed #232930; border-radius: 16px; background: #090A0C;
          padding: 18px 20px; }
.dashed .dk { font-family: "JetBrains Mono", monospace; font-size: 9px;
              letter-spacing: .16em; color: #535B63; }
.dashed .dt { font-size: 13.5px; font-weight: 600; margin-top: 9px; color: var(--ink-2); }
.dashed .dd { font-size: 11.5px; color: #666E76; margin-top: 6px; line-height: 1.5; }

.txfoot { padding: 12px 21px; font-family: "JetBrains Mono", monospace;
          font-size: 9.5px; color: #535B63; }

/* insider-transactions grid, the design's column anatomy */
.txhead, .txrow {
  display: grid; column-gap: 14px; align-items: center; padding: 12px 21px;
  grid-template-columns: minmax(120px, 1.6fr) 46px minmax(72px, .8fr)
                         minmax(52px, .6fr) minmax(56px, .7fr);
}
.txhead { padding: 9px 21px; border-top: 1px solid #14181C;
          border-bottom: 1px solid #14181C;
          font-family: "JetBrains Mono", monospace; font-size: 9px;
          letter-spacing: .14em; color: #535B63; }
.txhead .r { text-align: right; }
.txrow { border-bottom: 1px solid #101317; }
.txrow:hover { background: #0F1217; }
.txwho { min-width: 0; }
.txwho .w1 { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.txwho .w2 { font-family: "JetBrains Mono", monospace; font-size: 10px;
             color: #666E76; margin-top: 2px; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.side { font-family: "JetBrains Mono", monospace; font-size: 8.5px;
        letter-spacing: .06em; padding: 3px 0; border-radius: 4px;
        text-align: center; border: 1px solid var(--border); }
.side.buy { color: var(--accent); border-color: rgba(198,242,78,.25);
            background: rgba(198,242,78,.08); }
.side.sell { color: var(--sell); border-color: rgba(255,90,78,.25);
             background: rgba(255,90,78,.08); }
.txrow .mono { font-family: "JetBrains Mono", monospace; font-size: 11.5px;
               color: var(--ink-2); }
.txrow .mono.r { text-align: right; }
.txrow .mono.pos { color: var(--accent); } .txrow .mono.neg { color: var(--sell); }
@media (max-width: 560px) {
  /* Five cells were being squeezed into three columns, so the value wrapped
     onto a second line underneath the name and its header was hidden along
     with SHARES — both carry .r. The money ended up an unlabelled number
     floating under a person's name. Here the value sits beside the BUY/SELL
     chip where the eye already is, and the date takes the line below. */
  .txhead, .txrow {
    grid-template-columns: minmax(0, 1fr) 40px auto;
    column-gap: 10px; row-gap: 3px; padding-left: 15px; padding-right: 15px;
  }
  .txhead > :nth-child(4), .txrow > :nth-child(4) { display: none; }  /* SHARES */
  .txhead > :nth-child(5), .txrow > :nth-child(5) { display: block; order: 3; }
  .txrow > :nth-child(3) { order: 4; grid-column: 1 / -1; text-align: left;
                           font-size: 10.5px; color: #5E666E; }
  .txhead > :nth-child(3) { display: none; }   /* a lone FILED reads as a stray row */
  .txrow .mono { font-size: 11px; }
}

/* ---- hub pages, to the design's Signals/Congress anatomy ---- */
.intro { padding: 19px 21px; }
.hubh1 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 0;
         line-height: 1.3; }
.introp { font-size: 12.5px; color: var(--ink-2); margin: 7px 0 0;
          line-height: 1.6; max-width: 760px; }
.introp b { color: var(--ink); }
.sigcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 14px; margin-bottom: 12px; }
.sigcard { border: 1px solid var(--border); border-radius: 16px;
           background: var(--surface); padding: 18px 20px; }
.sigcard .sk { font-family: "JetBrains Mono", monospace; font-size: 9px;
               letter-spacing: .16em; color: var(--accent); }
.sigcard .sv { font-size: 30px; font-weight: 700; letter-spacing: -.03em;
               margin-top: 10px; line-height: 1.05; }
.sigcard .sv a { color: var(--ink); text-decoration: none; }
.sigcard .sv a:hover { color: var(--accent); }
.sigcard .sd { font-size: 12px; color: #7C848C; margin-top: 6px; line-height: 1.45; }

/* ---------- watchlist ----------
   The toggle sits with the signal badges because that is where the eye
   already is on arrival, and it is a form rather than a button+fetch: these
   pages ship no JavaScript, so anything requiring a bundle would be dead. */
.watchf { display: inline; }
.wtag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-label, 12px); font-weight: 600; letter-spacing: .06em;
  padding: 6px 12px; border-radius: 3px; cursor: pointer; line-height: 1;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--ink-2); text-decoration: none;
}
.wtag:hover { border-color: var(--accent); color: var(--accent); }
.wtag.on { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }

/* ---------- the personal page ---------- */
.wfull { margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; font-size: 13px;
         color: var(--ink); background: rgba(198,242,78,.07);
         border: 1px solid rgba(198,242,78,.3); }
.wrow { display: flex; align-items: center; gap: 16px; padding: 13px 21px;
        border-top: 1px solid #101317; }
.wrow:first-of-type { border-top: 0; }
.wl { min-width: 150px; flex: 1 1 150px; }
.wtk { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
.wtk:hover { color: var(--accent); }
.wnm { font-size: 11.5px; color: #666E76; margin-top: 2px; }
.wnums { display: grid; grid-template-columns: repeat(6, minmax(96px, 1fr)); gap: 0; }
.wn { display: flex; flex-direction: column; padding: 0 16px; }
/* the pipe Gal asked for: a quiet rule between columns so the eye can track
   which number belongs to which label */
.wnums .wn + .wn, .wagg .wn + .wn { border-left: 1px solid var(--border, #23282e); }
.wn b { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 500; }
.wn i { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
        letter-spacing: .1em; color: #6E767E; font-style: normal; margin-top: 4px;
        white-space: nowrap; }
.wx { background: none; border: 1px solid var(--border); border-radius: 6px;
      color: #666E76; cursor: pointer; padding: 4px 9px; font-size: 12px; }
.wx:hover { border-color: var(--sell); color: var(--sell); }
.wev { display: flex; align-items: baseline; gap: 12px; padding: 9px 21px;
       border-top: 1px solid #101317; font-size: 12.5px; }
.wk { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .1em;
      color: #5E666E; width: 74px; flex: none; }
.wtk2 { font-weight: 700; color: var(--ink); text-decoration: none; width: 54px; flex: none; }
.wtk2:hover { color: var(--accent); }
.ww { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap; }
.wd { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #5E666E; flex: none; }
@media (max-width: 640px) {
  .wrow { flex-wrap: wrap; gap: 10px; padding: 12px 15px; }
  .wnums { gap: 16px; }
  .wev { flex-wrap: wrap; gap: 8px; padding: 9px 15px; }
  .ww { flex: 1 0 100%; white-space: normal; }
}

/* watchlist: quiet states, activist tag, analysis card */
.wn b.quiet, .quiet { color: #565E66; font-size: 12px; letter-spacing: .04em; }
.wact { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em;
        color: var(--warn, #E0A030); border: 1px solid rgba(224,160,48,.35);
        border-radius: 3px; padding: 2px 5px; margin-left: 7px; vertical-align: 2px; }
.wagg { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 21px;
        border-bottom: 1px solid #101317; }
.warow { display: grid; grid-template-columns: 150px minmax(60px, 1fr) 26px minmax(0, 2fr);
         gap: 12px; align-items: center; padding: 8px 21px; border-top: 1px solid #101317; }
.warow:first-of-type { border-top: 0; }
.wasec { font-size: 12px; color: var(--ink-2); overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.wabar { height: 8px; background: #12161A; border-radius: 4px; overflow: hidden; }
.wabar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.wan { font-family: "JetBrains Mono", monospace; font-size: 11.5px; text-align: right; }
.wat { font-family: "JetBrains Mono", monospace; font-size: 10px; color: #5E666E;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .wagg { gap: 16px; padding: 12px 15px; }
  .warow { grid-template-columns: 105px 1fr 22px; padding: 8px 15px; }
  .wat { display: none; }
}

/* ---- portfolio backtester ---- */
.btform { padding: 14px 18px 4px; }
.btlegs { display: flex; flex-wrap: wrap; gap: 8px; }
.btrow { display: flex; gap: 4px; }
.bti { background: var(--bg2, #111); color: inherit; border: 1px solid var(--line, #2a2a2a);
       padding: 7px 9px; font: inherit; width: 108px; text-transform: uppercase; }
.btw { width: 54px; text-transform: none; }
.btpars { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-top: 12px; }
.btpars label { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
                letter-spacing: .06em; color: var(--mut, #999); }
.btpars .bti { text-transform: none; width: 96px; }
.btgo { background: var(--acc, #4ea1ff); color: #06111f; border: 0; font: inherit;
        font-weight: 700; padding: 9px 18px; cursor: pointer; }
.bthint { padding: 8px 0 10px; font-size: 11.5px; color: var(--mut, #999); }
.btm { padding: 4px 18px 16px; font-size: 12.5px; line-height: 1.55; color: var(--mut, #aaa); }
.btchart { width: 100%; height: auto; display: block; padding: 6px 10px 0; box-sizing: border-box; }
.btg { stroke: var(--line, #2a2a2a); stroke-width: 1; }
.btl { fill: var(--mut, #888); font-size: 11px; }
.btport { stroke: var(--acc, #4ea1ff); stroke-width: 2.2; }
.btspy  { stroke: #b98a2f; stroke-width: 1.6; }
.btinv  { stroke: var(--mut, #777); stroke-width: 1.2; stroke-dasharray: 4 4; }
.btleg { display: flex; gap: 18px; padding: 8px 18px 4px; font-size: 11px;
         letter-spacing: .06em; color: var(--mut, #999); }
.btk::before { content: ""; display: inline-block; width: 14px; height: 3px;
               margin-right: 6px; vertical-align: middle; }
.btkp::before { background: var(--acc, #4ea1ff); }
.btks::before { background: #b98a2f; }
.btki::before { background: var(--mut, #777); }
@media (max-width: 560px) {
  .bti { width: 84px; } .btw { width: 46px; }
}

/* ---- fundamentals time machine ---- */
.asofform { display: flex; gap: 8px; align-items: center; }
.asofform .bti { width: 150px; text-transform: none; }
.fnl { font-size: 11px; letter-spacing: .06em; color: var(--mut, #999); white-space: nowrap; }

/* ---- portfolio analysis donuts ---- */
.donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          gap: 20px; padding: 16px 21px 18px; }
.dtitle { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
          letter-spacing: .12em; color: #7C848C; margin-bottom: 10px; }
.donutwrap { display: flex; gap: 18px; align-items: center; }
.donut { flex: none; width: 128px; }
.donut svg { display: block; width: 100%; transform: rotate(0deg); }
.dc1 { font: 700 7.5px "JetBrains Mono", monospace; fill: var(--ink, #E8EAED); }
.dc2 { font: 500 3.2px "JetBrains Mono", monospace; letter-spacing: .12em; fill: #7C848C; }
.dlegend { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.dlrow { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-label, 12px); }
.dlrow i { flex: none; width: 9px; height: 9px; border-radius: 2.5px; align-self: center; }
.dln { color: var(--ink-2, #B4BBC2); white-space: nowrap; }
.dlrow b { font-family: "JetBrains Mono", monospace; }
.dlt { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
       color: #6E767E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .donutwrap { flex-direction: column; align-items: flex-start; } }

/* ---- account page (Claude Design mockup, real data only) ---- */
.acct-head { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap;
             padding: 10px 0 24px; border-bottom: 1px solid #14181C; }
.acct-id { display: flex; align-items: center; gap: 18px; }
.avatar { width: 64px; height: 64px; border-radius: 18px; flex: none;
          background: linear-gradient(135deg, #C6F24E, #5A8CFF);
          display: flex; align-items: center; justify-content: center;
          color: #08090B; font-weight: 800; font-size: 24px; }
.kick { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
        letter-spacing: .18em; color: #7C848C; }
.acct-name { font-weight: 800; font-size: 32px; letter-spacing: -.025em; margin-top: 4px; }
.acct-meta { display: flex; align-items: center; gap: 12px; margin-top: 7px; flex-wrap: wrap;
             font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
             color: #7C848C; }
.pill { border: 1px solid #2A3037; border-radius: 999px; padding: 3px 10px; color: var(--accent); }
.acct-actions { margin-left: auto; display: flex; gap: 10px; padding-bottom: 4px; }
.abtn { border-radius: 10px; padding: 9px 16px; font-size: 12.5px; font-weight: 700;
        background: var(--accent); color: var(--on-accent); text-decoration: none; }
.abtn.ghost { background: none; border: 1px solid #2A3037; color: var(--ink-2); font-weight: 600; }
.abtn.ghost:hover { border-color: var(--accent); color: var(--ink); }

.kstrip { border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
          margin-top: 22px; display: grid; overflow: hidden;
          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kcell { padding: 16px 18px; border-right: 1px solid #14181C; border-bottom: 1px solid #14181C;
         margin-right: -1px; margin-bottom: -1px; }
.kk { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
      letter-spacing: .12em; color: #7C848C; }
.kv { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 21px;
      letter-spacing: -.02em; margin-top: 8px; }
.ks { font-size: var(--fs-micro, 10.5px); color: #5A6168; margin-top: 3px; }

.sigrow { margin-top: 22px; display: grid; gap: 12px;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sig { display: block; border: 1px solid #2A3037; border-radius: 16px; padding: 16px 18px;
       background: linear-gradient(180deg, rgba(198,242,78,.05), transparent 70%), var(--surface);
       text-decoration: none; color: inherit; }
.sig:hover { border-color: var(--accent); }
.sigtag { display: inline-block; font-family: "JetBrains Mono", monospace;
          font-size: var(--fs-micro, 10.5px); letter-spacing: .14em;
          border: 1px solid; border-radius: 6px; padding: 3px 8px; }
.sig.acc .sigtag, .sig.acc .sigfoot { color: var(--accent); border-color: rgba(198,242,78,.35); }
.sig.neg .sigtag, .sig.neg .sigfoot { color: #FF6B6B; border-color: rgba(255,107,107,.35); }
.sig.blue .sigtag, .sig.blue .sigfoot { color: #5A8CFF; border-color: rgba(90,140,255,.35); }
.sigline { display: flex; align-items: baseline; gap: 10px; margin-top: 11px; }
.sigline b { font-family: "JetBrains Mono", monospace; font-size: 17px; }
.sigline span { font-size: 12.5px; color: var(--ink-2); }
.sigfoot { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
           margin-top: 9px; border: 0; }

.sechead { margin-top: 34px; display: flex; align-items: baseline; gap: 14px; }
.sect { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.secsub { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
          letter-spacing: .14em; color: #7C848C; white-space: nowrap; }
.secline { flex: 1; height: 1px; background: #16191D; }

.wltable { margin-top: 14px; }
.wlhead, .wlrow { display: grid; align-items: center; gap: 0 12px; padding: 12px 20px;
  grid-template-columns: minmax(180px,1fr) 84px repeat(5, minmax(84px,.75fr)) minmax(76px,.6fr) 32px; }
.wlhead { border-bottom: 1px solid #14181C; font-family: "JetBrains Mono", monospace;
          font-size: var(--fs-micro, 10.5px); letter-spacing: .13em; color: #7C848C; }
.wlrow { border-bottom: 1px solid #0F1216; }
.wlrow:last-child { border-bottom: 0; }
.wlrow:hover { background: #0E1014; }
.wlid { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tchip { flex: none; width: 40px; height: 34px; border-radius: 9px; border: 1px solid;
         display: flex; align-items: center; justify-content: center;
         font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700; }
.wlnm { min-width: 0; }
.wlnm .wnm { font-size: 11px; color: #7C848C; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.wlhead .r, .wlrow .r { text-align: right; }
.wlrow .r { font-size: 12.5px; }
.wlrow .r svg { display: inline-block; vertical-align: middle; }
.wlrow .dim { color: #7C848C; }
.wlx { background: none; border: 0; color: #4A5158; cursor: pointer; font-size: 15px; }
.wlx:hover { color: #FF6B6B; }
@media (max-width: 900px) {
  .wlhead { display: none; }
  .wlrow { grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)) 30px; }
  .wlrow .r:nth-child(2), .wlrow .r:nth-child(6), .wlrow .r:nth-child(7) { display: none; }
}

.midgrid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,.7fr);
            gap: 16px; align-items: start; }
@media (max-width: 1100px) { .midgrid { grid-template-columns: 1fr; } }
.mixstack { display: grid; gap: 16px; margin-top: 14px; }
.mixstack .mixrow { grid-template-columns: 110px minmax(0,1fr) 16px; }
.mixstack .mixt { display: none; }
.acard { padding: 20px 24px; }
.mixgrid { margin-top: 16px; display: grid; gap: 9px; }
.mixrow { display: grid; grid-template-columns: 150px minmax(0,1fr) 18px 90px;
          align-items: center; gap: 12px; }
.mixl { font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; }
.mixtrack { height: 9px; border-radius: 5px; background: #08090C;
            position: relative; overflow: hidden; }
.mixtrack i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.mixn { font-family: "JetBrains Mono", monospace; font-size: 11.5px; text-align: right; }
.mixt { font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
        color: #7C848C; text-align: right; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; }
.mixfoot { font-family: "JetBrains Mono", monospace; font-size: 9px;
           letter-spacing: .08em; color: #4A5158; margin-top: 16px; line-height: 1.8; }

.feedgrid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
            gap: 16px; align-items: start; }
@media (max-width: 900px) { .feedgrid { grid-template-columns: 1fr; } }
/* A fifth column for the size of the event. It is its own column rather
   than more words in .ftext, because the amounts have to line up to be
   scannable, and .ftext ellipsises long names. */
.fevent { display: grid;
          grid-template-columns: 76px 52px minmax(0,1fr) auto 88px;
          gap: 0 14px; align-items: center; padding: 11px 20px;
          border-bottom: 1px solid #0F1216; text-decoration: none; color: inherit; }
.famt { font-family: "JetBrains Mono", monospace; font-size: 12px;
        font-weight: 600; color: var(--ink-2); white-space: nowrap;
        font-variant-numeric: tabular-nums; text-align: right; }
.famt.pos { color: var(--buy); } .famt.neg { color: var(--sell); }
@media (max-width: 560px) {
  /* On a phone the name and the amount cannot share a line without one of
     them being cut, and the amount is the part that must survive. */
  .fevent { grid-template-columns: 60px 46px minmax(0,1fr) auto;
            row-gap: 2px; padding: 10px 14px; }
  .fdate { grid-column: 3 / -1; text-align: left; }
}
.fevent:hover { background: #0E1014; }
.fevent b { font-family: "JetBrains Mono", monospace; font-size: 12px; }
.ftext { font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; }
.fdate { text-align: right; font-family: "JetBrains Mono", monospace;
         font-size: 10px; color: #7C848C; }
.ftag { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .08em;
        border: 1px solid #2A3037; border-radius: 6px; padding: 3px 0;
        text-align: center; color: #7C848C; }
.ftag.acc { color: var(--accent); border-color: rgba(198,242,78,.3); }
.ftag.amber { color: #E0B25A; border-color: rgba(224,178,90,.3); }
.ftag.purple { color: #B98CFF; border-color: rgba(185,140,255,.3); }
.ftag.blue { color: #5A8CFF; border-color: rgba(90,140,255,.3); }
.fmore { display: block; padding: 13px 20px; text-align: center; font-size: 12px;
         font-weight: 600; color: #7C848C; text-decoration: none; }
.fmore:hover { color: var(--accent); }

.acol { display: grid; gap: 16px; margin-top: 48px; }
.urow { display: flex; justify-content: space-between; align-items: baseline;
        gap: 12px; padding: 9px 0; border-bottom: 1px solid #0F1216; font-size: 12.5px;
        color: var(--ink-2); }
.urow b { color: var(--ink); font-size: 11px; letter-spacing: .05em; }
.utrack { height: 6px; border-radius: 4px; background: #08090C; margin-top: 10px; overflow: hidden; }
.utrack i { display: block; height: 100%; border-radius: 4px;
            background: linear-gradient(90deg, rgba(198,242,78,.4), var(--accent)); }
.unote { font-size: 11.5px; color: #6E767E; margin-top: 12px; line-height: 1.6; }
.acct-foot { margin-top: 26px; font-family: "JetBrains Mono", monospace;
             font-size: 9.5px; letter-spacing: .1em; color: #4A5158; }

/* ---- legal docs + FAQ (Pages mockup) ---- */
.legalgrid { display: grid; grid-template-columns: 220px minmax(0,1fr);
             gap: 40px; align-items: start; padding-top: 14px; }
@media (max-width: 800px) { .legalgrid { grid-template-columns: 1fr; gap: 18px; } }
.legalside { position: sticky; top: 80px; }
@media (max-width: 800px) { .legalside { position: static; } }
.ltabs { margin-top: 14px; display: grid; gap: 4px; }
.ltab { display: block; padding: 9px 13px; border-radius: 9px; font-size: 13px;
        font-weight: 600; color: #8B939B; text-decoration: none; }
.ltab:hover { color: var(--ink); background: var(--surface-2); }
.ltab.on { color: var(--on-accent); background: var(--accent); }
.lupd { margin-top: 22px; font-family: "JetBrains Mono", monospace; font-size: 9.5px;
        letter-spacing: .1em; color: #4A5158; line-height: 1.9; }
.lh1 { font-weight: 800; font-size: 34px; letter-spacing: -.025em; margin: 0; }
.lstack { margin-top: 22px; display: grid; gap: 14px; }
.lsec { border: 1px solid var(--border); border-radius: 14px;
        background: var(--surface); padding: 18px 22px; }
.lhead { display: flex; gap: 12px; align-items: baseline; }
.ln { flex: none; font-family: "JetBrains Mono", monospace; font-size: 10px;
      color: var(--accent); }
.lh { font-size: 15px; font-weight: 700; }
.lbody { font-size: 13px; color: #9BA3AB; line-height: 1.7; margin-top: 10px;
         max-width: 72ch; }
.lbody a { color: var(--accent); }

.faqwrap { max-width: 820px; padding-top: 14px; }
.fqcat { margin: 26px 0 10px; }
.fqcard { overflow: hidden; }
.faq { border-bottom: 1px solid #14181C; }
.faq:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 17px 22px; font-size: 14.5px;
               font-weight: 600; list-style: none; display: flex;
               align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▾"; margin-left: auto; color: #666E76;
                      font-size: 13px; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { background: #0E1014; }
.fa { padding: 0 22px 18px; font-size: 13.5px; color: #9BA3AB;
      line-height: 1.7; max-width: 64ch; }
.fqfoot { margin-top: 18px; text-align: center; font-size: 13px; color: #7C848C; }

/* styles.css has a generic `.top` rule for the old sticky header; it leaked
   onto the company card's inner .top row — dark band, bottom border, no side
   padding, even position:sticky. Reset every leaked property explicitly. */
.cohead .top { position: static; z-index: auto; background: none;
               border-bottom: 0; margin-bottom: 0; padding: 6px 4px 0; }

.alsave { margin-top: 14px; width: 100%; text-align: center; border: 0; cursor: pointer; font: inherit; }
.acard .crow b { font-size: 12.5px; display: block; }
.acard .crow span:not(.sw) { font-size: 11px; color: #666E76; }

/* ---- positioning chart (filings on the price path) ---- */
.pchart { width: 100%; height: auto; display: block; padding: 4px 8px 0; box-sizing: border-box; }
.pg { stroke: #171B20; stroke-width: 1; }
.pl { fill: #6E767E; font: 10.5px "JetBrains Mono", monospace; }
.pline { stroke-width: 2; }
.pline.up { stroke: var(--accent); } .pline.dn { stroke: var(--sell); }
.mkb { fill: var(--accent); } .mks { fill: var(--sell); }
.mkd { fill: none; stroke: #B98CFF; stroke-width: 1.6; }
.mk1 { fill: none; stroke: var(--warn); stroke-width: 1.6; }
.pleg { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 18px 4px;
        font: var(--fs-micro, 10.5px) "JetBrains Mono", monospace;
        letter-spacing: .08em; color: #7C848C; }
.pk { display: inline-flex; align-items: center; gap: 6px; }
.pk i { width: 9px; height: 9px; display: inline-block; }
.pk .lb { background: var(--accent); clip-path: polygon(50% 100%, 0 0, 100% 0); }
.pk .ls { background: var(--sell); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.pk .ld { border: 1.6px solid #B98CFF; transform: rotate(45deg); width: 7px; height: 7px; }
.pk .l1 { border: 1.6px solid var(--warn); border-radius: 50%; width: 7px; height: 7px; }

/* --- Executive pay vs shareholder return --- */
.eprow{display:grid;grid-template-columns:52px repeat(5,1fr);gap:8px;
  align-items:center;padding:9px 16px;border-bottom:1px solid var(--border)}
.eprow:last-of-type{border-bottom:0}
.ephead .epy,.ephead .epv{font-size:var(--fs-micro);letter-spacing:.06em;
  color:var(--ink-3);font-weight:600}
.ephead{border-bottom:1px solid var(--border)}
.epy{font-size:var(--fs-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
.epv{font-size:var(--fs-value);font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}
.epv.dim{color:var(--ink-3)}

/* --- Clinical pipeline --- */
.tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:1px;background:var(--border);border-bottom:1px solid var(--border)}
.tpcell{background:var(--surface);padding:12px 14px}
.tpn{font-size:calc(var(--fs-value) * 1.35);font-variant-numeric:tabular-nums;
  line-height:1.1}
.tpk{font-size:var(--fs-label);color:var(--ink-2);margin-top:2px}
.tpl{font-size:var(--fs-micro);letter-spacing:.06em;color:var(--ink-3);margin-top:3px}
.tsub{padding:14px 16px 6px}
@media (max-width:640px){
  .eprow{grid-template-columns:44px repeat(2,1fr);row-gap:4px}
  .eprow .epv:nth-child(4),.eprow .epv:nth-child(6){display:none}
}

/* --- The situation (verdict) block --- */
.verdict{border:1px solid var(--border);background:var(--surface);border-radius:4px;
  padding:14px 18px;margin:0 0 14px}
.vhead{font-size:var(--fs-micro);letter-spacing:.08em;color:var(--ink-3);
  margin-bottom:9px}
.vline{display:flex;gap:10px;align-items:baseline;padding:4px 0;
  font-size:calc(var(--fs-value) * .88);line-height:1.5}
.vdot{width:8px;height:8px;border-radius:50%;flex:none;position:relative;top:-1px}
.vdot.vgood{background:var(--buy)}
.vdot.vbad{background:var(--sell)}
.vdot.vmix{background:linear-gradient(90deg,var(--buy) 50%,var(--sell) 50%)}

/* --- CEO pay league table --- */
.pyrow{display:grid;grid-template-columns:64px minmax(0,1fr) repeat(3,110px);
  gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border)}
.pyrow:last-of-type{border-bottom:0}
.pyhead,.pyhead .pytk,.pyhead .pyv,.pyhead .pyco{font-size:var(--fs-micro);
  letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.pytk{font-weight:700;text-decoration:none;color:var(--accent,#b7f36b)}
.pyn{font-size:var(--fs-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pysub{font-size:var(--fs-micro);color:var(--ink-3)}
.pyv{font-size:var(--fs-value);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
.pyv.dim{color:var(--ink-3)}
.pynote{padding:6px 16px 16px}
.pynote p{margin:0 0 10px;max-width:72ch;font-size:calc(var(--fs-value)*.86);
  line-height:1.55;color:var(--ink-2)}
@media (max-width:700px){
  .pyrow{grid-template-columns:56px minmax(0,1fr) 92px;row-gap:2px}
  .pyrow .pyv:nth-child(4){display:none}
}

/* --- Six facts, ranked against the sector --- */
.factstrip{border:1px solid var(--border);background:var(--surface);border-radius:4px;
  margin:0 0 14px;overflow:hidden}
.fshead{font-size:var(--fs-micro);letter-spacing:.08em;color:var(--ink-3);
  padding:12px 18px 10px;border-bottom:1px solid var(--border)}
.fshead a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.fshead a:hover{color:var(--ink)}
.fsrow{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,.9fr);
  gap:14px;align-items:baseline;padding:9px 18px;border-bottom:1px solid var(--border)}
.fsrow:last-child{border-bottom:0}
.fsk{font-size:var(--fs-micro);letter-spacing:.09em;color:var(--ink-3)}
/* One text size across the whole row. The fact was 16.6px and the comparison
   beside it 12px, which read as two different kinds of statement when they
   are the same kind (Yoni, 2026-09-03). Emphasis is carried by weight and
   colour instead, which is what makes a number findable anyway. */
.factstrip{--fs-strip:14.5px}
.fsv{font-size:var(--fs-strip);font-variant-numeric:tabular-nums;
  color:var(--ink-2);line-height:1.45}
/* The FIGURE is the row; the sentence around it is context. Colouring the
   whole sentence made neither stand out, so direction lives on the number
   alone and the words stay quiet. */
.fsv b{color:var(--ink);font-weight:700;letter-spacing:-.01em}
/* the qualifiers under a headline figure: same fact, smaller voice */
.fssub{font-size:var(--fs-strip);color:var(--ink-3);margin-top:2px;
  font-variant-numeric:tabular-nums}
.fsc{font-size:var(--fs-strip);color:var(--ink-2);text-align:right;
  line-height:1.45}
.fsc b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.fsdim{color:var(--ink-3)}
/* Absence is a state, not a failure: same space, no colour, no alarm. */
.fsnone .fsv{color:var(--ink-3)}
/* Direction, not rank: a minus sign is red wherever it appears, and plain
   white now means "nothing happened" rather than "middle of the sector". */
.fspos .fsv b{color:var(--buy)}
.fsneg .fsv b{color:var(--sell)}
@media (max-width:640px){
  .fsrow{grid-template-columns:88px minmax(0,1fr);row-gap:2px}
  .fsc{grid-column:2;text-align:left}
}

/* --- company search (server-side, no JS) --- */
.cosearch{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cosearch input[type=search]{flex:1 1 320px;min-width:0;background:var(--bg);
  border:1px solid var(--border);color:var(--ink);border-radius:4px;
  padding:11px 14px;font:inherit;font-size:calc(var(--fs-value)*.95)}
.cosearch input[type=search]:focus{outline:2px solid var(--accent,#b7f36b);
  outline-offset:1px;border-color:transparent}
.cosearch button{background:var(--accent,#b7f36b);color:#10160c;border:0;
  padding:11px 20px;border-radius:4px;font:inherit;font-weight:700;cursor:pointer}
.cofound{margin:12px 0 0;font-size:var(--fs-label);color:var(--ink-2)}


/* --- the 12-month return on the price card ------------------------------
   Twice on purpose: big and bare on the right where the eye lands, and
   spelled out under the caption on the left where a reader who does not
   know what the corner number means will find it named. */
.pret{font-weight:800;font-size:31px;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;
  display:flex;align-items:baseline;gap:7px}
.pret.pos{color:var(--buy)} .pret.neg{color:var(--sell)}
.pretu{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;color:var(--ink-3)}
.pretl{font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;color:var(--ink-3);margin-top:7px}
.pretl b{font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}
.pretl b.pos{color:var(--buy)} .pretl b.neg{color:var(--sell)}
@media (max-width:640px){ .pret{font-size:25px} }