/* Bootstrap, pointed at the Pasture Keeper tokens (16 October 2026).

   The app is built from Bootstrap 5.3 classes - cards, buttons, badges,
   dropdowns, forms - on every page. Rather than rewrite every page in the
   design system's own classes, this file sets Bootstrap's own variables and
   colour classes from the --pk-* tokens in pk-tokens.css, so every existing
   page takes the brand, in light and dark, at once. No colour is written
   here: everything is a token (or a mix of two tokens), so a token changed
   in pk-tokens.css - or an accent added later - reaches every page.

   The one exception is the tick and dot drawn inside checkboxes and radios:
   Bootstrap draws them as small SVG pictures, and a picture cannot read a
   CSS variable, so their colour is written into the picture (the token's
   value, noted beside it).

   Load order: bootstrap.min.css, pk-fonts.css, pk-tokens.css, this, style.css. */

/* ── Page, text, borders, links ────────────────────────────────────────── */
:root,
:root[data-bs-theme] {
    --bs-body-font-family: var(--pk-font-body);
    --bs-body-font-size: var(--pk-text-md);
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--pk-text);
    --bs-body-bg: var(--pk-bg);
    --bs-emphasis-color: var(--pk-text);
    --bs-heading-color: var(--pk-text);
    --bs-secondary-color: var(--pk-text-muted);
    --bs-secondary-bg: var(--pk-surface-2);
    --bs-tertiary-color: var(--pk-text-muted);
    --bs-tertiary-bg: var(--pk-surface-2);
    --bs-border-color: var(--pk-border);
    --bs-border-color-translucent: var(--pk-border);
    --bs-link-color: var(--pk-primary);
    --bs-link-hover-color: var(--pk-primary-hover);
    --bs-highlight-bg: var(--pk-accent-soft);
    --bs-highlight-color: var(--pk-text);
    --bs-code-color: var(--pk-danger);
    --bs-focus-ring-color: color-mix(in srgb, var(--pk-focus) 35%, transparent);
    --bs-border-radius: var(--pk-radius-sm);
    --bs-border-radius-lg: var(--pk-radius-md);
    --bs-border-radius-sm: var(--pk-radius-sm);   /* small buttons and inputs match full-size ones (usability sweep, 30 Oct 2026) */

    /* The "theme colours" Bootstrap's alerts and -subtle / -emphasis classes
       read. Primary and info are the forest (gold in dark); warning is the
       tag gold; success and danger are the status tokens. */
    --bs-primary: var(--pk-primary);
    --bs-success: var(--pk-success);
    --bs-danger: var(--pk-danger);
    --bs-warning: var(--pk-accent);
    --bs-info: var(--pk-primary);
    --bs-secondary: var(--pk-text-muted);
    --bs-light: var(--pk-surface-2);
    --bs-dark: var(--pk-text);

    --bs-primary-text-emphasis: var(--pk-primary);
    --bs-primary-bg-subtle: var(--pk-surface-2);
    --bs-primary-border-subtle: var(--pk-border);
    --bs-info-text-emphasis: var(--pk-primary);
    --bs-info-bg-subtle: var(--pk-surface-2);
    --bs-info-border-subtle: var(--pk-border);
    --bs-success-text-emphasis: var(--pk-success);
    --bs-success-bg-subtle: var(--pk-success-soft);
    --bs-success-border-subtle: color-mix(in srgb, var(--pk-success) 35%, var(--pk-success-soft));
    --bs-danger-text-emphasis: var(--pk-danger);
    --bs-danger-bg-subtle: var(--pk-danger-soft);
    --bs-danger-border-subtle: color-mix(in srgb, var(--pk-danger) 35%, var(--pk-danger-soft));
    --bs-warning-text-emphasis: var(--pk-text);
    --bs-warning-bg-subtle: var(--pk-accent-soft);
    --bs-warning-border-subtle: color-mix(in srgb, var(--pk-accent) 55%, var(--pk-accent-soft));
    --bs-secondary-text-emphasis: var(--pk-text-muted);
    --bs-secondary-bg-subtle: var(--pk-surface-2);
    --bs-secondary-border-subtle: var(--pk-border);
    --bs-light-text-emphasis: var(--pk-text);
    --bs-light-bg-subtle: var(--pk-surface-2);
    --bs-light-border-subtle: var(--pk-border);
    --bs-dark-text-emphasis: var(--pk-text);
    --bs-dark-bg-subtle: var(--pk-surface-2);
    --bs-dark-border-subtle: var(--pk-border-strong);
}

