/* Existing booking layout, recolored by the BBB theme below. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--bg); border: 1px solid var(--line); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
code.block { display: block; padding: 10px 12px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.thin { font-weight: 400; }
.pre { white-space: pre-wrap; }
.center { text-align: center; }
.text-danger { color: var(--danger) !important; }
.text-warn { color: var(--warn); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============ Forms ============ */
label { display: block; font-weight: 600; font-size: .9rem; }
label > input, label > select, label > textarea, label > .input-prefix { margin-top: 6px; }
label > small { display: block; font-weight: 400; margin-top: 4px; }
input, select, textarea {
  display: block; font: inherit; font-weight: 400; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input[type=color] { padding: 4px; height: 42px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; flex: none; }
input[type=file] { padding: 8px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-mid); }
label.check { display: flex; flex-direction: row; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.checks legend { width: 100%; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-items: start; }
.form-grid.inner { padding: 0; border: 0; }
.form-grid h2, .form-grid h3 { margin: 8px 0 -6px; }
.span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; }
.input-prefix { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.input-prefix span { padding: 10px 0 10px 12px; color: var(--muted); font-weight: 400; white-space: nowrap; flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.input-prefix input { border: 0; border-radius: 0; padding-left: 2px; margin: 0; min-width: 0; flex: 1; }
.input-prefix + small, label > .input-prefix { margin-top: 6px; }
.input-prefix:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-mid); }
.input-prefix input:focus { box-shadow: none; }
.seg-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-radio label { display: flex; flex-direction: row; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 14px; font-weight: 500; cursor: pointer; }
.seg-radio label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: .9rem; line-height: 1.2;
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none !important;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.btn-primary:hover { border-color: var(--brand); filter: brightness(1.08); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--paper); }
.btn-danger:hover { border-color: var(--danger); filter: brightness(1.08); }
.btn-sm { padding: 6px 11px; font-size: .82rem; }
.btn-lg { padding: 13px 22px; font-size: 1rem; width: 100%; }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--paper); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-align: left; }
.link-btn:disabled { color: var(--muted); cursor: default; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.icon-btn:disabled { color: var(--line-strong); cursor: default; }

/* ============ Flash / tags ============ */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid; font-size: .92rem; }
.flash-success { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.flash-error { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.flash code { background: var(--surface); }
.banner { display: block; padding: 10px 16px; margin-bottom: 12px; border-radius: 10px; background: color-mix(in srgb, var(--yellow) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent); color: var(--text); font-size: .9rem; font-weight: 500; }
.tag { display: inline-block; font-size: .72rem; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.tag-ok { color: var(--pass-text); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-color: transparent; }
.tag-warn { color: var(--warn); background: color-mix(in srgb, var(--yellow) 14%, var(--surface)); border-color: transparent; }
.tag-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: transparent; }
.copyable { cursor: copy; }
.copyable.copied { border-color: var(--ok); }

/* ============ Avatar ============ */
.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.avatar-sm { width: 32px; height: 32px; font-size: .8rem; }
.avatar-md { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-lg { width: 88px; height: 88px; font-size: 1.6rem; }

/* ============ Public pages ============ */
body.public { min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; width: 100%; max-width: 1060px; margin: 0 auto; padding: 48px 16px; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 16px 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.card.narrow { max-width: 560px; margin: 0 auto; padding: 36px; }
.card.wide-narrow { max-width: 680px; }
body.embed { background: transparent; }
body.embed .page { padding: 8px; }
body.embed .card { box-shadow: none; }

/* Profile */
.profile { max-width: 820px; margin: 0 auto; padding: 40px 32px; }
.profile-head { text-align: center; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.profile-head .avatar { margin-bottom: 12px; }
.profile-head h1 { margin-bottom: 6px; }
.bio { max-width: 520px; margin: 0 auto; }
.event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.event-tile { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.event-tile:hover { text-decoration: none; border-color: var(--dot); box-shadow: var(--shadow); transform: translateY(-1px); }
.event-tile .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dot); margin-top: 4px; flex: none; }
.event-tile-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.event-tile-body strong { font-size: 1.05rem; }
.event-tile .desc { font-size: .88rem; color: var(--muted); }
.event-tile .chev { font-size: 1.6rem; color: var(--muted); line-height: 1; }
.empty { text-align: center; color: var(--muted); }

/* Booker */
.booker { display: grid; grid-template-columns: 300px 1fr; min-height: 560px; overflow: hidden; transition: max-width .2s; max-width: 760px; margin: 0 auto; }
.booker.has-times { max-width: 1010px; }
.booker.on-form { max-width: 860px; }
.booker-info { padding: 28px 26px; border-right: 1px solid var(--line); position: relative; }
.booker-info .avatar { margin-bottom: 10px; }
.host-name { color: var(--muted); font-weight: 600; margin: 0 0 4px; }
.booker-info h1 { font-size: 1.5rem; margin-bottom: 18px; }
.meta { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; color: var(--muted); font-weight: 600; font-size: .92rem; }
.meta li { display: flex; gap: 10px; align-items: flex-start; }
.meta li svg { margin-top: 1px; }
.meta li.chosen, .meta li.chosen-tz { color: var(--text); }
.booker-info .desc { font-size: .92rem; color: var(--text); border-top: 1px solid var(--line); padding-top: 16px; }
.notice { background: var(--brand-soft); border-radius: 10px; padding: 12px 14px; font-size: .88rem; margin-bottom: 16px; }
.back-link { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--brand); background: var(--surface); cursor: pointer; line-height: 1; padding-bottom: 3px; }
.back-link:hover { text-decoration: none; background: var(--brand-soft); }
.back-link.inline { position: static; margin-bottom: 14px; }
.booker.on-form .booker-info .back-link { display: none; }
.booker-main { padding: 28px 30px; min-width: 0; }
.booker-main h2 { font-size: 1.2rem; margin-bottom: 20px; }
.picker { display: flex; gap: 28px; }
.calendar { flex: 1; min-width: 0; max-width: 420px; }
.cal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.cal-title { font-weight: 600; min-width: 150px; text-align: center; }
.cal-head .icon-btn { background: var(--brand-soft); color: var(--brand); }
.cal-head .icon-btn:disabled { background: transparent; color: var(--line-strong); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; text-align: center; }
.cal-grid .dow { font-size: .68rem; font-weight: 600; color: var(--muted); padding-bottom: 6px; letter-spacing: .04em; }
.day { aspect-ratio: 1; max-width: 48px; width: 100%; justify-self: center; border-radius: 50%; border: 0; background: transparent; font: inherit; font-size: .95rem; color: var(--muted); position: relative; cursor: default; }
.day.avail { background: var(--brand-soft); color: var(--brand); font-weight: 700; cursor: pointer; }
.day.avail:hover { background: var(--brand-mid); }
.day.selected { background: var(--brand) !important; color: var(--paper) !important; }
.day.today::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cal-grid.is-loading .day { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.tz-row { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.tz-row label { font-weight: 600; font-size: .85rem; }
.tz-row select { margin: 0; }
.tz-select { border-color: transparent; padding-left: 0; background: transparent; font-weight: 500; cursor: pointer; }
.tz-select:hover { border-color: var(--line-strong); padding-left: 12px; }
.cal-status { margin-top: 12px; font-size: .88rem; min-height: 1.3em; }
.times { width: 230px; flex: none; display: flex; flex-direction: column; }
.times-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 16px; }
.times-date { font-weight: 500; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; flex: none; }
.seg button { border: 0; background: transparent; font: inherit; font-size: .72rem; padding: 4px 8px; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--text); color: var(--surface); }
.time-list { display: flex; flex-direction: column; gap: 10px; max-height: 430px; overflow-y: auto; padding-right: 4px; }
.time-row { display: flex; gap: 8px; }
.time-btn { flex: 1; padding: 13px 8px; border: 1px solid var(--brand-mid); border-radius: 8px; background: var(--surface); color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; transition: all .15s; }
.time-btn:hover { border-color: var(--brand); border-width: 1px; box-shadow: inset 0 0 0 1px var(--brand); }
.time-row.selected .time-btn { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }
.time-row .next-btn { flex: 1; animation: slidein .15s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateX(-6px); } }
.step-form { max-width: 460px; display: flex; flex-direction: column; gap: 16px; }
.step-form h2 { margin-bottom: 2px; }
.form-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-radius: 8px; padding: 10px 12px; font-size: .9rem; margin: 0; }

/* Confirmation */
.confirm { text-align: center; }
.status-icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--paper); }
.status-ok { background: var(--ok); }
.status-cancel { background: var(--danger); }
.summary { text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin: 24px 0; }
.summary.is-cancelled h2, .summary.is-cancelled .meta { text-decoration: line-through; opacity: .7; }
.summary-host { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.summary h2 { font-size: 1.25rem; }
.summary .meta { margin: 14px 0 0; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.manage { color: var(--muted); font-size: .92rem; margin: 0; }
.confirm form { text-align: left; }
.checklist { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: .88rem; text-align: left; }
.checklist .ok { color: var(--pass-text); }
.checklist .bad { color: var(--danger); font-weight: 600; }
.wide-narrow { text-align: left; }
.wide-narrow h2 { margin-top: 8px; margin-bottom: -4px; }

/* ============ Admin ============ */
body.admin { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 60px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-weight: 750; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 550; font-size: .9rem; white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--bg); text-decoration: none; }
.nav a.on { color: var(--brand); background: var(--brand-soft); }
.topbar-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.topbar-right form { margin: 0; }
.topbar-right .link-btn { color: var(--muted); font-size: .9rem; }
.admin-main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 80px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.panel h2 { margin-bottom: 14px; }
.panel.center { text-align: center; padding: 40px 22px; }
.panel.center .btn-lg { width: auto; }
.muted-panel summary { cursor: pointer; font-weight: 600; }
.muted-panel[open] summary { margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid-2.wide-left { grid-template-columns: 1.4fr 1fr; }
.grid-2 > .panel { margin-bottom: 0; }
.grid-2 + * { margin-top: 18px; }
.section-title { margin-top: 36px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--brand); border-bottom-color: var(--brand); }
.empty-state { text-align: center; padding: 48px 22px; }
.list { padding: 0; overflow: hidden; }
.list-day { padding: 10px 20px; background: var(--bg); font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.list-row { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--text); }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--bg); text-decoration: none; }
.list-time { width: 170px; flex: none; font-weight: 600; font-size: .9rem; }
.list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.list-tags form { margin: 0; }
.dl { display: grid; grid-template-columns: 140px 1fr; gap: 12px 16px; margin: 0 0 16px; }
.dl dt { color: var(--muted); font-size: .88rem; }
.dl dd { margin: 0; word-break: break-word; }
.share-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px; }
.event-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.event-card { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--dot); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.event-card.is-off { opacity: .6; }
.event-card h3 { margin-bottom: 2px; }
.event-card p { margin: 0; }
.event-card-top { display: flex; justify-content: space-between; gap: 10px; }
.event-card-top form { margin: 0; }
.event-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.event-card-actions form { margin: 0; }
.link-line a { color: var(--muted); }
.more { position: relative; margin-left: auto; }
.more summary { list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; min-width: 180px; display: flex; flex-direction: column; }
.more-menu form { margin: 0; }
.more-menu .link-btn { display: block; width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--text); font-size: .9rem; }
.more-menu .link-btn:hover:not(:disabled) { background: var(--bg); }
.switch { width: 42px; height: 24px; border-radius: 999px; border: 0; background: var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); transition: transform .15s; box-shadow: none; }
.switch.on { background: var(--brand); }
.switch.on span { transform: translateX(18px); }
.custom-form { margin-top: 12px; }
.new-link { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.week { display: flex; flex-direction: column; margin-bottom: 20px; }
.week-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.week-row:last-child { border-bottom: 0; }
.day-toggle { width: 80px; padding-top: 8px; }
.ranges { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.range { display: flex; align-items: center; gap: 8px; }
.range input { width: 130px; padding: 8px 10px; }
.unavailable { display: none; padding-top: 8px; }
.week-row.off .range { display: none; }
.week-row.off .unavailable { display: block; }
.override-list { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); }
.override-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.override-list form { margin: 0; }
.steps { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.cal-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.avatar-edit { display: flex; align-items: center; gap: 20px; }
.inline-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ============ Responsive ============ */
@media (max-width: 859px) {
  .page { padding: 16px 12px; }
  .booker, .booker.has-times, .booker.on-form { grid-template-columns: 1fr; max-width: 560px; }
  .booker-info { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 20px; }
  .booker-info h1 { margin-bottom: 12px; }
  .booker-info .desc { display: none; }
  .booker-main { padding: 22px 16px; }
  .picker { flex-direction: column; gap: 18px; }
  .calendar { max-width: none; }
  .times { width: 100%; }
  .time-list { max-height: none; }
  .card.narrow { padding: 26px 20px; }
  .profile { padding: 28px 16px; }
  .event-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { padding: 0 12px; gap: 12px; height: auto; flex-wrap: wrap; padding-top: 10px; }
  .nav { order: 3; width: 100%; flex: none; padding-bottom: 8px; }
  .topbar-right { margin-left: auto; }
  .admin-main { padding: 18px 12px 60px; }
  .grid-2, .grid-2.wide-left, .form-grid, .row-2 { grid-template-columns: 1fr; }
  .list-row { flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; }
  .list-time { width: auto; }
  .list-main { flex-basis: 100%; order: 2; }
  .list-tags { justify-content: flex-start; order: 3; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 10px; }
  .range input { width: 108px; }
  .day-toggle { width: 66px; }
  .checklist { grid-template-columns: 1fr; }
}

:root {
  color-scheme: light;                 /* the brand is light-only */

  /* ---------- Canvas and surfaces ---------- */
  --bg: #f4f1ea;                       /* cream canvas: page, sign-in screen */
  --nav: #f4f1ea;                      /* sidebar: same as canvas, split off by a 1.5px ink edge */
  --paper: #fffdf8;                    /* cards, panels, inputs, topbar, secondary buttons, meter track */
  --wash-lime: #e9edda;                /* running panel, selected list row, source icon tile, count pill */
  --wash-stone: #efede6;               /* scope notes, gap notice, neutral change chip, status pill */
  --wash-table: #eeece3;               /* table header, cost box, letter-scale cells */
  --wash-code: #eeece6;                /* raw evidence and JSON blocks */
  --wash-lane: #f0eee7;                /* lane label band in the findings list */
  --wash-card: #f8f7f1;                /* supporting (diagnostic) cards; open finding row */
  --wash-quiet: #eceee1;               /* explanatory "quiet" panel */
  --wash-rank: #e9eddd;                /* headline figure box */
  --wash-note: #ebece1;                /* coverage note */
  --wash-info: #e6edf3;                /* the one cool information panel */
  --wash-info-edge: #b6c2ce;
  --hover-fill: #e9e7dc;               /* hover: secondary button, nav item, Open Report */
  --hover-card: #f0f1e4;               /* hover: saved-website card summary */
  --selected-fill: #edf3d6;            /* the chosen option card */
  --disabled-fill: #eeece4;            /* disabled-but-explained controls (stay fully opaque) */
  --count-fill: #e7e7dc;               /* count pill inside a tab */
  --icon-tile-fill: #e9e7dd;           /* icon tile in a list row */
  --source-tile-bg: #e9edda;  --source-tile-icon: #315c2c;   /* 40px source icon tile, green: 6.52:1 */
  --info-tile-bg: #dfe9f4;    --info-tile-icon: #345575;     /* 40px source icon tile, blue: 6.33:1 */
  --overlay: #17171388;                /* dialog backdrop: ink at 53% */

  /* ---------- Ink and text ---------- */
  --ink: #171713;                      /* text, borders, hard shadows, dark fills. Never #000 */
  --ink-hover: #35352d;                /* primary button hover fill */
  --ink-20: #17171333;                 /* hairline above a card's footer link */
  --muted: #57574d;                    /* secondary text: 7.18:1 on paper, 6.47:1 on canvas */
  --text-on-tint: #4c4c42;             /* small text on verdict-tinted cards */
  --green: #284d25;                    /* link colour, checkbox accent in sign-in */
  --green-text: #315c2c;               /* secondary green text: completed steps, links in summaries */
  --icon-quiet: #6d6d5e;               /* icons inside Label: Value chips */

  /* ---------- Lines ---------- */
  --line: #c9c6bb;                     /* dividers and quiet card edges. Decorative only (1.68:1) */
  --field-edge: #89897d;               /* inputs, selects, textareas: 3.48:1 on paper */
  --meter-edge: #777766;               /* grade meter and radio ring: 4.48:1 */
  --option-edge: #aaa99b;              /* unselected option card */

  /* ---------- Accent and verdict swatches ---------- */
  --lime: #d7ed76;                     /* the accent; also "Good" */
  --yellow: #ffe799;                   /* "Needs Attention" / review / your action needed */
  --coral: #ffb19e;                    /* "Poor" / issue */
  --blue: #e0e8f2;                     /* "Limited Data" / information / open question */

  /* ---------- Verdict ramps: card fill / meter fill / top rule / overall panel ---------- */
  --good-card: #edf3d6;    --good-meter: #9cc246;    --good-rule: #91b83e;    --good-panel: #f0f4df;
  --warn-card: #fff3c9;    --warn-meter: #d7a92d;    --warn-rule: #d5a932;    --warn-panel: #fff4cf;
  --poor-card: #ffe1d7;    --poor-meter: #e47251;    --poor-rule: #dd674c;    --poor-panel: #ffe1d7;
  --neutral-card: #edf0f4; --neutral-meter: #a5b4c9; --neutral-rule: #9daabc; --neutral-panel: #f0f2f5;
  --default-card: #f0f2f5; --default-meter: #c8d0dc;          /* card with no tone yet */

  /* ---------- State colours: fill / text / edge ---------- */
  /* shared by badges, finding icons, change chips and map-grid cells */
  --pass-bg: #e1ecba;    --pass-text: #28401d;    --pass-edge: #bbca94;     /* 9.18:1 */
  --review-bg: #fff0bd;  --review-text: #665011;  --review-edge: #dcc578;   /* 6.78:1 */
  --issue-bg: #ffe1d7;   --issue-text: #842b20;   --issue-edge: #efb9a7;    /* 7.24:1 */
  --planned-bg: #e7e8e6; --planned-text: #52574e; --planned-edge: #c6c9c2;  /* 6.03:1 */
  --neutral-chip-text: #4a4a40;        /* on --wash-stone: 7.65:1 */
  --pill-gold-edge: #8f7632;           /* yellow count pill and priority number */
  --asking-edge: #5b7396;              /* blue "needs access" number */
  --priorities-edge: #a18d47;          /* priorities panel border ("Start here." in the app) */
  --passes-edge: #a7b781;              /* "What's working" panel and running panel border */
  --passes-icon: #3d662b;

  /* ---------- Feedback ---------- */
  --error-text: #a7482a;   --error-bg: #fff0e9;    /* 5.24:1 */
  --warning-text: #84713a;                         /* field warnings, 4.69:1 on paper */
  --success-text: #28401d; --success-bg: #e1ecba;  /* 9.18:1 */

  /* ---------- Not Measured (missing evidence). Never a verdict colour ---------- */
  --na-bg: #eef0eb;        --na-hatch: #e0e4dd;       --na-edge: #aeb4ac;
  --na-text: #555b54;      --na-text-2: #60675f;      --na-icon: #78837a;
  --na-struck: #717a71;    --na-strike: #69746b;      --na-rule: #89958c;   /* large text only */
  --na-mark: #555f57;      --na-mark-text: #d9e0d8;   --na-mark-strike: #aab5aa;
  --na-chip-bg: #e7e8e4;   --na-chip-hatch: #cbd0c9;  --na-chip-text: #4d544d;
  --na-row-bg: #f2f3ef;    --na-row-hatch: #e6e9e3;   --na-dot: #87958a;
  --na-value: #626d63;     --na-value-strike: #88958a;                      /* inline, body size */

  /* ---------- Placeholder tints (monogram tiles only). Never a verdict colour ---------- */
  --tint-clay: #edd9ce;  --tint-clay-edge: #b9a9a1;
  --tint-rose: #f0dae1;  --tint-rose-edge: #bbaab0;
  --tint-lilac: #e4daee; --tint-lilac-edge: #b2aaba;
  --tint-sky: #d9dff0;   --tint-sky-edge: #a9aebb;
  --tint-teal: #cee2e5;  --tint-teal-edge: #a1b0b3;
  --tint-mint: #cfe4d8;  --tint-mint-edge: #a1b2a8;

  /* ---------- Tier accents (plan cards; not verdicts) ---------- */
  --tier-2-stripe: #add5ed; --tier-3-stripe: #cfc0e8;   /* tier 1 stripe is --lime */
  --tier-2-icon: #dcebfa;   --tier-3-icon: #e7dff1;     /* tier 1 icon tile is --lime */

  /* ---------- Progress ---------- */
  --progress-track: #d1d0c4; --progress-fill: #496136;

  /* ---------- Type ---------- */
  --font-display: Lexend, Arial, sans-serif;            /* weight 700 only */
  --font-body: Atkinson, Arial, sans-serif;             /* Atkinson Hyperlegible, 400 only */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* one stack for all code (guide decision, see 4.1) */
  --font-export: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tracking-display: -0.035em;        /* every Lexend heading and number */
  --tracking-display-tight: -0.06em;   /* the overall grade letter only */
  --tracking-card-title: -0.025em;     /* small h3 inside grade cards */
  --tracking-eyebrow: 0.015em;
  --text-body: 17px;  --leading-body: 1.6;
  --text-control: 16px;                /* buttons, labels, tabs, nav */
  --text-secondary: 15px;              /* meta, help text, chips row */
  --text-support: 14px;                /* small, eyebrow, captions */
  --text-chip: 13px;                   /* badges and counts: the floor */
  --measure: 70ch;

  /* ---------- Spacing (see 2.7) ---------- */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; --sp-7: 16px;
  --sp-8: 20px; --sp-9: 24px; --sp-10: 28px; --sp-11: 36px; --sp-12: 50px; --sp-13: 64px;

  /* ---------- Radii ---------- */
  --radius-swatch: 3px;                /* legend swatch */
  --radius-tag: 4px;                   /* nav count pill */
  --radius-chip: 5px;                  /* badges, meters, letter-scale cells */
  --radius-control: 6px;               /* buttons, inputs, Label: Value chips */
  --radius-tile: 7px;                  /* icon tiles, diagnostic cards, map cells, brand tile */
  --radius-card: 8px;                  /* grade cards, overall grade, running panel */
  --radius-panel: 9px;                 /* panels, tier cards, saved-website cards */
  --radius-feature: 10px;              /* report card, dialog, sign-in card, what-changed panel */
  --radius-round: 999px;               /* count pills in headings */

  /* ---------- Borders ---------- */
  --border-hair: 1px;                  /* badges, dividers, swatches, table rows */
  --border: 1.5px;                     /* panels, cards, controls, chips */
  --border-strong: 2px;                /* overall grade band, skip link */

  /* ---------- Shadows (hard, zero blur) and focus ---------- */
  --shadow-primary: 3px 3px 0 var(--lime);
  --shadow-primary-hover: 4px 4px 0 var(--lime);
  --shadow-news: 3px 3px 0 var(--lime);            /* "what changed" panel */
  --shadow-nav-active: 2px 2px 0 var(--ink);
  --shadow-tier: 3px 3px 0 var(--ink);
  --shadow-report: 4px 4px 0 var(--ink);           /* 3px at 760px and below */
  --shadow-dialog: 5px 5px 0 var(--ink);           /* dialog and sign-in card */
  --focus-outline: 3px solid var(--ink);
  --focus-offset: 4px;
  --focus-halo: 0 0 0 7px var(--lime);

  /* ---------- Sizes and layers ---------- */
  --shell-sidebar: 248px;  --shell-sidebar-compact: 230px;   /* compact at 1150px and below */
  --shell-topbar: 74px;    --shell-topbar-phone: 68px;       /* phone at 760px and below */
  --content-max: 1530px;
  --tap: 44px;             /* smallest standalone target */
  --tap-control: 46px;     /* buttons, inputs, tabs */
  --tap-nav: 48px;         /* primary navigation */
  --tile-h: 56px;          --tile-max: 84px;                 /* brand tile */
  --z-overlay: 50;         --z-skip: 100;
}
/* BookingIQ components mapped to the Big Brain Biz style guide. */
@font-face{font-family:Atkinson;src:url('/assets/bbb-brand-v1/atkinson-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Lexend;src:url('/assets/bbb-brand-v1/lexend-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--brand:var(--ink)!important;--brand-soft:var(--wash-lime);--brand-mid:var(--selected-fill);--surface:var(--paper);--text:var(--ink);--line-strong:var(--field-edge);--danger:var(--error-text);--ok:var(--success-text);--warn:var(--review-text);--radius:var(--radius-panel);--shadow:var(--shadow-report);--font:var(--font-body);color-scheme:light}
html{font-size:100%;scroll-behavior:auto}body{font-family:var(--font-body);font-size:17px;line-height:1.6;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{min-width:0}h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:var(--tracking-display);color:var(--ink)}h1{font-size:clamp(30px,3vw,44px);line-height:1.2}h2{font-size:23px;line-height:1.35}h3{font-size:17px;line-height:1.4}p{max-width:70ch}a{color:var(--green)}p a,li a,.manage a,.bio a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
button,input,select,textarea,summary,label,.btn,.nav a,.tabs a{font-family:var(--font-body)}label,legend{font-size:16px;color:var(--ink);font-weight:700}.small,small{font-size:14px}.tag{font-size:13px}.muted{color:var(--muted)}code{font-family:var(--font-mono);background:var(--wash-code);border-radius:6px;word-break:normal;overflow-wrap:anywhere}
input,select,textarea{min-height:46px;border:1.5px solid var(--field-edge);border-radius:6px;background:var(--paper);color:var(--ink);font-size:16px;transition:none}input[type=checkbox],input[type=radio]{min-height:18px;width:18px;height:18px;accent-color:var(--ink)}input[type=color]{height:46px}::placeholder{color:var(--muted);opacity:1}.input-prefix{border:1.5px solid var(--field-edge);border-radius:6px}.input-prefix input{border:0}.seg-radio label{min-height:46px;border:1.5px solid var(--field-edge);border-radius:6px}.seg-radio label:has(input:checked){border-color:var(--ink);background:var(--selected-fill)}label.check{min-height:44px}
.btn,.btn-sm,.btn-lg,.button{min-height:46px;border:1.5px solid var(--ink);border-radius:6px;padding:11px 17px;font:600 16px/1.4 var(--font-body);background:var(--paper);color:var(--ink);transition:none;white-space:normal}.btn:not(:disabled):hover{background:var(--hover-fill);border-color:var(--ink);transform:none;filter:none}.btn:active{transform:none}.btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-primary)}.btn-primary:not(:disabled):hover{background:var(--ink-hover);color:var(--paper);box-shadow:var(--shadow-primary-hover);filter:none}.btn-danger{background:var(--paper);color:var(--ink);border-color:var(--ink)}.btn-danger:not(:disabled):hover{filter:none;background:var(--hover-fill)}.btn:disabled{opacity:.65}.btn.is-busy{color:var(--paper)!important;padding-right:42px}.btn.is-busy::after{right:14px;border-color:var(--paper);border-right-color:transparent}
.link-btn{min-height:44px;font-size:16px;text-decoration:underline;text-underline-offset:4px}.icon-btn,.back-link{min-width:44px;width:44px;height:44px;min-height:44px;border-radius:6px}.back-link{border:1.5px solid var(--ink)}.icon-btn:disabled{color:var(--muted);opacity:.65}.more summary{min-width:44px;min-height:44px}.more-menu{border:1.5px solid var(--ink);border-radius:9px;box-shadow:var(--shadow-tier)}.more-menu .link-btn{font-size:16px}
.card,.panel{border:1.5px solid var(--ink);border-radius:10px;background:var(--paper)}.card{box-shadow:var(--shadow-report)}.panel{box-shadow:none;border-color:var(--line);border-radius:9px}.panel.center,.empty-state{border-color:var(--ink);box-shadow:var(--shadow-report)}.page{max-width:1120px;padding:36px 24px 50px}.card.narrow{padding:28px}.foot{font-size:14px;line-height:1.6;padding:24px 16px;border-top:1.5px solid var(--line);margin-top:auto}.foot a{display:inline-flex;align-items:center;min-height:44px;padding:4px 6px;text-decoration:underline}.profile{max-width:900px;padding:36px 28px}.profile-head{border-bottom:1.5px solid var(--line)}.profile-head h1{font-size:34px}
.event-list,.event-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.event-tile{border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);padding:24px;transition:none}.event-tile:not(:disabled):hover{transform:none;border-color:var(--ink);box-shadow:var(--shadow-tier);background:var(--hover-card)}.event-tile .dot{background:var(--lime);border:1.5px solid var(--ink);border-radius:3px}.event-tile-body strong{font-family:var(--font-display);font-weight:700;letter-spacing:var(--tracking-display);font-size:19px}.event-tile .desc,.meta,.event-tile .small{font-size:15px}.avatar{background:var(--wash-stone);color:var(--ink);border:1.5px solid var(--line);font-family:var(--font-display);font-weight:700}
.booker{grid-template-columns:280px minmax(0,1fr);max-width:860px;overflow:visible;transition:none}.booker.has-times{max-width:1080px}.booker-info{padding:28px 24px;border-right:1.5px solid var(--line)}.booker-info h1{font-size:27px}.booker-main{padding:28px 24px}.booker-main h2{font-size:23px}.picker{gap:24px}.calendar{max-width:none}.cal-head{justify-content:space-between;gap:8px}.cal-title{min-width:0;font-size:17px;font-weight:700}.cal-grid{gap:4px;grid-template-columns:repeat(7,minmax(0,1fr))}.cal-grid .dow{font-size:13px;letter-spacing:0;text-transform:none}.day{border-radius:6px;font-size:16px;min-height:46px;aspect-ratio:auto;height:46px;max-width:none}.day.avail{background:var(--paper);border:1.5px solid var(--ink);color:var(--ink)}.day.avail:not(:disabled):hover{background:var(--selected-fill)}.day.selected{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink);box-shadow:2px 2px 0 var(--lime)}.cal-grid.is-loading .day{animation:none}.day.today::after{bottom:4px}.cal-status,.tz-row label{font-size:15px}.tz-select,.tz-select:hover{border:1.5px solid var(--field-edge);padding:10px 12px;background:var(--paper)}.times{width:240px}.times-head{flex-wrap:wrap;align-items:flex-start}.seg{border:1.5px solid var(--ink);border-radius:6px;overflow:visible}.seg button{font-size:14px;min-height:46px;min-width:46px}.seg button:first-child{border-radius:4px 0 0 4px}.seg button:last-child{border-radius:0 4px 4px 0}.seg button.on{background:var(--ink);color:var(--paper)}.time-list{padding:8px;gap:12px}.time-btn{min-height:46px;border:1.5px solid var(--ink);border-radius:6px;transition:none;font-size:16px}.time-btn:not(:disabled):hover{border:1.5px solid var(--ink);background:var(--hover-fill);box-shadow:none}.time-row.selected .time-btn{background:var(--selected-fill);color:var(--ink);border:1.5px solid var(--ink)}.time-row .next-btn{animation:none}.notice{background:var(--wash-stone);border:1.5px solid var(--line);border-radius:8px;font-size:15px}
.flash,.banner{font-size:16px;border-radius:8px;border:1.5px solid var(--review-edge);background:var(--review-bg);color:var(--review-text)}.flash-success{background:var(--pass-bg);border-color:var(--pass-edge);color:var(--pass-text)}.flash-error,.form-error{background:var(--error-bg);color:var(--error-text);border:1.5px solid var(--issue-edge)}.tag{border-radius:5px;border:1px solid var(--line);background:var(--wash-stone);color:var(--neutral-chip-text)}.tag-ok{background:var(--pass-bg);border-color:var(--pass-edge);color:var(--pass-text)}.tag-warn{background:var(--review-bg);border-color:var(--review-edge);color:var(--review-text)}.tag-danger{background:var(--issue-bg);border-color:var(--issue-edge);color:var(--issue-text)}.status-ok{background:var(--pass-bg);color:var(--pass-text);border:1.5px solid var(--ink)}.status-cancel{background:var(--issue-bg);color:var(--issue-text);border:1.5px solid var(--ink)}.summary{border:1.5px solid var(--line);border-radius:8px}.checklist{font-size:15px}.checklist .ok{color:var(--pass-text)}
.topbar{position:static;height:auto;min-height:94px;gap:24px;padding:20px 24px;background:var(--paper);border-bottom:1.5px solid var(--ink);flex-wrap:wrap}.brand.bbb-lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);white-space:normal;flex:none}.bbb-lockup img{display:block;width:48px;height:auto;flex:none;object-fit:contain}.bbb-lockup>span{display:flex;flex-direction:column}.bbb-lockup strong{font:700 27px/1.2 var(--font-display);letter-spacing:var(--tracking-display)}.bbb-lockup small{display:block;margin-top:3px;font:400 13px/1.6 var(--font-body);color:var(--muted)}.bbb-public-head{background:var(--paper);border-bottom:1.5px solid var(--ink);padding:20px 24px}.bbb-public-head .bbb-lockup{max-width:1072px;margin:auto}.bbb-login-brand{margin-bottom:28px}.nav{gap:8px;overflow:visible;flex-wrap:wrap;padding:4px}.nav a{display:inline-flex;align-items:center;min-height:48px;padding:10px 12px;font-size:16px;font-weight:400;border:1.5px solid transparent;border-radius:6px;color:var(--ink)}.nav a:not(:disabled):hover{background:var(--hover-fill)}.nav a.on{background:var(--lime);border-color:var(--ink);color:var(--ink);box-shadow:var(--shadow-nav-active)}.topbar-right{margin-left:auto;gap:12px}.topbar-right .link-btn{font-size:16px}.admin-main{max-width:1200px;padding:36px 24px 64px}.page-head{gap:20px;margin-bottom:24px}.tabs{gap:8px;padding-bottom:12px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}.tabs a{display:inline-flex;align-items:center;min-height:46px;border:1.5px solid var(--ink);border-radius:6px;padding:10px 16px;font-size:16px;background:var(--paper);color:var(--ink)}.tabs a.on{background:var(--lime);color:var(--ink);border-color:var(--ink);box-shadow:var(--shadow-nav-active)}.list-day{text-transform:none;letter-spacing:.015em;font-size:14px;background:var(--wash-table)}.list-time,.dl dt{font-size:15px}.list-row{min-height:48px}.event-card{border:1.5px solid var(--ink);border-top:4px solid var(--ink);border-radius:8px;padding:24px}.event-card-actions{flex-wrap:wrap}.event-card.is-off{opacity:1;background:var(--disabled-fill)}.switch{width:48px;height:46px;border-radius:6px;border:1.5px solid var(--ink);background:var(--wash-stone);transition:none}.switch span{top:12px;left:4px;width:18px;height:18px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:none;transition:none}.switch.on{background:var(--lime)}.switch.on span{transform:translateX(18px)}.grid-2,.row-2,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2.wide-left{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.range{flex-wrap:wrap}.range input{flex:1;width:auto;min-width:100px}.ranges{min-width:0}.override-list li{gap:12px;flex-wrap:wrap}.muted-panel summary{min-height:44px}.form-actions{flex-wrap:wrap}
.bbb-skip{position:absolute;left:16px;top:-100px;z-index:100;padding:10px 16px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:6px}.bbb-skip:focus{top:12px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus,select:focus,textarea:focus{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 7px var(--lime)}.input-prefix:focus-within{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 7px var(--lime)}.input-prefix input:focus{outline:none;box-shadow:none}.day:focus-visible{outline-offset:-7px;box-shadow:inset 0 0 0 4px var(--lime)}main[tabindex="-1"]:focus{outline:none}
@media(max-width:1250px){.topbar .nav{order:3;flex-basis:100%;justify-content:flex-start}.topbar-right{margin-left:auto}.topbar{gap:12px 24px}}
@media(max-width:1000px){.booker,.booker.has-times,.booker.on-form{grid-template-columns:1fr;max-width:680px}.booker-info{border-right:0;border-bottom:1.5px solid var(--line)}.booker-info .desc{display:block}.picker{flex-direction:column}.times{width:100%}.time-list{max-height:none}.times-head{align-items:center}}
@media(max-width:760px){.page{padding:24px 16px 36px}.admin-main{padding:24px 16px 50px}.topbar{padding:16px;align-items:flex-start}.nav{width:100%;padding:4px 0}.topbar-right{flex-wrap:wrap}.grid-2,.grid-2.wide-left,.form-grid,.row-2{grid-template-columns:minmax(0,1fr)}.span-2{grid-column:1}.booker-info{padding:24px 20px}.booker-main{padding:24px 16px}.card{box-shadow:3px 3px 0 var(--ink)}.profile{padding:28px 20px}.list-row{align-items:flex-start}.page-head{align-items:flex-start}.event-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:540px){.event-list{grid-template-columns:minmax(0,1fr)}.topbar-right{margin-left:0;flex-basis:100%;justify-content:space-between}.bbb-lockup strong{font-size:25px}.bbb-lockup img{width:43px}.profile-head h1{font-size:30px}.event-tile{padding:20px}.week-row{flex-direction:column;gap:6px}.ranges{width:100%}.day-toggle{width:auto;padding:0}.range input{min-width:90px}.foot{padding:20px 12px}.booker-info h1{padding-right:36px}.time-row{gap:12px}.cal-grid{column-gap:2px}.cal-head .icon-btn{width:46px;min-width:46px}}
@media(max-width:360px){.page,.admin-main{padding-inline:16px}.booker,.booker.has-times,.booker.on-form{margin-inline:-16px;border-inline:0;border-radius:0;box-shadow:none}.booker-main{padding-inline:6px}.cal-grid{width:100%;margin-inline:0;column-gap:0}.day{border-radius:3px}.booker-info{padding-inline:16px}.profile{padding-inline:16px}.card.narrow{padding:20px 16px}.event-tile{padding:16px;gap:8px}.topbar .nav{gap:4px}.nav a{padding-inline:8px}.cal-title{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}