/* ============================================================================
   Booking pages (r2352, Oct 28 2026; redesigned Nov 4 2026, r3430). Public pages and the host's editor share this file.
   Tokens: the estate tokens (ground, surface, sunken, ink, ink-soft, line, hair, action, tint-mint), named --bk-* here so the
   host's pages, which also load calendar.css, do not collide.
   Faces: Literata for the headings and Instrument Sans for the rest, both SELF-HOSTED (public/fonts): the booking host's CSP is
   font-src 'self', so nothing here may ask another origin for a file. A metric-matched system fallback stops any jump.
   Dark: follows the device; the host pages sit inside the app layout and keep the day tokens.
   One action colour, green. Today is a dot, a chosen day is a green disc, an open day is a tint.
   ========================================================================= */

@font-face { font-family: 'Literata'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/literata-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/literata-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans Fallback'; font-weight: 400 500; src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans'), local('Arimo'); size-adjust: 97%; ascent-override: 100%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Sans Fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Roboto Bold'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 101%; ascent-override: 96%; descent-override: 24.7%; line-gap-override: 0%; }
@font-face { font-family: 'Literata Fallback'; font-weight: 400 700; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'); size-adjust: 117%; ascent-override: 98.6%; descent-override: 25.4%; line-gap-override: 0%; }

:root {
    --bk-bg:        #FAF8F3;
    --bk-surface:   #FFFFFF;
    --bk-sunken:    #F0EDE3;
    --bk-ink:       #0F1F17;
    --bk-muted:     #4A5C52;
    --bk-faint:     #5A6B61;
    --bk-line:      #6F7B74;
    --bk-line-soft: rgba(15, 31, 23, 0.12);
    --bk-action:    #0A7B3D;
    --bk-action-hv: #166534;
    --bk-action-ink: #0A6B35;
    --bk-on-action: #FFFFFF;
    --bk-gold:      #96631A;
    --bk-tint:      #EAF7EE;
    --bk-bad-bg:    #FDECEA;
    --bk-bad-ink:   #B42318;
    --bk-ok-bg:     #EAF7EE;
    --bk-ok-ink:    #0A6B35;
    --bk-warn-bg:   #FBF1DC;
    --bk-warn-ink:  #7A4F0E;
    --bk-radius:    24px;
    --bk-shadow:    0 1px 2px rgba(15, 31, 23, 0.05), 0 18px 44px -16px rgba(15, 31, 23, 0.16);
    --bk-serif:     'Literata', 'Literata Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --bk-sans:      'Instrument Sans', 'Instrument Sans Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bk-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
    --bk-caret:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5C52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

/* The public pages follow the device. The host's pages sit inside the app layout and keep the day tokens. */
@media (prefers-color-scheme: dark) {
    .bk-body:not([data-theme="light"]) {
        --bk-bg:        #0B1510;
        --bk-surface:   #14221A;
        --bk-sunken:    #101C15;
        --bk-ink:       #F8F5EC;
        --bk-muted:     #B9C6BD;
        --bk-faint:     #9DB0A5;
        --bk-line:      #7E9487;
        --bk-line-soft: rgba(248, 245, 236, 0.14);
        --bk-action:    #34D399;
        --bk-action-hv: #6EE7B7;
        --bk-action-ink: #6EE7B7;
        --bk-on-action: #0B1510;
        --bk-gold:      #F2B84B;
        --bk-tint:      rgba(52, 211, 153, 0.12);
        --bk-bad-bg:    rgba(255, 156, 143, 0.12);
        --bk-bad-ink:   #FF9C8F;
        --bk-ok-bg:     rgba(52, 211, 153, 0.12);
        --bk-ok-ink:    #6EE7B7;
        --bk-warn-bg:   rgba(242, 184, 75, 0.12);
        --bk-warn-ink:  #F2B84B;
        --bk-shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px -16px rgba(0, 0, 0, 0.6);
        --bk-caret:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9C6BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
        color-scheme: dark;
    }
}
:root[data-theme="dark"], :root[data-theme="night"] {
    --bk-bg: #0B1510; --bk-surface: #14221A; --bk-sunken: #101C15; --bk-ink: #F8F5EC; --bk-muted: #B9C6BD; --bk-faint: #9DB0A5;
    --bk-line: #7E9487; --bk-line-soft: rgba(248, 245, 236, 0.14); --bk-action: #34D399; --bk-action-hv: #6EE7B7; --bk-action-ink: #6EE7B7;
    --bk-on-action: #0B1510; --bk-gold: #F2B84B; --bk-tint: rgba(52, 211, 153, 0.12);
    --bk-bad-bg: rgba(255, 156, 143, 0.12); --bk-bad-ink: #FF9C8F; --bk-ok-bg: rgba(52, 211, 153, 0.12); --bk-ok-ink: #6EE7B7;
    --bk-warn-bg: rgba(242, 184, 75, 0.12); --bk-warn-ink: #F2B84B; --bk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px -16px rgba(0, 0, 0, 0.6);
}

.bk-body { margin: 0; background: var(--bk-bg); color: var(--bk-ink); font-family: var(--bk-sans); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
.bk-body.book-embed { background: transparent; }
.bk-body ::selection { background: var(--bk-action); color: var(--bk-on-action); }

.bk { max-width: 1040px; margin: 0 auto; padding: clamp(24px, 7vh, 88px) 16px 56px; }
.book-embed .bk { padding: 12px 8px 20px; }
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk a { color: var(--bk-action-ink); }
.bk :focus-visible { outline: 3px solid var(--bk-action); outline-offset: 3px; border-radius: 8px; }
.bk [hidden] { display: none !important; }

.bk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.bk-by { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--bk-muted); }
.bk-by a { color: var(--bk-muted); text-decoration: none; font-weight: 600; }
.bk-by a:hover { color: var(--bk-ink); }
.book-embed .bk-by { display: none; }

.bk-card { background: var(--bk-surface); border: 1px solid var(--bk-line-soft); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow); overflow: hidden; }
.book-embed .bk-card { box-shadow: none; }

.bk-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .bk-split { grid-template-columns: 320px minmax(0, 1fr); } }
/* A day is picked: the times sit in a third column where it is wide enough, and under the calendar where it is not. */
@media (min-width: 900px) and (max-width: 1099.98px) { .bk-split--wide .bk-times-col { grid-column: 1 / -1; border-top: 1px solid var(--bk-line-soft); } }
@media (min-width: 1100px) {
    .bk--wide { max-width: 1220px; }
    .bk-split--wide { grid-template-columns: 320px minmax(0, 1fr) 340px; }
    .bk-split--wide .bk-times-col { border-left: 1px solid var(--bk-line-soft); }
}

