/*
 * CTIS.eu — Master Stylesheet
 * Single source of truth for design tokens, base styles,
 * global header, global footer and shared components.
 *
 * Sections:
 *   1. Design Tokens (CSS custom properties)
 *   2. Reset & Base
 *   3. Focus & Accessibility
 *   4. Skip Link
 *   5. Global Header / Navigation
 *   6. Phase Banner
 *   7. Global Footer
 *   8. Buttons
 *   9. Form Elements
 *  10. Tags / Status Chips
 *  11. Notification Banners
 *  12. Inset Text
 *  13. Page Hero (shared across category pages)
 *  14. Breadcrumb
 *  15. Layout Utilities
 *  16. Typography Utilities
 */

/* ─────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────── */
:root {
  /* Colour palette */
  --bg:              #ffffff;
  --ink:             #0b0c0c;
  --ink-muted:       #505a5f;
  --border:          #b1b4b6;
  --border-strong:   #0b0c0c;
  --link:            #14467a;
  --link-visited:    #4c2c92;
  --link-hover:      #0b0c0c;
  --focus-bg:        #ffdd00;
  --action:          #00643f;
  --action-dark:     #004e31;
  --action-shadow:   #002d18;
  --error:           #d4351c;
  --warning:         #f47738;  /* background-only — fails 4.5:1 on white */
  --warning-text:    #b8421a;  /* A11Y-2026-05-23-006 — use for text/border on white; 4.66:1 ✓ */
  --info:            #1d70b8;
  --grey-light:      #f3f2f1;
  --grey-mid:        #dee0e2;
  --nav-bg:          #0f172a;

  /* Backward-compatible aliases used by older page CSS */
  --navy:            #0f172a;
  --blue:            #14467a;
  --blue-dark:       #0f3060;
  --blue-light:      #e8f1f8;
  --green:           #00643f;
  --green-bg:        #e3f5ec;
  --text:            #0b0c0c;
  --muted:           #505a5f;
  --subtle:          #595959;  /* A11Y-2026-05-23-009: 7.00:1 on white / 6.27:1 on grey-light (was #767676 = 4.06:1 on grey-light, failed AA) */
  --white:           #ffffff;
  --bg-warm:         #f3f2f1;

  /* Shape */
  --radius:          2px;
  --radius-lg:       4px;
  --shadow:          none;
  --shadow-lg:       none;

  /* Layout */
  --max-w:           1100px;
  --gutter:          30px;

  /* Typography */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}


/* ─────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

@media (max-width: 640px) {
  html { font-size: 16px; }
}

body {
  font-family: var(--font-sans);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--link);
}
a:hover {
  color: var(--link-hover);
}
a:visited {
  color: var(--link-visited);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

ul, ol {
  padding-left: 1.5rem;
}


/* ─────────────────────────────────────────────────────────
   3. FOCUS & ACCESSIBILITY
   ───────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--focus-bg), 0 0 0 5px var(--ink);
}

/* Disable focus-visible ring on mouse clicks (pointer devices) */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}


/* ─────────────────────────────────────────────────────────
   4. SKIP LINK
   ───────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 10px 16px;
  background: var(--focus-bg);
  color: var(--ink);
  font: 700 16px/1 var(--font-sans);
  text-decoration: none;
  outline: 3px solid var(--ink);
}


/* ─────────────────────────────────────────────────────────
   5. GLOBAL HEADER / NAVIGATION
   ───────────────────────────────────────────────────────── */
.ctis-header {
  background: var(--nav-bg);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 200;
}

.ctis-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 0;
}

/* Wordmark */
.ctis-wordmark {
  font: 700 19px/1 var(--font-sans);
  color: #ffffff !important;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  margin-right: 20px;
  flex-shrink: 0;
}
.ctis-wordmark:hover,
.ctis-wordmark:visited {
  color: #ffffff !important;
  text-decoration: none;
}
.ctis-wordmark:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 2px;
  box-shadow: none;
}

/* Nav links */
.ctis-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;   /* never wrap — hide via media query instead */
  flex: 1;
  gap: 0;
  overflow: hidden;    /* clip if translations are too long */
  min-width: 0;
}

.ctis-nav-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
}
.ctis-nav-group-sep {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ctis-nav-links a {
  font: 400 14px/1 var(--font-sans);
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 6px 9px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;       /* cap individual link width — prevents any single translation blowing layout */
}

/* Insights group hidden below 1100px to save space */
@media (max-width: 1100px) {
  .ctis-nav-group-sep { display: none; }
}

@media (max-width: 1200px) {
  .ctis-nav-links a { padding: 6px 8px; font-size: 13px; max-width: 100px; }
  .ctis-nav-group-sep { margin-left: 8px; padding-left: 8px; }
}
.ctis-nav-links a:hover {
  color: #ffffff !important;
  text-decoration: none;
}
.ctis-nav-links a:visited {
  color: rgba(255, 255, 255, 0.8) !important;
}
.ctis-nav-links a.nav-active {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}
.ctis-nav-links a:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 0;
  box-shadow: none;
}

