/* ArgoCredits — collection pages. Built on Argoworld's skin (/assets/skin.css): its variables,
   .tabs, .outlink, .eyebrow and .lede; only the mint card, viewer and grid are defined here. */

[hidden] { display: none !important; }
/* Fallback header (before the live site header is mounted): logo left, wallet right. In the live header
   (common.js) the wallet button sits in the row just before the theme switch. */
.top .in { justify-content: space-between; }
.top .ac-wallet { margin-left: auto; }
.top.ac-live .in { justify-content: flex-start; }
.top.ac-live .ac-wallet { order: 4; margin-left: auto; padding: 6px 10px; font-size: 9px; white-space: nowrap; }
.top.ac-live #theme { margin-left: var(--s-xs); }
.ac-wallet[data-connected] { background: var(--surface); }
/* Where the full site menu sits in the top bar (the skin shows it from 1181px), the wallet button takes the
   room the telemetry needs: keep "LAST // date" whole and drop its UTC clock here instead of squeezing the date. */
@media (min-width: 1181px) { .top.ac-live .telemetry { flex-shrink: 0; } .top.ac-live .telemetry .tel-utc { display: none; } }

.ac-head { display: flex; flex-direction: column; gap: var(--s-xs); }
.ac-head h1 { margin: 0; }
.ac-head .tabs { margin-bottom: 0; }
.ac-head .tabs a[aria-disabled] { opacity: .45; pointer-events: none; }

.ac-pill {
  display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 9px; line-height: 14px;
  text-transform: uppercase; letter-spacing: .04em; background: var(--accent); color: var(--on-accent);
  border: var(--bw-sm) solid var(--rule); padding: 4px 10px; box-shadow: var(--pixel-sm);
}
.ac-sub { font-family: var(--arcade); font-size: 24px; line-height: 30px; color: var(--muted); margin: 0; text-transform: uppercase; }

/* mint: sheet left, card right */
.ac-mint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xl); align-items: start; }
@media (max-width: 820px) { .ac-mint { grid-template-columns: 1fr; } }
.ac-sheet { border: var(--bw) solid var(--rule); box-shadow: var(--pixel); background: var(--media); line-height: 0; }
.ac-sheet img { width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.ac-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ac-sheet-grid img { display: block; aspect-ratio: 1; }

.ac-card { background: var(--surface); border: var(--bw) solid var(--rule); box-shadow: var(--pixel); padding: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-md); }
.ac-stats { display: grid; grid-template-columns: 1fr 1fr; border: var(--bw-sm) solid var(--rule); background: var(--surface-low); }
.ac-stats div { padding: var(--s-sm) var(--s-md); }
.ac-stats div + div { border-left: var(--bw-sm) solid var(--rule); }
.ac-k { font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; color: var(--muted); display: block; }
.ac-v { font-family: var(--display); font-size: 13px; line-height: 22px; color: var(--ink); display: block; margin-top: 4px; white-space: nowrap; }
.ac-eth { display: block; font-family: var(--body); font-size: 13px; color: var(--muted); margin-top: 2px; }
.ac-note { font-family: var(--body); font-size: 14px; color: var(--muted); margin: 0; }
.ac-bar { height: 14px; border: var(--bw-sm) solid var(--rule); background: var(--surface-low); }
.ac-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.ac-barlbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--ink); margin-top: 6px; }
.ac-qty { display: inline-flex; border: var(--bw-sm) solid var(--rule); align-self: flex-start; }
.ac-qty button, .ac-qty input { width: 44px; height: 40px; border: 0; background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 12px; text-align: center; }
.ac-qty input { border-left: var(--bw-sm) solid var(--rule); border-right: var(--bw-sm) solid var(--rule); -moz-appearance: textfield; }
.ac-qty input::-webkit-outer-spin-button, .ac-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ac-qty button { cursor: pointer; }
.ac-qty button:disabled { opacity: .35; cursor: default; }
.ac-total { display: flex; justify-content: space-between; align-items: baseline; }
.ac-total b { font-family: var(--display); font-size: 13px; }
.ac-tot { text-align: right; }
.ac-go { width: 100%; justify-content: center; font-size: 12px; padding: var(--s-md); cursor: pointer; }
.ac-go:disabled { opacity: .55; cursor: default; }
.ac-status { font-family: var(--body); font-size: 13px; color: var(--muted); margin: 0; min-height: 1.3em; word-break: break-all; }
.ac-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-xs); }
.ac-out a { line-height: 0; border: var(--bw-sm) solid var(--rule); }
.ac-out img { width: 100%; image-rendering: pixelated; }

