/* =============================================================================
   Trusty NFT Marketplace — public surface
   =============================================================================

   Two sources govern this file and they agree about more than they disagree.

   `docs/DESIGN-SYSTEM.md` and `resources/sass/foundation/` own the palette, the
   typography and the button. Every colour below is a `--trusty-*` token; there
   is no NFT palette, no NFT button and no NFT type scale. The page loads the
   same header, the same footer and the same `.tf-btn`, `.tf-field` and
   `.tf-input` primitives as the rest of trusty.digital.

   The approved design handoff at
   `D:\Design\Trusty NFT\...\design_handoff_nft\README.md` owns the geometry of
   this section, and it is explicit: "Радиусы: 0 — карточки, панели, поля
   ввода" and "Теней нет. Глубина задаётся рамкой 1px solid #B4BFFF". So the
   NFT surface overrides `.tf-card`'s 20px radius and raised shadow inside
   `.nft` only. The foundation card is unchanged everywhere else on the site,
   and if its colours are revised this surface follows them automatically.

   The handoff also settles a value `docs/DESIGN-SYSTEM.md` left open as
   "UNKNOWN / NEEDS PRODUCT DECISION": the quiet grey used for field labels and
   card meta is #A4A7BB. It is recorded here as a local variable rather than
   promoted to a global token, because it has only been decided for this
   surface.
   ========================================================================== */

.nft {
  /* Decided by the design handoff for this surface only — see header note. */
  --nft-label: #a4a7bb;   /* field labels, card meta, muted numerals    */
  --nft-sub: #667080;     /* secondary prose that still has to be read  */
  --nft-band: #080f4a;    /* dark call-to-action band                   */
  --nft-hairline: #e7ebff;
  --nft-cut: 0 0 50px 0;  /* the signature corner cut                   */

  background: var(--trusty-tint);
  color: var(--trusty-ink);
  padding: 28px 0 60px;
}

.nft .container,
.nft .container-xxl {
  max-width: 1280px;
  padding-inline: clamp(16px, 4vw, 28px);
}

/* Links inside the section are Trusty blue, and the exclusions are the whole
   point of the rule: `.nft a` plus its :not() arguments outranks a single
   class, so anything that is a control rather than a link has to be named
   here or this rule repaints its label blue — on a blue fill, in the case of
   the primary button and the active view toggle.

   The list is kept short deliberately. Card links carry `.nft-card__link`,
   which covers the artwork link as well as the title, so one exclusion
   serves both and the specificity of this rule does not creep upwards every
   time a control is added. */
.nft a:not(.tf-btn):not(.nft-card__link):not(.nft-toggle__option) {
  color: var(--trusty-blue-dark);
  text-decoration: none;
}

.nft a:not(.tf-btn):not(.nft-card__link):not(.nft-toggle__option):hover {
  color: var(--trusty-blue);
  text-decoration: underline;
}

/* --------------------------------------------------------------- surfaces --
   The handoff's rectangle. Depth comes from the border and from the tint
   behind the card, never from a shadow. */

.nft .tf-card {
  border-radius: 0;
  border: 1px solid var(--trusty-line);
  box-shadow: none;
  background: #fff;
}

.nft .tf-card--cut {
  border-radius: var(--nft-cut);
}

/* The handoff's dark card — used once, for the third hub tile. It keeps the
   same border and geometry as its white siblings so the row still reads as
   one row. */
.nft .nft-card--dark {
  background: #131c63;
  border-color: #131c63;
  color: #fff;
}

.nft .nft-card--dark .nft-card__title,
.nft .nft-card--dark .nft-facts__row dd {
  color: #fff;
}

.nft .nft-card--dark .nft-answer__a,
.nft .nft-card--dark .nft-facts__row dt {
  color: #b4bfff;
}

.nft .nft-card--dark .nft-facts__row {
  border-bottom-color: rgba(180, 191, 255, 0.25);
}

.nft .nft-card--dark .nft-badge--muted {
  background: transparent;
  border-color: #b4bfff;
  color: #b4bfff;
}

/* The dark card and the call-to-action band invert the secondary button.
   Each state is named for the reason given in the foundation: a bare
   `a:hover` from Bootstrap outranks a single-class colour, and these are
   anchors. Every state resolves to the colour the button already has at
   rest, so nothing about the approved appearance changes. */
