/* The Insider Stock Watch header, shared by every page: the "New clues" strip of latest purchases
   (main page only, views/tape.js), the logo lockup, the main navigation and the theme toggle. */

/* ---------- New clues strip ---------- */
.tape { display: flex; align-items: stretch; height: 34px; background: var(--ink); color: #d9d4c6;
  font: 500 12.5px/1 var(--mono); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
.tape[hidden] { display: none; }
.tape-label { flex: none; display: flex; align-items: center; padding: 0 14px; background: #d6a54a; color: #1d2433;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.tape-track { flex: 1; min-width: 0; overflow: hidden; display: flex;
  -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.tape-run { display: flex; flex: none; gap: 34px; padding: 0 17px; align-items: center; animation: tape-scroll var(--tape-s, 60s) linear infinite; }
.tape[data-paused="true"] .tape-run, .tape:hover .tape-run, .tape:focus-within .tape-run { animation-play-state: paused; }
.tape-pause { flex:none; width:34px; border:0; border-left:1px solid rgba(255,255,255,.12); background:var(--ink); color:#d9d4c6; cursor:pointer; font:500 15px var(--mono); }
@keyframes tape-scroll { to { transform: translateX(-100%); } }
.tape-item { flex: none; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.tape-item b { color: #fff; font-weight: 600; }
.tape-item em { font-style: normal; color: #86efac; }
.tape-item:hover b, .tape-item:focus-visible b { color: #d6a54a; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tape-run { animation: none; }
  .tape-pause { display:none; }
  .tape-run[aria-hidden="true"] { display: none; }
  .tape-track { overflow-x: auto; }
}

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; max-width:1120px; margin:auto; padding:0 28px; min-height:72px; gap:20px; }
.account { display:flex; align-items:center; gap:6px; position:relative; flex:none; }
.theme-toggle { margin-left:auto; }
.site-nav [data-practice-entry] { display:none; }
.practice-signed-in.practice-enabled .site-nav [data-practice-entry] { display:block; }
.account a.btn { display:inline-flex; align-items:center; justify-content:center; padding:0 14px; color:var(--text); text-decoration:none; font-size:14px; white-space:nowrap; }
.account a.btn.primary { background:var(--text); color:var(--bg); }
.auth-mark { display:block; margin:0 auto 16px; border-radius:14px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); flex: none; }
.brand:hover { color: var(--text); }
.brand-mark { width: 42px; height: 42px; display: block; border-radius: 11px; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name small { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-text); }
.brand-name b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin-top: 3px; }

.site-nav { display: flex; gap: 4px; font-size: 14.5px; font-weight: 600; }
.site-nav a { padding: 8px 13px; border-radius: 9px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.site-nav a[hidden] { display: none; }

.theme-toggle { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent;
  color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.theme-toggle:hover { color: var(--text); background: var(--surface-2); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

@media (max-width: 760px) {
  .topbar .wrap { flex-wrap: wrap; gap:0 10px; padding:10px 18px 0; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name b { font-size: 21px; }
  .site-nav { order: 3; flex-basis: 100%; margin: 6px -4px 0; padding-bottom: 8px; overflow-x: auto; font-size: 14px; }
  .site-nav a { padding: 8px 11px; }
}
@media (max-width: 480px) {
  .topbar .account [data-auth="signin"], .topbar .account a[href="/?auth=signin"] { display:none; }
  .account .btn.primary { padding:0 12px; }
  .brand-name small { font-size:9.5px; }
}

/* Account corner: "Join free" is a pill, as in the header design. */
.account .btn.primary { height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 700; }
.account .btn.quiet { height: 38px; font-weight: 700; color: var(--text); }

/* The investigation scene fills the desktop intro's spare column. */
.hero-with-investigation { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:center; }
.hero-copy { min-width:0; }
.hero-investigation { margin:0; align-self:center; }
.hero-investigation picture { display:block; background:radial-gradient(ellipse at center, var(--accent-soft), transparent 70%); }
.hero-investigation img { display:block; width:100%; height:auto; }
.hero-investigation figcaption { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.hero-investigation figcaption span { font:500 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--brass-text); }
.hero-motion { border:0; background:none; color:var(--text-2); padding:4px 8px; font:500 11px var(--font); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:960px) { .hero-with-investigation { display:block; } .hero-investigation { display:none; } }
@media(prefers-reduced-motion:reduce) { .hero-motion { display:none; } }