/* ===================== SETTINGS PANEL ===================== */
/* The panel element also carries .atmos-panel, so the surface, blur, radius,
   geometry, tokens and open/close motion are the Atmosphere primitive 1:1.
   Everything below is layout only. Monochrome: white through grey on black. */

/* trigger — button size, hit area and colour stay the shared .icon-btn treatment */
.icon-btn .set-gear { stroke-width: 1.25; }

/* A definite height, so no tab can resize the panel and the drill-ins inherit
   the same box. Matches Atmosphere's outer height: 36 padding-top + 54 header
   + 70 tabs + 360 body + 33 footer + 32 padding-bottom. The inherited
   max-height: calc(100vh - 240px) still clamps it on a short window, where the
   body scrolls rather than the cards squashing. */
.settings-panel {
  gap: 20px;
  height: 585px;
}

/* header — Atmosphere's own row: the panel's mark and title on the left, the
   tab bar its own full-width row underneath. */
.set-header { flex: 0 0 auto; padding: 0; }
.set-title { align-items: flex-start; }
.set-title .atmos-title__icon { margin-top: 1px; }
.set-titleblock { min-width: 0; }
.set-meta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
}
.set-tabs { flex: 0 0 auto; position: relative; margin-bottom: 0; }
/* one underline that travels, in place of the per-tab mark */
.set-tabs .atmos-tab.is-active::after { content: none; }
.set-tabs__ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--wear-primary);
  pointer-events: none;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
/* first placement, and any re-measure, must not read as a slide */
.set-tabs__ink.is-instant { transition: none; }

/* body — never a scrolling region. A tab always fits the panel it sits in: the
   grids are laid out in fr, so a short window shrinks the cards rather than
   pushing any of them out of sight. */