/* Header action buttons */
.ctis-nav-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.ctis-nav-user {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.ctis-hdr-btn {
  font: 700 14px/1 var(--font-sans);
  padding: 8px 14px;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  display: inline-block;
  transition: background 0.1s, color 0.1s;
}

.ctis-hdr-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9) !important;
}
.ctis-hdr-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  text-decoration: none;
}
.ctis-hdr-btn-outline:visited { color: rgba(255, 255, 255, 0.9) !important; }

.ctis-hdr-btn-primary {
  background: var(--action);
  color: #ffffff !important;
  border: 1px solid var(--action-dark);
  box-shadow: 0 2px 0 0 var(--action-shadow);
}
.ctis-hdr-btn-primary:hover {
  background: var(--action-dark);
  color: #ffffff !important;
  text-decoration: none;
}
.ctis-hdr-btn-primary:visited { color: #ffffff; }
.ctis-hdr-btn-primary:active {
  box-shadow: none;
  transform: translateY(2px);
}

.ctis-hdr-btn:focus-visible,
.ctis-hdr-btn-outline:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 0;
  box-shadow: none;
}

/* ─── Hamburger button ───────────────────────────────────────────────────── */
.ctis-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  margin-left: auto;   /* pin to right edge — works whether .ctis-nav-links is visible or not */
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}
.ctis-hamburger:hover { background: rgba(255,255,255,0.1); }
.ctis-hamburger:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 2px;
}
.ctis-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
/* Animate to × when open */
.ctis-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ctis-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ctis-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Wordmark EU highlight ─────────────────────────────────────────────── */
.ctis-wordmark-eu { color: #FFCC00; }

/* ─── Mobile overlay ────────────────────────────────────────────────────── */
.ctis-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 299;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.ctis-mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ─── Mobile nav drawer (right-side slide) ───────────────────────────────── */
.ctis-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 88vw;
  height: 100vh;
  background: var(--nav-bg);
  z-index: 300;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ctis-mobile-nav.is-open { transform: translateX(0); }

body.nav-open { overflow: hidden; }

.ctis-mobile-nav-inner {
  padding: 0 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Drawer header with close button */
.ctis-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin: 0 -20px 12px;
}
.ctis-mobile-nav-header span {
  font: 700 17px/1 var(--font-sans);
  color: #fff;
}
.ctis-mobile-nav-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.8);
  font: 400 20px/1 var(--font-sans);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.ctis-mobile-nav-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ctis-mobile-nav-close:focus-visible { outline: 3px solid var(--focus-bg); outline-offset: 0; }

.ctis-mobile-nav-link {
  font: 500 16px/1 var(--font-sans);
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  padding: 12px 10px;
  border-radius: var(--radius);
  display: block;
  transition: background 0.1s, color 0.1s;
}
.ctis-mobile-nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.ctis-mobile-nav-link:visited { color: rgba(255,255,255,0.82); }
.ctis-mobile-nav-link.is-active {
  color: #fff;
  background: rgba(255,255,255,0.1);
  font-weight: 600;
}

.ctis-mobile-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 12px 0;
}

.ctis-mobile-nav-action {
  font: 700 15px/1 var(--font-sans);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: var(--radius);
  display: block;
  text-align: center;
  margin-top: 4px;
  transition: background 0.1s, color 0.1s;
}
.ctis-mobile-nav-action.ctis-hdr-btn-outline {
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.9);
}
.ctis-mobile-nav-action.ctis-hdr-btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ctis-mobile-nav-action.ctis-hdr-btn-primary {
  background: var(--action);
  color: #fff;
  border: 1px solid var(--action-dark);
}
.ctis-mobile-nav-action.ctis-hdr-btn-primary:hover { background: var(--action-dark); }

/* ─── Responsive: show hamburger, hide desktop nav ──────────────────────── */
@media (max-width: 1024px) {
  .ctis-nav-links { display: none; }
  .ctis-hamburger { display: flex; }
}
@media (max-width: 540px) {
  .ctis-nav-actions .ctis-hdr-btn-outline { display: none; }
  .ctis-nav-actions .ctis-hdr-btn-primary { display: none; }
}


/* ─────────────────────────────────────────────────────────
   6. PHASE BANNER
   ───────────────────────────────────────────────────────── */
.ctis-phase-banner {
  background: var(--grey-light);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-size: 15px;
  font-family: var(--font-sans);
}

.ctis-phase-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ctis-phase-banner-inner a {
  color: var(--link);
}


