/* ==========================================================================
   SCS Design System
   --------------------------------------------------------------------------
   A token-driven layer on top of Bootstrap 5.3. Everything visual is derived
   from the tokens in section 1 so that light and dark themes, density, and
   brand adjustments stay a single-source change.

   Sections
     1. Tokens                    5. Navigation
     2. Bootstrap bridge          6. Components
     3. Base elements             7. Domain patterns
     4. Layout                    8. Responsive, motion, print
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Brand — clear software blue. Distinct from the success/warning/danger semantics
     so that "primary action" never reads as "state". */
  --scs-brand-50:  #eef4fc;
  --scs-brand-100: #dae7f9;
  --scs-brand-200: #b7cef0;
  --scs-brand-300: #96bff4;
  --scs-brand-400: #7babec;
  --scs-brand-500: #2463b6;
  --scs-brand-600: #20569d;
  --scs-brand-700: #1d487f;
  --scs-brand-800: #183c69;
  --scs-brand-900: #142f51;

  /* Neutrals — a slightly cool grey ramp. */
  --scs-grey-0:   #ffffff;
  --scs-grey-25:  #fbfcfd;
  --scs-grey-50:  #f6f8fa;
  --scs-grey-100: #eff2f5;
  --scs-grey-200: #e3e8ee;
  --scs-grey-300: #cfd7e0;
  --scs-grey-400: #a3aebd;
  --scs-grey-500: #626d7d;
  --scs-grey-600: #56616f;
  --scs-grey-700: #3d4753;
  --scs-grey-800: #262e38;
  --scs-grey-900: #171d24;
  --scs-grey-950: #0d1117;

  /* Semantic hues */
  --scs-green-50:  #e9f8f0;
  --scs-green-200: #a9e3c6;
  --scs-green-500: #0f7a4d;
  --scs-green-600: #0b6440;
  --scs-amber-50:  #fdf5e7;
  --scs-amber-200: #f2ddaa;
  --scs-amber-500: #a35d09;
  --scs-amber-600: #8a4d06;
  --scs-red-50:    #fdf1f0;
  --scs-red-200:   #f5c8c3;
  --scs-red-500:   #b42318;
  --scs-red-600:   #971c13;

  /* ---- Semantic surface + text tokens (light theme is the default) ---- */
  --scs-turquoise: #087f8c;
  --scs-violet: #7056b8;
  --scs-canvas: var(--scs-grey-50);
  --scs-surface: var(--scs-grey-0);
  --scs-surface-raised: var(--scs-grey-0);
  --scs-surface-sunken: var(--scs-grey-50);
  --scs-surface-hover: var(--scs-grey-50);
  --scs-surface-active: var(--scs-grey-100);
  --scs-surface-inverse: var(--scs-grey-900);

  --scs-border: var(--scs-grey-200);
  --scs-border-strong: var(--scs-grey-300);
  --scs-border-subtle: var(--scs-grey-100);
  /* WCAG 1.4.11: the boundary of an input or a button is the only thing that
     identifies it, so it needs 3:1 against its surroundings. Layout borders above
     are separation, not identification, and stay quiet. */
  --scs-border-control: #78838f;

  --scs-text: var(--scs-grey-900);
  --scs-text-secondary: var(--scs-grey-600);
  --scs-text-muted: var(--scs-grey-500);
  --scs-text-inverse: var(--scs-grey-0);

  --scs-accent: var(--scs-brand-500);
  --scs-accent-hover: var(--scs-brand-600);
  --scs-accent-text: var(--scs-brand-700);
  --scs-accent-soft: var(--scs-brand-50);
  --scs-accent-soft-border: var(--scs-brand-200);
  --scs-on-accent: #ffffff;

  --scs-success: var(--scs-green-500);
  --scs-success-soft: var(--scs-green-50);
  --scs-success-border: var(--scs-green-200);
  --scs-warning: var(--scs-amber-500);
  --scs-warning-soft: var(--scs-amber-50);
  --scs-warning-border: var(--scs-amber-200);
  --scs-danger: var(--scs-red-500);
  --scs-danger-soft: var(--scs-red-50);
  --scs-danger-border: var(--scs-red-200);

  --scs-focus-ring: rgba(27, 118, 145, .28);
  --scs-overlay: rgba(23, 29, 36, .45);
  --scs-priority-normal: var(--scs-grey-500);

  /* ---- Typography ---- */
  --scs-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --scs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --scs-text-2xs: .6875rem;  /* 11 */
  --scs-text-xs:  .75rem;    /* 12 */
  --scs-text-sm:  .8125rem;  /* 13 */
  --scs-text-md:  .875rem;   /* 14 */
  --scs-text-base: .9375rem; /* 15 */
  --scs-text-lg:  1.0625rem; /* 17 */
  --scs-text-xl:  1.25rem;   /* 20 */
  --scs-text-2xl: 1.5rem;    /* 24 */
  --scs-text-3xl: 1.875rem;  /* 30 */
  --scs-text-4xl: 2.5rem;    /* 40 */
  --scs-text-5xl: 3.25rem;   /* 52 */

  /* ---- Space, radius, elevation, motion ---- */
  --scs-space-1: .25rem;
  --scs-space-2: .5rem;
  --scs-space-3: .75rem;
  --scs-space-4: 1rem;
  --scs-space-5: 1.25rem;
  --scs-space-6: 1.5rem;
  --scs-space-8: 2rem;
  --scs-space-10: 2.5rem;
  --scs-space-12: 3rem;
  --scs-space-16: 4rem;

  --scs-radius-sm: 6px;
  --scs-radius-md: 8px;
  --scs-radius-lg: 12px;
  --scs-radius-xl: 16px;
  --scs-radius-pill: 999px;

  --scs-shadow-xs: 0 1px 2px rgba(23, 29, 36, .06);
  --scs-shadow-sm: 0 1px 2px rgba(23, 29, 36, .05), 0 2px 6px rgba(23, 29, 36, .04);
  --scs-shadow-md: 0 2px 4px rgba(23, 29, 36, .04), 0 8px 20px rgba(23, 29, 36, .07);
  --scs-shadow-lg: 0 4px 8px rgba(23, 29, 36, .05), 0 20px 44px rgba(23, 29, 36, .10);
  --scs-shadow-pop: 0 10px 32px rgba(23, 29, 36, .14);

  --scs-ease: cubic-bezier(.2, 0, .1, 1);
  --scs-duration-fast: 120ms;
  --scs-duration: 180ms;

  /* ---- Layout metrics ---- */
  --scs-sidebar-width: 16rem;
  --scs-sidebar-rail: 4.5rem;
  --scs-topbar-height: 3.75rem;
  --scs-content-max: 80rem;
  --scs-gutter: clamp(1rem, 3vw, 2rem);
  --scs-z-sidebar: 1040;
  --scs-z-topbar: 1030;
  --scs-z-scrim: 1035;
  --scs-z-banner: 1060;
}

/* Dark theme. Surfaces get lighter as they get closer to the reader; borders
   do the work that shadows do in light mode. */
[data-bs-theme="dark"] {
  --scs-turquoise: #62cbd0;
  --scs-violet: #bba5f4;
  --scs-canvas: #0d1117;
  --scs-surface: #151b23;
  --scs-surface-raised: #1a212a;
  --scs-surface-sunken: #11171e;
  --scs-surface-hover: #1c2430;
  --scs-surface-active: #222c39;
  --scs-surface-inverse: var(--scs-grey-100);

  --scs-border: #242e3a;
  --scs-border-strong: #33404f;
  --scs-border-subtle: #1c242e;
  --scs-border-control: #7c8a9a;

  --scs-text: #e6ebf1;
  --scs-text-secondary: #a8b4c2;
  --scs-text-muted: #8996a5;
  --scs-text-inverse: var(--scs-grey-900);

  --scs-accent: var(--scs-brand-400);
  --scs-accent-hover: var(--scs-brand-300);
  --scs-accent-text: var(--scs-brand-300);
  --scs-accent-soft: rgba(66, 149, 178, .14);
  --scs-accent-soft-border: rgba(66, 149, 178, .32);
  --scs-on-accent: #04161d;

  --scs-success: #4cbe8a;
  --scs-success-soft: rgba(76, 190, 138, .12);
  --scs-success-border: rgba(76, 190, 138, .3);
  --scs-warning: #e0a44f;
  --scs-warning-soft: rgba(224, 164, 79, .12);
  --scs-warning-border: rgba(224, 164, 79, .3);
  --scs-danger: #f08279;
  --scs-danger-soft: rgba(240, 130, 121, .12);
  --scs-danger-border: rgba(240, 130, 121, .3);

  --scs-focus-ring: rgba(119, 184, 206, .32);
  --scs-overlay: rgba(4, 8, 12, .6);
  --scs-priority-normal: var(--scs-grey-400);

  --scs-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --scs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --scs-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --scs-shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);
  --scs-shadow-pop: 0 12px 34px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   2. Bootstrap bridge
   Map Bootstrap's own custom properties onto the tokens so that any Bootstrap
   component we have not restyled still lands inside the system.
   ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--scs-canvas);
  --bs-body-color: var(--scs-text);
  --bs-body-font-family: var(--scs-font-sans);
  --bs-body-font-size: var(--scs-text-base);
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: var(--scs-text);
  --bs-secondary-color: var(--scs-text-secondary);
  --bs-secondary-bg: var(--scs-surface-sunken);
  --bs-tertiary-bg: var(--scs-surface-sunken);
  --bs-border-color: var(--scs-border);
  --bs-border-radius: var(--scs-radius-md);
  --bs-link-color: var(--scs-accent-text);
  --bs-link-hover-color: var(--scs-accent-hover);
  --bs-heading-color: var(--scs-text);
  --bs-primary: var(--scs-accent);
  --bs-primary-rgb: 27, 118, 145;
  --bs-focus-ring-color: var(--scs-focus-ring);
  --bs-focus-ring-width: 3px;
  --bs-code-color: var(--scs-accent-text);
}