body { background-color: var(--pk-bg); color: var(--pk-text); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--pk-font-display); color: var(--pk-text); }
h4, h5, .h4, .h5 { font-weight: 700; }
h6, .h6 { font-weight: 600; }
hr { color: var(--pk-border); opacity: 1; }

/* ── Colour classes used in the pages ──────────────────────────────────── */
.text-primary, .text-info, .link-primary { color: var(--pk-primary) !important; }
.text-success { color: var(--pk-success) !important; }
.text-danger { color: var(--pk-danger) !important; }
.text-warning { color: var(--pk-accent) !important; }
.text-secondary, .text-muted, .text-body-secondary, .text-body-tertiary { color: var(--pk-text-muted) !important; }
.text-dark, .text-body, .text-black, .text-body-emphasis { color: var(--pk-text) !important; }
.text-white, .text-light { color: var(--pk-on-primary) !important; }

.bg-white, .bg-body { background-color: var(--pk-surface) !important; }
.bg-light, .bg-body-tertiary, .bg-body-secondary { background-color: var(--pk-surface-2) !important; }
.bg-dark { background-color: var(--pk-text) !important; color: var(--pk-bg); }
.bg-primary { background-color: var(--pk-primary) !important; color: var(--pk-on-primary); }
.bg-success { background-color: var(--pk-success-soft) !important; color: var(--pk-success); }
.bg-danger { background-color: var(--pk-danger-soft) !important; color: var(--pk-danger); }
.bg-warning { background-color: var(--pk-accent) !important; color: var(--pk-on-accent); }
.bg-info { background-color: var(--pk-accent-soft) !important; color: var(--pk-text); }
.bg-secondary { background-color: var(--pk-surface-2) !important; color: var(--pk-text-muted); }
.bg-success-subtle { background-color: var(--pk-success-soft) !important; }
.bg-danger-subtle { background-color: var(--pk-danger-soft) !important; }
.bg-warning-subtle { background-color: var(--pk-accent-soft) !important; }
.bg-info-subtle, .bg-primary-subtle, .bg-secondary-subtle, .bg-light-subtle { background-color: var(--pk-surface-2) !important; }

/* A coloured background keeps its own text colour even when a page also
   says text-dark / text-white (those were written for Bootstrap's colours). */
.bg-warning.text-dark, .bg-warning.text-white, .text-bg-warning { color: var(--pk-on-accent) !important; }
.bg-info.text-dark, .bg-info.text-white, .bg-light.text-dark, .bg-secondary.text-white { color: var(--pk-text) !important; }
.bg-success.text-white, .bg-success.text-dark { color: var(--pk-success) !important; }
.bg-danger.text-white, .bg-danger.text-dark { color: var(--pk-danger) !important; }
.bg-primary.text-white { color: var(--pk-on-primary) !important; }

.text-bg-primary { background-color: var(--pk-primary) !important; color: var(--pk-on-primary) !important; }
.text-bg-success { background-color: var(--pk-success-soft) !important; color: var(--pk-success) !important; }
.text-bg-danger { background-color: var(--pk-danger) !important; color: var(--pk-on-danger) !important; }
.text-bg-warning { background-color: var(--pk-accent) !important; }
.text-bg-light, .text-bg-secondary, .text-bg-info { background-color: var(--pk-surface-2) !important; color: var(--pk-text) !important; }
.text-bg-dark { background-color: var(--pk-text) !important; color: var(--pk-bg) !important; }

.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--pk-border); }
.border-success { border-color: var(--pk-success) !important; }
.border-danger { border-color: var(--pk-danger) !important; }
.border-warning { border-color: var(--pk-accent) !important; }
.border-primary, .border-info { border-color: var(--pk-primary) !important; }
.border-success-subtle { border-color: var(--bs-success-border-subtle) !important; }
.border-danger-subtle { border-color: var(--bs-danger-border-subtle) !important; }
.border-warning-subtle { border-color: var(--bs-warning-border-subtle) !important; }
.border-secondary, .border-secondary-subtle, .border-light { border-color: var(--pk-border) !important; }

