/* Kennel Kiwi's own styles, beside the template's app.css. */

/* ── The brand (docs/brand/README.md) ───────────────────────────────────────────────────────────
   Inter for everything (Tabler already asks for it first), Poppins for page titles; both served
   from here (the security policy allows fonts from 'self' only). Latin-ext has the macrons. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("vendor/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("vendor/fonts/poppins-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("vendor/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
.page-title { font-family: "Poppins", var(--tblr-font-sans-serif); font-weight: 600; }

/* Forest is the brand colour (app/identity.py sets --tblr-primary and --app-brand to it); Tabler
   takes links, focus rings and tints from its own blue unless the rest of the family is set too. */
:root:not([data-bs-theme="dark"]), [data-bs-theme="light"] {
  --kk-forest: #1F4D3A; --kk-sage: #7FB28D; --kk-mint: #DDECDD; --kk-sand: #F8F6EF; --kk-charcoal: #2C3A33;
  --tblr-primary-rgb: 31, 77, 58;
  --tblr-primary-darken: #193f30;
  --tblr-primary-lt: var(--kk-mint); --tblr-primary-lt-rgb: 221, 236, 221;
  --tblr-primary-bg-subtle: var(--kk-mint);
  --tblr-primary-border-subtle: #b9d4bf;
  --tblr-primary-text-emphasis: #163a2b;
  --tblr-link-color: var(--kk-forest); --tblr-link-color-rgb: 31, 77, 58;
  --tblr-link-hover-color: #163a2b; --tblr-link-hover-color-rgb: 22, 58, 43;
  --tblr-body-bg: var(--kk-sand); --tblr-body-bg-rgb: 248, 246, 239;
  --tblr-body-color: var(--kk-charcoal); --tblr-body-color-rgb: 44, 58, 51;
}
/* Forest all but disappears on a dark background: Sage there, with dark words on its buttons. */
[data-bs-theme="dark"] {
  --app-brand: #7FB28D; --tblr-primary: #7FB28D; --tblr-primary-rgb: 127, 178, 141;
  --tblr-primary-darken: #6c9d79;
  --tblr-primary-lt: #1d2c25; --tblr-primary-lt-rgb: 29, 44, 37;
  --tblr-primary-fg: #12251c;
  --tblr-primary-bg-subtle: #1d2c25;
  --tblr-primary-border-subtle: #3c5a46;
  --tblr-primary-text-emphasis: #b5d4bd;
  --tblr-link-color: #7FB28D; --tblr-link-color-rgb: 127, 178, 141;
  --tblr-link-hover-color: #a3c9ad; --tblr-link-hover-color-rgb: 163, 201, 173;
}
[data-bs-theme="dark"] .btn-primary { --tblr-btn-color: #12251c; --tblr-btn-hover-color: #12251c; --tblr-btn-active-color: #12251c; }

/* A box with the cursor in it: Tabler's border there is a fixed blue (its glow follows the brand). */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: color-mix(in srgb, var(--tblr-primary) 55%, var(--tblr-bg-forms, #fff)); }

/* A button that looks like a link (a service's name in Setup): Tabler gives it a fixed blue too. */
.btn-link { color: var(--tblr-link-color); }
.btn-link:hover, .btn-link:focus-visible { color: var(--tblr-link-hover-color); }

/* [‹ Today ›] on the board and Takings: Mint, with the day you're on in Forest (28 Oct). */
.kk-day-nav .btn {
  --tblr-btn-color: var(--tblr-primary); --tblr-btn-bg: var(--kk-mint); --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--tblr-primary); --tblr-btn-hover-bg: #cde2cf; --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: #fff; --tblr-btn-active-bg: var(--tblr-primary); --tblr-btn-active-border-color: var(--tblr-primary);
  --tblr-btn-disabled-color: var(--tblr-primary); --tblr-btn-disabled-bg: var(--kk-mint); --tblr-btn-disabled-border-color: transparent; }
[data-bs-theme="dark"] .kk-day-nav .btn {
  --tblr-btn-bg: rgba(var(--tblr-primary-rgb), .2); --tblr-btn-hover-bg: rgba(var(--tblr-primary-rgb), .3);
  --tblr-btn-active-color: #12251c; --tblr-btn-disabled-bg: rgba(var(--tblr-primary-rgb), .2); }

/* The board's head (today/_board.html): on a phone, the day and [‹ Today ›] on one line, and what's
   waiting under it; on a computer, one row. The day is always one line. The day's name is the date picker: the date field lies
   invisibly over it, so pressing the name opens the calendar (and the keyboard still edits it). */
.kk-board-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "day nav" "wait wait";
  align-items: center; gap: .5rem .75rem; }
.kk-day-pick { grid-area: day; position: relative; min-width: 0; justify-self: start; }
.kk-day-title { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; margin: 0; white-space: nowrap; }
.kk-day-title .icon { width: 1.1rem; height: 1.1rem; color: var(--tblr-secondary); }
.kk-day-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.kk-day-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; cursor: pointer; }
.kk-day-pick:focus-within .kk-day-title { outline: 2px solid var(--tblr-primary); outline-offset: 3px; border-radius: 4px; }
.kk-board-head .kk-day-nav { grid-area: nav; }
.kk-board-waiting { grid-area: wait; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kk-board-waiting .kk-requests { border: 0; border-radius: 999px; padding: .45rem .95rem; font-weight: 600; }  /* a pill, as the rest */
@media (max-width: 575.98px) {
  .kk-board-head .kk-day-nav .btn { padding-left: .65rem; padding-right: .65rem; }  /* room for "Wed 30 Sep" at 320px */
}
@media (min-width: 768px) {
  .kk-board-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "day wait nav"; }
  .kk-board-waiting { justify-content: flex-end; }
}

/* Information, in a box or a pop-up: Mint and Forest, not Tabler's azure. */
.alert-info { --tblr-alert-color: var(--tblr-primary); --tblr-alert-bg: var(--tblr-primary-lt); --tblr-alert-link-color: var(--tblr-primary); }
#mb-toasts .text-bg-info { background-color: #1F4D3A !important; color: #fff !important; }
/* A pill in one (Sell a 10-trip, Resume now) would be Mint on Mint: white there instead. */
[data-bs-theme="light"] .alert-info .kk-btn-soft { background: #fff; }
[data-bs-theme="light"] .alert-info .kk-btn-soft:hover, [data-bs-theme="light"] .alert-info .kk-btn-soft:focus-visible { background: #cde2cf; }
[data-bs-theme="dark"] .alert-info .kk-btn-soft { background: rgba(var(--tblr-primary-rgb), .3); }
[data-bs-theme="dark"] .alert-info .kk-btn-soft:hover, [data-bs-theme="dark"] .alert-info .kk-btn-soft:focus-visible { background: rgba(var(--tblr-primary-rgb), .42); }

/* The logo in the bar and on the signed-out pages: the light or dark one, as the theme is. */
.kk-brand { padding: 0; flex-shrink: 0; }  /* the search box gives way, not the logo */
.kk-brand img { height: 2rem; width: auto; display: block; }
.kk-brand-big img { height: 3.25rem; margin: 0 auto; }
.kk-brand .kk-brand-dark, [data-bs-theme="dark"] .kk-brand .kk-brand-light { display: none; }
[data-bs-theme="dark"] .kk-brand .kk-brand-dark { display: block; }

/* The scrollbar's room is always kept, so a page that's just long enough to scroll (Takings for
   yesterday, a busy day on the board) doesn't shift sideways against one that isn't. */
html { scrollbar-gutter: stable; }

.kk-row { padding-top: .6rem; padding-bottom: .6rem; }
.kk-when { width: 4.25rem; flex: none; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kk-pet { font-size: 1rem; }
.kk-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.kk-chips .badge { font-weight: 500; white-space: normal; text-align: left; }
.kk-flag { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.kk-done .kk-pet, .kk-done .kk-when { opacity: .6; }
.kk-status { flex: none; }
.kk-counts strong { font-size: 1rem; }
.min-w-0 { min-width: 0; }

/* Pages that put their own heading in the content (the board) leave the template's page header
   empty: don't leave its padding as a gap. */
.page-header:has(.page-title:empty) { display: none; }

/* The search box and its dropdown. */
.kk-search-results { display: none; position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 1050;
  background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-box-shadow-dropdown); max-height: 24rem; overflow-y: auto; min-width: 20rem; }
.kk-search-results.show { display: block; }
.kk-result { display: block; padding: .5rem .75rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--tblr-border-color-translucent); }
.kk-result:last-child, .kk-result:has(+ .kk-result-keys) { border-bottom: 0; }
.kk-result-main .kk-icon { margin-right: .35rem; vertical-align: -.15em; color: var(--tblr-secondary); }  /* a person */
.kk-result.active, .kk-result:hover { background: var(--tblr-active-bg); color: inherit; text-decoration: none; }
.kk-result-why { display: block; }
.kk-result-empty { padding: .75rem; }
.kk-dl dt { font-weight: 500; color: var(--tblr-secondary); }
.kk-dl dd { margin-bottom: .4rem; }
a.kk-pet:hover, a.kk-owner:hover { text-decoration: underline; }

/* Acting on visits. */
.kk-act { flex: none; min-width: 5.5rem; }
.kk-selected { box-shadow: inset 3px 0 0 var(--tblr-primary); background: var(--tblr-active-bg); }
.kk-row[data-status="ready"] { box-shadow: inset 4px 0 0 var(--tblr-green); background: rgba(var(--tblr-green-rgb), .07); }  /* done: can go home */
.kk-row[data-status="ready"].kk-selected { box-shadow: inset 4px 0 0 var(--tblr-green), inset 7px 0 0 var(--tblr-primary);
  background: var(--tblr-active-bg); }
.kk-acting .kk-status { opacity: .4; }

/* The side panel: phone-width on a phone, wider on bigger screens, where the edit forms then sit
   in two columns (each field keeps its own row of the grid; a .row of fields stays together). */
.kk-panel { --tblr-offcanvas-width: min(100vw, 30rem); }
@media (min-width: 992px) { .kk-panel { --tblr-offcanvas-width: 46rem; } }
@media (min-width: 1600px) { .kk-panel { --tblr-offcanvas-width: 56rem; } }
@media (min-width: 992px) {
  .kk-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; align-items: start; }
  .kk-edit > .kk-wide { grid-column: 1 / -1; }
  .kk-panel-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
}
/* The panel's content arrives inside #kk-panel-content, which would break Bootstrap's offcanvas
   layout (only a direct .offcanvas-body child scrolls): make the wrapper the flex column instead,
   so a long panel scrolls and its last button is always reachable. */
#kk-panel-content, #kk-help-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#kk-panel-content > .offcanvas-body, #kk-help-content > .offcanvas-body { flex: 1 1 auto; overflow-y: auto; min-height: 0;
  overscroll-behavior: contain; }  /* the wheel scrolls the panel, never the page behind it */

/* Photos and editing. */
.kk-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.kk-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; align-self: center; }
.kk-saved:empty { display: none; }

