/* ============================================================
   BULGARIAN CIVIL SERVICE TOOLS — UNIFIED DESIGN SYSTEM v1.0
   "Public Good Atlas Bulgaria"

   Identical across: Motorway · Green Atlas · PotholeTracker
                     ВодаБГ · ВъздухБГ · КолкоСтрува

   Each project sets its own --cs-accent / --cs-accent-2.
   All primitives below recolor automatically.

   Bulgarian flag references — only used as the 3px accent stripe.
     Бяло  #FFFFFF
     Зелено #00966E
     Червено #D62612
   ============================================================ */

@layer cs-base, cs-tokens, cs-primitives, cs-anim, cs-overrides;

@layer cs-tokens {
  :root {
    /* Bulgaria flag (used only for the unifier stripe) */
    --cs-flag-white: #ffffff;
    --cs-flag-green: #00966e;
    --cs-flag-red:   #d62612;

    /* Spacing scale (8pt grid, with 4 + 2 micros) */
    --cs-space-0: 0;
    --cs-space-1: 0.25rem;   /* 4 */
    --cs-space-2: 0.5rem;    /* 8 */
    --cs-space-3: 0.75rem;   /* 12 */
    --cs-space-4: 1rem;      /* 16 */
    --cs-space-5: 1.5rem;    /* 24 */
    --cs-space-6: 2rem;      /* 32 */
    --cs-space-7: 3rem;      /* 48 */
    --cs-space-8: 4rem;      /* 64 */
    --cs-space-9: 6rem;      /* 96 */

    /* Radius scale */
    --cs-radius-xs: 6px;
    --cs-radius-sm: 10px;
    --cs-radius-md: 14px;
    --cs-radius-lg: 18px;
    --cs-radius-xl: 24px;
    --cs-radius-pill: 999px;

    /* Shadow scale (premium, multi-layer, uses currentColor for accent glow) */
    --cs-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --cs-shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --cs-shadow-md: 0 8px 24px -8px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06);
    --cs-shadow-lg: 0 22px 48px -16px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.08);
    --cs-shadow-xl: 0 32px 80px -20px rgba(0,0,0,0.48), 0 8px 22px rgba(0,0,0,0.12);
    --cs-shadow-glow: 0 0 0 1px color-mix(in srgb, var(--cs-accent, #888) 22%, transparent),
                      0 16px 40px -16px color-mix(in srgb, var(--cs-accent, #888) 38%, transparent);

    /* Motion tokens — every project uses the same easing language */
    --cs-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --cs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --cs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cs-dur-fast:    140ms;
    --cs-dur-base:    220ms;
    --cs-dur-slow:    360ms;
    --cs-dur-glide:   520ms;

    /* Typography scale — consistent ratios across projects */
    --cs-font-display: var(--font-display, var(--font-heading, 'Exo 2', 'Fraunces', 'Cabinet Grotesk', 'Syne', 'Outfit', system-ui, sans-serif));
    --cs-font-body:    var(--font-body, var(--font-sans, var(--font-inter), 'Inter', 'IBM Plex Sans', 'Manrope', 'Nunito', 'DM Sans', system-ui, sans-serif));
    --cs-font-mono:    var(--font-mono, var(--font-jetbrains), 'JetBrains Mono', 'Space Mono', ui-monospace, monospace);

    --cs-text-xs:   0.72rem;
    --cs-text-sm:   0.84rem;
    --cs-text-base: 0.96rem;
    --cs-text-md:   1.06rem;
    --cs-text-lg:   1.22rem;
    --cs-text-xl:   1.5rem;
    --cs-text-2xl:  2rem;
    --cs-text-3xl:  clamp(2rem, 4vw, 2.85rem);
    --cs-text-4xl:  clamp(2.6rem, 5.4vw, 3.6rem);

    --cs-leading-tight: 1.16;
    --cs-leading-snug:  1.32;
    --cs-leading-base:  1.55;
    --cs-leading-loose: 1.7;

    --cs-tracking-tight: -0.02em;
    --cs-tracking-base:   0;
    --cs-tracking-eyebrow: 0.16em;

    /* Neutral surface tokens — projects override only --cs-accent */
    --cs-accent-on: #0a0a0a;

    /* Z-index scale */
    --cs-z-flag: 60;
    --cs-z-brandbar: 55;
    --cs-z-fab: 40;
    --cs-z-toast: 70;
    --cs-brandbar-offset: 19px;
  }
}

/* ============================================================
   FLAG MICRO-STRIPE
   Subtle 3px Bulgaria flag bar at the very top of every project.
   This is the single most powerful "we are siblings" cue.
   ============================================================ */
@layer cs-base {
  .cs-flag-stripe {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--cs-z-flag);
    height: 3px;
    background: linear-gradient(
      to bottom,
      var(--cs-flag-white) 0 33.34%,
      var(--cs-flag-green) 33.34% 66.67%,
      var(--cs-flag-red)   66.67% 100%
    );
    pointer-events: none;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
  /* When projects opt into a vertical version (rare), keep parity */
  .cs-flag-stripe[data-orient="bottom"] {
    inset: auto 0 0 0;
  }
}

/* ============================================================
   BRAND BAR — sister-tools strip
   Sits at the top of every project, just under the flag stripe.
   ============================================================ */
@layer cs-primitives {
  .cs-brandbar {
    position: relative;
    z-index: var(--cs-z-brandbar);
    display: flex;
    align-items: center;
    gap: var(--cs-space-3);
    padding: 6px max(var(--cs-space-4), env(safe-area-inset-left)) 6px max(var(--cs-space-4), env(safe-area-inset-right));
    margin-top: 3px; /* clear the flag stripe */
    font-family: var(--cs-font-body);
    font-size: 13px;
    line-height: 1;
    color: rgba(255,255,255,0.78);
    background:
      linear-gradient(180deg, rgba(8,10,14,0.78), rgba(8,10,14,0.62));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    letter-spacing: 0.02em;
    user-select: none;
  }
  .cs-brandbar__wordmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cs-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
  }
  .cs-brandbar__wordmark::before {
    content: "";
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--cs-accent, #ffb36b), var(--cs-accent-2, var(--cs-accent, #ffd66e)));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 12px -2px color-mix(in srgb, var(--cs-accent, #ffb36b) 60%, transparent);
  }
  .cs-brandbar__sep {
    width: 1px; height: 14px;
    background: rgba(255,255,255,0.12);
    margin: 0 4px;
  }
  .cs-brandbar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cs-brandbar__nav::-webkit-scrollbar { display: none; }
  .cs-brandbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    transition: color var(--cs-dur-fast) var(--cs-ease-out),
                background var(--cs-dur-fast) var(--cs-ease-out);
    white-space: nowrap;
    font-weight: 500;
  }
  .cs-brandbar__link:hover,
  .cs-brandbar__link:focus-visible {
    color: rgba(255,255,255,0.96);
    background: rgba(255,255,255,0.06);
  }
  .cs-brandbar__link[aria-current="page"],
  .cs-brandbar__link[data-current="true"] {
    color: var(--cs-accent, #ffd66e);
    background: color-mix(in srgb, var(--cs-accent, #ffd66e) 14%, transparent);
  }
  .cs-brandbar__link__dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
    opacity: 0.6;
  }
  /* Coming-soon (not yet deployed) items */
  .cs-brandbar__link[data-coming-soon="true"] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  /* Built-by attribution link */
  .cs-brandbar__built-by {
    text-decoration: none;
    transition: opacity var(--cs-dur-fast, 150ms) var(--cs-ease-out, ease);
  }
  .cs-brandbar__built-by:hover,
  .cs-brandbar__built-by:focus-visible {
    opacity: 0.85;
  }
  .cs-brandbar__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.66);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .cs-brandbar__tag::before {
    content: "";
    width: 5px; height: 5px; border-radius: 999px;
    background: var(--cs-flag-green);
    box-shadow: 0 0 6px var(--cs-flag-green);
  }
  @media (max-width: 720px) {
    .cs-brandbar {
      gap: 8px;
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      font-size: 12px;
      padding: 4px 8px;
    }
    .cs-brandbar__sep { display: none; }
    .cs-brandbar__nav {
      flex: 1 1 auto;
      flex-wrap: nowrap;
      min-width: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0;
    }
    .cs-brandbar__nav::-webkit-scrollbar { display: none; }
    .cs-brandbar__nav .cs-brandbar__link { flex: 0 0 auto; padding: 10px 12px; min-height: 44px; }
    .cs-brandbar__wordmark { gap: 6px; font-size: 12px; }
    .cs-brandbar__wordmark::before { width: 12px; height: 12px; border-radius: 3px; }
    .cs-brandbar__wordmark__sub,
    .cs-brandbar__tag { display: none; }
  }
  @media (max-width: 460px) {
    .cs-brandbar__wordmark { display: none; }
  }
}

/* ============================================================
   PRIMITIVES — used by every project
   ============================================================ */
@layer cs-primitives {

  .cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cs-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--cs-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cs-accent, currentColor);
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cs-accent, currentColor) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cs-accent, currentColor) 22%, transparent);
  }
  .cs-eyebrow::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 999px;
    background: var(--cs-accent, currentColor);
    box-shadow: 0 0 8px var(--cs-accent, currentColor);
  }

  .cs-card {
    position: relative;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--cs-accent, #888) 4%, rgba(255,255,255,0.02)),
        rgba(255,255,255,0.01)
      ),
      rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--cs-radius-lg);
    padding: var(--cs-space-5) var(--cs-space-5);
    box-shadow: var(--cs-shadow-md);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: transform var(--cs-dur-base) var(--cs-ease-out),
                border-color var(--cs-dur-base) var(--cs-ease-out),
                box-shadow var(--cs-dur-base) var(--cs-ease-out);
  }
  html:not(.dark) .cs-card,
  :root.light .cs-card,
  [data-bs-theme="light"] .cs-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
    border-color: rgba(15,15,18,0.08);
    backdrop-filter: blur(14px);
  }
  .cs-card:hover {
    border-color: color-mix(in srgb, var(--cs-accent, #888) 28%, rgba(255,255,255,0.08));
    box-shadow: var(--cs-shadow-lg);
  }
  .cs-card--accent {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--cs-accent, #888) 14%, transparent),
        color-mix(in srgb, var(--cs-accent-2, var(--cs-accent, #888)) 8%, transparent)
      ),
      rgba(255,255,255,0.025);
    border-color: color-mix(in srgb, var(--cs-accent, #888) 30%, transparent);
  }
  .cs-card--lift { will-change: transform; transform: translateZ(0); }
  .cs-card--lift:hover { transform: translate3d(0, -2px, 0); }

  .cs-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--cs-space-4) var(--cs-space-4);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--cs-radius-md);
    transition: transform var(--cs-dur-base) var(--cs-ease-spring);
  }
  .cs-kpi:hover { transform: translate3d(0,-1px,0); }
  .cs-kpi__num {
    font-family: var(--cs-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: var(--cs-tracking-tight);
    font-variant-numeric: tabular-nums;
    color: inherit;
  }
  .cs-kpi__label {
    font-family: var(--cs-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.66;
  }

  .cs-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: inherit;
    opacity: 0.86;
  }
  .cs-tag--ok    { color: var(--cs-accent, #6fcf97); border-color: color-mix(in srgb, var(--cs-accent, #6fcf97) 30%, transparent); background: color-mix(in srgb, var(--cs-accent, #6fcf97) 10%, transparent); opacity: 1; }
  .cs-tag--warn  { color: #fbbf24; border-color: rgba(251,191,36,0.32); background: rgba(251,191,36,0.08); opacity: 1; }
  .cs-tag--alert { color: #ff6b6b; border-color: rgba(255,107,107,0.32); background: rgba(255,107,107,0.08); opacity: 1; }

  .cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--cs-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cs-accent, #888) 36%, transparent);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cs-accent, #888) 24%, transparent),
      color-mix(in srgb, var(--cs-accent-2, var(--cs-accent, #888)) 18%, transparent));
    color: var(--cs-accent-2, var(--cs-accent, currentColor));
    font-family: var(--cs-font-display);
    font-weight: 600;
    font-size: 0.94rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--cs-dur-fast) var(--cs-ease-spring),
                box-shadow var(--cs-dur-base) var(--cs-ease-out),
                background var(--cs-dur-base) var(--cs-ease-out),
                border-color var(--cs-dur-base) var(--cs-ease-out);
    will-change: transform;
  }
  .cs-btn:hover {
    transform: translate3d(0,-1px,0);
    box-shadow: var(--cs-shadow-glow);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cs-accent, #888) 32%, transparent),
      color-mix(in srgb, var(--cs-accent-2, var(--cs-accent, #888)) 26%, transparent));
  }
  .cs-btn:active { transform: translate3d(0,0,0) scale(0.98); }
  .cs-btn--solid {
    background: linear-gradient(135deg, var(--cs-accent, #888), var(--cs-accent-2, var(--cs-accent, #888)));
    color: var(--cs-accent-on, #0a0a0a);
    border-color: transparent;
  }
  .cs-btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.14);
    color: inherit;
  }
  .cs-btn--ghost:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }
  .cs-btn--lg { padding: 14px 22px; font-size: 1rem; border-radius: var(--cs-radius-md); }
  .cs-btn--sm { padding: 7px 12px; font-size: 0.82rem; }

  .cs-callout {
    border-left: 3px solid var(--cs-accent, currentColor);
    padding: 14px 18px;
    background: color-mix(in srgb, var(--cs-accent, currentColor) 8%, transparent);
    border-radius: 0 var(--cs-radius-md) var(--cs-radius-md) 0;
    margin: var(--cs-space-4) 0;
  }
  .cs-callout--warn  { border-left-color: #fbbf24; background: rgba(251,191,36,0.06); }
  .cs-callout--alert { border-left-color: #ff6b6b; background: rgba(255,107,107,0.06); }

  /* Skeleton shimmer */
  .cs-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border-radius: var(--cs-radius-sm);
  }
  .cs-skeleton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--cs-accent, #888) 14%, rgba(255,255,255,0.06)),
      transparent);
    transform: translateX(-100%);
    animation: cs-shimmer 1.4s var(--cs-ease-in-out) infinite;
  }
  @keyframes cs-shimmer {
    100% { transform: translateX(100%); }
  }

  /* Floating support button — bottom-right, tasteful, never blocks content */
  .cs-support-fab {
    position: fixed;
    right: max(var(--cs-space-4), env(safe-area-inset-right));
    bottom: max(var(--cs-space-4), env(safe-area-inset-bottom));
    z-index: var(--cs-z-fab);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 12px;
    border-radius: 999px;
    background: rgba(20,20,24,0.78);
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    font-family: var(--cs-font-body);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--cs-shadow-lg);
    transition: transform var(--cs-dur-base) var(--cs-ease-spring),
                box-shadow var(--cs-dur-base) var(--cs-ease-out),
                background var(--cs-dur-base) var(--cs-ease-out);
  }
  .cs-support-fab:hover {
    transform: translate3d(0,-2px,0);
    background: rgba(20,20,24,0.92);
    box-shadow: var(--cs-shadow-xl), 0 0 0 1px color-mix(in srgb, var(--cs-accent, #888) 32%, transparent);
  }
  .cs-support-fab__icon {
    display: inline-flex;
    width: 18px; height: 18px;
    align-items: center; justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cs-accent, #ffb36b), var(--cs-accent-2, var(--cs-accent, #ffd66e)));
    color: var(--cs-accent-on, #0a0a0a);
    font-size: 11px;
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--cs-accent, #ffb36b) 60%, transparent);
  }
  html:not(.dark) .cs-support-fab,
  :root.light .cs-support-fab,
  [data-bs-theme="light"] .cs-support-fab {
    background: rgba(255,255,255,0.92);
    color: #0e1116;
    border-color: rgba(15,15,18,0.08);
  }
}

/* ============================================================
   ANIMATION UTILITIES — same easing language across all 6 apps
   ============================================================ */
@layer cs-anim {
  @keyframes cs-fade-in   { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: none; } }
  @keyframes cs-fade-up   { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }
  @keyframes cs-fade-down { from { opacity: 0; transform: translate3d(0,-12px,0); } to { opacity: 1; transform: none; } }
  @keyframes cs-scale-in  { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes cs-pulse-ring{ 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-accent, #888) 40%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--cs-accent, #888) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

  .cs-anim-fade-in   { animation: cs-fade-in   var(--cs-dur-glide) var(--cs-ease-out) both; }
  .cs-anim-fade-up   { animation: cs-fade-up   var(--cs-dur-glide) var(--cs-ease-out) both; }
  .cs-anim-fade-down { animation: cs-fade-down var(--cs-dur-slow)  var(--cs-ease-out) both; }
  .cs-anim-scale-in  { animation: cs-scale-in  var(--cs-dur-base)  var(--cs-ease-spring) both; }
  .cs-anim-pulse     { animation: cs-pulse-ring 2.2s var(--cs-ease-in-out) infinite; }

  .cs-anim-delay-1 { animation-delay: 60ms; }
  .cs-anim-delay-2 { animation-delay: 140ms; }
  .cs-anim-delay-3 { animation-delay: 220ms; }
  .cs-anim-delay-4 { animation-delay: 300ms; }
  .cs-anim-delay-5 { animation-delay: 380ms; }

  /* Universal focus ring — every project, every interactive element */
  :where(.cs-card, .cs-btn, .cs-tag, .cs-eyebrow, .cs-brandbar__link, .cs-support-fab):focus-visible {
    outline: 2px solid var(--cs-accent, #ffd66e);
    outline-offset: 3px;
    border-radius: var(--cs-radius-sm);
  }

  /* Respect reduced motion everywhere */
  @media (prefers-reduced-motion: reduce) {
    .cs-anim-fade-in,
    .cs-anim-fade-up,
    .cs-anim-fade-down,
    .cs-anim-scale-in,
    .cs-anim-pulse,
    .cs-skeleton::after { animation: none !important; }
    .cs-card, .cs-btn, .cs-kpi, .cs-support-fab { transition: none !important; }
  }
}

/* ============================================================
   PROJECT-LOCAL ACCENT REGISTRY
   Each project defines its own accent ONCE, then forgets about it.
   These selectors are no-ops by default; set them in each project.
   ============================================================ */
@layer cs-overrides {
  /* Example (do NOT enable here — set per project):
     :root {
       --cs-accent:    #ffb36b;
       --cs-accent-2:  #ffd66e;
       --cs-accent-on: #1c110d;
     }
  */
}

/* ===== Civil Service Tools — Motorway Atlas accent override ===== */
:root {
  --cs-accent:    #f59e0b;
  --cs-accent-2:  #ffd66e;
  --cs-accent-on: #08141d;
}

/* ========================================================================
   Civil Service Tools — Premium Polish Layer (v1.0)
   Hardware-accelerated micro-interactions. Honors prefers-reduced-motion.
   ====================================================================== */
@layer cs-overrides {
  /* First-paint stagger for sister-tools links */
  @keyframes cs-brandbar-in {
    from { opacity: 0; transform: translate3d(0, -4px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .cs-brandbar__nav .cs-brandbar__link {
    opacity: 0;
    animation: cs-brandbar-in 0.5s var(--cs-ease-out, cubic-bezier(.22,1,.36,1)) forwards;
    will-change: transform, opacity;
  }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(1) { animation-delay: 0.05s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(2) { animation-delay: 0.10s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(3) { animation-delay: 0.15s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(4) { animation-delay: 0.20s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(5) { animation-delay: 0.25s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(6) { animation-delay: 0.30s; }

  .cs-brandbar__wordmark {
    opacity: 0;
    animation: cs-brandbar-in 0.6s var(--cs-ease-out, cubic-bezier(.22,1,.36,1)) 0s forwards;
  }

  /* Support FAB — idle attention pulse (subtle, slow, accent-tinted) */
  @keyframes cs-fab-idle {
    0%, 100% { box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--cs-accent) 35%, transparent),
                           0 0 0 0  color-mix(in srgb, var(--cs-accent) 0%, transparent); }
    50%      { box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--cs-accent) 45%, transparent),
                           0 0 0 6px color-mix(in srgb, var(--cs-accent) 8%, transparent); }
  }
  .cs-support-fab {
    animation: cs-fab-idle 4.5s var(--cs-ease-in-out, cubic-bezier(.65,0,.35,1)) infinite;
    will-change: transform, box-shadow;
  }
  .cs-support-fab:hover { animation-play-state: paused; }

  /* Active sister-tool — soft accent halo */
  .cs-brandbar__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-accent) 35%, transparent);
    pointer-events: none;
    opacity: 0;
    animation: cs-fade-in-soft 0.7s var(--cs-ease-out, cubic-bezier(.22,1,.36,1)) 0.4s forwards;
  }
  .cs-brandbar__link { position: relative; }
  @keyframes cs-fade-in-soft { to { opacity: 1; } }

  /* Reduced motion — disable everything decorative */
  @media (prefers-reduced-motion: reduce) {
    .cs-brandbar__nav .cs-brandbar__link,
    .cs-brandbar__wordmark { animation: none; opacity: 1; }
    .cs-support-fab { animation: none; }
    .cs-brandbar__link[aria-current="page"]::after { animation: none; opacity: 1; }
  }
}
/* ============================================================
   Civil Service Tools — Unification Pass 2 (v1.1)
   Refinement layer. Append AFTER civil-service.css and the
   Pass 1 polish layer. Honors prefers-reduced-motion + print.
   ============================================================ */
@layer cs-overrides {
  /* ---------------------------------------------------------
     1) Responsive brand bar — graceful mobile collapse
     --------------------------------------------------------- */
  @media (max-width: 720px) {
    .cs-brandbar {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      padding: 4px 8px;
      gap: 8px;
    }
    .cs-brandbar__sep,
    .cs-brandbar__tag {
      display: none;
    }
    .cs-brandbar__nav {
      order: 0;
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 0;
      mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
    .cs-brandbar__nav .cs-brandbar__link {
      flex: 0 0 auto;
      scroll-snap-align: start;
      padding: 5px 8px;
    }
    .cs-brandbar__wordmark {
      gap: 6px;
      font-size: 10px;
    }
    .cs-brandbar__wordmark::before {
      width: 12px;
      height: 12px;
      border-radius: 3px;
    }
    .cs-support-fab {
      display: none;
    }
  }

  /* ---------------------------------------------------------
     2) Support FAB — premium SVG heart + safe-area inset
     --------------------------------------------------------- */
  .cs-support-fab {
    bottom: calc(var(--cs-space-5) + env(safe-area-inset-bottom, 0px));
    right:  calc(var(--cs-space-5) + env(safe-area-inset-right, 0px));
    /* Replace the unicode heart with a properly weighted vector */
    --cs-fab-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
  }
  @media (min-width: 721px) {
    .cs-support-fab {
      bottom: calc(var(--cs-space-7) + env(safe-area-inset-bottom, 0px));
    }
  }
  .cs-support-fab__icon {
    /* Mask uses the FAB's text color, so it auto-adapts to --cs-accent-on. */
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: var(--cs-fab-heart) center / contain no-repeat;
    -webkit-mask: var(--cs-fab-heart) center / contain no-repeat;
    color: inherit;
    display: inline-block;
    /* Hide the original ♥ glyph */
    font-size: 0;
    line-height: 0;
  }
  /* Subtle press affordance */
  .cs-support-fab:active { transform: translate3d(0, 1px, 0) scale(0.98); }

  /* ---------------------------------------------------------
     3) Universal focus ring — accent-aware, 2px, offset 3px
     --------------------------------------------------------- */
  :where(.cs-brandbar__link, .cs-brandbar__wordmark, .cs-btn, .cs-tag, .cs-support-fab):focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 3px;
    border-radius: var(--cs-radius-sm, 10px);
  }

  /* ---------------------------------------------------------
     4) Active sister-tool — animated underline (replaces halo on mobile-OK)
     --------------------------------------------------------- */
  .cs-brandbar__link[aria-current="page"] {
    color: color-mix(in srgb, var(--cs-accent) 92%, var(--cs-fg, #fff));
  }
  .cs-brandbar__link[aria-current="page"] .cs-brandbar__link__dot {
    transform: scale(1.4);
    background: var(--cs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent) 22%, transparent);
  }

  /* ---------------------------------------------------------
     5) High-contrast / forced-colors mode — preserve semantics
     --------------------------------------------------------- */
  @media (forced-colors: active) {
    .cs-flag-stripe { background: CanvasText; }
    .cs-brandbar { border-bottom: 1px solid CanvasText; background: Canvas; }
    .cs-brandbar__link[aria-current="page"] { outline: 1px solid Highlight; }
    .cs-support-fab { border: 1px solid CanvasText; }
  }

  /* ---------------------------------------------------------
     6) Print — hide non-essential brand chrome
     --------------------------------------------------------- */
  @media print {
    .cs-flag-stripe,
    .cs-brandbar,
    .cs-support-fab,
    .cs-no-print { display: none !important; }

    body {
      background: #fff !important;
      color: #111 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .cs-print-report {
      max-width: 100%;
      padding: 0;
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
    }

    .cs-print-report h1,
    .cs-print-report h2,
    .cs-print-report h3 {
      color: #111 !important;
      break-after: avoid;
    }

    .cs-print-report .cs-kpi,
    .cs-print-report .cs-card {
      break-inside: avoid;
      border: 1px solid #ddd !important;
      box-shadow: none !important;
    }

    .cs-print-report::after {
      content: attr(data-print-source);
      display: block;
      margin-top: 24px;
      padding-top: 12px;
      border-top: 1px solid #ccc;
      font: 10px/1.4 var(--cs-font-mono, ui-monospace, monospace);
      color: #666;
    }
  }

  .cs-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 0.84rem/1 var(--cs-font-body);
    padding: 8px 14px;
    border-radius: var(--cs-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cs-accent, #888) 35%, transparent);
    background: color-mix(in srgb, var(--cs-accent, #888) 10%, transparent);
    color: inherit;
    cursor: pointer;
  }
  .cs-print-btn:hover,
  .cs-print-btn:focus-visible {
    background: color-mix(in srgb, var(--cs-accent, #888) 18%, transparent);
    outline: 2px solid var(--cs-accent, currentColor);
    outline-offset: 3px;
  }

  /* ---------------------------------------------------------
     7) Universal font smoothing — guarantees the same edge
        rendering on every project regardless of base CSS
     --------------------------------------------------------- */
  .cs-brandbar,
  .cs-brandbar *,
  .cs-support-fab {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* ---------------------------------------------------------
     8) Optional offline indicator — small dot the launcher / SW
        can flip via [data-cs-offline="true"] on <html>.
     --------------------------------------------------------- */
  html[data-cs-offline="true"] .cs-brandbar::after {
    content: "Офлайн";
    position: absolute;
    top: var(--cs-space-2);
    right: var(--cs-space-3);
    font: 600 0.66rem/1 var(--cs-font-mono, ui-monospace, monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-flag-red);
    background: color-mix(in srgb, var(--cs-flag-red) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cs-flag-red) 35%, transparent);
    padding: 3px 8px;
    border-radius: var(--cs-radius-pill);
  }
  .cs-brandbar { position: relative; }

  /* ---------------------------------------------------------
     9) Reduced-motion — silence Pass-2 micro-motions too
     --------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .cs-support-fab,
    .cs-support-fab:active { transform: none !important; }
  }
}


/* mobile-tap-44 — ensure brandbar links meet 44px touch target on phones */
@media (max-width: 720px) {
  .cs-brandbar__nav .cs-brandbar__link {
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex;
    align-items: center;
  }
}

@layer cs-overrides {
  /* Premium Visual Pack v1.2: consistent depth, touch comfort, and motion polish. */
  :where(.cs-card, .cs-kpi, .cs-btn, .cs-tag, .cs-brandbar__link, .cs-support-fab) {
    transition: transform var(--cs-dur-base) var(--cs-ease-out),
                box-shadow var(--cs-dur-base) var(--cs-ease-out),
                background-color var(--cs-dur-base) var(--cs-ease-out),
                border-color var(--cs-dur-base) var(--cs-ease-out);
  }

  :where(.cs-card, .cs-kpi) {
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    border-color: color-mix(in srgb, var(--cs-accent, #888) 16%, rgba(255,255,255,0.14));
    box-shadow: var(--cs-shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
  }

  @media (hover: hover) and (pointer: fine) {
    :where(.cs-card, .cs-kpi):hover {
      transform: translate3d(0, -2px, 0);
      box-shadow: var(--cs-shadow-lg), var(--cs-shadow-glow), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    :where(.cs-btn, .cs-brandbar__link):hover {
      transform: translate3d(0, -1px, 0);
    }
  }

  :where(.cs-btn, .cs-brandbar__link) {
    min-height: 40px;
  }

  @media (max-width: 720px) {
    .cs-brandbar {
      backdrop-filter: blur(18px) saturate(165%);
      -webkit-backdrop-filter: blur(18px) saturate(165%);
    }

    :where(.cs-btn, .cs-brandbar__link) {
      min-height: 44px !important;
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.cs-card, .cs-kpi, .cs-btn, .cs-brandbar__link, .cs-support-fab),
    :where(.cs-card, .cs-kpi, .cs-btn, .cs-brandbar__link, .cs-support-fab):hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }
}

/* =====================================================================
   LIQUID GLASS — shared design system for the Civic Tools family
   Apple-style frosted, translucent, layered glass. Append to each
   project's civil-service.css (canonical copy lives in
   _workspace/shared/liquid-glass.css — keep them in sync).
   Veliko's brief: "USE LIQUID GLASS WHENEVER POSSIBLE" — it aids
   visibility (you see the map through panels) and looks modern.
   ===================================================================== */

:root {
  --lg-tint: 255, 255, 255;        /* light sheen tint (RGB) */
  --lg-blur: 22px;
  --lg-radius: 18px;
  --lg-border: rgba(255, 255, 255, 0.16);
  --lg-shadow: 0 10px 40px rgba(0, 0, 0, 0.32);
}

/* Base frosted panel. Translucent so the map shows through. */
.lg-glass {
  position: relative;
  background:
    linear-gradient(135deg, rgba(var(--lg-tint), 0.12), rgba(var(--lg-tint), 0.04));
  backdrop-filter: blur(var(--lg-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 rgba(var(--lg-tint), 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* Thicker blur for hero / control surfaces. */
.lg-glass--strong {
  --lg-blur: 30px;
  background:
    linear-gradient(135deg, rgba(var(--lg-tint), 0.16), rgba(var(--lg-tint), 0.05));
}

/* A pill / button surface. */
.lg-glass--pill {
  --lg-radius: 999px;
  --lg-blur: 16px;
}

/* Top-edge specular highlight — the "liquid" sheen. */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), 0.16) 0%, rgba(var(--lg-tint), 0) 38%);
  opacity: 0.7;
  mix-blend-mode: screen;
}

/* Interactive glass: gentle lift + brighter sheen on hover. */
.lg-glass--interactive {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
}
.lg-glass--interactive:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 48px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(var(--lg-tint), 0.3);
}

/* Dark-leaning variant for very light maps (keeps text readable). */
.lg-glass--dark {
  --lg-tint: 12, 22, 36;
  background:
    linear-gradient(135deg, rgba(8, 16, 28, 0.62), rgba(8, 16, 28, 0.42));
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lg-glass--dark::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%);
}

/* Reduced-transparency / no-backdrop-filter fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-glass, .lg-glass--dark { background: rgba(10, 20, 34, 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .lg-glass, .lg-glass--strong, .lg-glass--dark { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 20, 34, 0.94); }
}

/* "Audio-style" transport buttons (timeline players across the family). */
.lg-transport {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--lg-border);
  background: linear-gradient(145deg, rgba(var(--lg-tint), 0.14), rgba(var(--lg-tint), 0.05));
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  color: inherit;
  cursor: pointer;
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(var(--lg-tint), 0.25);
  transition: transform 0.14s ease, background 0.18s ease;
}
.lg-transport:hover { transform: scale(1.06); }
.lg-transport:active { transform: scale(0.95); }
.lg-transport--play { width: 56px; height: 56px; }