/* ==========================================================================
   SenPro reskin — component overrides
   Re-themes the Bootstrap 3/4 + css-v2/main.css components that the existing
   templates already use, so every page picks up the new look without
   markup changes. Page-specific layouts live in css-v3/pages/*.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header (design/design-system/components/PageHeader.md)
   The page-title H1 with an optional help icon on the left, actions on the
   right, an optional toolbar row (filters left, search right) beneath;
   space-24 between header, toolbar and content. Markup: the page_header
   Slippers component, snippets/top_bar.html, hand-written .sp-page-header,
   and the legacy .fmp-top-bar (all styled alike).
   -------------------------------------------------------------------------- */

.sp-page-header,
.fmp-top-bar .row > [class*="col"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-16);
}
.sp-page-header {
  margin-bottom: var(--space-24);
}
.fmp-top-bar {
  margin-bottom: var(--space-24);
}
.fmp-top-bar .container {
  margin-bottom: 0;
}
.fmp-top-bar .row {
  margin-left: 0;
  margin-right: 0;
}
.fmp-top-bar .row > [class*="col"] {
  padding-left: 0;
  padding-right: 0;
}
.fmp-top-bar .row.border-bottom {
  border-bottom: 0 !important;
}
.fmp-top-bar .pb-4,
.fmp-top-bar .pb-3 {
  padding-bottom: 0 !important;
}
.sp-page-title,
.sp-page-header h1,
.fmp-top-bar .pagename,
h1.pagename {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-md); /* same line box with or without header buttons */
  margin: 0;
  font: var(--text-page-title);
  letter-spacing: var(--text-page-title-tracking);
  color: var(--ink);
}
@media (max-width: 767px) {
  .sp-page-title,
  .sp-page-header h1,
  .fmp-top-bar .pagename,
  h1.pagename,
  .sp-recipe-title {
    font: var(--text-page-title-mobile);
    letter-spacing: var(--text-page-title-mobile-tracking);
  }
}
/* Help (?) link beside the title, including the ones pages inject with jQuery */
.sp-page-help,
.pagename a[href*="support.senprofessional"],
#pageTitle a[href*="support.senprofessional"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  text-decoration: none;
}
.sp-page-help:hover,
.pagename a[href*="support.senprofessional"]:hover,
#pageTitle a[href*="support.senprofessional"]:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.pagename a[href*="support.senprofessional"] i,
#pageTitle a[href*="support.senprofessional"] i {
  font-size: 18px !important;
  padding: 0 !important;
}
.sp-page-help svg {
  width: 18px;
  height: 18px;
}
.sp-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
/* Toolbar row: filters or tabs left, a 280px search right */
.sp-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}
.sp-page-toolbar .sp-search {
  width: 280px;
  max-width: 100%;
  margin-left: auto;
}
/* Short intro under the page title (README: body-sm, ink-muted, max 680px) */
.sp-page-intro {
  max-width: 680px;
  margin: calc(var(--space-16) - var(--space-24)) 0 var(--space-24);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.fmp-highlight-bar {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 16px;
}
.fmp-highlight-bar::before,
.secondary-highlight::before {
  display: none;
}

/* --------------------------------------------------------------------------
   Buttons (design/design-system/components/Button.md)
   .sp-btn + --primary | --secondary | --tertiary | --destructive, --sm, --icon.
   The Bootstrap classes the templates already use map onto the same four
   intents: gold/success/primary/info = primary; default/secondary/light/
   outline-* = secondary; link = tertiary text; danger = destructive.
   -------------------------------------------------------------------------- */

.sp-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--control-md);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  box-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
}
.sp-btn:hover,
.btn:hover {
  text-decoration: none;
}
.sp-btn:focus,
.btn:focus,
.btn.focus,
.btn:active,
.btn.active {
  outline: none;
  box-shadow: none !important;
}
.sp-btn:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus) !important;
}
.sp-btn svg,
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Loading (Button.md: a spinner before the label, aria-busy). Put the label
   in .sp-btn__idle and the loading label in .sp-btn__busy; the state shows
   while htmx is requesting (.htmx-request) or when aria-busy="true". */
.sp-btn__busy {
  display: none;
}
.sp-btn.htmx-request,
.sp-btn[aria-busy="true"] {
  pointer-events: none;
}
.sp-btn.htmx-request .sp-btn__idle,
.sp-btn[aria-busy="true"] .sp-btn__idle {
  display: none;
}
.sp-btn.htmx-request .sp-btn__busy,
.sp-btn[aria-busy="true"] .sp-btn__busy {
  display: inline;
}
.sp-btn.htmx-request::before,
.sp-btn[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sp-spin 0.7s linear infinite;
}
@keyframes sp-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-btn.htmx-request::before,
  .sp-btn[aria-busy="true"]::before {
    animation-duration: 2s;
  }
}

/* Small: page headers, list rows, compact modal footers */
.sp-btn--sm,
.btn-sm, .btn-group-sm > .btn, .btn-xs {
  min-height: var(--control-sm);
  padding: 0 14px;
  font: var(--text-body-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
}
.btn-lg, .btn-group-lg > .btn {
  padding: 0 22px;
}
.sp-btn--block,
.btn-block {
  display: flex;
  width: 100%;
}
/* Square icon-only secondary button */
.sp-btn--icon {
  width: var(--control-md);
  padding: 0;
}
.sp-btn--icon.sp-btn--sm {
  width: var(--control-sm);
}

/* Primary: the one main action (brand fill) */
.sp-btn--primary,
.btn-gold,
.btn-success,
.btn-primary,
.btn-info {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--on-brand) !important;
}
.sp-btn--primary:hover,
.btn-gold:hover, .btn-success:hover, .btn-primary:hover, .btn-info:hover,
.btn-gold:focus, .btn-success:focus, .btn-primary:focus, .btn-info:focus {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: var(--on-brand) !important;
}
.sp-btn--primary:active,
.btn-gold:active, .btn-success:active, .btn-primary:active, .btn-info:active {
  background: var(--brand-pressed) !important;
  border-color: var(--brand-pressed) !important;
}
.sp-btn--primary:disabled, .sp-btn--primary.disabled,
.btn-gold:disabled, .btn-gold.disabled, .btn-success:disabled, .btn-success.disabled,
.btn-primary:disabled, .btn-primary.disabled, .btn-info:disabled, .btn-info.disabled {
  background: var(--brand-disabled) !important;
  border-color: var(--brand-disabled) !important;
  color: var(--on-brand) !important;
}

/* Secondary: white with a control border */
.sp-btn--secondary,
.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline,
button.btn-outline,
.btn-outline-white,
.btn-white,
.btn-outline-gold,
.btn-soft,
.btn-accent-soft {
  background: var(--surface-card) !important;
  border-color: var(--border-control) !important;
  color: var(--ink) !important;
}
.sp-btn--secondary:hover,
.btn-default:hover, .btn-secondary:hover, .btn-light:hover,
.btn-outline-dark:hover, .btn-outline-secondary:hover, .btn-outline-light:hover,
.btn-outline:hover, .btn-outline-white:hover, .btn-white:hover,
.btn-outline-gold:hover, .btn-soft:hover, .btn-accent-soft:hover,
.btn-outline-dark.bg-white:hover {
  background: var(--surface-secondary-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--ink) !important;
}
.sp-btn--secondary:active,
.btn-default:active, .btn-secondary:active, .btn-light:active,
.btn-outline-dark:active, .btn-outline-secondary:active, .btn-outline-light:active,
.btn-outline:active, .btn-outline-white:active, .btn-white:active,
.btn-outline-gold:active, .btn-soft:active, .btn-accent-soft:active {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}
.btn-outline-white.text-gold {
  color: var(--brand) !important;
}

/* Tertiary: transparent, for filters, toolbars and menu triggers */
.sp-btn--tertiary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink-secondary) !important;
}
.sp-btn--tertiary:hover {
  background: var(--surface-hover) !important;
  color: var(--ink) !important;
}
.sp-btn--tertiary:active {
  background: var(--surface-pressed) !important;
}

/* Disabled secondary / tertiary */
.sp-btn--secondary:disabled, .sp-btn--secondary.disabled,
.sp-btn--tertiary:disabled, .sp-btn--tertiary.disabled,
.btn-default:disabled, .btn-default.disabled, .btn-secondary:disabled, .btn-secondary.disabled,
.btn-light:disabled, .btn-light.disabled, .btn-outline-dark:disabled, .btn-outline-dark.disabled,
.btn-outline:disabled, .btn-outline.disabled, .btn-outline-gold:disabled, .btn-outline-gold.disabled {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  color: var(--ink-disabled) !important;
}
.sp-btn:disabled, .sp-btn.disabled,
.btn.disabled, .btn:disabled {
  cursor: not-allowed;
  opacity: 1;
}

