/* Explore layout switch. Reuses the same launch cards and data as the row view. */
.ex-section .sec-head{flex-wrap:wrap;gap:14px}
.ex-head-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ex-layout{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;overflow:hidden;flex:none}
.ex-layout button{font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:7px 12px;color:var(--ink-2);min-height:32px}
.ex-layout button+button{border-left:1px solid var(--rule-strong)}
.ex-layout button.on{background:var(--ink);color:var(--paper)}
.ex-layout button:focus-visible{outline:2px solid var(--chroma-ink,var(--accent-deep));outline-offset:-3px}
.ex-controls{min-width:0}
.ex-controls #exQuote{flex-wrap:wrap;max-width:100%}
.ex-cards{margin-top:8px}
.ex-cards .lcard{min-width:0}
.ex-cards .lcard-sym{display:flex;align-items:center;flex-wrap:wrap;gap:4px;overflow-wrap:anywhere}
.ex-cards .lcard-id{min-width:0}
.ex-cards .lcard-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){
  .ex-head-tools{width:100%;justify-content:space-between;gap:10px}
  .ex-layout button{min-height:38px;padding:8px 14px}
  .ex-controls #exQuote{width:100%}
  .ex-cards{grid-template-columns:minmax(0,1fr)}
}

/* featured pair: gold outline only, no fill, with a slow travelling sheen */
.lcard.gold{border-color:transparent;background:var(--paper)}
.lcard.gold::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
  background:linear-gradient(115deg,#8a6a1f 0%,#d9b44a 18%,#fff4c4 32%,#d9b44a 46%,#8a6a1f 62%,#d9b44a 82%,#fff4c4 100%);
  background-size:280% 100%;animation:goldSheen 5.5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lcard.gold::before{border-color:rgba(217,180,74,.55)}
.lcard.gold:hover{border-color:transparent;box-shadow:0 0 0 1px rgba(217,180,74,.35),0 10px 30px -16px rgba(217,180,74,.7)}
.lcard.gold:hover::before{opacity:1;box-shadow:0 0 0 3px rgba(217,180,74,.16),0 0 20px -4px rgba(217,180,74,.65)}
@keyframes goldSheen{from{background-position:0% 50%}to{background-position:280% 50%}}
@media (prefers-reduced-motion:reduce){.lcard.gold::after{animation:none}}
