/* ================================================================
   Kalshi Markets Dashboard (/markets) — loaded only on page-markets.php
   Tiered hierarchy (marquee + down-ballot / standard grids / list view).
   Grid cards are FILLED with the category accent (stronger header/footer
   bands, white numbers + sparkline). Politics list = clean white rows.
   Flat / sharp (square corners, no soft shadows) to match the brand.
   ================================================================ */

.kalshi-page {
    --kalshi-accent: var(--tx-accent);
    background: #f2f4f6;
}

/* ---- Hero — single full-bleed blue band (promo moved to a slim strip) ---- */
.kalshi-hero {
    color: var(--tx-white);
}

.kalshi-hero__text {
    background: var(--tx-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.75rem 0;
}

.kalshi-hero__text-inner {
    width: 100%;
    max-width: var(--tx-container);
    padding: 0 1.5rem;
}

.kalshi-hero .section-heading,
.kalshi-hero__title,
.kalshi-hero__title .tx-reveal__inner { color: var(--tx-white); }

.kalshi-hero__lede {
    font-family: var(--tx-font-body);
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 62ch;
    margin: 0.85rem 0 0;
}

@media (max-width: 767px) {
    .kalshi-hero__text { padding: 2.25rem 0; }
    .kalshi-hero__text-inner { padding: 0 1.25rem; }
}

.kalshi-body { padding-top: 1rem; padding-bottom: 3.5rem; }

.kalshi-empty { font-family: var(--tx-font-body); color: var(--tx-gray); padding: 2rem 1rem; }

/* ================================================================
   Category sections + accent colors
   ================================================================ */

.kalshi-cat { margin-top: 2.75rem; }

.kalshi-cat--elections { --kalshi-accent: var(--tx-red); }  /* brand red */
.kalshi-cat--energy    { --kalshi-accent: #4A7A9A; }        /* navy */
.kalshi-cat--sports    { --kalshi-accent: #C46A2B; }        /* orange */
.kalshi-cat--politics  { --kalshi-accent: #64748B; }        /* slate */

.kalshi-cat__header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }

.kalshi-cat__title {
    font-family: var(--tx-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tx-black);
    border-left: 4px solid var(--kalshi-accent);
    padding-left: 0.7rem;
    margin: 0;
    min-width: 0;            /* allow wrapping inside the flex header */
    overflow-wrap: break-word;
}

@media (max-width: 767px) {
    .kalshi-cat__title { font-size: 1.3rem; }
    .kalshi-cat__header { gap: 0.7rem; margin-bottom: 1.1rem; }
}

.kalshi-cat__rule { flex: 1; height: 1px; background: #dfe3e7; }

/* ================================================================
   Layout grids
   ================================================================ */

.kalshi-marquee   { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.kalshi-downballot{ display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
.kalshi-grid      { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.kalshi-list      { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 640px) { .kalshi-downballot { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
    .kalshi-marquee      { grid-template-columns: 1fr 1fr; }
    .kalshi-grid--3      { grid-template-columns: repeat(2, 1fr); }
    .kalshi-grid--sports { grid-template-columns: repeat(3, 1fr); }
    .kalshi-list         { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .kalshi-downballot { grid-template-columns: repeat(4, 1fr); }
    .kalshi-grid--3    { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   Card — base (used by the list variant; filled overrides most)
   ================================================================ */

.kalshi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--tx-white);
    border: 1px solid #e4e4e4;
    border-top: 3px solid var(--kalshi-accent);
    border-radius: 0;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: filter 0.18s ease, border-color 0.18s ease, background-color 0.6s ease;
}

.kalshi-card__ticker {
    font-family: var(--tx-font-meta);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-gray);
}

.kalshi-card__title {
    font-family: var(--tx-font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--tx-black);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kalshi-card__leader { font-family: var(--tx-font-meta); font-weight: 600; color: var(--tx-gray); margin: 0; }

.kalshi-card__price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.1rem; }

.kalshi-card__pct {
    font-family: var(--tx-font-heading);
    font-weight: 700;
    line-height: 1;
    color: var(--tx-black);
}
.kalshi-card__pct small { font-weight: 700; opacity: 0.5; font-size: 0.45em; margin-left: 0.08em; }

.kalshi-card__delta {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: var(--tx-font-meta); font-weight: 700; font-size: 0.82rem;
}
.kalshi-card__delta-note { font-weight: 500; font-size: 0.66rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.03em; }
.kalshi-card__delta--up   { color: var(--tx-up); }
.kalshi-card__delta--down { color: var(--tx-down); }
.kalshi-card__delta--flat { color: var(--tx-gray); }

.kalshi-card__status {
    font-family: var(--tx-font-meta); font-size: 0.64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--tx-gray); border: 1px solid #d8d8d8; padding: 0.08rem 0.5rem;
}

.kalshi-card__live {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--tx-font-meta); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--kalshi-accent);
}
.kalshi-card__live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--kalshi-accent); flex-shrink: 0; }
.kalshi-card__live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: txkal-pulse 2s ease-out infinite; }

@keyframes txkal-pulse {
    0%        { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Sparkline */
.kalshi-card__spark-wrap { position: relative; margin-top: 0.15rem; }
.kalshi-spark { display: block; width: 100%; height: 64px; overflow: visible; }
.kalshi-spark__line {
    fill: none; stroke: var(--kalshi-accent); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.kalshi-spark__area { fill: var(--kalshi-accent); opacity: 0.1; stroke: none; }

/* Meta / CTA */
.kalshi-card__meta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--tx-font-meta); font-size: 0.75rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.02em; color: var(--tx-gray);
}
.kalshi-card__meta svg { opacity: 0.55; flex-shrink: 0; }
.kalshi-card__cta {
    font-family: var(--tx-font-meta); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--kalshi-accent); white-space: nowrap;
}

/* ================================================================
   FILLED grid cards (marquee / standard / compact)
   ================================================================ */

/* White card; only the header + footer are colored bands. */
.kalshi-card--filled {
    background: var(--tx-white);
    border: 1px solid #e4e4e4;
    border-top: none;   /* the colored header band sits at the top */
    padding: 0;
}

.kalshi-card--filled:hover { border-color: var(--kalshi-accent); }

/* Colored header + footer bands (white text) */
.kalshi-card--filled .kalshi-card__head,
.kalshi-card--filled .kalshi-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--kalshi-accent);
    color: #fff;
    padding: 0.7rem 1.25rem;
}

