/* ============================================================================
   High-contrast theme
   ----------------------------------------------------------------------------
   Goal: meet WCAG 2.2 AAA contrast (7:1 body / 4.5:1 large text) and stay
   visually unmistakable next to the light and dark variants.

   Why a dedicated file: Pico's per-theme rules only target
   [data-theme="dark"], so a third variant ("high-contrast") cannot
   inherit dark-mode element styling. We layer the override in three
   sections so component authors have a predictable surface to target:

     1. Variable layer — overrides Pico's CSS custom properties.
        Components that read Pico vars (most do) get HC styling for free.

     2. Opt-in classes — three small semantic helpers that ANY component
        can adopt to surface itself cleanly in HC mode:
          .hc-surface          — black bg, white text, 2px white border
          .hc-surface-accent   — yellow bg, black text, 2px yellow border
          .hc-chrome-label     — bright white chrome text (legends,
                                 muted labels, captions)
        New components should add these classes directly; existing
        components can be retrofitted gradually.

     3. Targeted fixes — explicit overrides for stable third-party /
        per-app class names that don't read Pico vars and don't yet
        carry an opt-in class (Nib bubbles, tool tiles, native
        fieldset/legend chrome). This list shrinks as components adopt
        the opt-in classes.

   Palette is deliberately tiny: pure #000, pure #fff, pure #ff0.
   ============================================================================ */

/* -------------------------------------------------------------------------
   1. Variable layer
   ------------------------------------------------------------------------- */

