/* The project page: `/p/:TICKER`.
 *
 * Everything this page owns lives here rather than in style.css, which is the
 * site's shared primitives. The split matters because the page is dense and
 * specific - a hero, a chart, five tabs of panels and a right rail - and none
 * of it is reused anywhere else. It was previously spread through style.css in
 * four separate regions, where a rule for the board and a rule for this page
 * sat next to each other and neither said which page it was for.
 *
 * Loaded by `renderListing`, `renderMissingListing` and `renderToken` - the
 * three pages that share `marketPanel`. It loads AFTER style.css, so a rule
 * here beats a shared one on an equal-specificity tie, which is the intended
 * direction: this page is allowed to be more specific about itself.
 */

.one-listing .top .brand { text-decoration: none; color: inherit; }
.one-listing .ghost { margin-left: auto; text-decoration: none; line-height: 1; }

@media (max-width: 720px) {
  .one-listing .ghost { display: inline-block; } }
.one-listing { min-height: 100vh; background: radial-gradient(900px 520px at 22% 8%, rgba(240,82,45,.075), transparent 66%),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    var(--bg); background-size: auto, 56px 56px, 56px 56px, auto; }
.one-listing .top { border-bottom-color: rgba(255,255,255,.07); background: rgba(8,8,8,.9); }
/* The three-rail dashboard shell, shared with /markets and /board. The rail
   widths are this page's own: the right one carries ownership and token facts
   rather than a chart legend, so it can afford to be a little narrower. */
.project-page.mkt-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 236px;
  gap: 14px;
  /* `main` in style.css carries `max-width: 1180px` for the site's ordinary
     one-column pages. Setting only `width` here left that clamp in place and
     the dashboard rendered 1180px wide inside a 1600px window, so the max is
     what has to be raised. */
  width: min(100% - 32px, 1600px);
  max-width: none;
  margin: 14px auto 64px;
  padding: 0;
  align-items: start;
}
.project-identity { display: flex; gap: 14px; min-width: 0; padding: 0; }
/* Hard-contained. A project's artwork is a remote file we do not control, and
   a 4000px PNG that sizes the hero is a layout somebody else decides. */
.project-avatar.logo {
  width: 84px; height: 84px; min-width: 84px; flex: 0 0 84px;
  border-radius: 15px; border-color: #453b34; background: #14110f;
  color: var(--ember-hi); font-size: 34px; overflow: hidden;
  transition: border-color .2s;
}
.project-avatar.logo:hover { border-color: var(--ember-hi); transform: translate(-2px,-2px); }
.project-avatar.logo img { width: 100%; height: 100%; object-fit: cover; }
.project-blurb { margin: 6px 0 0; max-width: 62ch; color: var(--mkt-muted); font: 12.5px/1.45 var(--sans); }
.project-rank-card {
  display: grid; place-items: center; gap: 1px; min-width: 132px; padding: 9px 15px;
  border: 1px solid var(--mkt-line); border-radius: 12px; background: var(--mkt-surface);
  text-align: center;
}

