/*!
 * Fernhochschulen-Finder (.fim-*) – card, quiz, result, sticky bar
 * Tokens measured on https://fernstudium-infomaterial.de (Nov 2026), see DESIGN.md §2.
 * Scoping: everything lives under .fim-finder or .fim-bar. No global selectors, no !important.
 * Layout: container queries on .fim-finder (card width = article width, 748px max on the site);
 * the sticky bar is viewport-bound, so it uses a media query (max-width: 767.98px).
 */

/* ---------- 1. Tokens ---------- */
.fim-finder,
.fim-bar {
  --fim-blue: #0f60a0;          /* links, h2, ribbon, table highlight ring   */
  --fim-blue-hover: #0b4a7c;
  --fim-orange: #e48715;        /* rank circle, cookie buttons (decor only)   */
  --fim-red: #c11319;           /* outbound CTA, same as .gspb_offer_block    */
  --fim-red-hover: #a50f14;
  --fim-primary: var(--fim-red);        /* primary action colour (owner: site CTA red) */
  --fim-primary-hover: var(--fim-red-hover);
  --fim-text: #3b3838;          /* body text                                  */
  --fim-muted: #5b5757;         /* secondary text, 7.13:1 on white            */
  --fim-on-orange: #231f1f;     /* number on orange: 6.04:1 (white is 2.70)   */
  --fim-bg: #fff;
  --fim-tint: #ecf2f7;          /* blue 8% on white, selected/chip bg         */
  --fim-wash: rgba(205, 220, 235, .13); /* site token --lightbg #cddceb21     */
  --fim-line: rgba(206, 206, 206, .4);  /* table row separator                */
  --fim-line-strong: #8a8686;   /* input border, 3.60:1 (WCAG 1.4.11 ≥3:1)    */
  --fim-card-edge: #c9d9e8;
  --fim-ok: #1b6e3c;            /* check icon, 6.28:1                         */
  --fim-error: #9e1b20;         /* 7.98:1                                     */
  --fim-radius: 4px;            /* = .gspb_offer_block                        */
  --fim-shadow: 0 5px 23px rgba(188, 207, 219, .35); /* = .gspb-offer-listing */
  --fim-ease: cubic-bezier(.165, .84, .44, 1);        /* = cookie plugin ease  */
  --fim-dur: 160ms;
  --fim-gap: 16px;
  --fim-pad-x: 20px;   /* overridden on .fim-card at >=600px container width */
  --fim-pad-y: 18px;
  --fim-target: 48px;
  --fim-focus: 3px solid var(--fim-blue);
}

.fim-finder,
.fim-finder *,
.fim-finder *::before,
.fim-finder *::after,
.fim-bar,
.fim-bar *,
.fim-bar *::before,
.fim-bar *::after {
  box-sizing: border-box;
}

/* ---------- 2. Shell ---------- */
.fim-finder {
  container: fim / inline-size;
  display: block;
  /* article spacing: paragraphs on the site use 25.6px top margin */
  margin: 25.6px 0;
  font-family: inherit;       /* site system-ui stack */
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  font-style: normal;         /* the lead paragraph is italic; do not inherit it */
  color: var(--fim-text);
  text-align: start;
  letter-spacing: normal;
  text-transform: none;
}

.fim-card {
  background: var(--fim-bg) linear-gradient(var(--fim-wash), var(--fim-wash));
  border-radius: var(--fim-radius);
  box-shadow: inset 0 0 0 1px var(--fim-card-edge), var(--fim-shadow);
  overflow: hidden;           /* clips ribbon corner */
}

/* Reset: specificity (0,2,1) so theme rules such as .entry-content p / .site-article p + p cannot leak in */
.fim-finder .fim-card :is(p, ul, ol, fieldset, h3, legend),
.fim-finder .fim-sr { margin: 0; padding: 0; }
.fim-finder .fim-card :is(ul, ol) { list-style: none; }
/* li: margin only (theme `.entry-content ul li { margin-left }` must not leak); padding belongs to .fim-match */
.fim-finder .fim-card li { margin: 0; list-style: none; }
.fim-finder .fim-card h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--fim-blue); font-style: normal; font-family: inherit; letter-spacing: normal; text-transform: none; }
.fim-finder .fim-card :is(p, li, label, legend) { font-style: normal; font-family: inherit; }

