/* Prime NFL Optimizer M1 UI. Brand tokens from team/design-m1/SPEC.md. No external fonts or assets. */
:root {
  --bg: #050505; --panel: #0e0e0e; --panel-2: #141414; --panel-3: #1a1a1a;
  --neon: #01FF4F; --stroke: #16F151; --text: #FFFFFF; --muted: #AAAAAA; --dim: #777777;
  --warn: #FFCC00; --danger: #FF4D4D; --border: #2A2A2A; --border-2: #3A3A3A;
  --ui: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.35 var(--ui); }
body.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-root { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
button, select, input { font: inherit; color: inherit; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 -12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 210px; }
.logo { width: 30px; height: 30px; border-radius: 6px; background: var(--neon); color: #000; font-weight: 800; display: grid; place-items: center; }
.brand h1 { margin: 0; font-size: 15px; font-weight: 700; }
.brand .sub { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 5px 14px; border-radius: 999px; cursor: pointer; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--neon); color: #000; }
.field-pill { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.field-pill .lbl { font-size: 10px; color: var(--dim); letter-spacing: .05em; }
.field-pill select { background: transparent; border: 0; font-weight: 600; outline: none; }
.field-pill select option { background: var(--panel); }
.spacer { flex: 1; }
.btn { border: 1px solid var(--border-2); background: var(--panel-3); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--muted); }
.chip { border: 1px solid var(--stroke); color: var(--neon); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.chip.incomplete { border-color: #6b5a00; color: var(--warn); }

/* optimize CTA (states A/B/C from SPEC) */
.cta { border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer; border: 1px solid #333; background: #1a1a1a; color: #666; font-size: 14px; }
.cta.ready { background: var(--neon); color: #000; border-color: var(--neon); font-size: 16px; box-shadow: 0 0 18px rgba(1,255,79,.35); }
.cta:disabled { cursor: not-allowed; }
.cta.wide { width: 100%; padding: 12px; }

/* status strip */
.status { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 -12px; border-bottom: 1px solid var(--border); }
.status > div { padding: 8px 12px; border-right: 1px solid var(--border); }
.status .k { font-size: 10px; color: var(--dim); letter-spacing: .05em; }
.status .v { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); display: inline-block; }
.dot.off { background: var(--warn); }

/* main grid */
.main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.panel-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.panel-h h2 { margin: 0; font-size: 14px; }
.panel-h .meta { margin-left: auto; color: var(--muted); font-size: 11px; }
.badge { border: 1px solid var(--stroke); color: var(--neon); border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700; }
.badge.warn { border-color: var(--warn); color: var(--warn); }
.dropped { margin: 8px 12px 0; padding: 8px 10px; border: 1px solid #6b5a00; color: var(--warn); border-radius: 8px; font-size: 12px; }
.toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: var(--panel-3); border: 1px solid var(--warn); color: var(--warn); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.notice { margin: 8px 12px; padding: 8px 10px; border: 1px solid var(--danger); color: #ffb3b3; border-radius: 8px; }
.notice .btn { margin-left: 8px; }

/* pool table */
.table-wrap { overflow: auto; max-height: 560px; }
table.pool { width: 100%; border-collapse: collapse; }
table.pool th { position: sticky; top: 0; background: var(--panel); text-align: left; font-size: 10px; color: var(--dim); font-weight: 600; letter-spacing: .05em; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.pool td { padding: 6px 8px; border-bottom: 1px solid #1c1c1c; white-space: nowrap; }
table.pool tr.excluded td { opacity: .55; }
table.pool tr.dropped-row td { opacity: .45; }
.pname { font-weight: 600; }
.psub { font-size: 11px; color: var(--muted); }
.pos { display: inline-block; min-width: 34px; text-align: center; border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 6px; font-size: 11px; font-weight: 700; background: var(--panel-3); }
.slots { font-size: 11px; color: var(--muted); }
.slots b { color: var(--neon); font-weight: 700; }
.val-good { color: var(--neon); }
.own-chalk { color: var(--warn); }
.cell-in { width: 62px; -moz-appearance: textfield; appearance: textfield; background: #000; border: 1px solid var(--border-2); border-radius: 5px; padding: 3px 5px; text-align: center; font-family: var(--num); }
.cell-in.edited { border-color: var(--neon); }
.toggle { width: 30px; height: 16px; border-radius: 999px; border: 0; background: #333; position: relative; cursor: pointer; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #bbb; transition: left .12s; }
.toggle.on { background: var(--neon); }
.toggle.on::after { left: 16px; background: #000; }
.toggle.excl.on { background: var(--danger); }

/* constraint builder */
.cb { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb .full { grid-column: 1 / -1; }
.cbf { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.cbf label { display: block; font-size: 10px; color: var(--dim); letter-spacing: .05em; margin-bottom: 3px; }
.cbf input, .cbf select { width: 100%; background: #000; border: 1px solid var(--border-2); border-radius: 5px; padding: 5px 7px; }
.cbf .help { font-size: 10px; color: var(--dim); margin-top: 3px; }
.cbf .ro { font-weight: 600; padding: 5px 0; }
.econ { border: 1px solid var(--stroke); background: #062b12; color: var(--neon); border-radius: 8px; padding: 8px; font-size: 11px; font-weight: 600; }
.check { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-top: 4px; }
.check input { width: auto; }
.gate { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.gate .row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.bar { flex: 1; height: 10px; background: #222; border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--warn); }
.bar.ready > i { background: var(--neon); }
.gate .count { font-weight: 700; color: var(--warn); }
.gate.ready .count { color: var(--neon); }
.helper { font-size: 11px; color: var(--muted); margin-top: 6px; }
.helper .helper-short { display: none; }

/* results */
.results-h .btn-export { margin-left: 10px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.card .t { display: flex; justify-content: space-between; font-weight: 700; }
.card .t .n { color: var(--neon); }
.card .m { font-size: 11px; color: var(--muted); margin: 3px 0 6px; }
.card .r { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px; font-size: 12px; padding: 1px 0; }
.card .r .s { color: var(--dim); font-size: 11px; }
.card .r .s.cap { color: var(--neon); font-weight: 700; }
.empty { padding: 16px; color: var(--muted); }

/* responsible-gaming footer: small muted text, AA contrast (#AAAAAA on #050505 ~ 9:1), never hidden, not neon */
.rg-footer { padding: 12px 16px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; text-align: center; }
.rg-footer .rg-line { margin: 2px 0; }
.rg-footer a { color: var(--text); text-decoration: underline; }

/* picker */
.picker-main { max-width: 520px; margin: 80px auto; display: grid; gap: 12px; text-align: center; }
.picker-main .logo { margin: 0 auto; }
.pick { display: block; padding: 14px; border: 1px solid var(--stroke); border-radius: 10px; color: var(--neon); text-decoration: none; font-weight: 700; }

/* mobile */
@media (max-width: 760px) {
  .status { grid-template-columns: 1fr 1fr; }
  .main { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .brand { min-width: 0; }
  .topbar .field-pill.sport { display: none; }
  .table-wrap { max-height: none; }
  .helper .helper-full { display: none; }
  .helper .helper-short { display: inline; }
}
.cell-in::-webkit-outer-spin-button, .cell-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Classic M1.5 TEST stub metric cells */
td.stub { color: var(--muted); font-style: italic; }
.badge.warn { border-color: #c9a227; color: #e6c35c; }

/* Classic M1.5: Optimize-by must show full option text incl. (TEST) when closed */
.cbf select.optimize-by {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  font-size: 12px;
  padding-right: 22px;
}