.nft .nft-card--dark .tf-btn--secondary,
.nft .nft-card--dark .tf-btn--secondary:link,
.nft .nft-card--dark .tf-btn--secondary:visited,
.nft .nft-card--dark .tf-btn--secondary:hover,
.nft .nft-card--dark .tf-btn--secondary:focus,
.nft .nft-card--dark .tf-btn--secondary:focus-visible,
.nft .nft-card--dark .tf-btn--secondary:active {
  background: #fff;
  border-color: #fff;
  color: var(--trusty-blue-dark);
  text-decoration: none;
}

/* A control for a capability that does not exist yet has to look inert.
   The foundation's disabled state is tuned for a white page, so the dark
   card restates it against its own background. */
.nft .nft-card--dark .tf-btn:disabled {
  background: transparent;
  border-color: rgba(180, 191, 255, 0.45);
  color: #b4bfff;
  opacity: 1;
}

.nft .tf-btn--secondary:disabled {
  background: transparent;
  border-color: var(--trusty-line);
  color: var(--nft-label);
  opacity: 1;
}

/* ------------------------------------------------------------- typography -- */

/* The heading of an index page. Clear of the breadcrumb above it and well
   clear of the panel below: a title pressed against the next block reads as
   a label for that block rather than for the page. */
.nft-pagehead {
  margin: 10px 0 24px;
}

.nft-pagehead__lede {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--nft-sub);
  max-width: 62ch;
}

.nft-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 56px 0 20px;
}

.nft-section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 4vw, 35px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--trusty-ink);
}

.nft-muted {
  color: var(--nft-sub);
}

.nft-address {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-size: 13px;
  word-break: break-all;
}

/* ------------------------------------------------------------------ hero -- */

.nft-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3.5vw, 40px);
}

.nft-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 5.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--trusty-ink);
}

.nft-hero__lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--nft-sub);
  margin: 0 0 24px;
  max-width: 46ch;
}

.nft-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ----------------------------------------------------------------- stats -- */

/* Two columns, as in the handoff. The catalogue has three honest figures
   rather than the handoff's four, so the last tile spans the row instead of
   leaving a hole where a fourth would have gone. */
.nft-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.nft-stats > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.nft-stat {
  border: 1px solid var(--trusty-line);
  background: #fff;
  padding: 20px;
}

/* Inside the hero the tile sits on white, so it takes the tint to separate
   itself; standing on the page background it stays white for the same
   reason. */
.nft-hero .nft-stat {
  background: var(--trusty-tint);
}

.nft-stat__value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.2;
  color: var(--trusty-ink);
}

.nft-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--nft-label);
}

/* --------------------------------------------------------------- filters -- */

.nft-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 24px);
}

/* No flex-grow. A growing field stretches to swallow whatever is left on
   its row, which is how a six-filter bar ended up with one select running
   half the width of the page and a ragged second row under it. Fields keep
   their own width and wrap when they run out of room. */
.nft-filters .tf-field {
  flex: 0 1 190px;
  margin: 0;
}

/* The search box earns more room than a select, because what goes in it is
   a name rather than a word from a fixed list. */
.nft-filters .tf-field--wide {
  flex: 0 1 260px;
}

.nft-filters .tf-field__label {
  font-size: 15px;
  color: var(--nft-label);
  margin-bottom: 6px;
}

.nft-filters__actions {
  display: flex;
  gap: 10px;
}

/* Selects read as chips in the handoff, so they keep the pill the buttons
   use rather than the rectangle the panels use. */
.nft .nft-select {
  border-radius: 500px;
  border: 1px solid var(--trusty-line);
  background-color: #fff;
  padding-block: 10px;
}

/* ----------------------------------------------------------------- grids -- */

/* `auto-fill`, not `auto-fit`: a collection with two items should show two
   cards the size of every other card, not two cards stretched across the
   whole row. */
.nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

/* Sections that pair wider content — collections, creators, hub cards. */
.nft-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 32px;
}

/* The four how-it-works steps are a single row at desktop width. `auto-fit`
   with a 300px floor put three on one line and orphaned the fourth. */
.nft-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 991.98px) {
  .nft-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------- cards -- */

.nft-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.nft-card:hover {
  border-color: var(--trusty-blue-dark);
}

.nft-card__link {
  color: inherit;
  text-decoration: none;
}

.nft-card__link:hover,
.nft-card__link:focus,
.nft-card__link:focus-visible,
.nft-card__link:active,
.nft-card__link:visited {
  color: inherit;
  text-decoration: none;
}

.nft-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.nft-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--nft-label);
}