/* story */
.ac-story { max-width: 44rem; display: flex; flex-direction: column; gap: var(--s-md); }
.ac-story h2 { margin: 0; }
.ac-story p { margin: 0; }
.ac-story p:not(.eyebrow):not(.ac-coda) { font-size: 17px; line-height: 1.6; }
.ac-story .ac-coda { font-family: var(--display); font-size: 13px; line-height: 24px; margin-top: var(--s-sm); }
.ac-rule { border: 0; border-top: var(--bw) solid var(--rule); margin: var(--s-md) 0; }

/* viewer */
.ac-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-xl); align-items: start; }
@media (max-width: 820px) { .ac-view { grid-template-columns: 1fr; } }
.ac-frame { border: var(--bw) solid var(--rule); box-shadow: var(--pixel); background: var(--media); line-height: 0; aspect-ratio: 1; }
.ac-frame img { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.ac-controls { display: flex; flex-wrap: wrap; gap: var(--s-xs); align-items: center; }
.ac-controls input { width: 7.5em; height: 40px; border: var(--bw-sm) solid var(--rule); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 11px; text-align: center; }
.ac-controls .outlink { cursor: pointer; }
.ac-traits { width: 100%; border-collapse: collapse; font-family: var(--body); font-size: 14px; }
.ac-traits td { border-top: 1px solid var(--hair); padding: 6px 0; vertical-align: top; }
.ac-traits td:first-child { font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--muted); width: 42%; padding-top: 9px; }
.ac-dot { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--rule); vertical-align: -1px; margin-right: 2px; }
.ac-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xs); }
.ac-pair figure { margin: 0; }
.ac-pair img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; border: var(--bw-sm) solid var(--rule); display: block; }
.ac-pair figcaption { font-family: var(--mono); font-size: 8px; line-height: 13px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-lg); }
.ac-tile { display: flex; flex-direction: column; gap: var(--s-xs); }
.ac-meta { font-family: var(--body); font-size: 13px; line-height: 1.5; }

