/* ---------------------------------------------------------------
   Typeface: Switzer (Fontshare, free licence), self-hosted.
   Replaces HelveticaNowDisplay (UI) and PP Locomotive New (dialog).
   --------------------------------------------------------------- */
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------
   Brand palette override. Loaded after main.css.
   Base colours (given):  ink #0c0b0b  ·  blue #3b83f6  ·  paper #f1f0ed
   Tokens mirror the Framer project's colour styles 1:1 (see names in the
   comments) so both sides can be changed together.
   --------------------------------------------------------------- */
:root,
html[data-theme=ray] {
  /* Framer colour styles (same names) */
  --ink: #0c0b0b;            /* Black */
  --black-80: #282828;       /* Black 80 */
  --black-45: #0c0b0b73;     /* Black 45 */
  --gray-60: #616161;        /* Gray 60 */
  --gray-20: #d5d3ce;        /* Gray 20 */
  --border: #d5d3ce45;       /* Border */
  --paper: #f1f0ed;          /* Primary */
  --white: #f8f8f7;          /* White / Light Primary / Bg Color */
  --white-75: #f8f8f7bf;     /* White 75 */
  --white-35: #f8f8f759;     /* White 35 */
  --blue: #3b83f6;           /* Highlight */
  --blue-hover: #2463eb;     /* Highlight secondary */
  --error: #c25d5d;          /* Error */

  /* PosterBackdrop (living face behind the UI) — tune here */
  --face-color: var(--gray-20);   /* stroke colour; multiply-blended onto the paper */
  --face-opacity: .16;            /* 0 hides the face */
  --face-static: 1;               /* 1 = still watermark (no eye tracking / blink / grin), 0 = living face */
  --face-scale: 1;                /* 1 = cover the viewport like the Framer hero */

  /* semantic aliases used below */
  --blue-soft: rgba(59, 131, 246, .12);
  --ink-muted: var(--gray-60);
  --line: var(--border);

  --color: var(--ink);
  --color-bg: var(--paper);
  --menu-color: var(--white);
  --menu-color-bg: var(--blue);
}

/* The 3D canvas (.c-ray_visualizer) is position:fixed at z-index:-1, i.e. it paints
   BEHIND the body. Only the root element may carry an opaque background; a body
   background would cover the model completely. */
html {
  /* Paper + the same vignette the WebGL backdrop used to draw (centre #f1f0ed -> corners ~#e1e0dc).
     The canvas is transparent now, so this is the real page ground. */
  background-color: var(--paper);
  background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--paper) 0%, #e1e0dc 100%);
  background-attachment: fixed;
  color: var(--ink);
}
body { background-color: transparent; }
::selection { background-color: var(--blue); color: var(--white); text-shadow: none; }

/* Choice pills: ink with white text, blue on hover */
.c-ray_button,
.c-ray_checkbox {
  background-color: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .c-ray_button:hover,
  .c-ray_button.focus-visible,
  .c-ray_checkbox:hover,
  .focus-visible.c-ray_checkbox {
    background-color: var(--blue);
    border-color: var(--blue);
    color: var(--white);
  }
}
@media (max-width: 1024px) {
  .c-ray_button, .c-ray_checkbox { background-color: var(--ink); color: var(--white); }
}