/* Booking: the pet picker, quick-add, groomer columns. A ticked service's own box (minutes, a
   price agreed) shows only while it's ticked. */
.form-check:has(> input:not(:checked)) + .kk-sub { display: none; }
.kk-picker { flex: 1 1 auto; min-width: 12rem; }
.kk-picker .kk-search-results { min-width: 100%; }
button.kk-result { width: 100%; text-align: left; background: none; border: 0; }
.kk-groomers { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); overflow: hidden; }
/* Each column draws its own left and top line, the outer ones clipped: three or four groomers wrap
   two to a row with the lines still right. */
.kk-groomer { box-shadow: -1px 0 0 var(--tblr-border-color), 0 -1px 0 var(--tblr-border-color); }

/* The pet picker's results show while the picker has focus and there's something to show. */
.kk-picker:focus-within .kk-search-results:not(:empty) { display: block; }

/* Quick-add on a phone: the name box takes the row, Half day and Book wrap under it. */
@media (max-width: 575.98px) {
  .kk-quick-add .d-flex { flex-wrap: wrap; }
  .kk-quick-add .kk-picker { flex-basis: 100%; }
}
@media (min-width: 992px) { .kk-extras { columns: 2; column-gap: 1.25rem; } .kk-extras > * { break-inside: avoid; } }

