/* ==========================================================================
   Market board — the call-out day trading floor.

   Built to the v2 board design, on the TrustLayer brand system measured
   22 Sep 2026: teal #00C6A2, near-black ground, Sora for figures, Inter for
   prose, JetBrains Mono for anything numeric or labelled.

   Deliberately NOT the rest of the site's chrome. This is a terminal on a big
   screen in a noisy room, and it has to read from the back of the office.

   Kept out of style.css, which is copied between sites and shouldn't carry
   any of this.
   ========================================================================== */

/* style.css sets this for the rest of the site, but these pages don't load
   style.css. Without it, width:100% on an input means 100% PLUS padding and
   border — 32px too wide every time. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* grounds */
  --mkt-bg:        #08110F;
  --mkt-panel:     #0C1714;
  --mkt-panel-2:   #11201C;
  --mkt-line:      #1B2A26;
  --mkt-line-soft: #14211E;

  /* brand accent */
  --mkt-teal:      #00C6A2;
  --mkt-teal-deep: #00A88B;
  --mkt-teal-label:#4FBF9F;
  --mkt-teal-bar:  #1F7F6A;
  --mkt-teal-lead: linear-gradient(90deg, #0E8F76, #00C6A2);

  /* text */
  --mkt-text:      #F2F5F8;
  --mkt-text-2:    #C9D3DF;
  --mkt-muted:     #8A98A8;

  /* other accents */
  --mkt-peri:      #9DB0FF;
  --mkt-red:       #E63946;
  --mkt-gold:      #F5B93B;

  --mkt-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.market {
  margin: 0;
  background: var(--mkt-bg);
  color: var(--mkt-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

.market h1, .market h2, .market h3 { margin: 0; color: var(--mkt-text); }

.market a { color: var(--mkt-teal); }
.market a:hover { color: var(--mkt-teal-deep); }

[hidden] { display: none !important; }

.mkt-shell {
  max-width: 1760px;
  margin: 0 auto;
  padding: clamp(18px, 2vw, 32px) clamp(16px, 2vw, 32px) 40px;
  display: flex; flex-direction: column;
  gap: clamp(16px, 1.6vw, 24px);
}

.mono {
  font-family: var(--mkt-mono);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--mkt-teal-label);
}

.fig {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.mkt-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: clamp(16px, 1.6vw, 24px);
  border-bottom: 1px solid var(--mkt-line);
}

.mkt-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mkt-title h1 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(24px, 3vw, 40px); line-height: 1;
  text-transform: uppercase;
}
.mkt-title .slash { color: var(--mkt-teal); }
.mkt-title .where {
  font-family: var(--mkt-mono); font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mkt-teal-label);
}

.mkt-head-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.mkt-clock {
  font-family: var(--mkt-mono); font-weight: 500;
  font-size: clamp(14px, 1.4vw, 20px); letter-spacing: 0.08em;
  color: var(--mkt-text-2);
}

.mkt-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--mkt-teal); color: var(--mkt-teal);
  font-family: var(--mkt-mono); font-weight: 500;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
}
.mkt-live .pip {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--mkt-teal); flex-shrink: 0;
  animation: tl-pulse 1.6s ease-in-out infinite;
}
@keyframes tl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.mkt-live[data-state="closed"] { border-color: var(--mkt-line); color: var(--mkt-muted); }
.mkt-live[data-state="closed"] .pip { background: var(--mkt-muted); animation: none; }

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */

.mkt-ticker {
  overflow: hidden;
  border-top: 1px solid var(--mkt-line);
  border-bottom: 1px solid var(--mkt-line);
  padding: 12px 0;
  margin: 0 calc(-1 * clamp(16px, 2vw, 32px));
}
.mkt-ticker-track {
  display: flex; width: max-content;
  animation: tl-marquee 40s linear infinite;
}
.mkt-ticker span {
  padding: 0 36px;
  font-family: var(--mkt-mono); font-weight: 500; font-size: 14px;
  letter-spacing: 0.12em; white-space: nowrap;
  color: var(--mkt-text-2);
}
.mkt-ticker span.up { color: var(--mkt-teal); }
@keyframes tl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Stat cards
   -------------------------------------------------------------------------- */