.shadow-sm { box-shadow: var(--pk-shadow) !important; }
.shadow { box-shadow: var(--pk-shadow) !important; }

/* ── Badges: the design system's chips. Due / attention is the tag gold;
   OK and alerts are soft fills with their own colour as text. ─────────── */
.badge { font-weight: 700; border-radius: var(--pk-radius-pill); }
.badge.bg-secondary { border: 1px solid var(--pk-border); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* The main action. The app's main buttons are .btn-success (green for "do
   it" since the UX review); in the brand that is the primary: forest in
   light, gold in dark. */
.btn-success, .btn-primary {
    --bs-btn-color: var(--pk-on-primary);
    --bs-btn-bg: var(--pk-primary);
    --bs-btn-border-color: var(--pk-primary);
    --bs-btn-hover-color: var(--pk-on-primary);
    --bs-btn-hover-bg: var(--pk-primary-hover);
    --bs-btn-hover-border-color: var(--pk-primary-hover);
    --bs-btn-active-color: var(--pk-on-primary);
    --bs-btn-active-bg: var(--pk-primary-hover);
    --bs-btn-active-border-color: var(--pk-primary-hover);
    --bs-btn-disabled-color: var(--pk-on-primary);
    --bs-btn-disabled-bg: var(--pk-primary);
    --bs-btn-disabled-border-color: var(--pk-primary);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}
.btn-outline-success, .btn-outline-primary, .btn-outline-info {
    --bs-btn-color: var(--pk-primary);
    --bs-btn-border-color: var(--pk-primary);
    --bs-btn-hover-color: var(--pk-on-primary);
    --bs-btn-hover-bg: var(--pk-primary);
    --bs-btn-hover-border-color: var(--pk-primary);
    --bs-btn-active-color: var(--pk-on-primary);
    --bs-btn-active-bg: var(--pk-primary-hover);
    --bs-btn-active-border-color: var(--pk-primary-hover);
    --bs-btn-disabled-color: var(--pk-primary);
    --bs-btn-disabled-border-color: var(--pk-primary);
}
.btn-danger {
    --bs-btn-color: var(--pk-on-danger);
    --bs-btn-bg: var(--pk-danger);
    --bs-btn-border-color: var(--pk-danger);
    --bs-btn-hover-color: var(--pk-on-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pk-danger) 85%, var(--pk-text));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--pk-danger) 85%, var(--pk-text));
    --bs-btn-active-color: var(--pk-on-danger);
    --bs-btn-active-bg: color-mix(in srgb, var(--pk-danger) 85%, var(--pk-text));
    --bs-btn-active-border-color: var(--pk-danger);
    --bs-btn-disabled-color: var(--pk-on-danger);
    --bs-btn-disabled-bg: var(--pk-danger);
    --bs-btn-disabled-border-color: var(--pk-danger);
}
.btn-outline-danger {
    --bs-btn-color: var(--pk-danger);
    --bs-btn-border-color: var(--pk-danger);
    --bs-btn-hover-color: var(--pk-on-danger);
    --bs-btn-hover-bg: var(--pk-danger);
    --bs-btn-hover-border-color: var(--pk-danger);
    --bs-btn-active-color: var(--pk-on-danger);
    --bs-btn-active-bg: var(--pk-danger);
    --bs-btn-active-border-color: var(--pk-danger);
    --bs-btn-disabled-color: var(--pk-danger);
    --bs-btn-disabled-border-color: var(--pk-danger);
}
.btn-warning {
    --bs-btn-color: var(--pk-on-accent);
    --bs-btn-bg: var(--pk-accent);
    --bs-btn-border-color: var(--pk-accent);
    --bs-btn-hover-color: var(--pk-on-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pk-accent) 85%, var(--pk-text));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--pk-accent) 85%, var(--pk-text));
    --bs-btn-active-color: var(--pk-on-accent);
    --bs-btn-active-bg: color-mix(in srgb, var(--pk-accent) 85%, var(--pk-text));
    --bs-btn-active-border-color: var(--pk-accent);
    --bs-btn-disabled-color: var(--pk-on-accent);
    --bs-btn-disabled-bg: var(--pk-accent);
    --bs-btn-disabled-border-color: var(--pk-accent);
}
.btn-outline-warning {
    --bs-btn-color: var(--pk-text);
    --bs-btn-border-color: var(--pk-accent);
    --bs-btn-hover-color: var(--pk-on-accent);
    --bs-btn-hover-bg: var(--pk-accent);
    --bs-btn-hover-border-color: var(--pk-accent);
    --bs-btn-active-color: var(--pk-on-accent);
    --bs-btn-active-bg: var(--pk-accent);
    --bs-btn-active-border-color: var(--pk-accent);
    --bs-btn-disabled-color: var(--pk-text-muted);
    --bs-btn-disabled-border-color: var(--pk-accent);
}
/* The design system's secondary button: plain text in a strong outline. */
.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-light, .btn-outline-dark, .btn-info {
    --bs-btn-color: var(--pk-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--pk-border-strong);
    --bs-btn-hover-color: var(--pk-text);
    --bs-btn-hover-bg: var(--pk-surface-2);
    --bs-btn-hover-border-color: var(--pk-border-strong);
    --bs-btn-active-color: var(--pk-text);
    --bs-btn-active-bg: var(--pk-surface-2);
    --bs-btn-active-border-color: var(--pk-text-muted);
    --bs-btn-disabled-color: var(--pk-text-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--pk-border);
}
.btn-light, .btn-secondary { --bs-btn-bg: var(--pk-surface-2); --bs-btn-border-color: var(--pk-border); }
/* Bootstrap's "pressed" outline buttons (a chosen filter, a chosen view). */
.btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active {
    --bs-btn-active-bg: var(--pk-text);
    --bs-btn-active-color: var(--pk-bg);
    --bs-btn-active-border-color: var(--pk-text);
}
.btn-dark {
    --bs-btn-color: var(--pk-bg);
    --bs-btn-bg: var(--pk-text);
    --bs-btn-border-color: var(--pk-text);
    --bs-btn-hover-color: var(--pk-bg);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pk-text) 85%, var(--pk-bg));
    --bs-btn-hover-border-color: var(--pk-text);
    --bs-btn-active-color: var(--pk-bg);
    --bs-btn-active-bg: var(--pk-text);
    --bs-btn-active-border-color: var(--pk-text);
}
.btn-link {
    --bs-btn-color: var(--pk-primary);
    --bs-btn-hover-color: var(--pk-primary-hover);
    --bs-btn-active-color: var(--pk-primary-hover);
    --bs-btn-disabled-color: var(--pk-text-muted);
}
.btn { --bs-btn-font-weight: 600; }
.btn:focus-visible, .btn-check:focus-visible + .btn {
    outline: 3px solid var(--pk-focus); outline-offset: 2px; box-shadow: none;
}

