/* UI system v1, section 4: one of each component, prefixed bf-. Every value
   comes from tokens.css. Style guide: /app/ui (admins). */

/* ---------- type helpers ---------- */
.bf-t-display,.bf-t-h1,.bf-t-h2,.bf-t-h3,.bf-money,.bf-money-xl{font-family:var(--font-display);font-weight:400;color:var(--ink);text-wrap:balance;margin:0}
.bf-t-h1{font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls)}
.bf-t-h2{font-size:var(--t-h2-size);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls)}
.bf-t-h3{font-size:var(--t-h3-size);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls)}
.bf-money{font-size:var(--t-money-size);line-height:var(--t-money-lh);letter-spacing:var(--t-money-ls);font-variant-numeric:tabular-nums}
.bf-money-xl{font-size:var(--t-money-xl-size);line-height:var(--t-money-xl-lh);letter-spacing:var(--t-money-xl-ls);font-variant-numeric:tabular-nums}
.bf-t-lead{font-size:var(--t-lead-size);line-height:var(--t-lead-lh);color:var(--ink-2);margin:0;text-wrap:pretty}
.bf-t-small{font-size:var(--t-small-size);line-height:var(--t-small-lh)}
.bf-t-caption{font-size:var(--t-caption-size);line-height:var(--t-caption-lh);color:var(--sub)}
.bf-eyebrow{font-family:var(--font-text);font-size:var(--t-eyebrow-size);line-height:var(--t-eyebrow-lh);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--sub)}
.bf-num{font-variant-numeric:tabular-nums}
.bf-sub{color:var(--sub)}

/* ---------- containers and page rhythm ---------- */
.bf-wrap{width:100%;max-width:calc(var(--w-wide) + 2 * var(--gutter-page));margin:0 auto;padding:0 var(--gutter-page);box-sizing:border-box}
.bf-wrap--text{max-width:calc(var(--w-text) + 2 * var(--gutter-page))}
.bf-page{padding:var(--s-7) 0 0;font-family:var(--font-text);font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--ink)}
.bf-page *,.bf-page *::before,.bf-page *::after{box-sizing:border-box}
.bf-group{display:flex;flex-direction:column;gap:var(--s-4)}
.bf-group+.bf-group,.bf-section+.bf-section{margin-top:var(--s-7)}
.bf-page>.bf-wrap>:last-child{margin-bottom:0}
@media (max-width:760px){.bf-page{padding-top:var(--s-6)}.bf-group{gap:var(--s-3)}}

/* ---------- page header ---------- */
.bf-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin:0 0 var(--s-6)}
.bf-pagehead-text{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.bf-pagehead .bf-greet{font-size:var(--t-small-size);color:var(--ink-2)}
.bf-pagehead .bf-t-lead{max-width:60ch}
@media (max-width:760px){.bf-pagehead{flex-direction:column;align-items:stretch;margin-bottom:var(--s-5)}}

/* ---------- card ---------- */
.bf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5);min-width:0}
.bf-card--lg{padding:var(--s-6)}
.bf-card--flush{padding:0;overflow:hidden}
.bf-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4)}
.bf-card-head .bf-t-h3{min-width:0}
.bf-card--flush .bf-card-head{padding:var(--s-5) var(--s-5) 0}
.bf-card-link{font-size:var(--t-small-size);font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.bf-card-link:hover{text-decoration:underline;text-underline-offset:3px}
.bf-divider{height:1px;background:var(--line);border:0;margin:var(--s-4) 0}
@media (max-width:760px){.bf-card,.bf-card--lg{padding:20px}.bf-card--flush{padding:0}.bf-card--flush .bf-card-head{padding:20px 20px 0}}

/* ---------- buttons ---------- */
.bf-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-5);border-radius:var(--r-pill);
  border:1px solid transparent;font-family:var(--font-text);font-size:var(--t-body-size);font-weight:600;line-height:1.1;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:background var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease),opacity var(--d-fast) var(--ease)}