[data-theme="high-contrast"] {
  /* Lean on the variable wght axis of Hanken Grotesk for a heavier
     body stroke without loading another file. Instrument Serif is
     single-weight, so headlines use a touch tighter tracking instead.

     `!important` on every declaration here is intentional: project
     CSS files redeclare some of these tokens at `:root` (specificity
     0,1,0) and load in the same cascade pass. Without !important, a
     later component declaration on `:root` would win against this
     attribute-selector rule of equal specificity. */
  --pico-font-weight: 540 !important;
  --pico-background-color: #000 !important;
  --pico-color: #fff !important;
  --pico-h1-color: #fff !important;
  --pico-h2-color: #fff !important;
  --pico-h3-color: #fff !important;
  --pico-h4-color: #fff !important;
  --pico-h5-color: #fff !important;
  --pico-h6-color: #fff !important;
  --pico-heading-color: #fff !important;
  --pico-muted-color: #fff !important;
  --pico-muted-border-color: #fff !important;
  --pico-card-background-color: #000 !important;
  --pico-card-border-color: #fff !important;
  --pico-card-sectioning-background-color: #000 !important;
  --pico-card-box-shadow: none !important;
  --pico-box-shadow: none !important;
  --pico-form-element-background-color: #000 !important;
  --pico-form-element-border-color: #fff !important;
  --pico-form-element-color: #fff !important;
  --pico-form-element-placeholder-color: #fff !important;
  --pico-form-element-focus-color: #ff0 !important;
  --pico-form-element-active-background-color: #000 !important;
  --pico-form-element-active-border-color: #ff0 !important;
  --pico-form-element-disabled-background-color: #000 !important;
  --pico-form-element-disabled-border-color: #fff !important;
  --pico-form-element-valid-border-color: #ff0 !important;
  --pico-form-element-invalid-border-color: #ff0 !important;
  --pico-primary: #ff0 !important;
  --pico-primary-background: #ff0 !important;
  --pico-primary-border: #ff0 !important;
  --pico-primary-underline: #ff0 !important;
  --pico-primary-hover: #fff !important;
  --pico-primary-hover-background: #fff !important;
  --pico-primary-hover-border: #fff !important;
  --pico-primary-hover-underline: #fff !important;
  --pico-primary-focus: #ff0 !important;
  --pico-primary-inverse: #000 !important;
  --pico-secondary: #fff !important;
  --pico-secondary-background: #000 !important;
  --pico-secondary-border: #fff !important;
  --pico-secondary-hover: #ff0 !important;
  --pico-secondary-hover-background: #000 !important;
  --pico-secondary-hover-border: #ff0 !important;
  --pico-secondary-focus: #ff0 !important;
  --pico-secondary-inverse: #fff !important;
  --pico-contrast: #fff !important;
  --pico-contrast-background: #fff !important;
  --pico-contrast-border: #fff !important;
  --pico-contrast-inverse: #000 !important;
  --pico-mark-background-color: #ff0 !important;
  --pico-mark-color: #000 !important;
  --pico-code-background-color: #000 !important;
  --pico-code-color: #fff !important;
  --pico-blockquote-color: #fff !important;
  --pico-blockquote-border-color: #fff !important;
  --pico-table-border-color: #fff !important;
  --pico-table-row-stripped-background-color: #000 !important;
  --pico-dropdown-background-color: #000 !important;
  --pico-dropdown-border-color: #fff !important;
  --pico-dropdown-color: #fff !important;
  --pico-dropdown-hover-background-color: #ff0 !important;
  --pico-switch-background-color: #000 !important;
  --pico-switch-checked-background-color: #ff0 !important;
  --pico-switch-color: #fff !important;
  --pico-range-border-color: #fff !important;
  --pico-range-active-border-color: #ff0 !important;
  --pico-range-thumb-color: #ff0 !important;
  --pico-range-thumb-active-color: #fff !important;
  --pico-accordion-border-color: #fff !important;
  --pico-accordion-active-summary-color: #ff0 !important;
  --pico-tooltip-background-color: #ff0 !important;
  --pico-tooltip-color: #000 !important;
  /* Project-local vars used across cards.css / search.css / pills.css /
     atmosphere.css / favorites.css — each declared on :root in core.css
     and would otherwise survive HC mode unchanged. */
  --tool-primary: #ff0 !important;
  --tool-primary-hover: #fff !important;
  --tool-primary-rgb: 255, 255, 0 !important;
  --chatbot-primary: #ff0 !important;
  --chatbot-primary-hover: #fff !important;
  --card-shadow: none !important;
  --card-shadow-hover: none !important;
  --tool-card-border: 2px solid #fff !important;
  --pill-bg: #ff0 !important;
  --pill-color: #000 !important;
  --pill-border-radius: 0 !important;
  --status-success-bg: #ff0 !important;
  --status-success-text: #000 !important;
  --status-warning-bg: #ff0 !important;
  --status-warning-text: #000 !important;
  --status-danger-bg: #000 !important;
  --status-danger-text: #fff !important;
  --status-info-bg: #ff0 !important;
  --status-info-text: #000 !important;
  --status-neutral-bg: #000 !important;
  --status-neutral-text: #fff !important;
  --accessible-primary-bg: #ff0 !important;
  --accessible-primary-bg-hover: #fff !important;
  --accessible-primary-text: #000 !important;
  --atm-icon-chip-bg: transparent !important;
  --atm-card-shadow: none !important;
  --atm-card-shadow-hover: none !important;
  --atm-pattern-opacity: 0 !important;
  --atm-blob-tint: transparent !important;
  --atm-blob-tint-soft: transparent !important;
  /* Geometry tokens — collapse all rounding to 0 so anything that uses
     them resolves to a hard rectangle. */
  --radius-sm: 0 !important;
  --radius-md: 0 !important;
  --radius-lg: 0 !important;
  --radius-xl: 0 !important;
  --radius-full: 0 !important;
  --pico-border-radius: 0 !important;
  /* Card hairline ring becomes pure white in HC mode so the silhouette
     stays unambiguous against the black background. */
  --ink-border-color: #fff !important;
  color-scheme: dark;
}

/* Cards in HC mode flatten to square-cornered rectangles so the
   asymmetric pebble shapes don't read as decoration in accessibility
   mode. */
[data-theme="high-contrast"] .tool,
[data-theme="high-contrast"] .tool:hover,
[data-theme="high-contrast"] .tool:focus-visible,
[data-theme="high-contrast"] .tool-of-week-card {
  transform: none !important;
  border-radius: 0 !important;
}

/* Force rectangular geometry across the whole UI when HC is active.
   Pills, chips, dropdowns, dialogs, banners — anything that draws a
   coloured shape — collapses to a square-cornered rectangle so the
   theme reads unmistakably as "accessibility" rather than just-another-
   dark-mode. The few exceptions (interactive 50%-circles like the
   message-close × and voice-toggle ring) keep their existing geometry
   because their function depends on being round. */