/* Visibility switches (no-JS / JS failure keeps the plain link) */
.fim-finder:not([data-fim-ready]) .fim-js-only { display: none; }
.fim-finder[data-fim-ready] .fim-nojs-only { display: none; }
.fim-finder [hidden] { display: none; }
/* Before enhancement "ändern" keeps its box (invisible, not focusable) so the chip does not grow when JS starts. */
.fim-finder:not([data-fim-ready]) .fim-chip__edit.fim-js-only { display: inline-block; visibility: hidden; }

.fim-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 3. Buttons and links ---------- */
:is(.fim-finder, .fim-bar) .fim-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--fim-target); min-width: var(--fim-target);
  padding: 13px 20px;
  border: 0; border-radius: var(--fim-radius);
  font: inherit; font-size: 17px; line-height: 20px; font-weight: 700;
  text-align: center; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--fim-blue);
  transition: background-color var(--fim-dur) var(--fim-ease), color var(--fim-dur) var(--fim-ease);
  -webkit-tap-highlight-color: transparent;
}
:is(.fim-finder, .fim-bar) .fim-btn:is(:hover, :active) { background: var(--fim-blue-hover); }
:is(.fim-finder, .fim-bar) .fim-btn--cta { background: var(--fim-primary); }
:is(.fim-finder, .fim-bar) .fim-btn--cta:hover, :is(.fim-finder, .fim-bar) .fim-btn--cta:active { background: var(--fim-primary-hover); }
/* One primary per state: start, Q5 "Ergebnis anzeigen", result CTAs and the bar are red;
   "Weiter" on Q1-Q4 and the topic picker stays blue step navigation. */
.fim-finder[data-fim-state="q5"] .fim-nav [data-fim-action="next"] { background: var(--fim-primary); }
.fim-finder[data-fim-state="q5"] .fim-nav [data-fim-action="next"]:is(:hover, :active) { background: var(--fim-primary-hover); }
:is(.fim-finder, .fim-bar) .fim-btn--ghost {
  background: transparent; color: var(--fim-blue);
  box-shadow: inset 0 0 0 2px var(--fim-blue);
  font-weight: 700;
}
:is(.fim-finder, .fim-bar) .fim-btn--ghost:hover, :is(.fim-finder, .fim-bar) .fim-btn--ghost:active { background: var(--fim-tint); color: var(--fim-blue-hover); }
:is(.fim-finder, .fim-bar) .fim-btn--text {
  background: transparent; color: var(--fim-blue); padding-inline: 12px; font-weight: 400;
}
:is(.fim-finder, .fim-bar) .fim-btn--text:hover, :is(.fim-finder, .fim-bar) .fim-btn--text:active { background: var(--fim-tint); color: var(--fim-blue-hover); }
:is(.fim-finder, .fim-bar) .fim-btn--block { width: 100%; }

.fim-finder :is(a, button, input, select, summary):focus-visible,
.fim-bar :is(a, button):focus-visible {
  outline: var(--fim-focus);
  outline-offset: 2px;
}
/* Ring never drawn inside clipped parents */
.fim-card :is(a, button, select):focus-visible { position: relative; z-index: 1; }

.fim-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

.fim-finder .fim-link { color: var(--fim-blue); text-decoration: underline; text-underline-offset: 3px; }
.fim-finder .fim-link:hover { color: var(--fim-blue-hover); }

/* ---------- 4. Collapsed card ---------- */
/* Mobile: intro (title, lead, benefits), action (button, micro), topic line.
   Desktop (container >= 600): intro across the full width, then [topic line | action]. */
.fim-collapsed {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px;
  padding: 18px var(--fim-pad-x) 16px;
}
.fim-intro { display: grid; gap: 6px; min-width: 0; }
.fim-finder .fim-card .fim-title {            /* role=heading aria-level=2 on a <p> */
  font-size: 20px; line-height: 26px; font-weight: 700; color: var(--fim-blue);
  text-wrap: balance;
}
.fim-finder .fim-card .fim-lead { font-size: 15px; line-height: 22px; color: var(--fim-text); text-wrap: pretty; }
.fim-finder .fim-card .fim-benefits { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.fim-finder .fim-card .fim-benefits li {
  display: grid; grid-template-columns: 22px minmax(0, auto); column-gap: 10px; align-items: start;
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--fim-text);
}
.fim-benefits .fim-icon { width: 22px; height: 22px; margin-top: -1px; color: var(--fim-ok); }   /* tick symbol is a filled green disc with a white check */