.bf-btn--primary{background:var(--ink);color:#fff}
.bf-btn--primary:hover{background:#1f2a30}
.bf-btn--secondary{background:#fff;color:var(--ink);border-color:var(--line-2)}
.bf-btn--secondary:hover{border-color:var(--ink)}
.bf-btn--tertiary{min-height:44px;padding:0 var(--s-1);background:none;color:var(--ink)}
.bf-btn--tertiary:hover{text-decoration:underline;text-underline-offset:3px}
.bf-btn--danger{color:var(--coral-ink)}
.bf-btn--danger.bf-btn--secondary{border-color:var(--coral-ink)}
.bf-btn--sm{min-height:40px;padding:0 var(--s-4);font-size:var(--t-small-size)}
.bf-btn--block{display:flex;width:100%}
.bf-btn:disabled,.bf-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.bf-btn:focus-visible,.bf-focus:focus-visible{outline:none;box-shadow:var(--ring);outline-offset:2px}
.bf-btn svg{width:16px;height:16px;flex:none}
.bf-btns{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
@media (max-width:760px){.bf-btn{min-height:52px}.bf-btn--sm{min-height:44px}.bf-btns{gap:10px}}

/* ---------- status pill ---------- */
.bf-status{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--t-caption-size);font-weight:600;line-height:1;white-space:nowrap}
.bf-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.bf-status--done{background:var(--teal-soft);color:var(--teal-ink)}
.bf-status--wait{background:var(--amber-soft);color:var(--amber-ink)}
.bf-status--neutral{background:var(--paper-3);color:var(--ink-2)}
.bf-status--action{background:#fff;color:var(--coral-ink);box-shadow:inset 0 0 0 1px var(--coral-ink)}
.bf-status--plain::before{display:none}

/* ---------- inputs ---------- */
.bf-field{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.bf-field+.bf-field{margin-top:20px}
.bf-label{font-size:var(--t-small-size);font-weight:600;color:var(--ink);margin:0}
.bf-hint{font-size:var(--t-caption-size);line-height:var(--t-caption-lh);color:var(--sub);margin:0}
.bf-error{font-size:var(--t-caption-size);color:var(--coral-ink);margin:0}
.bf-input,.bf-select,.bf-textarea{width:100%;height:52px;min-height:52px;padding:0 16px;background:var(--paper-3);border:1px solid transparent;border-radius:var(--r-inner);
  font-family:var(--font-text);font-size:16px;color:var(--ink);box-shadow:none;transition:background var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.bf-textarea{height:auto;min-height:112px;padding:14px 16px;line-height:1.5;resize:vertical}
.bf-input::placeholder,.bf-textarea::placeholder{color:var(--sub)}
.bf-input:focus,.bf-select:focus,.bf-textarea:focus{outline:0;background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,20,23,.08)}
.bf-input[aria-invalid="true"]{border-color:var(--coral-ink)}
.bf-input-prefix{display:flex;align-items:center;height:52px;background:var(--paper-3);border:1px solid transparent;border-radius:var(--r-inner);padding-left:16px}
.bf-input-prefix:focus-within{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,20,23,.08)}
.bf-input-prefix span{color:var(--sub);font-size:16px;white-space:nowrap}
.bf-input-prefix .bf-input{background:transparent;border:0;box-shadow:none;padding-left:2px;height:50px;min-height:50px}
.bf-fields-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.bf-fields-2>.bf-field+.bf-field{margin-top:0}
@media (max-width:760px){.bf-fields-2{grid-template-columns:1fr;gap:16px}}

/* ---------- checkbox and toggle ---------- */
.bf-check{display:flex;align-items:flex-start;gap:var(--s-3);min-height:44px;padding:11px 0;cursor:pointer;font-size:var(--t-small-size);line-height:22px}
.bf-check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;border:1px solid var(--line-2);border-radius:var(--r-xs);background:#fff;
  display:grid;place-items:center;cursor:pointer}
.bf-check input:checked{background:var(--ink) 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='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--ink)}
.bf-check input:focus-visible{box-shadow:var(--ring)}
.bf-toggle{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;min-height:0;margin:0;padding:0;border:0;border-radius:var(--r-pill);
  background:var(--line-2);cursor:pointer;transition:background var(--d-fast) var(--ease)}
.bf-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(14,20,23,.2);transition:transform var(--d-fast) var(--ease)}
.bf-toggle:checked{background:var(--ink)}
.bf-toggle:checked::after{transform:translateX(18px)}
.bf-toggle:focus-visible{box-shadow:var(--ring)}
.bf-toggle:disabled{opacity:.4;cursor:not-allowed}
.bf-toggle-wrap{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;cursor:pointer}
a.bf-toggle-wrap{color:var(--ink);text-decoration:none}
.bf-toggle-state{font-size:var(--t-caption-size);font-weight:600;color:var(--sub)}
.bf-toggle-state.is-on{color:var(--teal-ink)}

/* ---------- segmented control and chips ---------- */
.bf-seg{display:inline-flex;gap:2px;padding:3px;background:var(--paper-3);border-radius:var(--r-pill);max-width:100%;overflow-x:auto;scrollbar-width:none}
.bf-seg::-webkit-scrollbar{display:none}
.bf-seg button,.bf-seg a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:none;
  font-family:var(--font-text);font-size:var(--t-small-size);font-weight:600;color:var(--ink-2);text-decoration:none;cursor:pointer;white-space:nowrap}
.bf-seg [aria-pressed="true"],.bf-seg [aria-current="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(14,20,23,.08)}
.bf-seg .bf-seg-n{font-weight:400;color:var(--sub)}
.bf-chips{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
.bf-chips::-webkit-scrollbar{display:none}
.bf-chip{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;
  font-size:var(--t-small-size);font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;scroll-snap-align:start;white-space:nowrap}
.bf-chip[aria-pressed="true"],.bf-chip.is-on,.bf-chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- notice ---------- */
.bf-notice{display:flex;gap:var(--s-3);align-items:flex-start;padding:14px 16px;border-radius:var(--r-inner);background:var(--paper-3);font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--ink)}
.bf-notice svg{flex:none;width:16px;height:16px;margin-top:2px}
.bf-notice-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bf-notice-body b{font-weight:600}
.bf-notice a{color:inherit;font-weight:600}
.bf-notice--success{background:var(--teal-soft);color:var(--teal-ink)}
.bf-notice--wait{background:var(--amber-soft);color:var(--amber-ink)}
.bf-notice--action{background:#fff;box-shadow:inset 0 0 0 1px var(--coral-ink);color:var(--ink)}
.bf-notice--action svg{color:var(--coral-ink)}
.bf-notice-act{flex:none;align-self:center}

/* ---------- copy field ---------- */
.bf-copy{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);background:var(--paper-3);border-radius:var(--r-inner);min-width:0}
.bf-copy-value{flex:1;min-width:0;font-family:var(--font-text);font-size:var(--t-body-size);color:var(--ink);overflow-wrap:anywhere}
.bf-copy-value--code{font-family:var(--font-display);font-size:40px;line-height:1.1;letter-spacing:.04em}
.bf-copy-value--ref{font-family:var(--font-display);font-size:32px;line-height:1.1;letter-spacing:.04em}
.bf-copy .bf-btn{flex:none}
@media (max-width:760px){.bf-copy-value--code{font-size:32px}.bf-copy-value--ref{font-size:26px}}

/* ---------- list row ---------- */
.bf-rows{list-style:none;margin:0;padding:0}
.bf-row{position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:12px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.bf-rows>li:first-child>.bf-row,.bf-rows>.bf-row:first-child{border-top:0}
a.bf-row:hover{background:var(--paper-3)}
a.bf-row:focus-visible{outline:none;box-shadow:inset var(--ring)}
.bf-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bf-row-title{font-size:var(--t-body-size);font-weight:600;line-height:1.35;overflow-wrap:normal;word-break:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bf-row-meta{font-size:var(--t-caption-size);line-height:var(--t-caption-lh);color:var(--sub);overflow:hidden;text-overflow:ellipsis}
.bf-row-side{flex:none;display:flex;align-items:center;gap:var(--s-3);text-align:right}
.bf-row-amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.bf-row-chev{flex:none;width:16px;height:16px;color:var(--sub)}
.bf-row-act{flex:none;display:flex;gap:var(--s-2)}
.bf-row .bf-status-under{display:none}
@media (max-width:760px){
  .bf-row{align-items:flex-start;padding:12px}
  .bf-row-side .bf-status{display:none}
  .bf-row .bf-status-under{display:inline-flex;margin-top:6px;align-self:flex-start}
  .bf-row-act{width:100%;margin-top:var(--s-2)}
  .bf-row--act{flex-wrap:wrap}
}

/* ---------- avatar ---------- */
.bf-avatar{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper-3);color:var(--ink);
  font-family:var(--font-display);font-size:16px;font-weight:400;line-height:1;text-transform:uppercase;position:relative}
.bf-avatar--sm{width:32px;height:32px;font-size:14px}
.bf-avatar--lg{width:72px;height:72px;font-size:26px}
.bf-avatar--empty{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--sub)}
.bf-avatar-dot{position:absolute;top:0;right:0;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px #fff}

/* ---------- stat ---------- */
.bf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow:hidden}
.bf-stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bf-stat{display:flex;flex-direction:column;gap:6px;padding:20px var(--s-5);min-width:0;color:var(--ink);text-decoration:none}
.bf-stat+.bf-stat{border-left:1px solid var(--line)}
a.bf-stat:hover{background:var(--paper-3)}
.bf-stat-cap{font-size:var(--t-caption-size);color:var(--sub);line-height:var(--t-caption-lh)}
@media (max-width:760px){
  .bf-stats,.bf-stats--3{grid-template-columns:1fr 1fr;gap:0}
  .bf-stat{padding:14px 16px;gap:4px}
  .bf-stat+.bf-stat{border-left:0}
  .bf-stat:nth-child(2n){border-left:1px solid var(--line)}
  .bf-stat:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- progress ---------- */
.bf-progress{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.bf-progress>i{display:block;height:100%;background:var(--ink);border-radius:inherit}

/* ---------- table ---------- */
.bf-table{width:100%;border-collapse:collapse;font-size:var(--t-small-size)}
.bf-table th{text-align:left;font-size:var(--t-eyebrow-size);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--sub);padding:0 16px 10px 0;border-bottom:1px solid var(--line)}
.bf-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.bf-table tr:last-child td{border-bottom:0}
.bf-table .bf-r{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.bf-table th.bf-r{padding-right:0}
.bf-dl{display:flex;flex-direction:column;margin:0}
.bf-dl>div{display:flex;justify-content:space-between;gap:var(--s-4);padding:10px 0;border-top:1px solid var(--line);font-size:var(--t-small-size)}
.bf-dl>div:first-child{border-top:0}
.bf-dl dt{color:var(--ink-2);margin:0}
.bf-dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.bf-dl .bf-dl-total dt,.bf-dl .bf-dl-total dd{font-weight:600;color:var(--ink)}
.bf-dl .bf-dl-note{display:block;font-size:var(--t-caption-size);color:var(--sub);font-weight:400}
@media (max-width:760px){
  .bf-table--stack thead{display:none}
  .bf-table--stack tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .bf-table--stack tr:last-child{border-bottom:0}
  .bf-table--stack td{display:flex;justify-content:space-between;gap:var(--s-3);padding:4px 0;border:0;text-align:right}
  .bf-table--stack td::before{content:attr(data-label);color:var(--sub);text-align:left}
}

/* ---------- accordion ---------- */
.bf-accordion{border-top:1px solid var(--line)}
.bf-accordion>details{border-bottom:1px solid var(--line)}
.bf-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;font-weight:600;cursor:pointer;list-style:none}
.bf-accordion summary::-webkit-details-marker{display:none}
.bf-accordion summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform var(--d-fast) var(--ease)}
.bf-accordion details[open] summary::after{transform:rotate(45deg)}
.bf-accordion details>div{padding:0 0 var(--s-4);font-size:var(--t-small-size);color:var(--ink-2)}

/* ---------- empty state ---------- */
.bf-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);padding:var(--s-5) 0}
.bf-empty-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper-3);color:var(--ink);margin-bottom:var(--s-2)}
.bf-empty-ic svg{width:20px;height:20px}
.bf-empty p{margin:0 0 var(--s-3);font-size:var(--t-small-size);color:var(--ink-2)}