/* Destructive: Delete and other irreversible actions */
.sp-btn--destructive,
.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--on-brand) !important;
}
.sp-btn--destructive:hover,
.btn-danger:hover, .btn-danger:focus {
  background: var(--danger-hover) !important;
  border-color: var(--danger-hover) !important;
  color: var(--on-brand) !important;
}
.sp-btn--destructive:active,
.btn-danger:active {
  background: var(--danger-pressed) !important;
  border-color: var(--danger-pressed) !important;
}
.sp-btn--destructive:disabled, .sp-btn--destructive.disabled,
.btn-danger:disabled, .btn-danger.disabled {
  background: var(--danger-disabled) !important;
  border-color: var(--danger-disabled) !important;
}
/* Outline danger: a secondary button with danger text, filling on hover */
.btn-outline-danger {
  background: var(--surface-card) !important;
  border-color: var(--border-control) !important;
  color: var(--danger) !important;
}
.btn-outline-danger:hover {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--on-brand) !important;
}

.btn-warning {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: var(--on-warning) !important;
}

/* Dark / black (legacy; no design-system equivalent) */
.btn-dark,
.btn-black {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--surface-card) !important;
}

/* Link-style buttons */
.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--brand) !important;
  padding-left: 4px;
  padding-right: 4px;
  min-height: 0;
}
.btn-link:hover {
  color: var(--brand-hover) !important;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Icon buttons (design/design-system/components/IconButton.md)
   44x44 transparent, ink-muted icon, surface-hover on hover. Legacy
   .btn-icon / .sp-kebab / .sp-tile-icon-btn follow the same rules.
   -------------------------------------------------------------------------- */

.sp-iconbtn,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sp-iconbtn:hover,
.sp-iconbtn:focus,
.btn-icon:hover,
.btn-icon:focus,
.btn-icon.active,
.btn-tooltip.active {
  background: var(--surface-hover);
  color: var(--ink);
  text-decoration: none;
}
.sp-iconbtn:focus-visible,
.btn-icon:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* The ring is for keyboard focus only, not after a mouse click */
.sp-iconbtn:focus:not(:focus-visible),
.btn-icon:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.sp-iconbtn svg,
.btn-icon svg {
  width: 20px;
  height: 20px;
}
.btn-icon.btn-gold {
  border: 0;
}
.btn-tooltip span {
  background: var(--ink);
  color: var(--surface-card);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
}
.btn-tooltip.btn-outline span {
  color: var(--surface-card);
}

.text-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.text-link:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

.btn-footer-container:before {
  border-bottom-color: var(--divider);
  opacity: 1;
}
.btn-footer-container .btn:before {
  background: var(--surface-page);
}

/* --------------------------------------------------------------------------
   Forms (design/design-system/components/TextField.md, Checkbox.md,
   Switch.md). Label above, 44px bordered white controls, radius-md.
   -------------------------------------------------------------------------- */

label,
.control-label,
.col-form-label,
.sp-label {
  font: var(--text-label);
  color: var(--ink);
  margin-bottom: var(--space-6);
}
.sp-label .sp-optional,
label .sp-optional {
  font-weight: 400;
  color: var(--ink-muted);
}

.sp-input,
.form-control,
.form-group input:not([type='checkbox']):not([type='radio']):not([type='file']):not(.select2-search__field),
.form-group textarea,
.form-group select,
textarea,
select.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="search"].form-control,
input[type="date"].form-control,
input[type="time"].form-control {
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--control-md);
  padding: 0 var(--space-14);
  background: var(--surface-card);
  background-clip: padding-box;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--ink);
  font: var(--text-body);
  line-height: 1.4;
  box-shadow: none;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
  margin-bottom: 0;
}
textarea,
textarea.form-control,
.form-group textarea,
textarea.sp-input {
  min-height: 104px;
  padding: 12px var(--space-14);
  resize: vertical;
}
select[multiple],
select[multiple].form-control {
  padding: 8px var(--space-14);
}
.form-group input:not([type='checkbox']):not([type='radio']):not([type='file']) {
  margin-bottom: 1em;
}
.sp-input:focus,
.form-control:focus,
.form-group input:focus,
.form-group textarea:focus,
textarea:focus,
select:focus {
  background: var(--surface-card);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-focus);
  color: var(--ink);
  outline: none;
}
.sp-input:disabled,
.form-control:disabled,
.form-control[readonly] {
  background: var(--surface-subtle);
  color: var(--ink-muted);
  opacity: 1;
}
.form-control-sm,
.input-small {
  min-height: var(--control-sm);
  padding: 0 12px;
  font: var(--text-body-sm);
}
.form-group {
  margin-bottom: var(--space-16);
}
.form-text,
.help-block,
.helptext,
.sp-hint {
  font: var(--text-caption);
  color: var(--ink-muted);
  margin-top: var(--space-6);
}
.error_msg,
.errorlist,
.invalid-feedback,
.text-danger.small,
.sp-error {
  font: var(--text-caption);
  color: var(--danger);
  margin-top: var(--space-6);
}
.errorlist {
  list-style: none;
  padding-left: 0;
}

/* Checkbox and radio: native 18px, ink accent, 14px label */
.form-group input[type='checkbox'],
.form-group input[type='radio'],
input[type='checkbox'],
input[type='radio'] {
  /* Native controls (Checkbox.md). The Tailwind forms plugin sets
     appearance:none on every checkbox, which left them invisible (an
     unbordered white box) wherever its custom styles didn't also apply. */
  -webkit-appearance: auto !important;
  appearance: auto !important;
  background-image: none !important;
  accent-color: var(--ink);
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin: 0 var(--space-8) 0 0;
}
/* Focus: the design's ring, not the Tailwind forms plugin's blue one */
input[type='checkbox']:focus,
input[type='radio']:focus {
  box-shadow: none !important;
  outline: none;
}
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.form-check-label,
.checkbox label,
.radio label,
.sp-check label {
  font: var(--text-body-sm);
  font-weight: 400;
  color: var(--ink);
}

/* Select: appearance none with the 18px chevron */
select,
.form-group select,
select.form-control,
.modal-content select.form-control,
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235f5a52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px;
}
html[data-theme="dark"] select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .modal-content select.form-control,
html[data-theme="dark"] .custom-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a8a095' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select[multiple] {
  background-image: none !important;
}

/* Input groups: addons share the field border */
.input-group {
  border-radius: var(--radius-md);
  flex-wrap: nowrap;
}
.input-group .form-control {
  border-radius: var(--radius-md);
}
.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Inputs inside a group never carry the form-group bottom margin, and the
   side joined to an addon is square (also when a form renderer wraps the
   input in a div) */
.input-group input:not([type='checkbox']):not([type='radio']),
.form-group .input-group input:not([type='checkbox']):not([type='radio']) {
  margin-bottom: 0;
}
.input-group > div:not([class*="input-group-"]) {
  flex: 1 1 auto;
  min-width: 0;
}
.input-group-prepend + .form-control,
.input-group-prepend + div .form-control,
.input-group-prepend + div input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group .input-group-text,
.input-group-addon {
  height: auto;
  padding: 0 var(--space-14);
  background: var(--surface-subtle);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font: var(--text-body-sm);
  display: flex;
  align-items: center;
}
.input-group-prepend .input-group-text {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-append .input-group-text,
.input-group-append .btn {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group.dark input {
  background: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--ink);
  margin-right: 0;
}
.input-group.dark input::placeholder {
  color: var(--ink-placeholder);
}
.input-group.dark button {
  border: 0;
  color: var(--ink-muted);
  background: transparent;
}
.search-submit {
  background: transparent;
  color: var(--ink-muted);
  right: 6px;
  top: 0;
  height: 100%;
}

/* Search: 40px with a leading 16px icon */
.sp-search {
  position: relative;
}
.sp-search .form-control,
.sp-search input {
  min-height: 40px;
  padding-left: 38px;
}
.sp-search svg,
.sp-search .fal {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--ink-placeholder);
  pointer-events: none;
}

/* Switch (Switch.md): bootstrap-toggle drawn as a 36x20 track with a 16px
   knob. The plugin binds its click to .toggle, so the On/Off labels are
   hidden and the knob is a pseudo-element; its JS API is unchanged. */
.sp-switch,
input[type='checkbox'].sp-switch {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  width: 36px !important;
  height: 20px !important;
  margin: 12px var(--space-8) 12px 0;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}
.sp-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--on-inverse); /* white in light, near-white in dark */
  transition: left 0.15s ease;
}
.sp-switch:checked,
input[type='checkbox'].sp-switch:checked {
  background: var(--brand);
}
.sp-switch:checked::after {
  left: 18px;
}
.sp-switch:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.toggle.btn,
.checkbox label .toggle.btn {
  position: relative;
  display: inline-block;
  width: 36px !important;
  height: 20px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 12px 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-full) !important;
  background: var(--brand) !important;
  overflow: hidden;
  vertical-align: middle;
  transition: background 0.15s ease;
}
.toggle.btn.off,
.checkbox label .toggle.btn.off {
  background: var(--border-strong) !important;
}
.toggle.btn .toggle-group {
  visibility: hidden;
}
.toggle.btn::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 18px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--on-inverse);
  transition: left 0.15s ease;
}
.toggle.btn.off::after {
  left: 2px;
}
.toggle.btn[disabled],
.toggle.btn.disabled {
  opacity: 0.5;
}

/* Tags input (bootstrap-tagsinput): a field holding removable chips */
.form-group .bootstrap-tagsinput,
.bootstrap-tagsinput {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: var(--control-md);
  background: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 6px 10px;
  color: var(--ink);
}
.bootstrap-tagsinput input {
  border: 0 !important;
  box-shadow: none !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  background: transparent !important;
}
.bootstrap-tagsinput .tag,
.form-group .bootstrap-tagsinput .label-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  background: var(--chip) !important;
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  font: var(--text-body-sm);
  font-weight: 600;
  padding: 0 8px;
}

