/* ClikPlan site chrome: market strip above a single sticky nav. Shared by every page. */
.cp-strip, .cp-nav { --cp-bg: rgba(250,249,246,.94); --cp-ink: #0f1728; --cp-muted: #5f6b7c; --cp-line: rgba(15,23,40,.09); --cp-hover: #f3f5fb; --cp-menu: #ffffff; --cp-violet: #5b4bff; --cp-blue: #2b4eff; }
.cp-strip { display: flex; align-items: center; height: 32px; background: #0f1728; color: #fff; font: 500 12px "JetBrains Mono", ui-monospace, monospace; overflow: hidden; position: relative; z-index: 31; }
.cp-mkt { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 20px; height: 100%; flex-shrink: 0; background: #0f1728; border-right: 1px solid rgba(255,255,255,.14); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: rgba(255,255,255,.8); }
.cp-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a94a6; display: inline-block; }
.cp-dot.open { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.22); }
.cp-tape { flex: 1; min-width: 0; overflow: hidden; height: 100%; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.cp-track { display: inline-flex; white-space: nowrap; animation: cp-tape 120s linear infinite; will-change: transform; }
.cp-strip:hover .cp-track { animation-play-state: paused; }
@keyframes cp-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cp-track { animation: none; } .cp-tape { overflow-x: auto; } }
.cp-strip .tk { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 14px; font: 500 12px "JetBrains Mono", ui-monospace, monospace; border-right: 1px solid rgba(255,255,255,.1); cursor: default; }
.cp-strip .tk.idx { background: rgba(255,255,255,.06); } .cp-strip .tk .s { color: rgba(255,255,255,.72); } .cp-strip .tk .p { color: #fff; }
.cp-strip .tk .up { color: #34d399; } .cp-strip .tk .dn { color: #f87171; }
.cp-strip[data-managed] .tk:not(.idx) { cursor: pointer; } .cp-strip[data-managed] .tk:not(.idx):hover .s { color: #fff; text-decoration: underline; }
.cp-meta { flex-shrink: 0; padding: 0 20px 0 14px; height: 100%; display: inline-flex; align-items: center; background: #0f1728; border-left: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); font-size: 11.5px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-nav { position: sticky; top: 0; z-index: 30; background: var(--cp-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--cp-line); font-family: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif; }
.cp-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 28px; }
.cp-nav.wide .cp-in { max-width: none; padding: 0 22px; }
.cp-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--cp-ink); font: 500 22px "Newsreader", Georgia, serif; letter-spacing: -.01em; flex-shrink: 0; }
.cp-logo:hover { text-decoration: none; } .cp-logo svg { display: block; } .cp-logo .wm { white-space: nowrap; }
.cp-nav .plan { color: #1f6f4a; font-family: "Newsreader", Georgia, serif; font-style: italic; }
.cp-links { display: flex; align-items: stretch; gap: 22px; height: 100%; flex: 1; min-width: 0; }
.cp-links a { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--cp-muted); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cp-links a:hover { color: var(--cp-ink); text-decoration: none; }
.cp-links a.on { color: var(--cp-ink); font-weight: 600; }
.cp-links a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--cp-violet); }
.cp-links a:focus-visible, .cp-right a:focus-visible, .cp-right summary:focus-visible, .cp-burger:focus-visible { outline: 2px solid var(--cp-blue); outline-offset: 3px; border-radius: 6px; }
.cp-new { font: 700 10px "Hanken Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-violet); background: #ecebff; padding: 2px 6px; border-radius: 999px; }
.cp-sep { width: 1px; background: var(--cp-line); margin: 18px 0; }
.cp-push { margin-left: auto; }
.cp-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.cp-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--cp-blue); color: #fff; font: 600 14px "Hanken Grotesk", sans-serif; text-decoration: none; white-space: nowrap; }
.cp-cta:hover { background: #1b47b8; color: #fff; text-decoration: none; }
.cp-acct { position: relative; }
.cp-acct summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border: 1px solid var(--cp-line); border-radius: 999px; cursor: pointer; color: var(--cp-ink); font-size: 14px; font-weight: 600; background: var(--cp-menu); }
.cp-acct summary::-webkit-details-marker { display: none; }
.cp-acct summary:hover { background: var(--cp-hover); }
.cp-av { width: 30px; height: 30px; border-radius: 50%; background: #1f6f4a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.cp-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-caret { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cp-acct[open] .cp-caret { transform: rotate(180deg); }
.cp-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--cp-menu); border: 1px solid var(--cp-line); border-radius: 14px; box-shadow: 0 18px 44px rgba(15,23,40,.14); padding: 6px; display: flex; flex-direction: column; z-index: 50; }
.cp-who { padding: 10px 12px 8px; border-bottom: 1px solid var(--cp-line); margin-bottom: 4px; display: flex; flex-direction: column; }
.cp-who b { font-size: 14px; color: var(--cp-ink); } .cp-who span { font: 12px "JetBrains Mono", monospace; color: var(--cp-muted); }
.cp-menu a, .cp-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--cp-ink); font: 500 14px "Hanken Grotesk", sans-serif; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.cp-menu a:hover, .cp-menu button:hover { background: var(--cp-hover); text-decoration: none; }
.cp-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--cp-line); }
.cp-menu button { color: #d93025; }
.cp-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 11px; border: 1px solid var(--cp-line); border-radius: 10px; background: var(--cp-menu); color: var(--cp-muted); font: 500 13.5px "Hanken Grotesk", sans-serif; cursor: pointer; min-width: 190px; }
.cp-search svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.cp-search span { flex: 1; text-align: left; }
.cp-search kbd { font: 500 11px "JetBrains Mono", monospace; border: 1px solid var(--cp-line); border-radius: 4px; padding: 0 5px; color: var(--cp-muted); }
.cp-search:hover { color: var(--cp-ink); border-color: var(--cp-muted); }
.cp-search:focus-visible { outline: 2px solid var(--cp-blue); outline-offset: 2px; }
.cp-burger { display: none; width: 40px; height: 40px; border: 1px solid var(--cp-line); border-radius: 12px; background: var(--cp-menu); color: var(--cp-ink); align-items: center; justify-content: center; cursor: pointer; }
.cp-burger svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 1240px) { .cp-search { min-width: 0; } .cp-search span, .cp-search kbd { display: none; } .cp-search { width: 38px; justify-content: center; padding: 0; } }
@media (max-width: 1080px) { .cp-meta { display: none; } .cp-in { gap: 20px; } .cp-links { gap: 18px; } .cp-name { display: none; } }
@media (max-width: 900px) {
  .cp-strip { height: 30px; } .cp-mkt { padding: 0 10px 0 14px; }
  .cp-in { height: 56px; padding: 0 14px; position: relative; }
  .cp-burger { display: inline-flex; }
  .cp-links { display: none; }
  .cp-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; left: 0; right: 0; top: 100%; height: auto; padding: 8px 14px 14px; background: var(--cp-menu); border-bottom: 1px solid var(--cp-line); box-shadow: 0 18px 30px rgba(15,23,40,.08); }
  .cp-links.open a { padding: 12px 10px; border-radius: 10px; font-size: 15.5px; }
  .cp-links.open a.on { background: var(--cp-hover); } .cp-links.open a.on::after { display: none; }
  .cp-links.open .cp-sep, .cp-links.open .cp-push { width: auto; height: 1px; margin: 6px 0; background: var(--cp-line); }
}

