/* The board (20 Oct 2026). Market-style bet cards after Kalshi and Polymarket:
   category, countdown, question, outcome rows, split bar, facts and rules.
   The split bar stays sealed: no numbers until reveal day. */

.mk-home { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.mk-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk--wide { grid-column: 1 / -1; }
.mk--wide .mk__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk--wide .mk__opt { grid-template-columns: minmax(0, 1fr) auto; }
.mk--wide .mk__opt-seal { display: none; }
.mk-side { display: grid; gap: 16px; position: sticky; top: 92px; }
.mk-home > .mk-soon { position: sticky; top: 92px; }

/* Card */
.mk { position: relative; margin: 0; display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(10, 15, 30, .04); transition: box-shadow .2s ease, border-color .2s ease; }
.mk:hover { box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--signal) 22%, var(--hair)); }
.mk.is-focus { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal) 22%, transparent), var(--shadow-lift); }
.mk--big { grid-column: span 2; }
.mk[hidden] { display: none; }
.mk__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; }
.mk__cat { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-2); }
.mk__cat .ico { width: 16px; height: 16px; color: var(--signal); }
.mk__clock { font-weight: 600; color: var(--signal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk.is-soon .mk__clock { color: #B45309; }
.mk.is-closed .mk__clock { color: var(--ink-3); }
.mk .mk__q, .mk.lbet .mk__q { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.22rem; line-height: 1.22; letter-spacing: -.02em; color: var(--ink); }
.mk--big .mk__q { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.035em; }

/* Outcome rows (multi) */
.mk__opts { display: grid; gap: 8px; }
.mk__opt { font: inherit; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px 11px 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--ground); color: var(--ink);
  text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mk__opt:hover { border-color: color-mix(in oklab, var(--signal) 45%, var(--hair)); background: var(--surface); }
.mk__opt:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.mk__opt-name { font-weight: 600; }
.mk__opt-seal { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--ink-3); }
.mk__opt-seal .ico { width: 13px; height: 13px; }
.mk__opt-go { font-size: .84rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; color: var(--signal); background: var(--signal-wash); }
.mk__opt.is-picked { border-color: var(--signal); background: color-mix(in oklab, var(--signal) 8%, var(--surface)); }
.mk__opt.is-picked .mk__opt-go { color: #fff; background: var(--signal); }
.mk__opt.is-picked .mk__opt-go::before { content: "\2713  "; }
.mk__opt:disabled { cursor: default; }
.mk__opt:disabled:not(.is-picked) { opacity: .5; }
.mk--big .mk__opts { grid-template-columns: 1fr 1fr; }

/* For sure / No way */
.mk__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk__side { font: inherit; font-weight: 700; font-size: 1rem; border: 0; border-radius: 14px; padding: 13px 10px; cursor: pointer; text-align: center;
  transition: transform .12s ease, filter .12s ease, opacity .2s ease; }
.mk__side--yes { background: color-mix(in oklab, #10B981 16%, var(--surface)); color: var(--called); }
.mk__side--no { background: color-mix(in oklab, #6366F1 16%, var(--surface)); color: #4F46E5; }
.mk__side:hover { transform: translateY(-1px); filter: saturate(1.3); }
.mk__side:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mk__side.is-picked.mk__side--yes { background: linear-gradient(90deg, #10B981, #0EA5A4); color: #04130F; }
.mk__side.is-picked.mk__side--no { background: linear-gradient(90deg, #6366F1, #8B5CF6); color: #fff; }
.mk__side:disabled { cursor: default; transform: none; }
.mk__side:disabled:not(.is-picked) { opacity: .45; }
.mk__sides--ghost .mk__side { cursor: default; opacity: .75; }
.mk__sides--ghost .mk__side:hover { transform: none; filter: none; }

/* Sealed split bar */
.mk__split { display: grid; gap: 6px; }
.mk__bar { position: relative; display: block; height: 8px; border-radius: 99px; overflow: hidden; background: var(--raise); }
.mk__bar i { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ink) 10%, transparent) 0 6px, transparent 6px 12px); }
.mk__split-txt { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-3); }
.mk__split-txt .ico { width: 13px; height: 13px; }

/* Facts and rules */
.mk__facts { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.mk__facts div { min-width: 0; }
.mk__facts dt { font-size: .74rem; color: var(--ink-3); }
.mk__facts dd { margin: 2px 0 0; font-size: .86rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.mk__rules summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink-2); list-style: none; }
.mk__rules summary::-webkit-details-marker { display: none; }
.mk__rules summary::after { content: " +"; color: var(--ink-3); }
.mk__rules[open] summary::after { content: " \2212"; }
.mk__rules p { margin: 8px 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.mk .lbet__done { font-size: .92rem; }

/* Your-group examples */
.mk--group { background: linear-gradient(160deg, var(--surface), color-mix(in oklab, var(--signal) 5%, var(--surface))); }
.mk--group .mk__clock { color: var(--ink-3); font-weight: 500; }
.mk__app { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-2); }

/* Closing soon, after Polymarket's ranked list */
.mk-soon { padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--hair); }
.mk-soon h3 { margin: 0 0 6px; font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.mk-soon ol { list-style: none; margin: 0; padding: 0; }
.mk-soon li { margin: 0; border-bottom: 1px solid var(--hair); }
.mk-soon li::marker, .mk-soon li::before { content: none; }
.mk-soon li[hidden] { display: none; }
.mk-soon li a { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; padding: 12px 0; color: inherit; text-decoration: none; }
.mk-soon li a:hover .mk-soon__q { color: var(--signal); }
.mk-soon__n { grid-row: span 2; font-size: .85rem; color: var(--ink-3); padding-top: 1px; }
.mk-soon__q { font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.mk-soon__t { font-size: .8rem; font-weight: 600; color: var(--signal); margin-top: 3px; font-variant-numeric: tabular-nums; }
.mk-soon li.is-soon .mk-soon__t { color: #B45309; }
.mk-soon__all { display: inline-block; margin-top: 14px; font-weight: 600; font-size: .92rem; }
.mk-note { padding: 18px 20px; border-radius: 22px; background: var(--signal-wash); }
.mk-note b { display: block; font-size: .95rem; }
.mk-note p { margin: 6px 0 0; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }

/* Tabs, after Polymarket's category row */
.mk-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab { font: inherit; flex: none; font-weight: 600; font-size: .95rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair);
  background: var(--surface); color: var(--ink-2); cursor: pointer; }
.mk-tab:hover { color: var(--ink); }
.mk-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.mk-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* How the board stays fair, after Kalshi's policy cards */
.mk-fair { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mk-fair li { margin: 0; }
.mk-fair li::marker, .mk-fair li::before { content: none; }
.mk-fair a { display: grid; gap: 6px; height: 100%; padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.mk-fair a:hover { box-shadow: var(--shadow-lift); }
.mk-fair b { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.015em; }
.mk-fair b::after { content: " \2192"; color: var(--ink-3); }
.mk-fair span { color: var(--ink-2); font-size: .94rem; }

@media (max-width: 1000px) {
  .mk-home { grid-template-columns: 1fr; }
  .mk-side, .mk-home > .mk-soon { position: static; }
}
@media (max-width: 700px) {
  .mk--big { grid-column: auto; }
  .mk--big .mk__opts { grid-template-columns: 1fr; }
  .mk--wide .mk__opts { grid-template-columns: 1fr 1fr; }
  .mk-fair { grid-template-columns: 1fr; }
  .mk-grid, .mk-grid--home { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mk, .mk__opt, .mk__side { transition: none; } }

.board-page .mk-soon__all { display: none; }

/* ── History charts and the crowd view (20 Oct 2026, later) ─────────────── */
.mk__crowd { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--ground); }
.mk__crowd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; }
.mk__crowd-top b { font-weight: 700; color: var(--ink); }
.mk__crowd-top span { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); text-align: right; }
.mk__crowd-top .ico { width: 13px; height: 13px; flex: none; }
.mk__crowd-bar { display: flex; gap: 3px; height: 30px; border-radius: 10px; overflow: hidden; font-size: .78rem; }
.mk__crowd-bar[hidden], .mk__crowd-chart[hidden] { display: none; }
.mk__seg { display: flex; align-items: center; gap: 4px; padding: 0 8px; min-width: 0; white-space: nowrap; overflow: hidden; color: #fff; }
.mk__seg--0 { background: linear-gradient(90deg, #10B981, #0EA5A4); color: #04130F; }
.mk__seg--1 { background: linear-gradient(90deg, #6366F1, #8B5CF6); }
.mk__seg--2 { background: #0891B2; } .mk__seg--3 { background: var(--ink-2); }
.mk__seg.is-mine { box-shadow: inset 0 0 0 2px var(--ink); }
.mk__crowd-cap { margin: 2px 0 0; font-size: .76rem; color: var(--ink-3); }
.mk__opt-pct { font-size: .84rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mk__opt-pct:empty { display: none; }

.mk__hist { margin: 0; display: grid; gap: 8px; }
.mk__hist figcaption { display: grid; gap: 2px; }
.mk__hist figcaption b { font-size: .92rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.mk__hist figcaption span { font-size: .8rem; color: var(--ink-3); line-height: 1.4; }
.mkc { display: block; width: 100%; height: auto; overflow: visible; }
.mkc .c-yes { fill: #10B981; }
.mkc .c-no { fill: color-mix(in oklab, #8B5CF6 70%, var(--surface)); }
.mkc .c-off { fill: color-mix(in oklab, var(--ink) 12%, var(--surface)); }
.mkc .c-ring { fill: none; stroke: #10B981; stroke-width: 1.6; }
.mkc .c-a { fill: color-mix(in oklab, var(--ink) 62%, var(--surface)); }
.mkc .c-b { fill: color-mix(in oklab, var(--ink) 24%, var(--surface)); }
.mkc .c-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.mkc .c-axis { stroke: var(--hair); stroke-width: 1; }
.mkc .c-path { fill: none; stroke: #10B981; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.mkc .c-t { fill: var(--ink-3); font: 500 9.5px var(--body); }
.mkc .c-t--k { fill: var(--ink-2); font-weight: 700; }
.mkc .c-t--in { fill: var(--surface); font-weight: 700; font-size: 8.5px; }
.mkc .c-t--in2 { fill: var(--ink); font-weight: 700; font-size: 8.5px; }
.mk__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .74rem; color: var(--ink-3); }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: currentColor; }
.lg--yes::before { background: #10B981; } .lg--no::before { background: color-mix(in oklab, #8B5CF6 70%, var(--surface)); }
.lg--off::before { background: color-mix(in oklab, var(--ink) 12%, var(--surface)); }
.lg--ring::before { background: none; border: 1.6px solid #10B981; border-radius: 50%; width: 7px; height: 7px; }
.lg--a::before { background: color-mix(in oklab, var(--ink) 62%, var(--surface)); }
.lg--b::before { background: color-mix(in oklab, var(--ink) 24%, var(--surface)); }
.mk__src { margin-left: auto; }
.mk--big .mk__hist { grid-template-columns: minmax(0, 1fr); }
.mk--big .mkc, .mk--wide .mkc { max-width: 460px; }
.mk__opts ~ .mk__crowd .mk__seg--0 { background: color-mix(in oklab, var(--ink) 62%, var(--surface)); color: var(--surface); }
.mk__opts ~ .mk__crowd .mk__seg--1 { background: color-mix(in oklab, var(--ink) 24%, var(--surface)); color: var(--ink); }
.mk__opts ~ .mk__crowd .mk__seg--2 { background: color-mix(in oklab, var(--ink) 42%, var(--surface)); color: var(--surface); }
.mk__opts ~ .mk__crowd .mk__seg--3 { background: color-mix(in oklab, var(--ink) 12%, var(--surface)); color: var(--ink); }
.mk__opts ~ .mk__crowd .c-path { stroke: var(--ink-2); }
/* Under 20 picks: a countdown bar, filling toward the split. */
.mk__crowd-bar.is-prog { height: 10px; border-radius: 99px; background: var(--raise); }
.mk__prog { display: block; width: 100%; height: 100%; }
.mk__prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2560F0, #0EA5A4); transition: width .6s ease; }
.mkc .c-path--count { stroke: #2459F0; }

/* Share button and per-bet pages (20 Oct 2026) */
.mk__right { display: inline-flex; align-items: center; gap: 8px; }
.mk__share { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px -6px 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer; }
.mk__share:hover { background: var(--raise); color: var(--ink); }
.mk__share:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.mk__share .ico { width: 17px; height: 17px; }
.mk__share-tip { position: absolute; right: 0; top: calc(100% + 6px); white-space: nowrap; font-size: .76rem; font-weight: 600; color: #fff;
  background: var(--ink); padding: 5px 9px; border-radius: 8px; opacity: 0; transform: translateY(-2px); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 2; }
.mk__share.is-copied .mk__share-tip { opacity: 1; transform: none; }
.mk__q a { color: inherit; text-decoration: none; }
.mk__q a:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1.5px; }
.mk-solo { display: grid; }
.mk-solo .mk--wide .mk__opts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.bet-page h1 { max-width: 22ch; }
.bet-page .kicker--signal a { color: inherit; }
.mk-more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mk-more li { margin: 0; }
.mk-more li::marker, .mk-more li::before { content: none; }
.mk-more a { display: grid; gap: 8px; height: 100%; padding: 16px 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.mk-more a:hover { box-shadow: var(--shadow-lift); }
.mk-more__cat { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.mk-more__cat .ico { width: 15px; height: 15px; color: var(--signal); }
.mk-more__q { font-weight: 600; line-height: 1.35; }