.nft-card__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  color: var(--trusty-ink);
}

.nft-card__sub {
  font-size: 14px;
  color: var(--nft-sub);
  margin: 0;
}

.nft-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--nft-hairline);
}

.nft-card__amount-label {
  display: block;
  font-size: 14px;
  color: var(--nft-label);
}

.nft-card__amount {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--trusty-blue-dark);
}

/* The card's top strip: the category or collection the work belongs to,
   above the artwork, as the approved card specifies. It is the same badge
   used everywhere else on the surface — no new chip. */
.nft-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nft-hairline);
}

.nft-card__collection {
  font-size: 14px;
  color: var(--nft-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Attributes that apply to this asset, between the artwork and the title. */
.nft-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The closing row: price on the left, edition on the right, each a label
   above its value so the two columns read as a pair rather than a sentence.
   `.nft-card__footer` already supplies the separator above it. */
.nft-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nft-card__stat--end {
  align-items: flex-end;
  text-align: right;
}

/* The artwork is a link as well as the title, and both lead to the same
   canonical address. The media link carries no decoration of its own: the
   card border already answers the hover. */
.nft-card__medialink {
  display: block;
  position: relative;
}

.nft-card__medialink:focus-visible {
  outline: none;
  box-shadow: var(--trusty-focus-ring);
}

/* ----------------------------------------------------------------- media -- */

.nft-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--trusty-tint);
  border-bottom: 1px solid var(--trusty-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


/* Media states.
   The box is already reserved by its aspect ratio, so none of this moves the
   page. What it adds is the two states a real catalogue needs: something
   deliberate to look at while the file is in flight, and one shared fallback
   when there is no file or the file does not arrive. Neither is a media
   subsystem — the image element still does all the work. */
.nft-media__skeleton {
  position: absolute;
  inset: 0;
  background: var(--trusty-tint);
  background-image: linear-gradient(
    100deg,
    var(--trusty-tint) 0%,
    #f4f6ff 45%,
    var(--trusty-tint) 70%
  );
  background-size: 300% 100%;
  animation: nft-media-shimmer 1.4s ease-in-out infinite;
}

@keyframes nft-media-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nft-media__skeleton { animation: none; }
}

/* Once the file has painted, the placeholder has nothing left to say. */
.nft-media.is-loaded .nft-media__skeleton,
.nft-media.is-failed .nft-media__skeleton {
  display: none;
}

.nft-media img,
.nft-media video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Collection banners and creator covers are crops, not artworks. */
.nft-media--cover {
  aspect-ratio: 16 / 7;
}

.nft-media--cover img {
  object-fit: cover;
}

/* The handoff draws missing artwork as a hatched placeholder rather than an
   empty box, so a card with no image still reads as a card. */
/* The fallback panel is always in the markup and shown only when the box has
   nothing to show — no file recorded, withheld, or requested and not
   returned. One panel covers all three, so a card is never empty and never
   renders a broken-image icon. */
.nft-media__missing {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  color: var(--nft-label);
  background-image: repeating-linear-gradient(
    45deg,
    #e7ebff 0,
    #e7ebff 6px,
    var(--trusty-tint) 6px,
    var(--trusty-tint) 12px
  );
}

.nft-card__art {
  position: relative;
}

.nft-media.is-failed .nft-media__missing {
  display: flex;
}

.nft-media__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--trusty-line);
  border-radius: 500px;
  padding: 4px 12px;
  font-size: 14px;
  color: var(--trusty-ink);
}

/* ---------------------------------------------------------------- badges -- */

.nft-badge {
  display: inline-block;
  border-radius: 500px;
  padding: 3px 10px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--trusty-tint);
  border: 1px solid var(--trusty-line);
  color: var(--trusty-blue-dark);
}

.nft-badge--live {
  background: var(--trusty-tint);
  border-color: var(--trusty-line);
  color: var(--trusty-blue-dark);
}

.nft-badge--accent {
  background: var(--trusty-blue-dark);
  color: #fff;
}

.nft-badge--muted {
  background: #fff;
  border-color: var(--trusty-line);
  color: var(--nft-sub);
}