.mkt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.mkt-stat {
  background: var(--mkt-panel);
  border: 1px solid var(--mkt-line);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.mkt-stat .fig { font-size: clamp(30px, 3.4vw, 44px); }
.mkt-stat .fig.teal { color: var(--mkt-teal); }
.mkt-stat .fig.name { font-size: clamp(24px, 2.8vw, 40px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-stat .sub { font-family: var(--mkt-mono); font-size: 13px; color: var(--mkt-text-2); }
.mkt-stat .sub.teal { color: var(--mkt-teal); }

.mkt-stat-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; min-width: 0;
}
.mkt-stat-row .fig { flex: none; }
.mkt-spark { display: block; flex: 1 1 0; min-width: 0; max-width: 120px; height: 40px; overflow: visible; }

.mkt-stat-baseline { display: flex; align-items: baseline; gap: 8px; }
.mkt-stat-baseline .of { font-family: var(--mkt-mono); font-size: 14px; color: var(--mkt-muted); }

.mkt-meter {
  height: 6px; border-radius: var(--r-pill);
  background: var(--mkt-line); overflow: hidden; margin-top: 6px;
}
.mkt-meter i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--mkt-teal); width: 0;
  transition: width .6s ease;
}

/* --------------------------------------------------------------------------
   The table
   -------------------------------------------------------------------------- */

.mkt-panel {
  background: var(--mkt-panel);
  border: 1px solid var(--mkt-line);
  border-radius: var(--r-2xl);
  padding: 24px 28px 12px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}

