/* ==========================================================================
   Skandalla design system: tokens, app shell and components.
   Source of truth: https://claude.ai/artifact/WvWa4bfjbsL1zF8pvXtgKB
   Class names follow Bootstrap 5; this layer sits on top of bootstrap.min.css.
   ========================================================================== */

/* Manrope, self-hosted from @fontsource/manrope (src/app.js serves /fonts/manrope) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/manrope/manrope-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand (logo) */
  --brand-orange: #fbb03b;
  --brand-pink: #f2466a;
  --brand-purple: #853ddf;

  /* Actions */
  --primary: #853ddf;
  --primary-hover: #6e2bc4;
  --primary-soft: #f3ecfd;
  --primary-strong: #6a2bbf;
  --on-primary: #ffffff;
  --accent: #fbb03b;
  --accent-soft: #fef1dc;
  --on-accent: #1e1631;

  /* Surfaces and text */
  --surface-page: #f7f6fa;
  --surface: #ffffff;
  --surface-sunken: #f1eff5;
  --surface-nav: #1e1631;
  --ink-900: #1e1631;
  --ink-600: #5e5670;
  --ink-on-nav: #f3f0fa;
  --ink-on-nav-muted: #aba3c0;
  --border: #e6e1ee;
  --border-strong: #8b83a0;

  /* Status */
  --danger: #c23030;
  --danger-hover: #a82828;
  --danger-soft: #fdecea;
  --danger-strong: #b42318;
  --on-danger: #ffffff;
  --success: #1b7a4b;
  --success-soft: #e6f4ec;
  --warning: #8a5100;
  --warning-soft: #fef1dc;
  --focus-ring: var(--primary);

  /* Type */
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing, radius, shadow, sizes */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(30, 22, 49, 0.06), 0 1px 3px rgba(30, 22, 49, 0.08);
  --shadow-md: 0 8px 24px rgba(30, 22, 49, 0.1);
  --shadow-lg: 0 24px 48px rgba(30, 22, 49, 0.18);
  --control-md: 44px;
  --control-sm: 36px;
  --sidebar-width: 256px;
  --tabbar-height: 64px;
  --topbar-height: 56px;

  /* Legacy names still used by screen-specific styles below */
  --app-bg: var(--surface-page);
  --app-card: var(--surface);
  --app-card-soft: var(--surface-sunken);
  --app-ink: var(--ink-900);
  --app-text: var(--ink-900);
  --app-muted: var(--ink-600);
  --app-primary: var(--primary);
  --app-primary-dark: var(--primary-hover);
  --app-primary-soft: var(--primary-soft);
  --app-line: var(--border);
  --app-line-strong: var(--border-strong);
  --app-shadow: var(--shadow-md);
  --app-shadow-soft: var(--shadow-sm);

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 500;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--ink-900);
  --bs-body-bg: var(--surface-page);
  --bs-emphasis-color: var(--ink-900);
  --bs-secondary-color: var(--ink-600);
  --bs-heading-color: var(--ink-900);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 133, 61, 223;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 194, 48, 48;
  --bs-success: var(--success);
  --bs-success-rgb: 27, 122, 75;
  --bs-warning-rgb: 251, 176, 59;
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: 133, 61, 223;
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-hover-color-rgb: 110, 43, 196;
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-xxl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-focus-ring-color: rgba(133, 61, 223, 0.35);
}

/* ---------- Base ---------- */
html,
body {
  font-family: var(--font-sans);
}

body.app-shell {
  min-height: 100vh;
  color: var(--ink-900);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink-900);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1, .h1, .h2, .h3 { font-size: 1.5rem; line-height: 2rem; }
h2, .h4 { font-size: 1.1875rem; line-height: 1.625rem; font-weight: 700; }
h3, .h5, .h6 { font-size: 1rem; line-height: 1.5rem; font-weight: 700; }

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

.text-muted,
.form-text {
  color: var(--ink-600) !important;
}

.small, small { font-size: 0.875rem; }

.sk-num,
.table td,
.badge {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- App shell ---------- */
.sk-main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.sk-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-on-nav);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sk-brand:hover,
.sk-brand:focus {
  color: var(--ink-on-nav);
}

.sk-brand img {
  flex-shrink: 0;
}

.sk-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1030;
  flex-direction: column;
  gap: var(--space-5);
  width: var(--sidebar-width);
  padding: var(--space-5) var(--space-4) var(--space-4);
  overflow-y: auto;
  color: var(--ink-on-nav);
  background: var(--surface-nav);
}

.sk-sidebar .sk-brand {
  padding: 0 var(--space-3);
}

.sk-sidebar__groups {
  display: grid;
  gap: var(--space-5);
}

.sk-nav-group {
  display: grid;
  gap: 2px;
}

.sk-nav-label {
  padding: 0 var(--space-3) 6px;
  color: var(--ink-on-nav-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sk-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink-on-nav-muted);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sk-nav-link .bi {
  font-size: 1.125rem;
}

.sk-nav-link:hover,
.sk-nav-link:focus-visible {
  color: var(--ink-on-nav);
  background: rgba(255, 255, 255, 0.06);
}

.sk-nav-link.active {
  color: var(--ink-on-nav);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sk-sidebar__footer {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sk-sidebar__meta {
  padding: 0 var(--space-3) var(--space-2);
  color: var(--ink-on-nav-muted);
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sk-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--space-4), env(safe-area-inset-right, 0px)) 0 max(var(--space-4), env(safe-area-inset-left, 0px));
  background: var(--surface-nav);
}

.sk-topbar__meta {
  max-width: 50%;
  color: var(--ink-on-nav-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.sk-tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  /* iPhone: keep the tabs above the home indicator and away from the rounded corners.
     Needs viewport-fit=cover in layout.ejs, otherwise env() is always 0. */
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  padding: 0 max(var(--space-1), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--space-1), env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -4px 16px rgba(30, 22, 49, 0.06);
}

.sk-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  color: var(--ink-600);
  background: transparent;
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.sk-tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sk-tab .bi {
  font-size: 1.375rem;
  line-height: 1;
}

.sk-tab.active {
  color: var(--primary);
}

.sk-tab.active .bi::before {
  font-weight: 700 !important;
}

.offcanvas.sk-more-sheet {
  --bs-offcanvas-height: auto;
  max-height: 85vh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

.sk-more-sheet .offcanvas-header {
  justify-content: space-between;
}

.sk-more-sheet .offcanvas-title {
  margin: 0;
  font-size: 1.1875rem;
}

.sk-more-sheet .offcanvas-body {
  display: grid;
  gap: var(--space-4);
  padding-top: 0;
}

.sk-sheet-group {
  display: grid;
  gap: 2px;
}

.sk-sheet-group + .sk-sheet-group {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.sk-sheet-label {
  padding: 0 var(--space-3) 6px;
  color: var(--ink-600);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sk-sheet-link,
.sk-sheet-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink-900);
  background: transparent;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.sk-sheet-row {
  justify-content: space-between;
}

.sk-sheet-row > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.sk-sheet-link .bi,
.sk-sheet-row .bi {
  font-size: 1.125rem;
  color: var(--ink-600);
}

.sk-sheet-link:hover {
  color: var(--ink-900);
  background: var(--surface-sunken);
}

.sk-sheet-link.active {
  color: var(--primary-strong);
  background: var(--primary-soft);
}

.sk-sheet-link.active .bi {
  color: var(--primary);
}

@media (min-width: 992px) {
  body.has-app-nav {
    padding-left: var(--sidebar-width);
  }

  body.has-app-nav .sk-main {
    max-width: 1200px;
    padding: var(--space-6);
  }

  body.has-app-nav .app-update-banner,
  body.has-app-nav .cookie-banner {
    left: calc(var(--sidebar-width) + 1rem);
  }
}

@media (max-width: 991.98px) {
  body.has-app-nav {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  }

  body.has-app-nav .sk-main {
    padding-top: var(--space-4);
    padding-bottom: var(--space-5);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  body.has-app-nav .app-update-banner,
  body.has-app-nav .cookie-banner {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
}

/* ---------- Page header ---------- */
.sk-page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.sk-page-header h1 {
  margin: 0;
}

.sk-page-header p {
  max-width: 60ch;
  margin: 4px 0 0;
  color: var(--ink-600);
}

.sk-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sk-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-2);
  color: var(--ink-600);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.sk-breadcrumb:hover {
  color: var(--primary);
}

@media (max-width: 575.98px) {
  .sk-page-header__actions,
  .sk-page-header__actions .btn {
    width: 100%;
  }
}

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: 0;
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.2;
  --bs-btn-border-width: 1.5px;
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 0.45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Full-width buttons may wrap, so a long label never makes the page wider than a small phone. */
.btn.w-100 {
  white-space: normal;
  text-align: center;
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn .bi {
  font-size: 1em;
  line-height: 1;
}

.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--radius-sm);
  min-height: var(--control-sm);
}

/* Public pages and login only */
.btn-lg {
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--radius-md);
  min-height: 52px;
}

.btn-icon {
  --bs-btn-padding-x: 0;
  width: var(--control-md);
}

.btn-icon.btn-sm {
  width: var(--control-sm);
}

.btn-primary {
  --bs-btn-color: var(--on-primary);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--on-primary);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

.btn-secondary {
  --bs-btn-color: var(--ink-900);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--primary-strong);
  --bs-btn-hover-bg: var(--primary-soft);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--primary-strong);
  --bs-btn-active-bg: var(--primary-soft);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--ink-600);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-ghost {
  --bs-btn-color: var(--ink-600);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ink-900);
  --bs-btn-hover-bg: var(--surface-sunken);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ink-900);
  --bs-btn-active-bg: var(--surface-sunken);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--ink-600);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