.fim-action { display: grid; gap: 4px; }
.fim-finder .fim-card :is(.fim-start, .fim-fallback) {
  min-height: 52px; padding: 14px 22px; font-size: 17px; line-height: 22px;
}
.fim-start .fim-icon, .fim-fallback .fim-icon { transition: transform var(--fim-dur) var(--fim-ease); }
.fim-start:hover .fim-icon { transform: translateX(3px); }
.fim-fallback:hover .fim-icon { transform: translateY(2px); }
.fim-finder .fim-card .fim-sub { font-size: 13px; line-height: 18px; color: var(--fim-muted); text-align: center; }

/* Topic line: quiet text, not a pill. "ändern" keeps a 44px hit area. */
.fim-finder .fim-card .fim-meta { display: flex; flex-wrap: wrap; align-items: center; }
.fim-chip {
  display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 2px;
  min-height: 24px; font-size: 14px; line-height: 20px; color: var(--fim-muted);
}
.fim-chip strong { font-weight: 600; color: var(--fim-text); }
.fim-chip__edit {
  position: relative; min-height: 24px; margin: 0 0 0 2px; padding: 0 6px;
  border: 0; border-radius: var(--fim-radius); background: transparent;
  font: inherit; font-size: 14px; line-height: 24px; color: var(--fim-blue);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fim-chip__edit::after { content: ""; position: absolute; inset: -10px -4px; }   /* 24 + 2 x 10 = 44px */
.fim-chip__edit:hover { color: var(--fim-blue-hover); background: var(--fim-tint); }

/* JS/no-JS text pairs share one grid cell; the inactive variant keeps its box (no shift on enhance). */
.fim-swap { display: grid; }
.fim-swap > * { grid-area: 1 / 1; }
.fim-finder:not([data-fim-ready]) .fim-swap > .fim-js-only,
.fim-finder[data-fim-ready] .fim-swap > .fim-nojs-only { display: block; visibility: hidden; }

@container fim (min-width: 600px) {
  .fim-collapsed {
    min-height: 190px;                /* grows, never clips: text zoom / long topic names */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "intro action" "meta action";
    column-gap: 40px; row-gap: 16px;
    padding: 26px 30px 22px;          /* table cell padding on desktop = 30px */
  }
  .fim-intro { grid-area: intro; }
  .fim-finder .fim-card .fim-meta { grid-area: meta; align-self: end; }
  .fim-action { grid-area: action; align-self: center; }
  .fim-finder .fim-card .fim-title { font-size: 22px; line-height: 28px; }
  .fim-finder .fim-card .fim-lead { font-size: 16px; line-height: 24px; }
  /* benefits stay one tidy column: three long items never wrap 2 + 1 */
  .fim-finder .fim-card .fim-benefits { gap: 10px; margin-top: 14px; }
  .fim-finder .fim-card .fim-sub { font-size: 14px; line-height: 20px; }
  .fim-finder .fim-card :is(.fim-start, .fim-fallback) { min-width: 250px; }
}

/* ---------- 5. Body (expanded) ---------- */
.fim-body { padding: 0; }
.fim-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: var(--fim-pad-y) var(--fim-pad-x) 0;
}
.fim-progress__text { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--fim-text); }
.fim-finder .fim-card .fim-progress__bar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-items: center;
  margin: 12px var(--fim-pad-x) 0;
}
.fim-progress__bar > li { height: 6px; border-radius: 3px; background: #d5e0ea; }
.fim-progress__bar > li[data-state="done"] { background: var(--fim-blue); }
/* current segment is taller (shape, not only colour); the text "Frage n von 5" is the real indicator */
.fim-progress__bar > li[aria-current="step"] { background: var(--fim-blue); height: 10px; }
.fim-topic-mini { font-size: 14px; line-height: 20px; color: var(--fim-muted); }
.fim-head__close { margin-right: -12px; }

.fim-form { padding: 0 var(--fim-pad-x) var(--fim-pad-y); }

.fim-finder .fim-card .fim-step {
  min-width: 0; border: 0;
  min-height: 330px;                 /* reserves the tallest step: no jump between questions */
  padding-top: 18px;
}
.fim-finder .fim-card .fim-step--short { min-height: 0; }
.fim-finder .fim-card .fim-legend {
  display: block; float: left; width: 100%;   /* float: legend wraps like normal block */
  margin: 0 0 12px; padding: 0;
  font-size: 20px; line-height: 28px; font-weight: 700; color: var(--fim-text);
  text-wrap: balance;
}
.fim-legend:focus { outline: none; }   /* programmatic focus target only */
.fim-legend:focus-visible { outline: var(--fim-focus); outline-offset: 4px; border-radius: 2px; }
.fim-finder .fim-card .fim-hint { clear: both; margin: -4px 0 10px; font-size: 14px; line-height: 20px; color: var(--fim-muted); }
.fim-options { clear: both; display: grid; gap: 8px; }

.fim-option {
  position: relative;
  display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; column-gap: 12px;
  min-height: 52px; padding: 10px 14px;
  background: #fff;
  border-radius: var(--fim-radius);
  box-shadow: inset 0 0 0 1px var(--fim-line-strong);
  font-size: 16px; line-height: 24px; color: var(--fim-text);
  cursor: pointer;
  transition: box-shadow var(--fim-dur) var(--fim-ease), background-color var(--fim-dur) var(--fim-ease);
}
.fim-option:hover { background: var(--fim-tint); }
.fim-option input {
  width: 24px; height: 24px; margin: 0; cursor: pointer;
  accent-color: var(--fim-blue);
}
.fim-option .fim-icon { width: 20px; height: 20px; color: var(--fim-blue); opacity: 0; }
.fim-option:has(input:checked) {
  background: var(--fim-tint);
  box-shadow: inset 0 0 0 2px var(--fim-blue);   /* 2px ring + dot + check + bold */
  font-weight: 700;
}
.fim-option:has(input:checked) .fim-icon { opacity: 1; }
.fim-option:has(input:focus-visible) { outline: var(--fim-focus); outline-offset: 2px; }
.fim-option input:focus-visible { outline: none; }  /* ring is drawn on the label */

.fim-finder .fim-card .fim-error {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--fim-error);
}
.fim-error[hidden] { display: none; }