.nft-badge--attention {
  background: #ffe9e9;
  border-color: #f0c9c9;
  color: #ce4242;
}

/* ------------------------------------------------------------ fact lists -- */

.nft-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.nft-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--nft-hairline);
  font-size: 15px;
}

.nft-facts__row:last-child {
  border-bottom: 0;
}

.nft-facts__row dt {
  color: var(--nft-label);
  font-weight: 400;
  margin: 0;
}

.nft-facts__row dd {
  margin: 0;
  color: var(--trusty-ink);
}

/* ------------------------------------------------------------ detail page -- */

/* The handoff's split is roughly 2.2:1 — a wide media and content column
   with a narrow buy rail beside it. That width is what lets Rights and terms
   sit three cards across, as it does in the design. */
.nft-detail {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.nft-detail__media {
  border: 1px solid var(--trusty-line);
  background: #fff;
}

.nft-detail__media .nft-media {
  border-bottom: 0;
}

.nft-detail__rail {
  position: sticky;
  top: 24px;
}

.nft-detail__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 35px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--trusty-ink);
}

.nft-amount {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--trusty-blue-dark);
}

.nft-amount__label {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--nft-label);
}

/* Secondary information is present but folded away, so the page leads with
   the asset rather than with an explanation of the asset. */
.nft-details > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
  color: var(--trusty-blue-dark);
}

.nft-details[open] > summary {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--nft-hairline);
}

/* ---------------------------------------------------------------- rights -- */

.nft-rights__row {
  padding: 12px 0;
  border-bottom: 1px solid var(--nft-hairline);
}

.nft-rights__row:last-child {
  border-bottom: 0;
}

.nft-rights__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-weight: 600;
}

.nft-rights__state {
  border-radius: 500px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid var(--trusty-line);
}

.nft-rights__state--granted {
  background: var(--trusty-tint);
  color: var(--trusty-blue-dark);
}

.nft-rights__state--none {
  background: #fff;
  color: var(--nft-sub);
}

.nft-rights__statement {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nft-sub);
}

/* -------------------------------------------------------------- activity -- */

.nft-activity {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.nft-activity th,
.nft-activity td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--nft-hairline);
}

.nft-activity th {
  color: var(--nft-label);
  font-weight: 400;
}

/* ------------------------------------------------------- how it works ---- */

.nft-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--trusty-blue-dark);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}

/* ------------------------------------------------------- answers / notes -- */

.nft-answer__q {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--trusty-ink);
}

.nft-answer__a {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nft-sub);
}

/* ------------------------------------------------------------- dark band -- */

.nft-band {
  margin-top: 60px;
  background: var(--nft-band);
  color: #fff;
  border-radius: var(--nft-cut);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nft-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nft-band__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #fff;
}

.nft-band__text {
  margin: 0;
  color: #b4bfff;
  max-width: 56ch;
}

.nft-band .tf-btn--secondary,
.nft-band .tf-btn--secondary:link,
.nft-band .tf-btn--secondary:visited,
.nft-band .tf-btn--secondary:hover,
.nft-band .tf-btn--secondary:focus,
.nft-band .tf-btn--secondary:focus-visible,
.nft-band .tf-btn--secondary:active {
  background: #fff;
  border-color: #fff;
  color: var(--trusty-blue-dark);
  text-decoration: none;
}

/* The band sits on the dark navy panel, so its primary button keeps the
   white label in every state as well. */
.nft-band .tf-btn--primary,
.nft-band .tf-btn--primary:link,
.nft-band .tf-btn--primary:visited,
.nft-band .tf-btn--primary:hover,
.nft-band .tf-btn--primary:focus,
.nft-band .tf-btn--primary:focus-visible,
.nft-band .tf-btn--primary:active {
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------- asset detail blocks ----
   The handoff's asset page carries four blocks under the media: About,
   Properties, Token rules and Rights and terms. Each is plain structure on
   the same rectangle as everything else; none of them introduces a colour or
   a radius that is not already in this file. */

/* Properties: bordered key/value tiles, four across at desktop width. */
.nft-props {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 12px;
  margin: 0;
}

.nft-props__cell {
  border: 1px solid var(--trusty-line);
  background: var(--trusty-tint);
  padding: 12px 14px;
}

.nft-props__cell dt {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--nft-label);
}

.nft-props__cell dd {
  margin: 0;
  font-weight: 600;
  color: var(--trusty-ink);
}

/* Token rules: a label, the value, and the sentence that says what the value
   means. The third line is the point of the block — "Clawback: Enabled" on
   its own tells a buyer nothing about what can be done to them. */
.nft-rules {
  margin: 0;
  border: 1px solid var(--trusty-line);
}

.nft-rules__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--nft-hairline);
}

.nft-rules__row:last-child {
  border-bottom: 0;
}

.nft-rules__row dt {
  margin: 0;
  font-weight: 400;
  color: var(--nft-label);
}

.nft-rules__row dd {
  margin: 0;
}

.nft-rules__value {
  display: block;
  font-weight: 600;
  color: var(--trusty-ink);
}

.nft-rules__value--attention {
  color: #a96c10;
}

.nft-rules__value--accent {
  color: var(--trusty-blue-dark);
}

.nft-rules__note {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: var(--nft-sub);
}

/* Rights and terms: the same statements as before, in the handoff's card
   row. Every category still prints, including the ones that grant nothing —
   an omitted row is read as a right the holder has. */
.nft-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin: 0;
}

.nft-terms__card {
  border: 1px solid var(--trusty-line);
  background: #fff;
  padding: 16px;
}

.nft-terms__label {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--nft-label);
}

.nft-terms__verdict {
  margin: 0 0 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--trusty-ink);
}

.nft-terms__statement {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nft-sub);
}

/* The disclaimer sits under the cards, in a panel of its own, because it
   qualifies all of them rather than any one. */
.nft-disclaimer {
  margin: 16px 0 0;
  border: 1px solid var(--trusty-line);
  background: var(--trusty-tint);
  padding: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nft-sub);
}

/* ------------------------------------------- how it works, as in handoff --
   Four columns separated by vertical rules rather than four boxes. The
   separator is drawn on the left edge of every column but the first, and is
   dropped when the row wraps to one column. */
.nft-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--trusty-line);
  background: #fff;
}

.nft-steps__item {
  padding: clamp(18px, 2.2vw, 28px);
  border-left: 1px solid var(--trusty-line);
}

.nft-steps__item:first-child {
  border-left: 0;
}

@media (max-width: 991.98px) {
  .nft-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nft-steps__item:nth-child(odd) {
    border-left: 0;
  }

  .nft-steps__item:nth-child(n + 3) {
    border-top: 1px solid var(--trusty-line);
  }
}

@media (max-width: 575.98px) {
  .nft-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .nft-steps__item {
    border-left: 0;
  }

  .nft-steps__item + .nft-steps__item {
    border-top: 1px solid var(--trusty-line);
  }
}

/* --------------------------------------------------- centred CTA band -----
   The handoff centres the band's copy and sets translucent squares behind
   it. The squares are decorative only and are drawn with gradients rather
   than markup, so they carry nothing for a screen reader to announce. */
.nft-band--centred {
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.nft-band--centred::before,
.nft-band--centred::after {
  content: '';
  position: absolute;
  width: 88px;
  height: 88px;
  background: rgba(180, 191, 255, 0.08);
  pointer-events: none;
}

.nft-band--centred::before {
  top: 26px;
  left: 56px;
}

.nft-band--centred::after {
  bottom: 30px;
  right: 72px;
  width: 64px;
  height: 64px;
}

.nft-band--centred .nft-band__text {
  margin-inline: auto;
}

/* ------------------------------------------------- grid / list toggle ----
   The handoff's segmented control, sitting at the right of the filter bar.
   It is built from two links rather than a script, so it works with
   JavaScript off and each view has its own address that can be linked,
   bookmarked and returned to. */

.nft-toggle {
  display: inline-flex;
  border: 1px solid var(--trusty-line);
  border-radius: 500px;
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
}

.nft-toggle__option {
  padding: 8px 20px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--trusty-ink);
  text-decoration: none;
  white-space: nowrap;
}

.nft .nft-toggle__option:hover,
.nft .nft-toggle__option:focus,
.nft .nft-toggle__option:focus-visible,
.nft .nft-toggle__option:active,
.nft .nft-toggle__option:visited {
  background: var(--trusty-tint);
  color: var(--trusty-ink);
  text-decoration: none;
}

/* Grid and List are the same control as the buttons around them; the active
   one is a dark fill and its label stays white whatever a global link rule
   would otherwise do to it. */