/* ── Cards, lists, tables ──────────────────────────────────────────────── */
.card {
    --bs-card-bg: var(--pk-surface);
    --bs-card-color: var(--pk-text);
    --bs-card-border-color: var(--pk-border);
    --bs-card-cap-bg: var(--pk-surface-2);
    --bs-card-cap-bg: color-mix(in srgb, var(--pk-surface-2) 55%, var(--pk-surface));
    --bs-card-cap-color: var(--pk-text);
    --bs-card-border-radius: var(--pk-radius-md);
    --bs-card-inner-border-radius: calc(var(--pk-radius-md) - 1px);
}
.list-group {
    --bs-list-group-color: var(--pk-text);
    --bs-list-group-bg: var(--pk-surface);
    --bs-list-group-border-color: var(--pk-border);
    --bs-list-group-action-color: var(--pk-text);
    --bs-list-group-action-hover-color: var(--pk-text);
    --bs-list-group-action-hover-bg: var(--pk-surface-2);
    --bs-list-group-action-active-color: var(--pk-text);
    --bs-list-group-action-active-bg: var(--pk-surface-2);
    --bs-list-group-active-color: var(--pk-on-primary);
    --bs-list-group-active-bg: var(--pk-primary);
    --bs-list-group-active-border-color: var(--pk-primary);
    --bs-list-group-disabled-color: var(--pk-text-muted);
    --bs-list-group-disabled-bg: var(--pk-surface);
}
.card .list-group-flush { --bs-list-group-bg: transparent; }
.table {
    --bs-table-color: var(--pk-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--pk-border);
    --bs-table-striped-color: var(--pk-text);
    --bs-table-striped-bg: var(--pk-surface-2);
    --bs-table-active-color: var(--pk-text);
    --bs-table-active-bg: var(--pk-surface-2);
    --bs-table-hover-color: var(--pk-text);
    --bs-table-hover-bg: var(--pk-surface-2);
}
.table-light {
    --bs-table-color: var(--pk-text);
    --bs-table-bg: var(--pk-surface-2);
    --bs-table-border-color: var(--pk-border);
    --bs-table-striped-bg: var(--pk-surface-2);
    --bs-table-hover-bg: var(--pk-surface-2);
    --bs-table-active-bg: var(--pk-surface-2);
}
.table-danger { --bs-table-color: var(--pk-text); --bs-table-bg: var(--pk-danger-soft); --bs-table-border-color: var(--pk-border); }
.table-warning { --bs-table-color: var(--pk-text); --bs-table-bg: var(--pk-accent-soft); --bs-table-border-color: var(--pk-border); }
.table-success { --bs-table-color: var(--pk-text); --bs-table-bg: var(--pk-success-soft); --bs-table-border-color: var(--pk-border); }
.table-secondary, .table-info, .table-primary, .table-active { --bs-table-color: var(--pk-text); --bs-table-bg: var(--pk-surface-2); --bs-table-border-color: var(--pk-border); }

