/* Application shell.
   Tokens, buttons and type come from site.css — this file only adds the layout
   the marketing pages do not have: a fixed sidebar, a scrolling feed, and the
   row that carries a citation. Nothing here redefines a colour or a font size
   that site.css already owns; a second definition is a second thing to keep in
   sync, and it is always the one that drifts. */

:root{
  --bull:#1B6B4A; --bull-bg:rgba(27,107,74,.10);
  --bear:#9A3324; --bear-bg:rgba(154,51,36,.09);
  --sidebar-w:250px;
}
body.app{display:flex;height:100vh;overflow:hidden;background:var(--card)}

/* ─────────────────────────────────────────────────────────────── sidebar */
.side{width:var(--sidebar-w);flex:0 0 auto;background:var(--bg);
      border-right:1px solid var(--ink-06);display:flex;flex-direction:column}
/* No tagline under the wordmark. A sentence explaining the product belongs on
   the marketing site, not somewhere the operator reads past every session. */
.side .brand{display:flex;align-items:center;gap:9px;padding:19px 18px 15px;font-size:17px}
.side .brand .wm{font-weight:600;letter-spacing:-.55px}
.side .brand .wm i{font-style:normal;font-weight:300}
.sidenav{padding:0 10px 10px;display:flex;flex-direction:column;gap:1px}
.item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
      cursor:pointer;transition:background .12s}