/* ==========================================================================
   3. Base elements
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--scs-canvas);
  color: var(--scs-text);
  font-family: var(--scs-font-sans);
  font-size: var(--scs-text-base);
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--scs-text);
  font-weight: 640;
  letter-spacing: -.015em;
  line-height: 1.25;
}

h1 { font-size: var(--scs-text-3xl); letter-spacing: -.028em; }
h2 { font-size: var(--scs-text-2xl); letter-spacing: -.022em; }
h3 { font-size: var(--scs-text-xl); }
h4 { font-size: var(--scs-text-lg); }
h5, h6 { font-size: var(--scs-text-base); }

p { margin-top: 0; }

a {
  color: var(--scs-accent-text);
  text-decoration-color: color-mix(in srgb, var(--scs-accent-text) 35%, transparent);
  text-underline-offset: .18em;
  transition: color var(--scs-duration-fast) var(--scs-ease);
}

a:hover { color: var(--scs-accent-hover); }

hr {
  margin: var(--scs-space-6) 0;
  border: 0;
  border-top: 1px solid var(--scs-border);
  opacity: 1;
}

::selection { background: var(--scs-accent-soft); color: var(--scs-accent-text); }

:focus-visible {
  outline: 2px solid var(--scs-accent);
  outline-offset: 2px;
  border-radius: var(--scs-radius-sm);
}

.text-secondary { color: var(--scs-text-secondary) !important; }
.text-muted { color: var(--scs-text-muted) !important; }

.eyebrow,
.label {
  display: block;
  margin: 0;
  color: var(--scs-text-muted);
  font-size: var(--scs-text-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lead {
  max-width: 62ch;
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-lg);
  line-height: 1.6;
}

.skip-link {
  position: fixed;
  top: var(--scs-space-3);
  left: var(--scs-space-3);
  z-index: 2000;
  padding: var(--scs-space-3) var(--scs-space-4);
  background: var(--scs-surface);
  color: var(--scs-text);
  border: 1px solid var(--scs-border-strong);
  border-radius: var(--scs-radius-md);
  box-shadow: var(--scs-shadow-lg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--scs-duration) var(--scs-ease);
}

.skip-link:focus { transform: translateY(0); }

/* Icons ------------------------------------------------------------------ */

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 1rem; height: 1rem; stroke-width: 1.75; }
.icon-lg { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Brand ------------------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--scs-space-3);
  color: var(--scs-text);
  font-weight: 640;
  letter-spacing: -.015em;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover { color: var(--scs-text); }

.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  background: var(--scs-surface);
  border-radius: var(--scs-radius-md);
  color: var(--scs-accent);
}

[data-bs-theme="dark"] .brand-mark { background: var(--scs-grey-0); }

.brand-mark svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.brand-name { font-size: var(--scs-text-base); }

/* ==========================================================================
   4. Layout
   ========================================================================== */

.app-shell { display: flex; min-height: 100vh; }

.app-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  margin-left: var(--scs-sidebar-width);
  transition: margin-left var(--scs-duration) var(--scs-ease);
}

html[data-sidebar="collapsed"] .app-main { margin-left: var(--scs-sidebar-rail); }

.app-content { flex: 1 1 auto; padding-bottom: var(--scs-space-16); }

.container-app,
.container-public {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--scs-gutter);
}

.container-app { max-width: var(--scs-content-max); }
.container-public { max-width: 72rem; }
.container-prose { max-width: 46rem; }

.section { padding-block: var(--scs-space-8); }
.section-tight { padding-block: var(--scs-space-6); }
.section-loose { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.stack { display: flex; flex-direction: column; gap: var(--scs-space-6); }
.stack-sm { display: flex; flex-direction: column; gap: var(--scs-space-3); }
.anchor-target { scroll-margin-top: calc(var(--scs-topbar-height) + var(--scs-space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-3); }
.cluster-sm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-2); }
.grow { flex: 1 1 auto; min-width: 0; }

.split {
  display: grid;
  gap: var(--scs-space-6);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

.split-even {
  display: grid;
  gap: var(--scs-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* Page header ------------------------------------------------------------ */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--scs-space-4);
  padding-block: var(--scs-space-8) var(--scs-space-6);
}

.page-head-text { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.page-title { margin: var(--scs-space-2) 0 0; font-size: var(--scs-text-3xl); }
.page-subtitle {
  margin: var(--scs-space-2) 0 0;
  max-width: 68ch;
  color: var(--scs-text-secondary);
}
.page-actions { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); }

.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: var(--scs-space-2);
  min-width: 0;
  overflow: hidden;
  color: var(--scs-text-muted);
  font-size: var(--scs-text-md);
}

.breadcrumb-trail a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--scs-text-secondary);
  text-decoration: none;
}
.breadcrumb-trail a:hover { color: var(--scs-text); text-decoration: underline; }
.breadcrumb-trail .icon { width: 1rem; height: 1rem; opacity: .6; }
.breadcrumb-current {
  overflow: hidden;
  color: var(--scs-text);
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--scs-space-2);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-md);
  font-weight: 540;
  text-decoration: none;
}

.back-link:hover { color: var(--scs-text); }

/* ==========================================================================
   5. Navigation
   ========================================================================== */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--scs-z-sidebar);
  display: flex;
  width: var(--scs-sidebar-width);
  flex-direction: column;
  background: var(--scs-surface);
  border-right: 1px solid var(--scs-border);
  transition: width var(--scs-duration) var(--scs-ease),
              transform var(--scs-duration) var(--scs-ease);
}

html[data-sidebar="collapsed"] .sidebar { width: var(--scs-sidebar-rail); }

.sidebar-head {
  display: flex;
  height: var(--scs-topbar-height);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--scs-space-2);
  padding-inline: var(--scs-space-4);
  border-bottom: 1px solid var(--scs-border-subtle);
}

.sidebar-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--scs-space-4) var(--scs-space-3);
}

.sidebar-foot {
  flex: 0 0 auto;
  padding: var(--scs-space-3);
  border-top: 1px solid var(--scs-border-subtle);
}

.nav-group + .nav-group { margin-top: var(--scs-space-6); }
.sidebar-action { margin-top: var(--scs-space-4); }

.nav-group-title {
  margin: 0 0 var(--scs-space-2);
  padding-inline: var(--scs-space-3);
  color: var(--scs-text-muted);
  font-size: var(--scs-text-2xs);
  font-weight: 640;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.nav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--scs-space-3);
  padding: var(--scs-space-2) var(--scs-space-3);
  border-radius: var(--scs-radius-md);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-md);
  font-weight: 540;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--scs-duration-fast) var(--scs-ease),
              color var(--scs-duration-fast) var(--scs-ease);
}

.nav-item .icon { color: var(--scs-text-muted); transition: color var(--scs-duration-fast) var(--scs-ease); }
.nav-item:hover { background: var(--scs-surface-hover); color: var(--scs-text); }
.nav-item:hover .icon { color: var(--scs-text-secondary); }

.nav-item.is-active {
  background: var(--scs-accent-soft);
  color: var(--scs-accent-text);
  font-weight: 600;
}

.nav-item.is-active .icon { color: var(--scs-accent); }

.nav-label { overflow: hidden; text-overflow: ellipsis; }

.nav-count {
  margin-left: auto;
  padding: 1px var(--scs-space-2);
  background: var(--scs-surface-active);
  border-radius: var(--scs-radius-pill);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-2xs);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

.nav-item.is-active .nav-count { background: var(--scs-surface); color: var(--scs-accent-text); }

/* Collapsed rail: labels fold away, icons centre, titles become dividers. */
html[data-sidebar="collapsed"] .sidebar .nav-label,
html[data-sidebar="collapsed"] .sidebar .nav-count,
html[data-sidebar="collapsed"] .sidebar .brand-name,
html[data-sidebar="collapsed"] .sidebar .tenant-switch-text,
html[data-sidebar="collapsed"] .sidebar .rail-hide { display: none; }

html[data-sidebar="collapsed"] .sidebar .nav-item,
html[data-sidebar="collapsed"] .sidebar .tenant-switch { justify-content: center; padding-inline: 0; }
html[data-sidebar="collapsed"] .sidebar .sidebar-head { justify-content: center; padding-inline: var(--scs-space-2); }
html[data-sidebar="collapsed"] .sidebar .nav-group-title {
  height: 1px;
  margin-inline: var(--scs-space-3);
  padding: 0;
  overflow: hidden;
  background: var(--scs-border);
  color: transparent;
}

/* Tenant switcher --------------------------------------------------------- */

.tenant-switch {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--scs-space-3);
  padding: var(--scs-space-2) var(--scs-space-3);
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-md);
  color: var(--scs-text);
  text-align: left;
  text-decoration: none;
  transition: background var(--scs-duration-fast) var(--scs-ease),
              border-color var(--scs-duration-fast) var(--scs-ease);
}

.tenant-switch:hover { background: var(--scs-surface-hover); border-color: var(--scs-border-strong); color: var(--scs-text); }
.tenant-switch-text { min-width: 0; flex: 1 1 auto; }
.tenant-switch-label { display: block; color: var(--scs-text-muted); font-size: var(--scs-text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tenant-switch-name { display: block; overflow: hidden; font-size: var(--scs-text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.tenant-avatar {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--scs-accent-soft);
  border-radius: var(--scs-radius-sm);
  color: var(--scs-accent-text);
  font-size: var(--scs-text-xs);
  font-weight: 700;
}

/* Topbar ------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--scs-z-topbar);
  display: flex;
  height: var(--scs-topbar-height);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--scs-space-3);
  padding-inline: var(--scs-gutter);
  background: color-mix(in srgb, var(--scs-canvas) 88%, transparent);
  border-bottom: 1px solid var(--scs-border);
  backdrop-filter: saturate(180%) blur(12px);
}

.topbar-actions { flex-shrink: 0; display: flex; align-items: center; gap: var(--scs-space-2); margin-left: auto; }
/* The breadcrumb truncates; the controls never shrink into unreadable stubs. */
.topbar-actions > * { flex: 0 0 auto; }

.public-header {
  position: sticky;
  top: 0;
  z-index: var(--scs-z-topbar);
  background: color-mix(in srgb, var(--scs-canvas) 88%, transparent);
  border-bottom: 1px solid var(--scs-border);
  backdrop-filter: saturate(180%) blur(12px);
}

.public-header-inner {
  display: flex;
  height: var(--scs-topbar-height);
  align-items: center;
  gap: var(--scs-space-4);
}

.public-nav { display: flex; align-items: center; gap: var(--scs-space-1); margin-left: auto; }

.public-nav-link {
  padding: var(--scs-space-2) var(--scs-space-3);
  border-radius: var(--scs-radius-md);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-md);
  font-weight: 540;
  text-decoration: none;
}

.public-nav-link:hover { background: var(--scs-surface-hover); color: var(--scs-text); }

/* Icon button (menu toggle, theme toggle, overflow) ------------------------ */

.icon-button {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-md);
  color: var(--scs-text-secondary);
  cursor: pointer;
  transition: background var(--scs-duration-fast) var(--scs-ease),
              color var(--scs-duration-fast) var(--scs-ease),
              border-color var(--scs-duration-fast) var(--scs-ease);
}

.icon-button:hover { background: var(--scs-surface-hover); border-color: var(--scs-border); color: var(--scs-text); }
.icon-button-bordered { background: var(--scs-surface); border-color: var(--scs-border); }

.theme-toggle .icon-moon { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: block; }

.sidebar-toggle { display: inline-grid; }
.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--scs-z-scrim);
  background: var(--scs-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--scs-duration) var(--scs-ease), visibility var(--scs-duration);
}

