@import "../../css/tokens.css";
@import "../../css/shell.css";

/* Cross-principle catalog homepage (frontend/markets/) -- the only page that reads all three
   principles' live catalogs at once (see js/catalog.js), so this layout doesn't belong in any
   single principle's own style.css. Every number on this page is a real read from the running
   engine -- where the concept mockup this is modeled on invented a 24h-change/volume/photo, this
   either computes the real equivalent (24h change from the chart endpoints, a sparkline from the
   same points) or leaves it out rather than fabricate one. */

header.matchcore-header { gap: var(--space-4); }
.header-search {
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  color: var(--text-faint);
}
.header-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.header-search input {
  border: none; background: none; outline: none; font: inherit; color: var(--text);
  width: 100%;
}
.header-search input::placeholder { color: var(--text-faint); }

#app-root { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4) var(--space-6); width: 100%; }

/* ---- Hero: copy left, featured market right ---- */
.catalog-hero-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0 var(--space-5);
}
.catalog-hero-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3);
}
.catalog-hero-split h1 { font-size: 38px; line-height: 1.12; margin: 0 0 var(--space-3); letter-spacing: -0.02em; }
.catalog-hero-split > div:first-child > p { color: var(--text-dim); font-size: 15px; max-width: 440px; margin: 0 0 var(--space-4); }
.catalog-hero-actions { display: flex; gap: 10px; margin-bottom: var(--space-5); }
.catalog-hero-actions a {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: var(--radius-pill);
}
.catalog-hero-actions .btn-solid { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.catalog-hero-actions .btn-solid:hover { background: var(--accent-hover); }
.catalog-hero-actions .btn-outline { border: 1px solid var(--border-strong); color: var(--text); }
.catalog-hero-actions .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.trust-badges { display: flex; flex-direction: column; gap: var(--space-3); }
.trust-badge { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.trust-badge svg { width: 18px; height: 18px; color: var(--accent-2); flex-shrink: 0; margin-top: 1px; }
.trust-badge strong { display: block; color: var(--text); }
.trust-badge span { color: var(--text-dim); }

/* ---- Featured market card ---- */
.featured-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  isolation: isolate;
}
.featured-card-art { position: absolute; inset: 0; z-index: -2; }
.featured-card-art img { width: 100%; height: 100%; object-fit: cover; }
.featured-card-art.placeholder { display: flex; align-items: center; justify-content: center; font-size: 96px; opacity: 0.35; }
.featured-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,10,20,0.15) 0%, rgba(6,10,20,0.55) 55%, rgba(6,10,20,0.92) 100%);
}
.featured-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; }
.featured-card-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.featured-card-eyebrow .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yes); box-shadow: 0 0 0 3px rgba(47,216,138,0.35); }
.featured-card-body h2 { font-size: 24px; margin: 0; letter-spacing: -0.01em; max-width: 560px; }
.featured-card-meta { font-size: 12px; color: rgba(255,255,255,0.75); display: flex; gap: var(--space-4); text-transform: uppercase; letter-spacing: 0.03em; }
.featured-outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0; max-width: 560px; }
.featured-outcome {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md); padding: 8px 10px; backdrop-filter: blur(3px);
}
.featured-outcome .fo-name { font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.03em; }
.featured-outcome .fo-price { font-size: 19px; font-weight: 700; font-family: var(--mono); }
.featured-outcome .fo-chg { font-size: 11px; font-weight: 600; }
.featured-outcome .fo-chg.up { color: #6df0af; }
.featured-outcome .fo-chg.down { color: #ff97a0; }
.featured-card-cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.featured-card-cta:hover { background: var(--accent-hover); }

/* ---- Live ticker: two continuously-scrolling rows, prices + recent activity ------------------
   True marquee motion (a right-to-left CSS translateX loop), not the old manually-scrollable
   overflow-x strip. The two copies of each track's content back to back + translateX(-50%) is the
   standard seamless-loop trick: at the halfway point the animation is showing exactly the second
   copy where the first one started, so the jump back to 0% is invisible.
   catalog.js deliberately does NOT rebuild these tracks on every price tick (that would restart
   the CSS animation and the line would visibly stutter/jump every update, worse than not moving
   at all) -- see buildTicker()/patchTickerPrices()'s own comment for the build-once-then-patch
   split that keeps this scrolling continuously while the numbers underneath still update live. */
.ticker-wrap {
  background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: 0 calc(-1 * var(--space-4)) var(--space-6); overflow: hidden;
}
.ticker-row { overflow: hidden; white-space: nowrap; padding: 7px 0; }
.ticker-row-news { border-top: 1px solid var(--border); font-size: 12px; color: var(--text-faint); }
.ticker-track { display: inline-flex; gap: var(--space-5); padding-right: var(--space-5); animation: ticker-scroll 55s linear infinite; }
.ticker-row-news .ticker-track { animation-duration: 40s; }
.ticker-row:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-live { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); flex-shrink: 0; padding-left: var(--space-4); }
.ticker-live .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ticker-item { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--text-dim); font-size: 13px; }
.ticker-item strong { color: var(--text); font-weight: 600; }
.ticker-item .chg.up { color: var(--yes-strong); }
.ticker-item .chg.down { color: var(--no-strong); }
.news-item { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.news-item .news-dot { color: var(--text-faint); }

/* ---- Body columns ---- */
.catalog-columns { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .catalog-columns { grid-template-columns: 1fr; } }

.trending-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.trending-card {
  display: flex; gap: 12px; background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.trending-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.trending-card-art {
  width: 88px; height: 88px; border-radius: var(--radius-md); flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff;
}
.trending-card-art img { width: 100%; height: 100%; object-fit: cover; }
.trending-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trending-card-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); }
.trending-card-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.trending-card-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.trending-card-pct { font-size: 20px; font-weight: 700; font-family: var(--mono); }
.trending-card-chg { font-size: 12px; font-weight: 600; }
.trending-card-chg.up { color: var(--yes-strong); }
.trending-card-chg.down { color: var(--no-strong); }
.trending-bar-track { height: 5px; border-radius: var(--radius-pill); background: var(--bg-alt); overflow: hidden; margin-top: 4px; }
.trending-bar-fill { height: 100%; background: var(--gradient-brand); }
.trending-card-vol { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.section-heading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.section-heading-row .section-heading { margin: 0; }

.category-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.category-tab {
  font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: var(--radius-pill);
  color: var(--text-dim); border: 1px solid transparent; cursor: pointer; background: none;
}
.category-tab:hover { color: var(--text); }
.category-tab.active { background: var(--accent-bg); color: var(--accent); }

.catalog-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.catalog-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.catalog-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.catalog-table tr:last-child td { border-bottom: none; }
.catalog-table tr.catalog-row:hover { background: var(--bg-alt); cursor: pointer; }
.catalog-table .catalog-row-rank { color: var(--text-faint); font-family: var(--mono); font-size: 12px; }
.catalog-table .catalog-row-title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.catalog-row-thumb {
  width: 34px; height: 34px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff;
}
.catalog-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-row-category { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.catalog-table td.num { text-align: right; font-family: var(--mono); }
.catalog-table .chg.up { color: var(--yes-strong); }
.catalog-table .chg.down { color: var(--no-strong); }
.sparkline { display: block; }

/* Briefly highlights a price/pct cell whose value just changed on a real WS tick -- see
   catalog.js's flash()/flashClass(). -up (the tick went up) is green, -down is red, same
   semantics --yes/--no already carry everywhere else on this site. catalog.js clears the
   triggering entry's _flashed flag ~1.2s after setting it (matching this animation's duration),
   specifically so the class doesn't linger on the entry and wrongly replay next time some
   *unrelated* market's tick causes a repaint of the shared container this one also lives in. */
@keyframes catalog-value-flash-up {
  0% { background: var(--yes); box-shadow: 0 0 0 4px var(--yes-bg); color: #fff; }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
@keyframes catalog-value-flash-down {
  0% { background: var(--no); box-shadow: 0 0 0 4px var(--no-bg); color: #fff; }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
.value-flash-up { animation: catalog-value-flash-up 1.2s ease-out; border-radius: var(--radius-sm); }
.value-flash-down { animation: catalog-value-flash-down 1.2s ease-out; border-radius: var(--radius-sm); }
/* .probability-pill already carries its own padding -- these two spots are plain inline text, so
   the flash needs a little breathing room of its own or the color hugs the glyphs too tightly. */
.ticker-item.value-flash-up, .ticker-item.value-flash-down,
.trending-card-pct.value-flash-up, .trending-card-pct.value-flash-down { padding: 1px 6px; margin: -1px -6px; }

.catalog-empty { text-align: center; color: var(--text-dim); padding: var(--space-6) 0; }

@media (max-width: 860px) {
  .catalog-hero-split { grid-template-columns: 1fr; }
  .header-search { display: none; }
  .featured-outcome-grid { grid-template-columns: repeat(2, 1fr); }
}