/* Primary action (continue / send): solid blue */
.c-ray_button.-primary,
.-primary.c-ray_checkbox {
  background-color: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
@media (hover: hover) {
  .c-ray_button.-primary:hover,
  .c-ray_button.-primary.focus-visible { background-color: var(--blue-hover); border-color: var(--blue-hover); }
  .c-ray_button.-primary:hover:before,
  .c-ray_button.-primary.focus-visible:before { background-color: transparent; }
}

/* Secondary / text-only choice (e.g. "Write us: …"): quiet, ink on paper */
.c-ray_button.-secondary,
.-secondary.c-ray_checkbox {
  background-color: transparent;
  color: var(--ink-muted);
  border: 1px solid transparent;
}
@media (hover: hover) {
  .c-ray_button.-secondary:hover,
  .c-ray_button.-secondary.focus-visible { background-color: var(--blue-soft); border-color: transparent; color: var(--ink); }
  .c-ray_button.-secondary:hover:before,
  .c-ray_button.-secondary.focus-visible:before { background-color: transparent; }
}

/* Checkboxes (multi-select steps) */
.c-ray_checkbox { color: var(--white); background-color: var(--ink); }
input:checked + .c-ray_checkbox { background-color: var(--blue); border-color: var(--blue); color: var(--white); }
input:checked + .c-ray_checkbox .c-ray_checkbox-icon { background-color: var(--white); }
input:checked + .c-ray_checkbox .c-ray_checkbox-icon:before,
input:checked + .c-ray_checkbox:hover .c-ray_checkbox-icon:before { background-color: var(--blue); }
input.focus-visible + .c-ray_checkbox { outline-color: var(--blue); }

/* Inputs */
.c-form_input, .c-ray_select, .c-form_textarea, .c-form_select_input {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  caret-color: var(--blue);
}
.c-form_input:focus, .c-ray_select:focus, .c-form_textarea:focus, .c-form_select_input:focus { border-color: var(--blue); }
.c-form_input.-invalid, .-invalid.c-ray_select, .-invalid.c-form_textarea, .-invalid.c-form_select_input { border-color: var(--error); }
.c-ray-step_errors { background-color: var(--ink); color: var(--paper); }
.c-ray_form { background-color: var(--blue); }

/* Fixed controls: back button, sound toggle, progress bar */
.c-ray_back { background-color: var(--ink); color: var(--white); transition: background-color .2s ease, opacity .3s, transform .3s; }
@media (hover: hover) { .c-ray_back:hover { background-color: var(--blue); } }
.c-ray_sound { background-color: var(--ink); }
.c-ray_sound:before { background-color: var(--white); border-color: var(--ink); }
.c-ray_sound-icon.-on svg { fill: var(--ink); }
.c-ray_sound-icon.-off svg { fill: var(--white); }
.c-ray_sound.-muted .c-ray_sound-icon.-on svg { fill: var(--white); }
.c-ray_sound.-muted .c-ray_sound-icon.-off svg { fill: var(--ink); }
.c-ray_progress { border-top-color: var(--blue); }

/* Typing cursor, links, notes */
.c-ray-step:not(.default-leave-active) .c-ray-step_dialog.-show-cursor > span:after {
  background-color: var(--ink);
  width: .12em;                       /* thin caret (main.css: .4em block) */
  height: .8em;
  margin-left: .12em;
  transform: translateY(8%);          /* main.css stretched it with scaleY(1.75) */
  border-radius: 1px;
}
.c-ray-step_dialog a, .u-underline { text-decoration-color: var(--blue); text-underline-offset: .15em; }
@media (hover: hover) { .c-ray-step_dialog a:hover, a.u-underline:hover { color: var(--blue); } }
.c-ray-note { --color: var(--ink); --color-bg: var(--white); }
.c-ray-note:before { background-color: var(--ink); }

/* ---------------------------------------------------------------
   Brand layer (see assets/scripts/brand.js): BrandLoader + FreshCursor
   --------------------------------------------------------------- */
/* BrandLoader — blue curtain with the mascot face. Shown only while
   <html class="fl-loader-play">, which an inline head script sets before paint. */
.fl-loader { display: none; }
html.fl-loader-play .fl-loader {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 999999;
  background-color: var(--blue);
  will-change: transform;
}
.fl-loader.is-exiting { animation: flCurtainUp .5s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes flCurtainUp { to { transform: translateY(-100%); } }
.fl-loader svg { display: block; }
.fl-loader_eye, .fl-loader_mouth { fill: none; stroke: var(--white); stroke-width: 21; }
.fl-cursor svg path:not([fill]), .fl-cursor svg g:not([fill]) > path { fill: none; }
.fl-loader_eye { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; transform: scale(0); }
html.fl-loader-play .fl-loader .fl-loader_eye.-l { animation: flEyePop .32s ease-out forwards, flBlink .18s .55s linear; }
html.fl-loader-play .fl-loader .fl-loader_eye.-r { animation: flEyePop .32s .1s ease-out forwards, flBlink .18s .55s linear; }
@keyframes flEyePop { 0% { opacity: 0; transform: scale(0); } 47% { opacity: 1; } 70% { transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flBlink { 0%, 10% { transform: scale(1) scaleY(1); } 50% { transform: scale(1) scaleY(.08); } 100% { transform: scale(1) scaleY(1); } }
.fl-loader_mouth { stroke-linecap: round; stroke-dasharray: 121; stroke-dashoffset: 121; }
html.fl-loader-play .fl-loader .fl-loader_mouth { animation: flDraw .22s .28s ease-out forwards; }
@keyframes flDraw { to { stroke-dashoffset: 0; } }
.fl-loader.is-waiting .fl-loader_eye.-l,
.fl-loader.is-waiting .fl-loader_eye.-r { opacity: 1; transform: scale(1); animation: flIdleBlink 3.2s linear infinite; }
@keyframes flIdleBlink { 0%, 90% { transform: scale(1) scaleY(1); } 94% { transform: scale(1) scaleY(.08); } 100% { transform: scale(1) scaleY(1); } }
.fl-loader.is-waiting .fl-loader_mouth { stroke-dashoffset: 0; animation: none; }
.fl-loader.is-reduced .fl-loader_eye { opacity: 1; transform: none; animation: none !important; }
.fl-loader.is-reduced .fl-loader_mouth { stroke-dashoffset: 0; animation: none !important; }
.fl-loader.is-reduced.is-exiting { animation-duration: .25s; }

/* FreshCursor — 1:1 follow, crossfading SVG states, click confetti */
.fl-cursor {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  z-index: 10000; pointer-events: none; opacity: 0;
  transition: filter .12s ease, opacity .2s ease;
}
.fl-cursor.is-seen { opacity: 1; }
.fl-cursor.is-hidden { opacity: 0; }
.fl-cursor.is-inverted { filter: brightness(0) invert(1); }
.fl-cursor_layer {
  position: absolute; opacity: 0; pointer-events: none;
  transform: scale(.6);
  transition: opacity .12s ease, transform .18s cubic-bezier(.16,1,.3,1);
}
.fl-cursor_layer.-base   { top: -2px;  left: -2px;  transform: scale(1); }
.fl-cursor_layer.-face   { top: -22px; left: -22px; }
.fl-cursor_layer.-eye    { top: -18px; left: -18px; }
.fl-cursor_layer.-drag   { top: -22px; left: -22px; }
.fl-cursor_layer.-pencil { top: -30px; left: -4px; }
.fl-cursor.is-base   .fl-cursor_layer.-base,
.fl-cursor.is-face   .fl-cursor_layer.-face,
.fl-cursor.is-eye    .fl-cursor_layer.-eye,
.fl-cursor.is-drag   .fl-cursor_layer.-drag,
.fl-cursor.is-pencil .fl-cursor_layer.-pencil { opacity: 1; transform: scale(1); }
.fl-cursor.is-pressed.is-base   .fl-cursor_layer.-base   { transform: scale(.86); }
.fl-cursor.is-pressed.is-face   .fl-cursor_layer.-face,
.fl-cursor.is-pressed.is-eye    .fl-cursor_layer.-eye,
.fl-cursor.is-pressed.is-drag   .fl-cursor_layer.-drag   { transform: scale(.85); }
.fl-cursor_mouth { transition: d .25s cubic-bezier(.34,1.56,.64,1); }
.fl-cursor_iris { transform-box: fill-box; transform-origin: 50% 50%; }
.fl-cursor.is-eye .fl-cursor_iris { animation: flIrisBlink 2.6s ease-in-out infinite; }
@keyframes flIrisBlink { 0%, 42% { transform: scaleY(1); } 50% { transform: scaleY(.06); } 58%, 100% { transform: scaleY(1); } }
.fl-cursor.is-drag .fl-cursor_chev.-l { animation: flChevL 1.4s ease-in-out infinite; }
.fl-cursor.is-drag .fl-cursor_chev.-r { animation: flChevR 1.4s ease-in-out infinite; }
.fl-cursor.is-pressed .fl-cursor_chev { animation: none !important; }
@keyframes flChevL { 50% { transform: translateX(-1.6px); } }
@keyframes flChevR { 50% { transform: translateX(1.6px); } }
.fl-cursor.is-pencil .fl-cursor_layer.-pencil { animation: flWrite .5s ease-in-out infinite; }
@keyframes flWrite { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(6deg) translateY(1.5px); } }
.fl-cursor_burst { position: absolute; top: 0; left: 0; pointer-events: none; }
.fl-cursor_particle { position: absolute; top: -5px; left: -5px; display: block; }
.fl-cursor_particle i { display: block; width: 9px; height: 3px; border-radius: 2px; background: var(--blue); }

/* PosterBackdrop — fixed behind everything, including the transparent 3D canvas. */
.fl-face {
  /* z-index -2: BEHIND the (now transparent) WebGL canvas, so it never shows through the TV screen */
  position: fixed; inset: 0; overflow: hidden; z-index: -2;
  pointer-events: none; mix-blend-mode: multiply; opacity: var(--face-opacity);
}
.fl-face_inner { position: absolute; inset: -20% -10%; transform: scale(var(--face-scale)); transform-origin: center; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.fl-face.is-wauu .fl-face_inner { transform: scale(calc(var(--face-scale) * 1.015)); }
.fl-face svg { display: block; }
.fl-face_ink { stroke: var(--face-color); }
.fl-face_ink path { fill: none; }
.fl-face_eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .1s linear; }
.fl-face.is-blinking .fl-face_eye { transform: scaleY(.06); }
/* Narrow / tall screens: "width" fit like the Framer component — the whole face is
   sized from the viewport width (--face-zoom) and anchored at --face-y, so eyes and
   mouth stay readable instead of a random slice of a 1440x900 artwork. */
@media (max-width: 1024px) {
  .fl-face { --face-zoom: 1.25; --face-y: 30%; }
  .fl-face_inner { inset: 0; }
  .fl-face svg {
    position: absolute; left: 50%; top: var(--face-y);
    width: calc(var(--face-zoom) * 100%); height: auto; aspect-ratio: 1440 / 900;
    transform: translate(-50%, -50%);
  }
}

/* Turnstile mount (interaction-only: shows a box only when a challenge is needed) */
.c-ray_turnstile { display:flex; justify-content:center; margin: 0 auto 1rem; min-height: 0; }

/* ---------------------------------------------------------------
   "Need a starting point?" note (good-brief panel) — brand styling.
   Overrides Locomotive's centred h1 layout from main.css.
   --------------------------------------------------------------- */
.c-ray-note { --color: var(--ink); --color-bg: var(--white); }
.c-ray-note:before { background-color: var(--ink); opacity: .55; }
.c-ray-note_content { font-family: "Switzer", sans-serif; color: var(--ink); padding: 56px 56px 72px; }
@media (max-width: 1024px) { .c-ray-note_content { padding: 40px 28px 88px; } }

/* eyebrow before the title */
.c-ray-good-brief_head { text-align: left; margin: 0 0 40px; width: auto; max-width: 560px; }
.c-ray-good-brief_head::before {
  content: "Ray · starting point"; display: block; margin-bottom: 20px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
html[lang="sl"] .c-ray-good-brief_head::before, .c-ray-good-brief.-sl .c-ray-good-brief_head::before { content: "Ray · izhodišče"; }
.c-ray-note_content .c-ray-good-brief_title {
  font-family: "Switzer", sans-serif; font-weight: 600; font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; color: var(--ink);
}
.c-ray-good-brief_head p { font-size: 17px; line-height: 1.45; color: var(--gray-60); margin: 0; max-width: 52ch; }

/* numbered list */
.c-ray-good-brief_list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-20); }
.c-ray-note_content .c-ray-good-brief_item {
  grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start;
  border-top: 0; border-bottom: 1px solid var(--gray-20); padding: 22px 0 24px;
}
.c-ray-note_content .c-ray-good-brief_item::before {
  content: counter(good-brief, decimal-leading-zero); grid-column: 1; padding-top: 4px;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--blue); line-height: 1;
}
.c-ray-note_content .c-ray-good-brief_item-title {
  font-family: "Switzer", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink);
}
.c-ray-good-brief_item p { font-size: 15px; line-height: 1.5; color: var(--black-80); margin: 0; max-width: 60ch; }

