:root {
  /* FurlongIQ design tokens - a restrained, professional palette: near-black
     text on a light neutral canvas, one indigo accent, flat surfaces. Names
     are kept from the earlier theme so every rule keeps working. */
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --border: #e3e6ea;
  --border-strong: #cfd4db;
  --text: #14161a;
  --muted: #667085;
  --purple: #1c2f6b;
  --purple-2: #142352;
  --magenta: #1c2f6b;
  --blue: #1c2f6b;
  --blue-soft: #e8ecf6;
  --green: #0f8a5f;
  --green-soft: #e3f5ec;
  --red: #c02543;
  --red-soft: #fbe5ea;
  --amber: #9a6700;
  --gold: #b7862a;
  --grad: #10203f;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 4px 14px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 8px 30px rgba(16, 24, 40, 0.14);
  --glow: none;
  --ring: 0 0 0 3px rgba(28, 47, 107, 0.22);
  --r-sm: 9px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
}

* { box-sizing: border-box; }
/* The `hidden` attribute must always win over component display rules
   (e.g. .auth-overlay/.user-menu set display:flex, which otherwise overrides
   the UA [hidden]{display:none} and leaves elements stuck visible). */
[hidden] { display: none !important; }

::selection { background: var(--purple); color: #fff; }

/* slim, tinted scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cbbde8 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbbde8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* consistent keyboard focus everywhere */
:focus-visible { outline: 3px solid rgba(124, 58, 237, 0.4); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ---- app shell ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; height: 58px;
  background: var(--panel); color: var(--text);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wordmark { font: inherit; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); background: none; border: none; padding: 0; cursor: pointer; }
.wordmark span, .auth-brand h1 span, .product-name span { color: var(--purple); font-weight: 700; }
.product-crumb { font-size: 14px; font-weight: 600; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--border); white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.admin-link { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.admin-link:hover { color: var(--text); border-color: var(--border-strong); }

/* product sub-navigation: underlined text tabs on desktop and tablet */
.subnav { display: flex; align-self: stretch; }
.subnav-group { display: flex; gap: 4px; height: 100%; }
.subnav-group[hidden] { display: none; }
.tab, .vtab {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0 12px; height: 58px; cursor: pointer; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover, .vtab:hover { color: var(--text); }
.tab.active, .vtab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--purple); }

main { padding: 24px 24px 40px; max-width: 1180px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.page-head { margin: 4px 0 18px; }
.page-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.page-head p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 70ch; }

/* home: two products */
.home-intro { margin: 8px 0 18px; }
.home-intro h2 { margin: 0 0 2px; font-size: 24px; }
.home-intro p { margin: 0; }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-card {
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.product-card:hover { border-color: var(--purple); box-shadow: var(--shadow); }
.product-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.product-desc { color: var(--muted); font-size: 15px; line-height: 1.5; }
.product-points { margin: 2px 0 0; padding-left: 18px; color: var(--text); font-size: 14px; line-height: 1.7; }
.product-cta { margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 600; color: #fff; background: var(--purple); border-radius: 8px; padding: 9px 14px; }
.product-card:hover .product-cta { background: var(--purple-2); }
@media (max-width: 760px) { .home-grid { grid-template-columns: 1fr; } }

.howto { display: none; }
.howto strong { color: var(--purple); }

/* summary strip */
.summary {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.summary .metrics { display: flex; gap: 16px 34px; flex-wrap: wrap; }
/* each metric stacks its label over its value (they were running together) */
.summary .metric { display: flex; flex-direction: column; gap: 2px; }
.summary .metric .k { font-size: 12px; color: var(--muted); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.summary .metric .v { font-size: 25px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.summary .budget { display: flex; align-items: center; gap: 8px; font-weight: 600; }
@media (max-width: 620px) {
  .summary .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; width: 100%; }
  .summary .budget { width: 100%; justify-content: space-between; }
}

.layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
/* Let grid children shrink so wide tables scroll inside their own wrapper
   instead of forcing the whole page wider than the screen. */
.content, .sidebar { min-width: 0; }
.content { overflow-x: hidden; }

.sidebar { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; height: fit-content; position: sticky; top: 90px; box-shadow: var(--shadow-sm); }
.sidebar h2 { margin: 0 0 8px; font-size: 15px; }
.race-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 72vh; overflow-y: auto; }
.race-list li {
  padding: 11px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  margin-bottom: 7px;
  background: var(--panel-2);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.race-list li:hover { border-color: var(--purple-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.race-list li.selected { border-color: var(--purple); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--purple); }
.race-list .rl-top { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; align-items: center; }
.race-list .rl-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--green-soft); color: var(--green); }
.pill.none { background: var(--panel); color: var(--muted); border: 1px solid var(--border); }

/* Mobile: drop to one column and STOP the sidebar / race-list from creating a
   nested scroll area - that nested scroll is what makes the page feel stuck on
   phones. Let the whole page scroll naturally instead. */
@media (max-width: 860px) {
  main { padding: 14px; }
  .layout { grid-template-columns: 1fr; }
  /* Show the actual tips/race detail FIRST; push the options + race list
     below so a tapped race isn't buried under the whole list. */
  .content { order: -1; }
  .sidebar { order: 1; position: static; top: auto; }
  /* The board already lists the races as cards on mobile, so the full
     280-race sidebar list is redundant clutter that made the page scroll
     forever - hide it and keep just the option/filter controls. */
  .sidebar .race-list, .sidebar .races-heading { display: none; }
  .summary { position: static; }

  .tab { padding: 7px 12px; font-size: 14px; }
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.checkrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; cursor: pointer; }
.checkrow input { width: 16px; height: 16px; }

/* top bets */
.topbets-card { background: #fffdf6; border-color: #ecdcaa; }
.tb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tb-head h3 { margin: 0; font-size: 18px; }
.tb-head .star { font-size: 20px; }
.top-bet { display: flex; align-items: center; gap: 14px; padding: 11px 10px; border-top: 1px solid var(--border); cursor: pointer; border-radius: var(--r-sm); transition: background 0.15s; }
.top-bet:hover { background: #fffbee; }
.tb-rank { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 20px; min-width: 58px; text-align: center; letter-spacing: 0.02em; }
.c-strong { background: #d2f2dd; color: #14532d; }
.c-solid { background: #e2ecfb; color: #0a3d7a; }
.c-slight { background: #eef0f4; color: #4a5563; }
.tb-main { flex: 1 1 180px; }
.tb-horse { font-weight: 700; font-size: 16px; }
.tb-horse .tb-odds { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.tb-race { color: var(--muted); font-size: 13px; }
.tb-num { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.tb-num .k { font-size: 11px; color: var(--muted); }
.tb-num .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-go { color: var(--blue); font-weight: 600; font-size: 14px; }
@media (max-width: 620px) { .tb-num { display: none; } }

/* confidence badge on bet cards */
.conf { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px; vertical-align: middle; }

/* inputs - smaller, modern, consistent across the app */
input[type='number'], input[type='text'], input[type='email'], input[type='password'], input:not([type]), select, textarea {
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.3;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type='number']:focus, input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, input:not([type]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: var(--ring);
}
input::placeholder { color: #b3aac6; }
/* every dropdown gets a clean custom chevron */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%237b7090" stroke-width="2" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px;
}
input[type='number'] { width: 100px; }
select { width: 100%; max-width: 460px; }
.control { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.control label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
/* modern checkboxes */
input[type='checkbox'] { accent-color: var(--purple); width: 15px; height: 15px; cursor: pointer; }
.advanced { margin-top: 8px; }
.advanced summary { cursor: pointer; color: var(--muted); font-size: 14px; transition: color 0.15s; }
.advanced summary:hover { color: var(--text); }

button { font-family: inherit; }
button.primary {
  background: var(--grad);
  border: none;
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r);
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--glow);
  transition: transform 0.12s, filter 0.15s, box-shadow 0.15s;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:active { filter: brightness(0.96); }
button.primary.big { font-size: 17px; padding: 14px 26px; }
/* Keep CTA buttons off the content above them (cramped on mobile otherwise). */
button.primary.big { margin: 20px 0 6px; }

/* default text shown when a list has no entries */
.empty-list { color: var(--muted); padding: 18px 14px; font-size: 14px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--panel-2); }

/* race cards (board + detail) */
.race-card { margin-bottom: 16px; }
.race-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.race-card .head h3 { margin: 0; font-size: 19px; }
.race-card .head .when { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.race-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }

.verdict {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r); font-size: 15px; font-weight: 600; margin: 12px 0;
}
.verdict .big-ico { font-size: 22px; }
.verdict.good { background: var(--green-soft); border: 1px solid #b7e0c2; color: #14532d; }
.verdict.bad { background: var(--red-soft); border: 1px solid #f3c0bd; color: #8a1c16; }
.verdict.neutral { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.verdict.gold { background: #fbf3da; border: 1px solid #ecd9a0; color: #6b4e00; }

.bet-card {
  display: flex; align-items: center; gap: 14px;
  background: #e6f7ef;
  border: 1px solid #bfe4cc;
  border-left: 4px solid var(--green);
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 9px; flex-wrap: wrap;
}
.bet-card .horse { font-size: 16px; font-weight: 700; flex: 1 1 150px; color: #14532d; }
.bet-card .horse small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.bet-card .stake { display: flex; flex-direction: column; align-items: center; min-width: 92px; gap: 1px; }
.bet-card .stake .k { font-size: 11px; color: var(--muted); }
.bet-card .stake .v { font-size: 19px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bet-card .arrow { color: var(--muted); font-size: 20px; }
.bet-card .win .v { color: var(--green); }
.bet-card .bet-why { flex: 1 0 100%; font-size: 13px; color: #2f6b41; background: rgba(255, 255, 255, 0.65); border-radius: var(--r-sm); padding: 6px 10px; }

/* prediction reasoning */
.tb-why { color: #6b4e00; font-size: 12px; margin-top: 2px; }
.form-figs { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; color: var(--muted); }
.why-btn { background: none; border: 1px solid var(--border-strong); color: var(--blue); cursor: pointer; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 3px 9px; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.why-btn:hover { border-color: var(--blue); background: var(--blue-soft); }
.why-btn.open { background: var(--blue); color: #fff; border-color: var(--blue); }
.why-row > td { background: var(--panel-2); padding: 12px 14px; }
.factors { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.fbar { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.fb-label { color: var(--text); }
.fb-track { position: relative; height: 10px; background: #e7e1f2; border-radius: 6px; overflow: hidden; }
.fb-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.fb-fill.pos { background: var(--green); }
.fb-fill.neg { background: var(--red); }
.fb-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.fb-val.pos { color: var(--green); }
.fb-val.neg { color: var(--red); }

.proj-line { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); margin-top: 6px; }
.proj-line .pl { font-size: 13px; }
.proj-line .pl b { display: block; font-size: 17px; }

/* full field table */
.field-toggle { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 14px; padding: 6px 0; font-weight: 600; }
.table-wrap { overflow-x: auto; margin-top: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.is-bet { background: var(--green-soft); }
tr.is-winner td { font-weight: 700; }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 10px; margin-left: 6px; font-weight: 700; }
.tag.bet { background: var(--green); color: #fff; }
.tag.won { background: var(--gold); color: #fff; }
.val-up { color: var(--green); font-weight: 700; }
.val-down { color: var(--muted); }

.reveal-box { margin-top: 12px; }
.reveal-btn { background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text); padding: 9px 16px; border-radius: var(--r-sm); cursor: pointer; font-size: 15px; transition: border-color 0.15s, background 0.15s; }
.reveal-btn:hover { border-color: var(--blue); background: var(--blue-soft); }
.outcome { margin-top: 10px; padding: 12px 16px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; }
.outcome.win { background: var(--green-soft); border: 1px solid #b7e0c2; color: #14532d; }
.outcome.lose { background: var(--red-soft); border: 1px solid #f3c0bd; color: #8a1c16; }

.back-link { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 14px; padding: 4px 0 12px; font-weight: 600; }

.pos { color: var(--green); }
.neg { color: var(--red); }

/* simulation */
.test-setup { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.set-row label { font-weight: 600; }
.hero { text-align: center; padding: 34px 20px 30px; border-radius: var(--r-xl); margin-bottom: 16px; }
.hero.up { background: var(--green-soft); border: 1px solid #bfe3d0; }
.hero.down { background: var(--red-soft); border: 1px solid #f0c3cc; }
.hero .emoji { display: none; }
.hero .headline { font-family: var(--font-display); font-size: 34px; font-weight: 800; margin: 8px 0 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hero .sub { font-size: 17px; }
.plain-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pstat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; font-size: 14px; box-shadow: var(--shadow-sm); color: var(--muted); }
.pstat b { display: block; font-size: 18px; margin-top: 2px; color: var(--text); font-variant-numeric: tabular-nums; }

canvas { width: 100%; height: auto; background: var(--panel-2); border-radius: var(--r-sm); }
.spinner { color: var(--muted); padding: 30px; text-align: center; font-size: 15px; }
.spinner::before {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px;
  border: 2px solid var(--border-strong); border-top-color: var(--purple); border-radius: 50%;
  animation: fiq-spin 0.8s linear infinite;
}
@keyframes fiq-spin { to { transform: rotate(360deg); } }

.prose { max-width: 760px; }
.prose h3 { margin-top: 22px; }
.steps li { margin-bottom: 8px; }
.prose .warn { color: var(--amber); background: #fbf3da; border: 1px solid #ecd9a0; border-radius: var(--r-sm); padding: 12px 16px; }

/* strategy line inside the test-mode hero */
.hero-style { font-size: 14px; color: var(--muted); margin-top: 8px; }
.hero.up .hero-style { color: #2f6b41; }
.hero.down .hero-style { color: #8a4a45; }

/* test-mode "every bet placed" table */
.simbets-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.simbets-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.bet-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.bet-filter { background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--muted); padding: 6px 13px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 600; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.bet-filter:hover { border-color: var(--blue); color: var(--text); }
.bet-filter.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.csv-btn { background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; font-weight: 600; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.csv-btn:hover { border-color: var(--purple); color: var(--purple); background: var(--blue-soft); }
.simbets-wrap { max-height: 460px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.simbets { width: 100%; border-collapse: collapse; font-size: 14px; }
.simbets thead th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; }
.simbets td, .simbets th { white-space: nowrap; }
.simbets tbody tr:hover { background: var(--panel-2); }
.bet-won { color: var(--green); font-weight: 700; }
.bet-placed { color: var(--blue); font-weight: 700; }
.bet-lost { color: var(--muted); }
.ew-tag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); vertical-align: middle; }

/* model accuracy / calibration panel */
.cal-headline { display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline; }
.cal-vs { display: flex; flex-direction: column; }
.cal-vs b { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cal-vs i { font-size: 12px; color: var(--muted); font-style: normal; }
.cal-table { display: flex; flex-direction: column; gap: 10px; }
.cal-row { display: grid; grid-template-columns: 110px 1fr 88px; align-items: center; gap: 12px; }
.cal-band { font-size: 11px; color: var(--muted); line-height: 1.25; }
.cal-band b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-bar { position: relative; height: 18px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.cal-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; opacity: 0.9; }
.cal-fill.pred { background: var(--blue); }
.cal-fill.act { background: var(--green); }
.cal-bar em { position: absolute; left: 8px; top: 0; line-height: 18px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.cal-n { font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 620px) { .cal-row { grid-template-columns: 92px 1fr; } .cal-n { display: none; } }

/* On phones, wide tables reflow into stacked, labelled cards instead of
   scrolling sideways - no more dragging tables left/right to read them. */
@media (max-width: 620px) {
  .table-wrap { overflow: visible; }
  .table-wrap table, .simbets { display: block; width: 100%; }
  .table-wrap thead, .simbets thead { display: none; }
  .table-wrap tbody, .simbets tbody { display: block; }
  .table-wrap tr:not(.why-row), .simbets tbody tr {
    display: block; border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 6px 12px; margin-bottom: 8px; background: var(--panel);
  }
  .table-wrap td, .simbets td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 3px 0; border: none; text-align: right; white-space: normal; font-size: 14px;
  }
  /* secondary rows in lighter type so the card scans quickly */
  .table-wrap td[data-label]::before, .simbets td[data-label]::before { font-weight: 600; }
  .table-wrap td.muted { color: var(--muted); }
  .table-wrap td::before, .simbets td::before {
    content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600;
    text-align: left; flex: 0 0 auto;
  }
  /* horse name acts as the card title */
  .cell-horse { font-weight: 700; font-size: 16px; justify-content: flex-start !important;
    border-bottom: 1px solid var(--border); padding-bottom: 6px !important; margin-bottom: 4px; }
  .cell-horse::before { content: none; }
  .cell-race { font-weight: 700; }
  /* the Why? button becomes a full-width action at the foot of the card */
  .cell-why { padding-top: 6px !important; }
  .cell-why::before { content: none; }
  .cell-why .why-btn { width: 100%; padding: 8px; }
  /* keep the bet/winner tints on the card */
  .table-wrap tr.is-bet:not(.why-row) { background: var(--green-soft); }
  .table-wrap tr.is-winner:not(.why-row) { border-color: var(--gold); }
  /* the factor breakdown row spans the full card width (only when expanded -
     must not override the [hidden] attribute, or every row shows at once) */
  .table-wrap tr[hidden] { display: none; }
  .why-row:not([hidden]) { display: block; padding: 0; }
  .why-row:not([hidden]) > td { display: block; background: var(--panel-2); border-radius: var(--r-sm); padding: 12px; margin-bottom: 8px; }
  .why-row > td::before { content: none; }
  .fbar { grid-template-columns: 76px 1fr 48px; }
}

/* strategy comparison */
.cmp-table { display: flex; flex-direction: column; gap: 8px; }
.cmp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); }
.cmp-row.cmp-best { border-color: var(--green); background: var(--green-soft); }
.cmp-name { font-weight: 600; }
.cmp-tag { font-size: 10px; font-weight: 800; background: var(--green); color: #fff; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.cmp-final { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-yield { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .cmp-row { grid-template-columns: 1fr auto; }
  .cmp-yield { grid-column: 2; text-align: right; }
}

/* course breakdown */
.course-table { display: flex; flex-direction: column; gap: 8px; }
.course-row { display: grid; grid-template-columns: 96px 1fr 78px auto; align-items: center; gap: 10px; }
.course-name { font-weight: 600; font-size: 13px; }
.course-track { position: relative; height: 12px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.course-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.course-fill.pos { background: var(--green); }
.course-fill.neg { background: var(--red); }
.course-pnl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.course-n { text-align: right; }
@media (max-width: 520px) { .course-row { grid-template-columns: 84px 1fr 70px; } .course-n { display: none; } }

/* pace map */
.pace-map { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; background: var(--panel-2); }
.pace-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pace-head h4 { margin: 0; font-size: 15px; }
.pace-tag { font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 20px; }
.pace-tag.front { background: var(--blue-soft); color: var(--purple); }
.pace-tag.closers { background: var(--green-soft); color: var(--green); }
.pace-tag.even { background: #fff; border: 1px solid var(--border); color: var(--muted); }
.pace-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pace-lane { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; }
.pace-lane-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 6px; text-align: center; }
.pace-chips { display: flex; flex-direction: column; gap: 4px; }
.pace-chip { font-size: 12px; padding: 3px 7px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--border); text-align: center; }
.pace-chip.bet { background: var(--blue-soft); border-color: var(--purple); color: var(--purple); font-weight: 700; }
@media (max-width: 620px) { .pace-grid { grid-template-columns: 1fr 1fr; } }

/* settings - weight dials + live result */
.settings-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
.dials-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dials { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.dial { display: flex; flex-direction: column; gap: 5px; }
.dial-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dial-label { font-size: 14px; font-weight: 600; }
.dial-val { font-size: 13px; font-weight: 800; color: var(--purple); font-variant-numeric: tabular-nums; }
.dial.changed .dial-val { color: var(--magenta); }
.dial input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px;
  background: #e6dcf6; border: 1px solid var(--border); outline: none;
}
.dial input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 2px 8px rgba(46, 16, 101, 0.4); cursor: pointer; border: 2.5px solid #fff;
  transition: transform 0.12s;
}
.dial input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.12); }
.dial input[type='range']::-moz-range-thumb { width: 17px; height: 17px; border: 2.5px solid #fff; border-radius: 50%; background: var(--purple); cursor: pointer; box-shadow: 0 2px 8px rgba(46, 16, 101, 0.4); }
.settings-live { position: sticky; top: 90px; }
.live-hero { text-align: center; padding: 20px 14px; border-radius: var(--r-lg); background: var(--panel-2); margin-bottom: 12px; }
.live-hero.up { background: #e4f6ee; }
.live-hero.down { background: #fbe4ed; }
.live-big { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.live-sub { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.live-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lstat { display: flex; flex-direction: column; gap: 1px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 11px; box-shadow: var(--shadow-sm); }
.lstat .k { font-size: 11px; color: var(--muted); }
.lstat .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } .settings-live { position: static; } }
@media (max-width: 460px) { .dials { grid-template-columns: 1fr; } }

/* phones: the product sub-navigation becomes a fixed bottom bar (text only) */
@media (max-width: 620px) {
  .topbar { padding: 0 16px; height: 52px; }
  .subnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--panel); border-top: 1px solid var(--border);
    padding: 0 0 env(safe-area-inset-bottom, 0px);
  }
  .subnav-group { width: 100%; gap: 0; }
  .tab, .vtab { flex: 1; height: 54px; padding: 0 4px; font-size: 13px; border-bottom: none; border-top: 2px solid transparent; }
  .tab.active, .vtab.active { border-top-color: var(--purple); background: var(--blue-soft); }
  body[data-product="home"] .subnav { display: none; }
  body:not([data-product="home"]) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  main { scroll-padding-bottom: 70px; }
  button.primary.big { margin: 20px 0 6px; }
  .sim-item-actions, .adm-actions { margin-top: 4px; }
}
/* tablets: keep the underlined tabs but tighten the header */
@media (min-width: 621px) and (max-width: 1024px) {
  .topbar { padding: 0 16px; gap: 10px; }
  .tab, .vtab { padding: 0 9px; font-size: 13.5px; }
  main { padding: 18px 16px 36px; }
}

/* modal / popover */
.modal-overlay { position: fixed; inset: 0; background: rgba(30, 15, 58, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; padding: 22px 24px; position: relative; }
.modal-x { position: absolute; top: 12px; right: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; color: var(--muted); transition: color 0.15s, border-color 0.15s; }
.modal-x:hover { color: var(--text); border-color: var(--purple); }
.rm-head h3 { margin: 0 0 2px; }
.rm-reason { background: var(--blue-soft); color: var(--purple); border-radius: var(--r-sm); padding: 8px 12px; font-size: 14px; margin: 12px 0; }
.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 12px 0; }
.rm-row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); padding: 5px 0; font-size: 14px; }
.rm-k { color: var(--muted); }
.rm-v { font-weight: 600; text-align: right; }
.rm-sub { margin: 14px 0 8px; font-size: 14px; }
@media (max-width: 480px) { .rm-grid { grid-template-columns: 1fr; } }

/* clickable horse name */
.horse-link { background: none; border: none; padding: 0; color: var(--purple); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.horse-link:hover { text-decoration: underline; }

/* share + slip-add buttons */
.share-btn { background: var(--blue-soft); color: var(--purple); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color 0.15s; }
.share-btn:hover { border-color: var(--purple); }
.bet-actions { flex: 1 0 100%; display: flex; justify-content: flex-end; }
.slip-add { background: #fff; border: 1px solid var(--purple); color: var(--purple); border-radius: 8px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; }
.slip-add:hover { background: var(--blue-soft); }
.slip-add.in-slip { background: var(--purple); color: #fff; }
.tb-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* bet slip floating button + modal */
#slip-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: var(--purple); color: #fff; border: none; border-radius: 30px; padding: 12px 19px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 12px rgba(46, 16, 101, 0.3); display: flex; align-items: center; gap: 8px; }
#slip-fab:hover { filter: brightness(1.08); }
.slip-count { background: #fff; color: var(--purple); border-radius: 20px; padding: 0 8px; font-size: 13px; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.slip-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.slip-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; }
.slip-main { display: flex; flex-direction: column; min-width: 0; }
.slip-num { display: flex; flex-direction: column; align-items: flex-end; }
.slip-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.slip-del:hover { color: var(--red); }
.slip-totals { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.slip-totals b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.slip-actions { margin-top: 12px; text-align: right; }
@media (max-width: 620px) { #slip-fab { bottom: 84px; right: 12px; } }

/* pace note in the verdict */
.verdict-pace { display: block; font-weight: 500; font-size: 13px; margin-top: 4px; opacity: 0.9; }

/* auth gate */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto;
}
.auth-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); width: 100%; max-width: 420px; padding: 28px 28px 32px; }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 14px; }
.auth-brand .logo { font-size: 30px; }
.auth-brand h1 { margin: 0; font-size: 24px; color: var(--text); letter-spacing: -0.02em; }
#auth-root h2 { margin: 0 0 12px; font-size: 20px; text-align: center; }
#auth-root label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 0; font-weight: 600; }
#auth-root input { width: 100%; margin-top: 5px; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 14px; background: #fff; }
#auth-root .primary { width: 100%; margin-top: 16px; }
.auth-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.auth-links a { color: var(--purple); font-size: 14px; cursor: pointer; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
.auth-links a.disabled { color: var(--muted); cursor: default; pointer-events: none; opacity: 0.7; }
.auth-err { background: var(--red-soft); color: #9a2540; border-radius: var(--r-sm); padding: 8px 11px; font-size: 13px; margin-top: 8px; }
.auth-ok { background: var(--green-soft); color: #0c6e4a; border-radius: var(--r-sm); padding: 8px 11px; font-size: 13px; margin-top: 8px; }
.auth-dev { background: #fff7e6; border: 1px solid #f0d999; color: #7a5b00; border-radius: var(--r-sm); padding: 8px 11px; font-size: 13px; margin-top: 8px; }

/* user menu chip */
.user-menu { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 4px 12px 4px 4px; border-radius: 24px; cursor: pointer; font-size: 13.5px; font-weight: 600; transition: border-color 0.15s; }
.user-menu:hover { border-color: var(--border-strong); }
.um-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.um-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) { .um-name { display: none; } }

/* profile modal extras */
.pf-label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 10px; }
.pf-label input { width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 14px; }
.pf-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.pf-danger { background: none; border: 1px solid var(--red); color: var(--red); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 13px; transition: background 0.15s; }
.pf-danger:hover { background: var(--red-soft); }

/* footer / version */
.site-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 26px 14px 34px; }
.site-footer .ver { font-weight: 700; }

/* admin panel */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.adm-form { display: flex; flex-direction: column; gap: 8px; }
.adm-form input, .adm-form select { padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 14px; background: #fff; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th, .adm-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.adm-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table select { padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; font-size: 13px; }
.adm-table input.adm-name { padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; font-size: 13px; width: 100%; max-width: 170px; }
.adm-table input.adm-name:focus { border-color: var(--purple); outline: none; }
.adm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { background: var(--blue-soft); color: var(--purple); border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
@media (max-width: 760px) { .admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .adm-table thead { display: none; }
  .adm-table, .adm-table tbody, .adm-table tr, .adm-table td { display: block; width: 100%; }
  .adm-table tr { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; margin-bottom: 10px; }
  .adm-table tr:last-child td { border-bottom: none; }
  .adm-table td { border: none; padding: 5px 6px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .adm-table td::before { content: attr(data-label); color: var(--muted); font-weight: 600; }
}

/* simulations */
.sim-new-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 22px; margin-bottom: 18px; }
.sim-new-grid .control { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sim-new-grid input, .sim-new-grid select { width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 14px; background: #fff; color: var(--text); font-weight: 400; }
.sim-new-grid select { appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%237b7090" stroke-width="2" stroke-linecap="round"/></svg>'); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.sim-item { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; background: var(--panel-2); flex-wrap: wrap; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.sim-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.sim-item-main { flex: 1 1 220px; min-width: 0; }
.sim-item-name { font-weight: 700; font-size: 16px; }
.sim-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sim-item-num { display: flex; flex-direction: column; align-items: flex-end; min-width: 90px; }
.sim-item-num .k { font-size: 11px; color: var(--muted); }
.sim-item-num .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sim-yield { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-view-name { background: var(--blue-soft); color: var(--purple); border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
@media (max-width: 620px) { .sim-item-num { align-items: flex-start; min-width: 0; } }

/* slip controls + bet history */
.slip-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.slip-main { flex: 1 1 150px; display: flex; flex-direction: column; }
.slip-mkt { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; font-size: 13px; }
.slip-stake { display: flex; align-items: center; gap: 4px; }
.slip-stake input { width: 78px; padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; }
.slip-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.slip-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.bets-metrics { display: flex; gap: 16px 28px; flex-wrap: wrap; }
.bets-metrics .metric { display: flex; flex-direction: column; gap: 2px; }
.bets-metrics .metric .k { font-size: 12px; color: var(--muted); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.bets-metrics .metric .v { font-size: 22px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .bets-metrics { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }
.bet-status { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.bet-status.won { background: var(--green-soft); color: var(--green); }
.bet-status.placed { background: var(--blue-soft); color: var(--purple); }
.bet-status.lost { background: var(--red-soft); color: var(--red); }
.bet-status.pending { background: var(--panel-2); color: var(--muted); }

/* minimise race cards */
.race-card .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.min-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--purple); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; }
.min-btn:hover { background: var(--blue-soft); border-color: var(--purple); }
.race-card.minimised { padding: 12px 16px; opacity: 0.82; }
.race-card.minimised .head { align-items: center; }
.race-card.minimised:hover { opacity: 1; }

/* paging */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.pg-btn { border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--purple); font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pg-btn:hover:not(:disabled) { background: var(--blue-soft); border-color: var(--purple); }
.pg-btn:disabled { opacity: 0.45; cursor: default; }
.pg-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* admin per-user detail (login history + simulations) */
.adm-detail-row > td { background: var(--panel-2); padding: 0; }
.adm-detail { padding: 14px 16px; }
.adm-detail h4 { margin: 0 0 8px; font-size: 14px; }
.adm-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .adm-detail-grid { grid-template-columns: 1fr; } }
.adm-subtable { font-size: 13px; }
.adm-subtable th, .adm-subtable td { padding: 6px 8px; }
.adm-ua { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }

/* sim dials header buttons */
.dials-head-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* bookmaker-style meetings on the board */
.meeting { margin-bottom: 22px; }
.meeting-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 10px;
  background: var(--grad); color: #fff; border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.meeting-head h3 { margin: 0; font-size: 16px; color: #fff; }
.meeting-meta { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
.meeting-times { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.time-chip {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 20px; cursor: pointer; transition: background 0.15s;
}
.time-chip:hover { background: rgba(255, 255, 255, 0.3); }
.time-chip.has-bet { background: #fff; color: var(--purple); border-color: #fff; }
@media (max-width: 620px) { .meeting-times { margin-left: 0; width: 100%; } }

/* jockey silks */
.silk { width: 26px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 7px; background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 1px; }
.tb-horse .silk { width: 24px; height: 20px; }

/* settings factor legend */
.factor-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.legend-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 13.5px; align-items: start; }
.legend-row b { color: var(--purple); }
.legend-row span { color: var(--muted); }
@media (max-width: 520px) { .legend-row { grid-template-columns: 1fr; gap: 2px; } }

/* "custom weights active" note on the racing board */
.weights-note { margin-top: 8px; font-size: 13px; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 10px; color: var(--text); }

/* admin: per-user sales-chat record */
.adm-chat-answer details summary { cursor: pointer; color: var(--purple); font-weight: 600; font-size: 13px; }
.adm-chat-body { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 6px; font-size: 13px; line-height: 1.5; max-width: 640px; white-space: normal; text-align: left; }

/* ---- sales analysis chat ---- */
.chat-box { min-height: 240px; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.chat-msg { max-width: 78%; padding: 10px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.5; overflow-wrap: break-word; }
.chat-msg.user { align-self: flex-end; background: var(--purple); color: #fff; }
.chat-msg.assistant { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border-strong); }
.chat-msg.pending { color: var(--muted); font-style: italic; }
/* tabular answers get the full width; the table scrolls inside its own wrap */
.chat-msg.has-table { max-width: 100%; width: 100%; }
.chat-table-wrap { overflow-x: auto; margin: 8px 0; }
.chat-msg table { border-collapse: collapse; font-size: 13px; width: 100%; }
.chat-msg th, .chat-msg td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.chat-msg th { background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
/* tappable follow-up links inside answers ("Tell me more about …") */
.chat-msg .chat-link { background: none; border: none; padding: 0; font: inherit; font-weight: inherit; color: var(--purple); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-align: left; }
.chat-msg .chat-link:hover { text-decoration: underline solid; }
.chat-msg.error { align-self: flex-start; background: var(--red-soft); color: #9a2540; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
/* sale + question options in one row: catalogue, model, length, sources */
.sale-opts-row { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.sale-opts-row .control { margin: 0; flex: 1 1 160px; min-width: 0; }
.sale-opts-row .sale-pick { flex: 2 1 240px; }
.sale-opts-row select { width: 100%; }
.sale-opts-row .sources-ctl { flex: 1.4 1 230px; }
.src-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; }
.src-checks .checkrow { margin-top: 0; font-size: 13px; white-space: nowrap; }

/* accordion sections inside answers: ## open by default, ### collapsed */
.chat-sec { border: 1px solid var(--border); border-radius: var(--r-sm); margin: 8px 0; background: #fff; }
.chat-sec summary { cursor: pointer; padding: 9px 12px; font-weight: 700; font-size: 14px; color: var(--purple); list-style: none; display: flex; align-items: center; gap: 8px; }
.chat-sec summary::-webkit-details-marker { display: none; }
.chat-sec summary::before { content: '▸'; font-size: 12px; transition: transform 0.15s; }
.chat-sec[open] summary::before { transform: rotate(90deg); }
.chat-sec-body { padding: 0 12px 10px; }
.chat-sec .chat-table-wrap { margin-top: 2px; }

/* action row under a finished answer (export) */
.chat-actions { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.chat-actions .csv-btn { font-size: 12px; }

/* per-fact source badges in answers */
.src-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 9px; vertical-align: 1px; margin-left: 3px; letter-spacing: 0.02em; }
.src-cat { background: var(--blue-soft); color: var(--purple); }
.src-racing { background: var(--green-soft); color: var(--green); }
.src-web { background: #fdf3d7; color: #8a6d00; }

/* the question box + Ask button stay visible at the bottom while scrolling
   (on phones they sit just above the fixed bottom nav) */
.chat-input-row {
  display: flex; gap: 8px; margin-top: 12px;
  position: sticky; bottom: 0; z-index: 5;
  background: var(--panel); padding: 10px 0 7px;
}
.chat-input-row input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 14px; background: #fff; }
.chat-input-row input::placeholder { font-size: 12.5px; color: var(--muted); opacity: 0.5; }
.chat-input-row .primary { padding: 10px 22px; }
/* Phones only: once a conversation starts (#sales.chat-focus) the intro and
   picker cards hide and the chat gets the whole screen, with a slim context
   bar in their place. Desktop always keeps the full layout. */
.chat-context { display: none; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border); padding-bottom: 9px; margin-bottom: 10px; }
.chat-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-context button { white-space: nowrap; flex: 0 0 auto; }
.chat-context .ctx-btns { display: flex; gap: 6px; flex: 0 0 auto; }
/* every screen size: the sale/options card collapses once a conversation
   starts, replaced by the context bar (its button re-opens the card), and
   the example-question chips disappear */
#sales.chat-focus:not(.view-browse) #sale-card { display: none; }
#sales.chat-focus .chat-context { display: flex; }
#sales.chat-focus .chat-suggest { display: none; }
@media (max-width: 620px) {
  .chat-msg { max-width: 92%; }
  /* ONE level of scroll on phones: the page itself. The chat box flows with
     the document (no nested scrollbar) and takes only the height it needs,
     so there's no dead gap between the Ask row and the footer either. */
  .chat-box { max-height: none; min-height: 0; height: auto; overflow-y: visible; }
  /* phones additionally hide the intro and example chips in focus mode */
  #sales.chat-focus .howto, #sales.chat-focus .chat-suggest { display: none; }
  /* chat tables stack into labelled cards on phones - no sideways scrolling */
  .chat-msg .chat-table-wrap { overflow-x: visible; }
  .chat-msg table, .chat-msg tbody { display: block; width: 100%; }
  .chat-msg thead { display: none; }
  .chat-msg tbody tr { display: block; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; margin-bottom: 8px; background: #fff; }
  .chat-msg tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: none; padding: 3px 0; text-align: right; white-space: normal; }
  .chat-msg tbody td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; flex: 0 0 auto; }
  .chat-msg tbody td:empty { display: none; }
  /* 16px stops iOS Safari zooming the page when the input is focused */
  .chat-input-row input { font-size: 16px; }
  .chat-input-row .primary { padding: 10px 16px; }
  /* stick above the fixed bottom navigation bar */
  .chat-input-row { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Sales: view switch, Browse table, lot panel ------------------------ */
.view-switch { display: flex; gap: 6px; margin: 0 0 12px; }
.view-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--muted); cursor: pointer; }
.view-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.view-btn:not(.active):hover { color: var(--purple); border-color: var(--purple); }
.br-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.br-bar input, .br-bar select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; color: var(--text); }
.br-bar input[type="search"] { flex: 1 1 220px; min-width: 160px; }
.br-bar .br-all input { flex: 0 0 auto; width: 16px; height: 16px; padding: 0; }
.br-bar select { flex: 0 1 auto; max-width: 200px; }
.br-table td { font-size: 13.5px; }
.br-table tbody tr { cursor: pointer; }
.br-table tbody tr:hover td { background: var(--panel-2); }
.br-table tbody tr.starred td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.br-lot { font-weight: 800; color: var(--purple); }
.br-sub { color: var(--muted); font-size: 12px; }
.score { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.score-bar { width: 64px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--purple); }
.score-bar.low i { background: var(--muted); }
.score-bar.high i { background: var(--green); }
.score-n { font-weight: 800; min-width: 22px; font-variant-numeric: tabular-nums; }
.score-pend { color: var(--muted); font-size: 12px; font-style: italic; }
.br-actions { white-space: nowrap; text-align: right; }
.star-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--border-strong); padding: 2px 4px; line-height: 1; }
.star-btn.on { color: var(--gold); }
.cmp-check { width: 16px; height: 16px; vertical-align: middle; accent-color: var(--purple); cursor: pointer; }
.br-more { text-align: center; margin-top: 10px; }
.br-compare-bar { position: sticky; bottom: 70px; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-weight: 600; }
@media (min-width: 621px) { .br-compare-bar { bottom: 12px; } }
.lot-panel { position: relative; }
.lp-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-bottom: 8px; }
.lp-title { flex: 1 1 320px; }
.lp-title h3 { margin: 0 0 4px; font-size: 20px; }
.lp-title .muted { line-height: 1.45; }
.lp-score { text-align: center; min-width: 96px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); }
.lp-score b { display: block; font-size: 30px; line-height: 1; font-family: var(--font-display); color: var(--purple); }
.lp-score span { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.lp-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; }
.factors { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 6px 0 14px; }
.factor { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; }
.factor .f-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.factor .f-bar i { display: block; height: 100%; background: var(--purple); }
.factor .f-pts { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.factor .f-detail { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin: -3px 0 4px; }
.lp-section-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 0 6px; }
.lp-dossier { border-top: 1px solid var(--border); padding-top: 10px; }
.lp-dossier .chat-sec { background: #fff; }
.cmp-table th:first-child { width: 160px; }
.sl-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sl-row:last-child { border-bottom: none; }
.sl-row .br-lot { cursor: pointer; }
@media (max-width: 620px) {
  .br-bar select { flex: 1 1 45%; max-width: none; }
  .br-table thead { display: none; }
  .br-table tbody tr { display: block; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 8px; }
  .br-table tbody td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 3px 0; }
  .br-table tbody td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  .br-table tbody td.br-actions { justify-content: flex-end; }
  .br-table tbody td.br-actions::before { content: none; }
  .factor { grid-template-columns: 110px 1fr 46px; }
}
/* Browse/Shortlist only need the sale picker - the chat controls hide there */
#sales.view-browse .sale-opts-row .control:not(.sale-pick) { display: none; }

/* shortlist view */
.sl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.sl-tools { display: flex; align-items: center; gap: 12px; }
.sl-item { display: grid; grid-template-columns: 64px 1fr 150px auto; gap: 10px 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.sl-item:last-child { border-bottom: none; }
.sl-item .br-lot { cursor: pointer; font-size: 16px; padding-top: 2px; }
.sl-main { min-width: 0; }
.sl-main .sl-open { cursor: pointer; }
.sl-note { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; resize: vertical; min-height: 34px; }
.sl-note:focus { border-color: var(--purple); outline: none; }
.sl-budget { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
.sl-side label { display: block; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.sl-news { margin-top: 6px; font-size: 12.5px; }
.sl-news li { margin: 2px 0 2px 16px; }
.news-pill { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 9px; background: #fdf3d7; color: #8a6d00; margin-left: 4px; vertical-align: 1px; }
.sl-compact .sl-item { padding: 8px 0; grid-template-columns: 64px 1fr auto; }
.sl-compact .sl-note, .sl-compact .sl-news, .sl-compact .sl-side { display: none; }
.sl-compact .sl-inline-note { display: block; }
.sl-inline-note { display: none; color: var(--text); font-size: 13px; margin-top: 3px; }
.sl-total { font-weight: 700; }
.br-all { white-space: nowrap; align-self: center; }
@media (max-width: 620px) {
  .sl-item { grid-template-columns: 56px 1fr; }
  .sl-item .sl-side { grid-column: 2; }
  .sl-item .sl-actions { grid-column: 1 / -1; justify-self: end; }
}

/* chat answer options: inline on desktop/tablet, a collapsible row on phones */
.chat-opts { display: flex; flex: 3 1 520px; min-width: 0; }
.chat-opts > summary { display: none; }
.chat-opts-body { display: flex; flex-wrap: wrap; gap: 10px 14px; width: 100%; }
#sales.view-browse .chat-opts { display: none; }
@media (max-width: 620px) {
  .chat-opts { display: block; width: 100%; margin-top: 8px; }
  .chat-opts > summary { display: block; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--purple); padding: 6px 0; list-style: none; }
  .chat-opts > summary::-webkit-details-marker { display: none; }
  .chat-opts > summary::before { content: '▸ '; font-size: 12px; }
  .chat-opts[open] > summary::before { content: '▾ '; }
  .chat-opts-body { display: block; }
}
.br-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); margin: 0; white-space: nowrap; }
.br-all input { margin: 0; }

/* ---- home cards: colour identity per product ------------------------------ */
.product-card { padding: 0; overflow: hidden; }
.product-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; color: #fff; }
.product-head .product-name, .product-head .product-name span { color: #fff; }
.product-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.18); }
.product-tag { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.pc-bet .product-head { background: #1c2f6b; }
.pc-sales .product-head { background: #d9487f; }
.product-card .product-desc, .product-card .product-points, .product-card .product-cta { margin-left: 24px; margin-right: 24px; }
.product-card .product-desc { margin-top: 18px; }
.product-card .product-cta { margin-bottom: 22px; }
.pc-bet .product-cta { background: #1c2f6b; } .pc-bet:hover .product-cta { background: #142352; } .pc-bet:hover { border-color: #1c2f6b; }
.pc-sales .product-cta { background: #d9487f; } .pc-sales:hover .product-cta { background: #b8386a; } .pc-sales:hover { border-color: #d9487f; }
.product-points li::marker { color: var(--muted); }

/* ---- Browse: sticky search + chips, list rows, sheets --------------------- */
.br-card { padding: 0 0 8px; overflow: visible; }
.br-sticky { position: sticky; top: 58px; z-index: 6; background: var(--panel); padding: 14px 18px 10px; border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.br-row { display: flex; gap: 8px; }
.br-row input[type="search"] { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; color: var(--text); }
.br-row input[type="search"]:focus { outline: none; border-color: var(--purple); box-shadow: var(--ring); }
.br-btn { font: inherit; font-size: 14px; font-weight: 600; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.br-btn.active { border-color: var(--purple); color: var(--purple); background: var(--blue-soft); }
.br-badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--purple); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 5px; }
.br-chips { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.br-chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-strong); background: #fff; color: var(--muted); cursor: pointer; white-space: nowrap; }
.chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.chip-quick.active { background: var(--blue-soft); color: var(--purple); border-color: var(--purple); }
.chip-sep { flex: 0 0 1px; background: var(--border); margin: 4px 4px; }
.br-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px 4px; color: var(--muted); font-size: 13px; }
.br-status .link { font: inherit; color: var(--purple); background: none; border: none; padding: 0; cursor: pointer; font-weight: 600; }
.br-list { display: flex; flex-direction: column; }
.br-item {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--border); cursor: pointer; text-align: left; background: #fff; font: inherit; color: var(--text); width: 100%; border-left: none; border-right: none; border-bottom: none;
}
.br-item:hover { background: var(--panel-2); }
.br-item.starred .br-lot { color: var(--gold); }
.br-item .br-lot { font-size: 20px; font-weight: 700; color: var(--purple); line-height: 1; }
.br-item .br-lot small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 2px; }
.br-main { min-width: 0; }
.br-l1 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-l1 .x { color: var(--muted); font-weight: 400; margin: 0 4px; }
.br-l2 { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.br-l2 .sale-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--blue-soft); color: var(--purple); margin-right: 6px; }
.br-val { text-align: right; min-width: 120px; }
.br-val .score { justify-content: flex-end; }
.br-val .br-sub { font-size: 12px; }
.br-act { display: flex; align-items: center; gap: 4px; }
.br-empty { padding: 30px 18px; color: var(--muted); text-align: center; }
.br-sentinel { height: 1px; }
.br-more-btn { display: block; margin: 10px auto; }
.fab-top { position: fixed; right: 16px; bottom: 84px; z-index: 40; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 13px; border-radius: 20px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); box-shadow: var(--shadow); cursor: pointer; }
.br-compare-bar { position: sticky; bottom: 12px; margin: 12px 18px 0; }

/* sheets: full screen on phones, right-hand drawer on tablets and desktops */
.sheet { position: fixed; inset: 0; z-index: 90; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 22, 26, 0.45); }
.sheet-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: sheet-in 0.18s ease-out; }
.sheet-panel.sheet-small { width: min(420px, 100%); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.sheet-head h3 { margin: 0; font-size: 16px; }
.sheet-back, .sheet-done { font: inherit; font-size: 15px; font-weight: 600; color: var(--purple); background: none; border: none; padding: 6px 4px; cursor: pointer; }
.sheet-nav { display: flex; align-items: center; gap: 8px; }
.sheet-nav .csv-btn { padding: 6px 10px; font-size: 13px; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 40px; background: var(--panel); }
.sheet-body .control { margin-top: 12px; }
.sheet-body select { width: 100%; font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
/* the lot detail inside the sheet reuses the panel styles */
#lot-sheet-body .lp-close { display: none; }
#lot-sheet-body .lp-head { margin-top: 2px; }
#lot-sheet-body .card { margin: 0; }

@media (max-width: 760px) {
  .sheet-panel, .sheet-panel.sheet-small { width: 100%; animation: sheet-up 0.2s ease-out; }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
  .sheet-body { padding: 14px 14px 60px; }
}
@media (max-width: 620px) {
  .br-sticky { top: 52px; padding: 10px 12px 8px; }
  .br-status { padding: 8px 12px 2px; }
  .br-item { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 11px 12px; }
  .br-item .br-lot { font-size: 18px; }
  .br-val { grid-column: 2; text-align: left; min-width: 0; margin-top: 2px; }
  .br-val .score { justify-content: flex-start; }
  .br-act { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; }
  .br-compare-bar { bottom: 66px; margin: 12px 12px 0; }
  .fab-top { bottom: 72px; right: 12px; }
}
@media (min-width: 621px) and (max-width: 1024px) {
  .br-sticky { top: 58px; }
  .sheet-panel { width: min(70vw, 640px); }
}

/* phones: the whole home screen fits in one view */
@media (max-width: 620px) {
  #home .home-intro { margin: 2px 0 12px; }
  #home .home-intro h2 { font-size: 20px; }
  #home .home-intro p { font-size: 14px; }
  #home .home-grid { gap: 12px; }
  #home .product-head { padding: 12px 16px; gap: 10px; }
  #home .product-icon { width: 32px; height: 32px; border-radius: 8px; }
  #home .product-icon svg { width: 18px; height: 18px; }
  #home .product-name { font-size: 21px; }
  #home .product-tag { font-size: 11px; }
  #home .product-card .product-desc { margin: 12px 16px 0; font-size: 14px; line-height: 1.45; }
  #home .product-points { display: none; }
  #home .product-card .product-cta { margin: 12px 16px 14px; padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 620px) and (max-height: 620px) {
  #home .product-card .product-desc { display: none; }
  #home .product-card .product-cta { margin-top: 14px; }
}

.chip-label { flex: 0 0 auto; align-self: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 2px; }
.chip.active .dir { margin-left: 4px; font-size: 10px; opacity: 0.85; }

/* ---- lot detail: hero + accordions ---------------------------------------- */
.lp-hero { padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.lp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lp-hero .lp-title h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.lp-desc { color: var(--muted); font-size: 14px; margin-top: 2px; }
.lp-hero .lp-score { min-width: 84px; padding: 6px 10px; }
.lp-hero .lp-score b { font-size: 26px; }
.lp-ped { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lp-ped > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ped-l { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.lp-meta { margin-top: 8px; }
.lp-kpis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kpi { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; min-width: 0; }
.kpi-v { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.kpi-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-sold { border-color: var(--purple); background: var(--blue-soft); }
.kpi-good { border-color: var(--green); background: var(--green-soft); }
.kpi-news { border-color: var(--gold); }
.lp-hero .lp-actions { margin: 12px 0 0; }
.acc { border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; margin: 0 0 8px; }
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 700; font-size: 15px; -webkit-tap-highlight-color: transparent; }
.acc > summary::-webkit-details-marker { display: none; }
.acc-title { flex: 1 1 auto; min-width: 0; }
.acc-meta { flex: 0 1 auto; font-weight: 500; font-size: 12.5px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.acc-chev { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; margin: 0 4px 0 2px; }
.acc[open] > summary .acc-chev { transform: rotate(45deg); }
.acc[open] > summary { border-bottom: 1px solid var(--border); }
.acc-body { padding: 12px 14px 14px; }
.acc-sub { margin: 0 0 6px; background: var(--panel-2); }
.acc-sub > summary { font-size: 14px; padding: 10px 12px; }
.acc-sub .acc-body { padding: 10px 12px 12px; background: #fff; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.lp-sub-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 10px 0 4px; }
.lp-sub-title:first-child { margin-top: 0; }
.fx-list { display: flex; flex-direction: column; gap: 2px; }
.fx > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 140px 1fr 56px; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 6px; font-size: 13.5px; }
.fx > summary::-webkit-details-marker { display: none; }
.fx > summary:hover { background: var(--panel-2); }
.fx[open] > summary { background: var(--panel-2); }
.fx-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx .f-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.fx .f-bar i { display: block; height: 100%; background: var(--purple); }
.fx .f-pts { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-body { padding: 4px 6px 10px; font-size: 13px; color: var(--muted); }
.link-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--purple); background: none; border: none; padding: 0; cursor: pointer; }
.lp-dossier { border-top: none; padding-top: 0; }
@media (max-width: 620px) {
  .lp-ped { grid-template-columns: 1fr; gap: 6px; }
  .lp-ped > div { white-space: normal; }
  .fx > summary { grid-template-columns: 112px 1fr 50px; font-size: 13px; }
  .acc-meta { max-width: 42%; }
}
/* lot sheet tables on phones: keep the grid for the narrow ones, use compact rows for the produce record */
.foal-list { display: none; }
@media (max-width: 620px) {
  .lp-hero .lp-score { min-width: 92px; padding: 6px 8px; }
  .lp-hero .lp-score span { white-space: nowrap; font-size: 10px; }
  .lp-hero .lp-score .br-sub { white-space: nowrap; font-size: 11px; }
  .lp-ped { display: block; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); }
  .lp-ped > div { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border: none; border-radius: 0; background: none; white-space: normal; }
  .lp-ped > div + div { border-top: 1px solid var(--border); }
  .lp-ped-l { flex: 0 0 60px; margin: 0; }
  .lp-kpis .kpi { padding: 5px 8px; }
  .kpi-l { font-size: 9.5px; }
  .foal-list { display: block; }
  .tbl-wide { display: none; }
  .foal-row { padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
  .foal-row:first-child { border-top: none; }
  .foal-2 { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
  .adm-table.tbl-keep { display: table; width: 100%; font-size: 12.5px; }
  .adm-table.tbl-keep thead { display: table-header-group; }
  .adm-table.tbl-keep tbody { display: table-row-group; }
  .adm-table.tbl-keep tr { display: table-row; border: none; padding: 0; margin: 0; }
  .adm-table.tbl-keep td, .adm-table.tbl-keep th { display: table-cell; width: auto; padding: 6px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .adm-table.tbl-keep td::before { content: none; }
}
.tbl-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* ---- simpler navigation ---------------------------------------------------- */
/* meetings fold: the course header is the toggle, time chips jump to a race */
details.meeting > summary { list-style: none; cursor: pointer; }
details.meeting > summary::-webkit-details-marker { display: none; }
.meeting-chev { width: 9px; height: 9px; border-right: 2px solid rgba(255,255,255,0.8); border-bottom: 2px solid rgba(255,255,255,0.8); transform: rotate(-45deg); margin-left: 4px; transition: transform 0.15s; flex: 0 0 auto; }
details.meeting[open] > summary .meeting-chev { transform: rotate(45deg); }
details.meeting:not([open]) > summary { margin-bottom: 8px; }
.meeting-body { padding-top: 2px; }
/* the options drawer only folds on small screens */
.side-fold-sum { display: none; }
#side-fold > summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) {
  .sidebar { order: -1; padding: 0; overflow: hidden; }
  .content { order: 1; }
  .side-fold-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
  .side-fold-sum::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); flex: 0 0 auto; }
  #side-fold[open] > .side-fold-sum::after { transform: rotate(45deg); }
  #side-fold[open] > .side-fold-sum { border-bottom: 1px solid var(--border); }
  .side-fold-sum .muted { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-fold-body { padding: 12px 16px 16px; }
  .howto-more { display: none; }
  .meeting-times { display: none; }
  .meeting { margin-bottom: 10px; }
  .meeting-head { padding: 12px 14px; margin-bottom: 0; }
  details.meeting[open] > .meeting-head { margin-bottom: 10px; }
}
@media (max-width: 620px) {
  /* the bottom nav already names the section: drop the page titles and intros */
  .page-head { display: none; }
  #home .home-intro { display: block; }
  /* Admin lives in the profile menu on phones */
  #go-admin { display: none; }
  .summary { padding: 12px 14px; }
  .summary .metric .v { font-size: 20px; }
  #sale-card { padding: 12px 14px; }
}
/* sale picker: label and control on one line, quieter summary */
.sale-pick { display: flex; align-items: center; gap: 10px; }
.sale-pick select { flex: 1; min-width: 0; }
.sale-pick { flex-direction: row; }
.side-fold-sum > span:first-child { white-space: nowrap; flex: 0 0 auto; }
.side-fold-sum .muted { flex: 1 1 auto; min-width: 0; text-align: right; }
@media (max-width: 860px) {
  .meeting-head { flex-wrap: nowrap; }
  .meeting-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .meeting-head h3 { white-space: nowrap; }
  .summary .metric .k { font-size: 10.5px; }
}

/* ---- account menu ---------------------------------------------------------- */
.modal-profile { max-width: 420px; padding: 20px 20px 18px; }
.modal-profile .modal-x { top: 14px; right: 14px; }
.pf-id { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.pf-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 700; font-size: 18px; display: grid; place-items: center; flex: 0 0 auto; }
.pf-who { min-width: 0; }
.pf-name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ok { color: var(--green); font-weight: 600; }
.pf-menu { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.pf-item > summary { list-style: none; }
.pf-item > summary::-webkit-details-marker { display: none; }
.pf-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; background: #fff; border: none; border-top: 1px solid var(--border); font: inherit; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; }
.pf-menu > :first-child > .pf-row, .pf-menu > .pf-row:first-child { border-top: none; }
.pf-row > span:first-child { flex: 1 1 auto; }
.pf-val { color: var(--muted); font-weight: 500; font-size: 14px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); flex: 0 0 auto; margin-right: 2px; transition: transform 0.15s; }
.pf-item[open] > summary .pf-chev { transform: rotate(45deg); }
.pf-item[open] > summary { background: var(--panel-2); }
.pf-body { padding: 12px 14px 14px; background: var(--panel-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pf-body input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font: inherit; font-size: 15px; background: #fff; }
.pf-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-item-danger .pf-row { color: var(--red); }
.pf-signout { width: 100%; margin-top: 14px; padding: 11px 14px; font-size: 15px; }
@media (max-width: 620px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-profile { max-width: none; border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 92vh; animation: sheet-up 0.2s ease-out; }
}

/* ==== shell, auth, admin, shared components ==== */
/* Palette leftovers from the old violet theme, corrected everywhere: keyboard
   focus, placeholders, select chevrons and scrollbars now use the neutral/indigo
   tokens like the rest of the site. */
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: #98a1ad; }
select { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23667085" stroke-width="2" stroke-linecap="round"/></svg>'); }
* { scrollbar-color: #c4c9d1 transparent; }
::-webkit-scrollbar-thumb { background: #c4c9d1; }
button, [role="button"], .product-card, .tab, .vtab, .atab { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--blue-soft); color: var(--text); }

/* typography rhythm: one h3 size inside cards, no per-element inline resets needed */
.card > h3, .dials-head h3, .adm-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.card > h3:first-child { margin-top: 0; }
.page-head { margin: 4px 0 20px; }

/* button hierarchy: one flat indigo primary, quiet bordered secondaries */
button.primary { background: var(--purple); color: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; padding: 11px 18px; box-shadow: none; min-height: 42px; transition: background 0.15s; }
button.primary:hover { filter: none; background: var(--purple-2); }
button.primary:active { filter: none; background: var(--purple-2); }
button.primary:disabled, .csv-btn:disabled { opacity: 0.55; cursor: default; }
button.primary.big { font-size: 16px; padding: 13px 22px; min-height: 48px; }
button.primary.is-busy, .csv-btn.is-busy { position: relative; color: transparent !important; }
button.primary.is-busy::after, .csv-btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: fiq-spin 0.8s linear infinite; }
.csv-btn.is-busy::after { border-color: var(--border-strong); border-top-color: var(--purple); }
.csv-btn { min-height: 34px; padding: 6px 12px; border-radius: 8px; background: #fff; }
.csv-btn:hover { background: var(--blue-soft); }
.pf-danger { min-height: 34px; padding: 6px 12px; border-radius: 8px; }
.pg-btn { min-height: 34px; }
.pill { display: inline-block; line-height: 1.5; }
.pill.bad { background: var(--red-soft); color: var(--red); }
.badge { display: inline-block; line-height: 1.5; }
.auth-ok, .auth-err, .auth-dev { line-height: 1.45; }
.auth-ok:empty, .auth-err:empty { display: none; }

/* modal: neutral dim, larger close target, footer actions */
.modal-overlay { background: rgba(20, 23, 30, 0.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-x { width: 36px; height: 36px; border-radius: 10px; }
.modal .control > span:first-child { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.modal-results { max-width: 620px; }
.adm-textarea { width: 100%; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); resize: vertical; min-height: 140px; }
.adm-textarea:focus { outline: none; border-color: var(--purple); box-shadow: var(--ring); }
.modal code { font-size: 12.5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

/* ---- top bar ---------------------------------------------------------------- */
.topbar { padding-top: env(safe-area-inset-top, 0px); height: auto; min-height: 58px; }
.wordmark:hover span { color: var(--purple-2); }
.product-crumb { font-weight: 600; }
.admin-link { min-height: 34px; border-radius: 8px; }
body[data-product="admin"] #go-admin { display: none; }
.user-menu { min-height: 38px; }
.user-menu:hover { background: var(--panel-2); }
/* admin section tabs share the product tab look */
.atab {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0 12px; height: 58px; cursor: pointer; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.atab:hover { color: var(--text); }
.atab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--purple); }
.tab:focus-visible, .vtab:focus-visible, .atab:focus-visible { outline-offset: -4px; border-radius: 8px; }
@media (min-width: 621px) and (max-width: 1024px) { .atab { padding: 0 9px; font-size: 13.5px; } }

/* ---- footer ----------------------------------------------------------------- */
.site-footer { font-size: 12.5px; padding: 28px 16px 36px; border-top: 1px solid var(--border); margin-top: 8px; }
.site-footer .ver { font-weight: 600; color: var(--text); }

/* ---- home ------------------------------------------------------------------- */
.home-intro h2 { font-size: 24px; letter-spacing: -0.01em; }
.product-card:focus-visible { outline-offset: 3px; }
.product-card { box-shadow: var(--shadow-sm); }
.product-card:hover { box-shadow: var(--shadow-sm); }
.product-cta { transition: background 0.15s; }

/* ---- auth gate -------------------------------------------------------------- */
.auth-overlay { align-items: safe center; padding: 24px 16px; }
.auth-card { max-width: 400px; padding: 28px 28px 26px; box-shadow: var(--shadow-sm); }
.auth-brand { margin-bottom: 22px; }
.auth-brand h1 { font-size: 22px; }
#auth-root h2 { text-align: left; font-size: 20px; margin: 0 0 4px; }
.auth-sub { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-sub b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.auth-sub { overflow-wrap: break-word; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.auth-form .auth-err, .auth-form .auth-ok, .auth-form .auth-dev { margin: 0; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
#auth-root label { margin: 0; }
.auth-label { font-size: 13px; color: var(--text); font-weight: 600; }
.auth-hint { color: var(--muted); font-weight: 500; }
#auth-root input { margin: 0; padding: 12px 13px; font-size: 16px; min-height: 46px; }
#auth-root input.auth-code { font-size: 22px; letter-spacing: 0.28em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
#auth-root input.auth-code::placeholder { letter-spacing: 0.28em; font-weight: 400; }
#auth-root .primary { margin: 6px 0 0; width: 100%; }
.auth-links { margin-top: 18px; gap: 8px 16px; align-items: center; }
.auth-links a { font-size: 14px; font-weight: 500; text-decoration: none; padding: 6px 0; min-height: 36px; display: inline-flex; align-items: center; }
.auth-links a:only-child { margin: 0 auto; }
.auth-links a:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .auth-overlay { align-items: flex-start; padding: 32px 16px 24px; }
  .auth-card { padding: 24px 20px 22px; }
}

/* ---- admin ------------------------------------------------------------------ */
.adm-section > .card { margin-bottom: 14px; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-head h3 { margin: 0; }
.adm-note { margin: 0 0 12px; }
.adm-drawer { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px 16px; margin: 0 0 16px; }
.adm-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; margin-bottom: 14px; background: #fff; }
.adm-seg-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: none; padding: 8px 14px; min-height: 36px; cursor: pointer; }
.adm-seg-btn + .adm-seg-btn { border-left: 1px solid var(--border-strong); }
.adm-seg-btn.active { background: var(--purple); color: #fff; }
.adm-seg-btn:focus-visible { outline-offset: -3px; }
.adm-form { gap: 0; }
.adm-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; }
.adm-fields .control { margin-top: 6px; }
.adm-fields .control > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.adm-fields input, .adm-fields select { width: 100%; max-width: none; padding: 10px 12px; font-size: 15px; min-height: 42px; }
.adm-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.adm-form-foot .auth-ok, .adm-form-foot .auth-err { margin: 0; flex: 1 1 240px; }
.adm-form-foot .primary { min-height: 42px; }
.adm-table { font-size: 14px; }
.adm-table th.num, .adm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table td { vertical-align: middle; }
.adm-email { word-break: break-all; }
.adm-table input.adm-name { min-height: 36px; font-size: 14px; border-radius: 8px; }
.adm-table select { min-height: 36px; font-size: 14px; border-radius: 8px; padding-right: 28px; width: auto; }
.adm-table input.adm-name:focus { box-shadow: var(--ring); }
.adm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-actions .csv-btn, .adm-actions .pf-danger { white-space: nowrap; }
.csv-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.adm-fold { padding: 0; overflow: hidden; }
.adm-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 22px; font-weight: 700; font-size: 17px; cursor: pointer; }
.adm-fold > summary::-webkit-details-marker { display: none; }
.adm-fold > summary .badge { font-size: 12px; padding: 2px 9px; }
.adm-fold > summary .acc-chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; flex: 0 0 auto; }
.adm-fold[open] > summary .acc-chev { transform: rotate(-135deg); }
.adm-fold[open] > summary { border-bottom: 1px solid var(--border); }
.adm-fold-body { padding: 8px 22px 16px; }
#admin .page-head p { max-width: none; }
@media (max-width: 620px) {
  #admin .page-head { display: block; margin: 0 0 12px; }
  #admin .page-head p { display: none; }
  .adm-section > .card { padding: 14px 14px 12px; }
  .adm-fold > summary { padding: 14px; font-size: 16px; }
  .adm-fold-body { padding: 4px 8px 12px; }
  .adm-drawer { padding: 12px 12px 14px; margin: 0 0 14px; }
  .adm-seg { display: flex; }
  .adm-seg-btn { flex: 1; min-height: 44px; }
  .adm-fields { grid-template-columns: 1fr; }
  .adm-form-foot .primary { width: 100%; min-height: 46px; }
  .adm-table tr { padding: 4px 10px 10px; }
  .adm-table td { min-height: 36px; padding: 6px 0; }
  .adm-table td.adm-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  .adm-table td.adm-actions::before { flex: 1 0 100%; }
  .adm-table td.num { justify-content: space-between; text-align: left; }
  .adm-table select, .adm-table input.adm-name { min-height: 40px; }
  .adm-table input.adm-name { max-width: 60%; }
  .adm-detail-row > td::before { content: none; }
  /* the first cell (email / sale name) reads as the card's title */
  .adm-table td:first-child { display: block; padding: 6px 0 8px; font-weight: 600; font-size: 15px; }
  .adm-table td:first-child::before { content: none; }
  .adm-table td:first-child .badge { margin-left: 6px; vertical-align: 1px; }
}
@media (min-width: 1100px) { .adm-table .adm-actions { flex-wrap: nowrap; } }

/* ---- phones: bottom navigation and touch targets ------------------------------ */
@media (max-width: 620px) {
  .topbar { min-height: 52px; height: auto; }
  .wordmark { font-size: 18px; }
  .product-crumb { font-size: 13.5px; }
  .user-menu { padding: 3px; min-height: 40px; min-width: 40px; }
  .um-avatar { width: 32px; height: 32px; }
  .subnav { border-top: 1px solid var(--border); background: var(--panel); }
  .tab, .vtab, .atab {
    flex: 1; height: 54px; padding: 0 4px; font-size: 12.5px; font-weight: 500; color: var(--muted);
    border: none; border-radius: 0; position: relative;
  }
  .tab.active, .vtab.active, .atab.active { color: var(--purple); font-weight: 600; background: none; border: none; }
  .tab.active::after, .vtab.active::after, .atab.active::after { content: ''; position: absolute; left: 22%; right: 22%; top: 0; height: 2px; background: var(--purple); }
  .tab:focus-visible, .vtab:focus-visible, .atab:focus-visible { outline-offset: -3px; border-radius: 8px; }
  .site-footer { padding: 20px 16px 24px; }
  /* touch targets */
  .csv-btn, .pf-danger, .pg-btn, .admin-link, .modal-x { min-height: 40px; }
  .csv-btn, .pf-danger { padding: 8px 14px; font-size: 14px; }
  .modal-x { width: 40px; height: 40px; }
  button.primary { min-height: 44px; }
  .checkrow { min-height: 40px; margin-top: 4px; }
  .checkrow input { width: 20px; height: 20px; }
  input[type='checkbox'] { width: 20px; height: 20px; }
  /* 16px stops iOS zooming the page when a field is focused */
  input[type='number'], input[type='text'], input[type='email'], input[type='password'], input:not([type]), select, textarea { font-size: 16px; }
  .modal-results { max-width: none; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
.csv-btn.is-open { background: var(--blue-soft); border-color: var(--purple); color: var(--purple); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
/* admin: per-user detail as three folds */
.adm-detail { padding: 6px 12px 10px; }
.adm-sub { border-top: 1px solid var(--border); }
.adm-sub:first-child { border-top: none; }
.adm-sub > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 4px; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px; }
.adm-sub > summary::-webkit-details-marker { display: none; }
.adm-sub > summary .badge { font-size: 11px; }
.adm-sub > summary .acc-chev { margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; flex: 0 0 auto; margin-right: 4px; }
.adm-sub[open] > summary .acc-chev { transform: rotate(-135deg); }
.adm-sub-body { padding: 0 0 12px; }
@media (max-width: 620px) {
  .adm-subtable tr { padding: 2px 10px 8px; }
  .adm-subtable td:first-child { font-size: 14px; }
}

/* ==== secondary BetIQ pages: Simulations, Settings, My bets ==== */
.sim-h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.dials-head .sim-h3, .live-head .sim-h3 { margin: 0; }

/* -- new simulation form: name, then the four choices -- */
.sim-steps { display: flex; flex-direction: column; gap: 14px; }
.sim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sim-ctl { margin-top: 0; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 0; }
.sim-ctl input, .sim-ctl select { width: 100%; max-width: none; min-height: 44px; padding: 10px 13px; font-size: 15px; font-weight: 400; color: var(--text); }
.sim-ctl select { padding-right: 34px; background-position: right 12px center; }
.sim-money { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.sim-money:focus-within { border-color: var(--purple); box-shadow: var(--ring); }
.sim-money-sign { padding-left: 12px; color: var(--muted); font-weight: 600; font-size: 15px; }
.sim-money input { border: none; box-shadow: none; padding-left: 6px; min-width: 0; }
.sim-money input:focus { box-shadow: none; }
.sim-weights { margin-top: 16px; }
.sim-weights > summary { font-size: 15px; }
.sim-dials-btns { margin-bottom: 12px; }
.sim-actions { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
#sim-create { min-height: 46px; padding: 12px 24px; }
#sim-create:disabled { opacity: 0.7; cursor: default; }
#test.sim-viewing #sim-setup { display: none; }

/* -- saved simulations: the whole row opens the run -- */
.sim-item { padding: 0 8px 0 0; gap: 4px; background: var(--panel); flex-wrap: nowrap; margin-bottom: 8px; }
.sim-item:hover { transform: none; box-shadow: none; border-color: var(--purple); }
.sim-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 60px; background: none; border: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; border-radius: var(--r); }
.sim-open .sim-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sim-open .sim-item-name { font-size: 15px; }
.sim-open .sim-item-meta { font-size: 12.5px; margin: 0; }
.sim-open .sim-item-num { flex: 0 0 auto; min-width: 0; align-items: flex-end; }
.sim-open .sim-item-num .v { font-size: 17px; line-height: 1.1; }
.sim-open .sim-item-num .k { font-size: 12px; margin-top: 1px; }
.sim-del { color: var(--muted); min-height: 44px; padding: 0 8px; flex: 0 0 auto; }
.sim-del:hover { color: var(--red); }

/* -- one simulation's result -- */
.sim-result-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.sim-result-head .back-link { flex: 0 0 100%; padding: 0 0 6px; text-align: left; }
.sim-result-title { flex: 1 1 260px; min-width: 0; }
.sim-result-name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sim-result-meta { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.sim-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-result-actions .csv-btn { min-height: 38px; }
.sim-del-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

.sim-hero { display: grid; grid-template-columns: auto 1fr; gap: 6px 36px; align-items: center; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel-2); margin-bottom: 12px; }
.sim-hero.up { background: var(--green-soft); border-color: #bfe3d0; }
.sim-hero.down { background: var(--red-soft); border-color: #f0c3cc; }
.sim-hero .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.sim-hero-main { display: flex; flex-direction: column; gap: 2px; }
.sim-hero-main .v { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sim-hero-side { display: flex; gap: 12px 32px; flex-wrap: wrap; }
.sim-hero-side > div { display: flex; flex-direction: column; gap: 2px; }
.sim-hero-side .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-hero-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; }
.sim-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.sim-stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-stat .k { font-size: 11.5px; color: var(--muted); }
.sim-stat .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-acc { margin: 0 0 10px; border-radius: var(--r-lg); }
.sim-acc > summary { padding: 14px 18px; font-size: 16px; }
.sim-acc > .acc-body { padding: 14px 18px 18px; }
.sim-acc .acc-meta { max-width: 55%; }
.sim-acc canvas { display: block; width: 100%; }
.course-gap { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.sim-acc .simbets-controls { margin: 0 0 10px; }
.cell-result { white-space: nowrap; }

/* -- factor sliders: 40px-tall hit area, plain track with a flat fill -- */
.dials { gap: 8px 28px; }
.dial { gap: 0; }
.dial-top { align-items: center; }
.dial-val { font-size: 14px; min-width: 46px; text-align: right; color: var(--text); }
.dial.changed .dial-val { color: var(--purple); }
.dial-track { position: relative; height: 40px; }
.dial-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--border-strong); }
.dial-fill { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--purple); width: calc(13px + (100% - 26px) * var(--p, 0.5)); pointer-events: none; }
.dial-track input[type='range'] { position: absolute; inset: 0; width: 100%; height: 40px; margin: 0; padding: 0; background: transparent; border: none; border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.dial-track input[type='range']:focus { box-shadow: none; }
.dial-track input[type='range']::-webkit-slider-runnable-track { height: 40px; background: transparent; }
.dial-track input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: 7px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); box-shadow: var(--shadow-sm); transition: none; cursor: pointer; }
.dial-track input[type='range']::-webkit-slider-thumb:hover { transform: none; background: var(--blue-soft); }
.dial-track input[type='range']::-moz-range-track { height: 40px; background: transparent; border: none; }
.dial-track input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid var(--purple); background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); }
.dial-track input[type='range']:focus-visible { outline: none; }
.dial-track input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
.dial-track input[type='range']:focus-visible::-moz-range-thumb { box-shadow: var(--ring); }

/* -- settings: live result -- */
.settings-grid { grid-template-columns: 1.3fr 1fr; }
.live-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.live-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); margin-bottom: 4px; }
.live-hero.up { background: var(--green-soft); border-color: #bfe3d0; }
.live-hero.down { background: var(--red-soft); border-color: #f0c3cc; }
.live-main { display: flex; flex-direction: column; gap: 1px; }
.live-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.live-big { font-size: 32px; }
.live-sub { text-align: right; font-size: 13.5px; margin: 0; line-height: 1.35; }
.live-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; font-size: 13px; color: var(--muted); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.live-more > summary::-webkit-details-marker { display: none; }
.live-more[open] > summary .acc-chev { transform: rotate(45deg); }
.live-more .live-stats { margin-top: 2px; }
#weights-live.is-busy { opacity: 0.6; transition: opacity 0.15s; }
.acc-legend { margin-top: 14px; }
.acc-legend > summary { font-size: 14px; padding: 11px 14px; }
.acc-legend .factor-legend { margin-top: 0; }

/* -- my bets -- */
.bets-sum { padding: 18px 22px; }
.bets-lead { margin-bottom: 0; }
.bets-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.bets-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bets-stat .k { font-size: 11.5px; color: var(--muted); }
.bets-stat .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bets-head { margin-bottom: 8px; }
.bets-wrap { overflow-x: auto; }
.bets-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bets-table th, .bets-table td { vertical-align: middle; }
.bc-race-main { display: block; font-weight: 600; white-space: nowrap; }
.bc-race { max-width: 340px; }
.bc-race-sub { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-sel { font-weight: 600; white-space: nowrap; }
.bc-stake, .bc-odds, .bc-ret, .bc-pnl, .bc-type { white-space: nowrap; }
.bc-del { text-align: right; }
.bet-del { color: var(--muted); min-height: 44px; padding: 0 4px; }
.bet-del:hover { color: var(--red); }
.bets-empty { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 26px 16px; }
.empty-list .csv-btn { min-height: 40px; }

/* -- tablets: four fields in one row when there is room -- */
@media (min-width: 1000px) {
  .sim-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .sim-ctl-name { grid-column: 1 / -1; }
  .sim-row { gap: 18px; }
}
@media (max-width: 760px) {
  .settings-grid { display: flex; flex-direction: column; }
  .settings-live { order: -1; }
  .sim-hero { grid-template-columns: 1fr; gap: 10px; padding: 16px 18px; }
  .sim-hero-main .v { font-size: 34px; }
  .sim-hero-side { gap: 10px 22px; }
  .sim-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sim-row { grid-template-columns: 1fr; }
  .sim-row:first-of-type { grid-template-columns: 1fr 1fr; }
  .sim-actions { flex-direction: column; align-items: stretch; }
  #sim-create { width: 100%; }
  .sim-item-actions { margin-top: 0; }
  .sim-open { padding: 12px 12px; gap: 10px; }
  .sim-open .sim-item-num { align-items: flex-end; }
  .sim-result-head .csv-btn { flex: 1 1 auto; }
  .sim-acc > summary { padding: 13px 14px; font-size: 15px; }
  .sim-acc > .acc-body { padding: 12px 14px 14px; }
  .sim-acc .acc-meta { max-width: 45%; font-size: 12px; }
  .dials { grid-template-columns: 1fr; gap: 2px; }
  .dial-track { height: 44px; }
  .dial-track input[type='range'] { height: 44px; }
  .dial-track input[type='range']::-webkit-slider-runnable-track { height: 44px; }
  .dial-track input[type='range']::-webkit-slider-thumb { margin-top: 9px; }
  .dial-track input[type='range']::-moz-range-track { height: 44px; }
  .dial-track input[type='range']::-moz-range-thumb { width: 24px; height: 24px; }
  /* the live result sits above the sliders and stays in view while dragging */
  .settings-live { position: sticky; top: 52px; z-index: 5; padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
  .live-head { margin-bottom: 8px; }
  .live-head .muted { display: none; }
  .live-hero { padding: 10px 12px; }
  .live-big { font-size: 26px; }
  .live-sub { font-size: 12.5px; }
  .live-more > summary { padding: 8px 2px 2px; }
  .live-stats { gap: 6px; }
  .lstat { padding: 6px 10px; }
  .lstat .v { font-size: 15px; }
  .bets-sum { padding: 14px 14px; }
  .bets-strip { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
}
@media (max-width: 900px) {
  /* bet history rows become cards: selection and result first, then the numbers */
  .bets-wrap { overflow: visible; }
  .bets-table, .bets-table tbody { display: block; width: 100%; }
  .bets-table thead { display: none; }
  .bets-table tr { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "sel sel sel res" "race race race race" "stake odds ret pnl" "type type del del"; gap: 4px 8px; align-items: center; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; background: var(--panel); }
  .bets-table td { display: block; padding: 0; border: none; text-align: left; white-space: normal; }
  .bc-sel { grid-area: sel; font-size: 16px; font-weight: 700; }
  .bc-res { grid-area: res; justify-self: end; }
  .bc-race { grid-area: race; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .bc-race { max-width: none; }
  .bc-race-main { font-weight: 500; white-space: normal; }
  .bc-race-sub { white-space: normal; }
  .bc-sel { white-space: normal; }
  .bc-stake { grid-area: stake; } .bc-odds { grid-area: odds; } .bc-ret { grid-area: ret; } .bc-pnl { grid-area: pnl; }
  .bc-stake, .bc-odds, .bc-ret, .bc-pnl { font-variant-numeric: tabular-nums; font-weight: 600; }
  .bc-stake::before, .bc-odds::before, .bc-ret::before, .bc-pnl::before { content: attr(data-label); display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  .bc-type { grid-area: type; color: var(--muted); font-size: 12.5px; }
  .bc-del { grid-area: del; text-align: right; }
  .bet-del { min-height: 36px; }
}
@media (min-width: 621px) and (max-width: 900px) {
  .bets-table tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bets-table tr { margin-bottom: 0; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .live-hero { flex-direction: column; align-items: flex-start; gap: 6px; }
  .live-sub { text-align: left; }
}

/* ==== racing page ==== */
/* The BetIQ Racing page: summary strip, meetings board, racecard, runners,
   suggested bets and the bet slip. BetIQ's own accent is the green. */
#tips { --bet: #1c2f6b; --bet-soft: #e8ecf6; --bet-line: #c6cee3; }

/* summary strip: a title, one line of numbers and the stake control */
.summary { padding: 14px 20px; gap: 10px 24px; align-items: center; }
.summary .metrics { display: flex; align-items: center; gap: 6px 28px; flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.sum-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sum-title h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.sum-date { font-size: 14px; }
.sum-stats { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 14px; color: var(--muted); }
.sum-stats span + span::before { content: '·'; margin: 0 8px; color: var(--border-strong); }
.sum-stats b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.summary .budget { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.budget-field { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.budget-field:focus-within { border-color: var(--purple); box-shadow: var(--ring); }
.budget-cur { padding-left: 10px; color: var(--muted); font-weight: 600; }
.summary .budget-field input { width: 64px; border: none; padding: 8px 8px 8px 4px; font-size: 15px; font-weight: 700; color: var(--text); border-radius: 0; }
.summary .budget-field input:focus { box-shadow: none; }
@media (max-width: 620px) {
  .summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title budget' 'stats stats'; gap: 6px 12px; padding: 12px 14px; }
  .summary .metrics { display: contents; }
  .sum-title { grid-area: title; gap: 2px 8px; }
  .sum-title h2 { font-size: 17px; }
  .sum-date, .sum-stats { font-size: 13px; }
  .sum-stats { grid-area: stats; }
  .sum-stats span + span::before { margin: 0 6px; }
  .summary .budget { grid-area: budget; width: auto; justify-content: flex-end; gap: 8px; }
  .summary .budget-field input { width: 56px; min-height: 40px; }
}

/* options drawer: quiet section labels */
.side-fold-body h2, .sidebar h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 4px; }
.race-list .rl-top b { font-variant-numeric: tabular-nums; margin-right: 4px; }

/* top tips */
.topbets-card { background: var(--panel); border-color: var(--border); padding: 16px 18px 4px; }
.tb-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.tb-head h3 { font-size: 16px; }
.tb-head .star { display: none; }
.tb-list { display: flex; flex-direction: column; }
.tb-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; }
.tb-row:hover .tb-name { color: var(--purple); }
.tb-conf { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; min-width: 56px; text-align: center; flex: 0 0 auto; }
.tb-main { flex: 1 1 200px; min-width: 0; }
.tb-horse { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; min-width: 0; }
.tb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-horse .tb-odds { margin: 0; flex: 0 0 auto; }
.tb-race { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-race b { color: var(--text); font-variant-numeric: tabular-nums; }
.tb-num { min-width: 60px; align-items: flex-end; }
.tb-num .v { font-size: 15px; font-weight: 700; }
.tb-actions { flex: 0 0 auto; }
@media (max-width: 620px) {
  .tb-row { flex-wrap: wrap; gap: 6px 10px; }
  .tb-main { flex: 1 1 120px; }
  .tb-num { display: flex; flex-direction: row; align-items: baseline; gap: 5px; min-width: 0; order: 2; }
  .tb-num .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
  .tb-num .v { font-size: 14px; }
  .tb-actions { order: 1; }
  .tb-actions .slip-add { min-height: 40px; padding: 8px 12px; font-size: 13px; }
}

/* board notes (only when something unusual is on: a filter, custom weights) */
.board-note { font-size: 13px; color: var(--muted); padding: 8px 12px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); }
.board-note strong { color: var(--text); }

/* meetings */
.meeting { margin-bottom: 18px; }
.meeting-head { gap: 10px 12px; }
.meeting-name { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.meeting-bets { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: #fff; color: var(--bet); flex: 0 0 auto; white-space: nowrap; }
.meeting-bets.none { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.75); }
@media (min-width: 861px) { .meeting-times { margin-left: auto; } .meeting-bets { margin-left: 0; } }
.meeting-body { display: flex; flex-direction: column; gap: 6px; padding-top: 0; }
details.meeting:not([open]) > summary { margin-bottom: 0; }
details.meeting[open] > .meeting-head { margin-bottom: 8px; }

/* race rows on the board */
.race-row { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: box-shadow 0.3s; }
.race-row.has-tips { border-left: 3px solid var(--bet); }
.race-row.just-back { box-shadow: 0 0 0 2px var(--purple); }
.rr-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; background: none; border: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; border-radius: var(--r); min-height: 52px; }
.rr-head:hover { background: var(--panel-2); }
.race-row.open .rr-head { border-radius: var(--r) var(--r) 0 0; }
.rr-time { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; flex: 0 0 48px; }
.rr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rr-name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-tip { color: var(--bet); font-weight: 600; }
.rr-tip::before { content: '·'; margin: 0 6px; color: var(--border-strong); font-weight: 400; }
.rr-tips { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--bet-soft); color: var(--bet); white-space: nowrap; }
.rr-tips.none { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.rr-chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; flex: 0 0 auto; margin: 0 4px 4px 0; }
.race-row.open .rr-chev { transform: rotate(-135deg); margin: 4px 4px 0 0; }
.rr-body { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.rr-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 620px) {
  .rr-head { padding: 10px 12px; gap: 10px; min-height: 56px; }
  .rr-time { flex-basis: 44px; }
  .rr-tip { display: block; }
  .rr-tip::before { content: none; margin: 0; }
  .rr-tips.none { display: none; }
  .rr-body { padding: 0 12px 12px; }
  .rr-foot .btn-secondary { width: 100%; }
}

/* verdict: plain text, not a banner */
.verdict { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; font-weight: 500; padding: 10px 12px; margin: 10px 0; line-height: 1.45; }
.verdict .big-ico { display: none; }
.verdict-pace { margin-top: 0; font-size: 13px; }
.rr-body .verdict { margin-top: 12px; }

/* suggested bets */
.bet-card { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--bet); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 8px; }
.bc-horse { flex: 1 1 220px; min-width: 0; }
.bc-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; flex-wrap: wrap; }
.bc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.bc-nums { display: flex; gap: 20px; flex: 0 0 auto; }
.bc-num { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.bc-num .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; }
.bc-num .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bc-num .v.pos { color: var(--bet); }
.bc-actions { flex: 0 0 auto; }
.conf { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; }
.proj-line { margin-top: 4px; }
@media (max-width: 620px) {
  .bet-card { gap: 8px 12px; padding: 10px 12px; }
  .bc-horse { flex: 1 1 100%; }
  .bc-nums { flex: 1 1 auto; justify-content: space-between; gap: 12px; }
  .bc-num { align-items: flex-start; }
  .bc-actions { flex: 1 1 100%; display: flex; }
  .bc-actions .slip-add { width: 100%; }
}

/* the open racecard */
.detail-bar { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.detail-bar .back-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; white-space: nowrap; }
.back-arr { width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.detail-bar-race { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-bar-race b { color: var(--text); font-variant-numeric: tabular-nums; }
.detail-bar .share-btn { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 860px) {
  .content { overflow-x: visible; } /* so the bar below can stick */
  .detail-bar { position: sticky; top: 58px; z-index: 5; background: var(--bg); padding: 6px 0; margin-bottom: 8px; box-shadow: 0 6px 6px -6px rgba(16, 24, 40, 0.12); }
  .detail-bar .back-link { min-height: 44px; padding: 0 6px 0 2px; }
}
@media (max-width: 620px) { .detail-bar { top: 52px; } }

.race-detail { padding: 18px 20px; }
.rd-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.rd-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rd-time { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rd-title h3 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.1; }
.rd-name { font-size: 15px; font-weight: 500; margin-top: 4px; }
.rd-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rd-facts span { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.rd-section { margin-top: 16px; }
.rd-section h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.rd-section h4 .muted { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; font-size: 12.5px; }
.rd-section .verdict { margin-top: 0; }
.race-detail .pace-map { margin: 16px 0 0; }
.race-detail .reveal-box { margin-top: 16px; }
@media (max-width: 620px) {
  .race-detail { padding: 14px; }
  .rd-time { font-size: 22px; }
  .rd-title h3 { font-size: 19px; }
  .rd-name { font-size: 14px; }
}

/* the field: one row per runner */
.runners { display: flex; flex-direction: column; gap: 4px; }
.runner { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); }
.runner .ru-stats { display: grid; grid-template-columns: 96px 60px 66px 72px 62px 64px; gap: 10px; align-items: center; text-align: right; font-variant-numeric: tabular-nums; }
.runner-h { padding: 2px 10px; border: none; background: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.runner-h .ru-stat { line-height: 1.2; }
.runner.is-bet { background: var(--bet-soft); border-color: var(--bet-line); }
.runner.is-winner .ru-name { font-weight: 800; }
.ru-name { display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; flex-wrap: wrap; }
.ru-name .tag { margin-left: 0; }
.ru-people { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ru-stat { font-size: 14px; }
.ru-form { color: var(--muted); letter-spacing: 0.3px; }
.ru-odds { font-weight: 700; }
.ru-edge.val-up { color: var(--bet); }
.ru-why { text-align: right; }
.why-row { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; margin: -2px 0 4px; }
.runners-note { margin: 8px 0 0; }
#tips .tag.bet { background: var(--bet); }
@media (max-width: 1024px) { .runner .ru-stats { grid-template-columns: 84px 52px 58px 62px 58px 60px; gap: 8px; } }
@media (max-width: 620px) {
  .runner-h { display: none; }
  .runner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'horse why' 'stats stats'; gap: 6px 10px; padding: 10px 12px; }
  .ru-horse { grid-area: horse; }
  .ru-why { grid-area: why; }
  .ru-stats { grid-area: stats; }
  .runner .ru-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; text-align: left; }
  .ru-stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13.5px; }
  .ru-stat::before { content: attr(data-label); font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  .ru-stat.ru-empty { display: none; }
  .ru-stat.ru-odds { font-size: 15px; }
}

/* buttons: one secondary style across the page */
.btn-secondary { font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.btn-secondary:hover { border-color: var(--purple); color: var(--purple); background: var(--blue-soft); }
.reveal-btn { font-size: 13px; padding: 7px 12px; }
.slip-add { padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); white-space: nowrap; }
.slip-add.in-slip { background: var(--bet); border-color: var(--bet); }
.why-btn { padding: 5px 10px; border-radius: var(--r-sm); }
.why-btn.open { background: var(--purple); border-color: var(--purple); }
@media (max-width: 620px) {
  .btn-secondary, .slip-add, .reveal-btn { min-height: 44px; padding: 10px 14px; font-size: 14px; }
  .why-btn { min-height: 40px; min-width: 60px; }
  .race-list li { min-height: 44px; }
}

/* bet slip rows */
.slip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
.slip-row:last-child { border-bottom: none; }
.slip-main { flex: 1 1 180px; min-width: 0; }
.slip-main b { color: var(--text); }
.slip-ctl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.slip-del { font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-radius: 8px; }
.slip-del:hover { color: var(--red); background: var(--red-soft); }
@media (max-width: 620px) {
  .slip-ctl { flex: 1 1 100%; }
  .slip-mkt { flex: 1 1 auto; min-height: 44px; }
  .slip-stake input { min-height: 44px; width: 92px; }
  .slip-del { min-height: 44px; margin-left: auto; }
  .slip-actions .primary, .slip-actions .csv-btn { min-height: 44px; }
  .modal-slip, .modal-runner { border-radius: 18px 18px 0 0; max-height: 92vh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) { .tb-reason { display: none; } }
.rr-tip { white-space: nowrap; }
.fb-track { background: var(--border); }
@media (max-width: 620px) { .fbar { grid-template-columns: 112px 1fr 52px; } }

/* ==== SalesIQ Ask + Shortlist ==== */
/* sale strip: picker, lot count and one "Answer options" button on a single line */
#sale-card { padding: 12px 18px; }
.sale-opts-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.sale-opts-row .sale-pick { flex: 1 1 300px; max-width: 560px; margin: 0; }
.sale-opts-row .sale-pick select { max-width: none; min-height: 40px; font-size: 14.5px; }
#sale-summary { flex: 0 0 auto; margin: 0; white-space: nowrap; }
#sale-summary:empty { display: none; }
.opts-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; white-space: nowrap; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: #fff; border: 1px solid var(--border-strong); border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.opts-btn:hover, .opts-btn.open { border-color: var(--purple); color: var(--purple); }
.opts-val { font-weight: 500; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--border); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opts-val:empty { display: none; }
.opts-chev { flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -3px 2px 0 0; transition: transform 0.15s; }
.opts-btn.open .opts-chev { transform: rotate(225deg); margin-top: 3px; }
.chat-opts { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.chat-opts-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; }
.chat-opts-body .control { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.chat-opts-body select { max-width: none; min-height: 40px; font-size: 14px; font-weight: 400; color: var(--text); }
.chat-opts-body .sources-ctl { grid-column: auto; }
.chat-opts-body .src-checks { padding-top: 4px; gap: 4px 18px; }
.chat-opts-body .src-checks .checkrow { min-height: 32px; }
#sales.view-browse .opts-btn, #sales.view-browse .chat-opts { display: none; }

/* the conversation card: no nested scroll, the question box sticks to the bottom */
.chat-card { padding: 16px 22px 0; }
.chat-box { min-height: 0; max-height: none; height: auto; overflow: visible; gap: 16px; padding: 2px 0 4px; }
.chat-empty { color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 62ch; padding: 4px 0 0; }
.chat-msg.user { max-width: min(80%, 640px); background: var(--purple); color: #fff; border-radius: 14px 14px 4px 14px; padding: 9px 14px; font-size: 14.5px; }
.chat-msg.assistant { align-self: stretch; max-width: none; width: 100%; background: none; border: none; padding: 0 0 2px; font-size: 15px; line-height: 1.55; }
.chat-msg.assistant::before { content: 'Answer'; display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.chat-msg.assistant.pending { display: flex; align-items: center; gap: 10px; color: var(--muted); font-style: normal; font-size: 14px; padding: 6px 0; }
.chat-msg.assistant.pending::before { content: none; }
.chat-dots { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); opacity: 0.3; animation: chat-dot 1.2s infinite ease-in-out; }
.chat-dots i:nth-child(2) { animation-delay: 0.2s; }
.chat-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.chat-msg.streaming::after { content: 'Writing…'; display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.chat-msg.error { align-self: stretch; max-width: none; width: 100%; padding: 10px 14px; border-radius: var(--r-sm); font-size: 14px; }
/* answer sections read like the lot sheet's accordions */
.chat-sec { border: 1px solid var(--border); border-radius: var(--r-sm); margin: 8px 0; background: #fff; }
.chat-sec > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 14px; font-weight: 700; font-size: 14.5px; color: var(--text); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-sec > summary::before { content: none; }
.chat-sec > summary::after { content: ''; flex: 0 0 auto; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; }
.chat-sec[open] > summary::after { transform: rotate(45deg); }
.chat-sec[open] > summary { border-bottom: 1px solid var(--border); }
.chat-sec-body { padding: 10px 14px 12px; font-size: 14px; }
.chat-sec-body .chat-table-wrap { margin: 2px 0 0; }
/* flat tables: horizontal rules only, scrolling inside their wrap when wide */
.chat-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.chat-msg table { font-size: 13.5px; min-width: 0; }
.chat-msg th, .chat-msg td { border: none; border-bottom: 1px solid var(--border); padding: 7px 10px; }
.chat-msg th { background: var(--panel-2); border-bottom: 1px solid var(--border-strong); font-size: 11px; }
.chat-msg tbody tr:last-child td { border-bottom: none; }
/* lot numbers are pills so they read as tappable; names keep the dotted underline */
.chat-msg .chat-link { font-weight: 600; }
.chat-msg .chat-link.chat-lot { display: inline-block; padding: 0 7px; border: 1px solid var(--purple); border-radius: 6px; background: var(--blue-soft); color: var(--purple); text-decoration: none; line-height: 1.55; font-size: 0.92em; white-space: nowrap; vertical-align: baseline; }
.chat-msg .chat-link.chat-lot:hover { background: var(--purple); color: #fff; text-decoration: none; }
.chat-msg strong .chat-link.chat-lot { font-weight: 700; }
.chat-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.chat-actions .csv-btn { font-size: 13px; padding: 0 12px; min-height: 36px; background: #fff; }
.chat-stopped { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.chat-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.chat-suggest .chip { color: var(--text); font-weight: 500; padding: 7px 12px; min-height: 36px; white-space: normal; text-align: left; line-height: 1.3; }
.chat-suggest .chip:hover { border-color: var(--purple); color: var(--purple); }
/* slim context bar once a conversation is under way */
.chat-context { display: none; align-items: center; gap: 10px; padding: 0 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); font-weight: 500; }
#sales.chat-focus .chat-context { display: flex; }
.ctx-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ctx-sale { font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-opts { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-context .ctx-btns { gap: 8px; }
.chat-context .ctx-btns .csv-btn { min-height: 36px; padding: 0 12px; background: #fff; }
.ctx-l-short { display: none; }
@media (max-width: 620px) { .ctx-l-short { display: inline; } }
.chat-input-row { margin: 12px -22px 0; padding: 10px 22px 12px; border-top: 1px solid var(--border); background: var(--panel); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.chat-input-row input { min-height: 46px; padding: 10px 14px; font-size: 15px; border-radius: 10px; }
.chat-input-row input::placeholder { font-size: 14px; opacity: 0.7; }
.chat-input-row input:focus { outline: none; border-color: var(--purple); box-shadow: var(--ring); }
.chat-input-row input:disabled { background: var(--panel-2); color: var(--muted); }
.chat-input-row .primary { min-height: 46px; padding: 0 22px; border-radius: 10px; font-size: 15px; box-shadow: none; }
.chat-input-row .primary.stop { background: #fff; color: var(--red); border: 1px solid var(--red); }
.chat-input-row .primary.stop:hover { filter: none; background: var(--red-soft); }

/* shortlist: browse-style rows with a note + budget strip per lot */
.sl-card { padding: 0 0 6px; }
.sl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 18px; margin: 0; border-bottom: 1px solid var(--border); }
.sl-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; font-size: 14px; min-height: 36px; }
.sl-summary:empty { display: none; }
.sl-sum-sep { display: inline-block; width: 1px; height: 14px; background: var(--border-strong); margin: 0 6px; }
.sl-total { font-variant-numeric: tabular-nums; }
.sl-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sl-tools .chip, .sl-tools .csv-btn { min-height: 36px; padding: 0 12px; }
.sl-tools .csv-btn { background: #fff; }
.sl-list { display: flex; flex-direction: column; }
.sl-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--border); border-bottom: none; }
.sl-item:first-child { border-top: none; }
.sl-item .br-lot { font-size: 20px; font-weight: 700; color: var(--purple); line-height: 1; padding-top: 2px; cursor: pointer; }
.sl-item .br-lot small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 2px; }
.sl-main { min-width: 0; }
.sl-open { cursor: pointer; }
.sl-item .br-l1 { font-size: 15px; font-weight: 600; white-space: normal; }
.sl-item .br-l1 .x { color: var(--muted); font-weight: 400; margin: 0; }
.sl-item .br-l2 { font-size: 13px; color: var(--muted); white-space: normal; margin-top: 2px; }
.sl-item .br-val { text-align: right; min-width: 120px; cursor: pointer; padding-top: 2px; }
.sl-item .br-val .score { justify-content: flex-end; }
.sl-inline-note { display: none; }
.sl-edit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.sl-note { flex: 1 1 260px; min-height: 38px; height: 38px; margin: 0; padding: 8px 10px; font: inherit; font-size: 13.5px; line-height: 1.4; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; resize: none; overflow: hidden; }
.sl-note:focus { border-color: var(--purple); box-shadow: var(--ring); outline: none; }
.sl-budget-wrap { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; flex: 0 0 auto; cursor: text; }
.sl-budget-wrap:focus-within { border-color: var(--purple); box-shadow: var(--ring); }
.sl-budget-l { font-size: 12px; font-weight: 600; color: var(--muted); }
.sl-budget-u { font-size: 12px; color: var(--muted); }
.sl-budget { width: 84px; margin: 0; padding: 0; border: none; background: transparent; font: inherit; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield; }
.sl-budget::-webkit-outer-spin-button, .sl-budget::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sl-saved { align-self: center; font-size: 12px; font-weight: 600; color: var(--green); opacity: 0; transition: opacity 0.2s; }
.sl-saved.show { opacity: 1; }
.sl-saved.err { color: var(--red); }
.sl-act { display: flex; align-items: center; gap: 4px; }
.sl-open-btn { min-height: 34px; padding: 0 12px; background: #fff; }
.sl-act .star-btn { width: 40px; height: 34px; font-size: 20px; padding: 0; }
.sl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 18px 32px; text-align: center; }
.sl-empty-t { font-weight: 700; font-size: 16px; }
.sl-empty .muted { max-width: 46ch; font-size: 14px; }
.sl-empty .csv-btn { margin-top: 6px; min-height: 40px; padding: 0 16px; background: #fff; }
/* sale-day view: one tight row per lot, note and budget read inline, tap to open */
.sl-compact .sl-item { padding: 8px 18px; align-items: center; gap: 2px 14px; }
.sl-compact .sl-item .br-lot { font-size: 18px; padding-top: 0; }
.sl-compact .sl-edit, .sl-compact .sl-open-btn { display: none; }
.sl-compact .sl-inline-note { display: block; font-size: 13.5px; color: var(--text); margin-top: 2px; }
.sl-compact .sl-inline-budget { color: var(--muted); }
.sl-compact .sl-item .br-l1, .sl-compact .sl-item .br-l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) {
  #sale-card { padding: 10px 14px; }
  .sale-opts-row .sale-pick { flex: 1 1 100%; max-width: none; }
  .opts-btn { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 4px 10px; font-size: 13px; }
  .opts-btn > .opts-chev { margin-left: auto; }
  .opts-val { flex: 0 1 auto; min-width: 0; max-width: none; }
  .chat-opts-body { grid-template-columns: 1fr 1fr; }
  .chat-opts-body .sources-ctl { grid-column: 1 / -1; }
  .chat-card { padding: 12px 14px 0; }
  .chat-msg.user { max-width: 88%; }
  .chat-msg.assistant { font-size: 14.5px; }
  .chat-sec-body { padding: 8px 12px 10px; }
  /* stacked table cards on phones (re-declared here so the flat-table rules above do not undo them) */
  .chat-msg .chat-table-wrap { overflow-x: visible; }
  .chat-msg tbody tr { display: block; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; margin-bottom: 8px; background: #fff; }
  .chat-msg tbody tr:last-child { margin-bottom: 0; }
  .chat-msg tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: none; padding: 4px 0; text-align: right; white-space: normal; }
  .chat-msg tbody tr:last-child td { border-bottom: none; }
  .chat-context .ctx-btns .csv-btn { padding: 0 10px; }
  .ctx-l-long { display: none; }
  .chat-input-row { margin: 10px -14px 0; padding: 8px 14px 10px; bottom: calc(55px + env(safe-area-inset-bottom, 0px)); }
  .chat-input-row .primary { padding: 0 16px; }
  .sl-head { padding: 10px 12px; }
  .sl-summary { font-size: 13.5px; }
  .sl-sum-sep { margin: 0 8px; }
  .sl-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .sl-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 12px; }
  .sl-main { display: contents; }
  .sl-item .br-lot { grid-column: 1; grid-row: 1 / span 3; font-size: 18px; }
  .sl-item .br-l1 { grid-column: 2; grid-row: 1; }
  .sl-item .br-l2 { grid-column: 2; grid-row: 2; }
  .sl-item .br-val { grid-column: 2; grid-row: 3; text-align: left; min-width: 0; padding-top: 2px; }
  .sl-item .br-val .score { justify-content: flex-start; }
  .sl-inline-note { grid-column: 2; grid-row: 4; }
  .sl-edit { grid-column: 1 / -1; grid-row: 5; margin-top: 10px; }
  .sl-note { flex: 1 1 100%; }
  .sl-budget-wrap { flex: 0 0 auto; }
  .sl-budget { width: 90px; }
  .sl-act { grid-column: 3; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; justify-content: flex-start; }
  .sl-act .star-btn { height: 40px; }
  .sl-open-btn { display: none; }
  .sl-compact .sl-item { padding: 8px 12px; align-items: start; }
  .sl-compact .sl-item .br-val .score { display: none; }
  .sl-compact .sl-item .br-lot { grid-row: 1 / span 4; }
  .sl-compact .sl-act { grid-row: 1 / span 4; }
}
@media (max-width: 380px) { .opts-val { display: none; } }

/* ==== home: two converging panels ==== */
body[data-product="home"] main { padding: 0; max-width: none; }
body[data-product="home"] .site-footer { display: none; }
body[data-product="home"] { padding-bottom: 0; }
.home-split { display: flex; min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); position: relative; overflow: hidden; background: #1c2f6b; }
.hs { position: relative; flex: 1 1 50%; min-width: 0; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; color: #fff; font: inherit; display: grid; align-content: center; justify-items: start; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
.hs-bet { background: #1c2f6b; z-index: 2; clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%); margin-right: -110px; padding-right: 110px; }
.hs-sales { background: #d9487f; z-index: 1; padding-left: 110px; }
.hs::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.18s; pointer-events: none; }
.hs:hover::after, .hs:focus-visible::after { opacity: 0.06; }
.hs:focus-visible { outline: none; }
.hs-art { position: absolute; width: 62%; max-width: 520px; min-width: 260px; right: -4%; top: 50%; transform: translateY(-50%); opacity: 0.16; pointer-events: none; transition: transform 0.4s ease, opacity 0.3s; }
.hs-sales .hs-art { right: auto; left: 40%; }
.hs:hover .hs-art { opacity: 0.22; transform: translateY(-50%) scale(1.03); }
.hs-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 56px 8% 56px 9%; max-width: 560px; }
.hs-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.hs-name { font-family: var(--font-display); font-size: clamp(48px, 6vw, 84px); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.hs-name b { font-weight: 800; opacity: 0.72; }
.hs-tag { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; opacity: 0.92; max-width: 34ch; }
.hs-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.hs-points span { font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.45); border-radius: 20px; }
.hs-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 10px; background: #fff; border-radius: 10px; padding: 13px 20px; font-size: 15px; font-weight: 700; transition: transform 0.18s; }
.hs-bet .hs-cta { color: #1c2f6b; }
.hs-sales .hs-cta { color: #d9487f; }
.hs-cta i { font-style: normal; font-size: 20px; line-height: 1; transition: transform 0.18s; }
.hs:hover .hs-cta { transform: translateY(-1px); }
.hs:hover .hs-cta i { transform: translateX(3px); }
@media (max-width: 900px) {
  .home-split { flex-direction: column; min-height: calc(100vh - 52px); min-height: calc(100dvh - 52px); }
  .hs { flex: 1 1 50%; }
  .hs-bet { align-content: end; }
  .hs-sales { align-content: start; }
  .hs-bet { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); margin: 0 0 -40px; padding: 0 0 40px; }
  .hs-sales { padding: 40px 0 0; }
  .hs-body { padding: 28px 22px 34px; gap: 10px; max-width: none; }
  .hs-sales .hs-body { padding-top: 22px; }
  .hs-name { font-size: clamp(44px, 12vw, 64px); }
  .hs-tag { font-size: 16px; }
  .hs-art { width: 54%; min-width: 220px; right: -12%; top: 34%; opacity: 0.13; }
  .hs-sales .hs-art { left: auto; right: -10%; top: 62%; }
  .hs-body { max-width: 86%; }
  .hs-cta { padding: 12px 18px; margin-top: 4px; }
}
@media (max-width: 620px) {
  .hs-body { padding: 18px 18px 22px; gap: 8px; }
  .hs-sales .hs-body { padding-top: 16px; }
  .hs-points span { font-size: 12px; padding: 5px 10px; }
  .hs-name { font-size: 44px; }
  .hs-tag { font-size: 15px; }
  .hs-cta { padding: 11px 16px; font-size: 14px; }
}

/* ==== site-wide product theming (follows the home page) ==== */
/* BetIQ pages take the green accent; SalesIQ keeps indigo; Admin is neutral navy. */
body[data-product="bet"] { --purple: #1c2f6b; --purple-2: #142352; --blue: #1c2f6b; --magenta: #1c2f6b; --blue-soft: #e8ecf6; --grad: #1c2f6b; --ring: 0 0 0 3px rgba(28, 47, 107, 0.22); }
body[data-product="sales"] { --purple: #d9487f; --purple-2: #b8386a; --blue: #d9487f; --magenta: #d9487f; --blue-soft: #fdeaf1; --grad: #d9487f; --ring: 0 0 0 3px rgba(217, 72, 127, 0.22); }
body[data-product="sales"] .um-avatar { background: #d9487f; }
body[data-product="admin"] { --purple: #10203f; --purple-2: #0a1530; --blue-soft: #e6e9f1; --grad: #10203f; --ring: 0 0 0 3px rgba(16, 32, 63, 0.22); }
.product-crumb { color: var(--purple); font-weight: 700; }
body[data-product="bet"] .um-avatar { background: #1c2f6b; }

/* section bands: the page title in the product colour with the home page's line-art */
.band { position: relative; overflow: hidden; background: var(--purple); color: #fff; border-radius: var(--r-lg); padding: 24px 28px; margin: 0 0 18px; }
.band::after { content: ''; position: absolute; right: -20px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-position: center; pointer-events: none; }
.band-bet::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22 fill=%22none%22 stroke=%22rgba%28255,255,255,0.16%29%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%22160%22 cy=%22200%22 rx=%22140%22 ry=%2270%22/%3E%3Cellipse cx=%22160%22 cy=%22200%22 rx=%22104%22 ry=%2246%22/%3E%3Cpath d=%22M40 200h16M264 200h16M160 130v14M160 246v14M84 145l8 10M236 145l-8 10M84 255l8-10M236 255l-8-10%22/%3E%3Cpath d=%22M56 118l40-26 34 14 46-40 40 12 44-38%22 stroke-width=%225%22/%3E%3Cpath d=%22M232 40h28v28%22 stroke-width=%225%22/%3E%3C/svg%3E"); }
.band-sales::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22 fill=%22none%22 stroke=%22rgba%28255,255,255,0.16%29%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M150 60l70 70-46 46-70-70z%22 stroke-width=%225%22/%3E%3Cpath d=%22M130 40l40 40M180 130l40 40M116 120l-64 64 22 22 64-64%22 stroke-width=%225%22/%3E%3Cpath d=%22M40 280h150%22 stroke-width=%225%22/%3E%3Cpath d=%22M214 214h66v66h-66z%22/%3E%3Cpath d=%22M228 228h38M228 246h38M228 264h22%22/%3E%3Ccircle cx=%22262%22 cy=%2286%22 r=%2230%22/%3E%3Cpath d=%22M262 68v36M250 78h20M248 96h28%22/%3E%3C/svg%3E"); }
.band-in { position: relative; z-index: 1; max-width: 70ch; }
.band-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.78; margin-bottom: 6px; }
.band h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.band p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; opacity: 0.9; color: #fff; }
.band-admin { background: #10203f; }
.band-sales { background: #d9487f; }
.band-bet { background: #1c2f6b; }

/* the Racing summary strip is that page's band */
#summary.band { border: none; box-shadow: none; padding: 20px 26px; margin-bottom: 16px; }
#summary.band::after { width: 260px; height: 260px; right: 120px; }
#summary.band .metrics { position: relative; z-index: 1; }
#summary.band .sum-title h2 { color: #fff; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
#summary.band .sum-date { color: #fff; opacity: 0.8; }
#summary.band .sum-stats { color: #fff; opacity: 0.9; }
#summary.band .sum-stats b { color: #fff; }
#summary.band .sum-stats span + span::before { color: rgba(255,255,255,0.45); }
#summary.band .budget { color: #fff; position: relative; z-index: 1; }
#summary.band .budget-field { border-color: transparent; }
#summary.band .budget-field:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }

@media (max-width: 620px) {
  .band { padding: 14px 16px; margin-bottom: 12px; border-radius: var(--r); }
  .band::after { width: 170px; height: 170px; right: -30px; }
  .band-kicker { font-size: 10.5px; margin-bottom: 3px; }
  .band h2 { font-size: 22px; }
  .band p { display: none; }
  #summary.band { padding: 12px 14px; }
  #summary.band::after { right: -30px; width: 150px; height: 150px; }
  #summary.band .sum-title h2 { font-size: 20px; }
  #summary.band .budget-field input { background: #fff; }
}
@media (min-width: 621px) and (max-width: 1024px) {
  .band { padding: 20px 22px; }
  .band::after { width: 240px; height: 240px; }
}
@media (max-width: 760px) { .settings-grid > .card { width: 100%; align-self: stretch; } }

/* ==== buyer tools: profile, verdicts, ladders, ranked shortlist ==== */
.profile-btn { margin-left: 0; }
#sales.view-browse #profile-btn { display: inline-flex; }
.pf-money { display: flex; align-items: center; gap: 6px; }
.pf-money input { flex: 1; min-width: 0; }
.pf-money select { width: auto; flex: 0 0 auto; }
.pf-cur { font-size: 13px; color: var(--muted); font-weight: 600; }
.vd { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; }
.vd-sm { font-size: 11px; padding: 1px 7px; }
.vd-racing { background: var(--green-soft); color: #0c6e4a; border-color: #bfe3d0; }
.vd-pinhook { background: var(--blue-soft); color: var(--purple); border-color: #cdd0ea; }
.vd-broodmare { background: #fbf3df; color: #8a5f10; border-color: #ead9b0; }
.vd-caution { background: var(--red-soft); color: #9a2540; border-color: #f0c3cc; }
.vd-value, .vd-unknown, .vd-fair, .vd-good, .vd-strong, .vd-limited, .vd-modest { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.fx-verdict { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 10px; justify-self: start; }
.fx-verdict.vd-good, .fx-verdict.vd-strong { background: var(--green-soft); color: #0c6e4a; }
.fx-verdict.vd-limited, .fx-verdict.vd-modest { background: var(--red-soft); color: #9a2540; }
.lp-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.lp-verdict-why { font-size: 13px; color: var(--muted); flex: 1 1 260px; min-width: 0; }
.lp-ladder-wrap { margin-top: 12px; }
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ld { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; min-width: 0; }
.ld i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ld b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-1 { border-color: #bfe3d0; background: var(--green-soft); }
.ld-2 { border-color: #cdd0ea; background: var(--blue-soft); }
.ld-4 { border-color: #f0c3cc; background: var(--red-soft); }
.ld-4 b { color: #9a2540; }
.ld-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.lp-sale-verdict { margin-top: 8px; font-size: 13.5px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--border); }
.lp-sale-verdict.good { background: var(--green-soft); border-color: #bfe3d0; color: #0c6e4a; }
.lp-rel { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.lp-similar .link-btn { font-size: 13px; }
.ladder-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.ladder-edit .control { margin-top: 0; }
.ladder-edit input { width: 100%; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.sl-item { grid-template-columns: 40px 58px minmax(0, 1fr) auto auto; }
.sl-rankcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sl-rank { font-weight: 800; font-size: 15px; color: var(--purple); cursor: pointer; min-width: 30px; text-align: center; }
.sl-rank.unranked { color: var(--border-strong); }
.rank-btns { display: flex; flex-direction: column; gap: 2px; }
.sl-rank-btn { font: inherit; font-size: 9px; line-height: 1; padding: 5px 7px; border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 6px; cursor: pointer; }
.sl-rank-btn:hover { color: var(--purple); border-color: var(--purple); }
.sl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.sl-chg { font-size: 11.5px; font-weight: 700; color: #8a5f10; background: #fbf3df; border: 1px solid #ead9b0; border-radius: 10px; padding: 1px 8px; }
.sl-updated { box-shadow: inset 3px 0 0 var(--gold); }
.sl-why { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.sl-sale-verdict { font-size: 12.5px; margin-top: 4px; color: var(--text); }
.sl-sale-verdict.good { color: #0c6e4a; }
.sl-compact .sl-why, .sl-compact .rank-btns, .sl-compact .sl-tags .sl-chg { display: none; }
.sl-compact .sl-item { grid-template-columns: 32px 58px minmax(0, 1fr) auto auto; }
@media (max-width: 760px) {
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder-edit { grid-template-columns: 1fr; }
  .lp-rel { gap: 4px 12px; }
}
@media (max-width: 620px) {
  /* phones: the rank sits under the lot number; every line of the main block is placed explicitly */
  .sl-item, .sl-compact .sl-item { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .sl-rankcol { grid-column: 1; grid-row: 4 / span 4; align-items: flex-start; padding-top: 4px; }
  .sl-rank { font-size: 13px; min-width: 0; text-align: left; }
  .rank-btns { flex-direction: row; }
  .sl-item .br-lot { grid-row: 1 / span 3; }
  .sl-tags { grid-column: 2; grid-row: 1; margin-bottom: 2px; }
  .sl-item .br-l1 { grid-row: 2; }
  .sl-item .br-l2 { grid-row: 3; }
  .sl-item .br-val { grid-row: 4; }
  .sl-why { grid-column: 2; grid-row: 5; }
  .sl-sale-verdict { grid-column: 2; grid-row: 6; }
  .sl-inline-note { grid-row: 7; }
  .sl-edit { grid-row: 8; }
  .sl-act { grid-row: 1 / span 4; }
  .sl-item:not(:has(.sl-tags)) .br-l1 { grid-row: 1; }
  .sl-item:not(:has(.sl-tags)) .br-l2 { grid-row: 2; }
  .sl-item:not(:has(.sl-tags)) .br-val { grid-row: 3; }
  .sl-item:not(:has(.sl-tags)) .sl-rankcol { grid-row: 4 / span 3; }
  .sl-compact .sl-rankcol { grid-row: 1 / span 4; grid-column: 1; }
  .sl-compact .sl-item .br-lot { grid-row: 1 / span 1; }
}

/* ==== Maccer Racing brand ==== */
.wordmark span, .auth-brand h1 span { color: #d9487f; }
.wordmark { color: #10203f; }
.wordmark span { margin-left: 0.22em; }

/* ==== logo: quartered-silks roundel + MaccerRacing wordmark ==== */
.wordmark, .auth-brand h1.lg { display: inline-flex; align-items: center; gap: 8px; }
.wordmark span, .auth-brand h1 span { margin: 0; color: inherit; }
.lg-mark { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.lg-text, .wordmark .lg-text, .auth-brand h1 .lg-text { display: inline-flex; font-weight: 800; letter-spacing: -0.04em; color: #1c2f6b; line-height: 1; white-space: nowrap; font-variant-ligatures: none; }
.lg-text .lg-a, .auth-brand h1 .lg-text .lg-a { color: #1c2f6b; }
.lg-text .lg-b, .auth-brand h1 .lg-text .lg-b { color: #d9487f; }
.wordmark .lg-text { font-size: 21px; }
.wordmark:hover .lg-text .lg-b { color: #b8386a; }
.auth-brand h1.lg { justify-content: center; gap: 11px; }
.auth-brand h1.lg .lg-text { font-size: 30px; }
@media (max-width: 620px) { .wordmark .lg-text { font-size: 19px; } .wordmark .lg-mark svg { width: 24px; height: 24px; } }