.bk-side { padding: 32px 28px; border-bottom: 1px solid var(--bk-line-soft); }
@media (min-width: 900px) { .bk-side { border-bottom: 0; border-right: 1px solid var(--bk-line-soft); } }
.bk-main { padding: 32px 28px; min-width: 0; }
@media (max-width: 899.98px) { .bk-side { padding: 24px 20px 20px; } .bk-main { padding: 22px 20px 26px; } }

/* The host leads: a round initial, then the name. The name is the line the page opens on (r3396). */
.bk-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--bk-ink); }
.bk-kicker[data-initial]::before {
    content: attr(data-initial); flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; background: var(--bk-tint); color: var(--bk-action-ink); font-size: 15px; font-weight: 700;
}
.bk-title { margin: 0 0 12px; font-family: var(--bk-serif); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.bk-h2 { margin: 0 0 14px; font-family: var(--bk-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.bk-lede { margin: 0 0 14px; color: var(--bk-muted); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.bk-facts { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--bk-line-soft); display: grid; gap: 12px; color: var(--bk-ink); font-size: 15px; }
.bk-facts + .bk-facts { margin-top: 12px; padding-top: 0; border-top: 0; }
.bk-facts li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); column-gap: 10px; align-items: baseline; text-wrap: pretty; }
.bk-facts strong { color: var(--bk-muted); font-weight: 500; font-size: 14px; }

/* Month ------------------------------------------------------------------ */
.bk-step { margin: 0 0 14px; font-family: var(--bk-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.bk-monthbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -6px 8px; }
.bk-month { margin: 0; font-family: var(--bk-sans); font-weight: 600; font-size: 16px; letter-spacing: 0; }
.bk-nav {
    display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; text-decoration: none; color: var(--bk-ink) !important; font-size: 26px; line-height: 1;
    transition: background-color 140ms var(--bk-ease);
}
.bk-nav:hover { background: var(--bk-sunken); }
.bk-nav[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.bk-dow, .bk-weekrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-dow { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--bk-muted); text-align: center; }
.bk-weekrow { margin-bottom: 4px; }
.bk-day { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 50%; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--bk-muted); text-decoration: none; }
.bk-day--on { background: var(--bk-tint); color: var(--bk-action-ink) !important; font-weight: 600; border: 1.5px solid color-mix(in srgb, var(--bk-action) 32%, transparent); transition: border-color 120ms var(--bk-ease); }
.bk-day--on:hover { border-color: var(--bk-action); }
.bk-day--sel:hover { border-color: var(--bk-action); }
.bk-day--sel { background: var(--bk-action); border-color: var(--bk-action); color: var(--bk-on-action) !important; }
.bk-day--today::after { content: ""; position: absolute; bottom: 7px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--bk-gold); }
.bk-day--sel.bk-day--today::after { background: var(--bk-on-action); }
.bk-day--pad { visibility: hidden; }
.bk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 14px 0 0; font-size: 14px; color: var(--bk-muted); }
.bk-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.bk-legend-key { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bk-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bk-action) 32%, transparent); }
.bk-legend-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bk-gold); }

