/* БауБа «Стикер» — компоненты bb-*. Подключать после tokens.css и fonts.css. */

.bb{font-family:var(--font-text); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink)}
.bb-d1,.bb-d2,.bb-d3{font-family:var(--font-display); font-weight:800; line-height:var(--lh-tight); text-transform:uppercase; letter-spacing:.01em; margin:0; text-wrap:balance}
.bb-d1{font-size:var(--fs-d1)} .bb-d2{font-size:var(--fs-d2)} .bb-d3{font-size:var(--fs-d3)}
.bb-cap{font-size:var(--fs-cap); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2)}
.bb-muted{color:var(--ink-2)} .bb-small{font-size:var(--fs-small)}
.bb-num{font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em}

.bb-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:52px; padding:0 var(--sp-5); width:100%;
  font:700 var(--fs-body)/1 var(--font-text); color:var(--on-action); background:var(--action); border:var(--bw) solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--shadow-hard); cursor:pointer; transition:transform var(--dur), box-shadow var(--dur), background var(--dur)}
.bb-btn:hover{background:var(--action-press)}
.bb-btn:active,.bb-btn.is-pressed{transform:translate(var(--sh-off),var(--sh-off)); box-shadow:0 0 0 var(--shadow)}
.bb-btn:focus-visible,.bb-chipbtn:focus-visible,.bb-input:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.bb-btn--secondary{background:var(--surface); color:var(--ink)} .bb-btn--secondary:hover{background:var(--sunken)}
.bb-btn--ghost{background:transparent; color:var(--ink); border-color:transparent; box-shadow:none; text-decoration:underline; text-underline-offset:3px}
.bb-btn[disabled]{background:var(--sunken); color:var(--ink-2); border-color:var(--line-soft); box-shadow:none; cursor:not-allowed}
.bb-spin{width:16px; height:16px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:bbspin .7s linear infinite}
@keyframes bbspin{to{transform:rotate(360deg)}}

.bb-field{display:flex; flex-direction:column; gap:6px}
.bb-field label{font-size:var(--fs-small); font-weight:700}
.bb-input{min-height:50px; padding:0 var(--sp-4); font:400 var(--fs-body) var(--font-text); color:var(--ink); background:var(--surface);
  border:var(--bw) solid var(--line); border-radius:var(--r-m)}
.bb-input::placeholder{color:var(--ink-2)}
.bb-input.is-error{border-color:var(--danger); background:var(--danger-soft)}
.bb-help{font-size:var(--fs-cap); color:var(--ink-2)} .bb-help.is-error{color:var(--danger); font-weight:700}
.bb-check{display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-small)}
.bb-box{flex:none; width:24px; height:24px; border:var(--bw) solid var(--line); border-radius:7px; background:var(--surface); display:grid; place-items:center; font-weight:800; font-size:14px}
.bb-box.is-on{background:var(--yellow); color:var(--on-yellow)}

.bb-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font-size:var(--fs-cap); font-weight:700; border:var(--bw-soft) solid currentColor; white-space:nowrap}
.bb-chip--ok{color:var(--ok); background:var(--ok-soft)} .bb-chip--wait{color:var(--warn); background:var(--warn-soft)}
.bb-chip--err{color:var(--danger); background:var(--danger-soft)} .bb-chip--brand{color:var(--on-yellow); background:var(--yellow); border-color:var(--on-yellow)}
.bb-chip--neutral{color:var(--ink-2); background:var(--sunken)}
.bb-chipbtn{font:700 var(--fs-cap) var(--font-text); padding:6px 10px; border-radius:var(--r-pill); border:var(--bw-soft) solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}

