/* The slab-pool page: the site's frame and type, plus a trade panel, a fee table and the slab list. */
/* 🔴 `display: grid` on a component beats the `hidden` attribute; without this a "hidden" quote stayed on screen. */
.slab-shell [hidden] { display: none !important; }
.slab-shell { grid-template-areas: "view" "rail" "fees" "slabs"; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .slab-shell { grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: "view view view view view view view rail rail rail rail rail"
                         "fees fees fees fees fees fees fees rail rail rail rail rail"
                         "slabs slabs slabs slabs slabs slabs slabs slabs slabs slabs slabs slabs"; }
}
.slab-shell .viewport { grid-area: view; }
.slab-shell .rail { grid-area: rail; display: flex; flex-direction: column; gap: 14px; }
.fees-frame { grid-area: fees; }
.slabs-frame { grid-area: slabs; }
.slab-shell .under { padding: 22px 6px 6px; display: grid; gap: 12px; }
.slab-shell h1 { font: 800 clamp(30px, 5vw, 50px)/1 var(--disp); text-transform: uppercase; margin: 0; text-wrap: balance; }
.slab-shell .printing { margin: 0; color: var(--muted); max-width: 62ch; }
.skeleton-text { color: var(--faint); }
.slab-nums .num .v { font-size: clamp(24px, 3.2vw, 34px); overflow-wrap: anywhere; }
.slab-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .slab-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.frame h2, .rail h2 { font: 800 20px/1.1 var(--disp); letter-spacing: .03em; margin: 0; }
.frame { padding: 16px 18px 18px; }

.trade { display: grid; gap: 12px; }
.wallets { display: grid; gap: 8px; }
.wallets button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r); background: var(--steel-2); border: 1px solid var(--line-2); color: var(--white); font: 600 14px var(--sans); cursor: pointer; }
.wallets button:hover { background: var(--steel-3); }
.wallets img { width: 22px; height: 22px; border-radius: 5px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { flex: 1 1 auto; padding: 9px 10px; border-radius: 8px; background: var(--steel-2); border: 1px solid var(--line); color: var(--muted); font: 700 12px/1 var(--disp); letter-spacing: .12em; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--white); border-color: var(--cobalt); background: var(--cobalt-soft); }
.tradeform { display: grid; gap: 10px; }
.field { display: grid; gap: 5px; }
.field span { font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--muted); }
.field input { width: 100%; padding: 11px 12px; border-radius: var(--r); background: #07090c; border: 1px solid var(--line-2); color: var(--white); font: 500 18px var(--mono); }
.field input:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 1px; }
.field small { color: var(--faint); font-size: 12px; }
.quote { display: grid; gap: 10px; padding: 12px; border-radius: var(--r); background: #07090c; border: 1px solid var(--cobalt); }
.quote .kv { grid-template-columns: 1fr auto; }
.quote .kv dd { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.quote .kv .total dt, .quote .kv .total dd { color: var(--white); font-weight: 700; border-top: 1px solid var(--line-2); padding-top: 6px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.error { margin: 0; padding: 10px 12px; border-radius: var(--r); background: rgba(240, 184, 73, .1); border: 1px solid var(--amber); color: var(--amber); font-size: 13.5px; }
.holdings { display: grid; gap: 8px; }
.hold { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--steel-2); border: 1px solid var(--line); }
.hold .t { font: 700 13px/1.2 var(--disp); letter-spacing: .08em; }
.hold .s { grid-column: 1; font-size: 12px; color: var(--muted); }
.hold .btn { grid-row: span 2; padding: 8px 12px; font-size: 12px; }

.fee-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.fee-table th { text-align: left; font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--muted); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-2); }
.fee-table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fee-table td:last-child { font-family: var(--mono); white-space: nowrap; }
.slablist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.slablist li { padding: 12px; border-radius: var(--r); background: var(--steel-2); border: 1px solid var(--line); font-size: 13px; display: grid; gap: 4px; }
.slablist b { font: 700 14px/1.2 var(--disp); letter-spacing: .06em; }
.slablist a { color: var(--cobalt-2); }
.slablist .state { font: 700 11px/1 var(--disp); letter-spacing: .12em; color: var(--muted); }
.card-art { margin: 0; display: grid; gap: 6px; justify-items: start; }
.card-art img { width: min(240px, 60vw); height: auto; border-radius: 10px; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -20px rgba(0,0,0,.9); }
.card-art figcaption { font-size: 11px; color: var(--faint); }