/* dark: only pages that opt in (the Nifty 50 page follows the OS theme) */
@media (prefers-color-scheme: dark) {
  html[data-cp-auto]:not([data-theme="light"]) .cp-nav { --cp-bg: rgba(18,18,17,.9); --cp-ink: #ffffff; --cp-muted: #c3c2b7; --cp-line: #33332f; --cp-hover: #232321; --cp-menu: #1a1a19; --cp-violet: #8f84ff; }
}
html[data-theme="dark"] .cp-nav { --cp-bg: rgba(18,18,17,.9); --cp-ink: #ffffff; --cp-muted: #c3c2b7; --cp-line: #33332f; --cp-hover: #232321; --cp-menu: #1a1a19; --cp-violet: #8f84ff; }

/* links that don't fit at this width (signed-in members get up to 9) fold into the menu button instead of overlapping */
.cp-nav.tight .cp-burger { display: inline-flex; }
.cp-nav.tight .cp-links { display: none; }
.cp-nav.tight .cp-in { position: relative; }
.cp-nav.tight .cp-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; left: 0; right: 0; top: 100%; height: auto; padding: 8px 14px 14px; background: var(--cp-menu); border-bottom: 1px solid var(--cp-line); box-shadow: 0 18px 30px rgba(15,23,40,.08); }
.cp-nav.tight .cp-links.open a { padding: 12px 10px; border-radius: 10px; font-size: 15.5px; }
.cp-nav.tight .cp-links.open a.on { background: var(--cp-hover); } .cp-nav.tight .cp-links.open a.on::after { display: none; }
.cp-nav.tight .cp-links.open .cp-push { width: auto; height: 1px; margin: 6px 0; background: var(--cp-line); }
.cp-bw { flex-shrink: 0; margin-right: 1px; }
.cp-search.ask { color: var(--cp-ink); border-color: #cdc6ff; background: linear-gradient(180deg, #fbfaff, #f3f1ff); }
.cp-search.ask .cp-spark { color: var(--cp-violet); font-size: 15px; line-height: 1; }
.cp-search.ask span:not(.cp-spark) { font-weight: 600; }
@media (max-width: 1240px) { .cp-search.ask { width: auto; padding: 0 10px; } .cp-search.ask span:not(.cp-spark) { display: none; } }
