/* One amiibo, in full: the portrait, the facts beside it, and the strips of
 * siblings and variants underneath.
 *
 * Lifted out of amiibo.html's inline <style> so the admin can draw the same
 * panel rather than a second view of the same data. amiibopanel.js builds this
 * markup for both; this is what it looks like.
 *
 * One rule changed while moving, and it is the only one. `.tag` was defined
 * here AND in collection.css with different metrics. That was harmless while
 * only one page loaded each, and becomes a specificity race the moment a page
 * loads both — which the admin now does. The detail's badges are scoped to
 * `.badges .tag`, which is behaviour-preserving on the public page because
 * every tag it draws is already inside `.badges`.
 *
 * The page keeps `.detailNav` (its prev/next chrome) and `.strip` (the section
 * margin around a row) — the seam is that this file styles the contents of a
 * strip row, and the page owns the section around it.
 *
 * Depends on app.css for the tokens and the pixel font.
 */

/* ---- layout ------------------------------------------------------------- */

.detail { display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:.5rem; }
@media (min-width:700px) { .detail { grid-template-columns:minmax(15rem,20rem) 1fr; } }

/* ---- the portrait ------------------------------------------------------- */

.portrait { border:2px solid var(--border); background:var(--panel);
            box-shadow:4px 4px 0 var(--shadow);
            display:flex; align-items:center; justify-content:center;
            min-height:18rem; padding:1.5rem; position:relative; }
.portrait img { max-width:100%; max-height:24rem; object-fit:contain; }
.portrait .noArt { color:var(--muted); font-size:3rem; font-weight:700; }
/* The fan-made card set has no official artwork, so it gets our own mark. */
.portrait.hhdMark svg { image-rendering:pixelated; width:100%; height:auto; max-width:24rem; max-height:24rem; }

/* ---- the facts ---------------------------------------------------------- */

.facts h1 { margin:0 0 .35rem; font-size:1.1rem; }
.facts .subtitle { color:var(--muted); margin-bottom:.9rem; }

.badges { display:flex; gap:.4rem; margin:0 0 1rem; flex-wrap:wrap; }
.badges .tag { font-size:.72rem; padding:.1rem .45rem; border:1px solid var(--border); color:var(--muted); }
.badges .tag.ok-tag { border-color:var(--ok); color:var(--ok); }
.badges .tag.dev { background:var(--accent2); border-color:var(--accent2); color:#fff;
                   display:inline-flex; align-items:center; gap:.3rem; }
.badges .tag.dev .ico { width:.85rem; height:.85rem; }
.badges .tag.new { border-color:var(--warn); color:var(--warn); }
.badges .tag.unknown { border-style:dashed; }

.fileBlock { margin:0 0 1rem; }
.fileBlock h2 { margin-bottom:.35rem; }
.fileBlock ul { margin:0; padding:0; list-style:none; font:12.5px/1.7 var(--mono); color:var(--fg); }
.fileBlock li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.idRow { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.idmono { font:12px var(--mono); background:var(--panel); border:2px solid var(--border);
          padding:.25rem .5rem; }
.idRow button { font-size:.45rem; min-height:1.8rem; padding:.3rem .5rem; }

/* ---- the Happy Home Designer card set ----------------------------------- */

.cardsBlock { margin:0 0 1rem; }
.cardGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));
            gap:.5rem; }
.cTile { position:relative; display:grid; gap:.3rem; align-content:start;
         padding:.5rem .55rem .55rem;
         border:1px dashed var(--border); color:var(--muted);
         opacity:.7; text-align:left; }
.cTile.have { border-style:solid; border-color:var(--ok); opacity:1; }
.cTile .cTop { display:flex; align-items:baseline; gap:.5rem; padding-right:1rem; }
.cTile .cNum { font-family:var(--pixel); font-size:.55rem; }
.cTile.have .cNum { color:var(--ok); }
.cTile .cCount { font-size:.68rem; margin-left:auto; }
.cTile .cTeaser { font-size:.74rem; line-height:1.45; color:var(--fg);
                  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
                  overflow:hidden; }
.cTile:not(.have) .cTeaser { color:var(--muted); }
.cTile .cDev { position:absolute; top:.35rem; right:.35rem; color:var(--accent2); }
.cTile .cDev .ico, .cTile .cDev svg { width:.75rem; height:.75rem; display:block; }

/* ---- Kirby Air Riders vehicle pairings ---------------------------------- */

.vehiclesBlock { margin-top:.4rem; }
.vehiclesBlock h2 { display:flex; align-items:center; gap:.5rem; }
.vehiclesBlock .why { min-height:0; padding:.1rem .35rem; font-size:.5rem;
  border:1px solid var(--border); box-shadow:none; background:none; color:var(--muted); }
.vehicles { display:flex; flex-wrap:wrap; gap:.6rem; }
.vCard { display:grid; justify-items:center; gap:.3rem; width:5.5rem;
         padding:.5rem .3rem; border:1px dashed var(--border);
         color:var(--muted); opacity:.65; font-size:.72rem; text-align:center; }
.vCard.have { border-style:solid; border-color:var(--ok); color:var(--ok); opacity:1; }
.vArt { width:64px; height:52px; display:flex; align-items:center; justify-content:center;
        position:relative; }
.vArt::before { content:attr(data-initial); position:absolute; color:var(--muted);
                font-size:1.1rem; font-weight:700; }
.vArt img { position:relative; max-width:100%; max-height:100%; object-fit:contain; }
.vCard:not(.have) .vArt img { filter:grayscale(1); opacity:.55; }
.vNote { font-size:.78rem; color:var(--muted); margin:.4rem 0 0; display:none; }
.vNote.open { display:block; }

/* ---- a strip of onward links -------------------------------------------- */

.stripRow { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.5rem;
            scroll-snap-type:x proximity; }
.stripRow a { flex:none; width:72px; text-decoration:none; color:var(--muted);
              text-align:center; font-size:.65rem; scroll-snap-align:start;
              border:2px solid transparent; padding:.3rem; }
.stripRow a:hover { border-color:var(--accent); }
.stripRow a.current { border-color:var(--border); background:var(--panel); }
.stripRow .sArt { width:64px; height:64px; display:flex; align-items:center;
  justify-content:center; background:var(--bg); border:2px solid var(--border);
  margin-bottom:.25rem; position:relative; overflow:hidden; }
.stripRow .sArt::before { content:attr(data-initial); position:absolute; color:var(--muted); }
.stripRow .sArt img { position:relative; max-width:100%; max-height:100%; object-fit:contain; background:var(--bg); }
.stripRow a.owned { color:var(--fg); }
.stripRow a:not(.owned) .sArt img { filter:grayscale(1); opacity:.5; }
.stripRow .sNm { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }