/* market-opportunities.css - the /opportunities/ destination.
   Tokens come from market.css (--mk-gold --mk-ground --mk-text --mk-mute --mk-hair --mk-ink --mk-gap); every use
   carries a hex fallback so the page is legible even if the base sheet has not landed. 390px first, no framework,
   no animation runtime, nothing under 12px, 44px tap targets. */

.mk-opp-page .mko-tabs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 0;margin:0 0 12px}
.mko-tab{scroll-snap-align:start;min-height:44px;padding:0 14px;font:inherit;font-size:14px;cursor:pointer;
  background:transparent;color:var(--mk-text,#f8f8f6);border:1px solid var(--mk-hair,rgba(226,167,44,.3));border-radius:0}
.mko-tab[aria-selected="true"]{background:var(--mk-gold,#e2a72c);color:var(--mk-ink,#000);border-color:var(--mk-gold,#e2a72c)}
.mko-tab:focus-visible{outline:2px solid var(--mk-gold,#e2a72c);outline-offset:2px}

.mko-panel{margin:0 0 12px;font-size:14px;color:var(--mk-mute,#8c8c89);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mko-hint{font-size:12px;max-width:52ch}
.mko-say{margin:0 0 12px;font-size:14px;color:var(--mk-text,#f8f8f6)}
.mko-empty{margin:24px 0;font-size:14px;color:var(--mk-mute,#8c8c89)}
.mko-note{margin:24px 0 0;font-size:12px;color:var(--mk-mute,#8c8c89);max-width:64ch}

.mko-grid{display:grid;grid-template-columns:1fr;gap:var(--mk-gap,16px)}
@media (min-width:600px){.mko-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.mko-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.mko-cell{display:flex;flex-direction:column;min-width:0;border:1px solid var(--mk-hair,rgba(226,167,44,.3))}
.mko-cell>*{min-width:0}
.mko-acts{display:flex;gap:8px;margin:auto 0 0;padding:8px;border-top:1px solid var(--mk-hair,rgba(226,167,44,.3))}
.mko-act{flex:1 1 auto;min-height:44px;font:inherit;font-size:13px;cursor:pointer;background:transparent;
  color:var(--mk-text,#f8f8f6);border:1px solid var(--mk-hair,rgba(226,167,44,.3));border-radius:0}
.mko-act[aria-pressed="true"]{background:var(--mk-gold,#e2a72c);color:var(--mk-ink,#000)}
.mko-act:focus-visible{outline:2px solid var(--mk-gold,#e2a72c);outline-offset:2px}

.mko-more{margin:20px 0 0;display:flex;justify-content:center}
.mko-more button{min-height:44px}

/* a shop read from a served map cell, drawn in the browser. It states a name and a place and nothing else,
   because a name and a place are all the cell record carries. */
.mko-near{padding:12px;border:1px solid var(--mk-hair,rgba(226,167,44,.3))}
.mko-near h3{margin:0 0 4px;font-size:16px;line-height:1.25}
.mko-near p{margin:0 0 8px;font-size:13px;color:var(--mk-mute,#8c8c89)}
.mko-near a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;color:var(--mk-gold,#e2a72c)}

@media (prefers-reduced-motion:reduce){.mk-opp-page *{animation:none!important;transition:none!important}
  .mk-opp-page .mko-tabs{scroll-behavior:auto}}