.fim-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px;
}
.fim-nav .fim-btn--primary { margin-inline-start: auto; min-width: 140px; }

/* Topic picker */
.fim-field { display: grid; gap: 8px; clear: both; }
.fim-label { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--fim-text); }
.fim-select {
  width: 100%; min-height: var(--fim-target); padding: 10px 40px 10px 14px;
  appearance: none; border: 0; border-radius: var(--fim-radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f60a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
  box-shadow: inset 0 0 0 1px var(--fim-line-strong);
  font: inherit; font-size: 16px; line-height: 24px; color: var(--fim-text);
}
.fim-select:hover { box-shadow: inset 0 0 0 2px var(--fim-blue); }

/* ---------- 6. Result ---------- */
.fim-result { padding: var(--fim-pad-y) var(--fim-pad-x); }
.fim-finder .fim-card .fim-result__title { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--fim-text); }
.fim-result__title:focus { outline: none; }
.fim-result__title:focus-visible { outline: var(--fim-focus); outline-offset: 4px; border-radius: 2px; }
.fim-finder .fim-card .fim-result__lead { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--fim-muted); }
.fim-finder .fim-card .fim-matches { display: grid; gap: 12px; margin-top: 16px; }

.fim-match {
  position: relative; display: grid; gap: 12px;
  padding: 18px 16px 16px;
  background: #fff; border-radius: var(--fim-radius);
  box-shadow: inset 0 0 0 1px var(--fim-line-strong);
}
.fim-match--best { padding-top: 46px; box-shadow: inset 0 0 0 3px var(--fim-blue); } /* = table highlight row */
.fim-ribbon {
  /* echoes .gss-list-badge: blue flag with angled end */
  position: absolute; top: 0; left: 0;
  padding: 7px 18px 7px 15px; min-height: 31px;
  background: var(--fim-blue); color: #fff;
  font-size: 15px; line-height: 17px; font-weight: 400;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  border-top-left-radius: var(--fim-radius);
}
.fim-match__top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.fim-rank {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fim-orange); color: var(--fim-on-orange);
  font-size: 22px; line-height: 40px; font-weight: 700;
}
.fim-logo {
  display: grid; place-items: center start; width: 100%; max-width: 156px; height: 56px;
}
.fim-logo img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; display: block; }
.fim-finder .fim-card .fim-match__name { margin: 0; }
.fim-finder .fim-card .fim-match__label { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--fim-text); margin-bottom: 4px; }
.fim-reasons { display: grid; gap: 6px; }
.fim-reasons li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 15px; line-height: 22px; }
.fim-reasons .fim-icon { color: var(--fim-ok); margin-top: 1px; }
.fim-finder .fim-match .fim-btn--cta { width: 100%; text-align: center; font-size: 16px; padding: 12px 14px; }
.fim-finder .fim-card .fim-note { margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--fim-muted); }
.fim-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }

/* Related list (no-fit): no ranking numbers, no "best" flag */
.fim-matches--related .fim-rank { display: none; }

