/* "Your business": the gear, its progress ring and the drawer. Built by assets/js/business-drawer.js; never in the shipped HTML. */
.biz-gear { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-ink); background: var(--ink-2); color: var(--chalk); display: grid; place-items: center; cursor: pointer; padding: 0; }
.biz-gear:hover, .biz-gear[aria-expanded="true"] { border-color: var(--brass); }
.biz-gear svg { width: 20px; height: 20px; }
.biz-ring { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--brass) calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px); mask: radial-gradient(circle, transparent 17px, #000 18px); }
.biz-gear.is-complete .biz-ring { background: var(--verdigris-2); }
.biz-badge { position: absolute; right: -6px; bottom: -6px; font-size: 10px; line-height: 1; font-weight: 700; background: var(--brass); color: var(--brass-ink); border-radius: var(--r-pill); padding: 3px 5px; }
.biz-badge:empty { display: none; }
.nav-cta .nav-toggle { flex: none; }
@media (max-width: 430px) { .nav-cta.has-gear .btn-brass { display: none; } }

.biz-scrim { position: fixed; inset: 0; background: rgba(5, 10, 18, .55); opacity: 0; transition: opacity .2s var(--ease); z-index: 90; }
.biz-scrim.on { opacity: 1; }
.biz-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--ink-2); color: var(--chalk); border-left: 1px solid var(--line-ink);
  transform: translateX(102%); transition: transform .25s var(--ease); z-index: 100; display: flex; flex-direction: column; }