/* ---------- menu (dropdown) ---------- */
.bf-menu{position:absolute;z-index:60;min-width:240px;padding:8px;background:#fff;border-radius:var(--r-inner);box-shadow:var(--shadow-float),0 0 0 1px rgba(14,20,23,.04);color:var(--ink)}
.bf-menu[hidden]{display:none}
.bf-menu-row{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;
  font-family:var(--font-text);font-size:var(--t-small-size);font-weight:600;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
.bf-menu-row:hover,.bf-menu-row:focus-visible{background:var(--paper-3);outline:none}
.bf-menu-row svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.bf-menu-row .bf-menu-aside{margin-left:auto;font-weight:400;color:var(--sub)}
.bf-menu-row--big{min-height:60px;align-items:flex-start;padding-top:10px;padding-bottom:10px}
.bf-menu-row--big svg{width:20px;height:20px;margin-top:1px}
.bf-menu-row--big span{display:flex;flex-direction:column;gap:2px}
.bf-menu-row--big small{font-size:var(--t-caption-size);font-weight:400;color:var(--sub)}
.bf-menu-sep{height:1px;margin:8px 4px;background:var(--line)}
.bf-menu-head{display:flex;gap:var(--s-3);align-items:center;padding:8px 12px 10px}
.bf-menu-head b{display:block;font-size:var(--t-small-size);font-weight:600}
.bf-menu-head span{display:block;font-size:var(--t-caption-size);color:var(--sub);overflow-wrap:anywhere}

/* ---------- bottom sheet ---------- */
.bf-sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.bf-sheet[hidden]{display:none}
.bf-sheet-backdrop{position:absolute;inset:0;background:rgba(14,20,23,.45);opacity:0;transition:opacity var(--d-in) var(--ease)}
.bf-sheet-panel{position:relative;width:100%;max-width:560px;max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:var(--r-card) var(--r-card) 0 0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-float);transform:translateY(100%);transition:transform var(--d-in) var(--ease)}
.bf-sheet.is-open .bf-sheet-backdrop{opacity:1}
.bf-sheet.is-open .bf-sheet-panel{transform:none}
.bf-sheet-handle{width:36px;height:4px;margin:4px auto 12px;border-radius:var(--r-pill);background:var(--line-2)}
.bf-sheet-title{margin:0 0 var(--s-3)}
.bf-sheet .bf-menu-row{min-height:52px}
@media (min-width:761px){.bf-sheet{align-items:center}.bf-sheet-panel{border-radius:var(--r-card);transform:translateY(16px);opacity:0;transition:transform var(--d-in) var(--ease),opacity var(--d-in) var(--ease)}.bf-sheet.is-open .bf-sheet-panel{opacity:1}}

/* ---------- toast ---------- */
.bf-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:90;transform:translate(-50%,8px);padding:12px 16px;background:var(--ink);color:#fff;
  border-radius:var(--r-inner);box-shadow:var(--shadow-float);font-size:var(--t-small-size);opacity:0;pointer-events:none;transition:opacity var(--d-in) var(--ease),transform var(--d-in) var(--ease)}