/* User menu (Bootstrap dropdown) ------------------------------------------ */

.user-button {
  display: inline-flex;
  align-items: center;
  gap: var(--scs-space-2);
  padding: var(--scs-space-1) var(--scs-space-2) var(--scs-space-1) var(--scs-space-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-pill);
  color: var(--scs-text-secondary);
  cursor: pointer;
}

.user-button:hover { background: var(--scs-surface-hover); border-color: var(--scs-border); color: var(--scs-text); }

.avatar {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--scs-brand-600);
  border-radius: 50%;
  color: #fff;
  font-size: var(--scs-text-xs);
  font-weight: 640;
  text-transform: uppercase;
}

[data-bs-theme="dark"] .avatar { background: var(--scs-brand-500); color: #04161d; }

/* A profile photo fills the monogram's circle. It is decorative: the name sits beside it. */
.avatar.avatar-photo,
[data-bs-theme="dark"] .avatar.avatar-photo { overflow: hidden; background: var(--scs-surface-sunken); }
.booking-avatar.avatar-photo { overflow: hidden; background: var(--scs-surface-sunken); }
.avatar-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.avatar-inline { display: inline-grid; width: 1.125rem; height: 1.125rem; margin-right: var(--scs-space-1); font-size: var(--scs-text-2xs); vertical-align: -.25em; }
.avatar.avatar-md { width: 2.25rem; height: 2.25rem; }
.avatar.avatar-xl { width: 5rem; height: 5rem; font-size: var(--scs-text-2xl); }
.person-cell { display: flex; min-width: 0; align-items: center; gap: var(--scs-space-3); }
.profile-photo-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-4); }
.profile-photo-current p { margin: 0 0 var(--scs-space-2); }
.profile-photo-facts { margin: 0; padding-left: var(--scs-space-5); color: var(--scs-text-secondary); }
.profile-photo-facts li + li { margin-top: var(--scs-space-2); }

.dropdown-menu {
  --bs-dropdown-bg: var(--scs-surface-raised);
  --bs-dropdown-border-color: var(--scs-border);
  --bs-dropdown-border-radius: var(--scs-radius-lg);
  --bs-dropdown-link-color: var(--scs-text-secondary);
  --bs-dropdown-link-hover-color: var(--scs-text);
  --bs-dropdown-link-hover-bg: var(--scs-surface-hover);
  --bs-dropdown-link-active-color: var(--scs-accent-text);
  --bs-dropdown-link-active-bg: var(--scs-accent-soft);
  --bs-dropdown-header-color: var(--scs-text-muted);
  --bs-dropdown-divider-bg: var(--scs-border);
  --bs-dropdown-font-size: var(--scs-text-md);
  min-width: 15rem;
  padding: var(--scs-space-2);
  box-shadow: var(--scs-shadow-pop);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--scs-space-3);
  border-radius: var(--scs-radius-sm);
  font-weight: 540;
}

.dropdown-item .icon { color: var(--scs-text-muted); }
.dropdown-header { padding: var(--scs-space-2) var(--scs-space-3); }
.dropdown-header strong { display: block; color: var(--scs-text); font-size: var(--scs-text-md); }
.dropdown-header span { display: block; overflow: hidden; font-size: var(--scs-text-sm); text-overflow: ellipsis; }

/* Notifications ------------------------------------------------------------ */

.notification-bell { position: relative; }

.notification-dot {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: .5rem;
  height: .5rem;
  background: var(--scs-danger);
  border: 2px solid var(--scs-canvas);
  border-radius: 50%;
}

.notification-menu { width: min(24rem, calc(100vw - 2rem)); padding: 0; }

.notification-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--scs-space-3);
  padding: var(--scs-space-3) var(--scs-space-4);
  border-bottom: 1px solid var(--scs-border);
}

.notification-menu-head h2 { margin: 0; font-size: var(--scs-text-md); font-weight: 620; }

.notification-menu-foot {
  padding: var(--scs-space-3) var(--scs-space-4);
  border-top: 1px solid var(--scs-border);
  font-size: var(--scs-text-md);
  text-align: center;
}

.notification-menu-foot a { font-weight: 560; text-decoration: none; }
.notification-menu-foot a:hover { text-decoration: underline; }
.notification-empty { margin: 0; padding: var(--scs-space-6) var(--scs-space-4); color: var(--scs-text-secondary); font-size: var(--scs-text-md); text-align: center; }

.notification-list { margin: 0; padding: 0; list-style: none; }
.notification-list > li + li { border-top: 1px solid var(--scs-border-subtle); }
.notification-menu .notification-list { max-height: 24rem; overflow-y: auto; }

/* Reading a notification changes state, so each row is a real submit button. */
.notification-item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: var(--scs-space-3);
  padding: var(--scs-space-3) var(--scs-space-4);
  background: transparent;
  border: 0;
  color: var(--scs-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--scs-duration-fast) var(--scs-ease);
}

.notification-item:hover { background: var(--scs-surface-hover); }
.notification-item.is-unread { background: var(--scs-accent-soft); }
.notification-item.is-unread:hover { background: var(--scs-surface-active); }

.notification-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-md);
  color: var(--scs-text-secondary);
}

.notification-icon .icon { width: 1rem; height: 1rem; }
.notification-icon.tone-accent { background: var(--scs-accent-soft); border-color: var(--scs-accent-soft-border); color: var(--scs-accent-text); }
.notification-icon.tone-success { background: var(--scs-success-soft); border-color: var(--scs-success-border); color: var(--scs-success); }
.notification-icon.tone-warning { background: var(--scs-warning-soft); border-color: var(--scs-warning-border); color: var(--scs-warning); }

.notification-text { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.notification-title { font-size: var(--scs-text-md); font-weight: 600; }
.notification-body { color: var(--scs-text-secondary); font-size: var(--scs-text-md); }
.notification-time { color: var(--scs-text-muted); font-size: var(--scs-text-sm); }

.notification-list-page .notification-item { padding: var(--scs-space-4) var(--scs-space-5); }

/* Language switcher ------------------------------------------------------- */

.language-switcher { display: inline-flex; }

.form-select.language-select {
  height: 2.25rem;
  padding: 0 1.75rem 0 var(--scs-space-3);
  background-color: transparent;
  background-position: right .5rem center;
  background-size: 12px;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-md);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-md);
  font-weight: 560;
}

.form-select.language-select:hover { background-color: var(--scs-surface-hover); border-color: var(--scs-border); color: var(--scs-text); }
.form-select.language-select:focus { background-color: var(--scs-surface); border-color: var(--scs-border-strong); box-shadow: 0 0 0 3px var(--scs-focus-ring); color: var(--scs-text); }

/* ==========================================================================
   6. Components
   ========================================================================== */

/* Buttons ----------------------------------------------------------------- */

.btn {
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: .9rem;
  --bs-btn-font-size: var(--scs-text-md);
  --bs-btn-border-radius: var(--scs-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--scs-space-2);
  font-weight: 580;
  letter-spacing: -.005em;
  line-height: 1.35;
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  transition: background-color var(--scs-duration-fast) var(--scs-ease),
              border-color var(--scs-duration-fast) var(--scs-ease),
              color var(--scs-duration-fast) var(--scs-ease),
              box-shadow var(--scs-duration-fast) var(--scs-ease);
}

.btn:focus-visible { box-shadow: 0 0 0 3px var(--scs-focus-ring); outline: none; }
.btn .icon { width: 1.05rem; height: 1.05rem; }

.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; --bs-btn-font-size: var(--scs-text-sm); }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: var(--scs-text-base); }

.btn-primary {
  --bs-btn-bg: var(--scs-brand-600);
  --bs-btn-border-color: var(--scs-brand-600);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--scs-brand-700);
  --bs-btn-hover-border-color: var(--scs-brand-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--scs-brand-800);
  --bs-btn-active-border-color: var(--scs-brand-800);
  --bs-btn-disabled-bg: var(--scs-brand-600);
  --bs-btn-disabled-border-color: var(--scs-brand-600);
  box-shadow: var(--scs-shadow-xs);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--scs-brand-400);
  --bs-btn-border-color: var(--scs-brand-400);
  --bs-btn-color: #04161d;
  --bs-btn-hover-bg: var(--scs-brand-300);
  --bs-btn-hover-border-color: var(--scs-brand-300);
  --bs-btn-hover-color: #04161d;
  --bs-btn-active-bg: var(--scs-brand-300);
  --bs-btn-disabled-bg: var(--scs-brand-400);
  --bs-btn-disabled-border-color: var(--scs-brand-400);
}

/* Neutral secondary. Bootstrap's outline/light variants are aliased onto it
   so third-party markup (allauth, bootstrap_form) stays consistent. */
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-light {
  --bs-btn-bg: var(--scs-surface);
  --bs-btn-border-color: var(--scs-border-control);
  --bs-btn-color: var(--scs-text);
  --bs-btn-hover-bg: var(--scs-surface-hover);
  --bs-btn-hover-border-color: var(--scs-border-control);
  --bs-btn-hover-color: var(--scs-text);
  --bs-btn-active-bg: var(--scs-surface-active);
  --bs-btn-active-border-color: var(--scs-border-control);
  --bs-btn-active-color: var(--scs-text);
  --bs-btn-disabled-bg: var(--scs-surface);
  --bs-btn-disabled-border-color: var(--scs-border);
  --bs-btn-disabled-color: var(--scs-text-muted);
  box-shadow: var(--scs-shadow-xs);
}

.btn-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--scs-text-secondary);
  --bs-btn-hover-bg: var(--scs-surface-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--scs-text);
}

.btn-danger {
  --bs-btn-bg: var(--scs-red-500);
  --bs-btn-border-color: var(--scs-red-500);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--scs-red-600);
  --bs-btn-hover-border-color: var(--scs-red-600);
}

.btn-block { width: 100%; }

/* Surfaces ---------------------------------------------------------------- */

.surface-card {
  padding: var(--scs-space-6);
  background: var(--scs-surface);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-lg);
  box-shadow: var(--scs-shadow-xs);
}

.surface-card-flush { padding: 0; overflow: hidden; }
.surface-card-lift { box-shadow: var(--scs-shadow-md); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--scs-space-4);
  padding: var(--scs-space-4) var(--scs-space-5);
  border-bottom: 1px solid var(--scs-border);
}

.card-head h2,
.card-head h3 { margin: 0; font-size: var(--scs-text-lg); }
.card-head-link { font-size: var(--scs-text-md); font-weight: 560; text-decoration: none; white-space: nowrap; }
.card-head-bare { padding: 0 0 var(--scs-space-4); }
.card-body { padding: var(--scs-space-5); }
.card-foot {
  padding: var(--scs-space-4) var(--scs-space-5);
  background: var(--scs-surface-sunken);
  border-top: 1px solid var(--scs-border);
}