/* Search results with their bookings. */
#kk-search-results .kk-result { display: flex; align-items: center; gap: .5rem; cursor: pointer; }  /* not the pet picker's */
.kk-result:focus { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.kk-result-main { flex: 1 1 auto; min-width: 0; }
.kk-result-actions { display: flex; gap: .25rem; flex: none; }
.kk-result-actions .btn { padding: .2rem .65rem; }
.kk-result-keys { padding: .35rem .75rem; border-top: 1px solid var(--tblr-border-color-translucent); }

/* Day chips. */
.kk-chips-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.kk-day-chip { position: relative; margin: 0; }
.kk-day-chip input { position: absolute; opacity: 0; inset: 0; }
.kk-day-chip span { display: inline-flex; flex-direction: column; align-items: center; min-width: 4.5rem; padding: .4rem .6rem;
  border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); line-height: 1.2; cursor: pointer; }
.kk-day-chip small { color: var(--tblr-secondary); font-size: .75rem; }
.kk-day-chip input:checked + span { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }
.kk-day-chip input:checked + span small { color: rgba(255,255,255,.85); }
.kk-day-chip input:focus-visible + span { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.kk-day-chip.is-booked span { opacity: .5; cursor: not-allowed; text-decoration: line-through; }

/* ── The search box: in the navbar on a wide screen; on a phone, its own full-width row under the
   brand and menu button (outside the menu, so it's always there). ───────────────────────────── */
.kk-search { width: 26rem; max-width: 100%; margin-right: 1rem; }
@media (min-width: 992px) {
  /* In the bar: whatever room the buttons leave, up to 34rem, and never so little that "Search pet,
     owner, phone…" is cut (the buttons beside it go to icons first). Its results are wider than the
     box when they need to be, so a name, its owner and Daycare/Groom sit on one line. */
  .kk-search { flex: 1 1 18rem; width: auto; min-width: 18rem; max-width: 34rem; }
  .kk-search-results { min-width: 34rem; right: auto; width: max(100%, 34rem); }
}
/* A big screen: the page (and so the bar) up to 1560px wide, not Tabler's 1320. */
@media (min-width: 1600px) { .container-xl { max-width: 1560px; } }
@media (max-width: 991.98px) {  /* below the navbar's lg breakpoint: the menu collapses */
  .kk-search { order: 3; flex: 0 0 100%; width: 100%; margin: .5rem 0 .25rem; }
  .kk-search-results { min-width: 0; }
}

/* ── Board rows. The name and owner, then (on a phone) the status, the cross and the action on a
   line of their own, so neither gets squeezed, and the buttons are big enough for a thumb. ───── */
.kk-row-head { display: flex; align-items: baseline; gap: .5rem; }
.kk-row-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-row-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }
/* A row's parts (today/_row.html, the UI review of 16 Oct): what's booked in words, its tools in a
   place that doesn't move (the message, which grows, before the notes, which don't), and chips
   only for what needs attention. */
.kk-status-words { font-size: .8125rem; font-weight: 600; color: var(--tblr-secondary); white-space: nowrap; }
.kk-more-btn { padding: .15rem .35rem; }
.kk-more-btn .kk-icon { width: 1.15rem; height: 1.15rem; margin: 0; stroke-width: 3; }
.kk-what-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: start; margin-top: .15rem; }
.kk-what { justify-self: start; max-width: 100%; text-align: left; color: var(--tblr-body-color); font-size: .875rem; line-height: 1.4;
  background: none; border: 0; padding: .05rem .2rem; margin-left: -.2rem; border-radius: var(--tblr-border-radius); }
button.kk-what { cursor: pointer; display: inline-flex; align-items: baseline; gap: .35rem; }
button.kk-what:hover, button.kk-what:focus-visible { background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04)); }
button.kk-what .kk-icon { width: .85rem; height: .85rem; flex: none; align-self: center; color: var(--tblr-secondary); margin: 0; }
button.kk-what:hover .kk-icon { color: var(--tblr-primary); }
.kk-svc { font-weight: 600; }
.kk-fee, .kk-bit, .kk-by { color: var(--tblr-secondary); }
.kk-to-price { color: var(--tblr-orange); font-weight: 600; }
.kk-done .kk-what { color: var(--tblr-secondary); }
.kk-tools { display: flex; align-items: center; gap: .1rem; justify-content: flex-end; }
.kk-tool { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--tblr-secondary);
  background: none; border: 0; padding: .15rem .35rem; border-radius: var(--tblr-border-radius); white-space: nowrap; }
button.kk-tool { cursor: pointer; }
button.kk-tool:hover, button.kk-tool:focus-visible { background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04)); color: var(--tblr-body-color); }
.kk-tool.is-on { color: var(--tblr-teal); }
.kk-tool .kk-icon { width: 1rem; height: 1rem; margin: 0; }
/* At the grooming table (a phone or tablet, a wet finger): the groom's line (Change), the bell and
   the notes are big enough to hit (the phone pass, 23 Oct). */