/* close button: ink pill, blue on hover (same as the other buttons) */
.c-ray-note_close { color: var(--white); background-color: var(--ink); transition: background-color .2s ease, color .2s ease; }
.c-ray-note_close:hover, .c-ray-note_close:focus-visible { color: var(--white); background-color: var(--blue); }

/* the trigger link on the brief step */
.c-ray-step_note { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .2s ease; }
.c-ray-step_note:hover { color: var(--blue); }
@media (max-width: 699px) { .c-ray-note_content .c-ray-good-brief_item { grid-template-columns: 40px 1fr; column-gap: 14px; } }

/* ---------------------------------------------------------------
   Mobile pass (2026-09-21). Touch devices and narrow screens.
   - 44px minimum touch targets (pills, next arrow, back, sound toggle)
   - 16px form text: iOS Safari zooms the page on focus below 16px
   - dvh so the panel follows the collapsing browser bar / keyboard
   Check with the phone audit (see _dev/docs/mobile-pass.md).
   --------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse) {
  .c-ray_button, .c-ray_checkbox { min-height: 44px; font-size: 14px; padding: 0 1.4em; }
  .c-ray-step_choice { margin: 0 .25em .5em 0; }
  .c-ray-step_next { min-width: 64px; justify-content: center; }
  .c-form_input, .c-ray_select, .c-form_textarea, .c-form_select_input { font-size: 16px; }
  .c-form_input, .c-ray_select, .c-form_select_input { min-height: 44px; }
  .c-form_textarea { min-height: 7.5em; resize: none; }   /* room for ~4 lines under the floating label; no drag handle on touch */
  .c-ray_back { width: 44px; height: 44px; }
  .c-ray_sound:before, .c-ray_sound-icon { width: 44px; height: 44px; }
  .c-ray_sound-icon svg { height: 20%; }
  /* text links inside the step (brief helper, FilePond "browse"): taller hit area without moving the text */
  .c-ray-step_content a, .c-ray-step_note, .filepond--label-action { padding-block: 12px; margin-block: -12px; display: inline-block; }
}
/* Keyboard open (Android/Chrome shrink the viewport; iOS overlays it instead): while a field has focus on a
   short viewport, give the panel most of the screen and move the fixed back / sound buttons out of the way
   so they cannot cover the field or the next arrow. */