/* Panels and callouts ------------------------------------------------------ */

.information-panel,
.callout {
  padding: var(--scs-space-4);
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-md);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-md);
}

.information-panel strong,
.callout strong { display: block; margin-bottom: var(--scs-space-1); color: var(--scs-text); font-weight: 600; }
.information-panel p:last-child,
.callout p:last-child { margin-bottom: 0; }

.callout-accent { background: var(--scs-accent-soft); border-color: var(--scs-accent-soft-border); color: var(--scs-accent-text); }
.callout-accent strong { color: var(--scs-accent-text); }
.callout-success { background: var(--scs-success-soft); border-color: var(--scs-success-border); color: var(--scs-success); }
.callout-success strong { color: var(--scs-success); }
.callout-warning { background: var(--scs-warning-soft); border-color: var(--scs-warning-border); color: var(--scs-warning); }
.callout-warning strong { color: var(--scs-warning); }
.callout-danger { background: var(--scs-danger-soft); border-color: var(--scs-danger-border); color: var(--scs-danger); }
.callout-danger strong { color: var(--scs-danger); }

/* Badges ------------------------------------------------------------------ */

.status-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--scs-space-2);
  padding: .2rem .55rem;
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-sm);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-xs);
  font-weight: 580;
  line-height: 1.5;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: .4rem;
  height: .4rem;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
  opacity: .85;
}

.status-badge-plain::before { display: none; }
.status-badge-accent { background: var(--scs-accent-soft); border-color: var(--scs-accent-soft-border); color: var(--scs-accent-text); }
.status-badge-success { background: var(--scs-success-soft); border-color: var(--scs-success-border); color: var(--scs-success); }
.status-badge-warning { background: var(--scs-warning-soft); border-color: var(--scs-warning-border); color: var(--scs-warning); }
.status-badge-danger { background: var(--scs-danger-soft); border-color: var(--scs-danger-border); color: var(--scs-danger); }
.status-badge-lg { padding: .35rem .7rem; font-size: var(--scs-text-md); }

/* Traffic lights (§24.3): the badge tones plus text, never colour alone */
.traffic-light::before { width: .6rem; height: .6rem; opacity: 1; }
.finding-list { display: flex; flex-direction: column; gap: var(--scs-space-2); margin: 0; padding: 0; list-style: none; }
.finding { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--scs-space-1) var(--scs-space-2); }
.finding::before { content: ""; width: .6rem; height: .6rem; flex: 0 0 auto; border-radius: 50%; background: var(--scs-text-muted); }
.finding.is-danger::before { background: var(--scs-danger); }
.finding.is-warning::before { background: var(--scs-warning); }
.finding.is-success::before { background: var(--scs-success); }
.finding.is-accent::before { background: var(--scs-accent); }
.finding-empty { margin: 0; color: var(--scs-text-secondary); }
.light-filter { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); margin: 0; padding: 0; list-style: none; }
.light-filter a { display: inline-flex; align-items: center; gap: var(--scs-space-2); padding: var(--scs-space-2) var(--scs-space-3); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-md); background: var(--scs-surface); color: var(--scs-text); text-decoration: none; }
.light-filter a:hover { background: var(--scs-surface-hover); }
.light-filter a[aria-current] { border-color: var(--scs-accent); box-shadow: inset 0 0 0 1px var(--scs-accent); }
.light-filter strong { font-variant-numeric: tabular-nums; }

/* Owner cockpit: six areas, one column on phones and tablets, two from 992px */
.cockpit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--scs-space-5); }
.cockpit-area { display: flex; flex-direction: column; gap: var(--scs-space-4); }
.cockpit-area .summary-list dd { font-variant-numeric: tabular-nums; }
.cockpit-hint { display: block; font-weight: 400; }
@media (min-width: 992px) {
  .cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tenant-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--scs-space-2);
  padding: .25rem .65rem;
  background: var(--scs-surface);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-pill);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-sm);
  font-weight: 560;
}

/* Forms ------------------------------------------------------------------- */

.form-label {
  margin-bottom: var(--scs-space-2);
  color: var(--scs-text);
  font-size: var(--scs-text-md);
  font-weight: 560;
}

.form-control,
.form-select {
  padding: .5rem .7rem;
  background-color: var(--scs-surface);
  border: 1px solid var(--scs-border-control);
  border-radius: var(--scs-radius-md);
  color: var(--scs-text);
  font-size: var(--scs-text-md);
  box-shadow: var(--scs-shadow-xs);
  transition: border-color var(--scs-duration-fast) var(--scs-ease),
              box-shadow var(--scs-duration-fast) var(--scs-ease);
}

.form-control::placeholder { color: var(--scs-text-muted); }

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: var(--scs-grey-400); }

.form-control:focus,
.form-select:focus {
  background-color: var(--scs-surface);
  border-color: var(--scs-accent);
  box-shadow: 0 0 0 3px var(--scs-focus-ring);
  color: var(--scs-text);
}

.form-control:disabled,
.form-select:disabled { background-color: var(--scs-surface-sunken); color: var(--scs-text-muted); }

.form-control[type="file"] { padding: .4rem .7rem; }
.form-control[type="file"]::file-selector-button {
  margin: -.4rem .7rem -.4rem -.7rem;
  padding: .5rem .7rem;
  background: var(--scs-surface-sunken);
  border: 0;
  border-right: 1px solid var(--scs-border);
  color: var(--scs-text-secondary);
  font-weight: 560;
}

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

.form-check { padding-left: 1.75rem; }
.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin-left: -1.75rem;
  margin-top: .28rem;
  background-color: var(--scs-surface);
  border: 1px solid var(--scs-border-control);
}
.form-check-input:checked { background-color: var(--scs-accent); border-color: var(--scs-accent); }
.form-check-input:focus { border-color: var(--scs-accent); box-shadow: 0 0 0 3px var(--scs-focus-ring); }
.form-check-label { color: var(--scs-text); font-size: var(--scs-text-md); }

.form-text,
.form-note { margin-top: var(--scs-space-2); color: var(--scs-text-muted); font-size: var(--scs-text-sm); }

/* Bootstrap marks every untouched field valid after a failed submit. A green tick on
   an empty optional field is noise that competes with the fields that actually need
   attention, so only the error state is expressed. */
.form-control.is-valid,
.form-select.is-valid,
.form-check-input.is-valid {
  padding-right: .7rem;
  background-image: none;
  border-color: var(--scs-border-control);
}

.form-check-input.is-valid:checked { background-color: var(--scs-accent); border-color: var(--scs-accent); }
.valid-feedback { display: none; }

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--scs-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--scs-danger) 22%, transparent); }
.invalid-feedback { color: var(--scs-danger); font-size: var(--scs-text-sm); font-weight: 540; }

.btn-wrap { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scs-space-2);
  margin-top: var(--scs-space-6);
  padding-top: var(--scs-space-5);
  border-top: 1px solid var(--scs-border);
}

.error-summary {
  display: flex;
  gap: var(--scs-space-3);
  margin-bottom: var(--scs-space-5);
  padding: var(--scs-space-4);
  background: var(--scs-danger-soft);
  border: 1px solid var(--scs-danger-border);
  border-radius: var(--scs-radius-md);
  color: var(--scs-danger);
}

.error-summary h2 { margin: 0; color: inherit; font-size: var(--scs-text-md); font-weight: 640; }
.error-summary p { margin: var(--scs-space-1) 0 0; color: inherit; font-size: var(--scs-text-sm); }
.error-summary ul { margin: var(--scs-space-2) 0 0; padding-left: 1.1rem; font-size: var(--scs-text-sm); }
.error-summary li + li { margin-top: var(--scs-space-1); }
.error-summary a { color: inherit; font-weight: 560; text-decoration: underline; }
.error-summary .icon { color: var(--scs-danger); }

/* Alerts (django messages) ------------------------------------------------- */

.alert {
  --bs-alert-border-radius: var(--scs-radius-md);
  --bs-alert-padding-y: var(--scs-space-3);
  --bs-alert-padding-x: var(--scs-space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--scs-space-3);
  border: 1px solid var(--scs-border);
  background: var(--scs-surface);
  color: var(--scs-text);
  font-size: var(--scs-text-md);
  box-shadow: var(--scs-shadow-xs);
}

.alert-success { background: var(--scs-success-soft); border-color: var(--scs-success-border); color: var(--scs-success); }
.alert-info { background: var(--scs-accent-soft); border-color: var(--scs-accent-soft-border); color: var(--scs-accent-text); }
.alert-warning { background: var(--scs-warning-soft); border-color: var(--scs-warning-border); color: var(--scs-warning); }
.alert-danger { background: var(--scs-danger-soft); border-color: var(--scs-danger-border); color: var(--scs-danger); }
.alert .btn-close { margin-left: auto; }

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

.table-scroll { width: 100%; overflow-x: auto; }

.scs-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--scs-text);
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--scs-text-md);
}