@media (pointer: coarse) {
  button.kk-what, button.kk-tool { min-height: 2.25rem; }
  button.kk-what { align-items: center; }
  button.kk-tool { min-width: 2.25rem; justify-content: center; }
}
.kk-offer-words { flex: 1 1 12rem; }  /* the bill's pass offers: the button drops below rather than squeeze them */
/* A table that's a stack of small cards on a phone (takings' Money in): each figure with its heading. */
@media (max-width: 575.98px) {
  .kk-stack thead { display: none; }
  .kk-stack, .kk-stack tbody, .kk-stack tfoot, .kk-stack tr { display: block; width: 100%; }
  .kk-stack tr { padding: .4rem 0; border-bottom: 1px solid var(--tblr-border-color); }
  .kk-stack td, .kk-stack th { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border: 0 !important; padding: .2rem 1rem !important; }
  .kk-stack td:first-child, .kk-stack th:first-child { font-weight: 600; }
  .kk-stack td:empty, .kk-stack th:empty { display: none; }
  .kk-stack [data-label]::before { content: attr(data-label); color: var(--tblr-secondary); font-weight: 400; }
  .kk-stack .kk-counted { max-width: 9rem; }
}
@media (max-width: 575.98px) {
  /* A lane's title with its counts beside it ("Grooming  7 booked"), and its buttons beside them when
     they fit, on the next line when not. The actions' box steps aside (display: contents). */
  .kk-lane > .card-header { flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
  .kk-lane > .card-header .card-actions { display: contents; }
  .kk-lane > .card-header .kk-counts { flex: 1 1 auto; }
  .kk-what-line:has(span.kk-tool.is-on) { grid-template-columns: minmax(0, 1fr); }  /* "Texted 9:15am": its own line */
  .kk-what-line:has(span.kk-tool.is-on) .kk-tools { justify-content: flex-start; }
  /* The name, with its button and ⋯ always top right; under it, its state (Requested, Booked) and who
     they are (owner · breed · size). The actions' box steps aside (display: contents) so its pieces
     can sit on either line. */
  .kk-row-head { flex-wrap: wrap; row-gap: .15rem; column-gap: .5rem; align-items: center; }
  .kk-row-head .kk-pet { order: 1; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .kk-row-head .kk-thumb { order: 0; }
  .kk-row-actions { display: contents; }
  .kk-row-actions > * { order: 2; flex: none; }
  .kk-row-head::after { content: ""; order: 2; flex-basis: 100%; height: 0; }  /* the line break */
  .kk-row-actions > .kk-status { order: 3; }
  .kk-row-head > .kk-row-who { order: 4; flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; font-size: .875rem; }  /* beside the state, or under it when too long */
  .kk-row-actions .kk-act { min-height: 2.5rem; padding: .4rem 1rem; font-size: .9375rem; }
  .kk-row-actions .kk-more-btn, .kk-tool { min-width: 2.5rem; min-height: 2.5rem; justify-content: center; }  /* a finger's width */
  .kk-when { width: 3.9rem; font-size: .8rem; }  /* "10:30am" on one line */
  .kk-row .d-flex.gap-3 { gap: .6rem !important; }
}

/* A narrow groomer column (two or more groomers on a laptop): the status and buttons get a line of
   their own, as on a phone, so they never spill into the next column and sit under its rows. */
.kk-groomer { container-type: inline-size; }
@container (max-width: 30rem) {
  .kk-row-head { flex-wrap: wrap; row-gap: .35rem; }
  .kk-row-who { flex: 1 1 8rem; white-space: normal; }
  .kk-row-actions { flex: 0 0 100%; justify-content: flex-end; margin-left: 0; flex-wrap: wrap; }
  .kk-row-actions .kk-status { margin-right: auto; }
}

/* ── Phones generally. ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* 16px stops iPhones zooming the page when a field is tapped. */
  .form-control, .form-select { font-size: 16px; }
  /* Toasts across the bottom, not a narrow column over the content. */
  #mb-toasts { left: 0; right: 0; width: auto; padding: .5rem !important; }
  #mb-toasts .toast { width: 100%; }
  .page-body .container-xl { padding-left: .75rem; padding-right: .75rem; }
}

/* Bigger screens: messages top centre, under the bar (the review, 26 Oct). Bottom right, they sat
   over the Daycare lane's Check in buttons and the bill's, and swallowed the next click; the row
   under the bar is pressed far less. */
@media (min-width: 992px) {
  #mb-toasts { top: 3.5rem; bottom: auto !important; left: 50% !important; right: auto !important;
               transform: translateX(-50%); }
}

/* ── A panel's main button and total stay in view at the bottom while its form scrolls (the
   groom panel's extras are a long list). ─────────────────────────────────────────────────────── */
.kk-sticky-actions { position: sticky; bottom: calc(-1 * var(--tblr-offcanvas-padding-y, 1rem)); z-index: 2;
  background: var(--tblr-bg-surface); border-top: 1px solid var(--tblr-border-color);
  margin: 1rem calc(-1 * var(--tblr-offcanvas-padding-x, 1rem)) 0; padding: .75rem var(--tblr-offcanvas-padding-x, 1rem); }
.kk-result-main .fw-bold { color: var(--tblr-body-color); }
@media (max-width: 767.98px) {
  .kk-result-keys, .kk-key-hint { display: none; }  /* keyboard hints: no keyboard */
  .kk-result-actions .btn { padding: .4rem .7rem; font-size: .9rem; }
}

/* ── Buttons. Three levels on every screen: solid (btn-primary) for the one main action, soft
   pills (kk-btn-soft) for secondary ones, ghost for minor ones (the cross, Remove, Not now). The
   soft pill: a tint of the brand colour, no border, full size so it's easy to hit. ─────────── */
.kk-btn-soft { --kk-soft: var(--tblr-primary-rgb); background: rgba(var(--kk-soft), .12); color: var(--tblr-primary);
  border: 0; border-radius: 999px; padding: .45rem .95rem; font-weight: 600; box-shadow: none; }
.kk-btn-soft:hover, .kk-btn-soft:focus-visible { background: rgba(var(--kk-soft), .2); color: var(--tblr-primary); }
.kk-btn-soft.active, .kk-btn-soft.is-due { background: rgba(var(--kk-soft), .26); }
/* Forest is too dark to tint well (12% of it on Sand is grey): Mint and its darker steps instead.
   The template's own .btn-soft (Users, Settings) the same. */