/* bootstrap-select: trigger styled as a select, menu as a DropdownMenu */
.bootstrap-select {
  width: 100% !important;
}
.bootstrap-select.btn-group button,
.bootstrap-select > .dropdown-toggle,
.bootstrap-select.btn-group > button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--control-md);
  background: var(--surface-card) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink) !important;
  padding: 0 40px 0 var(--space-14);
  font: var(--text-body);
  font-weight: 400;
  box-shadow: none !important;
  outline: none !important;
}
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
  outline: none !important; /* replaces the plugin's browser focus outline */
}
.bootstrap-select > .dropdown-toggle:focus-visible {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-focus) !important;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder {
  color: var(--ink-placeholder) !important;
}
.bootstrap-select.btn-group .dropdown-toggle:after {
  border-right-color: var(--ink-muted);
  border-bottom-color: var(--ink-muted);
}
.bootstrap-select.btn-group .dropdown-menu,
.bootstrap-select .dropdown-menu {
  min-width: 200px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  padding: 6px;
  margin-top: 4px;
}
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font: var(--text-body-sm);
  font-weight: 500;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
  background: var(--surface-subtle);
  color: var(--ink);
}
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item.selected,
.bootstrap-select.btn-group ul li.selected {
  background: var(--surface-subtle);
  color: var(--ink);
  font-weight: 600;
}
.bootstrap-select .bs-searchbox .form-control,
.bootstrap-select.btn-group .form-control {
  min-height: 40px;
  margin-bottom: 6px;
}
/* The menu is as wide as its field */
.bootstrap-select > .dropdown-menu {
  min-width: 100% !important;
  max-width: 100%;
}
/* The search field inside the menu: ink border on focus, no extra ring */
.bootstrap-select .bs-searchbox .form-control:focus {
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
/* Inside a modal the body scrolls and clips; while a picker's menu is open
   let it hang out of the modal instead of being cut off */
.modal-content:has(.bootstrap-select.show),
.modal-content:has(.bootstrap-select.show) .modal-body {
  overflow: visible;
}
.bootstrap-select .bs-actionsbox .btn {
  min-height: var(--control-sm);
}
.bootstrap-select .dropdown-header {
  font: var(--text-caption);
  color: var(--ink-subtle);
  text-transform: none;
  letter-spacing: 0;
}

/* Choices.js */
.choices__inner {
  background: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--ink);
  min-height: var(--control-md);
  padding: 6px 10px;
  font: var(--text-body);
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--surface-subtle);
}
.choices__list--multiple .choices__item {
  background: var(--chip);
  border: 0;
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
}
.choices__input {
  background: transparent;
  color: var(--ink);
}

/* Datepicker */
.datepicker.dropdown-menu {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
  padding: 8px;
  font-family: var(--font-sans);
}
.datepicker table tr td,
.datepicker table tr th {
  border-radius: 8px;
  color: var(--ink);
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background: var(--surface-subtle);
}
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: var(--ink-placeholder);
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: transparent;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active {
  background: var(--brand) !important;
  color: var(--on-brand) !important;
  border-color: transparent;
  text-shadow: none;
  background-image: none;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background: var(--surface-subtle);
}

/* --------------------------------------------------------------------------
   Cards / boxes
   -------------------------------------------------------------------------- */

.outline-box,
.topcard,
.card,
.well,
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: none;
  color: var(--ink);
}
.outline-box .header {
  margin-bottom: 16px;
}
.outline-box .footer {
  margin-top: 16px;
}
.outline-box .header h1,
.outline-box .header h2,
.outline-box .header h3,
.topcard .header_row span,
.card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.outline-gold {
  border-color: var(--brand);
}
.card {
  padding: 0;
}
.card-header,
.panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--divider);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  padding: 16px 20px;
  font-weight: 700;
}
.card-body,
.panel-body {
  padding: 20px;
}
.card-footer,
.panel-footer {
  background: transparent;
  border-top: 1px solid var(--divider);
  padding: 14px 20px;
}
.topcard .header_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}
.dark-box,
.doc_item {
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border-radius: var(--radius-xl);
  padding: 20px;
}
.dark-box a,
.doc_item a {
  color: inherit;
}
.list-group {
  border-radius: var(--radius-xl);
}
.list-group-item {
  background: var(--surface-card);
  border-color: var(--divider);
  color: var(--ink);
  padding: 12px 16px;
}
.list-group-item:first-child {
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}
.list-group-item:last-child {
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}
.list-group-item.active {
  background: var(--brand-soft);
  border-color: var(--divider);
  color: var(--brand);
  font-weight: 600;
}
a.list-group-item:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}
.media-body,
.jumbotron {
  color: var(--ink);
}
.jumbotron {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
}

/* --------------------------------------------------------------------------
   Modals (design/design-system/components/Modal.md)
   modal-sm 480 / modal-md 560 (default) / modal-lg 720, radius-2xl,
   shadow-modal, 56px from the top over the scrim. Header: modal-title, a
   body-sm subtitle, a 44px close button (the only dismiss control, plus
   Escape and the backdrop). Body: space-28 sides, scrolls inside. Footer:
   surface-sunken with a divider, help link left, the primary alone right.
   An actions row at the end of an htmx-loaded body (.sp-modal-actions) is
   drawn as that footer band.
   -------------------------------------------------------------------------- */

.modal {
  padding-right: 0 !important;
}
.modal-dialog {
  position: relative;
  right: auto;
  height: auto;
  width: auto;
  max-width: var(--modal-md);
  margin: 56px auto;
  transform: none;
  transition: transform 0.2s ease-out, opacity 0.2s linear;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transform: translate(0, -24px);
}
.modal.show .modal-dialog,
.modal.fade.show .modal-dialog,
.modal.in .modal-dialog {
  right: auto;
  transform: none;
}
.modal-dialog.modal-sm { max-width: var(--modal-sm); }
.modal-dialog.modal-md { max-width: var(--modal-md); }
.modal-dialog.modal-lg { max-width: var(--modal-lg); }
.modal-dialog.modal-xl { max-width: 1100px; } /* legacy wide tools (no design equivalent) */
.modal-dialog.modal-wide { max-width: var(--modal-wide); } /* What's new: release list beside the update */
.modal-content {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: calc(100vh - 76px); /* 56px above, 20px below */
  overflow: hidden;
  padding: 0;
  background: var(--surface-card);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-modal);
  pointer-events: auto;
}
/* scrim-overlay carries its own alpha (70% scrim in light, 60% black in dark) */
.modal-backdrop {
  background: var(--scrim-overlay);
}
.modal-backdrop.show,
.modal-backdrop.in {
  opacity: 1;
}
.modal-content hr {
  border-top-color: var(--divider);
}

/* Header: title + subtitle, close top-right, no divider below */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  flex-shrink: 0;
  padding: var(--space-24) var(--space-20) var(--space-16) var(--space-28);
  margin: 0;
  border-bottom: 0;
  border-radius: 0;
}
.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4 {
  font: var(--text-modal-title);
  letter-spacing: var(--text-modal-title-tracking);
  margin: 0;
  padding: 0;
  color: var(--ink);
}
.modal-subtitle {
  margin: var(--space-4) 0 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
/* Close: a 44px ghost IconButton */
.modal-header .close,
.modal-content .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--control-md);
  height: var(--control-md);
  margin: -10px -8px 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
  opacity: 1;
  text-shadow: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  float: none;
}
.modal-header .close:hover,
.modal-content .close:hover {
  background: var(--surface-hover);
  color: var(--ink);
  opacity: 1;
}
.modal-header .close:focus-visible,
.modal-content .close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Body: scrolls inside the dialog; the footer stays in view below it */
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-28) var(--space-28);
}
/* Sections inside a longer form: overline label, divider between */
.modal-section + .modal-section {
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: 1px solid var(--divider);
}
.modal-section__label {
  margin: 0 0 var(--space-14);
  font: var(--text-overline);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Footer: sunken band, help link left, actions right */
.modal-footer,
.modal-body .sp-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-10);
  flex-shrink: 0;
  padding: var(--space-16) var(--space-28);
  margin: 0;
  background: var(--surface-sunken);
  border-top: 1px solid var(--divider);
  border-radius: 0;
}
/* An actions row inside a (htmx-loaded) body sticks to the bottom of the
   scrolling body, so it behaves like the footer */