.mkt-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.mkt-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mkt-tab {
  appearance: none; cursor: pointer;
  padding: 12px 22px; min-height: 44px;
  border: 1px solid var(--mkt-line); border-radius: var(--r-pill);
  background: transparent; color: var(--mkt-text-2);
  font-family: var(--mkt-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.mkt-tab:hover { border-color: var(--mkt-teal-deep); color: var(--mkt-text); }
.mkt-tab[aria-selected="true"] {
  background: var(--mkt-teal); border-color: var(--mkt-teal); color: #0B0F14;
}

/* One grid definition, shared by the header row and every rep row */
.mkt-grid {
  display: grid;
  grid-template-columns:
    32px minmax(90px, 1.2fr) repeat(4, minmax(56px, 80px))
    minmax(60px, 3fr) minmax(64px, 100px);
  gap: 12px; align-items: center;
}

.mkt-thead {
  padding: 8px 0;
  border-bottom: 1px solid var(--mkt-line);
  font-family: var(--mkt-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mkt-teal-label);
}
.mkt-thead .r { text-align: right; }

.mkt-rows { display: flex; flex-direction: column; }

.mkt-row { padding: 14px 0; border-bottom: 1px solid var(--mkt-line-soft); }
.mkt-row:last-child { border-bottom: 0; }

.mkt-row .rank  { font-family: var(--mkt-mono); font-size: 14px; color: var(--mkt-muted); }
.mkt-row .name  { font-family: var(--mkt-mono); font-weight: 500; font-size: clamp(15px, 1.4vw, 20px); color: var(--mkt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-row .price { text-align: right; font-family: var(--mkt-mono); font-size: 16px; color: var(--mkt-text); }
.mkt-row .chg   { text-align: right; font-family: var(--mkt-mono); font-size: 14px; color: var(--mkt-muted); }
.mkt-row .chg.up{ color: var(--mkt-teal); }
.mkt-row .num   { text-align: right; font-family: var(--mkt-mono); font-size: 16px; color: var(--mkt-text-2); }
.mkt-row .val   { text-align: right; font-family: var(--mkt-mono); font-weight: 700; font-size: clamp(15px, 1.4vw, 20px); color: var(--mkt-text); }
.mkt-row .val.zero { color: var(--mkt-muted); }

.mkt-row.lead .rank,
.mkt-row.lead .name,
.mkt-row.lead .val { color: var(--mkt-teal); }

.mkt-track { height: 24px; border-radius: 4px; background: var(--mkt-panel-2); overflow: hidden; }
.mkt-bar {
  display: block; height: 100%; border-radius: 4px;
  background: var(--mkt-teal-bar); width: 0;
  transition: width .6s ease;
}
.mkt-row.lead .mkt-bar { background: var(--mkt-teal-lead); }

@keyframes tl-flash { 0% { background: rgba(0, 198, 162, .16); } 100% { background: transparent; } }
.mkt-row.changed { animation: tl-flash 1.4s ease-out; }

/* --------------------------------------------------------------------------
   Lower row: feed + how it works
   -------------------------------------------------------------------------- */

.mkt-lower {
  display: grid;
  /* min() so a 375px phone, which has 343px of usable width, is not asked
     for a 360px column it cannot give */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px; align-items: start;
}
.mkt-lower .mkt-panel { padding: 24px 28px; }
.mkt-feed-panel { grid-column: span 2; }

.mkt-feed { display: flex; flex-direction: column; }
.mkt-ev {
  display: grid; grid-template-columns: 52px 84px minmax(0, 1fr);
  gap: 16px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--mkt-line-soft);
}
.mkt-ev:last-child { border-bottom: 0; }
.mkt-ev time { font-family: var(--mkt-mono); font-size: 12px; color: var(--mkt-muted); }
.mkt-ev .tag {
  justify-self: start;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid currentColor;
  font-family: var(--mkt-mono); font-weight: 500;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.mkt-ev .what { font-size: 15px; color: var(--mkt-text); }

.tag-booked     { color: var(--mkt-teal); }
.tag-invest     { color: var(--mkt-peri); }
.tag-correction { color: var(--mkt-gold); }
.tag-note       { color: var(--mkt-gold); }
.tag-rename,
.tag-setup,
.tag-open,
.tag-closed     { color: var(--mkt-muted); }

.mkt-empty { color: var(--mkt-muted); font-size: 14px; padding: 20px 0; }

.mkt-more {
  appearance: none; cursor: pointer;
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 18px; min-height: 40px;
  border: 1px solid var(--mkt-line); border-radius: var(--r-pill);
  background: transparent; color: var(--mkt-text-2);
  font-family: var(--mkt-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.mkt-more:hover { border-color: var(--mkt-teal-deep); color: var(--mkt-teal); }

.mkt-how { display: flex; flex-direction: column; gap: 16px; }
.mkt-how > div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.mkt-how .n { font-family: var(--mkt-mono); font-size: 14px; color: var(--mkt-teal); }
.mkt-how .t { display: flex; flex-direction: column; gap: 4px; }
.mkt-how .t b { font-weight: 600; font-size: 16px; color: var(--mkt-text); }
.mkt-how .t span { font-size: 15px; line-height: 1.5; color: var(--mkt-text-2); text-wrap: pretty; }
.mkt-how .t span strong { color: var(--mkt-text); font-weight: 600; }

.mkt-mover {
  border-top: 1px solid var(--mkt-line); padding-top: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.mkt-mover .v { font-family: var(--mkt-mono); font-weight: 500; font-size: 18px; color: var(--mkt-text); }

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

.mkt-notice {
  background: var(--mkt-panel);
  border: 1px solid var(--mkt-line);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 56px);
  text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  margin: clamp(24px, 4vw, 56px) 0;
}
.mkt-notice h2 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); }
.mkt-notice p { margin: 0; color: var(--mkt-text-2); max-width: 52ch; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .mkt-feed-panel { grid-column: span 1; }
}

@media (max-width: 760px) {
  /* Drop the columns that matter least on a phone: change, booked, backers */
  .mkt-grid {
    /* 22+60+46+40+50 = 218, plus 4 gaps of 8 = 250, inside the 311px a
       375px phone leaves after the shell and panel padding. */
    grid-template-columns: 22px minmax(60px, 1fr) minmax(46px, 64px)
                           minmax(40px, 2fr) minmax(50px, 70px);
    gap: 8px;
  }
  .mkt-grid .drop { display: none; }
  /* Grid children will not shrink below their own content unless told to,
     and a mono label like PORTFOLIO at 0.2em tracking is wider than its
     column on a phone. */
  .mkt-grid > * { min-width: 0; }
  .mkt-thead { font-size: 10px; letter-spacing: 0.06em; }
  .mkt-row .name, .mkt-row .price, .mkt-row .val { font-size: 13.5px; }
  .mkt-row .price, .mkt-row .val { overflow: hidden; text-overflow: ellipsis; }
  .mkt-ev { grid-template-columns: 44px minmax(0, 1fr); }
  .mkt-ev .tag { display: none; }
  .mkt-panel { padding: 18px 16px 8px; }
  .mkt-lower .mkt-panel { padding: 18px 16px; }
  .mkt-ticker { margin: 0 -16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-ticker-track { animation: none; }
  .mkt-live .pip { animation: none; }
  .mkt-bar, .mkt-meter i { transition: none; }
  .mkt-row.changed { animation: none; }
}

/* On a big screen at the back of a room, bump it up */
@media (min-width: 1600px) {
  .mkt-row { padding: 16px 0; }
  .mkt-row .name, .mkt-row .val { font-size: 22px; }
  .mkt-row .price, .mkt-row .num { font-size: 18px; }
  .mkt-track { height: 28px; }
}

/* ==========================================================================
   Control panel — Lux's screen. Same system, built for a thumb in a busy
   room: big targets, nothing that needs aiming.
   ========================================================================== */

.ctl { padding-bottom: 64px; }
.ctl-head-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.ctl-link {
  font-family: var(--mkt-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mkt-teal); text-decoration: none;
  padding: 10px 16px; border: 1px solid var(--mkt-line); border-radius: var(--r-pill);
  white-space: nowrap;
}
.ctl-link:hover { border-color: var(--mkt-teal-deep); }

/* ---- gate ---- */

.ctl-gate {
  max-width: 460px; margin: clamp(40px, 8vw, 100px) auto;
  background: var(--mkt-panel); border: 1px solid var(--mkt-line);
  border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 14px;
}
.ctl-gate h2 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; }
.ctl-gate p { margin: 0; color: var(--mkt-text-2); font-size: 14px; line-height: 1.6; }
.ctl-gate-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ctl-gate-form input { flex: 1 1 200px; }

/* ---- controls ---- */

.ctl input, .ctl select, .ctl textarea {
  width: 100%; min-width: 0;
  background: var(--mkt-bg);
  border: 1px solid var(--mkt-line);
  border-radius: var(--r-md);
  color: var(--mkt-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;                 /* 16px stops iOS zooming on focus */
  padding: 13px 15px; min-height: 48px;
}
.ctl input:focus, .ctl select:focus, .ctl textarea:focus {
  outline: 2px solid var(--mkt-teal); outline-offset: 1px; border-color: transparent;
}
.ctl ::placeholder { color: var(--mkt-muted); }

/* ".ctl input" above makes every input a full-width text field, which is
   right for text and wrong for a tick box — left alone, a radio stretches
   to the whole width of the card and stands 48px tall. These pages are the
   first to put one inside .ctl, so the reset belongs here rather than in
   each of them. */
.ctl input[type="radio"],
.ctl input[type="checkbox"] {
  width: 17px; height: 17px;
  min-width: 0; min-height: 0;
  padding: 0; border: 0; border-radius: 0;
  flex: 0 0 auto;
  accent-color: var(--mkt-teal);
}

.ctl label, .ctl-inline { min-width: 0; }
.ctl label {
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--mkt-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mkt-teal-label);
}

.ctl-btn {
  appearance: none; cursor: pointer;
  min-height: 48px; padding: 13px 24px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
  white-space: nowrap;
}
.ctl-btn:active { transform: translateY(1px); }
.ctl-btn-go     { background: var(--mkt-teal); color: #0B0F14; }
.ctl-btn-go:hover { background: var(--mkt-teal-deep); }
.ctl-btn-quiet  { background: transparent; color: var(--mkt-text); border-color: var(--mkt-line); font-weight: 600; }
.ctl-btn-quiet:hover { border-color: var(--mkt-teal-deep); }
.ctl-btn-warn   { background: transparent; color: var(--mkt-gold); border-color: var(--mkt-gold); font-weight: 600; }
.ctl-btn-danger { background: transparent; color: var(--mkt-red); border-color: var(--mkt-red); font-weight: 600; }
.ctl-btn[disabled] { opacity: .4; cursor: not-allowed; }
.ctl-btn-sm { min-height: 40px; padding: 9px 18px; font-size: 13px; }

/* ---- layout ---- */

.ctl-day { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; padding: 22px 0; }
.ctl-day-main { display: flex; gap: 16px; flex: 1 1 340px; min-width: 0; flex-wrap: wrap; }
.ctl-day-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ctl-inline { flex: 1 1 200px; }
.ctl-inline-date { flex: 0 1 180px; }
.ctl-inline > span {
  font-family: var(--mkt-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mkt-teal-label);
}

.ctl-status {
  font-family: var(--mkt-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mkt-text-2);
}

.ctl-card {
  background: var(--mkt-panel); border: 1px solid var(--mkt-line);
  border-radius: var(--r-2xl); padding: clamp(18px, 2vw, 28px);
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.ctl-card-quiet { background: transparent; border-style: dashed; }
.ctl-card-head { display: flex; flex-direction: column; gap: 6px; }
.ctl-card h2 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 19px; }
.ctl-note { margin: 0; color: var(--mkt-text-2); font-size: 13.5px; line-height: 1.6; }

.ctl-err {
  background: rgba(230, 57, 70, .12); border: 1px solid rgba(230, 57, 70, .45);
  border-radius: var(--r-md); padding: 13px 16px; color: #FF9AA2; font-size: 14px;
  margin-bottom: 16px;
}

/* ---- rep cards: the hot path ---- */

.ctl-reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.ctl-reps-sm { grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr)); }

.ctl-rep {
  position: relative;
  background: var(--mkt-panel-2); border: 1px solid var(--mkt-line);
  border-radius: var(--r-lg); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ctl-rep.sm { padding: 12px; gap: 8px; }
.ctl-rep-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

.ctl-rep-name {
  background: none; border: 0; padding: 0; text-align: left;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--mkt-text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px dashed transparent;
}
button.ctl-rep-name:hover { color: var(--mkt-teal); border-bottom-color: var(--mkt-teal-deep); }
.ctl-rep-edit {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
  padding: 6px 9px; min-height: 36px;
}

.ctl-rep-price { font-family: var(--mkt-mono); font-size: 14px; color: var(--mkt-teal); }
.ctl-rep-meta  { font-family: var(--mkt-mono); font-size: 11px; color: var(--mkt-muted); }

.ctl-rep-acts { display: flex; gap: 8px; }
.ctl-rep-acts button {
  flex: 1; min-height: 52px; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--mkt-line);
  background: var(--mkt-bg); color: var(--mkt-text);
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 19px;
}
.ctl-rep-acts .plus { background: var(--mkt-teal); color: #0B0F14; border-color: var(--mkt-teal); flex: 2; }
.ctl-rep-acts .plus:hover { background: var(--mkt-teal-deep); }
.ctl-rep-acts .minus { color: var(--mkt-muted); }
.ctl-rep-acts .minus:hover { color: var(--mkt-red); border-color: var(--mkt-red); }
.ctl-rep-acts button:active { transform: translateY(1px); }
.ctl-rep-acts button[disabled] { opacity: .3; cursor: not-allowed; }
.ctl-rep.sm .ctl-rep-acts button { min-height: 44px; font-size: 17px; }

.ctl-rep-rm {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; line-height: 1;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: transparent; color: var(--mkt-muted);
  font-size: 15px; cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.ctl-rep:hover .ctl-rep-rm, .ctl-rep-rm:focus-visible { opacity: 1; }
.ctl-rep-rm:hover { color: var(--mkt-red); border-color: var(--mkt-red); }

/* ---- investor chips ---- */

.ctl-pickers { display: flex; flex-wrap: wrap; gap: 9px; }
.ctl-chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 10px 14px 10px 18px;
  border-radius: var(--r-pill); border: 1px solid var(--mkt-line);
  background: var(--mkt-panel-2); color: var(--mkt-text);
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.ctl-chip:hover { border-color: var(--mkt-teal-deep); }
.ctl-chip .left {
  font-family: var(--mkt-mono); font-size: 12px;
  min-width: 26px; height: 26px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mkt-line); color: var(--mkt-text);
}
.ctl-chip.on { background: var(--mkt-teal); border-color: var(--mkt-teal); color: #0B0F14; }
.ctl-chip.on .left { background: rgba(11, 15, 20, .22); color: #0B0F14; }
.ctl-chip.spent { color: var(--mkt-muted); }
.ctl-chip.spent .left { background: transparent; border: 1px solid var(--mkt-line); color: var(--mkt-muted); }
.ctl-chip.spent.on { color: #0B0F14; }

.ctl-backing-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 0 14px; margin-top: 6px;
  border-top: 1px solid var(--mkt-line-soft);
  font-family: var(--mkt-mono); font-size: 13px; color: var(--mkt-teal);
}

/* ---- odds and ends ---- */

.ctl-addrep { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.ctl-addrep input { flex: 1 1 240px; }
.ctl-feedrow { display: flex; gap: 12px; flex-wrap: wrap; }
.ctl-feedrow input { flex: 1 1 260px; }
.ctl-numbers { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.ctl-numbers label { flex: 1 1 150px; }

.ctl-danger { border-top: 1px solid var(--mkt-line-soft); padding-top: 14px; }
.ctl-danger summary {
  cursor: pointer; color: var(--mkt-muted);
  font-family: var(--mkt-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ctl-danger summary:hover { color: var(--mkt-red); }
.ctl-danger > * + * { margin-top: 12px; }

@media (max-width: 760px) {
  .ctl-day-acts { width: 100%; }
  .ctl-day-acts .ctl-btn { flex: 1 1 auto; }
}


/* ==========================================================================
   Spot bonuses and the draw
   Both admin pages and the draw stage, on the same dark market shell.
   ========================================================================== */

/* ---------------------------------------------------------------- forms */

.bonus-form {
  display: grid;
  grid-template-columns: 1fr 1fr 110px;
  gap: 14px 16px;
  align-items: end;
}
.bonus-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bonus-f > span {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mkt-text-2); font-weight: 600;
}
.bonus-f input {
  width: 100%;
  background: var(--mkt-panel-2); color: var(--mkt-text);
  border: 1px solid var(--mkt-line); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: 15px;
}
.bonus-f input:focus-visible { outline: 2px solid var(--mkt-teal); outline-offset: 1px; }
.bonus-f--wide { grid-column: 1 / -1; }
.bonus-f--pts input { text-align: center; font-family: var(--mkt-mono); font-weight: 700; }

.bonus-go {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.bonus-quick {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--mkt-line);
}

/* ----------------------------------------------------------------- lists */

.bonus-list { display: flex; flex-direction: column; }

.bonus-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--mkt-line);
}
.bonus-row:last-child { border-bottom: 0; }
.bonus-row--out { opacity: .45; }

.bonus-pts {
  flex: 0 0 auto; min-width: 54px; text-align: center;
  font-family: var(--mkt-mono); font-weight: 700; font-size: 17px;
  color: var(--mkt-teal);
  background: rgba(0, 198, 162, .10);
  border: 1px solid rgba(0, 198, 162, .28);
  border-radius: 9px; padding: 7px 10px;
}
.bonus-pts--neg {
  color: #FF7A7A;
  background: rgba(255, 122, 122, .10);
  border-color: rgba(255, 122, 122, .28);
}
.bonus-pts--tag { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

.bonus-mid { flex: 1 1 auto; min-width: 0; }
.bonus-who { font-weight: 600; font-size: 15px; color: var(--mkt-text); }
.bonus-why {
  font-size: 13.5px; color: var(--mkt-text-2); padding-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bonus-at {
  flex: 0 0 auto; font-family: var(--mkt-mono);
  font-size: 12.5px; color: var(--mkt-muted);
}

/* ------------------------------------------------------------- draw setup */

/* A plain two-up. ".ctl-day-main" looks right for this but carries
   "flex: 1 1 340px", and inside a column card that basis becomes a 340px
   HEIGHT, leaving a hole under the fields. */
.draw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.draw-modes { display: grid; gap: 12px; }

.ctl .draw-mode, .ctl .draw-check {
  flex-direction: row;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; letter-spacing: normal; text-transform: none;
  color: var(--mkt-text);
}

.draw-mode {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 16px; cursor: pointer;
  background: var(--mkt-panel-2);
  border: 1px solid var(--mkt-line); border-radius: 12px;
}
.draw-mode:has(input:checked) {
  border-color: rgba(0, 198, 162, .55);
  background: rgba(0, 198, 162, .07);
}
.draw-mode input { margin-top: 3px; accent-color: var(--mkt-teal); flex: 0 0 auto; }
.draw-mode-body { display: flex; flex-direction: column; gap: 4px; }
.draw-mode-body b { font-size: 15px; color: var(--mkt-text); }
.draw-mode-body span { font-size: 13.5px; line-height: 1.5; color: var(--mkt-text-2); }

.draw-opts { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--mkt-line); display: grid; gap: 14px; }
.draw-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--mkt-text); }
.draw-check input { accent-color: var(--mkt-teal); }
.draw-check em { color: var(--mkt-muted); font-style: normal; }

.draw-paste {
  width: 100%; margin-top: 12px;
  background: var(--mkt-panel-2); color: var(--mkt-text);
  border: 1px solid var(--mkt-line); border-radius: 10px;
  padding: 12px 13px; font-family: var(--mkt-mono); font-size: 13.5px; line-height: 1.6;
  resize: vertical;
}

.draw-result-box {
  margin-top: 18px; padding: 18px 20px;
  background: rgba(0, 198, 162, .08);
  border: 1px solid rgba(0, 198, 162, .35);
  border-radius: 12px;
}
.draw-result-box--rehearsal {
  background: rgba(245, 185, 59, .08);
  border-color: rgba(245, 185, 59, .40);
}
.draw-result-tag {
  font-size: 11.5px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--mkt-text-2); font-weight: 700;
}
.draw-result-name {
  font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700;
  color: var(--mkt-text); padding-top: 4px;
}
.draw-result-sub { font-size: 13.5px; color: var(--mkt-text-2); padding-top: 4px; }

/* -------------------------------------------------------------- the stage */

.draw-shell { max-width: 1100px; }

.draw-rehearsal {
  position: sticky; top: 0; z-index: 5;
  margin: 0 0 18px; padding: 11px 18px;
  background: var(--mkt-gold); color: #1A1400;
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
  text-align: center; border-radius: 10px;
}

.draw-stage {
  margin: 8px 0 26px; padding: 54px 30px 40px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 198, 162, .16) 0%, rgba(0, 198, 162, 0) 62%),
    var(--mkt-panel);
  border: 1px solid var(--mkt-line);
  border-radius: 18px;
  text-align: center;
}

.draw-method {
  display: inline-block;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--mkt-teal);
  background: rgba(0, 198, 162, .12);
  border: 1px solid rgba(0, 198, 162, .32);
  border-radius: 999px; padding: 7px 15px;
}
.draw-method--choice {
  color: var(--mkt-gold);
  background: rgba(245, 185, 59, .12);
  border-color: rgba(245, 185, 59, .34);
}

.draw-reel {
  min-height: 108px;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 0 10px;
}
.draw-reel-name {
  font-family: 'Sora', sans-serif;
  font-size: clamp(34px, 7vw, 72px); font-weight: 800; line-height: 1.05;
  color: var(--mkt-text-2);
  letter-spacing: -.02em;
}
.draw-reel-name--won {
  color: var(--mkt-text);
  text-shadow: 0 0 40px rgba(0, 198, 162, .45);
}

.draw-sub { font-size: 15px; color: var(--mkt-text-2); max-width: 620px; margin: 0 auto; }

.draw-verify {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--mkt-line);
}
.draw-verify > div { display: flex; flex-direction: column; gap: 3px; }
.draw-verify .k {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mkt-muted); font-weight: 600;
}
.draw-verify .v { font-size: 16px; font-weight: 700; color: var(--mkt-text); }