.settings-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@keyframes set-tab-in-right {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes set-tab-in-left {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: none; }
}
.set-enter--right { animation: set-tab-in-right 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.set-enter--left { animation: set-tab-in-left 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.settings-panel.is-reduced-motion .set-enter--right,
.settings-panel.is-reduced-motion .set-enter--left,
.settings-panel.is-reduced-motion .set-tabs__ink { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .set-enter--right,
  .set-enter--left { animation: none; }
  .set-tabs__ink { transition: none; }
}

/* footer — fixed, identical on every tab */
.set-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.set-footer {
  gap: 9px;
  font-size: 11px;
  font-weight: 300;
  color: var(--wear-muted);
}
.set-footer__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.4;
}

/* ---- shared card system ---- */
/* Rows are fr throughout, so each tab keeps its own proportions while filling
   the one body height; the min-height floor is the old intrinsic height, which
   is what scrolls into view instead of squashing on a short window. */
.set-grid {
  flex: 1 1 auto;
  min-height: 0;
  /* the panel measures its body and writes the factor: a short window scales
     the whole tab down instead of clipping the cards' content */
  zoom: var(--set-zoom, 1);
  /* type carries a second factor on top of the zoom, so a short window keeps
     the copy readable while the boxes and artwork take the shrink */
  --set-text: var(--set-text-scale, 1);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 12px;
}
.set-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--wear-primary);
  transition: background 0.15s ease;
}
.set-card:hover,
.set-card:focus-within { background: rgba(255, 255, 255, 0.06); }
button.set-card {
  width: 100%;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
button.set-card:focus-visible,
.set-memrow:focus-visible,
.set-linkbtn:focus-visible,
.set-profile__manage:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: -2px;
  border-radius: 10px;
}
.set-card__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.set-card__title {
  font-size: calc(14px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.set-card__value {
  font-size: calc(13px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}

/* chevron affordance */
.set-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
  color: var(--wear-muted);
  transition: color 0.2s ease;
}
.set-card--chev > .set-chev {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}
.set-card--chev:hover > .set-chev,
.set-card--chev:focus-visible > .set-chev { color: var(--wear-primary); }

/* toggle host: the whole card is the switch, with a state row under the text, a
   hint in the bottom-right corner and the on state carried by the card edge */
.set-card--toggle,
.set-card--source,
.set-card--neva,
.set-card--adapt {
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.set-card--toggle.is-on,
.set-card--source.is-on,
.set-card--neva.is-on,
.set-card--adapt.is-on {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}
.set-card--toggle:not(.is-on) > *,
.set-card--source:not(.is-on) > *,
.set-card--neva:not(.is-on) > *,
.set-card--adapt:not(.is-on) > * { opacity: 0.55; }

.set-toggle__state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}
.set-toggle__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid var(--wear-muted);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.is-on .set-toggle__dot {
  background: var(--wear-primary);
  border-color: var(--wear-primary);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}
/* the state and the hint share the text column's last line: the state at the
   column's left edge, the hint at its right, so neither needs card-bottom room */
.set-toggle__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.set-toggle__hint {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-left: auto;
  font-size: calc(11px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  opacity: 0.7;
  pointer-events: none;
}
.set-toggle__hinttext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-toggle__cursor { width: 13px; height: 13px; flex-shrink: 0; display: block; }
/* the cards with room under their text read better with the hint in the corner
   the card has spare, the way Neva Voice already does */
.set-card--adapt > .set-toggle__hint,
.set-card--remember > .set-toggle__hint {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  margin-left: 0;
  max-width: calc(100% - 40px);
}

/* ---- graphics ---- */
.set-gfx {
  display: block;
  pointer-events: none;
  color: var(--wear-secondary);
}
/* Drawn wave, layer 1 of the card: absolute, so it is never in the text's
   flow. Each plate is transparent with its ink in a narrow band, and the band
   below is what isolates it — the plate covers the region and the empty margin
   above and below the line is cropped away by the region's own box. */
.set-art--wave {
  position: absolute;
  z-index: 0;
  left: 80px;
  right: -30px;
  bottom: var(--art-drop);
  height: var(--art-band);
  overflow: hidden;
  pointer-events: none;
  /* a line never ends abruptly against the card's edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.set-art--wave img {
  display: block;
  width: 110%;
  height: 100%;
  object-fit: cover;
  /* one plate width on every wave card, so the ink draws at one scale and the
     lines are level by construction rather than by the card's own width */
  max-width: var(--art-plate);
  margin: 0 auto;
  /* the plates' ink sits just below the plate's midline, so crop on the line */
  object-position: center 55%;
  /* forces every stroke to pure white while keeping the plate's own alpha */
  filter: brightness(0) invert(1) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.7));
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.set-card__stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Neva figure — fills the whole card behind the text and toggle, with the
   shared graphic edge fade. Both sit above it on their own z-index. */
.set-card__stage--neva {
  position: absolute;
  inset: 34px 10px 10px;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* The source is drawn faint grey on white. Invert puts it on black, brightness
   lifts the figure back up while black stays black, and screen drops that black
   so only the light lands on the card surface. */
.neva-art {
  display: block;
  width: 110%;
  height: 120%;
  margin-top: -20px;
  object-fit: contain;
  /* The source carries ~17% empty margin sideways and ~11% top and bottom.
     Scaling past it crops the margin away and lets the figure fill the stage;
     the nudge re-centres the artwork, which sits slightly above centre. */
  transform: scale(1.2) translateY(14px);
  filter: invert(1) grayscale(1) brightness(8.6) contrast(1.15)
          drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  mix-blend-mode: screen;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  animation: neva-breathe 7s ease-in-out infinite alternate;
}
@keyframes neva-breathe {
  from { opacity: 0.86; }
  to { opacity: 1; }
}
.settings-panel.is-reduced-motion .neva-art { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .neva-art { animation: none; opacity: 1; }
}
.set-card__stage--nodes .cog-glyph {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.5;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* layer 1 of the Cognitive Adaptation card: the same mark box as Strength,
   taken out of the flex flow so the text and the foot keep their places */
.set-card__stage--nodes {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 92px;
  transform: translateX(-50%);
  width: var(--art-mark);
  height: var(--art-mark);
  pointer-events: none;
}
.set-card__stage--nodes .cog-glyph circle { fill: currentColor; stroke: none; }

.set-lockfield {
  position: relative;
  flex: 0 1 auto;
  width: 168px;
  height: 168px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wear-secondary);
}
.set-gfx--lockring { position: absolute; inset: 0; width: 100%; height: 100%; }
.set-gfx--lock { width: 60px; height: 60px; opacity: 0.6; }

/* ---- tab: You ---- */
/* Two equal halves over three rows. The rows carry the reference's proportions
   rather than its pixels, so the whole tab rides the panel's height down. */
.set-grid--you {
  grid-template-rows: minmax(0, 112fr) minmax(0, 64fr) minmax(0, 44fr);
}
.set-card--profile {
  grid-column: 1 / 7;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: space-between;
  column-gap: 14px;
  row-gap: 10px;
}
.set-avatar {
  grid-row: 1;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgb(111 111 111 / 20%);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.set-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wear-secondary);
}
.set-avatar__glyph { width: 38px; height: 38px; display: block; }
.set-profile__id { grid-row: 1; min-width: 0; margin-top: -5px; }
.set-profile__name {
  font-size: calc(18px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.set-profile__email {
  margin-top: 4px;
  font-size: calc(13px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}
.set-profile__location {
  margin-top: 4px;
  font-size: calc(12px * var(--set-text, 1));
  font-weight: 300;
  color: var(--wear-muted);
}
.set-profile__chip {
  grid-row: 1;
  align-self: start;
  width: 38px;
  height: 26px;
  margin-left: 30px;
  padding: 0 7px;
}
.set-card--profile .set-profile__sub {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  align-self: center;
}
.set-profile__manage {
  grid-column: 3;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: -17px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(13px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.set-profile__manage .set-chev { width: 19px; height: 19px; margin-top: 4px; }
.set-profile__manage:hover .set-chev,
.set-profile__manage:focus-visible .set-chev { color: var(--wear-primary); }

.set-card--credits {
  grid-column: 7 / 13;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.set-credits__head { display: flex; align-items: baseline; gap: 8px; }
.set-credits__value {
  font-size: calc(22px * var(--set-text, 1));
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--wear-primary);
}
.set-credits__label {
  font-size: calc(12px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}
.set-credits__track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.set-credits__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wear-primary);
}
.set-credits__scale {
  display: flex;
  justify-content: space-between;
  font-size: calc(11px * var(--set-text, 1));
  font-weight: 300;
  color: var(--wear-muted);
}

.set-card--plan,
.set-card--renew {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}
.set-card--plan { grid-column: 1 / 7; }
.set-card--renew { grid-column: 7 / 13; }
.set-card--plan .set-card__value,
.set-card--renew .set-card__value { margin-left: auto; }
.set-card__glyph {
  width: 20px;
  height: 22px;
  flex-shrink: 0;
  display: block;
  color: var(--wear-primary);
}

.set-signout {
  grid-column: 1 / 13;
  grid-row: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  border: none;
  background: transparent;
  padding: 6px 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(15px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
  transition: color 0.2s ease;
}
.set-signout:hover { color: var(--wear-primary); }
.set-signout:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  border-radius: 8px;
}
.set-signout__glyph { width: 18px; height: 18px; flex-shrink: 0; display: block; }

/* ---- tab: Your Neura ---- */
/* One baseline for every piece of artwork on this tab, so the five cards read
   as one rhythm: the same clearance from a card's left and right border, one
   band height for the waves and one box for the marks. Never set per card. */
.set-grid--neura {
  grid-template-rows: minmax(0, 96fr) minmax(0, 140fr);
  --art-inset: 10px;
  --art-band: 20px;
  --art-drop: 16px;
  --art-plate: 150px;
  --art-mark: 40px;
}
.set-card--neva {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* the hint leaves the state line and takes the corner the card has spare */
.set-card--neva > .set-toggle__hint {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  margin-left: 0;
  max-width: calc(100% - 40px);
}
/* a long line truncates rather than running under a wave or a control */
.set-grid--neura .set-card__title,
.set-grid--neura .set-card__value {
  max-width: calc(100% - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-card--tone { grid-column: 6 / 10; grid-row: 1; }
.set-card--tone .set-art--wave { bottom: var(--art-inset); height: 30px; }
.set-card--tone .set-art--wave img { max-width: 250px; object-position: center 53%; }
.set-card--speaks { grid-column: 10 / 13; grid-row: 1; }
.set-card--adapt {
  grid-column: 6 / 10;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.set-stack {
  grid-column: 10 / 13;
  grid-row: 2;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 64fr) minmax(0, 64fr);
  gap: 12px;
}
.set-stack .set-card {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* the shortest card on the tab */
/* the hint now owns this card's lower line, so the band rides beside the title */
.set-card--deepflow .set-art--wave {
  left: 58%;
  right: var(--art-inset);
  top: 10px;
  bottom: auto;
  height: 22px;
  transform: none;
}

/* ---- tab: Your Data ---- */
.set-grid--data { grid-template-rows: minmax(0, 96fr) minmax(0, 140fr); }
.set-card--privacy {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}
.set-privacy__title {
  margin-top: 8px;
  font-size: calc(17px * var(--set-text, 1));
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.set-privacy__note {
  margin-top: 6px;
  font-size: calc(12px * var(--set-text, 1));
  font-weight: 300;
  color: var(--wear-muted);
}
.set-card--remember { grid-column: 5 / 9; grid-row: 1; }
.set-card--memory {
  grid-column: 9 / 13;
  grid-row: 1;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.set-memrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 44px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--wear-primary);
}
.set-memrow:hover .set-chev,
.set-memrow:focus-visible .set-chev { color: var(--wear-primary); }
.set-divider { display: block; flex: 0 0 1px; height: 1px; background: rgba(255, 255, 255, 0.07); }

.set-sources {
  grid-column: 5 / 13;
  grid-row: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 72px;
  grid-template-rows: minmax(0, 64fr) minmax(0, 64fr);
  gap: 12px;
}
.set-card--source {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.set-card--add {
  grid-column: 4;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.set-add__glyph {
  font-size: calc(20px * var(--set-text, 1));
  line-height: 1;
  font-weight: 300;
  color: var(--wear-muted);
}
.set-add__label {
  font-size: calc(12px * var(--set-text, 1));
  font-weight: 300;
  color: var(--wear-muted);
}
.set-card--add:hover .set-add__glyph,
.set-card--add:hover .set-add__label { color: var(--wear-secondary); }

/* ---- tab: The App ---- */
.set-grid--app { grid-template-rows: minmax(0, 96fr) minmax(0, 96fr) minmax(0, 72fr); }
.set-card--notif { grid-column: 1 / 9; grid-row: 1; }
/* the widest card on the panel: its state reads better up in the free corner
   than beside the hint, so it alone leaves the foot line */
.set-card--notif .set-toggle__state {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.set-card--notif .set-art--notif {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 420px;
  height: 78px;
  transform: translate(-50%, -50%);
}
.set-card--notif .set-art--notif img {
  object-position: center;
  max-width: none;
  margin-top: -10px;
  opacity: 0.75;
}
.set-card--quiet { grid-column: 9 / 13; grid-row: 1; }
.set-card--quiet .set-art--quiet {
  left: auto;
  right: 32px;
  top: 50%;
  bottom: auto;
  width: 214px;
  height: 78px;
  transform: translateY(-50%);
}
.set-card--quiet .set-art--quiet img {
  object-position: center;
  max-width: none;
  margin-left: 17px;
  opacity: 0.75;
}
.set-card--text { grid-column: 1 / 5; grid-row: 2; }
.set-aa {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(34px * var(--set-text, 1));
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  opacity: 0.55;
  pointer-events: none;
}
.set-card--motion { grid-column: 5 / 9; grid-row: 2; }
.set-card--contrast { grid-column: 9 / 13; grid-row: 2; }
.set-card--version {
  grid-column: 1 / 13;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
}
.set-card--version > .set-card__title { position: relative; z-index: 1; }
/* the only plate that is centred rather than banded: the card's middle is
   empty, with the version on one side and the links on the other */
.set-art--version {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 460px;
  height: 56px;
  transform: translate(-50%, -50%);
}
.set-art--version img {
  object-fit: cover;
  /* the plate's ink sits just under its midline, so the crop rides with it */
  object-position: center 47%;
  max-width: none;
  margin-top: 4px;
  margin-left: -66px;
  opacity: 0.55;
}
.set-version__links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 32px;
}
.set-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(12px * var(--set-text, 1));
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  transition: color 0.2s ease;
}
.set-linkbtn:hover { color: var(--wear-secondary); }