[data-bs-theme="light"] .kk-btn-soft, [data-bs-theme="light"] .btn-soft { background: var(--kk-mint); }
[data-bs-theme="light"] .kk-btn-soft:hover, [data-bs-theme="light"] .kk-btn-soft:focus-visible,
[data-bs-theme="light"] .btn-soft:hover, [data-bs-theme="light"] .btn-soft:focus-visible, [data-bs-theme="light"] .btn-soft.active { background: #cde2cf; }
[data-bs-theme="light"] .kk-btn-soft.active, [data-bs-theme="light"] .kk-btn-soft.is-due { background: #bcd8c1; }
.kk-btn-soft:disabled { opacity: .55; }
.kk-btn-soft-sm { padding: .25rem .7rem; font-size: .8125rem; }
.kk-icon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.btn > .kk-icon { margin-right: .4rem; vertical-align: -.15em; }
/* On a dark background the same tint all but disappears: a stronger one there. */
[data-bs-theme="dark"] .kk-btn-soft { background: rgba(var(--kk-soft), .2); }
[data-bs-theme="dark"] .kk-btn-soft:hover, [data-bs-theme="dark"] .kk-btn-soft:focus-visible { background: rgba(var(--kk-soft), .3); }
[data-bs-theme="dark"] .kk-btn-soft.active, [data-bs-theme="dark"] .kk-btn-soft.is-due { background: rgba(var(--kk-soft), .36); }

/* ── The menu. At lg and up it sits in the bar as before, words only; below lg it's a side panel:
   one list of full-width rows with icons, a divider, then who's signed in, Dark mode and Sign out
   at the foot. New client stays in the bar on every screen. ───────────────────────────────────── */
.kk-new-client { margin-right: 1rem; white-space: nowrap; }
.kk-new-client + .kk-new-client { margin-left: -.5rem; }  /* New sale, beside New client */
.kk-menu-foot { display: flex; align-items: center; gap: .75rem; }
.kk-menu-extra .nav-link { background: none; border: 0; }
.kk-menu .nav-link, .kk-menu-who { white-space: nowrap; }
.kk-key-hint { white-space: nowrap; }
@media (min-width: 992px) {
  .kk-menu .navbar-nav .kk-icon { display: none; }
  .kk-menu .offcanvas-body { align-items: center; }
}
/* The end of a wide bar: Setup's gear, Help's ?, the person's initials (their menu). */
.kk-bar-end { align-items: center; gap: .25rem; margin-left: auto; }
.kk-bar-end .btn-icon .kk-icon { width: 1.25rem; height: 1.25rem; margin: 0; }
.kk-help-button { position: relative; }
.kk-new-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tblr-danger); margin-left: .35rem; }
.kk-new-dot[hidden] { display: none; }
.kk-help-button .kk-new-dot { position: absolute; top: .3rem; right: .3rem; margin: 0; }
.kk-me { padding: .25rem; }
.kk-me-name { padding: 0 .35rem; font-weight: 500; white-space: nowrap; }
.kk-me-name::after { content: ""; display: inline-block; margin-left: .4rem; vertical-align: .15em;
  border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }  /* a menu */
.kk-initials { background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-primary); font-weight: 600; }
.kk-me-menu { min-width: 15rem; }
.kk-me-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.kk-me-menu .kk-icon { width: 1.1rem; height: 1.1rem; margin: 0; }
.kk-me-who { white-space: normal; overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; font-size: .875rem; }
@media (max-width: 991.98px) {
  .kk-new-client { margin: 0 .5rem 0 auto; }
  .kk-new-client + .kk-new-client { margin-left: 0; }
  .kk-menu { width: min(85vw, 20rem) !important; }
  .kk-menu .offcanvas-body { display: flex; flex-direction: column; padding: .5rem 1rem 1rem; }
  .kk-menu .navbar-nav { align-self: stretch; margin-right: 0 !important; }  /* me-auto would stop it stretching */
  .kk-menu .navbar-nav .nav-link { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; padding: .75rem .5rem;
    font-size: 1rem; border-radius: var(--tblr-border-radius); width: 100%; text-align: left; }
  .kk-menu .navbar-nav .nav-link.active { background: rgba(var(--tblr-primary-rgb), .1); }
  .kk-menu .navbar-nav .kk-icon { width: 1.25rem; height: 1.25rem; margin: 0; }
  .kk-menu-divider { margin: .5rem 0; }
  .kk-menu-foot { flex-direction: column; align-items: stretch; gap: .25rem; margin-top: auto;
    padding-top: 1rem; border-top: 1px solid var(--tblr-border-color); }
  .kk-menu-who { padding: 0 .5rem .5rem; white-space: normal; overflow-wrap: anywhere; }  /* a long email wraps */
  .kk-menu-row { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;
    padding: .6rem .5rem; margin: 0; min-height: 2.75rem; }
  .kk-menu-row .form-check-input { float: none; margin: 0; }
  .kk-menu-row .form-check-label { display: flex; align-items: center; gap: .75rem; }
  .kk-menu-row .kk-icon, .kk-sign-out .kk-icon, .kk-language .kk-icon { width: 1.25rem; height: 1.25rem; margin: 0; }
  .kk-sign-out, .kk-language { width: 100%; justify-content: flex-start; gap: .75rem; padding: .6rem .5rem; }
}
/* Sell and Changes as just their icons (their names are their aria-labels and titles) on a phone,
   and on a small computer screen, where the search box shares the bar; + Client too, there. In
   between (a tablet, a wide phone) the search box has its own line, so the words fit. */
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1199.98px) {
  .kk-new-client + .kk-new-client .kk-new-client-label { display: none; }
  .kk-new-client + .kk-new-client .kk-icon { margin: 0; }
  .kk-new-client + .kk-new-client { padding: .45rem .6rem; }
}
/* A narrow phone, or a small computer screen (the search box in the bar): + Client as just the plus too. */
@media (max-width: 379.98px), (min-width: 992px) and (max-width: 1199.98px) {
  .kk-new-client-label { display: none; }
  .kk-new-client .kk-icon { margin: 0; }
  .kk-new-client { padding: .45rem .6rem; }
}

