/* ==========================================================================
   PLOTNUA MAKER EXPLORER · SHARED COMPONENT v1 · styles
   ==========================================================================
   PINNED by atlas-tools/build-maker-explorer.py AND by
   atlas-tools/build-provider-explorer.py (sha256); do not hand-edit without
   re-pinning both. Uses the host Discovery page's own tokens, which both
   builders require the page to define: --paper --cream --ink --soft --accent --oak.
   Moved verbatim from the inline block on Living in the Garden (13 Oct 2026).

   SHARED BY TWO EXPLORERS (founder approval, 13 Oct 2026). Every rule is
   scoped to :is(#explore-makers, #explore-providers). :is() takes the
   specificity of its most specific argument, an id, so each rule has exactly
   the specificity it had as #explore-makers: the Maker Explorer renders
   pixel-identically (proved by the 10-state parity capture). Rules that only
   the Provider Explorer uses are at the end, scoped to #explore-providers. */
:is(#explore-makers, #explore-providers) .mx-figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:30px;
  border-top:2px solid rgba(31,59,46,.55); }
:is(#explore-makers, #explore-providers) .mx-figs > div{ padding:16px 16px 4px 0; }
:is(#explore-makers, #explore-providers) .mx-figs > div + div{ padding-left:16px; border-left:1px solid rgba(31,59,46,.13); }
:is(#explore-makers, #explore-providers) .mx-fig{ display:block; font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:clamp(30px,3.6vw,42px); line-height:1; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
:is(#explore-makers, #explore-providers) .mx-fig-l{ display:block; margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--soft); }
:is(#explore-makers, #explore-providers) .mx{ margin-top:26px; background:var(--paper); border:1px solid rgba(31,59,46,.12);
  border-radius:3px; box-shadow:0 1px 2px rgba(31,59,46,.05), 0 16px 32px -24px rgba(31,59,46,.32); }
:is(#explore-makers, #explore-providers) .mx-tabs{ display:flex; border-bottom:1px solid rgba(31,59,46,.12); }
:is(#explore-makers, #explore-providers) .mx-tab{ flex:1; appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  margin-bottom:-1px; padding:15px 10px 13px; cursor:pointer; font:500 14.5px 'Work Sans',sans-serif;
  color:var(--soft); display:flex; gap:8px; justify-content:center; align-items:baseline; }
:is(#explore-makers, #explore-providers) .mx-n{ font-size:12px; font-variant-numeric:tabular-nums; }
:is(#explore-makers, #explore-providers) .mx-tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--ink); }
:is(#explore-makers, #explore-providers) .mx-tab:focus-visible, :is(#explore-makers, #explore-providers) .mx-maker:focus-visible,
:is(#explore-makers, #explore-providers) .mx-chip:focus-visible, :is(#explore-makers, #explore-providers) .mx-btn:focus-visible,
:is(#explore-makers, #explore-providers) .mx-find:focus-visible, :is(#explore-makers, #explore-providers) a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
:is(#explore-makers, #explore-providers) .mx-pane{ padding:18px 20px 20px; }
:is(#explore-makers, #explore-providers) p.mx-line{ font-size:14px; line-height:1.65; color:var(--soft); margin:0 0 12px; max-width:none; }
:is(#explore-makers, #explore-providers) .mx-line strong{ color:var(--ink); font-weight:600; }
:is(#explore-makers, #explore-providers) .mx-legend{ display:flex; flex-wrap:wrap; gap:4px 16px; list-style:none; margin:0 0 14px; padding:0;
  font-size:12.5px; color:var(--soft); }
:is(#explore-makers, #explore-providers) .mx-dot{ display:inline-block; flex:none; width:9px; height:9px; border-radius:50%; margin-right:6px; }
:is(#explore-makers, #explore-providers) .mx-c{ background:var(--accent); }
:is(#explore-makers, #explore-providers) .mx-s{ background:linear-gradient(90deg,var(--accent) 50%,transparent 50%); box-shadow:inset 0 0 0 1.5px var(--accent); }
:is(#explore-makers, #explore-providers) .mx-u{ box-shadow:inset 0 0 0 1.5px #7A7F78; }
:is(#explore-makers, #explore-providers) .mx-r{ box-shadow:inset 0 0 0 1.5px var(--oak);
  background:repeating-linear-gradient(45deg,transparent 0 2px,rgba(139,111,78,.55) 2px 3px); }
:is(#explore-makers, #explore-providers) .mx-tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
:is(#explore-makers, #explore-providers) .mx-tools[hidden], :is(#explore-makers, #explore-providers) .mx-chips[hidden]{ display:none; }
:is(#explore-makers, #explore-providers) .mx-find{ flex:1 1 200px; min-width:0; border:1px solid rgba(31,59,46,.15); background:#fff;
  border-radius:3px; padding:9px 12px; font:400 14px 'Work Sans',sans-serif; color:var(--ink); }
:is(#explore-makers, #explore-providers) .mx-chips{ display:flex; gap:6px; flex-wrap:wrap; }
:is(#explore-makers, #explore-providers) .mx-chip{ appearance:none; border:1px solid rgba(31,59,46,.15); background:var(--cream); color:var(--ink);
  border-radius:999px; padding:6px 12px; font:500 12.5px 'Work Sans',sans-serif; cursor:pointer; }
:is(#explore-makers, #explore-providers) .mx-chip[aria-pressed="true"]{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
:is(#explore-makers, #explore-providers) .mx-order{ font-size:12px; line-height:1.55; color:var(--soft); margin:0 0 10px; max-width:none; }
:is(#explore-makers, #explore-providers) .mx-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
:is(#explore-makers, #explore-providers) .mx-maker{ width:100%; text-align:left; appearance:none; cursor:pointer; background:var(--cream);
  border:1px solid rgba(31,59,46,.12); border-radius:3px; padding:11px 13px; display:flex; gap:10px; align-items:center;
  font-family:'Work Sans',sans-serif; color:var(--ink); }
:is(#explore-makers, #explore-providers) .mx-maker:hover{ border-color:rgba(31,59,46,.35); }
:is(#explore-makers, #explore-providers) .mx-maker[aria-expanded="true"]{ border-color:var(--ink); }
:is(#explore-makers, #explore-providers) .mx-nm{ flex:1; min-width:0; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:15px; line-height:1.25; }
:is(#explore-makers, #explore-providers) .mx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:is(#explore-makers, #explore-providers) .mx-ct{ font-size:12px; color:var(--soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
:is(#explore-makers, #explore-providers) .mx-drawer{ grid-column:1/-1; background:var(--cream); border:1px solid rgba(31,59,46,.12);
  border-left:2px solid var(--accent); border-radius:2px; padding:14px 16px 12px; }
:is(#explore-makers, #explore-providers) .mx-drawer h3{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:0 0 3px; }
:is(#explore-makers, #explore-providers) .mx-meta{ font-size:12.5px; color:var(--soft); margin:0 0 8px; }
:is(#explore-makers, #explore-providers) .mx-plist{ list-style:none; margin:0; padding:0; max-height:300px; overflow:auto;
  border-top:1px solid rgba(31,59,46,.12); }
:is(#explore-makers, #explore-providers) .mx-plist li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:9px 2px;
  border-bottom:1px solid rgba(31,59,46,.1); }
:is(#explore-makers, #explore-providers) .mx-pn{ font-size:14px; line-height:1.4; color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(79,107,74,.3); justify-self:start; }
:is(#explore-makers, #explore-providers) .mx-pn:hover{ border-bottom-color:var(--accent); }
:is(#explore-makers, #explore-providers) .mx-pn-text{ font-size:14px; line-height:1.4; color:var(--ink); }
:is(#explore-makers, #explore-providers) .mx-route-note{ margin:10px 0 4px; }
:is(#explore-makers, #explore-providers) .mx-route{ display:inline-block; font-size:14px; font-weight:500; color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(79,107,74,.35); padding-bottom:1px; }
:is(#explore-makers, #explore-providers) .mx-pt{ grid-column:1; font-size:12px; color:var(--soft); }
:is(#explore-makers, #explore-providers) .mx-st{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:11.5px; color:var(--soft);
  white-space:nowrap; display:flex; align-items:center; }
:is(#explore-makers, #explore-providers) .mx-more{ margin-top:12px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
:is(#explore-makers, #explore-providers) .mx-more .mx-order{ margin:0; }
:is(#explore-makers, #explore-providers) .mx-top{ margin:0 0 12px; }
:is(#explore-makers, #explore-providers) .mx{ scroll-margin-top:96px; }
:is(#explore-makers, #explore-providers) .mx-btn{ appearance:none; background:none; border:0; padding:0 0 2px; cursor:pointer;
  font:500 14px 'Work Sans',sans-serif; color:var(--accent); border-bottom:1px solid rgba(79,107,74,.35); }
:is(#explore-makers, #explore-providers) .mx-empty{ font-size:13.5px; color:var(--soft); padding:8px 0; }
:is(#explore-makers, #explore-providers) p.mx-foot{ margin-top:14px; font-size:12px; line-height:1.6; color:var(--soft); max-width:62ch; }
@media (max-width:720px){
  :is(#explore-makers, #explore-providers) .mx-figs > div{ padding:14px 10px 4px 0; }
  :is(#explore-makers, #explore-providers) .mx-figs > div + div{ padding-left:10px; }
  :is(#explore-makers, #explore-providers) .mx-fig-l{ font-size:11.5px; }
  :is(#explore-makers, #explore-providers) .mx-grid{ grid-template-columns:1fr; }
  :is(#explore-makers, #explore-providers) .mx-pane{ padding:14px 14px 16px; }
  :is(#explore-makers, #explore-providers) .mx-tab{ flex-direction:column; align-items:center; gap:2px; padding:11px 6px; }
}
/* ---- Provider Explorer only (The Borrowed Garden). Providers are never
   ranked, never linked and never shown as partners; the ring marks "researched". */
#explore-providers .px-ring{ display:inline-block; flex:none; width:9px; height:9px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--accent); }
#explore-providers .mx-legend .px-ring{ margin-right:7px; vertical-align:-1px; }
#explore-providers .px-kind{ display:block; margin-top:3px; font-family:'Work Sans',sans-serif; font-weight:400;
  font-size:13px; line-height:1.45; color:var(--soft); letter-spacing:0; }
#explore-providers .px-status{ font-size:12px; color:var(--soft); white-space:nowrap; }
#explore-providers .px-facts{ margin:10px 0 0; display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 18px; }
#explore-providers .px-facts dt{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); padding-top:3px; }
#explore-providers .px-facts dd{ margin:0; font-size:15px; line-height:1.6; color:var(--ink); }
#explore-providers .px-rel{ margin:12px 0 0; padding-top:10px; border-top:1px solid rgba(31,59,46,.12);
  font-size:13.5px; line-height:1.55; color:var(--soft); }
@media (max-width:600px){
  #explore-providers .px-facts{ grid-template-columns:1fr; gap:2px; }
  #explore-providers .px-facts dd{ margin-bottom:10px; }
  #explore-providers .px-status{ display:none; }
}
/* ---- AUTHORISED IMAGERY ON THE DIRECTORY (16 Oct 2026, founder approval
   to build "Authorised imagery integration"). A maker tile may lead with one
   of its own product images; open makers show their product images larger.
   Images are never cropped: object-fit is contain, on the paper ground, so
   every grant's "shown as supplied" holds. Scoped to the Maker Explorer only. */
#explore-makers .mx-maker.mx-maker-img{ display:grid; grid-template-columns:104px auto minmax(0,1fr) auto;
  grid-template-areas:"lead dot nm ct" "lead cap cap cap"; align-items:center; column-gap:10px; row-gap:2px;
  padding:8px 13px 8px 8px; }
#explore-makers .mx-maker-img .mx-lead{ grid-area:lead; display:block; width:104px; aspect-ratio:4/3;
  background:var(--paper); border-radius:2px; overflow:hidden; }
#explore-makers .mx-maker-img .mx-lead img{ display:block; width:100%; height:100%; object-fit:contain; }
#explore-makers .mx-maker-img .mx-dot{ grid-area:dot; align-self:end; margin:0 0 5px; }
#explore-makers .mx-maker.mx-maker-img:not(:has(.mx-dot)){ grid-template-columns:104px minmax(0,1fr) auto;
  grid-template-areas:"lead nm ct" "lead cap cap"; }
#explore-makers .mx-maker-img .mx-nm{ grid-area:nm; align-self:end; }
#explore-makers .mx-maker-img .mx-ct{ grid-area:ct; align-self:end; }
#explore-makers .mx-maker-img .mx-lead-cap{ grid-area:cap; align-self:start; font-size:10.5px; line-height:1.35;
  letter-spacing:.04em; color:var(--soft); }
#explore-makers .mx-plist.mx-plist-img{ max-height:min(70vh, 720px); }
#explore-makers .mx-plist li .mx-imgs{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px; margin:10px 0 4px; }
#explore-makers .mx-plist .mx-img{ margin:0; width:auto; }
#explore-makers .mx-plist .mx-img img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain;
  background:var(--paper); border-radius:2px; }
#explore-makers .mx-plist .mx-img figcaption{ margin-top:5px; font-size:11.5px; line-height:1.4; color:var(--soft); }
#explore-makers .mx-plist .mx-img-kind{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
#explore-makers .mx-plist .mx-img figcaption a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:720px){
  #explore-makers .mx-plist li .mx-imgs{ grid-template-columns:1fr; }
  #explore-makers .mx-maker.mx-maker-img{ grid-template-columns:76px auto minmax(0,1fr) auto; }
  #explore-makers .mx-maker.mx-maker-img:not(:has(.mx-dot)){ grid-template-columns:76px minmax(0,1fr) auto; }
  #explore-makers .mx-maker-img .mx-lead{ width:76px; }
}
/* PLOTNUA MAKER EXPLORER · SHARED COMPONENT v1 · END */