/* No-fit */
.fim-nofit { padding: var(--fim-pad-y) var(--fim-pad-x); }
.fim-finder .fim-card .fim-nofit__text { margin-top: 6px; font-size: 16px; line-height: 24px; }

@container fim (min-width: 600px) {
  .fim-card { --fim-pad-x: 30px; }
  .fim-finder .fim-card .fim-step { min-height: 232px; }
  .fim-finder .fim-card .fim-step--short { min-height: 0; }
  .fim-options--2 { grid-template-columns: 1fr 1fr; }   /* only for exactly 4 options */
  .fim-match {
    grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "logo body" "logo cta";
    column-gap: 24px; row-gap: 14px; padding: 18px 20px 18px 24px;
  }
  .fim-match--best { padding-top: 46px; }
  .fim-match__top { display: contents; }
  .fim-match__top .fim-logo { grid-area: logo; align-self: center; justify-self: center; place-items: center; }
  .fim-match__top .fim-rank { position: absolute; left: -20px; top: 50%; margin-top: -20px; z-index: 2; }
  .fim-match__body { grid-area: body; }
  .fim-finder .fim-match .fim-btn--cta { grid-area: cta; justify-self: start; width: auto; }
}

/* ---------- 7. Sticky bar (mobile only; display:none from 768px up) ---------- */
.fim-bar {
  --fim-bar-h: 56px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; /* below the cookie notice (100000) */
  display: none;
  align-items: center; gap: 8px;
  height: calc(var(--fim-bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  background: #fff;
  box-shadow: 0 -1px 0 rgba(206, 206, 206, .7), 0 -5px 23px rgba(188, 207, 219, .5);
  font-family: inherit; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.25; color: var(--fim-text);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--fim-dur) var(--fim-ease), visibility 0s linear var(--fim-dur);
}
.fim-bar[data-fim-visible="true"] {
  transform: none; visibility: visible;
  transition: transform var(--fim-dur) var(--fim-ease), visibility 0s;
}
.fim-bar .fim-bar__text { display: grid; flex: 1; min-width: 0; margin: 0; padding: 0; }
.fim-bar__title { font-size: 16px; font-weight: 700; color: var(--fim-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fim-bar__sub { font-size: 13px; color: var(--fim-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fim-bar .fim-bar__go { min-height: 44px; padding: 10px 16px; font-size: 16px; }
.fim-bar__close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fim-muted); cursor: pointer;
}
.fim-bar__close:hover { background: var(--fim-tint); color: var(--fim-text); }

@media (max-width: 767.98px) {
  .fim-bar { display: flex; }
  /* The Cookie Notice plugin owns the bottom edge while it is open (it adds .cookie-notice-visible) */
  body:has(#cookie-notice.cookie-notice-visible) .fim-bar { display: none; }

  /* Focus not obscured (WCAG 2.4.11): JS adds .fim-has-bar on <html> while the bar is visible */
  html.fim-has-bar { scroll-padding-bottom: 72px; }
  html.fim-has-bar body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 8. Motion ---------- */
.fim-panel-enter { animation: fim-in var(--fim-dur) var(--fim-ease) both; }
@keyframes fim-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* :is() takes the highest specificity of its list (0,2,0 here) so this beats the
   (0,2,0) button and visible-bar transitions declared earlier. */
@media (prefers-reduced-motion: reduce) {
  :is(.fim-finder, .fim-bar[data-fim-visible]),
  :is(.fim-finder, .fim-bar) :is(*, .fim-btn, .fim-panel-enter) { transition: none; animation: none; }
}

/* ---------- 9. High contrast / forced colors ---------- */
@media (forced-colors: active) {
  .fim-card, .fim-option, .fim-match, .fim-select { box-shadow: none; border: 1px solid CanvasText; }
  .fim-option:has(input:checked) { border-width: 3px; }
  :is(.fim-finder, .fim-bar) .fim-btn { border: 2px solid ButtonText; }
  .fim-ribbon { clip-path: none; border: 1px solid CanvasText; }
  .fim-bar { border-top: 1px solid CanvasText; box-shadow: none; }
}

@media print { .fim-finder, .fim-bar { display: none; } }

/* ---------- 10. hidden always wins ----------
   Component rules such as `.fim-finder .fim-card .fim-error { display: flex }` (0,3,0) or
   `:is(.fim-finder,.fim-bar) .fim-btn { display: inline-flex }` (0,2,0) otherwise beat the UA
   [hidden] style and the (0,2,0) rule in section 2. Repeated selectors raise specificity to
   (0,4,0) without !important; this block stays last in the file. */
.fim-finder.fim-finder [hidden][hidden] { display: none; }