.modal-body .sp-modal-actions {
  position: sticky;
  bottom: calc(-1 * var(--space-28));
  margin: var(--space-24) calc(-1 * var(--space-28)) calc(-1 * var(--space-28));
  z-index: 3;
}
.modal-footer > *,
.modal-body .sp-modal-actions > * {
  margin: 0;
}
/* A secondary or destructive action pinned to the footer's left edge */
.modal-body .sp-modal-actions .sp-modal-actions__start {
  margin-right: auto;
}
/* Number input with a unit inside its right edge (Duration: 1 h, 30 min) */
.sp-input-unit {
  position: relative;
  display: block;
}
.sp-input-unit > input {
  padding-right: 40px !important;
  -moz-appearance: textfield;
}
/* A select keeps its chevron, so the unit follows it outside the field */
.sp-input-unit:has(> select) {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.sp-input-unit > select {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--space-10) !important;
  padding-right: 30px !important;
  background-position: right 8px center !important;
}
.sp-input-unit > select + span {
  position: static;
  transform: none;
}
.sp-input-unit > input::-webkit-inner-spin-button,
.sp-input-unit > input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sp-input-unit > span {
  position: absolute;
  top: 50%;
  right: var(--space-12);
  transform: translateY(-50%);
  font: var(--text-body-sm);
  color: var(--ink-muted);
  pointer-events: none;
}
/* An actions row whose buttons are all conditional and absent */
.modal-body .sp-modal-actions:not(:has(*)) {
  display: none;
}
.modal-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto !important;
  font: var(--text-body-sm);
  color: var(--ink-muted);
  text-decoration: none;
}
.modal-help:hover {
  color: var(--ink);
  text-decoration: none;
}

.modal-content textarea::-webkit-input-placeholder,
.modal-content textarea::placeholder {
  color: var(--ink-placeholder);
}
.modal-content .search-submit {
  color: var(--ink-muted);
}
.modal-content .btn-success {
  float: none;
}
.modal-content .nav-pills,
.modal-content .nav-tabs {
  margin-bottom: var(--space-24);
}
.modal-content .btn-block {
  width: 100%;
  display: flex;
}

/* css-v2/main.css still carries the old dark drawer modal (.modal-content
   .x rules). Restate the design rules at the same specificity so they win. */
.modal-content .modal-header {
  padding: var(--space-24) var(--space-20) var(--space-16) var(--space-28);
  margin: 0;
  border-bottom: 0;
}
.modal-content .modal-body {
  padding: var(--space-4) var(--space-28) var(--space-28);
}
.modal-content .close {
  color: var(--ink-muted);
}
.modal-content hr {
  border-top: 1px solid var(--divider);
}
.modal-content .form-control,
.modal-content textarea,
.modal-content .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.select2-search__field) {
  background-color: var(--surface-card);
  border: 1px solid var(--border-input);
  color: var(--ink);
  height: auto;
  min-height: var(--control-md);
}
.modal-content textarea {
  min-height: 104px;
}
.modal-content .form-control:focus,
.modal-content textarea:focus,
.modal-content .form-group input:focus {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-focus);
}
.modal-content .form-group input[type="file"] {
  height: auto !important;
}
.modal-content .input-group .input-group-text {
  background: var(--surface-subtle);
  border: 1px solid var(--border-input);
  color: var(--ink-muted);
  height: auto;
}
.modal-content .bootstrap-select.btn-group > button {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--ink) !important;
}
.modal-content .bootstrap-select.btn-group .dropdown-toggle:after {
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
}
.modal-content .btn-success,
.modal-content .btn-gold {
  float: none;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--on-brand) !important;
}
.modal-content .btn-success:hover,
.modal-content .btn-gold:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: var(--on-brand) !important;
}
.modal-content .nav-pills .nav-link.active,
.modal-content .nav-tabs .nav-link.active {
  background: var(--ink);
  color: var(--surface-card);
  border: 0;
  border-radius: var(--radius-sm);
  margin-bottom: 0;
}
.modal-content .nav-tabs .nav-link,
.modal-content .nav-tabs .nav-link:hover {
  border-radius: var(--radius-sm);
}
.modal-content .btn-block {
  width: 100%;
  display: flex;
}
.modal-dialog .modal-title {
  font: var(--text-modal-title);
}

@media (max-width: 600px) {
  .modal-dialog {
    margin: 20px;
    max-width: none !important;
  }
  .modal-content {
    max-height: calc(100vh - 40px);
  }
  .modal-content .modal-header {
    padding: var(--space-20) var(--space-12) var(--space-12) var(--space-20);
  }
  .modal-content .modal-body {
    padding: var(--space-4) var(--space-20) var(--space-20);
  }
  .modal-body .sp-modal-actions {
    bottom: calc(-1 * var(--space-20));
    margin: var(--space-20) calc(-1 * var(--space-20)) calc(-1 * var(--space-20));
  }
  .modal-footer,
  .modal-body .sp-modal-actions {
    padding: var(--space-16) var(--space-20);
  }
}

/* --------------------------------------------------------------------------
   OptionTile (OptionTile.md): a bordered label wrapping a native radio or
   checkbox, title 15/600 and a caption description. Selected: 1.5px ink
   border on surface-subtle. Two-up in .sp-option-grid.
   Callout (Callout.md): a neutral surface-subtle note with an 18px icon.
   -------------------------------------------------------------------------- */

.sp-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  border: 0;
  margin: 0;
  padding: 0;
}
.sp-option-grid > legend {
  margin-bottom: var(--space-10);
  font: var(--text-overline);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sp-option-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  margin: 0;
  padding: var(--space-14);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  cursor: pointer;
}
.sp-option-tile:hover {
  border-color: var(--border-strong);
}
.sp-option-tile:has(input:checked),
.sp-option-tile[data-selected="true"] {
  border: 1.5px solid var(--ink);
  padding: calc(var(--space-14) - 0.5px);
  background: var(--surface-subtle);
}
.sp-option-tile input[type="radio"],
.sp-option-tile input[type="checkbox"] {
  margin: 1px 0 0;
  flex-shrink: 0;
}
.sp-option-tile__title {
  display: block;
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-option-tile__desc {
  display: block;
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}
@media (max-width: 600px) {
  .sp-option-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Icon tiles (OptionTile.md): four across, a 36px icon square left of the
   title, the radio visually hidden; the icon turns solid ink when selected */
.sp-option-grid--icons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sp-option-grid--icons .sp-option-tile {
  position: relative;
  gap: var(--space-12);
  border-radius: var(--radius-md);
}
.sp-option-grid--icons .sp-option-tile input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.sp-option-grid--icons .sp-option-tile:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}
.sp-option-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--ink-secondary);
}
.sp-option-tile:has(input:checked) .sp-option-tile__icon {
  background: var(--ink);
  color: var(--surface-card);
}
@media (max-width: 900px) {
  .sp-option-grid--icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Form card (prototype editor screens: service, content, recipe…): one
   surface-card with 28px side padding, sections split by dividers with a
   caption label, an optional disclosure (Advanced) and a sunken footer
   holding the primary action on the right.
   -------------------------------------------------------------------------- */

.sp-form-card {
  padding: var(--space-4) var(--space-28) 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) 0;
  border-top: 1px solid var(--divider);
}
.sp-form-section:first-child,
.sp-form-card > input[type="hidden"] + .sp-form-section {
  border-top: 0;
}
.sp-form-section__label,
.sp-form-section__label label {
  margin: 0;
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
/* One-line description under a section label */
.sp-form-section__desc {
  margin: var(--space-4) 0 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-form-section__label .sp-label-note {
  font-weight: 400;
}
.sp-form-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.sp-form-section__tools {
  display: flex;
  gap: var(--space-4);
  margin: -8px -12px -8px 0;
}
.sp-form-disclosure {
  border-top: 1px solid var(--divider);
}
.sp-form-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-20) 0;
  list-style: none;
  cursor: pointer;
}
.sp-form-disclosure > summary::-webkit-details-marker {
  display: none;
}
.sp-form-disclosure > summary .sp-form-section__label,
.sp-form-disclosure__desc {
  display: block;
}
.sp-form-disclosure__desc {
  margin-top: var(--space-4);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-form-disclosure > summary > svg {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}
.sp-form-disclosure[open] > summary > svg {
  transform: rotate(180deg);
}
.sp-form-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-bottom: var(--space-24);
}
.sp-form-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
  margin: 0 calc(var(--space-28) * -1);
  padding: var(--space-16) var(--space-28);
  background: var(--surface-sunken);
  border-top: 1px solid var(--divider);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