.scs-table th {
  padding: var(--scs-space-3) var(--scs-space-5);
  background: var(--scs-surface-sunken);
  border-bottom: 1px solid var(--scs-border);
  color: var(--scs-text-muted);
  font-size: var(--scs-text-xs);
  font-weight: 620;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.scs-table td {
  padding: var(--scs-space-4) var(--scs-space-5);
  border-bottom: 1px solid var(--scs-border-subtle);
  vertical-align: middle;
}

.scs-table tbody tr:last-child td { border-bottom: 0; }
.scs-table tbody tr { transition: background var(--scs-duration-fast) var(--scs-ease); }
.scs-table tbody tr:hover { background: var(--scs-surface-hover); }
.scs-table a { font-weight: 560; text-decoration: none; }
.scs-table a:hover { text-decoration: underline; }
.cell-label { display: none; }
.scs-comparison-table tbody th { white-space: normal; overflow-wrap: anywhere; }

/* Lists of records --------------------------------------------------------- */

.record-list { display: flex; flex-direction: column; }

.record-row {
  display: flex;
  align-items: center;
  gap: var(--scs-space-4);
  padding: var(--scs-space-4) var(--scs-space-5);
  border-bottom: 1px solid var(--scs-border-subtle);
  color: var(--scs-text);
  text-decoration: none;
  transition: background var(--scs-duration-fast) var(--scs-ease);
}

.record-row:last-child { border-bottom: 0; }
a.record-row:hover { background: var(--scs-surface-hover); color: var(--scs-text); }
.record-main { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.record-title { font-size: var(--scs-text-md); font-weight: 580; }
a.record-title { color: var(--scs-text); text-decoration: none; }
a.record-title:hover { color: var(--scs-accent-text); text-decoration: underline; }
.record-meta { color: var(--scs-text-muted); font-size: var(--scs-text-sm); }
.record-aside { display: flex; flex: 0 0 auto; align-items: center; gap: var(--scs-space-2); }

.priority-marker {
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  background: var(--scs-priority-normal);
  border-radius: 50%;
}

.priority-high { background: var(--scs-warning); }
.priority-urgent { background: var(--scs-danger); }

.date-tile {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  padding: var(--scs-space-1);
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-md);
  line-height: 1.1;
}

.date-tile strong { font-size: var(--scs-text-md); font-weight: 640; }
.date-tile small { color: var(--scs-text-muted); font-size: var(--scs-text-2xs); text-transform: uppercase; }

/* Metrics ------------------------------------------------------------------ */

.metric-grid {
  display: grid;
  gap: var(--scs-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
}

.metric-card {
  display: flex;
  min-height: 7.5rem;
  flex-direction: column;
  gap: var(--scs-space-2);
  padding: var(--scs-space-5);
  background: var(--scs-surface);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-lg);
  box-shadow: var(--scs-shadow-xs);
  color: var(--scs-text);
  text-decoration: none;
  transition: border-color var(--scs-duration-fast) var(--scs-ease),
              box-shadow var(--scs-duration-fast) var(--scs-ease),
              transform var(--scs-duration-fast) var(--scs-ease);
}

a.metric-card:hover {
  border-color: var(--scs-border-strong);
  box-shadow: var(--scs-shadow-md);
  color: var(--scs-text);
  transform: translateY(-1px);
}

.metric-label { display: flex; align-items: center; gap: var(--scs-space-2); color: var(--scs-text-secondary); font-size: var(--scs-text-md); font-weight: 560; }
.metric-label .icon { width: 1rem; height: 1rem; color: var(--scs-text-muted); }
.metric-value { margin-top: auto; font-size: var(--scs-text-3xl); font-weight: 640; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric-hint { color: var(--scs-text-muted); font-size: var(--scs-text-sm); }

/* Empty states ------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scs-space-3);
  padding: var(--scs-space-12) var(--scs-space-6);
  background: var(--scs-surface);
  border: 1px dashed var(--scs-border-strong);
  border-radius: var(--scs-radius-lg);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-lg);
  color: var(--scs-text-muted);
}

.empty-state h2,
.empty-state h3 { margin: 0; font-size: var(--scs-text-lg); }
.empty-state p { margin: 0; max-width: 44ch; color: var(--scs-text-secondary); font-size: var(--scs-text-md); }
.empty-state-inline { padding: var(--scs-space-10) var(--scs-space-5); border: 0; border-radius: 0; background: transparent; }

/* Status icon (auth flows) -------------------------------------------------- */

.status-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--scs-radius-lg);
}

.status-icon-success { background: var(--scs-success-soft); color: var(--scs-success); }
.status-icon-info { background: var(--scs-accent-soft); color: var(--scs-accent-text); }
.status-icon-warning { background: var(--scs-warning-soft); color: var(--scs-warning); }

/* Auth ---------------------------------------------------------------------- */

.auth-shell {
  display: flex;
  min-height: calc(100vh - var(--scs-topbar-height));
  align-items: center;
  justify-content: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}

.auth-card { width: min(100%, 26rem); padding: var(--scs-space-8); box-shadow: var(--scs-shadow-md); }
.auth-card h1 { margin: var(--scs-space-2) 0 0; font-size: var(--scs-text-2xl); }
.auth-card > form { margin-top: var(--scs-space-6); }
.auth-card > :last-child { margin-bottom: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--scs-space-4);
  margin-block: var(--scs-space-5);
  color: var(--scs-text-muted);
  font-size: var(--scs-text-sm);
}

.auth-divider::before,
.auth-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--scs-border); }
.auth-foot { margin-top: var(--scs-space-6); color: var(--scs-text-secondary); font-size: var(--scs-text-md); text-align: center; }
.provider-list { display: flex; flex-direction: column; gap: var(--scs-space-2); }

.auth-card > p { margin: var(--scs-space-3) 0 0; }
.auth-card > .provider-list { margin-top: var(--scs-space-6); }
.auth-card > .information-panel { margin-top: var(--scs-space-5); }
.auth-card > .btn { margin-top: var(--scs-space-6); }
.auth-card > .auth-divider + form { margin-top: var(--scs-space-5); }
.auth-card .status-icon + h1 { margin-top: var(--scs-space-4); }
.auth-card .form-note { margin-top: var(--scs-space-4); }

/* Footer -------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--scs-border); }

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--scs-space-4);
  padding-block: var(--scs-space-6);
  color: var(--scs-text-muted);
  font-size: var(--scs-text-sm);
}

.footer-links { display: flex; flex-wrap: wrap; gap: var(--scs-space-5); }
.footer-links a { color: var(--scs-text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--scs-text); text-decoration: underline; }

/* Cookie banner -------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  right: var(--scs-space-4);
  bottom: var(--scs-space-4);
  left: var(--scs-space-4);
  z-index: var(--scs-z-banner);
  margin-inline: auto;
  max-width: 44rem;
  padding: var(--scs-space-5);
  background: var(--scs-surface-raised);
  border: 1px solid var(--scs-border-strong);
  border-radius: var(--scs-radius-lg);
  box-shadow: var(--scs-shadow-lg);
}

.cookie-banner h2 { margin: 0 0 var(--scs-space-2); font-size: var(--scs-text-lg); }
.cookie-banner p { margin: 0; color: var(--scs-text-secondary); font-size: var(--scs-text-md); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); margin-top: var(--scs-space-5); }
.cookie-actions form { flex: 1 1 12rem; }
.cookie-actions .btn { width: 100%; }

/* Legal copy ----------------------------------------------------------------- */

.settings-content { max-width: 46rem; }
.settings-panels { display: grid; gap: var(--scs-space-5); }
.legal-copy { max-width: 46rem; }
.legal-copy h2 { margin: var(--scs-space-10) 0 var(--scs-space-3); font-size: var(--scs-text-xl); }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { margin-bottom: var(--scs-space-4); color: var(--scs-text-secondary); line-height: 1.75; }
.legal-copy .form-actions { border-top: 0; }

.legal-review-note {
  margin-top: var(--scs-space-8);
  padding: var(--scs-space-4);
  background: var(--scs-warning-soft);
  border: 1px solid var(--scs-warning-border);
  border-radius: var(--scs-radius-md);
  color: var(--scs-warning);
}

.legal-review-note p { margin: var(--scs-space-1) 0 0; color: inherit; font-size: var(--scs-text-md); }

/* ==========================================================================
   7. Domain patterns
   ========================================================================== */

/* Access grants: a member's roles, scopes and separate grants; wraps on narrow screens */
.access-list { display: flex; flex-direction: column; gap: var(--scs-space-2); margin: 0; padding: 0; list-style: none; }
.access-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-1) var(--scs-space-2); }

/* Case overview: quick contact actions and a list of linked records */
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); margin-top: var(--scs-space-3); }
.nav-card-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nav-card-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--scs-space-3); padding: var(--scs-space-3) 0; border-bottom: 1px solid var(--scs-border-subtle); text-decoration: none; }
.nav-card-list li:last-child a { border-bottom: 0; }

/* Calendar: week/day time grid, month table and the small-screen agenda */
.calendar { --calendar-days: 7; --calendar-rows: 28; overflow: hidden; background: var(--scs-surface); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-lg); }
.calendar-head, .calendar-body { display: grid; grid-template-columns: 3.5rem repeat(var(--calendar-days), minmax(0, 1fr)); }
.calendar-head { border-bottom: 1px solid var(--scs-border); }
.calendar-head > div { display: flex; flex-direction: column; gap: var(--scs-space-1); padding: var(--scs-space-2); font-size: var(--scs-text-sm); font-weight: 600; text-align: center; }
.calendar-head a { text-decoration: none; }
.calendar-head .is-today a, .calendar-date[aria-current] { color: var(--scs-accent-text); font-weight: 700; }
.calendar-times, .calendar-day { display: grid; grid-template-rows: repeat(var(--calendar-rows), 1.5rem); }
.calendar-times span { padding-right: var(--scs-space-2); color: var(--scs-text-muted); font-size: var(--scs-text-xs); text-align: right; }
.calendar-day { position: relative; border-left: 1px solid var(--scs-border-subtle); background-image: linear-gradient(to bottom, var(--scs-border-subtle) 1px, transparent 1px); background-size: 100% 3rem; }
.calendar-day.is-today { background-color: var(--scs-surface-hover); }
.calendar-slot { grid-column: 1 / -1; }
a.calendar-slot:hover { background: var(--scs-accent-soft); }
a.calendar-slot { position: relative; }
a.calendar-slot:hover::after { content: attr(data-label); position: absolute; top: 0; left: var(--scs-space-2); color: var(--scs-accent-text); font-size: var(--scs-text-xs); font-weight: 600; line-height: 1.5rem; }
.calendar-available { grid-column: 1 / -1; background: var(--scs-success-soft); border-left: 3px solid var(--scs-success-border); pointer-events: none; }
.calendar-legend-available { display: inline-block; width: .9rem; height: .9rem; vertical-align: middle; background: var(--scs-success-soft); border-left: 3px solid var(--scs-success-border); }
.calendar-event { z-index: 1; display: flex; min-width: 0; flex-direction: column; margin: 1px 2px; padding: var(--scs-space-1) var(--scs-space-2); overflow: hidden; background: var(--scs-accent-soft); border-left: 3px solid var(--scs-accent); border-radius: var(--scs-radius-sm); color: var(--scs-text); font-size: var(--scs-text-xs); line-height: 1.3; text-align: left; text-decoration: none; }
.calendar-event strong { overflow: hidden; font-size: var(--scs-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.is-done { background: var(--scs-success-soft); border-left-color: var(--scs-success); }
.calendar-event.is-attention { background: var(--scs-warning-soft); border-left-color: var(--scs-warning); }
.calendar-event.is-cancelled { background: var(--scs-surface-sunken); border-left-color: var(--scs-border-strong); color: var(--scs-text-secondary); }
.calendar-month { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--scs-surface); }
.calendar-month th { padding: var(--scs-space-2); color: var(--scs-text-muted); font-size: var(--scs-text-sm); font-weight: 600; text-align: left; }
.calendar-month td { height: 7rem; padding: var(--scs-space-2); vertical-align: top; border: 1px solid var(--scs-border-subtle); }
.calendar-month td.is-outside { background: var(--scs-surface-sunken); }
.calendar-month td.is-today { background: var(--scs-surface-hover); }
.calendar-month .calendar-event { margin: 2px 0; }
.calendar-date, .calendar-more { font-size: var(--scs-text-sm); text-decoration: none; }
.calendar-agenda { display: none; flex-direction: column; gap: var(--scs-space-4); margin-top: var(--scs-space-6); }
.calendar-agenda.is-visible { display: flex; }
@media (max-width: 575.98px) {
  .calendar, .calendar-month-wrap { display: none; }
  .calendar-agenda { display: flex; }
}

/* Booking link: copyable URL and the public time-slot picker */
.copy-row { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); margin-bottom: var(--scs-space-3); }
.copy-row .form-control { flex: 1 1 16rem; min-width: 0; }
.slot-day + .slot-day { margin-top: var(--scs-space-4); }
.slot-day h2 { margin-bottom: var(--scs-space-2); font-size: var(--scs-text-sm); font-weight: 600; }
.slot-options { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); }
.slot-option { position: relative; }
.slot-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.slot-option span { display: inline-block; min-width: 4.5rem; padding: var(--scs-space-2) var(--scs-space-3); border: 1px solid var(--scs-border-control); border-radius: var(--scs-radius-md); background: var(--scs-surface); text-align: center; font-variant-numeric: tabular-nums; }
.slot-option input:hover + span { background: var(--scs-surface-hover); }
.slot-option input:focus-visible + span { outline: 2px solid var(--scs-accent); outline-offset: 2px; }
.slot-option input:checked + span { border-color: var(--scs-accent); background: var(--scs-accent); color: var(--scs-on-accent); font-weight: 600; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.setup-steps { display: flex; flex-direction: column; gap: var(--scs-space-2); margin-bottom: var(--scs-space-4); padding-left: 1.25rem; }
.address-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-1) var(--scs-space-2); }
.address-field .form-control { flex: 1 1 12rem; min-width: 0; }
.address-prefix { color: var(--scs-text-secondary); font-size: var(--scs-text-sm); overflow-wrap: anywhere; }
.week-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.week-day { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--scs-space-2) var(--scs-space-3); padding: var(--scs-space-3) 0; border-bottom: 1px solid var(--scs-border-subtle); }
.week-day:last-child { border-bottom: 0; }
.week-day-name { font-weight: 600; }
.week-day-periods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-2); }
.period-chip { display: inline-flex; align-items: center; gap: var(--scs-space-1); padding-left: var(--scs-space-3); border: 1px solid var(--scs-success-border); border-radius: var(--scs-radius-pill); background: var(--scs-success-soft); font-variant-numeric: tabular-nums; }
.period-add, .period-errors { grid-column: 2; }
.period-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-2); }
.period-add .form-control { width: auto; }
@media (max-width: 575.98px) {
  .week-day { grid-template-columns: minmax(0, 1fr); }
  .period-add, .period-errors { grid-column: 1; }
}