@media (max-width: 1024px) and (max-height: 480px) {
  .c-ray:has(.c-form_input:focus, .c-form_textarea:focus) .c-ray_main { inset: calc(26% - 8px) 0 0 0; }
  .c-ray:has(.c-form_input:focus, .c-form_textarea:focus) .c-ray-step_content { padding-bottom: 1.5rem; }
  .c-ray:has(.c-form_input:focus, .c-form_textarea:focus) .c-ray_back,
  .c-ray:has(.c-form_input:focus, .c-form_textarea:focus) .c-ray_sound { opacity: 0; pointer-events: none; }
}

/* ── Keyboard pass (2026-09-22) ─────────────────────────────────────────────────
   Behaviour lives in assets/scripts/ray-ux.js. Here: nothing is tabbable before Ray
   has finished the sentence (the content used to be opacity 0 but still in the tab
   order), and every stop shows a blue ring for keyboard focus only. */
.c-ray-step:not(.-expanded) .c-ray-step_content {
  visibility: hidden;
  transition: opacity .3s cubic-bezier(0.215, 0.61, 0.355, 1), transform .3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear .3s;
}
.c-ray-step.-expanded .c-ray-step_content { visibility: visible; }

.c-ray_button:focus-visible,
.c-ray-step_note:focus-visible,
.c-ray_sound:focus-visible,
.c-ray_back:focus-visible,
.c-ray-note_close:focus-visible,
.c-ray-step_content a:focus-visible,
.filepond--drop-label label:focus-visible,
.filepond--root:has(.filepond--browser:focus-visible) .filepond--drop-label label,
.filepond--file-action-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.c-ray_button.-primary:focus-visible { outline-color: var(--ink); }
input.c-form_checkbox:focus-visible + .c-ray_checkbox { outline: 2px solid var(--blue); outline-offset: 3px; }
.c-form_input:focus-visible, .c-form_textarea:focus-visible, .c-ray_select:focus-visible {
  outline: none;
  border-bottom-color: var(--blue);
  box-shadow: 0 1px 0 0 var(--blue);
}
/* a focused control inside the scrolling panel stops clear of the panel edge */
.c-ray-step_content :is(input, textarea, select, button, a, [tabindex]) { scroll-margin-block: 24px; }
.focus-visible:not(input):not(textarea) { outline-style: solid; outline-width: 2px; outline-offset: 3px; outline-color: var(--blue); }
input.focus-visible + .c-ray_checkbox { outline-style: solid; outline-width: 2px; outline-offset: 3px; outline-color: var(--blue); }