/* Footer with a secondary action on the left (Archive) and the primary right */
.sp-form-card__footer--split {
  justify-content: space-between;
  align-items: center;
}
.sp-form-card__footer .sp-btn--tertiary:first-child {
  margin-left: calc(var(--space-14) * -1);
}
/* A tertiary button for a destructive secondary action */
.sp-btn--danger-text,
.sp-btn--danger-text:hover {
  color: var(--danger) !important;
}
@media (max-width: 600px) {
  .sp-form-card {
    padding: var(--space-4) var(--space-16) 0;
  }
  .sp-form-card__footer {
    margin: 0 calc(var(--space-16) * -1);
    padding: var(--space-16);
  }
  .sp-option-grid--icons {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Segmented control (PlannerToolbar.md Week | Day): 32px segments on a
   surface-muted track; the selected one is a surface-card chip in ink 600.
   Selected: .active or aria-pressed/aria-selected="true". */
.sp-segmented {
  display: inline-flex;
  gap: 2px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
/* inline-flex so a link or label option centres its text like a button */
.sp-segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 0;
  padding: 0 var(--space-12);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font: var(--text-body-sm);
  font-weight: 500;
  cursor: pointer;
}
.sp-segmented__btn:hover {
  color: var(--ink);
  text-decoration: none;
}
.sp-segmented__btn.active,
.sp-segmented__btn[aria-pressed="true"],
.sp-segmented__btn[aria-selected="true"] {
  background: var(--surface-card);
  color: var(--ink);
  font-weight: 600;
}
.sp-segmented__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Segmented radios: a label per option wrapping a hidden native radio */
label.sp-segmented__btn > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
label.sp-segmented__btn:has(input:checked) {
  background: var(--surface-card);
  color: var(--ink);
  font-weight: 600;
}
label.sp-segmented__btn:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}
/* Full width with equal segments */
.sp-segmented--fill {
  display: flex;
  width: 100%;
}
.sp-segmented--fill > .sp-segmented__btn {
  flex: 1;
}

.sp-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
/* Danger: a consequence that can't be undone */
.sp-callout--danger {
  background: var(--danger-soft);
  color: var(--ink);
}
.sp-callout--danger svg {
  color: var(--danger);
}
.sp-callout svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Dropdown menus (design/design-system/components/DropdownMenu.md)
   surface-card, radius-lg, shadow-menu, 6px padding, >=200px wide,
   40px items in 14/500 ink-secondary; destructive items last in danger.
   -------------------------------------------------------------------------- */

.sp-menu-panel,
.dropdown-menu {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  padding: 6px;
  margin-top: 6px;
  color: var(--ink);
  font: var(--text-body-sm);
  min-width: 200px;
}
.sp-menu-item,
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  font: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
}
.sp-menu-item svg,
.dropdown-menu .dropdown-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink-muted);
}
.sp-menu-item:hover,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--surface-subtle);
  color: var(--ink);
  text-decoration: none;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu > .active > a {
  background: var(--surface-subtle);
  color: var(--ink);
  font-weight: 600;
}
.sp-menu-item--danger,
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu > li > a.text-danger {
  color: var(--danger) !important;
}
.sp-menu-divider,
.dropdown-menu .dropdown-divider,
.dropdown-menu .divider {
  height: 0;
  border-top: 1px solid var(--divider);
  background: transparent;
  margin: 6px 0;
}
.dropdown-menu .dropdown-header {
  font: var(--text-caption);
  color: var(--ink-subtle);
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 12px 4px;
}
.dropdown-toggle::after {
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   Tabs (design/design-system/components/Tabs.md)
   36px, radius-sm, 14/500 ink-muted; selected is solid ink with 600 text;
   unselected transparent with surface-hover on hover; no underline. Rows
   scroll sideways rather than wrap (mobile.md).
   -------------------------------------------------------------------------- */

.sp-tabs,
.nav-pills,
.nav-tabs {
  display: flex;
  border-bottom: 0;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar,
.nav-pills::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar {
  display: none;
}
.sp-tab,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.nav-pills > li > a,
.nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-sm);
  padding: 0 14px;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent;
  color: var(--ink-muted);
  font: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
  margin: 0;
  text-decoration: none;
}
.sp-tab:hover,
.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover,
.nav-pills > li > a:hover,
.nav-tabs > li > a:hover {
  background: var(--surface-hover);
  color: var(--ink);
  text-decoration: none;
}
.sp-tab[aria-selected="true"],
.sp-tab.is-active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active,
.nav-pills > li.active > a,
.nav-tabs > li.active > a,
.nav-pills > li.active > a:hover,
.nav-tabs > li.active > a:hover {
  background: var(--ink);
  color: var(--surface-card);
  font-weight: 600;
  border: 0;
}
.sp-tab__count {
  font-weight: 500;
  opacity: 0.7;
}
.nav-pills .nav-link.disabled,
.nav-tabs .nav-link.disabled {
  color: var(--ink-disabled);
}
.tab-content {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

/* DataTable.md: 40px header in 13/600 ink-muted on surface-sunken, 56px
   body rows separated by divider-row; numbers right-aligned in tabular
   figures (.num). */
.table {
  color: var(--ink);
  margin-bottom: 0;
}
.table th,
.table thead th {
  height: 40px;
  padding: 0 var(--space-16);
  border-top: 0;
  border-bottom: 1px solid var(--divider);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font: var(--text-label);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
.table td {
  height: 56px;
  padding: var(--space-8) var(--space-16);
  border-top: 1px solid var(--divider-row);
  vertical-align: middle;
  font: var(--text-body-sm);
}
.table .num,
.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table-sm td,
.sp-table--compact td {
  height: 40px;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: transparent;
}
.table-hover tbody tr:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}
.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: var(--divider);
}
.table-dark,
.table .thead-dark th {
  background: var(--surface-inverse);
  color: var(--on-inverse);
}

/* --------------------------------------------------------------------------
   Badges, chips, alerts, progress, pagination
   -------------------------------------------------------------------------- */

/* Badges (design/design-system/components/Badge.md): 22px, radius-xs,
   12/600. Brand for audiences, warning for waiting states, success and
   danger for outcomes, neutral for tags, outline for "+N more". */
.sp-badge,
.badge,
.label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: 600 12px/1 var(--font-sans);
  white-space: nowrap;
  vertical-align: middle;
}
.sp-badge--brand,
.badge-gold, .badge-primary, .badge-info, .label-primary, .label-info {
  background: var(--brand-soft);
  color: var(--on-brand-soft);
}
.sp-badge--neutral,
.badge-dark, .badge-secondary, .badge-light, .label-default {
  background: var(--surface-hover);
  color: var(--ink-secondary);
}
.sp-badge--success,
.badge-success, .label-success {
  background: var(--success-soft);
  color: var(--on-success-soft);
}
.sp-badge--warning,
.badge-warning, .label-warning {
  background: var(--warning-soft);
  color: var(--on-warning-soft);
}
.sp-badge--danger,
.badge-danger, .label-danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.sp-badge--outline {
  background: transparent;
  border-color: var(--border-control);
  color: var(--ink-muted);
}
.badge-pill {
  border-radius: var(--radius-xs);
}

.alert {
  border: 0;
  border-radius: var(--radius-xl);
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 500;
}
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-info, .alert-gold, .alert-box.alert-gold { background: var(--brand-soft); color: var(--brand); }
.alert-warning { background: var(--warning-soft); color: var(--on-warning-soft); }
.alert-danger, .alert-error { background: var(--danger-soft); color: var(--danger); }
.alert .close {
  color: inherit;
  opacity: 0.7;
  text-shadow: none;
}
.alert-box {
  border-radius: var(--radius-xl);
  padding: 12px 16px;
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-subtle);
  box-shadow: none;
}
.progress-bar {
  background: var(--brand);
  border-radius: 999px;
  box-shadow: none;
}

/* Pagination (prototype Consultations): 32px page numbers, the current one
   solid ink; previous / next as 36px bordered squares */
.pagination {
  align-items: center;
  gap: 6px;
  margin: 0;
}
.pagination > li > a,
.pagination > li > span,
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-8);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm) !important;
  background: transparent;
  color: var(--ink-secondary);
  font: var(--text-caption);
  font-weight: 600;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  min-width: 36px;
  height: 36px;
  border-color: var(--border-control);
  border-radius: var(--radius-md) !important;
  background: var(--surface-card);
  color: var(--ink-muted);
}
.pagination > li > a:hover,
.page-link:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.page-item.active .page-link {
  background: var(--ink);
  color: var(--surface-card);
}
.page-item.disabled .page-link,
.pagination > .disabled > a {
  color: var(--ink-placeholder);
  background: transparent;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--ink-muted);
}
.breadcrumb a { color: var(--ink-subtle); }
.breadcrumb .active { color: var(--ink); }

.tooltip .tooltip-inner {
  background: var(--ink);
  color: var(--surface-card);
  border-radius: 6px;
  font-size: 12px;
}
.popover {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
}
.popover .popover-header {
  background: transparent;
  border-bottom: 1px solid var(--divider);
  font-weight: 700;
}
.popover .popover-body { color: var(--ink); }

/* Avatars (design/design-system/components/Avatar.md): 40px avatar fill
   with ink-secondary 700 initials; --sm is 24px brand-soft with 10/700. */
.sp-avatar-circle,
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--avatar);
  color: var(--ink-secondary);
  font: 700 14px/1 var(--font-sans);
  flex-shrink: 0;
  overflow: hidden;
}
.sp-avatar-circle--sm {
  width: 24px;
  height: 24px;
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: 700 10px/1 var(--font-sans);
}
.sp-avatar-circle img,
.avatar-initials img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rounded-circle {
  border-radius: 50% !important;
}

/* Status rings used on client avatars (from base.html inline styles) */
.red-circle   { box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--danger) !important; }
.green-circle { box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--success) !important; }
.amber-circle { box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--warning) !important; }

/* Traffic-light habit cells */
.traffic-light {
  border-radius: 8px;
}
.traffic-light.green { background: var(--success) !important; color: var(--success); }
.traffic-light.amber { background: var(--warning) !important; color: var(--warning); }
.traffic-light.red   { background: var(--danger) !important; color: var(--danger); }

/* Loaders */
.pdf-loader,
.spinner-loader {
  background: var(--scrim-overlay);
  color: var(--on-inverse);
}
/* 32px ring (was a Font Awesome spinner); same keyframes as button loading */
.sp-loader-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-12);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sp-spin 0.8s linear infinite;
}

/* System/mass message + msg banner */
.mass-message {
  background: var(--warning-soft) !important;
  color: var(--on-warning-soft);
}
#msg_banner {
  background: var(--surface-card) !important;
  border-top: 1px solid var(--border);
  color: var(--ink);
}