/* Journey / process steps */
.journey {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  overflow: hidden;
  background: var(--scs-surface);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-lg);
  box-shadow: var(--scs-shadow-xs);
}

.journey-step {
  display: flex;
  align-items: center;
  gap: var(--scs-space-3);
  padding: var(--scs-space-4) var(--scs-space-5);
  border-right: 1px solid var(--scs-border-subtle);
  color: var(--scs-text-muted);
  font-size: var(--scs-text-md);
}

.journey-step:last-child { border-right: 0; }

.journey-marker {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border-control);
  border-radius: 50%;
  font-size: var(--scs-text-xs);
  font-weight: 640;
}

.journey-label { font-weight: 560; }
.journey-step.is-complete { color: var(--scs-text); }
.journey-step.is-upcoming { color: var(--scs-text-muted); }
.journey-step.is-complete .journey-marker { background: var(--scs-success); border-color: var(--scs-success); color: #fff; }
.journey-step.is-complete .journey-marker .icon { width: .85rem; height: .85rem; stroke-width: 2.5; }
.journey-step.is-current { background: var(--scs-accent-soft); color: var(--scs-accent-text); }
.journey-step.is-current .journey-label { font-weight: 620; }
.journey-step.is-current .journey-marker { background: var(--scs-accent); border-color: var(--scs-accent); color: var(--scs-on-accent); }

[data-bs-theme="dark"] .journey-step.is-complete .journey-marker { color: #04161d; }

/* Start-gate status */
.gate {
  display: flex;
  gap: var(--scs-space-3);
  padding: var(--scs-space-4);
  border: 1px solid;
  border-radius: var(--scs-radius-md);
}

.gate p { margin: var(--scs-space-1) 0 0; color: inherit; font-size: var(--scs-text-md); }
.gate strong { font-weight: 620; }
.gate-ready { background: var(--scs-success-soft); border-color: var(--scs-success-border); color: var(--scs-success); }
.gate-blocked { background: var(--scs-warning-soft); border-color: var(--scs-warning-border); color: var(--scs-warning); }

/* Definition summary */
.summary-list { margin: 0; }
.spaced-top { margin-top: var(--scs-space-4); }
.summary-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--scs-space-4); padding: var(--scs-space-3) 0; border-bottom: 1px solid var(--scs-border-subtle); }
.summary-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.summary-list dt { flex: 0 0 auto; color: var(--scs-text-muted); font-size: var(--scs-text-md); font-weight: 500; }
.summary-list dd { margin: 0; min-width: 0; color: var(--scs-text); font-size: var(--scs-text-md); font-weight: 540; text-align: right; overflow-wrap: anywhere; }

/* Long evidence labels and addresses need their own row on narrow screens. */
@media (max-width: 575.98px) {
  .summary-list--mobile-stack > div { flex-direction: column; align-items: stretch; gap: var(--scs-space-2); }
  .summary-list--mobile-stack dd { text-align: left; }
}

/* Tenant chooser */
.tenant-grid { display: grid; gap: var(--scs-space-4); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

.tenant-card { display: flex; align-items: center; gap: var(--scs-space-4); }
.tenant-card-body { min-width: 0; flex: 1 1 auto; }
.tenant-card h2 { margin: var(--scs-space-1) 0; font-size: var(--scs-text-lg); }
.tenant-card p { margin: 0; color: var(--scs-text-muted); font-size: var(--scs-text-sm); }

/* Marketing --------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

.hero-title {
  margin: var(--scs-space-4) 0 var(--scs-space-5);
  max-width: 16ch;
  font-size: clamp(2.25rem, 5vw, var(--scs-text-5xl));
  font-weight: 660;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--scs-space-3); margin-top: var(--scs-space-6); }

.preview-card { padding: var(--scs-space-5); box-shadow: var(--scs-shadow-lg); }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--scs-space-4); padding-bottom: var(--scs-space-4); border-bottom: 1px solid var(--scs-border-subtle); }
.preview-head h2 { margin: var(--scs-space-1) 0 0; font-size: var(--scs-text-lg); }
.preview-row { display: flex; align-items: center; justify-content: space-between; gap: var(--scs-space-4); padding-block: var(--scs-space-3); color: var(--scs-text-secondary); font-size: var(--scs-text-md); }
.preview-row strong { color: var(--scs-text); font-variant-numeric: tabular-nums; }
.preview-row + .preview-row { border-top: 1px solid var(--scs-border-subtle); }

.meter { height: .375rem; margin-top: var(--scs-space-2); background: var(--scs-surface-active); border-radius: var(--scs-radius-pill); overflow: hidden; }
.meter-fill { height: 100%; background: var(--scs-accent); border-radius: inherit; }

.live-dot { display: inline-flex; align-items: center; gap: var(--scs-space-2); color: var(--scs-success); font-size: var(--scs-text-sm); font-weight: 580; }
.live-dot::before { content: ""; width: .45rem; height: .45rem; background: currentColor; border-radius: 50%; }

.feature-grid { display: grid; gap: var(--scs-space-5); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }

.feature-card { padding: var(--scs-space-6); background: var(--scs-surface); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-lg); }
.feature-icon { display: grid; width: 2.25rem; height: 2.25rem; margin-bottom: var(--scs-space-5); place-items: center; background: var(--scs-accent-soft); border-radius: var(--scs-radius-md); color: var(--scs-accent-text); }
.feature-card h2 { margin: 0 0 var(--scs-space-2); font-size: var(--scs-text-lg); }
.feature-card p { margin: 0; color: var(--scs-text-secondary); font-size: var(--scs-text-md); }

.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--scs-space-3);
  padding: var(--scs-space-4) var(--scs-space-5);
  color: var(--scs-text-secondary);
}

/* ==========================================================================
   8. Responsive, motion, print
   ========================================================================== */

@media (max-width: 991.98px) {
  .app-main,
  html[data-sidebar="collapsed"] .app-main { margin-left: 0; }

  .sidebar {
    width: min(18rem, 84vw);
    box-shadow: var(--scs-shadow-lg);
    transform: translateX(-102%);
  }

  html[data-sidebar="collapsed"] .sidebar { width: min(18rem, 84vw); }

  html[data-sidebar="collapsed"] .sidebar .nav-label,
  html[data-sidebar="collapsed"] .sidebar .nav-count,
  html[data-sidebar="collapsed"] .sidebar .brand-name,
  html[data-sidebar="collapsed"] .sidebar .tenant-switch-text,
  html[data-sidebar="collapsed"] .sidebar .rail-hide { display: revert; }

  html[data-sidebar="collapsed"] .sidebar .nav-item,
  html[data-sidebar="collapsed"] .sidebar .tenant-switch { justify-content: flex-start; padding-inline: var(--scs-space-3); }
  html[data-sidebar="collapsed"] .sidebar .sidebar-head { justify-content: flex-start; padding-inline: var(--scs-space-4); }
  html[data-sidebar="collapsed"] .sidebar .nav-group-title { height: auto; background: none; color: var(--scs-text-muted); padding-inline: var(--scs-space-3); margin-inline: 0; }

  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-scrim { opacity: 1; visibility: visible; }
  body.sidebar-open { overflow: hidden; }

  .split { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-title { max-width: 22ch; }
}

@media (min-width: 992px) {
  .sidebar-scrim { display: none; }
}

@media (max-width: 575.98px) {
  :root { --scs-topbar-height: 3.5rem; }

  .page-head { padding-block: var(--scs-space-6) var(--scs-space-5); }
  .page-title { font-size: var(--scs-text-2xl); }
  .page-actions,
  .page-actions .btn { width: 100%; }

  .auth-card { padding: var(--scs-space-6); }
  .card-head { flex-wrap: wrap; }
  .record-row { flex-wrap: wrap; }
  .record-aside { width: 100%; padding-left: 0; }

  /* Tables restack as labelled cards rather than scrolling sideways. */
  .scs-comparison-table, .scs-comparison-table tbody { display: block; }
  .scs-comparison-table tbody th { padding: 0; }
  .scs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .scs-table tbody tr {
    display: grid;
    gap: var(--scs-space-2);
    padding: var(--scs-space-4) var(--scs-space-5);
    border-bottom: 1px solid var(--scs-border-subtle);
  }
  .scs-table tbody tr:last-child { border-bottom: 0; }
  .scs-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--scs-space-4); padding: 0; border: 0; }
  .scs-table .cell-label { display: block; flex: 0 0 auto; color: var(--scs-text-muted); font-size: var(--scs-text-xs); font-weight: 620; letter-spacing: .05em; text-transform: uppercase; }
  .scs-table td > :last-child { text-align: right; }

  .metric-card { min-height: 6rem; padding: var(--scs-space-4); }
  .metric-value { font-size: var(--scs-text-2xl); }

  /* The public header must survive 375px: the wordmark folds to the mark. */
  .public-header .brand-name { display: none; }
  .public-header-inner { gap: var(--scs-space-2); }
  .public-nav { gap: 0; }
  .public-nav-link { padding-inline: var(--scs-space-2); }

  .cookie-banner { right: var(--scs-space-2); bottom: var(--scs-space-2); left: var(--scs-space-2); padding: var(--scs-space-4); }
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--scs-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .sidebar,
  .topbar,
  .public-header,
  .cookie-banner,
  .page-actions,
  .skip-link { display: none !important; }

  .app-main { margin-left: 0 !important; }
  body { background: #fff; }
  .surface-card { box-shadow: none; }
}

/* Software identity and guided workspaces. */
.brand-mark img { width: var(--scs-space-10); height: var(--scs-space-10); }
.brand-mark { width: var(--scs-space-10); height: var(--scs-space-10); }
.brand-name { display: flex; flex-direction: column; line-height: 1.3; }
.brand-tagline { font-size: var(--scs-text-2xs); font-weight: 500; color: var(--scs-text-secondary); letter-spacing: .025em; }
.workspace-intro { border-top: 3px solid var(--scs-accent); }
.workspace-intro .eyebrow { color: var(--scs-violet); }
.workspace-tabs { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); margin-bottom: var(--scs-space-6); }
.workspace-tabs a { padding: var(--scs-space-2) var(--scs-space-4); border-radius: var(--scs-radius-pill); text-decoration: none; color: var(--scs-text-secondary); }
.workspace-tabs a[aria-current] { background: var(--scs-accent-soft); color: var(--scs-accent-text); font-weight: 650; }
.next-step { padding: var(--scs-space-5); border-left: 3px solid var(--scs-turquoise); background: var(--scs-surface); border-radius: var(--scs-radius-md); }
.next-step p { margin: var(--scs-space-2) 0 0; color: var(--scs-text-secondary); }
.session-time { color: var(--scs-accent-text); font-weight: 650; min-width: 4rem; }
.workspace-filters { display: flex; flex-wrap: wrap; gap: var(--scs-space-3); align-items: end; margin-bottom: var(--scs-space-6); }
.workspace-filters label { display: block; font-size: var(--scs-text-sm); margin-bottom: var(--scs-space-1); }
.workspace-filters .form-control, .workspace-filters .form-select { width: auto; max-width: 100%; }
@media (max-width: 576px) { .workspace-filters > div { width: 100%; } .workspace-filters .form-control, .workspace-filters .form-select { width: 100%; } }