[data-theme="high-contrast"] .pill,
[data-theme="high-contrast"] .pill-corner,
[data-theme="high-contrast"] .pill-favorite,
[data-theme="high-contrast"] .pill-tool,
[data-theme="high-contrast"] .pill-chatbot,
[data-theme="high-contrast"] .pill-group,
[data-theme="high-contrast"] .badge,
[data-theme="high-contrast"] .category-badge,
[data-theme="high-contrast"] .status-badge,
[data-theme="high-contrast"] .admin-status,
[data-theme="high-contrast"] .risk-badge,
[data-theme="high-contrast"] .translation-badge,
[data-theme="high-contrast"] .missing-tag,
[data-theme="high-contrast"] .tag-risk,
[data-theme="high-contrast"] .log-level,
[data-theme="high-contrast"] .log-type,
[data-theme="high-contrast"] .log-utility,
[data-theme="high-contrast"] .log-badge,
[data-theme="high-contrast"] .violation-count,
[data-theme="high-contrast"] .no-violations,
[data-theme="high-contrast"] .quick-feedback,
[data-theme="high-contrast"] .button-success,
[data-theme="high-contrast"] .button-error,
[data-theme="high-contrast"] .danger-action-button,
[data-theme="high-contrast"] .nav-unread-badge,
[data-theme="high-contrast"] .nav-separator,
[data-theme="high-contrast"] .feedback-section,
[data-theme="high-contrast"] .chatbot-feedback-section,
[data-theme="high-contrast"] .tool-feedback-section,
[data-theme="high-contrast"] .maintenance-banner,
[data-theme="high-contrast"] .information-banner,
[data-theme="high-contrast"] .messages .message,
[data-theme="high-contrast"] .notification,
[data-theme="high-contrast"] .field-error,
[data-theme="high-contrast"] .sw-update-toast,
[data-theme="high-contrast"] .code-copy-button,
[data-theme="high-contrast"] .skip-link,
[data-theme="high-contrast"] .empty-state,
[data-theme="high-contrast"] .admin-empty-state,
[data-theme="high-contrast"] dialog,
[data-theme="high-contrast"] details,
[data-theme="high-contrast"] details > summary,
[data-theme="high-contrast"] .dropdown,
[data-theme="high-contrast"] .mobile-nav-menu,
[data-theme="high-contrast"] .mobile-dropdown-menu,
[data-theme="high-contrast"] article,
[data-theme="high-contrast"] blockquote,
[data-theme="high-contrast"] pre,
[data-theme="high-contrast"] code {
  border-radius: 0 !important;
}

/* Tool icon chip — the soft 50% primary-tinted disc gets replaced with
   a plain square stage so it doesn't read as a coloured halo. */
[data-theme="high-contrast"] .tool-icon {
  background: transparent !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
}

/* Pills/badges in HC: yellow-on-black with a yellow border.
   The "Diese Woche" / "Info" chips on landing tiles route through here. */