/* Time zone + lengths ---------------------------------------------------- */
.bk-tools { display: grid; gap: 10px; margin: 0 0 18px; }
.bk-tzform { margin: 0 0 18px; }
.bk-tzrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.bk-tools .bk-tzrow label { margin: 0; font-weight: 500; }
.bk-tzrow .bk-select { flex: 1 1 200px; width: auto; min-width: 0; max-width: 100%; min-height: 44px; padding-top: 8px; padding-bottom: 8px; border-width: 1px; border-color: var(--bk-line-soft); background-color: var(--bk-sunken); font-size: 15px; font-weight: 600; }
.bk-tzrow .bk-select:hover { border-color: var(--bk-line); }
.bk-tzhint { margin: 2px 0 0; font-size: 14px; color: var(--bk-muted); }
.bk-tzhint a { font-weight: 600; }
.bk-tools label { display: block; font-size: 14px; font-weight: 600; color: var(--bk-muted); margin-bottom: 6px; }
.bk-select, .bk-input, .bk-textarea {
    width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--bk-line); border-radius: 12px;
    background: var(--bk-surface); color: var(--bk-ink); font: inherit; font-size: 16px;
    transition: border-color 140ms var(--bk-ease);
}
.bk-select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: var(--bk-caret); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.bk-textarea { min-height: 96px; resize: vertical; }
.bk-select:hover, .bk-input:hover, .bk-textarea:hover { border-color: var(--bk-ink); }
.bk-input[aria-invalid="true"], .bk-select[aria-invalid="true"], .bk-textarea[aria-invalid="true"] { border-color: var(--bk-bad-ink); background-color: var(--bk-bad-bg); }
.bk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--bk-line); border-radius: 999px; text-decoration: none; color: var(--bk-ink) !important; font-weight: 600; transition: background-color 140ms var(--bk-ease); }
.bk-pill:hover { background: var(--bk-sunken); }
.bk-pill[aria-current="true"] { background: var(--bk-action); color: var(--bk-on-action) !important; border-color: var(--bk-action); }