.biz-drawer.on { transform: none; }
.biz-scrim[hidden], .biz-drawer[hidden] { display: none; }
.biz-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.biz-head { display: flex; gap: .8rem; align-items: flex-start; padding: 1.1rem 1.2rem .8rem; border-bottom: 1px solid var(--line-ink); }
.biz-head h2 { font-family: var(--font-display); font-size: var(--t-md); margin: 0; line-height: 1.2; }
.biz-pill { display: inline-block; margin-left: .45rem; vertical-align: middle; font-size: var(--t-xs); font-weight: 600; padding: .1rem .55rem; border-radius: var(--r-pill); background: rgba(224, 174, 78, .18); color: var(--brass); }
.biz-x { margin-left: auto; background: none; border: 0; color: var(--chalk-2); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.biz-inner { overflow: auto; padding: 1rem 1.2rem 1.4rem; flex: 1; }
.biz-line { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: baseline; padding: .1rem .2rem .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line-ink); }
.biz-line-label { color: var(--chalk-2); font-size: var(--t-sm); }
.biz-line-val { font-family: var(--font-display); font-size: var(--t-md); color: var(--chalk); text-align: right; }
.biz-line-detail { grid-column: 1 / -1; color: var(--chalk-2); font-size: var(--t-xs); }
.biz-meter small { color: var(--chalk-2); font-size: var(--t-xs); display: block; margin-bottom: .3rem; }
.biz-bar { height: 8px; border-radius: var(--r-pill); background: var(--ink-3); overflow: hidden; margin-bottom: .9rem; }
.biz-bar span { display: block; height: 100%; background: var(--brass); }
.biz-next { background: var(--ink-3); border: 1px solid var(--brass); border-radius: var(--r-card); padding: .9rem 1rem; margin-bottom: 1rem; }
.biz-tag { font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--brass); }
.biz-next h3 { margin: .15rem 0 .2rem; font-family: var(--font-display); font-size: var(--t-base); display: flex; justify-content: space-between; gap: .5rem; }
.biz-next h3 em { font-style: normal; font-weight: 400; color: var(--chalk-2); font-size: var(--t-sm); }
.biz-next p { margin: 0 0 .7rem; color: var(--chalk-2); font-size: var(--t-sm); }
.biz-btn { display: inline-block; background: var(--brass); color: var(--brass-ink); border: 0; border-radius: var(--r-pill); padding: .6rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; }
.biz-btn:disabled { opacity: .5; cursor: progress; }
.biz-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-ink); }
.biz-row { border-bottom: 1px solid var(--line-ink); }
.biz-row-main { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 56px; padding: .6rem .2rem; background: none; border: 0; color: var(--chalk); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
div.biz-row-main { cursor: default; }
.biz-mark { width: 22px; text-align: center; color: var(--slate); }
.biz-row.is-done .biz-mark { color: var(--verdigris-2); }
.biz-label { flex: 1; }
.biz-val { color: var(--chalk-2); font-size: var(--t-sm); text-align: right; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-chev { color: var(--slate); }
.biz-row.is-locked, .biz-row.is-soon { opacity: .6; }
.biz-editor { padding: .2rem .2rem 1rem 2.1rem; }
.biz-field { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: .3rem; }
.biz-field input, .biz-field select { display: block; width: 100%; margin-top: .3rem; background: var(--ink); color: var(--chalk); border: 1px solid var(--line-ink); border-radius: 10px; padding: .7rem .8rem; font: inherit; font-weight: 400; min-height: 46px; }
.biz-field input:focus-visible, .biz-field select:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.biz-why { color: var(--chalk-2); font-size: var(--t-xs); margin: .1rem 0 .7rem; }
.biz-msg { margin: .6rem 0 0; font-size: var(--t-sm); color: var(--verdigris-2); }
.biz-msg.is-bad { color: var(--ember); }
.biz-msg:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .biz-drawer, .biz-scrim { transition: none; } }

/* The Calls tab (assets/js/calls-panel.js). Spec: docs/superpowers/specs/2026-10-06-calls-panel-design.md */
.biz-drawer.is-wide { width: min(720px, 100vw); }
.biz-tabs { display: flex; gap: 1.4rem; padding: .7rem 1.2rem 0; border-bottom: 1px solid var(--line-ink); }
.biz-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--chalk-2); font: inherit; font-weight: 600; font-size: var(--t-sm); padding: 0 0 .6rem; cursor: pointer; min-height: 40px; }
.biz-tab[aria-selected="true"] { color: var(--chalk); border-bottom-color: var(--brass); }
.biz-tab:focus-visible, .calls-row:focus-visible, .calls-back:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.calls-inner { padding: 0 0 1rem; }
.calls-day { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--slate); padding: .9rem 1.2rem .35rem; }
.calls-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: baseline; width: 100%; min-height: 56px; padding: .75rem 1.2rem; background: none; border: 0; border-bottom: 1px solid var(--line-ink); color: var(--chalk); font: inherit; text-align: left; cursor: pointer; }
.calls-row:hover { background: var(--ink-3); }
.calls-who { font-weight: 600; }
.calls-time { color: var(--chalk-2); font-size: var(--t-xs); text-align: right; white-space: nowrap; }
.calls-need { color: var(--chalk-2); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calls-chip { justify-self: end; font-size: .74rem; font-weight: 600; border-radius: var(--r-pill); padding: .15rem .6rem; white-space: nowrap; }
.calls-chip.is-booked { background: rgba(63, 167, 150, .18); color: var(--verdigris-2); }
.calls-chip.is-no_booking { background: rgba(224, 122, 95, .15); color: var(--ember); }
.calls-chip.is-emergency { background: var(--ember); color: #1b0d08; }
.calls-chip.is-demo { background: rgba(224, 174, 78, .16); color: var(--brass); }
.calls-foot, .calls-empty, .calls-note { color: var(--chalk-2); font-size: var(--t-sm); padding: .9rem 1.2rem; margin: 0; }
.calls-foot { color: var(--slate); font-size: var(--t-xs); }
.calls-back { background: none; border: 0; color: var(--chalk-2); font: inherit; font-size: var(--t-sm); padding: .8rem 1.2rem .2rem; cursor: pointer; min-height: 40px; }
.calls-detail { padding: .2rem 1.4rem 1.2rem; }
.calls-detail .calls-note { padding: .4rem 0; }
.calls-title { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; margin: .3rem 0 .25rem; }
.calls-meta { color: var(--chalk-2); font-size: var(--t-sm); margin: 0 0 .9rem; }
.calls-cards { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: .9rem; }
.biz-drawer.is-wide .calls-cards { grid-template-columns: 1fr 1fr; }
.calls-card { background: var(--ink-3); border: 1px solid var(--line-ink); border-radius: var(--r-card); padding: .75rem .9rem; }
.calls-card.is-booked { border-color: rgba(63, 167, 150, .5); }
.calls-card.is-emergency { border-color: rgba(224, 122, 95, .6); }
.calls-card.is-emergency .calls-k { color: #F2A38F; }            /* ember lightened to 4.5:1 on --ink-3 */
.calls-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--slate); margin-bottom: .35rem; }
.calls-big { font-family: var(--font-display); font-size: 1.1rem; }
.calls-actions { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.biz-btn.is-ghost { background: var(--ink-3); color: var(--chalk); border: 1px solid var(--line-ink); }
.calls-kv { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: .25rem .6rem; font-size: var(--t-sm); }
.calls-kv span:nth-child(odd) { color: var(--chalk-2); }
.calls-kv span:nth-child(even) { overflow-wrap: anywhere; }
.calls-player { margin-bottom: .9rem; }
.calls-player audio { width: 100%; }
.calls-tx { list-style: none; margin: 0; padding: .6rem 0 0; border-top: 1px solid var(--line-ink); }
.calls-turn { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: .6rem; padding: .35rem 0; font-size: var(--t-sm); line-height: 1.45; }
.calls-s { color: var(--slate); font-size: .74rem; padding-top: .15rem; }
.calls-turn.is-caller .calls-s { color: var(--brass); }
.calls-gone { color: var(--slate); font-size: var(--t-xs); margin: .8rem 0 0; }
@media (max-width: 520px) { .biz-drawer, .biz-drawer.is-wide { width: 100vw; } }

/* The API tab (assets/js/api-keys-panel.js). Spec: docs/superpowers/specs/2026-10-06-business-api-design.md */
.keys-inner { padding: 1rem 1.2rem 1.4rem; }
.keys-head { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; }
.keys-lede { margin: 0; color: var(--chalk-2); font-size: var(--t-sm); }
.keys-docs { color: var(--brass); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.keys-docs:focus-visible, .keys-revoke:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.keys-create { margin-bottom: .6rem; }
.keys-empty { color: var(--chalk-2); font-size: var(--t-sm); margin: .6rem 0; }
.keys-list { list-style: none; margin: .6rem 0 0; padding: 0; border-top: 1px solid var(--line-ink); }
.keys-row { padding: .8rem .2rem; border-bottom: 1px solid var(--line-ink); }
.keys-top { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.keys-name { font-weight: 600; overflow-wrap: anywhere; }
.keys-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs); color: var(--chalk-2); white-space: nowrap; }
.keys-meta { color: var(--chalk-2); font-size: var(--t-xs); margin-top: .15rem; }
.keys-revoke { background: none; border: 0; color: #F2A38F; font: inherit; font-size: var(--t-sm); font-weight: 600; padding: .5rem 0 0; min-height: 40px; cursor: pointer; }
.keys-ask { margin-top: .6rem; background: var(--ink-3); border: 1px solid rgba(224, 122, 95, .6); border-radius: var(--r-card); padding: .75rem .9rem; }
.keys-ask-text { margin: 0 0 .6rem; font-size: var(--t-sm); }
.keys-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.biz-btn.keys-danger { background: var(--ember); color: #1b0d08; }
.keys-fresh { background: var(--ink-3); border: 1px solid var(--brass); border-radius: var(--r-card); padding: .9rem 1rem; margin-bottom: 1rem; }
.keys-fresh-title { margin: 0 0 .6rem; font-family: var(--font-display); font-size: var(--t-base); overflow-wrap: anywhere; }
.keys-fresh-row { display: flex; gap: .5rem; align-items: stretch; }
.keys-secret { flex: 1; min-width: 0; background: var(--ink); color: var(--chalk); border: 1px solid var(--line-ink); border-radius: 10px; padding: .6rem .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs); }
.keys-secret:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.keys-warn { color: var(--brass); font-size: var(--t-sm); font-weight: 600; margin: .6rem 0 .8rem; }
.keys-form { margin-bottom: 1rem; }