/* Restricted synthetic document content inherits the current accessible theme. */
.template-content-preview { overflow-wrap: anywhere; padding: var(--scs-space-6); border: 1px solid var(--scs-border); }
.template-content-preview table { width: 100%; table-layout: fixed; }

/* ==========================================================================
   Configuration lists, work desk, location administration, public booking
   ========================================================================== */

/* List cards: one flush card holds the filter toolbar, the rows and the pager. */
.card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--scs-space-3);
  padding: var(--scs-space-4) var(--scs-space-5);
  background: var(--scs-surface-sunken);
  border-bottom: 1px solid var(--scs-border);
}
.toolbar-field { display: flex; flex: 1 1 16rem; min-width: 0; flex-direction: column; gap: var(--scs-space-1); }
.toolbar-field-narrow { flex: 0 1 13rem; }
.toolbar-field label { color: var(--scs-text-secondary); font-size: var(--scs-text-sm); font-weight: 560; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); }
.search-field { position: relative; }
.search-field .icon { position: absolute; top: 50%; left: .7rem; width: 1rem; height: 1rem; color: var(--scs-text-muted); transform: translateY(-50%); pointer-events: none; }
.search-field .form-control { padding-left: 2.15rem; }
.card-note { margin: 0; padding: var(--scs-space-3) var(--scs-space-5); border-bottom: 1px solid var(--scs-border-subtle); color: var(--scs-text-secondary); font-size: var(--scs-text-sm); }
.card-head-count { display: flex; align-items: center; gap: var(--scs-space-2); }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--scs-space-3);
  padding: var(--scs-space-3) var(--scs-space-5);
  border-top: 1px solid var(--scs-border);
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-sm);
  font-variant-numeric: tabular-nums;
}
.pager-links { display: flex; gap: var(--scs-space-2); margin-left: auto; }

/* Invitation scope: a substitute's cases are found by name, location or coach a page at a
   time, with the chosen ones kept in their own list above the finder. */
.scope-section { min-width: 0; margin: 0 0 var(--scs-space-5); padding: 0; border: 0; }
.scope-section > legend { float: none; margin-bottom: var(--scs-space-1); font-size: var(--scs-text-md); font-weight: 560; }
.scope-section > .form-text { margin-top: 0; }
.case-picker { margin-top: var(--scs-space-3); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-md); overflow: hidden; }
.case-picker-label { margin: 0; padding: var(--scs-space-3) var(--scs-space-5) var(--scs-space-1); color: var(--scs-text-secondary); font-size: var(--scs-text-sm); font-weight: 600; }
.case-picker-note { margin: 0; padding: var(--scs-space-4) var(--scs-space-5); color: var(--scs-text-secondary); font-size: var(--scs-text-sm); }
.case-picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--scs-space-2) var(--scs-space-3); padding: var(--scs-space-3) var(--scs-space-5) var(--scs-space-1); }
.case-picker-head .case-picker-label { padding: 0; }
.case-picker-notice { margin: var(--scs-space-3) 0 0; }
.case-options { margin: 0; padding: 0; list-style: none; }
.case-option { min-height: 0; margin: 0; padding: var(--scs-space-3) var(--scs-space-5) var(--scs-space-3) calc(var(--scs-space-5) + 1.75rem); border-bottom: 1px solid var(--scs-border-subtle); }
.case-option:last-child { border-bottom: 0; }
.case-option .form-check-label { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.case-option-name { font-weight: 580; }

/* Record rows: a leading monogram or icon, a code chip, inline facts, a trailing action. */
.record-avatar {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: 50%;
  color: var(--scs-text-secondary);
  font-size: var(--scs-text-xs);
  font-weight: 640;
}
.record-avatar .icon { width: 1rem; height: 1rem; }
.record-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-2); }
.code-chip {
  display: inline-flex;
  padding: 0 var(--scs-space-2);
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-sm);
  color: var(--scs-text-secondary);
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-xs);
  line-height: 1.6;
  white-space: nowrap;
}
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scs-space-1) var(--scs-space-3); color: var(--scs-text-muted); font-size: var(--scs-text-sm); }
.meta-row > span { display: inline-flex; align-items: center; gap: var(--scs-space-1); }
.meta-row .icon { width: .9rem; height: .9rem; }
.row-chevron { color: var(--scs-text-muted); }
.record-row-top { align-items: flex-start; }

/* Side panels beside a list; short forms stay in view while the list scrolls. */
.panel-intro { color: var(--scs-text-secondary); font-size: var(--scs-text-md); }
.side-panel h2 { margin-bottom: var(--scs-space-2); font-size: var(--scs-text-lg); }
@media (min-width: 992px) {
  .side-panel-sticky { position: sticky; top: calc(var(--scs-topbar-height) + var(--scs-space-6)); }
}

/* A create form folded into a native disclosure: `summary` announces its own state. */
.create-panel { padding: 0; }
.create-panel > summary {
  display: flex;
  align-items: center;
  gap: var(--scs-space-3);
  padding: var(--scs-space-4) var(--scs-space-5);
  border-radius: var(--scs-radius-lg);
  cursor: pointer;
  font-weight: 620;
  list-style: none;
}
.create-panel > summary::-webkit-details-marker { display: none; }
.create-panel > summary:hover { background: var(--scs-surface-hover); }
.create-panel-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--scs-accent-soft);
  border-radius: var(--scs-radius-md);
  color: var(--scs-accent-text);
}
.create-panel-text { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.create-panel-text small { color: var(--scs-text-secondary); font-size: var(--scs-text-sm); font-weight: 400; }
.create-panel > summary > .icon:last-child { color: var(--scs-text-muted); transition: transform var(--scs-duration) var(--scs-ease); }
.create-panel[open] > summary { border-bottom: 1px solid var(--scs-border); border-radius: var(--scs-radius-lg) var(--scs-radius-lg) 0 0; }
.create-panel[open] > summary > .icon:last-child { transform: rotate(180deg); }
.create-panel-body { padding: var(--scs-space-5); }

.workspace-tabs a { display: inline-flex; align-items: center; gap: var(--scs-space-2); }
.workspace-tabs a:hover { background: var(--scs-surface-hover); color: var(--scs-text); }
.workspace-tabs a[aria-current]:hover { background: var(--scs-accent-soft); color: var(--scs-accent-text); }

/* Coaching desk: sessions and tasks side by side; task actions sit under the task. */
.desk-grid { display: grid; gap: var(--scs-space-6); grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); align-items: start; }
.session-when { display: flex; min-width: 3.75rem; flex-direction: column; line-height: 1.25; }
.session-when .session-time { min-width: 0; font-variant-numeric: tabular-nums; }
.session-when small { color: var(--scs-text-muted); font-size: var(--scs-text-xs); }
.task-list { margin: 0; padding: 0; list-style: none; }
.task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--scs-space-1) var(--scs-space-3);
  padding: var(--scs-space-4) var(--scs-space-5);
  border-bottom: 1px solid var(--scs-border-subtle);
}
.task-row:last-child { border-bottom: 0; }
.task-row > .priority-marker { margin-top: .45rem; }
.task-body { display: flex; min-width: 0; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.task-foot { display: flex; grid-column: 2; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--scs-space-2); margin-top: var(--scs-space-2); }
.task-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--scs-space-2); }
.task-actions form { margin: 0; }
.task-actions .btn { white-space: nowrap; }
.btn-complete .icon { color: var(--scs-success); }

