/* Apostas — selection assistant: .builder/.bstep/.slip/.chips from components.css,
 * plus the option rows (reunião, páreo), the order selects and the valor field. */

.ap__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } /* 23rem: slip width */
.builder { margin: 0; padding: 0; list-style: none; }
.bstep fieldset > .btn, .bstep > div > .btn { margin-top: var(--space-5); }
.bstep.is-locked .bstep__t { margin-bottom: .25rem; }
.bstep.is-locked .bstep__hint { margin-bottom: 0; }

/* option rows: a radio on a hairline row (reuniões, páreos) */
.ap-opts { border-top: 1px solid var(--color-line-strong); }
.ap-opt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem var(--space-4); align-items: baseline; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-line); cursor: pointer; transition: background .2s; }
.ap-opts--pareos .ap-opt { grid-template-columns: 2.5rem minmax(0, 1fr) auto; } /* 2.5rem: páreo number column */
.ap-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ap-opt:hover { background: var(--color-surface); }
.ap-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.ap-opt:has(input:checked) { background: var(--color-brand-wash); box-shadow: inset 2px 0 0 var(--color-brand); }
.ap-opt__n { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.ap-opt:has(input:checked) .ap-opt__n { color: var(--color-brand); }
.ap-opt__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; font-size: .9375rem; line-height: 1.35; }
.ap-opt__main b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.ap-opt__main .num { font-size: var(--fs-small); color: var(--color-ink-2); }
.ap-opt__side { font-size: var(--fs-small); color: var(--color-ink-2); text-align: right; }
.ap-opt.is-off { cursor: not-allowed; }
.ap-opt.is-off input { cursor: not-allowed; }
.ap-opt.is-off:hover { background: none; }
.ap-opt.is-off .ap-opt__main { color: var(--color-ink-2); }
.ap-opt.is-off .ap-opt__side { color: var(--color-accent-text); max-width: 26ch; }

.ap-closed { margin-top: var(--space-5); }
.ap-closed p + p { margin-top: .25rem; }
.ap-closed__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

.bstep .chips { margin-top: var(--space-2); }
.bstep .chip b { font-weight: 500; }
.bstep .chip .ff { margin-left: .25rem; }
.bstep .chip .nm { font-style: normal; }
.chip:has(input:disabled) .nm { text-decoration: line-through; text-decoration-thickness: 1px; }
.ap-why { margin-top: var(--space-3); font-size: var(--fs-micro); color: var(--color-ink-2); font-family: var(--font-mono); }
.ap-rule { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-line); font-size: var(--fs-small); color: var(--color-ink-2); max-width: 62ch; }
.ap-rule b { color: var(--color-ink); font-weight: 600; }

/* ordered / Pick 7 selection: one select per position */
.ap-order { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); margin-top: var(--space-2); } /* 14rem: fits "12 — horse name" */
.ap-pos { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-brand); margin-right: .15rem; letter-spacing: 0; }
.ap-left { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-ink-2); }
.bstep .field__error { margin-top: var(--space-3); }

/* valor */
.ap-valor { max-width: 18rem; }
.ap-valor__box { position: relative; }
.ap-valor__cur { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-ink-2); pointer-events: none; }
.field.ap-valor input#valor { padding-left: 2.6rem; font-family: var(--font-mono); font-size: 1.125rem; }
.ap-valor .field__error { margin-top: 0; }

/* summary */
.slip dd { max-width: 60%; overflow-wrap: anywhere; }
.slip__todo { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-ink-2); }
.slip__state { margin-top: var(--space-5); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.slip__check { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-ink-2); }
.slip__check .lbl { margin-bottom: .2rem; }
.slip__check .num { color: var(--color-ink); font-size: 1rem; }
.slip__check p + p { margin-top: var(--space-3); }
.slip .links { margin-top: var(--space-3); }
.ap-confirm { width: 100%; margin-top: var(--space-5); text-align: center; line-height: 1.25; padding-block: .6rem; }
.slip__panel { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-ink); }
.slip__panel:focus { outline: none; }
.slip__panel h3 { font-size: 1.35rem; line-height: 1.15; }
.slip__panel p { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-ink-2); }
.slip__rg { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); font-size: var(--fs-micro); color: var(--color-ink-2); line-height: 1.5; }
.slip__rg b { font-family: var(--font-mono); color: var(--color-ink); margin-right: .25rem; }
.slip__reset { margin-top: var(--space-2); }
.slip__reset .icon { width: 1rem; height: 1rem; }

/* live mode (apostas.js): the step buttons are not needed */
.ap.is-live .ap-next { display: none; }
.ap.is-busy .slip { opacity: .75; transition: opacity .2s; }

.ap-rg { padding: var(--space-6); }
.ap-rg h2 { font-size: var(--fs-h3); line-height: 1.1; margin: 0; }
.ap-rg p { margin-top: var(--space-3); color: var(--color-ink-2); font-size: .9375rem; max-width: 62ch; }
.ap-rg .links { margin-top: var(--space-4); }

@media (max-width: 1080px) {
  .ap__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ap-opt, .ap-opts--pareos .ap-opt { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-2); }
  .ap-opts--pareos .ap-opt { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .ap-opts--pareos .ap-opt__side { grid-column: 2; }
  .ap-opt__side { text-align: left; }
  .ap-opt.is-off .ap-opt__side { max-width: none; }
  .slip { padding: var(--space-4); }
  .ap-rg { padding: var(--space-5) var(--space-4); }
}