/* Times: one column of pills that scrolls inside its own column, as the calendar apps do. ---- */
.bk-slots-h { margin: 0 0 2px; font-size: 16px; font-weight: 600; color: var(--bk-ink); }
.bk-times-col { scroll-margin-top: 12px; }
.bk-part { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--bk-muted); }
.bk-tzline + .bk-part { margin-top: 0; }
.bk-tzline { margin: 0 0 16px; font-size: 14px; color: var(--bk-muted); }
.bk-tzline span { white-space: nowrap; }
.bk-tzline strong { color: var(--bk-ink); font-weight: 600; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.bk-slot, .bk-slot-btn {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 12px;
    border: 1.5px solid var(--bk-action); border-radius: 999px; background: transparent; color: var(--bk-action-ink) !important;
    font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
    transition: background-color 140ms var(--bk-ease), color 140ms var(--bk-ease);
}
.bk-slot:hover, .bk-slot-btn:hover { background: var(--bk-action); color: var(--bk-on-action) !important; }
/* Wide screens: the times sit two across in their own column and the page scrolls, not a box inside it (Nov 11 2026). */
@media (min-width: 1100px) {
    .bk-times-col .bk-slots { grid-template-columns: 1fr 1fr; }
}
.bk-empty { margin: 14px 0 0; padding: 16px; border-radius: 12px; background: var(--bk-sunken); color: var(--bk-ink); }
.bk-empty a { font-weight: 600; white-space: nowrap; }

/* Forms and buttons ------------------------------------------------------- */
.bk-field { margin: 0 0 18px; }
.bk-field label, .bk-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--bk-muted); }
.bk-hint { margin: 6px 0 0; font-size: 14px; color: var(--bk-muted); }
.bk-err { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--bk-bad-ink); }
.bk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bk-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
    border: 1.5px solid var(--bk-action); border-radius: 999px; background: var(--bk-action); color: var(--bk-on-action) !important;
    font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color 140ms var(--bk-ease), border-color 140ms var(--bk-ease);
}
.bk-btn:hover { background: var(--bk-action-hv); border-color: var(--bk-action-hv); }
.bk-btn--ghost { background: transparent; color: var(--bk-ink) !important; border-color: var(--bk-line); }
.bk-btn--ghost:hover { background: var(--bk-sunken); border-color: var(--bk-ink); }
.bk-btn--danger { background: transparent; border-color: var(--bk-bad-ink); color: var(--bk-bad-ink) !important; }
.bk-btn--danger:hover { background: var(--bk-bad-bg); border-color: var(--bk-bad-ink); }
.bk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .bk-btn:active, .bk-slot:active, .bk-pill:active { transform: scale(0.97); transition-duration: 90ms; }
}
@media (prefers-reduced-motion: reduce) { .bk * { transition-duration: 0.01ms !important; } }

.bk-flash { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid transparent; font-weight: 600; }
.bk-flash--ok { background: var(--bk-ok-bg); color: var(--bk-ok-ink); border-color: color-mix(in srgb, var(--bk-ok-ink) 40%, transparent); }
.bk-flash--bad { background: var(--bk-bad-bg); color: var(--bk-bad-ink); border-color: color-mix(in srgb, var(--bk-bad-ink) 40%, transparent); }
.bk-flash--warn { background: var(--bk-warn-bg); color: var(--bk-warn-ink); border-color: color-mix(in srgb, var(--bk-warn-ink) 40%, transparent); }
.bk-errors { margin: 0 0 16px; padding: 12px 16px 12px 18px; border: 1.5px solid color-mix(in srgb, var(--bk-bad-ink) 50%, transparent); border-radius: 12px; background: var(--bk-bad-bg); color: var(--bk-bad-ink); }
.bk-errors p { margin: 0 0 4px; font-weight: 700; } .bk-errors ul { margin: 0; padding-left: 18px; } .bk-errors a { color: inherit; }