[data-theme="high-contrast"] .pill,
[data-theme="high-contrast"] .pill-tool,
[data-theme="high-contrast"] .pill-chatbot,
[data-theme="high-contrast"] .badge,
[data-theme="high-contrast"] .category-badge,
[data-theme="high-contrast"] .nav-unread-badge {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

[data-theme="high-contrast"] .tag-risk-limited,
[data-theme="high-contrast"] .tag-risk-minimal,
[data-theme="high-contrast"] .tag-risk-undefined,
[data-theme="high-contrast"] .tag-dp-medium,
[data-theme="high-contrast"] .tag-dp-low,
[data-theme="high-contrast"] .tag-dp-undefined {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

[data-theme="high-contrast"] .badge.error,
[data-theme="high-contrast"] .admin-status-danger,
[data-theme="high-contrast"] .log-level-error,
[data-theme="high-contrast"] .violation-count,
[data-theme="high-contrast"] .button-error,
[data-theme="high-contrast"] .danger-action-button,
[data-theme="high-contrast"] .quick-feedback-removed,
[data-theme="high-contrast"] .risk-unacceptable,
[data-theme="high-contrast"] .risk-high,
[data-theme="high-contrast"] .dataprotection-high,
[data-theme="high-contrast"] .type-error,
[data-theme="high-contrast"] .missing-tag,
[data-theme="high-contrast"] .tag-risk-unacceptable,
[data-theme="high-contrast"] .tag-risk-high,
[data-theme="high-contrast"] .tag-dp-high {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px dashed #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Footer credit balance — small element with no dedicated class hooks
   in HC mode. Anchor on the structural class instead. */
[data-theme="high-contrast"] .footer-credits {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
}

/* Instrument Serif is single-weight; tighten tracking slightly so
   headlines stay crisp against the pure-black HC background. */
[data-theme="high-contrast"] h1,
[data-theme="high-contrast"] h2,
[data-theme="high-contrast"] h3 {
  font-family: var(--pico-font-family-sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* -------------------------------------------------------------------------
   Body / structural roots
   ------------------------------------------------------------------------- */

[data-theme="high-contrast"],
[data-theme="high-contrast"] body {
  background-color: #000 !important;
  color: #fff !important;
}

/* Kill ambient shadows / glows project-wide — they wash out at
   high contrast and create the "soft halo" look that makes HC mode
   feel like just-another-dark-mode. */
[data-theme="high-contrast"] *:not(button):not([role="button"]):not(input):not(select):not(textarea):not(progress) {
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}

[data-theme="high-contrast"] body::before,
[data-theme="high-contrast"] body::after,
[data-theme="high-contrast"] .tool::before,
[data-theme="high-contrast"] .nib-mascot::before {
  display: none !important;
}

/* Links — always underlined yellow, invert on hover for unambiguous focus. */
[data-theme="high-contrast"] a:not([role="button"]) {
  color: #ff0 !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}
[data-theme="high-contrast"] a:not([role="button"]):hover,
[data-theme="high-contrast"] a:not([role="button"]):focus-visible {
  color: #000 !important;
  background-color: #ff0 !important;
}

/* Universal focus ring — thick yellow with black halo for visibility
   against any background combination. */
[data-theme="high-contrast"] :focus-visible {
  outline: 3px solid #ff0 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #000 !important;
}

/* -------------------------------------------------------------------------
   2. Opt-in semantic classes
   ------------------------------------------------------------------------- */

/* A neutral content surface: card, panel, chat bubble, list item.
   Use this on any wrapper that holds content the user reads. */
[data-theme="high-contrast"] .hc-surface {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* An accent surface: own message in a chat, "your turn" highlight,
   pinned chip. Inverts to yellow so it pops without being a button. */
[data-theme="high-contrast"] .hc-surface-accent {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-theme="high-contrast"] .hc-surface-accent * {
  color: #000 !important;
}

/* Chrome labels: fieldset legends, "muted" captions, section eyebrows
   — anything Pico styles with a deliberately-low-contrast colour for
   the light / dark themes. */
[data-theme="high-contrast"] .hc-chrome-label {
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------------------
   3. Native HTML element fallbacks
   These cover Pico defaults that don't read CSS variables. They keep
   the variant looking coherent on pages that haven't adopted the
   opt-in classes yet.
   ------------------------------------------------------------------------- */

/* Native fieldset / legend — Pico styles legend with reduced opacity. */
[data-theme="high-contrast"] fieldset {
  background-color: #000 !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
}
[data-theme="high-contrast"] legend {
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  background-color: #000 !important;
}

/* Form controls. */
[data-theme="high-contrast"] input,
[data-theme="high-contrast"] select,
[data-theme="high-contrast"] textarea {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
}
[data-theme="high-contrast"] input::placeholder,
[data-theme="high-contrast"] textarea::placeholder {
  color: #fff !important;
  opacity: 0.7;
}

/* Buttons — solid yellow with black text. Variants stay visually
   different so toolbars don't collapse into one yellow block. */
[data-theme="high-contrast"] button,
[data-theme="high-contrast"] [type="button"],
[data-theme="high-contrast"] [type="submit"],
[data-theme="high-contrast"] [type="reset"],
[data-theme="high-contrast"] [role="button"] {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
[data-theme="high-contrast"] button.secondary,
[data-theme="high-contrast"] [role="button"].secondary,
[data-theme="high-contrast"] button.outline,
[data-theme="high-contrast"] [role="button"].outline {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
[data-theme="high-contrast"] button.contrast,
[data-theme="high-contrast"] [role="button"].contrast {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}
[data-theme="high-contrast"] button:hover,
[data-theme="high-contrast"] [role="button"]:hover {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}
[data-theme="high-contrast"] button:disabled,
[data-theme="high-contrast"] [role="button"][aria-disabled="true"] {
  opacity: 1 !important;
  background-color: #000 !important;
  color: #fff !important;
  border: 2px dashed #fff !important;
}

/* Tables. */
[data-theme="high-contrast"] table,
[data-theme="high-contrast"] thead,
[data-theme="high-contrast"] tbody,
[data-theme="high-contrast"] tfoot,
[data-theme="high-contrast"] tr {
  background-color: #000 !important;
  color: #fff !important;
}
[data-theme="high-contrast"] th,
[data-theme="high-contrast"] td {
  border: 1px solid #fff !important;
  color: #fff !important;
}
[data-theme="high-contrast"] tr:nth-child(even) > * {
  background-color: #000 !important;
}

/* Top-level structural elements that frequently carry their own bg /
   gradient (header, nav, footer, hr, mark). */
[data-theme="high-contrast"] header,
[data-theme="high-contrast"] footer,
[data-theme="high-contrast"] nav,
[data-theme="high-contrast"] main {
  background-color: transparent !important;
}
[data-theme="high-contrast"] hr {
  border: none !important;
  border-top: 2px solid #fff !important;
}
[data-theme="high-contrast"] mark {
  background-color: #ff0 !important;
  color: #000 !important;
  padding: 0 0.2em;
}

/* Skip link — pure yellow on black. */
[data-theme="high-contrast"] .skip-link {
  background: #ff0 !important;
  color: #000 !important;
  border-color: #ff0 !important;
}

/* Images and video get a 2px white frame so they don't blend in. */
[data-theme="high-contrast"] img,
[data-theme="high-contrast"] video {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   4. Targeted fixes for known component classes
   Each entry below is something that should eventually adopt one of the
   .hc-* opt-in classes. Until then, target the stable class name.
   ------------------------------------------------------------------------- */

/* Nib chat bubbles. .nib-msg--nib reads
   --pico-card-sectioning-background-color (already overridden above),
   but we force the values here for resilience against component-level
   inline styling and to guarantee the user message accent. */
[data-theme="high-contrast"] .nib-msg,
[data-theme="high-contrast"] .nib-msg--nib {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
}
[data-theme="high-contrast"] .nib-msg--user {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
  border-radius: 0 !important;
}
[data-theme="high-contrast"] .nib-msg--user * {
  color: #000 !important;
}

/* Tool / chatbot tiles flatten to black-on-white rectangles. The
   asymmetric border-radius shapes get neutralised in the rules higher
   up; this block paints the surface. */
[data-theme="high-contrast"] .tool,
[data-theme="high-contrast"] .tool-card,
[data-theme="high-contrast"] .chatbot-card,
[data-theme="high-contrast"] .featured-tool,
[data-theme="high-contrast"] [class*="featured"] {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Card links are anchors, so the universal HC link rule would otherwise
   underline the whole tile and clear its surface background. */
[data-theme="high-contrast"] a.tool,
[data-theme="high-contrast"] a.tool.tool-card,
[data-theme="high-contrast"] a.tool.chatbot-card,
[data-theme="high-contrast"] a.tool-of-week-card,
[data-theme="high-contrast"] #recently-used-grid a.tool {
  background-color: #000 !important;
  color: #fff !important;
  text-decoration: none !important;
}

[data-theme="high-contrast"] a.tool:hover,
[data-theme="high-contrast"] a.tool:focus-visible,
[data-theme="high-contrast"] a.tool.tool-card:hover,
[data-theme="high-contrast"] a.tool.tool-card:focus-visible,
[data-theme="high-contrast"] a.tool.chatbot-card:hover,
[data-theme="high-contrast"] a.tool.chatbot-card:focus-visible,
[data-theme="high-contrast"] a.tool-of-week-card:hover,
[data-theme="high-contrast"] a.tool-of-week-card:focus-visible,
[data-theme="high-contrast"] #recently-used-grid a.tool:hover,
[data-theme="high-contrast"] #recently-used-grid a.tool:focus-visible {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #ff0 !important;
  text-decoration: none !important;
}

[data-theme="high-contrast"] .tool-icon img,
[data-theme="high-contrast"] .tool-icon-img,
[data-theme="high-contrast"] .nib-mascot-img,
[data-theme="high-contrast"] .nib-nav-mascot {
  outline: none !important;
}
/* Featured / tool-of-week variant uses an accented yellow border so the
   spotlit card stays distinguishable from neighbouring tool tiles even
   without colour hue. */
[data-theme="high-contrast"] .tool-of-week-card {
  background-color: #000 !important;
  border: 3px solid #ff0 !important;
}
/* Force white text on card descendants — except inside pill / badge
   children, which sit on a yellow background and need black text.
   The :not() guards keep the universal cascade from washing the pill
   labels out (which produced white-on-yellow before). */
[data-theme="high-contrast"] .tool *:not(.pill):not(.pill *):not(.pill-favorite):not(.pill-favorite *):not(.badge):not(.badge *):not(.category-badge):not(.category-badge *):not(.status-badge):not(.status-badge *),
[data-theme="high-contrast"] .tool-card *:not(.pill):not(.pill *):not(.pill-favorite):not(.pill-favorite *):not(.badge):not(.badge *):not(.category-badge):not(.category-badge *):not(.status-badge):not(.status-badge *),
[data-theme="high-contrast"] .chatbot-card *:not(.pill):not(.pill *):not(.pill-favorite):not(.pill-favorite *):not(.badge):not(.badge *):not(.category-badge):not(.category-badge *):not(.status-badge):not(.status-badge *),
[data-theme="high-contrast"] .featured-tool *:not(.pill):not(.pill *):not(.pill-favorite):not(.pill-favorite *):not(.badge):not(.badge *):not(.category-badge):not(.category-badge *):not(.status-badge):not(.status-badge *),
[data-theme="high-contrast"] [class*="featured"] *:not(.pill):not(.pill *):not(.pill-favorite):not(.pill-favorite *):not(.badge):not(.badge *):not(.category-badge):not(.category-badge *):not(.status-badge):not(.status-badge *) {
  color: #fff !important;
  text-shadow: none !important;
}
/* Pills sitting inside cards: yellow background, black text — re-asserted
   here with descendant-specific selectors so they outrank the universal
   `.tool *` rule above. */
[data-theme="high-contrast"] .tool .pill,
[data-theme="high-contrast"] .tool .pill *,
[data-theme="high-contrast"] .tool .pill-favorite,
[data-theme="high-contrast"] .tool .pill-favorite *,
[data-theme="high-contrast"] .tool .badge,
[data-theme="high-contrast"] .tool .badge *,
[data-theme="high-contrast"] .tool .category-badge,
[data-theme="high-contrast"] .tool .category-badge *,
[data-theme="high-contrast"] .tool-card .pill,
[data-theme="high-contrast"] .tool-card .pill *,
[data-theme="high-contrast"] .tool-card .pill-favorite,
[data-theme="high-contrast"] .tool-card .pill-favorite *,
[data-theme="high-contrast"] .tool-card .badge,
[data-theme="high-contrast"] .tool-card .badge *,
[data-theme="high-contrast"] .chatbot-card .pill,
[data-theme="high-contrast"] .chatbot-card .pill *,
[data-theme="high-contrast"] .chatbot-card .pill-favorite,
[data-theme="high-contrast"] .chatbot-card .pill-favorite *,
[data-theme="high-contrast"] .chatbot-card .badge,
[data-theme="high-contrast"] .chatbot-card .badge * {
  color: #000 !important;
}
[data-theme="high-contrast"] .tool a,
[data-theme="high-contrast"] .tool-card a,
[data-theme="high-contrast"] .chatbot-card a,
[data-theme="high-contrast"] .featured-tool a {
  color: #ff0 !important;
}
/* …but pill labels that happen to be anchors still need black text. */
[data-theme="high-contrast"] .tool .pill a,
[data-theme="high-contrast"] .tool-card .pill a,
[data-theme="high-contrast"] .chatbot-card .pill a {
  color: #000 !important;
}

/* Recently-used carousel tiles — same treatment. */
[data-theme="high-contrast"] #recently-used-grid .tool {
  background-color: #000 !important;
  border: 2px solid #fff !important;
}
[data-theme="high-contrast"] #recently-used-grid .tool-name {
  color: #ff0 !important;
}

/* Empty-state notices ("No featured tools configured"). The default
   uses a translucent overlay that washes out against a pure black
   background. */
[data-theme="high-contrast"] .admin-empty-state,
[data-theme="high-contrast"] .empty-state,
[data-theme="high-contrast"] [class*="empty-state"] {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px dashed #fff !important;
}

/* Status badges — preserve the colour role (running / failed) but
   express it through pattern + accent, not subtle hue. */
[data-theme="high-contrast"] .status-badge {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
[data-theme="high-contrast"] .status-badge.completed,
[data-theme="high-contrast"] .status-badge.running,
[data-theme="high-contrast"] .status-badge.queued,
[data-theme="high-contrast"] .status-badge.normal,
[data-theme="high-contrast"] .status-badge.cancelled,
[data-theme="high-contrast"] .status-badge.info,
[data-theme="high-contrast"] .status-badge.warning {
  background-color: #ff0 !important;
  color: #000 !important;
  border-color: #ff0 !important;
}
[data-theme="high-contrast"] .status-badge.failed,
[data-theme="high-contrast"] .status-badge.error,
[data-theme="high-contrast"] .status-badge.exceeded {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px dashed #fff !important;
}

/* Dialog modals — Pico's dialog uses translucent backdrop + soft
   background; force the same flat-black surface. */
[data-theme="high-contrast"] dialog {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
[data-theme="high-contrast"] dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* ---------------------------------------------------------------------------
   Tag filter + search controls (utilities index page).

   The "Filtern nach Tags" panel is a <details class="tag-filter-section">
   with `background: var(--pico-card-background-color)`. The variable
   layer takes care of the colour, but we also need explicit rules to
   neutralise the rounded corners, drop shadow, and the
   --accessible-primary-bg-driven active-tag chip, which otherwise
   renders as a green ring against the yellow text.
   --------------------------------------------------------------------------- */

[data-theme="high-contrast"] .tag-filter-section {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-theme="high-contrast"] .tag-filter-section > summary {
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
[data-theme="high-contrast"] .tag-button {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
}
[data-theme="high-contrast"] .tag-button:hover,
[data-theme="high-contrast"] .tag-button:focus-visible {
  background-color: #ff0 !important;
  color: #000 !important;
  border-color: #ff0 !important;
}
[data-theme="high-contrast"] .tag-button.active,
[data-theme="high-contrast"] .tag-button.active:hover {
  background-color: #ff0 !important;
  color: #000 !important;
  border-color: #ff0 !important;
}

/* Search input and sort select on the utilities index page. Pico
   sets `background-color: var(--pico-background-color)` and the
   variable layer already resolves to #000 — but search.css declares
   `background-color: var(--pico-background-color)` directly on the
   element, so any cascade discrepancy shows through. Re-assert here. */
[data-theme="high-contrast"] .search-section input[type="search"],
[data-theme="high-contrast"] #utility-search,
[data-theme="high-contrast"] .sort-select,
[data-theme="high-contrast"] select.sort-select {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-theme="high-contrast"] .search-section input[type="search"]::placeholder {
  color: #fff !important;
  opacity: 0.7 !important;
}
[data-theme="high-contrast"] .search-section input[type="search"]:focus,
[data-theme="high-contrast"] #utility-search:focus,
[data-theme="high-contrast"] .sort-select:focus {
  border-color: #ff0 !important;
  box-shadow: 0 0 0 3px #ff0, 0 0 0 6px #000 !important;
}

/* "Überrasch mich" / Surprise-me discovery button. Inline rule sets
   `background: rgba(--pico-primary-rgb, 0.08)` which resolves to a faint
   yellow tint — barely visible on the black background. Promote it to a
   solid yellow chip so it reads as a real CTA. */
[data-theme="high-contrast"] .random-tool-btn {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
[data-theme="high-contrast"] .random-tool-btn:hover,
[data-theme="high-contrast"] .random-tool-btn:focus-visible {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* The universal `a:not([role="button"])` rule near the top of this
   file paints every non-button anchor yellow. That cascade also hits
   `.tag-button` and `.random-tool-btn`, both of which need surface-
   driven colours (white on black, or black on yellow) rather than a
   yellow text link. Re-assert here with descendant selectors so they
   outrank the universal anchor rule. */
[data-theme="high-contrast"] a.tag-button {
  color: #fff !important;
  background-color: #000 !important;
}
[data-theme="high-contrast"] a.tag-button.active,
[data-theme="high-contrast"] a.tag-button:hover,
[data-theme="high-contrast"] a.tag-button:focus-visible {
  color: #000 !important;
  background-color: #ff0 !important;
}
[data-theme="high-contrast"] a.random-tool-btn {
  color: #000 !important;
}