/* Equip Hire shared finder (plugin 1.222.0).
 *
 * WHY THIS FILE EXISTS. Eddie_Finder::shortcode() enqueued eh-finder.js and no
 * stylesheet, and nothing in either package defined a single .eh-finder-card,
 * -list, -why, -state or -none rule. So the one screen the whole brief turns on
 * - describe the job, get an explained shortlist - rendered as unstyled default
 * HTML: bulleted list items, browser-blue underlined links, no card, no state
 * colour, the reasons indistinguishable from the specifications.
 *
 * It went unnoticed because the theme DOES define .eh-finder-row, -chip, -select
 * and -count for the catalogue toolbar, which shares the prefix and is a
 * different component. Grepping the prefix finds those and looks like coverage.
 *
 * EVERY RULE IS SCOPED TO .eh-finder, the shortcode's own root. The catalogue
 * toolbar is not inside it, so the two cannot reach each other - and a bare
 * rule here would be exactly the leak that put the compare tray's list styling
 * onto the comparison articles in 1.185.4.
 *
 * Tokens carry literal fallbacks: this plugin has to look right on a site that
 * is not running the Equip Hire theme.
 */

.eh-finder{--f-pine:var(--eh-pine,#1A4A33);--f-red:var(--eh-red,#D81226);--f-hivis:var(--eh-hivis,#F2C300);--f-ink:var(--eh-ink,#161817);--f-slate:var(--eh-slate,#4a5350);--f-line:var(--eh-border,#E0DED4);--f-paper:var(--eh-paper,#F4F3EE);--f-radius:12px}
.eh-finder{display:block}
/* box-sizing is NOT assumed. The theme's reset sets it, and this plugin has to
   survive a site that does not: without it the state pill's flex-basis of 100%
   plus its 16px side padding made the pill 32px WIDER than the card it sits in,
   which the harness caught at both widths (848px of 818px, and 420 of 388 on a
   phone). Scoped to the component, so it cannot alter anything outside it. */
.eh-finder,.eh-finder *,.eh-finder *::before,.eh-finder *::after{box-sizing:border-box}
.eh-finder .eh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the question form ---------- */
.eh-finder-head h2{margin:0 0 8px;line-height:1.15}
.eh-finder-head p{margin:0 0 20px;max-width:68ch;font-size:15.5px;line-height:1.6;color:var(--f-slate)}
.eh-finder-form{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 18px;padding:18px;border:1px solid var(--f-line);border-radius:var(--f-radius);background:#fff}
.eh-finder-field{margin:0;padding:0;border:0;min-width:0}
.eh-finder-field>label,.eh-finder-field>legend{display:block;margin:0 0 7px;padding:0;font-weight:600;font-size:14.5px;line-height:1.35;color:var(--f-ink)}
.eh-finder-field input[type=number],.eh-finder-field select{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--f-line);border-radius:9px;background:#fff;color:var(--f-ink);font:inherit;font-size:16px}
.eh-finder-field input[type=number]:focus-visible,.eh-finder-field select:focus-visible,.eh-finder button:focus-visible,.eh-finder a:focus-visible,.eh-finder summary:focus-visible{outline:3px solid var(--f-hivis);outline-offset:2px}
/* A unit belongs beside the number it applies to, and it is never the only label. */
.eh-finder-unit{display:flex;align-items:stretch;gap:0}
.eh-finder-unit input[type=number]{border-radius:9px 0 0 9px}
.eh-finder-unit>span,.eh-finder-unit>abbr{display:inline-flex;align-items:center;padding:0 13px;border:1px solid var(--f-line);border-left:0;border-radius:0 9px 9px 0;background:var(--f-paper);font-weight:600;font-size:14px;color:var(--f-slate);text-decoration:none}
.eh-finder-seg{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;border:0}
.eh-finder-seg label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;border:1px solid var(--f-line);border-radius:999px;background:#fff;font-size:14px;line-height:1.3;cursor:pointer}
.eh-finder-seg label:has(input:checked){border-color:var(--f-pine);background:#E7EFE9;font-weight:600}
.eh-finder-field--checks{display:grid;gap:8px}
.eh-finder-field--checks label{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:11px 13px;border:1px solid var(--f-line);border-radius:10px;background:#fff;font-size:14.5px;line-height:1.4;cursor:pointer}
.eh-finder-field--checks label:has(input:checked){border-color:var(--f-pine);background:#E7EFE9}
.eh-finder-field input[type=radio],.eh-finder-field input[type=checkbox]{flex:none;width:20px;height:20px;margin:0;accent-color:var(--f-pine)}
/* The one input that would most change the list, named by the server. */
.eh-finder-field--next{position:relative;padding:12px;margin:-12px;border-radius:10px;background:#FFFBEA;box-shadow:inset 0 0 0 2px var(--f-hivis)}
.eh-finder-submit{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.eh-finder-next{margin:0 0 10px;font-weight:600;font-size:15px;line-height:1.5;color:var(--f-pine)}
.eh-finder-next:empty{display:none}
.eh-finder-status{margin:0 0 10px;font-size:14px;color:var(--f-slate)}
.eh-finder-status:empty{display:none}
/* The results container. scroll-margin keeps it clear of the sticky header when
   a keyboard user or an in-page link lands on it. */
.eh-finder-out{scroll-margin-top:96px}
.eh-finder-out:empty{display:none}
/* Reach only matters once "something is in the way" is ticked. Nothing hides it
   - a hidden required figure is worse than an extra one - but it reads as the
   follow-on question it is. */
.eh-finder-field--reach{padding-left:14px;border-left:3px solid var(--f-line)}
.eh-finder-foot{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--f-slate);max-width:78ch}
.eh-finder-err{margin:0;padding:14px 16px;border:1px solid var(--f-line);border-left:5px solid var(--f-red);border-radius:10px;background:#fff;font-size:14.5px;line-height:1.55}

/* ---------- the shortlist ---------- */
.eh-finder-h{margin:22px 0 10px;font-size:19px;line-height:1.25}
.eh-finder-list{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;list-style:none}
/* The card is a WRAPPING FLEX ROW, not a grid with a fixed image column, and
   the state pill is IN FLOW as a full-width band. Both of those are deliberate
   after the first cut of this file shipped two constructs that fail silently:
   an absolutely-positioned pill with no padding reserved on the content it
   covered (a long machine name ran underneath it), and a lone `:not(:has(>img))`
   rule as the only thing stopping a photo-less card being squeezed into the
   170px image column - and the photo-less records are exactly the sparse ones
   the audit named. Flex wrapping needs neither: with no image the body simply
   takes the row. */
.eh-finder-card{display:flex;flex-wrap:wrap;align-items:stretch;margin:0;padding:0;border:1px solid var(--f-line);border-radius:var(--f-radius);background:#fff;overflow:hidden}
.eh-finder-card>img{flex:1 0 100%;display:block;width:100%;height:150px;object-fit:contain;padding:10px;box-sizing:border-box;background:var(--f-paper)}
.eh-finder-body{flex:1 1 100%;min-width:0;padding:14px 16px 16px}
.eh-finder-body h3{margin:0 0 4px;font-size:17px;line-height:1.25}
.eh-finder-body h3 a{color:var(--f-ink);text-decoration:none}
.eh-finder-body h3 a:hover{color:var(--f-pine);text-decoration:underline}
.eh-finder-specs{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--f-slate)}

/* The state is a word first and a colour second: colour alone must not carry it.
   Full-width band on its own flex line at every width, so it cannot overlap the
   machine name however long that name is. */
.eh-finder-state{flex:1 0 100%;display:block;padding:8px 16px;font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;line-height:1.3;color:#fff;background:var(--f-slate)}
.eh-finder-card--fit .eh-finder-state{background:var(--f-pine)}
.eh-finder-card--possible .eh-finder-state{background:#7a5c00}
.eh-finder-card--no .eh-finder-state{background:#6b3038}

.eh-finder-why,.eh-finder-confirm{margin:0 0 12px;padding:0 0 0 20px;font-size:14px;line-height:1.55;color:var(--f-ink)}
.eh-finder-why li,.eh-finder-confirm li{margin:0 0 5px}
.eh-finder-why{list-style:none;padding-left:0}
.eh-finder-why li{position:relative;padding-left:19px}
.eh-finder-why li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--f-pine)}
.eh-finder-card--no .eh-finder-why li::before{background:#6b3038}
.eh-finder-confirm{list-style:none;padding-left:0}
.eh-finder-confirm li{position:relative;padding-left:19px;color:#5a4300}
.eh-finder-confirm li::before{content:"?";position:absolute;left:0;top:0;font-weight:800;color:#7a5c00}
.eh-finder-actions{display:flex;flex-wrap:wrap;gap:9px}

/* ---------- nothing fits ---------- */
.eh-finder-none{margin:18px 0 14px;padding:18px 20px;border:1px solid var(--f-line);border-left:5px solid var(--f-hivis);border-radius:var(--f-radius);background:#fff}
.eh-finder-none-lead{margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--f-ink)}
.eh-finder-none-lead b{color:var(--f-ink)}
.eh-finder-none-keep{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:var(--f-slate)}
.eh-finder-none-routes{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.eh-finder-none-routes li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--f-ink)}
.eh-finder-none-routes li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--f-hivis)}

/* ---------- the exclusions ---------- */
.eh-finder-excl{margin:16px 0 0;border:1px solid var(--f-line);border-radius:var(--f-radius);background:#fff}
.eh-finder-excl>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:13px 18px;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;line-height:1.35;color:var(--f-ink)}
.eh-finder-excl>summary::-webkit-details-marker{display:none}
.eh-finder-excl-n{flex:none;font-weight:700;font-size:12.5px;letter-spacing:.04em;color:#6b3038;background:#F6E7E9;border-radius:999px;padding:5px 11px}
.eh-finder-excl[open]>summary{border-bottom:1px solid var(--f-line)}
.eh-finder-excl .eh-finder-list{padding:14px 16px 16px}
/* An excluded machine is information, not an offer: quieter ground, and its
   name is still a real link to the record. */
.eh-finder-list--no .eh-finder-card{background:var(--f-paper)}
.eh-finder-list--no .eh-finder-card>img{opacity:.72}

@media(min-width:720px){
  .eh-finder-form{grid-template-columns:1fr 1fr;gap:18px 20px;padding:22px}
  .eh-finder-field--wide,.eh-finder-field--checks,.eh-finder-submit{grid-column:1/-1}
  .eh-finder-card>img{flex:0 0 170px;width:170px;height:auto;min-height:132px}
  .eh-finder-body{flex:1 1 0;padding:18px 20px 20px}
}
@media(prefers-reduced-motion:reduce){.eh-finder *{transition:none!important;animation:none!important}}