.bk-note { margin: 18px 0 0; font-size: 14px; color: var(--bk-muted); }
.bk-privacy { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--bk-muted); }
.bk-foot { margin: 2px 0 0; font-size: 13px; color: var(--bk-muted); text-align: center; text-wrap: balance; }
.bk-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; }
/* A finger needs 44px: on a phone the two footer links are boxes of that size, not a line of text. */
@media (max-width: 720px) {
    .bk-foot a, .bk-by a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; margin-left: 0; }
}
.bk-status { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--bk-ok-bg); color: var(--bk-ok-ink); border: 1.5px solid color-mix(in srgb, var(--bk-ok-ink) 40%, transparent); }
.bk-status--pending { background: var(--bk-warn-bg); color: var(--bk-warn-ink); border-color: color-mix(in srgb, var(--bk-warn-ink) 40%, transparent); }
.bk-status--off { background: var(--bk-sunken); color: var(--bk-muted); border-color: var(--bk-line-soft); }

.bk-lost { max-width: 560px; margin: 24px auto 0; padding: 36px 32px; text-align: left; }
.bk-lost .bk-title { margin-bottom: 10px; }
.bk-lost p { margin: 0 0 12px; color: var(--bk-muted); }
.bk-lost .bk-actions { margin-top: 20px; }

/* Host list --------------------------------------------------------------- */
.bk-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bk-type { display: block; padding: 18px 20px; border: 1.5px solid var(--bk-line-soft); border-radius: 16px; text-decoration: none; color: var(--bk-ink) !important; background: var(--bk-surface); transition: border-color 140ms var(--bk-ease), background-color 140ms var(--bk-ease); }
.bk-type:hover { border-color: var(--bk-action); background: var(--bk-tint); }
.bk-type strong { display: block; font-family: var(--bk-serif); font-size: 18px; font-weight: 600; }
.bk-type span { color: var(--bk-muted); font-size: 15px; }

/* Host pages ---------------------------------------------------------------- */
.bk-host { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; color: var(--bk-ink); }
.bk-host * { box-sizing: border-box; }
.bk-host a { color: var(--bk-action); }
.bk-sec { margin: 0 0 28px; }
.bk-sec h2 { margin: 0 0 10px; font-size: 20px; }
.bk-row { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--bk-line-soft); border-radius: 12px; background: var(--bk-surface); margin-bottom: 10px; }
@media (min-width: 720px) { .bk-row { grid-template-columns: 1fr auto; align-items: center; } }
.bk-row strong { font-size: 17px; }
.bk-row .bk-sub { color: var(--bk-muted); font-size: 14px; }
.bk-code { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--bk-line); border-radius: 10px; background: var(--bk-sunken); color: var(--bk-ink); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.bk-grid2 { display: grid; gap: 16px; }
@media (min-width: 720px) { .bk-grid2 { grid-template-columns: 1fr 1fr; } }
.bk-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.bk-check input { width: 24px; height: 24px; margin-top: 8px; accent-color: var(--bk-action); flex: none; }
.bk-check label { margin: 0; padding-top: 8px; }
.bk-hours { display: grid; gap: 8px; }
.bk-hourrow { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; border: 1px solid var(--bk-line-soft); border-radius: 10px; background: var(--bk-surface); }
@media (min-width: 720px) { .bk-hourrow { grid-template-columns: 170px 1fr 1fr; align-items: center; } .bk-hourrow--ov { grid-template-columns: 190px 170px 1fr; } }
.bk-times { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-times .bk-input { width: 148px; }
.bk-times span { color: var(--bk-muted); }

/* Small screens and tap size ---------------------------------------------- */
.bk-by a, .bk-facts a, .bk-host p > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
@media (max-width: 520px) {
    .bk-tzrow { display: block; }
    .bk-tools .bk-tzrow label { margin-bottom: 6px; }
    .bk-tzrow .bk-select { display: block; width: 100%; }
    .bk-main, .bk-side { padding: 16px; }
    .bk-dow, .bk-weekrow { gap: 2px; }
    .bk-title { font-size: 26px; }
}
.bk-host .bk-sub a { display: inline-block; padding: 12px 0; word-break: break-all; }
.bk-host summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.bk-host details.bk-sec { margin: -4px 0 18px; }