/* viewer, modelled on the Credited Punks viewer */
.ac-viewer { display: flex; flex-direction: column; gap: var(--s-md); }
.ac-subtabs { display: flex; gap: var(--s-lg); border-bottom: var(--bw-sm) solid var(--hair); }
.ac-subtabs a { font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: var(--s-sm) 0; border-bottom: var(--bw) solid transparent; margin-bottom: calc(-1 * var(--bw-sm)); }
.ac-subtabs a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.ac-toolbar { display: flex; align-items: center; justify-content: center; gap: var(--s-md); flex-wrap: wrap; padding: var(--s-xs) 0; position: relative; }
.ac-toolbar .ac-minted { position: absolute; right: 0; font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--muted); }
@media (max-width: 820px) { .ac-toolbar .ac-minted { position: static; width: 100%; text-align: center; } }
.ac-idbox { display: inline-flex; border: var(--bw-sm) solid var(--rule); box-shadow: var(--pixel-sm); }
.ac-idbox input { width: 8.5em; height: 40px; border: 0; background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 11px; text-align: center; -moz-appearance: textfield; }
.ac-idbox input + input { border-left: var(--bw-sm) solid var(--rule); }
.ac-idbox input::-webkit-outer-spin-button, .ac-idbox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ac-idbox button { border: 0; border-left: var(--bw-sm) solid var(--rule); background: var(--ink); color: var(--surface); font-family: var(--mono); font-size: 10px; text-transform: uppercase; padding: 0 var(--s-md); cursor: pointer; }
.ac-idbox button:disabled, .ac-idbox input:disabled { opacity: .45; cursor: default; }
.ac-link { background: none; border: 0; padding: 0; font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; color: var(--ink); cursor: pointer; text-decoration: none; }
.ac-link:disabled, .ac-link[aria-disabled] { color: var(--faint); cursor: default; pointer-events: none; }
.ac-stage { background: var(--surface-highest); border: var(--bw) solid var(--rule); box-shadow: var(--pixel); display: grid; place-items: center; padding: var(--s-lg) 0; }
.ac-art { position: relative; width: min(100%, 560px); aspect-ratio: 1; border: 0; padding: 0; background: var(--surface-high); cursor: pointer; display: block; line-height: 0; }
.ac-art img { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.ac-empty { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; line-height: 16px; text-transform: uppercase; color: var(--muted); }
.ac-badge { position: absolute; left: 10px; top: 10px; font-family: var(--mono); font-size: 8px; line-height: 12px; text-transform: uppercase; background: var(--accent); color: var(--on-accent); border: var(--bw-sm) solid var(--rule); padding: 3px 7px; }
.ac-caption { display: flex; justify-content: space-between; align-items: center; gap: var(--s-md); flex-wrap: wrap; border-bottom: var(--bw-sm) solid var(--hair); padding-bottom: var(--s-sm); }
.ac-caption h2 { margin: 0; }
.ac-caption .ac-k { margin-top: 4px; }
.ac-dl { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
.ac-dl .outlink { cursor: pointer; }
.ac-dl .outlink:disabled { opacity: .5; cursor: default; }
.ac-hint { text-align: center; font-family: var(--body); font-size: 12px; color: var(--muted); margin: 0; }
.ac-plate { font-family: var(--mono); font-size: 9px; }
.ac-owned { border-top: var(--bw) solid var(--rule); padding-top: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-sm); }
.ac-owned h2 { margin: 0; }
.ac-owned .ac-out { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

/* custom build: labelled fields */
.ac-build { align-items: flex-end; }
.ac-field { display: flex; flex-direction: column; gap: 6px; }
.ac-field input { width: 9em; height: 40px; border: var(--bw-sm) solid var(--rule); box-shadow: var(--pixel-sm); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 11px; text-align: center; -moz-appearance: textfield; }
.ac-field input::-webkit-outer-spin-button, .ac-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ac-plus { font-family: var(--display); font-size: 14px; line-height: 40px; color: var(--muted); }
.ac-build .outlink { cursor: pointer; height: 40px; }
.ac-build .ac-alt { background: var(--surface); }
.ac-help { font-family: var(--body); font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 46rem; margin: var(--s-xs) auto 0; text-align: center; }
.ac-parts { margin-top: var(--s-sm); }
.ac-parts .ac-field input { width: 8.5em; }
.ac-parts .ac-field.ac-off { opacity: .4; }
.ac-parts .ac-link { height: 40px; }

/* collection: every minted token, filtered by traits (collection.js) */
.ac-coll { display: flex; flex-direction: column; gap: var(--s-md); }
.ac-ctop { display: flex; align-items: flex-end; gap: var(--s-md); flex-wrap: wrap; }
.ac-ctop .ac-idbox input { width: 15em; }
.ac-sort { display: flex; flex-direction: column; gap: 6px; }
.ac-sort select { height: 44px; border: var(--bw-sm) solid var(--rule); box-shadow: var(--pixel-sm); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 11px; padding: 0 var(--s-sm); }
.ac-cstat { margin-left: auto; font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; color: var(--muted); text-align: right; }
.ac-cstat b { color: var(--ink); font-weight: 400; display: block; }
.ac-cbody { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-lg); align-items: start; }
@media (max-width: 820px) { .ac-cbody { grid-template-columns: 1fr; } .ac-cstat { margin-left: 0; text-align: left; width: 100%; } }
.ac-side { border: var(--bw) solid var(--rule); box-shadow: var(--pixel); background: var(--surface); padding: var(--s-sm) var(--s-md) var(--s-md); position: sticky; top: var(--s-md); max-height: calc(100vh - 2 * var(--s-md)); overflow-y: auto; }
@media (max-width: 820px) { .ac-side { position: static; max-height: none; } }
.ac-side > summary { font-family: var(--mono); font-size: 10px; line-height: 16px; text-transform: uppercase; color: var(--ink); cursor: pointer; padding: var(--s-xs) 0; }
.ac-side details { border-top: 1px solid var(--hair); }
.ac-side details summary { font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; color: var(--ink); cursor: pointer; padding: var(--s-sm) 0; }
.ac-side details summary i { font-style: normal; background: var(--accent); color: var(--on-accent); padding: 0 5px; margin-left: 4px; }
.ac-opts { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--s-sm); }
.ac-opt { display: flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 13px; line-height: 1.3; color: var(--ink); cursor: pointer; padding: 3px 0; }
.ac-opt input { margin: 0; accent-color: var(--accent); flex: none; }
.ac-opt span { flex: 1; min-width: 0; }
.ac-opt b { font-family: var(--mono); font-size: 9px; font-weight: 400; color: var(--muted); }
.ac-opt.ac-zero { opacity: .4; }
.ac-side > .ac-link { margin-top: var(--s-sm); }
.ac-chips { display: flex; flex-wrap: wrap; gap: var(--s-xs); align-items: center; margin-bottom: var(--s-md); }
.ac-chip { font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; background: var(--surface); color: var(--ink); border: var(--bw-sm) solid var(--rule); padding: 4px 8px; cursor: pointer; }
.ac-chip:hover { background: var(--accent); color: var(--on-accent); }
.ac-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-sm); }
@media (max-width: 480px) { .ac-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-cell { display: flex; flex-direction: column; border: var(--bw-sm) solid var(--rule); background: var(--media); text-decoration: none; color: var(--ink); }
.ac-cell:hover { box-shadow: var(--pixel-sm); transform: translate(-2px, -2px); }
.ac-cell img { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.ac-cell span { font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; padding: 6px 8px; background: var(--surface); border-top: var(--bw-sm) solid var(--rule); }
.ac-empty-note { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--muted); text-align: center; padding: var(--s-xl) 0; margin: 0; }
.ac-center { text-align: center; margin: var(--s-md) 0 0; }
.ac-center .outlink { cursor: pointer; }
@media (max-width: 820px) { .ac-ctop .ac-idbox { flex: 1 1 100%; } .ac-ctop .ac-idbox input { width: 100%; } }

/* wallet menu (common.js): opens from the connected wallet button */
.ac-wallet[data-connected] { cursor: pointer; }
.ac-wmenu { position: fixed; z-index: 99999; min-width: 190px; display: flex; flex-direction: column; background: var(--surface); border: var(--bw) solid var(--rule); box-shadow: var(--pixel); }
.ac-wmenu .ac-k { padding: var(--s-sm) var(--s-md); border-bottom: 1px solid var(--hair); }
.ac-wmenu button { font-family: var(--mono); font-size: 9px; line-height: 14px; text-transform: uppercase; text-align: left; color: var(--ink); background: none; border: 0; padding: var(--s-sm) var(--s-md); cursor: pointer; }
.ac-wmenu button:hover, .ac-wmenu button:focus-visible { background: var(--accent); color: var(--on-accent); }
.ac-wmenu button + button { border-top: 1px solid var(--hair); }

/* no wallet in this browser (common.js): open the page in a wallet app, or get an extension */
.ac-whelp { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.ac-whelp-in { position: relative; width: min(100%, 380px); background: var(--surface); border: var(--bw) solid var(--rule); box-shadow: var(--pixel); padding: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-sm); }
.ac-whelp-in .ac-k { font-size: 10px; color: var(--ink); padding-right: 28px; }
.ac-whelp-in .outlink { justify-content: center; text-align: center; }
.ac-whelp-in .ac-small { font-size: 12px; margin-top: var(--s-xs); word-break: break-word; }
.ac-whelp-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px 6px; }