.btn-danger-outline {
  --bs-btn-color: var(--danger-strong);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--danger-strong);
  --bs-btn-hover-bg: var(--danger-soft);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--danger-strong);
  --bs-btn-active-bg: var(--danger-soft);
  --bs-btn-active-border-color: var(--danger);
  --bs-btn-disabled-color: var(--danger-strong);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--danger);
}

.btn-danger {
  --bs-btn-color: var(--on-danger);
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--on-danger);
  --bs-btn-hover-bg: var(--danger-hover);
  --bs-btn-hover-border-color: var(--danger-hover);
  --bs-btn-active-color: var(--on-danger);
  --bs-btn-active-bg: var(--danger-hover);
  --bs-btn-active-border-color: var(--danger-hover);
}

/* Buttons on the dark marketing header */
.btn-on-dark {
  --bs-btn-color: var(--ink-on-nav);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, 0.28);
  --bs-btn-hover-color: var(--ink-900);
  --bs-btn-hover-bg: var(--ink-on-nav);
  --bs-btn-hover-border-color: var(--ink-on-nav);
  --bs-btn-active-color: var(--ink-900);
  --bs-btn-active-bg: var(--ink-on-nav);
  --bs-btn-active-border-color: var(--ink-on-nav);
}

/* ---------- Forms ---------- */
.form-label {
  margin-bottom: 6px;
  color: var(--ink-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.form-control,
.form-select {
  min-height: var(--control-md);
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  background-color: var(--surface);
  font-size: 1rem;
  font-weight: 500;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select {
  padding-right: 2.25rem;
}

textarea.form-control {
  min-height: 6rem;
}

.form-control::placeholder {
  color: var(--ink-600);
  opacity: 0.8;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  background-color: var(--surface);
  box-shadow: 0 0 0 3px rgba(133, 61, 223, 0.18);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background-color: var(--surface-sunken);
}

.form-control-sm,
.form-select-sm {
  min-height: var(--control-sm);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.form-text {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.input-group-text {
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--ink-600);
  background: var(--surface-sunken);
  font-weight: 700;
}

.form-check-input {
  width: 1.25em;
  height: 1.25em;
  border: 1.5px solid var(--border-strong);
}

.form-check-input:checked {
  border-color: var(--primary);
  background-color: var(--primary);
}

.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(133, 61, 223, 0.18);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger);
}

.invalid-feedback {
  color: var(--danger-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ---------- Cards ---------- */
.card {
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-spacer-x: var(--space-4);
  --bs-card-spacer-y: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) !important;
  background-color: var(--surface);
  box-shadow: var(--shadow-sm) !important;
}

/* Deactivated companies in the global admin list: the whole card in light red */
.card.card-inactive {
  --bs-card-bg: var(--danger-soft);
  background-color: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

@media (min-width: 768px) {
  .card {
    --bs-card-spacer-x: var(--space-5);
    --bs-card-spacer-y: var(--space-5);
  }
}

/* Replaces Bootstrap's p-4 inside cards so every card has the same inner padding */
.card > .card-body.p-4,
.card > .card-body.p-lg-4,
.card > .card-body.p-md-4,
.card > .card-body.p-lg-5 {
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x) !important;
}

.card-body {
  position: relative;
}

.card-title {
  color: var(--ink-900);
}

/* ---------- Dashboard ---------- */
/* Shortcut tiles: icon, count and name; 2 per row on phones, then as many as fit (up to 4). */
.sk-dash-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 576px) {
  .sk-dash-tiles {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
  }
}

.sk-dash-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon count" "icon label";
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--ink-900);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.sk-dash-tile:hover,
.sk-dash-tile:focus-visible {
  color: var(--ink-900);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.sk-dash-tile__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--on-accent);
  background: var(--accent-soft);
  font-size: 1.25rem;
}

.sk-dash-tile__count {
  grid-area: count;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 800;
}

.sk-dash-tile__label {
  grid-area: label;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  color: var(--ink-600);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Phones: a smaller icon leaves room for long words ("Ingredientes"). */
@media (max-width: 575.98px) {
  .sk-dash-tile {
    column-gap: var(--space-2);
    padding: var(--space-3);
  }

  .sk-dash-tile__icon {
    width: 36px;
    height: 36px;
    font-size: 1.0625rem;
  }
}

/* Very narrow phones (320px): the icon goes above the count. */
@media (max-width: 359.98px) {
  .sk-dash-tile {
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "count" "label";
    row-gap: var(--space-1);
  }
}

/* Key figures of the period: stacked on phones, side by side from tablets. */
.sk-dash-figures {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .sk-dash-figures {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .sk-dash-figure + .sk-dash-figure {
    padding-left: var(--space-5);
    border-left: 1px solid var(--border);
  }
}

/* Phones: one row per figure, the value on the right, to keep the card short. */
@media (max-width: 767.98px) {
  .sk-dash-figures {
    gap: var(--space-3);
  }

  .sk-dash-figure {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "note value";
    align-items: center;
    column-gap: var(--space-3);
  }

  .sk-dash-figure + .sk-dash-figure {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }

  .sk-dash-figure__label { grid-area: label; }
  .sk-dash-figure > :last-child { grid-area: note; }

  .sk-dash-figure__value {
    grid-area: value;
    justify-self: end;
    font-size: 1.375rem;
    line-height: 1.75rem;
  }
}

.sk-dash-figure {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.sk-dash-figure__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.sk-dash-figure__value {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 800;
}

/* Inside a card (menu figures): never more than two side by side. */
@media (min-width: 768px) {
  .sk-dash-figures--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Lists of changes: name and figures on the left, the change on the right. */
.sk-dash-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sk-dash-list > li + li {
  border-top: 1px solid var(--border);
}

.sk-dash-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--ink-900);
  text-decoration: none;
}

a.sk-dash-row:hover,
a.sk-dash-row:focus-visible {
  color: var(--ink-900);
}

a.sk-dash-row:hover .sk-dash-row__name {
  color: var(--primary);
}

.sk-dash-row__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  background: var(--surface-sunken);
}

.sk-dash-row__main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sk-dash-row__name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 150ms ease;
}

