/* Build Your Own Bowl - the picker's second mode.
   Radios and checkboxes stay real inputs; everything here is presentation, so
   keyboard, screen readers and no-CSS all keep working. */

.modes{display:flex;gap:8px;border-bottom:2px solid #e6e8ea;margin:0 0 28px}
.mode{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  margin-bottom:-2px;padding:12px 18px;font:700 15px/1 var(--display,inherit);
  letter-spacing:.04em;text-transform:uppercase;color:#5d6166;cursor:pointer}
.mode:hover{color:var(--ink)}
.mode.on{color:var(--red);border-bottom-color:var(--red)}

.byob{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}

.steps fieldset{border:0;padding:0;margin:0 0 30px}
.steps legend{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0;
  font:700 19px/1.2 var(--display,inherit);color:var(--ink)}
.steps legend em{font:400 14px/1 inherit;color:#5d6166;text-transform:none;letter-spacing:0}
.steps legend .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--red);color:#fff;font-size:14px;flex:none}

.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

.opt{display:flex;flex-direction:column;gap:6px;padding:10px;border:2px solid #e6e8ea;
  border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,transform .15s}
.opt:hover{border-color:#c9ccd0;transform:translateY(-2px)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .shot{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#f3f4f5}
.opt .shot img{width:100%;height:100%;object-fit:cover}
.opt .t{font-weight:700;font-size:14px;line-height:1.25;color:var(--ink)}
.opt .m{font-size:12px;color:#5d6166}
.opt .m b{color:var(--red)}
/* the checked state has a border AND a check mark, so it never relies on colour alone */
.opt:has(input:checked){border-color:var(--red);background:#fff6f6}
.opt:has(input:checked) .t::after{content:" \\2713";color:var(--red)}
.opt:has(input:focus-visible){outline:3px solid var(--red);outline-offset:3px}

.tally{position:sticky;top:20px;border:2px solid var(--ink);border-radius:14px;padding:22px;background:#fff}
.tally h3{margin:0 0 14px;font:700 13px/1 var(--display,inherit);letter-spacing:.12em;
  text-transform:uppercase;color:#5d6166}
.tally .big{margin:0 0 12px;font:700 34px/1 var(--display,inherit);color:var(--ink)}
.tally .big span{display:block;margin-top:4px;font:400 12px/1.4 inherit;color:#5d6166}
.tally .words{margin:0 0 14px;padding-top:14px;border-top:1px solid #e6e8ea;
  font-size:14px;line-height:1.5;color:var(--ink)}
.tally .fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:#5d6166}
.tally .empty{margin:0;font-size:14px;color:#5d6166}
.tally .btn{display:block;text-align:center}

@media (max-width:860px){
  .byob{grid-template-columns:1fr}
  .tally{position:static}
}
@media (prefers-reduced-motion: reduce){
  .opt:hover{transform:none}
}