/* White center — dark numbers, accent chart */
.kalshi-card--filled .kalshi-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.25rem;
    background: var(--tx-white);
}

.kalshi-card--filled .kalshi-card__foot { margin-top: auto; }

/* Header/footer text = white */
.kalshi-card--filled .kalshi-card__ticker { color: rgba(255, 255, 255, 0.9); }
.kalshi-card--filled .kalshi-card__live { color: #fff; }
.kalshi-card--filled .kalshi-card__live-dot { background: #fff; }
.kalshi-card--filled .kalshi-card__status { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.kalshi-card--filled .kalshi-card__meta { color: rgba(255, 255, 255, 0.92); }
.kalshi-card--filled .kalshi-card__meta svg { opacity: 0.85; }
.kalshi-card--filled .kalshi-card__cta { color: #fff; }
.kalshi-card--filled:hover .kalshi-card__cta { text-decoration: underline; }

/* ================================================================
   Variant sizing
   ================================================================ */

/* Marquee — large hero cards */
.kalshi-card--marquee .kalshi-card__head,
.kalshi-card--marquee .kalshi-card__foot { padding: 0.85rem 2rem; }
.kalshi-card--marquee .kalshi-card__body { padding: 1.6rem 2rem 2rem; gap: 0.7rem; }
.kalshi-card--marquee .kalshi-card__title { font-size: 1.5rem; }
.kalshi-card--marquee .kalshi-card__leader { font-size: 1rem; }
.kalshi-card--marquee .kalshi-card__pct { font-size: 4.5rem; }
.kalshi-card--marquee .kalshi-spark { height: 112px; }

/* Standard — energy / sports */
.kalshi-card--standard .kalshi-card__title { font-size: 1.1rem; min-height: 2.6em; }
.kalshi-card--standard .kalshi-card__leader { font-size: 0.9rem; }
.kalshi-card--standard .kalshi-card__pct { font-size: 2.6rem; }
.kalshi-card--standard .kalshi-spark { height: 72px; }

/* Compact — down-ballot (no footer) */
.kalshi-card--compact .kalshi-card__head { padding: 0.55rem 1.1rem; }
.kalshi-card--compact .kalshi-card__body { padding: 1rem 1.1rem 1.15rem; gap: 0.4rem; }
.kalshi-card--compact .kalshi-card__title { font-size: 0.875rem; min-height: 2.4em; }
.kalshi-card--compact .kalshi-card__leader { font-size: 0.8rem; }
.kalshi-card--compact .kalshi-card__pct { font-size: 1.875rem; }
.kalshi-card--compact .kalshi-card__delta { display: none; }
.kalshi-card--compact .kalshi-spark { height: 40px; }

/* List — national politics (clean white rows, left accent bar) */
.kalshi-card--list {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-top: 1px solid #e4e4e4;
    border-left: 3px solid var(--kalshi-accent);
}
.kalshi-card--list:hover { border-color: var(--kalshi-accent); background-color: #fcfcfc; }
.kalshi-card--list .kalshi-card__list-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kalshi-card--list .kalshi-card__ticker { font-size: 0.65rem; }
.kalshi-card--list .kalshi-card__title { font-size: 0.95rem; -webkit-line-clamp: 1; }
.kalshi-card--list .kalshi-card__leader { font-size: 0.78rem; }
.kalshi-card--list .kalshi-card__list-side { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.kalshi-card--list .kalshi-card__pct { font-size: 1.6rem; color: var(--kalshi-accent); }

.kalshi-card__spark-wrap--mini { width: 96px; }
.kalshi-card__spark-wrap--mini .kalshi-spark { height: 40px; }

@media (max-width: 575px) { .kalshi-card__spark-wrap--mini { display: none; } }

/* ================================================================
   Closed / settled + stale + live flash
   ================================================================ */

.kalshi-card--closed, .kalshi-card--settled,
.kalshi-card--determined, .kalshi-card--finalized { opacity: 0.72; }

.kalshi-card--closed .kalshi-card__live-dot::after,
.kalshi-card--settled .kalshi-card__live-dot::after { animation: none; }

.kalshi-card.is-stale .kalshi-card__delta { visibility: hidden; }

.kalshi-card--flash { background-color: rgba(74, 122, 154, 0.08); }
.kalshi-card--filled.kalshi-card--flash .kalshi-card__body { background-color: rgba(74, 122, 154, 0.1); }

/* ================================================================
   Entrance (JS adds .kalshi-anim; cards render fully without JS)
   ================================================================ */

.kalshi-anim .kalshi-card { opacity: 0; }
.kalshi-anim .kalshi-card.is-in { opacity: 1; animation: txkal-rise 0.5s ease backwards; }

@keyframes txkal-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kalshi-anim .kalshi-spark__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kalshi-anim .kalshi-card.is-in .kalshi-spark__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease 0.2s; }

/* ================================================================
   Expand / collapse (progressive enhancement — no JS = all shown)
   ================================================================ */

.kalshi-more { margin-top: 1.25rem; text-align: right; }

.kalshi-more-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--tx-font-meta);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kalshi-accent);
    background: transparent;
    border: 1px solid #dbdfe3;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.kalshi-js .kalshi-more-toggle { display: inline-flex; }
.kalshi-more-toggle:hover { border-color: var(--kalshi-accent); background: #fff; }
.kalshi-js .kalshi-cat:not(.is-expanded) .kalshi-card--overflow { display: none; }

/* ================================================================
   Responsive + motion
   ================================================================ */

@media (max-width: 640px) {
    .kalshi-card--marquee .kalshi-card__pct { font-size: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kalshi-card, .kalshi-card--flash { transition: none; }
    .kalshi-anim .kalshi-card { opacity: 1; }
    .kalshi-anim .kalshi-card.is-in { animation: none; }
    .kalshi-anim .kalshi-spark__line,
    .kalshi-anim .kalshi-cline { stroke-dashoffset: 0; }
    .kalshi-card__live-dot::after { animation: none; }
}

/* ================================================================
   Candidate race cards — two party-colored lines + headshots
   ================================================================ */

.kalshi-page {
    --party-rep: #C0392B;   /* GOP red   */
    --party-dem: #1F5AA8;   /* Dem blue  */
    --party-ind: #6B7280;   /* independent */
    --party-na:  #9AA3AD;   /* unknown   */
}

/* Trend chart — smoothed party lines + soft margin fill, sits below the stats */
.kalshi-cchart-wrap { position: relative; margin: 1rem 0 0; padding: 0; }
.kalshi-cchart { display: block; width: 100%; height: 116px; overflow: visible; }
.kalshi-card--compact .kalshi-cchart { height: 84px; }
.kalshi-card--marquee .kalshi-cchart { height: 152px; }
.kalshi-cchart__mid { stroke: rgba(0, 0, 0, 0.16); stroke-width: 1; stroke-dasharray: 3 3; }

.kalshi-carea { stroke: none; }
.kalshi-carea--rep { fill: var(--party-rep); opacity: 0.14; }
.kalshi-carea--dem { fill: var(--party-dem); opacity: 0.14; }
.kalshi-carea--ind { fill: var(--party-ind); opacity: 0.12; }
.kalshi-carea--na  { fill: var(--party-na);  opacity: 0.10; }

.kalshi-cline {
    fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.kalshi-cline--rep { stroke: var(--party-rep); }
.kalshi-cline--dem { stroke: var(--party-dem); }
.kalshi-cline--ind { stroke: var(--party-ind); }
.kalshi-cline--na  { stroke: var(--party-na); }

.kalshi-anim .kalshi-cline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kalshi-anim .kalshi-card.is-in .kalshi-cline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease 0.25s; }

/* Chart caption — what the lines mean + the window */
.kalshi-cchart__cap {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0.4rem 0 0;
    font-family: var(--tx-font-meta); font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-gray, #7a7f87);
}
.kalshi-cchart__cap-range { opacity: 0.8; letter-spacing: 0.04em; }
.kalshi-card--compact .kalshi-cchart__cap { font-size: 0.6rem; margin-top: 0.3rem; }

/* Legend — one row per candidate (photo + name + %) */
.kalshi-race__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.kalshi-cand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.kalshi-card--marquee .kalshi-race__legend { gap: 1.1rem; }

.kalshi-cand__avatar {
    flex: 0 0 auto; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden; background: #eceef1;
    border: 2px solid var(--party-na);
}
.kalshi-card--marquee .kalshi-cand__avatar { width: 58px; height: 58px; }
.kalshi-card--compact .kalshi-cand__avatar { width: 40px; height: 40px; }
.kalshi-cand__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kalshi-cand__avatar--placeholder {
    font-family: var(--tx-font-heading); font-weight: 800; color: #fff;
    font-size: 0.95rem; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
    text-align: center; background: var(--party-na);
    /* all-caps initials have no descenders, so they read high in the circle */
    padding-top: 0.09em;
}
.kalshi-card--marquee .kalshi-cand__avatar--placeholder { font-size: 1.45rem; }
.kalshi-cand__avatar--rep { border-color: var(--party-rep); }
.kalshi-cand__avatar--rep.kalshi-cand__avatar--placeholder { background: var(--party-rep); }
.kalshi-cand__avatar--dem { border-color: var(--party-dem); }
.kalshi-cand__avatar--dem.kalshi-cand__avatar--placeholder { background: var(--party-dem); }
.kalshi-cand__avatar--ind { border-color: var(--party-ind); }
.kalshi-cand__avatar--ind.kalshi-cand__avatar--placeholder { background: var(--party-ind); }

.kalshi-cand__id { display: inline-flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.kalshi-cand__name {
    font-family: var(--tx-font-heading); font-weight: 700; font-size: 0.98rem; color: var(--tx-black);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kalshi-card--marquee .kalshi-cand__name { font-size: 1.2rem; }
.kalshi-card--compact .kalshi-cand__name { font-size: 0.85rem; }
.kalshi-cand__party {
    flex: 0 0 auto; font-family: var(--tx-font-meta, monospace); font-size: 0.62rem; font-weight: 700;
    line-height: 1; color: #fff; background: var(--party-na); padding: 0.15rem 0.3rem; border-radius: 2px;
}

.kalshi-cand__nums { margin-left: auto; display: inline-flex; align-items: baseline; gap: 0.45rem; flex: 0 0 auto; }
.kalshi-cand__pct {
    font-family: var(--tx-font-heading); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--party-na);
}
.kalshi-card--marquee .kalshi-cand__pct { font-size: 2.4rem; }
.kalshi-card--compact .kalshi-cand__pct { font-size: 1.25rem; }
.kalshi-cand__pct small { font-size: 0.5em; font-weight: 700; margin-left: 1px; }
.kalshi-cand__delta {
    font-family: var(--tx-font-meta); font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.kalshi-cand__delta--up { color: #157347; }
.kalshi-cand__delta--down { color: #c0392b; }
.kalshi-cand__delta--flat { color: var(--tx-gray, #777); }

/* Party accents applied per row */
.kalshi-cand--rep .kalshi-cand__pct,
.kalshi-cand--rep .kalshi-cand__name { color: var(--party-rep); }
.kalshi-cand--rep .kalshi-cand__party { background: var(--party-rep); }
.kalshi-cand--dem .kalshi-cand__pct,
.kalshi-cand--dem .kalshi-cand__name { color: var(--party-dem); }
.kalshi-cand--dem .kalshi-cand__party { background: var(--party-dem); }
.kalshi-cand--ind .kalshi-cand__pct { color: var(--party-ind); }
.kalshi-cand--ind .kalshi-cand__party { background: var(--party-ind); }

/* Keep the candidate name in the brand-neutral color; only the % takes party hue. */
.kalshi-cand--rep .kalshi-cand__name,
.kalshi-cand--dem .kalshi-cand__name { color: var(--tx-black); }

/* Mobile — keep the race legend row from overflowing narrow screens.
   (Marquee cards use big padding + large type on desktop; both are trimmed
   here so the photo + name + % + delta always fit the viewport.) */
@media (max-width: 767px) {
    .kalshi-card--marquee .kalshi-card__head,
    .kalshi-card--marquee .kalshi-card__foot { padding: 0.7rem 1.15rem; }
    .kalshi-card--marquee .kalshi-card__body { padding: 1.15rem; }

    .kalshi-card--marquee .kalshi-cand__avatar { width: 46px; height: 46px; }
    .kalshi-card--marquee .kalshi-cand__avatar--placeholder { font-size: 1.05rem; }
    .kalshi-card--marquee .kalshi-cand__name { font-size: 1rem; }
    .kalshi-card--marquee .kalshi-cand__pct { font-size: 1.8rem; }

    .kalshi-cand { gap: 0.6rem; }
    .kalshi-cand__nums { gap: 0.3rem; }
    .kalshi-cand__delta { font-size: 0.64rem; }
    .kalshi-cand__party { font-size: 0.58rem; }
}