.sk-dash-row__meta {
  color: var(--ink-600);
  font-size: 0.875rem;
}

.sk-dash-row__warning {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 2px;
  color: var(--warning);
  font-size: 0.875rem;
  font-weight: 600;
}

.sk-dash-row .badge {
  flex: none;
}

.sk-dash-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--ink-600);
}

.sk-dash-empty .bi {
  color: var(--success);
}

/* "Worth a look": each check opens to the first items, linked. */
.sk-dash-checks {
  display: grid;
  gap: var(--space-3);
}

.sk-dash-check {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.sk-dash-check__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  list-style: none;
}

summary.sk-dash-check__head {
  cursor: pointer;
}

summary.sk-dash-check__head::-webkit-details-marker {
  display: none;
}

.sk-dash-check__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--warning);
  background: var(--warning-soft);
}

.sk-dash-check__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sk-dash-check__chevron {
  flex: none;
  margin-top: 6px;
  color: var(--ink-600);
  transition: transform 150ms ease;
}

.sk-dash-check[open] .sk-dash-check__chevron {
  transform: rotate(180deg);
}

.sk-dash-check__items {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0 44px;
  border-top: 1px solid var(--border);
  list-style: none;
}

.sk-dash-check__items a {
  display: block;
  overflow: hidden;
  padding: 2px 0;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sk-dash-tile,
  .sk-dash-row__name,
  .sk-dash-check__chevron {
    transition: none;
  }
}

/* ---------- Badges ---------- */
.badge {
  --bs-badge-padding-x: 10px;
  --bs-badge-padding-y: 4px;
  --bs-badge-font-size: 0.8125rem;
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  line-height: 1.125rem;
  /* A long status wraps inside its card instead of running out of it (Bootstrap keeps it on one line). */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

.badge > .bi {
  flex: none;
}

/* Tables scroll sideways, so their statuses stay on one line. */
.table .badge {
  white-space: nowrap;
}

.badge-price,
.badge.text-bg-primary {
  color: var(--ink-900) !important;
  background: var(--accent-soft) !important;
}

.badge-neutral,
.badge.text-bg-light,
.badge.text-bg-secondary {
  color: var(--ink-600) !important;
  background: var(--surface-sunken) !important;
}

.badge-brand,
.badge.text-bg-info,
.badge.text-bg-dark {
  color: var(--primary-strong) !important;
  background: var(--primary-soft) !important;
}

.badge-success,
.badge.text-bg-success {
  color: var(--success) !important;
  background: var(--success-soft) !important;
}

.badge-warning,
.badge.text-bg-warning {
  color: var(--warning) !important;
  background: var(--warning-soft) !important;
}

.badge-danger,
.badge.text-bg-danger {
  color: var(--danger-strong) !important;
  background: var(--danger-soft) !important;
}

/* Filter chips: selectable, unlike badges */
.sk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-sm);
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--ink-600);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sk-chip:hover {
  color: var(--primary-strong);
  border-color: var(--primary);
}

.sk-chip.active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

/* Suggestions in a form (e.g. operating costs): a dozen chips that should not push the fields down */
.sk-chip-sm {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .sk-chip-sm {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.75rem;
  }
}

/* ---------- Alerts ---------- */
.alert {
  --bs-alert-border-radius: var(--radius-lg);
  --bs-alert-padding-x: var(--space-4);
  --bs-alert-padding-y: 14px;
  font-weight: 600;
}

.alert-success {
  --bs-alert-color: var(--success);
  --bs-alert-bg: var(--success-soft);
  --bs-alert-border-color: rgba(27, 122, 75, 0.25);
}

.alert-warning {
  --bs-alert-color: var(--warning);
  --bs-alert-bg: var(--warning-soft);
  --bs-alert-border-color: rgba(138, 81, 0, 0.25);
}

.alert-danger {
  --bs-alert-color: var(--danger-strong);
  --bs-alert-bg: var(--danger-soft);
  --bs-alert-border-color: rgba(194, 48, 48, 0.25);
}

.alert:has(> .bi) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.alert > .bi {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.375rem;
}

.alert > .bi + div > strong:first-child {
  display: block;
}

.alert-info,
.alert-primary {
  --bs-alert-color: var(--primary-strong);
  --bs-alert-bg: var(--primary-soft);
  --bs-alert-border-color: rgba(133, 61, 223, 0.25);
}

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-900);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(243, 236, 253, 0.6);
  --bs-table-striped-bg: var(--surface-sunken);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 12px var(--space-4);
}

.table thead th {
  color: var(--ink-600);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td.num,
.table th.num {
  text-align: right;
  font-weight: 700;
}

.table-responsive {
  border-radius: var(--radius-lg);
}

/* ---------- Overlays ---------- */
.dropdown-menu {
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-box-shadow: var(--shadow-md);
  --bs-dropdown-link-active-bg: var(--primary-soft);
  --bs-dropdown-link-active-color: var(--primary-strong);
  --bs-dropdown-link-hover-bg: var(--surface-sunken);
  padding: 6px;
  box-shadow: var(--shadow-md);
}

.dropdown-item {
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.modal-content {
  --bs-modal-border-radius: var(--radius-xl);
  border: 0;
  box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
  border-color: var(--border);
}

.list-group-item {
  border-color: var(--border);
  background: transparent;
}

.pagination {
  --bs-pagination-color: var(--ink-900);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--primary-soft);
  --bs-pagination-hover-color: var(--primary-strong);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(133, 61, 223, 0.18);
  --bs-pagination-border-radius: var(--radius-md);
  font-weight: 700;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--primary);
  --bs-nav-pills-border-radius: var(--radius-md);
}

/* ==========================================================================
   Screen-specific styles
   ========================================================================== */

.app-lot-section {
  padding: 1rem;
  border: 1px solid var(--app-line);
  border-radius: 1.25rem;
}

.app-lot-section--direct {
  background: linear-gradient(180deg, rgba(133, 61, 223, 0.07), rgba(133, 61, 223, 0.02));
  border-color: rgba(133, 61, 223, 0.18);
}

.app-lot-section--inherited {
  background: linear-gradient(180deg, rgba(30, 22, 49, 0.045), rgba(30, 22, 49, 0.02));
  border-color: rgba(30, 22, 49, 0.12);
}

.app-lot-section__header {
  display: flex;
  align-items: center;
  margin-bottom: 0.9rem;
}

.app-lot-section__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--app-ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 22, 49, 0.08);
}

.app-lot-item {
  min-width: 0;
  margin-bottom: 0 !important;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 22, 49, 0.08);
}

.app-lot-item > [class*="col-"] {
  min-width: 0;
}

.app-lot-item .fw-semibold,
.app-lot-item .text-muted {
  overflow-wrap: anywhere;
}

.app-traceability-image-indicator {
  color: var(--app-primary-dark);
  font-size: 1.05rem;
  line-height: 1;
}

.app-lot-list-card__header,
.app-lot-list-card__copy,
.app-lot-list-card__badges,
.app-lot-list-card__actions {
  min-width: 0;
}

.app-lot-list-card__copy {
  flex: 1 1 auto;
}

.app-lot-list-card__title,
.app-lot-list-card__source {
  overflow-wrap: anywhere;
}

.app-lot-list-card__badges {
  flex: 0 1 auto;
  max-width: 46%;
}

.app-lot-list-card__badges .badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: end;
}

@media (max-width: 575.98px) {
  .app-lot-list-card__header {
    flex-wrap: wrap;
  }

  .app-lot-list-card__badges {
    width: 100%;
    max-width: none;
    flex-direction: row !important;
    align-items: center !important;
  }

  .app-lot-list-card__badges .badge {
    text-align: start;
  }

  .app-lot-list-card__actions .btn,
  .app-lot-list-card__actions form {
    flex: 1 1 auto;
  }
}

.app-lot-item--inherited,
.app-lot-section--inherited .app-lot-item {
  background: rgba(255, 255, 255, 0.56);
  border-style: dashed;
}

.app-lot-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  color: var(--app-primary);
  border: 1.5px solid rgba(133, 61, 223, 0.26);
  background: rgba(133, 61, 223, 0.06);
}

.app-lot-toggle-btn:hover,
.app-lot-toggle-btn:focus {
  color: #fff;
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.app-lot-toggle-btn.is-expanded {
  color: var(--app-ink);
  border-color: rgba(30, 22, 49, 0.16);
  background: rgba(30, 22, 49, 0.06);
}

.app-lot-toggle-btn.is-expanded:hover,
.app-lot-toggle-btn.is-expanded:focus {
  color: #fff;
  background: var(--ink-900);
  border-color: var(--ink-900);
}

.app-search-input {
  font-size: 16px;
  padding-right: 3rem;
}

.app-search-field {
  position: relative;
}

.app-search-clear {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  color: var(--app-muted);
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
}

.app-search-clear:hover,
.app-search-clear:focus {
  color: var(--app-ink);
  background: rgba(30, 22, 49, 0.06);
}

.app-inline-search {
  min-height: 44px;
}

.app-inline-search-results {
  max-height: 24rem;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(30, 22, 49, 0.08);
  border-radius: 18px;
  box-shadow: var(--app-shadow-soft);
}

.app-row-remove-column {
  display: flex;
  align-items: flex-start;
}

.app-row-remove-button {
  width: 100%;
  min-height: 44px;
}

.app-inline-action-form {
  display: inline-flex;
  margin: 0;
}

.app-inline-action-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dish-form-image-preview {
  padding: 1rem;
  border: 1px solid var(--app-line);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.72);
}

.dish-form-image-preview__image {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: var(--app-shadow-soft);
}

.dish-index-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dish-index-card__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 7rem;
}

.dish-index-card__thumb {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: var(--app-shadow-soft);
  border: 1px solid var(--app-line);
  background: #fff;
}

.dish-show-image-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  max-height: 20rem;
  padding: 0.75rem;
  border-radius: 1.5rem;
  background: var(--surface-sunken);
  border: 1px solid var(--app-line);
  overflow: hidden;
}

.dish-show-image-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 13.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.dish-show-image {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 18rem;
  object-fit: contain;
  border-radius: 1.25rem;
  background: #fff;
}

.dish-show-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 12rem;
  padding: 1rem;
  color: var(--app-muted);
  border-radius: 1.5rem;
  background: var(--surface-sunken);
  border: 1px dashed var(--app-line-strong);
}

.dish-show-image-empty i {
  font-size: 2rem;
  color: var(--app-primary);
}

.dish-image-modal-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--surface-sunken);
}

.dish-image-modal-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: #fff;
  border-radius: 1rem;
}

.dish-finance-card {
  background: var(--surface-sunken);
}

@media (max-width: 767.98px) {
  .dish-show-image-shell {
    min-height: 12rem;
    max-height: 16rem;
    padding: 0.5rem;
  }

  .dish-show-image-button {
    min-height: 11rem;
  }

  .dish-show-image {
    max-height: 14rem;
  }

  .dish-image-modal-shell {
    padding: 0.75rem;
  }
}

.dish-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  color: var(--ink-900);
  background: transparent;
  text-align: left;
}

.dish-collapse-toggle:hover,
.dish-collapse-toggle:focus {
  color: var(--app-ink);
}

.dish-collapse-toggle__icon {
  font-size: 1rem;
  color: var(--app-primary);
  transition: transform 0.2s ease;
}

.dish-collapse-toggle[aria-expanded="true"] .dish-collapse-toggle__icon {
  transform: rotate(180deg);
}

.app-upload-panel {
  border: 1px solid rgba(30, 22, 49, 0.08);
  border-radius: 20px;
  padding: 0.9rem;
  background: linear-gradient(180deg, rgba(133, 61, 223, 0.03), rgba(255, 255, 255, 0.96));
}

.app-upload-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.app-upload-panel__button {
  flex: 1 1 200px;
  min-height: 46px;
  border-radius: 999px;
  font-weight: 700;
}

.app-upload-panel__status {
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px dashed rgba(30, 22, 49, 0.12);
  color: var(--app-muted);
  font-size: 0.92rem;
  line-height: 1.35;
  word-break: break-word;
}

.app-upload-panel__status.is-filled {
  color: var(--app-ink);
  border-style: solid;
  border-color: rgba(133, 61, 223, 0.16);
}

.app-section-group-label {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.app-sortable-item {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.app-sortable-item.is-dragging {
  position: relative;
  z-index: 2;
  border-color: var(--primary);
  box-shadow: var(--shadow-md) !important;
  transform: scale(1.01);
}

/* While sorting, nothing in the list gets selected or highlighted by the long press */
[data-sortable-sections].is-sorting {
  user-select: none;
  -webkit-user-select: none;
}

.app-sortable-handle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 1.25rem;
  cursor: grab;
  /* The handle owns the gesture: no page scroll, text selection or iOS callout while dragging */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.app-sortable-item.is-dragging .app-sortable-handle {
  cursor: grabbing;
}

.ingredient-meta-list dt,
.ingredient-meta-list dd {
  margin-bottom: 0.55rem;
}

.ingredient-meta-list dt {
  color: var(--app-muted);
  font-weight: 700;
}

.service-readonly {
  font-weight: 700;
  color: var(--app-ink);
  background: var(--surface-sunken);
}

.chart-shell {
  position: relative;
  min-height: 260px;
}

.history-filters .form-control,
.history-filters .form-select {
  background: #fff;
}

.cookie-banner {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: max(1rem, env(safe-area-inset-left, 0px));
  z-index: 1080;
}

.cookie-banner__content {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border: 1px solid var(--app-line);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--app-shadow);
  backdrop-filter: blur(10px);
}

@media (max-width: 767px) {
  .cookie-banner__content {
    flex-direction: column;
    align-items: stretch;
  }
}

.landing-main {
  overflow-x: clip;
}

.app-inline-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.app-update-banner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  width: min(26rem, calc(100vw - 2rem));
}

.app-update-banner__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(30, 22, 49, 0.1);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 45px rgba(30, 22, 49, 0.18);
  backdrop-filter: blur(14px);
}

.app-update-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.app-update-banner__copy strong {
  color: var(--app-text);
  font-size: 0.95rem;
}

.app-update-banner__copy span {
  color: var(--app-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.app-update-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.traceability-print-image-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  max-height: 12rem;
  height: 12rem;
  padding: 0.5rem;
  border-radius: 1.25rem;
  background: var(--surface-sunken);
  border: 1px solid var(--app-line);
  overflow: hidden;
}

.traceability-print-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 1rem;
  background: #fff;
}

.traceability-print-card .card,
.traceability-print-card .card-body,
.traceability-print-image-card,
.traceability-print-image-shell {
  page-break-inside: avoid;
  break-inside: avoid;
}

@media print {
  body.traceability-print-document {
    background: #fff !important;
  }

  .traceability-print-page {
    max-width: 210mm;
    padding: 0 !important;
  }

  .traceability-print-card,
  .traceability-print-card .card,
  .traceability-print-card .shadow-sm {
    box-shadow: none !important;
    border-color: rgba(30, 22, 49, 0.12) !important;
  }

  .traceability-print-card .card-body {
    padding: 0.9rem !important;
  }

  .traceability-print-image-shell {
    min-height: 70mm;
    max-height: 70mm;
    height: 70mm;
    padding: 3mm;
  }

  .traceability-print-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}