/* ── Menus, sheets, dialogs, tabs ─────────────────────────────────────── */
.dropdown-menu {
    --bs-dropdown-bg: var(--pk-surface);
    --bs-dropdown-color: var(--pk-text);
    --bs-dropdown-border-color: var(--pk-border);
    --bs-dropdown-divider-bg: var(--pk-border);
    --bs-dropdown-link-color: var(--pk-text);
    --bs-dropdown-link-hover-color: var(--pk-text);
    --bs-dropdown-link-hover-bg: var(--pk-surface-2);
    --bs-dropdown-link-active-color: var(--pk-on-primary);
    --bs-dropdown-link-active-bg: var(--pk-primary);
    --bs-dropdown-link-disabled-color: var(--pk-text-muted);
    --bs-dropdown-header-color: var(--pk-text-muted);
    --bs-dropdown-box-shadow: var(--pk-shadow);
    --bs-dropdown-border-radius: var(--pk-radius-sm);
    box-shadow: var(--pk-shadow);
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl {
    --bs-offcanvas-bg: var(--pk-surface);
    --bs-offcanvas-color: var(--pk-text);
    --bs-offcanvas-border-color: var(--pk-border);
}
.modal {
    --bs-modal-bg: var(--pk-surface);
    --bs-modal-color: var(--pk-text);
    --bs-modal-border-color: var(--pk-border);
    --bs-modal-header-border-color: var(--pk-border);
    --bs-modal-footer-border-color: var(--pk-border);
    --bs-modal-border-radius: var(--pk-radius-md);
}
.modal-backdrop { --bs-backdrop-bg: var(--pk-text); }
:root[data-bs-theme="dark"] .modal-backdrop { --bs-backdrop-bg: var(--pk-bg); }
.toast { --bs-toast-bg: var(--pk-surface); --bs-toast-color: var(--pk-text); --bs-toast-border-color: var(--pk-border); }
.popover {
    --bs-popover-bg: var(--pk-surface);
    --bs-popover-border-color: var(--pk-border);
    --bs-popover-header-bg: var(--pk-surface-2);
    --bs-popover-header-color: var(--pk-text);
    --bs-popover-body-color: var(--pk-text);
}
.tooltip { --bs-tooltip-bg: var(--pk-text); --bs-tooltip-color: var(--pk-bg); }
.nav { --bs-nav-link-color: var(--pk-primary); --bs-nav-link-hover-color: var(--pk-primary-hover); --bs-nav-link-disabled-color: var(--pk-text-muted); }
.nav-tabs {
    --bs-nav-tabs-border-color: var(--pk-border);
    --bs-nav-tabs-link-hover-border-color: var(--pk-border) var(--pk-border) var(--pk-border);
    --bs-nav-tabs-link-active-color: var(--pk-text);
    --bs-nav-tabs-link-active-bg: var(--pk-surface);
    --bs-nav-tabs-link-active-border-color: var(--pk-border) var(--pk-border) var(--pk-surface);
}
.nav-pills { --bs-nav-pills-link-active-color: var(--pk-on-primary); --bs-nav-pills-link-active-bg: var(--pk-primary); }
.accordion {
    --bs-accordion-color: var(--pk-text);
    --bs-accordion-bg: var(--pk-surface);
    --bs-accordion-border-color: var(--pk-border);
    --bs-accordion-btn-color: var(--pk-text);
    --bs-accordion-btn-bg: var(--pk-surface);
    --bs-accordion-active-color: var(--pk-text);
    --bs-accordion-active-bg: var(--pk-surface-2);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--pk-focus);
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.progress-bar.bg-success { background-color: var(--pk-success) !important; color: var(--pk-on-primary); }
.progress-bar.bg-danger { background-color: var(--pk-danger) !important; color: var(--pk-on-danger); }
.progress-bar.bg-warning { background-color: var(--pk-accent) !important; color: var(--pk-on-accent); }
.progress, .progress-stacked { --bs-progress-bg: var(--pk-surface-2); --bs-progress-bar-bg: var(--pk-primary); --bs-progress-bar-color: var(--pk-on-primary); }
.alert { --bs-alert-border-radius: var(--pk-radius-sm); }
.alert .alert-link { color: inherit; }
.pagination {
    --bs-pagination-color: var(--pk-primary);
    --bs-pagination-bg: var(--pk-surface);
    --bs-pagination-border-color: var(--pk-border);
    --bs-pagination-hover-color: var(--pk-primary-hover);
    --bs-pagination-hover-bg: var(--pk-surface-2);
    --bs-pagination-active-color: var(--pk-on-primary);
    --bs-pagination-active-bg: var(--pk-primary);
    --bs-pagination-active-border-color: var(--pk-primary);
    --bs-pagination-disabled-color: var(--pk-text-muted);
    --bs-pagination-disabled-bg: var(--pk-surface);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background-color: var(--pk-surface);
    border-color: var(--pk-border-strong);
    color: var(--pk-text);
}
.form-control::placeholder { color: var(--pk-text-muted); opacity: 1; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--pk-surface-2); color: var(--pk-text-muted); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--pk-focus);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
    background-color: var(--pk-surface);
    color: var(--pk-text);
}
.form-control-plaintext { color: var(--pk-text); }
.input-group-text { background-color: var(--pk-surface-2); border-color: var(--pk-border-strong); color: var(--pk-text); }
.form-label, .col-form-label { color: var(--pk-text); }
.form-text { color: var(--pk-text-muted); }
.form-check-input { background-color: var(--pk-surface); border-color: var(--pk-border-strong); }
.form-check-input:checked { background-color: var(--pk-primary); border-color: var(--pk-primary); }
.form-check-input[type="checkbox"]:indeterminate { background-color: var(--pk-primary); border-color: var(--pk-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--pk-primary); }
.form-range::-moz-range-thumb { background-color: var(--pk-primary); }
.form-range::-webkit-slider-runnable-track { background-color: var(--pk-surface-2); }
.form-range::-moz-range-track { background-color: var(--pk-surface-2); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: var(--bs-form-switch-bg); }

/* The tick and dot are pictures (see the top of this file). In dark mode the
   primary is the gold, and white on gold is too faint, so they are drawn in
   --pk-on-primary's dark value, 1A1F1B, there. */
:root[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231A1F1B' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
:root[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231A1F1B'/%3e%3c/svg%3e");
}
:root[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231A1F1B'/%3e%3c/svg%3e");
}

/* Body text and anything typed into is never under 16px (the brand's rule,
   and what stops an iPhone zooming the page when a box is tapped). The
   "small" boxes keep their compact padding. */
.form-control, .form-select, .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select {
    font-size: var(--pk-text-md);
}