/* Location administration: each location lists its managers and quick actions. */
.location-list { margin: 0; padding: 0; list-style: none; }
.location-item { padding: var(--scs-space-5); border-bottom: 1px solid var(--scs-border-subtle); }
.location-item:last-child { border-bottom: 0; }
.location-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--scs-space-2) var(--scs-space-3); }
.location-name { margin: 0; font-size: var(--scs-text-lg); overflow-wrap: anywhere; }
.location-name a { color: var(--scs-text); text-decoration: none; }
.location-name a:hover { color: var(--scs-accent-text); text-decoration: underline; }
.location-facts { display: grid; gap: var(--scs-space-3) var(--scs-space-5); margin: var(--scs-space-4) 0 0; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.location-facts dt { margin-bottom: var(--scs-space-1); color: var(--scs-text-muted); font-size: var(--scs-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.location-facts dd { margin: 0; font-size: var(--scs-text-md); font-variant-numeric: tabular-nums; }
.location-facts dd a { font-weight: 560; text-decoration: none; }
.location-facts dd a:hover { text-decoration: underline; }
.person-chips { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); margin: 0; padding: 0; list-style: none; }
.person-chip { display: inline-flex; align-items: center; gap: var(--scs-space-2); padding: 2px var(--scs-space-3) 2px 2px; background: var(--scs-surface); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-pill); font-size: var(--scs-text-sm); }
.person-chip .avatar { width: 1.4rem; height: 1.4rem; font-size: var(--scs-text-2xs); }
.person-chip.is-pending { border-style: dashed; color: var(--scs-text-secondary); }
.person-chip.is-pending .avatar { background: var(--scs-surface-active); color: var(--scs-text-secondary); }
.location-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--scs-space-2); margin-top: var(--scs-space-4); }
.inline-disclosure > summary { list-style: none; }
.inline-disclosure > summary::-webkit-details-marker { display: none; }
.inline-disclosure[open] { flex: 1 1 100%; }
.inline-disclosure[open] > summary { background: var(--scs-surface-active); }
.quick-form {
  display: grid;
  gap: var(--scs-space-3);
  margin-top: var(--scs-space-3);
  padding: var(--scs-space-4);
  background: var(--scs-surface-sunken);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-md);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  align-items: end;
}
.quick-form .form-note { grid-column: 1 / -1; margin: 0; }
.quick-form-actions { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); }

/* Public booking page: host details beside a month calendar and the day's times. */
.booking {
  display: grid;
  margin-block: var(--scs-space-8) var(--scs-space-12);
  overflow: hidden;
  background: var(--scs-surface);
  border: 1px solid var(--scs-border);
  border-radius: var(--scs-radius-xl);
  box-shadow: var(--scs-shadow-md);
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
}
.booking-host { display: flex; flex-direction: column; gap: var(--scs-space-4); padding: var(--scs-space-8) var(--scs-space-6); border-right: 1px solid var(--scs-border); }
.booking-avatar {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  background: var(--scs-accent-soft);
  border: 1px solid var(--scs-accent-soft-border);
  border-radius: 50%;
  color: var(--scs-accent-text);
  font-size: var(--scs-text-lg);
  font-weight: 700;
}
.booking-title { margin: var(--scs-space-1) 0 0; font-size: var(--scs-text-2xl); overflow-wrap: anywhere; }
.booking-facts { display: flex; flex-direction: column; gap: var(--scs-space-3); margin: 0; padding: 0; list-style: none; color: var(--scs-text-secondary); font-size: var(--scs-text-md); font-weight: 560; }
.booking-facts li { display: flex; align-items: flex-start; gap: var(--scs-space-3); }
.booking-facts .icon { margin-top: .1rem; color: var(--scs-text-muted); }
.booking-facts .booking-choice { color: var(--scs-accent-text); }
.booking-facts .booking-choice .icon { color: var(--scs-accent); }
.booking-intro { margin: 0; color: var(--scs-text-secondary); font-size: var(--scs-text-md); }
.booking-note { margin: auto 0 0; padding-top: var(--scs-space-4); border-top: 1px solid var(--scs-border-subtle); color: var(--scs-text-muted); font-size: var(--scs-text-sm); }
.booking-main { min-width: 0; padding: var(--scs-space-8) var(--scs-space-6); }
.booking-main > .error-summary { margin-bottom: var(--scs-space-6); }
.booking-step-title { margin: 0 0 var(--scs-space-5); font-size: var(--scs-text-xl); }
.booking-picker { display: grid; gap: var(--scs-space-6); grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); align-items: start; }
.booking-month-head { display: flex; align-items: center; justify-content: space-between; gap: var(--scs-space-3); margin-bottom: var(--scs-space-3); }
.booking-month-title, .booking-times-title { margin: 0; font-size: var(--scs-text-base); font-weight: 620; }
.booking-month-nav { display: flex; gap: var(--scs-space-2); }
.booking-month-nav .is-disabled { opacity: .4; cursor: default; }
.booking-month-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: var(--scs-space-1); }
.booking-month-grid th { padding-block: var(--scs-space-2); color: var(--scs-text-muted); font-size: var(--scs-text-xs); font-weight: 600; text-align: center; text-transform: uppercase; }
.booking-month-grid th abbr { text-decoration: none; }
.booking-month-grid td { padding: 0; text-align: center; }
.booking-day {
  display: grid;
  width: 100%;
  max-width: 2.75rem;
  margin-inline: auto;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--scs-text-muted);
  font-size: var(--scs-text-md);
  font-variant-numeric: tabular-nums;
}
a.booking-day { background: var(--scs-accent-soft); color: var(--scs-accent-text); font-weight: 680; text-decoration: none; }
a.booking-day:hover { box-shadow: inset 0 0 0 1px var(--scs-accent); color: var(--scs-accent-text); }
a.booking-day[aria-current] { background: var(--scs-accent); color: var(--scs-on-accent); }
.booking-times-title { margin-bottom: var(--scs-space-3); }
.booking-time-list { display: flex; max-height: 23rem; flex-direction: column; gap: var(--scs-space-2); padding: 3px; overflow-y: auto; }
.booking-time { position: relative; }
.booking-time input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.booking-time > span {
  display: block;
  padding: var(--scs-space-3);
  background: var(--scs-surface);
  border: 1px solid var(--scs-accent);
  border-radius: var(--scs-radius-md);
  color: var(--scs-accent-text);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: background var(--scs-duration-fast) var(--scs-ease);
}
.booking-time input:hover + span { background: var(--scs-accent-soft); }
.booking-time input:focus-visible + span { outline: 2px solid var(--scs-accent); outline-offset: 2px; }
.booking-time input:checked + span { background: var(--scs-accent); color: var(--scs-on-accent); }
.booking-continue { margin-top: var(--scs-space-4); }
.booking-back { margin: calc(-1 * var(--scs-space-3)) 0 var(--scs-space-4) calc(-1 * var(--scs-space-3)); }
.booking-step + .booking-step { margin-top: var(--scs-space-8); padding-top: var(--scs-space-8); border-top: 1px solid var(--scs-border-subtle); }
.booking-step[hidden] + .booking-step { margin-top: 0; padding-top: 0; border-top: 0; }
.booking-step .form-actions { border-top: 0; margin-top: var(--scs-space-4); padding-top: 0; }

@media (max-width: 991.98px) {
  .booking { grid-template-columns: minmax(0, 1fr); }
  .booking-host { border-right: 0; border-bottom: 1px solid var(--scs-border); }
  .booking-note { margin-top: 0; }
  .location-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .location-facts > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .booking { margin-block: var(--scs-space-4) var(--scs-space-8); border-radius: var(--scs-radius-lg); }
  .booking-host, .booking-main { padding: var(--scs-space-5) var(--scs-space-4); }
  .booking-picker { grid-template-columns: minmax(0, 1fr); }
  .booking-time-list { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
  .card-toolbar, .pager { padding-inline: var(--scs-space-4); }
  .toolbar-field, .toolbar-field-narrow { flex-basis: 100%; }
  .location-item { padding: var(--scs-space-4); }
  .task-row { padding-inline: var(--scs-space-4); }
}
.card-tabs { margin: 0; padding: var(--scs-space-3) var(--scs-space-5); border-bottom: 1px solid var(--scs-border-subtle); }
.rate-figure { display: flex; min-width: 6rem; flex-direction: column; line-height: 1.25; }
.rate-figure strong { font-size: var(--scs-text-lg); font-weight: 660; font-variant-numeric: tabular-nums; }
.rate-figure small { color: var(--scs-text-muted); font-size: var(--scs-text-xs); }

/* Survey transcription: one fieldset per statement, its native radios drawn as tick boxes.
   The legend is floated so it lays out as an ordinary grid item beside the scale. */
.rating-list { display: flex; flex-direction: column; }
.rating-row { display: grid; gap: var(--scs-space-2) var(--scs-space-6); padding-block: var(--scs-space-3); border-bottom: 1px solid var(--scs-border-subtle); }
.rating-row:last-child { padding-bottom: 0; border-bottom: 0; }
.rating-question { float: left; width: 100%; margin: 0; padding: 0; font-size: var(--scs-text-md); font-weight: 540; line-height: 1.45; }
.rating-number { color: var(--scs-text-muted); font-variant-numeric: tabular-nums; }
.rating-scale { display: flex; flex-wrap: wrap; gap: var(--scs-space-2); }
.rating-option { position: relative; }
.rating-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rating-option span { display: inline-flex; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0 var(--scs-space-3); border: 1px solid var(--scs-border-control); border-radius: var(--scs-radius-md); background: var(--scs-surface); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rating-option input[value=""] + span { color: var(--scs-text-secondary); }
.rating-option input:hover + span { background: var(--scs-surface-hover); }
.rating-option input:focus-visible + span { outline: 2px solid var(--scs-accent); outline-offset: 2px; }
.rating-option input:checked + span { border-color: var(--scs-accent); background: var(--scs-accent); color: var(--scs-on-accent); font-weight: 650; }
/* The default "No answer" stays quiet when checked, so the ticked ratings stand out. */
.rating-option input[value=""]:checked + span { background: var(--scs-accent-soft); color: var(--scs-accent-text); }
@media (min-width: 768px) {
  .rating-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* Blank paper survey: readable on screen, printed without the application chrome. */
.survey-sheet { max-width: 48rem; }
.survey-sheet h3 { margin: var(--scs-space-6) 0 var(--scs-space-2); font-size: var(--scs-text-lg); }
.survey-subtitle, .survey-note { color: var(--scs-text-secondary); }
.survey-note { font-style: italic; }
.survey-blank { display: flex; gap: var(--scs-space-2); }
.survey-blank::after { content: ""; flex: 1 1 auto; border-bottom: 1px solid var(--scs-text-muted); }
.survey-items { display: flex; flex-direction: column; gap: var(--scs-space-3); padding-left: var(--scs-space-6); }
.survey-items li { break-inside: avoid; }
.survey-boxes { display: flex; flex-wrap: wrap; gap: var(--scs-space-2) var(--scs-space-5); margin-top: var(--scs-space-1); }
.survey-prompt { margin: var(--scs-space-4) 0 0; }
.survey-line { height: 2rem; border-bottom: 1px solid var(--scs-text-muted); }
.survey-thanks { margin-top: var(--scs-space-6); }
@media print {
  .app-main:has(.survey-sheet) .page-head { display: none; }
  .survey-sheet { max-width: none; padding: 0; border: 0; }
}