@media (max-width: 767px) {
  .app-update-banner {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }

  .app-update-banner__body {
    align-items: stretch;
    flex-direction: column;
  }

  .app-update-banner__actions {
    justify-content: flex-end;
  }

  .dish-index-card__aside {
    min-width: 5.5rem;
  }

  .dish-index-card__thumb {
    width: 5.25rem;
    height: 5.25rem;
  }
}

/* ---------- Confirm dialog ---------- */
.sk-dialog {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
}

.sk-dialog h2 {
  margin: 0 0 var(--space-2);
}

.sk-dialog p {
  margin: 0 0 var(--space-5);
  color: var(--ink-600);
}

.sk-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Notifications offer when the installed app first opens. */
.sk-push-install__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-3);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.5rem;
}

/* ---------- Auth screens (login, forgot and reset password) ---------- */
.sk-auth-main {
  padding: 0;
}

.sk-auth {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface-page);
}

.sk-auth__brand {
  display: none;
}

.sk-auth__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-7) + env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
}

.sk-auth__lang {
  position: absolute;
  top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

.sk-auth__card {
  display: grid;
  gap: var(--space-5);
  width: 100%;
  max-width: 420px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.sk-auth__card > .alert {
  margin: 0;
}

.sk-auth__card > .sk-breadcrumb {
  margin-bottom: calc(var(--space-2) * -1);
}

.sk-auth__mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sk-auth__header h1 {
  margin: 0 0 var(--space-1);
}

.sk-auth__header p {
  margin: 0;
  color: var(--ink-600);
}

.sk-auth__form {
  display: grid;
  gap: var(--space-4);
}

.sk-auth__form .btn {
  margin-top: var(--space-2);
}

.sk-auth__label-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.sk-auth__link {
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.sk-auth__link:hover {
  text-decoration: underline;
}

/* Sign-in providers (Google, Microsoft, Apple): neutral buttons with the provider's own mark,
   as their brand guidelines ask, so they never compete with the primary action. */
.sk-oauth {
  display: grid;
  gap: var(--space-3);
}

.sk-oauth__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sk-oauth__btn:hover,
.sk-oauth__btn:focus-visible {
  background: var(--surface-sunken);
  border-color: var(--ink-900);
  color: var(--ink-900);
}

.sk-oauth__btn svg {
  flex: none;
}

.sk-oauth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-600);
  font-size: 0.875rem;
}

.sk-oauth__divider::before,
.sk-oauth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sk-auth__legal,
.sk-auth__hint {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.sk-auth__switch {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--ink-600);
}

.sk-auth__switch a {
  font-weight: 700;
}

.sk-code-input {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 992px) {
  .sk-auth {
    grid-template-columns: minmax(360px, 5fr) 7fr;
  }

  .sk-auth__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-7);
    padding: var(--space-7);
    color: var(--ink-on-nav);
    background: var(--surface-nav);
  }

  .sk-auth__brand-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .sk-auth__claim {
    max-width: 16ch;
    margin: 0 0 var(--space-4);
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .sk-auth__claim::after {
    content: "";
    display: block;
    width: 56px;
    height: 6px;
    margin-top: var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--accent);
  }

  .sk-auth__sub {
    max-width: 38ch;
    margin: 0;
    color: var(--ink-on-nav-muted);
    font-size: 1rem;
    line-height: 1.6;
  }

  .sk-auth__mobile-brand {
    display: none;
  }

  .sk-auth__card {
    padding: var(--space-6);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* ---------- Key figures (dish detail) ---------- */
.sk-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .sk-kpis {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
  }
}

.sk-kpi {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* A status under a figure (menu price above or below the suggested one) keeps its own width. */
.sk-kpi .badge {
  justify-self: start;
}

.sk-kpi__label {
  color: var(--ink-600);
  font-size: 0.875rem;
  font-weight: 700;
}

.sk-kpi__value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sk-kpi--highlight {
  border-color: transparent;
  color: var(--on-accent);
  background: var(--accent);
}

.sk-kpi--highlight .sk-kpi__label {
  color: var(--on-accent);
}

/* Lightbulb on the sale price: explains the markup and leads to Settings */
.sk-kpi--hint {
  position: relative;
  padding-right: calc(var(--space-4) + 36px);
}

.sk-kpi__hint {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--on-accent);
  background: rgba(30, 22, 49, 0.1);
  font-size: 1.1rem;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.sk-kpi__hint:hover,
.sk-kpi__hint[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.55);
}

.sk-kpi__hint[aria-expanded="true"] {
  transform: scale(1.06);
}

.sk-kpi__hint:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.sk-price-hint {
  --bs-popover-max-width: 280px;
  --bs-popover-border-color: var(--border);
  --bs-popover-body-padding-x: var(--space-4);
  --bs-popover-body-padding-y: var(--space-3);
  font-size: 0.9rem;
}

/* ---------- Cost lists (dish and prepared detail) ---------- */
.sk-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sk-block-head__total {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sk-cost-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sk-cost-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.sk-cost-list__name {
  font-weight: 700;
}

.sk-cost-list__meta {
  color: var(--ink-600);
  font-size: 0.875rem;
}

.sk-cost-list__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sk-cost-list li.sk-cost-list__empty {
  color: var(--ink-600);
}

/* ---------- Segmented tabs ---------- */
.sk-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.sk-tabs .nav-link {
  min-height: var(--control-sm);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 700;
}

.sk-tabs .nav-link:hover {
  color: var(--ink-900);
}

.sk-tabs .nav-link.active {
  color: var(--ink-900);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Drinks tabs: the three sections in one row, full width on phones */
.sk-drink-tabs {
  display: flex;
  flex-wrap: nowrap;
}

.sk-drink-tabs .nav-link {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--control-md);
  padding: 0 10px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .sk-drink-tabs {
    display: inline-flex;
  }

  .sk-drink-tabs .nav-link {
    flex: 0 0 auto;
    padding: 0 16px;
  }
}

/* Wine glass: Bootstrap Icons has none, drawn in the same line style */
.bi.sk-icon-wine::before {
  content: "";
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 1.5h6.8c.45 2.3.3 4.3-.65 5.7A3.3 3.3 0 0 1 8 8.8a3.3 3.3 0 0 1-2.75-1.6C4.3 5.8 4.15 3.8 4.6 1.5zM4.75 4.6h6.5M8 8.8v5.2M5.4 14.5h5.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 1.5h6.8c.45 2.3.3 4.3-.65 5.7A3.3 3.3 0 0 1 8 8.8a3.3 3.3 0 0 1-2.75-1.6C4.3 5.8 4.15 3.8 4.6 1.5zM4.75 4.6h6.5M8 8.8v5.2M5.4 14.5h5.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Email previews (global admin) ---------- */
.sk-email-list .list-group-item {
  padding: var(--space-3) var(--space-4);
}

.sk-email-list .list-group-item.active {
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-color: var(--border);
}

.sk-email-list__meta {
  color: var(--ink-600);
}

.sk-email-preview {
  display: block;
  width: 100%;
  height: 860px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #f7f6fa;
}

.min-w-0 {
  min-width: 0;
}

.chart-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin: 0;
  color: var(--ink-600);
  text-align: center;
}

/* ---------- Share meters (global admin statistics) ---------- */
.sk-meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.sk-meter > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: var(--radius-pill);
  background: var(--primary);
}

.sk-meter--pink > span {
  background: var(--brand-pink);
}

/* ---------- Entity cards and overflow menus ---------- */
.sk-entity-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.sk-card-link {
  color: inherit;
  text-decoration: none;
}

.sk-card-link:hover {
  color: var(--primary);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
}

.dropdown-item .bi {
  color: var(--ink-600);
}

.dropdown-item--danger,
.dropdown-item--danger .bi {
  color: var(--danger-strong);
}

.dropdown-item--danger:hover,
.dropdown-item--danger:focus {
  color: var(--danger-strong);
  background: var(--danger-soft);
}

