/* bl-onboard.css - "What are you studying?" (includes/account/onboard.php, assets/js/bl-onboard.js), in the plan
   finder's language (plus.php .pl-pf): a card, chips, one button, a quiet skip. Two kinds of chip, told apart:
   a toggle chip (choose several) has a square that fills with a tick; a radio chip (choose one) has a round dot.
   Both say "chosen" with the study tint, a 2px ring and bold text, never colour alone. */
.ob-step{display:none}
.ob-on .ob-step{display:block;margin:0 0 22px}
.ob{background:var(--surface);border-radius:var(--r3,20px);box-shadow:var(--shadow);padding:22px 24px}
.ob-h{margin:0 0 4px;font:600 clamp(20px,2.2vw,24px)/1.2 var(--f-display);color:var(--ink)}
h3.ob-h{font-size:19px}
/* the editor in My subjects sits inside its section's card: flat */
.ob[data-ob="edit"]{background:none;box-shadow:none;padding:0 0 18px;margin:0 0 18px;border-radius:0;border-bottom:2px solid var(--rule)}
.ob-sub{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;line-height:1.5;max-width:60ch;text-wrap:balance}
.ob-fs{border:0;margin:0 0 16px;padding:0;min-width:0}
.ob-fs legend{padding:0;margin:0 0 10px;font:600 17px/1.3 var(--f-display);color:var(--ink);text-wrap:balance}
.ob-more[hidden],.ob-board[hidden],.ob-bh[hidden]{display:none}
.ob-more{margin:0 0 4px}   /* a follow-up opens right under the answer it belongs to (no left bar: house rule) */
.ob .ob-chips{display:flex;flex-wrap:wrap;gap:10px}
.ob .ob-chips-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
@media (max-width:600px){.ob .ob-chips-2{grid-template-columns:1fr}}
.ob .ob-chip{position:relative;display:inline-flex;cursor:pointer;min-width:0}
.ob .ob-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ob .ob-chip > span{margin:0;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:12px;background:var(--seg-track,var(--sunk));color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.25;box-shadow:inset 0 0 0 2px transparent;transition:background-color .15s,box-shadow .15s}
.ob .ob-chip > span::before{content:'';flex:none;width:16px;height:16px;box-shadow:inset 0 0 0 2px var(--ink-3);background:transparent}
.ob .ob-tog > span::before{border-radius:5px}
.ob .ob-rad > span::before{border-radius:50%}
.ob .ob-chip input:checked + span{background:var(--study-tint);color:var(--study-ink);font-weight:700;box-shadow:inset 0 0 0 2px var(--study)}
.ob .ob-tog input:checked + span::before{box-shadow:none;background:var(--study) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ob .ob-rad input:checked + span::before{box-shadow:inset 0 0 0 2px var(--study),inset 0 0 0 5px var(--study-tint);background:var(--study)}
.ob .ob-chip input:focus-visible + span{outline:3px solid var(--study-ink);outline-offset:2px}
.ob .ob-chip:hover > span{box-shadow:inset 0 0 0 2px var(--rule-2)}
.ob .ob-chip input:checked:hover + span{box-shadow:inset 0 0 0 2px var(--study)}
.ob .ob-rad-2{display:flex}
.ob .ob-rad-2 > span{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;align-items:start;width:100%;padding:12px 16px;box-sizing:border-box}
.ob .ob-rad-2 > span::before{grid-row:1 / span 2;margin-top:3px}
.ob .ob-rad-2 b{font:600 16.5px/1.3 var(--f-display)}
.ob .ob-rad-2 small{grid-column:2;font-weight:500;font-size:14.5px;line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.ob-help{margin:10px 0 0;color:var(--ink-3);font-size:14.5px;text-wrap:pretty}
.ob-boards{margin:0 0 14px}
.ob-bh{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--ink-3)}
.ob-board{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.ob-bl{min-width:8.5em;font-weight:600;color:var(--ink-2);font-size:15px}
.ob-board .ob-chip > span{min-height:40px;padding:0 13px;font-size:15px}
.ob-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:6px 0 0}
/* Done: the house button; unavailable it stays readable (a plain sunk chip with ink text, not faded teal) */
.ob-done{min-height:48px;min-width:120px;padding:0 22px;border:0;border-radius:14px;background:var(--study-btn);color:var(--on-study-btn);font:700 16.5px/1 var(--f-body);box-shadow:0 4px 0 var(--study-btn-lip);cursor:pointer}
.ob-done:hover{background:var(--study-btn-hover)}
.ob-done:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px}
.ob-done[disabled]{background:var(--sunk);color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--rule-2);cursor:default}
.ob-skip{min-height:44px;padding:0;border:0;background:none;color:var(--study-ink);font:700 15px/1 var(--f-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.ob-msg{color:var(--ink-2);font-weight:600;outline:none}
.ob.is-done > :not(.ob-acts),.ob.is-done .ob-done,.ob.is-done .ob-skip{display:none}
.ob.is-done .ob-msg{color:var(--ink)}
@media (max-width:600px){.ob{padding:18px 16px}.ob-bl{min-width:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.ob-chip > span{transition:none}}