/* ── The address search (records/_address.html): Google asks for its name under its suggestions,
   on every screen (the keyboard hints row hides on a phone; this doesn't). ────────────────────── */
.kk-result-attribution { padding: .3rem .75rem; text-align: right; font-size: .75rem; color: var(--tblr-secondary);
  border-top: 1px solid var(--tblr-border-color-translucent); }

/* ── The checkout panel (money/_checkout_panel.html): payment methods as chips, like the days. */
.kk-methods { display: flex; flex-wrap: wrap; gap: .4rem; }
.kk-price { width: 6rem; text-align: right; }
/* The bill's adding (the UI review, 16 Oct): one size of box throughout, and the finder's matches. */
.kk-add > summary { cursor: pointer; }
.kk-w-unit { width: 5rem; }
.kk-w-min { min-width: 12rem; }
.kk-find-list { position: absolute; left: 0; right: 0; z-index: 5; max-height: 20rem; overflow-y: auto;
  background: var(--tblr-bg-surface); box-shadow: var(--tblr-box-shadow-dropdown, 0 .5rem 1rem rgba(0,0,0,.15)); }  /* over the lines */
.kk-qty-btn { width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border: 1px solid var(--tblr-border-color);
  border-radius: 50%; color: var(--tblr-body-color); font-weight: 600; line-height: 1; }
.kk-discount-line td:first-child { padding-left: 1.5rem; color: var(--tblr-secondary); }  /* under the line it's off */
/* What to key into the terminal: above Take payment, where it can't be missed. */
.kk-terminal { background: rgba(var(--tblr-primary-rgb), .1); border-left: 4px solid var(--tblr-primary);
  border-radius: var(--tblr-border-radius); padding: .5rem .85rem; margin-bottom: .6rem; }
.kk-terminal-key { display: block; font-size: 1.25rem; font-weight: 700; }
.kk-terminal-part { display: block; font-weight: 600; color: var(--tblr-secondary); font-size: .85rem; }
.kk-qty-n { display: inline-block; min-width: 1.25rem; text-align: center; }
.kk-find-list > [hidden] { display: none !important; }  /* over .d-flex */
.kk-find-list .list-group-item.active, .kk-find-list .list-group-item-action:hover { background: var(--tblr-active-bg); color: inherit; border-color: var(--tblr-border-color); }
.kk-methods .kk-day-chip span { flex-direction: row; align-items: baseline; gap: .3rem; }  /* "Credit card +2%": one line, same height as the rest */

/* Setup's sections: down the side, across the top (scrolling) on a phone. */
@media (max-width: 991.98px) {
  .kk-setup-nav { flex-wrap: nowrap; overflow-x: auto; }
  .kk-setup-nav .nav-link { white-space: nowrap; }
}
.kk-setup-prices td:first-child { min-width: 12rem; }
/* The late pick-up steps: Up to [5] min late [$15], and Later than that [$30] lined up beneath. */
/* Setup > Messages: what a client gets, with made-up details. */
.kk-message-example { background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); padding: .5rem .75rem; }
.kk-message-example > [lang] { white-space: pre-line; }
.kk-tier { display: grid; grid-template-columns: 3.5rem 5rem 4rem 1fr; gap: .5rem; align-items: center; }
.kk-tier-later { grid-column: 1 / 4; }

/* ── Printing (Takings, an invoice): the page alone, no bar, menu, toasts or panel. ──────────── */
@media print {
  header.navbar, #mb-toasts, .offcanvas, .offcanvas-backdrop { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
  .kk-counted { border: 0; padding: 0; background: none; }
  .kk-counted::placeholder { color: transparent; }
}
.kk-invoice-print { max-width: 46rem; }
.kk-lines { white-space: pre-line; }  /* an address typed on two lines prints on two */
@media print { .kk-invoice-print { border: 0; max-width: none; } }
/* A contract (records/contract_print.html): the terms keep their lines; lines to write on. */
.kk-contract-print { font-size: .9rem; }
.kk-contract-print .kk-contract-who th { width: 9rem; font-weight: 600; }
.kk-contract-terms { white-space: pre-line; font-size: .85rem; }
.kk-fill { display: inline-block; min-width: 12rem; border-bottom: 1px solid currentColor; height: 1.1em; vertical-align: bottom; }
.kk-contract-sign > div { display: flex; align-items: flex-end; gap: .5rem; white-space: nowrap; }
.kk-contract-sign .kk-fill { flex: 1; min-width: 6rem; }
/* Questions and answers, two to a row (one on a phone). */
.kk-qa { display: grid; grid-template-columns: max-content minmax(6rem, 1fr) max-content minmax(6rem, 1fr); gap: .15rem 1rem; align-items: baseline; }
.kk-qa dt { font-weight: normal; }
.kk-qa dd { margin: 0; }
.kk-qa .kk-fill { display: block; min-width: 0; width: 100%; }  /* a line to write on, its own cell only */
.kk-qa-wide { grid-template-columns: max-content minmax(6rem, 1fr); }
@media (max-width: 575.98px) { .kk-qa { grid-template-columns: 1fr auto; } }
/* Printed: one A4 for a dog or two and House of Jake's terms (KC's fits one). Its own page, with
   no margin for the browser's date and address, so the margin is the article's own padding; and
   allowed to break (.card avoids breaking in print, which pushed a long one to page 2). */
@page contract { size: A4; margin: 0; }
@media print {
  body:has(.kk-contract-print) .page-body, body:has(.kk-contract-print) .container-xl { margin: 0; padding: 0; max-width: none; }
  .kk-contract-print { page: contract; break-inside: auto; padding: 10mm 12mm; font-size: 8.5pt; line-height: 1.3; }
  .kk-contract-print .card-body { padding: 0; }
  .kk-contract-print h2 { font-size: 13pt; }
  .kk-contract-print .table { margin-bottom: 2mm; }
  .kk-contract-print .table > :not(caption) > * > * { padding: .5mm 1.5mm; }
  .kk-contract-print .kk-contract-who th { width: 28mm; }
  .kk-contract-terms { font-size: 7.5pt; line-height: 1.25; }
  .kk-contract-sign { margin-top: 2mm; }
  .kk-contract-print { margin-bottom: 0 !important; }
  .kk-contract-print + .kk-contract-print { break-before: page; }  /* the day's: a family a page */
}