.item:hover{background:var(--ink-06)}
.item.on{background:var(--ink);color:#fff}
.item.on .ic{color:rgba(255,255,255,.7)}
.item .ic{flex:0 0 auto;display:flex;color:var(--ink-45)}
.item .l{font-size:14px;font-weight:500}

.seek{padding:2px 12px 8px}
.seek input{width:100%;padding:7px 10px;font:14px var(--f);border:1px solid var(--ink-14);
            border-radius:9px;background:var(--card);color:var(--ink);outline:none}
.seek input:focus{border-color:var(--ink-45)}
.seek input::placeholder{color:var(--ink-45)}
.colabel{padding:10px 20px 6px;font:500 11.5px var(--mono);letter-spacing:1.3px;
         text-transform:uppercase;color:var(--ink-45)}
.colist{flex:1;overflow-y:auto;padding:0 10px 16px}
.co{display:flex;align-items:baseline;gap:9px;padding:6px 10px;border-radius:9px;cursor:pointer}
.co:hover{background:var(--ink-06)}
.co.on{background:var(--ink);color:#fff}
.co.on .cn,.co.on .cc{color:rgba(255,255,255,.62)}
.co .tk{font:600 12.5px var(--mono);flex:0 0 auto;min-width:46px}
.co .cn{font-size:12px;color:var(--ink-70);flex:1;overflow:hidden;
        text-overflow:ellipsis;white-space:nowrap}
.co .cc{font:11px var(--mono);color:var(--ink-45);flex:0 0 auto}
.sidefoot{border-top:1px solid var(--ink-06);padding:10px}

/* ──────────────────────────────────────────────────────────────── main */
.appmain{flex:1;min-width:0;overflow-y:auto}
.appwrap{max-width:1060px;margin:0 auto;padding:0 30px 70px}
/* Renamed off `.pane`: site.css uses that name for a bordered card on the
   marketing pages, and inheriting it wrapped every app view in a box. */
.vpane{display:none}
.vpane.on{display:block}

/* Sticky, and the only thing above the content — so it carries the top padding
   a page heading would otherwise have provided. */
#pane-feed{padding-top:4px}
.daymark{position:sticky;top:0;z-index:3;background:var(--card);padding:18px 0 6px;
         font:500 11px var(--mono);letter-spacing:1px;text-transform:uppercase;
         color:var(--ink-45);border-bottom:1px solid var(--ink-06)}

/* One event is one block. A single release reaching ten companies printed its
   headline ten times, which buried the interesting part — that ONE event moved
   all of them. */
.evb{border-bottom:1px solid var(--ink-14);padding:16px 0 8px}
.evb .t{font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.2px}
.evb .t a:hover{text-decoration:underline}
.evmeta{margin:5px 0 11px;font:11.5px var(--mono);color:var(--ink-45);
        display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.evmeta .pill{border:1px solid var(--ink-14);border-radius:5px;padding:1px 5px;
              font-size:10px;letter-spacing:.4px;text-transform:uppercase}
.evmeta .reach{color:var(--ink);font-weight:600}
.irow{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:11px 0;
      border-bottom:1px solid var(--ink-06);align-items:start}
.irow:last-child{border-bottom:0}
.irow .tkc{font:600 14px var(--mono)}
.dirbadge{display:inline-block;margin-top:5px;padding:1px 6px;border-radius:5px;
       font:600 11px var(--mono)}
.dirbadge.up{background:var(--bull-bg);color:var(--bull)}
.dirbadge.dn{background:var(--bear-bg);color:var(--bear)}
.why{font-size:14px;color:var(--ink-70);line-height:1.62}
.rel{margin-top:5px;font-size:13px;color:var(--ink-70)}
.rel b{color:var(--ink);font-weight:600}
.srcline{margin-top:6px;font:11.5px var(--mono);color:var(--ink-45);
         display:flex;flex-wrap:wrap;gap:4px 12px}
.chip{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.more{display:block;width:100%;margin-top:24px;padding:12px;border-radius:10px;
      border:1px solid var(--ink-14);background:var(--bg);font:14px var(--f);
      color:var(--ink-70);cursor:pointer}
.more:hover{background:var(--ink-06)}
.msg{padding:34px 0;color:var(--ink-45);font-size:13.5px;line-height:1.7;max-width:70ch}
.msg b{color:var(--ink)}

/* ──────────────────────────────────────────────── panels, keys, tiers */
.apphead{padding:26px 0 6px}
.apphead h1{font-size:26px;font-weight:600;letter-spacing:-.6px}
.apphead h1 em{font-style:normal;font-weight:200}
.apphead p{margin-top:6px;font-size:14.5px;color:var(--ink-70);max-width:72ch}
.card{background:var(--card);border:1px solid var(--ink-14);border-radius:15px;
      padding:24px;margin-top:20px}
.card h2{font-size:17px;font-weight:600;letter-spacing:-.3px}
.card p.d{margin-top:7px;font-size:14px;color:var(--ink-70);line-height:1.62;max-width:72ch}
.keyrow{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.keybox{border:1px solid var(--ink-14);border-radius:10px;padding:11px 14px;
        font:13px var(--mono);background:#FAFBFC;margin-top:10px;
        display:flex;justify-content:space-between;align-items:center;gap:12px}
.keybox .st{color:var(--ink-45);font-size:11.5px;flex:0 0 auto}
/* Shown once, on a background that says "copy me now". A key rendered the same
   as everything else gets scrolled past and then cannot be recovered. */
.keynew{border:1px solid var(--ink);border-radius:10px;padding:14px 16px;margin-top:14px;
        background:var(--ink);color:#fff;font:13px var(--mono);word-break:break-all}
.keynew .hd{font:500 11px var(--mono);letter-spacing:1px;text-transform:uppercase;
            color:rgba(255,255,255,.6);margin-bottom:8px}
.apptable{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.apptable th{text-align:left;font:500 11px var(--mono);letter-spacing:.9px;
             text-transform:uppercase;color:var(--ink-45);padding-bottom:9px;
             border-bottom:1px solid var(--ink-14)}
.apptable th.r,.apptable td.r{text-align:right;font-variant-numeric:tabular-nums}
.apptable td{padding:10px 0;border-bottom:1px solid var(--ink-06);color:var(--ink-70)}
.apptable td b{color:var(--ink);font-weight:600}
.apptable tr:last-child td{border-bottom:0}
.empt{margin-top:18px;border:1px dashed var(--ink-14);border-radius:10px;padding:26px;
      text-align:center;color:var(--ink-45);font-size:13.5px}
.tiers3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.kvb{margin-top:16px;border:1px solid var(--ink-14);border-radius:10px;padding:14px 16px;
     font:13px var(--mono);line-height:1.95;background:#FAFBFC}
.kvb span{color:var(--ink-45);display:inline-block;min-width:118px}
.warn{background:var(--ink-06);border-radius:12px;padding:15px 19px;margin-top:22px;
      font-size:13.5px;color:var(--ink-70);line-height:1.62;max-width:74ch}
.warn b{color:var(--ink)}
.signin{max-width:360px;margin-top:20px}
.signin input{width:100%;padding:10px 13px;font:14px var(--f);border:1px solid var(--ink-14);
              border-radius:9px;margin-bottom:9px;outline:none;color:var(--ink)}
.signin input:focus{border-color:var(--ink-45)}
.signin .err{font-size:12.5px;color:var(--bear);margin-top:8px;min-height:1em}

/* The star sits inside the company row, so its click must not also select the
   company — handled in app.js by stopPropagation. Kept dim until hovered or
   set, otherwise 150 outlined stars compete with the tickers for attention. */
.co{position:relative}
.co .star{flex:0 0 auto;width:16px;text-align:center;font-size:13px;line-height:1;
          color:var(--ink-14);cursor:pointer;transition:color .12s}
.co:hover .star{color:var(--ink-45)}
.co .star.on{color:var(--ink)}
.co .star:hover{color:var(--ink)}
.co.on .star{color:rgba(255,255,255,.35)}
.co.on .star.on{color:#fff}
.grouplbl{padding:12px 10px 5px;font:500 10px var(--mono);letter-spacing:1.1px;
          text-transform:uppercase;color:var(--ink-45)}

/* Boot cover. The shell is in the DOM from the first byte but the session and
   the first feed page are not, so it is hidden behind this until app.js says
   otherwise — a moving, half-populated sidebar reads as a glitch, not as speed. */
#boot{position:fixed;inset:0;z-index:100;background:var(--card);
      display:flex;align-items:center;justify-content:center;
      font:500 12px var(--mono);letter-spacing:1.4px;text-transform:uppercase;
      color:var(--ink-45)}

.nohit{padding:14px 10px;color:var(--ink-45);font-size:13px}
.err{font-size:12.5px;color:var(--bear);margin-top:10px;min-height:1em}
.btn.mini{padding:3px 9px;font-size:12px;border-radius:7px}

/* Password reset shares the marketing site's split-screen auth layout, so the
   only thing this adds is the two-step swap between "send me a link" and
   "choose a new one". */
.step{display:none}
.step.on{display:block}