/* RFMB — a recognition route alongside ordinary search. */
[data-visual-finder] { min-width: 0; margin-block: 20px; }
.visual-finder { border: 1px solid #c3d3c7; border-radius: 9px; background: #fff; color: #142d40; }
.visual-finder > summary { display: flex; align-items: center; gap: 15px; min-height: 82px; padding: 17px 20px; cursor: pointer; list-style: none; border-radius: 8px; }
.visual-finder > summary::-webkit-details-marker { display: none; }
.visual-finder > summary:hover { background: #f1f5ee; }
.vf-summary-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 7px; background: #eaf0e4; color: #315e48; }
.vf-summary-icon .vf-drawing { width: 43px; height: 35px; }
.vf-summary-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vf-summary-copy strong { font-size: 17px; line-height: 1.5; font-weight: 600; }
.vf-summary-copy > span { font-size: 14px; line-height: 1.65; color: #526772; }
.vf-summary-chevron { flex-shrink: 0; margin-left: auto; font-size: 25px; line-height: 1; }
.visual-finder[open] > summary { border-bottom: 1px solid #d7e1d8; border-radius: 8px 8px 0 0; background: #f2f6ee; }
.visual-finder[open] > summary .vf-summary-chevron { transform: rotate(180deg); }
.vf-content { padding: 22px; }
.vf-heading { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.35px; line-height: 1.4; }
.vf-intro { margin: 7px 0 18px; font-size: 15px; line-height: 1.7; color: #526772; }
.vf-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.vf-choice { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 150px; padding: 13px 16px 16px; text-align: left; border: 1px solid #c9d7ce; border-radius: 7px; background: #f5f8f2; color: #142d40; }
.vf-choice:hover { border-color: #7e9dc7; background: #edf3fc; }
.vf-drawing { display: block; width: 112px; max-width: 100%; height: 88px; color: #567295; flex-shrink: 0; }
.vf-fill { fill: #dce8fa; }
.vf-cutout { fill: #fff; }
.vf-muted-fill { fill: #edf2e9; stroke: #839c8b; }
.vf-emphasis { stroke: #2455c9; stroke-width: 4; }
.vf-choice > .vf-drawing { align-self: center; margin-bottom: 9px; }
.vf-choice > strong { font-size: 16px; line-height: 1.5; font-weight: 600; }
.vf-choice > span { font-size: 14px; line-height: 1.65; color: #526772; margin-top: 4px; }
.vf-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; font-size: 14px; color: #2455c9; margin: -4px 0 12px; text-decoration: underline; text-underline-offset: 4px; }
.vf-back > span { font-size: 20px; }
.vf-results-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.vf-result { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid #cad8ce; border-radius: 7px; background: #fff; }
.vf-result:hover { border-color: #7e9dc7; box-shadow: 0 0 0 1px #7e9dc7; }
.vf-result-drawing { display: grid; place-items: center; padding: 12px; background: #f1f5ee; border-radius: 6px 6px 0 0; }
.vf-result-drawing > .vf-drawing { width: 170px; height: 120px; }
.vf-result-copy { display: flex; flex-direction: column; flex: 1; padding: 19px; }
.vf-result-meta { font-size: 14px; line-height: 1.6; color: #466a57; }
.vf-result-title { font-size: 19px; line-height: 1.4; font-weight: 600; margin-top: 9px; }
.vf-result-aliases { font-size: 14px; color: #526772; line-height: 1.7; margin-top: 9px; }
.vf-result-description { font-size: 15px; line-height: 1.75; margin-top: 12px; }
.vf-result-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; line-height: 1.5; color: #2455c9; padding-top: 18px; margin-top: auto; }
.vf-result-action > span { font-size: 21px; }
.vf-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px 28px; border-top: 1px solid #dce5dc; margin-top: 23px; padding-top: 13px; }
.vf-footer > p { max-width: 48ch; margin: 0; font-size: 14px; line-height: 1.7; color: #526772; }
.vf-footer > button { min-height: 44px; padding: 7px 0; font-size: 14px; line-height: 1.6; color: #315e48; text-decoration: underline; text-underline-offset: 4px; }
.visual-finder :is(summary,button,a):focus-visible { outline: 3px solid #a9661e; outline-offset: 3px; }
.visual-finder > summary:focus-visible { outline-offset: -4px; }
.vf-heading:focus { outline: none; }
.visual-finder > summary,.vf-heading,.vf-choice { scroll-margin-top: calc(var(--rfmb-header-height,97px) + 24px); }
@media (max-width: 720px) {
  [data-visual-finder] { margin-block: 17px; }
  .visual-finder > summary { padding: 16px; gap: 12px; }
  .vf-summary-icon { width: 40px; height: 44px; }
  .vf-summary-icon .vf-drawing { width: 37px; }
  .vf-summary-copy strong { font-size: 16px; }
  .vf-content { padding: 18px; }
  .vf-choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .vf-choice { padding: 11px 12px 14px; min-height: 146px; }
  .vf-choice > .vf-drawing { height: 75px; margin-bottom: 7px; }
  .vf-results-grid { grid-template-columns: minmax(0,1fr); }
  .vf-result-drawing > .vf-drawing { width: 150px; height: 105px; }
  .vf-result-copy { padding: 18px; }
  .vf-footer { display: block; padding-top: 15px; }
  .vf-footer > button { margin-top: 5px; }
}
@media (max-width: 390px) {
  .visual-finder > summary { gap: 9px; padding: 15px 13px; }
  .vf-summary-icon { display: none; }
  .vf-content { padding: 16px 13px; }
  .vf-choice { padding-inline: 10px; }
  .vf-choice > strong { font-size: 15px; }
}
@media print { [data-visual-finder] { display: none !important; } }