.draw-pool { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 2px; }
.draw-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mkt-panel-2);
  border: 1px solid var(--mkt-line);
  border-radius: 999px; padding: 7px 8px 7px 14px;
}
.draw-chip-name { font-size: 14px; font-weight: 600; color: var(--mkt-text); }
.draw-chip-t {
  font-family: var(--mkt-mono); font-size: 12.5px; font-weight: 700;
  color: var(--mkt-teal);
  background: rgba(0, 198, 162, .12);
  border-radius: 999px; padding: 2px 9px;
}

.draw-history { display: flex; flex-direction: column; }
.draw-hist-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 11px 2px; border-bottom: 1px solid var(--mkt-line);
}
.draw-hist-row:last-child { border-bottom: 0; }
.draw-hist-row .mono { font-size: 12.5px; color: var(--mkt-muted); min-width: 74px; }
.draw-hist-row b { font-size: 15px; color: var(--mkt-text); }
.draw-hist-how { font-size: 13px; color: var(--mkt-text-2); }

.draw-foot {
  font-size: 13px; color: var(--mkt-muted); text-align: center;
  padding: 26px 0 8px; margin: 0; line-height: 1.6;
}

@media (max-width: 760px) {
  .bonus-form { grid-template-columns: 1fr; }
  .bonus-f--pts { max-width: 140px; }
  .bonus-at { display: none; }
  .draw-stage { padding: 38px 18px 30px; }
  .draw-verify { gap: 10px 22px; }
}