/* Intro.js */
.introjs-tooltip {
  background: var(--surface-card);
  color: var(--ink);
  border-radius: var(--radius-xl);
}

/* Legacy .line */
.line {
  border-bottom-color: var(--divider);
  margin: 24px 0;
}

/* --------------------------------------------------------------------------
   select2 multi-select (specialisms on the profile and service pages) drawn
   as a TextField holding Badge chips. select2's own stylesheet loads after
   ours from the CDN, hence the body prefix.
   -------------------------------------------------------------------------- */
body .select2-container--default .select2-selection--multiple {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--control-md);
  padding: 5px var(--space-8);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: text;
}
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--ink);
  box-shadow: none;
  outline: none;
}
body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  margin: 0;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--surface-hover);
  color: var(--ink-secondary);
  font: 600 12px/1 var(--font-sans);
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding: 0;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static;
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 -2px 0 2px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background: var(--surface-muted);
  color: var(--ink);
  outline: none;
}
/* select2's search box sits inside the chip field: no box of its own (the generic
   .form-group / .modal-content input rules skip it with :not(.select2-search__field); the extra
   specificity beats main.css's legacy .modal-content .form-group input rule) */
body .select2-container--default .select2-selection--multiple .select2-search--inline input.select2-search__field {
  height: 26px;
  min-height: 0;
  margin: 0;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
  font: var(--text-body-sm);
  color: var(--ink);
}
body .select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--ink-placeholder);
}
/* select2 single select (e.g. a client's Position) drawn like a TextField select */
body .select2-container .selection {
  display: block;
}
body .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: var(--control-md);
  padding: 0 var(--space-14);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  font: var(--text-body);
  color: var(--ink);
}
body .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ink-placeholder);
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  bottom: 0;
  height: auto;
  right: var(--space-10);
}
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ink);
  outline: none;
}
body .select2-dropdown {
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
  overflow: hidden;
}
body .select2-container--open .select2-dropdown--above {
  margin-top: 0;
  margin-bottom: 4px;
}
/* select2 joins field and menu with square corners; ours float apart */
body .select2-container--open .select2-dropdown--below,
body .select2-container--open .select2-dropdown--above {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
body .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
body .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-radius: var(--radius-md);
}
body .select2-container--default .select2-results__option {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink-secondary);
}
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--surface-hover);
  color: var(--ink);
}
body .select2-container--default .select2-results__option--selected,
body .select2-container--default .select2-results__option[aria-selected="true"] {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

/* Chips: legacy name for Badge (same sizes and variants) */
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: 600 12px/1 var(--font-sans);
  white-space: nowrap;
}
/* A chip that's a button (e.g. a collection card's publish state, which opens Who Can See It): above the card's
   stretched link, with a hover and focus ring */
.sp-chip--button {
  position: relative;
  z-index: 2;
  border: 0;
  cursor: pointer;
}
.sp-chip--button:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}
.sp-chip--button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-chip--neutral { background: var(--surface-hover); color: var(--ink-secondary); }
.sp-chip--success { background: var(--success-soft); color: var(--on-success-soft); }
.sp-chip--warning { background: var(--warning-soft); color: var(--on-warning-soft); }
.sp-chip--danger  { background: var(--danger-soft); color: var(--danger); }

/* Common utility: card */
.sp-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
}
.sp-card--dark {
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border-color: transparent;
}
.sp-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}
.sp-section-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 14px;
}
/* One-line caption under a section title */
.sp-section-desc {
  margin: -8px 0 var(--space-12);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}

/* Pill tab rows: legacy name for Tabs (same rules) */
.sp-pills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
  margin-bottom: 18px;
}
/* Tabs in a filter bar (Foods): the bar spaces the row, so no margin of their own; centred with the search */
.sp-filter-bar > .sp-pills {
  margin-bottom: 0;
}
.sp-pills::-webkit-scrollbar {
  display: none;
}
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-sm);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.sp-pill:hover {
  background: var(--surface-hover);
  color: var(--ink);
  text-decoration: none;
}
.sp-pill.is-active,
.sp-pill.active {
  background: var(--ink);
  color: var(--surface-card);
  font-weight: 600;
}
.sp-pill .sp-pill-count {
  font-weight: 500;
  opacity: 0.7;
}

/* Common utility: page header row */
.sp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.sp-page-header h1 {
  margin: 0;
}
.sp-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Back link (BackHeader.md): 36px, 14/500 ink-muted, chevron-left, above
   the PageHeader. Markup: snippets/back_link.html. */
.sp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-sm);
  margin-bottom: var(--space-8);
  color: var(--ink-muted);
  font: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
}
.sp-back:hover,
.sp-back:focus {
  color: var(--ink);
  text-decoration: none;
}
.sp-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sp-back i {
  font-size: 13px;
}

/* Common utility: empty state */
.sp-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
  background: var(--surface-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
}
.sp-empty__title {
  margin-bottom: 6px;
  font: var(--text-section-title);
  color: var(--ink);
}

/* Kebab (⋯) menu trigger: a 44px ghost IconButton (DropdownMenu.md) */
.sp-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
  padding: 0;
}
.sp-kebab:hover,
.sp-kebab[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--ink);
}
.sp-kebab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-kebab::after {
  display: none;
}

/* Modals used to be dark; neutralise white-text utilities inside them */
.modal-content .text-white,
.modal-content .tw-text-white,
.modal-content .tw-text-gray-100,
.modal-content .tw-text-gray-200,
.modal-content .tw-text-white\/80,
.modal-content .tw-text-white\/75 {
  color: var(--ink) !important;
}
.modal-content .tw-bg-red-500 {
  background: var(--danger-soft) !important;
  color: var(--danger);
  border-radius: 8px;
  padding: 8px 12px !important;
}
.modal-content .tw-bg-red-500 ul { list-style: none; margin: 0; padding: 0; }

/* Alpine */
[x-cloak] { display: none !important; }

/* Alpine-driven dropdown (kebab menus): DropdownMenu panel and items */
.sp-dropdown {
  position: relative;
  display: inline-block;
}
.sp-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  z-index: 30;
}
.sp-dropdown--up .sp-dropdown-menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.sp-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-secondary) !important;
  font: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.sp-dropdown-item:hover {
  background: var(--surface-subtle);
  color: var(--ink) !important;
  text-decoration: none;
}
/* Items that are buttons (an action rather than a link) look the same */
button.sp-dropdown-item {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  appearance: none;
}
button.sp-dropdown-item:hover {
  background: var(--surface-subtle);
}
.sp-dropdown-item:focus {
  outline: none;
}
.sp-dropdown-item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-dropdown-item--danger {
  color: var(--danger) !important;
}
/* Separates destructive items from the rest (DropdownMenu.md) */
.sp-dropdown-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--divider);
}

/* Search inputs */
.sp-search--narrow {
  width: 280px;
  max-width: 100%;
  margin-bottom: 20px;
}
.sp-search .form-control {
  margin-bottom: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-input);
}
.sp-search .form-control:focus {
  border-color: var(--brand);
}

/* Filter bars (tag pills + search) */
.sp-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-24);
}
.sp-filter-bar .sp-search--narrow {
  width: 280px;
  max-width: 100%;
  margin-bottom: 0;
  margin-left: auto;
}
.sp-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
  margin-bottom: 8px;
}
.sp-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Phones: one row that swipes sideways instead of wrapping (mobile.md), with a fade at the right edge to show
   there's more; base.html scrolls the selected pill into view */
@media (max-width: 767px) {
  .sp-filter-group,
  .sp-filter-bar > .sp-filter-pills {
    width: 100%;
    min-width: 0;
  }
  .sp-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--space-24)), transparent);
    mask-image: linear-gradient(to right, black calc(100% - var(--space-24)), transparent);
    padding-right: var(--space-24);
  }
  .sp-filter-pills::-webkit-scrollbar {
    display: none;
  }
  .sp-filter-pills > .sp-filter-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Search bars run the full width on phones (Sean, 30 Sep 2026) */
  .sp-search--narrow,
  .sp-filter-bar .sp-search--narrow,
  .sp-page-toolbar .sp-search {
    width: 100%;
    margin-left: 0;
  }
  .sp-list-toolbar > .sp-search--narrow,
  .sp-page-actions:has(> .sp-search--narrow) {
    flex: 1 1 100%;
  }
  /* Text buttons drop their leading "+" on phones; icon-only buttons keep it (Sean, 30 Sep 2026) */
  .sp-btn:not(.sp-btn--icon) > svg[data-icon="add"][aria-hidden="true"] {
    display: none;
  }
}
/* FilterPills.md: 36px, radius-sm, border-input on white; active is solid
   ink with white 600 text */