/* ── Upload errors (2026-09-22) ─────────────────────────────────────────────────
   FilePond's default was a red one-liner listing MIME types that ran off the edge. A rejected file
   now sits in a soft red card with ink text: name and size on the left, the reason on the right
   ("Not a PDF or Word document" / "PDF, DOC or DOCX, up to 4 MB"), the x to dismiss. */
.filepond--item[data-filepond-item-state*="error"] .filepond--item-panel,
.filepond--item[data-filepond-item-state*="invalid"] .filepond--item-panel { background-color: #f6dcd9; border: 0; }   /* main.css: border 3px solid red */
.filepond--item[data-filepond-item-state*="error"] .filepond--file,
.filepond--item[data-filepond-item-state*="invalid"] .filepond--file { color: var(--ink); }
.filepond--item[data-filepond-item-state*="error"] .filepond--file-status-main,
.filepond--item[data-filepond-item-state*="invalid"] .filepond--file-status-main { color: #a33a33; font-weight: 500; }
.filepond--item[data-filepond-item-state*="error"] .filepond--file-status-sub,
.filepond--item[data-filepond-item-state*="invalid"] .filepond--file-status-sub { opacity: .75; }
.filepond--item[data-filepond-item-state*="error"] .filepond--file-action-button,
.filepond--item[data-filepond-item-state*="invalid"] .filepond--file-action-button { background-color: var(--ink); color: var(--white); }
/* the form's own red bar repeats the card's reason while a rejected file is still listed */
.c-form_item:has(.filepond--item[data-filepond-item-state*="invalid"], .filepond--item[data-filepond-item-state*="error"]) .c-form_input-errors { display: none; }