/* ==========================================================================
   The wheel
   One equal slice per name, with that person's ticket count on it. The
   sheen and the rim are drawn OUTSIDE the rotating group, so the light sits
   still while the slices turn under it — a highlight that spins with the
   wheel reads as a sticker rather than as light.
   ========================================================================== */

.wheel-wrap {
  position: relative;
  width: min(440px, 80vw);
  /* The pointer overhangs the top, so this clears the method tag above it. */
  margin: 30px auto 20px;
  aspect-ratio: 1;
}

.wheel {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, .6));
}
.wheel.is-won { filter: drop-shadow(0 0 60px rgba(0, 198, 162, .5)); }

#wheelRot { transform-origin: 0 0; }

.wheel-back { fill: #061310; }

.wheel-seg {
  stroke: #061310;
  stroke-width: .8;
  stroke-linejoin: round;
}

.wheel-sheen { pointer-events: none; }

.wheel-rim {
  fill: none;
  stroke: rgba(0, 198, 162, .55);
  stroke-width: 1.6;
}
.wheel-rim-2 {
  fill: none;
  stroke: #0B1B17;
  stroke-width: 7;
}

.wheel-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 7.6px; font-weight: 700;
  fill: #04211B;
  letter-spacing: .01em;
  pointer-events: none;
}