.nft .nft-toggle__option[aria-current='true']:hover,
.nft .nft-toggle__option[aria-current='true']:focus,
.nft .nft-toggle__option[aria-current='true']:focus-visible,
.nft .nft-toggle__option[aria-current='true']:active,
.nft .nft-toggle__option[aria-current='true']:visited {
  background: var(--trusty-blue-dark);
  color: #fff;
}

.nft .nft-toggle__option:focus-visible {
  outline: none;
  box-shadow: var(--trusty-focus-ring);
}

.nft .nft-toggle__option[aria-current='true'] {
  background: var(--trusty-blue-dark);
  color: #fff;
}

/* The count and the toggle sit together at the end of the bar, so the
   selects keep the space they need at every width. */
.nft-filters__tail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* ------------------------------------------------------------ list view --
   Screen 15 of the handoff: a thumbnail, the title and its attribution, then
   the same facts the card shows, in columns. */

.nft-list {
  display: grid;
  gap: 12px;
}

.nft-list__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 2.2fr) repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
}

.nft-list__thumb {
  width: 64px;
  height: 64px;
  background: var(--trusty-tint);
  border: 1px solid var(--trusty-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nft-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nft-list__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 2px;
}

.nft-list__sub {
  margin: 0;
  font-size: 14px;
  color: var(--nft-sub);
}

.nft-list__label {
  display: block;
  font-size: 14px;
  color: var(--nft-label);
  margin-bottom: 2px;
}

.nft-list__value {
  display: block;
  font-weight: 600;
  color: var(--trusty-ink);
}

.nft-list__value--amount {
  font-family: 'Poppins', sans-serif;
  color: var(--trusty-blue-dark);
}

.nft-list__cell--end {
  text-align: right;
}

@media (max-width: 991.98px) {
  .nft-list__row {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: 12px;
  }

  .nft-list__cell {
    grid-column: 2;
  }

  .nft-list__cell--end {
    text-align: left;
  }
}

/* ------------------------------------------------- navigation and states -- */

/* The trail is an ordered list for assistive technology and for the
   BreadcrumbList it mirrors; visually it is a single line of separated
   labels, so the list markers and indent are removed. */
.nft-breadcrumb {
  font-size: 15px;
  color: var(--nft-label);
  margin-bottom: 16px;
}

.nft-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nft-breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--trusty-line);
}

/* Pagination, as the handoff draws it: circular controls at the right-hand
   end of the catalogue, arrows at each end and the current page filled.
   Targets stay at 44px so they can still be hit on a phone, and the current
   page keeps `aria-current`, so it is never announced by colour alone. */
.nft-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 32px;
}

.nft-pagination a,
.nft-pagination > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--trusty-line);
  border-radius: 50%;
  background: #fff;
  font-size: 15px;
  line-height: 1;
  color: var(--trusty-ink);
  text-decoration: none;
}

.nft .nft-pagination a:hover {
  border-color: var(--trusty-blue-dark);
  color: var(--trusty-blue-dark);
  text-decoration: none;
}

.nft-pagination [aria-current='page'] {
  background: var(--trusty-blue-dark);
  border-color: var(--trusty-blue-dark);
  color: #fff;
  font-weight: 600;
}

/* An end that cannot be followed is visibly inert rather than silently
   dead — it keeps its place so the row does not shift between pages. */
.nft-pagination .is-disabled {
  color: var(--nft-label);
  background: transparent;
}

/* An ellipsis between page runs is a separator, not a control. */
.nft-pagination > span.is-disabled[aria-hidden='true'] {
  border-color: transparent;
  min-width: 0;
  padding: 0 4px;
}

.nft-resultcount {
  font-size: 15px;
  color: var(--nft-sub);
}

.nft-empty {
  border: 1px dashed var(--trusty-line);
  background: #fff;
  padding: 40px 24px;
  text-align: center;
  color: var(--nft-sub);
}

.nft-notice {
  border: 1px solid #f0c9c9;
  background: #ffe9e9;
  color: #ce4242;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 15px;
}

.nft-notice--success {
  border-color: var(--trusty-line);
  background: var(--trusty-tint);
  color: var(--trusty-blue-dark);
}

.nft-report {
  margin-top: 32px;
}

.nft-report > summary {
  cursor: pointer;
  font-size: 15px;
  color: var(--nft-sub);
}