.project-section { border: 1px solid #302b27; background: rgba(14,13,12,.88); }
.project-section { padding: 25px 27px 27px; }
.project-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.project-section-head span { color: #7f7770; font: 650 11px/1 var(--mono); letter-spacing: .15em; }
.project-section-head h2 { margin: 7px 0 0; color: #f1e8de; font: 680 21px/1.1 var(--sans); letter-spacing: -.02em; }
.project-section-head > b { padding: 5px 7px; border: 1px solid rgba(98,218,179,.25); color: var(--cool); background: rgba(98,218,179,.04); font: 650 11px/1 var(--mono); letter-spacing: .08em; }
.token-page .market-card { margin-top: 0; }
.project-watch-form { display: contents; }
.project-watch { display: inline-flex; align-items: center; gap: 7px; }
.project-watch.is-watching { border-color: rgba(255,179,63,.4); color: var(--ember-hi); }
.market-card { position: relative; overflow: hidden; isolation: isolate; border-color: #302f31; background: linear-gradient(145deg, rgba(21,22,24,.97), rgba(10,10,11,.98) 58%),
    #0d0d0e; }
.market-card::before { content: ""; position: absolute; z-index: -1; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, #6c819d, rgba(108,129,157,.2) 45%, transparent 82%); }
.market-card-sheen { position: absolute; z-index: -1; width: 340px; height: 250px; right: -120px; top: -150px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(101,125,157,.11), transparent 68%); }
.market-card .project-section-head { position: relative; margin-bottom: 28px; }
.market-card .project-section-head > b { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(100,220,184,.24); color: #75d9bc; background: rgba(100,220,184,.055); }
.market-card .project-section-head > b::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.market-card.is-stale .project-section-head > b { border-color: rgba(255,179,63,.26); color: var(--ember-hi); background: rgba(255,179,63,.05); }
.market-stat span { color: #76777b; font: 650 11px/1 var(--mono); letter-spacing: .14em; }
.market-chart { margin: 0 0 24px; padding: 16px 16px 12px; overflow: hidden; border: 1px solid #2c3035; background: rgba(6,7,8,.62); }
.market-chart-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.market-chart-head > div { display: flex; align-items: baseline; gap: 9px; }
.market-chart-head > div:last-child { justify-content: flex-end; }
.market-chart-head-right { align-items: center !important; gap: 16px !important; }
.market-chart-head-right > div { display: flex; align-items: baseline; gap: 9px; }
.market-chart-head span,
.market-chart-axis { color: #6f747b; font: 650 11px/1 var(--mono); letter-spacing: .12em; }
.market-chart-head b { color: #b8c6d8; font: 650 12px/1 var(--mono); }
.market-chart.is-up .market-chart-head > div:first-child b { color: #58cfab; }
.market-chart.is-down .market-chart-head > div:first-child b { color: #e2685f; }
.market-chart svg { display: block; width: 100%; height: 150px; margin-top: 14px; overflow: visible; }
.market-chart { position: relative; }
.market-chart-grid { fill: none; stroke: rgba(118,132,150,.11); stroke-width: 1; vector-effect: non-scaling-stroke; }
.market-chart-line { fill: none; stroke: #7c93b1; stroke-width: 2; vector-effect: non-scaling-stroke; }
.market-chart-area { fill: url(#market-chart-fill); }
.market-chart.has-candles .market-chart-line,
.market-chart.has-candles .market-chart-area { opacity: 0; }
.market-candle line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.market-candle.up line, .market-candle.up rect { stroke: #58bfa2; fill: #58bfa2; }
.market-candle.down line, .market-candle.down rect { stroke: #cb6862; fill: #cb6862; }
.market-chart-volume { height: 34px !important; margin-top: 2px !important; border-top: 1px solid rgba(118,132,150,.08); }
.market-chart-volume rect.up { fill: rgba(88,191,162,.28); }
.market-chart-volume rect.down { fill: rgba(203,104,98,.25); }
.market-chart-live { display: inline-flex; align-items: center; gap: 5px; color: #61c69f; font: 700 11px/1 var(--sans); font-style: normal; letter-spacing: .09em; }
.market-chart-live em { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.market-chart-live.is-delayed { color: #a89068; }
.market-chart stop:first-child { stop-color: #7890ae; stop-opacity: .22; }
.market-chart stop:last-child { stop-color: #7890ae; stop-opacity: 0; }
.market-chart.is-up .market-chart-line { stroke: #58bfa2; }
.market-chart.is-down .market-chart-line { stroke: #cb6862; }
.market-chart-axis { display: flex; justify-content: space-between; margin-top: 5px; }
.market-chart-cursor line { stroke: rgba(225,234,244,.38); stroke-width: 1; vector-effect: non-scaling-stroke; }
.market-chart-cursor circle { fill: #d9e4ef; stroke: #0b0d10; stroke-width: 2; vector-effect: non-scaling-stroke; }
.market-chart-tooltip { position: absolute; z-index: 2; min-width: 96px; padding: 8px 10px; pointer-events: none; border: 1px solid #343d48; border-radius: 7px; background: rgba(8,10,13,.94); box-shadow: 0 8px 26px rgba(0,0,0,.42); transform: translateY(-100%); }
.market-chart-tooltip b, .market-chart-tooltip span { display: block; font-family: var(--mono); }
.market-chart-tooltip b { color: #e1e8f0; font-size: 12px; }
.market-chart-tooltip span { margin-top: 4px; color: #7f8995; font-size: 11px; letter-spacing: .06em; }
.market-chart-ranges { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #2d333a; background: #090a0c; }
.market-chart-ranges a { display: inline-grid; min-width: 40px; min-height: 27px; place-items: center; padding: 0 7px; color: #767d87; font: 700 11px/1 var(--mono); text-decoration: none; }
.market-chart-ranges a:hover { color: #d5dbe3; background: #15191e; }
.market-chart-ranges a.is-active { color: #d7e0eb; background: #202731; box-shadow: inset 0 -1px #8096b3; }
.market-chart.is-building { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 22px; padding-block: 18px; }
.market-chart.is-building span { display: block; margin-bottom: 7px; color: #747a82; font: 650 11px/1 var(--mono); letter-spacing: .12em; }
.market-chart.is-building b { color: #c4c5c5; font: 650 13px/1.3 var(--sans); }
.market-chart.is-building p { max-width: 470px; margin: 0; color: #747579; font: 12px/1.5 var(--sans); }
.market-chart.is-building .market-chart-ranges { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.market-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.market-stat { min-width: 0; padding: 18px 16px; }
.market-stat + .market-stat { border-left: 1px solid #292a2d; }
.market-stat span { display: block; margin-bottom: 9px; }
.market-stat b { color: #e7e5e0; font: 650 17px/1 var(--mono); }
.market-stat i { display: block; margin-top: 6px; color: #66676a; font: 12px/1.35 var(--mono); }
.market-primary-grid .market-stat:first-child { padding-left: 0; }
.market-primary-grid .market-stat:last-child { padding-right: 0; }
.market-secondary-grid .market-stat { padding-block: 17px 0; }
.market-secondary-grid .market-stat:first-child { padding-left: 0; }
.market-secondary-grid .market-stat:last-child { padding-right: 0; }
.market-secondary-grid .market-stat b { font-size: 14px; color: #c8c6c1; }

@media (max-width: 720px) {
  .market-card .project-section-head { margin-bottom: 22px; }
  .market-chart { margin-inline: -2px; padding-inline: 12px; }
  .market-chart-head { display: grid; align-items: start; gap: 12px; }
  .market-chart-head > div:first-child { flex-wrap: wrap; justify-content: flex-start; }
  .market-chart-head > div:first-child > span { white-space: nowrap; }
  .market-chart-head-right { width: 100%; display: flex !important; justify-content: space-between !important; gap: 8px !important; }
  .market-chart-head-right > div { display: flex; gap: 6px 8px; text-align: left; }
  .market-chart svg { height: 122px; }
  .market-chart.is-building { display: block; }
  .market-chart.is-building p { margin-top: 9px; text-align: left; }
  .market-chart.is-building .market-chart-ranges { margin-top: 13px; }
  .market-primary-grid .market-stat { padding: 16px 12px; }
  .market-primary-grid .market-stat:first-child { padding-left: 0; }
  .market-primary-grid .market-stat:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid #292a2d; }
  .market-secondary-grid { grid-template-columns: 1fr 1fr; }
  .market-secondary-grid .market-stat { padding: 15px 10px 0; }
  .market-secondary-grid .market-stat:first-child { padding-left: 0; }
  .market-secondary-grid .market-stat:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; } }
.community-card .backed-note { color: #8c847d; font-size: 13px; line-height: 1.65; }
.community-card .backed-bar { height: 7px; margin: 16px 0 10px; border-radius: 0; background: #24201d; }
.community-card .backed-bar i { background: linear-gradient(90deg, var(--signal), var(--ember-hi)); }
.community-card .backer-split { gap: 1px; margin: 17px 0; border: 1px solid #2d2926; background: #2d2926; }
.community-card .backer-split div { border: 0; border-radius: 0; background: #0b0a09; padding: 15px; }
.project-text-action { display: inline-flex; margin-top: 18px; color: var(--ember-hi); font: 650 12px/1 var(--mono); letter-spacing: .1em; text-decoration: none; }
.project-text-action:hover { color: #fff1d1; }
.project-embed-card .embed-preview { display: block; width: 100%; height: auto; max-width: 360px; margin: 15px 0 13px; border-radius: 10px; }
.project-embed-card { min-width: 0; }
.embed-snippet { margin: 0 0 12px; padding: 11px 12px; max-width: 100%; min-width: 0; border: 1px solid #302b27; border-radius: 9px; background: rgba(6,6,7,.72); }
.embed-snippet code { display: block; font: 12px/1.6 var(--mono); color: #b6ada4; white-space: pre-wrap; overflow-wrap: anywhere; }
.project-share-card .share { gap: 8px; margin-top: 18px; padding: 0; border: 0; }
.project-share-card .share-x, .project-share-card .share-copy { flex: 1; border-radius: 0; padding-inline: 10px; text-align: center; font-size: 12px; }
.project-mobile-actions { display: none; }

@media (max-width: 920px) {
  .project-rank-card { border-top: 1px solid rgba(255,179,63,.14); border-left: 0; } }

@media (max-width: 640px) {
  .one-listing { padding-bottom: 82px; background-size: auto, 40px 40px, 40px 40px, auto; }
  .project-page { margin: 18px auto 40px; padding: 0 14px; }
  .project-identity { padding: 24px 20px 23px; }
  .project-avatar.logo { width: 64px; height: 64px; font-size: 28px; box-shadow: 7px 7px 0 rgba(240,82,45,.07); }
  .project-blurb { margin-top: 20px; font-size: 14px; line-height: 1.55; }
  .project-rank-card { padding: 24px 20px; }
    .project-section { padding: 20px 18px; }
  .project-section-head { margin-bottom: 18px; }
  .project-section-head h2 { font-size: 19px; }
  .community-card .backer-split { grid-template-columns: 1fr 1fr; }
  .project-mobile-actions { position: fixed; z-index: 35; display: grid; grid-template-columns: .82fr 1.18fr; left: 0; right: 0; bottom: 0; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #39312b; background: rgba(8,8,8,.95); backdrop-filter: blur(12px); }
  .project-mobile-actions a { display: grid; place-items: center; min-height: 44px; border-radius: 0; text-decoration: none; }
  .project-mobile-actions .ghost { border: 1px solid #3c3530; color: #d1c6bb; font: 650 12px/1 var(--mono); letter-spacing: .1em; }
  .project-mobile-actions .cta { color: #170b06; background: var(--signal); box-shadow: none; } }

@media (max-width: 720px) {
  .one-listing .top .ghost { display: inline-block; } }
.project-logo { color: inherit; text-decoration: none; cursor: pointer; }
.project-logo:hover { border-color: var(--signal); transform: translateY(-1px); }
/* ============================================================ the hero
   Identity on the left, rank and the two calls to action on the right. The
   two CTAs are deliberately different weights: backing this project and
   taking its place fund OPPOSITE listings (invariant 27), and a pair of
   matching buttons is how somebody funds the rival they came to beat. */
.project-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 13px 15px; border: 1px solid var(--mkt-line); border-radius: 14px;
  background: var(--mkt-surface);
}
.project-hero.is-throne { border-color: rgba(255,179,63,.3); }
.project-identity-text { min-width: 0; }
.project-identity-text h1 {
  margin: 0; color: var(--text); font: 700 29px/1 var(--sans); letter-spacing: -.02em;
}
.project-name-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 5px 0 0; color: var(--mkt-muted); font: 500 13px/1.2 var(--sans);
}
.project-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0 0; }
.project-chip {
  padding: 3px 8px; border: 1px solid var(--mkt-line); border-radius: 999px;
  color: #b4aca3; font: 600 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
}
.project-links { display: flex; gap: 13px; flex-wrap: wrap; margin: 8px 0 0; }
.project-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: #a9a199; font: 600 12px/1 var(--sans); text-decoration: none;
}
.project-link:hover { color: var(--ember-hi); }
/* A decorative marker, not text: sized as a box so it cannot be read as
   type below the floor. */
.project-link span { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .45; font-size: 0; }

.project-hero-actions { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.project-rank-card.is-throne { border-color: rgba(255,179,63,.42); background: rgba(255,179,63,.05); }
.project-rank-crown { color: var(--ember-hi); font-size: 14px; line-height: 1; }
.project-rank-card b {
  display: flex; align-items: baseline; color: var(--text);
  font: 700 30px/1 var(--mono); letter-spacing: -.03em;
}
.project-rank-card.is-throne b { color: var(--ember-hi); }
.project-rank-card b i { font-size: 16px; font-style: normal; opacity: .5; }
.project-rank-card > span {
  margin-top: 3px; color: var(--mkt-muted); font: 650 11px/1 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
}
.project-rank-card > i { margin-top: 2px; color: var(--mkt-faint); font: 11px/1 var(--sans); font-style: normal; }
.project-rank-card.is-suspended b { color: var(--mkt-faint); }

.project-cta-stack { display: grid; align-content: start; gap: 6px; min-width: 226px; }
.cta.project-back-cta {
  display: grid; place-items: center; padding: 11px 16px; border-radius: 10px;
  font: 700 12.5px/1 var(--sans); letter-spacing: .04em; text-decoration: none;
}
/* Secondary on purpose: this one funds a DIFFERENT listing, and it says so on
   its own second line rather than in a tooltip nobody opens. */
.project-take-cta {
  display: grid; gap: 3px; justify-items: center; padding: 8px 14px;
  border: 1px solid rgba(255,179,63,.28); border-radius: 10px;
  background: rgba(255,179,63,.05); color: var(--ember-hi); text-decoration: none;
}
.project-take-cta:hover { border-color: var(--ember-hi); }
.project-take-cta b { font: 700 12px/1 var(--sans); letter-spacing: .06em; }
.project-take-cta i { color: var(--mkt-muted); font: 11px/1.25 var(--sans); font-style: normal; }
.project-cta-stack .project-watch,
.project-cta-stack .project-watch-form { width: 100%; }
.project-cta-stack .project-watch {
  display: grid; place-items: center; width: 100%; padding: 6px 12px;
  border-color: transparent; background: none;
  color: var(--mkt-faint); font: 600 11.5px/1 var(--sans);
}
.project-cta-stack .project-watch:hover { border-color: var(--mkt-line); color: var(--mkt-muted); }
.project-cta-stack .project-watch.is-watching { color: var(--ember-hi); }

/* ============================================================== the tabs
   Real links, not panels: five crawlable URLs beat five hidden divs on the
   page that gets shared and unfurled (invariant 16), and they work with no
   script at all. */
.project-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--mkt-line);
}
.project-tabs::-webkit-scrollbar { display: none; }
.project-tab {
  flex: none; padding: 11px 14px; border-bottom: 2px solid transparent;
  color: var(--mkt-muted); font: 600 13px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.project-tab:hover { color: var(--text); }
.project-tab.is-active { border-bottom-color: var(--ember-hi); color: var(--ember-hi); }

/* ============================================================= the panels */
.pj-row { display: grid; gap: 12px; }
.pj-row-chart { grid-template-columns: minmax(0, 1fr) 300px; }
.pj-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj-row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-panel {
  min-width: 0; padding: 11px 13px 13px;
  border: 1px solid var(--mkt-line); border-radius: 12px; background: var(--mkt-surface);
}
.pj-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.pj-panel-head h2 {
  margin: 0; color: var(--mkt-muted); font: 650 11px/1 var(--sans);
  letter-spacing: .11em; text-transform: uppercase;
}
.pj-live { color: var(--cool); font: 650 11px/1 var(--mono); letter-spacing: .1em; }
.pj-panel.is-stale .pj-live { color: var(--ember-hi); }
.pj-note { margin: 9px 0 0; color: var(--mkt-faint); font: 12px/1.45 var(--sans); }
.pj-empty { margin: 0; padding: 12px 0; color: var(--mkt-faint); font: 12px/1.5 var(--sans); }

/* ------------------------------------------------------------- the chart */
.pj-chart { padding-bottom: 8px; }
.pj-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 9px;
}
.pj-chart-title h2 { margin: 0; color: var(--text); font: 650 14px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.pj-chart-price { display: flex; align-items: baseline; gap: 9px; margin: 5px 0 0; }
.pj-chart-price b { color: var(--text); font: 700 22px/1 var(--mono); letter-spacing: -.02em; }
.pj-chart-pair { margin: 4px 0 0; color: var(--mkt-faint); font: 11.5px/1 var(--mono); }
.pj-chart-controls { display: flex; align-items: center; gap: 10px; }

/* Line / Candles, with no script. Both series are already in the SVG, so the
   choice is presentational and a radio + sibling selector is the whole
   mechanism - the same reason the site's nav is a checkbox. */
.pj-chart-mode { position: relative; display: flex; gap: 0; margin: 0; padding: 2px; border: 1px solid var(--mkt-line); border-radius: 9px; }
/* Clipped rather than `display: none`, so the radio stays focusable and the
   control is still operable from the keyboard. It needs a containing block or
   it lays out from the page origin and drags the document sideways. */
.pj-chart-mode input {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.pj-chart-mode label {
  padding: 5px 11px; border-radius: 7px; color: var(--mkt-muted);
  font: 600 12px/1 var(--sans); cursor: pointer;
}
.pj-chart-mode input:checked + label { background: rgba(255,179,63,.1); color: var(--ember-hi); }
.pj-chart-mode input:focus-visible + label { outline: 2px solid var(--ember-hi); outline-offset: 1px; }
/* Disabled rather than hidden: hiding it makes "this market has no candles"
   look identical to "this build lost its toggle". */
.pj-chart-mode input:disabled + label { color: #4a4642; cursor: not-allowed; }
.pj-chart-note { margin: 8px 0 0; color: var(--mkt-faint); font: 11.5px/1.4 var(--sans); }

/* The toggle drives which series is painted. Nothing is generated for the
   other one - both were always in the markup. */
.pj-chart .market-chart { margin: 0; padding: 0; border: 0; background: none; }
.pj-chart .market-chart-head { display: none; }
.pj-chart:has(input[value="line"]:checked) .market-chart-candles { display: none; }
.pj-chart:has(input[value="line"]:checked) .market-chart-line,
.pj-chart:has(input[value="line"]:checked) .market-chart-area { display: block; }
.pj-chart:has(input[value="candles"]:checked) .market-chart-line,
.pj-chart:has(input[value="candles"]:checked) .market-chart-area { display: none; }

/* ---------------------------------------------------- the market summary */
.pj-sum { display: grid; gap: 1px; background: var(--mkt-line-soft); border-radius: 10px; overflow: hidden; }
.pj-sum-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 10px; background: var(--mkt-surface);
}
.pj-sum-row span { color: var(--mkt-muted); font: 12px/1 var(--sans); }
.pj-sum-row b { color: var(--text); font: 650 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pj-source { margin: 9px 0 0; color: var(--mkt-faint); font: 11.5px/1.4 var(--sans); }
.pj-source b { color: var(--mkt-muted); font-weight: 600; }

/* ------------------------------------------------- rank and attention */
.pj-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--mkt-line-soft); border-radius: 11px; overflow: hidden; }
.pj-metric { padding: 8px 10px; background: var(--mkt-surface); min-width: 0; }
/* An odd number of metrics leaves the last one orphaned beside a gap. It is
   the spend disclosure, so it takes the full row rather than half of one. */
.pj-metrics .pj-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pj-metric span { display: block; color: var(--mkt-faint); font: 600 11px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.pj-metric b { display: block; margin-top: 4px; color: var(--text); font: 700 15px/1.1 var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pj-metric i { display: block; margin-top: 3px; color: var(--mkt-faint); font: 11px/1.25 var(--sans); font-style: normal; }
/* Heat stays the warmest, largest figure in the group. If anything else ever
   outweighs it, the panel is saying something the ranking does not. */
.pj-metric.is-heat b { color: var(--ember-hi); font-size: 17px; }
.pj-metric.is-ember b { color: var(--discovery); }
.pj-metric.is-rank b { color: var(--text); }
/* Two classes to match `.cta.wide`, which sets its own display. A one-class
   rule ties on nothing and loses, and the two lines render side by side. */
.cta.pj-boost {
  display: grid; gap: 2px; justify-items: center; width: 100%; margin-top: 10px; padding: 9px;
  border-radius: 10px; text-decoration: none; text-align: center;
}
.pj-boost b { font: 700 12.5px/1 var(--sans); letter-spacing: .05em; }
.pj-boost i { font: 11.5px/1 var(--sans); font-style: normal; opacity: .82; }

/* --------------------------------------------------- community backing */
.pj-community { display: grid; gap: 11px; }
.pj-community-share { display: flex; align-items: center; gap: 12px; }
.pj-ring { width: 62px; height: 62px; flex: none; transform: rotate(-90deg); }
.pj-ring circle { fill: none; stroke-width: 3.4; }
.pj-ring-track { stroke: var(--mkt-line); }
.pj-ring-fill { stroke: var(--discovery); stroke-linecap: round; }
.pj-community-share > div b { display: block; color: var(--discovery); font: 700 23px/1 var(--mono); letter-spacing: -.02em; }
.pj-community-share > div span { display: block; margin-top: 4px; color: var(--mkt-muted); font: 12px/1.3 var(--sans); }
.pj-community-counts,
.pj-community-lifetime { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--mkt-line-soft); border-radius: 11px; overflow: hidden; }
.pj-community-lifetime { margin-top: 10px; }

/* --------------------------------------------------------- the heat feed */
.pj-feed { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--mkt-line-soft); border-radius: 11px; overflow: hidden; }
.pj-feed li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 10px; background: var(--mkt-surface); }
.pj-feed-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.pj-feed-mark.is-team { background: rgba(255,179,63,.1); color: var(--ember-hi); }
.pj-feed-mark.is-community { background: var(--discovery-soft); color: var(--discovery); }
.pj-feed li > div { min-width: 0; }
.pj-feed li b { color: var(--text); font: 600 12.5px/1.2 var(--sans); }
.pj-feed li > div span { display: block; margin-top: 1px; color: var(--mkt-faint); font: 11.5px/1 var(--sans); }
.pj-feed-amount { color: var(--ember-hi) !important; font: 650 12.5px/1 var(--mono) !important; white-space: nowrap; }
.pj-feed time { grid-column: 3; color: var(--mkt-faint); font: 11px/1 var(--mono); }

/* ------------------------------------------------------------- about */
.pj-about-body { display: flex; gap: 26px; justify-content: space-between; flex-wrap: wrap; }
.pj-about-body p { margin: 0; max-width: 74ch; color: #a9a199; font: 13px/1.65 var(--sans); }
.pj-about-links { display: grid; gap: 7px; align-content: start; }
.pj-about-links span { color: var(--mkt-faint); font: 650 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; }

/* ==================================================== the right rail
   Ownership, discovery and the token's own facts. Uses the shared
   `.mkt-insight` card from style.css, so only what differs is written here. */
.project-page .mkt-nav-item { padding: 6px 9px; font-size: 12px; }
.project-page .mkt-nav-head { margin-bottom: 5px; }
.project-page .mkt-sidebar { gap: 15px; }
.project-page .mkt-side-card { padding: 12px; }

.project-insights { min-width: 0; }
.pj-own-state { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font: 650 13px/1.2 var(--sans); }
.pj-own-state.is-verified { color: var(--cool); }
.pj-own-state.is-pending { color: var(--ember-hi); }
.pj-own-state.is-unclaimed { color: var(--mkt-muted); }
.pj-own-fact { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mkt-line-soft); }
.pj-own-fact span { color: var(--mkt-faint); font: 600 11px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.pj-own-fact b { color: var(--text); font: 600 12px/1.3 var(--sans); overflow-wrap: anywhere; }
.pj-own-fact.is-contract b { display: flex; align-items: center; gap: 7px; }
.pj-own-fact code { min-width: 0; overflow: hidden; color: #b4aca3; font: 11.5px/1.35 var(--mono); overflow-wrap: anywhere; }
.pj-copy { flex: none; padding: 4px 6px; border: 1px solid var(--mkt-line); border-radius: 6px; background: none; color: var(--mkt-muted); font: 12px/1 var(--sans); cursor: pointer; }
.pj-copy:hover { border-color: var(--ember-hi); color: var(--ember-hi); }
.pj-own .cta.wide { margin-top: 10px; }
.pj-own-rule { border-top: 1px solid var(--mkt-line-soft); margin-top: 10px; padding-top: 9px; }
.pj-similar li { min-height: 44px; padding: 6px 0; border-top: 1px solid var(--mkt-line-soft); }
.pj-similar li:first-child { border-top: 0; padding-top: 0; }
.pj-similar li:last-child { padding-bottom: 0; }
/* Every cell is placed explicitly. `marketProjectIcon` renders a <span>, so a
   bare `a span` rule also caught the icon and moved it into the text column -
   which left the ticker sharing a track it could not fit in. */
.pj-similar li a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 1px 9px; align-items: center; text-decoration: none; }
.pj-similar li a .market-project-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pj-similar li a b { grid-column: 2; grid-row: 1; min-width: 0; color: var(--text); font: 650 12px/1 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-similar li a span:not(.market-project-icon) { grid-column: 2; grid-row: 2; min-width: 0; color: var(--mkt-faint); font: 11.5px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-similar-heat { color: var(--ember-hi); font: 650 12px/1 var(--mono); white-space: nowrap; }

/* ======================================================== responsive
   Four tiers, matching the rest of the site. The right rail is context and
   is what a narrower screen can most afford to lose, so it goes first - but
   BELOW the content rather than away, because it carries the verification
   state and hiding that on a phone would hide the one thing that says
   whether the project itself stands behind the page. */
@media (max-width: 1280px) {
  .project-page.mkt-shell { grid-template-columns: 186px minmax(0, 1fr); }
  .project-insights {
    grid-column: 1 / -1; position: static;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
  }
  .pj-row-chart { grid-template-columns: minmax(0, 1fr) 264px; }
}
@media (max-width: 980px) {
  .project-page.mkt-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .project-page.mkt-shell .mkt-sidebar { display: none; }
  .pj-row-chart,
  .pj-row-three,
  .pj-row-two { grid-template-columns: minmax(0, 1fr); }
  .project-hero-actions { width: 100%; }
  .project-cta-stack { flex: 1; }
}
/* True mobile: its own composition, not the dashboard squeezed. The order is
   identity, rank, CTA, chart, then the panels - and the rail's cards come
   last, still present. */
@media (max-width: 720px) {
  .project-page.mkt-shell { width: calc(100% - 20px); margin: 10px auto 96px; }
  .project-hero { flex-direction: column; gap: 13px; padding: 12px; }
  .project-identity { gap: 12px; }
  .project-avatar.logo { width: 62px; height: 62px; min-width: 62px; flex-basis: 62px; border-radius: 13px; font-size: 26px; }
  .project-identity-text h1 { font-size: 25px; }
  .project-hero-actions { width: 100%; flex-direction: column; }
  /* Full width, but not full height: centred in a tall box it read as an
     empty panel rather than a compact fact. */
  .project-rank-card { width: 100%; min-width: 0; padding: 7px 14px; }
  .project-cta-stack { width: 100%; min-width: 0; }
  /* Links scroll rather than wrap into four ragged rows. */
  .project-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .project-links::-webkit-scrollbar { display: none; }
  .pj-panel { padding: 11px 12px 12px; }
  .pj-chart-head { gap: 10px; }
  .pj-chart-price b { font-size: 20px; }
  .pj-about-body { gap: 16px; }
  .pj-metric b { font-size: 14.5px; }
  .pj-metric.is-heat b { font-size: 16.5px; }
}
@media (max-width: 420px) {
  .project-identity-text h1 { font-size: 23px; }
  .project-rank-card b { font-size: 28px; }
  .pj-feed li { grid-template-columns: 26px minmax(0, 1fr); }
  .pj-feed-amount { grid-column: 2; }
  .pj-feed time { grid-column: 2; }
}
.pj-text-action { display: inline-block; margin-top: 12px; color: var(--ember-hi); font: 650 12px/1 var(--sans); letter-spacing: .04em; text-decoration: none; }
.pj-text-action:hover { text-decoration: underline; }
.pj-note em { color: #b4aca3; font-style: normal; font-weight: 600; }
.pj-note b { color: var(--text); font-weight: 650; }
.pj-chart-note.is-delayed { color: var(--ember-hi); }

/* The measured attention figures. Ours rather than a provider's - counted in
   aggregate, with no visitor followed (invariant 18) - so they say which
   window they cover rather than reading as a running total. */
.pj-proof { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--mkt-line-soft); }
.pj-proof-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.pj-proof-label span { color: var(--mkt-faint); font: 650 11px/1 var(--sans); letter-spacing: .09em; }
.pj-proof-label b { color: var(--mkt-faint); font: 600 11px/1 var(--mono); letter-spacing: .06em; }
.pj-proof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pj-proof-stat { min-width: 0; }
.pj-proof-stat b { display: block; color: var(--text); font: 650 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pj-proof-stat span { display: block; margin-top: 4px; color: var(--mkt-faint); font: 11px/1.2 var(--sans); }
@media (max-width: 420px) {
  .pj-proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
}