.wheel-tick-bg { fill: rgba(4, 33, 27, .82); }
.wheel-tickets {
  font-family: var(--mkt-mono);
  font-size: 8px; font-weight: 700;
  fill: #6FF2D4;
  pointer-events: none;
}

.wheel-hub-ring { fill: none; stroke: var(--mkt-teal); stroke-width: 1.4; opacity: .55; }
.wheel-hub      { stroke: var(--mkt-teal); stroke-width: 2; }
.wheel-hub-t {
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800;
  fill: var(--mkt-teal); letter-spacing: .06em;
}

/* Rounded, with a dark keyline so it reads against a light slice as well as
   a dark one. */
.wheel-pointer {
  position: absolute; top: -14px; left: 50%;
  width: 30px; height: 38px; margin-left: -15px; z-index: 2;
  background: linear-gradient(180deg, #FFD97A 0%, var(--mkt-gold) 62%, #C98F1E 100%);
  clip-path: polygon(50% 100%, 0% 26%, 8% 6%, 92% 6%, 100% 26%);
  border-radius: 4px;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .75));
  transform-origin: 50% 14%;
}
.wheel-pointer.is-ticking { animation: wheel-tick .085s linear infinite; }

@keyframes wheel-tick {
  0%   { transform: rotate(0deg); }
  36%  { transform: rotate(-12deg); }
  100% { transform: rotate(0deg); }
}

/* Someone who has asked not to be moved about still gets the name; it just
   does not travel to get there. */
@media (prefers-reduced-motion: reduce) {
  #wheelRot { transition: none !important; }
  .wheel-pointer.is-ticking { animation: none; }
}

@media (max-width: 700px) {
  .wheel-wrap { width: min(340px, 86vw); }
  .wheel-label { font-size: 8.4px; }
  .wheel-tickets { font-size: 8.6px; }
}

.draw-pull {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--mkt-line);
}

/* Demo only. The real draw is fired from the control panel, never from
   the stage, so this button exists on no other path. */
.draw-again {
  appearance: none; cursor: pointer;
  margin-top: 26px; padding: 13px 30px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--mkt-teal); color: #0B0F14;
  font-family: Sora, sans-serif; font-weight: 700; font-size: 15px;
}
.draw-again:hover:not(:disabled) { background: var(--mkt-teal-deep); }
.draw-again:disabled { opacity: .5; cursor: default; }