.nft-report__form {
  display: grid;
  gap: 16px;
  max-width: 520px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--trusty-line);
  background: #fff;
}

.nft-report__form label {
  display: block;
  font-size: 15px;
  color: var(--nft-label);
  margin-bottom: 6px;
}

.nft-report__form select,
.nft-report__form input,
.nft-report__form textarea {
  width: 100%;
  border: 1px solid var(--trusty-line);
  border-radius: 0;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  color: var(--trusty-ink);
}

.nft-report__form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Collection and creator headers: the portrait sits beside the copy rather
   than in a half-width column of its own, which is what `.nft-hero` would
   have given a 96px image. */
.nft-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
  padding: clamp(24px, 3.5vw, 40px);
}

.nft-profile .nft-hero__title {
  margin-top: 6px;
}

@media (max-width: 575.98px) {
  .nft-profile {
    grid-template-columns: minmax(0, 1fr);
  }
}

.nft-profile__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--trusty-line);
  background: var(--trusty-tint);
}

/* A creator is a person or a studio and takes the circle the handoff gives
   avatars; a collection is a body of work and keeps the rectangle. */
.nft-profile__avatar--square {
  border-radius: 0;
  object-fit: cover;
}

.nft-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 991.98px) {
  .nft-hero,
  .nft-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .nft-detail__rail {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .nft {
    padding: 20px 0 40px;
  }

  .nft-section-head {
    margin-top: 40px;
  }

  .nft-grid,
  .nft-grid--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .nft-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .nft-band {
    border-radius: 0;
  }
}

/* ------------------------------------------------------- more in the hub --
   Three cards of one structure: a heading, a short paragraph, two columns of
   metrics, and the call to action on the bottom edge. The row reads as a row
   because every card is built the same way and every card ends at the same
   place, which is what the approved section specifies and what the
   implementation had drifted away from.

   Nothing here is a new visual language: the card, the badge, the fact list
   and the button are the ones already on this surface, and the signature
   bottom-right cut is the existing `--nft-cut`. */
.nft-hubcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}

.nft-hubcard__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nft-sub);
}

/* Metrics in two columns, as the design has them — a single stacked list is
   the drift this restores. */
.nft-hubcard__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 6px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--nft-hairline);
}

.nft-hubcard__metric dt {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--nft-label);
}

.nft-hubcard__metric dd {
  margin: 2px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--trusty-ink);
}

/* The call to action holds the bottom edge whatever length the paragraph
   above it runs to, so the three cards line up. */
.nft-hubcard__cta {
  margin-top: auto;
  padding-top: 16px;
}

.nft .nft-card--dark .nft-hubcard__metrics {
  border-top-color: rgba(180, 191, 255, 0.25);
}

.nft .nft-card--dark .nft-hubcard__metric dt {
  color: #b4bfff;
}

.nft .nft-card--dark .nft-hubcard__metric dd,
.nft .nft-card--dark .nft-hubcard__text {
  color: #fff;
}

.nft .nft-card--dark .nft-hubcard__text {
  color: #b4bfff;
}

/* ------------------------------------------------- rights and terms gap --
   The rights block was running straight on from the block above it, so the
   two read as one panel. This is spacing only: no card, colour, type or
   rights wording changes with it. */
.nft-rights-block {
  margin-top: 40px !important;
}

@media (max-width: 767.98px) {
  .nft-rights-block {
    margin-top: 32px !important;
  }
}

/* ------------------------------------------------- asset metadata strip --
   The facts about the work, directly under the artwork: edition, what kind
   of thing it is, the collection it belongs to and who made it. One row that
   wraps, in the surface's existing muted type, so it reads as a caption to
   the image rather than as a second heading competing with the title. */
.nft-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nft-sub);
}

.nft-detail__metaitem {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.nft-detail__metalabel {
  color: var(--nft-label);
}

/* ------------------------------------------------------- creator avatar --
   A small round identity mark beside the creator's name on their card. It
   uses the surface's existing badge geometry and tokens; the initials variant
   is the same shape with the name's first letters in it, so a profile with no
   artwork still reads as a profile rather than as a gap. */
.nft-creator__avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 500px;
  border: 1px solid var(--trusty-line);
  background: var(--trusty-tint);
  object-fit: cover;
}

.nft-creator__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--trusty-blue-dark);
}