.sp-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--control-sm);
  padding: 0 var(--space-14);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--ink-secondary);
  font: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.sp-filter-pill:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  text-decoration: none;
}
.sp-filter-pill.badge-gold,
.sp-filter-pill.is-active,
.sp-filter-pill.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--surface-card) !important;
  font-weight: 600;
}
.sp-filter-pill:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-filter-pill .sp-pill-count {
  font-weight: 500;
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Card grid + base card (LayoutCard.md, CardContent.md)
   Three per row with a space-24 gap, cards stretch to fill their column
   and share a row height. Every card: surface-card, 1px border, radius-xl,
   no shadow, 16:9 media (plain surface-media block when there is no
   image), title in card-title clamped to two lines, one-line description,
   footer with author/meta left and the ⋯ menu right. The title is the
   card's link and stretches over the whole card; menus and buttons sit
   above it. Legacy .sp-tile* markup and item_card follow these rules.
   -------------------------------------------------------------------------- */

.sp-grid,
.sp-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-tile-col {
  display: flex;
  min-width: 0;
  width: auto;
  max-width: none;
  list-style: none;
}
.sp-tile-col.d-none {
  display: none !important;
}
.sp-tile-grid > .sp-empty {
  grid-column: 1 / -1;
}

.sp-card-item,
.sp-tile {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: none;
  overflow: visible;
  color: var(--ink);
  height: auto;
  padding: 0;
}
.sp-tile:hover {
  border-color: var(--border-strong);
}
.sp-tile-media {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: var(--surface-media);
  background-size: cover;
  background-position: center;
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
  overflow: hidden;
}
.sp-tile-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No image: the media stays a plain block (no placeholder icon) */
.sp-tile-media > svg,
.sp-tile-media > i {
  display: none;
}
/* Upload cover photo (snippets/cover_add_button.html): centred over a photo-less card's image area for people
   who can edit it. Shown on hover or keyboard focus; always on touch screens, which have no hover. */
.sp-tile-cover-add {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* above the card's stretched title link (z-index 1), like the card's menu */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sp-tile-cover-add > .sp-btn {
  pointer-events: auto;
  gap: var(--space-6);
}
.sp-tile:hover .sp-tile-cover-add,
.sp-tile:focus-within .sp-tile-cover-add {
  opacity: 1;
}
@media (hover: none) {
  .sp-tile-cover-add {
    opacity: 1;
  }
}
.sp-tile-media--dark {
  background-color: var(--surface-media);
}
.sp-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-4);
  padding: var(--space-16);
}
.sp-tile-kind {
  align-self: flex-start;
  margin-bottom: var(--space-4);
}
.sp-tile-title,
h3.sp-tile-title {
  margin: 0;
  font: var(--text-card-title);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
.sp-tile-title a,
a.sp-tile-title {
  color: inherit;
  text-decoration: none;
}
.sp-tile-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.sp-tile-link:hover,
.sp-tile-title a:hover,
a.sp-tile-title:hover {
  color: inherit;
  text-decoration: none;
}
/* The card's link covers the whole card */
.sp-tile .sp-tile-title a::after,
.sp-tile a.sp-tile-title::after,
.sp-tile a.sp-tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-xl);
}
.sp-tile .sp-tile-title a:focus-visible,
.sp-tile a.sp-tile-title:focus-visible,
.sp-tile a.sp-tile-link:focus-visible {
  outline: none;
}
.sp-tile:has(.sp-tile-title a:focus-visible, a.sp-tile-title:focus-visible, a.sp-tile-link:focus-visible) {
  box-shadow: var(--shadow-focus);
}
.sp-tile-actions,
.sp-tile .sp-dropdown,
.sp-tile .sp-recipe-tags a,
.sp-tile .sp-recipe-tags span {
  position: relative;
  z-index: 2;
}
.sp-tile-author {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-tile-desc {
  font: var(--text-body-sm);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-tile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-10);
}
.sp-tile-actions .sp-dropdown {
  margin-left: auto;
  margin-right: -10px; /* IconButton.md: pull the 44px hit area into alignment */
}
/* Remaining in-card buttons (clients: Manage; food: + add) */
.sp-tile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-sm);
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--border-control);
  color: var(--ink);
  font: var(--text-body-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.sp-tile-btn:hover {
  background: var(--surface-secondary-hover);
  border-color: var(--border-strong);
  color: var(--ink);
  text-decoration: none;
}
.sp-tile-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.sp-tile-btn--primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--on-brand);
}
.sp-tile-icon-btn {
  flex: 0 0 var(--control-md);
  width: var(--control-md);
  height: var(--control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
}
.sp-tile-icon-btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
/* mobile.md: grids of three or more stack to one column */
@media (max-width: 767px) {
  .sp-grid,
  .sp-tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sp-page-desc {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 6px 0 0;
}
.sp-list-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--divider);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
}
.sp-list-link {
  color: var(--ink-muted);
  cursor: pointer;
}
.sp-list-link:hover {
  color: var(--brand);
}
.sp-habits-page,
.sp-questionnaires {
  max-width: none; /* width comes from .sp-page__inner */
}
.sp-search input.form-control,
.sp-search input[type="text"],
.sp-search input[type="search"] {
  padding-left: 38px !important;
}

/* File inputs */
input[type="file"],
input[type="file"].form-control,
.form-control[type="file"] {
  border: 1px dashed var(--border) !important;
  background: var(--surface-card) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 12px !important;
  height: auto !important;
  font-size: 13px;
  color: var(--ink-muted);
}
input[type="file"]::file-selector-button {
  background: var(--surface-subtle);
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  margin-right: 10px;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}
/* list-group active state must beat legacy green */
.list-group .list-group-item.active,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--surface-card) !important;
}
/* Generic data table inside a card */
.sp-table-card {
  padding: 0;
  overflow: hidden;
}
.sp-table-card .sp-table {
  margin: 0;
}
.sp-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
  text-transform: none;
  border-top: 0 !important;
  border-bottom: 1px solid var(--divider) !important;
  padding: 12px 16px !important;
  background: var(--surface-card);
}
.sp-table td {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--divider) !important;
  font-size: 13.5px;
}
.sp-table tbody tr:first-child td {
  border-top: 0 !important;
}
.sp-table-person {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.sp-table-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 32px;
  background: var(--avatar);
}
.sp-table-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-table-actions {
  display: inline-flex;
  gap: 6px;
}
.sp-table-empty {
  color: var(--ink-subtle);
  text-align: center;
  padding: 28px !important;
}

