/* The newest browser features. Every rule here only adds to the site: browsers without a feature skip it and show the normal design. */

/* ---------- Page changes: the header and tabs stay put, a card picture grows into its page ---------- */
.bar { view-transition-name: vt-bar; }
.tabs { view-transition-name: vt-tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
::view-transition-group(vt-card) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 5; }
::view-transition-image-pair(vt-card) { isolation: isolate; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- Text and forms ---------- */
h1, h2, .h1, .h2, .sc-title, .qa-hero-t { text-wrap: balance; }
.lede, .prose, .qa-hero-s { text-wrap: pretty; }
textarea { field-sizing: content; }

/* ---------- Cards adapt to their own width, wherever they sit ---------- */
.card { container: card / inline-size; }
@container card (max-width: 165px) {
  .qty { min-width: 32px; height: 32px; font-size: .9375rem; right: 6px; top: 6px; }
  .grade { padding: 3px 7px 2px; font-size: .75rem; left: 6px; bottom: 6px; }
  .card-t { font-size: .8125rem; }
}

/* ---------- Brass plates with cut corners ---------- */
@supports (corner-shape: bevel) {
  .eyebrow.plate, .grade, .sticker, .fd-chip, .ai-btn { corner-shape: bevel; }
  .eyebrow.plate, .sticker { border-radius: 9px; }
  .grade { border-radius: 7px; }
}

/* ---------- The site's logo eases down once the header sticks ---------- */
@supports (container-type: scroll-state) {
  .bar { container-type: scroll-state; }
  .brand-mark { transition: scale .25s var(--ease); }
  @container scroll-state(stuck: top) { .brand-mark { scale: .86; } }
}

/* ---------- Search suggestions: attached to the box, flips above it when there's no room below ---------- */
@supports (anchor-name: --x) {
  .sg-top { anchor-name: --search-box; }
  .sg-top > .sg-panel[popover] {
    position: fixed; position-anchor: --search-box; inset: auto; margin: 8px 0;
    top: anchor(bottom); left: anchor(left); width: anchor-size(width); min-width: min(320px, calc(100vw - 24px));
    position-try-fallbacks: flip-block, --sg-right;
    border: 1px solid var(--gold-lo);
    color: inherit;
    transition: opacity .14s var(--ease), translate .14s var(--ease), display .14s allow-discrete, overlay .14s allow-discrete;
  }
  @starting-style { .sg-top > .sg-panel[popover]:popover-open { opacity: 0; translate: 0 -6px; } }
  @position-try --sg-right { left: auto; right: anchor(right); }
}

/* ---------- Dropdowns in the vault's own style (mouse users; phones keep their familiar picker) ---------- */
@supports (appearance: base-select) {
  @media (pointer: fine) {
    .filters select, .fd-sort select, .filters select::picker(select), .fd-sort select::picker(select) { appearance: base-select; }
    .filters select, .fd-sort select { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; min-width: 190px; border: 1px solid var(--gold-lo); border-radius: var(--r-md); background: var(--steel-plate); color: var(--text); font: 600 .9375rem/1.2 var(--font); cursor: pointer; }
    .filters select::picker-icon, .fd-sort select::picker-icon { color: var(--gold-hi); }
    .filters select::picker(select), .fd-sort select::picker(select) { margin-top: 6px; padding: 6px; border: 1px solid var(--gold-lo); border-radius: var(--r-md); background: #14171d; color: var(--text); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
    .filters select option, .fd-sort select option { padding: 10px 12px; border-radius: 8px; background: transparent; cursor: pointer; }
    .filters select option:hover, .fd-sort select option:hover { background: var(--surface-2); }
    .filters select option:checked, .fd-sort select option:checked { color: var(--gold-hi); font-weight: 700; }
    .filters select option::checkmark, .fd-sort select option::checkmark { color: var(--gold-hi); }
  }
}

/* ---------- Mixed shapes (cards, slabs, sealed boxes) pack together like a Pinterest wall ---------- */
@supports (display: grid-lanes) {
  .grid { display: grid-lanes; flow-tolerance: 1em; }
  .grid .card-img { aspect-ratio: auto; }
  .grid .card-img img { height: auto; aspect-ratio: auto 5 / 7; }
  .grid > .more, .grid > .empty { grid-column: 1 / -1; }
}

/* ---------- Binders slider: phones and tablets swipe, so the arrows only show with a mouse on a large screen ---------- */
@media (hover: none), (max-width: 1100px) {
  .bsl-btn { display: none !important; }
}

/* ---------- Things that move as you scroll ---------- */
@keyframes bbv-progress { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes bbv-rise { from { opacity: .2; translate: 0 26px; } }
@keyframes bbv-side { from { opacity: .35; scale: .93; } }
@keyframes bbv-dial { from { rotate: -46deg; } to { rotate: 46deg; } }
@keyframes bbv-door { to { scale: 1.07; translate: 0 -2%; } }
@keyframes bbv-pop { from { opacity: 0; translate: 0 14px; scale: .96; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* A brass bar along the header fills as you read down the page. */
    .bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; z-index: 1; height: 3px; background: var(--brass); box-shadow: 0 0 10px rgba(226,185,75,.6); transform-origin: 0 50%; pointer-events: none; animation: bbv-progress linear both; animation-timeline: scroll(root); }

    /* The vault pushes toward you as you leave the top of the page. */
    main:not(:has(#edList)) .hero-art { animation: bbv-door linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }

    /* The faint vault dials behind each section turn as they pass. The dials are centred with transform, so rotate adds to it. */
    main:not(:has(#edList)) :is(.showcase, .bsl-sec)::before { animation: bbv-dial linear both; animation-timeline: view(); }

    /* Cards rise in as they arrive. Backwards fill means hover effects still work once they've landed. */
    .grid > .card { animation: bbv-rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .rail > .card { animation: bbv-side linear backwards; animation-timeline: view(inline); animation-range: entry 0% entry 55%; }
    main:not(:has(#edList)) .sc-grid { animation: bbv-rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }

  /* Number boxes and headings pop in once, one after another, then stay. */
  @supports (animation-trigger: --x play-once) {
    main:not(:has(#edList)) :is(.stats > .stat, .sc-head, .row-h, .bsl-title) {
      trigger-scope: all;
      timeline-trigger: --bbv-in view() entry 0% exit 100%;
      animation: bbv-pop .55s var(--ease) backwards;
      animation-trigger: --bbv-in play-once;
    }
    @supports (width: calc(sibling-index() * 1px)) {
      main:not(:has(#edList)) .stats > .stat { animation-delay: calc((sibling-index() - 1) * 90ms); }
    }
  }
}

/* Showcase cards float out of step, however many there are. */
@supports (width: calc(sibling-index() * 1px)) {
  .sc-3 .sc-card, .sc-many .sc-card { animation-delay: calc(sibling-index() * -1.7s); }
  .sc-3 .sc-card .sc-shine, .sc-many .sc-card .sc-shine { animation-delay: calc(sibling-index() * -1.1s); }
}

/* ---------- Holographic cards ---------- */
[data-holo] { position: relative; touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-holo].detail-img { overflow: clip; }
/* Large screens keep the card panel's sticky position. Sticky already anchors the 3D canvas, and "relative" would turn its offset into a gap. */
@media (min-width: 900px) { .detail-img[data-holo] { position: sticky; } }
[data-holo] img { -webkit-user-drag: none; }
/* The phone toolbar moving must not resize the card: that would clear the 3D picture on every scroll. */
@supports (height: 1svh) { .detail-img img { max-height: min(70svh, 720px); } }

/* The tilt every browser gets. */
.holo-tilt > .sc-img, .detail-img.holo-tilt > img, .holo-sheen { transform: perspective(1100px) rotateX(var(--rx, 0rad)) rotateY(var(--ry, 0rad)) !important; animation: none !important; transition: none !important; }
.holo-tilt > .sc-img .sc-shine { display: none; }
.holo-sheen { position: absolute; z-index: 2; pointer-events: none; overflow: hidden; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.42), rgba(246,227,160,.12) 34%, transparent 62%), linear-gradient(115deg, transparent 18%, rgba(255,0,128,.2), rgba(255,220,0,.2), rgba(0,255,170,.2), rgba(0,150,255,.2), transparent 82%) var(--foil, 50%) 50% / 240% 100% no-repeat; mix-blend-mode: screen; }
.holo-gpu > .holo-sheen { display: none; }

/* Ask once on iPhone and iPad. */
.holo-motion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin: var(--s3) auto; padding: 0 16px; border: 1px solid var(--gold); border-radius: 10px; background: rgba(226,185,75,.1); color: var(--gold-hi); font: 700 .9375rem/1.2 var(--font); cursor: pointer; }
.detail-info .holo-motion { margin: 0 0 var(--s4); }
.sc-grid > .holo-motion { grid-column: 1 / -1; justify-self: center; flex-basis: 100%; max-width: max-content; }

/* When the 3D version is running it replaces the flat picture. */
.holo-c { position: absolute; z-index: 3; pointer-events: none; display: block; }
.holo-gpu > .sc-img, .holo-gpu.detail-img > img { opacity: 0; box-shadow: none !important; transform: none !important; }
.holo-html > .sc-t, .holo-html > .sc-p { opacity: 0; }
.holo-gpu.sc-card::before { opacity: .9; }
.detail-img.holo-gpu { isolation: isolate; }

/* The copy painted into the canvas. */
.holo-flat > .sc-img, .holo-flat > img { transform: none !important; animation: none !important; }
.holo-face { position: absolute; left: 0; top: 0; }
.holo-face .sc-img { box-shadow: none !important; animation: none !important; transform: none !important; border-radius: 0; overflow: hidden; background: transparent; }
.holo-face .sc-img img { width: 100% !important; height: 100% !important; }
.holo-face img { display: block; box-shadow: none !important; border-radius: 0 !important; max-height: none !important; object-fit: contain; }
.holo-face .sc-t, .holo-face .sc-p { display: grid; place-items: center; text-align: center; margin: 0 !important; }
.holo-face .sc-p { display: inline-grid; }

/* ---------- The card finder ---------- */
.fd:empty { display: none; }
.fd-tools { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.fd-binders { display: flex; gap: 10px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.fd-b:first-child { margin-left: auto; }
.fd-b:last-child { margin-right: auto; }
.fd-binders::-webkit-scrollbar { display: none; }
.fd-b { flex: none; position: relative; display: grid; justify-items: center; gap: 4px; width: 92px; padding: 6px 6px 8px; border: 1px solid #343a45; border-radius: 12px; background: var(--steel-plate); color: var(--text); font: 600 .75rem/1.2 var(--font); text-align: center; cursor: pointer; scroll-snap-align: start; }
.fd-b small { position: absolute; right: 6px; top: 6px; padding: 2px 6px; border-radius: 8px; background: rgba(11,13,18,.85); color: var(--gold-hi); font: 700 .75rem/1.2 var(--cond); }
.fd-b-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fd-b-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.fd-b-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.fd-b.on { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(226,185,75,.25); }
.fd-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s4); }
.fd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fd-chip { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 700 .9375rem/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px #343a45; }
.fd-chip.on { background: var(--brass); color: var(--gold-ink); box-shadow: 0 2px 0 #5b4210; }
.fd-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--t-sub); }
.fd-count { margin: var(--s3) 0 var(--s4); text-align: center; }
.fd-none { display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) 0; color: var(--muted); }
.fd-none p { margin: 0; }
.fd-more { display: grid; justify-items: center; padding: var(--s5) 0; }
html[data-finder] main h1 { text-align: center; }

/* ---------- Language switch on card pages ---------- */
.lang-sw { display: inline-flex; gap: 2px; margin: var(--s2) 0 var(--s4); padding: 3px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.lang-sw button { min-width: 76px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 .9375rem/1 var(--font); cursor: pointer; }
.lang-sw button:hover { color: var(--text); }
.lang-sw button[aria-pressed="true"] { background: var(--brass); color: var(--gold-ink); box-shadow: 0 2px 0 #5b4210; }
.lang-sw.busy { opacity: .7; }
@media (max-width: 400px) { .lang-sw { display: flex; } .lang-sw button { flex: 1; min-width: 0; padding: 0 6px; } }
/* The display font has no Japanese or Chinese letters: a strong system font keeps titles just as bold. */
.detail-info h1 { font-family: var(--display), "Hiragino Kaku Gothic ProN", "Hiragino Sans", "PingFang TC", "Noto Sans CJK JP", "Yu Gothic UI", "Microsoft JhengHei", sans-serif; }
.detail-info h1:lang(ja), .detail-info h1:lang(zh) { font-weight: 800; font-synthesis-weight: none; }

/* ---------- On-device AI buttons ---------- */
.ai-btn { min-height: 42px; padding: 0 16px; border: 1px solid var(--gold); border-radius: 10px; background: rgba(226,185,75,.1); color: var(--gold-hi); font: 700 .9375rem/1 var(--font); cursor: pointer; }
.ai-btn:hover:not(:disabled) { background: var(--brass); color: var(--gold-ink); }
.ai-btn:disabled { opacity: .7; cursor: progress; }
.ai-note { margin: 0; color: var(--muted); font-size: var(--t-foot); }
.ai-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.ai-ask[hidden], .ai-note[hidden] { display: none; }

/* ---------- Every card shows its set and condition, right on the tile ---------- */
.card-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 5px 0 0; }
.card-set { min-width: 0; max-width: 100%; color: var(--muted); font-size: .8125rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-cond { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--fill); color: var(--steel-hi); font: 700 .75rem/1.35 var(--cond); letter-spacing: .04em; max-width: 100%; overflow-wrap: anywhere; }
.sc-m { justify-content: center; }
.holo-html > .sc-m { opacity: 0; }

/* ---------- The floating card window ---------- */
dialog.float { position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 12px; border: 0; background: rgba(5, 7, 10, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); overflow: hidden; }
dialog.float[open] { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 6px; animation: float-fade .16s ease-out; }
dialog.float::backdrop { background: transparent; }
@keyframes float-fade { from { opacity: 0; } }
.float-panel { width: min(100%, 1040px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px var(--gold-lo), 0 30px 80px rgba(0,0,0,.7); outline: none; animation: float-in .22s var(--ease); }
@keyframes float-in { from { opacity: 0; scale: .96; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { dialog.float[open], .float-panel { animation: none; } }
.float-hint { margin: 0; color: var(--steel-hi); font: 700 .8125rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
html[data-float] { overflow: hidden; }
html[data-float] body { padding-right: var(--sbw, 0); }
.float-panel .wrap { padding: var(--s5); max-width: none; }
.float-panel .wrap + .wrap { padding-top: 0; }
.float-panel .detail-img { position: relative !important; top: auto; }
.float-panel .detail-img img { max-height: min(62svh, 640px); background: center / contain no-repeat; }
.float-panel .rail { margin: 0; padding-inline: 0; }
.float-panel .detail { gap: var(--s5); }
@media (min-width: 760px) { .float-panel .detail { grid-template-columns: 1.1fr 1fr; align-items: start; } }
@media (max-width: 520px) { .float-panel .wrap { padding: var(--s4); } .float-panel .detail-img { padding: var(--s3); } .float-panel .detail-img img { max-height: 46svh; } }
.mc-owner { display: inline-flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding: 8px 18px 8px 8px; border-radius: 40px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.mc-owner small { display: block; color: var(--muted); font-size: .8125rem; }
.mc-owner b { color: var(--gold-hi); }

/* ---------- Trainer pictures ---------- */
.av { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--brass); color: var(--gold-ink); font: 400 1.125rem/1 var(--display); box-shadow: 0 0 0 2px var(--gold-lo), 0 4px 10px rgba(0,0,0,.45); }
.av-lg { width: 96px; height: 96px; font-size: 2.25rem; }
.av-xl { width: clamp(112px, 26vw, 160px); height: clamp(112px, 26vw, 160px); font-size: clamp(2.75rem, 7vw, 4rem); box-shadow: 0 0 0 3px var(--gold), 0 0 0 8px rgba(226,185,75,.15), 0 14px 30px rgba(0,0,0,.55); }
.bar-trainers { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--steel-hi); font: 700 .875rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.bar-trainers svg { width: 20px; height: 20px; }
.bar-trainers:hover { color: var(--gold-hi); }
@media (max-width: 899px) { .bar-trainers { display: none; } }

/* ---------- Home: trainers' picks and vouches ---------- */
.hl-sec { margin-top: var(--sec); }
.hl-sec > .wrap { padding-top: 0; }
.hl-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5) var(--s3); }
.hl { width: calc((100% - var(--s3)) / 2); display: grid; align-content: start; min-width: 0; }
@media (min-width: 700px) { .hl { width: calc((100% - 3 * var(--s3)) / 4); } }
.hl-card { display: block; aspect-ratio: 5 / 7; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: 0 0 0 2px var(--gold-lo), 0 14px 30px rgba(0,0,0,.5); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.hl-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold), 0 20px 40px rgba(0,0,0,.6); }
.hl-card img { width: 100%; height: 100%; object-fit: contain; }
.hl-t { margin: var(--s3) 0 0; font-size: var(--t-foot); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl-who { display: flex; align-items: center; gap: 8px; min-height: 52px; margin-top: 4px; min-width: 0; }
.hl-who b { min-width: 0; color: var(--gold-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vouch-head { display: grid; justify-items: center; gap: var(--s2); margin-bottom: var(--s5); text-align: center; }
.vouch-head .eyebrow.plate { margin: 0; }
.vouch-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.vouch { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: var(--s5); border: 1px solid #343a45; border-radius: var(--r-lg); background: var(--steel-plate); min-width: 0; }
@media (min-width: 700px) { .vouch { flex: 0 1 calc((100% - var(--s3)) / 2); } }
@media (min-width: 1040px) { .vouch { flex-basis: calc((100% - 2 * var(--s3)) / 3); } }
.vouch blockquote { flex: 1; margin: 0; color: var(--text); font-size: 1rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.vouch blockquote::before { content: "“"; display: block; height: 28px; color: var(--gold); font: 400 3rem/1 var(--display); }
.vouch figcaption a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.vouch figcaption b { color: var(--gold-hi); }

/* ---------- Join ---------- */
.join { display: grid; justify-items: center; }
.join-card { width: min(100%, 440px); display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) var(--s5); border: 1px solid var(--gold-lo); border-radius: var(--r-xl); background: var(--steel-plate); text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.join-mark { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 10px 24px rgba(0,0,0,.5); }
.join-card .h1 { margin: 0; }
.join-sub, .join-note { margin: 0; color: var(--muted); }
.join-note { font-size: var(--t-foot); }
.join-err { width: 100%; margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: rgba(220, 70, 60, .16); color: #ffb4ad; box-shadow: inset 0 0 0 1px rgba(220, 70, 60, .5); }
.join-form { width: 100%; display: grid; gap: var(--s3); text-align: left; }
.join-form .btn { margin-top: var(--s2); width: 100%; }
.join-trap { position: absolute; left: -9999px; }
.join-switch { margin: 0; }
.join-switch a { color: var(--gold-hi); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.join-form label, .me-fields label { display: grid; gap: 6px; color: var(--muted); font-size: var(--t-foot); font-weight: 600; }
.join-form small, .me-fields small { color: var(--steel-hi); font-weight: 500; }
.join-form input, .me-fields input, .me-fields textarea, #meVouch textarea, .me-find input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: #0f1218; color: var(--text); font: 400 1rem/1.4 var(--font); }
.join-form input:focus, .me-fields input:focus, .me-fields textarea:focus, #meVouch textarea:focus, .me-find input:focus { outline: 3px solid rgba(226,185,75,.4); outline-offset: 0; border-color: var(--gold); }

/* ---------- Trainers ---------- */
.tr-head { display: grid; justify-items: center; gap: var(--s3); margin-bottom: var(--s6); text-align: center; }
.tr-head .h1, .tr-head .eyebrow.plate { margin: 0; }
.tr-sub { margin: 0; color: var(--muted); }
.tr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.tr-grid li { width: calc((100% - var(--s3)) / 2); max-width: 220px; }
@media (min-width: 700px) { .tr-grid li { width: calc((100% - 3 * var(--s3)) / 4); } }
.tr-tile { display: grid; justify-items: center; gap: 6px; height: 100%; padding: var(--s4) var(--s2); border: 1px solid #343a45; border-radius: var(--r-lg); background: var(--steel-plate); text-align: center; transition: border-color .2s, transform .2s var(--ease); }
.tr-tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.tr-tile b { max-width: 100%; color: var(--gold-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-tile small { color: var(--muted); }
.tr-wait { margin: 0 0 var(--s4); padding: 10px 14px; border-radius: var(--r-md); background: rgba(226,185,75,.1); color: var(--gold-hi); text-align: center; box-shadow: inset 0 0 0 1px var(--gold-lo); }
.tp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s5); margin-bottom: var(--s6); }
.tp-who { min-width: min(100%, 260px); flex: 0 1 560px; }
.tp-who .h1, .tp-who .eyebrow { margin-bottom: var(--s2); overflow-wrap: anywhere; }
.tp-bio { margin: 0; color: #d9d3c2; white-space: pre-line; overflow-wrap: anywhere; }
.tp-edit { padding: 0; color: var(--gold-hi); }
.tp-hl { display: grid; justify-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.tp-hl .eyebrow.plate { margin: 0; }
.tp-hl-card { display: grid; justify-items: center; gap: 6px; width: min(72vw, 300px); text-align: center; }
.tp-hl-card img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 3px var(--gold), 0 0 0 8px rgba(226,185,75,.15), 0 24px 60px rgba(0,0,0,.6), 0 0 80px rgba(226,185,75,.3); }
.tp-hl-t { margin-top: var(--s2); font-weight: 700; }
.tp-hl-card .card-m { justify-content: center; }
.tp-binder-h small, .me h2 small { color: var(--muted); font: 700 .9375rem/1 var(--cond); letter-spacing: .06em; }

/* ---------- My trainer ---------- */
.me-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.me-top .h1 { margin: 0; }
.me-top-acts { display: flex; align-items: center; gap: var(--s2); }
.me-status { margin: 0 0 var(--s4); padding: 10px 14px; border-radius: var(--r-md); background: rgba(226,185,75,.1); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-lo); }
.me-status.ok { background: rgba(70,180,110,.12); color: #9fe0b5; box-shadow: inset 0 0 0 1px rgba(70,180,110,.45); }
.me-card { margin-bottom: var(--s4); padding: var(--s5); border: 1px solid #343a45; border-radius: var(--r-xl); background: var(--steel-plate); }
.me-card > .h2 { margin-top: 0; }
.me-profile { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5); }
.me-av { position: relative; display: grid; justify-items: center; gap: var(--s2); cursor: pointer; }
.me-av-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 20px; background: var(--surface-2); color: var(--text); font-size: .875rem; font-weight: 600; box-shadow: inset 0 0 0 1px #343a45; }
.me-av:hover .me-av-btn { box-shadow: inset 0 0 0 1px var(--gold); }
.me-fields { flex: 1 1 280px; min-width: 0; display: grid; gap: var(--s3); align-content: start; }
.me-fields .btn { justify-self: start; }
.me-how { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--t-foot); }
.me-binder { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 19vw, 170px), 1fr)); gap: var(--s4) var(--s3); margin: 0; padding: 0; list-style: none; }
.me-c { min-width: 0; display: grid; align-content: start; gap: 4px; touch-action: manipulation; cursor: grab; }
.me-c.dragging { cursor: grabbing; }
.me-c-pic { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px #343a45, 0 8px 18px rgba(0,0,0,.4); }
.me-c-pic img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.me-c.star .me-c-pic { box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(226,185,75,.45); }
.me-star, .me-x { position: absolute; top: 6px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(11,13,18,.88); color: var(--steel-hi); font-size: 1rem; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.me-star { left: 6px; font-size: 1.25rem; }
.me-x { right: 6px; }
.me-x:hover { color: #ff9c94; }
.me-c.star .me-star { background: var(--brass); color: var(--gold-ink); box-shadow: 0 2px 0 #5b4210; }
.me-c-t { margin-top: 4px; font-size: .875rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.me-c-s { color: var(--muted); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-c select { width: 100%; min-height: 40px; margin-top: 2px; font-size: .875rem; }
.me-empty { margin: 0; padding: var(--s5) 0; color: var(--muted); text-align: center; }
.me-add-h { margin: var(--s5) 0 var(--s2); font: 400 var(--t-h2)/1.2 var(--display); color: var(--text); }
.me-find { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.me-find input { flex: 1 1 240px; width: auto; border: 2px solid var(--gold); }
.me-lang { margin: 0; }
.me-state { margin: var(--s2) 0 var(--s3); color: var(--muted); font-size: var(--t-foot); }
.me-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(118px, 17vw, 150px), 1fr)); gap: var(--s3); }
.me-res { position: relative; min-width: 0; display: grid; align-content: start; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.me-res-pic { display: block; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px #343a45, 0 6px 14px rgba(0,0,0,.4); transition: transform .15s var(--ease), box-shadow .15s; }
.me-res-pic img { width: 100%; height: 100%; object-fit: contain; }
.me-res:hover .me-res-pic { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--gold), 0 10px 22px rgba(0,0,0,.5); }
.me-res b { font-size: .875rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.me-res small { color: var(--muted); font-size: .8125rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.me-res.busy { opacity: .6; }
.me-res.in .me-res-pic { box-shadow: 0 0 0 3px var(--gold); }
.me-res.in::after { content: "✓ In your binder"; position: absolute; left: 6px; right: 6px; top: 6px; padding: 6px; border-radius: 8px; background: var(--brass); color: var(--gold-ink); font: 700 .8125rem/1 var(--cond); text-align: center; }
.me-res:disabled { opacity: .45; cursor: not-allowed; }
.me-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); color: var(--muted); }
.me-row .btn { margin-left: auto; }
.me-tag { color: var(--gold-hi); font-size: .875rem; font-weight: 600; }
.me-tag.ok { color: #9fe0b5; }
.me-account summary { min-height: 44px; display: flex; align-items: center; color: var(--gold-hi); font-weight: 700; cursor: pointer; }
.me-account .me-fields { margin: var(--s3) 0 var(--s4); max-width: 420px; }
.me-danger { min-height: 44px; padding: 0 var(--s3); border: 1px solid rgba(220,70,60,.6); border-radius: var(--r-md); background: none; color: #ff9c94; font: 600 .9375rem/1 var(--font); cursor: pointer; }
.me-toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--sab) + 12px); z-index: 90; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 24px; background: #1c2029; color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--gold-lo), 0 12px 30px rgba(0,0,0,.6); opacity: 0; translate: -50% 10px; pointer-events: none; transition: opacity .18s, translate .18s; text-align: center; }
.me-toast.on { opacity: 1; translate: -50% 0; }
.me-toast.bad { box-shadow: 0 0 0 1px rgba(220,70,60,.7), 0 12px 30px rgba(0,0,0,.6); color: #ffb4ad; }

/* ---------- Admin: price and description right on My cards ---------- */
.ct-set { min-width: 0; max-width: 100%; color: var(--muted); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-pricebox { display: flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 10px; border-radius: 10px; background: #0f1218; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--gold); font: 700 1rem/1 var(--mono); cursor: text; }
.ct-pricebox:focus-within { box-shadow: inset 0 0 0 2px var(--gold); }
.ct-pricebox input { flex: 1; min-width: 0; width: 100%; height: 40px; padding: 0; border: 0; background: none; color: var(--gold-hi); font: 700 1rem/1 var(--mono); outline: none; }
.ct-desc { display: block; width: 100%; min-height: 62px; max-height: 220px; padding: 8px 10px; border: 0; border-radius: 10px; background: #0f1218; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 400 .875rem/1.4 var(--font); resize: vertical; field-sizing: content; }
.ct-desc:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.ct-desc::placeholder { color: var(--muted); }
.ct-pricebox:has(.saved), .ct-desc.saved { animation: ct-ok .9s ease-out; }
.ct-pricebox:has(.bad), .ct-desc.bad { animation: ct-bad .9s ease-out; }
@keyframes ct-ok { 0% { box-shadow: inset 0 0 0 2px #5fd08a; } }
@keyframes ct-bad { 0% { box-shadow: inset 0 0 0 2px #ff7a70; } }
.seg-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; border-radius: 10px; background: var(--brass); color: var(--gold-ink); font: 800 .75rem/1 var(--cond); }
.at-list { display: grid; gap: var(--s3); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.at-row { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid #343a45; border-radius: var(--r-lg); background: var(--steel-plate); }
.at-row.waiting { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-lo); }
.at-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.at-txt { flex: 1 1 200px; min-width: 0; display: grid; gap: 4px; justify-items: start; overflow-wrap: anywhere; }
.at-txt b { color: var(--gold-hi); font-size: 1.125rem; }
.at-txt small { color: var(--muted); }
.at-txt p { margin: 0; white-space: pre-line; }
.at-card { width: 88px; height: auto; border-radius: 8px; box-shadow: 0 0 0 2px var(--gold-lo); }
.at-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.at-acts .btn { min-height: 44px; }
.at-acts .pbtn { display: inline-flex; align-items: center; min-height: 44px; }
.at-vouch { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid #343a45; }
.at-vouch blockquote { margin: 0; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Every version of a card, listed clearly ---------- */
.vers { margin: var(--s2) 0 var(--s4); }
.vers-h { margin: 0 0 var(--s2); color: var(--gold-hi); font: 700 .875rem/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.vers-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.ver { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s3); min-height: 56px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); transition: box-shadow .15s; }
.ver:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.ver.on { background: rgba(226,185,75,.12); box-shadow: inset 0 0 0 2px var(--gold); }
.ver-n { color: var(--gold-hi); font: 700 .875rem/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ver-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ver-tags span { padding: 3px 8px; border-radius: 6px; background: var(--fill); color: var(--text); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.ver-p { color: var(--gold); font: 700 .9375rem/1.2 var(--mono); text-align: right; white-space: nowrap; }
.ver-p small { color: var(--steel-hi); }
@media (max-width: 460px) {
  .ver { grid-template-columns: 1fr auto; }
  .ver-tags { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Tidying, every size ---------- */
.detail-img:not(:has(img)) { display: none; }
.float-panel .detail-info .sub { margin-bottom: 6px; }
.float-panel .detail-info .lang-sw { margin-bottom: var(--s3); }
.me-top-acts form { display: contents; }
.me-top-acts .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .adm-top .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .adm-top .seg a { justify-content: center; min-height: 44px; padding: 0 4px; text-align: center; white-space: normal; line-height: 1.15; }
}

/* ---------- Quick add tray: one row for every copy ---------- */
.qa-row { row-gap: var(--s2); }
.qa-copies { grid-column: 1 / -1; display: grid; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; list-style: none; counter-reset: none; }
.qa-copy { display: grid; grid-template-columns: 58px minmax(0, 1.4fr) 100px minmax(0, 1.2fr) 40px; align-items: center; gap: var(--s2); padding: 8px 10px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.qa-copy.err { box-shadow: inset 0 0 0 2px var(--danger); }
.qa-copy-n { color: var(--gold-hi); font: 700 .875rem/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.qa-copy select, .qa-copy input { width: 100%; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: #0f1218; color: var(--text); font: inherit; font-size: 16px; }
.qa-copy .qa-price { color: var(--gold-hi); font-family: var(--mono); }
.qa-copy select:focus, .qa-copy input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226,185,75,.35); }
.qa-copy-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--steel-hi); font-size: .9375rem; cursor: pointer; }
.qa-copy-x:hover { color: #ff9c94; }
.qa-copy .qa-err { grid-column: 1 / -1; margin: 0; }
@media (max-width: 620px) {
  .qa-copy { grid-template-columns: minmax(0, 1fr) 100px 40px; grid-template-areas: "n n x" "fin fin fin" "cond cond price"; }
  .qa-copy-n { grid-area: n; }
  .qa-copy select:nth-of-type(1) { grid-area: fin; }
  .qa-copy select:nth-of-type(2) { grid-area: cond; grid-column: 1 / 3; }
  .qa-copy .qa-price { grid-area: price; }
  .qa-copy-x { grid-area: x; justify-self: end; }
}
@media (max-width: 620px) {
  .qa-copy { grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "n x" "fin fin" "cond price"; }
  .qa-copy select:nth-of-type(2) { grid-column: auto; }
}
@media (max-width: 480px) { .qa-copies { margin-top: 0; } }

/* ---------- Tray: clearing it out ---------- */
.qa-sheet-h { gap: var(--s3); }
.qa-sheet-h h2 { margin-right: auto; }
.qa-clear, .qa-all { min-height: 40px; padding: 0 12px; border: 1px solid rgba(220,70,60,.55); border-radius: 10px; background: none; color: #ff9c94; font: 600 .875rem/1 var(--font); white-space: nowrap; cursor: pointer; }
.qa-clear:hover, .qa-all:hover { background: rgba(220,70,60,.14); }
.qa-row-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
.qa-row-acts .qa-qty { flex: none; }
@media (max-width: 480px) { .qa-row-acts { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; } }
#vouchDelete[hidden] { display: none; }
.lang-sw button { white-space: nowrap; }
.me-find .me-lang { flex: 0 1 auto; }
#meVouch .me-row .me-danger { margin-left: auto; }
#meVouch .me-row .me-danger + .btn { margin-left: 0; }
@media (max-width: 620px) {
  .me-find .me-lang { display: flex; flex: 1 1 100%; }
  .me-find .me-lang button { flex: 1; min-width: 0; padding: 0 6px; }
  /* Counter and status on one line, the two buttons side by side beneath. */
  #meVouch .me-row small, #meVouch .me-row .me-tag { flex: 0 1 auto; }
  #meVouch .me-row .me-tag { margin-left: auto; }
  #meVouch .me-row .btn, #meVouch .me-row .me-danger { flex: 1 1 140px; margin-left: 0; min-height: 48px; padding: 0 8px; }
}

/* ---------- My cards: condition dropdown ---------- */
.ct-cond { display: block; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background-color: #0f1218; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 600 16px/1.2 var(--font); cursor: pointer; }
.ct-cond:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.ct-cond.saved { animation: ct-ok .9s ease-out; }
.ct-cond.bad { animation: ct-bad .9s ease-out; }