/* ─────────────────────────────────────────────────────────
   7. GLOBAL FOOTER
   ───────────────────────────────────────────────────────── */
.ctis-footer {
  background: var(--grey-light);
  border-top: 4px solid var(--ink);
  padding: 40px 0 28px;
  margin-top: 60px;
}

.ctis-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.ctis-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gutter);
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .ctis-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ctis-footer-grid { grid-template-columns: 1fr; }
}

.ctis-footer-wordmark {
  font: 700 19px/1 var(--font-sans);
  color: var(--ink);
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
}
.ctis-footer-wordmark:visited { color: var(--ink); }
.ctis-footer-wordmark:hover { text-decoration: underline; }

.ctis-footer-tagline {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 260px;
  line-height: 1.5;
}

.ctis-footer-col-heading {
  font: 700 16px/1 var(--font-sans);
  color: var(--ink);
  margin-bottom: 14px;
}

.ctis-footer-list {
  list-style: none;
  padding: 0;
}
.ctis-footer-list li { margin-bottom: 8px; }
.ctis-footer-list a { font-size: 14px; color: var(--link); }
.ctis-footer-list a:hover { color: var(--link-hover); }

.ctis-footer-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-bottom: 20px;
}

.ctis-footer-disclaimer {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────
   8. BUTTONS
   ───────────────────────────────────────────────────────── */
.ctis-btn {
  display: inline-block;
  font: 700 19px/1 var(--font-sans);
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  top: 0;
  transition: background 0.1s, box-shadow 0.1s, top 0.08s;
}
.ctis-btn:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--focus-bg), 0 0 0 5px var(--ink);
}

/* Primary */
.ctis-btn-primary {
  background: var(--action);
  color: #ffffff;
  border-color: var(--action-dark);
  box-shadow: 0 2px 0 0 var(--action-shadow);
}
.ctis-btn-primary:hover {
  background: var(--action-dark);
  color: #ffffff;
  text-decoration: none;
}
.ctis-btn-primary:visited { color: #ffffff; }
.ctis-btn-primary:active {
  top: 2px;
  box-shadow: none;
}

/* Secondary */
.ctis-btn-secondary {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 2px 0 0 var(--ink);
}
.ctis-btn-secondary:hover {
  background: var(--grey-light);
  color: var(--ink);
  text-decoration: none;
}
.ctis-btn-secondary:visited { color: var(--ink); }
.ctis-btn-secondary:active {
  top: 2px;
  box-shadow: none;
}

/* Size modifier */
.ctis-btn-sm {
  font-size: 16px;
  padding: 8px 14px;
}


/* ─────────────────────────────────────────────────────────
   9. FORM ELEMENTS
   ───────────────────────────────────────────────────────── */
.ctis-label {
  display: block;
  font: 700 19px/1 var(--font-sans);
  margin-bottom: 4px;
  color: var(--ink);
}

.ctis-hint {
  display: block;
  font-size: 16px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.ctis-input,
.ctis-select {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 40px;
  padding: 0 10px;
  border: 2px solid var(--border-strong);
  border-radius: 0;
  font: 400 19px/1 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  appearance: none;
}

.ctis-input:focus,
.ctis-select:focus {
  outline: 3px solid var(--focus-bg);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--ink);
}

.ctis-input::placeholder { color: var(--ink-muted); }

/* Error state */
.ctis-form-error .ctis-input,
.ctis-form-error .ctis-select {
  border-color: var(--error);
}
.ctis-form-error-msg {
  font: 700 16px/1 var(--font-sans);
  color: var(--error);
  margin-bottom: 6px;
  display: block;
}


/* ─────────────────────────────────────────────────────────
   10. TAGS / STATUS CHIPS
   ───────────────────────────────────────────────────────── */
.ctis-tag {
  display: inline-block;
  font: 700 13px/1 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

.ctis-tag-live    { background: var(--action);  color: #ffffff; }
.ctis-tag-beta    { background: var(--info);    color: #ffffff; }
.ctis-tag-recruit { background: #00703c;        color: #ffffff; }
.ctis-tag-pending { background: var(--warning); color: var(--ink); }
.ctis-tag-closed  { background: var(--ink-muted); color: #ffffff; }
.ctis-tag-new     { background: var(--ink);     color: #ffffff; }
.ctis-tag-info    { background: var(--info);    color: #ffffff; }


/* ─────────────────────────────────────────────────────────
   11. NOTIFICATION BANNERS
   ───────────────────────────────────────────────────────── */
.ctis-notification {
  border-left: 5px solid;
  padding: 16px 20px;
  margin-bottom: 28px;
  font-size: 16px;
}
.ctis-notification-heading {
  font: 700 19px/1 var(--font-sans);
  margin-bottom: 4px;
}
.ctis-notification-info    { border-color: var(--info);   background: #e8f1f8; }
.ctis-notification-success { border-color: var(--action); background: #e3f5ec; }
.ctis-notification-error   { border-color: var(--error);  background: #fdf0ee; }
.ctis-notification-warning { border-color: var(--warning);background: #fef5ec; }


/* ─────────────────────────────────────────────────────────
   12. INSET TEXT
   ───────────────────────────────────────────────────────── */
.ctis-inset {
  border-left: 5px solid var(--border);
  padding: 12px 0 12px 16px;
  margin: 24px 0;
  font-size: 16px;
  color: var(--ink);
}


/* ─────────────────────────────────────────────────────────
   13. PAGE HERO  (shared by category & detail pages)
   ───────────────────────────────────────────────────────── */
.ctis-page-hero {
  background: var(--nav-bg);
  padding: 36px var(--gutter) 28px;
  color: #ffffff;
}

.ctis-page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.ctis-page-hero-breadcrumb {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}
.ctis-page-hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}
.ctis-page-hero-breadcrumb a:hover { color: #ffffff; }
.ctis-page-hero-breadcrumb a:visited { color: rgba(255, 255, 255, 0.65); }

.ctis-page-hero h1 {
  font: 700 clamp(24px, 4vw, 36px)/1.2 var(--font-sans);
  color: #ffffff;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.ctis-page-hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ctis-chip {
  display: inline-flex;
  align-items: center;
  font: 700 13px/1 var(--font-sans);
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ctis-chip-default { background: rgba(255,255,255,.15); color: #ffffff; }
.ctis-chip-green   { background: #00703c;               color: #ffffff; }
.ctis-chip-grey    { background: rgba(255,255,255,.1);  color: rgba(255,255,255,.8); }

@media (max-width: 640px) {
  .ctis-page-hero { padding: 24px 15px 20px; }
}


/* ─────────────────────────────────────────────────────────
   14. BREADCRUMB
   ───────────────────────────────────────────────────────── */
.ctis-breadcrumb {
  font-size: 16px;
  color: var(--ink-muted);
  padding: 14px 0 0;
}
.ctis-breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.ctis-breadcrumb li + li::before {
  content: " › ";
  color: var(--ink-muted);
  margin: 0 4px;
}
.ctis-breadcrumb a { color: var(--link); }
.ctis-breadcrumb [aria-current] { color: var(--ink-muted); }


/* ─────────────────────────────────────────────────────────
   15. LAYOUT UTILITIES
   ───────────────────────────────────────────────────────── */
.ctis-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 640px) {
  .ctis-container { padding: 0 15px; }
}

.ctis-main {
  padding: 32px 0 0;
}

.ctis-section {
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}
.ctis-section:last-of-type { border-bottom: none; }

.ctis-section-heading {
  font: 700 27px/1.25 var(--font-sans);
  color: var(--ink);
  border-bottom: 2px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.ctis-section-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ctis-section-row .ctis-section-heading {
  border: none;
  padding: 0;
  margin: 0;
}

.ctis-section-hr {
  border: none;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.ctis-view-all {
  font: 700 16px/1 var(--font-sans);
  color: var(--link);
  text-decoration: underline;
  white-space: nowrap;
}
.ctis-view-all:hover { color: var(--link-hover); }

/* Grid helpers */
.ctis-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.ctis-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gutter);
}
@media (max-width: 768px) {
  .ctis-grid-2, .ctis-grid-3 { grid-template-columns: 1fr; }
}

/* Category / browse grid */
.ctis-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
}
.ctis-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border: 1px solid var(--border);
  margin: -1px 0 0 -1px;
  text-decoration: none;
  font: 700 16px/1.3 var(--font-sans);
  color: var(--link);
  transition: background 0.1s;
}
.ctis-cat-item:hover {
  background: var(--grey-light);
  text-decoration: underline;
}
.ctis-cat-item:visited { color: var(--link-visited); }
.ctis-cat-count {
  font: 400 14px/1 var(--font-sans);
  color: var(--ink-muted);
  margin-left: 8px;
  flex-shrink: 0;
}

/* Trial list */
.ctis-trial-list { list-style: none; padding: 0; }
.ctis-trial-item {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.ctis-trial-item:first-child { border-top: 1px solid var(--border); }
.ctis-trial-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ctis-trial-title {
  font: 700 19px/1.35 var(--font-sans);
  color: var(--link);
  text-decoration: underline;
}
.ctis-trial-title:hover { color: var(--link-hover); }
.ctis-trial-title:visited { color: var(--link-visited); }
.ctis-trial-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Pagination */
.ctis-pager {
  display: flex;
  gap: 4px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.ctis-pager a,
.ctis-pager span {
  display: inline-block;
  min-width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  font: 700 16px/38px var(--font-sans);
  border: 2px solid transparent;
  text-decoration: none;
  border-radius: 0;
}
.ctis-pager a { color: var(--link); border-color: var(--border); }
.ctis-pager a:hover { border-color: var(--ink); color: var(--link-hover); }
.ctis-pager span { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.ctis-pager a:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 0;
  box-shadow: none;
}

/* CTA bar */
.ctis-cta-bar {
  background: var(--grey-light);
  border: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border-radius: var(--radius);
}
.ctis-cta-bar p {
  font-size: 16px;
  color: var(--ink);
}

/* Letter navigation (A-Z index pages) */
.ctis-letter-nav {
  position: sticky;
  top: 54px;   /* sits flush under sticky .ctis-header */
  z-index: 80;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 10px var(--gutter);
}
.ctis-letter-nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.ctis-letter-nav a {
  display: inline-block;
  padding: 4px 9px;
  font: 500 14px/1 var(--font-mono);
  color: var(--ink);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.1s;
}
.ctis-letter-nav a:hover {
  background: var(--grey-light);
  text-decoration: underline;
}
.ctis-letter-nav a:visited { color: var(--ink); }

@media (max-width: 640px) {
  .ctis-letter-nav { padding: 6px 15px; }
  .ctis-letter-nav-inner { gap: 4px; }
  .ctis-letter-nav a {
    padding: 8px 12px;
    font-size: 16px;
    min-width: 32px;
    text-align: center;
  }
}


/* ─────────────────────────────────────────────────────────
   16. TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.ctis-text-muted  { color: var(--ink-muted); }
.ctis-text-bold   { font-weight: 700; }
.ctis-text-small  { font-size: 16px; }
.ctis-text-large  { font-size: 24px; }

.ctis-mt-s  { margin-top:  8px; }
.ctis-mt-m  { margin-top: 16px; }
.ctis-mt-l  { margin-top: 28px; }
.ctis-mt-xl { margin-top: 48px; }

.ctis-mb-s  { margin-bottom:  8px; }
.ctis-mb-m  { margin-bottom: 16px; }
.ctis-mb-l  { margin-bottom: 28px; }


/* ─────────────────────────────────────────────────────────
   17. TRIAL DETAIL PAGE
   ───────────────────────────────────────────────────────── */

/* Layout */
.trial-detail-main { padding: 28px 0 60px; }
.trial-detail-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) {
  .trial-detail-main { padding: 16px 0 40px; }
  .trial-detail-wrap { padding: 0 15px; }
}

/* EUCT / Protocol meta strip */
.trial-id-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 15px;
  color: var(--ink-muted);
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.trial-id-label { font-weight: 700; color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.trial-ct-number { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: 14px; background: var(--grey-light); padding: 2px 8px; border: 1px solid var(--border); }
.trial-id-sep { color: var(--border); }

/* Key info grid (6 summary tiles) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.info-tile {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.info-tile:nth-child(3n)  { border-right: none; }
.info-tile:nth-child(n+4) { border-bottom: none; }
.tile-label {
  display: block;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 7px;
}
.tile-value {
  display: block;
  font: 600 15px/1.4 var(--font-sans);
  color: var(--ink);
}
@media (max-width: 640px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
  .info-tile:nth-child(3n) { border-right: 1px solid var(--border); }
  .info-tile:nth-child(2n) { border-right: none; }
}
@media (max-width: 380px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-tile  { border-right: none !important; }
}

/* Status / phase badges */
.badge {
  display: inline-block;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.badge-green { background: #00703c; color: #fff; }
.badge-blue  { background: var(--info); color: #fff; }
.badge-gray  { background: var(--ink-muted); color: #fff; }
.badge-red   { background: var(--error); color: #fff; }

/* TOC card */
.toc-card {
  background: var(--grey-light);
  border: 1px solid var(--border);
  padding: 18px 22px;
  margin-bottom: 24px;
}
.toc-card > h2 {
  font: 700 17px/1.2 var(--font-sans) !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--border) !important;
  letter-spacing: -.01em;
}
details.toc-section    { margin-bottom: 3px; }
details.toc-subsection { margin: 2px 0 2px 14px; }

summary.toc-level-1 {
  cursor: pointer; list-style: none; display: block;
  padding: 7px 10px 7px 28px;
  background: var(--bg); border: 1px solid var(--border);
  font: 600 15px/1.4 var(--font-sans);
  color: var(--link); position: relative;
  user-select: none; margin-bottom: 2px;
}
summary.toc-level-1::-webkit-details-marker { display: none; }
summary.toc-level-1::marker { display: none; }
summary.toc-level-1::before {
  content: "▸"; position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--ink-muted);
  font-size: 10px; transition: transform .15s;
}
details[open] > summary.toc-level-1::before { transform: translateY(-50%) rotate(90deg); }
summary.toc-level-1:hover { background: var(--grey-light); text-decoration: underline; }

summary.toc-level-2 {
  cursor: pointer; list-style: none; display: block;
  padding: 5px 8px 5px 24px;
  background: var(--bg); border: 1px solid var(--border);
  font: 400 13px/1.4 var(--font-sans);
  color: var(--link); position: relative;
  user-select: none; margin: 2px 0;
}
summary.toc-level-2::-webkit-details-marker { display: none; }
summary.toc-level-2::marker { display: none; }
summary.toc-level-2::before {
  content: "▸"; position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%); color: var(--ink-muted);
  font-size: 8px; transition: transform .15s;
}
details[open] > summary.toc-level-2::before { transform: translateY(-50%) rotate(90deg); }
summary.toc-level-2:hover { background: var(--grey-light); text-decoration: underline; }

.toc-card ul { list-style: none; padding: 0 0 0 6px; margin: 3px 0 3px 12px; }
.toc-card ul li { margin: 1px 0; }
.toc-card ul a { font-size: 13px; color: var(--link); text-decoration: none; display: inline-block; padding: 1px 0; }
.toc-card ul a:hover { color: var(--link-hover); text-decoration: underline; }

/* Section cards (collapsible detail sections) */
.section-card { border: 1px solid var(--border); margin-bottom: 6px; }
details.section-collapsible { padding: 0; }

summary.section-header {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--grey-light);
  user-select: none;
}
summary.section-header::-webkit-details-marker { display: none; }
summary.section-header::marker { display: none; }
summary.section-header:hover { background: var(--grey-mid); }
summary.section-header::after {
  content: "▾"; color: var(--ink-muted); font-size: 13px;
  flex-shrink: 0; margin-left: 10px; transition: transform .15s;
}
details.section-collapsible:not([open]) > summary.section-header::after {
  transform: rotate(-90deg);
}
.section-header h3 {
  font: 700 17px/1.2 var(--font-sans) !important;
  color: var(--ink) !important;
  margin: 0 !important; border: none !important; padding: 0 !important;
  letter-spacing: -.01em;
}
.section-content { padding: 18px 22px; }

/* Headings inside trial detail wrap */
.trial-detail-wrap h2 {
  font: 700 22px/1.25 var(--font-sans);
  color: var(--ink); margin: 32px 0 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--border);
  letter-spacing: -.01em;
}
.trial-detail-wrap h3 {
  font: 700 17px/1.3 var(--font-sans);
  color: var(--ink); margin: 0;
  border: none; padding: 0;
}
.trial-detail-wrap h4 { font: 700 15px/1.4 var(--font-sans); color: var(--ink); margin: 18px 0 8px; }
.trial-detail-wrap h5 { font: 700 14px/1.4 var(--font-sans); color: var(--ink); margin: 12px 0 6px; }

/* Field labels (uppercase descriptors) */
.bolder, p.bolder {
  font: 700 11px/1 var(--font-sans) !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: var(--ink-muted) !important; margin: 14px 0 4px !important;
  display: block;
}

/* Indented content blocks */
.content {
  padding: 10px 14px; background: var(--grey-light);
  border-left: 4px solid var(--border-strong);
  margin-bottom: 14px; font-size: 16px; line-height: 1.6;
}

/* Body text */
.trial-detail-wrap p  { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 10px; }
.trial-detail-wrap ul { padding-left: 1.4rem; }
.trial-detail-wrap ul li { font-size: 16px; line-height: 1.6; margin-bottom: 4px; }

/* Links */
.trial-detail-wrap a         { color: var(--link); }
.trial-detail-wrap a:hover   { color: var(--link-hover); text-decoration: underline; }
.trial-detail-wrap a:visited { color: var(--link-visited); }

/* Tables */
.trial-detail-wrap table {
  width: 100%; border-collapse: collapse;
  margin: 14px 0; font-size: 15px; border: 1px solid var(--border);
}
.trial-detail-wrap thead { background: var(--grey-light); }
.trial-detail-wrap th {
  font: 700 11px/1 var(--font-sans); text-align: left;
  padding: 9px 11px; border: 1px solid var(--border);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  word-wrap: break-word; overflow-wrap: break-word;
}
.trial-detail-wrap td {
  padding: 9px 11px; border: 1px solid var(--border);
  color: var(--ink); vertical-align: top; font-size: 15px;
  line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word;
}
.trial-detail-wrap tbody tr:nth-child(even) { background: var(--grey-light); }
.trial-detail-wrap tbody tr:hover { background: #e8f1f8; }

.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; }
.table-wrapper table { min-width: 420px; }
@media (max-width: 768px) {
  .table-wrapper table { font-size: .8em; }
  .table-wrapper th, .table-wrapper td { padding: 6px 7px; white-space: nowrap; }
  .table-wrapper td:last-child { white-space: normal; min-width: 120px; max-width: 200px; }
}

/* Contact privacy */
.contact-blurred {
  filter: blur(5px); cursor: pointer; background: var(--grey-mid);
  padding: 2px 10px; border-radius: 2px; user-select: none; display: inline-block;
}
.contact-visible { filter: none; }
@media (max-width: 768px) {
  .contact-blurred {
    min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; padding: 10px 16px;
  }
}

/* Result count above pagination */
.ctis-result-count {
  font: 400 14px/1.4 var(--font-sans);
  color: var(--ink-muted);
  margin: 20px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Related trials */
.related-trials { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); padding-left: 24px; padding-right: 24px; max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-bottom: 24px; }
.related-trials h2 { font: 700 18px/1.2 var(--font-sans); color: var(--ink); margin: 0 0 4px; padding: 0 0 8px; border-bottom: 2px solid var(--border); }
.related-trials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px; margin-top: 12px;
}
.related-trial-item { border: 1px solid var(--border); padding: 12px 14px; }
.related-trial-item a {
  color: var(--link); font: 700 14px/1.4 var(--font-sans);
  text-decoration: none; display: block; margin-bottom: 3px;
}
.related-trial-item a:hover { text-decoration: underline; color: var(--link-hover); }
.related-trial-item span   { color: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); }

/* Section dividers */
#summary, #full_trial_info, #trial_results, #locations { margin-top: 28px; }

/* ─── Extra banner tag styles ────────────────────────────────────────────── */
.ctis-tag-recruiting { background: #00703c; color: #ffffff; }
.ctis-tag-warning    { background: #f47738; color: #ffffff; }
.ctis-tag-danger     { background: #d4351c; color: #ffffff; }
.ctis-tag-neutral    { background: #505a5f; color: #ffffff; }
.ctis-tag-purple     { background: #6d28d9; color: #ffffff; }

.ctis-phase-banner-link {
  margin-left: 8px;
  color: var(--action);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ctis-phase-banner-link:hover { text-decoration: underline; }

/* ─── Right sidebar ──────────────────────────────────────────────────────── */
.ctis-layout-with-sidebar {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.ctis-main-content { flex: 1 1 0; min-width: 0; }

.ctis-sidebar-right {
  width: 280px;
  flex-shrink: 0;
  padding-top: 24px;
}
.ctis-sidebar-widget {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.ctis-sidebar-widget-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ctis-sidebar-widget-body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
}
.ctis-sidebar-widget-body a { color: var(--link); }
.ctis-sidebar-widget-body a:hover { color: var(--link-hover); text-decoration: underline; }
.ctis-sidebar-widget-body ul { list-style: none; padding: 0; margin: 0; }
.ctis-sidebar-widget-body ul li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.ctis-sidebar-widget-body ul li:last-child { border-bottom: none; }

@media (max-width: 900px) {
  .ctis-layout-with-sidebar { flex-direction: column; }
  .ctis-sidebar-right { width: 100%; padding-top: 0; }
}

/* Print */
@media print {
  .ctis-header, .ctis-footer, .ctis-phase-banner { display: none !important; }
  .ctis-sidebar-right { display: none !important; }
  .trial-detail-main { padding: 0; }
  .section-card { page-break-inside: avoid; border: 1px solid #ccc; margin-bottom: 10px; }
  .contact-blurred { filter: none !important; background: transparent !important; }
  details { display: block !important; }
  summary { display: block !important; background: none !important; padding: 2px 0 !important; }
  summary::before, summary::after { display: none !important; }
  .toc-card { display: none; }
}


/* ─────────────────────────────────────────────────────────
   18. GLOBAL FIXES & PATCHES  (2026-05)
   ───────────────────────────────────────────────────────── */

/* main.ctis-container — vertical breathing room */
main.ctis-container {
  padding-top: 28px;
  padding-bottom: 60px;
}

/* .ctis-page-hero <nav> (breadcrumb without explicit class) */
.ctis-page-hero nav {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
  line-height: 1.5;
}
.ctis-page-hero nav a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}
.ctis-page-hero nav a:hover  { color: #ffffff; text-decoration: none; }
.ctis-page-hero nav a:visited { color: rgba(255, 255, 255, 0.65); }

/* Neutral / non-recruiting status tag */
.ctis-tag-neutral { background: var(--ink-muted); color: #ffffff; }

/* Pagination: .page-btn class compatibility (older category pages) */
.ctis-pager .page-btn {
  display: inline-block;
  min-width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  font: 700 16px/38px var(--font-sans);
  border: 2px solid var(--border);
  text-decoration: none;
  border-radius: 0;
  color: var(--link);
}
.ctis-pager .page-btn:hover { border-color: var(--ink); color: var(--link-hover); }
.ctis-pager .page-btn.active { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.ctis-pager .page-btn:focus-visible {
  outline: 3px solid var(--focus-bg);
  outline-offset: 0;
  box-shadow: none;
}

/* Trial list items: proper flex row inside <li> or <a> */
.ctis-trial-item {
  display: flex;
  flex-direction: column;
}
.ctis-trial-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Mobile: tighter title font, wrap badge below */
@media (max-width: 480px) {
  .ctis-trial-title { font-size: 16px; line-height: 1.4; }
  .ctis-trial-header { gap: 8px; }
  .ctis-trial-meta  { font-size: 14px; gap: 10px; }
  .ctis-tag { font-size: 12px; }
}

/* Stats bar: remove right border from 2nd column on mobile 2×2 grid */
@media (max-width: 640px) {
  .hp-stat:nth-child(2n) { border-right: none; }
}

/* Help page layout */
.help-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 768px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-toc    { display: none; }
}
.help-toc {
  position: sticky;
  top: 60px;
  background: var(--grey-light);
  border: 1px solid var(--border);
  padding: 18px 20px;
}
.help-toc-title {
  font: 700 13px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.help-toc-list { list-style: none; padding: 0; }
.help-toc-list li { margin-bottom: 6px; }
.help-toc-list a { font-size: 14px; color: var(--link); text-decoration: none; }
.help-toc-list a:hover { text-decoration: underline; }
.help-content { min-width: 0; }
.help-section { margin-bottom: 48px; scroll-margin-top: 72px; }
.help-h2 {
  font: 700 24px/1.25 var(--font-sans);
  color: var(--ink);
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  margin: 0 0 20px;
  letter-spacing: -.01em;
}
.help-h3 {
  font: 700 18px/1.3 var(--font-sans);
  color: var(--ink);
  margin: 28px 0 10px;
}
.help-p  { font-size: 16px; line-height: 1.7; color: var(--ink); margin: 0 0 12px; }
.help-pre {
  background: var(--grey-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 12px 0 16px;
  font: 400 14px/1.6 var(--font-mono);
  color: var(--ink);
}
.help-code {
  font: 400 13px/1 var(--font-mono);
  background: var(--grey-light);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 2px;
}
.help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: 15px;
}
.help-table th {
  background: var(--grey-light);
  font: 700 12px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 9px 12px;
  border: 1px solid var(--border);
  text-align: left;
  color: var(--ink);
}
.help-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
}
.help-table tbody tr:nth-child(even) { background: var(--grey-light); }
.help-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.help-list { padding-left: 1.4rem; margin: 0 0 12px; }
.help-list li { font-size: 16px; line-height: 1.7; margin-bottom: 4px; }
.help-inset {
  border-left: 5px solid var(--info);
  background: #e8f1f8;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.6;
}
.help-inset-warn {
  border-left: 5px solid var(--warning);
  background: #fef5ec;
}
.help-inset-ok {
  border-left: 5px solid var(--action);
  background: #e3f5ec;
}
.help-scenario {
  background: var(--grey-light);
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.help-scenario-title {
  font: 700 16px/1.3 var(--font-sans);
  color: var(--ink);
  margin-bottom: 10px;
}
.help-filter-cat {
  border-left: 4px solid var(--link);
  padding-left: 14px;
  margin-bottom: 20px;
}
.help-filter-cat-title {
  font: 700 16px/1.4 var(--font-sans);
  color: var(--ink);
  margin-bottom: 6px;
}
.help-faq-q { font: 700 16px/1.5 var(--font-sans); color: var(--ink); margin-bottom: 6px; }
.help-faq-a { font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin-bottom: 20px; padding-left: 14px; border-left: 3px solid var(--border); }

/* A11Y-2026-05-23-010: honour user OS-level reduced-motion preference.
   Covers WCAG 2.2.2 / vestibular-disorder safety for mobile drawer transforms,
   fade overlays and CSS scroll-smoothing across every page using ctis.css. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────
   17. Language Switcher — compact 2-letter code
   ───────────────────────────────────────────────────────── */
.ctis-lang-wrap { display: flex; align-items: center; flex-shrink: 0; }
.ctis-lang-select {
  /* Show only the 2-letter code at rest — full name appears in browser dropdown */
  width: 52px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
  font: 500 12px/1 var(--font-mono);
  padding: 5px 4px 5px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ctis-lang-select:hover  { background: rgba(255,255,255,.14); }
.ctis-lang-select:focus-visible { outline: 3px solid var(--focus-bg); outline-offset: 0; }
.ctis-lang-select option { background: #0f172a; color: #fff; font: 400 14px/1 sans-serif; text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) { .ctis-lang-wrap { display: none; } }