/* ---------------------------------------------------------------------------
   The equipment catalogue (assets/js/equip-catalogue.js).

   Three surfaces: the picker under "Named equipment and model" in the plan editor
   (.kitp), the "Equipment named in this plan" section a care team reads (.kit), and the
   Equipment page, which opens on the catalogue as a photo grid (.eqx). The grid follows
   the shape of a maker's own product listing: outlined chips, a count, square white
   tiles with the photo contained, the name underneath.

   Its own sheet, so a restyle of plans.css or equipment.css does not have to know it.
   ------------------------------------------------------------------------- */

/* ---- the picker -------------------------------------------------------- */
.kitp{margin:6px 0 2px}
.kitp__open{font:inherit;font-size:13px;color:#0F5740;background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kitp__got{margin:2px 0 0;font-size:12.5px;color:#55595f;line-height:1.45}
.kitp__got:empty{display:none}
.kitp__panel{margin-top:6px;border:1px solid #d2d2d7;border-radius:12px;padding:10px;background:#fff}
.kitp__q{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px 10px;border:1px solid #d2d2d7;border-radius:8px}
.kitp__hint{margin:8px 2px 6px;font-size:12px;color:#6e6e73}
.kitp__list{max-height:300px;overflow:auto}
.kitp__list button{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;border-top:1px solid #ececf0;padding:8px 4px;cursor:pointer}
.kitp__list button:hover,.kitp__list button:focus-visible{background:#f2f7f4}
.kitp__list b{display:block;font-size:14px;font-weight:600;color:#1d1d1f}
.kitp__list span{display:block;font-size:12px;color:#6e6e73}

/* ---- the care team's plan ----------------------------------------------- */
.kit{margin:18px 0}
.kit h3{margin:0 0 8px}
.kit__list li,.eqc__list li{padding:10px 0;border-top:1px solid #ececf0}
.kit__name,.kit__load,.kit__links{margin:0}
.kit__name span{color:#6e6e73;font-size:.92em}
.kit__load{font-size:.92em;color:#3a3a3c;margin-top:2px}
.kit__links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;font-size:.92em}
.kit__links a{color:#0F5740;text-underline-offset:3px}
.kit__none{color:#6e6e73}
.kit__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kit__foot{margin:8px 0 0;font-size:12px;color:#6e6e73;line-height:1.5}
.eqc{margin-top:8px;font-size:13px}
.eqc summary{cursor:pointer;color:#0F5740}
.eqc__list{margin-top:6px;max-height:340px;overflow:auto}

/* Theme sheets style every ul in a plan document and the workspace; these lists are not
   bulleted, so the reset has to outrank them. */
ul.kit__list,ul.eqc__list,ul.kitp__list,ul.eqx__grid{list-style:none!important;padding:0!important;margin-left:0!important}
ul.kit__list>li,ul.eqc__list>li,ul.kitp__list>li,ul.eqx__grid>li{list-style:none!important;margin-left:0!important}

/* ---- the Equipment page ------------------------------------------------- */
/* The catalogue is the page; the equipment types the plans name sit behind their own
   chip. Until the script has drawn the grid the types stay out of sight, so the page
   does not show one layout and then swap to another. */
.eq[data-eqx]:not(.is-types)>.eq__bar,
.eq[data-eqx]:not(.is-types)>.eq__grid,
.eq[data-eqx]:not(.is-types)>.eq__none{display:none}

.eqx{padding-top:clamp(18px,3vw,32px);color:#1d1d1f}
.eqx *{box-sizing:border-box}
.eqx__head h2{margin:0;font-size:clamp(26px,3.4vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:#1d1d1f}
.eqx__head p{margin:8px 0 0;max-width:680px;font-size:15px;line-height:1.5;color:#55595f}

.eqx__chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.eqx__chip{font:inherit;font-size:14px;font-weight:600;line-height:20px;color:#55595f;background:#fff;border:1.5px solid #8a8d91;border-radius:8px;padding:8px 20px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.eqx__chip:hover{border-color:#55595f;color:#1d1d1f}
.eqx__chip.is-on{background:#6e7175;border-color:#6e7175;color:#fff}
.eqx__chip:focus-visible{outline:2px solid #0F5740;outline-offset:2px}
.eqx__chip--types{border-style:dashed}

.eqx__tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 0}
.eqx__tools[hidden]{display:none}
.eqx__find{display:flex;align-items:center;gap:8px;flex:1 1 240px;max-width:360px;height:40px;padding:0 14px;background:#fff;border:1px solid #d2d2d7;border-radius:980px}
.eqx__find:focus-within{border-color:#0F5740;box-shadow:0 0 0 1px #0F5740}
.eqx__find svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#6e6e73;stroke-width:1.9;stroke-linecap:round}
.eqx__find input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:14px;color:#1d1d1f}
.eqx__sel{display:flex;align-items:center;gap:8px;font-size:13px;color:#6e6e73}
.eqx__sel span{flex:0 0 auto;white-space:nowrap}
.eqx__sel select{font:inherit;font-size:14px;color:#1d1d1f;height:40px;max-width:220px;padding:0 10px;border:1px solid #d2d2d7;border-radius:8px;background:#fff}
.eqx__tick{display:flex;align-items:center;gap:6px;font-size:14px;color:#1d1d1f;cursor:pointer}
.eqx__count{margin:0 0 0 auto;font-size:14px;color:#55595f;white-space:nowrap}

.eqx__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:34px 24px;margin:24px 0 0!important}
.eqx__card{display:flex;flex-direction:column;min-width:0}
.eqx__link{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.eqx__tile{position:relative;display:grid;place-items:center;aspect-ratio:1/1;background:#fff;border:1px solid #e1e3e6;overflow:hidden;transition:border-color .15s ease}
.eqx__link:hover .eqx__tile{border-color:#8a8d91}
.eqx__link:focus-visible{outline:2px solid #0F5740;outline-offset:3px}
.eqx__tile img{grid-area:1/1;width:88%;height:88%;object-fit:contain}
.eqx__nophoto{grid-area:1/1;font-size:12px;color:#8a8d91;text-align:center;padding:0 12px}
.eqx__tile img+.eqx__nophoto{display:none}
.eqx__badge{position:absolute;left:10px;top:10px;font-size:11px;font-weight:600;letter-spacing:.02em;color:#0F5740;background:#eef5f1;border-radius:6px;padding:3px 7px}
.eqx__name{margin-top:12px;font-size:15px;line-height:1.35;color:#1d1d1f}
.eqx__link:hover .eqx__name{text-decoration:underline;text-underline-offset:3px}
.eqx__maker{margin-top:3px;font-size:13px;line-height:1.35;color:#6e6e73}
.eqx__load{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:#55595f}
.eqx__ifu{align-self:flex-start;margin-top:6px;font-size:13px;color:#0F5740;text-underline-offset:3px}
.eqx__none{margin:28px 0 0;color:#6e6e73}
.eqx__more{display:flex;justify-content:center;min-height:1px;margin:36px 0 8px}
.eqx__more button{font:inherit;font-size:15px;font-weight:600;color:#1d1d1f;background:#fff;border:1.5px solid #8a8d91;border-radius:8px;padding:10px 28px;cursor:pointer}
.eqx__more button:hover{border-color:#1d1d1f}
.eqx__more button[hidden]{display:none}
/* While loading is automatic, the button is for keyboard use only: out of sight until focused. */
.eqx.is-auto .eqx__more button:not(:focus){position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The note under the Equipment page sits centred under the grid. */
.eq[data-eqx] .eq__foot{max-width:72ch;margin-left:auto;margin-right:auto;text-align:center}

@media (max-width:640px){
  .eqx__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  /* One row that scrolls sideways, as on the makers' own listings, rather than six rows
     of chips before the first product. */
  .eqx__chips{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--eq-pad,16px) * -1);margin-right:calc(var(--eq-pad,16px) * -1);padding:2px var(--eq-pad,16px) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* Without this the row's full length counts as the page's minimum width, and inside a
       flex or grid parent the whole view widens to fit it. */
    width:0;min-width:calc(100% + var(--eq-pad,16px) * 2)}
  .eqx__chips::-webkit-scrollbar{display:none}
  .eqx__chip{flex:0 0 auto;padding:7px 14px;font-size:13px}
  .eqx__sel{flex:1 1 100%}
  .eqx__sel select{flex:1 1 auto;max-width:none}
  .eqx__find{max-width:none;flex-basis:100%}
  .eqx__count{margin-left:0;width:100%}
  .eqx__name{font-size:14px}
}

@media print{
  .kitp{display:none}
  .kit__links a::after{content:" " attr(href);font-size:8.5pt;color:#444;word-break:break-all}
  .kit__vh{display:none}
}