.bb-card{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-l); padding:var(--sp-4)}
.bb-card--yellow{background:var(--yellow); color:var(--on-yellow)}
.bb-card--soft{border-color:var(--line-soft)}
.bb-sticker{box-shadow:var(--shadow-hard-l)}
.bb-rows{display:flex; flex-direction:column}
.bb-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3) 0; border-top:var(--bw-soft) solid var(--line-soft)}
.bb-row>span:first-child{flex:1 1 110px; min-width:0}
.bb-row b{overflow-wrap:anywhere}
.bb-row>.bb-chipbtn,.bb-row>.bb-chip{flex:none}
.bb-row:first-child{border-top:0; padding-top:0} .bb-row:last-child{padding-bottom:0}
.bb-row b{display:block; font-weight:700} .bb-row small{display:block; font-size:var(--fs-cap); color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em; font-weight:700}

.bb-steps{list-style:none; margin:0; padding:0; display:flex; gap:6px}
.bb-steps li{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; font-size:10px; font-weight:700; color:var(--ink-2); text-align:center}
.bb-steps i{height:8px; border-radius:var(--r-pill); border:var(--bw-soft) solid var(--line); background:var(--surface)}
.bb-steps .done i{background:var(--ink)} .bb-steps .now i{background:var(--yellow)} .bb-steps .now{color:var(--ink)}

.bb-checkin{display:flex; flex-direction:column; gap:var(--sp-3)}
.bb-checkin.is-net{border-style:dashed}
.bb-lockbox{padding:var(--sp-3) var(--sp-4); border:var(--bw-soft) dashed var(--line); border-radius:var(--r-m); background:var(--sunken); font-size:var(--fs-small); color:var(--ink-2); font-weight:700}
.bb-acc{border:var(--bw) solid var(--line); border-radius:var(--r-m); background:var(--surface)}
.bb-acc+.bb-acc{margin-top:calc(var(--sp-2) - var(--sp-3))}
.bb-acc summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); font-weight:700; cursor:pointer}
.bb-acc summary::-webkit-details-marker{display:none}
.bb-acc summary::after{content:"+"; font:800 18px/1 var(--font-display)} .bb-acc[open] summary::after{content:"–"}
.bb-acc summary:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-m)}
/* текст инструкции из apartments.instr_* (HTML менеджера) */
.bb-instr{padding:0 var(--sp-4) var(--sp-4); font-size:var(--fs-body); line-height:var(--lh-body)}
.bb-instr p{margin:0 0 var(--sp-2)} .bb-instr ul,.bb-instr ol{margin:0 0 var(--sp-2); padding-left:1.3em} .bb-instr li{margin:var(--sp-1) 0} .bb-instr li::marker{font-weight:800}
.bb-instr :last-child{margin-bottom:0}
.bb-instr strong,.bb-instr b{font-weight:700}
.bb-instr a{color:var(--ink); text-decoration-thickness:2px; text-underline-offset:3px}
.bb-instr img{display:block; max-width:100%; height:auto; border:var(--bw) solid var(--line); border-radius:var(--r-m); margin:var(--sp-2) 0}
/* коды внутри инструкции: менеджер оборачивает в <code> — получают стикер-плашку */
.bb-instr code{font:800 var(--fs-code)/1.4 var(--font-display); letter-spacing:.06em; background:var(--yellow); color:var(--on-yellow); border:var(--bw-soft) solid var(--line); border-radius:var(--r-s); padding:0 .4em; white-space:nowrap; font-variant-numeric:tabular-nums}
.bb-toast{display:flex; gap:var(--sp-3); align-items:center; padding:var(--sp-3) var(--sp-4); background:var(--ink); color:var(--paper); border-radius:var(--r-m); font-weight:700; font-size:var(--fs-small)}
.bb-toast .bb-dot{width:10px; height:10px; border-radius:50%; background:var(--yellow); flex:none}

/* гусь-стикер: белая вырубка + жёсткая тень. В проде контур запекается в WebP. */
.bb-goose{display:block; filter:drop-shadow(4px 4px 0 var(--shadow))}  /* белая вырубка запечена в WebP */
@media (prefers-reduced-motion:reduce){.bb-btn,.bb-spin{transition:none; animation:none}}