/* phones: Mint / Collection / Viewer / OpenSea / Story stay on one row, sharing the width */
@media (max-width: 600px) {
  .ac-head .tabs { flex-wrap: nowrap; width: 100%; overflow: visible; }
  .ac-head .tabs a { flex: 1 1 auto; justify-content: center; text-align: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; letter-spacing: 0; }
}
@media (max-width: 420px) { .ac-head .tabs a { font-size: 8px; padding-left: 2px; padding-right: 2px; } }
@media (max-width: 350px) { .ac-head .tabs a { font-size: 7px; } }

/* mint: the closing countdown under the button */
.ac-close { font-family: var(--mono); font-size: 10px; line-height: 16px; text-transform: uppercase; color: var(--ink); text-align: center; margin: 0; }
.ac-close:empty { display: none; }

/* viewer: the Golden Fleece animation lies over the image and lets clicks through to it */
.ac-artwrap { position: relative; width: min(100%, 560px); line-height: 0; }
.ac-artwrap .ac-art { width: 100%; }
.ac-anim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: transparent; }
/* collection: the animated token is marked */
.ac-cell { position: relative; }
.ac-cell .ac-animated { position: absolute; top: 6px; left: 6px; font-family: var(--mono); font-size: 8px; line-height: 12px; text-transform: uppercase; background: var(--accent); color: var(--on-accent); border: var(--bw-sm) solid var(--rule); padding: 2px 5px; }

/* custom build: the Print choice */
.ac-field select { width: 9em; height: 40px; border: var(--bw-sm) solid var(--rule); box-shadow: var(--pixel-sm); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 11px; padding: 0 6px; }