.dropdown-menu form {
  margin: 0;
}

/* ==========================================================================
   Public website (home, legal pages)
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.landing-page [id] {
  scroll-margin-top: 88px;
}

/* iPhone in landscape: keep public content clear of the notch and rounded corners */
.landing-page .container {
  padding-left: max(calc(var(--bs-gutter-x, 1.5rem) * 0.5), env(safe-area-inset-left, 0px));
  padding-right: max(calc(var(--bs-gutter-x, 1.5rem) * 0.5), env(safe-area-inset-right, 0px));
}

.pub-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--primary-strong);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pub-eyebrow--on-dark {
  color: var(--accent);
}

.pub-lead {
  max-width: 58ch;
  color: var(--ink-600);
  font-size: 1.125rem;
  line-height: 1.65;
}

/* Header */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--surface-nav);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pub-header .navbar {
  min-height: 68px;
  padding-top: env(safe-area-inset-top, 0px);
  gap: var(--space-3);
}

.pub-header__toggler {
  border: 0;
  color: var(--ink-on-nav);
  font-size: 1.75rem;
  line-height: 1;
}

.pub-header__toggler:focus {
  box-shadow: none;
}

.pub-header .nav-link {
  padding: 0.5rem 0.875rem !important;
  border-radius: var(--radius-md);
  color: var(--ink-on-nav-muted);
  font-weight: 700;
}

.pub-header .nav-link:hover,
.pub-header .nav-link:focus-visible {
  color: var(--ink-on-nav);
  background: rgba(255, 255, 255, 0.06);
}

.pub-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 991.98px) {
  .pub-header .navbar-collapse {
    padding: var(--space-3) 0 var(--space-5);
  }

  .pub-header__actions {
    margin-top: var(--space-3);
  }

  /* Bootstrap places navbar menus without Popper; the open menu sits at the left here, so it opens
     to the right of its button instead of off the screen. */
  .pub-header .sk-lang-menu .dropdown-menu[data-bs-popper] {
    right: auto;
    left: 0;
  }
}

/* Hero */
.pub-hero {
  padding: var(--space-7) 0;
  background: var(--surface-page);
}

.pub-hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 992px) {
  .pub-hero {
    padding: 88px 0 96px;
  }

  .pub-hero__grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

.pub-hero h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.pub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pub-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-600);
  font-weight: 700;
}

.pub-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pub-hero__points .bi {
  color: var(--success);
  font-size: 1.125rem;
}

@media (max-width: 575.98px) {
  .pub-hero__actions .btn {
    width: 100%;
  }
}

/* Product mock (real app components with example data) */
.pub-mock {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-page);
  box-shadow: var(--shadow-lg);
}

.pub-mock__bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: var(--surface-nav);
}

.pub-mock__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.pub-mock__bar span:first-child {
  background: var(--brand-pink);
}

.pub-mock__bar span:nth-child(2) {
  background: var(--accent);
}

.pub-mock__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.pub-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.pub-mock__title {
  margin-top: var(--space-2);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pub-mock__kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--space-2) !important;
}

.pub-mock__kpis .sk-kpi {
  padding: var(--space-3);
}

.pub-mock__kpis .sk-kpi__value {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.pub-mock__list {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (max-width: 400px) {
  .pub-mock__kpis .sk-kpi__label {
    font-size: 0.75rem;
  }

  .pub-mock__kpis .sk-kpi__value {
    font-size: 1.0625rem;
  }
}

/* Clients */
.pub-clients {
  padding: var(--space-6) 0;
  border-block: 1px solid var(--border);
  background: var(--surface);
}

.pub-clients__title {
  margin: 0 0 var(--space-4);
  color: var(--ink-600);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.pub-clients__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub-client {
  display: grid;
  place-items: center;
  width: 220px;
  height: 96px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pub-client:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.pub-client img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
}

.pub-client--dark {
  border-color: transparent;
  background: #000000;
}

/* Sections */
.pub-section {
  padding: 64px 0;
}

@media (min-width: 992px) {
  .pub-section {
    padding: 96px 0;
  }
}

.pub-section--tint {
  background: var(--surface);
}

.pub-section--dark {
  color: var(--ink-on-nav);
  background: var(--surface-nav);
}

.pub-section--dark h2 {
  color: var(--ink-on-nav);
}

.pub-section--dark .pub-lead {
  color: var(--ink-on-nav-muted);
}

.pub-section__head {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.pub-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.pub-section h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.pub-section h3 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 800;
}

/* Steps */
.pub-steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .pub-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-step {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.pub-step__number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--on-accent);
  background: var(--accent);
  font-size: 1.25rem;
  font-weight: 800;
}

.pub-step p,
.pub-feature p,
.pub-trust__item p {
  margin: 0;
  color: var(--ink-600);
}

/* Features */
.pub-features {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .pub-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .pub-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-feature {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}

.pub-feature__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 1.25rem;
}

/* Split layouts (traceability, contact) */
.pub-split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.pub-split--top {
  align-items: start;
}

@media (min-width: 992px) {
  .pub-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

.pub-checklist {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.pub-checklist li {
  display: flex;
  gap: var(--space-3);
}

.pub-checklist .bi {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.pub-checklist--light {
  margin: 0;
}

.pub-checklist--light .bi {
  color: var(--primary);
}

.pub-lot {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  color: var(--ink-900);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.pub-lot__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.125rem;
}

.pub-lot .sk-data-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.pub-lot .sk-data-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.pub-lot .sk-data-list dt {
  color: var(--ink-600);
  font-weight: 600;
}

.pub-lot .sk-data-list dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.pub-lot__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 120px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--ink-600);
  background: var(--surface-sunken);
  font-weight: 700;
}

/* Comparison */
.pub-compare {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.pub-compare .table {
  min-width: 640px;
}

.pub-compare .table th[scope="row"] {
  font-weight: 700;
}

.pub-compare .table td {
  color: var(--ink-600);
}

.pub-compare .table .bi {
  margin-right: var(--space-2);
}

.pub-compare .table .pub-compare__us {
  background: rgba(243, 236, 253, 0.7);
}

.pub-compare .table td.pub-compare__us {
  color: var(--ink-900);
  font-weight: 700;
}

.pub-compare__no {
  color: var(--danger-strong);
}

.pub-compare__yes {
  color: var(--success);
}

/* Testimonials */
.pub-testimonials {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .pub-testimonials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pub-testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}

.pub-testimonial blockquote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 600;
}

.pub-testimonial blockquote p {
  margin: 0;
}

.pub-testimonial blockquote p::before {
  content: "\201C";
  color: var(--accent);
  font-weight: 800;
}

.pub-testimonial blockquote p::after {
  content: "\201D";
  color: var(--accent);
  font-weight: 800;
}

.pub-testimonial figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pub-testimonial figcaption > span:last-child {
  display: grid;
  color: var(--ink-600);
  font-size: 0.875rem;
}

.pub-testimonial figcaption strong {
  color: var(--ink-900);
  font-size: 1rem;
}

.pub-testimonial__logo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 52px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.pub-testimonial__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Pricing */
.pub-plan {
  display: grid;
  gap: var(--space-5);
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-6);
  border: 2px solid var(--primary);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.pub-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-2);
}

.pub-plan__price strong {
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pub-plan__price span {
  color: var(--ink-600);
  font-size: 1.125rem;
  font-weight: 700;
}

.pub-plan__description,
.pub-plan__note {
  margin: 0;
  color: var(--ink-600);
}

.pub-plan__note {
  font-size: 0.9375rem;
  text-align: center;
}

.pub-plan__note + .pub-plan__note {
  margin-top: calc(var(--space-4) * -1);
}

/* Trust */
.pub-trust {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .pub-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .pub-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pub-trust__item {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}

.pub-trust__item .bi {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--primary);
  font-size: 1.5rem;
}

/* FAQ */
.pub-faq__list {
  display: grid;
  gap: var(--space-3);
  max-width: 52rem;
}

.pub-faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.pub-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.pub-faq__item summary::-webkit-details-marker {
  display: none;
}

.pub-faq__item summary .bi {
  flex-shrink: 0;
  color: var(--primary);
  transition: transform 0.15s ease;
}

.pub-faq__item[open] summary .bi {
  transform: rotate(180deg);
}

.pub-faq__item p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  color: var(--ink-600);
}

/* Contact */
.pub-contact-direct {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}

.pub-contact-direct p {
  margin: 4px 0 var(--space-2);
  color: var(--ink-600);
}

.pub-contact-direct__email {
  color: var(--primary-strong);
  font-weight: 800;
  user-select: all;
}

.pub-about {
  margin-top: var(--space-6);
}

.pub-about h3 {
  margin-bottom: var(--space-3);
}

.pub-about p {
  color: var(--ink-600);
}

.pub-first-layer {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Footer */
.pub-footer {
  padding: var(--space-7) 0 calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  color: var(--ink-on-nav-muted);
  background: var(--surface-nav);
}

.pub-footer__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .pub-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.pub-footer h2 {
  margin-bottom: var(--space-3);
  color: var(--ink-on-nav);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pub-footer ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub-footer a {
  color: var(--ink-on-nav-muted);
  text-decoration: none;
}

/* Comfortable tap targets on phones */
.pub-footer li a {
  display: inline-block;
  padding: 2px 0;
}

.pub-footer a:hover {
  color: var(--ink-on-nav);
}

.pub-footer__brand p {
  max-width: 32ch;
  margin: var(--space-3) 0 0;
}

.pub-footer__email {
  color: var(--ink-on-nav);
  user-select: all;
}

.pub-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
}

/* Legal pages */
.pub-legal {
  padding: var(--space-7) 0;
  background: var(--surface-page);
}

.pub-legal__article {
  max-width: 50rem;
  margin: 0 auto;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

@media (min-width: 768px) {
  .pub-legal__article {
    padding: var(--space-7);
  }
}

.pub-legal__header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.pub-legal__header h1 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.pub-legal__header p {
  margin: 0;
  color: var(--ink-600);
}

.pub-legal__article h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 1.25rem;
}

.pub-legal__article p,
.pub-legal__article li {
  line-height: 1.7;
}

.pub-legal__owner {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.pub-legal__owner > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-3);
}

.pub-legal__owner dt {
  color: var(--ink-600);
  font-weight: 600;
}

.pub-legal__owner dd {
  margin: 0;
  font-weight: 700;
}

.pub-legal__table {
  font-size: 0.9375rem;
}

.pub-legal__table td {
  vertical-align: top;
}

/* Billing switch (yearly recommended, monthly optional). Works without JavaScript. */
.pub-billing__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pub-billing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: var(--space-4);
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.pub-billing label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-md);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.pub-billing__save {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  color: var(--on-accent);
  background: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}

#billingYearly:checked ~ .pub-billing label[for="billingYearly"],
#billingMonthly:checked ~ .pub-billing label[for="billingMonthly"] {
  color: var(--ink-900);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

#billingYearly:focus-visible ~ .pub-billing label[for="billingYearly"],
#billingMonthly:focus-visible ~ .pub-billing label[for="billingMonthly"] {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#billingYearly:checked ~ .pub-plan__option[data-billing="monthly"],
#billingMonthly:checked ~ .pub-plan__option[data-billing="yearly"] {
  display: none;
}

.pub-plan__option {
  margin-top: var(--space-4);
}

.pub-plan__option .pub-plan__price {
  margin-top: var(--space-2);
}

.pub-plan__tax {
  align-self: flex-start;
  margin-left: 2px;
  color: var(--ink-600);
  font-size: 0.8125rem;
  font-weight: 600;
}

.pub-plan__detail {
  margin: 0 0 var(--space-2);
  color: var(--ink-900);
  font-weight: 600;
}

.cf-turnstile[data-turnstile-lazy] {
  min-height: 78px;
}

/* Cloudflare draws Turnstile 300px wide; on narrow phones it is scaled down to fit its box
   (the negative margin gives back the height it no longer uses). */
.sk-captcha {
  container-type: inline-size;
}

.sk-captcha .cf-turnstile {
  transform-origin: 0 0;
}

@container (max-width: 303.98px) {
  .sk-captcha .cf-turnstile {
    transform: scale(0.9);
    margin-bottom: -8px;
  }
}

@container (max-width: 273.98px) {
  .sk-captcha .cf-turnstile {
    transform: scale(0.8);
    margin-bottom: -16px;
  }
}

@container (max-width: 242.98px) {
  .sk-captcha .cf-turnstile {
    transform: scale(0.75);
    margin-bottom: -20px;
  }
}

/* Back-to-top button (public pages) */
.sk-back-to-top {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 1020;
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  font-size: 1.25rem;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sk-back-to-top.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

@media (min-width: 992px) {
  .sk-back-to-top {
    right: var(--space-6);
    bottom: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-back-to-top {
    transform: none;
  }
}

/* Language switcher (public site, login and app): globe + current language, native names in the menu */
.sk-lang-menu__toggle {
  gap: 6px;
}

.sk-lang-menu__toggle .bi-globe2 {
  font-size: 1rem;
}

.sk-lang-menu__chevron {
  font-size: 0.75rem !important;
  opacity: 0.8;
}

.sk-lang-menu .dropdown-menu {
  min-width: 11rem;
}

.sk-lang-menu .dropdown-item .bi {
  color: var(--primary);
}

.sk-lang-menu--block .sk-lang-menu__toggle {
  width: 100%;
  justify-content: flex-start;
}

.sk-lang-menu--block .sk-lang-menu__chevron {
  margin-left: auto;
}

.sk-sidebar__lang {
  margin: 0 0 var(--space-2);
}

/* Notice for apps installed from the old address (public host, standalone mode) */
.pub-moved {
  color: var(--on-accent);
  background: var(--accent);
}

.pub-moved__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-3);
}

.pub-moved__inner > div {
  display: grid;
  flex: 1 1 16rem;
  font-size: 0.9375rem;
}

.pub-moved__inner > .bi {
  font-size: 1.25rem;
}

/* Dish photos: three slots on the form */
.dish-image-slot {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dish-image-slot.is-new {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.dish-image-slot.is-removing {
  border-color: var(--danger);
  border-style: dashed;
}

.dish-image-slot__preview {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: var(--surface-sunken);
}

.dish-image-slot__number {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--surface-nav);
  color: var(--ink-on-nav);
  font-size: 0.8rem;
  font-weight: 700;
}

.dish-image-slot__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dish-image-slot__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 100%;
  border: 1px dashed var(--border-strong);
  border-radius: inherit;
  color: var(--ink-600);
  font-size: 0.9rem;
}

.dish-image-slot__empty i {
  font-size: 1.6rem;
  color: var(--primary);
}

.dish-image-slot__actions {
  display: flex;
  gap: var(--space-2);
}