.bf-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- stepper (horizontal, phones vertical) ---------- */
.bf-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2);list-style:none;margin:0;padding:0}
.bf-step{display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--t-small-size);color:var(--sub);min-width:0}
.bf-step-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:var(--t-caption-size);font-weight:600;color:var(--sub);background:#fff}
.bf-step.is-done{color:var(--ink)}
.bf-step.is-done .bf-step-dot{background:var(--ink);box-shadow:none;color:#fff}
.bf-step.is-now{color:var(--ink);font-weight:600}
.bf-step.is-now .bf-step-dot{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.bf-step-desc{display:none;font-weight:400;font-size:var(--t-caption-size);color:var(--sub)}
@media (max-width:760px){
  .bf-steps{grid-template-columns:1fr;gap:0}
  .bf-step{flex-direction:row;align-items:center;gap:var(--s-3);min-height:40px;flex-wrap:wrap}
  .bf-step.is-now .bf-step-desc{display:block;flex-basis:100%;padding-left:40px;margin-top:-6px;margin-bottom:6px}
}
.bf-steps--frozen .bf-step.is-now .bf-step-dot{box-shadow:inset 0 0 0 2px var(--sub)}

/* ---------- sticky action bar (phones) ---------- */
.bf-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform var(--d-in) var(--ease)}
.bf-actionbar.is-on{transform:none}
@media (min-width:761px){.bf-actionbar{display:none}}

/* ---------- motion and focus ---------- */
@media (prefers-reduced-motion:reduce){
  .bf-btn,.bf-toggle,.bf-toggle::after,.bf-sheet-backdrop,.bf-sheet-panel,.bf-toast,.bf-actionbar,.bf-accordion summary::after{transition:none}
}
.bf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}