/* ── Help (help/*.html): a panel on the left beside the work, and its articles. ─────────────── */
.kk-help { --tblr-offcanvas-width: min(100vw, 28rem); z-index: 1050; }  /* above an open panel (1045) */
@media (min-width: 1600px) { .kk-help { --tblr-offcanvas-width: 32rem; } }
.kk-help .offcanvas-body { padding-top: .75rem; }
.kk-help-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.kk-help-tags .btn { border-radius: 999px; border: 1px solid var(--tblr-border-color); }  /* chips */
/* A phone: the topics on one line that swipes sideways, so For this page is in view at once. */
@media (max-width: 575.98px) {
  .kk-help-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
  .kk-help-tags::-webkit-scrollbar { display: none; }
  .kk-help-tags .btn { flex: none; min-height: 2.25rem; }
}
.kk-help-section { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tblr-secondary); margin: 1rem 0 .25rem; }
.kk-help-list .list-group-item { padding: .55rem .25rem; border-left: 0; border-right: 0; }
.kk-help-page { max-width: 46rem; }
.kk-help-article { line-height: 1.55; }
.kk-help-title { font-size: 1.35rem; margin-bottom: .25rem; }
.kk-help-article .lead { font-size: 1rem; }
.kk-help-article h3 { font-size: 1.05rem; margin: 1.25rem 0 .4rem; }
.kk-help-article h4 { font-size: .95rem; margin: 1rem 0 .3rem; }
.kk-help-article ol.kk-help-ol { padding-left: 1.25rem; }
.kk-help-article ol.kk-help-ol > li { margin-bottom: .35rem; padding-left: .2rem; }
.kk-help-article ul.kk-help-ul > li { margin-bottom: .2rem; }
.kk-help-note { border-left: 3px solid var(--tblr-primary); background: var(--tblr-primary-lt, rgba(32,107,196,.06));
  padding: .5rem .75rem; margin: .75rem 0; border-radius: 0 .25rem .25rem 0; }
.kk-help-shot { margin: .75rem 0 1rem; }
.kk-help-shot img { display: block; max-width: min(100%, 26rem); height: auto; border: 1px solid var(--tblr-border-color);
  border-radius: .375rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kk-help-foot { border-top: 1px solid var(--tblr-border-color); margin-top: 1.25rem; padding-top: .5rem; }
.kk-panel-help { font-weight: 600; min-width: 2rem; margin-right: .25rem; }
.offcanvas-header .kk-panel-help + .btn-close { margin-left: 0; }  /* Bootstrap's auto margin would split the space with the ? */

/* The pet's Grooms card: the dates beside the groom notes (records/_grooms_card.html). */
@media (min-width: 768px) {
  .kk-grooms-dates { border-right: var(--tblr-border-width) solid var(--tblr-border-color); }
}
.kk-grooms-notes .card-body { max-height: 28rem; overflow-y: auto; }
/* A loyalty card's products to tick (setup/_loyalty_card_panel.html): its own scroll, under its Find box. */
.kk-check-list { max-height: 22rem; overflow-y: auto; }

/* A loyalty card as a punch card (money/_loyalty_punch.html): a dot each one bought, a pill each
   reward, the one that's due in the success colour. Brand colours, so it reads in the dark too. */
.kk-punch { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.kk-punch i { width: .8rem; height: .8rem; border-radius: 50%; border: 1.5px solid var(--tblr-primary-border-subtle, var(--tblr-border-color)); }
.kk-punch i.is-bought { background: var(--tblr-primary); border-color: var(--tblr-primary); }
.kk-punch-reward { font-size: .7rem; font-weight: 600; line-height: 1; padding: .2rem .45rem; border-radius: 1rem;
  border: 1.5px dashed var(--tblr-primary-border-subtle, var(--tblr-border-color)); color: var(--tblr-secondary); }
.kk-punch-reward.is-bought { background: var(--tblr-primary); border: 1.5px solid var(--tblr-primary); color: var(--tblr-primary-fg, #fff); }
.kk-punch-reward.is-due { background: var(--tblr-success-lt); border: 1.5px solid var(--tblr-success); color: var(--tblr-success); }
.kk-more-days > summary { cursor: pointer; color: var(--tblr-primary); }
/* Its Grooms and Daycare cards alike (docs/plan/16-dog-page-cards.md): the facts at the top, and
   Move to another day in a strip under its row, with Close at the far right. */
.kk-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem 1rem; margin: 0; }
.kk-facts dt { font-weight: 400; color: var(--tblr-secondary); }
.kk-facts dd { margin: 0; }
.kk-move-strip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; padding: .5rem .75rem;
  border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04)); }
.kk-move-strip[hidden] { display: none; }
.kk-move-strip .kk-icon { margin: 0 .2rem 0 0; }
/* Its controls on one line; the day's count, once there is one, on a line under them. */
.kk-move-strip .kk-count:empty { display: none; }
.kk-move-strip .kk-count { order: 1; flex-basis: 100%; }
/* A day and time are short: on a phone too, its state and ⋯ stay beside them (the board's rows
   give theirs a line of their own). */
[data-coming] .kk-row-head { flex-wrap: nowrap; }
[data-coming] .kk-row-actions { flex: none; margin-left: auto; }
[data-coming] .kk-row-actions .kk-status { margin-right: 0; }

/* Field widths by what goes in them (docs/plan/12-ui-conventions.md): no inline widths. */
.kk-w-date { max-width: 12rem; }
.kk-w-time { max-width: 9rem; }
.kk-w-weeks { max-width: 14rem; }  /* "every 10 weeks" */
.kk-w-num { max-width: 8rem; }
.kk-w-qty { width: 5rem; }
.kk-w-price { width: 6rem; }
.kk-w-select { max-width: 20rem; }
.kk-w-clock { min-width: 3.5rem; }