/* ---- Legacy page chrome still used by a handful of older templates ---- */
.fmp-top-bar {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.fmp-top-bar .container,
.fmp-highlight-bar .container {
  max-width: 100%;
  padding: 0;
}
.fmp-top-bar .pagename {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
  display: block !important;
}
.fmp-top-bar .breadcrumb,
.fmp-top-bar .visible-xs {
  display: none !important;
}
.fmp-highlight-bar {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
.fmp-highlight-bar .fmp-menu:empty {
  display: none;
}
.fmp-highlight-bar .fmp-menu a {
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0;
}
.fmp-highlight-bar .fmp-menu h2 {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
  color: var(--ink-muted);
}

/* Glyphicons (Bootstrap 3 font is not shipped) → Font Awesome kit glyphs */
.glyphicon {
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  display: inline-block;
}
.glyphicon-home:before { content: "\f015"; }
.glyphicon-remove:before { content: "\f00d"; }
.glyphicon-chevron-right:before { content: "\f054"; }
.glyphicon-chevron-left:before { content: "\f053"; }
.glyphicon-menu-up:before,
.glyphicon-chevron-up:before { content: "\f077"; }
.glyphicon-menu-down:before,
.glyphicon-chevron-down:before { content: "\f078"; }
.glyphicon-plus:before { content: "\f067"; }
.glyphicon-minus:before { content: "\f068"; }
.glyphicon-pencil:before,
.glyphicon-edit:before { content: "\f303"; }
.glyphicon-question-sign:before { content: "\f059"; }
.glyphicon-floppy-disk:before { content: "\f0c7"; }
.glyphicon-time:before { content: "\f017"; }
.glyphicon-lock:before { content: "\f023"; }
.glyphicon-list-alt:before { content: "\f022"; }
.glyphicon-heart:before { content: "\f004"; }
.glyphicon-flag:before { content: "\f024"; }
.glyphicon-search:before { content: "\f002"; }
.glyphicon-ok:before { content: "\f00c"; }
.glyphicon-trash:before { content: "\f1f8"; }
.glyphicon-calendar:before { content: "\f073"; }
.glyphicon-envelope:before { content: "\f0e0"; }
.glyphicon-user:before { content: "\f007"; }
.glyphicon-eye-open:before { content: "\f06e"; }
.glyphicon-download-alt:before,
.glyphicon-download:before { content: "\f019"; }
.glyphicon-cog:before { content: "\f013"; }
.glyphicon-refresh:before { content: "\f021"; }
.glyphicon-print:before { content: "\f02f"; }
.glyphicon-info-sign:before { content: "\f05a"; }
.glyphicon-warning-sign:before { content: "\f071"; }
.glyphicon-star:before { content: "\f005"; }
.glyphicon-link:before { content: "\f0c1"; }
.glyphicon-share:before { content: "\f064"; }
.glyphicon-camera:before { content: "\f030"; }
.glyphicon-file:before { content: "\f15b"; }
.glyphicon-picture:before { content: "\f03e"; }
.glyphicon-th:before { content: "\f00a"; }
.glyphicon-list:before { content: "\f03a"; }
.glyphicon-arrow-left:before { content: "\f060"; }
.glyphicon-arrow-right:before { content: "\f061"; }

/* --------------------------------------------------------------------------
   Modal body pieces shared by htmx-loaded forms
   -------------------------------------------------------------------------- */
.sp-modal-loading {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
/* "Habit: Drink water" line naming what the modal acts on */
.sp-modal-context {
  margin: 0 0 var(--space-16);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-modal-context strong {
  color: var(--ink);
  font-weight: 600;
}
.sp-modal-field {
  margin-bottom: var(--space-16);
}
/* Delete / archive confirmations (Modal.md) */
.sp-confirm-lead {
  margin: 0 0 var(--space-4);
  font: var(--text-body);
  color: var(--ink);
}
.sp-confirm-subject {
  margin: 0 0 var(--space-12);
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-confirm-note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}

/* List toolbar (LayoutList.md): filters left, a 280px search right */
.sp-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}
.sp-list-toolbar .sp-search--narrow {
  margin-bottom: 0;
}
/* Unassign modal body (core/modals/unassign.html) */
.sp-unassign__hint,
.sp-unassign__empty {
  margin: 0 0 var(--space-16);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-unassign__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: 0 0 var(--space-20);
  padding: 0;
  border: 0;
}
.sp-unassign__group > legend {
  margin: 0 0 2px;
  font: var(--text-label);
  color: var(--ink);
}
.sp-unassign__desc {
  margin: -6px 0 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* A placeholder image renders with an empty src (apps/core/templatetags/
   images.py); hide it so the avatar circle or media block shows plain */
img[src=""],
img[src=" "] {
  display: none !important;
}

/* Card footer: a status tag or meta on the left, the ⋯ menu on the right */
.sp-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-12);
}
.sp-tile-foot .sp-dropdown {
  margin-right: -8px;
}
/* Image field in a form: current picture with a Remove option above the picker */
.sp-form-image {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}
.sp-form-image img {
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.sp-file-input {
  display: block;
  width: 100%;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
/* CardContent.md author: 24px brand-soft initials avatar and the name */
/* An author line above the footer (My Content): both sit at the bottom of the card, the author first */
.sp-tile-body > .sp-tile-author {
  margin-top: auto;
  padding-top: var(--space-12);
}
.sp-tile-body > .sp-tile-author + .sp-tile-foot {
  margin-top: 0;
  padding-top: var(--space-10);
}
.sp-tile-author--avatar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}
.sp-tile-author__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: var(--text-micro);
}
.sp-tile-author__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sp-tile-link .sp-tile-desc {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Cover image picker (core/components/cover_picker.html): the card image at
   the top of a form. A wide media area; empty shows a camera and "Add cover
   image", filled shows the image with Replace / Remove on it.
   -------------------------------------------------------------------------- */
.sp-cover {
  position: relative;
  margin-bottom: var(--space-24);
}
.sp-cover__media {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 5;
  border-radius: var(--radius-lg);
  background: var(--surface-media) center / cover no-repeat;
  overflow: hidden;
}
/* Doubled class: form pages set "label { display: block }" (.sp-doc-form, .sp-form-stack) */
.sp-cover .sp-cover__empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  border: 1px dashed var(--border-control);
  border-radius: inherit;
  color: var(--ink-muted);
  cursor: pointer;
  font-weight: 400;
}
.sp-cover .sp-cover__empty:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}
.sp-cover .sp-cover__empty[hidden],
.sp-cover .sp-cover__actions[hidden] {
  display: none;
}
.sp-cover__title {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-cover__hint {
  font: var(--text-caption);
}
.sp-cover__actions {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  display: flex;
  gap: var(--space-8);
}
.sp-cover .sp-cover__actions .sp-btn {
  display: inline-flex;
  margin: 0;
  box-shadow: var(--shadow-menu);
}
@media (max-width: 767px) {
  .sp-cover__media {
    aspect-ratio: 16 / 9;
  }
}
.sp-cover__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* "Who can see it" (core/modals/access.html): who has access, each removable, then the audience picker to add */
.sp-access__current {
  margin-bottom: var(--space-20);
}
.sp-access__empty {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-access__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sp-access__row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 48px;
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-access__row + .sp-access__row {
  border-top: 1px solid var(--divider-row);
}
.sp-access__icon {
  display: inline-flex;
  color: var(--ink-muted);
}
.sp-access__name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.sp-access__note {
  margin-left: var(--space-4);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-access__remove-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* Marked for removal: struck through until Save */
.sp-access__row.is-removed .sp-access__name {
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* Phones: every text field at 16px (input-mobile), or iOS zooms the page in when it's tapped (Sean, 5 Oct 2026).
   !important because many fields set their own smaller size; on a phone this has to win. Pinch-zoom stays on. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  textarea,
  select {
    font: var(--text-input-mobile) !important;
  }
}

/* What's new (apps/whats_new/templates/whats_new/overlay.html, Sean's What's New design) in the shared Modal at
   modal-wide: the updates on the left (unread dot, short name, date, category), the selected one on the right; on a
   phone the list, then one update at a time (data-view="list" | "detail"). */
#whatsNewModal .modal-body {
  padding: 0;
}
.sp-wn-scope {
  display: contents;
}
/* The body has no padding here, so the footer sits in place (not pulled out by the usual body padding), and it's
   hidden for an update with no guide or button */
#whatsNewModal .modal-body .sp-modal-actions {
  position: static;
  margin: 0;
}
#whatsNewModal .modal-body .sp-modal-actions:not(:has(.sp-wn__actions)) {
  display: none;
}
.sp-wn {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  height: min(70vh, calc(var(--modal-wide) * 0.6));
  border-top: 1px solid var(--divider);
}
.sp-wn__list {
  margin: 0;
  padding: var(--space-10);
  list-style: none;
  overflow: auto;
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-wn__item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-12);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.sp-wn__item:hover {
  background: var(--surface-secondary-hover);
}
.sp-wn__item.is-current {
  background: var(--brand-soft);
}
.sp-wn__item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-wn__item-name {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: var(--text-body);
  font-weight: 600;
}
.sp-wn__item-meta,
.sp-wn__released {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-wn__item-go {
  display: none;
}
.sp-wn__dot {
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--brand);
}
.sp-wn__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-8);
  border-radius: var(--radius-xs);
  background: var(--surface-hover);
  color: var(--ink-secondary);
  font: var(--text-caption);
  font-weight: 600;
}
.sp-wn__chip--inline {
  display: none;
}
.sp-wn__detail {
  overflow: auto;
}
.sp-wn__article {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-28) var(--space-28);
}
.sp-wn__back {
  display: none;
}
.sp-wn__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.sp-wn__nav {
  display: flex;
  gap: var(--space-4);
}
.sp-wn__step {
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
}
.sp-wn__step:disabled {
  opacity: 0.4;
  cursor: default;
}
.sp-wn__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-wn__title {
  margin: 0;
  font: var(--text-page-title);
  letter-spacing: var(--text-page-title-tracking, normal);
  color: var(--ink);
}
.sp-wn__intro {
  margin: 0;
  max-width: 60ch;
  font: var(--text-body);
  color: var(--ink-secondary);
}
.sp-wn__image {
  display: block;
  width: 100%;
  /* Each screenshot keeps its own shape (16:9 preferred), uncropped */
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-media);
}
/* A screenshot with a dark-theme version: each theme shows its own */
.sp-wn__image--dark,
[data-theme="dark"] .sp-wn__image--light {
  display: none;
}
[data-theme="dark"] .sp-wn__image--dark {
  display: block;
}
.sp-wn__how {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.sp-wn__how-label {
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.sp-wn__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.sp-wn__steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-wn__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-24);
  height: var(--space-24);
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--surface-card);
  font: var(--text-caption);
  font-weight: 700;
}
.sp-wn__actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-left: auto;
}
.sp-wn__empty {
  margin: 0;
  padding: var(--space-28);
  color: var(--ink-muted);
}
/* The top bar's unread dot */
.sp-icon-btn .sp-wn-dot {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--surface-card);
}
.sp-icon-btn .sp-wn-dot[hidden] {
  display: none;
}
@media (max-width: 767px) {
  .sp-wn {
    display: block;
    height: min(75vh, 100%);
    overflow: auto;
  }
  .sp-wn[data-view="list"] .sp-wn__detail,
  .sp-wn[data-view="detail"] .sp-wn__list {
    display: none;
  }
  .sp-wn__list {
    border-right: 0;
  }
  .sp-wn__item {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--control-md);
    padding-right: var(--space-40);
    border-radius: 0;
    border-bottom: 1px solid var(--divider-row);
  }
  .sp-wn__item.is-current {
    background: transparent;
  }
  .sp-wn__item-name,
  .sp-wn__item-meta {
    width: 100%;
  }
  .sp-wn__item-go {
    display: block;
    position: absolute;
    right: var(--space-10);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
  }
  .sp-wn__article {
    padding: var(--space-16) var(--space-20) var(--space-24);
  }
  .sp-wn__back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--control-sm);
    padding: 0 var(--space-8) 0 2px;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font: var(--text-body-sm);
    cursor: pointer;
  }
  .sp-wn__nav {
    display: none;
  }
  .sp-wn__chip--inline {
    display: inline-flex;
  }
  .sp-wn[data-view="list"] ~ .sp-modal-actions {
    display: none;
  }
  .sp-wn__actions {
    width: 100%;
    flex-direction: column-reverse;
  }
  .sp-wn__actions .sp-btn {
    width: 100%;
  }
}