.dish-image-slot__actions .btn-secondary {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.dish-image-slot__actions .btn-icon {
  flex: 0 0 auto;
}

.btn-check:checked + .btn-danger-outline {
  color: var(--on-danger);
  background: var(--danger);
  border-color: var(--danger);
}

.dish-image-slot__status {
  min-height: 1.2em;
  color: var(--ink-600);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dish-image-slot.is-removing .dish-image-slot__status {
  color: var(--danger-strong);
}

@media (max-width: 767.98px) {
  .dish-image-slot {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas: 'preview actions' 'preview status';
    align-items: start;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
  }

  .dish-image-slot__preview {
    grid-area: preview;
  }

  .dish-image-slot__actions {
    grid-area: actions;
    flex-wrap: wrap;
  }

  .dish-image-slot__actions .btn-secondary {
    flex: 1 1 100%;
  }

  .dish-image-slot__status {
    grid-area: status;
  }

  .dish-image-slot__status:empty {
    display: none;
  }

  .dish-image-slot__empty span {
    display: none;
  }
}

/* Narrow slots (three columns on small desktops): icon-only buttons, the name stays in the tooltip */
@container (max-width: 15rem) {
  .dish-image-slot__label {
    display: none;
  }
}

/* Dish photos: manual carousel on the dish page and in the full-size modal */
.dish-carousel {
  position: relative;
  touch-action: pan-y;
  user-select: none;
}

.dish-carousel .carousel-inner.dish-show-image-shell {
  display: block;
  padding: 0;
}

.dish-carousel .carousel-item .dish-show-image-button {
  padding: 0.75rem 0.75rem 2rem;
}

.dish-carousel__control {
  top: 50%;
  bottom: auto;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 var(--space-2);
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-900);
  font-size: 1.1rem;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(30, 22, 49, 0.18);
}

.dish-carousel__control:hover,
.dish-carousel__control:focus-visible {
  color: var(--primary-strong);
  background: #fff;
}

.dish-carousel__control[hidden] {
  display: none;
}

.dish-carousel__dots {
  margin-bottom: 0.6rem;
}

.dish-carousel__dots [data-bs-slide-to] {
  width: 0.55rem;
  height: 0.55rem;
  margin: 0 0.25rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--border-strong);
  opacity: 0.6;
  transition: width 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.dish-carousel__dots .active {
  width: 1.4rem;
  border-radius: 999px;
  background-color: var(--primary);
  opacity: 1;
}

.dish-carousel .dish-image-modal-shell {
  padding-bottom: 2.25rem;
}

@media (hover: none) {
  .dish-carousel__control {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.95rem;
  }
}

/* Ingredient picker: create option and confirmation */
.app-inline-search-create {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-strong);
  font-weight: 700;
}

.app-inline-search-create i {
  font-size: 1.1rem;
}

.app-inline-search-feedback {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--success);
  font-size: 0.875rem;
}

/* Ingredient fields (quick modal and ingredient page): how it is bought, as three cards */
.ingredient-unit-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.ingredient-unit-picker .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-height: 64px;
  padding: 0.6rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: normal;
}

.ingredient-unit-picker .btn i {
  font-size: 1.2rem;
}

.ingredient-cost-preview {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ingredient-form-card {
  max-width: 40rem;
}

/* Line rows in the dish and prepared forms: one line per ingredient, prepared or service, with
   its remove button at the end of the line and a single "Añadir" button under the list */
/* Dish and prepared forms inside a modal: the page's cards become blocks separated by a line. */
.sk-form-modal .modal-body {
  padding: var(--space-5);
}

.sk-form-block {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.sk-form-block__title {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-900);
}

@media (max-width: 767.98px) {
  .sk-form-modal .modal-body {
    padding: var(--space-4);
  }
}

.sk-line-row {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.sk-line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sk-line-row .app-inline-search {
  margin-bottom: 0 !important;
}

.sk-line-row__remove {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.sk-row-remove {
  --bs-btn-color: var(--ink-600);
  --bs-btn-hover-color: var(--danger-strong);
  --bs-btn-hover-bg: var(--danger-soft);
  --bs-btn-active-color: var(--danger-strong);
  --bs-btn-active-bg: var(--danger-soft);
  font-size: 1.1rem;
}

.sk-row-remove:focus-visible {
  color: var(--danger-strong);
  background: var(--danger-soft);
}

.sk-rows-add {
  margin-top: var(--space-3);
}

/* Month filter between its arrows: date inputs have their own minimum width, which pushed the
   "next month" arrow off small phones (360 px). */
.app-month-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* iPhone, installed app (iOS 26): the page can measure shorter than the screen and the bottom tab
   bar then floats above the bottom edge. Making the page at least the full screen tall keeps it
   down. .is-standalone (set in app.js) covers iOS versions where the media query does not match. */
@media (display-mode: standalone) {
  html,
  body.app-shell {
    min-height: 100lvh;
  }
}

html.is-standalone,
html.is-standalone body.app-shell {
  min-height: 100lvh;
}

/* While typing on a phone the tab bar is hidden: it would sit on the keyboard, and on iOS it can
   stay out of place after the keyboard closes. */
@media (max-width: 991.98px) {
  body.has-app-nav.is-typing .sk-tabbar {
    display: none;
  }
}

/* Update banner without a close button: room below the content so the end of the page (a Save
   button) can be scrolled above it, and out of the way while a modal is open (it sits over
   everything else, and would cover the modal's Save on a phone). */
body.has-update-banner {
  padding-bottom: 7.5rem;
}

@media (max-width: 991.98px) {
  body.has-app-nav.has-update-banner {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 7.5rem);
  }
}

body.modal-open .app-update-banner {
  display: none;
}

/* Invoices on the Subscription page: number and date, then status, amount and download. On a
   phone the second group wraps under the first. */
.sk-invoice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.sk-invoice:first-child {
  border-top: 0;
  padding-top: 0;
}

.sk-invoice__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Invoice import */
.invoice-upload-button {
  cursor: pointer;
}

.invoice-upload-selected li {
  overflow-wrap: anywhere;
}

.invoice-processing-card {
  max-width: 640px;
}

.invoice-similar {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bs-secondary-bg);
}

.invoice-line--skipped {
  opacity: 0.7;
}

.invoice-review-meta dt {
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.invoice-review-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 12px 0;
  background: var(--surface-page);
}

/* Above the phone tab bar, like the rest of the app's bottom elements. */
@media (max-width: 991.98px) {
  .invoice-review-actions {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  }
}

details.card > summary {
  cursor: pointer;
  list-style-position: inside;
}

/* Global admin · AI and invoice import */
.ai-limit-input {
  max-width: 10rem;
}

.ai-audience-select {
  max-width: 22rem;
}

.ai-usage-days {
  display: grid;
  gap: 6px;
}

.ai-usage-day {
  display: grid;
  grid-template-columns: 3.25rem 1fr 4.5rem 5.5rem;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.ai-usage-day__bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bs-secondary-bg);
  overflow: hidden;
}

.ai-usage-day__bar > span {
  display: block;
  height: 100%;
  background: var(--brand-purple);
}

.ai-usage-day__count,
.ai-usage-day__cost {
  text-align: right;
  white-space: nowrap;
}

/* User permissions: one row per section with a View / Edit choice; Administration is locked. */
.user-permissions__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.user-permissions__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.user-permissions__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
}

.user-permissions__row + .user-permissions__row {
  border-top: 1px solid var(--border);
}

.user-permissions__row.is-locked {
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.user-permissions__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.user-permissions__name small {
  font-weight: 400;
}

.user-permissions__choice {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
  gap: var(--space-1);
}

.user-permissions__choice .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.user-access-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--ink-600);
  font-size: 0.9rem;
}

/* A line under the hero while the client logos strip (which drew it) is off: see marketing/home.ejs. */
.pub-section--divided {
  border-top: 1px solid var(--border);
}

/* Full-screen viewer for the invoice photos/PDF of an import (partials/invoice-file-viewer). */
.invoice-viewer .modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

.invoice-viewer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-sunken);
}

.invoice-viewer__image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(30, 22, 49, 0.12);
}

.invoice-viewer__pdf {
  width: 100%;
  flex: 1 1 auto;
  min-height: 70vh;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* Resend section of the global admin: quota meters turn orange near the limit and red at it. */
.sk-meter--warning > span {
  background: var(--brand-orange);
}

.sk-meter--danger > span {
  background: var(--danger);
}

.resend-usage-day {
  grid-template-columns: 3.25rem 1fr 5.5rem;
}

.resend-log td:nth-child(2) {
  min-width: 12rem;
}