/* Small buttons are a finger's width on a phone (Move, Cancel, Remove, Change in rows). */
@media (max-width: 575.98px) {
  .btn-sm, .kk-btn-soft-sm { min-height: 2.5rem; padding-left: .75rem; padding-right: .75rem; }
}

/* Setup > Staff: a person's role, wide enough for "Manager" (and 经理) beside Resend and Disable. */
.kk-role-pick { min-width: 8.5rem; }

/* ── The daycare roll call (today/_roll_call_*.html) ───────────────────────────────────────── */
/* A row is d-flex (!important), which beats [hidden]: Find and Show more hide rows this way. */
.kk-roll-row[hidden] { display: none !important; }
/* At the end of the day, the dog and their bill: the menu and price go under the name on a phone. */
.kk-roll-who { min-width: 13rem; }

/* A new business's Getting started card (today/_getting_started.html). */
.kk-step-mark { flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: .8rem; font-weight: 600; background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.kk-step-done .kk-step-mark { background: var(--tblr-green-lt); color: var(--tblr-green); }
.kk-step-done > span:last-child > a:first-child { text-decoration: line-through; color: var(--tblr-secondary); }

/* ── The booking page clients use (templates/book/). ───────────────────────────────────────── */
.kk-book .container-narrow { max-width: 40rem; }
.kk-book-logo { height: 1.1rem; width: auto; vertical-align: -.2rem; }
.kk-book-code { font-size: 1.5rem; letter-spacing: .3em; max-width: 12rem; }

/* The first screen (book/choose.html): the kinds as two wide chips, each groom a row to press, and
   the bar saying what's chosen: fixed to the foot on a phone, a panel beside the choices on a
   computer. */
.kk-book-kinds .kk-day-chip { flex: 1; }
.kk-book-kinds .kk-day-chip span { width: 100%; padding: .6rem; font-weight: 600; }
.kk-book-groom { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.kk-book-groom .form-check-input { flex: none; margin-top: .2rem; }
.kk-book-groom-text { flex: 1; min-width: 0; }
.kk-book-groom:has(input:checked) { background: var(--tblr-primary-lt); }
.kk-book-grooms.is-filtered .list-group-header,
.kk-book-grooms.is-picked .list-group-header,
.kk-book-grooms.is-picked .kk-book-groom:not(:has(input:checked)) { display: none; }  /* one animal's, then the one picked */
.kk-book-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem;
  margin: 0 calc(var(--tblr-gutter-x, 1.5rem) * -.5); padding: .75rem calc(var(--tblr-gutter-x, 1.5rem) * .5);
  background: var(--tblr-bg-surface); border-top: 1px solid var(--tblr-border-color); box-shadow: 0 -.25rem 1rem rgba(0,0,0,.06); }
.kk-book-bar-title { display: none; }
.kk-book-bar-what { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.kk-book-bar-what.is-empty { font-weight: normal; color: var(--tblr-secondary); }
.kk-book-bar-what span + span::before { content: " · "; font-weight: normal; color: var(--tblr-secondary); }
.kk-book-bar-next { flex-basis: 100%; font-size: .75rem; color: var(--tblr-secondary); }
@media (min-width: 992px) {
  .kk-book .container-narrow.kk-book-wide { max-width: 64rem; }
  .kk-book-when { display: grid; grid-template-columns: 24rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .kk-book-choose { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
  .kk-book-bar { top: 1rem; bottom: auto; flex-direction: column; align-items: stretch; margin: 0; padding: 1rem;
    border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); box-shadow: none; }
  .kk-book-bar-title { display: block; font-weight: 600; font-size: 1rem; }
  .kk-book-bar-what span { display: block; }
  .kk-book-bar-what span + span::before { content: none; }
  .kk-book-bar-next { flex-basis: auto; }
}

/* The booking page's calendar (book/_choose.html): a month at a time with book.js, each one below
   the last without it. */
.kk-cal { max-width: 24rem; }
.kk-cal-month + .kk-cal-month { margin-top: 1rem; }
.kk-cal.is-paged .kk-cal-month { display: none; margin-top: 0; }
.kk-cal.is-paged .kk-cal-month.is-shown { display: block; }
.kk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.kk-cal-title { font-weight: 600; }
.kk-cal-nav { font-size: 1.25rem; line-height: 1; visibility: hidden; }
.kk-cal.is-paged .kk-cal-nav { visibility: visible; }
.kk-cal-nav:disabled { opacity: .25; }
.kk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.kk-cal-wd { text-align: center; font-size: .75rem; color: var(--tblr-secondary); padding-bottom: .1rem; }
.kk-cal-day { position: relative; margin: 0; }
.kk-cal-day input { position: absolute; opacity: 0; inset: 0; }
.kk-cal-day > span:first-of-type { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; max-height: 2.75rem;
  border-radius: var(--tblr-border-radius); border: 1px solid var(--tblr-border-color); cursor: pointer; }
.kk-cal-day input:checked + span { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; font-weight: 600; }
.kk-cal-day input:focus-visible + span { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.kk-cal-day.is-closed > span:first-of-type { border-color: transparent; color: var(--tblr-secondary); opacity: .45; cursor: default; }
.kk-cal-day.is-theirs > span:first-of-type { position: relative; border-color: transparent; color: var(--tblr-secondary); cursor: default; }
.kk-cal-day.is-theirs > span:first-of-type::after { content: ""; position: absolute; bottom: 18%; left: 50%; width: .35rem; height: .35rem;
  margin-left: -.175rem; border-radius: 50%; background: var(--tblr-primary); }
.kk-cal-day.is-full > span:first-of-type { border-style: dashed; color: var(--tblr-secondary); text-decoration: line-through; cursor: not-allowed; }
.kk-book-logo.kk-brand-dark, [data-bs-theme="dark"] .kk-book-logo.kk-brand-light { display: none; }
[data-bs-theme="dark"] .kk-book-logo.kk-brand-dark { display: inline; }